feat:新增订单刷新功能

This commit is contained in:
wangsongsole 2022-10-12 13:50:18 +08:00
parent 351be68efa
commit 6bb8f049b6
1 changed files with 67 additions and 28 deletions

View File

@ -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) {