YGChatCS/pages/order/components/RefundPopup/example.vue

<template>
  <view class="example-page">
    <view class="page-header">
      <text class="page-title">订单详情</text>
    </view>

    <view class="order-info">
      <view class="order-item">
        <text class="item-name">鲜牛肉红烧牛肉面二两+例汤1份</text>
        <text class="item-price">¥128</text>
      </view>
      <view class="order-item">
        <text class="item-name">红油干拌鲜肉云吞+例汤1份</text>
        <text class="item-price">¥50</text>
      </view>
      <view class="order-total">
        <text class="total-label">总计：</text>
        <text class="total-price">¥178</text>
      </view>
    </view>

    <view class="order-actions">
      <button class="action-button refund-btn" @click="showRefundPopup">
        申请退款
      </button>
      <button class="action-button contact-btn" @click="contactService">
        联系客服
      </button>
    </view>

    <!-- 退款弹窗组件 -->
    <RefundPopup
      v-model="refundVisible"
      :refund-type="refundType"
      :refund-amount="refundAmount"
      @policy-click="viewRefundPolicy"
      @confirm-click="handleRefundConfirm"
      @close="handleRefundClose"
    />
  </view>
</template>

<script setup>
import { ref } from 'vue'
import RefundPopup from './index.vue'

// 响应式数据
const refundVisible = ref(false)
const refundType = ref('partial_refund')
const refundAmount = ref(89) // 50% 退款

// 方法定义
const showRefundPopup = () => {
  // 根据订单状态和时间判断退款类型
  const orderTime = new Date('2024-01-15 10:00:00')
  const currentTime = new Date()
  const hoursDiff = (currentTime - orderTime) / (1000 * 60 * 60)
  
  if (hoursDiff < 12) {
    refundType.value = 'no_refund'
    refundAmount.value = 0
  } else if (hoursDiff < 24) {
    refundType.value = 'partial_refund'
    refundAmount.value = 89 // 50% 退款
  } else if (hoursDiff < 48) {
    refundType.value = 'free_cancel'
    refundAmount.value = 178 // 全额退款
  } else {
    refundType.value = 'anytime_refund'
    refundAmount.value = 178
  }
  
  refundVisible.value = true
}

const viewRefundPolicy = () => {
  // 跳转到退款政策页面
  uni.navigateTo({
    url: '/pages/policy/refund'
  })
}

const handleRefundConfirm = () => {
  if (refundType.value === 'no_refund') {
    uni.showToast({
      title: '已了解退款政策',
      icon: 'success'
    })
    return
  }
  
  // 提交退款申请
  uni.showLoading({
    title: '提交中...'
  })
  
  // 模拟API调用
  setTimeout(() => {
    uni.hideLoading()
    uni.showToast({
      title: '退款申请已提交',
      icon: 'success'
    })
    
    // 可以跳转到退款状态页面
    // uni.navigateTo({
    //   url: '/pages/refund/status'
    // })
  }, 2000)
}

const handleRefundClose = () => {
  console.log('退款弹窗已关闭')
}

const contactService = () => {
  uni.showActionSheet({
    itemList: ['在线客服', '电话客服', '意见反馈'],
    success: (res) => {
      switch (res.tapIndex) {
        case 0:
          // 打开在线客服
          uni.navigateTo({
            url: '/pages/service/chat'
          })
          break
        case 1:
          // 拨打客服电话
          uni.makePhoneCall({
            phoneNumber: '400-123-4567'
          })
          break
        case 2:
          // 打开意见反馈
          uni.navigateTo({
            url: '/pages/feedback/index'
          })
          break
      }
    }
  })
}
</script>

<style lang="scss" scoped>
.example-page {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  text-align: center;
  margin-bottom: 20px;
  
  .page-title {
    font-size: 18px;
    font-weight: 600;
    color: #333333;
  }
}

.order-info {
  background: #ffffff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  
  .order-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    
    &:last-of-type {
      border-bottom: none;
    }
    
    .item-name {
      flex: 1;
      font-size: 14px;
      color: #333333;
      line-height: 1.4;
    }
    
    .item-price {
      font-size: 16px;
      color: #ff6b35;
      font-weight: 600;
    }
  }
  
  .order-total {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-top: 12px;
    margin-top: 12px;
    border-top: 2px solid #f0f0f0;
    
    .total-label {
      font-size: 16px;
      color: #333333;
      font-weight: 600;
    }
    
    .total-price {
      font-size: 20px;
      color: #ff6b35;
      font-weight: 700;
      margin-left: 8px;
    }
  }
}

.order-actions {
  display: flex;
  gap: 16px;
  
  .action-button {
    flex: 1;
    height: 48px;
    border: none;
    border-radius: 24px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    
    &.refund-btn {
      background: #ff6b35;
      color: #ffffff;
      
      &:active {
        background: #e55a2b;
        transform: scale(0.98);
      }
    }
    
    &.contact-btn {
      background: #007aff;
      color: #ffffff;
      
      &:active {
        background: #0056cc;
        transform: scale(0.98);
      }
    }
  }
}

// 响应式适配
@media screen and (max-width: 375px) {
  .example-page {
    padding: 16px;
  }
  
  .order-info {
    padding: 16px;
    margin-bottom: 16px;
  }
  
  .order-actions {
    gap: 12px;
    
    .action-button {
      height: 44px;
      font-size: 15px;
    }
  }
}
</style>