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

<template>
  <layout>
    <uv-navbar
      :fixed="false"
      :title="title"
      left-arrow
      @leftClick="$onClickLeft"
    />

    <view class="addressList">
      <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.detail }}</view>
              </view>
            </view>
            <view class="address-actions">
              <view
                class="address-actions-edit"
                @tap="goEditorAddress(item)"
              >
                <image
                  class="image"
                  src="@/static/images/icon-edit.png"
                  alt=""
                ></image>
              </view>
            </view>
          </view>
        </uv-swipe-action-item>
      </uv-swipe-action>
    </view>
    <div class="form-buttons">
      <uv-button
        round
        block
        type="primary"
        @tap="goCreateAddress"
      >
        新增地址
      </uv-button>
    </div>

  </layout>
</template>

<script setup>
import { ref } from 'vue'
import { navigateTo, back } from '@/utils/router'
import { onLoad } from '@dcloudio/uni-app'
import { useMainStore } from '@/store/store'

import {
  getAddressDel,
  getAddressDefault,
  getAddressAddAndEdit,
  getAddressList,
  getAddressCityList,
} from '@/api/address'

const title = ref('')

const main = useMainStore()

const actionType = ref('')

const options = ref([{
  text: '删除',
  style: {
    backgroundColor: '#f56c6c'
  }
}])

const goCreateAddress = () => {
  navigateTo({
    url: "/pages/createAddress/createAddress"
  });
}

const goEditorAddress = (address) => {
  navigateTo({
    url: "/pages/createAddress/createAddress",
    query: {
      id: address.id
    }
  });
}

const handleClick = (item) => {
  if (actionType.value == 'select') {
    main.setSelectAddress(item.id)
    back()
  }

}

onLoad((option) => {
  if (option.type) {
    actionType.value = option.type
    title.value = '选择地址'
  } else {
    title.value = '地址管理'
  }
  main.getAddressList()
})


const handleAddressClick = async ({ index }, data) => {
  if (index == 0) {
    uni.showLoading({
      title: '删除中',
      mask: true,
    })

    await getAddressDel(data)
    uni.showToast({
      title: "删除成功",
      icon: "none",
      duration: 2000
    });
    uni.hideLoading()
    main.getAddressList()
  }

}




</script>

<style lang="less">
.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 {
    height: 52rpx;
    display: flex;
    align-items: center;
  }

  &-default {
    margin-right: 82rpx;
  }

  &-desc {
    line-height: 33rpx;
    font-size: 24rpx;
    color: #999999;
  }
}
</style>