194 lines
5.2 KiB
Vue
194 lines
5.2 KiB
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) {
|
|
this.addShow = true;
|
|
this.selectGoods = [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) {
|
|
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>
|