print-package-H5/pages/certification/index.vue

<template>
  <view class="content">
    <view class="flex-col group_4">
      <view class="flex-row group_5">
        <image src="/static/imgs/device-info/logo.png" class="image_4" />
        <text class="text_4">印包客</text>
      </view>
      <view class="flex-row group_6">
        <image src="/static/imgs/device-info/factory-avatar.png" class="image_5" />
        <view class="flex-col group_7">
          <text class="text_5">{{ userInfo.companyName || 'xxx' }} 的分享</text>
          <text class="text_6">{{ userInfo.name || userInfo.mobile || 'xxx' }}</text>
        </view>
      </view>
      <view class="flex-col section_1">
        <view class="flex-col items-center button">
          <qn-easyinput :inputBorder="false" v-model="password" placeholder="请输入访问密码" text="center"></qn-easyinput>
        </view>
        <view class="flex-col items-center button_1" @click="checkPassword">
          <text>立即访问</text>
        </view>
        <text class="text_9">{{ expireTip }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import { go2, back } from '@/utils/hook.js'
import { difTime } from '@/utils/index.js'
import { checkShareId, checkSharePassword } from '@/apis/deviceApi'
import { isEncrypt } from '@/enums/index.js'
export default {
  data() {
    return {
      shareId: null,
      mechanicalEquipmentId: null,
      isValid: false,
      expireTime: null,
      password: '',
      userInfo: {
        name: '',
        companyName: '',
        mobile: ''
      }
    }
  },
  methods: {
    go2,
    back
  },
  onLoad(options) {
    if (options.shareId) {
      this.shareId = options.shareId
    } else {
      uni.showModal({
        title: '分享id不存在,请询问印包厂',
        icon: 'error'
      })
    }
  },
  mounted() {
    this.check()
  },
  computed: {
    expireTip() {
      if (this.isValid) {
        return `${this.expireTime.hours}小时${this.expireTime.minutes}分钟后过期`
      }
      return '该分享已到期，请重新联系印包厂'
    }
  },
  methods: {
    check() {
      if (this.shareId) {
        checkShareId({ id: this.shareId }).then((res) => {
          if (res && res.expireTime) {
            this.userInfo.name = res.userName
            this.userInfo.companyName = res.enterpriseName
            this.userInfo.mobile = res.userMobile
            this.mechanicalEquipmentId = res.mechanicalEquipmentId
            // 先判断是否过期
            const { beyond, hours, minutes } = difTime(Date.now(), res.expireTime)
            if (beyond) {
              this.isValid = false
              return
            } else {
              this.isValid = true
              this.expireTime = {
                hours,
                minutes
              }
            }
            if (res.encryptOrNot == isEncrypt.NO) {
              this.jumpDevice()
            }
          }
        })
      }
    },
    jumpDevice() {
      go2(
        'device-production-detail',
        {
          id: this.mechanicalEquipmentId
        },
        true
      )
    },
    checkPassword() {
      if (!this.isValid) {
        uni.showToast({
          title: '该分享已到期，请重新联系印包厂',
          icon: 'none'
        })
        return
      }
      checkSharePassword({
        id: this.shareId,
        password: this.password
      }).then((res) => {
        if (res) {
          this.jumpDevice()
        } else {
          uni.showToast({
            title: '密码错误',
            icon: 'error'
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 750rpx;
  padding-top: 128rpx;
  .group_4 {
    padding-top: 32rpx;
    flex: 1 1 auto;
    overflow-y: auto;
    .group_5 {
      padding: 0 39rpx;
      color: rgb(0, 0, 0);
      font-size: 42rpx;
      font-weight: 500;
      line-height: 59rpx;
      letter-spacing: 6rpx;
      white-space: nowrap;
      .image_4 {
        width: 67rpx;
        height: 81rpx;
      }
      .text_4 {
        margin-left: 22rpx;
        align-self: center;
      }
    }
    .group_6 {
      margin-top: 40rpx;
      padding: 0 32rpx;
      .image_5 {
        width: 80rpx;
        height: 80rpx;
      }
      .group_7 {
        margin: 4rpx 0 4rpx 16rpx;
        flex: 1 1 auto;
        .text_5 {
          color: rgb(51, 51, 51);
          font-size: 30rpx;
          font-weight: 500;
          line-height: 42rpx;
          white-space: nowrap;
        }
        .text_6 {
          color: rgb(136, 136, 136);
          font-size: 22rpx;
          line-height: 30rpx;
          white-space: nowrap;
        }
      }
    }
    .section_1 {
      margin-top: 24rpx;
      padding: 131rpx 80rpx 848rpx;
      background-color: rgb(255, 255, 255);
      border-radius: 32rpx 32rpx 0px 0px;
      .button {
        padding: 26rpx 0;
        color: rgb(85, 85, 85);
        font-size: 30rpx;
        font-weight: 500;
        line-height: 42rpx;
        white-space: nowrap;
        background-color: rgb(247, 248, 250);
        border-radius: 47rpx;
      }
      .button_1 {
        margin-top: 64rpx;
        padding: 26rpx 0;
        color: rgb(255, 255, 255);
        font-size: 30rpx;
        font-weight: 500;
        line-height: 42rpx;
        white-space: nowrap;
        background-color: rgb(0, 122, 255);
        border-radius: 47rpx;
      }
      .text_9 {
        margin-top: 22rpx;
        align-self: center;
        color: rgb(136, 136, 136);
        font-size: 22rpx;
        line-height: 30rpx;
        white-space: nowrap;
      }
    }
  }
}
</style>