dev/dcp-app-gate/pages/profile/personIntegrate/changeAddress.vue

<template>
	<view>
		<view>
			<u-navbar :back-text="i18n('Back')" :back-text-style="backStyle" back-icon-color="#fff" title-color="#fff"
				:background="background" title-width="300" :title="i18n('userChangeAddress')"></u-navbar>
		</view>
		<view class="content">
			<text class="title">{{$i18n.locale=='zh'?'常用地址':'Common Address'}}</text>
			<u-empty v-if="isShow" style="margin: 30rpx 0;" :text="$i18n.locale == 'zh' ? '暂无地址:' : 'No Address:'"
				mode="search">
			</u-empty>
			<view v-else class="list" v-for="(item,index) in addressList" :key="item.id">
				<view style="margin-right: 30rpx;">

					<image class="addressImg" v-if="item.status=='1'?true:false" src="/static/address/address.png"
						mode="">
					</image>
					<image class="addressImg" v-else src="/static/address/user-adrs.png" mode=""></image>

				</view>
				<view class="mainContent">
					<view>
						<text class="name">{{item.consignee }}</text>
						<text class="phone">{{item.mobile}}</text>
						<text v-if="item.status=='1'?true:false">
							<image v-if="$i18n.locale=='zh'" class="defaultImg" src="/static/address/user.png" mode="">
							</image>
							<image v-else class="defaultImg" src="/static/address/user123321.png" mode="">
							</image>
						</text>
					</view>
					<view class="mainAddress">
						<text
							class="detailAddress">{{item.province}}&nbsp;{{item.city}}&nbsp;{{item.area}}&nbsp;{{item.address}}</text>
					</view>
					<view class="radio" v-if="item.status=='1'?false:true">
						<u-checkbox-group>
							<u-checkbox @change="checkboxChange(item)" v-model="item.stauts" shape="circle">
								<text
									style="color: rgba(51, 51, 51, 1);font-size: 20rpx;">{{$i18n.locale=='zh'?'设为默认地址':'Set As Default Address'}}</text>
							</u-checkbox>
						</u-checkbox-group>
					</view>
				</view>

				<view class="right" @click="toEdit(item)">
					<image class="editImg" style="display: inline-block;width: 24rpx;height: 24rpx;"
						src="/static/address/user-12.png"></image>
				</view>


			</view>
			<view class="botton">
				<u-button @tap="toAdd" shape="circle" type="primary" style="background-color: #1579fb;">
					<u-icon name="plus"></u-icon>
					<text style="margin-left:20rpx;">{{$i18n.locale=='zh'?'添加收货地址':'Add Received Address'}}</text>

				</u-button>

			</view>
			<view class="user-btn">
				<button @tap="dialogToggle()" style="background-color: #1579fb;">
					<text class="btn-text">{{$i18n.locale=='zh'?'确定':'OK'}}</text>

				</button>

			</view>
			<view>
				<!-- 提示信息弹窗 -->
				<uni-popup ref="messageaa">
					<uni-popup-message :type="msgType" :message="messageText" :duration="2000">
					</uni-popup-message>
				</uni-popup>
			</view>

			<view>
				<!-- 提示窗示例 -->
				<uni-popup ref="alertDialog" type="dialog" v-if="$i18n.locale=='zh'">
					<uni-popup-dialog :type="msgType" cancelText="取消" confirmText="确认" content="是否添加到我的订单？"
						@confirm="dialogConfirm(shopDetails)" @close="dialogClose" mode='base'></uni-popup-dialog>
				</uni-popup>
				<uni-popup ref="alertDialog" type="dialog" v-if="$i18n.locale!='zh'">
					<uni-popup-dialog :type="msgType" cancelText="Cancel" confirmText="Notarize
" content="Do you want to add it to my order?" @confirm="dialogConfirm(shopDetails)" @close="dialogClose" mode='base'>
					</uni-popup-dialog>
				</uni-popup>
			</view>
		</view>
	</view>
</template>
<script>
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'

	import {
		addUmsUserCommodityAddresss,
		exchangeUserPoints
	} from "@/api/address"
	export default {
		components: {
			uniPopupDialog,
			uniPopupMessage,
			uniPopup
		},
		data() {
			return {
				background: {
					backgroundImage: 'linear-gradient(270deg, #4BC0E2 0%, #538BE7 100%)',
				},
				backStyle: {
					color: '#FFFFFF',
				},
				addressList: [],
				userId: null,
				isShow: null,
				addressId: null,
				shopId: null,
				shopNum: null,
				shopDetails: {},
				msgType: 'success',
				messageText: '请稍后...',


			}

		},
		onLoad(option) {
			console.log(option.id, '--------------------'); //礼品id
			console.log(option.num, '========================'); //礼品数量
			this.shopId = option.id;
			this.shopNum = option.num;
			this.initData()
		},
		methods: {
			initData() {
				this.getAddressList()
			},
			// 获取地址列表
			async getAddressList() {
				this.userId = JSON.parse(uni.getStorageSync("user"))
				let params = {
					userId: this.userId.id,
				}
				const res = await this.$myRequest({
					url: '/uc/umsUserCommodityAddresss',
					method: 'get',
					data: params
				});
				let data = res.data
				if (JSON.stringify(data) !== "{}") {
					this.addressList = res.data.umsUserCommodityAddresss
					this.isShow = false
				} else {
					this.isShow = true
				}
			},
			navTo(route) {
				this.$mRouter.push({
					route
				});
			},
			i18n(data) {
				return this.$t('common.' + data);
			},
			// 新建地址
			toAdd() {
				this.navTo('/pages/profile/personIntegrate/addAddress')
			},
			// 编辑地址
			toEdit(item) {
				uni.setStorageSync('addressId', item.id);
				this.navTo('/pages/profile/personIntegrate/editAddress')
			},
			checkboxChange(data) {
				this.addressId = data.id
				let params = {
					// userId: this.userId.id,
					consignee: data.consignee,
					mobile: data.mobile,
					province: data.province,
					city: data.city,
					area: data.area,
					address: data.address,
					postalCode: data.postalCode,
					status: "1",
					id: data.id,
				};
			},
			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
			dialogToggle() {
				let test = this.addressId ? this.addressId : this.addressList[0].id
				let ShopId = this.shopId
				let ShopNum = this.shopNum
				let params = {
					id: ShopId,
					exchangeQuantity: ShopNum,
					addressId: test
				}

				this.shopDetails = params
				// console.log(this.shopDetails);
				this.$refs.alertDialog.open()
			},
			async dialogConfirm(params) {
				const tokendata = await this.$myRequest({
					url: '/sys/token',
					method: 'get'
				});
				let demo = params
				exchangeUserPoints(demo, tokendata.data)
					.then((res) => {
						if (res.status == 200) {
							if (this.$i18n.locale == 'zh') {
								this.messageText = '兑换成功!'
							} else {
								this.messageText = 'For successful!'
							}

						} else {
							this.msgType = 'error'
							this.messageText = res.msg

						}
					})
					.catch((error) => {
						console.log(error.msg, '---msg---');
						this.messageText = error.msg
					});
				this.$refs.alertDialog.close()
				this.$refs.messageaa.open()
				setTimeout(() => {
					uni.navigateTo({
						url: './integrateConversion',
					});
				}, 3000)
			},

			dialogClose() {},
		},
		computed: {
			defaultAddress() {
				this.addressList.forEach((item, index) => {
					if (item.status == "1") {
						return true
					} else {
						return false
					}
				})
			}
		}

	}
</script>
<style lang="scss" scoped>
	.content {
		padding: 20rpx 10rpx 20rpx 30rpx;

		.title {
			font-size: 32rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #333333;
			line-height: 34rpx;
		}

		.list {
			position: relative;
			margin-top: 10rpx;
			background: #FFF;
			border-radius: 5%;
			padding: 30rpx;
			display: flex;
			flex-direction: row;

			.addressImg {
				display: inline-block;
				width: 52rpx;
				height: 52rpx;
				margin-top: 20rpx;
			}

			.mainContent {
				.name {
					display: inline-block;
					width: 150rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					color: rgba(51, 51, 51, 1);
					font-size: 30rpx;
					font-family: PingFangSC-Semibold;
					white-space: nowrap;
					font-weight: 600;
					line-height: 38rpx;
				}

				.phone {
					display: inline-block;
					width: 200rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow-wrap: break-word;
					color: rgba(162, 162, 162, 1);
					font-size: 26rpx;
					white-space: nowrap;
					line-height: 38rpx;
					margin: 0 30rpx 0 30rpx;

				}

				.defaultImg {
					display: inline-block;
					width: 70rpx;
					height: 28rpx;
				}

				.mainAddress {
					.detailAddress {
						display: inline-block;
						width: 491rpx;
						margin-right: 30rpx;
						overflow-wrap: break-word;
						color: rgba(51, 51, 51, 1);
						font-size: 26rpx;
						line-height: 37rpx;
					}
				}

			}

			.right {
				.editImg {
					margin-top: 200%;
				}
			}
		}

		.botton {
			margin-bottom: 10rpx;
		}

		.user-btn {
			background-color: #2979ff;
			border-radius: 50rpx;
			overflow: hidden;

			.btn-text {
				// margin-left: 20rpx;
				color: #fff;
			}
		}
	}
</style>