haha/haha-mp/src/pages/refund/refund.vue

<template>
  <view class="container">
    <view class="title">退款申请</view>
    <view class="refund-info">
      <view class="info-item">
        <view class="info-label">订单编号</view>
        <view class="info-value">order_001</view>
      </view>
      <view class="info-item">
        <view class="info-label">购买时间</view>
        <view class="info-value">2026-01-23 10:30:00</view>
      </view>
      <view class="info-item">
        <view class="info-label">购买商品</view>
        <view class="info-value">可口可乐 × 2</view>
      </view>
      <view class="info-item">
        <view class="info-label">支付金额</view>
        <view class="info-value">¥7.00</view>
      </view>
    </view>
    <view class="refund-reason">
      <view class="reason-title">退款原因</view>
      <textarea class="reason-input" placeholder="请输入退款原因"></textarea>
    </view>
    <view class="upload-section">
      <view class="upload-title">上传凭证</view>
      <view class="upload-area">
        <view class="upload-item">+</view>
        <view class="upload-item">+</view>
        <view class="upload-item">+</view>
      </view>
    </view>
    <button class="submit-button">提交退款申请</button>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
</script>

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

.title {
  font-size: 36rpx;
  font-weight: bold;
  padding: 30rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
}

.refund-info {
  background-color: #fff;
  margin: 20rpx 0;
  padding: 30rpx;
}

.info-item {
  display: flex;
  justify-content: space-between;
  padding: 15rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  font-size: 28rpx;
  color: #666;
}

.info-value {
  font-size: 28rpx;
  color: #333;
}

.refund-reason {
  background-color: #fff;
  padding: 30rpx;
  margin: 20rpx 0;
}

.reason-title {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.reason-input {
  width: 100%;
  height: 200rpx;
  border: 1rpx solid #eee;
  border-radius: 10rpx;
  padding: 20rpx;
  font-size: 26rpx;
  resize: none;
}

.upload-section {
  background-color: #fff;
  padding: 30rpx;
  margin: 20rpx 0;
}

.upload-title {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.upload-area {
  display: flex;
  gap: 20rpx;
}

.upload-item {
  width: 150rpx;
  height: 150rpx;
  border: 2rpx dashed #ddd;
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40rpx;
  color: #999;
}

.submit-button {
  margin: 40rpx 30rpx;
  background-color: #FFD700;
  color: #333;
  border: none;
  padding: 25rpx;
  border-radius: 10rpx;
  font-size: 32rpx;
  font-weight: bold;
}
</style>