doum
2026-04-25 b7d451c91ec40bee70f23b1e2cf6a8797643faef
app/pages/certification-details/certification-details.vue
@@ -21,11 +21,8 @@
         <view class="cert-details-page__upload-group">
            <text class="cert-details-page__upload-title">身份证正反面</text>
            <view class="cert-details-page__upload-list">
               <view class="cert-details-page__upload-card">
               </view>
               <view class="cert-details-page__upload-card">
               <view v-for="(img, index) in idcardImgs" :key="index" class="cert-details-page__upload-card">
                  <image class="cert-details-page__upload-image" :src="img" mode="aspectFill" @click="previewImage(img)"></image>
               </view>
            </view>
         </view>
@@ -44,11 +41,8 @@
         <view class="cert-details-page__upload-group">
            <text class="cert-details-page__upload-title">车辆照片</text>
            <view class="cert-details-page__upload-list">
               <view class="cert-details-page__upload-img">
               </view>
               <view class="cert-details-page__upload-img">
               <view v-for="(img, index) in carImgs" :key="index" class="cert-details-page__upload-img">
                  <image class="cert-details-page__upload-image" :src="img" mode="aspectFill" @click="previewImage(img)"></image>
               </view>
            </view>
         </view>
@@ -56,12 +50,24 @@
         <view class="cert-details-page__upload-group">
            <text class="cert-details-page__upload-title">驾驶证照片</text>
            <view class="cert-details-page__upload-list cert-details-page__upload-list--single">
               <view class="cert-details-page__upload-img">
               <view v-for="(img, index) in licenseImgs" :key="index" class="cert-details-page__upload-img">
                  <image class="cert-details-page__upload-image" :src="img" mode="aspectFill" @click="previewImage(img)"></image>
               </view>
            </view>
         </view>
         <view class="cert-details-page__upload-group">
            <text class="cert-details-page__upload-title">其它材料</text>
            <view class="cert-details-page__upload-list cert-details-page__upload-list--single">
               <view v-for="(img, index) in otherImgs" :key="index" class="cert-details-page__upload-img">
                  <image class="cert-details-page__upload-image" :src="img" mode="aspectFill" @click="previewImage(img)"></image>
               </view>
            </view>
         </view>
      </view>
      <button v-if="statusType === 'rejected'" class="cert-details-page__rebtn" @click="goRecertify">重新认证</button>
      <view style="width: 100%; height: 30rpx;" v-if="statusType === 'rejected'"></view>
   </view>
</template>
@@ -70,21 +76,13 @@
      data() {
         return {
            statusType: 'review',
            basicInfo: [
               { label: '注册手机号', value: '18155114565' },
               { label: '司机姓名', value: '苏熙熙' },
               { label: '婚姻状况', value: '未婚' },
               { label: '居住城市', value: '安徽省/合肥市/庐阳区' },
               { label: '详细地址', value: '九华山路201号' },
               { label: '支付宝账号', value: '18155114565' },
               { label: '身份证号', value: '3482938472937838902' }
            ],
            vehicleInfo: [
               { label: '车牌号', value: '皖BD23189' },
               { label: '车辆类型', value: '面包车' },
               { label: '车辆颜色', value: '白色' },
               { label: '驾驶证有效期', value: '2016年1月1日至2036年1月1日' }
            ]
            detailData: null,
            basicInfo: [],
            vehicleInfo: [],
            idcardImgs: [],
            carImgs: [],
            licenseImgs: [],
            otherImgs: []
         }
      },
      computed: {
@@ -101,7 +99,7 @@
            const descMap = {
               review: '审核结果将通过短信/订单消息通知您',
               approved: '',
               rejected: '驾驶证过期,请重新提交审核'
               rejected: this.detailData?.auditRemark || '认证信息有误,请重新提交审核'
            }
            return descMap[this.statusType] || ''
@@ -116,8 +114,71 @@
            return iconMap[this.statusType] || iconMap.review
         }
      },
      onLoad(options) {
         this.statusType = options && options.status ? options.status : 'review'
      onShow() {
         this.getVerifyDetail()
      },
      methods: {
         getVerifyDetail() {
            console.log('1111111')
            this.$u.api.verifyDetail().then(res => {
               uni.hideLoading()
               if (res.code === 200) {
                  this.detailData = res.data
                  this.setStatusType(res.data.auditStatus)
                  this.formatBasicInfo(res.data)
                  this.formatVehicleInfo(res.data)
                  this.formatImages(res.data)
               }
            })
         },
         setStatusType(auditStatus) {
            console.log(auditStatus)
            const map = { 0: 'review', 1: 'approved', 2: 'rejected', 3: 'approved' }
            this.statusType = map[auditStatus] || 'review'
         },
         getMaritalStatusText(status) {
            const map = { 0: '未婚', 1: '已婚', 2: '离异', 3: '丧偶' }
            return map[status] || '未知'
         },
         formatBasicInfo(data) {
            this.basicInfo = [
               { label: '注册手机号', value: data.telephone || '' },
               { label: '司机姓名', value: data.name || '' },
               { label: '婚姻状况', value: this.getMaritalStatusText(data.maritalStatus) },
               { label: '居住城市', value: [data.provinceName, data.cityName, data.districtName].filter(Boolean).join('/') || '' },
               { label: '详细地址', value: data.livePlace || '' },
               { label: '支付宝账号', value: data.aliAccount || '' },
               { label: '支付宝姓名', value: data.aliName || '' },
               { label: '身份证号', value: data.idcard || '' }
            ]
         },
         formatVehicleInfo(data) {
            const startDate = data.cardStartDate ? data.cardStartDate.split(' ')[0].replace(/-/g, '年').replace(/月/g, '').replace(/日/g, '') : ''
            const endDate = data.cardEndDate ? data.cardEndDate.split(' ')[0].replace(/-/g, '年').replace(/月/g, '').replace(/日/g, '') : ''
            this.vehicleInfo = [
               { label: '车牌号', value: data.carCode || '' },
               { label: '车辆类型', value: data.carTypeName || '' },
               { label: '车辆颜色', value: data.carColor || '' },
               { label: '驾驶证有效期', value: startDate && endDate ? `${startDate}至${endDate}` : '' }
            ]
         },
         previewImage(current) {
            uni.previewImage({
               current: current,
               urls: [...this.idcardImgs, ...this.carImgs, ...this.licenseImgs, ...this.otherImgs]
            })
         },
         goRecertify() {
            uni.navigateTo({
               url: '/pages/driver-certification/driver-certification'
            })
         },
         formatImages(data) {
            this.idcardImgs = [data.idcardImg, data.idcardImgBack].filter(Boolean).map(item => data.imgPrefix + item)
            this.carImgs = data.carImgList.map(item => data.imgPrefix + item.fileurl)
            this.licenseImgs = data.licenseImgList.map(item => data.imgPrefix + item.fileurl)
            this.otherImgs = data.otherImgList.map(item => data.imgPrefix + item.fileurl)
         }
      }
   }
</script>
@@ -215,6 +276,7 @@
         font-size: 30rpx;
         color: #777777;
         flex-shrink: 0;
         margin-right: 30rpx;
      }
      &__info-value {
@@ -225,7 +287,9 @@
      }
      &__upload-group {
         padding-top: 24rpx;
         padding: 30rpx 0;
         box-sizing: border-box;
         border-bottom: 1rpx solid #E5E5E5;
      }
      &__upload-title {
@@ -258,11 +322,18 @@
            height: 124rpx;
         }
      }
      &__upload-img {
         width: 144rpx;
         height: 144rpx;
         background-color: #333333;
         background-color: #f7f8fa;
         border-radius: 10rpx;
         overflow: hidden;
      }
      &__upload-image {
         width: 100%;
         height: 100%;
      }
      &__id-avatar {
@@ -293,5 +364,20 @@
         height: 144rpx;
         background: linear-gradient(180deg, #f5f7fa 0%, #eff2f7 100%);
      }
      &__rebtn {
         width: calc(100% - 60rpx);
         height: 88rpx;
         line-height: 88rpx;
         background: #10B2FA;
         color: #ffffff;
         font-size: 32rpx;
         border-radius: 44rpx;
         border: none;
         &::after {
            border: none;
         }
      }
   }
</style>