ZhHealth/components/sports/index.vue

<!--
 * @Description:运动列表
 * @Author: Aimee·Zhang
 * @Date: 2022-01-19 15:07:02
 * @LastEditors: Aimee·Zhang
 * @LastEditTime: 2022-01-20 10:03:27
-->

<template>
    <view class="foods--lists">
        <view
            class="foods-lists"
            v-for="sportItem in lists"
            :key="sportItem.sport_id"
        >
            <view class="lists-left">
                <u-image
                    :src="sportItem.cover?sportItem.cover:require('../../static/imgs/apple.png')"
                    :lazy-load="true"
                    v-if="type === 'add'"
                    radius="10rpx"
                    width="100rpx"
                    height="100rpx"
                    class="goods-img"
                />
                <!-- 新增-->
                <view
                    class="lists-right"
                    v-if="type === 'add'"
                    @click="addSport(sportItem)"
                >
                    <view class="lists-title">
                        {{sportItem.name}}
                        <view class="des"><span>{{sportItem.calory}}</span> 千卡/60分钟</view>
                    </view>
                    <u-icon
                        name="arrow-right"
                        color="#ddd"
                        size="13"
                        :bold="true"
                    />
                </view>

                <!-- 显示结果 -->
                <u-image
                    :src="sportItem.sport.cover?sportItem.sport.cover:require('../../static/imgs/apple.png')"
                    :lazy-load="true"
                    v-if="type === 'edit'"
                    radius="10rpx"
                    width="100rpx"
                    height="100rpx"
                    class="goods-img"
                />
                <view
                    class="lists-right"
                    v-if="type==='edit'"
                    @click.stop="editSport(sportItem)"
                    @longpress.stop="longClick(sportItem)"
                >
                    <view class="lists-title">
                        {{sportItem.sport.name}}
                        <view class="des">{{sportItem.duration}}分钟</view>
                    </view>

                    <view class="lists-right1">
                        {{sportItem.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: {
        lists: {
            type: Array,
            default: [],
        },
        type: {
            type: String,
            default: "add",
        },
    },
    methods: {
        // 添加运动模块
        addSport(item) {
            this.$emit("addSport", item);
        },
        // 编辑运动
        editSport(item) {
            this.$emit("editSport", item);
        },
        // 长按删除触发事件
        longClick(item) {
            this.$emit("longClick", 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;
        opacity: 0.4;
    }
    .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>