yshop-pro-uniapp/pages/address/address.vue

<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
      >
        您还没有新增地址~
      </Empty>
    </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>
</template>

<script setup>
import { ref, unref } from 'vue'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import { useMainStore } from '@/store/modules/useMainStore'
import Empty from '@/components/Empty/index.vue'
import { addressEditIcon, 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('')

const main = useMainStore()
const moreLoding = ref(true)
const actionType = ref('')
const page = ref(1)
const selectCartId = ref(undefined)
const options = ref([{
  text: '删除',
  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 modalRef = ref()
const prepareData = ref({})

/**
 * 打开弹窗
 */
function showModal(data) {
  prepareData.value = data
  unref(modalRef).show()
}

/**
 * 删除地址
 */
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">
@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 {
  padding-bottom: 100rpx;
}

.form-buttons {
  position: fixed;
  bottom: env(safe-area-inset-bottom);
  left: 0;
  z-index: 999;
  width: 100%;
  padding: 0;
}

.form-buttons .btn {
  width: 90%;
  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>