调接口

MrShi

2025-07-18 6513c0b26da5896a462b89dbd0241aafb838f120

 small-program/pages/employment-certification/employment-certification.vue

@@ -25,7 +25,7 @@
                  <input type="text" v-model="form.linkName" placeholder="请输入真实姓名" />
               </view>
            </view>
            <view class="item"  v-if="isCompany">
            <view class="item" v-if="isCompany">
               <view class="item-label">
                  <text>单位名称</text>
                  <text>*</text>
@@ -44,11 +44,11 @@
               </view>
            </view>
            <view class="item" @click="chooseMPLoaction">
               <view class="item-label" >
               <view class="item-label">
                  <text>接单位置</text>
                  <text>*</text>
               </view>
               <view class="item-val" >
               <view class="item-val">
                  <text>{{form.location || '去选择'}}</text>
                  <u-icon name="arrow-right" color="#111111" size="18"></u-icon>
               </view>
@@ -60,24 +60,27 @@
               </view>
               <view class="item-upload">
                  <view class="item-upload-item" @click="uploadImg(11)">
                     <image v-if="form.img11Full && form.img11Full !=''" :src="form.img11Full" mode="widthFix"></image>
                     <image  v-else src="/static/image/btn_renxiang@2x.png" mode="widthFix"></image>
                     <image v-if="form.img11Full && form.img11Full !=''" :src="form.img11Full" mode="widthFix">
                     </image>
                     <image v-else src="/static/image/btn_renxiang@2x.png" mode="widthFix"></image>
                  </view>
                  <view class="item-upload-item"  @click="uploadImg(21)">
                     <image v-if="form.img21Full && form.img21Full !=''" :src="form.img21Full" mode="widthFix"></image>
                     <image v-else  src="/static/image/btn_guohui@2x.png" mode="widthFix"></image>
                  <view class="item-upload-item" @click="uploadImg(21)">
                     <image v-if="form.img21Full && form.img21Full !=''" :src="form.img21Full" mode="widthFix">
                     </image>
                     <image v-else src="/static/image/btn_guohui@2x.png" mode="widthFix"></image>
                  </view>
               </view>
            </view>
            <view class="item"  v-if="isCompany">
            <view class="item" v-if="isCompany">
               <view class="item-label">
                  <text>认证资料</text>
                  <text>*</text>
               </view>
               <view class="item-upload" v-if="flag==0">
                  <view class="item-upload-item1"  @click="uploadImg(1)">
                  <view class="item-upload-item1" @click="uploadImg(1)">
                     <view class="image">
                        <image v-if="form.img1Full && form.img1Full !=''" :src=" form.img1Full" mode="widthFix"></image>
                        <image v-if="form.img1Full && form.img1Full !=''" :src=" form.img1Full" mode="widthFix">
                        </image>
                        <image v-else src="/static/icon/ic_camera@2x.png" mode="widthFix"></image>
                        <text>点击上传</text>
                     </view>
@@ -86,9 +89,10 @@
                        <text>*</text>
                     </view>
                  </view>
                  <view class="item-upload-item1"  @click="uploadImg(2)">
                  <view class="item-upload-item1" @click="uploadImg(2)">
                     <view class="image">
                        <image v-if="form.img2Full && form.img2Full !=''" :src=" form.img2Full" mode="widthFix"></image>
                        <image v-if="form.img2Full && form.img2Full !=''" :src=" form.img2Full" mode="widthFix">
                        </image>
                        <image v-else src="/static/icon/ic_camera@2x.png" mode="widthFix"></image>
                        <text>点击上传</text>
                     </view>
@@ -98,9 +102,10 @@
                  </view>
               </view>
               <view class="item-upload" v-if="flag==1">
                  <view class="item-upload-item1"  @click="uploadImg(1)">
                  <view class="item-upload-item1" @click="uploadImg(1)">
                     <view class="image">
                        <image v-if="form.img1Full && form.img1Full !=''" :src=" form.img1Full" mode="widthFix"></image>
                        <image v-if="form.img1Full && form.img1Full !=''" :src=" form.img1Full" mode="widthFix">
                        </image>
                        <image v-else src="/static/icon/ic_camera@2x.png" mode="widthFix"></image>
                        <text>点击上传</text>
                     </view>
@@ -109,9 +114,10 @@
                        <text>*</text>
                     </view>
                  </view>
                  <view class="item-upload-item1"  @click="uploadImg(2)">
                  <view class="item-upload-item1" @click="uploadImg(2)">
                     <view class="image">
                        <image v-if="form.img2Full && form.img2Full !=''" :src=" form.img2Full" mode="widthFix"></image>
                        <image v-if="form.img2Full && form.img2Full !=''" :src=" form.img2Full" mode="widthFix">
                        </image>
                        <image v-else src="/static/icon/ic_camera@2x.png" mode="widthFix"></image>
                        <text>点击上传</text>
                     </view>
@@ -120,9 +126,10 @@
                        <text>*</text>
                     </view>
                  </view>
                  <view class="item-upload-item1"  @click="uploadImg(3)">
                  <view class="item-upload-item1" @click="uploadImg(3)">
                     <view class="image">
                        <image v-if="form.img3Full && form.img3Full !=''" :src=" form.img3Full" mode="widthFix"></image>
                        <image v-if="form.img3Full && form.img3Full !=''" :src=" form.img3Full" mode="widthFix">
                        </image>
                        <image v-else src="/static/icon/ic_camera@2x.png" mode="widthFix"></image>
                        <text>点击上传</text>
                     </view>
@@ -132,9 +139,10 @@
                  </view>
               </view>
               <view class="item-upload" v-if="flag==2">
                  <view class="item-upload-item1"  @click="uploadImg(1)">
                  <view class="item-upload-item1" @click="uploadImg(1)">
                     <view class="image">
                        <image v-if="form.img1Full && form.img1Full !=''" :src=" form.img1Full" mode="widthFix"></image>
                        <image v-if="form.img1Full && form.img1Full !=''" :src=" form.img1Full" mode="widthFix">
                        </image>
                        <image v-else src="/static/icon/ic_camera@2x.png" mode="widthFix"></image>
                        <text>点击上传</text>
                     </view>
@@ -143,9 +151,10 @@
                        <text>*</text>
                     </view>
                  </view>
                  <view class="item-upload-item1"  @click="uploadImg(2)">
                  <view class="item-upload-item1" @click="uploadImg(2)">
                     <view class="image">
                        <image v-if="form.img2Full && form.img2Full !=''" :src=" form.img2Full" mode="widthFix"></image>
                        <image v-if="form.img2Full && form.img2Full !=''" :src=" form.img2Full" mode="widthFix">
                        </image>
                        <image v-else src="/static/icon/ic_camera@2x.png" mode="widthFix"></image>
                        <text>点击上传</text>
                     </view>
@@ -154,9 +163,10 @@
                        <text>*</text>
                     </view>
                  </view>
                  <view class="item-upload-item1"  @click="uploadImg(3)">
                  <view class="item-upload-item1" @click="uploadImg(3)">
                     <view class="image">
                        <image v-if="form.img3Full && form.img3Full !=''" :src=" form.img3Full" mode="widthFix"></image>
                        <image v-if="form.img3Full && form.img3Full !=''" :src=" form.img3Full" mode="widthFix">
                        </image>
                        <image v-else src="/static/icon/ic_camera@2x.png" mode="widthFix"></image>
                        <text>点击上传</text>
                     </view>
@@ -165,9 +175,10 @@
                        <text>*</text>
                     </view>
                  </view>
                  <view class="item-upload-item1"  @click="uploadImg(4)">
                  <view class="item-upload-item1" @click="uploadImg(4)">
                     <view class="image">
                        <image v-if="form.img4Full && form.img4Full !=''" :src=" form.img4Full" mode="widthFix"></image>
                        <image v-if="form.img4Full && form.img4Full !=''" :src=" form.img4Full" mode="widthFix">
                        </image>
                        <image v-else src="/static/icon/ic_camera@2x.png" mode="widthFix"></image>
                        <text>点击上传</text>
                     </view>
@@ -185,21 +196,23 @@
</template>

<script>
   import { mapState } from 'vuex'
   import {
      mapState
   } from 'vuex'
   export default {
      computed: {
         ...mapState( ['userInfo'])
         ...mapState(['userInfo'])
      },
      data() {
         return {
            bgImg: require('@/static/image/bg_renzheng_yonggong@2x.png'),
            title: '用户认证',
            flag: null,
            isCompany:false,
            loading:false,
            isCompany: false,
            loading: false,
            form: {
               "companyName": "",
               authType:0,
               authType: 0,
               "img1": "",
               "img2": "",
               "img11": "",
@@ -216,152 +229,188 @@
               "lat": null,
               "lgt": null,
               "linkName": "",
               "location": "", 
               "location": "",
               "telephone": "",
               "type": 1 
               "type": 1
            }
         };
      },
      onLoad(options) {
         console.log(options)
         var flag = options.flag
         this.flag = flag 
         this.flag = flag
         this.initFormData()
         switch(flag){
         switch (flag) {
            case '1':
                this.title = '货运认证'
               this.title = '货运认证'
               this.bgImg = require('@/static/image/bg_renzheng_huoyun@2x.png')
               break;
            case '2':
                this.title = '供餐认证'
               this.title = '供餐认证'
               this.bgImg = require('@/static/image/bg_renzheng_gongcan@2x.png')
               break;
            default:
               this.bgImg = require('@/static/image/bg_renzheng_yonggong@2x.png'),
               this.title = '用工认证'
               break; 
                  this.title = '用工认证'
               break;
         }
         uni.setNavigationBarTitle({
            title:this.title
            title: this.title
         })
      },
      methods:{
         changeIsCompany(){
            this.isCompany =!this.isCompany 
            this.form.authType = this.isCompany?1:0
      methods: {
         changeIsCompany() {
            this.isCompany = !this.isCompany
            this.form.authType = this.isCompany ? 1 : 0
         },
         inNullParam(param){
            if(!param){
         inNullParam(param) {
            if (!param) {
               return true
            }
            if(param == ''){
            if (param == '') {
               return true
            }
            return false
         },
         applySubmit() {
            if(this.loading){
            if (this.loading) {
               return
            }
             console.log('表单参数：',this.form)
            this.loading =true
            if(this.inNullParam(this.form.linkName)
               ||this.inNullParam(this.form.lat)
               ||this.inNullParam(this.form.lgt)
               ||this.inNullParam(this.form.location)
               ||this.inNullParam(this.form.telephone)){
                 uni.showToast({title: '对不起，请按要求填写申请信息1！',icon: "none",duration: 2000});
                 this.loading =false
                 return
            }
           if( this.form.authType == 0){
              if(this.inNullParam(this.form.img11)||this.inNullParam(this.form.img21)){
               uni.showToast({title: '对不起，请按要求填写申请信息3！',icon: "none",duration: 2000});
                this.loading =false
            console.log('表单参数：', this.form)
            this.loading = true
            if (this.inNullParam(this.form.linkName) ||
               this.inNullParam(this.form.lat) ||
               this.inNullParam(this.form.lgt) ||
               this.inNullParam(this.form.location) ||
               this.inNullParam(this.form.telephone)) {
               uni.showToast({
                  title: '对不起，请按要求填写申请信息1！',
                  icon: "none",
                  duration: 2000
               });
               this.loading = false
               return
              }
           }else{
              if(this.inNullParam(this.form.img1) || this.inNullParam(this.form.companyName)){
                  uni.showToast({title: '对不起，请按要求填写申请信息4！',icon: "none",duration: 2000});
                   this.loading =false
            }
            if (this.form.authType == 0) {
               if (this.inNullParam(this.form.img11) || this.inNullParam(this.form.img21)) {
                  uni.showToast({
                     title: '对不起，请按要求填写申请信息3！',
                     icon: "none",
                     duration: 2000
                  });
                  this.loading = false
                  return
              }
           }
           if(this.form.type != 0 && this.form.authType == 1 && this.inNullParam(this.form.img2)){
               uni.showToast({title: '对不起，请按要求填写申请信息！',icon: "none",duration: 2000});
                this.loading =false
               }
            } else {
               if (this.inNullParam(this.form.img1) || this.inNullParam(this.form.companyName)) {
                  uni.showToast({
                     title: '对不起，请按要求填写申请信息4！',
                     icon: "none",
                     duration: 2000
                  });
                  this.loading = false
                  return
               }
            }
            if (this.form.type != 0 && this.form.authType == 1 && this.inNullParam(this.form.img2)) {
               uni.showToast({
                  title: '对不起，请按要求填写申请信息！',
                  icon: "none",
                  duration: 2000
               });
               this.loading = false
               return
           }
           if(this.form.type == 1 && this.form.authType == 1 && this.inNullParam(this.form.img2)){
               uni.showToast({title: '对不起，请按要求填写申请信息5！',icon: "none",duration: 2000});
                this.loading =false
            }
            if (this.form.type == 1 && this.form.authType == 1 && this.inNullParam(this.form.img2)) {
               uni.showToast({
                  title: '对不起，请按要求填写申请信息5！',
                  icon: "none",
                  duration: 2000
               });
               this.loading = false
               return
           }
					
           var that = this
           var param =this.form;
           if(this.form.authType == 0){
              param.img1 = this.form.img11,
              param.img2 = this.form.img21
           }
           console.log('提交参数：',param)
           this.$u.api.applyForIdentity(param).then(res =>{
              if(res.code ===200){
                 uni.showToast({
                    title: res.message||'申请成功 ',
                    icon: "none",
                    duration: 2000
                  });
               uni.navigateBack({ delta: 1 });
              }
            }).finally(()=>{
                that.loading =false
            })
         } ,
         chooseMPLoaction(){
            var that =this
            }
            var that = this
            var param = this.form;
            if (this.form.authType == 0) {
               param.img1 = this.form.img11,
               param.img2 = this.form.img21
            }
            uni.requestSubscribeMessage({
               tmplIds: ['4H9ztG4E9BxJLwMuYSZ6oiM7yb4KX7u7bYhkhYJP0-Y'],
               success(res) {
                  console.log('提交参数：', param)
                  this.$u.api.applyForIdentity(param).then(res => {
                     if (res.code === 200) {
                        uni.showToast({
                           title: res.message || '申请成功 ',
                           icon: "none",
                           duration: 2000
                        });
                        uni.navigateBack({
                           delta: 1
                        });
                     }
                  }).finally(() => {
                     that.loading = false
                  })
               }
            })
         },
         chooseMPLoaction() {
            var that = this
            uni.chooseLocation({
               success:(res)=> {
               success: (res) => {
                  console.log(res);
                  this.form.location=res.address
                  this.form.lat=res.latitude
                  this.form.lgt=res.longitude
                  this.form.location = res.address
                  this.form.lat = res.latitude
                  this.form.lgt = res.longitude
               },
               fail:()=>{
               fail: () => {
                  // 如果用uni.chooseLocation没有获取到地理位置，则需要获取当前的授权信息，判断是否有地理授权信息
                  uni.getSetting({
                     success: (res) => {
                        console.log(res);
                        var status = res.authSetting;
                        if(!status['scope.userLocation']){
                        // 如果授权信息中没有地理位置的授权，则需要弹窗提示用户需要授权地理信息
                        if (!status['scope.userLocation']) {
                           // 如果授权信息中没有地理位置的授权，则需要弹窗提示用户需要授权地理信息
                           uni.showModal({
                              title:"是否授权当前位置",
                              content:"需要获取您的地理位置，请确认授权，否则地图功能将无法使用",
                              success:(tip)=>{
                                 if(tip.confirm){
                                 // 如果用户同意授权地理信息，则打开授权设置页面，判断用户的操作
                              title: "是否授权当前位置",
                              content: "需要获取您的地理位置，请确认授权，否则地图功能将无法使用",
                              success: (tip) => {
                                 if (tip.confirm) {
                                    // 如果用户同意授权地理信息，则打开授权设置页面，判断用户的操作
                                    uni.openSetting({
                                       success:(data)=>{
                                       // 如果用户授权了地理信息在，则提示授权成功
                                          if(data.authSetting['scope.userLocation']===true){
                                       success: (data) => {
                                          // 如果用户授权了地理信息在，则提示授权成功
                                          if (data
                                             .authSetting[
                                                'scope.userLocation'
                                                ] === true
                                             ) {
                                             uni.showToast({
                                                title:"授权成功",
                                                icon:"success",
                                                duration:1000
                                                title: "授权成功",
                                                icon: "success",
                                                duration: 1000
                                             })
                                             // 授权成功后，然后再次chooseLocation获取信息
                                             uni.chooseLocation({
                                                success: (res) => {
                                                   console.log("详细地址",res);
                                                success: (
                                                   res
                                                   ) => {
                                                   console
                                                      .log(
                                                         "详细地址",
                                                         res
                                                         );
                                                   // this.getRegionFn(res);
                                                }
                                             })
                                          }else{
                                          } else {
                                             uni.showToast({
                                                title:"授权失败",
                                                icon:"none",
                                                duration:1000
                                                title: "授权失败",
                                                icon: "none",
                                                duration: 1000
                                             })
                                          }
                                       }
@@ -373,90 +422,90 @@
                     },
                     fail: (res) => {
                        uni.showToast({
                           title:"调用授权窗口失败",
                           icon:"none",
                           duration:1000
                           title: "调用授权窗口失败",
                           icon: "none",
                           duration: 1000
                        })
                     }
                  })
               }
            })
         },
         uploadImg(index){
            var that =this
         uploadImg(index) {
            var that = this
            uni.chooseImage({
               count: 1, // 默认9
               sizeType: ['original', 'compressed'],
               sourceType: ['album','camera'],//['album','camera'],
               mediaType: ['image'],//['image', 'video'],
               success: function (res1) {
                 const tempFiles = res1.tempFiles  //包含图片大小的数组
                 if (tempFiles[0].size > 20*1024*1024) { 
                  uni.showToast({
                     title: '上传图片不能大于20M!',
                     duration: 2000,
                     icon: "none"
                  });
                  return
                 } 
					 
                 uni.uploadFile({
                  url: that.$baseUrl + 'web/public/upload',
                  filePath: res1.tempFilePaths[0],
                  name: 'file',
                  formData: {
                     'folder': 'identity',
                     'flag':index
                  },
                  success:(data)=>{
               sourceType: ['album', 'camera'], //['album','camera'],
               mediaType: ['image'], //['image', 'video'],
               success: function(res1) {
                  const tempFiles = res1.tempFiles //包含图片大小的数组
                  if (tempFiles[0].size > 20 * 1024 * 1024) {
                     uni.showToast({
                        title: '上传成功',
                        title: '上传图片不能大于20M!',
                        duration: 2000,
                        icon: "none"
                     });
                      const res = JSON.parse(data.data)
							 
                       console.log(res)
                      if(res.data.flag ==  '11'){
                         that.form.img11=res.data.imgaddr
                         that.form.img11Full=res.data.url
                      }else if(res.data.flag == '21'){
                         that.form.img21=res.data.imgaddr
                         that.form.img21Full=res.data.url
                            console.log(21,that.form.img21Full)
                      }else if(res.data.flag ==  '1'){
                         that.form.img1=res.data.imgaddr
                         that.form.img1Full=res.data.url
                      }else if(res.data.flag == '2'){
                         that.form.img2=res.data.imgaddr
                         that.form.img2Full=res.data.url
                      }else if(res.data.flag  == '3'){
                         that.form.img3=res.data.imgaddr
                         that.form.img3Full=res.data.url
                      }else if(res.data.flag  == '4'){
                         that.form.img4=res.data.imgaddr
                         that.form.img4Full=res.data.url
                      }  
                  },
                  fail:(e)=>{
                     uni.showToast({
                        title: '上传失败',
                        duration: 2000,
                        icon: "none"
                     });
                     return
                  }
                 }) 

                  uni.uploadFile({
                     url: that.$baseUrl + 'web/public/upload',
                     filePath: res1.tempFilePaths[0],
                     name: 'file',
                     formData: {
                        'folder': 'identity',
                        'flag': index
                     },
                     success: (data) => {
                        uni.showToast({
                           title: '上传成功',
                           duration: 2000,
                           icon: "none"
                        });
                        const res = JSON.parse(data.data)

                        console.log(res)
                        if (res.data.flag == '11') {
                           that.form.img11 = res.data.imgaddr
                           that.form.img11Full = res.data.url
                        } else if (res.data.flag == '21') {
                           that.form.img21 = res.data.imgaddr
                           that.form.img21Full = res.data.url
                           console.log(21, that.form.img21Full)
                        } else if (res.data.flag == '1') {
                           that.form.img1 = res.data.imgaddr
                           that.form.img1Full = res.data.url
                        } else if (res.data.flag == '2') {
                           that.form.img2 = res.data.imgaddr
                           that.form.img2Full = res.data.url
                        } else if (res.data.flag == '3') {
                           that.form.img3 = res.data.imgaddr
                           that.form.img3Full = res.data.url
                        } else if (res.data.flag == '4') {
                           that.form.img4 = res.data.imgaddr
                           that.form.img4Full = res.data.url
                        }
                     },
                     fail: (e) => {
                        uni.showToast({
                           title: '上传失败',
                           duration: 2000,
                           icon: "none"
                        });
                     }
                  })
               },
               fail:function(err){
                 hideLoading()
                 reject("选择文件失败",err)
               fail: function(err) {
                  hideLoading()
                  reject("选择文件失败", err)
               }
            })
         },
         initFormData(){
         initFormData() {
            this.form = {
               "companyName": "",
               authType:0,
               authType: 0,
               "img1": "",
               "img2": "",
               "img11": "",
@@ -473,8 +522,8 @@
               "lat": null,
               "lgt": null,
               "linkName": this.userInfo.name,
               "location": "", 
               "telephone":  this.userInfo.telephone,
               "location": "",
               "telephone": this.userInfo.telephone,
               "type": this.flag
            }
         }
@@ -491,6 +540,7 @@
<style lang="scss" scoped>
   .box {
      width: 100%;

      .box-head {
         width: 100%;
         height: 300rpx;
@@ -498,6 +548,7 @@
         box-sizing: border-box;
         background-repeat: no-repeat;
         background-size: 100% 100%;

         .box-head-botton {
            width: 100%;
            height: 88rpx;
@@ -510,24 +561,28 @@
            border-radius: 44rpx;
            margin-top: 30rpx;
         }

         .box-head-info {
            width: 100%;
            display: flex;
            flex-direction: column;

            text {
               &:nth-child(1) {
                  font-weight: bold;
                  font-size: 48rpx;
                  color: #FFFFFF;
               }

               &:nth-child(2) {
                  font-weight: 400;
                  font-size: 26rpx;
                  color: rgba(255,255,255,0.8);
                  color: rgba(255, 255, 255, 0.8);
                  margin-top: 14rpx;
               }
            }
         }

         .box-head-content {
            width: 100%;
            padding: 40rpx 30rpx;
@@ -535,14 +590,17 @@
            background-color: #FFFFFF;
            border-radius: 20rpx;
            margin-top: 30rpx;

            .item {
               width: 100%;
               display: flex;
               flex-direction: column;
               margin-bottom: 30rpx;

               &:last-child {
                  margin: 0 !important;
               }

               .item-cate {
                  width: 100%;
                  display: flex;
@@ -550,10 +608,12 @@
                  padding: 30rpx 0;
                  box-sizing: border-box;
                  border-bottom: 1rpx solid #E5E5E5;

                  .active {
                     background: #00BC12 !important;
                     color: #FFFFFF !important;
                  }

                  .item-cate-row {
                     width: 208rpx;
                     height: 72rpx;
@@ -562,20 +622,24 @@
                     background: #EEEEEE;
                     border-radius: 36rpx;
                     margin-right: 20rpx;

                     &:last-child {
                        margin: 0 !important;
                     }
                  }
               }

               .item-label {
                  display: flex;
                  align-items: center;

                  text {
                     &:nth-child(1) {
                        font-weight: 500;
                        font-size: 32rpx;
                        color: #222222;
                     }

                     &:nth-child(2) {
                        font-weight: 500;
                        font-size: 32rpx;
@@ -583,6 +647,7 @@
                     }
                  }
               }

               .item-upload {
                  width: 100%;
                  padding: 30rpx 0;
@@ -591,6 +656,7 @@
                  align-items: center;
                  justify-content: space-between;
                  flex-wrap: wrap;

                  .item-upload-item {
                     width: 300rpx;
                     border-radius: 10px;
@@ -599,30 +665,35 @@
                     align-items: center;
                     justify-content: content;
                     overflow: hidden;
                     border:1px solid #c2c2c2;
                     border: 1px solid #c2c2c2;

                     image {
                        width: 100%;
                        height: 100%;
                     }
                  }

                  .item-upload-item1 {
                     width: 45%;
                     padding-bottom: 40px;
                     border-radius: 10px;

                     .image {
                        width: 100%;
                        height: 196rpx;
                        background: #F7F7F7;
                        border:1px solid #c2c2c2;
                        border: 1px solid #c2c2c2;
                        border-radius: 16rpx;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        flex-direction: column;

                        image {
                           width: 48rpx;
                           height: 48rpx;
                        }

                        text {
                           font-weight: 400;
                           font-size: 28rpx;
@@ -630,18 +701,21 @@
                           margin-top: 12rpx;
                        }
                     }

                     .info {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        margin-top: 16rpx;

                        text {
                           &:nth-child(1) {
                              font-weight: 400;
                              font-size: 26rpx;
                              color: #333333;
                           }

                           &:nth-child(2) {
                              font-weight: 400;
                              font-size: 26rpx;
@@ -651,6 +725,7 @@
                     }
                  }
               }

               .item-val {
                  width: 100%;
                  padding: 30rpx 0;
@@ -660,17 +735,20 @@
                  align-items: center;
                  justify-content: space-between;
                  border-bottom: 1rpx solid #E5E5E5;

                  input {
                     width: 100%;
                     font-weight: 400;
                     font-size: 30rpx;
                     color: #222222;
                  }

                  text {
                     font-weight: 400;
                     font-size: 30rpx;
                     color: #666666;
                  }

                  button {
                     width: 100%;
                     height: 100%;
@@ -684,4 +762,4 @@
         }
      }
   }
</style>
</style>