feat(report): 添加报告相关组件和 API
- 新增报告 API 文件，定义了多个后端请求方法 - 实现了多个报告相关组件，包括体型选择、基因风格、面部色彩维度等 - 添加了自定义 Swiper 组件和标签页组件 - 新增了一些工具函数，如数字转中文、获取最大元素等
This commit is contained in:
liguigong
@@ -0,0 +1,273 @@
|
||||
<template>
|
||||
<view class="header">
|
||||
<!-- 头像和信息区 -->
|
||||
<view class="info-row">
|
||||
<view class="avatar-stack">
|
||||
<image
|
||||
class="avatar-main"
|
||||
:src="userFaceInfo?.avatar_img_url"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<image
|
||||
class="avatar-shadow"
|
||||
:src="userFaceInfo?.avatar_img_url"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 底部分栏信息 -->
|
||||
<view class="">
|
||||
<view class="info-main">
|
||||
<view class="info-basic">
|
||||
<text class="gender">{{ userFaceInfo.gender }}</text>
|
||||
<text class="birthday">| {{ userFaceInfo.createTime }}</text>
|
||||
</view>
|
||||
<view class="info-desc">
|
||||
{{ userFaceInfo.feature }}，
|
||||
<!-- {{
|
||||
userFaceInfo.Facial_three_dimensionality
|
||||
}}， -->
|
||||
{{ userFaceInfo.eyebrows }}，{{ userFaceInfo.ocular_form }}，
|
||||
{{ userFaceInfo.neck_length }}，
|
||||
{{ userFaceInfo.nasolabial_folds }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-columns">
|
||||
<view class="col-item">
|
||||
<text class="col-label">身高</text>
|
||||
<text class="col-value">{{ userFaceInfo.stature || "-" }}cm</text>
|
||||
</view>
|
||||
<view class="col-item">
|
||||
<text class="col-label">体重</text>
|
||||
<text class="col-value">{{ userFaceInfo.bodyWeight || "-" }}kg</text>
|
||||
</view>
|
||||
<view class="col-item">
|
||||
<text class="col-label">修饰目标</text>
|
||||
<text class="col-value">{{ userFaceInfo.purpose || "-" }}</text>
|
||||
</view>
|
||||
<view class="col-item">
|
||||
<text class="col-label">局部问题</text>
|
||||
<text class="col-value">{{ userFaceInfo.question || "-" }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps, watch, ref } from "vue";
|
||||
const props = defineProps({
|
||||
userFaceInfo: {
|
||||
type: Object,
|
||||
default: {},
|
||||
},
|
||||
});
|
||||
const userFaceInfo = ref({});
|
||||
watch(
|
||||
() => props.userFaceInfo,
|
||||
(newVal) => {
|
||||
userFaceInfo.value = newVal;
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.header {
|
||||
background: url("https://llyz.oss-cn-beijing.aliyuncs.com/diagnostic-report-h5/h5headerbg.png")
|
||||
no-repeat center center;
|
||||
color: #fff;
|
||||
padding: 16px 20px 32px;
|
||||
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
.status-bar-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 32px;
|
||||
padding: 0 12px;
|
||||
background: #333;
|
||||
}
|
||||
.status-bar-title {
|
||||
color: #aaa;
|
||||
font-size: 14px;
|
||||
}
|
||||
.status-bar-icons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.status-bar-time {
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
margin-right: 16px;
|
||||
}
|
||||
.status-bar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
.status-bar-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: #666;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.status-bar-icon.signal {
|
||||
background: linear-gradient(90deg, #fff 60%, #666 100%);
|
||||
}
|
||||
.status-bar-icon.wifi {
|
||||
background: linear-gradient(90deg, #fff 60%, #666 100%);
|
||||
}
|
||||
.status-bar-icon.battery {
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.header-action-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 12px 0 12px;
|
||||
}
|
||||
.back-btn {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
.back-arrow {
|
||||
color: #222;
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.header-icons {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
.icon-box {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: #444;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.icon-box.square {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.icon-box.dot {
|
||||
border-radius: 50%;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #fff;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.icon-box.circle {
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
border: 2px solid #444;
|
||||
}
|
||||
.info-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
/* margin-top: 8px; */
|
||||
/* padding: 0 24px; */
|
||||
}
|
||||
.avatar-stack {
|
||||
position: relative;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
}
|
||||
.avatar-main {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
/* border: 2px solid #fff; */
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
object-fit: cover;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 9;
|
||||
}
|
||||
.avatar-shadow {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
background-color: gray;
|
||||
/* opacity: 0.3; */
|
||||
object-fit: cover;
|
||||
position: absolute;
|
||||
left: 82%;
|
||||
z-index: 2;
|
||||
/* 关键代码：图片变黑白 */
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
.info-main {
|
||||
margin-top: 8px;
|
||||
}
|
||||
.info-basic {
|
||||
font-size: 12px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.gender {
|
||||
margin-right: 8px;
|
||||
}
|
||||
.birthday {
|
||||
color: #bbb;
|
||||
}
|
||||
.info-desc {
|
||||
width: 336px;
|
||||
font-size: 14px;
|
||||
color: #ccc;
|
||||
margin-bottom: 10px;
|
||||
font-family: Molengo;
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
line-height: 100%;
|
||||
letter-spacing: 0%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.info-columns {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
/* padding: 0 24px; */
|
||||
margin-top: 18px;
|
||||
}
|
||||
.col-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.col-label {
|
||||
color: #aaa;
|
||||
font-size: 13px;
|
||||
margin-bottom: 2px;
|
||||
font-family: Molengo;
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
letter-spacing: 0px;
|
||||
}
|
||||
.col-value {
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
font-family: Molengo;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
letter-spacing: 0px;
|
||||
/* 超出隐藏并显示省略号 */
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
/* 可选：限制最大宽度（防止 flex 布局拉伸） */
|
||||
max-width: 80px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user