完工拍照上传页面开发
This commit is contained in:
donqi
parent
da01c3843f
commit
6cd952abce
|
|
@ -214,7 +214,7 @@ const myOrders = {
|
|||
id: 1,
|
||||
title: '清洗空调/挂机内机拆洗（不分匹）',
|
||||
state: '',
|
||||
subState: 'waitToServ',
|
||||
subState: 'waitServing',
|
||||
tags: [{
|
||||
level: 'info',
|
||||
content: '商城订单'
|
||||
|
|
|
|||
|
|
@ -22,6 +22,8 @@
|
|||
"path": "order-manage"
|
||||
}, {
|
||||
"path":"serv-detail"
|
||||
}, {
|
||||
"path": "finish-order"
|
||||
}]
|
||||
}],
|
||||
"globalStyle": {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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))
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -252,3 +252,11 @@
|
|||
.align-baseline {
|
||||
align-items: baseline !important;
|
||||
}
|
||||
|
||||
.float-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.float-clear {
|
||||
clear: both;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue