运动模块页面及接口+饮食长按删除功能添加

components/foods/index.vue

@@ -4,7 +4,7 @@
  * @Author: Aimee·Zhang
  * @Date: 2022-01-11 12:08:34
  * @LastEditors: Aimee·Zhang
- * @LastEditTime: 2022-01-13 11:19:06
+ * @LastEditTime: 2022-01-20 10:03:43
 -->
 
 <template>
@@ -59,7 +59,8 @@
                 <view
                     class="lists-right"
                     v-else-if="type==='no-dian'"
-                    @click="editGoods(foodsItem)"
+                    @click.stop="editGoods(foodsItem)"
+                    @longpress.stop="longClickGoods(foodsItem)"
                 >
                     <view class="lists-title">
                         {{foodsItem.name}}
@@ -116,6 +117,10 @@ export default {
         editGoods(item) {
             this.$emit("editGoods", item);
         },
+        // 长按删除
+        longClickGoods(item) {
+            this.$emit("longClickGoods", item);
+        },
     },
 };
 </script>

components/sports/addPopup.vue

@@ -0,0 +1,205 @@
+
+<!--
+ * @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>

components/sports/index.vue

@@ -0,0 +1,212 @@
+
+<!--
+ * @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>