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.date = this.$Route.query.date;
            console.log(this.date,'date.........')
            // 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) {
                // 新添加食物
                let data = {
                    type: this.type,
                    ser: 1,
                    weight: value,
                    food_id: this.selectGoods[0].food_id,
                    date: this.date,
                };
                console.log(data,'data...........');
                this.addHealthFoods(data);
            },
            // 添加食物
            addHealthFoods(data) {
                addHealthFoods(data).then((res) => {
                    console.log(res);
                    this.addShow = false;
                    this.$Router.back();
                }).catch(err => {
                    console.log(err, '添加食物error');
                    uni.showToast({
                        title: err.message,
                        icon: "none",
                        duration:2000,
                        mask:true
                    })
                    setTimeout(()=>{
                        this.$Router.back();
                    },2000)
                });
            },
            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>