wx-qhb/pageC/internationalAddress/internationalAddress.vue

<template>
	<view class="page">
		<view class="content">
			<view class="title">
				<text class="title-left">{{ i18n.contacts }}</text>
			</view>
			<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
			<u--form labelPosition="left" :model="model1" ref="uForm">
				<u-form-item labelWidth="150rpx" @click="showDialog = true" :label="i18n.country" borderBottom
					ref="item1">
					<u--input v-model="model1.userInfo.country" disabled disabledColor="#ffffff"
						:placeholder="i18n.selection" border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<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>
<!-- 
				<view class="item u-flex ">
					<text class="left">{{i18n.phone}}</text>
					<view class="right" style="display: flex;">
						<input style="width: 100rpx;" type="text" placeholder="(+86)"
							v-model="model1.userInfo.phonecode" />
						<text style="margin-right: 20rpx;">-</text>
						<u--input v-model="model1.userInfo.phone" :placeholder="i18n.pleasePhone"
							border="none"></u--input>
					</view>
				</view> -->


				<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> -->
						<view class="right" style="display: flex;">
							<input style="width: 100rpx;" type="text" placeholder="(+86)"
								v-model="model1.userInfo.phonecode" />
							<!-- <u--input style="width: 100rpx;" v-model="model1.userInfo.phonecode" placeholder="(+86)" border="none"></u--input> -->
							<text style="margin-right: 20rpx;">-</text>
							<u--input v-model="model1.userInfo.phone" :placeholder="i18n.pleasePhone"
								border="none"></u--input>
						</view>
				</u-form-item>
				<u-form-item labelWidth="150rpx" :label="i18n.postalCode" borderBottom ref="item1">
					<u--input v-model="model1.userInfo.zip_code" :placeholder="i18n.PleacePostalCode"
						border="none"></u--input>
				</u-form-item>
				<u-form-item labelWidth="150rpx" :label="i18n.city" borderBottom @click="openCity" 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>

				<u-form-item labelWidth="150rpx" :label="i18n.companyName" borderBottom ref="item1">
					<u--input v-model="model1.userInfo.companyName" :placeholder="i18n.company"
						border="none"></u--input>
				</u-form-item>
				<u-form-item labelWidth="150rpx" :label="i18n.email" borderBottom ref="item1">
					<u--input v-model="model1.userInfo.email" :placeholder="i18n.pleaseEmail" border="none"></u--input>
				</u-form-item>
				<view style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          ">
					<view class="item-left">
						<image src="../../static/mine/330.png" class="address-icon" mode=""></image>
						<text>{{ i18n.addressBook }}</text>
					</view>
					<text style="font-size: 24rpx; color: #333" @click="empty">{{
            i18n.empty
          }}</text>
				</view>
			</u--form>
		</view>
		<!-- <SelectCity :show="show" @close="close" :countryId="country.id" /> -->
		<view class="footer">
			<button class="save" @click="submit">{{ i18n.preserve }}</button>
		</view>

		<u-picker :show="show" :columns="cityList" keyName="name" @confirm="countrycConfirm" @cancel="show = false"
			:closeOnClickOverlay="true" @close="close"></u-picker>
		<u-picker :show="showDialog" :columns="columns" keyName="name" @cancel="showDialog = false"
			:closeOnClickOverlay="true" @confirm="confirm" @close="close"></u-picker>
	</view>
</template>

<script>
	import SelectCity from "../addEditAddress/component/selectCity.vue";
	export default {
		components: {
			SelectCity,
		},
		computed: {
			i18n() {
				return this.$t("index");
			},
		},
		data() {
			return {
				show: false, //城市弹窗
				showDialog: false, //国家弹窗
				//表单数据
				model1: {
					userInfo: {
						name: "",
						phone: "",
						country: "",
						postalCode: "",
						city: "",
						detailed: "",
						email: "",
						companyName: "",
						zip_code: "",
					},
				},
				selectedCity: {}, //选中的城市
				columns: [], //获取到的国家数据
				country: {}, //选中的国家数据
				cityList: [
					[]
				], //选中国家之后的城市数据
				addressId: "", //编辑的地址id
				rules: {
					"userInfo.name": {
						type: "string",
						required: true,
						message: "请填写姓名",
						trigger: ["blur", "change"],
					},
					"userInfo.sex": {
						type: "string",
						max: 1,
						required: true,
						message: "请选择男或女",
						trigger: ["blur", "change"],
					},
				},
			};
		},
		onLoad(options) {
			if (options.id) {
				this.addressId = options.id;
				this.getAddressDetail(options.id);
			} else {
				uni.setNavigationBarTitle({
					title: this.i18n.newAddress,
				});
			}
		},
		methods: {
			//回显数据
			getAddressDetail(id) {
				uni.setNavigationBarTitle({
					title: "编辑地址",
				});
				uni.$u.http.get(`/api/address/${id}`).then((res) => {
					this.model1.userInfo.city = res.province_name;
					this.model1.userInfo.name = res.name;
					this.model1.userInfo.phone = res.mobile;
					this.model1.userInfo.detailed = res.address;
					this.model1.userInfo.companyName = res.company_name;
					this.model1.userInfo.is_default = res.is_default;
					this.model1.userInfo.country = res.country_name;
					this.model1.userInfo.email = res.email;
					this.country.id = res.country_id;
					this.selectedCity.id = res.province_id;
					this.model1.userInfo.zip_code = res.zip_code;
					this.model1.userInfo.phonecode = res.global_roaming;
				});
			},

			//清空输入
			empty() {
				this.model1.userInfo = {
					name: "",
					phone: "",
					country: "",
					postalCode: "",
					city: "",
					detailed: "",
					email: "",
					companyName: "",
					zip_code: "",
					phonecode:'',
				};
			},
			//选择国家
			confirm(e) {
				this.country = e.value[0];
				this.model1.userInfo.country = this.country.name;
				this.getCityList(this.country.id);
				this.showDialog = false;
			},
			//打开选择城市的弹窗
			openCity() {
				//判断是否选择国家
				if (JSON.stringify(this.country) != "{}") {
					//判断选中的国家有没有城市数据
					if (this.cityList[0].length > 0) {
						this.show = true;
					} else {
						uni.$u.toast("该国家没有城市数据，请直接填写详细地址");
					}
				} else {
					uni.$u.toast("请先选择国家");
				}
			},
			//选择国家
			countrycConfirm(e) {
				this.selectedCity = e.value[0];
				this.model1.userInfo.city = this.selectedCity.name;
				this.show = false;
			},
			submit() {
				const obj = {
					mobile: this.model1.userInfo.phone,
					name: this.model1.userInfo.name,
					country_id: this.country.id,
					province_id: this.selectedCity.id,
					address: this.model1.userInfo.detailed,
					company_name: this.model1.userInfo.companyName,
					email: this.model1.userInfo.email,
					zip_code: this.model1.userInfo.zip_code,
					global_roaming: this.model1.userInfo.phonecode,
				};
				if (this.addressId) {
					uni.$u.http.put(`/api/address/${this.addressId}`, obj).then((res) => {
						uni.navigateBack({
							delta: 1,
						});
					});
				} else {
					uni.$u.http.post(`/api/address`, obj).then((res) => {
						uni.navigateBack({
							delta: 1,
						});
					});
				}
			},
			//关闭弹窗
			close() {
				this.show = false;
				this.showDialog = false;
			},
			// 获取所有国家
			getCountryList() {
				uni.$u.http.get(`/api/area?is_domestic=0&pid=`).then((res) => {
					this.columns = [res];
				});
			},
			// getCountryList() {
			//   uni.$u.http.get(`/api/container/country`).then((res) => {
			//     this.columns = [res];
			//   });
			// },
			//根据国家获取城市
			getCityList(num) {
				uni.$u.http.get(`/api/area/tree?pid=${num}`).then((res) => {
					this.cityList = [res];
				});
			},
		},
		mounted() {
			this.getCountryList();
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules);
		},
	};
</script>

<style lang="scss" scoped>
	.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>