feat:新增订单刷新功能
This commit is contained in:
parent
351be68efa
commit
6bb8f049b6
|
@ -24,39 +24,46 @@
|
|||
<!-- 弹出提示 -->
|
||||
<img class="backPresTy" @click="backHandler"
|
||||
src=" https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png" alt="">
|
||||
<div class="content">
|
||||
<div class="content-item" v-for="item in orderList" :key="item.order_number">
|
||||
<div class="top">
|
||||
<p class="time">{{item.update_time}}</p>
|
||||
<p class="status" :style="{color:statusColor(item.status)}">{{item.status_text}}
|
||||
</p>
|
||||
</div>
|
||||
<div class="middle">
|
||||
<img :src="filterImgSrc(item)" alt="">
|
||||
<div class="right">
|
||||
<div class="title_originalPrice">
|
||||
<p class="title">{{item.product_name}}</p>
|
||||
<p class="originalPrice">¥{{item.official_price}}</p>
|
||||
|
||||
<div id="refresh" @touchstart="touchStart($event)" @touchmove="touchMove($event)" @touchend="touchEnd($event)"
|
||||
style="height:100%;">
|
||||
<img v-show='loadShowHeight' class='img-lodging'
|
||||
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/img-logding.png" alt="">
|
||||
<div class="content" slot="content">
|
||||
<div class="content-item" v-for="item in orderList" :key="item.order_number">
|
||||
<div class="top">
|
||||
<p class="time">{{item.update_time}}</p>
|
||||
<p class="status" :style="{color:statusColor(item.status)}">{{item.status_text}}
|
||||
</p>
|
||||
</div>
|
||||
<div class="middle">
|
||||
<img :src="filterImgSrc(item)" alt="">
|
||||
<div class="right">
|
||||
<div class="title_originalPrice">
|
||||
<p class="title">{{item.product_name}}</p>
|
||||
<p class="originalPrice">¥{{item.official_price}}</p>
|
||||
</div>
|
||||
<p class="id">订单编号:{{item.order_number}}</p>
|
||||
</div>
|
||||
<p class="id">订单编号:{{item.order_number}}</p>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<p class="money">实付金额:¥<span>{{item.pay_amount}}</span></p>
|
||||
<p class="button" @click="immediatelyPay(item)" v-show="item.status===6">立即支付</p>
|
||||
<!-- 立减金待领取 -->
|
||||
<p class="button" @click="receiveFn(item)" v-show="item.status===1&&item.type===2">去兑换</p>
|
||||
<!-- 立减金领取过期 -->
|
||||
<p class="button filter" v-show="item.status===5&&item.type===2">去兑换</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<p class="money">实付金额:¥<span>{{item.pay_amount}}</span></p>
|
||||
<p class="button" @click="immediatelyPay(item)" v-show="item.status===6">立即支付</p>
|
||||
<!-- 立减金待领取 -->
|
||||
<p class="button" @click="receiveFn(item)" v-show="item.status===1&&item.type===2">去兑换</p>
|
||||
<!-- 立减金领取过期 -->
|
||||
<p class="button filter" v-show="item.status===5&&item.type===2">去兑换</p>
|
||||
<!-- 空状态 -->
|
||||
<div class="empty" v-if="!orderList.length">
|
||||
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/order-empty.png" alt="">
|
||||
<p>暂无订单</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 空状态 -->
|
||||
<div class="empty" v-if="!orderList.length">
|
||||
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/order-empty.png" alt="">
|
||||
<p>暂无订单</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<model-pop :show.sync="popShow" :title="popTitle" :status="popStatus" :text="popText" :bottom_text="bottomText"
|
||||
@backFunction="backFunction">
|
||||
</model-pop>
|
||||
|
@ -98,20 +105,26 @@
|
|||
/* toast */
|
||||
toastShow: '',
|
||||
toastTip: '',
|
||||
redirect: false,
|
||||
|
||||
redirect: false
|
||||
/* 加载 */
|
||||
scrollTop: 0,
|
||||
startY: 0,
|
||||
loadShowHeight: 0
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
tabComponent,
|
||||
payPop,
|
||||
modelPop
|
||||
modelPop,
|
||||
},
|
||||
|
||||
created () {
|
||||
this.getOrderList()
|
||||
this.goodsCount = localStorage.getItem('goodsCount');
|
||||
this.scrollTop =
|
||||
document.documentElement.scrollTop || document.body.scrollTop
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
@ -121,6 +134,32 @@
|
|||
return colorArray[status];
|
||||
},
|
||||
|
||||
/* 以下三个方法是下拉刷新 */
|
||||
touchStart (e) {
|
||||
this.startY = e.targetTouches[0].pageY
|
||||
},
|
||||
|
||||
|
||||
touchMove (e) {
|
||||
if (this.scrollTop == 0) {
|
||||
let moveDistance = e.targetTouches[0].pageY - this.startY
|
||||
if (moveDistance > 0 && moveDistance <= 80) {
|
||||
this.loadShowHeight = moveDistance
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
touchEnd () {
|
||||
if (this.loadShowHeight >= 60) {
|
||||
this.getOrderList()
|
||||
setTimeout(() => {
|
||||
this.loadShowHeight = 0;
|
||||
}, 2000);
|
||||
} else {
|
||||
this.loadShowHeight = 0
|
||||
}
|
||||
},
|
||||
|
||||
/* 图标分流 */
|
||||
filterImgSrc (item) {
|
||||
if (item.type === 1) {
|
||||
|
|
Loading…
Reference in New Issue