ReedawFoodApp/components/cardIndex/cardHome.vue

160 lines
3.1 KiB
Vue

<template>
<view class="cardContent">
<view class="cardList">
<view class="caritem" @click="handleNavTol('/pageTwo/charts/charts')">
<image src="/static/q5.png"></image>
<view>曲线</view>
</view>
<view class="caritem" @click="handleNavTol('/pageTwo/compk/contrast')">
<image src="/static/q3.png"></image>
<view>数据对比</view>
</view>
<view class="caritem" @click="handlerRecord">
<image src="/static/q7.png"></image>
<view>添加记录</view>
</view>
<view class="caritem" @click="handleNavTol('/pageTwo/history/history')">
<image src="/static/q8.png"></image>
<view>历史记录</view>
</view>
</view>
<view class="cardListchosen">
<view class="item" v-for="(ite,ind) in cardList.chosen_fixed" @click="handleNavTol(ite.page_jump)">
<view class="info">
<image :src="ite.icon"></image>
<view>{{ite.name}}</view>
</view>
</view>
<view class="item" v-for="(ite,ind) in cardList.chosen_yes" @click="handleNavTol(ite.page_jump)">
<view class="info">
<image :src="ite.icon"></image>
<view>{{ite.name}}</view>
</view>
</view>
</view>
<view class="setCard" @click="handleSetCard">
工具设置
</view>
<!-- 手动记录 -->
<record></record>
</view>
</template>
<script>
import {
mapState
} from "vuex";
import record from '@/components/cardIndex/record.vue';
export default {
data() {
return {
}
},
components: {
record,
},
computed: {
...mapState(['user', "CardList"]),
endDate() {
return this.$tools.getDate("start")
},
startDate() {
return this.$tools.GetDateStr(-90);
},
cardList() {
return this.CardList
}
},
methods: {
// 手动
handlerRecord() {
this.$store.commit('changeTsPublicRecord', true)
},
handleNavTol(url) {
uni.navigateTo({
url: url
})
},
handleSetCard() {
uni.navigateTo({
url: "/pageTwo/cardList/card"
})
}
}
}
</script>
<style scoped lang="scss">
.cardContent {
background: #F7F7F7;
padding: 5px 0 15PX;
}
.cardList {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
background: #fff;
margin: 10px;
padding: 10px;
border-radius: 10px;
.caritem {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
image {
width: 40px;
height: 40px;
}
}
}
.cardListchosen {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 15px 10px;
.item {
width: 47%;
background-color: #fff;
margin-bottom: 15px;
position: relative;
height: 60px;
line-height: 60px;
border-radius: 5px;
.info {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
image {
width: 30px;
height: 30px;
background-color: #f2f2f2;
margin-right: 10px;
border-radius: 50%;
}
}
}
}
.setCard {
color: $maincolor;
margin: 15px;
text-align: center;
border: 1px solid $maincolor;
border-radius: 10px;
height: 40px;
line-height: 40px;
background: #fff;
}
</style>