adultDeviceApp/pageTwo/compk/pkdetail.vue

<template>
    <view class="content pkconp">
        <view class="header">
            <view class="left">
                <image :src="memInfo.headimg" class="image1"></image>
            </view>
            <view class="right">
                <view class="name">{{memInfo.name?memInfo.name:memInfo.nickname}}</view>
                <view class="top">
                    <view class="age">性别：{{memInfo.sex==0?'未知':memInfo.sex==1?'男':'女'}}</view>
                    <view>年龄：{{user.age}}岁</view>
                </view>
            </view>
            <!-- <button class="pkclass" @click="handleImage">保存图片</button> -->
        </view>
        <view class="box">
            <view class="item">
                <view>{{memInfo.day?memInfo.day:'0'}}</view>
                <text>时间(天)</text>
            </view>
            <view class="item">
                <view>{{Math.abs(memInfo.weightdiff)}}</view>
                <text v-if="Number(memInfo.weightdiff)>0">增重(kg)</text>
                <text v-else>减重(kg)</text>
            </view>
            <view class="item">
                <view>{{Math.abs(memInfo.fat_wdiff)}}</view>
                <text v-if="Number(memInfo.fat_wdiff)>0">增脂(kg)</text>
                <text v-else>减脂(kg)</text>
            </view>
            <view class="time">
                <view>
                    <icon class="yuanxing"></icon>{{memInfo.time}}
                </view>数据变化
            </view>
        </view>
        <view class="control">
            <!-- 名称 -->
            <view class="title">
                <view class="name"></view>
                <view>趋势</view>
                <view>之前</view>
                <view>之后</view>
            </view>
            <view v-for="(ite,ind) in listStr" :key="ind" class="li">
                <view class="name">
                    <view class="icon">
                        <icon class="t-icon" :class="'t-icon-'+ite.key"></icon>
                    </view>
                    <text>{{ite.title}}</text>
                </view>
                <view class="num" v-if="ite.title=='体型'||ite.title=='肥胖等级'">
                    <icon class="t-icon t-icon-hengxian"></icon>
                </view>
                <view class="num" v-else>
                    {{ite.num}}
                    <icon class="t-icon t-icon-shang" v-if="ite.vs=='1'"></icon>
                    <icon class="t-icon t-icon-xia" v-if="ite.vs=='-1'"></icon>
                    <icon class="t-icon t-icon-hengxian" v-if="!ite.vs||ite.vs=='0'||ite.num=='0.00'"></icon>
                </view>
                <view class="f0" v-if="ite.title=='体型'||ite.title=='肥胖等级'">
                    <text>{{ite.fevaluation}}</text>
                </view>
                <view class="f" v-else>
                    <view>{{ite.fvalue}}</view>
                    <text v-if="ite.fevaluation">{{ite.fevaluation}}</text>
                </view>
                <view class="f0" v-if="ite.title=='体型'||ite.title=='肥胖等级'">
                    <text>{{ite.sevaluation}}</text>
                </view>
                <view class="f" v-else>
                    <view>{{ite.svalue}}</view>
                    <text v-if="ite.fevaluation">{{ite.sevaluation}}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import {
        mapState
    } from "vuex";

    export default {
        onLoad(options) {
            let that = this
            console.log("options", options)
            if (options.info) {
                that.infoID = JSON.parse(options.info)
                that.handleSharepic(that.infoID)
            }
        },
        computed: {
            ...mapState(["user"]),
        },
        methods: {
            handleSharepic(id) {
                let that = this
                that.$model.getresultdiff({
                    familyid: id.familyid,
                    firstId: id.firstId,
                    secondId: id.secondId,
                }).then(res => {
                    console.log("res", res)
                    if (res.code != 0) {
                        this.$tools.msg(res.message)
                        return
                    }
                    that.handleInfoList(res.data)
                })
            },
            handleInfoList(data) {
                let that = this
                that.memInfo = data
                let listStr = that.weightInfo.infoList(data.firstresult)
                let str = that.memInfo.secondresult
                for (var i = 0; i < listStr.length; i++) {
                    listStr[i].svalue = str[listStr[i].key];
                    let num = listStr[i].svalue - listStr[i].fvalue
                    if (num < 0) {
                        listStr[i].vs = '-1'
                    } else if (num > 0) {
                        listStr[i].vs = '1'
                    } else {
                        listStr[i].vs = '0'
                    }
                    listStr[i].num = Math.abs(num).toFixed(2)
                    if (str[listStr[i].level]) {
                        listStr[i].sevaluation = str[listStr[i].level];
                    }
                    console.log("listStr[i].title", listStr[i].title)
                    // if (listStr[i].title == "体重") {
                    //     if (listStr[i].svalue > Number(str.standardweight)) {
                    //         listStr[i].sevaluation = "偏高"
                    //     } else if (listStr[i].svalue < Number(str.standardweight)) {
                    //         listStr[i].sevaluation = "偏低"
                    //     } else {
                    //         listStr[i][i].sevaluation = "标准"
                    //     }
                    // }
                }
                that.listStr = listStr
                console.log("listStr[i]", that.memInfo, listStr)
            },
        },
        data() {
            return {
                infoID: {},
                memInfo: {},
                listStr: [],
            }
        },
    }
</script>

<style scoped lang="scss">
    .age {
        margin-right: 20px;
    }

    .icon {
        width: 18px;
        height: 18px;
        padding: 3px;
        margin-right: 7px;
        background-color: #aaa;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .t-icon-hengxian {
        height: 4px !important;
    }
</style>