ZhHealth/components/foods/index.vue

<!--
 * @Description:是添加早中晚餐时候用的视频列表
 * @Author: Aimee·Zhang
 * @Date: 2022-01-11 12:08:34
 * @LastEditors: Aimee·Zhang
 * @LastEditTime: 2022-01-20 10:03:43
-->

<template>
    <view class="foods--lists">
        <view
            class="foods-lists"
            v-for="foodsItem in lists"
            :key="foodsItem.food_id"
        >
            <view class="lists-left">
                <u-image
                    :src="foodsItem.cover?foodsItem.cover:require('../../static/imgs/apple.png')"
                    :lazy-load="true"
                    radius="10rpx"
                    width="100rpx"
                    height="100rpx"
                    class="goods-img"
                />
                <!-- 只有'点' 点击食物列表-->
                <view
                    class="lists-right"
                    v-if="type === 'dian'"
                    @click="addGoods(foodsItem)"
                >
                    <view class="lists-title">
                        {{foodsItem.name}}
                        <view class="des"><span>{{foodsItem.calory}}</span> 千卡/100克</view>
                    </view>
                    <view :class="['dian', foodsItem.color === 'high'?'dian2':foodsItem.color === 'low'?'dian3':'dian1']"></view>
                </view>
                <!-- 有'点'和'右箭头' -->
                <view
                    class="lists-right"
                    v-else-if="type==='dian-right'"
                    @click="tabGoodsInfo(foodsItem)"
                >
                    <view class="lists-title">
                        {{foodsItem.name}}
                        <view class="des"><span>{{foodsItem.calory}}</span> 千卡/100克</view>
                    </view>
                    <view class="dianlists">
                        <view :class="['dian', foodsItem.color === 'high'?'dian2':foodsItem.color === 'low'?'dian3':'dian1']"></view>
                        <u-icon
                            name="arrow-right"
                            color="#ddd"
                            size="13"
                            :bold="true"
                        />
                    </view>
                </view>
                <!-- 没有'点' 显示总值 -->
                <view
                    class="lists-right"
                    v-else-if="type==='no-dian'"
                    @click.stop="editGoods(foodsItem)"
                    @longpress.stop="longClickGoods(foodsItem)"
                >
                    <view class="lists-title">
                        {{foodsItem.name}}
                        <view class="des">{{foodsItem.weight}}克</view>
                    </view>

                    <view class="lists-right1">
                        {{foodsItem.calory}}<span class="dw">千卡</span>
                        <u-icon
                            name="arrow-right"
                            color="#ddd"
                            size="13"
                            :bold="true"
                        />
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    data() {
        return {};
    },
    props: {
        /** type
         *  'dian'就是结尾处是点;
         *  没有点'no-dian'是默认值没有任何点
         *  dian-right是有点和右箭头
         *  ***********************
         *  lists 传过来的列表
         *
         **/
        lists: {
            type: Array,
            default: [],
        },
        type: {
            type: String,
            default: "no-dian",
        },
    },
    methods: {
        // 跳转到食品详情页面
        addGoods(item) {
            this.$emit("addGoods", item);
        },
        // 跳转到食品详情
        tabGoodsInfo(item) {
            this.$emit("tabGoodsInfo", { title: item.name, id: item.food_id });
        },
        // 编辑食品
        editGoods(item) {
            this.$emit("editGoods", item);
        },
        // 长按删除
        longClickGoods(item) {
            this.$emit("longClickGoods", item);
        },
    },
};
</script>
<style lang="scss" scoped>
// 列表
.foods-lists {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    margin-top: $margin;
    .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;
        .dw {
            margin: 0 $margin * 0.6 0 $margin * 0.4;
        }
        .lists-right1 {
            font-size: $title-size-m - 6;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            color: $text-gray-m;
            font-weight: normal;
            .dw {
                margin: 0 $margin * 0.6 0 $margin * 0.4;
            }
        }
    }

    .goods-img {
        box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
        border-radius: 20rpx;
    }
    .lists-left {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        box-sizing: border-box;
        font-size: $title-size - 2;
        color: $text-color;
        font-weight: bold;
        flex: 1;
        .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;
            }
        }
    }
    .dian {
        width: 20rpx;
        height: 20rpx;
        border-radius: 50%;
        margin-right: $margin;
    }
    .dian1 {
        background: #fbbf0f;
    }
    .dian2 {
        background: #fa624d;
    }
    .dian3 {
        background: #02c7bd;
    }
    .dianlists {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        box-sizing: border-box;
    }
}
</style>