wxapp_shuibei/pages/users/user_address_list/index.vue

<template>
  <view>
    <!-- #ifdef APP-->
    <view class="status_1"></view>
    <!-- #endif -->
    <view class="line">
      <image
        src="../../../static/images/line.jpg"
        v-if="addressList.length"
      ></image>
    </view>
    <view
      class="address-management"
      :class="addressList.length < 1 && page > 1 ? 'fff' : ''"
    >
      <radio-group
        class="radio-group"
        @change="radioChange"
        v-if="addressList.length"
      >
        <view
          class="item borRadius14"
          v-for="(item, index) in addressList"
          :key="index"
        >
          <view class="address" @click="goOrder(item.id)">
            <view class="consignee"
              >收货人：{{ item.realName
              }}<text class="phone">{{ item.phone }}</text></view
            >
            <view
              >收货地址：{{ item.province }}{{ item.city }}{{ item.district
              }}{{ item.detail }}</view
            >
          </view>
          <view class="operation acea-row row-between-wrapper">
            <!-- #ifndef MP -->
            <radio
              class="radio"
              :value="index.toString()"
              :checked="item.isDefault"
            >
              <text>设为默认</text>
            </radio>
            <!-- #endif -->
            <!-- #ifdef MP -->
            <radio class="radio" :value="index" :checked="item.isDefault">
              <text>设为默认</text>
            </radio>
            <!-- #endif -->
            <view class="acea-row row-middle">
              <view @click="editAddressFn(item.id)"
                ><text class="iconfont icon-bianji"></text>编辑</view
              >
              <view @click="delAddressFn(index)"
                ><text class="iconfont icon-shanchu"></text>删除</view
              >
            </view>
          </view>
        </view>
      </radio-group>
      <view
        class="loadingicon acea-row row-center-wrapper"
        v-if="addressList.length"
      >
        <text
          class="loading iconfont icon-jiazai"
          :hidden="loading == false"
        ></text
        >{{ loadTitle }}
      </view>
      <view class="noCommodity" v-if="addressList.length < 1 && page > 1">
        <view class="pictrue">
          <image :src="HTTP_REQUEST_URL_IMG+'noAddress.png'"></image>
        </view>
      </view>
      <view style="height: 120rpx"></view>
    </view>
    <view class="footer acea-row row-between-wrapper">
      <!-- #ifdef MP-->
      <view class="addressBnt bg-color" @click="addAddress"
        ><text class="iconfont icon-tianjiadizhi"></text>添加新地址</view
      >
      <view class="addressBnt wxbnt" @click="getWxAddress"
        ><text class="iconfont icon-weixin2"></text>导入微信地址</view
      >
      <!-- #endif -->
      <!-- #ifdef H5-->

      <view
        class="addressBnt bg-color"
        :class="wechat.isWeixin() ? '' : 'on'"
        @click="addAddress"
        ><text class="iconfont icon-tianjiadizhi"></text>添加新地址</view
      >
      <view
        v-if="wechat.isWeixin()"
        class="addressBnt wxbnt"
        @click="getAddress"
        ><text class="iconfont icon-weixin2"></text>导入微信地址</view
      >
      <!-- #endif -->

      <!-- #ifdef APP-->
      <view class="addressBnt on bg-color" @click="addAddress"
        ><text class="iconfont icon-tianjiadizhi"></text>添加新地址
      </view>
      <!-- #endif -->
    </view>
  </view>
</template>

<script setup>
import { ref, computed, watch } from "vue";
import { useAppStore } from "@/stores/app.js";
import { onLoad, onShow, onReachBottom } from "@dcloudio/uni-app";
import {
  getAddressList,
  setAddressDefault,
  delAddress,
  editAddress,
} from "@/api/user.js";
import { toLogin } from "@/libs/login.js";
import { useToast } from "@/hooks/useToast.js";
import wechat from "@/libs/wechat.js";
const { Toast } = useToast();
const appStore = useAppStore();
import { HTTP_REQUEST_URL_IMG } from "@/config/app";

const addressList = ref([]);
const cartId = ref("");
const pinkId = ref(0);
const couponId = ref(0);
const loading = ref(false);
const loadend = ref(false);
const loadTitle = ref("加载更多");
const page = ref(1);
const limit = ref(20);
const isAuto = ref(false);
const isShowAuth = ref(false);
const bargain = ref(false);
const combination = ref(false);
const secKill = ref(false);
const preOrderNo = ref(0);
const isFlashSale = ref(false); // 是否为秒杀订单
const isGroupBuy = ref(false); // 是否为团购订单

watch(
  () => appStore.isLogin,
  (newV) => {
    if (newV) {
      getUserAddress(true);
    }
  }
);

function getUserAddress(isPage) {
  getAddressListFn(isPage);
}

onLoad((options) => {
  if (appStore.isLogin) {
    preOrderNo.value = options.preOrderNo || 0;
    isFlashSale.value = options.isFlashSale === "1"; // 接收秒杀订单标识
    isGroupBuy.value = options.isGroupBuy === "1"; // 接收团购订单标识
    getAddressListFn(true);
  } else {
    toLogin();
  }
});

onShow(() => {
  getAddressListFn(true);
});

function onLoadFun() {
  getAddressListFn();
}

function authColse(e) {
  isShowAuth.value = e;
}

// 导入微信地址（小程序）
function getWxAddress() {
  uni.authorize({
    scope: "scope.address",
    success: function () {
      uni.chooseAddress({
        success: function (res) {
          let addressP = {
            province: res.provinceName,
            city: res.cityName,
            district: res.countyName,
            cityId: 0,
          };
          editAddress({
            address: addressP,
            isDefault: true,
            realName: res.userName,
            postCode: res.postalCode,
            phone: res.telNumber,
            detail: res.detailInfo,
            id: 0,
          })
            .then(() => {
              Toast(
                {
                  title: "添加成功",
                  icon: "success",
                },
                () => {
                  getAddressListFn(true);
                }
              );
            })
            .catch((err) => {
              return Toast({
                title: err,
              });
            });
        },
        fail: function (res) {
          if (res.errMsg == "chooseAddress:cancel")
            return Toast({
              title: "取消选择",
            });
        },
      });
    },
    fail: function () {
      uni.showModal({
        title: "您已拒绝导入微信地址权限",
        content: "是否进入权限管理，调整授权？",
        success(res) {
          if (res.confirm) {
            uni.openSetting({
              success: function (res) {
                console.log(res.authSetting);
              },
            });
          } else if (res.cancel) {
            return Toast({
              title: "已取消！",
            });
          }
        },
      });
    },
  });
}

// 导入微信地址（公众号）
function getAddress() {
  wechat.openAddress().then((userInfo) => {
    editAddress({
      realName: userInfo.userName,
      phone: userInfo.telNumber,
      address: {
        province: userInfo.provinceName,
        city: userInfo.cityName,
        district: userInfo.countryName,
        cityId: 0,
      },
      detail: userInfo.detailInfo,
      postCode: userInfo.postalCode,
      isDefault: true,
    })
      .then(() => {
        Toast(
          {
            title: "添加成功",
            icon: "success",
          },
          () => {
            getAddressListFn(true);
          }
        );
      })
      .catch((err) => {
        Toast({
          title: err || "添加失败",
        });
      });
  });
}

function getAddressListFn(isPage) {
  if (isPage) {
    loadend.value = false;
    page.value = 1;
    addressList.value = [];
  }
  if (loading.value || loadend.value) return;
  loading.value = true;
  loadTitle.value = "";
  getAddressList({
    page: page.value,
    limit: limit.value,
  })
    .then((res) => {
      let list = res.data.list;
      let isLoadend = list.length < limit.value;
      addressList.value = [...addressList.value, ...list];
      loadend.value = isLoadend;
      loadTitle.value = isLoadend ? "我也是有底线的" : "加载更多";
      page.value = page.value + 1;
      loading.value = false;
    })
    .catch(() => {
      loading.value = false;
      loadTitle.value = "加载更多";
    });
}

// 设置默认地址
function radioChange(e) {
  let index = parseInt(e.detail.value);
  let address = addressList.value[index];
  if (address == undefined) return Toast({ title: "您设置的默认地址不存在!" });
  setAddressDefault(address.id)
    .then(() => {
      addressList.value.forEach((item, i) => {
        item.isDefault = i === index;
      });
      Toast(
        {
          title: "设置成功",
          icon: "success",
        },
        () => {
          addressList.value = [...addressList.value];
        }
      );
    })
    .catch((err) => {
      return Toast({
        title: err,
      });
    });
}

// 编辑地址
function editAddressFn(id) {
  const cart = cartId.value;
  const pink = pinkId.value;
  const coupon = couponId.value;
  cartId.value = "";
  pinkId.value = "";
  couponId.value = "";
  const flashSaleParam = isFlashSale.value ? "&isFlashSale=1" : "";
  uni.navigateTo({
    url: `/pages/users/user_address/index?id=${id}&cartId=${cart}&pinkId=${pink}&couponId=${coupon}&secKill=${secKill.value}&combination=${combination.value}&bargain=${bargain.value}&preOrderNo=${preOrderNo.value}${flashSaleParam}`,
  });
}

// 删除地址
function delAddressFn(index) {
  let address = addressList.value[index];
  if (address == undefined) return Toast({ title: "您删除的地址不存在!" });
  delAddress(address.id)
    .then(() => {
      Toast(
        {
          title: "删除成功",
          icon: "success",
        },
        () => {
          addressList.value.splice(index, 1);
          addressList.value = [...addressList.value];
        }
      );
    })
    .catch((err) => {
      return Toast({
        title: err,
      });
    });
}

// 新增地址
function addAddress() {
  cartId.value = "";
  pinkId.value = "";
  couponId.value = "";
  const flashSaleParam = isFlashSale.value ? "&isFlashSale=1" : "";
  const groupBuyParam = isGroupBuy.value ? "&isGroupBuy=1" : "";
  uni.navigateTo({
    url: `/pages/users/user_address/index?preOrderNo=${preOrderNo.value}${flashSaleParam}${groupBuyParam}`,
  });
}

function goOrder(id) {
  if (preOrderNo.value) {
    // 根据订单类型跳转到不同的确认页面
    if (isFlashSale.value) {
      // 秒杀订单跳转到秒杀确认页面
      uni.redirectTo({
        url: `/pages/users/utils/flashSale/confirmOrder?is_address=1&preOrderNo=${preOrderNo.value}&addressId=${id}`,
      });
    } else if (isGroupBuy.value) {
      // 团购支付返回到支付详情页
      uni.redirectTo({
        url: `/pages/group_buying/paydetail?is_address=1&preOrderNo=${preOrderNo.value}&addressId=${id}`,
      });
    } else {
      // 普通订单跳转到普通确认页面
      uni.redirectTo({
        url: `/pages/users/order_confirm/index?is_address=1&preOrderNo=${preOrderNo.value}&addressId=${id}`,
      });
    }
  }
}

onReachBottom(() => {
  getAddressListFn();
});
</script>

<style lang="scss" scoped>
.address-management {
  padding: 20rpx 30rpx;
}

.address-management.fff {
  background-color: #fff;
  height: 1300rpx;
}

.line {
  width: 100%;
  height: 3rpx;

  image {
    width: 100%;
    height: 100%;
    display: block;
  }
}

.address-management .item {
  background-color: #fff;
  padding: 0 20rpx;
  margin-bottom: 20rpx;
}

.address-management .item .address {
  padding: 35rpx 0;
  border-bottom: 1rpx solid #eee;
  font-size: 28rpx;
  color: #282828;
}

.address-management .item .address .consignee {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.address-management .item .address .consignee .phone {
  margin-left: 25rpx;
}

.address-management .item .operation {
  height: 83rpx;
  font-size: 28rpx;
  color: #282828;
}

.address-management .item .operation .radio text {
  margin-left: 13rpx;
}

.address-management .item .operation .iconfont {
  color: #2c2c2c;
  font-size: 35rpx;
  vertical-align: -2rpx;
  margin-right: 10rpx;
}

.address-management .item .operation .iconfont.icon-shanchu {
  margin-left: 35rpx;
  font-size: 38rpx;
}

.footer {
  position: fixed;
  width: 100%;
  background-color: #fff;
  bottom: 0;
  height: 106rpx;
  padding: 0 30rpx;
  box-sizing: border-box;
}

.footer .addressBnt {
  width: 330rpx;
  height: 76rpx;
  border-radius: 50rpx;
  text-align: center;
  line-height: 76rpx;
  font-size: 30rpx;
  color: #fff;
}

.footer .addressBnt.on {
  width: 690rpx;
  margin: 0 auto;
}

.footer .addressBnt .iconfont {
  font-size: 35rpx;
  margin-right: 8rpx;
  vertical-align: -1rpx;
}

.footer .addressBnt.wxbnt {
  background-color: #fe960f;
}

.status_1 {
  display: flex;
  width: 750rpx;
  // background-color: #E93323;
  height: var(--status-bar-height);
}
</style>