zhxg_xsbdV1.0/pages/size/size.vue

<template>

	<view class="size">
		<text class="title">基本信息</text>
		<view class="inputList">
			<view class="oneList">
				身高(厘米)<input type="number" v-model="height" placeholder="必填,请输入">
			</view>
			<view class="oneList">
				体重(千克)<input type="number" v-model="weight" placeholder="必填,请输入">
			</view>
			<view class="oneList"> 鞋码
				<view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<picker @change="bindPickerChange" v-model="index" :range="array" placeholder="必填,请输入">
								<view class="uni-input">{{array[index]}}</view>
							</picker>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="notice">请如实登记个人信息,以便进行军训鞋服、校服、专业服等的发放。
		</view>
		<view class="bottom-div">
			<button @click="submitOwnSize" v-if="submitSizeban" > 修改</button>
			<button @click="submitOwnSize" v-if="!submitSizeban"> 提交</button>
		</view>

		<u-toast ref="uToast"></u-toast>
		<zero-loading v-if="loading"></zero-loading>
		<FloatBall />
	</view>

</template>

<script>
	import {
		getOwnSize,
		submitOwnSize
	} from "@/api/sizeApi.js";
	import {
		isEmpty
	} from "@/api/helpFunc.js";
	import FloatBall from "@/pages/compoents/FloatBall.vue";
	export default {
		components: {
			FloatBall
		},
		data() {
			return {
				index: 0,
				array: ['30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44',
					'45', '46', '47', '48', '49'
				],
				height: null,
				weight: null,
				loading: false,
				submitSizeban: false //尺码提交按钮禁用
			}
		},
		async onLoad() {
			this.loading = true
			await this.getOwnSize();
			this.loading = false
		},
		methods: {
			toGo() {
				uni.redirectTo({
					url: "/pages/newindex/newindex" // 跳转至修改密码页面路径
				});
			},
			async submitOwnSize() {
				if(this.height<0||this.height>300||this.weight<0||this.weight>300||this.array[this.index]>60||this.array[this.index]<0){
					this.$refs.uToast.show({
						type: "error",
						message: "数据填写不正确",
						duration: 1500,
					});
					return;
				}
				let sdata = {
					height: this.height,
					weight: this.weight,
					shoes: this.array[this.index]
				};
				if (isEmpty(sdata.height)) {
					this.$refs.uToast.show({
						type: "error",
						message: "请填写身高",
						duration: 1500,
					});
					return;
				}
				if (isEmpty(sdata.weight)) {
					this.$refs.uToast.show({
						type: "error",
						message: "请填写体重",
						duration: 1500,
					});
					return;
				}
				if (isEmpty(sdata.shoes)) {
					this.$refs.uToast.show({
						type: "error",
						message: "请填写鞋码",
						duration: 1500,
					});
					return;
				}

				this.loading = true;
				let res = await submitOwnSize(sdata);
				this.loading = false;
				if (res.code == 200) {
					this.$refs.uToast.show({
						type: "success",
						message: res.msg,
						duration: 1500, 
					});
					uni.redirectTo({
						url: "/pages/newindex/newindex"
					});
					this.submitSizeban=false;
				} else {
					this.$refs.uToast.show({
						type: "error",
						message: res.msg,
						duration: 1500,
					});
				}

			},
			async getOwnSize() {
				let res = await getOwnSize();
				if (res.code == 200) {
					if (!isEmpty(res.data)) {
						let data = {
							...res.data
						};
						this.height = data.height;
						this.weight = data.weight;
						for (let i = 0; i < this.array.length; i++) {
							if (this.array[i] == data.shoes) {
								this.index = i;
							}
						}
						console.log(res); //进入页面打印获取到的信息
						if (res.data.status == "0") { //禁用尺码提交按钮
							this.submitSizeban = true
						}
					}
				}
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
			},
			clearPicker() {
				this.index = 0; // 重置选择器选择内容
			}
		},
		onUnload() {
			this.clearPicker(); // 在页面卸载前重置选择器选择内容
		}
	}
</script>

<style lang="scss">
	.title {
		margin-left: 40rpx;
		font-weight: bold;
	}

	.inputList {
		margin: 20rpx auto;
		width: 90%;

	}

	.oneList {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 95%;
		height: 80rpx;
		border-bottom: 1px solid #DDDDDD;

		input {
			width: 25%;
			text-align: right;
		}
	}

	.notice {
		width: 90%;
		margin-left: 40rpx;
		font-size: 28rpx;
		color: #969699;

	}

	button {
		width: 80%;
		position: fixed;
		bottom: 100rpx;
		margin-left: 50rpx;
		border-radius: 50rpx;
		background-color: #59a1fe;
		color: white;
	}
	.bottom-div {
		margin-left: 29rpx;
	}
</style>