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

<template>
	<view class="user-setting-box">
		<!-- #ifndef MP-TOUTIAO -->
		<Navbar background-color="#fff" color="#333" title="成长备注"></Navbar>
		<!-- #endif -->
		<view class="content">
			<view class="top-box">
				<textarea class="textarea" v-model="form.content" placeholder="点击输入"></textarea>
				<MulImgUpload @update="getImgs" :imgs="form.pics" :max="9" :width="100 / 3.75" :height="100 / 3.75"
					addColor="#999999">
				</MulImgUpload>
			</view>
			<view class="info-box top-border-radius bottom-border-radius top10">
				<view class="label">时间</view>
				<view class="right">
					<!-- <uni-datetime-picker v-model="form.remarkTime" :border="false" type="date" class="date"/> -->
					<uni-datetime-picker v-model="form.remarkTime" :border="false" type="datetime" class="date-box">
						<view class="date">
							{{form.remarkTime || '请选择时间'}}
							<IconText :code="`\ue88e`" class="icon" size="12" color="#C6C5CB"></IconText>
						</view>
					</uni-datetime-picker>
				</view>
			</view>
		</view>
		<view class="fixed-bottom" >
			<view class="btn" @click="deleteBabyWeightModal" v-if="id">删除</view>
			<view class="solid-btn" @click="handleConfirm">保存</view>
		</view>
		<ShowModal ref="deletePopup" title="提示" @submit="deleteBabyWeight" 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({})
	export default class UserSetting extends Mixins(loginMixin) {
		// @baseModule.Getter('_userInfo') _userInfo: any;
		form: any = {
			content: null,
			pics: [],
			remarkTime: '',
		};
		bid: any = null;
		id: any = null;
		
		onShow() {
			
		}
		
		onLoad(){
			this.bid = +this.$Route.query.bid;
			if (this.$Route.query.id) {
				this.id = +this.$Route.query.id;
				this.getBabyRemarkInfo();
			}
		}
		
		getImgs(pics: any) {
			this.form.pics = pics;
		}
		
		getBabyRemarkInfo(){
			uni.showLoading({
				title: '加载中',
			});
			this.$http.get({
				url: this.$api.getBabyRemarkInfo,
				data: {
					id: this.id
				}
			}).then((res: any) => {
				for(let key in this.form){
					this.form[key] = res[key];
				}
				uni.hideLoading();
			})
		}
		
		deleteBabyWeightModal(){
			(this.$refs.deletePopup as any).open();
		}
		
		deleteBabyWeight(){
			uni.showLoading({
				title: '加载中',
			});
			this.$http.delete({
				url: this.$api.deleteBabyGrowth,
				data: {
					id: this.id
				}
			}).then((res: any) => {
				this.$Router.back(1);
				uni.hideLoading();
			})
		}
		
		handleConfirm(){
			console.log(this.form);
			uni.showLoading({
				title: '加载中',
			});
			let url : string = 'addBabyRemark';
			let method : string = 'post';
			let data: any = {
				...this.form,
				bid: this.bid,
			};
			if (this.id) {
				url = 'updateBabyRemark';
				method = 'put';
				data.id = this.id;
			}
			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);

		.content {
			width: 100%;
			flex: 1;
			// padding: 0 vw(10);
			box-sizing: border-box;
			@include flex-y(flex-start);
			
			.top-box{
				width: vw(355);
				background: #fff;
				border-radius: vw(10);
				margin-top: vw(10);
				padding: vw(10);
				box-sizing: border-box;
				.textarea{
					width: 100%;
					height: vw(120);
					background: #F6F6F6;
					padding: vw(8) vw(12);
					font-size: vw(14);
					box-sizing: border-box;
					margin-bottom: vw(16);
				}
			}
			
			.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);
						}
					}
				}
			}
		}
		.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>