添加扫码页面

wjt

2024-06-21 7a352693c7fa090da0f8af9a62dec2e85adc83ab

添加扫码页面

 pages.json

@@ -149,6 +149,14 @@
                    {
                        "navigationBarTitleText" : ""
                    }
                },
                {
                    "path" : "scodePage/scodePage",
                    "style" : 
                    {
                        "navigationBarTitleText" : "",
                        "navigationStyle": "custom"
                    }
                }
            ]
        }

 policy/scodePage/scodePage.scss

New file
@@ -0,0 +1,161 @@
.page-box{
    position: absolute;
    top: 0;
    width: 100%;
    .code-hint{
        position: absolute;
        top: 170rpx;
        width: 100%;
        text-align: center;
        font-size: 56rpx;
        color: white;
        box-sizing: border-box;
        image{
            width: 68rpx;
            height: 68rpx;
            vertical-align: middle;
            margin-right: 16rpx;
        }
        .hint{
            font-size: 28rpx;
            margin-top: 24rpx;
        }
    }
    .qrcode{
        text-align: center;
        position: absolute;
        top: 381rpx;
        width: 100%;
        .border{
            width: 500rpx;
            height: 500rpx;	
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }
        .qrcode-1{
            position: absolute;
            left: 50%;
            top: 15rpx;
            width: 470rpx;
            height: 470rpx;
            transform: translateX(-50%);
        }
        .code-time{
            position: absolute;
            left: 50%;
            bottom: 24rpx;
            top: 520rpx;
            width: 100%;
            color: #7E8596;
            font-size: 24rpx;
            transform: translateX(-50%);
			
            text{
                color: #C3C6CD;
            }
        }
    }
    .code{
		 
        position: absolute;
        top: 950rpx;
        background-color: #F4F4F4;
        padding:  24rpx 30rpx;
        width: 80%;
        box-sizing: border-box;
        margin: 0 auto;
        border-radius: 10rpx;
        left: 10%;
        font-size: 28rpx;
        .item{
            display: flex;
            justify-content: space-between;
            align-items: center;
            .label{
                color: #7E8596;
            }
            .value{
                color: #4A4E60;
            }
        }
        .write-border{
            width: 100%;
            border-bottom: 2rpx solid white;
            margin: 24rpx 0;
        }
    }
    .hint-text{
        position: absolute;
        top: 1250rpx;
        width: 100%;
        padding: 0 26rpx;
        font-size: 28rpx;
        color: white;
        z-index: 1000;
        box-sizing: border-box;
        text{
            font-size: 36rpx;
        }
    }
    .down-block{
        position: absolute;
        top: 1260rpx;
        background-color: #4F86F3;
        width: 100%;
        padding-top: 55rpx;
        .box{
            margin: 20rpx 32rpx;
            background-color: white;
            padding: 24rpx;
            border-radius: 10rpx;
            .title{
                font-size: 32rpx;
                font-weight: 700;
                margin-bottom: 12rpx;
            }
            .user-news{
                display: flex;
                justify-content: flex-start;
                align-items: center;
                font-size: 28rpx;
                color: #4A4E60;
                margin-bottom: 12rpx;
                .driver{
                    width: 2rpx ;
                    height: 20rpx;
                    background-color: #F4F4F4;
                    margin: 0 10rpx;
                }
            }
            .border{
                border: 2rpx dotted #F4F4F4;
                margin: 24rpx 0;
            }
            .font-13{
                font-size: 26rpx;
                color: #4A4E60;
                text{
                    color: #C3C6CD;
                }
            }
            .font-12{
                font-size: 24rpx;
                color: #4A4E60;
                text{
                    color: #C3C6CD;
                }
            }
            .margin-bottom{
                margin-bottom: 12rpx;
            }
			
        }
    }
}
.back-image{
    width: 100%;
}
.hide-canvas{
    display: none;
}

 policy/scodePage/scodePage.vue

New file
@@ -0,0 +1,102 @@
<template>
    <view>
          <u-navbar
                @rightClick="rightClick"
                :autoBack="true"
                :placeholder="false"
                bgColor="transparent"
                leftIconColor="white"
            >
            </u-navbar>
        <image src="/static/policy/back.png" mode="widthFix" class="back-image"></image>
        <view class="page-box">
            <view class="code-hint">
                <view>
                    <image src="/static/policy/success.png" mode="widthFix"></image>
                    <!-- <image src="/static/policy/error.png" mode="widthFix"></image> -->
                    <text>成功-绿码</text>
                    <!-- <text>失败-红码</text> -->
                </view>
                <view class="hint">
                    可对此企业进行核查
                </view>
                <view class="hint">
                    请核查企业信息
                </view>
            </view>
            <!-- 二维码 -->
            <view class="qrcode">
                <image src="/static/policy/qrcode-border.png" class="border" mode="widthFix"></image>
                <image :src="uqrcodeImage" mode="widthFix" class="qrcode-1"></image>
                <view class="code-time">
                    <text>扫码时间：</text>2024-05-12 12:00
                </view>
            </view>
            <view class="code">
                <view class="item">
                    <text class="label">执法人员</text>
                    <text class="value">王小丫</text>
                </view>
                <view class="write-border"></view>
                <view class="item">
                    <text class="label">执法部门</text>
                    <text class="value">工商管理局</text>
                </view>
            </view>
            <view class="hint-text">
                当前企业存在<text>1</text>条未完成的执法任务
            </view>
            <view class="down-block">
                <view class="box">
                    <view class="title">24年5月突击检查消防安全</view>
                    <view class="user-news">
                        <text>王思雨</text>
                        <view class="driver"></view>
                        <text>工商管理局</text>
                    </view>
                    <view class="font-13">
                        <text>执法对象：</text>河南觉醒科技有限公司
                    </view>
                    <view class="border"></view>
                    <view class="font-12 margin-bottom">
                        <text>执法时间：</text>2024-05-12 12:00
                    </view>
                    <view class="font-12">
                        <text>申请时间：</text>2024-05-12 12:00:12
                    </view>
                </view>
            </view>
        </view>
        <uqrcode class="hide-canvas" :size="470" sizeUnit="rpx" v-if="companyCode" ref="uqrcode" canvas-id="qrcode" :value="companyCode" :options="{ backgroundColor: 'green',useDynamicSize: true,  areaColor: '#ffffff', foregroundColor: '#ffffff' }"></uqrcode>
		
    </view>
</template>

<script>
    export default {
        data() {
            return {
                companyCode: 'code===',
                uqrcodeImage: ''
            }
        },
        onReady() {
            this.$refs.uqrcode.toTempFilePath({
              success: res => {
                this.uqrcodeImage = res.tempFilePath
              }
            });
        },
        methods: {
			
        }
    }
</script>
<style>
    page{
        padding-bottom: 20rpx;
    }
</style>
<style lang="scss" scoped>
@import "./scodePage.scss";
</style>

 static/policy/back.png

 static/policy/error.png

 static/policy/qrcode-border.png

 static/policy/success.png