leromro-mini/pages/myCenter/bad.vue

<template>
    <view class="bad-main">
        <view v-for="item in list" :key="item.key" class="bad-item">
            <view class="bad-user-box">
                <view class="bad-user">
                    <up-avatar :src="item.avatar" shape="square"></up-avatar>
                    <view class="user-name">{{ item.name }}</view>
                </view>
                <view class="bad-status">申述中</view>
            </view>
            <view class="bad-text">
                {{ item.value }}
            </view>
            <view class="bad-image">
                <view class="bad-image-item" v-for="(baseListItem, baseListIndex) in [{}, {}, {}, {}, {}, {}, {}, {}]" :key="baseListIndex">
                    1
                </view>
            </view>

            <view class="bad-order">
                <view class="bad-avatar">
                    <up-avatar :src="item.avatar" shape="square"></up-avatar>
                </view>
                <view class="bad-order-box">
                    <view class="bad-order-text">标题：订单</view>
                    <view class="bad-order-text">简介：订单详情撒大师大师的十大</view>
                    <view class="bad-order-text">价格：200</view>
                </view>
            </view>

            <view class="bad-status-box">
                <up-icon name="checkmark-circle-fill" color="rgba(0, 168, 112, 1)" size="18"></up-icon>
                <view class="bad-status-title">申述成功</view>
                <view class="bad-status-text">改评价为非志愿者原因改评价为非志愿者原因改评价为非志愿者原因改评价为非志愿者原因</view>
            </view>
            

            <view class="bad-btn-box">
                <view class="bad-btn flex-center" @click="onAppeal(item)">申述</view>
            </view>

        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';

const list = [
    {
        name: '张三',
        avatar: '/static/img/报事报修@6x.png',
        status: 1,
        key: 1,
        value: '浔阳江头夜送客，枫叶荻花秋瑟瑟。主人下马客在船，举酒欲饮无管弦。醉不成欢惨将别，别时茫茫江浸月。',

    }
]


const load = () => {

}

const onAppeal = (record) => {
    uni.navigateTo({
        url: `/pages/myCenter/appeal?id=${record.key}`
    })
}

</script>

<style lang="scss" scoped>
.bad-main {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: rgba(245, 245, 245, 1);
    padding: 12px;
    overflow: auto;

    .bad-item {
        border-radius: 8px;
        background: rgba(255, 255, 255, 1);
        padding: 12px;
        margin-bottom: 12px;

        .bad-user-box {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .bad-user {
                display: flex;
                align-items: center;
            }

            .user-name {
                margin-left: 8px;

                font-size: 18px;
                font-weight: 700;
                line-height: 21.09px;
                color: rgba(51, 51, 51, 1);
                margin-left: 12px;
            }

            .bad-status {
                font-size: 14px;
            }
        }

        .bad-text {
            font-size: 14px;
            font-weight: 500;
            line-height: 20.27px;
            color: rgba(51, 51, 51, 1);
            padding: 12px 0;
        }

        .bad-image {
            margin: 12px 0;
            display: grid;
            grid-template-columns: repeat(3, 1fr); // 4列布局
            gap: 12px; // 网格间距

            .bad-image-item {
                background: #f9f9f9;
                height: 80px;
                width: 100px;
            }
        }

        .bad-order {
            border-radius: 8px;
            background: #f9f9f9;
            margin: 12px 0;
            padding: 12px;

            display: flex;
            align-content: center;

            .bad-avatar {
                margin-right: 12px;
            }

            .bad-order-box {
                flex: 1;

                .bad-order-text {
                    font-size: 14px;
                    font-weight: 500;
                    line-height: 20.27px;
                    color: rgba(153, 153, 153, 1);
                }

            }
        }
        .bad-status-box {
            border-radius: 8px;
            background: #e5fff6;
            margin: 12px 0;
            padding: 18px 12px;
            display: flex;
            align-items: center;
            .bad-status-title{
                margin-left: 8px;
                font-size: 14px;
                font-weight: 500;
                color: rgba(0, 168, 112, 1);
            }
            .bad-status-text {
                margin-left: 12px;
                font-size: 12px;
                font-weight: 500;
                line-height: 17.38px;
                flex: 1;
            }

        }

        .bad-btn-box {
            display: flex;
            align-items: center;
            justify-content: flex-end;

            .bad-btn {
                color: rgba(255, 87, 4, 1);
                font-size: 14px;
                width: 72px;
                height: 31px;
                border-radius: 16px;
                border: 1px solid rgba(255, 87, 4, 1);
            }
        }
    }
}
</style>