yubaitong-c/src/packages/baby/add-baby.vue

<template>
	<view class="user-setting-box">
		<!-- #ifndef MP-TOUTIAO -->
		<Navbar background-color="transparent" color="#333" title="添加宝宝"></Navbar>
		<!-- #endif -->
		<view class="bg"></view>
		<view class="content">
			<view class="baby-top">
				<view class="pic-box box">
					<view class="label">
						<view class="upload-pic-box" @click="chooseImg">
							<image class="avatar" :src="form.avatar" mode="aspectFill"></image>
							<view class="camera-box">
								<IconText class="icon" :code="`\ue8a9`" size="14" color="#fff"></IconText>
							</view>
						</view>
					</view>
					<view class="tip">点击上传宝宝头像</view>
				</view>
				<view class="name-box box">
					<view class="label">
						宝宝昵称
					</view>
					<input v-model="form.nickname" type="text" class="input" placeholder="此处输入宝宝昵称"/>
				</view>
				<view class="gender-box box">
					<view class="label"></view>
					<view class="gender-select">
						<view class="item" @click="handleSelectGender(0)">
							<IconText class="icon" :code="`\ue842`" v-if="!form.gender" size="12" color="#6B95FF"></IconText>
							<IconText class="icon" :code="`\ue84e`" size="12" color="#999" v-else></IconText>
							小孩
						</view>
						<view class="item" @click="handleSelectGender(1)">
							<IconText class="icon" :code="`\ue842`" v-if="form.gender === 1" size="12" color="#6B95FF"></IconText>
							<IconText class="icon" :code="`\ue84e`" size="12" color="#999" v-else></IconText>
							小王子
						</view>
						<view class="item" @click="handleSelectGender(2)">
							<IconText class="icon" :code="`\ue842`" v-if="form.gender === 2" size="12" color="#6B95FF"></IconText>
							<IconText class="icon" :code="`\ue84e`" size="12" color="#999" v-else></IconText>
							小公主
						</view>
					</view>
				</view>
			</view>
			<view class="info-box top-border-radius top10">
				<view class="label">出生体重</view>
				<view class="right">
					<input v-model="form.birthWeight" type="text" class="input" placeholder="此处输入体重"/>
				</view>
			</view>
			<view class="info-box">
				<view class="label">出生日期</view>
				<view class="right">
					<!-- <uni-datetime-picker v-model="form.birthday" :border="false" type="date" class="date"/> -->
					<uni-datetime-picker v-model="form.birthday" :border="false" type="date" class="date-box">
						<view class="date">
							{{form.birthday || '请选择日期'}}
							<IconText :code="`\ue88e`" class="icon" size="12" color="#C6C5CB"></IconText>
						</view>
					</uni-datetime-picker>
				</view>
			</view>
			<view class="info-box" v-if="type !== 'register'">
				<view class="label">是否过敏</view>
				<view class="right">
					<switch @change="changeAllergy" :checked="form.allergy === 1" style="transform:scale(0.7)"/>
				</view>
			</view>
			<view class="info-box bottom-border-radius" v-if="type !== 'register'">
				<view class="label">宝宝体质</view>
				<view class="right">
					<input v-model="form.constitution" type="text" class="input" placeholder="此处输入宝宝体质"/>
				</view>
			</view>
			<view class="info-box">
				<view class="label">喂养方式</view>
				<view class="right">
					<picker @change="changeFeedMode" :value="feedModeIndex" :range="feedModeList" range-key="name">
						<view class="date">
							{{feedModeList[feedModeIndex].name || '请选择'}}
							<IconText :code="`\ue88e`" class="icon" size="12" color="#C6C5CB"></IconText>
						</view>
					</picker>
				</view>
			</view>
			<view class="info-box bottom-border-radius">
				<view class="label">选择奶粉</view>
				<view class="right select-milk-powder">
					<input v-model="form.constitution" type="text" class="input" placeholder="此处输入奶粉名称"/>
					<view class="btn">选择</view>
				</view>
			</view>
			<view class="info-box top-border-radius bottom-border-radius top10">
				<view class="label">所在家庭</view>
				<view class="right">
					<picker @change="changeFamily" :value="familyIndex" :range="familyList" range-key="name">
						<view class="date">
							{{familyList[familyIndex].name || '请选择'}}
							<IconText :code="`\ue88e`" class="icon" size="12" color="#C6C5CB"></IconText>
						</view>
					</picker>
				</view>
			</view>
		</view>
		<view class="fixed-bottom" >
			<view class="btn" @click="deleteBabyModal" v-if="bid">删除</view>
			<view class="solid-btn" @click="handleConfirm">保存</view>
		</view>
		<ShowModal ref="deletePopup" title="提示" @submit="deleteBaby" leftBtnText="取消" content="确认后宝宝数据将清空，是否确认删除？" btnText="确认" />
	</view>
</template>

<script lang="ts">
	import {
		Component,
		Mixins
	} from 'vue-property-decorator';
	import loginMixin from '@/common/mixins/loginMixin.ts';
	// import {
	// 	namespace
	// } from 'vuex-class';
	// const baseModule = namespace('base');
	@Component({
		filters: {
			phoneFormat(val : any) {
				if (!+val) return '';
				let arr = val.split("");
				let pre = arr.slice(0, 3).join("");
				let next = arr.reverse().slice(0, 4).reverse().join("");
				return pre + "****" + next;
			},
			uidFormat(val : any) {
				if (!val) return '';
				let str = val + '';
				let length = 6 - str.length;
				for (let i = 0; i < length; i++) {
					str = '0' + str;
				}
				return 'QY' + str;
			}
		}
	})
	export default class UserSetting extends Mixins(loginMixin) {
		// @baseModule.Getter('_userInfo') _userInfo: any;
		gender: any = 1;
		constitutionList: any = [];
		familyList: any = []
		form: any = {
			avatar: '',
			nickname: '',
			gender: 0,
			birthday: '',
			birthWeight: null,
			allergy: 2,
			constitution: '',
			fId: null,
		};
		constitutionIndex: any = null;
		familyIndex: any = null;
		bid: any = null;
		type: any = '';
		feedModeList: any = [
			{
				name: '母乳',
				value: 1
			},
			{
				name: '配方奶',
				value: 2
			},
			{
				name: '混合',
				value: 3
			}
		];
		feedModeIndex: any = null;
		
		onShow() {
			
		}
		
		onLoad(){
			this.type = this.$Route.query.type;
			if (this.$Route.query.bid) {
				this.bid = +this.$Route.query.bid;
				this.getBabyInfo();
			}
		}

		updatePhone() {
			// uni.showToast({
			// 	title: '请联系后台客服修改手机号',
			// 	icon: 'none'
			// })
		}
		
		getBabyInfo(){
			uni.showLoading({
				title: '加载中',
			});
			this.$http.get({
				url: this.$api.getBabyInfo,
				data: {
					bid: this.bid
				}
			}).then((res: any) => {
				for(let key in this.form){
					this.form[key] = res[key];
				}
				uni.hideLoading();
			})
		}
		
		changeFeedMode(e: any){
			this.feedModeIndex = e.detail.value;
			this.form.feedMode = this.feedModeList[e.detail.value].value;
		}

		getCode() {
			return new Promise((resolve : any, reject : any) => {
				uni.login({
					provider: 'weixin',
					success: (eve) => {
						resolve(eve);
					},
					fail: (err) => {
						console.log(err);
						reject();
					}
				});
			})
		}
		
		handleSelectGender(gender: any){
			this.form.gender = gender;
		}
		
		chooseImg() {
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				success: (res) => {
					const tempFilePaths : any = res.tempFilePaths;
					uni.showLoading({
						title: '上传中...'
					});
					this.$http
						.upPic({
							filePath: res.tempFilePaths[0]
						})
						.then((res : any) => {
							uni.hideLoading();
							this.form.avatar = res;
						})
						.catch((err : any) => {
							uni.hideLoading();
							console.log(err);
						});
				}
			});
		}
		
		changeConstitution(e: any){
			console.log(e);
			this.constitutionIndex = e.detail.value;
			this.form.constitution = this.constitutionList[e.detail.value];
		}
		
		changeFamily(e: any){
			this.familyIndex = e.detail.value;
			this.form.fId = this.familyList[e.detail.value].id;
		}
		
		changeAllergy(e: any){
			console.log(e)
			this.form.allergy = e.detail.value ? 1 : 2;
		}
		
		deleteBabyModal(){
			(this.$refs.deletePopup as any).open();
		}
		
		deleteBaby(){
			uni.showLoading({
				title: '加载中',
			});
			this.$http.delete({
				url: this.$api.deleteBaby,
				data: {
					bid: this.bid
				}
			}).then((res: any) => {
				this.$Router.back(1);
				uni.hideLoading();
			})
		}
		
		handleConfirm(){
			console.log(this.form);
			uni.showLoading({
				title: '加载中',
			});
			let url : string = 'addBaby';
			let method : string = 'post';
			let data: any = {
				...this.form,
				birthWeight: +this.form.birthWeight
			};
			if (this.bid) {
				url = 'updateBaby';
				method = 'put';
				data.bid = this.bid;
			}
			this.$http[method]({
				url: this.$api[url],
				data: data
			}).then((res: any) => {
				this.$Router.back(1);
				uni.hideLoading();
			})
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background: #f5f5f5;
	}
	.user-setting-box {
		// background: #F5F5F5;
		height: 100vh;
		@include flex-y(flex-start);
		
		.bg{
			width: 100%;
			height: vw(300);
			background: linear-gradient(162.34deg, rgba(232, 237, 255, 1) 0%, rgba(244, 230, 255, 1) 47.75%, rgba(247, 242, 255, 1) 82.84%, rgba(251, 246, 252, 1) 100%);
			position: absolute;
			top: 0;
			z-index: -1;
		}

		.content {
			width: 100%;
			flex: 1;
			// padding: 0 vw(10);
			box-sizing: border-box;
			@include flex-y(flex-start);

			.baby-top{
				width: vw(355);
				background: #fff;
				margin-top: vw(60);
				border-radius: vw(10);
				.box{
					padding-left: vw(20);
					padding-right: vw(10);
					@include flex-x(flex-start);
					.label{
						width: vw(110);
						@include word-vw(14, #333);
						@include flex-x(flex-start);
					}
				}
				.pic-box{
					height: vw(60);
					.label{
						height: 100%;
						position: relative;
					}
					.upload-pic-box{
						@include wh(88, 88);
						border-radius: vw(44);
						border: vw(2) solid #fff;
						box-shadow: 0px 6px 16px  rgba(44, 0, 242, 0.16);
						background: #E3E3E3;
						position: absolute;
						bottom: vw(10);
						// overflow: hidden;
						.avatar{
							@include wh(88, 88);
							border-radius: vw(44);
						}
						.camera-box{
							@include wh(24, 24);
							border-radius: vw(12);
							background: #333;
							@include flex-x(center);
							position: absolute;
							bottom: vw(3);
							right: vw(3);
						}
					}
					.tip{
						@include word-vw(14, #ccc);
					}
				}
				.name-box{
					height: vw(60);
					.input{
						flex: 1;
						height: vw(40);
						background: #F6F6F6;
						border-radius: vw(5);
						text-align: center;
						font-size: vw(14);
					}
				}
				.gender-box{
					height: vw(44);
					.gender-select{
						@include flex-x(flex-start);
						@include word-vw(14, #333);
						.item{
							@include flex-x(flex-start);
							margin-right: vw(12);
							.icon{
								margin-right: vw(3);
							}
						}
					}
				}
			}
			.info-box{
				width: vw(355);
				height: vw(56);
				background: #fff;
				@include flex-x();
				padding-left: vw(20);
				padding-right: vw(10);
				box-sizing: border-box;
				@include word-vw(14, #333);
				margin-top: vw(1);
				&.top10{
					margin-top: vw(10);
				}
				&.top-border-radius{
					border-top-right-radius: vw(10);
					border-top-left-radius: vw(10);
				}
				&.bottom-border-radius{
					border-bottom-right-radius: vw(10);
					border-bottom-left-radius: vw(10);
				}
				.right{
					width: vw(210);
					@include flex-x(flex-end);
					.input{
						width: 100%;
						height: vw(40);
						border-radius: vw(5);
						background: #F6F6F6;
						text-align: center;
						font-size: vw(14);
					}
					/deep/.uni-date{
						@include flex-x(flex-end);
					}
					.date{
						width: vw(100);
						@include flex-x(flex-end);
						.icon{
							margin-left: vw(3);
						}
					}
					&.select-milk-powder{
						background: #F6F6F6;
						.input{
							flex: 1;
							margin-right: vw(10);
						}
						.btn{
							@include wh(56, 30);
							border-radius: vw(3);
							background: #5283FF;
							@include word-vw(12, #fff);
							@include flex-x(center);
							margin-right: vw(5);
						}
					}
				}
			}
		}
		.fixed-bottom {
			height: vw(60);
			width: 100%;
			// background: #fff;
			@include flex-x(center);
			padding: 0 vw(15);
			box-sizing: border-box;
			
			.btn{
				@include solid-btn(125, 50, #787878);
				border-radius: vw(25);
				margin-right: vw(15);
				background: #fff;
			}
		
			.solid-btn {
				background: $bk-color;
				@include solid-btn(345, 50, #333);
				border-radius: vw(25);
				@include word-vw(14, #fff);
				flex: 1;
			}
		}
	}
</style>