243 lines
6.8 KiB
Vue
243 lines
6.8 KiB
Vue
<!--
|
||
* @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/user/cover.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;
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: "none",
|
||
duration: 2000,
|
||
mask: 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>
|