ys-app/src/pages/notice/waitApproveDetail.vue

<template>
<view class="con-body">
    <view class="con-bg">
        <!-- 头部 -->
        <customHeader ref="customHeaderRef" :title="'待审批'" :leftFlag="true" :rightFlag="true"></customHeader>

        <!-- 高度来避免头部遮挡 -->
        <view class="top-height"></view>

        <!-- 正文内容 -->
        <view class="all-body">
            <view class="white-bg bg-height">
                <view class="report-list">
                    <view class="title">{{ detail.subject }}</view>
                    <view class="r-list">
                        <view class="r-name">进度</view>
                        <view class="r-right btn-orange" size="mini" v-if="detail.status==1">待处理</view>
                        <view v-else-if="detail.status==2">已处理</view>
                    </view>
                    <view class="border-bottom"></view>
                    <view class="r-list">
                        <view class="r-left">来自</view>
                        <view class="r-right">{{ detail.appName }}</view>
                    </view>
                    <view class="border-bottom"></view>
                    <view class="r-list">
                        <view class="r-left">状态</view>
                        <view class="r-right">
                            <text style="color:#FF2B44" v-if="detail.status==1 && (detail.level==1 || detail.level==2)">
                                {{ formatLevel(detail.level) }}
                            </text>
                            <text v-else>{{ formatLevel(detail.level) }}</text>
                        </view>
                    </view>  
                    <view class="border-bottom"></view>
                    <view class="r-list">
                        <view class="r-left">创建人</view>
                        <view class="r-right">{{ detail.createUser?detail.createUser.userId:'' }}</view>
                    </view>
                    <view class="border-bottom"></view>
                    <view class="r-list">
                        <view class="r-left">创建时间</view>
                        <view class="r-right">{{ parseTime(detail.createTime,'{y}-{m}-{d} {h}:{i}') }}</view>
                    </view>
                </view>

                <view class="btn-blue"  @click="handleJump">跳转详情页</view>
            </view>
        </view>
    </view>
</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import customHeader from '@/components/customHeader.vue'
// import MescrollUni from 'mescroll-uni/mescroll-uni.vue';
import { getNavBarPaddingTop } from '@/utils/system.js'
import {formatLevel} from '@/utils/status.js'
import { parseTime } from '@/utils/datetime.js'


let detail = ref({})
onLoad(async(opt) => {
    try {
        detail.value = JSON.parse(decodeURIComponent(opt.detail));
        // console.log(detail.value);
    } catch (e) {
        console.error('参数解析失败', e);
    }
});

// 获取导航栏高度用于内容区域padding
const navBarPaddingTop = ref(0);
onMounted(() => {
    navBarPaddingTop.value = getNavBarPaddingTop() * 2;
})


// 跳转webview
const handleJump = ()=>{
    let item = detail.value;
    uni.navigateTo({
        url: `/pages/h5-webview/h5-webview?url=${item.mobileLink}&title=${item.subject}`
    });
}
</script>

<style scoped>
.all-body {
    /* #ifdef APP-PLUS */
    top: 150rpx;
    height: calc(100vh - 75px);
    /* #endif */
    /* #ifndef APP-PLUS */
    top:120rpx;
    height: calc(100vh - 60px);
    /* #endif */
}

.scroll-h{
    /* #ifdef APP-PLUS */
    height:calc(100vh - 78px) !important;
    /* #endif */
    /* #ifndef APP-PLUS */
    height: calc(100vh - 10px) !important;
    /* #endif */
}
.white-bg{
    width: 750rpx;
    padding: 25rpx 0 20rpx;
    margin-bottom:0;
    border-radius: 8px 8px 0 0;
}

.white-bg.bg-height{
    /* #ifdef APP-PLUS */
    height:calc(100vh - 78px) !important;
    /* #endif */
    /* #ifndef APP-PLUS */
    height: calc(100vh - 80px) !important;
    /* #endif */
}

.report-list{
    padding: 0 0 0 30rpx;
}
.report-list .r-list{
    padding-right: 30rpx;
} 
.report-list .r-list:first-child{
    padding-bottom:10rpx;
}
.report-list .border-bottom{
    width:720rpx;
}

.btn-blue {
    background-color: #05A3F4;
    color: #fff;
    width:380rpx;
    height:80rpx;
    line-height: 80rpx;
    margin:120rpx auto 0;
    text-align: center;
    border-radius: 40rpx;
}
</style>