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.
319 lines
8.8 KiB
319 lines
8.8 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" |
|
:rules="rules" |
|
ref="feedForm" |
|
> |
|
|
|
<u-form-item |
|
prop="needTime" |
|
:custom-style="{padding:'0',paddingBottom:'30rpx;'}" |
|
> |
|
<view class="form-label"> |
|
<u-text size="30" text="需要到达时间"></u-text> |
|
</view> |
|
<u-cell |
|
:title="model.needTime" |
|
custom-style="padding:0" |
|
> |
|
|
|
</u-cell> |
|
<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;'}" |
|
> |
|
<view class="form-label"> |
|
<u-text size="30" text="实际到达时间"></u-text> |
|
</view> |
|
<u-cell |
|
:title="model.arriveTime" |
|
is-link |
|
@click="$refs.arriveTime.open();" |
|
custom-style="padding:0" |
|
> |
|
|
|
</u-cell> |
|
<!-- <u-text size="30" :text="model.arriveTime" @click="$refs.arriveTime.open();"></u-text>--> |
|
<uv-datetime-picker ref="arriveTime" v-model="model.arriveTime" mode="datetime"></uv-datetime-picker> |
|
</u-form-item> |
|
<u-form-item |
|
prop="userInfo.sex" |
|
:custom-style="{padding:'34rpx 0'}" |
|
> |
|
<view class="form-label"> |
|
<u-text size="30" text="宠托师身份确认"></u-text> |
|
</view> |
|
<u-upload |
|
width="160" |
|
height="160" |
|
:fileList="fileList" |
|
name="1" |
|
multiple |
|
:maxCount="10" |
|
uploadIcon="plus" |
|
@afterRead="afterFileRead" |
|
@delete="deleteFile" |
|
></u-upload> |
|
</u-form-item> |
|
<u-form-item |
|
prop="userInfo.sex" |
|
:custom-style="{padding:'34rpx 0'}" |
|
> |
|
<view class="form-label"> |
|
<u-text size="30" text="手部消毒"></u-text> |
|
</view> |
|
<u-upload |
|
width="160" |
|
height="160" |
|
:fileList="fileList" |
|
name="1" |
|
multiple |
|
:maxCount="10" |
|
uploadIcon="plus" |
|
@afterRead="afterFileRead" |
|
@delete="deleteFile" |
|
></u-upload> |
|
</u-form-item> |
|
<u-form-item |
|
prop="userInfo.sex" |
|
:custom-style="{padding:'34rpx 0'}" |
|
> |
|
<view class="form-label"> |
|
<u-text size="30" text="全身消毒"></u-text> |
|
</view> |
|
<u-upload |
|
width="160" |
|
height="160" |
|
:fileList="fileList" |
|
name="1" |
|
multiple |
|
:maxCount="10" |
|
uploadIcon="plus" |
|
@afterRead="afterFileRead" |
|
@delete="deleteFile" |
|
></u-upload> |
|
</u-form-item> |
|
<u-form-item |
|
prop="userInfo.sex" |
|
:custom-style="{padding:'34rpx 0'}" |
|
> |
|
|
|
<view class="form-label"> |
|
<u-text size="30" text="钥匙开启/收取"></u-text> |
|
</view> |
|
<u-upload |
|
width="160" |
|
height="160" |
|
:fileList="fileList" |
|
name="1" |
|
multiple |
|
:maxCount="10" |
|
uploadIcon="plus" |
|
@afterRead="afterFileRead" |
|
@delete="deleteFile" |
|
></u-upload> |
|
<u-textarea |
|
v-model="model.remark" |
|
border="none" |
|
placeholder="请描述您遇到的问题" |
|
height="220" |
|
:custom-style="{ |
|
backgroundColor:'#FAFAFA', |
|
padding:'20rpx 20rpx' |
|
}" |
|
></u-textarea> |
|
</u-form-item> |
|
<u-form-item |
|
prop="remark" |
|
:custom-style="{padding:'0'}" |
|
> |
|
<view class="form-label"> |
|
<u-text size="30" text="服务工具"></u-text> |
|
</view> |
|
<u-checkbox-group size="40"> |
|
<u-checkbox label="汪汪行天下自备专业萌宠服务用品" labelSize="28" icon-size="28" active-color="#4EC2B7"></u-checkbox> |
|
<u-checkbox label="宠主要求使用家中物品" labelSize="28" icon-size="28" active-color="#4EC2B7"></u-checkbox> |
|
</u-checkbox-group> |
|
</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} 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:{ |
|
connect:'', |
|
remark:'', |
|
file:[], |
|
needTime:'', |
|
arriveTime:'' |
|
}, |
|
rules:{ |
|
'connect': { |
|
type: 'string', |
|
required: true, |
|
message: '请填写联系方式', |
|
trigger: ['blur', 'change'] |
|
}, |
|
'remark': { |
|
type: 'string', |
|
required: true, |
|
message: '请填写内容', |
|
trigger: ['blur', 'change'] |
|
}, |
|
}, |
|
} |
|
}, |
|
onLoad(option) { |
|
this.id = option.id; |
|
this.model.needTime = uni.$u.timeFormat(null,'yyyy年mm月dd日 hh时MM分'); |
|
this.model.arriveTime = uni.$u.timeFormat(null,'yyyy年mm月dd日 hh时MM分'); |
|
}, |
|
computed: { |
|
api() { |
|
return api |
|
}, |
|
}, |
|
methods: { |
|
submit(){ |
|
let file = []; |
|
this.fileList.forEach(item => { |
|
file.push(item.url) |
|
}); |
|
this.model.file = file; |
|
// this.$refs.feedForm.validate().then(res => { |
|
orderDone(this.id,this.model.file).then((res) => { |
|
if(res.code === 200){ |
|
|
|
|
|
this.model = { |
|
connect:'', |
|
remark:'', |
|
file:[] |
|
} |
|
this.fileList = []; |
|
api.success('保存成功').then(()=>{ |
|
uni.navigateBack(); |
|
}) |
|
}else{ |
|
uni.$u.toast(res.msg) |
|
} |
|
}) |
|
// }).catch(errors => { |
|
// uni.$u.toast(errors[0].message) |
|
// }) |
|
|
|
}, |
|
//上传文件 |
|
async afterFileRead (event){ |
|
let lists = [].concat(event.file); |
|
|
|
let fileListLen = this.fileList.length; |
|
lists.map((item) => { |
|
this.fileList.push({ |
|
...item, |
|
status: 'uploading', |
|
message: '上传中', |
|
}); |
|
}); |
|
for (let i = 0; i < lists.length; i++) { |
|
|
|
api.uploadOssFile(lists[i].url).then(res => { |
|
let item = this.fileList[fileListLen]; |
|
this.fileList.splice(fileListLen, 1, { |
|
...item, |
|
status: 'success', |
|
message: '', |
|
url: res.show_path, |
|
thumb: res.show_path, |
|
}); |
|
fileListLen++; |
|
}) |
|
// const result = await uploadFilePromise(lists[i].url); |
|
|
|
} |
|
}, |
|
//删除上传图片 |
|
deleteFile(event){ |
|
this.fileList.splice(event.index, 1); |
|
}, |
|
copyContent(){ |
|
uni.setClipboardData({ |
|
data: '', |
|
success: function () { |
|
//调用方法成功 |
|
} |
|
}) |
|
}, |
|
}, |
|
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> |