fix: 优化提交订单页面js警告，充值订单跳转bug以及其他bug。refactor: 重构地址选择

pages/address/address.vue

@@ -1,178 +1,144 @@
 <template>
-  <layout>
-
-    <Header :scroll-top="scrollTop">
-      {{ title }}
-    </Header>
-
-    <view class="addressList">
-      <template v-if=" main.address.length>0">
-        <uv-swipe-action>
-          <uv-swipe-action-item
-              v-for="(item, index) in main.address"
-              :key="index"
-              :options="options"
-              @click="showModal( item)"
-          >
-            <view
-                :class="{ address: true, noBorder: index == 0 }"
-                @tap="handleClick(item)"
-            >
-              <view class="address-main">
-                <view class="address-header">
-                  <view class="address-name">{{ item.realName }}</view>
-                  <view class="address-phone">{{ item.phone }}</view>
-                </view>
-                <view class="address-content">
-                  <view
-                      class="address-default"
-                      v-if="item.isDefault"
-                  >
-                    <uv-tags
-                        text="默认"
-                        plain
-                        size="mini"
-                    ></uv-tags>
-                  </view>
-                  <view class="address-desc">{{ item.province }}-{{ item.city }}-{{ item.district }} {{
-                      item.detail
-                                             }}
-                  </view>
-                </view>
-              </view>
-              <view class="address-actions">
-                <view
-                    class="address-actions-edit"
-                    @tap.stop="goEditorAddress(item)"
-                >
-                  <image
-                      class="image"
-                      :src="addressEditIcon"
-                      alt=""
-                  ></image>
-                </view>
-              </view>
-            </view>
-          </uv-swipe-action-item>
-        </uv-swipe-action>
-      </template>
-      <Empty
-          :iconSrc="emptyAddressIcon"
-          v-else
+  <Header :scroll-top="scrollTop">
+    {{ pageTitle }}
+  </Header>
+  <view
+      class="address-list"
+      v-if="list.length>0">
+    <uv-swipe-action>
+      <uv-swipe-action-item
+          v-for="(item, index) in list"
+          :key="item.id"
+          :options="options"
+          @click="showModal( item)"
       >
-        您还没有新增地址~
-      </Empty>
+        <AddressItem
+            :address-item="item"
+            :border="index!==list.length - 1"
+            @edit="goEditorAddress"
+            @click="handleClick" />
+      </uv-swipe-action-item>
+    </uv-swipe-action>
+  </view>
+  <Empty
+      :iconSrc="emptyAddressIcon"
+      v-else
+  >
+    您还没有新增地址~
+  </Empty>
+  <view class="form-buttons">
+    <view class="btn">
+      <uv-button
+          round
+          block
+          type="primary"
+          @tap="goCreateAddress"
+      >
+        新增地址
+      </uv-button>
     </view>
-    <view class="form-buttons">
-      <view class="btn">
-        <uv-button
-            round
-            block
-            type="primary"
-            @tap="goCreateAddress"
-        >
-          新增地址
-        </uv-button>
-      </view>
-    </view>
-    <ReturnTop :scroll-top="scrollTop" />
-    <Modal
-        ref="modalRef"
-        content="确认要删除地址吗？"
-        @confirm="doDeleteRequest" />
-  </layout>
+  </view>
+  <ReturnTop :scroll-top="scrollTop" />
+  <Modal
+      ref="delModalRef"
+      content="确认要删除地址吗？"
+      @confirm="doDeleteRequest" />
 </template>
 
 <script setup>
-import { ref, unref } from 'vue'
-import { onLoad, onReachBottom } from '@dcloudio/uni-app'
-import { useMainStore } from '@/store/modules/useMainStore'
+import { ref, unref, computed } from 'vue'
+import { onLoad, onShow } from '@dcloudio/uni-app'
 import Empty from '@/components/Empty/index.vue'
-import { addressEditIcon, emptyAddressIcon } from "@/utils/images";
-import { getAddressDel, } from '@/api/address'
+import { emptyAddressIcon } from "@/utils/images";
+import { getAddressDel, getAddressList, } from '@/api/address'
 import { useRouter } from "@/hooks/useRouter";
 import Header from "@/components/Header/index.vue"
 import ReturnTop from "@/components/ReturnTop/index.vue";
 import { useScroll } from "@/hooks/useScroll";
 import Modal from "@/components/Modal/index.vue";
+import UvSwipeAction from "@/uni_modules/uv-swipe-action/components/uv-swipe-action/uv-swipe-action.vue";
+import UvSwipeActionItem from "@/uni_modules/uv-swipe-action/components/uv-swipe-action-item/uv-swipe-action-item.vue";
+import AddressItem from "@/pages/address/component/AddressItem.vue";
+import UvButton from "@/uni_modules/uv-button/components/uv-button/uv-button.vue";
+import { usePaging } from "@/hooks/usePaging";
+import { emitter } from "@/utils/emitter";
 
-const {push, goBack} = useRouter()
+// ================================= hooks =============================================
+const {push, goBack, getParams} = useRouter()
 const {scrollTop} = useScroll()
 
-const title = ref('')
-
-const main = useMainStore()
-const moreLoding = ref(true)
-const actionType = ref('')
-const page = ref(1)
-const selectCartId = ref(undefined)
+const actionType = ref(undefined) // 页面状态是选择还是管理 'select' | undefined
+const pageTitle = computed(() => actionType.value === 'select' ? '选择地址' : '地址管理') // 页面title
+// swipe配置
 const options = ref([{
-  text: '删除',
+  // text: '删 除',
+  icon: 'trash',
   style: {
     backgroundColor: '#EE6D46'
   }
 }])
 
-onReachBottom((e) => {
-  if (main.moreLoading) {
-    page.value = page.value + 1
-    main.getAddressList(page.value)
-  }
-})
-
-const goCreateAddress = () => {
-  let addressData = {};
-  if (actionType.value === 'select') {
-    addressData.type = 'select';
-  }
-  push({url: '/pages/createAddress/createAddress'}, {data: addressData})
-}
-
-const goEditorAddress = (address) => {
-  let addressData = {
-    id: address.id
-  };
-  if (actionType.value === 'select') {
-    addressData.type = 'select';
-  }
-  push({url: '/pages/createAddress/createAddress'}, {data: addressData})
-}
-
-const handleClick = (item) => {
-  if (actionType.value === 'select') {
-    main.setSelectAddress(item.id)
-    goBack()
-    // push({url: '/pages/submitOrder/submitOrder'}, {
-    //   data: {cartId: unref(selectCartId) || main.cartId},
-    //   type: 'redirectTo'
-    // })
-  }
-}
-
-const {getParams} = useRouter()
 onLoad((option) => {
-  main.restAddress()
-  const params = getParams(option)
-  params.cartId ? main.cartId = params.cartId : void (0)
-  if (params.type) {
-    actionType.value = params.type
-    title.value = '选择地址'
-    selectCartId.value = params.cartId
-  } else {
-    title.value = '地址管理'
-  }
-  main.getAddressList(page.value)
+  const params = getParams?.(option)
+  actionType.value = params?.type
 })
 
-const modalRef = ref()
-const prepareData = ref({})
+onShow(() => {
+  refreshPage?.()
+})
+// ============================== 用户地址列表相关 =================================
+const {list, refreshPage} = usePaging({
+  request: getAddressList,
+  // load: true
+});
+
+
+/**
+ * 去创建地址
+ */
+function goCreateAddress() {
+  push?.({url: '/pages/createAddress/createAddress'}, {
+    data: {
+      type: actionType.value
+    }
+  })
+}
+
+/**
+ * 去修改地址
+ * @param address
+ */
+function goEditorAddress(address) {
+  push?.({url: '/pages/createAddress/createAddress'}, {
+    data: {
+      type: actionType.value,
+      address
+    }
+  })
+}
+
+/**
+ * 处理选择状态下返回
+ * @param item
+ */
+function handleClick(item) {
+  if (actionType.value === 'select') {
+    emitter.emit('selectAddress', item)
+    goBack?.({delta: 1})
+  }
+}
+
+
+// ============================ 删除相关 ============================
+const delModalRef = ref()
+const prepareData = ref(undefined)
 
 /**
  * 打开弹窗
  */
 function showModal(data) {
   prepareData.value = data
-  unref(modalRef).show()
+  unref(delModalRef).show()
 }
 
 /**
@@ -180,110 +146,20 @@ function showModal(data) {
  */
 async function doDeleteRequest() {
   await getAddressDel(prepareData.value)
-  await main.restAddress()
-  await main.getAddressList(1)
-  if (main.selectAddress && prepareData.value.id === main.selectAddress.id) {
-    main.clearSelectAddress()
-  }
+  await refreshPage?.()
 }
 </script>
 
 <style lang="scss">
 @import "../../style/images";
 
-.address {
-  padding: 25rpx 35rpx;
-  position: relative;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  &-actions {
-    &-edit {
-      width: 33rpx;
-      height: 33rpx;
-
-      .image {
-        width: 100%;
-        height: 100%;
-        display: block;
-      }
-    }
-
-  }
-
-
-  &.noBorder {
-    &::after {
-      display: none;
-    }
-  }
-
-  &::after {
-    content: '';
-    position: absolute;
-    left: 35rpx;
-    top: 0;
-    right: 0;
-    height: 1rpx;
-    background: #E6E6E6;
-
-  }
-
-
-  background: #fff;
-
-  &-header {
-    display: flex;
-    align-items: center;
-    margin-bottom: 8rpx;
-  }
-
-  &-name {
-    line-height: 40rpx;
-    font-size: 28rpx;
-    color: #333333;
-    margin-right: 30rpx;
-
-  }
-
-  &-phone {
-    line-height: 40rpx;
-    font-size: 28rpx;
-    color: #333333;
-  }
-
-  &-content {
-    display: flex;
-    align-items: center;
-    padding-right: 10rpx;
-  }
-
-  &-default {
-    width: 80rpx;
-    margin-right: 20rpx;
-  }
-
-  &-desc {
-    flex: 1;
-    line-height: 33rpx;
-    font-size: 24rpx;
-    color: #999999;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-  }
-}
-
-.addressList {
+.address-list {
   padding-bottom: 100rpx;
 }
 
 .form-buttons {
   position: fixed;
-  bottom: env(safe-area-inset-bottom);
+  bottom: calc(env(safe-area-inset-bottom) + 20rpx);
   left: 0;
   z-index: 999;
   width: 100%;
@@ -295,25 +171,4 @@ async function doDeleteRequest() {
   margin: 0 auto;
 }
 
-.address-default :deep(.uv-tags) {
-  justify-content: center;
-  white-space: nowrap;
-}
-
-.addressList :deep(.uv-swipe-action-item__right__button__wrapper) {
-  position: relative;
-
-  &:before {
-    position: absolute;
-    content: '';
-    background: $addDelIcon no-repeat center center;
-    width: 50rpx;
-    height: 50rpx;
-    background-size: contain;
-  }
-}
-
-.addressList :deep(.uv-swipe-action-item__right__button__wrapper__text) {
-  visibility: hidden;
-}
 </style>

pages/address/component/AddressItem.vue

@@ -0,0 +1,139 @@
+<!--
+    @name: addressItem
+    @author: kahu4
+    @date: 2024-03-04 15:58
+    @description：addressItem
+    @update: 2024-03-04 15:58
+-->
+<script setup>
+
+import { addressEditIcon } from "@/utils/images";
+import { toRefs } from "vue";
+import UvTags from "@/uni_modules/uv-tags/components/uv-tags/uv-tags.vue";
+
+const emits = defineEmits(['edit', 'click'])
+
+const props = defineProps({
+  addressItem: {
+    type: Object,
+    required: true
+  },
+  border: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const {addressItem, border} = toRefs(props)
+</script>
+
+<template>
+  <view
+      class="address"
+      :class="{'no-border':!border}"
+      @tap="emits('click',addressItem)"
+  >
+    <view class="address-main">
+      <view class="address-header">
+        <view class="address-name">{{ addressItem.realName }}</view>
+        <view class="address-phone">{{ addressItem.phone }}</view>
+      </view>
+      <view class="address-content">
+        <view
+            class="address-default"
+            v-if="addressItem.isDefault"
+        >
+          <uv-tags
+              text="默认"
+              plain
+              size="mini"
+          />
+        </view>
+        <view class="address-desc">
+          {{ addressItem.province }}-{{ addressItem.city }}-{{ addressItem.district }} {{ addressItem.detail }}
+        </view>
+      </view>
+    </view>
+    <view class="address-actions">
+      <view
+          class="address-actions-edit"
+          @tap.stop="emits('edit',addressItem)"
+      >
+        <image
+            class="image"
+            :src="addressEditIcon"
+        />
+      </view>
+    </view>
+  </view>
+</template>
+
+<style
+    scoped
+    lang="scss">
+.address {
+  padding: 25rpx 35rpx;
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  &-actions {
+    &-edit {
+      width: 33rpx;
+      height: 33rpx;
+
+      .image {
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
+    }
+  }
+
+  background: #fff;
+
+  &-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 8rpx;
+  }
+
+  &-name {
+    line-height: 40rpx;
+    font-size: 28rpx;
+    color: #333333;
+    margin-right: 30rpx;
+
+  }
+
+  &-phone {
+    line-height: 40rpx;
+    font-size: 28rpx;
+    color: #333333;
+  }
+
+  &-content {
+    display: flex;
+    align-items: center;
+    padding-right: 10rpx;
+  }
+
+  &-default {
+    width: 80rpx;
+    margin-right: 20rpx;
+  }
+
+  &-desc {
+    flex: 1;
+    line-height: 33rpx;
+    font-size: 24rpx;
+    color: #999999;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+  }
+}
+</style>