dingdong-master/pages/order-manage/order-manage.vue

481 lines
21 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<page-meta :page-style="'overflow:'+(ifShowPageMeta?'hidden':'visible')"></page-meta>
<view>
<!-- 顶部操作条 -->
<cu-custom :bgColor="'bg-main-color'" :isBack="true">
<block slot="backText">返回</block>
<block slot="content">接收的任务</block>
</cu-custom>
<view class="sticky-bar" :style="[{top: stickyTop + 'px'}]">
<!-- 条件筛选栏 -->
<view class="padding bg-white solid-bottom">
<view class="flex justify-start align-center">
<text class="margin-right-xs inline-lable">全部</text>
<!-- <my-uni-combox class="inline-combox margin-right-xs" :candidates="stateList" placeholder="请选择"
v-model="formData.state"></my-uni-combox>
<my-uni-combox class="inline-combox" :candidates="subStateList" placeholder="请选择"
v-model="formData.subState"></my-uni-combox> -->
<!-- 区域筛选picker -->
<picker class="inline-combox margin-right-xs" :mode="'multiSelector'" @change="regionChange" :value="areaMultiIndex" :range-key="'name'" :range="areaList">
<input class="radius-input" :value="formData.area ? formData.area[0].name + '-' + formData.area[1].name + '-' + formData.area[2].name : ''"
placeholder="请选择区域"></input>
</picker>
<!-- 品类筛选picker -->
<picker class="inline-combox" :mode="'multiSelector'" @change="categoryChange" :value="categoryMultiIndex" :range-key="'name'" :range="categoryList">
<input class="line-input radius-input" :value="formData.category ? formData.category[0].name + '-' + formData.category[1].name + '-' + formData.category[2].name : ''"
placeholder="请选择品类"></input>
</picker>
</view>
<view class="flex justify-between align-center margin-top-xs">
<input class="line-input radius-input margin-right-sm" v-model="formData.orderKeywords"
placeholder="请输入订单关键字"></input>
<view class="text-xl text-bold">
<text class="cuIcon-search margin-right-sm"></text>
<text class="cuIcon-refresh"></text>
</view>
</view>
</view>
<!-- 状态分类tab -->
<view class="cu-list grid no-border col-5 padding-top-sm bg-white">
<view class="cu-item" :class="stateCur === 0 ? 'bg-main-color light' : ''" :data-id="0" @tap="statusSelect">
<view class="margin-bottom-xs">超时单</view>
<view>({{myOrders.summary.overtimeOrderNum}})</view>
</view>
<view class="cu-item" :class="stateCur === 1 ? 'bg-main-color light' : ''" :data-id="1" @tap="statusSelect">
<view class="margin-bottom-xs">今日单</view>
<view>({{myOrders.summary.todayOrderNum}})</view>
</view>
<view class="cu-item" :class="stateCur === 2 ? 'bg-main-color light' : ''" :data-id="2" @tap="statusSelect">
<view class="margin-bottom-xs">明日单</view>
<view>({{myOrders.summary.tomorrowOrderNum}})</view>
</view>
<view class="cu-item" :class="stateCur === 3 ? 'bg-main-color light' : ''" :data-id="3" @tap="statusSelect">
<view class="margin-bottom-xs">急报单</view>
<view>({{myOrders.summary.urgentMsgOrderNum}})</view>
</view>
<view class="cu-item" :class="stateCur === 4 ? 'bg-main-color light' : ''" :data-id="4" @tap="statusSelect">
<view class="margin-bottom-xs">新订单</view>
<view>({{myOrders.summary.newOrderNum}})</view>
</view>
</view>
<!-- 子状态分类tab -->
<scroll-view scroll-x class="bg-white nav text-center" :scroll-with-animation="true" :scroll-left="scrollLeft">
<view class="cu-item" :class="index==tabCur?'text-main-color cur':''" v-for="(item,index) in subStateList"
:key="index" @tap="tabSelect" :data-id="index">
{{item.name}}
</view>
</scroll-view>
</view>
<!-- tab content -->
<view class="padding bg-white margin-top-sm margin-lr-sm" v-for="(order, index) in orderList">
<view class="flex justify-between">
<view class="text-lg text-bold text-cut">{{order.title}}</view>
<!-- 不同状态订单使用不同角标 -->
<view v-if="order.state === 'newOrder'" class="right-tag padding-lr-sm padding-tb-xs bg-cyan">新</view>
<view v-else-if="order.subState === 'waitArrange'" class="right-tag padding-lr-sm padding-tb-xs bg-main-color">未</view>
<view v-else-if="order.subState === 'waitToServ'" class="right-tag padding-lr-sm padding-tb-xs bg-yellow">待</view>
<view v-else-if="order.subState === 'waitServing' || order.subState === 'afterSaleService'" class="right-tag padding-lr-sm padding-tb-xs bg-purple">服</view>
<view v-else-if="order.subState === 'finishing'" class="right-tag padding-lr-sm padding-tb-xs bg-yellow">确</view>
</view>
<view>
<view v-for="(tag, index1) in order.tags" v-if="tag.level === 'error'" class='cu-tag margin-right-xs radius line-red margin-top-xs'>{{tag.content}}</view>
<view v-else-if="tag.level === 'info'" class='cu-tag margin-right-xs radius line-main-color margin-top-xs'>{{tag.content}}</view>
</view>
<view class="margin-top-sm">
<text class="text-main-color text-lg margin-right-xs"><text class="cuIcon-people"></text></text>
<text>姓名:{{order.name}}</text>
</view>
<view class="margin-top-sm">
<text class="text-main-color text-lg margin-right-xs"><text class="cuIcon-location"></text></text>
<text class="margin-right-xs">{{order.address}}</text>
<text class="text-lg" @tap="copyData(order.address)"><text class="cuIcon-copy"></text></text>
</view>
<view class="margin-top-sm" v-if="Boolean(order.doorTime)">
<text class="text-main-color text-lg margin-right-xs"><text class="cuIcon-time"></text></text>
<text>上门时间:{{order.doorTime}}</text>
</view>
<view class="margin-top-sm" v-else-if="Boolean(order.servTime)">
<text class="text-main-color text-lg margin-right-xs"><text class="cuIcon-time"></text></text>
<text>服务时间:{{order.servTime}}</text>
</view>
<view class="margin-top-sm flex justify-start align-center" v-if="order.subState === 'waitToServ'">
<text class="text-main-color text-lg margin-right-xs"><text class="cuIcon-repair"></text></text>
<text>距上门:</text>
<uni-countdown :show-colon="false" :backgroundColor="'#eee'"
:day="$dateUtil.countDownDiff(order.deadlineDate).day"
:hour="$dateUtil.countDownDiff(order.deadlineDate).hour"
:minute="$dateUtil.countDownDiff(order.deadlineDate).min"
:second="$dateUtil.countDownDiff(order.deadlineDate).seconds">
</uni-countdown>
</view>
<view class="margin-top-sm flex justify-start align-center" v-if="order.subState === 'finishing' && order.chargeReachDate">
<text class="text-main-color text-lg margin-right-xs"><text class="cuIcon-time"></text></text>
<text>距到帐:</text>
<uni-countdown :show-colon="false" :backgroundColor="'#eee'"
:day="$dateUtil.countDownDiff(order.chargeReachDate).day"
:hour="$dateUtil.countDownDiff(order.chargeReachDate).hour"
:minute="$dateUtil.countDownDiff(order.chargeReachDate).min"
:second="$dateUtil.countDownDiff(order.chargeReachDate).seconds">
</uni-countdown>
</view>
<!-- 不同状态订单支持不同操作按钮 -->
<view v-if="order.state === 'newOrder'">
<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm" data-popup="dispatchOrder" @tap="togglePopup($event, index)">派单</button>
<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm">改价</button>
<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm">转发</button>
<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm">确认接单</button>
</view>
<view v-if="order.subState === 'waitArrange'">
<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm" data-popup="dispatchOrder" @tap="togglePopup($event, index)">派单</button>
<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm" data-modal="showTimeArrangeModal" @tap="showModal($event, index)">预约时间</button>
</view>
<view v-if="order.subState === 'waitToServ'">
<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm" @click="showServOrderDetail('waitToServ')">查看</button>
<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm" @tap="makePhoneCall(order.phoneNum)">联系客户</button>
<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm" data-modal="showEditTimeArrangeModal" @tap="showModal($event, index)">修改时间</button>
<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm">立即上门</button>
</view>
<view v-if="order.subState === 'waitServing'">
<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm" @click="showServOrderDetail('waitServing')">查看</button>
<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm" data-modal="showNewServPriceModal" @tap="showModal($event, index)">改价</button>
<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm" @tap="makePhoneCall(order.phoneNum)">联系客户</button>
<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm" data-modal="showEditTimeArrangeModal" @tap="showModal($event, index)">修改时间</button>
<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm" @tap="finishOrder(order)">拍照回单</button>
<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm" data-modal="showPayQrcodeModal" @tap="makePayQrcode($event, index)">生成付款码</button>
</view>
<view v-if="order.subState === 'finishing'">
<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm" data-modal="sendUrgentMsgModal" @tap="showModal($event, index)">师傅急报</button>
</view>
<view v-if="order.subState === 'afterSaleService'">
<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm" @tap="makePhoneCall(order.phoneNum)">联系客户</button>
<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm" data-modal="showEditTimeArrangeModal" @tap="showModal($event, index)">修改时间</button>
<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm">立即上门</button>
</view>
<view class="margin-top-sm solid-top padding-top-sm" v-if="order.afterSaleType === 'finished'">
<view class="flex justify-start align-end">
<text>退单申请:</text>
<uni-countdown :show-colon="false" :backgroundColor="'#eee'"
:day="$dateUtil.countDownDiff(order.applyRefundLastTime).day"
:hour="$dateUtil.countDownDiff(order.applyRefundLastTime).hour"
:minute="$dateUtil.countDownDiff(order.applyRefundLastTime).min"
:second="$dateUtil.countDownDiff(order.applyRefundLastTime).seconds">
</uni-countdown>
</view>
<view class="margin-top-xs">
<text>退款金额:</text><text class="text-price">{{order.refundAmount}}</text>
<text class="margin-left-sm">到帐金额:</text><text class="text-price">{{order.refundReachAmount}}</text>
</view>
<view class="margin-top-xs">
<text>退款原因:</text><text>{{order.refundReason}}</text>
</view>
<view class="flex justify-end margin-top-xs">
<button class="cu-btn sm bg-yellow margin-right-sm" @click="showAfterSalePic(index)" @tap="showModalByRef('showPicModal')">查看</button>
<button class="cu-btn sm bg-yellow margin-right-sm" v-if="order.refundStatus !== 'rejected'" @click="updateRefundStatus('rejected', index)">拒绝处理</button>
<button class="cu-btn sm bg-yellow margin-right-sm" v-else disabled type="">已拒绝</button>
<button class="cu-btn sm bg-yellow margin-right-sm" v-if="order.refundStatus !== 'recevied'" @click="updateRefundStatus('recevied', index)">同意退单</button>
<button class="cu-btn sm bg-yellow margin-right-sm" v-else disabled type="">已同意</button>
</view>
</view>
<view class="margin-top-sm solid-top padding-top-sm" v-else-if="order.afterSaleType === 'unfinished'">
<view class="flex justify-start align-end">
<text>待处理售后:</text>
<uni-countdown :show-colon="false" :backgroundColor="'#eee'"
:day="$dateUtil.countDownDiff(order.waitAfterSaleLastTime).day"
:hour="$dateUtil.countDownDiff(order.waitAfterSaleLastTime).hour"
:minute="$dateUtil.countDownDiff(order.waitAfterSaleLastTime).min"
:second="$dateUtil.countDownDiff(order.waitAfterSaleLastTime).seconds">
</uni-countdown>
</view>
<view class="margin-top-xs">
<text>售后原因:</text><text>{{order.afterSaleReason}}</text>
</view>
<view class="margin-top-xs">完成操作:点击“处理完成”提交由客服回访!</view>
<view class="flex justify-end align-end margin-top-xs">
<button class="cu-btn sm bg-yellow margin-right-sm" @click="showAfterSalePic(index)" @tap="showModalByRef('showPicModal')">查看</button>
<button class="cu-btn sm bg-yellow margin-right-sm" v-if="order.afterSaleDealStatus !== 'rejected'" @click="updateAfterSaleDealStatus('rejected', index)">拒绝处理</button>
<button class="cu-btn sm bg-yellow margin-right-sm" v-else disabled type="">已拒绝</button>
<button class="cu-btn sm bg-yellow margin-right-sm" v-if="order.afterSaleDealStatus !== 'recevied'" @click="updateAfterSaleDealStatus('recevied', index)">处理完成</button>
<button class="cu-btn sm bg-yellow margin-right-sm" v-else disabled type="">已同意</button>
</view>
</view>
<view class="margin-top-sm solid-top padding-top-sm" v-if="Boolean(order.comments)">
<text class="text-main-color text-lg margin-right-xs"><text class="cuIcon-comment"></text></text>
<text>备注:{{order.comments}}</text>
</view>
</view>
<!-- 模态框 -->
<time-arrange :show="showTimeArrangeModal" :data="curOrder"></time-arrange>
<time-arrange-fail :show="showArrangeFailTimeModal" :data="curOrder"></time-arrange-fail>
<new-serv-price :show="showNewServPriceModal" :data="curOrder"></new-serv-price>
<pay-qrcode ref="payQrcode" :show="showPayQrcodeModal" :data="curOrder"></pay-qrcode>
<edit-time-arrange :show="showEditTimeArrangeModal" :data="curOrder"></edit-time-arrange>
<urgent-msg :show="sendUrgentMsgModal" @hideModal="hideModal"></urgent-msg>
<pic-modal ref="showPicModal" :imgList="picModalImgList"></pic-modal>
<!-- popup -->
<uni-popup ref="dispatchOrder" type="bottom" @change="changePopupState">
<view class="text-bold text-gray text-lg text-center left-top-sm-bar" data-popup="dispatchOrder" @click="togglePopup"><text
class="cuIcon-close"></text></view>
<view class="bg-white padding" style="padding-top: 74rpx;">
<dispatch-order :columnTitleArr="['购买机型', '待派单', '派单量']" :singleServ="curOrder && curOrder.product.pickedList.length === 1 ? true : false"
:product="curOrder.product" :pickedList="curOrder.product.pickedList" :members="myTeamMembers"></dispatch-order>
</view>
<!-- 底部占位 -->
<view class="cu-bar bg-white fixed-bottom-bar"></view>
</uni-popup>
</view>
</template>
<script>
import myUniCombox from '@/components/uni-combox/my-uni-combox.vue';
import timeArrange from '@/pages/order-manage/modal/time-arrange.vue';
import timeArrangeFail from '@/pages/order-manage/modal/time-arrange-fail.vue';
import editTimeArrange from '@/pages/order-manage/modal/edit-time-arrange.vue';
import dispatchOrder from '@/pages/order-manage/dispatch-order.vue';
import newServPrice from '@/pages/order-manage/modal/new-serv-price.vue';
import payQrcode from '@/pages/order-manage/modal/pay-qrcode.vue';
import urgentMsg from '@/pages/order-manage/modal/urgent-msg.vue';
import picModal from '@/components/modal/pic-modal.vue';
export default {
components: {
myUniCombox,
timeArrange,
timeArrangeFail,
editTimeArrange,
dispatchOrder,
newServPrice,
payQrcode,
urgentMsg,
picModal
},
data() {
return {
formData: {
category: null,
area: null,
orderKeywords: ''
},
areaList: [],
areaMultiIndex: [0, 0, 0],
categoryList: [],
categoryMultiIndex: [0, 0, 0],
// stateList: [{
// code: 1,
// name: '超时单'
// }, {
// code: 2,
// name: '今日单'
// }, {
// code: 3,
// name: '明日单'
// }, {
// code: 4,
// name: '急报单'
// }, {
// code: 5,
// name: '新订单'
// }],
subStateList: [{
code: 1,
name: '未约/未排'
}, {
code: 2,
name: '待上门'
}, {
code: 3,
name: '服务中'
}, {
code: 4,
name: '确认中'
}, {
code: 5,
name: '售后中'
}, {
code: 6,
name: '已完成'
}],
myOrders: {},
orderList: [],
curOrder: {},
myTeamMembers: [],
scrollLeft: 0,
stickyTop: this.CustomBar,
tabCur: 0,
stateCur: 0,
showTimeArrangeModal: false,
showArrangeFailTimeModal: false,
showNewServPriceModal: false,
showPayQrcodeModal: false,
showEditTimeArrangeModal: false,
sendUrgentMsgModal: false,
ifShowPageMeta: false,
picModalImgList: []
}
},
onLoad() {
this.loadData();
this.bindEvent();
},
onUnload() {
this.offBindEvent();
},
methods: {
async loadData() {
let myTeamInfo = await this.$api.data('myTeamInfo');
this.myTeamMembers = myTeamInfo.members;
this.myOrders = await this.$api.data('myOrders');
this.orderList = this.myOrders.orderList;
this.areaList = await this.$api.data('areaList');
this.categoryList = await this.$api.data('categoryList');
},
bindEvent() {
uni.$on(this.$globalFun.SHOW_ARRANGE_FAIL_TIME, this.showArrangeFailTime);
uni.$on(this.$globalFun.HIDE_MODAL, this.hideModal);
uni.$on(this.$globalFun.SUBMIT_FAIL_REASON, this.submitFailReason);
},
offBindEvent() {
uni.$off(this.$globalFun.SHOW_ARRANGE_FAIL_TIME);
uni.$off(this.$globalFun.HIDE_MODAL);
uni.$off(this.$globalFun.SUBMIT_FAIL_REASON);
},
regionChange(e) {
this.areaMultiIndex = e.detail.value;
let chosenArea = [];
for(let i = 0; i < this.areaList.length; i++) {
chosenArea.push(this.areaList[i][this.areaMultiIndex[i]]);
}
this.formData.area = chosenArea;
},
categoryChange(e) {
this.categoryMultiIndex = e.detail.value;
let chosenCategory = [];
for(let i = 0; i < this.categoryList.length; i++) {
chosenCategory.push(this.categoryList[i][this.categoryMultiIndex[i]]);
}
this.formData.category = chosenCategory;
},
input(e) {
console.log(e)
console.log(this.formData)
},
tabSelect(e) {
this.tabCur = e.currentTarget.dataset.id;
this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
this.loadData(this.stateCur, this.subStateList[this.tabCur].code);
},
statusSelect(e) {
this.stateCur = e.currentTarget.dataset.id;
this.loadData(this.stateCur, this.subStateList[this.tabCur].code);
},
setCurOrder(orderIndex) {
this.curOrder = this.orderList[orderIndex];
},
showModal(e, orderIndex) {
if (orderIndex != null && orderIndex != undefined) {
this.setCurOrder(orderIndex);
}
this[e.currentTarget.dataset.modal] = true;
},
showModalByRef(refName) {
this.$refs[refName].showModal();
},
hideModal(e) {
this.curOrder = null;
this[e.currentTarget.dataset.modal] = false;
},
copyData(data) {
uni.setClipboardData({
data: data
});
},
showArrangeFailTime(e) {
this.showTimeArrangeModal = false;
this.showArrangeFailTimeModal = true;
},
submitFailReason(e, reasonObj) {
// TODO: 提交内容后隐藏modalcurOrder信息置null
this.hideModal(e);
},
togglePopup(e, orderIndex) {
if (this.ifShowPageMeta) {
this.$refs[e.currentTarget.dataset.popup].close();
let timeout = setTimeout(() => {
this.curOrder = null;
}, 100);
} else {
if (orderIndex != null && orderIndex != undefined) {
this.setCurOrder(orderIndex);
}
this.$refs[e.currentTarget.dataset.popup].open();
}
},
changePopupState(e) {
this.ifShowPageMeta = e.show;
},
makePhoneCall(phoneNum) {
uni.makePhoneCall({
phoneNumber: phoneNum
})
},
makePayQrcode(e, orderIndex) {
this.$refs.payQrcode.showQrcode('http://10.45.81.125:8081/portal/' + Math.random());
this.showModal(e, orderIndex);
},
showServOrderDetail(process) {
uni.navigateTo({
url: '/pages/order-manage/serv-detail?process=' + process
})
},
finishOrder(order) {
uni.navigateTo({
url: '/pages/order-manage/finish-order?order=' + encodeURIComponent(JSON.stringify(order))
})
},
updateRefundStatus(status, index) {
this.myOrders.orderList[index].refundStatus = status;
},
updateAfterSaleDealStatus(status, index) {
this.myOrders.orderList[index].afterSaleDealStatus = status;
},
async showAfterSalePic() {
// TODO:查询该售后单中的拒绝原因中上传的截图
this.picModalImgList = await this.$api.data('picImgList');
console.log(this.picModalImgList)
}
}
}
</script>
<style scoped>
.inline-combox {
display: inline-block;
width: calc((90vw - 80rpx)/2);
}
.cu-list.grid.no-border {
padding: unset;
}
.cu-list.grid.no-border>.cu-item {
padding-top: 20rpx;
padding-bottom: 20rpx;
}
.right-tag {
position: relative;
right: -30rpx;
border-radius: 40rpx 0 0 40rpx;
}
.cu-tag+.cu-tag {
margin-left: unset;
}
.left-top-sm-bar {
position: absolute;
right: 25rpx;
top: 25rpx;
z-index: 99;
}
</style>