bocai_supplyChain_uni/root/person/addressList.vue

<template>
	<div class="container">
		<template v-if="!hasAddress">
			<div class="g_text_c">
				<i class="t-icon t-icon-zanwushouhuodizhi" style="width: 92px; height: 92px; margin-top: 90px"></i>
				<div class="g_mt_20 g_c_c">暂无收货地址</div>
			</div>
		</template>
		<template v-else>
			<radio-group @change="radioChange" class="g_mb_40">
				<div v-for="item in addressList" :key="item" class="g_bg_f g_mt_16" :class="item.defaultFlag == 1 ? 'borderImg' : ''">
					<div class="g_flex_row_between" style="padding: 16px 10px">
						<div class="g_flex_1 g_c_3">
							<div class="g_fs_18">
								<span class="g_fw_600">{{ item.contacts }}</span>
								<span class="g_c_6 g_ml_10">{{ item.contactsTel }}</span>
							</div>
							<div class="g_mt_8 g_fs_16">{{ item.address }}</div>
						</div>
						<div class="g_w_54">
							<div class="g_fs_14 g_flex_row_start" :style="{ color: typeList[item.classify].color }">
								<i :class="typeList[item.classify].icon" class="iconfont icon-jia g_fs_15 g_mr_4"></i>
								<span class="">
									{{ typeList[item.classify].name }}
								</span>
							</div>
						</div>
					</div>
					<div style="height: 1rpx; background-color: #eee; margin: 0 10px"></div>
					<div class="g_flex_row_between flex_center" style="padding: 16px 10px">
						<div class="g_flex_row_between flex_center">
							<radio :value="item.id" :checked="item.defaultFlag == 1" color="#f40" style="transform: scale(0.7)" />
							<span class="g_fs_14" :class="item.defaultFlag == 1 ? 'g_c_f40' : 'g_c_9'">{{ item.defaultFlag == 1 ? "默认" : "设为默认" }}</span>
						</div>
						<div class="g_text_unset g_c_9" @click="editAddress(item.id)">编辑</div>
					</div>
				</div>
			</radio-group>
		</template>
		<div class="g_pt_80">
			<g-button btnText="添加地址" type="primary" class=" " @clickBtn="addAddress"></g-button>
		</div>
	</div>
</template>

<script>
const app = getApp();
// pages/messageDetail/index.js
export default {
	onShareAppMessage() {
		return this.G.shareFun();
	},
	data() {
		return {
			addressList: [],
			typeList: [
				{ color: "#4db54b", icon: "icon-jia", name: "家" },
				{ color: "#ff4400", icon: "icon-gongsi", name: "公司" },
				{ color: "#ff7900", icon: "icon-qita", name: "其他" },
			],
			hasAddress: false,
		};
	},
	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad(options) {
		console.log(options);
		if (options.id) {
			this.currentId = options.id;
		}
	},
	/**
	 * 生命周期函数--监听页面初次渲染完成
	 */
	onReady() {},
	/**
	 * 生命周期函数--监听页面显示
	 */
	onShow() {
		this.getAddresList();
	},
	/**
	 * 生命周期函数--监听页面隐藏
	 */
	onHide() {},
	/**
	 * 生命周期函数--监听页面卸载
	 */
	onUnload() {},
	/**
	 * 页面相关事件处理函数--监听用户下拉动作
	 */
	onPullDownRefresh() {},
	/**
	 * 页面上拉触底事件的处理函数
	 */
	onReachBottom() {},
	methods: {
		getAddresList() {
			console.log("123123123123");
			this.G.Post(this.api.user_addressList, {}, (res) => {
				console.log(res);
				res.forEach((item) => {
					item.address = item.provinceName + item.cityName + item.districtName + item.address;
					item.classify = item.classify || item.classify === 0 ? item.classify : 0;
				});
				this.addressList = res;
				if (this.addressList.length > 0) {
					this.hasAddress = true;
				} else {
					this.hasAddress = false;
				}
			});
		},
		radioChange(e) {
			console.log(e);
			this.addressList.forEach((item) => {
				item.defaultFlag = 0;
				if (item.id == e.detail.value) {
					item.defaultFlag = 1;
				}
			});
			this.G.Post(this.api.user_defaultAddress, { id: e.detail.value, defaultFlag: 1 }, (res) => {
      });

			console.log(this.addressList);
		},
		addAddress() {
			uni.navigateTo({
				url: "/root/person/addressForm",
			});
		},
		editAddress(id) {
			uni.navigateTo({
				url: "/root/person/addressForm?id=" + id,
			});
		},
	},
};
</script>

<style>
page {
	background-color: #f5f5f5;
}
.container {
	padding: 10px;
	padding-top: 0;
}
.text-hover {
	color: #666;
}
.normalBtn {
	width: 260px !important;
	height: 42px;
	line-height: 42px;
	color: #fff;
	border-radius: 999px;
}
.borderImg {
	border-image: url("https://matripe.oss-cn-beijing.aliyuncs.com/goodJob/wmk.svg") 4 fill / 6px;
	border-image-width: 6px 0 0 0;
	clip-path: inset(0 round 8px);
}
</style>