doum
2026-04-21 0ad75ffcfc4c581ef54de705fae48b44803ed2a5
small-program/pages/details-entry/details-entry.vue
@@ -1,13 +1,147 @@
<template>
   <view class="container">
      <view class="head">
      <view class="head" :class="'head-' + shopAuditStatus">
         <view class="head-top">
            <image src="/static/images/ic_renzhengzhong@2x.png" mode="widthFix"></image>
            <text>平台审核中</text>
            <image :src="statusIcon" mode="widthFix"></image>
            <text>{{ statusText }}</text>
         </view>
         <view class="head-bottom">
            审核结果将通过短信/订阅消息通知您
            {{ statusBottomText }}
         </view>
      </view>
      <view class="list">
         <view class="list-item">
            <view class="list-item-label">注册手机号</view>
            <view class="list-item-value">{{ form.telephone }}</view>
         </view>
         <view class="list-item">
            <view class="list-item-label">门店名称</view>
            <view class="list-item-value">{{ form.name }}</view>
         </view>
         <view class="list-item">
            <view class="list-item-label">门店类型</view>
            <view class="list-item-value">{{ form.companyType === 0 ? '个人' : '企业' }}</view>
         </view>
         <view class="list-item">
            <view class="list-item-label">所在城市</view>
            <view class="list-item-value">{{ fullAreaName }}</view>
         </view>
         <view class="list-item">
            <view class="list-item-label">门店地址</view>
            <view class="list-item-value">{{ form.address }}</view>
         </view>
         <view class="list-item">
            <view class="list-item-label">联系人</view>
            <view class="list-item-value">{{ form.linkName }}</view>
         </view>
         <view class="list-item">
            <view class="list-item-label">联系人电话</view>
            <view class="list-item-value">{{ form.linkPhone }}</view>
         </view>
         <view class="list-item">
            <view class="list-item-label">联系人身份证</view>
            <view class="list-item-value">{{ form.idcard }}</view>
         </view>
         <view class="list-item">
            <view class="list-item-label">支付宝账号</view>
            <view class="list-item-value">{{ form.aliAccount }}</view>
         </view>
         <view class="list-item">
            <view class="list-item-label">支付宝姓名</view>
            <view class="list-item-value">{{ form.aliName }}</view>
         </view>
         <view class="list-item" style="flex-direction: column; align-items: flex-start;">
            <view class="list-item-label" style="margin-bottom: 30rpx;">身份证正反面</view>
            <view class="idcard">
               <view class="idcard-image" v-if="form.idcardImg" @click="previewImage(form.idcardImg)">
                  <image :src="getFullPath(form.idcardImg)" mode="aspectFill"></image>
               </view>
               <view class="idcard-image" v-if="form.idcardImgBack" @click="previewImage(form.idcardImgBack)">
                  <image :src="getFullPath(form.idcardImgBack)" mode="aspectFill"></image>
               </view>
            </view>
         </view>
         <view class="list-item" style="flex-direction: column; align-items: flex-start;">
            <view class="list-item-label" style="margin-bottom: 30rpx;">门店门头照片</view>
            <view class="imgList">
               <view class="imgItem" v-for="(img, index) in form.storeFrontImgs" :key="index" @click="previewImage(img)">
                  <image :src="getFullPath(img)" mode="aspectFill"></image>
               </view>
            </view>
         </view>
         <view class="list-item" style="flex-direction: column; align-items: flex-start;">
            <view class="list-item-label" style="margin-bottom: 30rpx;">门店内部照片</view>
            <view class="imgList">
               <view class="imgItem" v-for="(img, index) in form.storeInteriorImgs" :key="index" @click="previewImage(img)">
                  <image :src="getFullPath(img)" mode="aspectFill"></image>
               </view>
            </view>
         </view>
         <view class="list-item" style="flex-direction: column; align-items: flex-start;">
            <view class="list-item-label" style="margin-bottom: 30rpx;">其他材料</view>
            <view class="imgList">
               <view class="imgItem" v-for="(img, index) in form.otherMaterialImgs" :key="index" @click="previewImage(img)">
                  <image :src="getFullPath(img)" mode="aspectFill"></image>
               </view>
            </view>
         </view>
         <template v-if="form.companyType === 0">
            <view class="list-item" style="flex-direction: column; align-items: flex-start;">
               <view class="list-item-label" style="margin-bottom: 30rpx;">有效劳工合同</view>
               <view class="imgList">
                  <view class="imgItem" v-for="(img, index) in form.laborContractImgs" :key="index" @click="previewImage(img)">
                     <image :src="getFullPath(img)" mode="aspectFill"></image>
                  </view>
               </view>
            </view>
            <view class="list-item" style="flex-direction: column; align-items: flex-start;">
               <view class="list-item-label" style="margin-bottom: 30rpx;">有效社保缴纳证明</view>
               <view class="imgList">
                  <view class="imgItem" v-for="(img, index) in form.socialSecurityImgs" :key="index" @click="previewImage(img)">
                     <image :src="getFullPath(img)" mode="aspectFill"></image>
                  </view>
               </view>
            </view>
         </template>
         <template v-else>
            <view class="list-item">
               <view class="list-item-label">法人姓名</view>
               <view class="list-item-value">{{ form.legalPersonName }}</view>
            </view>
            <view class="list-item">
               <view class="list-item-label">企业支付宝账号</view>
               <view class="list-item-value">{{ form.aliAccount }}</view>
            </view>
            <view class="list-item">
               <view class="list-item-label">法人身份证号</view>
               <view class="list-item-value">{{ form.legalPersonCardNo }}</view>
            </view>
            <view class="list-item" style="flex-direction: column; align-items: flex-start;">
               <view class="list-item-label" style="margin-bottom: 30rpx;">法人身份证正反面</view>
               <view class="idcard">
                  <view class="idcard-image" v-if="form.legalPersonCard" @click="previewImage(form.legalPersonCard)">
                     <image :src="getFullPath(form.legalPersonCard)" mode="aspectFill"></image>
                  </view>
                  <view class="idcard-image" v-if="form.legalPersonCardBack" @click="previewImage(form.legalPersonCardBack)">
                     <image :src="getFullPath(form.legalPersonCardBack)" mode="aspectFill"></image>
                  </view>
               </view>
            </view>
            <view class="list-item" style="flex-direction: column; align-items: flex-start;">
               <view class="list-item-label" style="margin-bottom: 30rpx;">营业执照</view>
               <view class="imgList">
                  <view class="imgItem" v-if="form.businessImg" @click="previewImage(form.businessImg)">
                     <image :src="getFullPath(form.businessImg)" mode="aspectFill"></image>
                  </view>
               </view>
            </view>
         </template>
      </view>
      <view class="footer-btn" v-if="shopAuditStatus === 1">
         <view class="pay-btn" @click="goToPay">支付押金 ¥{{ form.depositAmount }}</view>
      </view>
      <view class="footer-btn" v-if="shopAuditStatus === 2">
         <view class="reapply-btn" @click="goToReapply">重新认证</view>
      </view>
   </view>
</template>
@@ -16,8 +150,171 @@
   export default {
      data() {
         return {
            form: {
               telephone: '',
               name: '',
               companyType: 0,
               provinceName: '',
               cityName: '',
               areaName: '',
               address: '',
               linkName: '',
               linkPhone: '',
               idcard: '',
               aliAccount: '',
               storeFrontImgs: [],
               storeInteriorImgs: [],
               otherMaterialImgs: [],
               idcardImg: '',
               idcardImgBack: '',
               laborContractImgs: [],
               socialSecurityImgs: [],
               legalPersonName: '',
               legalPersonCard: '',
               legalPersonCardBack: '',
               legalPersonCardNo: '',
               businessImg: '',
               depositAmount: '',
               aliName: ''
            },
            imgPrefix: '',
            statusText: '平台审核中',
            shopAuditStatus: 0,
            statusBottomText: ''
         };
      },
      computed: {
         statusIcon() {
            const iconMap = {
               0: '/static/icon/ic_renzhengzhong@2x.png',
               1: '/static/icon/ic_pass@2x.png',
               2: '/static/icon/ic_fail@2x.png',
               3: '/static/icon/ic_pass@2x.png'
            }
            return iconMap[this.shopAuditStatus] || iconMap[0]
         },
         fullAreaName() {
            const arr = [this.form.provinceName, this.form.cityName, this.form.areaName].filter(Boolean)
            return arr.join('/')
         }
      },
      onLoad() {
         this.getMyShopData()
      },
      methods: {
         getFullPath(url) {
            if (!url) return ''
            if (url.startsWith('http')) {
               return url
            }
            return this.imgPrefix + url
         },
         previewImage(url) {
            uni.previewImage({
               urls: [this.getFullPath(url)],
               current: 0
            })
         },
         goToPay() {
            uni.showLoading({ title: '发起支付中...', mask: true })
            this.$u.api.payDeposit({}).then(res => {
               uni.hideLoading()
               if (res.code === 200 && res.data) {
                  let paymentData = res.data.response
                  uni.requestPayment({
                     provider: 'wxpay',
                     timeStamp: paymentData.timeStamp || '',
                     nonceStr: paymentData.nonceStr || '',
                     package: paymentData.package || '',
                     signType: paymentData.signType || 'MD5',
                     paySign: paymentData.paySign || '',
                     success: (res) => {
                        this.getMyShopData()
                     },
                     fail: (err) => {
                        if (err.errMsg.includes('cancel')) {
                           uni.showToast({ title: '已取消支付', icon: 'none' })
                        } else {
                           uni.showToast({ title: '支付失败', icon: 'none' })
                        }
                     }
                  })
               } else {
                  uni.showToast({ title: res.msg || '支付失败', icon: 'none' })
               }
            }).catch(err => {
               uni.hideLoading()
               uni.showToast({ title: '支付失败', icon: 'none' })
            })
         },
         goToReapply() {
            uni.navigateTo({
               url: '/pages/store-apply/store-apply'
            })
         },
         async getMyShopData() {
            try {
               const res = await this.$u.api.getMyShop()
               if (res.code === 200 && res.data) {
                  const data = res.data
                  this.imgPrefix = data.imgPrefix || ''
                  this.form.telephone = data.telephone || ''
                  this.form.name = data.name || ''
                  this.form.companyType = data.companyType || 0
                  this.form.provinceName = data.provinceName || ''
                  this.form.cityName = data.cityName || ''
                  this.form.areaName = data.areaName || ''
                  this.form.address = data.address || ''
                  this.form.linkName = data.linkName || ''
                  this.form.linkPhone = data.linkPhone || ''
                  this.form.idcard = data.idcard || ''
                  this.form.aliAccount = data.aliAccount || ''
                  this.form.legalPersonName = data.legalPersonName || ''
                  this.form.legalPersonCardNo = data.legalPersonCard || ''
                  this.form.aliName = data.aliName || ''
                  if (data.storeFrontImgs) {
                     this.form.storeFrontImgs = typeof data.storeFrontImgs === 'string' ? data.storeFrontImgs.split(',') : data.storeFrontImgs
                  }
                  if (data.storeInteriorImgs) {
                     this.form.storeInteriorImgs = typeof data.storeInteriorImgs === 'string' ? data.storeInteriorImgs.split(',') : data.storeInteriorImgs
                  }
                  if (data.otherMaterialImgs) {
                     this.form.otherMaterialImgs = typeof data.otherMaterialImgs === 'string' ? data.otherMaterialImgs.split(',') : data.otherMaterialImgs
                  }
                  this.form.idcardImg = data.idcardImg || ''
                  this.form.idcardImgBack = data.idcardImgBack || ''
                  if (data.laborContractImgs) {
                     this.form.laborContractImgs = typeof data.laborContractImgs === 'string' ? data.laborContractImgs.split(',') : data.laborContractImgs
                  }
                  if (data.socialSecurityImgs) {
                     this.form.socialSecurityImgs = typeof data.socialSecurityImgs === 'string' ? data.socialSecurityImgs.split(',') : data.socialSecurityImgs
                  }
                  this.form.legalPersonCard = data.legalPersonCard || ''
                  this.form.legalPersonCardBack = data.legalPersonCardBack || ''
                  if (data.auditStatus === 1) {
                     this.form.depositAmount = data.depositAmount / 100 || ''
                  }
                  this.form.businessImg = data.businessImg || ''
                  const statusMap = {
                     0: '平台审核中',
                     1: '门店入驻已通过',
                     2: '门店入驻已拒绝',
                     3: '门店已入驻'
                  }
                  this.shopAuditStatus = data.auditStatus || 0
                  this.statusText = statusMap[this.shopAuditStatus] || '平台审核中'
                  const bottomTextMap = {
                     0: '审核结果将通过短信/订阅消息通知您',
                     1: '请支付门店入驻押金',
                     2: '营业执照过期,请重新提交审核',
                     3: ' '
                  }
                  this.statusBottomText = bottomTextMap[this.shopAuditStatus] || bottomTextMap[0]
               }
            } catch (error) {
               console.log('获取店铺信息失败', error)
            }
         }
      }
   }
</script>
@@ -25,6 +322,70 @@
<style lang="scss" scoped>
   .container {
      width: 100%;
      padding-bottom: 140rpx;
      .list {
         width: 100%;
         padding: 0 30rpx;
         box-sizing: border-box;
         .list-item {
            width: 100%;
            padding: 30rpx 0;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1rpx solid #E5E5E5;
            .list-item-label {
               width: 245rpx;
               flex-shrink: 0;
               font-weight: 400;
               font-size: 30rpx;
               color: #777777;
            }
            .imgList {
               width: 100%;
               display: flex;
               align-items: center;
               flex-wrap: wrap;
               .imgItem {
                  width: 144rpx;
                  height: 144rpx;
                  border-radius: 8rpx;
                  gap: 20rpx;
                  overflow: hidden;
                  image {
                     width: 100%;
                  }
               }
            }
            .idcard {
               width: 100%;
               display: flex;
               align-items: center;
               .idcard-image {
                  flex: 1;
                  height: 216rpx;
                  overflow: hidden;
                  border-radius: 8rpx;
                  border: 1rpx solid #E5E5E5;
                  &:first-child {
                     margin-right: 22rpx;
                  }
                  image {
                     width: 100%;
                     height: 100%;
                  }
               }
            }
            .list-item-value {
               flex: 1;
               text-align: right;
               font-weight: 400;
               font-size: 30rpx;
               color: #222222;
            }
         }
      }
      .head {
         width: 100%;
         height: 248rpx;
@@ -32,7 +393,6 @@
         flex-direction: column;
         align-items: center;
         justify-content: center;
         background: rgba(255,114,0,0.08);
         .head-top {
            display: flex;
            align-items: center;
@@ -45,7 +405,6 @@
            text {
               font-weight: 600;
               font-size: 40rpx;
               color: #FA8010;
            }
         }
         .head-bottom {
@@ -54,6 +413,51 @@
            color: #333333;
            margin-top: 34rpx;
         }
         &.head-0 {
            background: rgba(255,114,0,0.08);
            .head-top text {
               color: #FA8010;
            }
         }
         &.head-1 {
            background: rgba(0,211,113,0.1);
            .head-top text {
               color: #00D371;
            }
         }
         &.head-3 {
            background: rgba(0,211,113,0.1);
            .head-top text {
               color: #00D371;
            }
         }
         &.head-2 {
            background: rgba(255,0,0,0.08);
            .head-top text {
               color: #FF0000;
            }
         }
      }
      .footer-btn {
         width: 100%;
         padding: 20rpx 30rpx;
         box-sizing: border-box;
         background: #fff;
         position: fixed;
         bottom: 0;
         left: 0;
         .pay-btn, .reapply-btn {
            width: 100%;
            height: 88rpx;
            background: #10B2FA;
            border-radius: 44rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 500;
            font-size: 32rpx;
            color: #fff;
         }
      }
   }
</style>