|
|
@@ -0,0 +1,547 @@
|
|
|
+<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' : ''"
|
|
|
+ >
|
|
|
+ <up-radio-group
|
|
|
+ class="radio-group"
|
|
|
+ @change="radioChange"
|
|
|
+ v-if="addressList.length"
|
|
|
+ activeColor="#F8C008"
|
|
|
+ v-model="currentCheckedValue"
|
|
|
+ >
|
|
|
+ <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 -->
|
|
|
+ <up-radio
|
|
|
+ class="radio"
|
|
|
+ :value="index.toString()"
|
|
|
+ :name="item.id"
|
|
|
+ label="设为默认"
|
|
|
+ >
|
|
|
+ </up-radio>
|
|
|
+ <!-- #endif -->
|
|
|
+ <!-- #ifdef MP -->
|
|
|
+ <up-radio class="radio" :name="item.id" label="设为默认"></up-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>
|
|
|
+ </up-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); // 是否为团购订单
|
|
|
+const currentCheckedValue = ref("");
|
|
|
+
|
|
|
+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];
|
|
|
+
|
|
|
+ const defaultAddress = addressList.value.find(item => item.isDefault);
|
|
|
+ console.log(defaultAddress)
|
|
|
+ if (defaultAddress) {
|
|
|
+ currentCheckedValue.value = defaultAddress.id;
|
|
|
+ } else if (addressList.value.length > 0) {
|
|
|
+ // 如果没有默认地址,选择第一个
|
|
|
+ currentCheckedValue.value = newList[0].id;
|
|
|
+ }
|
|
|
+ console.log('currentCheckedValue.value',currentCheckedValue.value)
|
|
|
+
|
|
|
+ loadend.value = isLoadend;
|
|
|
+ loadTitle.value = isLoadend ? "我也是有底线的" : "加载更多";
|
|
|
+ page.value = page.value + 1;
|
|
|
+ loading.value = false;
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ loading.value = false;
|
|
|
+ loadTitle.value = "加载更多";
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+// 设置默认地址
|
|
|
+function radioChange(e) {
|
|
|
+ const addressId = e; // 现在是地址ID
|
|
|
+ const address = addressList.value.find(item => item.id === addressId);
|
|
|
+ if (!address) return Toast({ title: "您设置的默认地址不存在!" });
|
|
|
+
|
|
|
+ setAddressDefault(addressId)
|
|
|
+ .then(() => {
|
|
|
+ // 更新所有地址的isDefault状态
|
|
|
+ addressList.value.forEach(item => {
|
|
|
+ item.isDefault = item.id === addressId;
|
|
|
+ });
|
|
|
+
|
|
|
+ // 更新当前选中的值
|
|
|
+ currentCheckedValue.value = addressId;
|
|
|
+
|
|
|
+ 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;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.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;
|
|
|
+ font-weight: bold;
|
|
|
+ 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>
|