integrated_traffic_uniapp/pages/application/dangerous_options/index.vue

<template>
  <view>
    <cu-custom bgColor="bg-gradual-blueness" :isBack="true" :isRingt="true">
      <block slot="backText">返回</block>
      <block slot="content">安全措施</block>
    </cu-custom>
    <view class="form">
      <view class="wui-form-list">
        <view class="cu-bar bg-white margin-top">
          <view class="action">
            上传图片
          </view>
          <view class="action">
            {{ imgList.length }}/4
          </view>
        </view>
        <view class="cu-form-group">
          <view class="grid col-4 grid-square flex-sub">
            <view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="viewImage(index,'imgList')">
              <image :src="imgList[index].filePath" mode="aspectFill"></image>
              <view class="cu-tag bg-red" @tap.stop="delImg" data-type="2" :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="cu-form-group">
          <view class="title">签字：</view>
          <button class="cu-btn bg-green shadow" @tap="showModal" data-target="Modal">手写签字</button>
        </view>
        <view class="wui-sign-box" v-show="signImgList && signImgList.length > 0">
          <view class="sign-title">
            签字照片：
          </view>
          <view class="wui-sign-cotent">
            <view class="sign-img" v-for="(item,index) in signImgList" :key="index" @tap="viewImage(index,'signImgList')">
              <image :src="signImgList[index].filePath" mode="aspectFit"></image>
            </view>
          </view>
        </view>
      </view>
      <view class="cu-bar btn-group" style="margin-top: 30upx;">
        <button :loading="buttonloading" class="cu-btn bg-blue margin-tb-sm lg"
                @click="$noMultipleClicks(goSubmit)">保存</button>
      </view>
      <view class="cu-modal" :class="modalName==='Modal'?'show':''">
        <writing-board @confirm="subCanvas" @cancel="hideModal"></writing-board>
      </view>
    </view>
  </view>
</template>

<script>
import {formatDate} from "@/common/tool";
import writingBoard from "@/components/writing-board/writing-board.vue"

export default {
  components: {
    writingBoard,
  },
  data() {
    return {
      imgList: [],
      currentIndex: 0,
      modalName: null,
      signImgList: [],
      buttonloading: false,
      noClick: true,
    }
  },
  onLoad(event) {
    this.imgList = event.imgList || [];
    this.currentIndex = event.index || 0;
  },
  methods: {
    viewImage(index,list) {
      let files = this[list].map(item => item.filePath);
      uni.previewImage({
        urls: files,
        current: index
      });
    },
    delImg(e) {
      uni.showModal({
        title: '秦安双控',
        content: '确定要删除这张图片吗？',
        cancelColor: "#000000",
        cancelText: '取消',
        confirmText: '确定',
        success: res => {
          if (res.confirm) {
            this.imgList.splice(e.currentTarget.dataset.index, 1)
          }
        }
      })
    },
    chooseImage() {
      var ss = 4 - this.imgList.length;
      uni.chooseImage({
        count: ss, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['camera', 'album'], //从相册选择
        success: (res) => {
          for (let i = 0; i < res.tempFilePaths.length; i++) {
            let img = {};
            img.id = '';
            img.filePath = res.tempFilePaths[i];
            this.imgList.push(img)
          }
        }
      });
    },
    showModal(e) {
      this.modalName = e.currentTarget.dataset.target
    },
    hideModal(e) {
      this.modalName = null
    },
    //完成
    subCanvas(e) {
      this.signImgList.splice(0, this.signImgList.length);
      this.signImgList.push({
        SIGNER_TIME: formatDate(new Date(), 'yyyy-MM-dd hh:mm'),
        filePath: e.filePath
      });
      console.log(this.signImgList)
      this.hideModal()
    },
    goSubmit() {
      if(this.buttonloading) return;
      if(this.imgList.length === 0) {
        uni.showToast({
          title: '请上传图片',
          icon: 'none'
        });
        return;
      }
      if(this.signImgList.length === 0) {
        uni.showToast({
          title: '请签字',
          icon: 'none'
        });
        return;
      }
      this.buttonloading = true;
      uni.$emit('dangerous_options_submit', {
        imgList: this.imgList,
        signImgList: this.signImgList,
        index: this.currentIndex
      });
    //   监听事件
    //    mounted() {
    //     uni.$on('dangerous_options_submit', (data) => {})
    //   },
    //   取消监听
    //   beforeDestroy() {
    //     uni.$off('dangerous_options_submit');
    //   },
    }
  },
}
</script>

<style scoped>

</style>