uniapp-im-shop/pages/address/index.vue

<script setup>
  import { navigateTo } from '@/utils/router'
  import { onShow } from '@dcloudio/uni-app'
  import {
    getUserAddress,
    updateUserAddress,
    deleteUserAddress
  } from '@/api'
  import { ref } from 'vue'
  import { useUI } from '@/utils/use-ui'

  const { showDialog, showToast } = useUI()

  const listData = ref([])
  const loading = ref(true)
  const getData = async () => {
    loading.value = true
    const res = await getUserAddress({ pageNum: 1, pageSize: 99 })
    listData.value = res.rows
    loading.value = false
  }

  const onAdd = () => {
    navigateTo('/pages/address/add', {
      defaultAddress: listData.value.length === 0 ? '1' : ''
    })
  }

  const onGo = id => {
    navigateTo('/pages/address/edit', { id })
  }

  const onDefault = async item => {
    const show = await showDialog('提示', '确定要设为默认地址吗？')
    if (show) {
      const data = {
        id: item.id,
        houseNum: item.houseNum,
        name: item.name,
        phone: item.phone,
        address: item.address,
        defaultAddress: 1
      }
      await updateUserAddress(data)
      await showToast('设置成功', 'success')
      getData()
    }
  }

  const onDelete = async item => {
    const show = await showDialog('提示', '确定要删除吗？')
    if (show) {
      await deleteUserAddress(item.id)
      await showToast('删除成功', 'success')
      getData()
    }
  }

  onShow(() => {
    getData()
  })
</script>

<template>
  <view class="address-index">
    <nav-bar isTopBg isPlaceholder title="我的地址">
      <template #right>
        <text class="top-right-name" @click="onAdd">添加地址</text>
      </template>
    </nav-bar>

    <cb-empty v-if="!loading && listData.length === 0"></cb-empty>

    <view class="address-list">
      <uni-swipe-action>
        <uni-swipe-action-item v-for="item in listData" :key="item.id">
          <view class="card-box" @click="onGo(item.id)">
            <view class="left-box">
              <text class="address">{{ item.address }}</text>
              <text class="name">{{ item.houseNum }}</text>
              <view class="bottom">
                <text>{{ item.name }}</text>
                <text>{{ item.phone }}</text>
                <text
                  v-if="item.defaultAddress == 1"
                  class="default-text"
                >
                  默认地址
                </text>
              </view>
            </view>

            <uni-icons type="compose" size="20"></uni-icons>
          </view>
          <template v-slot:right>
            <view class="swipe-box">
              <view
                v-if="item.defaultAddress == 0"
                class="public-uni-swipe-action-right"
                @click="onDefault(item)"
              >
                <uni-icons
                  type="checkbox"
                  size="18"
                  color="#ffffff"
                ></uni-icons>
                <text class="iocn-name">设为默认</text>
              </view>
              <view
                class="public-uni-swipe-action-right"
                @click="onDelete(item)"
              >
                <uni-icons
                  type="trash"
                  size="18"
                  color="#ffffff"
                ></uni-icons>
                <text class="iocn-name">删除</text>
              </view>
            </view>
          </template>
        </uni-swipe-action-item>
      </uni-swipe-action>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  @import '@/styles/global.scss';

  page {
    background: #f9f9f9;
  }
  .top-right-name {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 28rpx;
    color: #00d993;
    text-align: center;
    font-style: normal;
    text-transform: none;
  }
  .address-list {
    // padding: 32rpx;

    .card-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 22rpx;
      border-bottom: 2rpx solid #f4f4f4;
      background: #ffffff;
      // margin-bottom: 22rpx;
      // padding-bottom: 22rpx;
      .left-box {
        display: flex;
        flex-direction: column;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;

        font-style: normal;
        text-transform: none;
        .address {
          font-size: 24rpx;
          color: #999999;
        }
        .name {
          font-size: 32rpx;
          color: #333333;
          margin: 10rpx 0;
        }

        .bottom {
          display: flex;
          align-items: center;
          text + text {
            margin-left: 26rpx;
          }
          text {
            font-size: 24rpx;
            color: #999999;
          }
          .default-text {
            font-size: 24rpx;
            background: #00d993;
            color: #ffffff;
            padding: 2rpx 6rpx;
            border-radius: 8rpx;
          }
        }
      }
    }
    .swipe-box {
      display: flex;
    }
  }
</style>