wx-qhb/pageC/addEditAddress/addEditAddress.vue

<template>
	<view class="page">
		<view class="content">
			<view class="title">
				<text class="title-left">{{ i18n.contacts }}</text>
				<!-- <view class="title-right">
          <image
            src="../../static/mine/331.png"
            class="title-icon"
            mode=""
          ></image>
          <text>{{ i18n.wxAddress }}</text>
        </view> -->
			</view>
			<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
			<u--form labelPosition="left" :model="model1" ref="uForm">
				<u-form-item labelWidth="150rpx" :label="i18n.name" borderBottom ref="item1">
					<u--input v-model="model1.userInfo.name" :placeholder="i18n.goods" border="none"></u--input>
				</u-form-item>

				<u-form-item labelWidth="150rpx" :label="i18n.phone" borderBottom ref="item1">
					<u--input v-model="model1.userInfo.phone" :placeholder="i18n.pleasePhoneNumber"
						border="none"></u--input>
				</u-form-item>
				<u-form-item labelWidth="150rpx" :label="i18n.city" borderBottom @click="show = true" ref="item1">
					<u--input v-model="model1.userInfo.city" disabled disabledColor="#ffffff"
						:placeholder="i18n.township" border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<u-form-item labelWidth="150rpx" :label="i18n.detailed" borderBottom ref="item1">
					<u--input v-model="model1.userInfo.detailed" :placeholder="i18n.sect" border="none"></u--input>
				</u-form-item>
				<view class="company">
					<u--input v-model="model1.userInfo.company" :placeholder="i18n.company" border="none"></u--input>
				</view>
				<view style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          ">
					<view class="item-left" @click="model1.userInfo.is_default = !model1.userInfo.is_default">
						<image src="../../static/mine/327.png" class="address-icon" mode=""
							v-if="!model1.userInfo.is_default"></image>

						<image v-else src="../../static/mine/330.png" class="address-icon" mode=""></image>
						<text>{{ i18n.initial }}</text>
					</view>
					<text style="font-size: 24rpx; color: #333" @click="empty">{{
            i18n.empty
          }}</text>
				</view>
			</u--form>
		</view>
		<SelectCity :show="show" @close="close" :cityId="cityId" />
		<view class="" v-if="addlist.length>0 && ifadd==0">
			<view class="history">{{i18n.history}}</view>
			<view class="add" @click="topadd(item)" v-for="(item,idx) in addlist" :key="idx">
				<view class="">
					<text class="name">{{item.name}}</text>
					<text class="phone">{{item.mobile.slice(0,3)}}****{{item.mobile.slice(-4)}}</text>
				</view>
				<view class="addinfo">{{item.province_name + item.city_name + item.area_name + item.address}}</view>
			</view>
		</view>
		<view class="footer">
			<button class="save" @click="submit">{{ i18n.preserve }}</button>
		</view>
	</view>
</template>

<script>
	import SelectCity from "./component/selectCity.vue";
	export default {
		components: {
			SelectCity,
		},
		computed: {
			i18n() {
				return this.$t("index");
			},
		},
		data() {
			return {
				ifadd: 0,
				show: false,
				cityId: [],
				cityPid: {},
				addressId: "",
				model1: {
					userInfo: {
						name: "",
						sex: "",
						phone: "",
						city: "",
						detailed: "",
						company: "",
						is_default: 0,
						country_id: 0,
					},
				},
				rules: {
					"userInfo.name": {
						type: "string",
						required: true,
						message: "请填写姓名",
						trigger: ["blur", "change"],
					},
					"userInfo.sex": {
						type: "string",
						max: 1,
						required: true,
						message: "请选择男或女",
						trigger: ["blur", "change"],
					},
				},
				addlist: []
			};
		},
		onLoad(options) {
			if (options.ifadd) {
				this.ifadd = options.ifadd
			} else {
				this.ifadd = 0
			}
			if (options.id) {
				console.log(options.id);
				this.addressId = options.id;
				this.getAddressDetail(options.id);
			}
		},
		onShow() {
			this.getaddlist()
		},
		methods: {
			topadd(item) {
				const eventchannel = this.getOpenerEventChannel();
				eventchannel.emit("topadd", item);
				uni.navigateBack({
					delta: 1,
				});
			},
			//地址列表
			getaddlist(id) {
				uni.$u.http.get('/api/address', {
					params: {
						is_page: 0,
						is_domestic: 1
					}
				}).then((res) => {
					console.log(res);
					this.addlist = res
				}).catch(() => {

				})
			},
			//编辑 or 新增
			submit() {
				const obj = {
					mobile: this.model1.userInfo.phone,
					name: this.model1.userInfo.name,
					is_default: this.model1.userInfo.is_default ? 1 : 0,
					company_name: this.model1.userInfo.company,
					address: this.model1.userInfo.detailed,
					country_id: this.model1.userInfo.country_id,
				};
				//有id为编辑，没有id为新增
				if (this.addressId) {
					uni.$u.http
						.put(`/api/address/${this.addressId}`, {
							...obj,
							...this.cityPid
						})
						.then((res) => {
							console.log(res);
							const eventchannel = this.getOpenerEventChannel();
							eventchannel.emit("topadd", res);
							uni.navigateBack({
								delta: 1,
							});
						})
						.catch(() => {});
				} else {
					uni.$u.http
						.post(`/api/address`, {
							...obj,
							...this.cityPid
						})
						.then((res) => {
							// console.log(res);
							const eventchannel = this.getOpenerEventChannel();
							eventchannel.emit("topadd", res);
							uni.navigateBack({
								delta: 1,
							});
						})
						.catch(() => {});
				}
			},

			//清空输入
			empty() {
				this.model1.userInfo = {
					name: "",
					sex: "",
					phone: "",
					city: "",
					detailed: "",
					company: "",
					is_default: 0,
					country_id: 0,
				};
			},
			//关闭选择城市弹窗
			close(obj) {
				this.show = false;
				if (obj && obj.name) {
					this.model1.userInfo.city =
						obj.name + obj.children.name + obj.children.children.name;
					this.cityId = [obj.id, obj.children.id, obj.children.children.id];
					this.cityPid.province_id = obj.id;
					this.cityPid.city_id = obj.children.id;
					this.cityPid.area_id = obj.children.children.id;
				}
			},
			//回显数据
			getAddressDetail(id) {
				uni.$u.http.get(`/api/address/${id}`).then((res) => {
					this.model1.userInfo.city =
						res.province_name + res.city_name + res.area_name;
					this.model1.userInfo.name = res.name;
					this.model1.userInfo.phone = res.mobile;
					this.model1.userInfo.detailed = res.address;
					this.model1.userInfo.company = res.company_name;
					this.model1.userInfo.is_default = res.is_default;
					this.model1.userInfo.country_id = res.country_id;
					if (res.province_id && res.city_id && res.area_id) {
						this.cityId = [res.province_id, res.city_id, res.area_id];
					}
				});
			},
		},
		mounted() {
			uni.setNavigationBarTitle({
				title: this.i18n.newAddress,
			});
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules);
		},
	};
</script>

<style lang="scss" scoped>
	.add {
		width: 702rpx;
		// height: 160rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 24rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;

		.addinfo {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #222222;
			line-height: 34rpx;
			text-align: left;
			font-style: normal;
		}

		.name {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			line-height: 40rpx;
			text-align: left;
			font-style: normal;
		}

		.phone {
			font-family: SFPro, SFPro;
			font-weight: 400;
			font-size: 24rpx;
			color: #333333;
			line-height: 28rpx;
			text-align: left;
			font-style: normal;
			margin-left: 16rpx;
		}
	}

	.history {
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #333333;
		line-height: 42rpx;
		text-align: left;
		font-style: normal;
		margin: 28rpx 0 24rpx;
	}

	.page {
		padding: 20rpx 24rpx;

		.content {
			background-color: #fff;
			border-radius: 16rpx;
			padding: 0 24rpx;

			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 100rpx;
				border-bottom: 2rpx solid rgba(151, 151, 151, 0.1);

				.title-left {
					font-size: 32rpx;
					color: #333;
					font-weight: 600;
				}

				.title-icon {
					width: 26rpx;
					height: 26rpx;
					margin-right: 10rpx;
				}

				.title-right {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: rgba(51, 51, 51, 0.6);
				}
			}

			.company {
				height: 102rpx;
				display: flex;
				align-items: center;
				border-bottom: 2rpx solid rgba(151, 151, 151, 0.1);
			}
		}

		.item-left {
			font-size: 24rpx;
			color: #333;
			display: flex;
			align-items: center;
			height: 86rpx;

			.address-icon {
				width: 26rpx;
				height: 26rpx;
				margin-right: 10rpx;
			}
		}

		.footer {
			background-color: #fff;
			position: fixed;
			bottom: 0;
			height: 146rpx;
			width: 750rpx;
			left: 0;
			padding-top: 20rpx;

			.save {
				width: 702rpx;
				margin: 0 auto;
				background-color: #f83224;
				color: #fff;
				border-radius: 40rpx;
			}
		}
	}
</style>