dingdong-mall/pages/my/my-order.vue

<template>
	<view>
		<!-- 顶部操作条 -->
		<cu-custom :bgColor="'bg-main-color'" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">我的订单</block>
		</cu-custom>
		
		<view class="padding-tb bg-white solid-bottom">
			<view class="flex justify-between align-center margin-top-xs padding-left">
				<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" @click="searchOrderPage"></text>
				</view>
			</view>
		</view>
		
		<!-- 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.workerName}}
						<view>
							<view class="cuIcon-right"></view>
						</view>
					</view>
					<view class='cu-tag line-main-color radius margin-right-sm' v-if="shopOrder.payType == 0">在线支付单</view>
					<view class='cu-tag line-main-color radius margin-right-sm' v-else-if="shopOrder.payType == 1">上门到付单</view>
				</view>
				<view class="padding-lr">
					<view class="margin-top-sm" @click="showServDetail(shopOrder)">
						<product-picked :product="shopOrder" :pickedList="shopOrder.standardList"></product-picked>
					</view>
					<view class="flex justify-end align-end padding-bottom-xs" @click="showServDetail(shopOrder)">
						<view class="margin-right-sm"><text>总价</text><text class="text-price text-red">{{shopOrder.totalMoney}}</text>
						</view>
						<view class="margin-right-sm"><text>优惠</text><text class="text-price text-red">{{shopOrder.discountMoney}}</text>
						</view>
						<view class="margin-right-sm" v-if="shopOrder.payStatus == 1 && shopOrder.changeMoney"><text>已付款</text><text class="text-price text-red">{{shopOrder.payMoney}}</text>
						</view>
						<view class="text-lg" v-if="shopOrder.payStatus == 1 && shopOrder.changeMoney"><text>需付款</text><text
								class="text-price text-red text-lg text-bold">{{shopOrder.changeMoney}}</text></view>
						<view class="text-lg" v-else-if="shopOrder.payStatus == 1"><text>实付款</text><text
								class="text-price text-red text-lg text-bold">{{shopOrder.payMoney}}</text></view>
						<view class="text-lg" v-else-if="shopOrder.payStatus == 0"><text>需付款</text><text
								class="text-price text-red text-lg text-bold">{{Math.round((shopOrder.payMoney + shopOrder.changeMoney) * 100) / 100}}</text></view>
					</view>
					<view class="padding-bottom-sm flex justify-end align-end text-red text-lg" v-if="shopOrder.payStatus == 1 && shopOrder.changeMoney">您有报价/加价申请待付款中......</view>
					<view v-if="orderType === 0" class="padding-tb-sm">
						<view class="flex justify-end">
							<button v-if="[0,1].indexOf(shopOrder.orderStatus) >= 0" class="cu-btn bg-gray margin-right-sm shadow-blur" @click="showModalByRef('confirmModal', shopOrder)">取消订单</button>
							<button v-if="shopOrder.payStatus != 1 || shopOrder.changeMoney" class="cu-btn bg-main-color shadow-blur margin-right-sm" @click="wxpay(shopOrder)">付款</button>
							<button class="cu-btn bg-main-color shadow-blur" @click="showServDetail(shopOrder)">查看</button>
						</view>
					</view>
					<view v-if="orderType === 0 && shopOrder.orderStatus === 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 class="cu-btn sm bg-yellow margin-right-sm"
									@click="updateFinisheStatus(shopOrder, 5, false)">确认完单</button>
								<button class="cu-btn sm bg-yellow margin-right-sm" @click="showModalByRef('applyAfterService', shopOrder, {afterServiceType: 2, toUpdateStatus: true})">拒绝完单</button>
							</view>
						</view>
					</view>
					<view
						v-if="orderType === 0"
						class="padding-tb-sm solid-top">
						<view>约定服务时间：</view>
						<view class="flex justify-between align-end">
							<view v-if="shopOrder.expectTimeEndFront">{{shopOrder.expectTimeStartFront + '~' + shopOrder.expectTimeEndFront}}</view>
							<view v-else>{{shopOrder.expectTimeStartFront}}</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 === 0 && shopOrder.subProcessStatus === 1"
						class="padding-tb-sm solid-top text-orange">
						路途遥远？服务内容稍难？时间紧迫？您可以试试追加赏金，重金之下必有勇夫噢！
					</view>
				</view>
			</view>
		</view>
		<load-status-bar ref="loadStatusBar" @loadMore="loadOrderPage"></load-status-bar>
		<confirm-modal ref="confirmModal" :content="'是否确定取消订单？'" @confirm="cancelOrder" @cancel="blurCurOrder"></confirm-modal>
		<apply-after-service ref="applyAfterService" :data="curOrder" @confirmFeedback="reloadOrderPage" @cancel="blurCurOrder"></apply-after-service>
	</view>
</template>

<script>
	import productPicked from '@/pages/my/components/product-picked.vue';
	import loadStatusBar from '@/components/custom-bar/load-status-bar.vue';
	import applyAfterService from '@/pages/my/components/modal/apply-after-service.vue';

	export default {
		components: {
			productPicked,
			loadStatusBar,
			applyAfterService
		},
		data() {
			return {
				curUserInfo: {},
				scrollLeft: 0,
				tabCur: 0,
				tabHeaderList: [],
				orderType: '',
				myOrders: [],
				pageParams: [],
				stickyTop: this.CustomBar,
				curOrder: null
			}
		},
		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();
				}
			}
		},
		methods: {
			loadData() {
				this.curUserInfo = this.$request.getCurUserInfo();
				for(let i = 0; i < this.tabHeaderList.length; i++) {
					this.pageParams.push({
						pageNum: this.$globalData.initPageNum
					});
				}
				// 真实对接口的时候使用
				// this.myOrders = await this.$api.data(this.orderType, mainProcess);
				// this.myOrders = await this.$api.data(mainProcess);
				this.loadOrderPage();
			},
			searchOrderPage(keyWords) {
				this.reloadOrderPage({
					keyWords: keyWords
				})
			},
			reloadOrderPage(params = {}) {
				this.pageParams = [];
				for(let i = 0; i < this.tabHeaderList.length; i++) {
					this.pageParams.push({
						pageNum: this.$globalData.initPageNum
					});
				}
				this.myOrders = [];
				this.$refs.loadStatusBar.showLoadMore();
				this.loadOrderPage(params);
			},
			async loadOrderPage(params = {}) {
				params.pageNum = this.pageParams[this.tabCur].pageNum;
				params.pageSize = this.$globalData.initPageSize;
				this.$refs.loadStatusBar.showLoading();
				try {
					params.customerId = this.curUserInfo.customerId;
					params.orderType = this.orderType;
					let orderStatus = this.tabHeaderList[this.tabCur].type;
					if (typeof orderStatus == 'string' && orderStatus.indexOf(",") > 0) {
						params.orderStatuses = orderStatus;
					} else {
						params.orderStatus = orderStatus;
					}
					if (this.tabCur === 0) {
						params.payStatusList = "0,4";
						params.exceptOrderStatus = 6;
					}
					let res = null;
					if (this.tabCur === 3) {
						res = await this.$request.getAfterList({
							customerId: params.customerId
						});
					} else {
						res = await this.$request.qryOrderPage(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();
				}
			},
			tabSelect(e) {
				this.tabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
				this.reloadOrderPage();
			},
			updateAgreeStatus(status, index) {
				this.myOrders[index].agreedServTime.customerAgreeStatus = status;
			},
			async updateFinisheStatus(order, status, ifRollback) {
				let res = await this.$request.updateOrder({
					id: order.orderMasterId,
					orderStatus: status
				});
				if (res && res.code === 0) {
					this.reloadOrderPage();
					if (ifRollback) {
						uni.showToast({
							title: '订单已回滚至服务中状态，请联系师傅',
							icon: 'none',
							duration: 3000
						})
					}
				}
				return res;
			},
			showServDetail(order) {
				uni.navigateTo({
					url: '/pages/my/serv-detail?order=' + encodeURIComponent(JSON.stringify(order))
				})
			},
			showModalByRef(refName, curOrder, params) {
				this.$refs[refName].showModal(curOrder, params);
				this.curOrder = curOrder;
			},
			blurCurOrder() {
				this.curOrder = null;
			},
			async cancelOrder() {
				let res = await this.$request.cancelMasterOrder({
					orderMasterId: this.curOrder.orderMasterId
				});
				if (res && res.code === 0) {
					this.reloadOrderPage();
					uni.showToast({
						title: '取消成功',
						icon: 'success',
						duration: 2000
					})
				} else {
					uni.showToast({
						title: '取消失败',
						icon: 'error'
					})
				}
			},
			async wxpay(curOrder) {
				try {
					// 获取微信支付所需参数
					let wxPayParams = {
						code: this.$request.getCurUserInfo().openId,
						orderMasterCode: curOrder.orderMasterCode
					}
					let wxPayParamRes = await this.$request.getWxPayParams(wxPayParams);
					// 拉起微信支付窗口,支付成功跳转到支付成功页面
					let payInfo = JSON.parse(wxPayParamRes.data.expend.pay_info);
					let wxPayRes = await wx.requestPayment(payInfo);
					if (wxPayRes.errMsg === "requestPayment:ok") {
						uni.navigateTo({
							url: '/pages/order/pay-result?payResult=0'
						})
					} else {
						throw 'err';
					}
				} catch(e) {
					// 支付失败弹出提示并跳转到我的订单待支付页
					uni.navigateTo({
						url: '/pages/order/pay-result?payResult=1'
					})
				}
			}
		}
	}
</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>