feat(logistics): 添加省市选择功能并优化样式

- 移除多余的目的地行，合并为一个省市选择框
- 更新省市选择框的样式和交互逻辑
- 添加获取省市选项的 API 接口
- 优化表单验证，确保省市必填

assets/css/logistics/index.scss

@@ -32,26 +32,24 @@
       text-align: right;
     }
 
-    .destination-row {
-      width: 100%;
-      justify-content: flex-end;
-      gap: 18rpx;
-    }
-
     .destination-select {
-      width: 168rpx;
+      width: 100%;
       height: 64rpx;
-      padding: 0 16rpx;
-      border: 1rpx solid #dcdfe6;
-      border-radius: 4rpx;
+      justify-content: flex-end;
       background: #ffffff;
       box-sizing: border-box;
     }
 
     .destination-placeholder {
-      font-size: 24rpx;
+      font-size: 30rpx;
       color: #c0c4cc;
     }
+
+    .destination-value {
+      font-size: 30rpx;
+      color: #303133;
+      margin-right: 8rpx;
+    }
   }
 
   .error-tip {

pages/logistics/index.vue

@@ -29,15 +29,9 @@
                     <u-icon slot="right" name="arrow-down" color="#c0c4cc"></u-icon>
                 </u-form-item>
                 <u-form-item label="车辆目的地" prop="destination" required>
-                    <view class="destination-row row">
-                        <view class="destination-select row verCenter bothSide" @click="showTodoToast">
-                            <text class="destination-placeholder">请选择省</text>
-                            <u-icon name="arrow-down" color="#c0c4cc" size="24"></u-icon>
-                        </view>
-                        <view class="destination-select row verCenter bothSide" @click="showTodoToast">
-                            <text class="destination-placeholder">请选择市</text>
-                            <u-icon name="arrow-down" color="#c0c4cc" size="24"></u-icon>
-                        </view>
+                    <view class="destination-select row verCenter bothSide" @click="openRegionPicker">
+                        <text :class="regionName ? 'destination-value' : 'destination-placeholder'">{{ regionName || '请选择省市' }}</text>
+                        <u-icon name="arrow-down" color="#c0c4cc" size="24"></u-icon>
                     </view>
                 </u-form-item>
             </view>
@@ -62,6 +56,8 @@
         <u-action-sheet :show="showTypePicker" :actions="typeOptions" title="选择申请类型" @close="showTypePicker = false" @select="onTypeSelect"></u-action-sheet>
 
         <u-action-sheet :show="showVehiclePicker" :actions="vehicleOptions" title="选择车辆类型" @close="showVehiclePicker = false" @select="onVehicleSelect"></u-action-sheet>
+
+        <u-picker :show="showRegionPicker" ref="regionPicker" title="选择省市" keyName="name" :columns="regionColumns" :loading="regionLoading" :visibleItemCount="10" @close="showRegionPicker = false" @cancel="showRegionPicker = false" @change="onRegionChange" @confirm="onRegionConfirm"></u-picker>
     </view>
 </template>
 
@@ -86,6 +82,8 @@
                 errorMsg: '',
                 showTypePicker: false,
                 showVehiclePicker: false,
+                showRegionPicker: false,
+                regionLoading: false,
                 typeOptions: [
                     { name: '物流车辆申请', value: 13 }
                 ],
@@ -93,9 +91,25 @@
                     { name: '货拉拉', value: 'huolala' },
                     { name: '公司车辆', value: 'company' },
                     { name: '其它', value: 'other' }
-                ]
+                ],
+                regionColumns: [[], []],
+                cityOptionsMap: {}
             };
         },
+        computed: {
+            /**
+             * 省市展示名称
+             * @return {string} 省市名称
+             */
+            regionName() {
+                if (!this.form.province || !this.form.city) return '';
+
+                return `${this.form.province} ${this.form.city}`;
+            }
+        },
+        onLoad() {
+            this.getProvinceOptions();
+        },
         methods: {
             /**
              * 选择申请类型
@@ -119,6 +133,142 @@
             },
 
             /**
+             * 获取省份选项
+             * @return {void}
+             */
+            getProvinceOptions() {
+                this.getRegionOptions(1).then(options => {
+                    this.regionColumns = [options, []];
+                });
+            },
+
+            /**
+             * 获取省市选项
+             * @param {number|string} id - 上级地区ID
+             * @return {Promise<Array>} 省市选项
+             */
+            getRegionOptions(id) {
+                return this.request(API.regionOption, 'GET', { id }, false).then(res => {
+                    if (res.code === 0) {
+                        return this.formatRegionOptions(res.data);
+                    }
+
+                    uni.showToast({
+                        title: res.msg || '获取省市失败',
+                        icon: 'none'
+                    });
+                    return [];
+                });
+            },
+
+            /**
+             * 格式化省市接口数据
+             * @param {Object} regionMap - 省市接口返回对象
+             * @return {Array} 选择器选项
+             */
+            formatRegionOptions(regionMap) {
+                if (!regionMap) return [];
+
+                return Object.keys(regionMap).map(key => ({
+                    name: regionMap[key],
+                    value: key
+                }));
+            },
+
+            /**
+             * 打开省市选择
+             * @return {void}
+             */
+            openRegionPicker() {
+                var provinceOptions = this.regionColumns[0];
+
+                if (!provinceOptions.length) {
+                    uni.showToast({
+                        title: '省市加载中',
+                        icon: 'none'
+                    });
+                    this.getProvinceOptions();
+                    return;
+                }
+
+                this.showRegionPicker = true;
+
+                if (this.regionColumns[1].length > 0) {
+                    return;
+                }
+
+                this.regionLoading = true;
+                this.getCityOptions(provinceOptions[0].value).then(options => {
+                    this.regionColumns = [provinceOptions, options];
+                    this.regionLoading = false;
+                }).catch(() => {
+                    this.regionLoading = false;
+                });
+            },
+
+            /**
+             * 获取城市选项
+             * @param {number|string} provinceId - 省份ID
+             * @return {Promise<Array>} 城市选项
+             */
+            getCityOptions(provinceId) {
+                if (this.cityOptionsMap[provinceId]) {
+                    return Promise.resolve(this.cityOptionsMap[provinceId]);
+                }
+
+                return this.getRegionOptions(provinceId).then(options => {
+                    this.cityOptionsMap = {
+                        ...this.cityOptionsMap,
+                        [provinceId]: options
+                    };
+                    return options;
+                });
+            },
+
+            /**
+             * 省市选择变化
+             * @param {Object} event - 选择器变化事件
+             * @return {void}
+             */
+            onRegionChange(event) {
+                if (event.columnIndex !== 0) return;
+
+                var province = event.value[0];
+                var picker = event.picker || this.$refs.regionPicker;
+
+                if (!province) return;
+
+                this.regionLoading = true;
+                this.getCityOptions(province.value).then(options => {
+                    picker.setColumnValues(1, options);
+                    this.regionLoading = false;
+                }).catch(() => {
+                    this.regionLoading = false;
+                });
+            },
+
+            /**
+             * 确认省市选择
+             * @param {Object} event - 选择器确认事件
+             * @return {void}
+             */
+            onRegionConfirm(event) {
+                var [province, city] = event.value;
+
+                if (!province || !city) {
+                    uni.showToast({
+                        title: '请选择省市',
+                        icon: 'none'
+                    });
+                    return;
+                }
+
+                this.form.province = province.name;
+                this.form.city = city.name;
+                this.showRegionPicker = false;
+            },
+
+            /**
              * 金额格式化，限制最多两位小数
              * @param {string} value - 输入金额
              * @return {string} 格式化后的金额
@@ -163,22 +313,11 @@
             }, 500),
 
             /**
-             * 展示省市暂未接入提示
-             * @return {void}
-             */
-            showTodoToast() {
-                uni.showToast({
-                    title: '省市选择暂未接入',
-                    icon: 'none'
-                });
-            },
-
-            /**
              * 校验表单
              * @return {boolean} 是否校验通过
              */
             validateForm() {
-                var { apply_type, order_sn, customer_name, freight_amount, vehicle_type, reason } = this.form;
+                var { apply_type, order_sn, customer_name, freight_amount, vehicle_type, province, city, reason } = this.form;
                 var rules = [
                     { invalid: !apply_type, msg: '请选择申请类型' },
                     { invalid: !order_sn, msg: '请输入订单号' },
@@ -186,6 +325,8 @@
                     { invalid: !freight_amount, msg: '请输入车费金额' },
                     { invalid: isNaN(freight_amount) || Number(freight_amount) <= 0, msg: '请输入有效的车费金额' },
                     { invalid: !vehicle_type, msg: '请选择车辆类型' },
+                    { invalid: !province, msg: '请选择省' },
+                    { invalid: !city, msg: '请选择市' },
                     { invalid: !reason, msg: '请输入详细原因' }
                 ];
                 var failedRule = rules.find(rule => rule.invalid);

util/api.js

@@ -50,6 +50,10 @@ console.log(`[环境] ${envText}`);
 
 const API = {
   /**
+   * 获取省市
+   */
+  regionOption: API_BASE + '/ajax/regionOption',
+  /**
    * 登录接口
    */
   login: API_BASE_USER + '/api/login',