代码提交

pages/createAddress/createAddress.vue

@@ -13,14 +13,19 @@
           <view class="list-label w-158">
             收货地址
           </view>
-          <view class="list-content">
-            <city-select
-                ref="cityselect"
-                :defaultValue="defaultAddress"
-                @callback="result"
-                :items="main.areaList"
-            ></city-select>
-
+          <view
+              class="list-content"
+              @click="handleChooseAddress"
+          >
+            <template v-if="addressData.address.cityId">
+              {{ addressData.address.province }} {{ addressData.address.city }} {{ addressData.address.district }}
+            </template>
+            <template v-else>
+              <span class="chooise">
+              点击选择
+                <uv-icon name="arrow-right"></uv-icon>
+              </span>
+            </template>
           </view>
         </view>
       </view>
@@ -34,7 +39,7 @@
                 type="text"
                 placeholder="请输入详细地址"
                 v-model="addressData.detail"
-            >
+            />
 
           </view>
         </view>
@@ -49,7 +54,7 @@
                 type="text"
                 placeholder="请输入姓名"
                 v-model="addressData.realName"
-            >
+            />
 
           </view>
         </view>
@@ -64,7 +69,7 @@
                 type="number"
                 placeholder="请输入电话"
                 v-model="addressData.phone"
-            >
+            />
           </view>
         </view>
       </view>
@@ -89,37 +94,45 @@
           @click="onSave"
       ></uv-button>
     </view>
-
+    <uv-picker
+        ref="addressPickerRef"
+        :columns="columns"
+        keyName="name"
+        @change="handlePickerChange"
+        @confirm="handlePickerConfirm"
+    ></uv-picker>
   </layout>
 </template>
 
 <script setup>
-import { ref, watch } from 'vue'
+import { computed, nextTick, onMounted, ref, unref, watch } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
 import { useMainStore } from '@/store/store'
 import { getAddressAddAndEdit, getAddressDel, } from '@/api/address'
 import { useRouter } from "@/hooks/useRouter";
+import { storeToRefs } from "pinia";
+import UvPicker from "@/uni_modules/uv-picker/components/uv-picker/uv-picker.vue";
 
 const main = useMainStore()
 const {getParams, push, goBack} = useRouter()
 
-
-const areaList = ref(main.areaList)
+const {areaList, address} = storeToRefs(main)
+// const areaList = ref(main.areaList)
 const title = ref('')
 
 const editId = ref('')
-const defaultAddress = ref('')
 
 const addressData = ref({
-  "realName": '',
-  "postCode": '',
-  "isDefault": false,
-  "detail": '',
-  "phone": '',
-  "cityId": '',
-  "city": '',
-  "district": '',
-  "province": '',
+  realName: undefined,
+  phone: undefined,
+  detail: undefined,
+  isDefault: undefined,
+  address: {
+    cityId: undefined,
+    city: undefined,
+    district: undefined,
+    province: undefined,
+  }
 });
 
 const isDefaultList = ref([])
@@ -188,9 +201,9 @@ const onSave = async () => {
     uni.hideLoading()
     main.restAddress()
     if (actionType.value == 'select') {
-      push({url: '/pages/address/address'}, {data: {type: 'select'}})
+      push({url: '/pages/address/address'}, {data: {type: 'select'},type:'redirectTo'})
     } else {
-      push({url: '/pages/address/address'})
+      goBack()
     }
   } catch (error) {
     console.log(error, 'err')
@@ -218,38 +231,72 @@ const result = (values) => {
   }
 }
 
-watch(() => main.areaList, (next) => {
-  areaList.value = next
+const addressPickerRef = ref()
+const provinces = ref([])
+const citys = ref([])
+const areas = ref([])
+const pickerValue = ref([0, 0, 0])
+const defaultValue = ref([0, 0, 0])
+
+const columns = computed(() => {
+  return [
+    provinces.value, citys.value, areas.value
+  ]
 })
 
-watch(() => main.address, (next) => {
-  let data = next.filter(item => item.id == editId.value)[0]
-  if (!data) return
-  addressData.value = {
-    realName: data.realName,
-    phone: data.phone,
-    detail: data.detail,
-    isDefault: data.isDefault ? 1 : 0,
-    address: {
-      cityId: data.cityId,
-      district: data.district,
-      province: data.province,
-      city: data.city
-    }
+function handleSetDefaultColumns() {
+  console.log(addressPickerRef.value)
+  pickerValue.value[0] = provinces.value.findIndex((item, index) => index === defaultValue.value[0])
+  citys.value = provinces.value[pickerValue.value[0]].children || []
+  pickerValue.value[1] = citys.value.findIndex((item, index) => index === defaultValue.value[1])
+  areas.value = citys.value[pickerValue.value[1]].children || []
+  pickerValue.value[2] = areas.value.findIndex((item, index) => index === defaultValue.value[2])
+  // 重置下位置
+  // addressPickerRef.value.setColumnValues(0,provinces.value)
+  // addressPickerRef.value.setColumnValues(1,citys.value)
+  // addressPickerRef.value.setColumnValues(2,areas.value)
+  nextTick(() => {
+    addressPickerRef.value.setIndexs([pickerValue.value[0], pickerValue.value[1], pickerValue.value[2]], true);
+    console.log('设置完毕')
+  })
+}
+
+function handlePickerChange(e) {
+  const {columnIndex, index, indexs} = e
+  // 改变了省
+  if (columnIndex === 0) {
+    citys.value = provinces.value[index]?.children || []
+    areas.value = citys.value[0]?.children || []
+    addressPickerRef.value.setIndexs([index, 0, 0], true)
+  } else if (columnIndex === 1) {
+    areas.value = citys.value[index]?.children || []
+    addressPickerRef.value.setIndexs(indexs, true)
   }
-  isDefaultList.value = data.isDefault ? ['isDefault'] : [],
-      defaultAddress.value = {
-        province: {
-          name: data.province
-        },
-        city: {
-          name: data.city
-        },
-        district: {
-          name: data.district
-        }
-      }
-})
+}
+
+function handlePickerConfirm(e) {
+  const {indexs, value} = e
+  defaultValue.value = indexs
+  addressData.value.address = {
+    province: value[0].name || '',
+    city: value[1].name || '',
+    district: value[2].name || '',
+    cityId: value[1].id,
+  }
+}
+
+function handleFindDefault(data) {
+  const provinceIndex = areaList.value.findIndex(item => item.name === data.province);
+  const cityIndex = areaList.value[provinceIndex].children.findIndex(item => item.name === data.city);
+  const areasIndex = areaList.value[provinceIndex].children[cityIndex].children.findIndex(item => item.name === data.district);
+  defaultValue.value = [provinceIndex, cityIndex, areasIndex]
+}
+
+function handleChooseAddress() {
+  provinces.value = areaList.value
+  handleSetDefaultColumns()
+  unref(addressPickerRef).open()
+}
 
 onLoad(async (options) => {
   const params = getParams(options)
@@ -260,7 +307,7 @@ onLoad(async (options) => {
   if (id) {
     editId.value = id
     title.value = '编辑地址'
-    let data = main.address.filter(item => item.id == id)[0]
+    let data = address.value.filter(item => item.id == id)[0]
     if (!data) return
     addressData.value = {
       realName: data.realName,
@@ -274,24 +321,15 @@ onLoad(async (options) => {
         province: data.province,
       }
     }
-    defaultAddress.value = {
-      province: {
-        name: data.province
-      },
-      city: {
-        name: data.city
-      },
-      district: {
-        name: data.district
-      }
-    }
+    // 设置默认选择
+    handleFindDefault(data)
     isDefaultList.value = data.isDefault ? ['isDefault'] : []
   } else {
     title.value = '新增地址'
-
   }
 })
-
+onMounted(() => {
+})
 </script>
 
 <style lang="scss">
@@ -306,4 +344,9 @@ onLoad(async (options) => {
 .w-158 {
   flex: 0 0 158rpx;
 }
+
+.chooise {
+  @include useFlex(space-between, center);
+  color: #999;
+}
 </style>