ZhHealth/pages/record/addFoods.vue

<!--
 * @Description:
 * @Author: Aimee·Zhang
 * @Date: 2022-01-11 11:27:17
 * @LastEditors: Aimee·Zhang
 * @LastEditTime: 2022-01-13 11:24:47
-->

<template>
	<view class="add-foods">
		<view class="re">
			<view>低等热量</view>
			<view>中等热量</view>
			<view>高等热量</view>
		</view>
		<!-- 搜索页面 -->
		<u-search :show-action="true" actionText="搜索" :animation="true" :clearabled="true" placeholder="请输入食品名称" @custom="searchCustom" @clear="clearSearch" v-model="name" />
		<!-- 食品列表 -->
		<goodsList :lists="lists" type="dian" @addGoods="addGoods" />
		<!--  添加食谱弹窗 -->
		<addFoods v-if="addShow" :addShow="addShow" :selectGoods="selectGoods" :decimals="true" @confirm="confirmHandle" @close="closeHandle" @tabGoodsInfo="tabGoodsInfo" max="999" />
	</view>
</template>
<script>
import goodsList from '@/components/foods';
import addFoods from '@/components/add-goods-template/add-goods-template';
import { healthFoods, addHealthFoods } from '@/apis/interfaces/foods.js';
import moment from 'moment';

export default {
	components: { goodsList, addFoods },
	data() {
		return {
			addShow: false, // 添加食品显示
			selectGoods: [], // 选择新增的食品
			editGoodsId: '', // 编辑食物
			type: '', // 新增食品时候 1早2午3晚4早加5午加6晚加
			lists: [], // 食品列表
			page: 1,
			has_more: true,
			name: '', // 搜索食品名称
			date: moment(new Date()).format('YYYY-MM-DD')
		};
	},
	onShow() {
		// 有id就是编辑不需要重新处理type了
		if (this.$Route.query.id) {
			this.editGoodsId = this.$Route.query.id;
			return;
		}
		//没有id的时候就是新增要处理type
		this.type = this.$Route.query.type;
		// this.getFoods();
	},
	onLoad() {
		this.getFoods();
	},
	// 触底加载更多
	onReachBottom() {
		if (!this.has_more) {
			uni.showToast({
				title: '没有更多啦~',
				icon: 'none'
			});
		} else {
			this.page = this.page + 1;
			this.getFoods();
		}
	},
	methods: {
		// 获取食品列表
		getFoods() {
			let data = {
				page: this.page,
				name: this.name
			};
			healthFoods(data).then(res => {
				console.log(res);
				this.lists = this.lists.concat(res.data);
				this.has_more = res.page.has_more;
			});
		},
		// 监听点击键盘触发返回值新增食品
		confirmHandle(value) {
			console.log(value);
			// 新添加食物
			let data = {
				type: this.type,
				ser: 1,
				weight: value,
				food_id: this.selectGoods[0].food_id,
				date: this.date
			};
			this.addHealthFoods(data);
		},
		// 添加食物
		addHealthFoods(data) {
			addHealthFoods(data).then(res => {
				console.log(res);
				this.addShow = false;
				this.$Router.back();
			});
		},
		closeHandle() {
			//键盘关闭的回调函数
			this.addShow = false;
		},
		// 监听子组件的新增方法
		addGoods(e) {
			console.log('父组件监听到了子组件的新增方法', e);
			this.addShow = true;
			this.selectGoods = [e];
		},
		// 监听子组件的新增方法
		tabGoodsInfo(e) {
			console.log('父组件监听到了子组件的商品详情页面', e);
		},
		// 点击搜索左侧按钮
		searchCustom(e) {
			console.log(e);
			this.name = e;
			this.reset();
		},
		// 清空数组重新请求数据
		reset() {
			this.page = 1;
			this.has_more = true;
			this.lists = [];
			this.getFoods();
		},
		// 点击搜索后面按钮触发事件事件
		clearSearch() {
			this.name = '';
			this.reset();
		},
		// 跳转到食品详情
		tabGoodsInfo(e) {
			console.log(e);
			this.$Router.push({
				name: 'rankingDetails',
				params: e
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.add-foods {
	padding: $padding;
	.re{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		box-sizing: border-box;
		padding:$padding $padding * 2;
		font-size: $title-size-m;
		view:before{
			width: 20rpx;
			height: 20rpx;
			border-radius: 50%;
			display: inline-block;
			margin-right: 10rpx;
			content: '';
		}
		view:nth-child(3):before {
		    background: #fa624d;
		}
		view:nth-child(2):before  {
		    background: #fbbf0f;
		}
		view:nth-child(1):before  {
		    background: #02c7bd;
		}
	}
}
</style>