388 lines
8.2 KiB
Vue
388 lines
8.2 KiB
Vue
<template>
|
||
<view class="content">
|
||
<!-- 头部 -->
|
||
<view class="header">
|
||
<view class="top" v-if="token">
|
||
<view class="headimg">
|
||
<image src="../../static/logo.png"></image>
|
||
</view>
|
||
<view class="info">
|
||
<view class="size20 bold">小白</view>
|
||
<view class="mt-5">{{$t("index.age")}}：16岁</view>
|
||
<view>{{$t("index.birthday")}}：2008年1月24日</view>
|
||
</view>
|
||
<icon class="iconfont icon-qiehuan1"></icon>
|
||
</view>
|
||
<view class="top" v-else>
|
||
<view class="headimg">
|
||
<image src="../../static/logo.png"></image>
|
||
</view>
|
||
<view class="info">
|
||
暂无成员，请先添加~
|
||
</view>
|
||
<view class="add" @click="handleAddUser">
|
||
+
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 地区 -->
|
||
<view class="area box">
|
||
<view>
|
||
<text>{{$t("index.region")}}：</text>
|
||
<text>北京</text>
|
||
</view>
|
||
<!-- <icon class="iconfont icon-arrow-right-bold size20"></icon> -->
|
||
</view>
|
||
<!-- 身体数据 -->
|
||
<view class="card box" @click="navTo('/pages/weight/weight')">
|
||
<view class="title border-bottom">
|
||
<view class="name"><text>身体数据</text>2024/03/25</view>
|
||
<icon class="iconfont icon-arrow-right-bold size20"></icon>
|
||
</view>
|
||
<view class="item title">
|
||
<view>
|
||
<text>身高</text>
|
||
<view class="weight"><text>176</text>cm</view>
|
||
<view class="standardBtn">标准</view>
|
||
</view>
|
||
<view>
|
||
<text>体重</text>
|
||
<view class="weight"><text>76</text>kg</view>
|
||
<view class="standardBtn">标准</view>
|
||
</view>
|
||
<view>
|
||
<text>BMI</text>
|
||
<view class="weight"><text>26</text></view>
|
||
<view class="standardBtn">标准</view>
|
||
</view>
|
||
</view>
|
||
<view class="target">
|
||
<view class="left">
|
||
<icon class="iconfont icon-notification"></icon>
|
||
身体是一切的基础
|
||
</view>
|
||
<view class="targetBtn">手动记录</view>
|
||
</view>
|
||
</view>
|
||
<!-- 卡片数据 -->
|
||
<view class="list">
|
||
<view v-for="(ite,ind) in selectllist" @click="navTo(ite.detailurl)">
|
||
<!-- 大标签 -->
|
||
<view class="card box" v-if="ite.size=='big'">
|
||
<view class="title border-bottom">
|
||
<view class="name"><text>{{ite.name}}</text>{{ite.time}}</view>
|
||
<icon class="iconfont icon-arrow-right-bold size20"></icon>
|
||
</view>
|
||
<view class="item title">
|
||
<view class="item2">
|
||
<text class="name">用时</text>
|
||
<view class="weight"><text>{{ite.taketime?ite.taketime:'--：--：--'}}</text></view>
|
||
</view>
|
||
<view class="item2">
|
||
<text class="name">本次次数</text>
|
||
<view class="weight"><text>{{ite.cnt?ite.cnt:'-'}}</text>{{ite.unit}}</view>
|
||
<view class="standardBtn" :style="{'backgroundColor':ite.standardcolor}"
|
||
v-if="ite.standardtext">
|
||
{{ite.standardtext}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="item title">
|
||
<view class="item2">
|
||
<text class="name">平均成绩</text>
|
||
<view class="weight"><text>{{ite.averagecnt?ite.averagecnt:'-'}}</text>{{ite.unit}}</view>
|
||
</view>
|
||
<view class="item2">
|
||
<text class="name">卡路里</text>
|
||
<view class="weight"><text>{{ite.kcal?ite.kcal:'-'}}</text>kcal</view>
|
||
</view>
|
||
</view>
|
||
<view class="target">
|
||
<view class="left">
|
||
<icon class="iconfont icon-notification"></icon>
|
||
{{ite.name}}教程
|
||
</view>
|
||
<view class="targetBtn">手动记录</view>
|
||
</view>
|
||
</view>
|
||
<!-- 小标签 -->
|
||
<view class="card box small" v-if="ite.size=='small'">
|
||
<view class="title border-bottom">
|
||
<view class="name"><text>{{ite.name}}</text>{{ite.time}}</view>
|
||
<icon class="iconfont icon-arrow-right-bold size20"></icon>
|
||
</view>
|
||
<view class="item title">
|
||
<view>
|
||
<text>本次数据</text>
|
||
<view class="weight"><text>{{ite.cnt?ite.cnt:'-'}}</text>{{ite.unit}}</view>
|
||
<view class="standardBtn" :style="{'backgroundColor':ite.standardcolor}"
|
||
v-if="ite.standardtext">
|
||
{{ite.standardtext}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="target">
|
||
<view class="left">
|
||
<icon class="iconfont icon-notification"></icon>
|
||
教程
|
||
</view>
|
||
<view class="targetBtn">手动记录</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 设置数据卡片 -->
|
||
<view class="setcard" @click="handleCard">
|
||
设置数据页卡片
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
token: null,
|
||
selectllist: []
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.selectllist = this.$json.selectllist
|
||
let systemInfo = uni.getSystemInfoSync();
|
||
this.isAndroid = systemInfo.platform.toLowerCase() === 'android';
|
||
uni.onLocaleChange((e) => {
|
||
if (this.isAndroid) {
|
||
uni.showModal({
|
||
content: this.$t('index.language-change-confirm'),
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
uni.setLocale(e.code);
|
||
}
|
||
}
|
||
})
|
||
} else {
|
||
uni.setLocale(e.code);
|
||
this.$i18n.locale = e.code;
|
||
}
|
||
})
|
||
},
|
||
methods: {
|
||
// 登录
|
||
handleLogin() {
|
||
uni.navigateTo({
|
||
url: "/pages/login/login"
|
||
})
|
||
},
|
||
// 添加成员
|
||
handleAddUser() {
|
||
uni.navigateTo({
|
||
url: "/pages/index/userInfo"
|
||
})
|
||
},
|
||
// 设置数据页卡片
|
||
handleCard() {
|
||
uni.navigateTo({
|
||
url: "/pages/card/card"
|
||
})
|
||
},
|
||
navTo(url) {
|
||
console.log("url", url)
|
||
uni.navigateTo({
|
||
url: url
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.content {
|
||
// display: flex;
|
||
// flex-direction: column;
|
||
// align-items: center;
|
||
// justify-content: center;
|
||
min-height: 100vh;
|
||
background-color: #f7f7f7;
|
||
}
|
||
|
||
.header {
|
||
width: 100%;
|
||
height: 280rpx;
|
||
padding-top: 20px;
|
||
background: $maincolor;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.top {
|
||
margin: 0 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
background-color: #fff;
|
||
border-radius: 10px;
|
||
padding: 15px;
|
||
min-height: 170rpx;
|
||
|
||
.headimg {
|
||
width: 55px;
|
||
height: 55px;
|
||
|
||
}
|
||
|
||
.toggle {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
}
|
||
|
||
.add {
|
||
border: 1px #dfdfdf dashed;
|
||
font-size: 28px;
|
||
font-weight: 500;
|
||
width: 35px;
|
||
height: 35px;
|
||
line-height: 35px;
|
||
border-radius: 10px;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.box {
|
||
margin: 15px 10px 0;
|
||
padding: 15px 10px 10px;
|
||
background-color: #fff;
|
||
width: calc(100% - 40px);
|
||
display: flex;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.area {
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.card {
|
||
flex-wrap: wrap;
|
||
|
||
.title {
|
||
width: 100%;
|
||
color: #666;
|
||
display: flex;
|
||
padding-bottom: 5px;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
text {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
margin-right: 10px;
|
||
color: #333;
|
||
}
|
||
|
||
}
|
||
|
||
.item {
|
||
padding: 15px 0;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
text-align: center;
|
||
|
||
text {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
margin-right: 0;
|
||
}
|
||
|
||
.weight {
|
||
width: 100%;
|
||
|
||
text {
|
||
font-size: 24px !important;
|
||
font-weight: bold;
|
||
margin: 8px 0;
|
||
display: inline-block;
|
||
}
|
||
}
|
||
|
||
.standardBtn {
|
||
width: 40px;
|
||
padding: 3px 8px;
|
||
border-radius: 8px;
|
||
text-align: center;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
background-color: $btncolor;
|
||
}
|
||
}
|
||
|
||
.target {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding-top: 10px;
|
||
font-size: 14px;
|
||
color: $textcolor;
|
||
border-top: 1px solid #f7f7f7;
|
||
|
||
.targetBtn {
|
||
width: auto;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
color: #fff;
|
||
border-radius: 10px;
|
||
padding: 0 10px;
|
||
background: $maincolor;
|
||
}
|
||
}
|
||
|
||
.item2 {
|
||
width: 40%;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
|
||
.name {
|
||
display: inline-block;
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.small {
|
||
width: calc(50% - 40px);
|
||
float: left;
|
||
margin-bottom: 15px;
|
||
|
||
.title {
|
||
.name {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
text {
|
||
width: 80%;
|
||
margin-bottom: 5px;
|
||
display: inline-block;
|
||
}
|
||
}
|
||
}
|
||
|
||
.item {
|
||
justify-content: center;
|
||
}
|
||
}
|
||
|
||
.setcard {
|
||
width: calc(100% - 20px);
|
||
text-align: center;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
margin: 10px 15px;
|
||
border-radius: 10px;
|
||
color: $textcolor;
|
||
background-color: #fff;
|
||
}
|
||
</style> |