qa-regulatory-gwj-app/pages/mine/promise/sign.vue

<template>
  <view class="content">
    <view class="card">
      <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>
            <u--image v-if="info.FILEPATH" :showLoading="true" :src="info.FILEPATH"
                      width="200rpx" height="100px" mode="scaleToFill"></u--image>
            <u-button type="primary" :text="info.FILEPATH ? '重签' : '手写签字'" size="mini" class="bth-mini"
                      @click="signShow = true"></u-button>
          </view>
          <!--          <view class="time">-->
          <!--            {{ info.SIGNTIME }}-->
          <!--          </view>-->
        </view>
      </view>
      <sign v-if="signShow" :signShow.sync="signShow" @confirm="signConfirm"></sign>
      <view class="mt-10">
        <u-button type="primary" text="提 交" @click="$u.debounce(fnLogin, 1000,true)"></u-button>
      </view>
    </view>
  </view>
</template>

<script>
import sign from "../../../components/sign/sign";
import {getPromiseInfo, setPromiseSign} from "../../../api";

export default {
  components: {
    sign
  },
  data() {
    return {
      info: {},
      signShow: false,
    }
  },
  onLoad() {
    this.getData()
  },
  computed: {
    userInfo() {
      return this.$store.getters.getUserInfo
    }
  },
  methods: {
    async getData() {
      let resData = await getPromiseInfo({
        USER_ID: this.userInfo.USER_ID,
      })
      const DETAIL = resData.COLLATERAL.map(item => ({value: item.COLLATERAL, id: item.PROMISEDETAIL_ID}))
      this.info = {
        ...resData.TEXT,
        DETAIL,
        SIGNTIME: this.$u.timeFormat(new Date(), 'yyyy-mm-dd'),
        COVERPEOPLE: resData.COVERPEOPLE[0].USERNAME,
        PROMISEPEOPLE_ID: resData.PROMISEPEOPLE_ID
      }
    },
    signConfirm({path}) {
      this.$set(this.info, 'FILEPATH', path)
    },
    async fnLogin() {
      if (!this.info.FILEPATH) {
        uni.showToast({
          title: '请签字'
        })
        return
      }
      await setPromiseSign({
        filePath: this.info.FILEPATH,
        name: 'FFILE',
        formData: {
          ...this.info,
          CORPINFO_ID: this.userInfo.CORPINFO_ID
        },
      })
      uni.showToast({
        title: '添加成功',
      })
      uni.$u.route({
        url: '/pages/index/index',
        type: 'reLaunch'
      })
    }
  }
}
</script>

<style scoped lang="scss">
.title {
  text-align: center;
  font-size: 40rpx;
  font-weight: bold;
}

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

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

.respondent, .hairdresser {
  margin-top: 60rpx;
  text-align: right;

  .promiser {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
  }

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