184 lines
5.2 KiB
Vue
184 lines
5.2 KiB
Vue
<!--
|
|
* @Description:
|
|
* @Author: Aimee·Zhang
|
|
* @Date: 2022-01-11 11:27:17
|
|
* @LastEditors: Aimee·Zhang
|
|
* @LastEditTime: 2022-01-19 16:57:19
|
|
-->
|
|
|
|
<template>
|
|
<view class="add-foods">
|
|
<!-- 搜索页面 -->
|
|
<u-search
|
|
:show-action="true"
|
|
actionText="搜索"
|
|
:animation="true"
|
|
:clearabled="true"
|
|
placeholder="请输入运动名称"
|
|
@custom="searchCustom"
|
|
@clear="clearSearch"
|
|
v-model="name"
|
|
/>
|
|
<!-- 运动列表 -->
|
|
<sports
|
|
type="add"
|
|
:lists="lists"
|
|
@addSport="addSport"
|
|
/>
|
|
<!-- 添加弹窗 -->
|
|
<addPopup
|
|
:selectSports="selectSports"
|
|
:addSportsShow="addSportsShow"
|
|
@comfirmSport="comfirmSport"
|
|
@cancleSport="cancleSport"
|
|
/>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import sports from "@/components/sports";
|
|
import addPopup from "@/components/sports/addPopup";
|
|
import { healthSports, addHealthSports } from "@/apis/interfaces/sport.js";
|
|
import moment, { duration } from "moment";
|
|
|
|
export default {
|
|
components: { sports, addPopup },
|
|
data() {
|
|
return {
|
|
addSportsShow: false, // 添加运动弹窗显示
|
|
selectSports: {}, // 选择新增的运动
|
|
lists: [], // 运动列表
|
|
page: 1,
|
|
has_more: true,
|
|
name: "", // 搜索运动名称
|
|
today: moment(new Date()).format("YYYY-MM-DD"),
|
|
};
|
|
},
|
|
onLoad() {
|
|
this.getExercises();
|
|
},
|
|
// 触底加载更多
|
|
onReachBottom() {
|
|
if (!this.has_more) {
|
|
uni.showToast({
|
|
title: "没有更多啦~",
|
|
icon: "none",
|
|
});
|
|
} else {
|
|
this.page = this.page + 1;
|
|
this.getExercises();
|
|
}
|
|
},
|
|
methods: {
|
|
// 获取运动列表
|
|
getExercises() {
|
|
let data = {
|
|
page: this.page,
|
|
name: this.name,
|
|
};
|
|
healthSports(data).then((res) => {
|
|
this.lists = this.lists.concat(res.data);
|
|
this.has_more = res.page.has_more;
|
|
});
|
|
},
|
|
// 显示弹窗内容
|
|
addSport(item) {
|
|
console.log(item);
|
|
this.selectSports = item;
|
|
this.selectSports.duration = 60;
|
|
this.addSportsShow = true;
|
|
},
|
|
// 弹窗确认按钮新增
|
|
comfirmSport(show, duration) {
|
|
let params = {
|
|
unit: "1", // 时间单位：分钟 1 小时 2
|
|
duration: duration, // 时常
|
|
sport_id: this.selectSports.sport_id, // 运动id
|
|
date: this.today, // 日期
|
|
};
|
|
addHealthSports(params).then((res) => {
|
|
this.addSportsShow = false;
|
|
this.selectSports = {};
|
|
this.$Router.back();
|
|
});
|
|
console.log("弹窗确认按钮新增");
|
|
},
|
|
// 弹窗取消按钮
|
|
cancleSport(show) {
|
|
this.addSportsShow = show;
|
|
this.duration = 60;
|
|
console.log("弹窗取消按钮");
|
|
},
|
|
// 添加运动弹窗显示
|
|
//#region 搜索相关方法 start
|
|
// 点击搜索左侧按钮
|
|
searchCustom(e) {
|
|
console.log(e);
|
|
this.name = e;
|
|
this.reset();
|
|
},
|
|
// 清空数组重新请求数据
|
|
reset() {
|
|
this.page = 1;
|
|
this.has_more = true;
|
|
this.lists = [];
|
|
this.getExercises();
|
|
},
|
|
// 点击搜索后面按钮触发事件事件
|
|
clearSearch() {
|
|
this.name = "";
|
|
this.reset();
|
|
},
|
|
//#endregion 搜索相关方法 end
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.add-foods {
|
|
padding: $padding;
|
|
.lists {
|
|
padding: $padding * 0.6 0;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
.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;
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|