新增地址选择组件给身份证地址使用

hookehuyr
Commit d339e101609befa374c2502facd5d5996bd27322 d339e101 1 parent e206b69e
Showing 8 changed files with 162 additions and 17 deletions
components.d.ts
package.json
pnpm-lock.yaml
src/app.less
src/components/AddressSelector.vue
src/pages/collectionSettings/index.less
src/pages/collectionSettings/index.vue
src/stores/user.js
--- a/components.d.ts
View file @d339e10
+++ b/components.d.ts
View file @d339e10
@@ -7,6 +7,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
+    AddressSelector: typeof import('./src/components/AddressSelector.vue')['default']
     BannerSwiper: typeof import('./src/components/BannerSwiper.vue')['default']
     BrandModelPicker: typeof import('./src/components/BrandModelPicker.vue')['default']
     FeaturedRecommendations: typeof import('./src/components/FeaturedRecommendations.vue')['default']
@@ -15,6 +16,7 @@ declare module 'vue' {
     NavBar: typeof import('./src/components/navBar.vue')['default']
     NutActionSheet: typeof import('@nutui/nutui-taro')['ActionSheet']
     NutButton: typeof import('@nutui/nutui-taro')['Button']
+    NutCascader: typeof import('@nutui/nutui-taro')['Cascader']
     NutCheckbox: typeof import('@nutui/nutui-taro')['Checkbox']
     NutCol: typeof import('@nutui/nutui-taro')['Col']
     NutConfigProvider: typeof import('@nutui/nutui-taro')['ConfigProvider']
--- a/package.json
View file @d339e10
+++ b/package.json
View file @d339e10
@@ -37,6 +37,7 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.7.7",
+    "@nutui/icons-vue": "^0.1.1",
     "@nutui/icons-vue-taro": "^0.0.9",
     "@nutui/nutui-taro": "^4.3.13",
     "@tarojs/components": "4.1.2",
@@ -55,6 +56,7 @@
     "@tarojs/shared": "4.1.2",
     "@tarojs/taro": "4.1.2",
     "axios-miniprogram": "^2.7.2",
+    "element-china-area-data": "^6.1.0",
     "pinia": "^3.0.3",
     "taro-plugin-pinia": "^1.0.0",
     "vue": "^3.3.0"
--- a/pnpm-lock.yaml 0 → 100644
View file @d339e10
+++ b/pnpm-lock.yaml 0 → 100644
View file @d339e10
--- a/src/app.less
View file @d339e10
+++ b/src/app.less
View file @d339e10
@@ -47,6 +47,12 @@ button::after {
     color: #9ca3af;
 }
+/* 覆盖 NutUI Tabs 组件的 width: 0 样式 */
+.nut-tabs.horizontal .nut-sticky__box > .nut-tabs__titles .nut-tabs__titles-item,
+.nut-tabs.horizontal > .nut-tabs__titles .nut-tabs__titles-item {
+    width: auto !important;
+}
+
 .bg-orange-400 {
     background-color: #fb923c;
 }
--- a/src/components/AddressSelector.vue 0 → 100644
View file @d339e10
+++ b/src/components/AddressSelector.vue 0 → 100644
View file @d339e10
--- a/src/pages/collectionSettings/index.less
View file @d339e10
+++ b/src/pages/collectionSettings/index.less
View file @d339e10
@@ -474,3 +474,32 @@
   font-size: 28rpx;
   margin-right: 8rpx;
 }
+
+// 地址选择器触发器样式
+.address-selector {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 24rpx 32rpx;
+  border: 1px solid #e5e7eb;
+  border-radius: 24rpx;
+  background-color: white;
+  min-height: 96rpx;
+  transition: all 0.2s ease;
+
+  &:active {
+    background-color: #f9fafb;
+  }
+
+  .address-text {
+    font-size: 28rpx;
+    color: #9ca3af;
+    flex: 1;
+    line-height: 1.6;
+    word-break: break-all;
+
+    &.address-selected {
+      color: #111827;
+    }
+  }
+}
--- a/src/pages/collectionSettings/index.vue
View file @d339e10
+++ b/src/pages/collectionSettings/index.vue
View file @d339e10
 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-08-08 13:58:13
+ * @LastEditTime: 2025-08-12 17:05:50
  * @FilePath: /jgdl/src/pages/collectionSettings/index.vue
  * @Description: 收款设置
 -->
@@ -32,9 +32,9 @@
         </view>
         <view class="setting-right">
           <text class="setting-status"
-            :class="{ 'status-set': identityInfo.userName && identityInfo.idCard && identityInfo.idcard_1_img && identityInfo.idcard_2_img && identityInfo.idcard_effect_begin && identityInfo.idcard_effect_end && identityInfo.idcard_address }">
+            :class="{ 'status-set': identityInfo.userName && identityInfo.idCard && identityInfo.idcard_1_img && identityInfo.idcard_2_img && identityInfo.idcard_effect_begin && identityInfo.idcard_effect_end && (identityInfo.idcard_province && identityInfo.idcard_city && identityInfo.idcard_district && identityInfo.idcard_address) }">
             {{ identityInfo.userName && identityInfo.idCard && identityInfo.idcard_1_img && identityInfo.idcard_2_img &&
-              identityInfo.idcard_effect_begin && identityInfo.idcard_effect_end && identityInfo.idcard_address ? '已设置' :
+              identityInfo.idcard_effect_begin && identityInfo.idcard_effect_end && (identityInfo.idcard_province && identityInfo.idcard_city && identityInfo.idcard_district && identityInfo.idcard_address) ? '已设置' :
             '未设置' }}
           </text>
           <!-- <text class="arrow">></text> -->
@@ -194,8 +194,16 @@
           <!-- 身份证地址 -->
           <view class="form-item">
             <text class="form-label"><text class="required-mark">*</text>身份证地址</text>
-            <textarea v-model="tempIdentityInfo.idcard_address" placeholder="请输入身份证地址" class="form-input native-input"
+            <!-- 地址选择器触发器 -->
-              :cursor-spacing="50" />
+            <view
+              class="address-selector"
+              @click="showAddressSelector = true"
+            >
+              <text class="address-text" :class="{ 'address-selected': addressData.full_address }">
+                {{ addressData.full_address || '请选择省市县并填写详细地址' }}
+              </text>
+              <RectRight color="#999" size="10" />
+            </view>
           </view>
         </view>
@@ -204,7 +212,7 @@
             关闭
           </nut-button>
           <nut-button type="primary" @click="saveIdentityInfo" color="#ffa500"
-            :disabled="!tempIdentityInfo.userName || !tempIdentityInfo.idCard || !tempIdentityInfo.idcard_1_img || !tempIdentityInfo.idcard_2_img || !tempIdentityInfo.idcard_effect_begin || !tempIdentityInfo.idcard_effect_end || !tempIdentityInfo.idcard_address || !!idCardError"
+            :disabled="!tempIdentityInfo.userName || !tempIdentityInfo.idCard || !tempIdentityInfo.idcard_1_img || !tempIdentityInfo.idcard_2_img || !tempIdentityInfo.idcard_effect_begin || !tempIdentityInfo.idcard_effect_end || !tempIdentityInfo.idcard_province || !tempIdentityInfo.idcard_city || !tempIdentityInfo.idcard_district || !tempIdentityInfo.idcard_address || !!idCardError"
             class="footer-btn footer-btn-save">
             保存
           </nut-button>
@@ -234,6 +242,15 @@
     <view v-if="showBackButton" class="fixed-back-btn" @click="goBack">
       <text class="back-text">返回</text>
     </view>
+
+    <!-- 地址选择器组件 -->
+    <AddressSelector
+      v-model:visible="showAddressSelector"
+      v-model="addressData"
+      @change="onAddressChange"
+      placeholder="请选择省市县并填写详细地址"
+    />
+
   </view>
 </template>
@@ -252,6 +269,9 @@ import BASE_URL from '@/utils/config'
 // 导入用户状态管理
 import { useUserStore } from '@/stores/user'
+// 导入地址选择组件
+import AddressSelector from '@/components/AddressSelector.vue'
+
 // 获取页面参数
 const instance = Taro.getCurrentInstance()
 const { target } = instance.router?.params || {}
@@ -308,6 +328,14 @@ const tempIdentityInfo = ref({
   idcard_2_img: '',
   idcard_effect_begin: '',
   idcard_effect_end: '',
+  // 身份证地址相关字段（显示用中文名称）
+  province: '',
+  city: '',
+  county: '',
+  // 身份证地址相关字段（提交用真实字段名）
+  idcard_province: '',
+  idcard_city: '',
+  idcard_district: '',
   idcard_address: ''
 });
@@ -320,6 +348,7 @@ const showBankModal = ref(false);
 const showIdcardBeginDate = ref(false);
 const showIdcardEndDate = ref(false);
 const showEndDateTypeModal = ref(false);
+const showAddressSelector = ref(false);
 /**
  * 身份证号码错误信息
@@ -418,6 +447,14 @@ const getUserInfo = async () => {
           idcard_2_img: userInfo.idcard_2_img || '',
           idcard_effect_begin: userInfo.idcard_effect_begin || '',
           idcard_effect_end: userInfo.idcard_effect_end || '',
+          // 地址字段（用于显示的中文名称）
+          province: userInfo.province_name || '',
+          city: userInfo.city_name || '',
+          county: userInfo.county_name || userInfo.district_name || '',
+          // 身份证地址字段（真实字段名）
+          idcard_province: userInfo.idcard_province || '',
+          idcard_city: userInfo.idcard_city || '',
+          idcard_district: userInfo.idcard_district || '',
           idcard_address: userInfo.idcard_address || ''
         };
       }
@@ -620,10 +657,28 @@ const saveAccountInfo = async () => {
 const openIdentityModal = () => {
   tempIdentityInfo.value = { ...identityInfo.value };
   idCardError.value = '';
+  // 初始化地址选择器数据
+  initAddressData();
   showIdentityModal.value = true;
 };
 /**
+ * 初始化地址选择器数据
+ */
+const initAddressData = () => {
+  addressData.value = {
+    province: tempIdentityInfo.value.province || '',
+    city: tempIdentityInfo.value.city || '',
+    county: tempIdentityInfo.value.county || '',
+    province_code: tempIdentityInfo.value.idcard_province || '',
+    city_code: tempIdentityInfo.value.idcard_city || '',
+    county_code: tempIdentityInfo.value.idcard_district || '',
+    detail_address: tempIdentityInfo.value.idcard_address || '',
+    full_address: (tempIdentityInfo.value.province + tempIdentityInfo.value.city + tempIdentityInfo.value.county + tempIdentityInfo.value.idcard_address) || ''
+  }
+};
+
+/**
  * 关闭身份信息弹窗
  */
 const closeIdentityModal = () => {
@@ -635,6 +690,12 @@ const closeIdentityModal = () => {
     idcard_2_img: '',
     idcard_effect_begin: '',
     idcard_effect_end: '',
+    province: '',
+    city: '',
+    county: '',
+    idcard_province: '',
+    idcard_city: '',
+    idcard_district: '',
     idcard_address: ''
   };
   idCardError.value = '';
@@ -995,6 +1056,10 @@ const saveIdentityInfo = async () => {
       idcard_2_img: tempIdentityInfo.value.idcard_2_img,
       idcard_effect_begin: tempIdentityInfo.value.idcard_effect_begin,
       idcard_effect_end: tempIdentityInfo.value.idcard_effect_end,
+      // 使用真实的身份证地址字段名
+      idcard_province: tempIdentityInfo.value.idcard_province,
+      idcard_city: tempIdentityInfo.value.idcard_city,
+      idcard_district: tempIdentityInfo.value.idcard_district,
       idcard_address: tempIdentityInfo.value.idcard_address
     });
@@ -1009,6 +1074,10 @@ const saveIdentityInfo = async () => {
         idcard_2_img: tempIdentityInfo.value.idcard_2_img,
         idcard_effect_begin: tempIdentityInfo.value.idcard_effect_begin,
         idcard_effect_end: tempIdentityInfo.value.idcard_effect_end,
+        // 身份证地址字段
+        idcard_province: tempIdentityInfo.value.idcard_province,
+        idcard_city: tempIdentityInfo.value.idcard_city,
+        idcard_district: tempIdentityInfo.value.idcard_district,
         idcard_address: tempIdentityInfo.value.idcard_address
       });
@@ -1041,6 +1110,32 @@ const goBack = () => {
     url: '/pages/sell/index'
   });
 };
+
+// 地址选择相关状态
+const addressData = ref({
+  province: '',
+  city: '',
+  county: '',
+  detail_address: '',
+  full_address: ''
+})
+
+/**
+ * 地址变化处理回调
+ * @param {Object} address - 地址数据对象
+ */
+const onAddressChange = (address) => {
+  // 更新临时身份信息中的地址字段（中文名称，用于显示）
+  tempIdentityInfo.value.province = address.province
+  tempIdentityInfo.value.city = address.city
+  tempIdentityInfo.value.county = address.county
+
+  // 更新身份证地址字段（真实字段名，用于提交）
+  tempIdentityInfo.value.idcard_province = address.province_code || address.province
+  tempIdentityInfo.value.idcard_city = address.city_code || address.city
+  tempIdentityInfo.value.idcard_district = address.county_code || address.county
+  tempIdentityInfo.value.idcard_address = address.detail_address
+}
 </script>
 <script>
--- a/src/stores/user.js
View file @d339e10
+++ b/src/stores/user.js
View file @d339e10
 /*
  * @Date: 2025-01-08 18:00:00
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-08-07 21:50:44
+ * @LastEditTime: 2025-08-12 16:36:02
  * @FilePath: /jgdl/src/stores/user.js
  * @Description: 用户状态管理
  */
@@ -34,6 +34,10 @@ export const useUserStore = defineStore('user', {
                 idcard_2_img: '',
                 idcard_effect_begin: '',
                 idcard_effect_end: '',
+                // 身份证地址字段
+                idcard_province: '',
+                idcard_city: '',
+                idcard_district: '',
                 idcard_address: '',
                 division_agree_pic: '',
             },
@@ -55,16 +59,19 @@ export const useUserStore = defineStore('user', {
          */
         hasCompleteCollectionInfo: (state) => {
             return !!(
-                state.userInfo.bank_id && state.userInfo.bank_id &&
+                state.userInfo.bank_id &&
-                state.userInfo.bank_no && state.userInfo.bank_no &&
+                state.userInfo.bank_no &&
-                state.userInfo.bank_img && state.userInfo.bank_img &&
+                state.userInfo.bank_img &&
-                state.userInfo.idcard_1_img && state.userInfo.idcard_1_img &&
+                state.userInfo.idcard_1_img &&
-                state.userInfo.idcard_2_img && state.userInfo.idcard_2_img &&
+                state.userInfo.idcard_2_img &&
-                state.userInfo.name && state.userInfo.name &&
+                state.userInfo.name &&
-                state.userInfo.idcard && state.userInfo.idcard &&
+                state.userInfo.idcard &&
-                state.userInfo.idcard_address && state.userInfo.idcard_address &&
+                state.userInfo.idcard_province &&
-                state.userInfo.idcard_effect_begin && state.userInfo.idcard_effect_begin &&
+                state.userInfo.idcard_city &&
-                state.userInfo.idcard_effect_end && state.userInfo.idcard_effect_end
+                state.userInfo.idcard_district &&
+                state.userInfo.idcard_address &&
+                state.userInfo.idcard_effect_begin &&
+                state.userInfo.idcard_effect_end
             )
         },
@@ -142,6 +149,10 @@ export const useUserStore = defineStore('user', {
                 idcard_2_img: '',
                 idcard_effect_begin: '',
                 idcard_effect_end: '',
+                // 身份证地址字段
+                idcard_province: '',
+                idcard_city: '',
+                idcard_district: '',
                 idcard_address: '',
                 division_agree_pic: '',
             }