223 lines
8.6 KiB
Vue
223 lines
8.6 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>
|
|
<load-status-bar ref="loadStatusBar"></load-status-bar>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import productPicked from '@/components/goods-card/product-picked.vue';
|
|
import loadStatusBar from '@/components/custom-bar/load-status-bar.vue';
|
|
|
|
export default {
|
|
components: {
|
|
productPicked,
|
|
loadStatusBar
|
|
},
|
|
data() {
|
|
return {
|
|
scrollLeft: 0,
|
|
tabCur: 0,
|
|
tabHeaderList: [],
|
|
orderType: '',
|
|
myOrders: [],
|
|
pageParams: [],
|
|
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);
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
loadData(mainProcess) {
|
|
for(let i = 0; i < this.tabHeaderList.length; i++) {
|
|
this.pageParams.push({
|
|
pageNum: 0
|
|
});
|
|
}
|
|
// 真实对接口的时候使用
|
|
// this.myOrders = await this.$api.data(this.orderType, mainProcess);
|
|
// this.myOrders = await this.$api.data(mainProcess);
|
|
this.loadOrderPage({
|
|
orderType: this.orderType
|
|
});
|
|
},
|
|
async loadOrderPage(params) {
|
|
params.pageNum = this.pageParams[this.tabCur].pageNum;
|
|
params.pageSize = this.$globalData.pageSize;
|
|
this.$refs.loadStatusBar.showLoading();
|
|
try {
|
|
let res = await this.$request.qryOrderGoodsPage(params);
|
|
let rowsLength = res.rows.length;
|
|
if (rowsLength > 0) {
|
|
this.myOrders = this.myOrders.concat(res.rows);
|
|
this.pageParams[this.tabCur].pageNum++;
|
|
if (rowsLength === this.pageSize) {
|
|
this.$refs.loadStatusBar.showLoadMore();
|
|
}
|
|
}
|
|
this.$refs.loadStatusBar.showLoadOver();
|
|
} catch (e) {
|
|
console.error(e)
|
|
this.$refs.loadStatusBar.showLoadErr();
|
|
}
|
|
console.log(this.pageParams)
|
|
},
|
|
tabSelect(e) {
|
|
this.tabCur = e.currentTarget.dataset.id;
|
|
this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
|
|
this.resetPageData();
|
|
this.loadOrderPage({
|
|
orderType: this.tabHeaderList[this.tabCur].type
|
|
});
|
|
},
|
|
resetPageData() {
|
|
this.myOrders = [];
|
|
this.$refs.loadStatusBar.showLoadMore();
|
|
},
|
|
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>
|