yinchuan-community-all/mini-program/garden-wxapp/pages/healthCode/healthCode.vue

<template>
    <view>
        <view class="codeBox" :class="{ 'bg-red': healthCode.color=='red', 'bg-blue': healthCode.color=='green'}">
            <view class="timeBar">{{name}}</view>
            <view class="timeBar">{{nowStr}}</view>
            <image class="code" :src="healthCode.code"></image>
            <view v-if="healthCode.color=='green'" class="timeBar" style="height: 250rpx;letter-spacing: 20rpx;">
                <icon type="success" size="35"/>
                未见异常
            </view>
            <view v-if="healthCode.color=='red'" class="timeBar" style="height: 250rpx;letter-spacing: 20rpx;">
                <icon type="warn" size="35"/>
                体温异常
            </view>
        </view>
        <view class="tips">{{tips}}</view>
        <view class="link"> 测温记录</view>
    </view>
</template>

<script>
    import util from "@/utils/util.js"

    export default {
        data() {
            return {
                personInfo: {
                    name: "梁汉强",
                    idNumber: "440981199612222852"
                },
                timer: '',
                nowStr: "",
                healthCode: {
                    code: "http://120.92.153.151:3000/public/recog_images/2021-01-09/06d56a9f7fca42c6",
                    color: "red"
                },
                tips: "按照目前掌握的防疫相关数据，暂未发现您存在与防疫相关异常健康状况。防疫相关数据会随着疫情发展及时更新。此次查询并不会排除您的防疫相关健康风险。"
            }
        },
        onLoad() {
            this.timer = setInterval(() => {
                this.nowStr = util.dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss");
            }, 1000);
        },
        beforeDestroy() {
            clearInterval(this.timer);
        },
        computed: {
            name() {
                let chars = this.personInfo.name.split("");
                return "**" + chars[chars.length - 1]
            }
        },
        methods: {}
    }
</script>

<style>
    .timeBar {
        width: 400 rpx;
        height: 100 rpx;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 40 rpx;
        /* background-color: rgba(255,255,255,0.5); */
    }

    .code {
        background: white;
        border-radius: 15 rpx;
        padding: 5 rpx;
        width: 400 rpx;
        height: 400 rpx;
    }

    .codeBox {
        width: 100%;
        height: 1000 rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 5 rpx;
    }

    .tips {
        height: 300 rpx;
        width: 90%;
        line-height: 50 rpx;
        text-indent: 2em;
        margin: auto;
        color: gray;
        /* background: #18B566; */
        font-size: 30 rpx;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .link {
        height: 100 rpx;
        width: 100%;
        color: #007AFF;
        display: flex;
        text-decoration: underline;
        font-style: italic;
        align-items: center;
        justify-content: center;
    }
</style>