youngee_c_web_v2/pages/mycenter/myinformation/personinfo.vue

<template>
	<view style="position: relative;">
		<!-- 胶囊 -->
		<mvBar :mysNavConfig="mysNavConfig"></mvBar>
		<view style="height: 180rpx;width: 100%; position: fixed;background-color: #FFFFFF;top: 0;z-index: 8;">
		</view>
		<view class="menu">
			<view class="menu-item">
				<p class='lor'>个人资料</p>
			</view>
			<view class="menu-item" @click="tomylocation()">
				<p>收货地址</p>
			</view>
			<view class="menu-item" @click="tomyaccount()">
				<p>社媒账号</p>
			</view>
			<view class="menu-item" @click="tomybank()">
				<p>提现绑定</p>
			</view>
		</view>
		<view style="padding-top: 260rpx;width: 97%;">
			<!-- 个人信息完善 -->
			<view style="margin: 0 20rpx;">
				<uni-forms :rules="rules" :value="formData" ref="form" validate-trigger="bind"
					err-show-type="undertext">

					<uni-forms-item name="age" label="年龄区间">
						<picker @change="bindPickerChange" :value="index" :range="array"
							range-key="age_bracket_discribe">
							<view>{{ Xage }}</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item name="skintype" label="国籍">
						<picker @change="bindPickerChange1" :value="index1" :range="array1" range-key="name">
							<view>{{ array1[index1].name }}</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item name="vregion" 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="phone" required label="联系电话">
						<uni-easyinput type="number" maxlength="11" :inputBorder="true" v-model="formData.phone"
							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 {
				// 原数组
				oldRegion: region,
				// 处理后的数组
				region: [
					[],
					[],
					[]
				],
				// 选择省市区的下标Index  传则默认选中传递的
				regionIndex: [0, 0, 0],
				// 省市区字符串
				regionStr: '请选择省市区',
				formData: {
					wechat: '',
					age: '',
					nationality: '',
					phone: '',
					sex: '',
					visitStoreRegion: '',
				},
				index: 0,
				index1: 0,
				Xage: '请选择',
				sex1: [{
					text: '男',
					value: 1
				}, {
					text: '女',
					value: 2
				}],
				array: [{
					age_bracket_discribe: '请选择',
					age_aid: 0
				}, {
					age_bracket_discribe: '0~18',
					age_aid: 1
				}, {
					age_bracket_discribe: '18~25',
					age_aid: 2
				}, {
					age_bracket_discribe: '26~30',
					age_aid: 3
				}, {
					age_bracket_discribe: '30~40',
					age_aid: 4
				}, {
					age_bracket_discribe: '40+',
					age_aid: 5
				}],
				array1: [{
					name: '请选择',
					id: 0
				}, {
					name: '中国',
					id: 1
				}, {
					name: '外国',
					id: 2
				}],
				data: {},
				show: false,
				rules: {
					// wechat: {
					// 	rules: [{
					// 		required: true,
					// 		errorMessage: '请输入微信号'
					// 	}, ]
					// },
					// sex: {
					// 	rules: [{
					// 		required: true,
					// 		errorMessage: '请选择性别'
					// 	}, ]
					// },
					phone: {
						rules: [{
								required: true,
								errorMessage: '请输入联系电话'
							},
						]
					},
				},
				mysNavConfig: {
					/* 开启单页显示首页图标 */
					isHome: true,
					/* 固定导航  */
					navFixed: true,
					/* 标题 （屏幕中心居中 两边图标中心居中使用slot center1） */
					navTitle: {
						text: "我的信息",
						color: "",
						fontSize: "32rpx", // px upx rpx
						fontWeight: "normal", // 100 - 700
					},
					btnType: "type2",
					onLeftClick: '/pages/mycenter/mycenter',
					/* type2 按钮 */
					type2Config: {
						// 左图标
						leftPath: "/static/img/png2.png",
						// 右图标
						rightPath: "/static/img/png4.png",
						// 圆角
						radius: "40rpx",
					},
				},
			};
		},
		onLoad() {
			uni.showLoading()
			// this.formData 应该包含所有需要校验的表单
			// 模拟异步请求数据
			setTimeout(() => {
				// 	this.formData = {
				// 		wechat: '',
				// 		age: '',
				// skintype: '',
				// 	}
				uni.hideLoading()
			}, 500)
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		onShow() {
			console.log(this.array)
			console.log(this.array1)
			this.getlist()
			this.getlist1()
		},

		methods: {
			// 进入收货地址填写页面
			tomylocation() {
				uni.navigateTo({
					url: './mylocation'
				});
			},
			// 进入社媒账号绑定页面
			tomyaccount() {
				uni.navigateTo({
					url: './myaccount'
				});
			},
			// 进入提现绑定页面
			tomybank() {
				uni.navigateTo({
					url: './mybank'
				});
			},
			// 信息表
			getlist() {
				this.$https.get('/youngee/c/g/get-info-tables')
					.then(res => {
						console.log(res)
						this.array = res.data.data.AgeBracket
					})
			},
			// 达人详细信息表
			getlist1() {
				this.$https.get('/youngee/c/t/g/get-talent-info')
					.then(res => {
						console.log(res)
						if (res.data.data.talent_wx_number !== null) {
							if (res.data.data.talent_age_bracket !== 0) {
								for (var i = 0; i < this.array.length; i++) {
									if (this.array[i].age_aid == res.data.data.talent_age_bracket) {
										this.Xage = this.array[i].age_bracket_discribe
									}
									this.formData.age = res.data.data.talent_age_bracket
								}
							}
							if (res.data.data.talent_nationality !== 0) {
								this.index1 = res.data.data.talent_nationality
								this.formData.nationality = res.data.data.talent_nationality
							}
							if (res.data.data.visit_store_region !== 0) {

								let a = res.data.data.visit_store_region.toString().slice(0, 2)
								let b = res.data.data.visit_store_region.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 == res.data.data
														.visit_store_region) {
														c = region[i].children[j].children[o].name
													}
												}
											}

										}
									}
								}
								this.regionStr = a + ' ' + b + ' ' + c
								this.formData.visitStoreRegion = res.data.data.visit_store_region
							}
							this.formData.phone = res.data.data.talent_phone_number
						}
					})
			},
			// 年龄选择的
			bindPickerChange: function(e) {
				this.index = e.detail.value;
				this.formData.age = this.array[this.index].age_aid
				this.Xage = this.array[this.index].age_bracket_discribe
				console.log(this.formData.age)
			},
			//国籍选择
			bindPickerChange1: function(e) {
				console.log(e)
				this.index1 = e.detail.value;
				this.formData.nationality = this.array1[this.index1].id
				console.log(this.formData.nationality)
			},

			/**
			 * 手动提交
			 * @param {Object} form
			 */
			submitForm(form) {
				this.$refs[form]
					.submit()
					.then(res => {

						console.log('表单的值：', res)
						console.log(this.formData)
						
						const iphoneReg1 = /^1[0-9]{10}$/
						if (!iphoneReg1.test(this.formData.phone)) {
							uni.showToast({
								title: '电话号码格式不正确',
								icon: 'none'
							})
							return
						}
						this.$https.post('/youngee/c/t/p/talent-info', {
								talent_age_bracket: this.formData.age,
								talent_nationality: this.formData.nationality,
								visit_store_region: this.formData.visitStoreRegion,
								talent_phone_number: this.formData.phone,
							})
							.then(res => {
								if (res.data.code == 0) {
									console.log(res)
									uni.navigateTo({
										url: './mylocation'
									});
								} else {
									uni.showToast({
										title: res.data.msg,
										icon: 'none',
										duration: 2000
									});
								}

							})

					})
					.catch(errors => {
						console.error('验证失败：', errors)
						uni.showToast({
							title: '请填写所有信息',
							icon: 'none'
						})
					})
			},
			//城市选择
			pickerChange(e) {
				// console.log(e, '1');
				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.visitStoreRegion = this.region[2][this.regionIndex[2]].code;

			},
			pickerColumnchange(e) {
				// console.log(e);
				// 第几列滑动
				// console.log(e.detail.column);
				// 第几列滑动的下标
				// console.log(e.detail.value)

				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: 20rpx !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: 80rpx;
		// height: 5%;
		width: 100%;
		display: flex;
		z-index: 10;
		margin-bottom: 10rpx;
	}

	.menu-item p {
		font-weight: 600;

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

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

	.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>