adultDeviceApp/pages/compk/compk.vue

184 lines
4.9 KiB
Vue

<template>
<view class="content">
<view class=" calendar">
<!-- 日历 -->
<ren-calendar ref='ren' :markDays='markDays' @onDayClick='onDayClick' @onMonthClickPre='onMonthClickPre'
@onMonthClickNext="onMonthClickNext" 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">
<image :src="isActive.indexOf(item.id)!=-1?'../../static/radio.png':'../../static/icon-kongradio.png'" class="iconfont"></image>
</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">
<image src="../../static/quxiao.png" class="iconfont"></image>
</view>
</view>
</view>
<view class="pkclass" v-if="length==2">vs</view>
<view :class="{'active':length!=2}" class="btn" @click="handlePK">减脂对比</view>
</view>
</view>
<userPopup></userPopup>
</view>
</template>
<script>
import userPopup from '@/components/userLogin.vue'
import RenCalendar from '@/components/ren-calendar/ren-calendar.vue';
import {
mapState
} from "vuex";
export default {
components: {
userPopup,
RenCalendar,
},
computed: {
...mapState(["user", "TrendPk", "appTheme"]),
length() {
return this.isActive.length
},
endDate() {
return this.$tools.getDate("start")
},
},
onLoad() {
//
uni.setNavigationBarColor({
frontColor: '#ffffff',
backgroundColor: this.appTheme,
})
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 = []
that.markDays = []
that.list = []
that.isActive = []
that.ActiveDays = []
that.isShow = false
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) {
console.log("11111", 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 (!uni.getStorageSync('token')) {
uni.redirectTo({
url: '/pageTwo/login/login'
})
// that.$store.commit("changeUserLogin", true)
return
}
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]
uni.navigateTo({
url: "/pageTwo/compk/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">
.content {
padding-bottom: 50px
}
</style>