ZhHealth/components/sports/addPopup.vue

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

<template>
    <view class="foods--lists">
        <u-popup
            :show="addSportsShow"
            :round="4"
            mode="center"
        >
            <view class="popup">
                <view class="popup-title">
                    <span @click="cancleSport">取消</span>
                    <span class="title">{{selectSports.title || '新增运动'}}</span>
                    <span @click="comfirmSport">确认</span>
                </view>
                <view class="popup-item">
                    <u-image
                        :lazy-load="true"
                        :src="selectSports.cover?selectSports.cover:require('../../static/imgs/apple.png')"
                        radius="10"
                        width="140rpx"
                        height="140rpx"
                        class="goods-img"
                    />
                    <view class="popup-item-title">
                        {{selectSports.name}}
                        <view class="des"><span>{{selectSports.calory || '0.0'}}</span> 千卡/60分钟</view>
                    </view>
                    <u-icon
                        v-if="selectSports.title === '编辑运动'"
                        name="trash"
                        color="#ddd"
                        size="20"
                        label="删除这条数据"
                        labelColor="#ddd"
                        :bold="true"
                        @click="delSport"
                        style="padding-top: 30rpx;"
                    />
                </view>
                <u-input
                    placeholder="60"
                    class="select-time"
                    v-model="duration"
                >
                    <u--text
                        text="运动时间："
                        slot="prefix"
                        margin="0 3px 0 0"
                        type="tips"
                    />
                    <u--text
                        text="分钟"
                        slot="suffix"
                        margin="0 3px 0 0"
                        type="tips"
                    />
                </u-input>
                <view class="all-calory"> ≈ <span> {{total}} </span> 千卡</view>
            </view>
        </u-popup>
    </view>
</template>
<script>
export default {
    data() {
        return {
            duration: 60,
        };
    },
    props: {
        selectSports: {
            type: Object,
            default: {},
        },
        addSportsShow: {
            type: Boolean,
            default: false,
        },
    },
    computed: {
        total() {
            return ((this.selectSports.calory * this.duration) / 60).toFixed(0);
        },
    },
    watch: {
        addSportsShow() {
            this.duration = 60;
        },
        selectSports(val) {
            console.log(val);
            this.duration = val.duration;
            console.log("监听传过来的参数");
        },
    },
    methods: {
        // 弹窗确认和取消功能
        comfirmSport() {
            this.$emit("comfirmSport", true, this.duration);
        },
        // 取消按钮触发事件
        cancleSport() {
            this.$emit("cancleSport", false);
        },
        // 删除按钮触发事件
        delSport() {
            this.$emit("delSport");
        },
    },
};
</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;
    // 弹窗样式
    .popup {
        width: 600rpx;
        // min-height: 700rpx;
        position: relative;
        .popup-title {
            color: $main-color;
            font-size: $title-size + 4;
            border-bottom: solid 1rpx #f9f9f9;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            box-sizing: border-box;
            span {
                padding: $padding + 10 $padding;
            }
            .title {
                color: $text-color;
            }
        }

        .popup-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            padding: $padding * 2 $padding $padding $padding;
            font-size: $title-size + 4;
            color: $text-color;
            border-bottom: solid 1rpx #f9f9f9;
            .popup-item-title {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                box-sizing: border-box;
                padding-top: $padding;
                .des {
                    padding-top: $padding * 0.4;
                    span {
                        color: $text-price;
                        padding-right: $padding * 0.3;
                    }
                }
            }
        }

        .select-time {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            padding: $padding 0;
            // background: $main-color;
            color: #fff;
            margin: $margin * 3 0 $margin * 2 0;
            width: 90%;
            border-radius: 10rpx;
            margin-left: 5%;
        }
        .all-calory {
            position: absolute;
            bottom: $padding * 6;
            right: $padding;
            font-size: $title-size-m;
            color: $text-gray-m;
            span {
                padding: 0 $padding * 0.4;
                font-size: $title-size + 10;
                color: $main-color;
            }
        }
    }
}
</style>