xdd-uniapp-new/pkg_product/views/sojoumOrderRefund.vue

<template>
  <view class="refund-page v12-px-3 v12-pt-3">
    <!-- 退款金额部分 -->
    <view class="refund-amount-section">
      <view class="v12-justify-between v12-align-center">
        <view>
          <view class="v12-font-28 v12-font-bold">退款金额</view>
          <view class="return-method">退回原支付方</view>
        </view>
        <view class="v12-font-32 v12-primary-text v12-font-bold">¥{{refundAmount}}</view>
      </view>
      <u-divider></u-divider>
      <view class="order-amount">
        <text class="v12-font-28 v12-font-bold">订单支付金额</text>
        <text class="v12-font-32 v12-font-bold">¥{{orderAmount}}</text>
      </view>
      <view class="deduction-amount v12-mt-2">
        <text class="v12-font-24 v12-primary-text">退款违约金</text>
        <text class="v12-primary-text">¥{{deductionAmount}}</text>
      </view>
    </view>

    <!-- 退款原因部分 -->
    <view class="refund-reason-section v12-mt-3">
      <view class="reason-title">退款原因（单选）</view>
      <view class="reason-options">
        <view 
          v-for="(reason, index) in refundReasons" 
          :key="index"
          class="reason-item"
          :class="{'selected': selectedReason === reason}"
          @click="selectReason(reason)"
        >
          {{reason}}
        </view>
      </view>
    </view>

    <!-- 其他原因输入框 -->
    <view class="other-reason-section v12-mt-3" v-if="selectedReason === '其他'">
      <view class="other-reason-title">其他个人原因</view>
      <textarea 
        class="reason-input"
        v-model="otherReason"
        placeholder="请输入其他退款原因"
        maxlength="200"
      />
    </view>

    <!-- 提交按钮 -->
    <view class="v12-mt-3">
      <button class="submit-btn v12-primary v12-white-text v12-radius-100 v12-font-32" block @click="submitRefund">点击确认退款</button>
    </view>
  </view>
</template>

<script>
import { sojoumOrderRefundInfo, sojoumOrderRefund } from '@/api/sojoumOrder.js'
export default {
  data() {
    return {
      refundAmount: '',
      orderAmount: '',
      deductionAmount: '',
      refundReasons: [
        '行程变更',
        '定错时间/地址',
        '实际与页面不符',
        '个人突发情况',
        '沟通问题',
        '其他'
      ],
      selectedReason: '',
      otherReason: '',
      key: ''
    }
  },
  onLoad(opts) {
    this.key = opts.id
    this.getRefundInfo(opts.id)
  },
  methods: {
    getRefundInfo(id) {
      sojoumOrderRefundInfo({
        orderId: id
      }).then(res => {
        if (res.status === 200) {
          this.refundAmount = res.data.refundPrice
          this.orderAmount = res.data.payPrice
          this.deductionAmount = res.data.penalty
        }
      })
    },
    selectReason(reason) {
      this.selectedReason = reason
    },
    submitRefund() {
      // TODO: 实现退款提交逻辑
      // orderId string 订单号
      // refundReasonWap string 选择的退款原因
      // refundReasonWapExplain string 退款原因说明（其他个人原因）
      const refundData = {
        orderId: this.key,
        refundReasonWap: this.selectedReason,
        refundReasonWapExplain: this.selectedReason === '其他' ? this.otherReason : ''
      }
      if(!this.selectedReason) {
        uni.showToast({
          title: '请选择退款原因',
          icon: 'none'
        })
        return
      }
      if(this.selectedReason === '其他' && !this.otherReason) {
        uni.showToast({
          title: '请输入其他退款原因',
          icon: 'none'
        })
        return
      }
      uni.showLoading({
        title: '加载中...',
        mask: true,
      })
      sojoumOrderRefund(refundData).then(res => {
        if (res.status === 200) {
          uni.showToast({
            title: '退款申请已提交',
            icon: 'success'
          })
          uni.navigateTo({
            url: '/pkg_product/views/sojoumOrderDetails?id=' + this.key
          })
        }
      }).finally(() => {
        uni.hideLoading();
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.refund-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  
  .refund-amount-section {
    background-color: #fff;
    padding: 30rpx;
    border-radius: 20rpx;

    .amount-title {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 20rpx;
    }

    .return-method {
      font-size: 22rpx;
      color: #999;
    }

    .amount {
      font-size: 60rpx;
      font-weight: bold;
      margin: 20rpx 0;
    }

    .order-amount, .deduction-amount {
      display: flex;
      justify-content: space-between;
      font-size: 26rpx;
      color: #666;
      margin-top: 10rpx;
    }
  }

  .refund-reason-section {
    background-color: #fff;
    padding: 30rpx;
    border-radius: 20rpx;

    .reason-title {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 20rpx;
    }

    .reason-options {
      display: flex;
      flex-wrap: wrap;
      gap: 20rpx;

      .reason-item {
        padding: 15rpx 20rpx;
        border-radius: 16rpx;
        font-size: 26rpx;
        color: #333;
        background-color: #fff;
        border: 2rpx solid #333;
        &.selected {
          color: #fff;
          border-color: #F22535;
          background-color: #F22535;
        }
      }
    }
  }

  .other-reason-section {
    background-color: #fff;
    padding: 30rpx;
    border-radius: 20rpx;

    .other-reason-title {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 20rpx;
    }

    .reason-input {
      width: 100%;
      height: 200rpx;
      padding: 20rpx;
      font-size: 26rpx;
      background-color: #f5f5f5;
      border-radius: 10rpx;
    }
  }

  .submit-section {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30rpx;
    background-color: #fff;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

    .submit-btn {
      width: 100%;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      color: #fff;
      font-size: 28rpx;
      border-radius: 40rpx;
      border: none;
      letter-spacing: 4rpx;
      font-weight: 500;
    }
  }
}
</style>