swim-weapp/pages/mine/stu_info.vue

<template>
	<view class="content">

		<view class="" v-if="childList.length>0">


			<view class="top_bg">
				<view class="title">学员信息</view>
				<view class="name">
					<picker mode="selector" :range="childList" @change="changeChild" :range-key="'name'">
						<view class="name">{{childName}}
							<u-icon name="arrow-down-fill" color="#FF8F09" size="30" class="icon"></u-icon>
						</view>
					</picker>
				</view>

			</view>

			<view class="form">
				<u-form :model="form">
					<u-form-item label="学员名称:" :label-width="190">
						<u-input v-model="form.name" placeholder="学员名称" />
					</u-form-item>
					<u-form-item label="学员性别:" :label-width="190">
						<picker mode="selector" :range="sex" @change="change" :range-key="'name'">
							<view>{{name}}</view>
						</picker>
					</u-form-item>
					<u-form-item label="手机号码:" :label-width="190">
						<u-input v-model="form.mobile" placeholder="手机号码" />
					</u-form-item>
					<u-form-item label="出生日期:" :label-width="190">
						<picker mode="date" value="YYYY-MM-DD" @change="changeDate">
							<view>{{form.birthday}}</view>
						</picker>
					</u-form-item>
				</u-form>
			</view>
			<view class="bt" @click="submit">
				修改
			</view>
		</view>
		<view class="empty" v-else>
			<u-empty text="暂无学生信息" mode="favor"></u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					name: '',
					gender: 0,
					mobile: '',
					birthday: '',
					shop: '',
				},
				name: '',
				sex: [{
						id: 0,
						name: '女'
					},
					{
						id: 1,
						name: '男'
					}
				],
				show: false,
				nums: [],
				childList: [], //学生列表
				childName: '', //当前选中的孩子名字
				dateShow: false
			};
		},
		onLoad() {
			this.getChild()
		},
		onShow() {
			
		},
		methods: {
			change(e){
				//选择性别
				let index=e.detail.value
				this.name=this.sex[index].name
				this.form.gender=index
			},
			//选择小孩
			changeChild(e) {
				let index = e.detail.value
				this.form = this.childList[index]
				this.childName = this.childList[index].name
			},
			//选择日期
			changeDate(e) {
				console.log(e, '选择日期')
				this.form.birthday = e.detail.value
			},
			//获取孩子列表
			getChild() {
				this.$u.get('/child').then(res => {
					console.log(res, 'llll')
					this.childList = res.data.data
					this.childName = this.childList[0].name
					this.form = this.childList[0]
					let index=this.form.gender
					this.name=this.sex[index].name
					console.log(index,this.name)
				})
			},
			//保存修改
			submit() {
				let data = {
					name: this.form.name,
					mobile: this.form.mobile,
					shop_id: this.form.shop_id,
					birthday: this.form.birthday,
					gender: this.form.gender,
					id: this.form.id
				}
				this.$u.put('/child', data).then(res => {
					console.log(res, '提交成功')
					if (res.code == 200) {
						uni.showToast({
							title: '修改成功',
							icon: 'none'
						})
						setTimeout(function() {
							uni.switchTab({
								url: './mine'
							})
						}, 1000)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}

	.content {
		.empty {
			margin-top: 40%;
		}

		.top_bg {
			width: 100%;
			height: 235px;
			background: url(../../static/info_bg1.png);
			text-align: center;

			.title {
				display: block;
				width: 100%;
				padding-top: 60px;
				font-size: 24px;
				font-weight: bold;
				color: #FF4600;
			}

			picker {
				height: 50px;
			}

			.name {
				margin-top: 20px;
				height: 50px;
				line-height: 50px;
				font-size: 16px;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
				opacity: 1;

				.icon {
					margin-left: 10px;
				}
			}
		}

		.form {
			background-color: #FFFFFF;
			// margin: 0 20px;
			margin-top: -30px;
			border-radius: 12px;
			padding: 0 20px;
		}

		.bt {
			width: 80%;
			margin: 0 auto;
			margin-top: 40px;
			height: 45px;
			line-height: 45px;
			text-align: center;
			font-size: 16px;
			font-family: PingFang SC;
			font-weight: bold;
			border-radius: 22px;
			background: linear-gradient(266deg, #FF3B21 0%, #FF8F09 100%);
			color: #FFFFFF;
			opacity: 1;
		}
	}
</style>