dev/dcp-app-gate/pages/profile/personIntegrate/userAddress.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('UserAddress')"></u-navbar>
		</view>
		<view class="content">
			<text class="title">{{$i18n.locale=='zh'?'常用地址':'Common Address'}}</text>
			<text
				class="address-num">{{$i18n.locale=='zh'?'您已经创建':'You have created'}}{{addressList.length}}{{$i18n.locale=='zh'?'个收货地址':'address'}},{{$i18n.locale=='zh'?'最多可创建25个':'A maximum of 25 can be created'}}</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" v-if="$i18n.locale=='zh'">
						<text
							class="detailAddress">{{item.province}}&nbsp;{{item.city}}&nbsp;{{item.area}}&nbsp;{{item.address}}</text>
					</view>
					<view class="mainAddress" v-if="$i18n.locale!='zh'">
						<text class="detailAddress">{{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 @click="toAdd" shape="circle" type="primary">
					<u-icon name="plus"></u-icon>
					<text
						style="margin-left:20rpx;background-color: #1579fb;">{{$i18n.locale=='zh'?'添加收货地址':'Add Received Address'}}</text>
				</u-button>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		addUmsUserCommodityAddresss
	} from "@/api/address"
	export default {
		data() {
			return {
				background: {
					backgroundImage: 'linear-gradient(270deg, #4BC0E2 0%, #538BE7 100%)',
				},
				backStyle: {
					color: '#FFFFFF',
				},
				addressList: [],
				userId: null,
				isShow: null,
			}
		},
		onShow() {
			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')
			},
			async checkboxChange(data) {
				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,
				};
				const tokendata = await this.$myRequest({
					url: '/sys/token',
					method: 'get'
				});
				// console.log(res.data)
				addUmsUserCommodityAddresss(params, tokendata.data).then((res) => {
					this.initData();
				});
			},
		},
		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;
		}

		.address-num {
			font-size: 22rpx;
			margin-left: 20%;
		}

		.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%;
				}
			}
		}
	}
</style>