pay-video-applet-uniapp-24-8-22/pages/mine/authFirm.vue

<template>
  <view class="auth-firm">
    <!--顶部导航栏-->
    <navbar leftClick @leftClick="$utils.navigateBack" title="认证企业"/>

    <!--身份信息页面-->
    <view class="container">
      <view class="form-item">
        <view class="label">法人真实姓名</view>
        <view class="input">{{ name }}</view>
      </view>

      <uv-divider :hairline="false" lineColor="#c0c0c0" dot></uv-divider>

      <view class="form-item">
        <view class="label">法人身份证号</view>
        <view class="input">{{ idCard }}</view>
      </view>

      <uv-divider :hairline="false" lineColor="#c0c0c0" dot></uv-divider>

      <view class="form-item">
        <view class="label">营业执照</view>
        <view class="upload">
          <uv-upload
              :fileList="yxzzFileList"
              :maxCount="5"
              multiple
              width="150rpx"
              height="150rpx"
              @delete="yxzzDeleteImage"
              @afterRead="yxzzAfterRead"
              :previewFullImage="true"></uv-upload>
        </view>
      </view>

      <uv-divider :hairline="false" lineColor="#c0c0c0" dot></uv-divider>

      <view class="form-item">
        <view class="label">其他资质</view>
        <view class="upload">
          <uv-upload
              :fileList="qtzzFileList"
              :maxCount="5"
              multiple
              width="150rpx"
              height="150rpx"
              @delete="qtzzDeleteImage"
              @afterRead="qtzzAfterRead"
              :previewFullImage="true"></uv-upload>
        </view>
      </view>

    </view>



    <!--请仔细阅读平台《用户协议》《隐私协议》-->
    <view class="agree">
      <view>
        请仔细阅读平台<span style="color:#009dff">《用户协议》</span><span style="color:#009dff">《隐私协议》</span>
      </view>
    </view>


    <!--下一步按钮-->
    <button @click="onNextClick" class="bottomBtn">
      立即认证
    </button>
  </view>
</template>

<script>
import '../../common.css'; // 引入公共 CSS 文件

export default {
  data() {
    return {
      name: 'xiaohua',
      idCard: '2101472154874512',
      yxzzFileList: [
          {url: 'https://cdn.uviewui.com/uview/swiper/2.jpg'},
      ],
      qtzzFileList: [
        {url: 'https://cdn.uviewui.com/uview/swiper/2.jpg'},
      ],
    }
  },
  methods: {
    onNextClick() {
      this.$utils.navigateTo("/mine/purse");
    },
    yxzzDeleteImage(e){
      this.yxzzFileList.splice(e.index, 1)
    },
    qtzzDeleteImage(e){
      this.qtzzFileList.splice(e.index, 1)
    },

    yxzzAfterRead(e){
      let self = this
      e.file.forEach(file => {
        self.$Oss.ossUpload(file.url).then(url => {
          self.yxzzFileList.push({
            url
          })
        })
      })
    },
    qtzzAfterRead(e){
      let self = this
      e.file.forEach(file => {
        self.$Oss.ossUpload(file.url).then(url => {
          self.qtzzFileList.push({
            url
          })
        })
      })
    },
  }
}
</script>

<style scoped lang="scss">
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.auth-firm {
  .container {
    padding: 100rpx 50rpx 50rpx 50rpx;
    //border: 1px solid red;

    .header {
      margin-bottom: 40rpx;
      font-size: 28rpx;
      color: #666;
    }

    .form-item {
      margin-bottom: 40rpx;

      .label {
        font-size: 36rpx;
        margin-bottom: 10px;
        display: block;
      }

      .input {
        width: 100vw;
        font-size: 38rpx;
        margin-top: 40rpx;
      }

      .upload {

      }
    }
  }

  .agree {
    display: flex;
    justify-content: center;
    position: fixed;
    bottom: 12%;
    width: 100vw;
  }

}

</style>