youngee_b_api/pages/workspace/editaddress.vue

<template>
	<view style="position: relative;">
		<!-- 胶囊 -->
		<mvBar :mysNavConfig="mysNavConfig"></mvBar>
		<view :style="{marginTop:navH}"></view>
		<view>
			<!-- 修改个人信息完善 -->
			<view style="margin: 0 20rpx;">
				<uni-forms :rules="rules" :modelValue="formData" ref="form" validate-trigger="bind"
					err-show-type="undertext">
					<uni-forms-item name="name" required label="姓名">
						<uni-easyinput type="text" :inputBorder="true" v-model="formData.receiver_name" placeholder="请输入收件人">
						</uni-easyinput>
					</uni-forms-item>
					<uni-forms-item name="phone" required label="电话">
						<uni-easyinput type="number" maxlength="11" :inputBorder="true" v-model="formData.phone_number"
							placeholder="请输入联系电话">
						</uni-easyinput>
					</uni-forms-item>

					<uni-forms-item name="region_code" required label="地区">
						<picker class="picker" mode="multiSelector" :range="region" range-key="name"
							:value="regionIndex" @change="pickerChange" @columnchange="pickerColumnchange">
							<view class="pbox" :class="{'pbox_hover':regionStr != '请选择省市区'}">
								<view>{{regionStr}}</view>
								<text class="iconfont icon-you"></text>
							</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item name="detail_addr" required label="详细地址">
						<uni-easyinput type="text" :inputBorder="true" v-model="formData.detail_addr"
							placeholder="请输入详细地址(省/市/县/镇/)">
						</uni-easyinput>
					</uni-forms-item>
					</uni-group>
				</uni-forms>
				<button class="btn1" @click="submitForm('form')">保存</button>
			</view>
		</view>
	</view>
</template>

<script>
	import region from '@/components/pca-code.json';
	import mvBar from "@/components/mys_navBar/mysNavBar";
	export default {
		components: {
			mvBar,
		},
		data() {
			return {
				navH: getApp().globalData.navHeight,
				taskId: '',
				// 地区原数组
				oldRegion: region,
				// 处理后的数组
				region: [
					[],
					[],
					[]
				],
				// 选择省市区的下标Index  传则默认选中传递的
				regionIndex: [0, 0, 0],
				regionStr: '请选择省市区',
				mysNavConfig: {
					/* 开启单页显示首页图标 */
					isHome: true,
					/* 固定导航  */
					navFixed: true,
					/* 标题 （屏幕中心居中 两边图标中心居中使用slot center1） */
					navTitle: {
						text: "编辑收货地址",
						color: "",
						fontSize: "32rpx", // px upx rpx
						fontWeight: "normal", // 100 - 700
					},
					btnType: "type2",
					onLeftClick: '',
					/* type2 按钮 */
					type2Config: {
						// 左图标
						leftPath: "/static/img/png2.png",
						// 右图标
						rightPath: "/static/img/png4.png",
						// 圆角
						radius: "40rpx",
					},
				},
				formData: {
					receiver_name: '',
					phone_number: '',
					detail_addr: '',
					region_code: '',
					setdefault: false,
				},
				index: 0,
				index1: 0,
				data: {},
				show: false,
				rules: {
					detail_addr: {
						rules: [{
							required: true,
							errorMessage: '请输入详细地址'
						}, ]
					},
					name: {
						rules: [{
							required: true,
							errorMessage: '请输入收件人'
						}, ]
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: '请输入联系电话',
						}, ]
					},
					region_code: {
						rules: [{
							required: true,
							errorMessage: '请选择所在地区'
						}, ]
					},
				},
				address_id: '',
			};
		},
		onLoad() {
			uni.showLoading()
			setTimeout(() => {
				uni.hideLoading()
			}, 500)
		},
		onReady() {
			this.initRegion()
			this.$refs.form.setRules(this.rules)
		},
		onLoad(options) {
			let data = options.textObj.replace(/""/g, "");
			data = JSON.parse(decodeURIComponent(data))
			this.formData = data.address
			this.taskId = data.taskId
			let a = this.formData.region_code.toString().slice(0, 2)
			let b = this.formData.region_code.toString().slice(0, 4)
			let c = 0
			for (var i = 0; i < region.length; i++) {
				if (region[i].code == a) {
					a = region[i].name
					for (var j = 0; j < region[i].children.length; j++) {
						if (region[i].children[j].code == b) {
							b = region[i].children[j].name
							for (var o = 0; o < region[i].children[j].children.length; o++) {
								if (region[i].children[j].children[o].code == this.formData.region_code) {
									c = region[i].children[j].children[o].name
								}
							}
						}

					}
				}
			}
			this.regionStr = a + ' ' + b + ' ' + c
		},
		methods: {
			initRegion() {
				// 声明城市数组
				let cityArr = [];
				let countyArr = [];
				// 设置下标
				this.regionIndex = [0, 0, 0];
				// 改变城市列表
				this.region[1] = this.oldRegion[0].children.map(item => {
					cityArr.push({
						name: item.name,
						code: item.code
					});
				})
				this.$set(this.region, 1, cityArr);
				// 改变县区列表
				this.oldRegion[0].children[0].children.map(item => {
					countyArr.push({
						name: item.name,
						code: item.code
					});
				})
				this.$set(this.region, 2, countyArr);
			},
			/**
			 * 手动提交
			 * @param {Object} form
			 */
			submitForm(form) {
				// console.log(this.formData);
				this.$refs.form.validate().then(res => {
					const iphoneReg1 = /^1[0-9]{10}$/
					if (!iphoneReg1.test(this.formData.phone_number)) {
						uni.showToast({
							title: '电话号码格式不正确',
							icon: 'none'
						})
						return
					}
					uni.showToast({
						title: '提交成功'
					})
					this.$https.post('/youngee/c/t/p/update-logistics-address', {
							task_id: this.taskId,
							region_code: this.formData.region_code,
							detail_addr: this.formData.detail_addr,
							phone_number: this.formData.phone_number,
							receiver_name: this.formData.receiver_name,
						})
						.then(res => {
							console.log(res)
							uni.navigateBack()
						})
				}).catch(err => {
					console.error('验证失败：', errors)
					uni.showToast({
						title: '请填写所有信息',
						icon: 'none'
					})
				})
			},
			//城市选择
			pickerChange(e) {
				// console.log(e, '1');
				console.log("pickerChange e.detail.value: ", e.detail.value)
				this.regionIndex = e.detail.value;
				this.regionStr = this.region[0][this.regionIndex[0]].name + ' ' + this.region[1][this.regionIndex[1]]
					.name + ' ' +
					this.region[2][this.regionIndex[2]].name;

				// 组件传值
				this.$emit('region', [this.region[0][this.regionIndex[0]].code, this.region[1][this.regionIndex[1]].code,
					this.region[
						2][this.regionIndex[2]].code
				]);
				this.formData.region_code = this.region[2][this.regionIndex[2]].code;
				console.log(this.formData.region_code)
			},
			pickerColumnchange(e) {
				if (e.detail.column === 0) {
					// 声明城市数组
					let cityArr = [];
					let countyArr = [];
					// 设置下标
					this.regionIndex = [e.detail.value, 0, 0];
					// 改变城市列表
					this.region[1] = this.oldRegion[e.detail.value].children.map(item => {
						cityArr.push({
							name: item.name,
							code: item.code
						});
					})
					this.$set(this.region, 1, cityArr);
					// 改变县区列表
					this.oldRegion[e.detail.value].children[0].children.map(item => {
						countyArr.push({
							name: item.name,
							code: item.code
						});
					})
					this.$set(this.region, 2, countyArr);
				}
				if (e.detail.column === 1) {
					this.regionIndex[1] = e.detail.value;
					this.regionIndex[2] = 0;
					let countyArr = [];
					this.oldRegion[this.regionIndex[0]].children[this.regionIndex[1]].children.map(item => {
						countyArr.push({
							name: item.name,
							code: item.code
						});
					})
					this.$set(this.region, 2, countyArr);
				}
				if (e.detail.column === 2) {
					this.regionIndex[2] = e.detail.value;
				}
			}
		},
		created() {
			let provinceArr = [];
			let cityArr = [];
			this.oldRegion.map((item, index) => {
				this.region[0].push({
					name: item.name,
					code: item.code
				});
				if (this.previnceId == item.code) {
					provinceArr = item.children;
					this.regionIndex[0] = index;
				}
			})
			// console.log(provinceArr);
			provinceArr.map((item, index) => {
				this.region[1].push({
					name: item.name,
					code: item.code
				});
				if (this.cityId == item.code) {
					cityArr = item.children;
					this.regionIndex[1] = index;
				}
			})
			cityArr.map((item, index) => {
				this.region[2].push({
					name: item.name,
					code: item.code
				});
				if (this.countyId == item.code)
					this.regionIndex[2] = index;
			})
			if (this.isRevise)
				this.regionStr = this.region[0][this.regionIndex[0]].name + ' ' + this.region[1][this.regionIndex[1]]
				.name + ' ' + this.region[2][this.regionIndex[2]].name;
			else
				this.regionStr = '请选择省市区';
		}
	};
</script>
<style>
	picker {
		position: relative;
		display: block;
		cursor: pointer;
		padding-left: 20rpx !important;
		padding-top: 14rpx !important;
		color: grey !important;
	}

	/deep/.uni-forms-item__inner {
		border-bottom: none !important;
		margin-bottom: 0 !important;
	}
</style>
<style lang="scss" scoped>
	@charset "UTF-8";

	/* 头条小程序组件内不能引入字体 */
	/* #ifdef MP-TOUTIAO */
	@font-face {
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		src: url("~@/static/uni.ttf") format("truetype");
	}

	/* #endif */
	/* #ifndef APP-NVUE */

	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #FFFFFF;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 14px;
		line-height: inherit;
	}


	.menu {
		position: fixed;
		top: 180rpx;
		background-color: #FFFFFF;
		justify-content: space-around;
		height: 5%;
		width: 100%;
		display: flex;
		z-index: 10;
		margin-bottom: 10rpx;
	}

	.menu-item p {
		font-weight: 600;
		font-size: 90%;

		&.lor {
			border-bottom: 5rpx solid #F0D232;
			color: #F0D232;
			padding-bottom: 15rpx;
		}
	}

	.setdeault {
		display: flex;
		justify-content: space-between;
	}

	.btn1 {
		margin: 30rpx;
		font-size: 35rpx;
		color: #000;
		background-color: #F0D232;
		border: none;
		border-radius: 0;
	}



	.example {
		padding: 0 15px 15px;
	}

	.example-info {
		padding: 15px;
		color: #3b4144;
		background: #ffffff;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
		font-size: 14px;
		background-color: #ffffff;
	}

	/* #endif */
	.example {
		padding: 0 15px;
	}

	.example-info {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 15px;
		color: #3b4144;
		background-color: #ffffff;
		font-size: 14px;
		line-height: 20px;
	}

	.example-info-text {
		font-size: 14px;
		line-height: 20px;
		color: #3b4144;
	}

	.example-body {
		flex-direction: column;
		padding: 15px;
		background-color: #ffffff;
	}

	.word-btn-white {
		font-size: 18px;
		color: #FFFFFF;
	}

	.word-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border-radius: 6px;
		height: 48px;
		margin: 15px;
		background-color: #007AFF;
	}

	.word-btn--hover {
		background-color: #4ca2ff;
	}

	.example {
		padding: 0 10px 10px;
	}

	.uni-input-border,
	.uni-textarea-border {
		flex: 1;
		font-size: 14px;
		color: #666;
		border: 1px #FFFFFF solid;
		border-radius: 5px;
		/* #ifndef APP-NVUE */
		box-sizing: border-box;
		/* #endif */
	}

	.uni-input-border {
		padding: 0 10px;
		height: 35px;
	}

	.uni-textarea-border {
		padding: 10px;
		height: 80px;
	}

	.label-box {
		margin-right: 10px;
	}

	.transform-scale {
		transform: scale(0.7);
	}

	.butto {
		text-align: center;
	}

	.option {
		padding: 20rpx;
	}

	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
		;
	}

	.swiper {
		height: 300rpx;
	}

	.swiper-item {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}

	.info {
		position: absolute;
		right: 20rpx;
	}

	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}

	.signup {
		box-shadow: 0rpx 5rpx 40rpx #ccc;
		width: 100%;
		position: fixed;
		bottom: 0rpx;
		display: flex;
		height: 90rpx;
		padding-top: 2%;
		background-color: #FFFFFF;
		justify-content: space-around;
	}

	.signuptext {
		text-align: center;
		margin-top: 2%;

	}

	.signuptext p {
		font-size: 60%;
		color: #333333;
	}

	.signupbut {
		text-align: center;
		margin-top: 2%;
	}

	.but1 {
		width: 120%;
		text-align: center;
		background-color: #FCCF41;
		border-radius: 10rpx;
		color: #464100;
		font-size: 28rpx;
		line-height: 156%;

		font-weight: 500;
		height: 65%;
	}

	/deep/.uni-searchbar__box {
		border-color: #267CFF !important;
		border-width: 2rpx !important;
	}

	/deep/.uni-searchbar__box {
		background-color: #FFFFFF !important;
	}

	/deep/.uni-searchbar__text-placeholder {
		font-size: 30rpx !important;
	}

	/deep/.segmented-control__text {
		font-size: 34rpx !important;
	}

	/deep/.uni-data-checklist {
		padding-left: 20upx;
	}

	uni-picker {
		position: relative;
		display: block;
		cursor: pointer;
		padding-left: 20rpx !important;
		padding-top: 14rpx !important;
		color: grey !important;
	}

	/deep/.uni-date-x--border {
		border: 0px solid #dcdfe6 !important;
	}

	/deep/.is-input-border {
		border: 0px solid #c8c7cc !important;
	}

	/deep/.uni-progress-info {
		font-size: 25rpx !important;
	}

	/deep/.uni-error-message {
		position: absolute;
		bottom: -20rpx !important;
		left: 20rpx !important;
		text-align: left;
	}

	/deep/.uni-forms-item__inner {
		padding-bottom: 0rpx !important;
		margin-bottom: 30rpx !important;
		border-bottom: 0.5rpx solid #CCCCCC;
	}

	/deep/.uni-group__title {
		background-color: #FFFFFF !important;
	}

	/deep/.uni-list-item__content-title {
		font-size: 30rpx !important;
		color: #111111 !important;
	}

	/deep/.uni-progress-bar {
		border-radius: 10rpx !important;
	}

	/deep/.uni-progress-inner-bar {
		border-radius: 10rpx !important;
	}


	/deep/.is-input-border {
		border-radius: 20px !important;
		background-color: #fff;
	}

	.uni-easyinput__content-input {
		font-size: 30upx !important;
	}

	.content-clear-icon {
		font-size: 40upx !important;
	}

	/deep/.input-box {
		padding: 50upx;
		font-size: 30upx;

		.input-item {
			display: flex;

			border: 1upx solid #F8F8F8;
			line-height: 90upx;
			height: 90upx;
			margin-top: 20upx;
			background: #F8F8F8;
			border-radius: 48upx;

			.input-label {
				width: 150upx;
				text-align: center;
			}

			.input-body {
				position: relative;
				height: 100upx;
				width: calc(100% - 150upx);

				.input {
					line-height: 90upx;
					height: 90upx;
					position: relative;
					font-size: 28upx;
				}

				.eye {
					position: absolute;
					height: 50upx;
					width: 50upx;
					right: 20upx;
					top: 50%;
					transform: translateY(-50%);
				}

				.btn-code {
					position: absolute;
					right: 0upx;
					top: 50%;
					transform: translateY(-50%);
					background: none;
					color: #205592;
					width: 160upx;
					font-size: 24upx;
					box-sizing: border-box;
					text-align: center;
					padding: 0;
					height: 100upx;
					line-height: 100upx;
				}
			}
		}

		.select {
			// padding-top: 40upx;
			display: flex;
			justify-content: space-between;
			color: #003B67;
		}
	}

	/deep/.title-left {
		width: 3px;
		height: 16px;
		background: #267CFF;
		display: inline-block;
		border-radius: 3px;
		margin-top: 3px;
		vertical-align: top;
		margin-right: 10px;
	}
</style>