UniappVue3/src/pages/ReformFeedback/index.vue

<!-- 问题整改反馈 -->
<template>
    <view class="PageBox">
        <view class="TopBox FlexBox">
            <view class="iconBox FlexBox">
                <u-icon name="arrow-leftward" size="24" @click="goBack"></u-icon>
            </view>
            <view class="Title">问题整改反馈</view>
            <view class="informBox"> </view>
        </view>
        <view class="ContentBox">
            <view class="ListBox">
                <view class="h2Box">问题详情</view>
                <view class="ListItem">
                    <view class="LabelBox">问题描述</view>
                    <view class="ValueBox">
                        <u-input v-model="problemDesc" placeholder="请输入问题描述" disabled></u-input>
                    </view>
                </view>
                <view class="ListItem">
                    <view class="LabelBox">反馈人</view>
                    <view class="ValueBox">
                        <u-input v-model="feedbackPerson" placeholder="请输入反馈人" disabled></u-input>
                    </view>
                </view>
                <view class="ListItem">
                    <view class="LabelBox">反馈时间</view>
                    <view class="ValueBox">
                        <u-input v-model="feedbackTime" placeholder="请输入反馈时间" disabled></u-input>
                    </view>
                </view>
                <view class="ListItem">
                    <view class="LabelBox">现场照片</view>
                    <view class="ValueBox FlexBox">
                        <u-image url="https://img.yzcdn.cn/vant/user-avatar.png" width="100rpx"
                            height="100rpx"></u-image>
                    </view>
                </view>
                <view class="ListItem">
                    <view class="LabelBox">反馈时间</view>
                    <view class="ValueBox">
                        <u-input v-model="feedbackTime" placeholder="请输入反馈时间" disabled></u-input>
                    </view>
                </view>
                <view class="h2Box">整改内容</view>
                <view class="ListItem">
                    <view class="LabelBox mustBox">整改措施描述</view>
                    <view class="ValueBox">
                        <u-textarea v-model="reformDesc" placeholder="请输入整改措施描述"></u-textarea>
                    </view>
                </view>
                <view class="ListItem">
                    <view class="LabelBox mustBox">整改完成照片</view>
                    <view class="ValueBox">
                        <u-upload v-model="reformPhoto" :max-count="1" :auto-upload="false" :preview-size="100"
                            @change="handleChange"></u-upload>
                    </view>
                </view>
                <view class="ListItem">
                    <view class="LabelBox mustBox">整改完成时间</view>
                    <view class="ValueBox">
                        <up-datetime-picker hasInput :show="showTimePicker" v-model="reformTime"
                        mode="datetime" @change="handleTimePicker"></up-datetime-picker>
                    </view>
                    
                </view>
            </view>
        </view>
        <view class="FootBox">
            <u-button type="primary" plain>保存草稿</u-button>
            <u-button type="primary">提交检查项</u-button>
        </view>
    </view>
</template>
<script setup>
import dayjs from 'dayjs'
import { ref } from 'vue'

// 整改措施描述
const reformDesc = ref('')
// 整改完成照片
const reformPhoto = ref([])
// 整改完成时间
const reformTime = ref('')
// 时间选择器
const showTimePicker = ref(false)

// 时间选择器回调
const handleTimePicker = (e) => {
    showTimePicker.value = false
    reformTime.value = dayjs(e.detail).format('YYYY-MM-DD HH:mm')
}



// 返回列表页
const goBack = () => {
    uni.navigateBack({
        delta: 1
    })
}
</script>

<style lang="scss" scoped>
.h2Box {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-top: 20rpx;
}

.mustBox::after {
    content: '*';
    color: red;
    margin-left: 5rpx;
}

.FlexBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20rpx;
}

.PageBox {
    background-color: #ff9900;
    height: 100vh;
    overflow: hidden;

    .TopBox {
        height: 100rpx;
        padding: 20rpx;
        background-color: #fff;

        .iconBox {
            font-size: 32rpx;
        }

        .Title {
            font-size: 32rpx;
            font-weight: bold;
            color: #333;
        }

        .informBox {
            .MsgTxt {
                padding: 8rpx;
                background-color: hsla(17, 100%, 50%, 0.849);
                color: #fff;
                position: absolute;
                top: 16rpx;
                right: 16rpx;
                border-radius: 50%;
            }
        }
    }

    .ContentBox {
        background-color: #c5d5d6;
        height: calc(100vh - 250rpx);
        overflow: hidden;
    }

    .FootBox {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 150rpx;
        gap: 20rpx;
        padding: 20rpx;
        background-color: #fff;
        font-weight: bold;
    }
}

.ListBox {
    height: 100%;
    padding: 20rpx;
    background-color: #fff;
    overflow: auto;

    .ListItem {
        margin-bottom: 20rpx;

        .LabelBox {
            font-weight: bold;
            font-size: 28rpx;
            color: #333;
            margin-bottom: 10rpx;
        }
    }
}
</style>