You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
431 lines
16 KiB
431 lines
16 KiB
<template> |
|
<HeaderNav :title="title" :is-back="true"></HeaderNav> |
|
<view class="body-background"> |
|
|
|
</view> |
|
<u-row :custom-style="{padding:'50rpx 26rpx',boxSizing:'border-box'}"> |
|
<u-col :span="12" :custom-style="{ |
|
backgroundColor:'#FFFFFF', |
|
borderRadius:'20rpx', |
|
padding:'40rpx 32rpx', |
|
position:'relative' |
|
}"> |
|
<u-form |
|
errorType="toast" |
|
labelWidth="auto" |
|
labelPosition="left" |
|
:model="model" |
|
ref="startForm" |
|
> |
|
|
|
<u-form-item |
|
prop="needTime" |
|
:custom-style="{padding:'0',paddingBottom:'30rpx;'}" |
|
> |
|
<mz-card> |
|
<view class="form-label"> |
|
<view class="title row" style="position:relative;justify-content: flex-start;width:100%;top:0rpx;left:0;"> |
|
<view class="value col" style="position: relative;text-align: left;"> |
|
|
|
<!-- <u-text text="协议内容" size="38" color="#191919"></u-text>--> |
|
<view class="" style="position: relative;display:inline-block;"> |
|
<view style="color:#191919;font-size:30rpx;display:inline-block;position: relative;z-index: 2;">需要到达时间</view> |
|
<view class="background" style="width:100%;height:50%;position: absolute;bottom:0;left:0;background-color:rgba(227, 191, 119, 0.6);display:inline-block;z-index:1;"></view> |
|
</view> |
|
</view> |
|
</view> |
|
<!-- <u-text size="30" text="需要到达时间"></u-text>--> |
|
</view> |
|
<u-cell |
|
:title="model.needTime" |
|
custom-style="padding:0" |
|
> |
|
|
|
</u-cell> |
|
</mz-card> |
|
<uv-datetime-picker ref="needTime" v-model="model.needTime" model="datetime"></uv-datetime-picker> |
|
</u-form-item> |
|
<u-form-item |
|
prop="arriveTime" |
|
:custom-style="{padding:'0',paddingBottom:'30rpx'}" |
|
> |
|
<mz-card> |
|
<view class="form-label"> |
|
<view class="title row" style="position:relative;justify-content: flex-start;width:100%;top:0rpx;left:0;"> |
|
<view class="value col" style="position: relative;text-align: left;"> |
|
|
|
<!-- <u-text text="协议内容" size="38" color="#191919"></u-text>--> |
|
<view class="" style="position: relative;display:inline-block;"> |
|
<view style="color:#191919;font-size:30rpx;display:inline-block;position: relative;z-index: 2;">实际到达时间</view> |
|
<view class="background" style="width:100%;height:50%;position: absolute;bottom:0;left:0;background-color:rgba(227, 191, 119, 0.6);display:inline-block;z-index:1;"></view> |
|
</view> |
|
</view> |
|
</view> |
|
<!-- <u-text size="30" text="实际到达时间"></u-text>--> |
|
</view> |
|
<u-cell |
|
:title="(model.arrival_time && $u.timeFormat(model.arrival_time,'yyyy年mm月dd日 hh时MM分')) || '请选择到达时间'" |
|
is-link |
|
@click="$refs.arriveTime.open();" |
|
custom-style="padding:0" |
|
> |
|
|
|
</u-cell> |
|
</mz-card> |
|
<!-- <u-text size="30" :text="model.arriveTime" @click="$refs.arriveTime.open();"></u-text>--> |
|
<uv-datetime-picker ref="arriveTime" :value="model.arrivalTime" mode="time" @confirm="timeConfirm"></uv-datetime-picker> |
|
</u-form-item> |
|
<u-form-item |
|
prop="userInfo.sex" |
|
:custom-style="{padding:'0',paddingBottom:'30rpx'}" |
|
> |
|
<mz-card> |
|
<view class="form-label"> |
|
<view class="title row" style="position:relative;justify-content: flex-start;width:100%;top:0rpx;left:0;"> |
|
<view class="value col" style="position: relative;text-align: left;"> |
|
|
|
<!-- <u-text text="协议内容" size="38" color="#191919"></u-text>--> |
|
<view class="" style="position: relative;display:inline-block;"> |
|
<view style="color:#191919;font-size:30rpx;display:inline-block;position: relative;z-index: 2;">宠托师身份确认</view> |
|
<view class="background" style="width:100%;height:50%;position: absolute;bottom:0;left:0;background-color:rgba(227, 191, 119, 0.6);display:inline-block;z-index:1;"></view> |
|
</view> |
|
</view> |
|
</view> |
|
<!-- <u-text size="30" text="宠托师身份确认"></u-text>--> |
|
</view> |
|
<uv-upload |
|
accept="media" |
|
width="160rpx" |
|
height="160rpx" |
|
:fileList="images.worker_confirm" |
|
name="1" |
|
multiple |
|
:maxCount="10" |
|
uploadIcon="plus" |
|
@delete="(res) => {uploadDel(res,'worker_confirm')}" |
|
@afterRead="(res) => {uploadPut(res,'worker_confirm')}" |
|
></uv-upload> |
|
</mz-card> |
|
</u-form-item> |
|
<u-form-item |
|
prop="userInfo.sex" |
|
:custom-style="{padding:'0',paddingBottom:'30rpx'}" |
|
> |
|
<mz-card> |
|
<view class="form-label"> |
|
<view class="title row" style="position:relative;justify-content: flex-start;width:100%;top:0rpx;left:0;"> |
|
<view class="value col" style="position: relative;text-align: left;"> |
|
|
|
<!-- <u-text text="协议内容" size="38" color="#191919"></u-text>--> |
|
<view class="" style="position: relative;display:inline-block;"> |
|
<view style="color:#191919;font-size:30rpx;display:inline-block;position: relative;z-index: 2;">手部消毒</view> |
|
<view class="background" style="width:100%;height:50%;position: absolute;bottom:0;left:0;background-color:rgba(227, 191, 119, 0.6);display:inline-block;z-index:1;"></view> |
|
</view> |
|
</view> |
|
</view> |
|
<!-- <u-text size="30" text="手部消毒"></u-text>--> |
|
</view> |
|
<uv-upload |
|
accept="media" |
|
width="160rpx" |
|
height="160rpx" |
|
:fileList="images.hand_disinfect" |
|
name="1" |
|
multiple |
|
:maxCount="10" |
|
uploadIcon="plus" |
|
@delete="(res) => {uploadDel(res,'hand_disinfect')}" |
|
@afterRead="(res) => {uploadPut(res,'hand_disinfect')}" |
|
></uv-upload> |
|
</mz-card> |
|
</u-form-item> |
|
<u-form-item |
|
prop="userInfo.sex" |
|
:custom-style="{padding:'0',paddingBottom:'30rpx'}" |
|
> |
|
<mz-card> |
|
<view class="form-label"> |
|
<view class="title row" style="position:relative;justify-content: flex-start;width:100%;top:0rpx;left:0;"> |
|
<view class="value col" style="position: relative;text-align: left;"> |
|
|
|
<!-- <u-text text="协议内容" size="38" color="#191919"></u-text>--> |
|
<view class="" style="position: relative;display:inline-block;"> |
|
<view style="color:#191919;font-size:30rpx;display:inline-block;position: relative;z-index: 2;">全身消毒</view> |
|
<view class="background" style="width:100%;height:50%;position: absolute;bottom:0;left:0;background-color:rgba(227, 191, 119, 0.6);display:inline-block;z-index:1;"></view> |
|
</view> |
|
</view> |
|
</view> |
|
<!-- <u-text size="30" text="全身消毒"></u-text>--> |
|
</view> |
|
<uv-upload |
|
accept="media" |
|
width="160rpx" |
|
height="160rpx" |
|
:fileList="images.body_disinfect" |
|
name="1" |
|
multiple |
|
:maxCount="10" |
|
uploadIcon="plus" |
|
@delete="(res) => {uploadDel(res,'body_disinfect')}" |
|
@afterRead="(res) => {uploadPut(res,'body_disinfect')}" |
|
></uv-upload> |
|
</mz-card> |
|
</u-form-item> |
|
<u-form-item |
|
prop="userInfo.sex" |
|
:custom-style="{padding:'0',paddingBottom:'30rpx'}" |
|
> |
|
<mz-card> |
|
<view class="form-label"> |
|
<view class="title row" style="position:relative;justify-content: flex-start;width:100%;top:0rpx;left:0;"> |
|
<view class="value col" style="position: relative;text-align: left;"> |
|
|
|
<!-- <u-text text="协议内容" size="38" color="#191919"></u-text>--> |
|
<view class="" style="position: relative;display:inline-block;"> |
|
<view style="color:#191919;font-size:30rpx;display:inline-block;position: relative;z-index: 2;">钥匙开启/收取</view> |
|
<view class="background" style="width:100%;height:50%;position: absolute;bottom:0;left:0;background-color:rgba(227, 191, 119, 0.6);display:inline-block;z-index:1;"></view> |
|
</view> |
|
</view> |
|
</view> |
|
<!-- <u-text size="30" text="钥匙开启/收取"></u-text>--> |
|
</view> |
|
<uv-upload |
|
accept="media" |
|
width="160rpx" |
|
height="160rpx" |
|
:fileList="images.key" |
|
name="1" |
|
multiple |
|
:maxCount="10" |
|
uploadIcon="plus" |
|
@delete="(res) => {uploadDel(res,'key')}" |
|
@afterRead="(res) => {uploadPut(res,'key')}" |
|
></uv-upload> |
|
<u-textarea |
|
v-model="model.key_info" |
|
border="none" |
|
placeholder="请描述您遇到的问题" |
|
height="220" |
|
:custom-style="{ |
|
backgroundColor:'#FAFAFA', |
|
padding:'20rpx 20rpx' |
|
}" |
|
></u-textarea> |
|
</mz-card> |
|
</u-form-item> |
|
<u-form-item |
|
prop="remark" |
|
:custom-style="{padding:'0'}" |
|
> |
|
<mz-card> |
|
<view class="form-label"> |
|
<view class="title row" style="position:relative;justify-content: flex-start;width:100%;top:0rpx;left:0;"> |
|
<view class="value col" style="position: relative;text-align: left;"> |
|
|
|
<!-- <u-text text="协议内容" size="38" color="#191919"></u-text>--> |
|
<view class="" style="position: relative;display:inline-block;"> |
|
<view style="color:#191919;font-size:30rpx;display:inline-block;position: relative;z-index: 2;">服务工具</view> |
|
<view class="background" style="width:100%;height:50%;position: absolute;bottom:0;left:0;background-color:rgba(227, 191, 119, 0.6);display:inline-block;z-index:1;"></view> |
|
</view> |
|
</view> |
|
</view> |
|
<!-- <u-text size="30" text="服务工具"></u-text>--> |
|
</view> |
|
<u-checkbox-group size="40" v-model="service_tools"> |
|
<u-checkbox name="汪汪行天下自备专业萌宠服务用品" label="汪汪行天下自备专业萌宠服务用品" labelSize="28" icon-size="28" active-color="#4EC2B7"></u-checkbox> |
|
<u-checkbox name="宠主要求使用家中物品" label="宠主要求使用家中物品" labelSize="28" icon-size="28" active-color="#4EC2B7"></u-checkbox> |
|
</u-checkbox-group> |
|
</mz-card> |
|
</u-form-item> |
|
</u-form> |
|
<view class="bottom-btn border-box" style="box-sizing: border-box;"> |
|
<MzButton title="保存" button-color="#4EC2B7" button-width="100%" font-color="#fff" @click="submit"> |
|
|
|
</MzButton> |
|
</view> |
|
</u-col> |
|
</u-row> |
|
<!-- <view class="footer-content">--> |
|
<!-- <view class="footer-contact">联系我们</view>--> |
|
<!-- <view class="footer-wechat row">--> |
|
<!-- <view class="foot-title">微信公众号：</view>--> |
|
<!-- <view class="foot-url">宠物喂养公众平台 <text @click="copyContent()">复制</text></view>--> |
|
<!-- </view>--> |
|
<!-- <view class="footer-email row">--> |
|
<!-- <view class="foot-title">官方邮箱：</view>--> |
|
<!-- <view class="foot-url">1256896@qq.com <text @click="copyContent()">复制</text></view>--> |
|
<!-- </view>--> |
|
<!-- </view>--> |
|
</template> |
|
|
|
<script> |
|
import { |
|
imghost |
|
} from '@/config/host.js' |
|
import api from '@/utils/functions.js'; |
|
import HeaderNav from "@/components/HeaderNav/Index.vue"; |
|
import MzButton from "@/components/MzButton/Index.vue"; |
|
import {orderDone, orderStart} from "@/api/order"; |
|
import {editFeed} from "@/api/pet"; |
|
import {orderDetail} from "../../api/order"; |
|
|
|
export default { |
|
components: { |
|
MzButton, |
|
HeaderNav, |
|
}, |
|
data() { |
|
return { |
|
title: '开始服务', |
|
loading: true, |
|
staticImage: { |
|
bg: imghost + '/BG.png', |
|
newIcon: imghost + '/new-icon.png', |
|
}, |
|
isTop: false, |
|
fileList:[], |
|
model:{ |
|
order_service_id:'', |
|
needTime:'', |
|
arrival_time :'', |
|
worker_confirm:[], |
|
hand_disinfect:[], |
|
body_disinfect:[], |
|
key:[], |
|
key_info :'', |
|
service_tools:'', |
|
}, |
|
shows:{ |
|
arrivalTime :'', |
|
}, |
|
images:{ |
|
worker_confirm:[], |
|
hand_disinfect:[], |
|
body_disinfect:[], |
|
key:[], |
|
}, |
|
service_tools:[], |
|
} |
|
}, |
|
onLoad(option) { |
|
this.model.order_service_id = option.id; |
|
this.getDetail(option.id); |
|
// this.model.arrival_time = new Date().getTime(); |
|
this.model.arrival_time = uni.$u.timeFormat(null,'yyyy-mm-dd hh:MM'); |
|
}, |
|
computed: { |
|
api() { |
|
return api |
|
}, |
|
}, |
|
methods: { |
|
getDetail(id){ |
|
orderDetail(id).then(data => { |
|
this.model.needTime = uni.$u.timeFormat(data.data.do_date,'yyyy年mm月dd日') + data.data.do_time; |
|
}) |
|
}, |
|
timeConfirm(e){ |
|
this.model.arrival_time = uni.$u.timeFormat(null,'yyyy-mm-dd') + ' ' +e.value; |
|
}, |
|
submit(){ |
|
let that = this; |
|
if(this.model.arrival_time === ''){ |
|
api.error('请选择到达时间'); |
|
return; |
|
} |
|
let data = [ |
|
'worker_confirm', |
|
'hand_disinfect', |
|
'body_disinfect', |
|
'key', |
|
]; |
|
new Promise((resolve,reject)=>{ |
|
data.forEach((item,index) => { |
|
that.uploadSubmit(this.images[item],item); |
|
if(index === data.length-1){ |
|
resolve() |
|
} |
|
}); |
|
}).then(() => { |
|
this.model.service_tools = this.service_tools.join(','); |
|
|
|
orderStart(this.model).then((res) => { |
|
if(res.code === 200){ |
|
api.success('保存成功').then(()=>{ |
|
uni.navigateBack(); |
|
}) |
|
}else{ |
|
uni.$u.toast(res.msg) |
|
} |
|
}) |
|
}); |
|
|
|
}, |
|
uploadSubmit(data,fileName = ''){ |
|
this.model[fileName] = data.map(item => { |
|
return {url:item.url,type:item.type, thumb:(item.thumb || item.url)}; |
|
}) |
|
}, |
|
uploadShow(data, fileName = '') { |
|
let result = []; |
|
try { |
|
data.forEach(item => { |
|
result.push({url: item.url, type: item.type,thumb:(item.thumb || item.url)}) |
|
}) |
|
} catch (e) { |
|
this.images[fileName] = []; |
|
} |
|
this.images[fileName] = result; |
|
}, |
|
async uploadPut(event, fileName = '') { |
|
console.log('event', event) |
|
let lists = [].concat(event.file); |
|
console.log('lists', lists) |
|
let fileListLen = this.images[fileName].length; |
|
lists.map((item) => { |
|
this.images[fileName].push({ |
|
...item, |
|
status: 'uploading', |
|
message: '上传中', |
|
}); |
|
}); |
|
console.log(lists) |
|
for (let i = 0; i < lists.length; i++) { |
|
const fileType = api.getFileType(lists[i].url); |
|
console.log(fileType) |
|
let thumb; |
|
const file = await api.uploadOssFile(lists[i].url); |
|
if(fileType === 'video')thumb = await api.uploadOssFile(lists[i].thumb); |
|
let item = this.images[fileName][fileListLen]; |
|
|
|
this.images[fileName].splice(fileListLen, 1, { |
|
...item, |
|
status: 'success', |
|
message: '', |
|
url: file.show_path, |
|
thumb: thumb?.show_path ? thumb.show_path : file.show_path, |
|
type: fileType |
|
}); |
|
fileListLen++; |
|
} |
|
}, |
|
uploadDel(fileIndex,fileName = ''){ |
|
this.images[fileName].splice(fileIndex.index,1); |
|
}, |
|
}, |
|
onPageScroll(res) { |
|
if (res.scrollTop <= 20) { |
|
uni.$emit('isTop', true); |
|
} else { |
|
uni.$emit('isTop', false); |
|
} |
|
}, |
|
created() { |
|
|
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
@import './components/start.scss'; |
|
</style> |