TmOct5/dtx_store
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
唐明明
2022-06-07 16:37:03 +08:00
parent b1e8d774ff
commit 1c6091371e
1706 changed files with 225309 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

208
components/sports/addPopup.vue Normal file
View File

@@ -0,0 +1,208 @@
<!--
* @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="16"
label="删除这条数据"
labelColor="#ddd"
:bold="true"
@click="delSport"
style="padding-top: 30rpx;"
/>
</view>
<u-input
placeholder="60"
class="select-time"
v-model="duration"
type="number"
>
<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-m;
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;
font-size: $title-size;
font-weight: bold;
}
}
.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-m;
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>