ZhHealth/pages/record/addExercises.vue

<!--
 * @Description:
 * @Author: Aimee·Zhang
 * @Date: 2022-01-11 11:27:17
 * @LastEditors: Aimee·Zhang
 * @LastEditTime: 2022-01-19 16:57:19
-->

<template>
	<view class="add-foods">
		<!-- 搜索页面 -->
		<u-search :show-action="true" actionText="搜索" :animation="true" :clearabled="true" placeholder="请输入运动名称" @custom="searchCustom" @clear="clearSearch" v-model="name" />
		<!-- 运动列表 -->
		<sports type="add" :lists="lists" @addSport="addSport" />
		<!-- 添加弹窗 -->
		<addPopup :selectSports="selectSports" :addSportsShow="addSportsShow" @comfirmSport="comfirmSport" @cancleSport="cancleSport" />
	</view>
</template>
<script>
import sports from '@/components/sports';
import addPopup from '@/components/sports/addPopup';
import { healthSports, addHealthSports } from '@/apis/interfaces/sport.js';
import moment, { duration } from 'moment';

export default {
	components: { sports, addPopup },
	data() {
		return {
			addSportsShow: false, // 添加运动弹窗显示
			selectSports: {}, // 选择新增的运动
			lists: [], // 运动列表
			page: 1,
			has_more: true,
			name: '', // 搜索运动名称
			today: moment(new Date()).format('YYYY-MM-DD')
		};
	},
	onLoad() {
		this.getExercises();
	},
	// 触底加载更多
	onReachBottom() {
		if (!this.has_more) {
			uni.showToast({
				title: '没有更多啦~',
				icon: 'none'
			});
		} else {
			this.page = this.page + 1;
			this.getExercises();
		}
	},
	methods: {
		// 获取运动列表
		getExercises() {
			let data = {
				page: this.page,
				name: this.name
			};
			healthSports(data).then(res => {
				this.lists = this.lists.concat(res.data);
				this.has_more = res.page.has_more;
			});
		},
		// 显示弹窗内容
		addSport(item) {
			console.log(item);
			this.selectSports = item;
			this.selectSports.duration = 60;
			this.addSportsShow = true;
		},
		// 弹窗确认按钮新增
		comfirmSport(show, duration) {
			let params = {
				unit: '1', // 时间单位：分钟 1 小时 2
				duration: duration, // 时常
				sport_id: this.selectSports.sport_id, // 运动id
				date: this.today // 日期
			};
			addHealthSports(params)
				.then(res => {
					this.addSportsShow = false;
					this.selectSports = {};
					this.$Router.back();
				})
				.catch(err => {
					uni.showToast({
						title: err.message,
						icon: 'none'
					});
				});
		},
		// 弹窗取消按钮
		cancleSport(show) {
			this.addSportsShow = show;
			this.duration = 60;
		},
		// 添加运动弹窗显示
		//#region  搜索相关方法 start
		// 点击搜索左侧按钮
		searchCustom(e) {
			console.log(e);
			this.name = e;
			this.reset();
		},
		// 清空数组重新请求数据
		reset() {
			this.page = 1;
			this.has_more = true;
			this.lists = [];
			this.getExercises();
		},
		// 点击搜索后面按钮触发事件事件
		clearSearch() {
			this.name = '';
			this.reset();
		}
		//#endregion  搜索相关方法  end
	}
};
</script>
<style lang="scss" scoped>
.add-foods {
	padding: $padding;
	.lists {
		padding: $padding * 0.6 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		.lists-right {
			flex: 1;
			font-size: $title-size-m - 6;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			color: $text-gray-m;
			border-bottom: solid 1rpx #f7f7f7;
			margin-left: $margin * 0.8;
			padding: $padding 0;
		}
		.lists-title {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: center;
			box-sizing: border-box;
			font-size: $title-size-m;
			color: $text-color;
			.des {
				margin-top: 10rpx;
			}
			span {
				color: $text-price;
				font-size: $title-size-m - 6;
				font-weight: normal;
				padding-right: $padding * 0.3;
			}
			.des {
				color: $text-gray-m;
				font-size: $title-size-m - 6;
				font-weight: normal;
			}
		}
	}
}
</style>