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

<template>
  <view>
    <cu-custom bgColor="bg-gradual-blueness" :isBack="true">
      <block slot="backText">返回</block>
      <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 :src="baseImgPath + info.FILEPATH" mode="aspectFill" style="width: 200upx;height: 100upx;"/>
          </view>
          <view class="time">
            {{ info.SIGNTIME && info.SIGNTIME.substring(0,10) }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  baseImgPath,basePath,loginUserId,formatDate,corpinfoId
} from '@/common/tool.js';
export default {
  data() {
    return {
      info: {},
      baseImgPath
    }
  },
  onLoad(option) {
    this.getData(option.PROMISE_ID,option.PROMISEPEOPLE_ID)
    if(option.TabCur=='1') this.setPromiseIsRead(option.PROMISEPEOPLE_ID)
  },
  methods:{
    getData(PROMISE_ID,PROMISEPEOPLE_ID){
      uni.request({
        url: basePath + '/app/corppromise/goEdit',
        method: 'POST',
        dataType: 'json',
        header: {
          'Content-type':'application/x-www-form-urlencoded'
        },
        data: {
          PROMISE_ID,
          PROMISEPEOPLE_ID,
        },
        success: (res) => {
          const DETAIL = res.data.promistDetail.map(item => ({ value: item.COLLATERAL, id: item.PROMISEDETAIL_ID }))
          this.info = {
            ...res.data.varList,
            ...res.data.people,
            DETAIL,
            COVERPEOPLE: res.data.coverpeople[0].USERNAME,
          }
        },
        fail: (res) => {
          uni.showToast({
            icon: 'none',
            title: "服务器正在升级，请稍后再试。",
            duration: 2000
          });
        }
      });
    },
    setPromiseIsRead(PROMISEPEOPLE_ID){
      uni.request({
        url: basePath + '/app/corppromise/editIsRead',
        method: 'POST',
        dataType: 'json',
        header: {
          'Content-type':'application/x-www-form-urlencoded'
        },
        data: {
          PROMISEPEOPLE_ID,
        },
        success: (res) => {

        },
        fail: (res) => {
          uni.showToast({
            icon: 'none',
            title: "服务器正在升级，请稍后再试。",
            duration: 2000
          });
        }
      });
    },
  }
}
</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>