HNKDBOSS-WEB/hn-shop-uniapp/pages/authentication/index.vue

<!-- 证件识别 -->
<template>
  <view class="authentication" :style="[{height: `${windowHeight}px`}]">
    <view class="r_flex_wrap logo-box">
      <img class="logo-img" src="/static/background/gs-logo-z.png" style="width: 200rpx; height: 200rpx" />
      <view class="r_margin_10 logo-text"> 信飞通 </view>
    </view>

    <view class="container">
      <!-- 输入您的姓名 -->
      <view class="cu-bar bg-white qyyyzz">
        <view class="action sub-title">
          <text class="text-xl text-bold text-blue text-shadow">输入您的企业码</text>
          <text class="text-ABC text-blue">enterprise </text>
        </view>
      </view>
      <view class="input_box">
        <input class="input" placeholder="企业码（必填）" v-model="formData.code" />
        <view class="uploadText">当前客户端未激活，请联系企业管理员获取企业码完成激活</view>
      </view>
      <view class="submitBtn" @click="upFormData">验 证 激 活</view>
    </view>
  </view>
</template>

<script>
import * as AppApi from '@/api/app'
import request from '@/utils/request'
import storage from '@/utils/storage'
import * as Verify from '@/utils/verify'

const apiUrl = 'https://hnapi.kdboss.cn'

export default {
  data() {
    return {
      list: ['隐私说明：请按要求上传真实的证件照片，您所上传的行驶证仅用于平台账户绑定，请放心上传'],
      // ../static/me/zjx_me_bg6.jpg
      imgUrl1: '',
      imgUrl2: '',
      imgUrl3: '',
      formData: {
        code: ''
      },
      imgList: [],
      imgss: [],
      fileList: '',
      windowHeight: ''
    }
  },
  watch: {},
  onReady() {
    // 获取屏幕高度
    uni.getSystemInfo({
      success: (res) => {
        const app = this
        app.windowHeight = res.windowHeight
      }
    })
  },
  mounted() {
    let baseUrl = apiUrl + '/api/attachment/addtoPath?pagevalue=300'
    this.fileList = baseUrl
  },
  methods: {
    //头像上传
    uploadImg(url, formData) {
      const app = this
      // 选择图片并上传
      uni.chooseImage({
        count: 1, // 可选择图片的数量
        success: function (chooseResult) {
          var tempFilePaths = chooseResult.tempFilePaths
          // 上传图片
          let baseUrl = apiUrl + '/api/attachment/addtoPath?pagevalue=300'
          uni.uploadFile({
            url: baseUrl, // 上传图片的服务器接口
            filePath: tempFilePaths[0],
            name: 'file',
            formData: formData, // 证件 身份证 正面
            success: function (uploadResult) {
              let res = JSON.parse(uploadResult.data)
              if (res.Status == 0) {
                app[url] = res.Data
                console.log(app[url], 'imgUrl1')
                app.$toast('上传成功')
              } else {
                app.$toast('上传失败')
              }
              // 上传成功后的处理
            },
            fail: function (error) {
              console.log('上传失败', error)
              // 上传失败后的处理
            }
          })
        }
      })
    },

    async upFormData() {
      const app = this
      if (Verify.isEmpty(app.formData.code)) {
        this.$toast('请填写企业码激活')
        return false
      }
      const params = {
        // 客户id
        customerid: storage.get('wx_userid'),
        // wx_openid
        openid: storage.get('wx_openid'),
        qym: app.formData.code
      }
      const Data = await AppApi.bindqym(params)
      if (Data.Status == 0) {
        app.$toast('认证成功')
        storage.set('wx_qym', app.formData.code)
        setTimeout(() => {
          this.$navTo('pages/index/index')
        }, 1000)
      }
    }
  },
  onPullDownRefresh() {
    console.log('下拉')
    // 获取首页数据
    uni.stopPullDownRefresh()
  }
}
</script>

<style lang="scss" scoped>
.logo-box {
  margin-top: 150rpx;
  .logo-text {
    font-weight: 900;
    font-size: 50rpx;
    color: #00569f;
  }
}
.authentication {
  height: 100%;
  width: 100%;
  background: url('/static/background/zjx-bg.jpeg') #fff;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: top;
  overflow: hidden;
}
.container {
  background: #ffffff;
  margin: 100rpx 30rpx 0rpx;
  padding-top: 30rpx;
  box-shadow: #b6b6b6 10rpx 10rpx 20rpx;
  border-radius: 30rpx;
  overflow: hidden;
}

.input_box {
  padding: 0 30rpx;
  .input {
    background: #007aec0a;
    border: 1rpx solid #007aec;
    border-radius: 10rpx;
    margin: 10rpx 0rpx 26rpx;
    padding: 20rpx 26rpx;
    height: auto;
  }
}
.uploadText {
  color: #aaaaaa;
  font-size: 30rpx;
  background: #ffffff;
}
.uploadBox {
  padding: 15rpx 80rpx 40rpx;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;

  .leftBtn {
    width: 100%;
    height: 75rpx;
    line-height: 75rpx;
    background-color: #007aec;
    border-radius: 0 0 12rpx 12rpx;
  }

  .uploadItem {
    width: 100%;
    height: 200rpx;
    background-color: #f1f7ff;
    border-radius: 15rpx;
    padding: 30rpx;
    position: relative;

    .imgUrl {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
    }

    .imgBox {
      width: 100%;
      height: 100%;
      position: relative;
    }

    .imgEx1 {
      background: url('/static/discern/ex1.png');
      background-size: 82%;
      background-repeat: no-repeat;
      background-position: center;
    }

    .imgEx2 {
      background: url('/static/discern/ex2.png');
      background-size: 82%;
      background-repeat: no-repeat;
      background-position: center;
    }

    .imgEx3 {
      background: url('/static/background/wendang.png');
      background-size: 82%;
      background-repeat: no-repeat;
      background-position: center;
    }

    .leftTop {
      height: 28rpx;
      width: 4rpx;
      background-color: #007aec;
      position: absolute;
      left: 0;
    }

    .leftTop2 {
      height: 4rpx;
      width: 28rpx;
      background-color: #007aec;
      position: absolute;
      top: 0;
    }

    .leftbottom {
      height: 28rpx;
      width: 4rpx;
      background-color: #007aec;
      position: absolute;
      bottom: 0;
    }

    .leftbottom2 {
      height: 4rpx;
      width: 28rpx;
      background-color: #007aec;
      position: absolute;
      bottom: 0;
    }

    .rightTop {
      height: 28rpx;
      width: 4rpx;
      background-color: #007aec;
      position: absolute;
      right: 0;
    }

    .rightTop2 {
      height: 4rpx;
      width: 28rpx;
      background-color: #007aec;
      position: absolute;
      right: 0;
      top: 0;
    }

    .rightbottom {
      height: 28rpx;
      width: 4rpx;
      background-color: #007aec;
      position: absolute;
      right: 0;
      bottom: 0;
    }

    .rightbottom2 {
      height: 4rpx;
      width: 28rpx;
      background-color: #007aec;
      position: absolute;
      right: 0;
      bottom: 0;
    }
  }

  .qyyyzz_uploadItem {
    height: 255rpx;
  }
}

.distinguishBox {
  padding: 5rpx 30rpx 20rpx;
  background: white;

  view {
    margin-bottom: 20rpx;
  }
}

.disLabel {
  text-align-last: justify;
  text-align: justify;
  text-justify: distribute-all-lines;
  min-width: 142rpx;
  display: inline-block;
  margin-right: 5rpx;
}

.requirement {
  padding: 10rpx 30rpx 26rpx;
  background: white;

  view {
    margin-bottom: 10rpx;
  }

  .errorBox {
    display: flex;
    justify-content: space-between;
    margin-top: 30rpx;

    view {
      width: 23%;
      height: 100rpx;
    }

    .item1 {
      background-image: url('/static/discern/yes.png');
      background-repeat: no-repeat;
      background-size: 100%;
      position: relative;
    }

    .item2 {
      background-image: url('/static/discern/error1.png');
      background-repeat: no-repeat;
      background-size: 100%;
      position: relative;
    }

    .item3 {
      background-image: url('/static/discern/error2.png');
      background-repeat: no-repeat;
      background-size: 100%;
      position: relative;
    }

    .item4 {
      background-image: url('/static/discern/error3.png');
      background-repeat: no-repeat;
      background-size: 100%;
      position: relative;
    }

    .iconImg {
      width: 60rpx;
      position: absolute;
      bottom: -10px;
      left: 50%;
      margin-left: -30rpx;
    }
  }
}

.submitBtn {
  width: 90%;
  height: 90rpx;
  background: #007aec;
  line-height: 90rpx;
  margin: 50rpx auto;
  text-align: center;
  font-size: 34rpx;
  color: #fff;
  border-radius: 12rpx;
}
</style>