膳逸前端开发--小程序开发日记【七】

提示：本篇文章为学校项目实训的记录，所以可能会写的没头没尾的，不具有实际指导意义，因为是小组共同开发，所以不是自己负责的部分会在别的小组成员博客里。

---

前言

上次说到完成了个人中心的一级页面，下面介绍个人信息界面。

---

一、个人信息页面

点击个人主页的个人信息按钮，即可跳转到晚上个人信息的页面。上面显示流程，下面显示表单，分步完善个人信息。效果图如下：

点击下一步后

二、效果详述

1.流程显示区域

前端template代码如下，

		<view class="top-container">
			<view class="step-container">
				<view class="icon-1"><text class="desc">个人基本信息</text></view>
				<view class="line"></view>
				<view class="icon-2"><text class="desc">身体状况与饮食习惯</text></view>
				<view class="line"></view>
				<view class="icon-3"><text class="desc">创建个人信息卡</text></view>
			</view>
		</view>

---

2.表单区域详述

表单部分的template代码如下：
第一页：

		
<view class="info-1-container" v-if="showInfoPanel == 1">
			<text class="title">填写个人基本信息</text>
			<text class="desc">填写如下信息，以便我们了解您的身体基本情况，方便提供个性化服务。</text>
			<u-form labelPosition="top" :model="dataForm" :rules="rules" ref="form1" labelWidth="110"
				:labelStyle="labelStyle">
				<u-form-item label="姓名" prop="name" borderBottom ref="name" leftIcon="account"
					:leftIconStyle="iconStyle" required>
					<u-input v-model="dataForm.name" border="none" placeholder="输入姓名" />
				</u-form-item>
				<u-form-item label="性别" prop="sex" borderBottom ref="sex" @click="showSex = true" leftIcon="man"
					:leftIconStyle="iconStyle" required>
					<u-input v-model="dataForm.sex" disabled disabledColor="#ffffff" placeholder="请选择性别"
						border="none"></u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="手机号码" prop="phone" borderBottom ref="phone" leftIcon="phone"
					:leftIconStyle="iconStyle" required>
					<u-input v-model="dataForm.phone" border="none" placeholder="输入手机号码" />
				</u-form-item>
				<u-form-item label="电子邮箱" prop="email" borderBottom ref="email" leftIcon="email"
					:leftIconStyle="iconStyle" required>
					<u-input v-model="dataForm.email" border="none" placeholder="输入电子邮箱" />
				</u-form-item>
				<u-form-item label="出生日期" prop="birthday" borderBottom ref="birthday" @click="showDatetime = true"
					leftIcon="calendar" :leftIconStyle="iconStyle" required>
					<u-input v-model="dataForm.birthday" disabled disabledColor="#ffffff" placeholder="请选择您的生日"
						border="none"></u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="居住地址" prop="address" borderBottom ref="address" leftIcon="home"
					:leftIconStyle="iconStyle" required>
					<u-input v-model="dataForm.address" border="none" placeholder="输入居住地址" />
				</u-form-item>
			</u-form>

			<view class="operate">
				<u-button type="primary" text="下一步" size="large" color="#427fff" @click="nextHandle"></u-button>
			</view>
		</view>

第二页

		
		<!-- 第二页：身体状况与饮食习惯 -->
		<view class="info-2-container" v-if="showInfoPanel == 2">
			<text class="title">填写身体状况与饮食习惯</text>
			<text class="desc">填写如下信息，以便我们了解您的身体状况与饮食习惯，方便提供个性化服务。</text>

			<u-form labelPosition="top" :model="dataForm" :rules="rules" ref="form2" labelWidth="110"
				:labelStyle="labelStyle">
				<u-form-item label="身高" prop="height" borderBottom ref="height" leftIcon="tags"
					:leftIconStyle="iconStyle" required>
					<u-input v-model="dataForm.height" border="none" placeholder="输入身高" />
				</u-form-item>
				<u-form-item label="体重" prop="weight" borderBottom ref="weight" leftIcon="tags"
					:leftIconStyle="iconStyle" required>
					<u-input v-model="dataForm.weight" border="none" placeholder="输入体重" />
				</u-form-item>
				<u-form-item label="目标" prop="goal" borderBottom ref="goal" leftIcon="star" :leftIconStyle="iconStyle"
					required>
					<u-input v-model="dataForm.goal" border="none" placeholder="输入目标" />
				</u-form-item>
			</u-form>

			<view class="label">
				<u-icon name="info-circle-fill" size="20" color="#427fff"></u-icon>
				<text>请添加您的饮食喜好</text>
			</view>
			<view>
				<u-input v-model="newLikes" @confirm="inputLikesHandle" clearable />
				<view class="likes-tabs">
					<u-tag :key="one.id" v-for="one in dataForm.likes" :text="one" plain closable
						@close="closeLikesHandle(one)"></u-tag>
				</view>
			</view>
			


			<view class="label">
				<u-icon name="info-circle-fill" size="20" color="#427fff"></u-icon>
				<text>请添加您的忌口和过敏原</text>
			</view>
			<view>
				<u-input v-model="newDislikes" @confirm="inputDislikesHandle" clearable />
				<view class="dislikes-tabs">
					<u-tag :key="one.id" v-for="one in dataForm.dislikes" :text="one" plain closable
						@close="closeDislikesHandle(one)"></u-tag>
				</view>
			</view>
			
			<view class="label">
				<u-icon name="info-circle-fill" size="20" color="#427fff"></u-icon>
				<text>您是否有疾病史</text>
			</view>
			<view>
				<u-input v-model="newDiseases" @confirm="inputDiseasesHandle" clearable />
				<view class="diseases-tabs">
					<u-tag :key="one.id" v-for="one in dataForm.diseases" :text="one" plain closable
						@close="closeDiseasesHandle(one)"></u-tag>
				</view>
			</view>
			
			
			<view class="operate">
				<u-button type="primary" text="提交信息" size="large" color="#427fff" @click="submitHandle"></u-button>
			</view>
		</view>

script代码如下

			submitInfo: function() {
				let that = this;
				uni.showModal({
					title: '提示消息',
					content: that.flag == 'insert' ? '确定提交信息吗？' : '确定修改信息吗？',
					success: function(resp) {
						if (resp.confirm) {
							let data = that.dataForm;
							let url = that.flag == 'insert' ? that.api.insertUserInfo : that.api.updateUserInfo;
							that.ajax(url, 'POST', data, function(resp) {
								uni.showToast({
									icon: 'success',
									title: that.flag == 'insert' ? '提交成功' : '修改成功'
								});
							});
							setTimeout(function() {
								uni.switchTab({
									url: '/pages/mine/mine'
								});
							}, 1500);
						}
					}
				});
			}

如果用户新登录或未完善个人信息，则提示无数据

		
		onLoad: function() {
			let that = this;
			that.ajax(that.api.searchUserInfo, 'GET', {}, function(resp) {
				let data = resp.data;
				if (data.msg == '没有查询到数据') {
					that.flag = 'insert';
					return;
				}
				that.flag = 'update';
				console.log(data)
				that.dataForm = data;
			}, false);
		}

总结

这次开发的难度核心主要在于表单页面的渲染，包含标签，选择，流程等。