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>
|