AiSkinMeasurementMp/pages/details/result.vue

<template>
    <view class="result">
        <view class="main">
            <view class="steps">
                <view class="step-content">
                    <view class="step-banner">
                        <view class="left">
                            <view class="date">
                                {{ now }}
                            </view>
                            <view class="info">
                                <view class="tag">{{ calculateAge(userInfo.date) || '--' }}岁</view>
                                <view class="tag">{{ userInfo.gender || '--' }}</view>
                            </view>
                        </view>
                        <view class="right">
                            <u-icon name="eye-fill" :color="themeDeepColor" size="28"></u-icon>
                            <text>问题回顾</text>
                        </view>
                    </view>
                </view>
            </view>
            <view class="report-container">
                <!-- 标题 -->
                <view class="report-title">
                    <view class="bar"></view>
                    <text>伤口测评报告</text>
                </view>

                <view class="img-box">
                    <view class="left">
                        <u--image :src="resultPath" mode="widthFix" :customStyle="{ marginRight: '20rpx'}" shape="circle" width="50px"
            height="50px" @click="onPre(resultPath)"></u--image>
                    </view>
                    <view class="right">
                        <p class="bar-text">匹配度：中</p>
                        <view class="bar">
                            <u-line-progress :percentage="70" :showText="false" :activeColor="themeDeepColor" inactiveColor="#333"  height="12"></u-line-progress>
                        </view>
                        
                    </view>
                </view>

                <!-- 综合评价 -->
                <view class="section">
                    <view class="section-title">
                        <u--image :src="sectionSrc1" mode="widthFix" :customStyle="{}"  width="20px"
            height="20px" ></u--image>
                        <text class="evaluate-title">综合评价</text>
                    </view>
                    <view class="section-main">
                        <view class="evaluation-item">
                            <text class="item-label">伤口面积：</text>
                            <text class="item-value">无</text>
                        </view>
                        <view class="evaluation-item">
                            <text class="item-label">伤口深度：</text>
                            <text class="item-value">无</text>
                        </view>
                        <view class="evaluation-item">
                            <text class="item-label">肉芽增生：</text>
                            <text class="item-value">无增生</text>
                        </view>
                        <view class="evaluation-item">
                            <text class="item-label">皮肤颜色：</text>
                            <text class="item-value">对比较浅</text>
                        </view>
                    </view>
                </view>

                <!-- 上次评测对比 -->
                <view class="section">
                    <view class="section-title">
                        <u--image :src="sectionSrc2" mode="widthFix" :customStyle="{}"  width="20px"
                        height="20px" ></u--image>
                            <text class="evaluate-title">上次评测对比</text>
                        </view>
                    <view class="section-main">
                        
                        <view class="comparison-item">
                            <text>本次评分伤口收复87分，颜色淡化程度98分</text>
                        </view>
                        <view class="comparison-item">
                            <text>上次评分伤口收复85分，颜色淡化程度95分</text>
                        </view>
                    </view>

                </view>


                <!-- 治疗建议 -->
                <view class="section">
                    <view class="section-title">
                        <u--image :src="sectionSrc3" mode="widthFix" :customStyle="{}"  width="20px"
                        height="20px" ></u--image>
                            <text class="evaluate-title">治疗建议</text>
                        </view>
                    <view class="section-main">
                        
                        <view class="advice-item">
                            <text>请坚持每天使用康巴易产品1~2次</text>
                        </view>
                    </view>

                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            imgList: [
                { src: '' },
            ],
            sectionSrc1: require("../../static/tabbar/select_01.png"),
            sectionSrc2: require("../../static/tabbar/select_02.png"),
            sectionSrc3: require("../../static/tabbar/select_03.png")
        }
    },
    computed: {
        themeColor() {
            return this.$themeColor
        },
        themeDeepColor() {
            return this.$themeDeepColor
        },
        userInfo() {
            return this.$store.state.user.userInfo
        },
        now() {
            return this.$util.formateDate('yyy-mm-dd', new Date())
        },
        resultPath() {
            return this.$store.state.user.resultPath
        }
    },
    onLoad() {
        
    },
    methods: {
        calculateAge(date) {
            return this.$util.calculateAge(date)
        },
        onPre(resultPath){ 
            if(resultPath) {
                uni.previewImage({
                    urls: [resultPath]
                })
            }
        }
    }
}
</script>

<style lang="scss">
.result {
    .main {
        position: relative;
        background: #fff;
        overflow: hidden;

        .steps {
            padding: 24rpx 32rpx;
            background-color: #F3D4A3;

            .step-content {
                background: #fff;
                border-radius: 20rpx;
                padding: 30rpx;

                .step-banner {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .left {
                        .date {}

                        .info {
                            margin-top: 20rpx;
                            display: flex;
                            justify-content: space-around;
                            align-items: center;

                            .tag {
                                width: 100rpx;
                                height: 20rpx;
                                padding: 10rpx 0;
                                margin-right: 20rpx;
                                border-radius: 20rpx;
                                background-color: $cus-theme-color-deep;
                                color: #fff;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                font-size: 28rpx;
                            }
                        }
                    }

                    .right {
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;

                        text {
                            margin-left: 10rpx;
                            color: $cus-theme-color-deep;
                            font-weight: bold;
                        }
                    }
                }
            }
        }

        .report-container {
            padding: 40rpx;
            background-color: #fff;
            font-family: 'PingFang SC', sans-serif;

            /* 标题样式 */
            .report-title {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                .bar {
                    height: 40rpx;
                    width: 10rpx;
                    background-color: $cus-theme-color;
                }

                text {
                    font-size: 36rpx;
                    font-weight: bold;
                    color: #333;
                    margin-left: 20rpx;
                }
            }
            .img-box {
                margin: 20rpx 0;
                padding: 20rpx 0;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                .left {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                }
                .right {
                    padding: 10rpx;
                    width: 100%;
                    display: flex;
                    justify-content: flex-start;
                    align-items: flex-start;
                    flex-direction: column;
                    .bar-text {
                        width: 100%;
                        margin-bottom: 20rpx;
                    }
                    .bar {
                        width: 100%;
                    }
                }
            }

            /* 分区标题样式 */
            .section-title {
                margin-top: 40rpx;
                padding: 20rpx 0;
                display: flex;
                justify-content: flex-start;
                align-items: center;

                .evaluate-title {
                    font-size: 36rpx;
                    font-weight: bold;
                    color: #333;
                    margin-left: 20rpx;
                }

            }

            .section-main {
                padding: 20rpx;
                border-radius: 20rpx;
                border: 2rpx solid $cus-theme-color;

                /* 评价项样式 */
                .evaluation-item {
                    margin-bottom: 20rpx;
                    padding: 10rpx;
                    display: flex;
                    flex-direction: column;
                    font-size: 30rpx;

                    .item-label {
                        font-weight: bold;
                        color: $cus-theme-color;
                        min-width: 160rpx;
                    }

                    .item-value {
                        color: #333;
                        padding-top: 20rpx;
                    }
                }


            }



            /* 分割线样式 */
            .divider {
                height: 2rpx;
                background-color: #eee;
                margin: 80rpx 0;
            }

            /* 对比项样式 */
            .comparison-item {
                margin-bottom: 16rpx;
                color: #333;
            }

            /* 治疗建议样式 */
            .advice-item {
                color: #333;
            }
        }
    }
}
</style>