TmOct5/ZhHealth
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

优化

Browse Source
This commit is contained in:
张冬雪
2022-01-14 14:44:06 +08:00
parent 6c39e3484e
commit b9beabec76
3 changed files with 262 additions and 335 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
pages/evaluation/introduce.vue
View File

@@ -7,7 +7,8 @@
--> -->
<template> <template>
<view class="introduce"> <view class="introduce">
<view class="intro-history" @click="info.is_answer?'toResult':''">{{info.is_answer?'测评记录':'暂未测评'}}</view> <view class="intro-history" v-if="info.is_answer" @click="toResult">测评记录</view>
<view class="intro-history" v-else @click="toResult">暂未测评</view>
<view class="intro-content"> <view class="intro-content">
<view class="intro-title">{{ info.title }}</view> <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"> <u-read-more class="intro-des" :toggle="true" showHeight="140" ref="uReadMore" :shadowStyle="shadowStyle" color="#34ce98" textIndent="0">
@@ -50,7 +51,8 @@ export default {
url: `/pages/evaluation/index?id=${this.$Route.query.id}` url: `/pages/evaluation/index?id=${this.$Route.query.id}`
}); });
}, },
toResult(item) { toResult() {
console.log('点击了测试')
uni.navigateTo({ uni.navigateTo({
url: `/pages/evaluation/result?id=${this.$Route.query.id}` url: `/pages/evaluation/result?id=${this.$Route.query.id}`
}); });

520
pages/evaluation/result.vue
View File

@@ -6,315 +6,235 @@
* @LastEditTime: 2022-01-13 17:30:56 * @LastEditTime: 2022-01-13 17:30:56
--> -->
<template> <template>
<view <view class="answer" v-if="loaded">
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/user/cover.png')" :lazy-load="true" shape="circle" />
<view class="user"> <span class="name">{{ info.user.nickname }}</span>
<view class="left"> </view>
<u-image <view class="right">
width="80rpx" <u-icon name="arrow-right" color="#34ce98" size="14" :bold="true" label="重新评测" labelPos="left" labelSize="14" labelColor="#34ce98" space="1" @click="reEva" />
height="80rpx" </view>
:src="info.user.avatar?info.user.avatar:require('../../static/imgs/avatar.png')" </view>
:lazy-load="true" <!-- 皮肤年龄 -->
shape="circle" <view class="answer-item">
/> <!-- 标题 -->
<span class="name">{{info.user.nickname}}</span> <view class="title-content">
</view> <view class="title">{{ info.title }}{{ info.explain.title }}</view>
<view class="right"> <u-icon name="share-square" color="#333" size="30" />
<u-icon </view>
name="arrow-right" <!-- 雷达图 -->
color="#34ce98" <view class="charts-box">
size="14" <view class="charts-box"><qiun-data-charts type="radar" :chartData="chartData" :loadingType="4" background="none" :tooltipShow="false" :tapLegend="false" /></view>
:bold="true" </view>
label="重新评测" <!-- 描述 -->
labelPos="left" <view class="des">
labelSize="14" <u-read-more class="intro-des" :toggle="true" showHeight="140" ref="uReadMore" :shadowStyle="shadowStyle" color="#34ce98" textIndent="0">
labelColor="#34ce98" <rich-text :nodes="info.explain.content"></rich-text>
space="1" </u-read-more>
@click="reEva" </view>
/> </view>
</view> <!-- 建议改进 -->
</view> <view class="answer-item">
<!-- 皮肤年龄 --> <!-- 标题 -->
<view class="answer-item"> <view class="title-content"><view class="title">建议从一下几个方面改进</view></view>
<!-- 标题 --> <block v-for="(itme, index) in 3" :key="index">
<view class="title-content"> <view class="title2">
<view class="title">{{info.title}}{{info.explain.title}}</view> <u-image width="34rpx" height="34rpx" :src="require('../../static/icon/health.png')" :lazy-load="true" shape="circle" />
<u-icon <span>严厉节食导致营养不良，内分泌紊乱</span>
name="share-square" </view>
color="#333" <!-- 描述 -->
size="30" <view class="des">饮食营养及生活方式对维持面部年轻态影响较大，建议注意食材选择，逐步清淡口味；规律作息，逐个改善不良生活习惯；帮助改善当前皮肤状态。</view>
/> </block>
</view> </view>
<!-- 雷达图 --> <!-- 营养建议 -->
<view class="charts-box"> <view class="answer-item">
<view class="charts-box"> <!-- 标题 -->
<qiun-data-charts <view class="title-content"><view class="title">营养建议</view></view>
type="radar" <block v-for="(item, index) in 3" :key="index">
:chartData="chartData" <view class="title2">
:loadingType="4" <span>{{ item }}. 低Gi</span>
background="none" </view>
:tooltipShow="false" <!-- 描述 -->
:tapLegend="false" <view class="des">饮食营养及生活方式对维持面部年轻态影响较大，建议注意食材选择，逐步清淡口味；规律作息，逐个改善不良生活习惯；帮助改善当前皮肤状态。</view>
/> </block>
</view> </view>
</view> <!-- 更多 -->
<!-- 描述 --> <view class="answer-item">
<view class="des"> <!-- 标题 -->
<u-read-more <view class="title-content">
class="intro-des" <view class="title">更多护肤知识</view>
:toggle="true" <u-icon name="arrow-right" color="#333" size="20" />
showHeight="140" </view>
ref="uReadMore" <!-- 横向滚动推荐 -->
:shadowStyle="shadowStyle" <scroll-view class="scroll-view_H" scroll-x="true">
color='#34ce98' <view v-for="(item, index) in 6" :key="index" id="demo1" class="scroll-view-item_H">
textIndent="0" <u-image width="180rpx" height="180rpx" :src="require('../../static/imgs/indro.png')" :lazy-load="true" radius="4" />
> <view class="title">{{ item }}正确洗脸</view>
<rich-text :nodes="info.explain.content"></rich-text> </view>
</u-read-more> </scroll-view>
</view> </view>
</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> </template>
<script> <script>
import { evaluationsAnswersInfo } from "@/apis/interfaces/evaluation.js"; import { evaluationsAnswersInfo } from '@/apis/interfaces/evaluation.js';
export default { export default {
data() { data() {
return { return {
chartData: {}, chartData: {},
info: {}, info: {},
shadowStyle: { shadowStyle: {
backgroundImage: "none", backgroundImage: 'none',
paddingTop: "0", paddingTop: '0',
marginTop: "20rpx", marginTop: '20rpx'
}, },
loaded: false, loaded: false
}; };
}, },
onShow() { onShow() {
this.getInfo(); this.getInfo();
}, },
methods: { methods: {
getInfo() { getInfo() {
evaluationsAnswersInfo(this.$Route.query.id).then((res) => { evaluationsAnswersInfo(this.$Route.query.id).then(res => {
this.info = res; this.info = res;
this.chartData = { this.chartData = {
categories: res.veidoo.categories, categories: res.veidoo.categories,
series: [ series: [
{ {
data: res.veidoo.data, data: res.veidoo.data
}, }
], ]
}; };
this.loaded = true; this.loaded = true;
}); });
}, },
reEva() { reEva() {
uni.navigateTo({ uni.navigateTo({
url: `/pages/evaluation/index?id=${this.$Route.query.id}`, url: `/pages/evaluation/index?id=${this.$Route.query.id}`
}); });
}, }
}, }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.answer { .answer {
min-height: 100vh; min-height: 100vh;
padding-bottom: $padding; padding-bottom: $padding;
// 用户头像 // 用户头像
.user { .user {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
box-sizing: border-box; box-sizing: border-box;
padding: $padding; padding: $padding;
border-bottom: solid 1rpx #f7f7f7; border-bottom: solid 1rpx #f7f7f7;
margin-bottom: $margin * 1.5; margin-bottom: $margin * 1.5;
.left { .left {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
box-sizing: border-box; box-sizing: border-box;
font-size: $title-size-m; font-size: $title-size-m;
.name { .name {
padding-left: $padding; padding-left: $padding;
width: 320rpx; width: 320rpx;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
color: $text-color; color: $text-color;
font-weight: bold; font-weight: bold;
} }
} }
.right { .right {
border: solid 1rpx rgba($color: $main-color, $alpha: 0.6); border: solid 1rpx rgba($color: $main-color, $alpha: 0.6);
padding: 10rpx $padding * 0.4 10rpx $padding * 0.7; padding: 10rpx $padding * 0.4 10rpx $padding * 0.7;
border-radius: $padding; border-radius: $padding;
} }
} }
// 展示列表 // 展示列表
.answer-item { .answer-item {
background: rgba($color: #fff, $alpha: 1); background: rgba($color: #fff, $alpha: 1);
padding: $padding * 1.3 $padding; padding: $padding * 1.3 $padding;
margin: $margin; margin: $margin;
border-radius: $radius; border-radius: $radius;
position: relative; position: relative;
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1); box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
//标题 //标题
.title-content { .title-content {
font-size: $title-size + 6; font-size: $title-size + 6;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
box-sizing: border-box; box-sizing: border-box;
.title { .title {
color: $text-color; color: $text-color;
font-weight: bold; font-weight: bold;
} }
} }
// 描述 // 描述
.des { .des {
font-size: $title-size - 4; font-size: $title-size - 4;
color: $text-color; color: $text-color;
line-height: $title-size * 2 - 18; line-height: $title-size * 2 - 18;
// 介绍 // 介绍
.intro-des { .intro-des {
line-height: $title-size * 1.8; line-height: $title-size * 1.8;
color: $text-color; color: $text-color;
position: relative; position: relative;
top: -10rpx; top: -10rpx;
font-size: $title-size-m !important; font-size: $title-size-m !important;
padding-bottom: 20rpx; padding-bottom: 20rpx;
} }
} }
// 雷达图 // 雷达图
.charts-box { .charts-box {
width: 100%; width: 100%;
height: 400rpx; height: 400rpx;
margin: $margin 0; margin: $margin 0;
} }
//二级标题 //二级标题
.title2 { .title2 {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
box-sizing: border-box; box-sizing: border-box;
margin-top: 40rpx; margin-top: 40rpx;
margin-bottom: 20rpx; margin-bottom: 20rpx;
span { span {
font-size: $title-size-m + 2; font-size: $title-size-m + 2;
font-weight: bold; font-weight: bold;
margin-left: $margin * 0.3; margin-left: $margin * 0.3;
} }
} }
// 横向滚动 // 横向滚动
.scroll-view_H { .scroll-view_H {
white-space: nowrap; white-space: nowrap;
border-radius: $radius; border-radius: $radius;
.scroll-view-item_H { .scroll-view-item_H {
display: inline-block; display: inline-block;
width: 180rpx; width: 180rpx;
margin: $margin * 1.6 $margin * 0.5 $margin * 0.3 $margin * 0.5; margin: $margin * 1.6 $margin * 0.5 $margin * 0.3 $margin * 0.5;
box-shadow: 0 0 10rpx 4rpx box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
rgba($color: $main-color, $alpha: 0.1); .title {
.title { text-align: center;
text-align: center; padding: $padding * 0.6 $padding * 0.3;
padding: $padding * 0.6 $padding * 0.3; overflow: hidden;
overflow: hidden; white-space: nowrap;
white-space: nowrap; text-overflow: ellipsis;
text-overflow: ellipsis; color: $text-gray;
color: $text-gray; font-size: $title-size - 4;
font-size: $title-size - 4; }
} }
} }
} }
}
} }
</style> </style>

71
pages/record/index.vue
View File

@@ -12,8 +12,8 @@
<!-- 搜索顶部 --> <!-- 搜索顶部 -->
<view class="search"> <view class="search">
<!-- 头像 --> <!-- 头像 -->
<view class="user"> <view class="user" @click="$Router.back()">
<u-icon name="arrow-left" color="#525252" size="22" class="downIcon" :bold="true" @click='$Router.back()'/> <u-icon name="arrow-left" color="#525252" size="22" class="downIcon" :bold="true" />
<!-- <u-image class="avatar" width="90rpx" height="90rpx" :src="user.avatar ? user.avatar : require('../../static/imgs/avatar.png')" :lazy-load="true" shape="circle" /> <!-- <u-image class="avatar" width="90rpx" height="90rpx" :src="user.avatar ? user.avatar : require('../../static/imgs/avatar.png')" :lazy-load="true" shape="circle" />
<view class="nickname">{{user.nickname}}</view> --> <view class="nickname">{{user.nickname}}</view> -->
<!-- <u-icon name="arrow-down-fill" color="#525252" size="10" class="downIcon" :bold="true" space="1"/> --> <!-- <u-icon name="arrow-down-fill" color="#525252" size="10" class="downIcon" :bold="true" space="1"/> -->
@@ -144,27 +144,29 @@
</view> </view>
</template> </template>
<!-- 未登录 --> <!-- 未登录 -->
<template v-else-if="!is_login"> <template v-if="!is_login">
<!-- 搜索顶部 --> <!-- 搜索顶部 -->
<view class="search" @click="Login"> <view class="search" >
<!-- 头像 --> <!-- 头像 -->
<view class="user"> <view class="user" @click="$Router.back()">
<!-- <u-image class="avatar" width="90rpx" height="90rpx" :src="require('../../static/imgs/avatar.png')" :lazy-load="true" shape="circle" /> <!-- <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" /> --> <u-icon name="arrow-down-fill" color="#525252" size="10" class="downIcon" :bold="true" space="1" /> -->
<u-icon name="arrow-left" color="#525252" size="22" class="downIcon" :bold="true" @click='$Router.back()'/> <u-icon name="arrow-left" color="#525252" size="22" class="downIcon" :bold="true"/>
</view> </view>
<!-- 搜索框 --> <!-- 搜索框 -->
<u-search <view style="flex:1;" @click="Login">
placeholder="搜索食物营养和热量" <u-search
shape="round" placeholder="搜索食物营养和热量"
:show-action="false" shape="round"
searchIconColor="#34ce98" :show-action="false"
bgColor="#f8f8f8" searchIconColor="#34ce98"
:clearabled="false" bgColor="#f8f8f8"
:disabled="true" :clearabled="false"
placeholderColor="#777" :disabled="true"
class="searchTem" placeholderColor="#777"
/> class="searchTem"
/>
</view>
<!-- 消息中心 --> <!-- 消息中心 -->
<view class="news"> <view class="news">
<u-icon name="bell-fill" color="#525252" size="24" :bold="true" space="1" /> <u-icon name="bell-fill" color="#525252" size="24" :bold="true" space="1" />
@@ -242,29 +244,31 @@
</view> </view>
</template> </template>
<!-- 登录 (未建立档案) --> <!-- 登录 (未建立档案) -->
<template v-eles-if="is_login && !is_record"> <template v-if="is_login && !is_record">
<!-- 搜索顶部 --> <!-- 搜索顶部 -->
<view class="search" @click="toCreateInfo"> <view class="search" >
<!-- 头像 --> <!-- 头像 -->
<view class="user"> <view class="user" @click='$Router.back()'>
<!-- <u-image class="avatar" width="90rpx" height="90rpx" :src="require('../../static/imgs/avatar.png')" :lazy-load="true" shape="circle" /> <!-- <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" /> --> <u-icon name="arrow-down-fill" color="#525252" size="10" class="downIcon" :bold="true" space="1" /> -->
<u-icon name="arrow-left" color="#525252" size="22" class="downIcon" :bold="true" @click='$Router.back()'/> <u-icon name="arrow-left" color="#525252" size="22" class="downIcon" :bold="true"/>
</view> </view>
<!-- 搜索框 --> <!-- 搜索框 -->
<u-search <view class="flex:1;" @click="toCreateInfo">
placeholder="搜索食物营养和热量" <u-search
shape="round" placeholder="搜索食物营养和热量"
:show-action="false" shape="round"
searchIconColor="#34ce98" :show-action="false"
bgColor="#f8f8f8" searchIconColor="#34ce98"
:clearabled="false" bgColor="#f8f8f8"
:disabled="true" :clearabled="false"
placeholderColor="#777" :disabled="true"
class="searchTem" placeholderColor="#777"
/> class="searchTem"
/>
</view>
<!-- 消息中心 --> <!-- 消息中心 -->
<view class="news"> <view class="news" >
<u-icon name="bell-fill" color="#525252" size="24" :bold="true" space="1" /> <u-icon name="bell-fill" color="#525252" size="24" :bold="true" space="1" />
<u-badge class="dian" :isDot="notifications_count > 0" bgColor="#e6576b"></u-badge> <u-badge class="dian" :isDot="notifications_count > 0" bgColor="#e6576b"></u-badge>
</view> </view>
@@ -450,6 +454,7 @@ export default {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
position: relative; position: relative;
z-index: 1001;
.downIcon { .downIcon {
// margin: 0 0 0 $margin * 0.4; // margin: 0 0 0 $margin * 0.4;
} }