184 lines
7.4 KiB
Vue
184 lines
7.4 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 顶部操作条 -->
|
||
<cu-custom :bgColor="'bg-main-color'" :isBack="true">
|
||
<block slot="backText">返回</block>
|
||
<block slot="content">我的订单</block>
|
||
</cu-custom>
|
||
<!-- tab -->
|
||
<view class="sticky-bar" :style="[{top: stickyTop + 'px'}]">
|
||
<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 tabHeaderList" :key="index" @tap="tabSelect" :data-id="index">
|
||
{{item.name}}
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<!-- tab content -->
|
||
<view class="margin-lr-sm margin-bottom-xl">
|
||
<view class="margin-top-sm padding-bottom-sm bg-white" v-for="(shopOrder, index) in myOrders">
|
||
<view class="cu-bar solid-bottom">
|
||
<view class="action bar-first-action">
|
||
<text class="cuIcon-shopfill text-main-color"></text>
|
||
{{shopOrder.shopName}}
|
||
<view>
|
||
<view class="cuIcon-right"></view>
|
||
</view>
|
||
</view>
|
||
<view class='cu-tag bg-yellow radius margin-right-sm' v-if="shopOrder.mainProcess === 'ordersServing'" @click="showServDetail(shopOrder)">查看订单详情</view>
|
||
</view>
|
||
<view class="padding-lr">
|
||
<view class="margin-top-sm">
|
||
<product-picked :product="shopOrder.product" :pickedList="shopOrder.product.pickedList">
|
||
</product-picked>
|
||
</view>
|
||
<view class="flex justify-end align-end padding-bottom-sm">
|
||
<view class="margin-right-sm"><text>总价</text><text class="text-price text-red">1049.00</text>
|
||
</view>
|
||
<view class="margin-right-sm"><text>优惠</text><text class="text-price text-red">50.00</text>
|
||
</view>
|
||
<view class="text-lg"><text>需付款</text><text
|
||
class="text-price text-red text-lg text-bold">999.00</text></view>
|
||
</view>
|
||
<view v-if="orderType === 'servOrder'" class="padding-tb-sm flex justify-end oper-bar">
|
||
<button v-if="shopOrder.subProcessStatus <= 4 && shopOrder.mainProcess !== 'ordersWait2Serv'"
|
||
class="cu-btn line-black margin-right-sm">取消订单</button>
|
||
<button v-if="shopOrder.subProcessStatus >= 1 && shopOrder.subProcessStatus <= 2"
|
||
class="cu-btn line-black margin-right-sm">催单</button>
|
||
<button v-if="shopOrder.subProcessStatus >= 2 && shopOrder.subProcessStatus <= 3"
|
||
class="cu-btn line-black margin-right-sm">撤换师傅</button>
|
||
<button v-if="shopOrder.subProcessStatus >= 1 && shopOrder.subProcessStatus <= 3"
|
||
class="cu-btn line-black margin-right-sm">加价</button>
|
||
<button v-if="shopOrder.subProcessStatus === 5"
|
||
class="cu-btn line-black margin-right-sm">申请售后</button>
|
||
<button v-if="shopOrder.subProcessStatus >= 4 && shopOrder.subProcessStatus <= 5"
|
||
class="cu-btn line-black margin-right-sm">评价</button>
|
||
<button v-if="shopOrder.subProcessStatus === 6"
|
||
class="cu-btn line-black margin-right-sm">查看进度</button>
|
||
<button v-if="shopOrder.payStatus === 0" class="cu-btn bg-main-color">付款</button>
|
||
</view>
|
||
<view v-if="orderType === 'servOrder' && shopOrder.subProcessStatus === 4"
|
||
class="padding-tb-sm solid-top">
|
||
<view>师傅已提交完成，请验收。</view>
|
||
<view>服务保障权益期：</view>
|
||
<view class="flex justify-between align-end">
|
||
<view>{{shopOrder.finishOrder.finishWaitUntil}}</view>
|
||
<view>
|
||
<button v-if="shopOrder.finishOrder.finishStatus === 1"
|
||
class="cu-btn sm bg-yellow margin-right-sm"
|
||
@click="updateFinisheStatus(2, index)">已验收</button>
|
||
<button v-if="shopOrder.finishOrder.finishStatus === 1"
|
||
class="cu-btn sm bg-yellow margin-right-sm"
|
||
@click="updateFinisheStatus(-1, index)">拒绝完单</button>
|
||
<button v-if="shopOrder.finishOrder.finishStatus === 2"
|
||
class="cu-btn sm bg-yellow margin-right-sm" disabled type="">已完成验收</button>
|
||
<button v-if="shopOrder.finishOrder.finishStatus === -1"
|
||
class="cu-btn sm bg-yellow margin-right-sm" disabled type="">已拒绝完单</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view
|
||
v-if="orderType === 'servOrder' && (shopOrder.subProcessStatus === 2 || shopOrder.subProcessStatus === 3)"
|
||
class="padding-tb-sm solid-top">
|
||
<view>约定服务时间：</view>
|
||
<view class="flex justify-between align-end">
|
||
<view>{{shopOrder.agreedServTime.time}}</view>
|
||
<view>
|
||
<button v-if="shopOrder.agreedServTime.customerAgreeStatus === 1"
|
||
class="cu-btn sm bg-yellow margin-right-sm"
|
||
@click="updateAgreeStatus(2, index)">同意</button>
|
||
<button v-if="shopOrder.agreedServTime.customerAgreeStatus === 1"
|
||
class="cu-btn sm bg-yellow margin-right-sm"
|
||
@click="updateAgreeStatus(-1, index)">不同意</button>
|
||
<button v-if="shopOrder.agreedServTime.customerAgreeStatus === 2"
|
||
class="cu-btn sm bg-yellow margin-right-sm" disabled type="">已同意</button>
|
||
<button v-if="shopOrder.agreedServTime.customerAgreeStatus === -1"
|
||
class="cu-btn sm bg-yellow margin-right-sm" disabled type="">已否决</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-else-if="orderType === 'servOrder' && shopOrder.subProcessStatus === 1"
|
||
class="padding-tb-sm solid-top text-orange">
|
||
路途遥远？服务内容稍难？时间紧迫？您可以试试追加赏金，重金之下必有勇夫噢！
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import productPicked from '@/components/goods-card/product-picked.vue';
|
||
|
||
export default {
|
||
components: {
|
||
productPicked
|
||
},
|
||
data() {
|
||
return {
|
||
scrollLeft: 0,
|
||
tabCur: 0,
|
||
tabHeaderList: [],
|
||
orderType: '',
|
||
myOrders: [],
|
||
stickyTop: this.CustomBar
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
if (Boolean(options) && Boolean(options.tabInfo)) {
|
||
let tabInfo = JSON.parse(decodeURIComponent(options.tabInfo));
|
||
if (tabInfo.tabCur != null || tabInfo.tabCur != undefined) {
|
||
this.tabCur = tabInfo.tabCur;
|
||
}
|
||
if (tabInfo.tabCur != null || tabInfo.tabCur != undefined) {
|
||
this.orderType = tabInfo.orderType;
|
||
}
|
||
if (Array.isArray(tabInfo.tabHeaderList) && tabInfo.tabHeaderList.length > 0) {
|
||
this.tabHeaderList = tabInfo.tabHeaderList;
|
||
this.loadData(this.tabHeaderList[this.tabCur].type);
|
||
}
|
||
console.log(tabInfo)
|
||
}
|
||
},
|
||
methods: {
|
||
async loadData(mainProcess) {
|
||
// 真实对接口的时候使用
|
||
// this.myOrders = await this.$api.data(this.orderType, mainProcess);
|
||
this.myOrders = await this.$api.data(mainProcess);
|
||
},
|
||
tabSelect(e) {
|
||
this.tabCur = e.currentTarget.dataset.id;
|
||
this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
|
||
this.loadData(this.tabHeaderList[this.tabCur].type);
|
||
},
|
||
updateAgreeStatus(status, index) {
|
||
this.myOrders[index].agreedServTime.customerAgreeStatus = status;
|
||
},
|
||
updateFinisheStatus(status, index) {
|
||
this.myOrders[index].finishOrder.finishStatus = status;
|
||
},
|
||
showServDetail(shopOrder) {
|
||
uni.navigateTo({
|
||
url: '/pages/my/serv-detail'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.bar-first-action {
|
||
margin-left: unset !important;
|
||
padding-left: 40rpx;
|
||
font-size: 30rpx !important;
|
||
}
|
||
|
||
.cu-btn.sm {
|
||
padding: 0 20rpx;
|
||
font-size: 23rpx;
|
||
height: 48rpx;
|
||
}
|
||
</style>
|