Skip to content

上
上药订单生命周期升级
Commit ffe199f3 authored by xiejb's avatar xiejb
Browse files
Options

添加订单列表

parent eb413807
Show whitespace changes
Inline Side-by-side
Showing with 193 additions and 31 deletions
src/views/myOrder/index.vue
View file @ ffe199f3
<template>
<div class="myOrder">
<div id="myOrder">
<van-tabs class="tabs" v-model="activeTab">
<van-tab title="全部">
<my-order-list/>
......@@ -52,8 +52,6 @@ export default {
// 给window添加一个popstate事件，拦截返回键，执行this.onBrowserBack事件，addEventListener需要指向一个方法
window.addEventListener('popstate', this.onBrowserBack, false)
this.checkUserType()
},
destroyed() {
// 当页面销毁必须要移除这个事件，vue不刷新页面，不移除会重复执行这个事件
......@@ -100,6 +98,15 @@ export default {
<style lang="scss" scoped>
#myOrder {
height: calc(100vh - 104px);
height: 100%;
.tabs {
height: calc(100vh - 46px);
/deep/ .van-tab {
max-width: 23%;
}
/deep/ .van-tab__pane {
height: calc(100vh - 90px);
}
}
}
</style>
src/views/myOrder/myOrderList.vue
View file @ ffe199f3
<template>
<div class="myOrderList">
<div id="myOrderList">
<div class="content">
<van-pull-refresh class="list" ref="supplierList" v-model="isRefreshing" @refresh="onRefresh">
<van-list
v-model="isLoading"
:finished="finished"
:finished-text="finishedText"
finished-text="没有更多了"
:error.sync="error"
error-text="请求失败，点击重新加载"
@load="onLoad">
<div class="orderItem"
v-for="(item, index) in resultItemList"
:key="index"
@click="getCertificate(item)">
<van-row>
<van-col class="normal-normal-font" span="7">商品名称:</van-col>
<van-col
span="17"
>{{item.comGoodsId}}/({{item.goodsOpcode}}){{item.goodsName}}/{{item.goodsDesc}}/{{item.productLocation}}/{{item.packageNum}}/{{item.unitName}}</van-col>
</van-row>
v-for="(item, index) in orderList"
:key="index">
<div class="itemInfo">
<div class="orderNum">
<div class="num">订单号：34678649876</div>
<div class="dian"></div>
<div class="numType">
<span>已开单</span>
</div>
</div>
<div class="divider"></div>
<div class="orderInfo">
<div class="company">
<span style="width: 83%">上药控股有限公司</span>
<span style="margin-right: 5px;">共8件</span>
<van-icon style="margin: auto 0;" color="#1989fa" name="arrow" />
</div>
<div class="info">
<div class="headImage">
<van-image width="55" height="55"
src="https://img01.yzcdn.cn/vant/cat.jpeg"/>
</div>
<div class="details">
<div class="titleInfo">
[132521]阿西匹林/0.25g*s/上海市浦东新区金科路长泰广场负一楼
</div>
<div class="priceInfo">
<div class="price">￥<span style="color:red;">10.5</span></div>
<div class="numBer">X 8</div>
</div>
</div>
</div>
<div class="orderTime">
<van-icon size="20" style="margin: auto 0; width: 10%;" name="clock-o" />
<span style="width: 50%;">2020-11-10 18:09:33</span>
<div class="price">总计：￥<span style="color:red;">10.5</span></div>
</div>
<van-divider :style="{ color: '#999999', borderColor: '#999999', margin: '15px 0 10px 0'}"/>
<div class="btnInfo" style="text-align: right;">
<van-button plain size="small" type="info">产看发票</van-button>
<van-button plain size="small" type="info">查看物流</van-button>
<van-button plain size="small" type="info">清货单</van-button>
</div>
</div>
</div>
</div>
</van-list>
</van-pull-refresh>
</div>
</div>
</template>
<script>
......@@ -57,11 +95,12 @@ export default {
}
},
mounted() {
// this.onLoad()
},
methods: {
onRefresh() {
this.currentPage = 1
this.finished = false
this.isRefreshing = true
this.getPostData()
},
onLoad() {
......@@ -78,13 +117,35 @@ export default {
}
getMyOrderList(data).then(rt => {
if (rt.code === 1 || rt.code === '1') {
if (_this.isRefreshing) {
_this.orderList = rt.data
} else if (rt.data || rt.data.length > 0) {
_this.orderList = _this.orderList.concat(rt.data)
}
// 重置刷新提示
_this.isRefreshing = false
// 重置加载更多提示
_this.isLoading = false
if (rt.data.length < 10) {
_this.finished = true
} else {
// 加载成功后下一页自增1
_this.currentPage++
}
} else {
_this.$toast(rt.message)
_this.isRefreshing = false
_this.error = true
_this.finished = false
}
// 加载状态结束
_this.isLoading = false
}).catch(e => {
_this.$toast('列表获取失败')
this.$toast('获取信息失败！')
_this.isRefreshing = false
_this.isLoading = false
_this.error = true
// _this.finished = true
_this.finished = true
})
}
}
......@@ -93,6 +154,100 @@ export default {
<style lang="scss" scoped>
#myOrderList {
height: calc(100vh - 104px);
height: 100%;
.content{
height: 100%;
overflow-x: hidden;
overflow-y: auto;
padding: 10PX;
.orderItem{
height: 250PX;
background-color: white;
margin-bottom: 10PX;
border-radius: 10PX;
font-size: 14PX;
color: #333333;
.itemInfo{
.divider{
width: 100%;
height: 1px;
background: linear-gradient(to right, #ccc 0%, #ccc 50%, transparent 50%);
background-size: 10px 1px;
background-repeat: repeat-x;
}
.orderNum{
display: flex;
line-height: 45PX;
height: 45px;
margin: 0px 10px;
.num{
width: 80%;
}
.dian{
width: 10PX;
height: 10PX;
border-radius: 10PX;
background-color: red;
margin: auto 5px
}
.numType{
width: 20%;
text-align: right
}
}
.orderInfo{
margin: 0px 10px;
// display: flex;
height: 105px;
.company {
height: 35px;
line-height: 35px;
width: 100%;
display: flex;
font-weight: 600;
}
.info{
height: 80px;
display: flex;
.headImage{
// width: 55px;
padding-right: 10px;
}
.details{
float: right;
width: calc(100vw - 105px);
.titleInfo{
width: 100%;
overflow:hidden;
white-space: nowrap;
text-overflow:ellipsis;
}
.priceInfo{
line-height: 30px;
height: 30px;
display: flex;
.price{
width: 50%;
}
.numBer {
width: 50%;
text-align: right;
}
}
}
}
}
.orderTime{
display: flex;
.price {
width: 40%;
text-align: right;
font-weight: 600;
font-size: 15px
}
}
}
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment