merge
This commit is contained in:
zhangmanman
@@ -1,157 +1,196 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<!-- tool -->
|
||||
<view class="tool-flex">
|
||||
<view class="tool-flex-item" @click="$Router.back()">
|
||||
<uni-icons type="closeempty" size="22" color="#666"></uni-icons>
|
||||
</view>
|
||||
<view class="tool-flex-item" @click="onKeyAuth()" v-if="$Route.query.keyPhone == 1">一键登录</view>
|
||||
</view>
|
||||
<!-- 欢迎使用 -->
|
||||
<view class="header">
|
||||
<view class="title">欢迎使用</view>
|
||||
<view class="sumbit">ZH健康，身边的营养专家</view>
|
||||
</view>
|
||||
<!-- 输入手机号相关 -->
|
||||
<view class="inputs phone">
|
||||
<label class="label">+86</label>
|
||||
<input type="number" placeholder="输入您的手机号码" maxlength="11" v-model="phone" />
|
||||
</view>
|
||||
<view class="inputs sms">
|
||||
<input type="number" placeholder="输入短信验证码" maxlength="4" v-model="code" />
|
||||
<button class="sms-btn" type="default" size="mini" :disabled="phone == '' || getSms" @click="getPhoneCode">{{getSms ? '重新发送' + smsTime + 's': '发送验证码'}}</button>
|
||||
</view>
|
||||
<button class="btn" type="default" :disabled="phone == '' || code == ''" @click="login">登录</button>
|
||||
<!-- 用户登录注册协议 -->
|
||||
<view class="agreement">
|
||||
未注册的手机号码验证后自动创建账号，登录即表示同意接受平台
|
||||
<view @click="$Router.push({name: 'agreement', params: {name : 'secret'}})">《隐私协议》</view>
|
||||
和
|
||||
<view @click="$Router.push({name: 'agreement', params: {name : 'service'}})">《服务协议》</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content">
|
||||
<!-- tool -->
|
||||
<view class="tool-flex">
|
||||
<view
|
||||
class="tool-flex-item"
|
||||
@click="$Router.back()"
|
||||
>
|
||||
<uni-icons
|
||||
type="closeempty"
|
||||
size="22"
|
||||
color="#666"
|
||||
></uni-icons>
|
||||
</view>
|
||||
<view
|
||||
class="tool-flex-item"
|
||||
@click="onKeyAuth()"
|
||||
v-if="$Route.query.keyPhone == 1"
|
||||
>一键登录</view>
|
||||
</view>
|
||||
<!-- 欢迎使用 -->
|
||||
<view class="header">
|
||||
<view class="title">欢迎使用</view>
|
||||
<view class="sumbit">ZH健康，身边的营养专家</view>
|
||||
</view>
|
||||
<!-- 输入手机号相关 -->
|
||||
<view class="inputs phone">
|
||||
<label class="label">+86</label>
|
||||
<input
|
||||
type="number"
|
||||
placeholder="输入您的手机号码"
|
||||
maxlength="11"
|
||||
v-model="phone"
|
||||
/>
|
||||
</view>
|
||||
<view class="inputs sms">
|
||||
<input
|
||||
type="number"
|
||||
placeholder="输入短信验证码"
|
||||
maxlength="4"
|
||||
v-model="code"
|
||||
/>
|
||||
<button
|
||||
class="sms-btn"
|
||||
type="default"
|
||||
size="mini"
|
||||
:disabled="phone == '' || getSms"
|
||||
@click="getPhoneCode"
|
||||
>{{getSms ? '重新发送' + smsTime + 's': '发送验证码'}}</button>
|
||||
</view>
|
||||
<button
|
||||
class="btn"
|
||||
type="default"
|
||||
:disabled="phone == '' || code == ''"
|
||||
@click="login"
|
||||
>登录</button>
|
||||
<!-- 用户登录注册协议 -->
|
||||
<view class="agreement">
|
||||
未注册的手机号码验证后自动创建账号，登录即表示同意接受平台
|
||||
<view @click="$Router.push({name: 'agreement', params: {name : 'secret'}})">《隐私协议》</view>
|
||||
和
|
||||
<view @click="$Router.push({name: 'agreement', params: {name : 'service'}})">《服务协议》</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getSms, smsAuth } from '@/apis/interfaces/auth'
|
||||
import userAuth from '@/public/userAuth'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
phone : "18245180131",
|
||||
code : "",
|
||||
smsTime : 60,
|
||||
getSms : false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 用户登录
|
||||
login() {
|
||||
smsAuth({
|
||||
mobileNo : this.phone,
|
||||
code : this.code
|
||||
}).then(res => {
|
||||
this.$store.commit('setToken', res.token_type + ' ' + res.access_token)
|
||||
this.$Router.back()
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon: "none"
|
||||
})
|
||||
})
|
||||
},
|
||||
// 获取验证码
|
||||
getPhoneCode() {
|
||||
let outTime
|
||||
getSms({
|
||||
mobileNo: this.phone
|
||||
}).then(res => {
|
||||
uni.showToast({
|
||||
title: res,
|
||||
icon: "none"
|
||||
})
|
||||
this.getSms = true
|
||||
outTime = setInterval(() => {
|
||||
if (this.smsTime <= 1) {
|
||||
this.getSms = false
|
||||
this.smsTime = 60
|
||||
clearInterval('outTime')
|
||||
}
|
||||
this.smsTime -= 1
|
||||
}, 1000)
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon: "none"
|
||||
})
|
||||
})
|
||||
},
|
||||
// 一键登录
|
||||
onKeyAuth(){
|
||||
const Auth = new userAuth()
|
||||
this.$Router.back()
|
||||
Auth.Login()
|
||||
}
|
||||
}
|
||||
}
|
||||
import { getSms, smsAuth } from "@/apis/interfaces/auth";
|
||||
import userAuth from "@/public/userAuth";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
phone: "14745798066",
|
||||
code: "",
|
||||
smsTime: 60,
|
||||
getSms: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 用户登录
|
||||
login() {
|
||||
smsAuth({
|
||||
mobileNo: this.phone,
|
||||
code: this.code,
|
||||
})
|
||||
.then((res) => {
|
||||
this.$store.commit(
|
||||
"setToken",
|
||||
res.token_type + " " + res.access_token
|
||||
);
|
||||
this.$Router.back();
|
||||
})
|
||||
.catch((err) => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon: "none",
|
||||
});
|
||||
});
|
||||
},
|
||||
// 获取验证码
|
||||
getPhoneCode() {
|
||||
let outTime;
|
||||
getSms({
|
||||
mobileNo: this.phone,
|
||||
})
|
||||
.then((res) => {
|
||||
uni.showToast({
|
||||
title: res,
|
||||
icon: "none",
|
||||
});
|
||||
this.getSms = true;
|
||||
outTime = setInterval(() => {
|
||||
if (this.smsTime <= 1) {
|
||||
this.getSms = false;
|
||||
this.smsTime = 60;
|
||||
clearInterval("outTime");
|
||||
}
|
||||
this.smsTime -= 1;
|
||||
}, 1000);
|
||||
})
|
||||
.catch((err) => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon: "none",
|
||||
});
|
||||
});
|
||||
},
|
||||
// 一键登录
|
||||
onKeyAuth() {
|
||||
const Auth = new userAuth();
|
||||
this.$Router.back();
|
||||
Auth.Login();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
padding: $padding * 3;
|
||||
box-sizing: border-box;
|
||||
background: white;
|
||||
@extend .vertical;
|
||||
// 操作栏
|
||||
.tool-flex{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-left: $padding*2;
|
||||
padding-right: $padding*2;
|
||||
background: white;
|
||||
@extend .ios-top;
|
||||
&-item{
|
||||
line-height: 90rpx;
|
||||
color: $text-gray;
|
||||
font-size: $title-size-lg;
|
||||
}
|
||||
}
|
||||
// 表单
|
||||
.inputs {
|
||||
background:$window-color;
|
||||
position: relative;
|
||||
margin-top: $margin;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
border-radius: 45rpx;
|
||||
input {
|
||||
width: 100%;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
padding: 0 $padding;
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
font-size: $title-size-lg;
|
||||
}
|
||||
.content {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
padding: $padding * 3;
|
||||
box-sizing: border-box;
|
||||
background: white;
|
||||
@extend .vertical;
|
||||
// 操作栏
|
||||
.tool-flex {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-left: $padding * 2;
|
||||
padding-right: $padding * 2;
|
||||
background: white;
|
||||
@extend .ios-top;
|
||||
&-item {
|
||||
line-height: 90rpx;
|
||||
color: $text-gray;
|
||||
font-size: $title-size-lg;
|
||||
}
|
||||
}
|
||||
// 表单
|
||||
.inputs {
|
||||
background: $window-color;
|
||||
position: relative;
|
||||
margin-top: $margin;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
border-radius: 45rpx;
|
||||
input {
|
||||
width: 100%;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
padding: 0 $padding;
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
font-size: $title-size-lg;
|
||||
}
|
||||
|
||||
&.phone {
|
||||
padding-left: 120rpx;
|
||||
.label {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 120rpx;
|
||||
text-align: center;
|
||||
border-right: solid 1rpx $border-color;
|
||||
font-size: $title-size-lg;
|
||||
}
|
||||
}
|
||||
&.phone {
|
||||
padding-left: 120rpx;
|
||||
.label {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 120rpx;
|
||||
text-align: center;
|
||||
border-right: solid 1rpx $border-color;
|
||||
font-size: $title-size-lg;
|
||||
}
|
||||
}
|
||||
|
||||
&.sms {
|
||||
padding-right: 200rpx;
|
||||
|
||||
709
pages/essentialInfo/index.vue
Normal file
709
pages/essentialInfo/index.vue
Normal file
@@ -0,0 +1,709 @@
|
||||
|
||||
<!--
|
||||
* @Description:
|
||||
* @Author: Aimee·Zhang
|
||||
* @Date: 2022-01-10 10:29:17
|
||||
* @LastEditors: Aimee·Zhang
|
||||
* @LastEditTime: 2022-01-12 14:29:12
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view class="info">
|
||||
<!-- 进度 -->
|
||||
<view class="plan">
|
||||
<view class="plan-1">
|
||||
<span>基本信息</span>
|
||||
<u-line-progress
|
||||
:percentage="percentplan1"
|
||||
activeColor="#34ce98"
|
||||
class="line-progress"
|
||||
:showText="false"
|
||||
/>
|
||||
</view>
|
||||
<view class="plan-2">
|
||||
<span>健康目标</span>
|
||||
<u-line-progress
|
||||
:percentage="percentplan2"
|
||||
activeColor="#34ce98"
|
||||
width="200rpx"
|
||||
class="line-progress"
|
||||
:showText="false"
|
||||
/>
|
||||
</view>
|
||||
<view class="plan-3">
|
||||
<span>行为习惯</span>
|
||||
<u-line-progress
|
||||
:percentage="percentplan3"
|
||||
activeColor="#34ce98"
|
||||
width="200rpx"
|
||||
class="line-progress"
|
||||
:showText="false"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 进度1 基本信息 -->
|
||||
<view>
|
||||
<!-- 进度1 基本信息页面展示 性别 -->
|
||||
<view
|
||||
class="plan-content"
|
||||
v-if="sexShow"
|
||||
>
|
||||
<view class="info-des">生理性别和激素会影响我们的身体代谢食物的方式</view>
|
||||
<view class="info-title">您的性别是？</view>
|
||||
<view class="sex">
|
||||
<view
|
||||
class="sex-item"
|
||||
@click="clickSex(1)"
|
||||
>
|
||||
<u-image
|
||||
class="sex-item-avatar"
|
||||
width="150rpx"
|
||||
height="150rpx"
|
||||
:src="require('../../static/imgs/avatar-1.png')"
|
||||
:lazy-load="true"
|
||||
shape="circle"
|
||||
/>男性
|
||||
</view>
|
||||
<view
|
||||
class="sex-item"
|
||||
@click="clickSex(2)"
|
||||
>
|
||||
<u-image
|
||||
class="sex-item-avatar"
|
||||
width="150rpx"
|
||||
height="150rpx"
|
||||
:src="require('../../static/imgs/avatar-0.png')"
|
||||
:lazy-load="true"
|
||||
shape="circle"
|
||||
/>女性
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 进度1 基本信息页面展示 年龄 -->
|
||||
<view
|
||||
class="plan-content"
|
||||
v-if="birthdayShow"
|
||||
>
|
||||
<u-image
|
||||
class="sex-item-avatar"
|
||||
width="100rpx"
|
||||
height="100rpx"
|
||||
:src="require('../../static/imgs/avatar-1.png')"
|
||||
:lazy-load="true"
|
||||
shape="circle"
|
||||
/>
|
||||
<view class="age">
|
||||
<view class="info-title">你的出生日期是？</view>
|
||||
<view
|
||||
class="year"
|
||||
@change="dateShow = true"
|
||||
>{{showBirthday}}</view>
|
||||
<u-datetime-picker
|
||||
confirmColor="#34ce98"
|
||||
ref="datetimePicker"
|
||||
v-model="birthday"
|
||||
mode="date"
|
||||
:show="dateShow"
|
||||
:formatter="formatter"
|
||||
:minDate="-302688000"
|
||||
:maxDate="maxDate"
|
||||
:closeOnClickOverlay="true"
|
||||
@confirm="confirmBirthday"
|
||||
@cancel="camcelBirthday"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 进度1 基本信息页面展示 身高体重 -->
|
||||
<view
|
||||
class="plan-content weight-content"
|
||||
v-if="heightWeightShow"
|
||||
>
|
||||
<u-image
|
||||
class="sex-item-avatar"
|
||||
width="100rpx"
|
||||
height="100rpx"
|
||||
:src="require('../../static/imgs/avatar-1.png')"
|
||||
:lazy-load="true"
|
||||
shape="circle"
|
||||
/>
|
||||
<view class="info-des">身高体重信息对健康信息有重要参考价值</view>
|
||||
<view class="info-title">您的身高是？</view>
|
||||
<!-- -->
|
||||
<view class="weight">
|
||||
<view class='count'><span>{{heightU}}</span>厘米</view>
|
||||
<vue-scale
|
||||
:min="10"
|
||||
:max="100"
|
||||
:int="false"
|
||||
:single="10"
|
||||
:h="80"
|
||||
:styles="styles"
|
||||
@scroll="scrollHeight"
|
||||
:scrollLeft="Number(heightU)"
|
||||
/>
|
||||
</view>
|
||||
<view class="
|
||||
info-title">您的体重是？
|
||||
</view>
|
||||
<view class="weight">
|
||||
<view class='count'><span>{{weightU}}</span>公斤</view>
|
||||
<vue-scale
|
||||
:min="10"
|
||||
:max="100"
|
||||
:int="false"
|
||||
:single="10"
|
||||
:h="80"
|
||||
:styles="styles"
|
||||
@scroll="scrollWeight"
|
||||
:scrollLeft="Number(weightU)"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="pre-next">
|
||||
<view
|
||||
class="pro"
|
||||
@click="weightClick(1)"
|
||||
>上一步</view>
|
||||
<view
|
||||
class="next"
|
||||
@click="weightClick(2)"
|
||||
>下一步</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 进度2 健康目标 -->
|
||||
<view>
|
||||
<!-- 减脂类型 -->
|
||||
<view
|
||||
v-if="targetShow"
|
||||
class="plan-content target-content"
|
||||
>
|
||||
<u-image
|
||||
class="sex-item-avatar"
|
||||
width="100rpx"
|
||||
height="100rpx"
|
||||
:src="require('../../static/imgs/avatar-1.png')"
|
||||
:lazy-load="true"
|
||||
shape="circle"
|
||||
/>
|
||||
<view class="info-title">您的目标是？</view>
|
||||
<view class="target-type">
|
||||
<view class="target-type-item">
|
||||
<u-image
|
||||
class="target-img"
|
||||
width="160rpx"
|
||||
height="160rpx"
|
||||
@click="activedTarget ='1'"
|
||||
:src="activedTarget === '1'?require('../../static/imgs/ic-w-s.png'):require('../../static/imgs/ic-w-n.png')"
|
||||
:lazy-load="true"
|
||||
shape="circle"
|
||||
/>减肥
|
||||
</view>
|
||||
<view class="target-type-item">
|
||||
<u-image
|
||||
class="target-img"
|
||||
width="160rpx"
|
||||
height="160rpx"
|
||||
@click="activedTarget ='2'"
|
||||
:src="activedTarget === '2'?require('../../static/imgs/ic-b-s.png'):require('../../static/imgs/ic-b-n.png')"
|
||||
:lazy-load="true"
|
||||
shape="circle"
|
||||
/>保持体重
|
||||
</view>
|
||||
<view class="target-type-item">
|
||||
<u-image
|
||||
class="target-img"
|
||||
width="160rpx"
|
||||
height="160rpx"
|
||||
@click="activedTarget ='3'"
|
||||
:src="activedTarget === '3'?require('../../static/imgs/ic-m-s.png'):require('../../static/imgs/ic-m-n.png')"
|
||||
:lazy-load="true"
|
||||
shape="circle"
|
||||
/>增肌
|
||||
</view>
|
||||
</view>
|
||||
<view class="pre-next">
|
||||
<view
|
||||
class="pro"
|
||||
@click="targetClick(1)"
|
||||
>上一步</view>
|
||||
<view
|
||||
class="next"
|
||||
@click="targetClick(2)"
|
||||
>下一步</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 减脂体重 -->
|
||||
<view
|
||||
v-if="targetWeightShow"
|
||||
class="plan-content target-content"
|
||||
>
|
||||
<u-image
|
||||
class="sex-item-avatar"
|
||||
width="100rpx"
|
||||
height="100rpx"
|
||||
:src="require('../../static/imgs/avatar-1.png')"
|
||||
:lazy-load="true"
|
||||
shape="circle"
|
||||
/>
|
||||
<view class="info-title">您的打算减脂多少？</view>
|
||||
<view class="target-type">
|
||||
<view class="target-type-item">
|
||||
<view class='count'><span>{{weightTargetU}}</span>公斤</view>
|
||||
<vue-scale
|
||||
:min="10"
|
||||
:max="100"
|
||||
:int="false"
|
||||
:single="10"
|
||||
:h="80"
|
||||
:styles="styles"
|
||||
@scroll="scrollTargetWeight"
|
||||
:scrollLeft="Number(weightTargetU)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pre-next">
|
||||
<view
|
||||
class="pro"
|
||||
@click="targetWeightClick(1)"
|
||||
>上一步</view>
|
||||
<view
|
||||
class="next"
|
||||
@click="targetWeightClick(2)"
|
||||
>下一步</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 进度3 行为习惯 -->
|
||||
|
||||
<!-- 减脂类型 -->
|
||||
<view
|
||||
v-if="behaviorShow"
|
||||
class="plan-content target-content"
|
||||
>
|
||||
<u-image
|
||||
class="sex-item-avatar"
|
||||
width="100rpx"
|
||||
height="100rpx"
|
||||
:src="require('../../static/imgs/avatar-1.png')"
|
||||
:lazy-load="true"
|
||||
shape="circle"
|
||||
/>
|
||||
<view class="info-title">您的运动量是？</view>
|
||||
<view class="target-type">
|
||||
<view class="target-type-item">
|
||||
<u-image
|
||||
class="target-img"
|
||||
width="120rpx"
|
||||
height="120rpx"
|
||||
@click="activedbehaviarTarget ='1'"
|
||||
:src="activedbehaviarTarget === '1'?require('../../static/imgs/ic-w-01.png'):require('../../static/imgs/ic-w-02.png')"
|
||||
:lazy-load="true"
|
||||
shape="circle"
|
||||
/>久坐不动
|
||||
</view>
|
||||
<view class="target-type-item">
|
||||
<u-image
|
||||
class="target-img"
|
||||
width="120rpx"
|
||||
height="120rpx"
|
||||
@click="activedbehaviarTarget ='2'"
|
||||
:src="activedbehaviarTarget === '2'?require('../../static/imgs/ic-w-03.png'):require('../../static/imgs/ic-w-04.png')"
|
||||
:lazy-load="true"
|
||||
shape="circle"
|
||||
/>少量运动
|
||||
</view>
|
||||
<view class="target-type-item">
|
||||
<u-image
|
||||
class="target-img"
|
||||
width="120rpx"
|
||||
height="120rpx"
|
||||
@click="activedbehaviarTarget ='3'"
|
||||
:src="activedbehaviarTarget === '3'?require('../../static/imgs/ic-w-05.png'):require('../../static/imgs/ic-w-06.png')"
|
||||
:lazy-load="true"
|
||||
shape="circle"
|
||||
/>中等运动量
|
||||
</view>
|
||||
<view class="target-type-item">
|
||||
<u-image
|
||||
class="target-img"
|
||||
width="120rpx"
|
||||
height="120rpx"
|
||||
@click="activedbehaviarTarget ='4'"
|
||||
:src="activedbehaviarTarget === '4'?require('../../static/imgs/ic-w-07.png'):require('../../static/imgs/ic-w-08.png')"
|
||||
:lazy-load="true"
|
||||
shape="circle"
|
||||
/>超强度运动
|
||||
</view>
|
||||
</view>
|
||||
<view class="pre-next">
|
||||
<view
|
||||
class="pro"
|
||||
@click="targetBehaviorClick(1)"
|
||||
>上一步</view>
|
||||
<view
|
||||
class="next"
|
||||
@click="targetBehaviorClick(2)"
|
||||
>立即创建</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from "moment";
|
||||
import vueScale from "@/components/vueScale"; // 体重标尺
|
||||
import { recordsHealth } from "@/apis/interfaces/essentialInfo.js";
|
||||
export default {
|
||||
components: {
|
||||
vueScale,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 第一部分基本信息 start
|
||||
//#region
|
||||
percentplan1: 0,
|
||||
// 性别--start
|
||||
sex: "1", //1是男生2是女生
|
||||
sexShow: true, // 性别展示
|
||||
// 性别 -- end
|
||||
// 年龄 -- start
|
||||
birthday: Date.parse(new Date()), // 年龄默认是当前时间
|
||||
maxDate: Date.parse(new Date()), // 最大年龄为当前年月日
|
||||
dateShow: false, // 显示日期
|
||||
birthdayShow: false, // 显示年龄模块是否显示
|
||||
// 年龄 -- end
|
||||
// 身高体重 -- start
|
||||
heightWeightShow: false, // 身高体重模块展示
|
||||
weight: 11,
|
||||
height: 180,
|
||||
styles: {
|
||||
line: "#dbdbdb",
|
||||
bginner: "#fbfbfb",
|
||||
bgoutside: "#ffffff",
|
||||
font: "#404040",
|
||||
fontColor: "#404040",
|
||||
fontSize: 16,
|
||||
},
|
||||
weightU: 55, //体重
|
||||
heightU: 160, // 身高
|
||||
// 身高体重 -- end
|
||||
//#endregion
|
||||
// 第一部分基本信息 end
|
||||
// 第二部分
|
||||
//#region
|
||||
percentplan2: 0,
|
||||
targetShow: false, // 减脂目标模块 是否显示减脂类型
|
||||
activedTarget: "", // 减脂
|
||||
targetWeightShow: false, // 目标体重页面展示
|
||||
weightTargetU: 50,
|
||||
//#endregion
|
||||
behaviorShow: false, // 默认行为习惯页面不展示
|
||||
percentplan3: 0,
|
||||
activedbehaviarTarget: "", // 默认没有任何运动量
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
showBirthday() {
|
||||
return moment(this.birthday).format("YYYY年MM月DD日");
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
//性别----------- 选择性别 1男2女
|
||||
clickSex(sex) {
|
||||
this.percentplan1 = 0;
|
||||
this.sex = sex;
|
||||
this.percentplan1 = uni.$u.range(0, 100, this.percentplan1 + 33.33);
|
||||
this.sexShow = false;
|
||||
this.birthdayShow = true;
|
||||
this.dateShow = true;
|
||||
console.log(this.percentplan1, this.sex);
|
||||
},
|
||||
|
||||
// 年龄-------------确认选择了出生年月日
|
||||
confirmBirthday(e) {
|
||||
this.birthday = e.value;
|
||||
this.birthdayShow = false; // 年龄页面弹窗不显示
|
||||
this.dateShow = false; // 关闭时间弹窗
|
||||
this.percentplan1 = uni.$u.range(0, 100, this.percentplan1 + 33.33); // 增加进度
|
||||
this.heightWeightShow = true; // 展示身高体重模块
|
||||
},
|
||||
// 年龄 ----- 取消选择年龄
|
||||
camcelBirthday() {
|
||||
this.birthdayShow = false; // // 年龄页面弹窗不显示
|
||||
this.dataShow = false; // 关闭时间弹窗
|
||||
this.percentplan1 = 0; // 进度为0
|
||||
this.sexShow = true; // 显示性别页面
|
||||
},
|
||||
//年龄------------- 过滤出生年月日
|
||||
formatter(type, value) {
|
||||
if (type === "year") {
|
||||
return `${value}年`;
|
||||
}
|
||||
if (type === "month") {
|
||||
return `${value}月`;
|
||||
}
|
||||
if (type === "day") {
|
||||
return `${value}日`;
|
||||
}
|
||||
return value;
|
||||
},
|
||||
// 体重---------标尺滚动
|
||||
scrollWeight(msg) {
|
||||
this.weightU = msg;
|
||||
},
|
||||
// 体重---------标尺滚动
|
||||
scrollHeight(msg) {
|
||||
this.heightU = msg;
|
||||
},
|
||||
// 体重 ------------ 点击 1 上一页 2 下一页
|
||||
weightClick(type) {
|
||||
if (type === 1) {
|
||||
this.percentplan1 = 33.33;
|
||||
this.heightWeightShow = false; // 关闭当前体重页面
|
||||
this.birthdayShow = true;
|
||||
this.dateShow = true;
|
||||
} else {
|
||||
this.percentplan1 = 100; // 第一个进度为100
|
||||
this.heightWeightShow = false; // 关闭当前体重页面
|
||||
this.targetShow = true; // 目标页面展示
|
||||
}
|
||||
},
|
||||
// 目标 ------------点击 1上一页 2 下一页
|
||||
targetClick(type) {
|
||||
if (type === 1) {
|
||||
console.log(1);
|
||||
this.percentplan1 = 66.66;
|
||||
this.heightWeightShow = true; // 打开体重身高页面
|
||||
this.targetShow = false; // 关闭目标页面 减重 塑性 增肌
|
||||
this.percentplan2 = 0;
|
||||
} else {
|
||||
console.log(this.activedTarget);
|
||||
if (this.activedTarget === "") {
|
||||
uni.showToast({
|
||||
title: "请选择目标",
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.percentplan2 = 50;
|
||||
this.targetShow = false; // 目标页面不展示 展示下一面目标体重
|
||||
this.targetWeightShow = true; // 目标体重页面展示
|
||||
}
|
||||
},
|
||||
//目标体重-------------标尺滚动
|
||||
scrollTargetWeight(msg) {
|
||||
this.weightTargetU = msg;
|
||||
},
|
||||
// 目标 体重的 --------- 1上一页 2 下一页
|
||||
targetWeightClick(type) {
|
||||
if (type === 1) {
|
||||
console.log(1);
|
||||
this.percentplan2 = 0;
|
||||
this.targetShow = true; // 打开目标页面 减重 塑性 增肌
|
||||
this.targetWeightShow = false; // 打开体重身高页面
|
||||
} else {
|
||||
console.log(2);
|
||||
this.percentplan2 = 100;
|
||||
this.targetWeightShow = false; // 隐藏目标体重页面
|
||||
this.behaviorShow = true; // 打开行为习惯页面
|
||||
}
|
||||
},
|
||||
// 目标 运动量--------- 1上一页 2 下一页
|
||||
targetBehaviorClick(type) {
|
||||
if (type === 1) {
|
||||
console.log(1);
|
||||
this.percentplan2 = 50;
|
||||
this.targetWeightShow = true; // 目标体重页面展示
|
||||
this.behaviorShow = false; // 关闭运动量选择页面
|
||||
} else {
|
||||
if (this.activedbehaviarTarget === "") {
|
||||
uni.showToast({
|
||||
title: "请选择运动量",
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
let params = {
|
||||
sex: this.sex, // 性别
|
||||
birthday: this.birthday, // 年龄
|
||||
weight: this.weightU, // 体重
|
||||
height: this.heightU, // 身高
|
||||
goal_weight: this.weightTargetU, // 目标体重
|
||||
exercise: this.activedbehaviarTarget, // 运动量
|
||||
days: 1,
|
||||
};
|
||||
console.log(params);
|
||||
recordsHealth(params).then((res) => {
|
||||
this.$refs.uToast.show({
|
||||
type: "success",
|
||||
title: "创建成功",
|
||||
message: "创建成功啦",
|
||||
iconUrl:
|
||||
"https://cdn.uviewui.com/uview/demo/toast/success.png",
|
||||
complete() {
|
||||
this.percentplan3 = 100;
|
||||
this.behaviorShow = false; // 关闭运动量页面
|
||||
uni.navigateBack({});
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.info {
|
||||
// 完善信息顶部进度条
|
||||
.plan {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
font-size: $title-size-m;
|
||||
color: $text-color;
|
||||
padding: $padding;
|
||||
.plan-3,
|
||||
.plan-1,
|
||||
.plan-2 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
span {
|
||||
padding-bottom: $padding * 0.6;
|
||||
}
|
||||
}
|
||||
.plan-2 {
|
||||
margin: $margin;
|
||||
}
|
||||
.line-progress {
|
||||
width: 180rpx;
|
||||
}
|
||||
}
|
||||
|
||||
//展示主要内容部分
|
||||
.plan-content {
|
||||
width: 100%;
|
||||
min-height: 70vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
.info-title {
|
||||
font-size: $title-size + 10;
|
||||
font-weight: bold;
|
||||
margin-top: $margin - 10;
|
||||
}
|
||||
.info-des {
|
||||
font-size: $title-size-m;
|
||||
color: $text-gray;
|
||||
margin-top: $margin;
|
||||
}
|
||||
// 性别
|
||||
.sex {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
.sex-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
margin-top: $margin * 3;
|
||||
.sex-item-avatar {
|
||||
box-shadow: 0 0 10rpx 4rpx
|
||||
rgba($color: $main-color, $alpha: 0.1);
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
//年龄
|
||||
.age {
|
||||
padding-top: $padding * 0.6;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
.year {
|
||||
font-size: $title-size * 1.9;
|
||||
font-weight: bold;
|
||||
color: $main-color;
|
||||
margin-top: $margin;
|
||||
}
|
||||
}
|
||||
// 体重
|
||||
}
|
||||
// 体重身高模块展示
|
||||
.count {
|
||||
color: $main-color;
|
||||
text-align: center;
|
||||
margin-top: $margin * 2;
|
||||
margin-bottom: $margin * 0.1;
|
||||
font-size: $title-size + 2;
|
||||
span {
|
||||
font-weight: bold;
|
||||
font-size: $title-size * 2.2;
|
||||
margin-right: $margin * 0.3;
|
||||
}
|
||||
}
|
||||
.pre-next {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
margin-top: $margin * 2;
|
||||
view {
|
||||
background-color: rgba($color: $main-color, $alpha: 0.5);
|
||||
color: $text-color;
|
||||
font-size: $title-size;
|
||||
font-weight: bold;
|
||||
padding: $padding * 0.6 $padding * 3;
|
||||
border-radius: 10rpx;
|
||||
margin: $margin;
|
||||
}
|
||||
.next {
|
||||
background-color: $main-color;
|
||||
}
|
||||
}
|
||||
|
||||
// 健康目标模块展示
|
||||
.target-content {
|
||||
.target-type {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
margin-top: $margin * 2;
|
||||
flex-wrap: wrap;
|
||||
.target-type-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
font-size: $title-size-m;
|
||||
color: $text-gray-m;
|
||||
.target-img {
|
||||
background: #ececec;
|
||||
border-radius: $radius;
|
||||
margin: $margin $margin * 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
177
pages/evaluation/index.vue
Normal file
177
pages/evaluation/index.vue
Normal file
@@ -0,0 +1,177 @@
|
||||
<!--
|
||||
* @Description:测评模块引入插件
|
||||
* @Author: Aimee·Zhang
|
||||
* @Date: 2022-01-13 13:52:19
|
||||
* @LastEditors: Aimee·Zhang
|
||||
* @LastEditTime: 2022-01-13 17:16:09
|
||||
-->
|
||||
<template>
|
||||
<view class="evaluation">
|
||||
<!-- 进度 -->
|
||||
<view class="percent">
|
||||
<u-icon
|
||||
name="arrow-left"
|
||||
:color="colorList[colorIndex]"
|
||||
size="14"
|
||||
label="上一题"
|
||||
:labelColor="colorList[colorIndex]"
|
||||
labelSize="14"
|
||||
:bold="true"
|
||||
space="3"
|
||||
v-if="page !== 1"
|
||||
@click="preQ"
|
||||
/>
|
||||
<u-line-progress class="pre-ico" :percentage="percent" height="10" :showText="false" :activeColor="colorList[colorIndex]" />
|
||||
<span :style="{ color: colorList[colorIndex] }">{{ percent }}%</span>
|
||||
</view>
|
||||
<!-- 标题 -->
|
||||
<view class="title">{{ page }}.{{ currentInfo.title }}</view>
|
||||
<!-- 题目列表 -->
|
||||
<view class="lists">
|
||||
<view class="list-item">
|
||||
<u-radio-group placement="column" @change="groupChange" iconPlacement="right" class="radio-g" :value="currentId">
|
||||
<u-radio
|
||||
class="radio-item"
|
||||
:customStyle="{ marginBottom: '8px' }"
|
||||
v-for="(item, index) in currentInfo.options"
|
||||
:key="index"
|
||||
:label="item.title"
|
||||
:name="item.option_id"
|
||||
:activeColor="colorList[colorIndex]"
|
||||
></u-radio>
|
||||
</u-radio-group>
|
||||
</view>
|
||||
<!-- 底部确认按钮 -->
|
||||
<view class="bottom-btn" :style="{ background: colorList[colorIndex] }" @click="next">下一步</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import { evaluationsQuestion, evaluationsAnswers } from '@/apis/interfaces/evaluation.js';
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
percent: 70,
|
||||
colorList: ['#34ce98', '#b6c29a', '#f4d000', '#8a977b', '#e58308', '#dc5712'],
|
||||
colorIndex: Math.floor(Math.random() * 6), // 基本案列数据
|
||||
currentInfo: {}, //当前题目的内容
|
||||
option_ids: [], // 答案id的数组
|
||||
has_more: false, // 是否有下一页
|
||||
page: 1,
|
||||
currentId: '' // 默认值
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
this.getList();
|
||||
uni.setNavigationBarColor({
|
||||
frontColor: '#ffffff', //文字颜色
|
||||
backgroundColor: `${this.colorList[this.colorIndex]}` //底部背景色
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
evaluationsQuestion(this.$Route.query.id, this.page).then(res => {
|
||||
this.currentInfo = res.data[0];
|
||||
this.percent = Number(((res.page.current - 1) / res.page.total).toFixed(2)) * 100;
|
||||
this.has_more = res.page.has_more;
|
||||
});
|
||||
},
|
||||
groupChange(n) {
|
||||
this.currentId = n;
|
||||
},
|
||||
// 上一题
|
||||
preQ() {
|
||||
this.option_ids.pop();
|
||||
this.currentId = '';
|
||||
this.page = this.page - 1;
|
||||
this.getList();
|
||||
},
|
||||
//下一题
|
||||
next() {
|
||||
if (this.has_more) {
|
||||
if (this.currentId === '') {
|
||||
uni.showToast({ title: '请选择答案', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
this.option_ids.push(this.currentId);
|
||||
this.currentId = '';
|
||||
this.page = this.page + 1;
|
||||
this.getList();
|
||||
} else {
|
||||
if(this.option_ids.length !== this.page){
|
||||
this.option_ids.push(this.currentId);
|
||||
this.currentId = '';
|
||||
}
|
||||
let data = {
|
||||
option_ids: this.option_ids.toString(),
|
||||
id: this.$Route.query.id
|
||||
};
|
||||
evaluationsAnswers(data)
|
||||
.then(res => {
|
||||
console.log(res);
|
||||
this.parent = 100;
|
||||
uni.showToast({
|
||||
title: '答题完成,立即查看结果',
|
||||
icon: 'none',
|
||||
mask: true
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.navigateTo({
|
||||
url: `/pages/evaluation/result?id=${this.$Route.query.id}`
|
||||
});
|
||||
}, 1000);
|
||||
})
|
||||
.catch(err => {
|
||||
uni.showToast({
|
||||
title:err.message
|
||||
})
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.evaluation {
|
||||
padding: $padding $padding $padding * 4 $padding;
|
||||
.percent {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
font-size: $title-size - 2;
|
||||
.pre-ico {
|
||||
margin: $padding;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
font-size: $title-size + 10;
|
||||
font-weight: bold;
|
||||
padding-top: $padding;
|
||||
}
|
||||
.lists {
|
||||
.radio-g {
|
||||
padding-top: $padding * 2;
|
||||
.radio-item {
|
||||
background: #f9f9f9;
|
||||
padding: $padding;
|
||||
border-radius: $radius;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.bottom-btn {
|
||||
text-align: center;
|
||||
padding: 24rpx $padding;
|
||||
border-radius: $radius + 40;
|
||||
color: #fff;
|
||||
font-size: $title-size;
|
||||
position: fixed;
|
||||
bottom: $padding;
|
||||
width: calc(100% - 60rpx);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
132
pages/evaluation/introduce.vue
Normal file
132
pages/evaluation/introduce.vue
Normal file
@@ -0,0 +1,132 @@
|
||||
<!--
|
||||
* @Description:测评前置,用于测试介绍展示
|
||||
* @Author: Aimee·Zhang
|
||||
* @Date: 2022-01-05 09:16:10
|
||||
* @LastEditors: Aimee·Zhang
|
||||
* @LastEditTime: 2022-01-13 17:26:38
|
||||
-->
|
||||
<template>
|
||||
<view class="introduce">
|
||||
<view class="intro-history" @click="info.is_answer?'toResult':''">{{info.is_answer?'测评记录':'暂未测评'}}</view>
|
||||
<view class="intro-content">
|
||||
<view class="intro-title">{{ info.title }}</view>
|
||||
<u-read-more class="intro-des" :toggle="true" showHeight="140" ref="uReadMore" :shadowStyle="shadowStyle" color="#34ce98" textIndent="0">
|
||||
<rich-text :nodes="content"></rich-text>
|
||||
</u-read-more>
|
||||
<u-image class="intro-img" width="100%" radius="20rpx" height="700rpx" :src="info.cover ? info.cover : require('../../static/imgs/indro.png')" :lazy-load="true" />
|
||||
<view class="answer" @click="nowAn">开始测评</view>
|
||||
</view>
|
||||
<view class="remark">本评测会收集孕产情况、健康状况、家族病史、用药情况信息，用于开展相关评测，为你生成分析报告。</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { evaluationsInfo } from '@/apis/interfaces/evaluation.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
info: {},
|
||||
content: `本测试预计完成时间5-8分钟
|
||||
<br/>
|
||||
—
|
||||
<br/>
|
||||
适用于18-65岁，存在亚健康或尿酸偏高人群`,
|
||||
shadowStyle: {
|
||||
backgroundImage: 'none',
|
||||
paddingTop: '0',
|
||||
marginTop: '20rpx'
|
||||
}
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
evaluationsInfo(this.$Route.query.id).then(res => {
|
||||
this.content = res.content;
|
||||
this.info = res;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
nowAn() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/evaluation/index?id=${this.$Route.query.id}`
|
||||
});
|
||||
},
|
||||
toResult(item) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/evaluation/result?id=${this.$Route.query.id}`
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.introduce {
|
||||
background-color: $main-color;
|
||||
min-height: 100vh;
|
||||
.intro-history {
|
||||
padding: $padding * 1.5 $padding;
|
||||
color: $window-color;
|
||||
text-decoration: underline;
|
||||
font-size: $title-size-lg;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
// 测评展示
|
||||
.intro-content {
|
||||
background: rgba($color: #fff, $alpha: 1);
|
||||
min-height: 30vh;
|
||||
padding: 0 $padding;
|
||||
margin: $margin * 1.5;
|
||||
border-radius: $radius;
|
||||
position: relative;
|
||||
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
||||
// 标题
|
||||
.intro-title {
|
||||
font-size: $title-size * 1.8;
|
||||
font-weight: bold;
|
||||
color: $text-color;
|
||||
position: relative;
|
||||
top: -40rpx;
|
||||
}
|
||||
// 介绍
|
||||
.intro-des {
|
||||
line-height: $title-size * 1.8;
|
||||
color: $text-color;
|
||||
position: relative;
|
||||
top: -10rpx;
|
||||
font-size: $title-size-m;
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
// 图片
|
||||
.intro-img {
|
||||
margin-top: $padding * 0.8;
|
||||
}
|
||||
// 开始测评
|
||||
.answer {
|
||||
position: absolute;
|
||||
bottom: -30rpx;
|
||||
width: 400rpx;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
left: 50%;
|
||||
text-align: center;
|
||||
background: rgba($color: #fff, $alpha: 0.94);
|
||||
margin-left: -200rpx;
|
||||
border-radius: $radius-m * 4;
|
||||
font-weight: bold;
|
||||
color: $text-color;
|
||||
font-size: $title-size-m + 6;
|
||||
}
|
||||
}
|
||||
// 备注信息
|
||||
.remark {
|
||||
color: $text-gray;
|
||||
font-size: $title-size - 6;
|
||||
padding: $padding * 2 $padding;
|
||||
line-height: $title-size * 1.3;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
210
pages/evaluation/list.vue
Normal file
210
pages/evaluation/list.vue
Normal file
@@ -0,0 +1,210 @@
|
||||
<!--
|
||||
* @Description:用于展示评测列表，带分页加载更多~
|
||||
* @Author: Aimee·Zhang
|
||||
* @Date: 2022-01-05 09:13:53
|
||||
* @LastEditors: Aimee·Zhang
|
||||
* @LastEditTime: 2022-01-14 08:40:36
|
||||
-->
|
||||
<template>
|
||||
<view class="evaluation-list ">
|
||||
<view
|
||||
class="evaluation-item"
|
||||
v-for="(item,index) in evalList"
|
||||
:key="index"
|
||||
>
|
||||
<!-- 评测列表主要内容 标题 图片 描述 -->
|
||||
<view class="--content">
|
||||
<u-image
|
||||
class="content-img"
|
||||
width="170rpx"
|
||||
height="170rpx"
|
||||
radius="20rpx"
|
||||
:src="item.cover?item.cover:require('../../static/imgs/test.png')"
|
||||
:lazy-load="true"
|
||||
/>
|
||||
<view class="title-des">
|
||||
<view class="title">{{item.title}}</view>
|
||||
<view class="des">{{item.description || '--'}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 分数 -->
|
||||
<view
|
||||
class="score"
|
||||
v-if="item.is_answer"
|
||||
><span>{{item.answer.total}}</span>分</view>
|
||||
|
||||
<!-- 评测状态 -->
|
||||
<view class="--status">
|
||||
<!-- 已测试展示 状态-->
|
||||
<view
|
||||
class="status"
|
||||
v-if="item.is_answer"
|
||||
>
|
||||
<span class="dian">·</span>{{item.remark}}
|
||||
</view>
|
||||
<view
|
||||
v-if="item.is_answer"
|
||||
class="history"
|
||||
@click="toResult(item)"
|
||||
>
|
||||
查看历史结果
|
||||
</view>
|
||||
<!-- 未测试展示 状态-->
|
||||
<view
|
||||
class="status"
|
||||
v-if="!item.is_answer"
|
||||
>
|
||||
<span class="dian">·</span>
|
||||
<span class="person">{{item.remark}}</span>
|
||||
人已测 | 约4~8分钟
|
||||
</view>
|
||||
<u-icon
|
||||
name="arrow-right"
|
||||
:color="item.is_answer?'#26a377':'#faa81a'"
|
||||
size="14"
|
||||
:bold="true"
|
||||
:label="item.is_answer?'重新评测':'开始测评'"
|
||||
labelPos="left"
|
||||
labelSize="14"
|
||||
space="1"
|
||||
:labelColor="item.is_answer?'#26a377':'#faa81a'"
|
||||
@click="nowEva(item)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 没有更多 -->
|
||||
<view class="no-more">没有更多~</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { evaluations } from "@/apis/interfaces/evaluation.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
evalList: [],
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
// 测试列表
|
||||
getList() {
|
||||
evaluations().then((res) => {
|
||||
this.evalList = res;
|
||||
});
|
||||
},
|
||||
// nowEva
|
||||
nowEva(item) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/evaluation/introduce?id=${item.evaluation_id}`,
|
||||
});
|
||||
},
|
||||
//测评结果
|
||||
toResult(item) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/evaluation/result?id=${item.evaluation_id}`,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 列表
|
||||
.evaluation-item {
|
||||
background-color: #fff;
|
||||
padding: $padding;
|
||||
margin: $margin;
|
||||
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
||||
border-radius: $radius;
|
||||
position: relative;
|
||||
// 评测列表主要内容
|
||||
.--content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
.content-img {
|
||||
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
||||
border-radius: 30rpx;
|
||||
}
|
||||
.title-des {
|
||||
padding-left: $padding - 10;
|
||||
width: 440rpx;
|
||||
.title {
|
||||
font-size: $title-size + 4;
|
||||
font-weight: bold;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 340rpx;
|
||||
}
|
||||
.des {
|
||||
font-size: $title-size-lg;
|
||||
color: $text-gray;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
padding-top: $padding - 8;
|
||||
}
|
||||
}
|
||||
}
|
||||
// .测试状态
|
||||
.--status {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
color: $text-gray-m;
|
||||
font-size: $title-size-m;
|
||||
padding-top: $padding;
|
||||
.status {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
.dian {
|
||||
font-size: $title-size-lg;
|
||||
margin-right: $padding * 0.2;
|
||||
font-weight: bold;
|
||||
}
|
||||
.person {
|
||||
color: #faa81a;
|
||||
}
|
||||
}
|
||||
.history {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
// 分数
|
||||
.score {
|
||||
font-size: $title-size-m - 2;
|
||||
color: $text-gray-m;
|
||||
position: absolute;
|
||||
right: $padding;
|
||||
top: $padding - 10;
|
||||
span {
|
||||
font-size: 50rpx;
|
||||
color: $main-color;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 没有更多
|
||||
.no-more {
|
||||
color: $uni-text-color-disable;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
padding: $padding;
|
||||
font-size: $title-size-m;
|
||||
}
|
||||
</style>
|
||||
320
pages/evaluation/result.vue
Normal file
320
pages/evaluation/result.vue
Normal file
@@ -0,0 +1,320 @@
|
||||
<!--
|
||||
* @Description:测评结果页面,用于展示测评结果内容
|
||||
* @Author: Aimee·Zhang
|
||||
* @Date: 2022-01-05 09:16:10
|
||||
* @LastEditors: Aimee·Zhang
|
||||
* @LastEditTime: 2022-01-13 17:30:56
|
||||
-->
|
||||
<template>
|
||||
<view
|
||||
class="answer"
|
||||
v-if='loaded'
|
||||
>
|
||||
<!-- 头像 -->
|
||||
<view class="user">
|
||||
<view class="left">
|
||||
<u-image
|
||||
width="80rpx"
|
||||
height="80rpx"
|
||||
:src="info.user.avatar?info.user.avatar:require('../../static/imgs/avatar.png')"
|
||||
:lazy-load="true"
|
||||
shape="circle"
|
||||
/>
|
||||
<span class="name">{{info.user.nickname}}</span>
|
||||
</view>
|
||||
<view class="right">
|
||||
<u-icon
|
||||
name="arrow-right"
|
||||
color="#34ce98"
|
||||
size="14"
|
||||
:bold="true"
|
||||
label="重新评测"
|
||||
labelPos="left"
|
||||
labelSize="14"
|
||||
labelColor="#34ce98"
|
||||
space="1"
|
||||
@click="reEva"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 皮肤年龄 -->
|
||||
<view class="answer-item">
|
||||
<!-- 标题 -->
|
||||
<view class="title-content">
|
||||
<view class="title">{{info.title}}{{info.explain.title}}</view>
|
||||
<u-icon
|
||||
name="share-square"
|
||||
color="#333"
|
||||
size="30"
|
||||
/>
|
||||
</view>
|
||||
<!-- 雷达图 -->
|
||||
<view class="charts-box">
|
||||
<view class="charts-box">
|
||||
<qiun-data-charts
|
||||
type="radar"
|
||||
:chartData="chartData"
|
||||
:loadingType="4"
|
||||
background="none"
|
||||
:tooltipShow="false"
|
||||
:tapLegend="false"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 描述 -->
|
||||
<view class="des">
|
||||
<u-read-more
|
||||
class="intro-des"
|
||||
:toggle="true"
|
||||
showHeight="140"
|
||||
ref="uReadMore"
|
||||
:shadowStyle="shadowStyle"
|
||||
color='#34ce98'
|
||||
textIndent="0"
|
||||
>
|
||||
<rich-text :nodes="info.explain.content"></rich-text>
|
||||
</u-read-more>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 建议改进 -->
|
||||
<view class="answer-item">
|
||||
<!-- 标题 -->
|
||||
<view class="title-content">
|
||||
<view class="title">建议从一下几个方面改进</view>
|
||||
</view>
|
||||
<block
|
||||
v-for="(itme,index) in 3"
|
||||
:key="index"
|
||||
>
|
||||
<view class="title2">
|
||||
<u-image
|
||||
width="34rpx"
|
||||
height="34rpx"
|
||||
:src="require('../../static/icon/health.png')"
|
||||
:lazy-load="true"
|
||||
shape="circle"
|
||||
/>
|
||||
<span>严厉节食导致营养不良，内分泌紊乱</span>
|
||||
</view>
|
||||
<!-- 描述 -->
|
||||
<view class="des">
|
||||
饮食营养及生活方式对维持面部年轻态影响较大，建议注意食材选择，逐步清淡口味；规律作息，逐个改善不良生活习惯；帮助改善当前皮肤状态。
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<!-- 营养建议 -->
|
||||
<view class="answer-item">
|
||||
<!-- 标题 -->
|
||||
<view class="title-content">
|
||||
<view class="title">营养建议</view>
|
||||
</view>
|
||||
<block
|
||||
v-for="(item,index) in 3"
|
||||
:key="index"
|
||||
>
|
||||
<view class="title2">
|
||||
<span>{{item}}. 低Gi</span>
|
||||
</view>
|
||||
<!-- 描述 -->
|
||||
<view class="des">
|
||||
饮食营养及生活方式对维持面部年轻态影响较大，建议注意食材选择，逐步清淡口味；规律作息，逐个改善不良生活习惯；帮助改善当前皮肤状态。
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<!-- 更多 -->
|
||||
<view class="answer-item">
|
||||
<!-- 标题 -->
|
||||
<view class="title-content">
|
||||
<view class="title">更多护肤知识</view>
|
||||
<u-icon
|
||||
name="arrow-right"
|
||||
color="#333"
|
||||
size="20"
|
||||
/>
|
||||
</view>
|
||||
<!-- 横向滚动推荐 -->
|
||||
<scroll-view
|
||||
class="scroll-view_H"
|
||||
scroll-x="true"
|
||||
>
|
||||
<view
|
||||
v-for="(item,index) in 6"
|
||||
:key="index"
|
||||
id="demo1"
|
||||
class="scroll-view-item_H"
|
||||
>
|
||||
<u-image
|
||||
width="180rpx"
|
||||
height="180rpx"
|
||||
:src="require('../../static/imgs/indro.png')"
|
||||
:lazy-load="true"
|
||||
radius="4"
|
||||
/>
|
||||
<view class="title">{{item}}正确洗脸</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { evaluationsAnswersInfo } from "@/apis/interfaces/evaluation.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
chartData: {},
|
||||
info: {},
|
||||
shadowStyle: {
|
||||
backgroundImage: "none",
|
||||
paddingTop: "0",
|
||||
marginTop: "20rpx",
|
||||
},
|
||||
loaded: false,
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
this.getInfo();
|
||||
},
|
||||
methods: {
|
||||
getInfo() {
|
||||
evaluationsAnswersInfo(this.$Route.query.id).then((res) => {
|
||||
this.info = res;
|
||||
this.chartData = {
|
||||
categories: res.veidoo.categories,
|
||||
series: [
|
||||
{
|
||||
data: res.veidoo.data,
|
||||
},
|
||||
],
|
||||
};
|
||||
this.loaded = true;
|
||||
});
|
||||
},
|
||||
reEva() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/evaluation/index?id=${this.$Route.query.id}`,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.answer {
|
||||
min-height: 100vh;
|
||||
padding-bottom: $padding;
|
||||
|
||||
// 用户头像
|
||||
.user {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
padding: $padding;
|
||||
border-bottom: solid 1rpx #f7f7f7;
|
||||
margin-bottom: $margin * 1.5;
|
||||
.left {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
font-size: $title-size-m;
|
||||
.name {
|
||||
padding-left: $padding;
|
||||
width: 320rpx;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
color: $text-color;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
border: solid 1rpx rgba($color: $main-color, $alpha: 0.6);
|
||||
padding: 10rpx $padding * 0.4 10rpx $padding * 0.7;
|
||||
border-radius: $padding;
|
||||
}
|
||||
}
|
||||
// 展示列表
|
||||
.answer-item {
|
||||
background: rgba($color: #fff, $alpha: 1);
|
||||
padding: $padding * 1.3 $padding;
|
||||
margin: $margin;
|
||||
border-radius: $radius;
|
||||
position: relative;
|
||||
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
||||
//标题
|
||||
.title-content {
|
||||
font-size: $title-size + 6;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
.title {
|
||||
color: $text-color;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
// 描述
|
||||
.des {
|
||||
font-size: $title-size - 4;
|
||||
color: $text-color;
|
||||
line-height: $title-size * 2 - 18;
|
||||
// 介绍
|
||||
.intro-des {
|
||||
line-height: $title-size * 1.8;
|
||||
color: $text-color;
|
||||
position: relative;
|
||||
top: -10rpx;
|
||||
font-size: $title-size-m !important;
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
// 雷达图
|
||||
.charts-box {
|
||||
width: 100%;
|
||||
height: 400rpx;
|
||||
margin: $margin 0;
|
||||
}
|
||||
//二级标题
|
||||
.title2 {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
margin-top: 40rpx;
|
||||
margin-bottom: 20rpx;
|
||||
span {
|
||||
font-size: $title-size-m + 2;
|
||||
font-weight: bold;
|
||||
margin-left: $margin * 0.3;
|
||||
}
|
||||
}
|
||||
// 横向滚动
|
||||
.scroll-view_H {
|
||||
white-space: nowrap;
|
||||
border-radius: $radius;
|
||||
.scroll-view-item_H {
|
||||
display: inline-block;
|
||||
width: 180rpx;
|
||||
margin: $margin * 1.6 $margin * 0.5 $margin * 0.3 $margin * 0.5;
|
||||
box-shadow: 0 0 10rpx 4rpx
|
||||
rgba($color: $main-color, $alpha: 0.1);
|
||||
.title {
|
||||
text-align: center;
|
||||
padding: $padding * 0.6 $padding * 0.3;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
color: $text-gray;
|
||||
font-size: $title-size - 4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -49,7 +49,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { init, connect } from '@rongcloud/imlib-uni'
|
||||
// import { init, connect } from '@rongcloud/imlib-uni'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
177
pages/record/addFoods.vue
Normal file
177
pages/record/addFoods.vue
Normal file
@@ -0,0 +1,177 @@
|
||||
<!--
|
||||
* @Description:
|
||||
* @Author: Aimee·Zhang
|
||||
* @Date: 2022-01-11 11:27:17
|
||||
* @LastEditors: Aimee·Zhang
|
||||
* @LastEditTime: 2022-01-13 11:24:47
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view class="add-foods">
|
||||
<view class="re">
|
||||
<view>低等热量</view>
|
||||
<view>中等热量</view>
|
||||
<view>高等热量</view>
|
||||
</view>
|
||||
<!-- 搜索页面 -->
|
||||
<u-search :show-action="true" actionText="搜索" :animation="true" :clearabled="true" placeholder="请输入食品名称" @custom="searchCustom" @clear="clearSearch" v-model="name" />
|
||||
<!-- 食品列表 -->
|
||||
<goodsList :lists="lists" type="dian" @addGoods="addGoods" />
|
||||
<!-- 添加食谱弹窗 -->
|
||||
<addFoods v-if="addShow" :addShow="addShow" :selectGoods="selectGoods" :decimals="true" @confirm="confirmHandle" @close="closeHandle" @tabGoodsInfo="tabGoodsInfo" max="999" />
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import goodsList from '@/components/foods';
|
||||
import addFoods from '@/components/add-goods-template/add-goods-template';
|
||||
import { healthFoods, addHealthFoods } from '@/apis/interfaces/foods.js';
|
||||
import moment from 'moment';
|
||||
|
||||
export default {
|
||||
components: { goodsList, addFoods },
|
||||
data() {
|
||||
return {
|
||||
addShow: false, // 添加食品显示
|
||||
selectGoods: [], // 选择新增的食品
|
||||
editGoodsId: '', // 编辑食物
|
||||
type: '', // 新增食品时候 1早2午3晚4早加5午加6晚加
|
||||
lists: [], // 食品列表
|
||||
page: 1,
|
||||
has_more: true,
|
||||
name: '', // 搜索食品名称
|
||||
date: moment(new Date()).format('YYYY-MM-DD')
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
// 有id就是编辑不需要重新处理type了
|
||||
if (this.$Route.query.id) {
|
||||
this.editGoodsId = this.$Route.query.id;
|
||||
return;
|
||||
}
|
||||
//没有id的时候就是新增要处理type
|
||||
this.type = this.$Route.query.type;
|
||||
// this.getFoods();
|
||||
},
|
||||
onLoad() {
|
||||
this.getFoods();
|
||||
},
|
||||
// 触底加载更多
|
||||
onReachBottom() {
|
||||
if (!this.has_more) {
|
||||
uni.showToast({
|
||||
title: '没有更多啦~',
|
||||
icon: 'none'
|
||||
});
|
||||
} else {
|
||||
this.page = this.page + 1;
|
||||
this.getFoods();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取食品列表
|
||||
getFoods() {
|
||||
let data = {
|
||||
page: this.page,
|
||||
name: this.name
|
||||
};
|
||||
healthFoods(data).then(res => {
|
||||
console.log(res);
|
||||
this.lists = this.lists.concat(res.data);
|
||||
this.has_more = res.page.has_more;
|
||||
});
|
||||
},
|
||||
// 监听点击键盘触发返回值新增食品
|
||||
confirmHandle(value) {
|
||||
console.log(value);
|
||||
// 新添加食物
|
||||
let data = {
|
||||
type: this.type,
|
||||
ser: 1,
|
||||
weight: value,
|
||||
food_id: this.selectGoods[0].food_id,
|
||||
date: this.date
|
||||
};
|
||||
this.addHealthFoods(data);
|
||||
},
|
||||
// 添加食物
|
||||
addHealthFoods(data) {
|
||||
addHealthFoods(data).then(res => {
|
||||
console.log(res);
|
||||
this.addShow = false;
|
||||
this.$Router.back();
|
||||
});
|
||||
},
|
||||
closeHandle() {
|
||||
//键盘关闭的回调函数
|
||||
this.addShow = false;
|
||||
},
|
||||
// 监听子组件的新增方法
|
||||
addGoods(e) {
|
||||
console.log('父组件监听到了子组件的新增方法', e);
|
||||
this.addShow = true;
|
||||
this.selectGoods = [e];
|
||||
},
|
||||
// 监听子组件的新增方法
|
||||
tabGoodsInfo(e) {
|
||||
console.log('父组件监听到了子组件的商品详情页面', e);
|
||||
},
|
||||
// 点击搜索左侧按钮
|
||||
searchCustom(e) {
|
||||
console.log(e);
|
||||
this.name = e;
|
||||
this.reset();
|
||||
},
|
||||
// 清空数组重新请求数据
|
||||
reset() {
|
||||
this.page = 1;
|
||||
this.has_more = true;
|
||||
this.lists = [];
|
||||
this.getFoods();
|
||||
},
|
||||
// 点击搜索后面按钮触发事件事件
|
||||
clearSearch() {
|
||||
this.name = '';
|
||||
this.reset();
|
||||
},
|
||||
// 跳转到食品详情
|
||||
tabGoodsInfo(e) {
|
||||
console.log(e);
|
||||
this.$Router.push({
|
||||
name: 'rankingDetails',
|
||||
params: e
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.add-foods {
|
||||
padding: $padding;
|
||||
.re{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
box-sizing: border-box;
|
||||
padding:$padding $padding * 2;
|
||||
font-size: $title-size-m;
|
||||
view:before{
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
margin-right: 10rpx;
|
||||
content: '';
|
||||
}
|
||||
view:nth-child(3):before {
|
||||
background: #fa624d;
|
||||
}
|
||||
view:nth-child(2):before {
|
||||
background: #fbbf0f;
|
||||
}
|
||||
view:nth-child(1):before {
|
||||
background: #02c7bd;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
453
pages/record/drink.vue
Normal file
453
pages/record/drink.vue
Normal file
@@ -0,0 +1,453 @@
|
||||
<!--
|
||||
* @Description:喝水记录 ，记录当前的喝水情况
|
||||
* @Author: Aimee·Zhang
|
||||
* @Date: 2022-01-06 14:48:07
|
||||
* @LastEditors: Aimee·Zhang
|
||||
* @LastEditTime: 2022-01-12 16:23:01
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view
|
||||
class="drink"
|
||||
v-if="loaded"
|
||||
>
|
||||
<!-- 喝水及水杯文字 -->
|
||||
<view class="drink-content">
|
||||
<view
|
||||
class="title"
|
||||
v-if="!water.is_complete"
|
||||
>再喝<span class="num">{{water.lack.cup}}</span>杯<span class="total">（约{{water.lack.value}}ml）</span></view>
|
||||
<view
|
||||
class="title"
|
||||
v-if="water.is_complete"
|
||||
>已喝<span class="num">{{water.total}}ml</span>
|
||||
<u-image
|
||||
class="is_complete"
|
||||
:src="require('../../static/imgs/target.png')"
|
||||
:lazy-load="true"
|
||||
mode="widthFix"
|
||||
width="140rpx"
|
||||
/>
|
||||
</view>
|
||||
<!-- 水杯动态图片 -->
|
||||
<view class="wave-content">
|
||||
<u-image
|
||||
class="grass"
|
||||
:src="require('../../static/imgs/gress.png')"
|
||||
:lazy-load="true"
|
||||
mode="scaleToFill"
|
||||
width="320rpx"
|
||||
height="520rpx"
|
||||
/>
|
||||
<view
|
||||
class="wave"
|
||||
:style="{'--ballPercent': -ballPercent+40+'%'}"
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 目标 -->
|
||||
<view class="water-target">
|
||||
<view
|
||||
class="target-item"
|
||||
@click="targetShow = true"
|
||||
>今日目标
|
||||
<u-icon
|
||||
class="target-icon"
|
||||
name="arrow-right"
|
||||
color="#666"
|
||||
size="14"
|
||||
:bold="true"
|
||||
:label="water.target+'ml'"
|
||||
labelPos="left"
|
||||
labelSize="16"
|
||||
labelColor="#666"
|
||||
space="6"
|
||||
/>
|
||||
</view>
|
||||
<view
|
||||
class="target-item"
|
||||
@click="waterCShow = true"
|
||||
>水杯容量
|
||||
<u-icon
|
||||
class="target-icon"
|
||||
name="arrow-right"
|
||||
color="#666"
|
||||
size="14"
|
||||
:bold="true"
|
||||
:label="water.ml+'ml'"
|
||||
labelPos="left"
|
||||
labelSize="16"
|
||||
labelColor="#666"
|
||||
space="6"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 目标弹出层 -->
|
||||
<view>
|
||||
<u-picker
|
||||
:show="targetShow"
|
||||
:columns="tagerts"
|
||||
title="每天喝水目标"
|
||||
keyName="label"
|
||||
confirmColor="#34ce98"
|
||||
:closeOnClickOverlay="true"
|
||||
@close="targetShow = false"
|
||||
@confirm="targetSure('1',$event)"
|
||||
:defaultIndex="tagertsDefaultIndex"
|
||||
/>
|
||||
<u-picker
|
||||
:show="waterCShow"
|
||||
:columns="cup_mls"
|
||||
title="设置水杯容量"
|
||||
keyName="label"
|
||||
confirmColor="#34ce98"
|
||||
:closeOnClickOverlay="true"
|
||||
@close="waterCShow = false"
|
||||
@confirm="targetSure('2',$event)"
|
||||
:defaultIndex="cupDefaultIndex"
|
||||
/>
|
||||
</view>
|
||||
<!-- 加水 -->
|
||||
<view
|
||||
class="add-water"
|
||||
@click="drinkWater"
|
||||
>
|
||||
<u-image
|
||||
class="grass"
|
||||
:src="require('../../static/imgs/gress2.png')"
|
||||
:lazy-load="true"
|
||||
mode="scaleToFill"
|
||||
width="60rpx"
|
||||
height="80rpx"
|
||||
/>
|
||||
<span>一杯水</span>
|
||||
<u-icon
|
||||
class="add-icon"
|
||||
name="plus-circle-fill"
|
||||
color="#34ce98"
|
||||
size="24"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 喝水记录 -->
|
||||
<view class="--history">
|
||||
<view class="title">喝水记录</view>
|
||||
<template v-if="logs.length>0">
|
||||
<view
|
||||
class="lists"
|
||||
v-for="item in logs"
|
||||
:key="item.water_log_id"
|
||||
>
|
||||
<view class="lists-water">
|
||||
<u-icon
|
||||
size="30"
|
||||
:name="require('../../static/icon/water-icon.png')"
|
||||
/>
|
||||
</view>
|
||||
<view class="list-item">
|
||||
<view class="list-item-title">水<span>{{item.time}}</span></view>
|
||||
{{item.ml}}ml
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<view
|
||||
v-else
|
||||
class="no-drink"
|
||||
> 今天一杯水还没有喝呢，来一杯吧~</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import { waters, setWaters, drinkWater } from "@/apis/interfaces/drink";
|
||||
import moment from "moment";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
ballPercent: 70, // 喝水比例
|
||||
logs: [], // 水记录
|
||||
water: {}, // 水基本信息
|
||||
targetShow: false,
|
||||
tagerts: [], // 目标列表
|
||||
tagertsDefaultIndex: ["1"], // 目标默认index
|
||||
waterCShow: false,
|
||||
cup_mls: [], // 水杯列表
|
||||
cupDefaultIndex: ["2"], // 目标默认index
|
||||
loaded: false,
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
this.getWaters();
|
||||
},
|
||||
methods: {
|
||||
// 获取喝水页面信息
|
||||
getWaters() {
|
||||
waters().then((res) => {
|
||||
this.cup_mls = [res.cup_mls];
|
||||
this.tagerts = [res.tagerts];
|
||||
this.water = res.water;
|
||||
this.logs = res.logs;
|
||||
this.ballPercent = res.water.lack.ratio;
|
||||
this.cupDefaultIndex = [
|
||||
res.cup_mls.findIndex(
|
||||
(item) => item.number === res.water.ml
|
||||
),
|
||||
];
|
||||
this.tagertsDefaultIndex = [
|
||||
res.tagerts.findIndex(
|
||||
(item) => item.number === res.water.target
|
||||
),
|
||||
];
|
||||
this.loaded = true;
|
||||
});
|
||||
},
|
||||
// 确认方法index===1 每日目标 2，水杯容量
|
||||
targetSure(index, e) {
|
||||
// console.log("触发了targetSure", index, e.value[0]);
|
||||
// let date = moment(new Date()).format("YYYY--MM--DD");
|
||||
let params = {};
|
||||
if (index === "1") {
|
||||
params = {
|
||||
type: "target",
|
||||
ml: e.value[0].number,
|
||||
date: moment(new Date()).format("YYYY-MM-DD"),
|
||||
};
|
||||
} else {
|
||||
params = {
|
||||
type: "ml",
|
||||
ml: e.value[0].number,
|
||||
date: moment(new Date()).format("YYYY-MM-DD"),
|
||||
};
|
||||
}
|
||||
setWaters(params).then((res) => {
|
||||
this.getWaters();
|
||||
this.waterCShow = false;
|
||||
this.targetShow = false;
|
||||
});
|
||||
},
|
||||
// 喝水
|
||||
drinkWater() {
|
||||
drinkWater().then((res) => {
|
||||
console.log(res);
|
||||
this.getWaters();
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.drink {
|
||||
// 喝水 水杯及文字
|
||||
|
||||
.drink-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
padding: $padding * 2 0;
|
||||
position: relative;
|
||||
// 标题 再喝水
|
||||
.title {
|
||||
font-size: $title-size + 4;
|
||||
color: $main-color;
|
||||
font-weight: normal;
|
||||
margin: $margin * 2;
|
||||
position: relative;
|
||||
.is_complete {
|
||||
position: absolute;
|
||||
top: 30rpx;
|
||||
right: -120rpx;
|
||||
}
|
||||
.num {
|
||||
font-size: $title-size * 2.3;
|
||||
padding: 0 $padding * 0.3;
|
||||
font-weight: bold;
|
||||
}
|
||||
.total {
|
||||
font-size: $title-size;
|
||||
color: $text-gray-m;
|
||||
padding-left: $padding * 0.2;
|
||||
}
|
||||
}
|
||||
// 加一杯水
|
||||
.add-water {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
font-size: $title-size;
|
||||
color: $text-color;
|
||||
margin-top: $margin * 2;
|
||||
position: relative;
|
||||
span {
|
||||
padding-top: $padding * 0.4;
|
||||
}
|
||||
.add-icon {
|
||||
position: absolute;
|
||||
top: $margin + 8;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
// 目标
|
||||
.water-target {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
color: $text-gray-m;
|
||||
font-size: $title-size;
|
||||
position: absolute;
|
||||
z-index: 110;
|
||||
right: $padding * 1.4;
|
||||
top: 50%;
|
||||
.target-item {
|
||||
margin-top: $margin * 1.6;
|
||||
.target-icon {
|
||||
padding-top: $padding * 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 喝水记录
|
||||
.--history {
|
||||
padding: $padding;
|
||||
.no-drink {
|
||||
color: $text-gray-m;
|
||||
font-size: $title-size-m;
|
||||
padding-top: $padding + 10;
|
||||
}
|
||||
// 标题
|
||||
.title {
|
||||
font-size: $title-size * 1.4;
|
||||
font-weight: bold;
|
||||
color: $text-color;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
padding-left: $padding;
|
||||
padding-bottom: $padding;
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 8rpx;
|
||||
height: 45rpx;
|
||||
left: 0;
|
||||
background-color: $main-color;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// 列表
|
||||
.lists {
|
||||
// background-color: pink;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
border-bottom: solid 1rpx #f7f7f7;
|
||||
.lists-water {
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
$main-color,
|
||||
$main-color
|
||||
);
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.list-item {
|
||||
flex: 1;
|
||||
margin-left: $margin * 0.7;
|
||||
font-size: $title-size;
|
||||
color: $text-gray-m;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
margin: $margin 0 $margin $margin * 0.7;
|
||||
.list-item-title {
|
||||
font-size: $title-size + 3;
|
||||
color: $text-color;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
font-weight: bold;
|
||||
span {
|
||||
margin-top: $margin * 0.4;
|
||||
background-color: #f7f7f7;
|
||||
padding: 4rpx 10rpx;
|
||||
border-radius: 50rpx;
|
||||
font-weight: normal;
|
||||
font-size: $title-size - 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 水杯动画
|
||||
.wave-content {
|
||||
position: relative;
|
||||
z-index: 110;
|
||||
.grass {
|
||||
position: relative;
|
||||
z-index: 120099;
|
||||
}
|
||||
|
||||
.wave {
|
||||
position: absolute;
|
||||
width: 290rpx;
|
||||
height: 500rpx;
|
||||
background-color: rgba($color: $main-color, $alpha: 0.6);
|
||||
background-size: 100%;
|
||||
overflow: hidden;
|
||||
top: 10rpx;
|
||||
left: 20rpx;
|
||||
z-index: 10;
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 1000rpx;
|
||||
height: 1000rpx;
|
||||
top: var(--ballPercent);
|
||||
left: 50%;
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
border-radius: 45%;
|
||||
transform: translate(-50%, -70%) rotate(0);
|
||||
animation: rotate 4s linear infinite;
|
||||
z-index: 10;
|
||||
}
|
||||
&::after {
|
||||
border-radius: 47%;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
transform: translate(-50%, -70%) rotate(0);
|
||||
animation: rotate 6s linear -5s infinite;
|
||||
z-index: 20;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
50% {
|
||||
transform: translate(-50%, -73%) rotate(180deg);
|
||||
}
|
||||
100% {
|
||||
transform: translate(-50%, -70%) rotate(360deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
384
pages/record/foods.vue
Normal file
384
pages/record/foods.vue
Normal file
@@ -0,0 +1,384 @@
|
||||
<!--
|
||||
* @Description:
|
||||
* @Author: Aimee·Zhang
|
||||
* @Date: 2022-01-11 08:54:49
|
||||
* @LastEditors: Aimee·Zhang
|
||||
* @LastEditTime: 2022-01-14 09:29:23
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view class="record--foods">
|
||||
<!-- 饮食进度条 -->
|
||||
<view class="cricle-content">
|
||||
<view class="info">饮食摄入<span>{{calorys.intake_total}}</span></view>
|
||||
<arprogress
|
||||
:percent="calorys.exceeds?100:calorys.ratio"
|
||||
inactiveColor="#f5f4f9"
|
||||
:activeColor="calorys.exceeds?'#f00':'#34ce98'"
|
||||
width="300"
|
||||
class="cricle"
|
||||
borderWidth="20"
|
||||
>
|
||||
<span>{{calorys.exceeds?'多吃了':'还可以吃'}}</span>
|
||||
<span :class="['num',calorys.exceeds?'num1':'']">{{calorys.amount}}</span>
|
||||
<span>推荐预算{{calorys.goal}}</span>
|
||||
</arprogress>
|
||||
<view class="info" @click="errToast">运动消耗<span>0</span></view>
|
||||
<view class="ic-left">摄入量推荐</view>
|
||||
<u-icon
|
||||
class="ic-day"
|
||||
name="checkmark-circle"
|
||||
color="#34ce98"
|
||||
size="10"
|
||||
:label="`${calorys.days}天`"
|
||||
labelColor="#34ce98"
|
||||
labelSize="10"
|
||||
space="3"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 有饮食记录 -->
|
||||
<template v-if="intakes.length>0">
|
||||
<view
|
||||
class="foods-add"
|
||||
v-for="(it,index) in intakes"
|
||||
:key="index"
|
||||
>
|
||||
<view class="foods-title">
|
||||
<view class="title-left">{{it.name}}<span v-if="it.remark">{{it.remark || ''}}</span></view>
|
||||
<view class="title-right">
|
||||
{{it.total}}<span class="dw">千卡</span>
|
||||
<u-icon
|
||||
name="arrow-right"
|
||||
color="#ddd"
|
||||
size="13"
|
||||
:bold="true"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<goodsList
|
||||
:lists="it.intake"
|
||||
type="no-dian"
|
||||
@editGoods="editGoods"
|
||||
/>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<!-- 没有饮食记录 -->
|
||||
<view
|
||||
class="no-foods"
|
||||
v-else
|
||||
>
|
||||
<u-image
|
||||
:src="require('../../static/imgs/no-foods.png')"
|
||||
:lazy-load="true"
|
||||
radius="10rpx"
|
||||
mode="widthFix"
|
||||
width="300rpx"
|
||||
class="no-foods-img"
|
||||
/>
|
||||
<view>还没有添加今日饮食记录</view>
|
||||
<view>请点击屏幕下方按钮来添加</view>
|
||||
</view>
|
||||
<!-- 加餐模块 -->
|
||||
<u-action-sheet
|
||||
:actions="addEatList"
|
||||
title="加餐模块"
|
||||
:closeOnClickOverlay="true"
|
||||
:closeOnClickAction="true"
|
||||
@select="selectClick"
|
||||
cancelText="取消"
|
||||
:show="addEatShow"
|
||||
@close="addEatShow = false"
|
||||
></u-action-sheet>
|
||||
<!-- 底部 早餐等菜单 -->
|
||||
<u-tabbar
|
||||
:fixed="true"
|
||||
:placeholder="true"
|
||||
:safeAreaInsetBottom="true"
|
||||
inactiveColor="#333"
|
||||
@click="tabbarClick"
|
||||
>
|
||||
<u-tabbar-item
|
||||
text="+早餐"
|
||||
@click="tabbarClick"
|
||||
:icon="require('../../static/imgs/foods-1.png')"
|
||||
></u-tabbar-item>
|
||||
<u-tabbar-item
|
||||
text="+午餐"
|
||||
@click="tabbarClick"
|
||||
:icon="require('../../static/imgs/foods-2.png')"
|
||||
></u-tabbar-item>
|
||||
<u-tabbar-item
|
||||
text="+晚餐"
|
||||
@click="tabbarClick"
|
||||
:icon="require('../../static/imgs/foods-3.png')"
|
||||
></u-tabbar-item>
|
||||
<u-tabbar-item
|
||||
text="+加餐"
|
||||
@click="tabbarClick"
|
||||
:icon="require('../../static/imgs/foods-4.png')"
|
||||
></u-tabbar-item>
|
||||
</u-tabbar>
|
||||
|
||||
<!-- 修改食品弹窗 -->
|
||||
<!-- 添加食谱弹窗 -->
|
||||
<addFoods
|
||||
v-if="addShow"
|
||||
:addShow="addShow"
|
||||
:selectGoods="selectGoods"
|
||||
:decimals="true"
|
||||
@confirm="confirmHandle"
|
||||
@close="closeHandle"
|
||||
@delThis="delThis"
|
||||
@tabGoodsInfo="tabGoodsInfo"
|
||||
max="999"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import arprogress from "@/components/ar-circle-progress/index.vue";
|
||||
import goodsList from "@/components/foods";
|
||||
import {
|
||||
plans,
|
||||
editHealthFoods,
|
||||
delHealthFoods,
|
||||
} from "@/apis/interfaces/foods.js";
|
||||
import moment from "moment";
|
||||
import addFoods from "@/components/add-goods-template/add-goods-template";
|
||||
export default {
|
||||
components: {
|
||||
arprogress,
|
||||
goodsList,
|
||||
addFoods,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
lists: [],
|
||||
addEatShow: false, // 加餐弹窗默认不显示
|
||||
addEatList: [
|
||||
{
|
||||
name: "上午加餐",
|
||||
type: 2,
|
||||
},
|
||||
{
|
||||
name: "下午加餐",
|
||||
type: 4,
|
||||
},
|
||||
{
|
||||
name: "晚上加餐",
|
||||
type: 6,
|
||||
},
|
||||
],
|
||||
today: moment(new Date()).format("YYYY-MM-DD"),
|
||||
calorys: {}, // 当日食谱推荐页面的信息
|
||||
intakes: [], // 当日摄入列表
|
||||
addShow: false, // 添加食品显示
|
||||
selectGoods: [], // 选择新增的食品
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
// 错误提示
|
||||
errToast(){
|
||||
uni.showToast({
|
||||
title:'努力开发中~',
|
||||
icon:'none'
|
||||
})
|
||||
},
|
||||
getList() {
|
||||
plans(this.today).then((res) => {
|
||||
this.calorys = res.calorys;
|
||||
this.intakes = res.intakes;
|
||||
});
|
||||
},
|
||||
// 底部按钮点击触发的事件 早餐1 午餐3 晚餐5 加餐(早2中4晚6)
|
||||
tabbarClick(e) {
|
||||
this.tabarIndex = e;
|
||||
if (e === 3) {
|
||||
this.addEatShow = true;
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: `/pages/record/addFoods?type=${
|
||||
e === 0 ? 1 : e === 1 ? 3 : 5
|
||||
}`,
|
||||
});
|
||||
}
|
||||
},
|
||||
// 选择了加餐跳转
|
||||
selectClick(e) {
|
||||
console.log(e);
|
||||
uni.navigateTo({
|
||||
url: `/pages/record/addFoods?type=${e.type}`,
|
||||
});
|
||||
// 选择加餐
|
||||
},
|
||||
// 编辑食品
|
||||
editGoods(e) {
|
||||
console.log("父组件监听到了子组件的商品详情页面", e);
|
||||
this.selectGoods = [e];
|
||||
this.addShow = true;
|
||||
},
|
||||
closeHandle() {
|
||||
//键盘关闭的回调函数
|
||||
this.addShow = false;
|
||||
},
|
||||
// 监听点击键盘触发返回值新增食品
|
||||
confirmHandle(value) {
|
||||
console.log(value);
|
||||
// 新添加食物
|
||||
let data = {
|
||||
ser: 1,
|
||||
weight: value,
|
||||
food_id: this.selectGoods[0].food_id,
|
||||
intake_id: this.selectGoods[0].intake_id,
|
||||
};
|
||||
console.log(data);
|
||||
this.editHealthFoods(data);
|
||||
},
|
||||
// 添加食物
|
||||
editHealthFoods(data) {
|
||||
editHealthFoods(data).then((res) => {
|
||||
console.log(res);
|
||||
this.addShow = false;
|
||||
this.getList();
|
||||
});
|
||||
},
|
||||
// 删除该食物
|
||||
delThis(e) {
|
||||
delHealthFoods(this.selectGoods[0].intake_id).then((res) => {
|
||||
this.addShow = false;
|
||||
this.getList();
|
||||
});
|
||||
},
|
||||
// 跳转到食品详情
|
||||
tabGoodsInfo(e) {
|
||||
console.log(e);
|
||||
this.$Router.push({
|
||||
name: "rankingDetails",
|
||||
params: e,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.record--foods {
|
||||
padding: $padding $padding $padding * 2 $padding;
|
||||
// background: green;
|
||||
}
|
||||
// 饮食进度条
|
||||
.cricle-content {
|
||||
box-shadow: 0 0 4rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
||||
font-size: $title-size-m - 6;
|
||||
padding: $padding * 1.8 $padding;
|
||||
border-radius: $radius;
|
||||
color: $text-gray-m;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
.cricle {
|
||||
.num {
|
||||
color: $text-color;
|
||||
font-size: $title-size * 1.8;
|
||||
font-weight: bold;
|
||||
padding: $padding * 0.2;
|
||||
}
|
||||
.num1 {
|
||||
color: #f00;
|
||||
}
|
||||
}
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
span {
|
||||
font-size: $title-size + 10;
|
||||
font-weight: bold;
|
||||
color: $text-color;
|
||||
padding-top: $padding * 0.5;
|
||||
}
|
||||
}
|
||||
.ic-left {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-image: linear-gradient(to right, #ffebb9, #fbd57b);
|
||||
color: #664710;
|
||||
padding: 10rpx $padding * 0.6;
|
||||
border-radius: 0 0 $radius 0;
|
||||
}
|
||||
.ic-day {
|
||||
position: absolute;
|
||||
right: $padding;
|
||||
top: $padding;
|
||||
}
|
||||
}
|
||||
// 没有饮食记录
|
||||
.no-foods {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
font-size: $title-size-m - 4;
|
||||
color: $text-gray-m;
|
||||
min-height: 40vh;
|
||||
// background: pink;
|
||||
.no-foods-img {
|
||||
opacity: 0.5;
|
||||
}
|
||||
view {
|
||||
padding: $padding * 0.2;
|
||||
}
|
||||
}
|
||||
// 饮食记录 早中晚加餐等
|
||||
.foods-add {
|
||||
border-bottom: solid 1rpx #f7f7f7;
|
||||
margin-top: $margin;
|
||||
// 主标题
|
||||
.foods-title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
color: $text-color;
|
||||
padding: $padding * 0.5 0;
|
||||
.title-left {
|
||||
font-size: $title-size;
|
||||
color: $text-color;
|
||||
font-weight: bold;
|
||||
span {
|
||||
font-weight: normal;
|
||||
font-size: $title-size-m - 6;
|
||||
color: $text-gray-m;
|
||||
margin-left: $margin - 10;
|
||||
}
|
||||
}
|
||||
.title-right {
|
||||
font-size: $title-size-m - 6;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
color: $main-color;
|
||||
.dw {
|
||||
margin: 0 $margin * 0.6 0 $margin * 0.4;
|
||||
color: $text-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,39 +1,668 @@
|
||||
<!--
|
||||
* @Description:用于展示用户体重管理及体重记录饮食记录和饮水记录会员专享食谱和帮助小助手
|
||||
* @Author: Aimee·Zhang
|
||||
* @Date: 2022-01-05 09:01:12
|
||||
* @LastEditors: Aimee·Zhang
|
||||
* @LastEditTime: 2022-01-14 08:59:15
|
||||
-->
|
||||
<template>
|
||||
<view>
|
||||
<view class="">
|
||||
健康档案基本信息（姓名，年龄，性别）
|
||||
</view>
|
||||
<view class="">
|
||||
体重
|
||||
</view>
|
||||
<view class="">
|
||||
喝水
|
||||
</view>
|
||||
<view class="">
|
||||
心率
|
||||
</view>
|
||||
<view class="">
|
||||
血压
|
||||
</view>
|
||||
<view class="">
|
||||
血糖
|
||||
</view>
|
||||
<view class="">
|
||||
血脂
|
||||
</view>
|
||||
<view class="record">
|
||||
<!-- 登录 （建立档案和未建立档案） -->
|
||||
<template v-if="is_login && is_record">
|
||||
<!-- 搜索顶部 -->
|
||||
<view class="search">
|
||||
<!-- 头像 -->
|
||||
<view class="user">
|
||||
<u-image class="avatar" width="90rpx" height="90rpx" :src="user.avatar ? user.avatar : require('../../static/imgs/avatar.png')" :lazy-load="true" shape="circle" />
|
||||
<u-icon name="arrow-down-fill" color="#525252" size="10" class="downIcon" :bold="true" space="1" @click="$Router.push({ name: 'EvaluationIntroduce' })" />
|
||||
</view>
|
||||
<!-- 搜索框 -->
|
||||
<u-search
|
||||
placeholder="搜索食物营养和热量"
|
||||
shape="round"
|
||||
:show-action="false"
|
||||
searchIconColor="#34ce98"
|
||||
bgColor="#f8f8f8"
|
||||
:clearabled="false"
|
||||
:disabled="true"
|
||||
placeholderColor="#777"
|
||||
class="searchTem"
|
||||
@click="$Router.push({ name: 'indexSearch' })"
|
||||
/>
|
||||
<!-- 消息中心 -->
|
||||
<view class="news">
|
||||
<u-icon name="bell-fill" color="#525252" size="24" :bold="true" space="1" @click="errToast" />
|
||||
<u-badge class="dian" :isDot="true" bgColor="#e6576b"></u-badge>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 体重管理模块 -->
|
||||
<view class="weight-manage">
|
||||
<!-- 体重管理 -->
|
||||
<!-- @click="$Router.push({name:'EssentialInfo'})" -->
|
||||
<view class="manage">体重管理</view>
|
||||
<!-- 单位:公斤 -->
|
||||
<u-icon class="eye" name="eye" color="#fff" size="14" :bold="true" label="单位 : 公斤" labelPos="left" labelSize="12" labelColor="#fff" space="6" />
|
||||
<!-- 进度条 -->
|
||||
<u-line-progress :percentage="weight.ratio" :showText="false" inactiveColor="#d5f2e8" activeColor="none" height="16">
|
||||
<text class="u-percentage-slot">≈{{ weight.ratio }}%</text>
|
||||
</u-line-progress>
|
||||
<!-- 开始目标 结束目标 当前目标 -->
|
||||
<view class="number">
|
||||
<view class="--item">
|
||||
{{ weight.begin }}
|
||||
<span>初始</span>
|
||||
</view>
|
||||
<view class="--item">
|
||||
{{ weight.now }}
|
||||
<span>当前</span>
|
||||
</view>
|
||||
<view class="--item">
|
||||
{{ weight.target }}
|
||||
<span>目标</span>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 实时消息 -->
|
||||
<view class="real-news">
|
||||
<view class="real-news-left">
|
||||
<view class="news-icon">
|
||||
<u-icon class="volume-fill" name="volume-fill" color="#24ccb3" size="20" :bold="true" label="公告" labelPos="right" labelSize="14" labelColor="#24ccb3" space="6" />
|
||||
</view>
|
||||
<swiper class="news-info" :autoplay="true" :vertical="true" :circular="true">
|
||||
<swiper-item class="news-swiper-item" v-for="item in notices" :key="item">
|
||||
<view>{{ item }}</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 健康测评 -->
|
||||
<u-image
|
||||
:src="banner.cover || require('../../static/imgs/health1.png')"
|
||||
class="eval-img"
|
||||
@click="$Router.push({ name: 'EvaluationList' })"
|
||||
:lazy-load="true"
|
||||
radius="10rpx"
|
||||
mode="widthFix"
|
||||
width="100%"
|
||||
/>
|
||||
<!-- 健康记录 -->
|
||||
<view class="title">健康记录</view>
|
||||
<view class="health" @click="$Router.push({ name: 'RecordFoods' })">
|
||||
<view>
|
||||
<view class="h-title">饮食&运动健康</view>
|
||||
<view class="h-date">{{ intake_run.time || '暂无' }}</view>
|
||||
<view class="h-eat">
|
||||
{{ !intake_run.exceeds ? '还可以吃' : '多吃了' }}
|
||||
<span>{{ intake_run.amount }}</span>
|
||||
千卡
|
||||
</view>
|
||||
</view>
|
||||
<u-image :src="require('../../static/imgs/eat.png')" :lazy-load="true" radius="10rpx" mode="widthFix" width="140rpx" />
|
||||
</view>
|
||||
<view class="health-2">
|
||||
<view class="health" @click="$Router.push({ name: 'Drink' })">
|
||||
<view>
|
||||
<view class="h-title">饮水记录</view>
|
||||
<view class="h-date">{{ water.time || '暂无' }}</view>
|
||||
<view class="h-eat" v-if="water.is_complete">目标达成！</view>
|
||||
<view class="h-eat" v-else>
|
||||
还可以喝
|
||||
<span>{{ water.value || '--' }}</span>
|
||||
毫升
|
||||
</view>
|
||||
</view>
|
||||
<u-image :src="require('../../static/imgs/drink.png')" :lazy-load="true" radius="10rpx" mode="widthFix" width="110rpx" class="h-icon" />
|
||||
</view>
|
||||
<view class="health" @click="$Router.push({ name: 'Weight' })">
|
||||
<view>
|
||||
<view class="h-title">体重记录</view>
|
||||
<view class="h-date">{{ weight.time || '暂无' }}</view>
|
||||
<view class="h-eat">
|
||||
当前
|
||||
<span>{{ weight.now || '--' }}</span>
|
||||
公斤
|
||||
</view>
|
||||
</view>
|
||||
<u-image :src="require('../../static/imgs/weight.png')" :lazy-load="true" radius="10rpx" mode="widthFix" width="140rpx" class="h-icon" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- 营养管理 -->
|
||||
<view class="title">营养管理</view>
|
||||
<view class="nutrition">
|
||||
<view class="--item" @click="$Router.push({ name: 'VipFoods' })">
|
||||
<u-icon :name="require('../../static/icon/vip.png')" size="20" :bold="true" label="会员专享食谱" labelPos="right" labelSize="16" labelColor="#525252" space="10" />
|
||||
<u-icon name="arrow-right" color="#999" />
|
||||
</view>
|
||||
<view class="--item mt20" @click="$Router.push({ name: 'topicIndex' })">
|
||||
<u-icon :name="require('../../static/icon/helper.png')" size="20" :bold="true" label="营养小助手" labelPos="right" labelSize="16" labelColor="#525252" space="10" />
|
||||
<u-icon name="arrow-right" color="#999" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<!-- 未登录 -->
|
||||
<template v-if="!is_login">
|
||||
<!-- 搜索顶部 -->
|
||||
<view class="search" @click="Login">
|
||||
<!-- 头像 -->
|
||||
<view class="user">
|
||||
<u-image class="avatar" width="90rpx" height="90rpx" :src="require('../../static/imgs/avatar.png')" :lazy-load="true" shape="circle" />
|
||||
<u-icon name="arrow-down-fill" color="#525252" size="10" class="downIcon" :bold="true" space="1" @click="$Router.push({ name: 'EvaluationIntroduce' })" />
|
||||
</view>
|
||||
<!-- 搜索框 -->
|
||||
<u-search
|
||||
placeholder="搜索食物营养和热量"
|
||||
shape="round"
|
||||
:show-action="false"
|
||||
searchIconColor="#34ce98"
|
||||
bgColor="#f8f8f8"
|
||||
:clearabled="false"
|
||||
:disabled="true"
|
||||
placeholderColor="#777"
|
||||
class="searchTem"
|
||||
/>
|
||||
<!-- 消息中心 -->
|
||||
<view class="news">
|
||||
<u-icon name="bell-fill" color="#525252" size="24" :bold="true" space="1" />
|
||||
<u-badge class="dian" :isDot="true" bgColor="#e6576b"></u-badge>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 体重管理模块 -->
|
||||
<view class="weight-manage">
|
||||
<!-- 体重管理 -->
|
||||
<view class="manage" @click="Login">体重管理</view>
|
||||
<!-- 单位:公斤 -->
|
||||
|
||||
<!-- 开始目标 结束目标 当前目标 -->
|
||||
<view class="number" @click="Login">
|
||||
<view class="no-login-number">
|
||||
<view>你想减到多少斤？ZH健康来帮你</view>
|
||||
<view>完善信息</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 实时消息 -->
|
||||
<view class="real-news">
|
||||
<view class="real-news-left">
|
||||
<view class="news-icon">
|
||||
<u-icon class="volume-fill" name="volume-fill" color="#24ccb3" size="20" :bold="true" label="公告" labelPos="right" labelSize="14" labelColor="#24ccb3" space="6" />
|
||||
</view>
|
||||
<swiper class="news-info" :autoplay="true" :vertical="true" :circular="true">
|
||||
<swiper-item class="news-swiper-item" v-for="item in notices" :key="item">
|
||||
<view>{{ item }}</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 健康测评 -->
|
||||
<u-image :src="banner.cover || require('../../static/imgs/health1.png')" class="eval-img" @click="Login" :lazy-load="true" radius="10rpx" mode="widthFix" width="100%" />
|
||||
<!-- 健康记录 -->
|
||||
<view class="title">健康记录</view>
|
||||
<view class="health" @click="Login">
|
||||
<view>
|
||||
<view class="h-title">饮食&运动健康</view>
|
||||
<!-- <view class="h-date">--</view> -->
|
||||
<view class="h-eat"><span>--</span></view>
|
||||
</view>
|
||||
<u-image :src="require('../../static/imgs/eat.png')" :lazy-load="true" radius="10rpx" mode="widthFix" width="140rpx" />
|
||||
</view>
|
||||
<view class="health-2">
|
||||
<view class="health" @click="Login">
|
||||
<view>
|
||||
<view class="h-title">饮水记录</view>
|
||||
<!-- <view class="h-date">--</view> -->
|
||||
<view class="h-eat"><span>--</span></view>
|
||||
</view>
|
||||
<u-image :src="require('../../static/imgs/drink.png')" :lazy-load="true" radius="10rpx" mode="widthFix" width="110rpx" class="h-icon" />
|
||||
</view>
|
||||
<view class="health" @click="Login">
|
||||
<view>
|
||||
<view class="h-title">体重记录</view>
|
||||
<!-- <view class="h-date">--</view> -->
|
||||
<view class="h-eat"><span>--</span></view>
|
||||
</view>
|
||||
<u-image :src="require('../../static/imgs/weight.png')" :lazy-load="true" radius="10rpx" mode="widthFix" width="140rpx" class="h-icon" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- 营养管理 -->
|
||||
<view class="title">营养管理</view>
|
||||
<view class="nutrition">
|
||||
<view class="--item" @click="Login">
|
||||
<u-icon :name="require('../../static/icon/vip.png')" size="24" :bold="true" label="会员专享食谱" labelPos="right" labelSize="17" labelColor="#525252" space="10" />
|
||||
<u-icon name="arrow-right" color="#999" />
|
||||
</view>
|
||||
<view class="--item mt20" @click="Login">
|
||||
<u-icon :name="require('../../static/icon/helper.png')" size="24" :bold="true" label="营养小助手" labelPos="right" labelSize="17" labelColor="#525252" space="10" />
|
||||
<u-icon name="arrow-right" color="#999" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<!-- 登录 (未建立档案) -->
|
||||
<template v-if="is_login && !is_record">
|
||||
<!-- 搜索顶部 -->
|
||||
<view class="search" @click="toCreateInfo">
|
||||
<!-- 头像 -->
|
||||
<view class="user">
|
||||
<u-image class="avatar" width="90rpx" height="90rpx" :src="require('../../static/imgs/avatar.png')" :lazy-load="true" shape="circle" />
|
||||
<u-icon name="arrow-down-fill" color="#525252" size="10" class="downIcon" :bold="true" space="1" />
|
||||
</view>
|
||||
<!-- 搜索框 -->
|
||||
<u-search
|
||||
placeholder="搜索食物营养和热量"
|
||||
shape="round"
|
||||
:show-action="false"
|
||||
searchIconColor="#34ce98"
|
||||
bgColor="#f8f8f8"
|
||||
:clearabled="false"
|
||||
:disabled="true"
|
||||
placeholderColor="#777"
|
||||
class="searchTem"
|
||||
/>
|
||||
<!-- 消息中心 -->
|
||||
<view class="news">
|
||||
<u-icon name="bell-fill" color="#525252" size="24" :bold="true" space="1" />
|
||||
<u-badge class="dian" :isDot="true" bgColor="#e6576b"></u-badge>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 体重管理模块 -->
|
||||
<view class="weight-manage">
|
||||
<!-- 体重管理 -->
|
||||
<view class="manage" @click="toCreateInfo">体重管理</view>
|
||||
<!-- 单位:公斤 -->
|
||||
|
||||
<!-- 开始目标 结束目标 当前目标 -->
|
||||
<view class="number" @click="toCreateInfo">
|
||||
<view class="no-login-number">
|
||||
<view>你想减到多少斤？ZH健康来帮你</view>
|
||||
<view>完善信息</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 实时消息 -->
|
||||
<view class="real-news">
|
||||
<view class="real-news-left">
|
||||
<view class="news-icon">
|
||||
<u-icon class="volume-fill" name="volume-fill" color="#24ccb3" size="20" :bold="true" label="公告" labelPos="right" labelSize="14" labelColor="#24ccb3" space="6" />
|
||||
</view>
|
||||
<swiper class="news-info" :autoplay="true" :vertical="true" :circular="true">
|
||||
<swiper-item class="news-swiper-item" v-for="item in notices" :key="item">
|
||||
<view>{{ item }}</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 健康测评 -->
|
||||
<u-image
|
||||
:src="banner.cover || require('../../static/imgs/health1.png')"
|
||||
class="eval-img"
|
||||
@click="toCreateInfo"
|
||||
:lazy-load="true"
|
||||
radius="10rpx"
|
||||
mode="widthFix"
|
||||
width="100%"
|
||||
/>
|
||||
<!-- 健康记录 -->
|
||||
<view class="title">健康记录</view>
|
||||
<view class="health" @click="toCreateInfo">
|
||||
<view>
|
||||
<view class="h-title">饮食&运动健康</view>
|
||||
<!-- <view class="h-date">--</view> -->
|
||||
<view class="h-eat"><span>--</span></view>
|
||||
</view>
|
||||
<u-image :src="require('../../static/imgs/eat.png')" :lazy-load="true" radius="10rpx" mode="widthFix" width="140rpx" />
|
||||
</view>
|
||||
<view class="health-2">
|
||||
<view class="health" @click="toCreateInfo">
|
||||
<view>
|
||||
<view class="h-title">饮水记录</view>
|
||||
<!-- <view class="h-date">--</view> -->
|
||||
<view class="h-eat"><span>--</span></view>
|
||||
</view>
|
||||
<u-image :src="require('../../static/imgs/drink.png')" :lazy-load="true" radius="10rpx" mode="widthFix" width="110rpx" class="h-icon" />
|
||||
</view>
|
||||
<view class="health" @click="toCreateInfo">
|
||||
<view>
|
||||
<view class="h-title">体重记录</view>
|
||||
<!-- <view class="h-date">--</view> -->
|
||||
<view class="h-eat"><span>--</span></view>
|
||||
</view>
|
||||
<u-image :src="require('../../static/imgs/weight.png')" :lazy-load="true" radius="10rpx" mode="widthFix" width="140rpx" class="h-icon" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- 营养管理 -->
|
||||
<view class="title">营养管理</view>
|
||||
<view class="nutrition">
|
||||
<view class="--item" @click="toCreateInfo">
|
||||
<u-icon :name="require('../../static/icon/vip.png')" size="24" :bold="true" label="会员专享食谱" labelPos="right" labelSize="17" labelColor="#525252" space="10" />
|
||||
<u-icon name="arrow-right" color="#999" />
|
||||
</view>
|
||||
<view class="--item mt20" @click="toCreateInfo">
|
||||
<u-icon :name="require('../../static/icon/helper.png')" size="24" :bold="true" label="营养小助手" labelPos="right" labelSize="17" labelColor="#525252" space="10" />
|
||||
<u-icon name="arrow-right" color="#999" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
import { logs } from '@/apis/interfaces/health';
|
||||
import userAuth from '@/public/userAuth';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
weight: {}, // - array - 体重
|
||||
water: [], // - array - 饮水量
|
||||
intake_run: [], //- array - 饮食和运动
|
||||
is_login: false, // - boolean - 当前是否登录
|
||||
is_record: false, // - boolean - 当前是否完善信息 （创建档案）
|
||||
notices: [], // -- array -- 公告
|
||||
banner: {}, // -- object -- 轮播图
|
||||
user: {}
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
this.logs();
|
||||
},
|
||||
methods: {
|
||||
// 错误提示
|
||||
errToast() {
|
||||
uni.showToast({
|
||||
title: '努力开发中~',
|
||||
icon: 'none'
|
||||
});
|
||||
},
|
||||
/**
|
||||
* @description:首页信息
|
||||
* @return {
|
||||
*weight - array - 体重
|
||||
*water - array - 饮水量
|
||||
*intake_run - array - 饮食和运动
|
||||
*is_login - boolean - 当前是否登录
|
||||
*is_record - boolean - 当前是否完善信息 （创建档案）
|
||||
*notices - array - 公告
|
||||
*banner - object - 轮播图
|
||||
|
||||
}
|
||||
* @Date: 2022-01-12 11:16:22
|
||||
*/
|
||||
logs() {
|
||||
logs().then(res => {
|
||||
this.weight = res.weight;
|
||||
this.water = res.water;
|
||||
this.intake_run = res.intake_run;
|
||||
this.is_login = res.is_login;
|
||||
this.is_record = res.is_record;
|
||||
this.notices = res.notices;
|
||||
this.banner = res.banner;
|
||||
this.user = res.user;
|
||||
});
|
||||
},
|
||||
/**
|
||||
* @description:跳转登录页面
|
||||
* @params {*}
|
||||
* @Date: 2022-01-12 11:16:36
|
||||
*/
|
||||
Login() {
|
||||
const Auth = new userAuth();
|
||||
Auth.Login();
|
||||
},
|
||||
/**
|
||||
* @description:跳转创建档案页面
|
||||
* @Date: 2022-01-12 11:51:52
|
||||
*/
|
||||
// 去创建用户信息
|
||||
toCreateInfo() {
|
||||
this.$Router.push({
|
||||
name: 'EssentialInfo'
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
.record {
|
||||
padding: $padding * 2 $padding;
|
||||
// 顶部搜索
|
||||
.search {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
.user {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.downIcon {
|
||||
margin: 0 0 0 $margin * 0.4;
|
||||
}
|
||||
.avatar {
|
||||
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.searchTem {
|
||||
margin: 0 $margin * 0.6 !important;
|
||||
}
|
||||
.news {
|
||||
position: relative;
|
||||
.dian {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 体重管理
|
||||
.weight-manage {
|
||||
height: 288rpx;
|
||||
background-image: url(../../static/imgs/banner-bg.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
border-radius: $radius + 1;
|
||||
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
||||
margin-top: $margin + 6;
|
||||
padding: 0 $padding;
|
||||
.eye {
|
||||
margin-bottom: $margin * 0.6;
|
||||
}
|
||||
// 体重管理
|
||||
.manage {
|
||||
font-size: $margin + 2;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
padding: $padding * 0.3 $padding;
|
||||
position: relative;
|
||||
box-shadow: 0 0 10rpx 4rpx rgba($color: #fff, $alpha: 0.3);
|
||||
left: -$padding;
|
||||
top: 0;
|
||||
border-radius: $radius + 1 0 $radius - 6;
|
||||
}
|
||||
// 未登录体重健康
|
||||
.no-login-number {
|
||||
color: #fff;
|
||||
font-size: $title-size;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 50rpx;
|
||||
box-sizing: border-box;
|
||||
font-weight: normal;
|
||||
view:nth-child(1) {
|
||||
flex: 1;
|
||||
margin-right: $margin - 10;
|
||||
}
|
||||
view:nth-child(2) {
|
||||
background: #fff;
|
||||
color: $main-color;
|
||||
padding: 10rpx $padding * 0.9;
|
||||
border-radius: 40rpx;
|
||||
font-size: $title-size - 4;
|
||||
}
|
||||
}
|
||||
// 进度条线上样式
|
||||
.u-percentage-slot {
|
||||
padding: 4rpx 10rpx;
|
||||
background-color: #fff;
|
||||
color: #26a377;
|
||||
border-radius: 200rpx;
|
||||
font-size: $title-size - 10;
|
||||
margin-right: -5px;
|
||||
}
|
||||
// 数值
|
||||
.number {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
justify-content: space-around;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
font-size: $title-size + 18;
|
||||
font-weight: bold;
|
||||
margin-top: $margin * 0.6;
|
||||
.--item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
box-sizing: border-box;
|
||||
|
||||
span {
|
||||
font-size: $title-size - 6;
|
||||
font-weight: normal;
|
||||
margin-top: $margin * 0.3;
|
||||
}
|
||||
}
|
||||
.--item:nth-child(1),
|
||||
.--item:nth-child(3) {
|
||||
font-size: $margin + 4 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 实时消息
|
||||
.real-news {
|
||||
font-size: $title-size - 2;
|
||||
color: $text-color;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
padding: $padding 0;
|
||||
.real-news-left {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
flex: 1;
|
||||
// 消息图标
|
||||
.news-icon {
|
||||
background-color: #e9fbf8;
|
||||
display: inline-block;
|
||||
padding: 10rpx 20rpx 6rpx 20rpx;
|
||||
border-radius: $margin;
|
||||
// margin-right: $margin * 0.5;
|
||||
}
|
||||
// 轮播图
|
||||
.news-info {
|
||||
flex: 1;
|
||||
margin: 0 $margin * 0.4;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
|
||||
.news-swiper-item {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 评测图片
|
||||
.eval-img {
|
||||
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
||||
}
|
||||
// 标题
|
||||
.title {
|
||||
font-size: $title-size * 1.4;
|
||||
font-weight: bold;
|
||||
margin: $margin * 1.5 0;
|
||||
}
|
||||
// 健康记录
|
||||
.health-2 {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
margin-top: $margin;
|
||||
.h-icon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
.health:nth-child(1) {
|
||||
flex: 1 !important;
|
||||
margin-right: $margin * 0.5;
|
||||
}
|
||||
.health:nth-child(2) {
|
||||
flex: 1 !important;
|
||||
margin-left: $margin * 0.5;
|
||||
}
|
||||
}
|
||||
.health {
|
||||
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
||||
padding: $padding * 1 $padding;
|
||||
border-radius: $radius - 10;
|
||||
color: #a3a3a3;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
.h-title {
|
||||
color: $text-color;
|
||||
font-size: $title-size + 2;
|
||||
font-weight: bold;
|
||||
}
|
||||
.h-date {
|
||||
margin-top: $margin * 0.4;
|
||||
font-size: $title-size-sm + 2;
|
||||
}
|
||||
.h-eat {
|
||||
font-size: $title-size-sm;
|
||||
margin-top: $margin;
|
||||
z-index: 10;
|
||||
|
||||
span {
|
||||
font-size: $title-size * 1.2;
|
||||
color: $main-color;
|
||||
font-weight: bold;
|
||||
padding: $padding * 0.2;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 营养管理
|
||||
.nutrition {
|
||||
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
||||
padding: $padding * 1.5 $padding;
|
||||
border-radius: $radius - 10;
|
||||
font-size: $title-size-m;
|
||||
|
||||
.--item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.mt20 {
|
||||
margin-top: 60rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
331
pages/record/weight.vue
Normal file
331
pages/record/weight.vue
Normal file
@@ -0,0 +1,331 @@
|
||||
<!--
|
||||
* @Description:记录体重页面
|
||||
* @Author: Aimee·Zhang
|
||||
* @Date: 2022-01-07 12:32:50
|
||||
* @LastEditors: Aimee·Zhang
|
||||
* @LastEditTime: 2022-01-14 09:37:42
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view class="weight">
|
||||
<!-- 体重表 -->
|
||||
<view class="progress-top">
|
||||
<view class="unit">
|
||||
<span
|
||||
:class="isJin === 2?'active':''"
|
||||
@click="isJin = 1"
|
||||
>斤</span>
|
||||
<span
|
||||
:class="isJin === 1?'active':''"
|
||||
@click="isJin = 1"
|
||||
>公斤</span>
|
||||
</view>
|
||||
<view class="progress">
|
||||
<view>{{weightInfo.text}}</view>
|
||||
<u-count-to
|
||||
class="uCountTo"
|
||||
:startVal="0"
|
||||
:endVal="weightInfo.change"
|
||||
:decimals="1"
|
||||
color="#333"
|
||||
fontSize="36"
|
||||
:bold="true"
|
||||
/>
|
||||
<view>保持 / 塑性</view>
|
||||
</view>
|
||||
<view
|
||||
class="add-weight"
|
||||
@click="addWeightShow = true"
|
||||
>记录体重</view>
|
||||
<view class="des-title">以最后一次记录为主且每日只能更新一次</view>
|
||||
</view>
|
||||
<!-- 体重列表 -->
|
||||
<view
|
||||
class="weight-list"
|
||||
v-if="lists.length>0"
|
||||
>
|
||||
<view
|
||||
class="list-item"
|
||||
v-for="item in lists"
|
||||
:key="item.wight_id"
|
||||
>
|
||||
<view class="list-left">
|
||||
<view class="list-title">
|
||||
<span>{{item.weight}}</span>公斤
|
||||
</view>
|
||||
测量结果
|
||||
</view>
|
||||
<view class="list-right">
|
||||
<span>开始保持 / 塑性</span>
|
||||
{{item.created_at}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="no-lists"
|
||||
v-else
|
||||
>还没有体重信息，记录下呗~</view>
|
||||
<!-- 记录体重弹窗 -->
|
||||
<u-popup
|
||||
:show="addWeightShow"
|
||||
:round="10"
|
||||
@close="addWeightShow = false"
|
||||
:closeable="true"
|
||||
>
|
||||
<view class="addWeightContent">
|
||||
<view class="date">今天</view>
|
||||
<view class='count'><span>{{weight}}</span>公斤</view>
|
||||
<vue-scale
|
||||
:min="10"
|
||||
:max="100"
|
||||
:int="false"
|
||||
:single="10"
|
||||
:h="80"
|
||||
:styles="styles"
|
||||
@scroll="scroll"
|
||||
:scrollLeft="Number(weight)"
|
||||
/>
|
||||
<view
|
||||
class="addBtn"
|
||||
@click="addWeight"
|
||||
>确认添加</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import vueScale from "@/components/vueScale";
|
||||
import { weights, addWeight } from "@/apis/interfaces/weight.js";
|
||||
import moment from "moment";
|
||||
import l from "../../uni_modules/uni-config-center/uniCloud/cloudfunctions/common/uni-config-center";
|
||||
export default {
|
||||
components: {
|
||||
vueScale,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isJin: 1, // 是公斤 2 是斤 所有用到斤的直接乘以这个字段即可
|
||||
addWeightShow: false, // 是否添加体重展示
|
||||
styles: {
|
||||
line: "#dbdbdb",
|
||||
bginner: "#fbfbfb",
|
||||
bgoutside: "#ffffff",
|
||||
font: "#404040",
|
||||
fontColor: "#404040",
|
||||
fontSize: 16,
|
||||
},
|
||||
weight: "",
|
||||
date: "",
|
||||
weightInfo: {},
|
||||
lists: [],
|
||||
has_more: true,
|
||||
page: 1,
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
this.getWeights();
|
||||
this.date = moment(new Date()).format("YYYY-MM-DD");
|
||||
},
|
||||
onReachBottom() {
|
||||
if (!this.has_more) {
|
||||
uni.showToast({
|
||||
title: "没有更多啦~",
|
||||
icon: "none",
|
||||
});
|
||||
} else {
|
||||
this.page = this.page + 1;
|
||||
this.getWeights();
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
//获取体重首页接口
|
||||
getWeights() {
|
||||
weights(this.page).then((res) => {
|
||||
console.log(res);
|
||||
this.lists = this.lists.concat(res.lists.data);
|
||||
this.has_more = res.lists.page.has_more;
|
||||
this.weightInfo = res.weight;
|
||||
this.weight = res.weight.now;
|
||||
});
|
||||
},
|
||||
addWeight() {
|
||||
let data = {
|
||||
weight: this.weight,
|
||||
date: this.date,
|
||||
};
|
||||
addWeight(data).then((res) => {
|
||||
this.addWeightShow = false;
|
||||
this.page = 1;
|
||||
this.has_more = true;
|
||||
this.lists = [];
|
||||
this.getWeights();
|
||||
});
|
||||
},
|
||||
// 滚动标尺触发事件
|
||||
scroll(msg) {
|
||||
this.weight = msg;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
//体重top
|
||||
.progress-top {
|
||||
padding: $padding * 2 $padding;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
border-bottom: solid 1rpx #f7f7f7;
|
||||
// 单位
|
||||
.unit {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 100rpx;
|
||||
font-size: $title-size-m;
|
||||
color: $border-color;
|
||||
padding: $padding * 0.5 0;
|
||||
text-align: center;
|
||||
border: solid 1rpx $border-color;
|
||||
border-radius: 50rpx 0 0 50rpx;
|
||||
}
|
||||
span:nth-child(1) {
|
||||
border-radius: 50rpx 0 0 50rpx;
|
||||
border-style: solid;
|
||||
border-color: $border-color $main-color $border-color $border-color;
|
||||
}
|
||||
span:nth-child(2) {
|
||||
border-radius: 0 50rpx 50rpx 0;
|
||||
border-style: solid;
|
||||
border-color: $border-color $border-color $border-color $main-color;
|
||||
}
|
||||
span.active {
|
||||
background-color: $main-color;
|
||||
color: #fff;
|
||||
border: solid 1rpx $main-color;
|
||||
}
|
||||
}
|
||||
|
||||
// 展示圈
|
||||
.progress {
|
||||
width: 360rpx;
|
||||
height: 360rpx;
|
||||
border: solid $padding * 0.7 #f7f7f7;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
color: $text-gray-m;
|
||||
font-size: $title-size-m;
|
||||
.uCountTo {
|
||||
padding: $padding * 0.5;
|
||||
}
|
||||
}
|
||||
// 记录按钮
|
||||
.add-weight {
|
||||
font-size: $title-size + 2;
|
||||
border-radius: $radius * 3;
|
||||
border: solid 2rpx $main-color;
|
||||
color: $main-color;
|
||||
padding: $padding * 0.6 $padding * 2.8;
|
||||
margin-top: $margin * 2;
|
||||
font-weight: bold;
|
||||
}
|
||||
.des-title {
|
||||
padding: $padding;
|
||||
color: $text-gray-m;
|
||||
font-size: $title-size-m - 4;
|
||||
}
|
||||
}
|
||||
// 列表
|
||||
.weight-list {
|
||||
font-size: $title-size-m;
|
||||
color: $text-gray-m;
|
||||
padding: $padding;
|
||||
|
||||
.list-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
justify-content: space-between;
|
||||
border-bottom: solid 1rpx #f9f9f9;
|
||||
padding: $padding 0;
|
||||
.list-title {
|
||||
color: $text-color;
|
||||
font-size: $title-size-m;
|
||||
margin-bottom: $margin * 0.4;
|
||||
span {
|
||||
font-size: $title-size + 14;
|
||||
font-weight: 500;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
.list-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
margin-top: $margin * 0.4;
|
||||
span {
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.no-lists {
|
||||
padding: $padding;
|
||||
color: $text-gray-m;
|
||||
font-size: $title-size-m;
|
||||
}
|
||||
|
||||
// 弹窗
|
||||
.addWeightContent {
|
||||
width: 100%;
|
||||
height: 54vh;
|
||||
padding: $padding * 4 0;
|
||||
box-sizing: border-box;
|
||||
color: $text-gray;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
.date {
|
||||
font-size: $title-size + 9;
|
||||
text-align: center;
|
||||
}
|
||||
.count {
|
||||
color: $main-color;
|
||||
text-align: center;
|
||||
margin-top: $margin * 2;
|
||||
margin-bottom: $margin * 0.1;
|
||||
font-size: $title-size + 2;
|
||||
span {
|
||||
font-weight: bold;
|
||||
font-size: $title-size * 2.2;
|
||||
margin-right: $margin * 0.3;
|
||||
}
|
||||
}
|
||||
.addBtn {
|
||||
background-color: $main-color;
|
||||
color: #fff;
|
||||
margin-top: $margin * 2;
|
||||
font-size: $title-size * 1.2;
|
||||
padding: $padding * 0.7 $padding * 4;
|
||||
border-radius: $radius * 3;
|
||||
font-size: $title-size + 6;
|
||||
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
164
pages/vip/foods.vue
Normal file
164
pages/vip/foods.vue
Normal file
@@ -0,0 +1,164 @@
|
||||
<!--
|
||||
* @Description:
|
||||
* @Author: Aimee·Zhang
|
||||
* @Date: 2022-01-07 15:59:03
|
||||
* @LastEditors: Aimee·Zhang
|
||||
* @LastEditTime: 2022-01-14 09:32:24
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="VipFoods">
|
||||
<!-- 描述 -->
|
||||
<view class="des">
|
||||
<view>轻松健身食谱，</view>
|
||||
<view>让改变放生</view>
|
||||
</view>
|
||||
<!-- 列表 -->
|
||||
<view
|
||||
class="lists-content"
|
||||
v-for="(it,index) in lists"
|
||||
:key="it.position_id"
|
||||
>
|
||||
<view class="lists-title">
|
||||
<view>
|
||||
<span>{{it.name}}</span>
|
||||
{{it.description}}
|
||||
</view>
|
||||
<u-image
|
||||
class="p-img"
|
||||
width="260rpx"
|
||||
radius="20rpx"
|
||||
mode="widthFix"
|
||||
:src="index === 0 ? require('../../static/imgs/5.png') : require('../../static/imgs/6.png')"
|
||||
:lazy-load="true"
|
||||
/>
|
||||
</view>
|
||||
<view
|
||||
class="--item"
|
||||
v-for="item in it.recipes"
|
||||
:key="item.recipe_id"
|
||||
@click="$Router.push({ name: 'menuDetails', params: {id: item.recipe_id, title: item.name }})"
|
||||
>
|
||||
<u-image
|
||||
class="content-img"
|
||||
width="200rpx"
|
||||
height="160rpx"
|
||||
radius="20rpx"
|
||||
:src="item.cover"
|
||||
:lazy-load="true"
|
||||
/>
|
||||
<view class="--title">
|
||||
<view>{{item.name}}</view>
|
||||
<view>{{item.sub_title}}</view>
|
||||
<view>给你一天满满正能量</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { positions } from "@/apis/interfaces/foods.js";
|
||||
export default {
|
||||
data() {
|
||||
return { lists: [] };
|
||||
},
|
||||
onShow() {
|
||||
positions().then((res) => {
|
||||
this.lists = res;
|
||||
});
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.VipFoods {
|
||||
padding: $padding;
|
||||
// 描述
|
||||
.des {
|
||||
font-size: $title-size * 1.4;
|
||||
font-weight: bold;
|
||||
color: $main-color;
|
||||
line-height: 1.3;
|
||||
}
|
||||
//列表
|
||||
.lists-content {
|
||||
background: $main-color;
|
||||
padding: $padding;
|
||||
margin: $margin * 2 0;
|
||||
border-radius: $radius;
|
||||
position: relative;
|
||||
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
||||
// 列表标题
|
||||
.lists-title {
|
||||
font-size: $title-size;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
margin-bottom: $margin;
|
||||
view {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
span {
|
||||
font-size: $title-size * 1.6;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
}
|
||||
.p-img {
|
||||
position: absolute;
|
||||
right: -$margin;
|
||||
top: -$margin * 2;
|
||||
}
|
||||
}
|
||||
// 列表
|
||||
.--item {
|
||||
background: rgba($color: #fff, $alpha: 1);
|
||||
padding: $padding;
|
||||
border-radius: $radius;
|
||||
position: relative;
|
||||
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
margin-top: $margin * 0.6;
|
||||
.--title {
|
||||
width: 50vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
color: $main-color;
|
||||
view {
|
||||
text-align: right;
|
||||
font-size: $title-size-m + 1;
|
||||
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
}
|
||||
view:nth-child(1) {
|
||||
font-size: $title-size * 1.5;
|
||||
font-weight: bold;
|
||||
}
|
||||
view:nth-child(2) {
|
||||
margin-top: $margin * 0.8;
|
||||
}
|
||||
view:nth-child(2) {
|
||||
margin-top: $margin * 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
378
pages/vip/nutritionHelper.vue
Normal file
378
pages/vip/nutritionHelper.vue
Normal file
@@ -0,0 +1,378 @@
|
||||
<!--
|
||||
* @Description:
|
||||
* @Author: Aimee·Zhang
|
||||
* @Date: 2022-01-07 16:02:01
|
||||
* @LastEditors: Aimee·Zhang
|
||||
* @LastEditTime: 2022-01-14 08:55:56
|
||||
-->
|
||||
|
||||
<template>
|
||||
<view class="NutritionHelper">
|
||||
<!-- 轮播图 -->
|
||||
<view class="swiper">
|
||||
<view class="swiper-box">
|
||||
<swiper
|
||||
autoplay
|
||||
@change="swiperCount = $event.detail.current"
|
||||
>
|
||||
<swiper-item>
|
||||
<image
|
||||
src="https://yanxuan.nosdn.127.net/static-union/163971170765382b.jpg"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<image
|
||||
src="https://yanxuan.nosdn.127.net/948240ec17accbb8bb2184bde9b62e8f.jpg"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="swiper-pages">
|
||||
<text
|
||||
class="pages-item"
|
||||
:class="{ show: swiperCount === 0 }"
|
||||
></text>
|
||||
<text
|
||||
class="pages-item"
|
||||
:class="{ show: swiperCount === 1 }"
|
||||
></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 导航菜单 -->
|
||||
<scroll-view
|
||||
class="scroll-view_H"
|
||||
scroll-x="true"
|
||||
>
|
||||
<view
|
||||
v-for="(item, index) in 5"
|
||||
:key="index"
|
||||
id="demo1"
|
||||
class="scroll-view-item_H"
|
||||
>
|
||||
<u-image
|
||||
width="120rpx"
|
||||
height="120rpx"
|
||||
v-if="item === 1"
|
||||
:src="require('../../static/imgs/ic_loca.png')"
|
||||
:lazy-load="true"
|
||||
class="u-img"
|
||||
radius="4"
|
||||
/>
|
||||
<u-image
|
||||
width="120rpx"
|
||||
height="120rpx"
|
||||
v-if="item === 2"
|
||||
:src="require('../../static/imgs/ic_Medicine.png')"
|
||||
:lazy-load="true"
|
||||
class="u-img"
|
||||
radius="4"
|
||||
/>
|
||||
<u-image
|
||||
width="120rpx"
|
||||
height="120rpx"
|
||||
v-if="item === 3"
|
||||
:src="require('../../static/imgs/ic_report.png')"
|
||||
:lazy-load="true"
|
||||
class="u-img"
|
||||
radius="4"
|
||||
/>
|
||||
<u-image
|
||||
width="120rpx"
|
||||
height="120rpx"
|
||||
v-if="item === 4"
|
||||
:src="require('../../static/imgs/ic_SignIn.png')"
|
||||
:lazy-load="true"
|
||||
class="u-img"
|
||||
radius="4"
|
||||
/>
|
||||
<u-image
|
||||
width="120rpx"
|
||||
height="120rpx"
|
||||
v-if="item === 5"
|
||||
:src="require('../../static/imgs/ic_SignIn.png')"
|
||||
:lazy-load="true"
|
||||
class="u-img"
|
||||
radius="4"
|
||||
/>
|
||||
<view class="title">正确洗脸</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<!-- 精品推荐 -->
|
||||
<view>
|
||||
<view class="page-title">
|
||||
精品推荐
|
||||
<u-icon
|
||||
name="arrow-right"
|
||||
color="#999"
|
||||
label="更多"
|
||||
labelPos="left"
|
||||
labelColor="#999"
|
||||
/>
|
||||
</view>
|
||||
<!-- 消息列表 -->
|
||||
<view
|
||||
class="helper-list"
|
||||
v-for="item in 2"
|
||||
:key="item"
|
||||
>
|
||||
<view class="help-logo">
|
||||
<view class="logo">ZH</view>
|
||||
<view class="info">
|
||||
<span class="title">ZH大健康</span>
|
||||
<span class="des">ZH健康官方账号</span>
|
||||
</view>
|
||||
</view>
|
||||
<view class="help-content">
|
||||
<view class="--content">
|
||||
<view class="title ellipsis">不要随意按摩,小心加重你的劲椎病小心加重你的劲椎病小心加重你的劲椎病</view>
|
||||
<view class="read-time">
|
||||
<view class="read">阅读4k+</view>
|
||||
<view class="zan">4k+ 点赞</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-image
|
||||
width="240rpx"
|
||||
height="180rpx"
|
||||
:src="require('../../static/imgs/newsss.png')"
|
||||
:lazy-load="true"
|
||||
class="u-img"
|
||||
radius="10"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 更多推荐 -->
|
||||
<view>
|
||||
<view class="page-title">
|
||||
更多推荐
|
||||
<u-icon
|
||||
name="arrow-right"
|
||||
color="#999"
|
||||
label="更多"
|
||||
labelPos="left"
|
||||
labelColor="#999"
|
||||
/>
|
||||
</view>
|
||||
<!-- 消息列表 -->
|
||||
<view
|
||||
class="helper-list"
|
||||
v-for="item in 2"
|
||||
:key="item"
|
||||
>
|
||||
<view class="help-logo">
|
||||
<view class="logo">ZH</view>
|
||||
<view class="info">
|
||||
<span class="title">ZH大健康</span>
|
||||
<span class="des">ZH健康官方账号</span>
|
||||
</view>
|
||||
</view>
|
||||
<view class="help-content">
|
||||
<view class="--content pt10">
|
||||
<u-image
|
||||
width="100%"
|
||||
:src="require('../../static/imgs/newsss.png')"
|
||||
:lazy-load="true"
|
||||
mode="widthFix"
|
||||
class="u-img"
|
||||
radius="2"
|
||||
/>
|
||||
<view class="title2">为什么工作效率那么低呢？</view>
|
||||
<view class="des ellipsis">
|
||||
因为不爱工作呗，有自己的事情玩了玩晒因为不爱工作呗，有自己的事情玩了玩晒因为不爱工作呗，有自己的事情玩了玩晒因为不爱工作呗，有自己的事情玩了玩晒
|
||||
</view>
|
||||
<view class="read-time">
|
||||
<view class="read">阅读4k+</view>
|
||||
<view class="zan">4k+ 点赞</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
swiperCount: 0,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.NutritionHelper {
|
||||
// swiper
|
||||
.swiper {
|
||||
background: linear-gradient(#fff, #f3f6fb);
|
||||
padding: $padding;
|
||||
.swiper-box {
|
||||
position: relative;
|
||||
padding-top: 40%;
|
||||
swiper,
|
||||
image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
image {
|
||||
border-radius: $radius;
|
||||
}
|
||||
}
|
||||
.swiper-pages {
|
||||
position: absolute;
|
||||
z-index: 9;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: $margin - 10;
|
||||
height: 7rpx;
|
||||
text-align: center;
|
||||
.pages-item {
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
height: 7rpx;
|
||||
width: 25rpx;
|
||||
margin: 0 5rpx;
|
||||
background: rgba($color: #fff, $alpha: 0.5);
|
||||
&.show {
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 横向滚动
|
||||
.scroll-view_H {
|
||||
white-space: nowrap;
|
||||
border-radius: $radius;
|
||||
.scroll-view-item_H {
|
||||
display: inline-block;
|
||||
width: 130rpx;
|
||||
margin: $margin * 1.6 $margin * 0.5 $margin * 0.3 $margin * 0.5;
|
||||
// box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
||||
.title {
|
||||
text-align: center;
|
||||
padding: $padding * 0.6 $padding * 0.3;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
color: $text-gray;
|
||||
font-size: $title-size-m;
|
||||
width: 160rpx;
|
||||
}
|
||||
.u-img {
|
||||
margin-left: $margin;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 标题
|
||||
.page-title {
|
||||
font-size: $title-size + 8;
|
||||
font-weight: bold;
|
||||
padding: $padding;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// 消息列表
|
||||
.helper-list {
|
||||
padding: $padding;
|
||||
border-bottom: solid 1rpx #f9f9f9;
|
||||
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
||||
margin: $margin;
|
||||
border-radius: $radius;
|
||||
// 企业logo
|
||||
.help-logo {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
.logo {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
background: $main-color;
|
||||
border-radius: 50%;
|
||||
color: $text-color;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
font-size: $title-size + 8;
|
||||
font-weight: bold;
|
||||
}
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
margin-left: $margin * 0.4;
|
||||
.title {
|
||||
font-size: $title-size-m + 4;
|
||||
color: $text-color;
|
||||
}
|
||||
.des {
|
||||
font-size: $title-size-m - 2;
|
||||
color: $text-gray-m;
|
||||
margin-top: $title-size * 0.2;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 标题部分
|
||||
.help-content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
.pt10 {
|
||||
padding-top: $padding;
|
||||
}
|
||||
.--content {
|
||||
font-size: $title-size;
|
||||
margin-right: $margin * 0.4;
|
||||
.title {
|
||||
font-size: $title-size;
|
||||
font-weight: bold;
|
||||
margin-top: $margin;
|
||||
}
|
||||
.title2 {
|
||||
font-size: $title-size-m;
|
||||
margin-top: $margin;
|
||||
}
|
||||
.des {
|
||||
color: $text-gray-m;
|
||||
font-size: $title-size-m;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
.read-time {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
font-size: $title-size-m;
|
||||
padding: $padding * 1.4 0 0 0;
|
||||
.read {
|
||||
background: #fdf7ec;
|
||||
color: #ffcb79;
|
||||
padding: $padding * 0.2 $padding * 0.8;
|
||||
border-radius: $radius * 0.4;
|
||||
}
|
||||
.zan {
|
||||
margin-left: $margin;
|
||||
color: $text-gray-m;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user