pet_uni/pages/OrderConfirm/start.vue

<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="(shows.arrivalTime && $u.timeFormat(shows.arrivalTime,'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="shows.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.shows.arrivalTime = 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.shows.arrivalTime = uni.$u.timeFormat(null,'yyyy-mm-dd') + ' ' +e.value;
      console.log(this.shows.arrivalTime)
      console.log(e)
      // this.shows.arrivalTime = uni.$u.timeFormat(e.value,'yyyy年mm月dd日 hh时MM分');
      //默认年月日,选择小时和分
      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};
      })
    },
    uploadShow(data,fileName = ''){
      let result = [];
      try{
        data.forEach(item => {
          result.push({url:item.url})
        })
      }catch (e){
        this.images[fileName] = [];
      }
      this.images[fileName] = result;
    },
    uploadPut(event,fileName = ''){
      let lists = [].concat(event.file);
      let fileListLen = this.images[fileName].length;
      lists.map((item) => {
        this.images[fileName].push({
          ...item,
          status: 'uploading',
          message: '上传中',
        });
      });
      for (let i = 0; i < lists.length; i++) {
        const fileType = api.getFileType(lists[i].url);
        console.log(fileType)
        api.uploadOssFile(lists[i].url).then(res => {
          let item = this.images[fileName][fileListLen];
          this.images[fileName].splice(fileListLen, 1, {
            ...item,
            status: 'success',
            message: '',
            url: res.show_path,
            thumb: res.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>