mechanicStore-app/pages/myEdit/feedback.uvue

<template>
    <view class="page-container">
        <!-- 头部 -->
        <view class="header">
            <view class="header-left" @click="goBack">
                <u-icon name="arrow-left" size="24" color="#333"/>
            </view>
            <view class="header-title">
                问题反馈
            </view>
            <view class="header-right">
            </view>
        </view>

        <!-- 内容区域 -->
        <view class="content">
            <!-- 订单编号 -->
            <view class="form-section">
                <text class="section-label">
                    订单编号
                </text>
                <input class="input" type="text" placeholder="请提供问题的订单编号" />
            </view>

            <!-- 问题说明 -->
            <view class="form-section">
                <text class="section-label">
                    问题说明
                </text>
                <textarea class="textarea" placeholder="说说您遇到的问题，以便我们提供更好的服务（5个字以上）">
                </textarea>
            </view>

            <!-- 上传凭证 -->
            <view class="form-section">
                <text class="section-label">
                    上传凭证
                </text>
                <view class="upload-section">
                    <view class="upload-btn" @click="uploadImage">
                        <u-icon name="camera" size="40" color="#999"/>
                        <text class="upload-text">
                            上传照片
                        </text>
                    </view>
                </view>
            </view>

            <!-- 提交按钮 -->
            <button class="submit-btn" @click="submitFeedback">
                提交
            </button>
        </view>
    </view>
</template>

<script setup lang="ts">
    const goBack = () => {
        uni.navigateBack();
    };

    const uploadImage = () => {
        uni.chooseImage({
                count: 1,
                sizeType: ['original',
                'compressed'],
                sourceType: ['album',
                'camera'],
                success: (res) => {
                    uni.showToast({ title: '上传成功', icon: 'success' });
                }
            });
    };

    const submitFeedback = () => {
        uni.showToast({ title: '提交成功', icon: 'success' });
        setTimeout(() => {
                uni.navigateBack();
            }, 1500);
    };
</script>

<style scoped>
    .page-container {
        background-color: #f5f5f5;
        min-height: 100vh;
    }

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20rpx;
        background-color: #ffffff;
        border-bottom: 1rpx solid #f0f0f0;
    }

    .header-left, .header-right {
        width: 60rpx;
    }

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

    .content {
        padding: 30rpx;
    }

    .form-section {
        margin-bottom: 30rpx;
    }

    .section-label {
        font-size: 28rpx;
        color: #333;
        margin-bottom: 15rpx;
        display: block;
    }

    .input {
        width: 100%;
        padding: 20rpx;
        font-size: 28rpx;
        color: #333;
        background-color: #ffffff;
        border-radius: 16rpx;
    }

    .textarea {
        width: 100%;
        min-height: 150rpx;
        padding: 20rpx;
        font-size: 28rpx;
        color: #333;
        background-color: #ffffff;
        border-radius: 16rpx;
        line-height: 1.5;
    }

    .upload-section {
        background-color: #ffffff;
        border-radius: 16rpx;
        padding: 30rpx;
    }

    .upload-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 120rpx;
        height: 120rpx;
        border: 2rpx dashed #d9d9d9;
        border-radius: 8rpx;
    }

    .upload-text {
        font-size: 24rpx;
        color: #999;
        margin-top: 10rpx;
    }

    .submit-btn {
        width: 100%;
        background-color: #ffc107;
        color: #333;
        font-size: 30rpx;
        font-weight: bold;
        border-radius: 50rpx;
        padding: 20rpx;
        border: none;
        margin-top: 40rpx;
    }
</style>