完工拍照上传页面开发

common/js/data.js

@@ -214,7 +214,7 @@ const myOrders = {
 		id: 1,
 		title: '清洗空调/挂机内机拆洗（不分匹）',
 		state: '',
-		subState: 'waitToServ',
+		subState: 'waitServing',
 		tags: [{
 			level: 'info',
 			content: '商城订单'

pages.json

@@ -22,6 +22,8 @@
 			"path": "order-manage"
 		}, {
 			"path":"serv-detail"
+		}, {
+			"path": "finish-order"
 		}]
 	}],
 	"globalStyle": {

pages/order-manage/finish-order.vue

@@ -0,0 +1,106 @@
+<template>
+	<view>
+		<!-- 顶部操作条 -->
+		<cu-custom :bgColor="'bg-main-color'" :isBack="true">
+			<block slot="backText">返回</block>
+			<block slot="content">上传完工照片</block>
+		</cu-custom>
+		<!-- 具体服务栏 -->
+		<view class="bg-white margin-top-sm flex justify-start padding">
+			<view class="cu-avatar"
+				:style="'width: 120rpx; height: 120rpx; background-image:url(' + servInfo.picUrl + ');'"></view>
+			<view class="flex flex-column-between margin-left">
+				<view class="text-bold">{{servInfo.name}}</view>
+				<view>
+					<view v-for="(tag, index1) in servInfo.tags" v-if="tag.level === 'error'" class='cu-tag margin-right-xs radius line-red margin-top-xs'>{{tag.content}}</view>
+					<view v-else-if="tag.level === 'info'" class='cu-tag margin-right-xs radius line-main-color margin-top-xs'>{{tag.content}}</view>
+				</view>
+			</view>
+		</view>
+		<view class="margin-top-sm bg-white padding">
+			<!-- 服务指标 -->
+			<checkbox-group class="block" @change="checkServIndex">
+				<view style="min-width: 50%;" class="flex justify-start align-center margin-top-sm float-left" v-for="(item, index) in servIndex">
+					<checkbox style="transform:scale(1)" class="main-color margin-right-xs" :checked="checkIndexArr[index] === '1'" value='1'>
+					</checkbox>
+					<text @click="checkedCurBox(index)">{{item}}</text>
+				</view>
+			</checkbox-group>
+			<!-- 完工图片上传 -->
+			<view class="padding-top-lg float-clear">
+				<view>
+					<text class="text-bold text-black">上传完工照片</text>
+					<text>（按订单要求上传）</text>
+				</view>
+				<view class="grid col-4 grid-square flex-sub margin-top-sm">
+					<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="chooseImage" v-if="imgList.length < 4">
+						<text class='cuIcon-cameraadd'></text>
+					</view>
+				</view>
+			</view>
+			<!-- 备注 -->
+			<view class="padding-top-lg uni-textarea">
+				<textarea style="width: 100%;" class="solid padding-sm" maxlength="-1" @input="inputSpecificReason"
+					placeholder="温馨提示: 服务过程中有分歧存在客诉隐患或未能及时处理彻底的,请急报说明情况,将由平台客服一起协调沟通,否则造成你有责任的客诉将不利于服务评价;上述勾选需真实,被反映虚假或回访不实属恶意反馈,可能会被商家投诉" />
+			</view>
+			<!-- 确认按钮 -->
+			<view class="margin-lr margin-bottom padding-top-xl">
+				<button class="cu-btn bg-main-color long-btn radius shadow-blur">提交</button>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				servInfo: {
+					name: '空调挂机柜机清洗服务',
+					picUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big20000.jpg',
+					tags: [{
+						level: 'info',
+						content: '商城订单'
+					}]
+				},
+				checkIndexArr: [],
+				servIndex: [
+					'本单准时上门',
+					'鞋套工装设备完善',
+					'订单备注处理完成',
+					'水电隐患已核查',
+					'服务前后都已试机',
+					'卫生已清理',
+					'服务中出现过问题，已和客户沟通并同意',
+					'产生的费用是服务前说明并报给予客户，客户同意',
+					'已让客户验收，并提示客户验收内容，已完成此项'
+				],
+				imgList: []
+			}
+		},
+		onLoad(options) {
+			if (options && options.order) {
+				let orderInfo = JSON.parse(decodeURIComponent(options.order));
+				this.loadData(orderInfo);
+			}
+		},
+		methods: {
+			loadData (orderInfo) {
+				console.log(orderInfo)
+			},
+			checkedCurBox(index) {
+				this.checkIndexArr[index] = 1;
+			}
+		},
+	}
+</script>
+
+<style>
+</style>

pages/order-manage/order-manage.vue

@@ -129,7 +129,7 @@
 				<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm" data-modal="showNewServPriceModal" @tap="showModal($event, index)">改价</button>
 				<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>
+				<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 class="margin-top-sm solid-top padding-top-sm" v-if="Boolean(order.comments)">
@@ -348,6 +348,11 @@
 				uni.navigateTo({
 					url: '/pages/order-manage/serv-detail?process=' + process
 				})
+			},
+			finishOrder(order) {
+				uni.navigateTo({
+					url: '/pages/order-manage/finish-order?order=' + encodeURIComponent(JSON.stringify(order))
+				})
 			}
 		}
 	}

style/default.css

@@ -252,3 +252,11 @@
 .align-baseline {
 	align-items: baseline !important;
 }
+
+.float-left {
+	float: left;
+}
+
+.float-clear {
+	clear: both;
+}