story#7189,回程车小程序司机端-迁移认证页面

src/views/rvDriverAuthentication/carInfoAudit.vue

@@ -15,17 +15,14 @@
     <div class="titleWrap">
       <div class="natureWrap">
         <span class="title"><span class="star">*</span>业务性质</span>
-        <radio-group @change="radioChange"  class="flexWrap">
-          <label class="flexWrap labelWrap1" v-for="(item, index) in options" :key="item.value">
-            <div class="flexWrap center"><radio :value="item.value" :checked="(index+1) === Number(form.businessNature)" />{{item.name}}</div>
-          </label>
-        </radio-group>
+        <van-radio-group @change="radioChange" v-model="form.businessNature" class="flexWrap">
+          <van-radio name="1">国跑圈业务</van-radio>
+          <van-radio name="2">固定区域救援业务</van-radio>
+        </van-radio-group>
       </div>
-      <div class="natureWrap regionWrap" v-if="form.businessNature == 2">
+      <div class="natureWrap regionWrap" v-if="form.businessNature == 2" >
         <span class="title"><span class="star">*</span>所在地区</span>
-        <picker class="pickerWrap" mode="region" @change="bindRegionChange"  :value="region">
-          <div class="picker">{{regionspan}}</div>
-        </picker>
+        <div class="pickerWrap picker" @click="areaShow = true" >{{regionText}}</div>
       </div>
     </div>
     <photo-item title="上传行驶证" :left-url="form.vehicleLicenseFront || driveFront" :right-url="form.vehicleLicenseBack || driveBack" v-if="type != 'simple'"
@@ -37,11 +34,9 @@
     <div class="titleWrap">
       <div class="natureWrap">
         <span class="title"><span class="star">*</span>随车小轮个数</span>
-        <radio-group @change="wheelChange"  class="flexWrap">
-          <label class="flexWrap labelWrap2" v-for="(item, index) in tyreOptions" :key="item.value">
-            <div class="flexWrap center"><radio :value="item.value" :checked="(index*2) === Number(form.wheelNum)" />{{item.name}}</div>
-          </label>
-        </radio-group>
+        <van-radio-group v-model="form.wheelNum" class="flexWrap">
+          <van-radio v-for="item in tyreOptions" :key="item.value"  :name="item.value" >{{item.name}}</van-radio>
+        </van-radio-group>
       </div>
     </div>
     <div class="carInfo" v-if="type != 'simple'">
@@ -132,29 +127,36 @@
       </div>
     </div>
     <fixed-button @myClick="clickHandler" v-if="showFun()" :noBg="true"></fixed-button>
-<!--    <protocol-dialog></protocol-dialog>-->
+    <van-popup
+        v-model="areaShow"
+        position="bottom"
+    >
+      <van-area title="标题" :area-list="areaList" :columns-num="3"  closeable="true" :value="form.areaCode ? String(form.areaCode) : ''"
+                @cancel="areaShow = false" @confirm="confirmHandle"/>
+    </van-popup>
   </div>
 </template>
 
 <script>
-  // import protocolDialog from "./component/protocolDialog";
   import fixedButton from "./component/fixedButton";
   import photoItem from "./component/photoItem";
   import tipBar from "./component/tipBar";
   import { ocrRecognize, driverInfoVerify, driverInfoVerifyDetail } from '@/api/authentication.js'
   import { leftCopy } from '@/utils/common.js'
   import { myMixins } from '@/utils/myMixins.js'
+  import {areaList} from "@vant/area-data";
   export default {
     name: "carInfoAudit",
     components: {
       tipBar,
       photoItem,
       fixedButton,
-      // protocolDialog
     },
     mixins: [myMixins],
     data() {
       return {
+        areaList: areaList,
+        areaShow:false,
         region: [],
         driveFront: require('@/assets/authentication/carInfo_icon1.png'),
         driveBack: require('@/assets/authentication/carInfo_icon2.png'),
@@ -205,21 +207,20 @@
 
     },
     methods: {
-      bindRegionChange(e){
-        this.region=e?.detail?.value
-        let code=e?.detail?.code
+      confirmHandle(val){
+        this.region=[]
+        val?.forEach(item => this.region.push(item.name))
+        let code=[]
+        val?.forEach(item => code.push(item.code))
         this.form.areaCode=code[code.length - 1]
+        this.areaShow=false
       },
-      radioChange(val){
-        this.form.businessNature=val?.detail?.value
+      radioChange(){
         if(this.form.businessNature==1){
           this.region=[]
           this.form.areaCode=''
         }
       },
-      wheelChange(val){
-        this.form.wheelNum=val?.detail?.value
-      },
       async getDetail() {   // 认证详情
         let res = await driverInfoVerifyDetail( {
           verifyType: 3
@@ -230,13 +231,10 @@
           this.region=res?.data?.vehicleInfoData?.region
           if(this.region[0].includes('市')){
             this.region?.unshift(this.region[0])
-            // console.log('第一个包含市')
           }
         }else {
           this.region=[]
         }
-        // this.form.hasInsurancePhoto=1
-        // this.form.carrierLiabilityInsurancePhoto=['http://file.sino-assist.com/group1/M00/07/78/wKgBzGij5QSAFO1hAAEBNU8G9Ww026.jpg?date=2025-08-19','http://file.sino-assist.com/group1/M00/07/78/wKgBzGij5QqADCNWAAZMtM4Se54125.png?date=2025-08-19']
       },
       async clickHandler() {
         if( this.type != 'simple' ) {
@@ -381,6 +379,8 @@
   }
   .content {
     /*padding-bottom: 86px;*/
+    height: 100%;
+    overflow-y: auto;
   }
   .carInfo .title {
     width: 100% !important;
@@ -413,21 +413,10 @@
     }
     .flexWrap{
       display:flex;
-    }
-    .labelWrap1{
-      margin-left: 10px;
-    }
-    .labelWrap2{
-      margin-left: 15px;
-    }
-    radio{
-      width: 24px;
-      transform: scale(0.7);
-      transform-origin: center; /* 保持中心点不变 */
-    }
-    .center{
       align-items: center;
-      justify-content: center;
     }
   }
+  ::v-deep .van-radio__icon{
+    transform: scale(0.8) !important;
+  }
 </style>