页面开发

common/js/data.js

@@ -328,6 +328,7 @@ const servDetail = {
 	}],
 	mainServOrder: {
 		servTitle: '清洗-空调',
+		picUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big20000.jpg',
 		orderTag: ['挂机', '到付试单', '到付款单'],
 		address: '北京市东城区东华街道0.1到付+0.1代收',
 		person2Contact: {
@@ -470,6 +471,115 @@ const specsList = [{
 	name: '小修（压敏/盘管/传感器/接收器/定时器）'
 }]
 
+const myMoneyBag = {
+	balance: '5221.79',
+	balanceToExtract: '0.00',
+	bill: [{
+		duration: '2022年01月',
+		income: '20478.96',
+		outgoings: '-21065.36',
+		statement: [{
+			name: '余额支付',
+			createTime: '2022-01-19 15:44:32',
+			inOutMoney: '-170.00'
+		}, {
+			name: '商城退单',
+			createTime: '2022-01-18 15:44:32',
+			inOutMoney: '+8.00'
+		}]
+	}, {
+		duration: '2022年01月',
+		income: '20478.96',
+		outgoings: '-21065.36',
+		statement: [{
+			name: '余额支付',
+			createTime: '2022-01-19 15:44:32',
+			inOutMoney: '-170.00'
+		}, {
+			name: '商城退单',
+			createTime: '2022-01-18 15:44:32',
+			inOutMoney: '+8.00'
+		}]
+	}, {
+		duration: '2022年01月',
+		income: '20478.96',
+		outgoings: '-21065.36',
+		statement: [{
+			name: '余额支付',
+			createTime: '2022-01-19 15:44:32',
+			inOutMoney: '-170.00'
+		}, {
+			name: '商城退单',
+			createTime: '2022-01-18 15:44:32',
+			inOutMoney: '+8.00'
+		}]
+	}, {
+		duration: '2022年01月',
+		income: '20478.96',
+		outgoings: '-21065.36',
+		statement: [{
+			name: '余额支付',
+			createTime: '2022-01-19 15:44:32',
+			inOutMoney: '-170.00'
+		}, {
+			name: '商城退单',
+			createTime: '2022-01-18 15:44:32',
+			inOutMoney: '+8.00'
+		}]
+	}, {
+		duration: '2022年01月',
+		income: '20478.96',
+		outgoings: '-21065.36',
+		statement: [{
+			name: '余额支付',
+			createTime: '2022-01-19 15:44:32',
+			inOutMoney: '-170.00'
+		}, {
+			name: '商城退单',
+			createTime: '2022-01-18 15:44:32',
+			inOutMoney: '+8.00'
+		}]
+	}]
+}
+
+const statementDesc = {
+	inOutMoney: '-59.00',
+	name: '同意追加费用',
+	status: '0', //0为交易成功
+	desc: '同意追加费用',
+	payRemark: '微信支付到帐',
+	extractCode: '',
+	createTime: '2022-01-20 15:44:32',
+	orderCode: '20210612337987373',
+	orderCreateTime: '2022-01-16 15:44:32'
+}
+
+const payDeposit = {
+	paidAmount: '0.00'
+}
+
+const personToChat = {
+	id: 3,
+	name: 'vvv'
+}
+
+const chatMsgList = [{
+	sendUserId: 2,
+	recvUserId: 3,
+	msg: '喵喵？',
+	time: '13:23'
+}, {
+	sendUserId: 3,
+	recvUserId: 2,
+	msg: '喵喵!',
+	time: '13:24'
+}, {
+	sendUserId: 2,
+	recvUserId: 3,
+	msg: '汪汪汪！@#￥%……&*（）~',
+	time: '13:25'
+}]
+
 export default {
 	moduleBarInfos,
 	myInfo,
@@ -488,5 +598,10 @@ export default {
 	areaObj,
 	specsList,
 	regionList,
-	districtList
+	districtList,
+	myMoneyBag,
+	statementDesc,
+	payDeposit,
+	personToChat,
+	chatMsgList
 }

components/js_sdk/m-emoji/package.json

@@ -0,0 +1,9 @@
+{
+    "id": "m-emoji",
+    "name": "表情库",
+    "version": "2.0.0",
+    "description": "单纯的js引入就可以用",
+    "keywords": [
+        "表情"
+    ]
+}

pages.json

@@ -1,6 +1,8 @@
 {
 	"pages": [{
 		"path": "pages/index/index"
+	}, {
+		"path": "pages/index/msg-dialog"
 	}],
 	"subPackages": [{
 		"root": "pages/area-proxy/",
@@ -24,6 +26,8 @@
 			"path": "serv-detail"
 		}, {
 			"path": "finish-order"
+		}, {
+			"path": "cancel-order"
 		}]
 	}, {
 		"root": "pages/my/",
@@ -37,6 +41,12 @@
 			"path": "withdraw"
 		}, {
 			"path": "bank-account-bind"
+		}, {
+			"path": "my-money-bag"
+		}, {
+			"path": "statement-desc"
+		}, {
+			"path": "pay-deposit"
 		}]
 	}],
 	"globalStyle": {

pages/index/index.vue

@@ -2,6 +2,7 @@
 	<view>
 		<index v-if="curPageCode === 'indexPage'"></index>
 		<my-home v-else-if="curPageCode === 'myPage'"></my-home>
+		<msg-home v-else-if="curPageCode === 'msgPage'"></msg-home>
 		<module-bar :moduleBarInfos="moduleBarInfos"></module-bar>
 	</view>
 </template>
@@ -10,12 +11,14 @@
 	import moduleBar from '@/components/custom-bar/module-bar.vue';
 	import index from '@/pages/index/index-home.vue';
 	import myHome from '@/pages/index/my-home.vue';
+	import msgHome from '@/pages/index/msg-home.vue';
 
 	export default {
 		components: {
 			moduleBar,
 			index,
-			myHome
+			myHome,
+			msgHome
 		},
 		data() {
 			return {

pages/index/msg-dialog.vue

@@ -0,0 +1,167 @@
+<template>
+	<view>
+		<!-- 顶部操作条 -->
+		<cu-custom :bgColor="'bg-white'" :isBack="true">
+			<block slot="backText">返回</block>
+			<block slot="content">{{personToChat.name}}</block>
+		</cu-custom>
+		<view class="cu-chat" @click="downPanelBlur" style="min-height: 70vh;">
+			<view class="cu-item self" v-for="(item,index) in chatMsgList"
+				v-if="item.sendUserId === curUserInfo.customerId">
+				<view class="main">
+					<view class="content bg-main-color shadow">
+						<text>{{item.msg}}</text>
+					</view>
+				</view>
+				<view class="cu-avatar radius" :style="'background-image:url(' + curUserInfo.customerLogoUrl + ');'">
+				</view>
+				<view class="date">{{item.time}}</view>
+			</view>
+			<view class="cu-item" v-else>
+				<view class="cu-avatar radius" :style="'background-image:url(' + personToChat.customerLogoUrl + ');'">
+				</view>
+				<view class="main">
+					<view class="content shadow">
+						<text>{{item.msg}}</text>
+					</view>
+				</view>
+				<view class="date">{{item.time}}</view>
+			</view>
+			<!-- 内容发送中提示 -->
+			<view class="cu-info" v-if="showLoading">
+				<view class="load-info loading">内容发送中</view>
+			</view>
+			<!-- 内容发送失败提示 -->
+			<view class="cu-info" v-if="showLoadErr">
+				<text class="cuIcon-roundclosefill text-red margin-right-xs"></text>内容发送失败
+			</view>
+		</view>
+		<view class="cu-bar foot input" :style="[{bottom:InputBottom +'px'}]">
+			<view class="action" @click="showFuncAreaFun">
+				<text class="cuIcon-roundadd text-grey"></text>
+			</view>
+			<input class="solid-bottom" :adjust-position="false" :focus="false" maxlength="300" cursor-spacing="10"
+				@focus="InputFocus" @blur="InputBlur" v-model="inputContent"></input>
+			<!-- <view class="action" @click="showEmojiFun">
+				<text class="cuIcon-emojifill text-grey"></text>
+			</view> -->
+			<button class="cu-btn bg-main-color shadow" @click="sendMsg('text')">发送</button>
+		</view>
+		<!-- 功能区，图片发送 -->
+		<view class="downPanel" :style="'height:' + InputBottom + 'px'" v-if="showFuncArea || showEmoji">
+			<view v-if="showFuncArea">
+				<view class='grid grid-square col-4 padding'>
+					<view class="text-center">
+						<view class="text-sl"><text class='cuIcon-pic'></text></view>
+						<view>相册</view>
+					</view>
+				</view>
+			</view>
+			<view v-else-if="showEmoji">
+
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import emoji from "@/components/js_sdk/m-emoji/m-emoji_2.0.0/emoji.js";
+
+	export default {
+		data() {
+			return {
+				InputBottom: 0,
+				personToChat: null,
+				curUserInfo: null,
+				chatMsgList: [],
+				showFuncArea: false,
+				showEmoji: false,
+				showLoading: false,
+				showLoadErr: false,
+				inputContent: ''
+			}
+		},
+		onLoad() {
+			this.loadData();
+		},
+		methods: {
+			async loadData() {
+				this.curUserInfo = this.$request.getCurUserInfo();
+				this.personToChat = await this.$api.data('personToChat');
+				this.chatMsgList = await this.$api.data('chatMsgList');
+			},
+			InputFocus(e) {
+				this.InputBottom = e.detail.height;
+			},
+			InputBlur(e) {
+				this.InputBottom = this.showEmoji || this.showFuncAreaFun ? this.InputBottom : 0;
+			},
+			downPanelBlur() {
+				this.showEmoji = false;
+				this.showFuncArea = false;
+				this.InputBottom = 0;
+			},
+			showFuncAreaFun() {
+				uni.hideKeyboard();
+				this.showFuncArea = true;
+				this.showEmoji = false;
+				this.InputBottom = this.InputBottom === 0 ? 300 : this.InputBottom;
+			},
+			showEmojiFun() {
+				uni.hideKeyboard();
+				this.showFuncArea = false;
+				this.showEmoji = true;
+				this.InputBottom = this.InputBottom === 0 ? 300 : this.InputBottom;
+			},
+			sendMsg(type) {
+				if (type === 'text' && this.inputContent != '') {
+					this.showLoading = true;
+					let content = this.inputContent;
+					this.inputContent = '';
+					// TODO：模拟调用后台服务发送消息
+					setTimeout(() => {
+						this.chatMsgList.push({
+							sendUserId: this.curUserInfo.customerId,
+							recvUserId: this.personToChat.customerId,
+							msg: content,
+							time: new Date()
+						})
+						this.showLoading = false;
+					}, 0)
+				}
+			}
+		},
+	}
+</script>
+
+<style>
+	page {
+		padding-bottom: 100upx;
+	}
+
+	.downPanel {
+		position: fixed;
+		bottom: 0;
+		width: 100%;
+	}
+
+	.load-info.loading::before {
+		content: "\e67a";
+		-webkit-animation: cuIcon-spin 2s infinite linear;
+		animation: cuIcon-spin 2s infinite linear;
+		animation-duration: 2s;
+		animation-timing-function: linear;
+		animation-delay: 0s;
+		animation-iteration-count: infinite;
+		animation-direction: normal;
+		animation-fill-mode: none;
+		animation-play-state: running;
+		animation-name: cuIcon-spin;
+	}
+
+	.load-info::before {
+		font-family: "cuIcon";
+		display: inline-block;
+		margin-right: 6rpx;
+	}
+</style>

pages/index/msg-home.vue

@@ -0,0 +1,176 @@
+<template>
+	<view class="margin-bottom-lg">
+		<!-- 顶部操作条 -->
+		<cu-custom :bgColor="'bg-main-color'">
+			<block slot="content">消息大厅</block>
+		</cu-custom>
+		<!-- 消息分类 -->
+		<view class="solid-bottom">
+			<view class='bg-white grid grid-square col-4 padding-sm'>
+				<view class="text-center shadow-warp" :class="curMsgType === 0 ? 'bg-main-color light' : 'bg-gray'"
+					@click="changeCurMsgType(0)">
+					<view class='cu-tag badge round bg-red' v-if="msgAmount.customerQuestion > 0">
+						{{msgAmount.customerQuestion}}
+					</view>
+					<view class="text-sl center-icon"><text class='cuIcon-people'></text></view>
+					<view>客户咨询</view>
+				</view>
+				<view class="text-center shadow-warp" :class="curMsgType === 1 ? 'bg-main-color light' : 'bg-gray'"
+					@click="changeCurMsgType(1)">
+					<view class='cu-tag badge round bg-red' v-if="msgAmount.statusChange > 0">{{msgAmount.statusChange}}
+					</view>
+					<view class="text-sl center-icon"><text class='cuIcon-emoji'></text></view>
+					<view>状态变动</view>
+				</view>
+				<view class="text-center shadow-warp" :class="curMsgType === 2 ? 'bg-main-color light' : 'bg-gray'"
+					@click="changeCurMsgType(2)">
+					<view class='cu-tag badge round bg-red' v-if="msgAmount.hurryMsg > 0">{{msgAmount.hurryMsg}}</view>
+					<view class="text-sl center-icon"><text class='cuIcon-mail'></text></view>
+					<view>急报信息</view>
+				</view>
+				<view class="text-center shadow-warp" :class="curMsgType === 3 ? 'bg-main-color light' : 'bg-gray'"
+					@click="changeCurMsgType(3)">
+					<view class='cu-tag badge round bg-red' v-if="msgAmount.sysNotice > 0">{{msgAmount.sysNotice}}
+					</view>
+					<view class="text-sl center-icon"><text class='cuIcon-notice'></text></view>
+					<view>系统通知</view>
+				</view>
+			</view>
+		</view>
+		<!-- 消息列表 -->
+		<view class="cu-list menu-avatar">
+			<view class="cu-item bottom-border" v-for="(item,index) in msgList" @click="showMsgDetail(item)">
+				<view class="cu-avatar radius lg"
+					style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png);"></view>
+				<view class="content">
+					<view class="text-black">
+						<view class="text-cut">{{item.name}}</view>
+					</view>
+					<view class="text-gray text-sm flex">
+						<view class="text-cut">{{item.lastMsg}}</view>
+					</view>
+				</view>
+				<view class="action padding-right-xs">
+					<view class="text-grey text-sm">{{item.recvTime}}</view>
+					<view class="cu-tag round bg-red sm">{{item.amount}}</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'msg-home',
+		data() {
+			return {
+				curMsgType: 0,
+				msgAmount: {
+					customerQuestion: 10,
+					statusChange: 2,
+					hurryMsg: 4,
+					sysNotice: 0
+				},
+				msgList: [{
+					name: 'vvv',
+					lastMsg: '消息内容xxxxxxx',
+					recvTime: '2022-05-20',
+					amount: 5
+				}, {
+					name: 'vvv',
+					lastMsg: '消息内容xxxxxxx',
+					recvTime: '2022-05-20',
+					amount: 5
+				}, {
+					name: 'vvv',
+					lastMsg: '消息内容xxxxxxx',
+					recvTime: '2022-05-20',
+					amount: 5
+				}, {
+					name: 'vvv',
+					lastMsg: '消息内容xxxxxxx',
+					recvTime: '2022-05-20',
+					amount: 5
+				}, {
+					name: 'vvv',
+					lastMsg: '消息内容xxxxxxx',
+					recvTime: '2022-05-20',
+					amount: 5
+				}]
+			}
+		},
+		onReady() {
+			this.loadData();
+		},
+		methods: {
+			async loadData() {
+
+			},
+			changeCurMsgType(type) {
+				this.curMsgType = type
+			},
+			showMsgDetail(msgObj) {
+				uni.navigateTo({
+					url: '/pages/index/msg-dialog'
+				})
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.center-icon {
+		padding-top: calc((100% - 108rpx)/3);
+	}
+
+	.grid.grid-square .cu-tag.bg-red {
+		background-color: #e54d42;
+		color: #ffffff;
+	}
+
+	.cu-list.menu-avatar>.cu-item .content {
+		position: absolute;
+		left: 146rpx;
+		width: calc(100% - 96rpx - 60rpx - 120rpx - 20rpx - 50rpx);
+		line-height: 1.6em;
+	}
+
+	.cu-list.menu-avatar>.cu-item .action {
+		width: 200rpx;
+		text-align: right;
+	}
+
+	.grid.grid-square>view {
+		transition: all 0.2s ease-in-out 0s;
+	}
+
+	.cu-list.menu-avatar>.cu-item:after,
+	.cu-list.menu>.cu-item:after {
+		border: none;
+	}
+
+	.cu-list>.cu-item:last-child:after,
+	.cu-list.menu>.cu-item:last-child:after {
+		border: none;
+	}
+
+	.bottom-border {
+		border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
+	}
+
+	.bottom-border:last-child {
+		border-bottom: none;
+	}
+
+	.text-sl {
+		font-size: 60rpx;
+	}
+
+	.grid.col-4.grid-square>view {
+		padding-bottom: calc((100% - 60rpx)/4);
+		height: 0;
+		width: calc((100% - 60rpx)/4);
+		border-radius: 50%;
+		overflow: visible;
+	}
+</style>

pages/index/my-home.vue

@@ -7,7 +7,7 @@
 			</view>
 			<view class="text-xl margin-sm">{{curUserInfo.name}}</view>
 			<view class="cu-list grid no-border col-2" style="background-color: inherit;">
-				<view class="cu-item">
+				<view class="cu-item" @click="clickMenuItem({pageUrl: '/pages/my/my-money-bag'})">
 					<view class="margin-bottom-xs text-xxl">{{myInfo.balance}}</view>
 					<view>我的钱包</view>
 				</view>
@@ -69,7 +69,8 @@
 					pageUrl: '/pages/my/withdraw'
 				}, {
 					name: '交易明细',
-					icon: 'form'
+					icon: 'form',
+					pageUrl: '/pages/my/my-money-bag'
 				}, {
 					name: '服务明细',
 					icon: 'calendar'
@@ -101,7 +102,8 @@
 					icon: 'community'
 				}, {
 					name: '师傅缴费',
-					icon: 'sponsor'
+					icon: 'sponsor',
+					pageUrl: '/pages/my/pay-deposit'
 				}]
 			}
 		},

pages/my/bank-account-bind.vue

@@ -48,8 +48,8 @@
 			</view>
 		</view>
 		<!-- 操作按钮 -->
-		<view class="cu-bar tabbar border shop">
+		<view class="margin-lr">
-			<button class="bg-main-color long-btn margin-lr" @click="submit">提交</button>
+			<button class="cu-btn lg bg-main-color long-btn shadow-blur" @click="submit">提交</button>
 		</view>
 	</view>
 </template>

pages/my/my-money-bag.vue

@@ -5,11 +5,76 @@
 			<block slot="backText">返回</block>
 			<block slot="content">我的钱包</block>
 		</cu-custom>
-		
+		<view class="margin-sm shadow-warp">
+			<view class="padding-tb-lg padding-lr bg-gradual-color light">
+				<view>账户余额（元）</view>
+				<view class="flex justify-between margin-top-sm">
+					<view class="text-xxl">{{myMoneyBag.balance}}</view>
+					<view class="cu-btn bg-white radius">充值</view>
+				</view>
+			</view>
+			<view class="padding bg-white flex justify-between">
+				<view>可提现金额：<text class="text-price text-black">{{myMoneyBag.balanceToExtract}}</text></view>
+				<view>
+					<text>提现</text>
+					<text class="cuIcon-right"></text>
+				</view>
+			</view>
+		</view>
+		<view class="margin-bottom-lg">
+			<view v-for="(billItem, index) in myMoneyBag.bill">
+				<uni-collapse v-model="openStatusArr[index]">
+					<uni-collapse-item>
+						<template v-slot:title>
+							<view class="padding bg-white">
+								<view class="margin-bottom-xs">{{billItem.duration}}</view>
+								<view>
+									<text class="margin-right"><text>支出：</text><text class="text-price text-black">{{billItem.outgoings}}</text></text>
+									<text><text>收入：</text><text class="text-price text-black">{{billItem.income}}</text></text>
+								</view>
+							</view>
+						</template>
+						<view>
+							<view v-for="(item, index1) in billItem.statement" class="bg-white padding flex justify-between align-center" @click="showDetail">
+								<view>
+									<view class="margin-bottom-xs">{{item.name}}</view>
+									<view>{{item.createTime}}</view>
+								</view>
+								<view class="text-price text-black">{{item.inOutMoney}}</view>
+							</view>
+						</view>
+					</uni-collapse-item>
+				</uni-collapse>
+			</view>
+		</view>
 	</view>
 </template>
 
 <script>
+	export default {
+		data() {
+			return {
+				openStatusArr: [['0']], //0打开，1收起
+				myMoneyBag: {}
+			}
+		},
+		onLoad() {
+			this.loadData();
+		},
+		methods: {
+			async loadData() {
+				this.myMoneyBag = await this.$api.data('myMoneyBag');
+				for(let i = 0; i < this.myMoneyBag.bill.length - 1; i++) {
+					this.openStatusArr.concat(['1']);
+				}
+			},
+			showDetail() {
+				uni.navigateTo({
+					url: '/pages/my/statement-desc'
+				})
+			}
+		},
+	}
 </script>
 
 <style>

pages/my/pay-deposit.vue

@@ -0,0 +1,49 @@
+<template>
+	<view>
+		<view class="bg-gradual-color">
+			<!-- 顶部操作条 -->
+			<cu-custom :bgColor="''" :isBack="true">
+				<block slot="backText">返回</block>
+				<block slot="content">保证金</block>
+			</cu-custom>
+			<view class="padding-sm">
+				<view class="padding light">
+					<view>已缴纳诚信保证金（元）</view>
+					<view class="margin-top-sm">
+						<view class="text-sl text-price text-bold">{{payDeposit.paidAmount}}</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="text-center">
+			<view class="margin-top-lg padding-lg">
+				<view class="text-lg">优先派单 | 更多雇佣</view>
+				<view>保障服务完成 | 保障服务质量 | 保障售后问题</view>
+			</view>
+			<view class="margin-top-lg padding-lg">
+				<button class="cu-btn lg bg-main-color long-btn shadow-blur">缴纳保证金</button>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				payDeposit: {}
+			}
+		},
+		onLoad() {
+			this.loadData();
+		},
+		methods: {
+			async loadData() {
+				this.payDeposit = await this.$api.data('payDeposit');
+			}
+		},
+	}
+</script>
+
+<style>
+</style>

pages/my/statement-desc.vue

@@ -0,0 +1,66 @@
+<template>
+	<view>
+		<!-- 顶部操作条 -->
+		<cu-custom :bgColor="'bg-main-color'" :isBack="true">
+			<block slot="backText">返回</block>
+			<block slot="content">账单详情</block>
+		</cu-custom>
+		<view class="padding margin-top-sm bg-white">
+			<view class="padding-tb-lg text-center solid-bottom">
+				<view class="text-black text-sl">{{statementDesc.inOutMoney}}</view>
+				<view class="text-gray">{{statementDesc.name}}</view>
+			</view>
+			<view class="padding-tb-lg">
+				<view class="margin-bottom-sm">
+					<text class="text-gray">当前状态：</text>
+					<text>{{statementDesc.status === '0' ? '交易成功' : '交易失败'}}</text>
+				</view>
+				<view class="margin-bottom-sm">
+					<text class="text-gray">详情说明：</text>
+					<text>{{statementDesc.desc}}</text>
+				</view>
+				<view class="margin-bottom-sm">
+					<text class="text-gray">到帐备注：</text>
+					<text>{{statementDesc.payRemark}}</text>
+				</view>
+				<view class="margin-bottom-sm">
+					<text class="text-gray">提现单号：</text>
+					<text>{{statementDesc.extractCode}}</text>
+				</view>
+				<view class="margin-bottom-sm">
+					<text class="text-gray">发起时间：</text>
+					<text>{{statementDesc.createTime}}</text>
+				</view>
+				<view class="margin-bottom-sm">
+					<text class="text-gray">订单编号：</text>
+					<text>{{statementDesc.orderCode}}</text>
+				</view>
+				<view class="margin-bottom-sm">
+					<text class="text-gray">订单时间：</text>
+					<text>{{statementDesc.orderCreateTime}}</text>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				statementDesc: {}
+			}
+		},
+		onLoad() {
+			this.loadData();
+		},
+		methods: {
+			async loadData() {
+				this.statementDesc = await this.$api.data('statementDesc');
+			}
+		},
+	}
+</script>
+
+<style>
+</style>

pages/my/withdraw.vue

@@ -38,8 +38,8 @@
 			</view>
 		</view>
 		<!-- 操作按钮 -->
-		<view class="cu-bar tabbar border shop">
+		<view class="margin-lr">
-			<button class="bg-main-color long-btn margin-lr" @click="withdraw">提现</button>
+			<button class="cu-btn lg bg-main-color long-btn shadow-blur" @click="withdraw">提现</button>
 		</view>
 	</view>
 </template>

pages/order-manage/cancel-order.vue

@@ -0,0 +1,122 @@
+<template>
+	<view>
+		<!-- 顶部操作条 -->
+		<cu-custom :bgColor="'bg-main-color'" :isBack="true">
+			<block slot="backText">返回</block>
+			<block slot="content">申请退单</block>
+		</cu-custom>
+		<view class="padding flex justify-start margin-top-sm bg-white">
+			<view class="cu-avatar xxl-view" :style="'background-image:url(' + good.picUrl + ');'"></view>
+			<view class="flex flex-column-between margin-left-sm">
+				<view class="text-black text-lg">{{good.servTitle}}</view>
+				<view>
+					<view v-for="(item, index) in good.orderTag" class='cu-tag radius margin-right-sm'>
+						{{item}}</view>
+				</view>
+			</view>
+		</view>
+		<view class="margin-top-sm padding flex justify-between bg-white">
+			<view>申请原因</view>
+			<picker @change="reasonChange" :range="cancelReasonList" :range-key="'reasonName'">
+				<view class="picker">
+					{{formData.reasonObj.reasonId ? formData.reasonObj.reasonName : '请选择' }}
+					<text class="text-gray text-lg margin-left-xs"><text class="cuIcon-right"></text></text>
+				</view>
+			</picker>
+		</view>
+		<view class="margin-top-sm padding bg-white">
+			<view class="margin-bottom-sm">具体原因</view>
+			<textarea style="width: 100%;" class="solid radius text-left padding-sm" v-model="formData.detailDesc" maxlength="-1" 
+				placeholder="接单半小时内退单你无责，无故退单、无理由退单引起客诉将由您承担责任；请如实填写退单原因！平台方将实时监管本次订单。"></textarea>
+		</view>
+		<view class="margin-top-sm padding bg-white">
+			<view class="margin-bottom-sm">上传凭证（选填）</view>
+			<view class="grid col-4 grid-square flex-sub">
+				<view class="bg-img" v-for="(item,index) in formData.imgList" :key="index" @tap="viewImage($event, formData.imgList)"
+					:data-url="item">
+					<image :src="item" mode="aspectFill"></image>
+					<view class="cu-tag bg-red" @tap.stop="delImg($event, formData.imgList)" :data-index="index">
+						<text class='cuIcon-close'></text>
+					</view>
+				</view>
+				<view class="solids" @tap="chooseImgList" v-if="formData.imgList.length<9">
+					<text class='cuIcon-cameraadd'></text>
+				</view>
+			</view>
+		</view>
+		<view class="cu-bar tabbar fixed-bottom-bar bg-back">
+			<button class="bg-main-color cu-btn lg shadow-warp long-btn margin-lr" @click="nextStep">提交退单</button>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				good: {},
+				formData: {
+					imgList: [],
+					reasonObj: {}
+				},
+				cancelReasonList: [{
+					reasonId: 1,
+					reasonName: '申请退单原因分类1'
+				}, {
+					reasonId: 2,
+					reasonName: '申请退单原因分类2'
+				}]
+			}
+		},
+		onLoad(options) {
+			if (options && options.params) {
+				this.good = JSON.parse(decodeURIComponent(options.params)).orderInfo;
+			}
+		},
+		methods: {
+			chooseImgList(e) {
+				uni.chooseImage({
+					count: 9, //默认9
+					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
+					sourceType: ['album'], //从相册选择
+					success: (res) => {
+						if (this.formData.imgList.length != 0) {
+							this.formData.imgList = this.formData.imgList.concat(res.tempFilePaths)
+						} else {
+							this.formData.imgList = res.tempFilePaths
+						}
+					}
+				});
+			},
+			viewImage(e, imgList) {
+				uni.previewImage({
+					urls: imgList,
+					current: e.currentTarget.dataset.url
+				});
+			},
+			delImg(e, imgList) {
+				uni.showModal({
+					title: '',
+					content: '确定要删除这张图片吗？',
+					cancelText: '取消',
+					confirmText: '确定',
+					success: res => {
+						if (res.confirm) {
+							imgList.splice(e.currentTarget.dataset.index, 1)
+						}
+					}
+				})
+			},
+			reasonChange(e) {
+				this.formData.reasonObj = this.cancelReasonList[e.detail.value]
+			}
+		},
+	}
+</script>
+
+<style scoped>
+	.xxl-view {
+		min-width: 100rpx;
+		min-height: 100rpx;
+	}
+</style>

pages/order-manage/modal/urgent-msg.vue

@@ -0,0 +1,113 @@
+<template>
+	<!-- 报价/客户支付模态框 -->
+	<view class="cu-modal" :class="show?'show':''">
+		<view class="cu-dialog">
+			<view class="cu-bar bg-white justify-end solid-bottom">
+				<view class="content">发送急报</view>
+				<view class="action" data-modal="sendUrgentMsgModal" @click="hideModal">
+					<text class="cuIcon-close text-red"></text>
+				</view>
+			</view>
+			<view class="padding padding-lr-xl bg-white text-left">
+				<view>
+					<text>TO：</text>
+					<button class="cu-btn" :class="toWho === 0 ? 'bg-main-color' : ''" @click="changeToWho(0)">商家</button>
+					<button class="cu-btn margin-left-sm" :class="toWho === 1 ? 'bg-main-color' : ''" @click="changeToWho(1)">平台</button>
+				</view>
+				<view class="margin-top-sm">
+					<textarea style="width: 100%;" class="solid radius text-left padding-sm" v-model="detailDesc" maxlength="-1"
+						placeholder="请输入需报商家或平台的情况，申请厂家配件请以“申请配件”开头"></textarea>
+				</view>
+				<view class="margin-top-sm">
+					<view class="margin-bottom-sm">上传照片</view>
+					<view class="grid col-4 grid-square flex-sub">
+						<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="viewImage($event, imgList)"
+							:data-url="item">
+							<image :src="item" mode="aspectFill"></image>
+							<view class="cu-tag bg-red" @tap.stop="delImg($event, imgList)" :data-index="index">
+								<text class='cuIcon-close'></text>
+							</view>
+						</view>
+						<view class="solids" @tap="chooseImgList" v-if="imgList.length<9">
+							<text class='cuIcon-cameraadd'></text>
+						</view>
+					</view>
+				</view>
+			</view>
+			<view class="cu-bar bg-white solid-top">
+				<view class="action margin-0 flex-sub text-main-color solid-left" data-modal="sendUrgentMsgModal"
+					@tap="hideModal" @click="sendUrgentMsg">发送急报</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		nama: 'new-serv-price',
+		props: {
+			show: {
+				type: Boolean,
+				default: false
+			},
+			data: {
+				type: Object,
+				default: {}
+			}
+		},
+		data() {
+			return {
+				toWho: 0,
+				detailDesc: '',
+				imgList: []
+			}
+		},
+		methods: {
+			hideModal(e) {
+				this.$emit(this.$globalFun.HIDE_MODAL, e);
+			},
+			sendUrgentMsg(e) {
+				
+			},
+			changeToWho(toWho) {
+				this.toWho = toWho;
+			},
+			chooseImgList(e) {
+				uni.chooseImage({
+					count: 9, //默认9
+					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
+					sourceType: ['album'], //从相册选择
+					success: (res) => {
+						if (this.imgList.length != 0) {
+							this.imgList = this.imgList.concat(res.tempFilePaths)
+						} else {
+							this.imgList = res.tempFilePaths
+						}
+					}
+				});
+			},
+			viewImage(e, imgList) {
+				uni.previewImage({
+					urls: imgList,
+					current: e.currentTarget.dataset.url
+				});
+			},
+			delImg(e, imgList) {
+				uni.showModal({
+					title: '',
+					content: '确定要删除这张图片吗？',
+					cancelText: '取消',
+					confirmText: '确定',
+					success: res => {
+						if (res.confirm) {
+							imgList.splice(e.currentTarget.dataset.index, 1)
+						}
+					}
+				})
+			}
+		}
+	}
+</script>
+
+<style>
+</style>

pages/order-manage/serv-detail.vue

@@ -1,4 +1,5 @@
 <template>
+	<page-meta :page-style="'overflow:'+(ifShowPageMeta?'hidden':'visible')"></page-meta>
 	<view>
 		<!-- 顶部操作条 -->
 		<cu-custom :bgColor="'bg-main-color'" :isBack="true">
@@ -97,11 +98,11 @@
 			<view class="margin-top-xs">订单时间：{{servDetail.createTime}}</view>
 		</view>
 		<!-- 底部操作栏 -->
-		<view class="cu-bar bg-white tabbar border shop fixed-bottom-bar">
+		<view class="cu-bar bg-white tabbar border fixed-bottom-bar">
-			<view class="action">
+			<view class="action" data-popup="orderManage" @click="togglePopup">
 				<view class="cuIcon-list"></view> 订单管理
 			</view>
-			<view class="action">
+			<view class="action" data-modal="sendUrgentMsgModal" @click="showModal">
 				<view class="cuIcon-mail">
 					<view class="cu-tag badge" v-if="servDetail.talkMsgNum > 0">{{servDetail.talkMsgNum}}</view>
 				</view>
@@ -109,15 +110,28 @@
 			</view>
 			<view v-if="process === 'waitToServ'" class="bg-main-color submit">立即上门</view>
 		</view>
+		<uni-popup ref="orderManage" type="bottom" @change="changePopupState">
+			<view class="bg-white text-center">
+				<view v-for="(menu,index) in orderManageMenu" class="padding solid-bottom" :data-action="menu.action" @click="clickOrderManageMenu">
+					{{menu.name}}
+				</view>
+			</view>
+			<!-- 底部占位 -->
+			<view class="cu-bar bg-white fixed-bottom-bar"></view>
+		</uni-popup>
+		<!-- 模态框 -->
+		<urgent-msg :show="sendUrgentMsgModal" @hideModal="hideModal"></urgent-msg>
 	</view>
 </template>
 
 <script>
 	import productPicked from '@/components/goods-card/product-picked.vue';
+	import urgentMsg from '@/pages/order-manage/modal/urgent-msg.vue';
 	
 	export default {
 		components: {
-			productPicked
+			productPicked,
+			urgentMsg
 		},
 		data() {
 			return {
@@ -126,7 +140,25 @@
 				finishRecord4Show: [],
 				servingColumnHeaders: ['购买型号', '购买量', '待服务'],
 				servedColumnHeaders: ['购买型号', '购买量', '已服务'],
-				process: ''
+				process: '',
+				ifShowPageMeta: false,
+				orderManageMenu: [{
+					name: '申请配件',
+					action: 'applyFittings'
+				}, {
+					name: '申请附加费',
+					action: ''
+				}, {
+					name: '拍照回单',
+					action: ''
+				}, {
+					name: '指派/撤回订单',
+					action: ''
+				}, {
+					name: '申请退单',
+					action: 'applyCancelOrder'
+				}],
+				sendUrgentMsgModal: false
 			}
 		},
 		onLoad(options) {
@@ -147,6 +179,37 @@
 					}
 					this.finishList4Show[i].finishList = finishList;
 				}
+			},
+			changePopupState(e) {
+				this.ifShowPageMeta = e.show;
+			},
+			togglePopup(e) {
+				if (this.ifShowPageMeta) {
+					this.$refs[e.currentTarget.dataset.popup].close();
+				} else {
+					this.$refs[e.currentTarget.dataset.popup].open();
+				}
+			},
+			clickOrderManageMenu(e) {
+				this[e.currentTarget.dataset.action]();
+			},
+			applyFittings() {
+				console.log("申请配件")
+			},
+			applyCancelOrder() {
+				let params = {
+					orderInfo: this.servDetail.mainServOrder
+				}
+				console.log(params)
+				uni.navigateTo({
+					url: '/pages/order-manage/cancel-order?params=' + encodeURIComponent(JSON.stringify(params))
+				})
+			},
+			showModal(e) {
+				this[e.currentTarget.dataset.modal] = true;
+			},
+			hideModal(e) {
+				this[e.currentTarget.dataset.modal] = false;
 			}
 		}
 	}