deming/pageE/tool/SendWash.vue
2020-07-30 20:33:16 +08:00

339 lines
8.1 KiB
Vue
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="wash">
<view class="title">
<u-tabs-swiper ref="tabs" :list="list" :is-scroll="false" active-color="#FF780F" :current="current" font-size="32" :show-bar="false" @change="tabsChange" height="88"></u-tabs-swiper>
<u-icon name="arrow-down-fill" :color="current == 0 ? '#FF780F' : '#333333'" size="17" class="order-icon" :style="{ left: list[0].name == '平台历史订单' ? '236rpx' : '252rpx' }"></u-icon>
</view>
<swiper :current="swiperCurrent" @animationfinish="animationfinish">
<swiper-item class="swiper-item">
<scroll-view scroll-y class="order-list" @scrolltolower="loadmore">
<view v-for="(item, index) in orderList" :key="index" class="order-item">
<view class="order-title">
<view class="order-text">订单状态</view>
<view class="order-status">{{ item.order_status | viewStatus }}</view>
</view>
<view class="order-info">
<image src="../static/mine/23.png"></image>
<view v-if="item.deliver_goods_type == 2 && item.order_status == 20">
<view>骑手名字:{{ item.takeawayer_name || '' }}</view>
<view>联系方式:{{ item.member_phone || '' }}</view>
<view>所属公司:{{ item.company || '' }}</view>
</view>
<view v-if="item.order_status == 0">
<view>正在等待接单</view>
</view>
<view v-if="item.order_status == 40">
<view>商家已拒绝</view>
</view>
<view v-if="item.order_status == 50">
<view>交易已完成</view>
</view>
<view v-if="item.deliver_goods_type == 1 && item.order_status == 20">
<view>商家在正路途中,请耐心等待</view>
</view>
</view>
<view class="send-btn" v-if="item.order_status == 20 || item.order_status == 50">
<view class="btn" v-if="item.order_status == 20" @click="sendLaundryOrderConfirm(item.laundry_id)">
确认完成
</view>
<view class="btn" v-if="item.order_status == 50" @click="toComment(item.laundry_id)">
去评价
</view>
</view>
</view>
</scroll-view>
</swiper-item>
<swiper-item class="swiper-item">
<scroll-view scroll-y style="height: 100%;" class="none-page">
<view></view>
</scroll-view>
</swiper-item>
<swiper-item class="swiper-item">
<scroll-view scroll-y class="comment">
<view v-for="(comment, index) in commentList" :key="index" class="comment-item">
<Comment :info="comment"></Comment>
</view>
</scroll-view>
</swiper-item>
</swiper>
<view class="popup" v-if="showPopup" @click="onTap">
<view class="popup_cont" @click="replaces(1)">
实体店历史订单
</view>
<view class="popup_cont" @click="replaces(2)">
平台历史订单
</view>
</view>
</view>
</template>
<script>
import Comment from '@/components/mine/comment/index';
export default {
data() {
return {
showPopup: false,
list: [{
name: '平台历史订单'
}, {
name: '申请表'
}, {
name: '评价'
}],
current: 0,
swiperCurrent: 0,
btn_show:true,
page: 1,
orderList: [],
timer: true,
commentList: [],
}
},
components: {
Comment
},
filters: {
viewStatus(status) {
let state;
switch (status) {
case 0:
state = '等待接单';
break;
case 20:
state = '已接单';
break;
case 40:
state = '交易失败';
break;
case 50:
state = '交易成功';
break;
default:
break;
}
return state;
},
},
watch: {
current(index) {
if(index == 1) {
uni.navigateTo({
url: '/pageE/tool/WashOrder'
});
this.showPopup = false;
}
}
},
onShow() {
this.current = 0;
this.swiperCurrent = 0;
this.showPopup = false;
this.sendLaundryOrderList();
this.sendCommentList();
},
methods: {
async sendLaundryOrderList({ load = 'reload' } = {}) {
let type = this.list[0].name == '平台历史订单' ? 1 : 2;
const res = await this.$u.api.sendLaundryOrderList({
type: type,
page: this.page,
})
this.timer = false;
if(res.errCode == 0) {
// this.orderList = res.data.list;
// console.log(...res.data.list);
if(load == 'loadmore') this.orderList = this.orderList.concat(res.data.list);
else if(load == 'reload') this.orderList = res.data.list;
} else {
this.orderList = [];
}
return res.data.list.length;
},
sendLaundryOrderConfirm(id) {
this.$u.api.sendLaundryOrderConfirm({ id: id }).then(res => {
if(res.errCode == 0) {
this.sendLaundryOrderList();
}
this.$u.toast(res.message);
})
},
loadmore() {
if(!this.timer) return false;
this.loadStatus = "loading";
this.page++;
this.sendLaundryOrderList({ load: 'loadmore' }).then(length => {
if(length == 0) {
this.page--;
this.status = 'nomore';
} else {
this.status = 'loading';
}
}).catch(() => {
this.loadStatus = "nomore";
this.page--;
})
},
// 送洗评论列表
sendCommentList() {
this.$u.api.sendCommentList().then(res => {
if(res.errCode == 0) {
this.commentList = res.data.list;
} else {
this.commentList = [];
}
})
},
toComment(id) {
this.$u.route('/pageE/tool/washComment', {
id: id
});
},
tabsChange(index) {
this.swiperCurrent = index;
if (index == 0){
this.showPopup = !this.showPopup;
} else {
this.showPopup = false;
}
},
animationfinish(e) {
let current = e.detail.current;
this.swiperCurrent = current;
this.current = current;
},
replaces(e){
if(e == 1){
this.$set(this.list,0,{name: '实体店历史订单'} )
} else {
this.$set(this.list,0,{name: '平台历史订单'} )
}
this.sendLaundryOrderList();
},
onTap(){
this.showPopup = false
}
},
};
</script>
<style lang="scss" scoped>
.wash {
min-height: calc(100vh - var(--window-top));
background-color: #ECECEC;
display: flex;
flex-direction: column;
> uni-swiper {
flex: 1;
}
.title {
position: relative;
.order-icon {
position: absolute;
top: 50%;
transform: translate(0, -50%);
z-index: 9;
}
}
.swiper-item {
padding-top: 20rpx;
.order-list {
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 0 30rpx;
.order-item {
padding: 30rpx;
width: 690rpx;
// height: 362rpx;
background: rgba(255,255,255,1);
border-radius: 10rpx;
margin-bottom: 20rpx;
.order-title {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 30rpx;
.order-text {
font-size: 30rpx;
color: rgba(51,51,51,1);
}
.order-status {
font-size: 28rpx;
color: rgba(255,120,15,1);
}
}
.order-info {
display: flex;
align-items: center;
> image {
width: 180rpx;
height: 160rpx;
border-radius: 10rpx;
margin-right: 30rpx;
}
> view {
font-size: 26rpx;
color: rgba(51,51,51,1);
> view:not(:last-child) {
margin-bottom: 19rpx;
}
}
}
.send-btn {
width: 100%;
display: flex;
justify-content: flex-end;
margin-top: 30rpx;
.btn{
width: 154rpx;
height: 54rpx;
border-radius: 49rpx;
transform: translate(-50%, 0);
font-size: 26rpx;
border: 1rpx solid rgba(255,120,15,1);
color:rgba(255,120,15,1);
text-align: center;
line-height: 54rpx;
margin-right: -80rpx;
}
}
}
}
.comment {
width: 100%;
height: 100%;
.comment-item {
margin-bottom: 20rpx;
}
}
}
.popup{
width: 100%;
height: 100%;
position: fixed;
bottom: 0;
top: 88px;
left: 0;
right: 0;
z-index: 2;
background-color: rgba(0, 0, 0, 0.4);
transform: scale(1);
display: flex;
flex-direction: column;
justify-content: top;
align-items: center;
transition-duration: 0.3s;
.popup_cont{
border-top: 1px solid RGBA(239, 236, 240, 1);
background-color: #fff;
width: 100%;
height: 80rpx;
line-height: 80rpx;
font-size:28rpx;
font-family:PingFang SC;
font-weight:400;
color:rgba(102,102,102,1);
padding-left: 41rpx;
position: relative;
}
}
}
</style>