dma-work-h5/src/views/appDir/appAddWorkOrder.vue

<template>
  <div class="ui-appAddWorkOrder">
    <div class="font_30 color333 bold f-fcl">添加工单</div>
    <div class="ui-describe-box">
      <van-field v-model="describe" class="ui-desc-input font_30 color3" rows="5" type="textarea" maxlength="500" show-word-limit placeholder="请输入工单描述内容" autosize />
    </div>
    <div class="ui-upload-box">
      <div v-for="(item, index) in pics" :key="index" class="ui-upload-icon-box flo_l">
        <img class="ui-upload-icon" :src="item" mode="aspectFill" alt="" @click="ImagePreview(pics, index)" />
        <img class="ui-upload-clear-icon" src="https://image.fulllinkai.com/202301/07/a069d2437562e00d298a9bcd253a86bd.png" mode="widthFix" alt="" @click="clearPic(index)" />
      </div>
      <div v-if="pics.length < 9">
        <uploadPicture :multiple="true" :max-count="9" @on-success="onSuccess" @click="takePhone">
          <div class="ui-upload">
            <img class="ui-upload-icon flo_l" src="https://image.fulllinkai.com/202301/07/6c9bc853bed42c9871f56156d1b8f31c.png" alt="" />
          </div>
        </uploadPicture>
      </div>
    </div>
    <div class="ui-next-btn font_30 f-fcc colorF" @click="changeData">保存</div>
  </div>
</template>
<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import { showImagePreview, showToast } from 'vant';
  import weChat from '@/utils/weChat';
  import router from '@/router';
  import { useUserStore } from '@/store/modules/user';

  defineOptions({ name: 'AddWorkOrder' });

  const userStore = useUserStore() as any;
  const throttle = ref(true);
  const describe = ref<any>('');
  const pics = ref<any[]>([]);

  // 删除某个已上传的图片
  const clearPic = (index) => {
    pics.value.splice(index, 1);
  };

  const changeData = () => {
    let data = {
      chat_id: userStore.chatId,
      images: pics.value,
      desc: describe.value,
    };
    if (!describe.value) {
      showToast('请输入工单描述内容');
      return;
    }
    if (pics.value.length === 0) {
      showToast('请上传最少一张图片');
      return;
    }
    if (throttle.value) {
      throttle.value = false;
      weChat({ url: `/h5/add/work/order`, data, method: 'post' })
        .then(() => {
          throttle.value = true;
          showToast('保存成功');
          setTimeout(() => {
            throttle.value = true;
            router.replace({
              name: 'appWorkOrder',
              query: { state: 1 },
            });
            router.go(-1);
          }, 1200);
        })
        .catch((err) => {
          throttle.value = true;
          console.log(err);
        });
    }
  };

  const ImagePreview = (e, index) => {
    showImagePreview({
      images: e,
      showIndex: false,
      startPosition: index,
      loop: false,
    });
  };

  // 上传图片
  const onSuccess = (val) => {
    if (pics.value.length < 9) {
      pics.value.push(val);
    }
  };

  window.getAndroidPhone = (type, e) => {
    if (e && e.length > 0) {
      e.forEach((item) => {
        if (pics.value && pics.value.length < 9) {
          pics.value.push(item);
        }
      });
    }
  };

  const takePhone = () => {
    let ua = navigator.userAgent.toLowerCase();
    if (ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1 || ua.indexOf('android') != -1) {
      // 调用安卓 app方法
      window.webAppInterface.takePhoto('multiple', 9);
    }
  };

  onMounted(() => {});
</script>
<style lang="scss" scoped>
  .ui-appAddWorkOrder {
    background: #f8f8f8;
    overflow-y: auto;
    min-height: 100vh;
    padding: px2rem(30);
  }

  .ui-describe-box {
    padding-bottom: px2rem(40);

    .ui-desc-input {
      background: #ffffff;
      border-radius: px2rem(24);
      margin-top: px2rem(20);
    }

    .inputColor {
      color: #c2c2c2;
    }
  }

  .ui-upload-box {
    overflow: hidden;
    margin-bottom: px2rem(120);

    .ui-upload-icon-box {
      position: relative;

      .ui-upload-clear-icon {
        position: absolute;
        right: px2rem(30);
        top: px2rem(10);
        width: px2rem(36);
        height: px2rem(36);
      }
    }

    .ui-upload-icon {
      width: px2rem(200);
      height: px2rem(200);
      display: block;
      border-radius: px2rem(16);
      margin-right: px2rem(20);
      margin-bottom: px2rem(20);
      object-fit: cover;
      object-position: center;
    }
  }

  .ui-next-btn {
    width: px2rem(560);
    height: px2rem(80);
    background: #5ac7a0;
    border-radius: px2rem(40);
    margin: 0 auto;
  }
</style>