leromro-mini/pages_mine/pages/appeal/index.vue

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

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

            <view class="appeal-text-box">
                <view class="font-title">申诉内容</view>
                <up-textarea v-model="textareaValue" placeholder="请输入申述内容" count ></up-textarea>
            </view>
            <view class="appeal-text-box">
                <view class="upload-box">
				<view class="upload-img-item" v-for="(item, index) in fileList" :key="item.url">
					<view class="delete-icon" @click="deletePic(index)"><up-icon name="close-circle-fill"
							color="#f64a1f" size="18"></up-icon></view>
					<img class="upload-img" :src="item.url" :alt="item.fileName" srcset="">
				</view>
				<img src="/static/img/upload.png" alt="" class="upload-img" @click="uploadClick('img')"
					v-if="fileList.length < 10">
			</view>
            </view>
    
            

            <view class="appeal-btn-box">
                <up-button type="primary" text="提交申述" @click="onAppeal"></up-button>
            </view>

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

<script setup>
import { ref } from 'vue';
import { wxUploadFile } from '@/utils/wxRequest.js'

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

    }
]
const fileList = ref([]);

const textareaValue = ref('');

const load = () => {

}

const onAppeal = () => {
   console.log('提交申述',textareaValue.value);
   
}
// 删除图片
const deletePic = (index) => {
	fileList.value.splice(index, 1);
};
const uploadClick = async (type) => {
	const res = await wxUploadFile(type);
	fileList.value = [...fileList.value, ...res];
	console.log('xxxxres', res, fileList.value);
}
</script>

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

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

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

            .appeal-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;
            }

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

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

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

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

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

            display: flex;
            align-content: center;

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

            .appeal-order-box {
                flex: 1;

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

            }
        }
        .appeal-text-box {
            margin: 12px 0;
            .font-title {
                margin-bottom: 12px;
            }
        }

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

            .appeal-btn {
                color: rgba(255, 87, 4, 1);
                font-size: 14px;
                width: 100%;
                height: 45px;
                border-radius: 16px;
                border: 1px solid rgba(255, 87, 4, 1);
            }
        }
    }
    .upload-img {
		height: 68px;
		width: 68px;
		margin-right: 12px;
		margin-bottom: 12px;
	}
    .upload-box {
		display: flex;
		flex-wrap: wrap;

		.upload-img-item {
			position: relative;

			.delete-icon {
				position: absolute;
				top: -7px;
				right: 7px;
				z-index: 1;
			}
		}
	}
}
</style>