ProAdvanced/pages/personal-page/plan/plan.vue

<template>
	<view>
		<uni-nav-bar id="nav-bar" status-bar="true" @clickLeft="onBack()" title="健身计划" color="#000000" fixed="true" :border="false">
			<view slot="left">
				<view class=" flex align-center margin-left">
					<image class="p-left-arrow" src="../../../static/p-left-arrow.png"></image>
				</view>
			</view>

		</uni-nav-bar>

		<view class="card-view text-center">
			<!-- @tap="showModal" data-target="showPickerModal" data-type="target_weight" -->
			<view class="plan-w" style="margin-top: 34px;">
				<view class="plan-w-child">
					<image src="../../../static/plan_w_bg.png"></image>
				</view>

				<view class="plan-w-child">
					<image class="plan-w-img" src="../../../static/plan_w.png"></image>
					<view class="padding-sm make-text-bPurple text-11px">
						<span style="font-size: 29px;">{{ currenWeight }}</span>
						公斤
					</view>
					<view class="text-gray text-13px">累计减重</view>
				</view>
			</view>
			<view class="plan-Tip flex justify-center align-center">
				<view class="plan-Tip-child make-text-bPurple flex justify-center align-center">每天努力一点，离成功更近一步，加油！</view>
			</view>
		</view>

		<view class="card-view flex-sub text-center bg-white margin-top">
			<view class="plan-tagert flex justify-center align-center">
				<view class="plan-tagert-child make-text-bPurple flex justify-start align-center">
					<image class="avatar-img" :src="avatarUrl"></image>
					<view class="flex flex-direction justify-between">
						<view class="text-black text-bold padding-left-lg margin-xs" style="text-align: start;">每天目标</view>
						<view class="flex text-gray border">
							<view class="padding-left-lg margin-xs flex" style="position: relative; flex-shrink: 0; " @tap="showModal"
							 data-target="showPickerModal" data-type="target_calorie">
								<view class="make-text-bPurple text-xl margin-right-sm ">{{ currentPlanData.calorie}}</view>
								<view>大卡</view>
								<view class="only-arrow"></view>
							</view>
							<view class="padding-left-lg margin-xs flex" style="position: relative;flex-shrink: 0;" @tap="showModal"
							 data-target="showPickerModal" data-type="target_minute">
								<view class="make-text-bPurple text-xl margin-right-sm">{{ currentPlanData.sportTime }}</view>
								<view>分钟</view>
								<view class="only-arrow"></view>
							</view>

						</view>
					</view>
				</view>
			</view>

			<view class="cu-bar bg-white">
				<view class="action">
					<image style="width: 42rpx;height: 42rpx; margin-right: 26rpx;" src="../../../static/plan_w.png"></image>
					<span style="font-weight: bold;">终极目标</span>
				</view>
				<view class="action resetBtn" style="margin-right: 60rpx;" @tap="onReset"><text class="text-13px text-white" style="letter-spacing: 1px;">自动生成计划</text></view>
			</view>
			<view class="cu-form-group" @tap="showModal" data-target="showPickerModal" data-type="startTime">
				<view class="flex justify-center align-center">
					<image class="plan-litle-img" src="../../../static/plan_t.png"></image>
					<view class="title make-text-bPurple">开始时间</view>
				</view>

				<view class="picker flex" style="position: relative;">
					<view>{{ startTime }}</view>
					<view class="only-arrow"></view>
				</view>
			</view>
			<view class="cu-form-group" style="border-top:none" data-target="showPickerModal" data-type="endTime">
				<view class="flex justify-center align-center">
					<image class="plan-m-img" src="../../../static/plan_m.png"></image>
					<view class="title text-gray" style="font-size: 12px;">计划总天数 {{ currentDays }} 天，加油!</view>
				</view>
			</view>
			<view class="cu-form-group" style="border-top:none" @tap="showModal" data-target="showPickerModal" data-type="endTime">
				<view class="flex justify-center align-center">
					<image class="plan-litle-img" src="../../../static/plan_e.png"></image>
					<view class="title make-text-bPurple">截止时间</view>
				</view>
				<view class="picker flex" style="position: relative;">
					<view>{{ endTime }}</view>
					<view class="only-arrow"></view>
				</view>
			</view>
		</view>
		<view class="flex flex-direction" style="padding: 23px 42rpx 46px"><button class="cu-btn make-bg-bPurple text-white lg"
			 @tap="onUpdatePlanInfo">确定</button></view>
		<view class="cu-modal bottom-modal" :class="modalName == 'showPickerModal' ? 'show' : ''" @touchmove.stop.prevent="moveHandle">
			<view class="cu-dialog" style="border-top-right-radius: 20rpx; border-top-left-radius: 20rpx;">
				<myPicker v-if="modalName == 'showPickerModal' ? true:false" :pickerObj="pickerObj" @confirmEvent="onConfirm"
				 @cancelEvent="onCancel"></myPicker>
			</view>
		</view>
	</view>
</template>

<script>
	import config from '../../../common/config.js';
	import date from '../../../util/util-js/date.js';
	import reqUtil from '../../../util/util-js/requstUtil.js';

	import myPicker from '@/components/slambb-picker/slambb-picker.vue';
	import pickerData from '@/components/slambb-picker/picker.js';

	import utilData from '@/util/util-js/util-data.js';

	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		computed: mapState(['planData', 'avatarUrl', 'days', "defaultPlanData", "remainingDays"]),
		components: {
			myPicker
		},
		data() {
			return {
				startTime: '',
				endTime: '',
				pickerObj: {
					pickerType: 'dateItem',
					pickerTitle: '记时间'
				},
				modalName: null,
				pikerType: '',
				oldPlanData: null,
				// 当前plan页面的数据
				currentPlanData: null,
				// 当前天数
				currentDays: 0,
				//如果需要更新
				hasUpdate: false,
				//显示的重量
				currenWeight: 0
			};
		},
		onLoad: function(option) {
			this.oldPlanData = JSON.parse(JSON.stringify(this.planData));
			this.currentPlanData = JSON.parse(JSON.stringify(this.planData));
			this.startTime = this.currentPlanData.startTime;
			this.endTime = this.currentPlanData.endTime;
			this.currentDays = this.days;

			// 用累计的卡路里来计算当前累计的重量
			// let weight = this.currentPlanData.cumulativeCalorie *2 / 7000;
			let weight = utilData.calorieConversionKg(this.currentPlanData.cumulativeCalorie);

			this.currenWeight = weight.toFixed(2);
		},
		methods: {
			...mapMutations(['addlocalCalorie']),
			DateChange(e) {
				this.planData.startTime = e.detail.value;
			},
			onConfirm(args) {
				this.hasUpdate = true;
				console.log('onConfirm', args);
				// detail.__args__[0]
				// let args = data;
				//月0~11
				if (this.pikerType == 'startTime') {
					let nDate = new Date();
					nDate.setFullYear(args.value[0], args.value[1] - 1, args.value[2]);
					// 判断日期
					// console.log(date.formatDate(nDate),"==",date.formatDate(nDate).replace(/-/g, '/'))
					var sDate1 = Date.parse(date.formatDate(nDate));
					var sDate2 = Date.parse(this.endTime);
					var dateSpan = sDate2 - sDate1;
					if (dateSpan > 0) {
						this.startTime = date.formatDate(nDate);
						this.currentPlanData.startTime = date.formatTime(nDate);
						// this.currentDays = date.datedifference(this.startTime, this.endTime);
						this.currentDays = Math.floor(Math.abs(dateSpan) / (24 * 3600 * 1000));
					} else {
						uni.showToast({
							title: "开始日期超过截止日期!",
							icon: "none"
						})
					}


				} else if (this.pikerType == 'endTime') {
					let nDate = new Date();
					nDate.setFullYear(args.value[0], args.value[1] - 1, args.value[2]);

					// 判断日期
					var sDate1 = Date.parse(this.startTime.replace(/-/g, '/'));
					var sDate2 = Date.parse(date.formatDate(nDate).replace(/-/g, '/'));
					var dateSpan = sDate2 - sDate1;
					// console.log(dateSpan);
					if (dateSpan > 0) {
						this.endTime = date.formatDate(nDate);
						this.currentPlanData.endTime = date.formatTime(nDate);
						// this.currentDays = date.datedifference(this.startTime, this.endTime);
						this.currentDays = Math.floor(Math.abs(dateSpan) / (24 * 3600 * 1000));
					} else {
						uni.showToast({
							title: "开始日期不能超过或等于截止日期!",
							icon: "none"
						})
					}



				} else if (this.pikerType == 'target_weight') {
					console.log('target_weight：');
					this.currentPlanData.targetWeight = args.value;
				} else if (this.pikerType == 'target_calorie') {
					console.log('target_calorie：');
					this.currentPlanData.calorie = parseInt(args.value);
				} else if (this.pikerType == 'target_minute') {
					console.log('target_minute：');
					this.currentPlanData.sportTime = parseInt(args.value);
				}

				this.hideModal();
			},
			onCancel(value) {
				console.log('onCancel', value);
				this.modalName = null;
			},
			showModal(e) {
				// console.log(e.currentTarget.type);
				this.modalName = e.currentTarget.dataset.target;
				this.pikerType = e.currentTarget.dataset.type;
				switch (this.pikerType) {
					case 'target_weight':
						this.$set(this.pickerObj, 'pickerLeftList', pickerData.getWeightList().leftList);
						this.$set(this.pickerObj, 'pickerRightList', pickerData.getWeightList().rightList);
						this.$set(this.pickerObj, 'pickerType', 'doubleItem');
						this.$set(this.pickerObj, 'pickerUnit', '斤');
						this.$set(this.pickerObj, 'pickerTitle', '记体重');
						this.$set(this.pickerObj, 'showInput', true);
						break;
					case 'startTime':
					case 'endTime':
						this.$set(this.pickerObj, 'pickerType', 'dateItem');
						this.$set(this.pickerObj, 'pickerTitle', '记时间');
						this.$set(this.pickerObj, 'showInput', false);
						break;
					case 'target_calorie':
						this.$set(this.pickerObj, 'pickerLeftList', pickerData.getCalorieList().calorieList);
						this.$set(this.pickerObj, 'pickerRightList', []);
						this.$set(this.pickerObj, 'pickerUnit', '大卡');
						this.$set(this.pickerObj, 'pickerType', 'singleItem');
						this.$set(this.pickerObj, 'pickerTitle', '卡路里');
						this.$set(this.pickerObj, 'defaultValue', this.currentPlanData.calorie);
						this.$set(this.pickerObj, 'showInput', true);
						break;
					case 'target_minute':
						this.$set(this.pickerObj, 'pickerLeftList', pickerData.getMinuteList().minuteList);
						this.$set(this.pickerObj, 'pickerRightList', []);
						this.$set(this.pickerObj, 'pickerUnit', '分钟');
						this.$set(this.pickerObj, 'pickerType', 'singleItem');
						this.$set(this.pickerObj, 'pickerTitle', '预计时间');
						this.$set(this.pickerObj, 'defaultValue', this.currentPlanData.sportTime);
						this.$set(this.pickerObj, 'showInput', true);
						break;
				}
			},
			hideModal(e) {
				this.modalName = null;
				this.pikerType = '';
			},
			moveHandle() {
				return;
			},
			onUpdatePlanInfo() {
				let that = this;
				console.warn(that.currentPlanData);
				if (!that.hasUpdate) {
					uni.showToast({
						title: '没有数据更新',
						icon: 'none'
					});
					return;
				}

				if (that.currentPlanData.startTime > that.currentPlanData.endTime||
				date.datedifference(that.currentPlanData.startTime, that.currentPlanData.endTime) == 0) {
					uni.showToast({
						title: '截止时间不能早于或等于开始时间',
						icon: 'none'
					});
					return;
				}
				// console.warn(that.currentPlanData);
				// return;
				reqUtil.requestData(config.URL.FITNESSPROGRAM, that.currentPlanData, 'POST').then(
					res => {
						console.log('更新信息成功', res);
						if (res.code == 0) {
							uni.showToast({
								title: '更新成功',
								mask: true,
								duration: 1000
							});
							that.oldPlanData = res.data;
							that.hasUpdate = false;
							that.$store.state.planData = Object.assign(that.$store.state.planData, res.data, {
								sportTime: Number(that.currentPlanData.sportTime) 
							});
							// console.log("========",that.planData);
							that.$store.state.days = date.datedifference(res.data.startTime, res.data.endTime) + 1;
							let nDate = new Date();
							let tempTime = date.formatDate(nDate);
							that.$store.state.remainingDays = date.datedifference(tempTime, res.data.endTime) + 1;
							// console.log("remainingDays==", that.remainingDays);
							setTimeout(function() {
								// console.log("updateArcbarData==setTimeout");
								that.addlocalCalorie(0);
								// uni.$emit('updateArcbarData', 'plan');
								uni.navigateBack();
							}, 500);
						}
					},
					e => {
						console.log(e);
					}
				);
			},
			//重置默认信息
			onReset() {
				uni.showToast({
					title: '生成计划成功！',
					icon: 'none',
				})
				this.hasUpdate = true;
				// 拷贝
				this.currentPlanData = JSON.parse(JSON.stringify(this.defaultPlanData));
				this.startTime = this.currentPlanData.startTime;
				this.endTime = this.currentPlanData.endTime;
				this.currentDays = date.datedifference(this.startTime, this.endTime);
				// console.log("this.defaultPlanData=",this.defaultPlanData);
			},
			onBack() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	};
</script>

<style>
	.plan-w {
		position: relative;
		/* width: 464rpx; */
		height: 464rpx;
	}

	.plan-w-bg-img {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		width: 464rpx;
		height: 464rpx;
	}

	.plan-w-child {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		width: 464rpx;
		height: 464rpx;

		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.plan-w-img {
		width: 46rpx;
		height: 46rpx;
	}

	.plan-Tip {
		height: 90rpx;
		margin: 60rpx 0;
	}

	.plan-Tip-child {
		background-color: #f5f5ff;
		border-radius: 20px;
		width: 614rpx;
		height: 90rpx;
		margin: 60rpx 0;
	}

	.plan-litle-img {
		width: 32rpx;
		height: 32rpx;
		margin-right: 32rpx;
	}

	.plan-m-img {
		width: 1rpx;
		height: 110rpx;
		margin: 0 41rpx 0 14rpx;
		border: 1rpx dashed rgba(151, 151, 255, 1);
	}

	.resetBtn {
		background-color: rgba(151, 151, 255, 1);
		border-radius: 3px;
		padding: 10rpx 32rpx;
	}

	.plan-tagert {
		margin: 20px 0;
		height: 208rpx;
	}

	.plan-tagert-child {
		background-color: #f5f5ff;
		border-radius: 20px;
		width: 614rpx;
		height: 208rpx;
		padding-left: 40rpx;
	}

	.avatar-img {
		width: 96rpx;
		height: 96rpx;
		border: 4rpx solid rgba(151, 151, 255, 1);
		border-radius: 45px;
		flex-shrink: 0;
	}
</style>