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

<template>
  <layout>

    <Header>
      {{ 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="handleAddressClick($event, 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="@/static/images/icon-edit.png"
                      alt=""
                  ></image>
                </view>
              </view>
            </view>
          </uv-swipe-action-item>
        </uv-swipe-action>
      </template>
      <Empty
          :iconSrc="emptyIcon"
          v-else
      >
        您还没有新增地址~
      </Empty>
    </view>
    <view class="form-buttons">
      <view class="btn">
        <uv-button
            round
            block
            type="primary"
            @tap="goCreateAddress"
        >
          新增地址
        </uv-button>
      </view>
    </view>

  </layout>
</template>

<script setup>
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 { getAddressDel, } from '@/api/address'
import { useRouter } from "@/hooks/useRouter";
import Header from "@/components/Header/index.vue"

const {push, goBack} = useRouter()

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: '#f56c6c'
  }
}])

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)
    console.log(main.cartId, 'main.cartId')
    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 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) {
        }
      }
    });
  }

}


</script>

<style lang="scss">
.addressList {
  .address {
    &:last-child {
      //   &::after {
      //     display: none;
      //   }
    }
  }
}


.address {
  padding: 25rpx 35rpx;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;

  &-main {
  }

  &-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: 40rpx;
  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;
}
</style>