ProAdvanced/pages/my-page/perfectInfo/perfectInfo.vue

<template>
	<view class="container">
		<uni-nav-bar id="nav-bar" status-bar="true" @clickLeft="onBack" :title="pageTitle" color="#000000" fixed="true"
		 :border="false">
			<!-- <view slot="left">
				<view class=" flex align-center margin-left">
					<image class="p-left-arrow" src="../../../static/p-left-arrow.png"></image>
				</view>
			</view> -->
			<view slot="right">
				<text class="text-df text-purple margin-right-sm" @tap="onSkip">跳过</text>
			</view>
		</uni-nav-bar>
		<view style="height:6px ;width: 100%; background-color: #f2eff2;"></view>

		<!-- 手机端登录,获取验证码 -->
		<view class="input-container" style="margin: 32px 102rpx 0 68rpx;">
			<view class="make-text-bPurple text-bold margin-bottom" style="font-size: 20px;">完善资料</view>
			<view class="text-16px text-gray">请完善您的个人资料，以便于更好的统计数据……</view>
		</view>

		<view class="input-container" style="margin: 32px 102rpx 0 68rpx;">
			<view class="text-bold margin-bottom text-16px">你的性别</view>
			<view class="flex justify-start">
				<view class="flex justify-between align-center" style="height: 38px;" @tap="onGender(0)">
					<image style="width: 38rpx;height: 38rpx;" :src="gender==0?'/static/radio-on.png':'/static/radio-off.png'"></image>
					<view class="text-16px margin-left">男</view>
				</view>

				<view class="flex justify-between align-center" style="height: 38px;margin-left: 143rpx;" @tap="onGender(1)">
					<image style="width: 38rpx;height: 38rpx;" :src="gender==1?'/static/radio-on.png':'/static/radio-off.png'"></image>
					<view class="text-16px margin-left">女</view>
				</view>
			</view>
		</view>
		<view class="input-container" style="margin: 32px 102rpx 0 68rpx;">
			<view class="text-bold margin-bottom text-16px">您所在的省份/城市</view>
			<view class="flex justify-start align-center" style="margin: 68rpx 0;">
				<image style="width: 38rpx;height: 38rpx;" src="../../../static/locationIcon.png"></image>
				<view class="text-16px margin-left">{{city.label}}</view>
				<view style="margin-left: 10rpx;" @tap="showModal" data-target="showPickerModal" data-type="city">
					<image style="width: 38rpx;height: 38rpx;" src="../../../static/locationMore.png"></image>
				</view>
			</view>
		</view>

		<view class="flex justify-between perf-bottom-container">
			<view class="flex justify-center align-center">
				<!-- <image style="width: 10px;height: 10px; margin-left: 38rpx;" src="/static/asterisk.png"></image> -->
				<view class="text-grey padding-sm margin-name text-width flex">生日</view>
				<view class="text-bold">{{sBirthday}} </view>
			</view>
			<view class="right-container" @tap="showModal" data-target="showPickerModal" data-type="birthday">
				<text class="text-grey text-sm" style="margin: 0 24rpx;">请选择</text>
				<view class="only-arrow"></view>
			</view>
		</view>

		<view class="flex justify-between perf-bottom-container">
			<view class="flex justify-center align-center">
				<!-- <image style="width: 10px;height: 10px; margin-left: 38rpx;" src="/static/asterisk.png"></image> -->
				<view class="text-grey padding-sm margin-name text-width flex">身高</view>
				<view class="text-bold">{{height}}cm </view>
			</view>
			<view class="right-container" @tap="showModal" data-target="showPickerModal" data-type="height">
				<text class="text-grey text-sm" style="margin: 0 24rpx;">请选择</text>
				<view class="only-arrow"></view>
			</view>
		</view>
		<view class="flex justify-between perf-bottom-container">
			<view class="flex justify-center align-center">
				<!-- <image style="width: 10px;height: 10px; margin-left: 38rpx;" src="/static/asterisk.png"></image> -->
				<view class="text-grey padding-sm margin-name text-width flex">体重</view>
				<view class="text-bold">{{weight}}kg </view>
			</view>
			<view class="right-container" @tap="showModal" data-target="showPickerModal" data-type="weight">
				<text class="text-grey text-sm" style="margin: 0 24rpx;">请选择</text>
				<view class="only-arrow"></view>
			</view>
		</view>


		<view class="btn-row">
			<view class="btn-confirm" @tap="onPerfectConfirm">确认绑定</view>
		</view>

		<view class="cu-modal bottom-modal" :class="modalName=='showPickerModal'?'show':''" @touchmove.stop.prevent="moveHandle">
			<view class="cu-dialog" style="border-top-right-radius: 20rpx; border-top-left-radius: 20rpx;">
				<myPicker v-if="modalName == 'showPickerModal' ? true:false" :pickerObj="pickerObj" @confirmEvent="onPickerConfirm"
				 @cancelEvent="hideModal">
				</myPicker>
			</view>
		</view>
	</view>
</template>

<script>
	import myPicker from '@/components/slambb-picker/slambb-picker.vue';
	import pickerData from '@/components/slambb-picker/picker.js';
	import config from '@/common/config.js';
	import reqUtil from "@/util/util-js/requstUtil.js";
	import date from "@/util/util-js/date.js";
	import {
		mapState
	} from 'vuex'

	export default {
		components: {
			myPicker
		},
		data() {
			return {
				account: '',
				pageTitle: "完善资料",
				sBirthday: '',
				modalName: null,
				//选择器对象
				pickerObj: {
					pickerLeftList: pickerData.getWeightList().leftList,
					pickerRightList: pickerData.getWeightList().rightList,
					pickerType: "doubleItem",
					pickerUnit: "斤",
					pickerTitle: "记体重",
					defaultValue: 0
				},
				bLoading: false,
				//是否可以更新
				bCanUpdate: false,
			}
		},
		computed: mapState(['bNewUser','height', 'weight', 'birthday', 'city', 'gender', 'userName']),
		onLoad() {
			let s = this.birthday.replace(/-/g, "/");
			var dateTemp = new Date(s);
			this.sBirthday = date.formatDate(dateTemp);
			
			if (this.bNewUser) {
				this.$store.state.bNewGuide = true;
			}
		},
		methods: {
			onBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			
			showModal(e) {
				this.pikerType = e.currentTarget.dataset.type
				switch (this.pikerType) {
					case "weight":
						this.$set(this.pickerObj, 'pickerLeftList', pickerData.getWeightList().leftList);
						this.$set(this.pickerObj, 'pickerRightList', pickerData.getWeightList().rightList);
						this.$set(this.pickerObj, 'pickerType', "doubleItem");
						this.$set(this.pickerObj, 'pickerUnit', "公斤");
						this.$set(this.pickerObj, 'pickerTitle', "记体重");
						this.$set(this.pickerObj, 'defaultValue', this.weight);
						this.$set(this.pickerObj, 'showInput', true);
						break;
					case "height":
						this.pickerObj = {};
						this.$set(this.pickerObj, 'pickerLeftList', pickerData.getHeightList().leftList);
						// pickerData.getHeightList().rightList
						this.$set(this.pickerObj, 'pickerRightList', []);
						this.$set(this.pickerObj, 'pickerType', "singleItem");
						this.$set(this.pickerObj, 'pickerUnit', "厘米");
						this.$set(this.pickerObj, 'pickerTitle', "记身高");
						this.$set(this.pickerObj, 'defaultValue', this.height);
						this.$set(this.pickerObj, 'showInput', true);
						break;
					case "birthday":
						this.pickerObj = {};
						this.$set(this.pickerObj, 'pickerType', "dateItem");
						this.$set(this.pickerObj, 'pickerTitle', "记生日");
						this.$set(this.pickerObj, 'showInput', false);
						break;
					case "gender":
						this.pickerObj = {};
						this.$set(this.pickerObj, 'pickerLeftList', pickerData.getGenderList().genderList);
						this.$set(this.pickerObj, 'pickerRightList', []);
						this.$set(this.pickerObj, 'pickerType', "singleItem");
						this.$set(this.pickerObj, 'pickerTitle', "性别");
						this.$set(this.pickerObj, 'defaultValue', "男");
						this.$set(this.pickerObj, 'showInput', false);
						break;
					case "city":
						this.pickerObj = {};
						this.$set(this.pickerObj, 'pickerType', "city");
						this.$set(this.pickerObj, 'pickerTitle', "省市区");
						this.$set(this.pickerObj, 'defaultValue', this.city.value);
						this.$set(this.pickerObj, 'showInput', false);
						break;

				}
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			moveHandle() {
				return;
			},
			onPickerConfirm(data) {
				console.log(data);
				switch (this.pikerType) {
					case "weight":
						if (data.value != this.weight) {
							this.bCanUpdate = true;
							this.$store.state.weight = data.value;
						}
						break;
					case "height":
						if (data.value != this.height) {
							this.bCanUpdate = true;
							this.$store.state.height = data.value;
						}
						break;
					case "birthday":
						this.bCanUpdate = true;
						let nDate = new Date();
						nDate.setFullYear(data.value[0], data.value[1] - 1, data.value[2]);
						this.sBirthday = date.formatDate(nDate);
						this.$store.state.birthday = date.formatTime(nDate);
						break;
					case "gender":
						if (data.value != this.gender) {
							this.bCanUpdate = true;
							this.$store.state.gender = data.value;
						}
						break;
					case "city":
						if (data.value.cityCode != this.cityCode) {
							this.bCanUpdate = true;
							this.$store.state.city = data.value;
						}
						break;
				}

				this.hideModal();
			},
			onGender(value) {
				// console.log(value);
				this.$store.state.gender = value;
			},
			/**
			 * 由于性别和生日是有默认值，所以不用检测
			 */
			onCheck() {
				if (this.height == 0) {
					uni.showToast({
						title: "请选择身高",
						icon: "none"
					})
					return false;
				} else
				if (this.weight == 0) {
					uni.showToast({
						title: "请选择体重",
						icon: "none"
					})
					return false;
				}
				return true;
			},
			onPerfectConfirm() {
				let that = this;

				if (!that.onCheck()) {
					console.log("onCheck false")
					return;
				}
				uni.showToast({
					title: "",
					icon: "loading",
					mask: true,
					duration: 10000
				})
				if (that.bLoading) return;
				that.bLoading = true;
				
				let data = {
					"username": this.userName,
					"birthday": this.birthday,
					"gender": this.gender,
					"cityCode": this.city.cityCode,
					"weight": this.weight,
					"height": this.height,
					//微信注册时候，更新一次到fitness
					"bAddWeightInfo":true
				}
				
				reqUtil.requestData(config.URL.USERINFOADD, data, "POST").then(res => {
						console.log('requestData USERINFOADD =====', res);
						uni.hideToast();
						that.bLoading = false;
						if (res.code == 0) {
							uni.showToast({
								title: "更新成功",
								mask: true,
								duration: 1000
							})
							// that.bCanUpdate = false;
							setTimeout(() => {
								that.$store.state.bNewUser = false;
								// uni.redirectTo({
								// 	url: "../../personal-page/personal/personal"
								// })
								uni.redirectTo({
									url:'../firstPlan/firstPlan'
								})
							}, 1000);
						}
					},
					e => {
						console.log(e);
						that.bLoading = false;
						uni.showModal({
							title: '错误',
							content: '更新数据失败，是否重新更新?',
							confirmText: '是的',
							success: (res) => {
								if (res.confirm) {
									that.onPerfectConfirm();
								}
							}
						})
					});
			},
			//跳过
			onSkip(){
				
				let that = this;
				
				uni.showToast({
					title: "",
					icon: "loading",
					mask: true,
					duration: 10000
				})
				if (that.bLoading) return;
				that.bLoading = true;
				
				let data = {
					"username": this.userName,
					"birthday": this.birthday,
					"gender": this.gender,
					"cityCode": this.city.cityCode,
					"weight": this.weight,
					"height": this.height,
					//微信注册时候，更新一次到fitness
					"bAddWeightInfo":true
				}
				
				reqUtil.requestData(config.URL.USERINFOADD, data, "POST").then(res => {
						console.log('requestData USERINFOADD =====', res);
						uni.hideToast();
						that.bLoading = false;
						if (res.code == 0) {
							uni.showToast({
								title: "",
								icon:"loading",
								mask: true,
								duration: 1000
							})
							// that.bCanUpdate = false;
							setTimeout(() => {
								that.$store.state.bNewUser = false;
								// uni.redirectTo({
								// 	url: "../../personal-page/personal/personal"
								// })
								uni.redirectTo({
									url:'../firstPlan/firstPlan'
								})
				
							}, 1000);
						}
					},
					e => {
						console.log(e);
						that.bLoading = false;
						uni.showModal({
							title: '错误',
							content: '更新数据失败，是否重新更新?',
							confirmText: '是的',
							success: (res) => {
								if (res.confirm) {
									that.onPerfectConfirm();
								}
							}
						})
					});
			}
		}
	}
</script>

<style>
	.btn-row {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 102rpx 0;
	}

	.container {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #FFFFFF;
	}



	.input-container {
		/* border-bottom: 1rpx solid #e7e9eb; */
	}



	.btn-confirm {
		width: 636rpx;
		height: 102rpx;
		background-color: rgba(151, 151, 255, 1);
		border-radius: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 17px;
		color: #FFFFFF;
	}

	.right-container {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	.perf-bottom-container {
		border: 1rpx solid #EEEEEE;
		border-radius: 10px;
		height: 50px;
		margin: 19rpx 41rpx 0 41rpx;
	}
</style>