上传文件至 'pages/address'

pages/address/list.vue

@@ -0,0 +1,303 @@
+<template>
+	<view class="app-container">
+		<view class="congxindingwei">
+			<view class="header-container">
+				<view class="left">
+					<image src="@/static/home/location.png"></image>
+					<text>{{websitData.address}}</text>
+				</view>
+				<view class="right" style="min-width: 120rpx;" @tap="getLocation">
+					<view class="item">
+						重新定位
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="wodeshouhuodiz">我的收货地址</view>
+		<view class="list-container">
+			<block v-for="(item, index) in addressList" :key="index">
+				<view class="item" @tap="chooseAddress(item)">
+					<view class="top">
+						<view class="left">
+							<view class="name">{{ item.name }}</view>
+							<view class="phone">{{ item.phone }}</view>
+							<view class="default" v-if="item.defaultAddr">默认</view>
+						</view>
+					</view>
+					<view class="bottom">{{ item.province }}{{ item.city }}{{ item.area }}{{ item.street
+            }}{{ item.address }}{{ item.houseNo }}</view>
+				</view>
+			</block>
+		</view>
+		<no-data v-if="!addressList.length" :showText="'暂无收货地址'"></no-data>
+	</view>
+</template>
+
+<script>
+	import {
+		mapState
+	} from 'vuex';
+	import EventBus from '@/utils/eventbus.js';
+	import {
+		getArea
+	} from '@/utils/utils.js';
+	export default {
+		data() {
+			return {
+				addressList: [], // 收货地址列表
+				isChoose: false, // 是否进来选择地址
+			};
+		},
+		computed: {
+			...mapState(['userInfo', 'isLogin', 'userId', 'websitData']),
+		},
+		onShow() {
+			this.getAddressList();
+		},
+		onLoad({
+			isChoose
+		}) {
+			this.isChoose = isChoose;
+		},
+		methods: {
+			// 获取收货地址列表
+			getAddressList() {
+				this.$axios({
+					url: '/user/address/list',
+					method: 'get',
+					params: {
+						pageNum: 1,
+						pageSize: 100,
+						userId: this.userId,
+					},
+				}).then((res) => {
+					this.addressList = res.data.records;
+				});
+			},
+			getLocation() {
+				let that = this;
+				uni.chooseLocation({
+					success: (res) => {
+						this.$axios({
+							url: '/user/userWebsit',
+							method: 'post',
+							params: {
+								lat: res.latitude,
+								lng: res.longitude,
+							},
+						}).then((res) => {
+							if (res?.data) {
+								this.$store.commit('changeWebsitObj', res?.data);
+								uni.setStorageSync('websitData', res?.data);
+								uni.setStorageSync("websitIdSj", res?.data.websitId);
+								uni.reLaunch({
+									url: "/pages/index/index"
+								})
+							} else {
+								uni.showModal({
+									title: '提示',
+									content: '当前定位附件暂无门店，请重新选择定位地址!',
+									success: (res) => {
+										if (res.confirm) {
+											this.getLocation()
+										} else if (res.cancel) {
+											console.log('用户点击取消');
+										}
+									}
+								});
+							}
+						});
+					},
+					fail: (res) => {
+						uni.getSetting({
+							success: function(res) {
+								if (!res.authSetting['scope.userLocation']) {
+									uni.showModal({
+										title: '是否授权当前位置',
+										content: '需要获取您的地理位置，请确认授权，否则地图功能将无法使用',
+										success(tip) {
+											if (tip.confirm) {
+												uni.openSetting({
+													success: function(data) {
+														if (data.authSetting[
+																"scope.userLocation"
+															] === true) {
+															that.$successToast(
+																'授权成功');
+															setTimeout(() => {
+																that
+																	.getLocation();
+															}, 1000)
+														}
+													}
+												})
+											}
+										}
+									})
+								}
+							}
+						})
+					}
+				});
+			},
+
+
+			// 选择地址
+			chooseAddress(item) {
+				this.$axios({
+					url: '/user/userWebsit',
+					method: 'post',
+					params: {
+						lat: item.lat,
+						lng: item.lng,
+					},
+				}).then((res) => {
+					if (res?.data) {
+						this.$store.commit('changeWebsitObj', res?.data);
+						uni.setStorageSync('websitData', res?.data);
+						uni.setStorageSync("websitIdSj", res?.data.websitId);
+						uni.reLaunch({
+							url: "/pages/index/index"
+						})
+					} else {
+						uni.showModal({
+							title: '提示',
+							content: '当前收货地址暂无门店，请重新选择收货地址!',
+							success: (res) => {
+								if (res.confirm) {} else if (res.cancel) {}
+							}
+						});
+					}
+				});
+			},
+		},
+	};
+</script>
+
+<style lang="scss">
+	.wodeshouhuodiz {
+		font-size: 32rpx;
+		font-weight: bold;
+		box-sizing: border-box;
+		padding: 30rpx 16rpx;
+	}
+
+	.congxindingwei {}
+
+	.header-container {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0 10rpx 10rpx;
+
+		.left {
+			display: flex;
+			align-items: center;
+
+			image {
+				width: 48rpx;
+				height: 48rpx;
+			}
+		}
+
+		.right {
+			display: flex;
+
+			.item {
+				margin-left: 40rpx;
+				position: relative;
+				color: blue;
+			}
+		}
+	}
+
+	.app-container {
+		background: #f4f2f2;
+		padding: 20rpx;
+		padding-bottom: 250rpx;
+		box-sizing: border-box;
+	}
+
+	.list-container {
+		.item {
+			background: #ffffff;
+			border-radius: 20rpx;
+			margin-bottom: 20rpx;
+			padding: 20rpx;
+
+			.top {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+
+				.left {
+					display: flex;
+					align-items: flex-end;
+
+					.name {
+						font-size: 32rpx;
+						color: #333333;
+						line-height: 32rpx;
+					}
+
+					.phone {
+						font-size: 28rpx;
+						color: #666666;
+						margin-left: 20rpx;
+						line-height: 28rpx;
+					}
+
+					.default {
+						font-size: 22rpx;
+						color: #ffffff;
+						background: #fe781f;
+						padding: 6rpx 8rpx;
+						line-height: 20rpx;
+						margin-left: 20rpx;
+					}
+				}
+
+				.right {
+					width: 32rpx;
+					height: 32rpx;
+				}
+			}
+
+			.bottom {
+				font-size: 28rpx;
+				color: #333333;
+				line-height: 38rpx;
+				margin-top: 20rpx;
+			}
+		}
+	}
+
+	.bottom-container {
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		width: 100%;
+		box-sizing: border-box;
+		padding: 20rpx 20rpx 60rpx;
+		background: #f4f2f2;
+
+		.button {
+			width: 100%;
+			height: 72rpx;
+			border-radius: 72rpx;
+			text-align: center;
+			line-height: 72rpx;
+
+			&.red {
+				background: #ff3f42;
+				color: #ffffff;
+				margin-bottom: 20rpx;
+			}
+
+			&.white {
+				background: #ffffff;
+				color: #333333;
+			}
+		}
+	}
+</style>