yxe-mp/pages/certification/index.vue

<template>
  <view class="cert-page">
    <view class="page-hero">
      <AppNavbar title="个人信息认证" show-back/>
      <view class="intro-card">
        <view class="card-title">
          <view class="title-bar"></view>
          <text>个人信息认证</text>
        </view>
        <text class="intro-text">提交身份证正反面识别，职业资格证书可选上传，审核通过后解锁全部功能。</text>
        <text class="intro-meta">当前状态：{{ statusLabel }}</text>
      </view>
    </view>

    <view class="card block">
      <view class="section-title">证件上传</view>
      <view class="upload-row" @tap="upload('idCardFront')">
        <view>
          <view class="upload-title">身份证人像面</view>
          <view class="upload-meta">{{ uploads.idCardFront ? '已上传' : '待上传' }}</view>
        </view>
        <view class="chip">必填</view>
      </view>
      <view class="upload-row" @tap="upload('idCardBack')">
        <view>
          <view class="upload-title">身份证国徽面</view>
          <view class="upload-meta">{{ uploads.idCardBack ? '已上传' : '待上传' }}</view>
        </view>
        <view class="chip">必填</view>
      </view>
      <view class="upload-row" @tap="upload('qualification')">
        <view>
          <view class="upload-title">职业资格证书</view>
          <view class="upload-meta">{{ uploads.qualification ? '已上传' : '可选上传' }}</view>
        </view>
        <view class="chip">加分项</view>
      </view>
    </view>

    <view class="card block">
      <view class="section-title">审核流程</view>
      <view class="step" v-for="(step, idx) in steps" :key="idx">
        <view class="step-index">{{ idx + 1 }}</view>
        <view>
          <view class="step-title">{{ step.title }}</view>
          <view class="step-meta">{{ step.desc }}</view>
        </view>
      </view>
    </view>
    <Login ref="Login" @done="getUserData"/>
    <view class="primary-btn submit" :class="{'disabled': !canSubmit}" @tap="submit" v-if="user.authStatus === 0">提交审核</view>
  </view>
</template>

<script>
import {chooseImg} from "@/util";
import {updateUserReq, userInfoReq} from "@/api/user";
import Login from "@/components/Login.vue";
import AppNavbar from "@/components/AppNavbar.vue";
import {getUserInfo} from "@/util/user";

export default {
  components: {Login, AppNavbar},
  data() {
    return {
      uploads: {
        idCardFront: '',
        idCardBack: '',
        qualification: ''
      },
      steps: [{
        title: '资料上传',
        desc: '身份证正反面、职业资格证书'
      }, {
        title: '系统预校验',
        desc: '自动识别姓名、证件号，校验清晰度'
      }, {
        title: '药小二人工审核',
        desc: '审核通过后抄送管理员'
      }],
      user: {
        authStatus: 0
      }
    }
  },
  computed: {
    canSubmit() {
      return this.uploads.idCardFront && this.uploads.idCardBack
    },
    statusLabel() {
      if (this.user.authStatus === 0) return '未提交'
      if (this.user.authStatus === 1) return '审核中'
      if (this.user.authStatus === 2) return '已通过'
      if (this.user.authStatus === 3) return '已驳回'
      return '未知'
    }
  },
  onShow() {
    if (getUserInfo().token) {
      this.getUserData()
    }else {
      this.$refs.Login.open()
    }
  },
  methods: {
    async getUserData(){
      const {data} = await userInfoReq()
      this.isLoggedIn = true
      this.user = data
      if (this.user.idCardFront) this.uploads.idCardFront = this.user.idCardFront
      if (this.user.idCardBack) this.uploads.idCardBack = this.user.idCardBack
      if (this.user.qualification) this.uploads.qualification = this.user.qualification
    },
    async upload(type) {
      if (this.user.authStatus === 1) {
        uni.showToast({
          title: '正在审核中，请勿重复提交',
          icon: 'none'
        })
        return
      }
      if (this.user.authStatus === 2) {
        uni.showToast({
          title: '已通过，请勿重复提交',
          icon: 'none'
        })
        return
      }
      const res = await chooseImg(1)
      this.uploads[type] = res[0].path
    },
    async submit() {
      if (!this.canSubmit) {
        uni.showToast({
          title: '请先上传身份证正反面',
          icon: 'none'
        })
        return
      }
      await updateUserReq({
        idCardFront: this.uploads.idCardFront,
        idCardBack: this.uploads.idCardBack,
        qualification: this.uploads.qualification,
        authStatus: 1
      })
      uni.showToast({
        title: '认证已提交，等待审核',
        icon: 'none'
      })

    }
  }
}
</script>

<style lang="scss" scoped>
.cert-page {
  min-height: 100vh;
  //padding: 0 20rpx 40rpx;
  background: #f5f5f5;
}

.page-hero {
  //padding: 30rpx 6rpx 18rpx;
  background: url('https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/462bfa04cf0eff8698884c38b9d17519.png') no-repeat
    top center / 100% auto;
}

.page-navbar {
  padding: 0 6rpx;
}

.intro-card {
  margin: 18rpx 20rpx 0;
  padding: 20rpx 18rpx;
  border-radius: 20rpx;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.08);
}

.card-title {
  display: flex;
  align-items: center;
  gap: 12rpx;
  font-size: 28rpx;
  font-weight: 700;
  color: #1f2937;
}

.title-bar {
  width: 6rpx;
  height: 30rpx;
  border-radius: 999rpx;
  background: #2fc6a7;
}

.intro-text {
  margin-top: 12rpx;
  font-size: 26rpx;
  color: #6b7280;
  line-height: 1.6;
}

.intro-meta {
  margin-top: 8rpx;
  font-size: 24rpx;
  color: #6b7280;
}

.block {
  margin: 18rpx 20rpx 0;
}

.upload-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12rpx 0;
  border-bottom: 1rpx solid #edf1f7;
}

.upload-row:last-child {
  border-bottom: none;
}

.upload-title {
  font-weight: 700;
}

.upload-meta {
  color: var(--text-sub);
  font-size: 24rpx;
}

.step {
  display: flex;
  gap: 12rpx;
  align-items: center;
  padding: 12rpx 0;
  border-bottom: 1rpx dashed #e3eaf4;
}

.step:last-child {
  border-bottom: none;
}

.step-index {
  width: 40rpx;
  height: 40rpx;
  border-radius: 12rpx;
  background: #e9f1ff;
  color: var(--brand-primary);
  text-align: center;
  line-height: 40rpx;
  font-weight: 700;
}

.step-title {
  font-weight: 700;
}

.step-meta {
  color: var(--text-sub);
  font-size: 24rpx;
}

.submit {
  margin: 18rpx 0;
  padding: 14rpx;
  text-align: center;
}

.disabled {
  opacity: 0.5;
}
</style>