applet/pages/user/address/addressList.vue

<template>
  <view class="container">
    <uv-navbar title="收货地址" placeholder autoBack></uv-navbar>
    <view class="list">
      <radio-group>
        <view class="item u-bg-fff" v-for="item in addressList" :key="item.id">
          <view class="u-border-one-one userInfo" @click="backSurePay(item.id)">
            <view
              >收货人：<text class="u-999">{{ item.receiverName }}</text>
              <text class="u-ml80">{{ item.receiverPhone }}</text>
            </view>
            <view class="u-mt5 u-text2"
              >收货地址：<text class="u-999"
                >{{ item.provinceName }}{{ item.cityName }}{{ item.areaName
                }}{{ item.detailAddress }}</text
              >
            </view>
          </view>
          <view class="operation u-flex-center-sb u-font24 u-999">
            <view class="u-flex-center" @click="isDefault(item.id)">
              <view class="kuang">
                <uv-icon
                  v-if="item.defaultStatus"
                  name="checkmark-circle-fill"
                  color="#e93534"
                  size="34rpx"
                ></uv-icon>
                <uv-icon
                  v-else
                  name="checkmark-circle"
                  size="34rpx"
                ></uv-icon>
                <text class="" style="margin-left: 10rpx;">{{
                  item.defaultStatus ? "默认地址" : "设为默认"
                }}</text>
              </view>
            </view>
            <view class="u-flex-center">
              <view class="u-mr45" @click="edit(item.id)">编辑</view>
              <view @click="del(item.id)">删除</view>
            </view>
          </view>
        </view>
      </radio-group>
    </view>
    <!-- 没有数据 -->
    <view
      class="nogoods u-mt30 u-flex-column-center"
      v-if="addressList.length == 0"
    >
      <noData :config="{ top: 5, content: '您还没有添加地址~' }"></noData>
    </view>
    <view class="add-btn" @click="goAddEditAddress">
      <view class="u-plr30">
        <button class="u-btn-two u-FFF">添加新地址</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import {
  useraddressList_Api,
  useraddressDel_Api,
  useraddressSetDefaultStatus_Api,
} from "@/api/userInfo.js";
const formType = ref(null);
const addressList = ref([]);
// 获取地址列表
const getAddressList = async () => {
  useraddressList_Api().then(async (res) => {
    // console.log("res", res);
    if (res.code == 200) {
      addressList.value = res.data;
    }
  });
};
// 跳转确认下单
const backSurePay = (id) => {
  if (formType.value == "mine") return false;
  uni.showModal({
    title: "提示",
    content: "确认使用该地址收货吗?",
    success: function (res) {
      if (res.confirm) {
        // uni.setStorageSync('address',item)
        let object = {
          addressid: id,
        };
        var pages = getCurrentPages();
        var prevPage = pages[pages.length - 2];
        if (prevPage.$vm.otherFun) {
          prevPage.$vm.otherFun(object);
        }
        uni.navigateBack({
          delta: 1,
        });
        // uni.navigateTo({
        // 	url:'/pages/product/surePay/surePay?addressid='+id
        // })
        console.log("用户点击确定");
      } else if (res.cancel) {
        console.log("用户点击取消");
      }
    },
  });
};
// 跳转添加编辑地址
const goAddEditAddress = () => {
  uni.navigateTo({
    url: "addEditAddress",
  });
};
// 设为默认
const isDefault = (id) => {
  uni.showModal({
    title: "提示",
    content: "确认更换默认收货地址吗?",
    success: (result) => {
      if (result.confirm) {
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        useraddressSetDefaultStatus_Api(id)
          .then(async (res) => {
            uni.hideLoading();
            if (res && res.code == 200) {
              uni.showToast({
                title: "修改成功",
                icon: "none",
                duration: 3000,
                success() {
                  addressList.value = [];
                  getAddressList();
                },
              });
            }
          })
          .catch((err) => {
            // uni.hideLoading();
          });
        console.log("用户点击确定");
      } else if (result.cancel) {
        console.log("用户点击取消");
      }
    },
  });
};
// 编辑
const edit = (id) => {
  uni.navigateTo({
    url: "addEditAddress?id=" + id,
  });
};
// 删除
const del = async (id) => {
  uni.showModal({
    title: "温馨提示",
    content: "是否删除这条地址",
    success: (res) => {
      if (res.confirm) {
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        useraddressDel_Api(id)
          .then(async (res) => {
            uni.hideLoading();
            if (res.code == 200) {
              uni.showToast({
                title: "删除成功",
                icon: "none",
                duration: 3000,
                success() {
                  getAddressList();
                },
              });
            }
          })
          .catch((err) => {
            // uni.hideLoading();
          });
      }
    },
  });
};

onLoad((options) => {
  if (options.formType) {
    formType.value = options.formType;
  }
});
onShow(() => {
  addressList.value = [];
  getAddressList();
});
</script>

<style lang="scss" scoped>
page {
  background-color: #f5f5f5;
}

.kuang {
  display: flex;
  align-items: center;
}

.container {
  padding-bottom: 160rpx;
}

.list {
  // margin-bottom: 160rpx;
}

.item {
  margin-top: 30rpx;
  padding: 46rpx 30rpx;

  .userInfo {
    padding-bottom: 36rpx;
  }

  .operation {
    border-top: 2rpx solid #f5f5f5;
    padding-top: 42rpx;
  }
}

.add-btn {
  width: 100%;
  position: fixed;
  bottom: 45rpx;

  button {
    width: 100%;
  }
}
</style>