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