qa-prevention-gwj-first-app/pages/my/promise/sign.vue

<template>
  <view>
    <cu-custom bgColor="bg-gradual-blueness">
      <block slot="content">安全承诺</block>
    </cu-custom>
    <view class="container">
      <view class="title">{{ info.TYPE === '0' ? '安全生产承诺书' : '安全生产责任状' }}</view>
      <view v-if="info.TYPE === '0'">{{ info.COVERPEOPLE }}：</view>
      <view class="text">{{ info.TEXT }}</view>
      <view class="collateral">
        <view v-for="(item,index) in info.DETAIL" :key="index" class="item">
          {{ item.value }}
        </view>
      </view>
      <view class="text">
        <view v-if="info.TYPE === '0'">
          若违反上述承诺和未履行安全生产职责，或发生责任事故的，接受政府或公司事故调查组做出的处罚决定。
        </view>
        <view v-if="info.TYPE === '0'">
          承诺期限自{{ info.PROMISE_TERM_START }}至{{ info.PROMISE_TERM_END }}。
        </view>
        <view v-if="info.TYPE === '1'">
          若未履行安全生产职责，或发生生产安全事故的，接受公司或政府事故调查组做出的处罚。
        </view>
        <view v-if="info.TYPE === '1'">
          责任期限自{{ info.PROMISE_TERM_START }}至{{ info.PROMISE_TERM_END }}。
        </view>
      </view>
      <view class="footer">
        <view v-if="info.TYPE === '0'" class="hairdresser">承诺单位(盖章)：</view>
        <view v-if="info.TYPE === '1'" class="hairdresser">
          <view class="promiser">发状人：{{ info.COVERPEOPLE }}</view>
          <view class="time">{{ info.CREATTIME.substring(0,10) }}</view>
        </view>
        <view class="respondent">
          <view class="promiser">
            <text>
              {{ info.TYPE === '0' ? '主要负责人签字' : '受状人' }}：
            </text>
            <image v-if="info.FILEPATH" :src="info.FILEPATH" mode="aspectFill" style="width: 200upx;height: 100upx;"/>
            <button class="cu-btn bg-green shadow" @tap="modalShow = true"  style="width:100px;height:30px;" data-target="Modal">
              {{ info.FILEPATH ? '重签' : '手写签字' }}
            </button>
          </view>
          <view class="time">
            {{ info.SIGNTIME }}
          </view>
        </view>
      </view>
    </view>
    <view class="cu-modal" :class="{'show':modalShow}">
      <sign @confirm="subCanvas" @cancel="modalShow = false"></sign>
    </view>
    <view class="padding flex flex-direction">
      <button class="cu-btn bg-blue margin-tb-sm lg" @click="$noMultipleClicks(goSubmit)">提 交</button>
    </view>
  </view>
</template>

<script>
import {
  baseImgPath,basePath,loginUserId,formatDate,corpinfoId
} from '@/common/tool.js';
import sign from '@/components/sign/sign.vue';
export default {
  components: {
    sign
  },
  data() {
    return {
      info: {},
      noClick: true,
      modalShow:false,
    }
  },
  onLoad() {
    this.getData()
  },
  methods:{
    getData(){
      uni.request({
        url: basePath + '/app/corppromise/promise',
        method: 'POST',
        dataType: 'json',
        header: {
          'Content-type':'application/x-www-form-urlencoded'
        },
        data: {
          USER_ID: loginUserId
        },
        success: (res) => {
          const DETAIL = res.data.COLLATERAL.map(item => ({ value: item.COLLATERAL, id: item.PROMISEDETAIL_ID }))
          this.info = {
            ...res.data.TEXT,
            DETAIL,
            SIGNTIME: formatDate(new Date(), 'yyyy-MM-dd'),
            COVERPEOPLE: res.data.COVERPEOPLE[0].USERNAME,
            PROMISEPEOPLE_ID:res.data.PROMISEPEOPLE_ID,
          }
        },
        fail: (res) => {
          uni.showToast({
            icon: 'none',
            title: "服务器正在升级，请稍后再试。",
            duration: 2000
          });
        }
      });
    },
    subCanvas (e) {
      this.$set(this.info, 'FILEPATH', e.filePath)
      this.modalShow = false;
    },
    goSubmit() {
      if(!this.info.FILEPATH){
        uni.showToast({
          title:'请签字'
        })
        return
      }
      uni.showLoading({
        title: '请稍候'
      })
      uni.uploadFile({
        url: basePath + "/app/corppromise/editpeople",
        filePath: this.info.FILEPATH,
        name: 'FFILE',
        formData: {...this.info,CORPINFO_ID:corpinfoId},
        success: (res) => {
          uni.hideLoading()
          uni.showToast({
            icon: 'none',
            title: '提交成功',
            duration: 2000
          });
          uni.reLaunch({
            url: '/pages/index/index'
          })
        },
        fail: (err) => {
          uni.hideLoading();
          uni.showModal({
            content: err.errMsg,
            showCancel: false
          });
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.container{
  padding: 30upx;
  background-color: #fff;

  .title {
    text-align: center;
    font-size: 40upx;
    font-weight: bold;
  }

  .text {
    text-indent: 60upx;
    letter-spacing: 4upx;
    text-align: justify;
  }

  .collateral {
    text-indent: 60upx;
    letter-spacing: 4upx;
    text-align: justify;
  }

  .respondent, .hairdresser {
    margin-top: 60upx;
    text-align: right;
    .promiser {
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
    }

    .time {
      text-align: right;
      margin-top: 30upx;
      margin-left: 110upx;
    }
  }
}
</style>