页面开发

common/js/data.js

@@ -252,21 +252,28 @@ const myOrders = {
 		id: 1,
 		title: '清洗空调/挂机内机拆洗（不分匹）',
 		state: '',
-		subState: 'waitServing',
+		subState: 'afterSaleService',
 		tags: [{
 			level: 'info',
 			content: '商城订单'
-		}, {
-			level: 'error',
-			content: '超时未预约'
 		}],
 		name: 'cc',
 		address: '广东省广州市天河区。。。。。。',
 		servTime: '2022-06-01 08:00-08:30',
 		doorTime: '2022-06-01 08:15:00',
-		comments: '备注内容。。。。。。',
+		comments: '服务超时，超上门时间8小时后，即计为罚款。但重排不超时或申请完单退出状态。',
 		phoneNum: '13233433467',
 		deadlineDate: '2022-06-01 08:30:00',
+		chargeReachDate: '2022-06-04 08:30:00',
+		afterSaleType: 'unfinished',// finished || unfinished
+		applyRefundLastTime: '2022-06-01 08:30:00',
+		refundAmount: '--',
+		refundReachAmount: '0.49',
+		refundReason: '客户家条件限制，无法装',
+		refundStatus: '',
+		waitAfterSaleLastTime: '2022-06-01 08:30:00',
+		afterSaleReason: '清洗不干净啊！',
+		afterSaleDealStatus: '',
 		product: {
 			id: 1,
 			picUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big20000.jpg',
@@ -580,6 +587,13 @@ const chatMsgList = [{
 	time: '13:25'
 }]
 
+const picImgList = [
+	// 'https://ossweb-img.qq.com/images/lol/web201310/skin/big50000.jpg',
+	// 'https://ossweb-img.qq.com/images/lol/web201310/skin/big50001.jpg',
+	// 'https://ossweb-img.qq.com/images/lol/web201310/skin/big50002.jpg',
+	// 'https://ossweb-img.qq.com/images/lol/web201310/skin/big50003.jpg'
+]
+
 export default {
 	moduleBarInfos,
 	myInfo,
@@ -603,5 +617,6 @@ export default {
 	statementDesc,
 	payDeposit,
 	personToChat,
-	chatMsgList
+	chatMsgList,
+	picImgList
 }

common/js/request.js

@@ -144,6 +144,19 @@ export default {
 		let userProfile = uni.getStorageSync('userProfile');
 		return userProfile;
 	},
+	async getCurUserNoCache() {
+		let userInfo = this.getCurUserInfo();
+		let wxGetUserRes = await this.qryUserInfo(userInfo.openId);
+		if (!wxGetUserRes.data) {
+			userInfo = null;
+		} else {
+			userInfo = {
+				...wxGetUserRes.data,
+				wxLoginCode: userInfo.wxLoginCode
+			}
+		}
+		return userInfo;
+	},
 	async uploadFile(filePath) {
 		let res = await uni.uploadFile({
 			url: this.address + '/tool/qiniu/upload',

components/modal/pic-modal.vue

@@ -0,0 +1,62 @@
+<template>
+	<view>
+		<!-- 模态框 -->
+		<view class="cu-modal" :class="isShow?'show':''">
+			<view class="cu-dialog">
+				<view class="padding-xl">
+					<view class="grid flex-sub padding-lr col-3 grid-square" v-if="imgList && imgList.length > 0">
+						<view class="bg-img" :style="'background-image:url(' + url + ');'"
+							v-for="(url, index) in imgList" :key="index" :data-url="url" @click="viewImage($event)">
+						</view>
+					</view>
+					<view v-else class="text-center text-lg text-gray">
+						无图片上传记录
+					</view>
+				</view>
+				<view class="cu-bar bg-white">
+					<view class="action margin-0 flex-sub text-main-color solid-left" @tap="hideModal">{{confirmMsg}}</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'pic-modal',
+		props: {
+			imgList: {
+				type: Array,
+				default: []
+			},
+			confirmMsg: {
+				type: String,
+				default: '确定'
+			}
+		},
+		data() {
+			return {
+				isShow: false
+			}
+		},
+		methods: {
+			showModal(e) {
+				this.isShow = true
+			},
+			hideModal(e) {
+				this.isShow = false
+			},
+			viewImage(e) {
+				console.log(this.imgList)
+				console.log(e.currentTarget.dataset.url)
+				uni.previewImage({
+					urls: this.imgList,
+					current: e.currentTarget.dataset.url
+				});
+			}
+		}
+	}
+</script>
+
+<style>
+</style>

pages.json

@@ -47,6 +47,10 @@
 			"path": "statement-desc"
 		}, {
 			"path": "pay-deposit"
+		}, {
+			"path": "personal-info"
+		}, {
+			"path": "account-security"
 		}]
 	}],
 	"globalStyle": {

pages/index/my-home.vue

@@ -84,7 +84,8 @@
 					pageUrl: '/pages/my/goods-manage'
 				}, {
 					name: '个人信息',
-					icon: 'lock'
+					icon: 'lock',
+					pageUrl: '/pages/my/personal-info'
 				}, {
 					name: '法律声明',
 					icon: 'read'

pages/my/account-security.vue

@@ -0,0 +1,36 @@
+<template>
+	<view>
+		<!-- 顶部操作条 -->
+		<cu-custom :bgColor="'bg-main-color'" :isBack="true">
+			<block slot="backText">返回</block>
+			<block slot="content">帐号安全</block>
+		</cu-custom>
+		<view class="margin-top-sm bg-white">
+			<view class="cu-form-group">
+				<view class="title">绑定手机</view>
+				<view>{{curUserInfo.phone}}</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				curUserInfo: {}
+			}
+		},
+		onLoad() {
+			this.loadData();
+		},
+		methods: {
+			async loadData() {
+				this.curUserInfo = await this.$request.getCurUserNoCache();
+			}
+		},
+	}
+</script>
+
+<style>
+</style>

pages/my/personal-info.vue

@@ -0,0 +1,65 @@
+<template>
+	<view>
+		<!-- 顶部操作条 -->
+		<cu-custom :bgColor="'bg-main-color'" :isBack="true">
+			<block slot="backText">返回</block>
+			<block slot="content">个人信息</block>
+		</cu-custom>
+		<form @submit="submit">
+			<view class="margin-top-sm bg-white">
+				<view class="cu-form-group">
+					<view class="title">用户昵称</view>
+					<input name="name" :value="curUserInfo.name"></input>
+				</view>
+				<view class="cu-form-group">
+					<view class="title">公司名称</view>
+					<input name="companyName" :value="curUserInfo.companyName"></input>
+				</view>
+				<view class="cu-form-group">
+					<view class="title">联系地址</view>
+					<input name="addressName" :value="curUserInfo.addressName"></input>
+				</view>
+				<view class="cu-form-group">
+					<view class="title">电子邮箱</view>
+					<input name="email" :value="curUserInfo.email"></input>
+				</view>
+			</view>
+			<view class="margin-top-sm bg-white">
+				<view class="cu-form-group" @click="showAccountSecurity">
+					<view class="title">帐号安全</view>
+					<view class="text-lg"><text class="cuIcon-right"></text></view>
+				</view>
+			</view>
+			<!-- 底部操作栏 -->
+			<view class="cu-bar tabbar border shop fixed-bottom-bar">
+				<button class="cu-btn bg-main-color long-btn margin-lr-sm shadow-blur" form-type="submit">保存</button>
+			</view>
+		</form>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				curUserInfo: {}
+			}
+		},
+		onLoad() {
+			this.loadData();
+		},
+		methods: {
+			async loadData() {
+				this.curUserInfo = await this.$request.getCurUserNoCache();
+			},
+			showAccountSecurity() {
+				uni.navigateTo({
+					url: '/pages/my/account-security'
+				})
+			}
+		},
+	}
+</script>
+
+<style>
+</style>

pages/order-manage/order-manage.vue

@@ -74,7 +74,8 @@
 				<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'" class="right-tag padding-lr-sm padding-tb-xs bg-purple">服</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>
@@ -107,6 +108,16 @@
 					: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>
@@ -132,6 +143,61 @@
 				<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>
@@ -143,6 +209,8 @@
 		<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
@@ -165,6 +233,8 @@
 	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: {
@@ -174,7 +244,9 @@
 			editTimeArrange,
 			dispatchOrder,
 			newServPrice,
-			payQrcode
+			payQrcode,
+			urgentMsg,
+			picModal
 		},
 		data() {
 			return {
@@ -235,7 +307,9 @@
 				showNewServPriceModal: false,
 				showPayQrcodeModal: false,
 				showEditTimeArrangeModal: false,
-				ifShowPageMeta: false
+				sendUrgentMsgModal: false,
+				ifShowPageMeta: false,
+				picModalImgList: []
 			}
 		},
 		onLoad() {
@@ -302,6 +376,9 @@
 				}
 				this[e.currentTarget.dataset.modal] = true;
 			},
+			showModalByRef(refName) {
+				this.$refs[refName].showModal();
+			},
 			hideModal(e) {
 				this.curOrder = null;
 				this[e.currentTarget.dataset.modal] = false;
@@ -353,6 +430,17 @@
 				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)
 			}
 		}
 	}