320 lines
6.7 KiB
Vue
320 lines
6.7 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class=" calendar">
|
|
<!-- 日历 -->
|
|
<ren-calendar ref='ren' :markDays='markDays' @onDayClick='onDayClick' @onMonthClickPre='onMonthClickPre'
|
|
v-if="isShow">
|
|
</ren-calendar>
|
|
<!-- -->
|
|
<view class="box" v-if="infoList.length">
|
|
<view class="list" v-for="(item,index) in infoList" :key="index" @click="addMemberTags(item.id,item)">
|
|
<!-- 成人 -->
|
|
<view class="item">
|
|
<view class="check">
|
|
<text class="iconfont"
|
|
:class="isActive.indexOf(item.id)!=-1?'icon-radio':'icon-kongradio'"></text>
|
|
</view>
|
|
<view>{{item.height}}<text>身高</text></view>
|
|
<view>{{item.weight}}<text>体重</text></view>
|
|
<view>{{item.bmi}}<text>BMI</text></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- -->
|
|
<view class="bottom">
|
|
<view class="list" v-for="(ite,ind) in ActiveDays" :key="ind" v-if="isActive"
|
|
@click="addMemberTags(ite.id,ite)">
|
|
<view class="item borderRadius">
|
|
<view class="time">{{ite.createtime}}</view>
|
|
<view>{{ite.height}}<text>身高</text></view>
|
|
<view>{{ite.weight}}<text>体重</text></view>
|
|
<view>{{ite.bmi}}<text>BMI</text></view>
|
|
<view class="check">
|
|
<icon class="iconfont icon-quxiao"></icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="pkclass" v-if="length==2">vs</view>
|
|
<view :class="{'active':length!=2}" class="btn" @click="handlePK">减脂对比</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import RenCalendar from '@/components/ren-calendar/ren-calendar.vue';
|
|
import {
|
|
mapState
|
|
} from "vuex";
|
|
export default {
|
|
components: {
|
|
RenCalendar,
|
|
},
|
|
computed: {
|
|
...mapState(["user", "TrendPk", "appTheme"]),
|
|
length() {
|
|
return this.isActive.length
|
|
},
|
|
endDate() {
|
|
return this.$tools.getDate("start")
|
|
},
|
|
},
|
|
onLoad() {
|
|
this.token = uni.getStorageSync("token")
|
|
},
|
|
onShow() {
|
|
let that = this
|
|
that.startM = that.$tools.getDate("m").substring(0, 10)
|
|
that.endM = that.$tools.getDate("m").substring(11, 21)
|
|
that.infoList = this.$json.contrastList
|
|
that.markDays = []
|
|
that.list = []
|
|
that.isActive = []
|
|
that.ActiveDays = []
|
|
// this.$nextTick(() => {
|
|
// that.isShow = true
|
|
// that.getList(that.startM, that.endM)
|
|
// })
|
|
},
|
|
methods: {
|
|
getList(start, end) {
|
|
let that = this
|
|
that.$model.GetTrendList({
|
|
familyid: uni.getStorageSync('familyid'),
|
|
starttime: start,
|
|
endtime: end,
|
|
}).then(res => {
|
|
if (res) {
|
|
that.markDays = res.pkList.Dlist
|
|
that.list = res.pkList.list
|
|
for (var i = 0; i < res.pkList.list.length; i++) {
|
|
if (Date.parse(that.endDate) == Date.parse(res.pkList.list[i].createtime)) {
|
|
that.infoList.push(res.pkList.list[i]);
|
|
}
|
|
}
|
|
}
|
|
})
|
|
},
|
|
onMonthClickPre(data) {
|
|
console.log("onMonthClickPre", data)
|
|
let that = this
|
|
let start = data.substring(0, 10)
|
|
let end = data.substring(11, 21)
|
|
that.infoList = []
|
|
that.markDays = []
|
|
that.list = []
|
|
that.getList(start, end)
|
|
},
|
|
onDayClick(data) {
|
|
let that = this
|
|
this.infoList = []
|
|
for (var i = 0; i < that.list.length; i++) {
|
|
if (Date.parse(data.date) == Date.parse(that.list[i].createtime)) { //includes 检测数组是否有某个值
|
|
this.infoList.push(that.list[i]);
|
|
}
|
|
}
|
|
},
|
|
addMemberTags(index, item) {
|
|
var that = this;
|
|
console.log("addMemberTags", index, item)
|
|
// if (this.user.type != 1) return
|
|
if (that.isActive.indexOf(index) == -1) {
|
|
that.isActive.push(index);
|
|
that.ActiveDays.push(item);
|
|
} else {
|
|
that.isActive.splice(that.isActive.indexOf(index), 1);
|
|
that.ActiveDays.splice(that.ActiveDays.indexOf(item), 1);
|
|
}
|
|
if (that.isActive.length > 2) {
|
|
that.isActive.splice(0, 1)
|
|
that.ActiveDays.splice(0, 1);
|
|
}
|
|
},
|
|
handlePK() {
|
|
let that = this
|
|
// if (that.isActive.length != 2) {
|
|
// that.$tools.msg("请先选择数据！")
|
|
// return
|
|
// }
|
|
let info = {}
|
|
// info.familyid = uni.getStorageSync('familyid')
|
|
// info.firstId = that.isActive[0]
|
|
// info.secondId = that.isActive[1]
|
|
console.log("1111")
|
|
uni.navigateTo({
|
|
url: "/pages/weight/pkdetail?info=" + JSON.stringify(info)
|
|
})
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
markDays: [],
|
|
infoList: [],
|
|
list: [],
|
|
isActive: [],
|
|
ActiveDays: [],
|
|
token: null,
|
|
startM: null,
|
|
endM: null,
|
|
isShow: true,
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.calendar {
|
|
background: #f7f7f7;
|
|
min-height: 100vh;
|
|
|
|
.box {
|
|
margin-bottom: 305px;
|
|
}
|
|
|
|
.list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
margin: 15px;
|
|
align-items: center;
|
|
|
|
|
|
.item {
|
|
width: 100%;
|
|
height: auto;
|
|
background: #fff;
|
|
display: flex;
|
|
height: 40px;
|
|
justify-content: space-between;
|
|
padding: 10px 15px;
|
|
border-radius: 10px;
|
|
align-items: center;
|
|
text-align: center;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
|
|
view {
|
|
width: 32%;
|
|
}
|
|
|
|
image {
|
|
width: 25px;
|
|
height: 25px;
|
|
}
|
|
|
|
text {
|
|
width: 100%;
|
|
font-size: 12px;
|
|
display: block;
|
|
color: #666;
|
|
text-align: center;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.check {
|
|
width: 35px !important;
|
|
|
|
.icon-kongradio {
|
|
font-size: 22px;
|
|
color: #999;
|
|
}
|
|
|
|
.icon-radio {
|
|
font-size: 22px;
|
|
color: #FCA82D;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.time {
|
|
width: 100%;
|
|
font-size: 14px;
|
|
color: #666;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
|
|
text {
|
|
font-size: 14px;
|
|
margin-top: 3px;
|
|
}
|
|
}
|
|
|
|
.bottom {
|
|
margin: 0;
|
|
width: auto;
|
|
position: fixed;
|
|
left: 0px;
|
|
right: 0px;
|
|
bottom: 0px;
|
|
z-index: 9;
|
|
padding: 0 10px 10px;
|
|
background: #fff;
|
|
border-radius: 0;
|
|
border-top: 1px solid #dfdfdf;
|
|
|
|
.btn {
|
|
width: auto;
|
|
margin: 10px 0 0;
|
|
background: $maincolor;
|
|
}
|
|
|
|
.list {
|
|
margin: 10px 0;
|
|
height: 120rpx;
|
|
position: relative;
|
|
|
|
.item {
|
|
background: #F7F7F7;
|
|
}
|
|
|
|
.time {
|
|
float: left;
|
|
text-align: center;
|
|
justify-content: center;
|
|
color: #fea82d;
|
|
font-weight: 700;
|
|
width: 35%;
|
|
}
|
|
|
|
.check {
|
|
position: absolute;
|
|
right: -5px;
|
|
top: -5px;
|
|
width: 25px;
|
|
|
|
.icon-quxiao {
|
|
font-size: 20px;
|
|
color: #999;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.pkclass {
|
|
position: absolute;
|
|
width: 30px;
|
|
height: 30px;
|
|
background: #fea82d;
|
|
border-radius: 50%;
|
|
line-height: 27px;
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: 19px;
|
|
left: 30px;
|
|
top: 120rpx;
|
|
}
|
|
|
|
.btn.active {
|
|
border: none;
|
|
color: #333 !important;
|
|
background: #dfdfdf !important;
|
|
display: block;
|
|
border-radius: 10px;
|
|
}
|
|
}
|
|
</style> |