代码提交

pages/address/address.vue

@@ -1,7 +1,7 @@
 <template>
   <layout>
 
-    <Header>
+    <Header :scroll-top="scrollTop">
       {{ title }}
     </Header>
 
@@ -12,7 +12,7 @@
               v-for="(item, index) in main.address"
               :key="index"
               :options="options"
-              @click="handleAddressClick($event, item)"
+              @click="showModal( item)"
           >
             <view
                 :class="{ address: true, noBorder: index == 0 }"
@@ -47,7 +47,7 @@
                 >
                   <image
                       class="image"
-                      src="@/static/images/icon-edit.png"
+                      src="https://b2c-pro-static-dev.zkthink.com/static/images/icon-edit.png"
                       alt=""
                   ></image>
                 </view>
@@ -57,7 +57,7 @@
         </uv-swipe-action>
       </template>
       <Empty
-          :iconSrc="emptyIcon"
+          :iconSrc="emptyAddressIcon"
           v-else
       >
         您还没有新增地址~
@@ -75,6 +75,8 @@
         </uv-button>
       </view>
     </view>
+    <ReturnTop :scroll-top="scrollTop" />
+    <Modal ref="modalRef" content="确认要删除地址吗？" @confirm="doDeleteRequest" />
 
   </layout>
 </template>
@@ -84,12 +86,16 @@ import { ref, unref } from 'vue'
 import { onLoad, onReachBottom } from '@dcloudio/uni-app'
 import { useMainStore } from '@/store/store'
 import Empty from '@/components/Empty/index.vue'
-import emptyIcon from '@/static/icon/empty/地址.png'
+import { emptyAddressIcon } from "@/utils/images";
 import { getAddressDel, } 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";
 
 const {push, goBack} = useRouter()
+const {scrollTop} = useScroll()
 
 const title = ref('')
 
@@ -101,7 +107,7 @@ const selectCartId = ref(undefined)
 const options = ref([{
   text: '删除',
   style: {
-    backgroundColor: '#f56c6c'
+    backgroundColor: '#EE6D46'
   }
 }])
 
@@ -156,39 +162,29 @@ onLoad((option) => {
   main.getAddressList(page.value)
 })
 
+const modalRef = ref()
+const prepareData= ref({})
 
-
-
-const handleAddressClick = async ({index}, data) => {
-  if (index == 0) {
-    uni.showModal({
-      title: '温馨提示',
-      content: '是否确认删除此地址?',
-      success: async (res) => {
-        if (res.confirm) {
-          uni.showLoading({
-            title: '删除中',
-            mask: true,
-          })
-
-          await getAddressDel(data)
-          uni.showToast({
-            title: "删除成功",
-            icon: "none",
-            duration: 2000
-          });
-          uni.hideLoading()
-          main.restAddress()
-          main.getAddressList(1)
-        } else if (res.cancel) {
-        }
-      }
-    });
-  }
-
+/**
+ * 打开弹窗
+ */
+function showModal(data){
+  prepareData.value = data
+  unref(modalRef).show()
 }
 
-
+/**
+ * 删除地址
+ * @returns {Promise<void>}
+ */
+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()
+  }
+}
 </script>
 
 <style lang="scss">
@@ -314,4 +310,18 @@ const handleAddressClick = async ({index}, data) => {
   justify-content: center;
   white-space: nowrap;
 }
+.addressList :deep(.uv-swipe-action-item__right__button__wrapper) {
+  position: relative;
+  &:before {
+    position: absolute;
+    content: '';
+    background: url("https://b2c-pro-static-dev.zkthink.com/static/images/delete_icon.png") no-repeat center center;
+    width: 50rpx;
+    height: 50rpx;
+    background-size: contain;
+  }
+}
+.addressList :deep(.uv-swipe-action-item__right__button__wrapper__text) {
+  visibility: hidden;
+}
 </style>