From f98ce3fc08450400d9f43d5da34a7da9f269a355 Mon Sep 17 00:00:00 2001
From: woody <woody@163>
Date: Tue, 15 Jul 2025 14:47:04 +0800
Subject: [PATCH] =?UTF-8?q?feat(pay):=20=E6=94=AF=E4=BB=98=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91=E8=BF=81=E7=A7=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 config/mine.js                |   4 +
 pages.json                    |  15 +
 pages/pay/success.vue         | 517 ++++++++++++++++++++++++++++++++++
 pages/refund/detail.vue       | 486 ++++++++++++++++++++++++++++++++
 pages/selfService/index.vue   |   9 +-
 static/images/refund-icon.svg |   1 +
 6 files changed, 1031 insertions(+), 1 deletion(-)
 create mode 100644 pages/pay/success.vue
 create mode 100644 pages/refund/detail.vue
 create mode 100644 static/images/refund-icon.svg

diff --git a/config/mine.js b/config/mine.js
index 1ae8941..214ca52 100644
--- a/config/mine.js
+++ b/config/mine.js
@@ -53,3 +53,7 @@ export const getMarketDynamicBoxCount = params =>
   http.post('/retail-member/api/retail-member/small-box-list', {
     params,
   })
+
+// 退款明细列表
+export const getRefundList = params =>
+  http.get('/sale/api/my-order/refund-list', { params })
diff --git a/pages.json b/pages.json
index 42c9a65..95b5690 100644
--- a/pages.json
+++ b/pages.json
@@ -10,6 +10,21 @@
         "navigationStyle": "custom"
       }
     },
+    {
+      "path": "pages/pay/success",
+      "style": {
+        "navigationBarTitleText": "支付成功",
+        "navigationBarBackgroundColor": "#fff"
+      }
+    },
+    {
+      "path": "pages/refund/detail",
+      "style": {
+        "navigationBarTitleText": "退款列表",
+        "navigationBarBackgroundColor": "#fff",
+        "enablePullDownRefresh": true
+      }
+    },
     {
       "path": "pages/pickupList/index",
       "style": {
diff --git a/pages/pay/success.vue b/pages/pay/success.vue
new file mode 100644
index 0000000..a520336
--- /dev/null
+++ b/pages/pay/success.vue
@@ -0,0 +1,517 @@
+<template>
+  <view class="success-page">
+    <!-- 状态栏占位 -->
+    <view class="status-bar"></view>
+
+    <!-- 成功状态区域 -->
+    <view v-show="payStatus === 1" class="success-section">
+      <view class="success-icon-wrapper">
+        <view class="success-icon">
+          <text class="success-checkmark">✓</text>
+        </view>
+        <view class="success-rings">
+          <view class="ring ring1"></view>
+          <view class="ring ring2"></view>
+          <view class="ring ring3"></view>
+        </view>
+      </view>
+
+      <view class="success-title">{{ paySuccessText }}</view>
+      <view v-if="!isRecharge && payStatus === 1" class="success-subtitle"
+        >您的订单已支付完成</view
+      >
+    </view>
+    <!-- 查询中状态区域 -->
+    <view v-show="payStatus === 0" class="loading-section">
+      <view class="loading-icon-wrapper">
+        <view class="loading-icon">
+          <view class="loading-spinner">
+            <view class="spinner-dot dot1"></view>
+            <view class="spinner-dot dot2"></view>
+            <view class="spinner-dot dot3"></view>
+          </view>
+        </view>
+        <view class="loading-rings">
+          <view class="loading-ring ring1"></view>
+          <view class="loading-ring ring2"></view>
+        </view>
+      </view>
+
+      <view class="loading-title">支付查询中...</view>
+      <view class="loading-subtitle">请稍等，正在确认您的支付状态</view>
+    </view>
+    <!-- 操作按钮区域 -->
+    <view class="action-section">
+      <view class="button-group">
+        <button
+          v-if="!isRecharge"
+          class="btn btn-secondary"
+          @click="goToOrderList"
+        >
+          查看订单
+        </button>
+        <button class="btn btn-primary" @click="goToHome">返回首页</button>
+      </view>
+    </view>
+
+    <successDialog @successClose="successClose" ref="successDialog" />
+  </view>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { payStatus, registerInfo } from '@/config/pay.js'
+import successDialog from '@/components/successDialog.vue'
+
+let paySetTimeoutFlag = null
+let getRegisterInfoTimeoutFlag = null
+export default {
+  name: 'PaySuccess',
+  components: {
+    successDialog,
+  },
+  data() {
+    return {
+      orderCode: '',
+      specialArea: null,
+      isRecharge: undefined,
+      payStatus: 0,
+    }
+  },
+  computed: {
+    ...mapGetters(['userInfo']),
+    paySuccessText() {
+      if (this.isRecharge === undefined) {
+        return ''
+      }
+      if (this.isRecharge === true) {
+        return '充值成功'
+      }
+      return '支付成功'
+    },
+  },
+  onLoad(options) {
+    // 获取传递的参数
+    const extParam = JSON.parse(atob(options.extParam || '{}'))
+    console.log(extParam, '..extParam')
+    this.specialArea = extParam.specialArea
+    this.isRecharge = extParam.isRecharge
+    this.orderCode = extParam.orderCode || ''
+    if (this.orderCode) {
+      setTimeout(() => {
+        this.pollingPayStatus(this.orderCode)
+      }, 500)
+    }
+    // 设置导航栏
+    uni.setNavigationBarTitle({
+      title: '支付成功',
+    })
+  },
+  onUnload() {
+    clearTimeout(paySetTimeoutFlag)
+    clearTimeout(getRegisterInfoTimeoutFlag)
+  },
+  methods: {
+    getRegisterInfo() {
+      registerInfo(this.orderCode).then(res => {
+        if (res.data) {
+          uni.hideLoading()
+          this.$refs.successDialog.showSuccess(res.data)
+        } else {
+          getRegisterInfoTimeoutFlag = setTimeout(() => {
+            this.getRegisterInfo()
+          }, 3000)
+        }
+      })
+    },
+    pollingPayStatus(orderCode) {
+      payStatus({ businessCode: orderCode }).then(res => {
+        if (res.data == 1) {
+          this.payStatus = 1
+          clearTimeout(paySetTimeoutFlag)
+          if ([1, 7, 24].includes(Number(this.specialArea))) {
+            uni.showLoading({
+              title: '注册信息加载中...',
+              mask: false,
+            })
+            setTimeout(() => {
+              this.getRegisterInfo()
+            }, 2000)
+          }
+        } else {
+          paySetTimeoutFlag = setTimeout(() => {
+            this.pollingPayStatus(orderCode)
+          }, 1000)
+        }
+      })
+    },
+
+    // 跳转到订单列表
+    goToOrderList() {
+      uni.redirectTo({
+        url: '/pages/mine/order/index',
+      })
+    },
+    successClose() {
+      uni.redirectTo({
+        url: '/pages/mine/order/index',
+      })
+    },
+
+    // 返回首页
+    goToHome() {
+      uni.switchTab({
+        url: '/pages/index/index',
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.success-page {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #f8fafc 0%, #e3f2fd 100%);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+.status-bar {
+  height: var(--status-bar-height);
+  background: transparent;
+}
+
+.success-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60rpx 40rpx 40rpx;
+  position: relative;
+}
+
+.success-icon-wrapper {
+  position: relative;
+  margin-bottom: 40rpx;
+}
+
+.success-icon {
+  width: 120rpx;
+  height: 120rpx;
+  background: #005bac;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  z-index: 2;
+  box-shadow: 0 8rpx 24rpx rgba(0, 91, 172, 0.3);
+  animation: successBounce 0.6s ease-out;
+}
+
+.success-checkmark {
+  color: #ffffff;
+  font-size: 60rpx;
+  font-weight: bold;
+  line-height: 1;
+}
+
+.success-rings {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1;
+}
+
+.ring {
+  position: absolute;
+  border: 2rpx solid #005bac;
+  border-radius: 50%;
+  opacity: 0;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.ring1 {
+  width: 140rpx;
+  height: 140rpx;
+  animation: ripple 1.5s ease-out 0.2s infinite;
+}
+
+.ring2 {
+  width: 180rpx;
+  height: 180rpx;
+  animation: ripple 1.5s ease-out 0.6s infinite;
+}
+
+.ring3 {
+  width: 220rpx;
+  height: 220rpx;
+  animation: ripple 1.5s ease-out 1s infinite;
+}
+
+.success-title {
+  font-size: 48rpx;
+  font-weight: 600;
+  color: #1a1a1a;
+  margin-bottom: 16rpx;
+  text-align: center;
+}
+
+.success-subtitle {
+  font-size: 28rpx;
+  color: #666666;
+  text-align: center;
+  line-height: 1.4;
+}
+
+.action-section {
+  padding: 32rpx;
+}
+
+.button-group {
+  display: flex;
+  gap: 24rpx;
+}
+
+.btn {
+  flex: 1;
+  height: 88rpx;
+  border-radius: 44rpx;
+  font-size: 32rpx;
+  font-weight: 500;
+  border: none;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+
+  &::after {
+    border: none;
+  }
+
+  &.btn-secondary {
+    background: #ffffff;
+    color: #005bac;
+    border: 2rpx solid #005bac;
+
+    &:active {
+      background: #f8fafc;
+      transform: scale(0.98);
+    }
+  }
+
+  &.btn-primary {
+    background: linear-gradient(135deg, #005bac 0%, #0066cc 100%);
+    color: #ffffff;
+    box-shadow: 0 4rpx 16rpx rgba(0, 91, 172, 0.3);
+
+    &:active {
+      background: linear-gradient(135deg, #004691 0%, #0052a3 100%);
+      transform: scale(0.98);
+    }
+  }
+}
+
+// 动画效果
+@keyframes successBounce {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1.2);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes ripple {
+  0% {
+    opacity: 0.6;
+    transform: translate(-50%, -50%) scale(0.1);
+  }
+  100% {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+.spinner-dot {
+  position: relative;
+  width: 12rpx;
+  height: 12rpx;
+  background: #ffffff;
+  border-radius: 50%;
+  box-shadow: 0 2rpx 4rpx rgba(255, 255, 255, 0.3);
+}
+
+.spinner-dot.dot1 {
+  animation: dotBlink 1.4s ease-in-out infinite;
+}
+
+.spinner-dot.dot2 {
+  animation: dotBlink 1.4s ease-in-out 0.2s infinite;
+}
+
+.spinner-dot.dot3 {
+  animation: dotBlink 1.4s ease-in-out 0.4s infinite;
+}
+
+.loading-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60rpx 40rpx 40rpx;
+  position: relative;
+}
+
+.loading-icon-wrapper {
+  position: relative;
+  margin-bottom: 40rpx;
+}
+
+.loading-icon {
+  width: 120rpx;
+  height: 120rpx;
+  background: linear-gradient(135deg, #005bac 0%, #0066cc 100%);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  z-index: 2;
+  box-shadow: 0 8rpx 32rpx rgba(0, 91, 172, 0.4);
+}
+
+.loading-spinner {
+  position: relative;
+  width: 80rpx;
+  height: 20rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.loading-rings {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1;
+}
+
+.loading-ring {
+  position: absolute;
+  border: 2rpx solid #005bac;
+  border-radius: 50%;
+  opacity: 0;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.loading-ring.ring1 {
+  width: 140rpx;
+  height: 140rpx;
+  animation: loadingRipple 2s ease-out infinite;
+}
+
+.loading-ring.ring2 {
+  width: 180rpx;
+  height: 180rpx;
+  animation: loadingRipple 2s ease-out 0.8s infinite;
+}
+
+.loading-title {
+  font-size: 48rpx;
+  font-weight: 600;
+  color: #2c3e50;
+  margin-bottom: 16rpx;
+  text-align: center;
+  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
+}
+
+.loading-subtitle {
+  font-size: 28rpx;
+  color: #7f8c8d;
+  text-align: center;
+  line-height: 1.4;
+  opacity: 0.9;
+}
+
+@keyframes dotBlink {
+  0% {
+    opacity: 0.4;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.4;
+  }
+}
+
+@keyframes loadingRipple {
+  0% {
+    opacity: 0.8;
+    transform: translate(-50%, -50%) scale(0.1);
+  }
+  100% {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+// 暗黑模式适配
+@media (prefers-color-scheme: dark) {
+  .success-page {
+    background: linear-gradient(135deg, #1a1a1a 0%, #2d3748 100%);
+  }
+
+  .success-title {
+    color: #ffffff;
+  }
+
+  .success-subtitle {
+    color: #a0aec0;
+  }
+
+  .loading-title {
+    color: #ffffff;
+  }
+
+  .loading-subtitle {
+    color: #a0aec0;
+  }
+}
+
+// 适配不同屏幕尺寸
+@media screen and (max-width: 375px) {
+  .success-icon {
+    width: 100rpx;
+    height: 100rpx;
+  }
+
+  .success-checkmark {
+    font-size: 50rpx;
+  }
+
+  .success-title {
+    font-size: 42rpx;
+  }
+
+  .button-group {
+    flex-direction: column;
+    gap: 16rpx;
+  }
+}
+</style>
diff --git a/pages/refund/detail.vue b/pages/refund/detail.vue
new file mode 100644
index 0000000..daf13f9
--- /dev/null
+++ b/pages/refund/detail.vue
@@ -0,0 +1,486 @@
+<template>
+  <view class="refund-container">
+    <!-- 导航栏 -->
+    <u-navbar
+      title="退款列表"
+      :border-bottom="false"
+      :background="{ backgroundColor: '#005bac' }"
+      title-color="#fff"
+    />
+    <view class="tips">
+      <u-icon name="info-circle" color="#005bac" size="20"></u-icon>
+      <text class="tips-text">如有疑问，请联系客服</text>
+    </view>
+    <!-- <view class="date-filter">
+      <view class="date-picker-container">
+        <view class="date-input-wrapper" @click="showStartDatePicker = true">
+          <text>{{ startDate || '开始时间' }}</text>
+        </view>
+        <text class="separator">至</text>
+        <view class="date-input-wrapper" @click="showEndDatePicker = true">
+          <text>{{ endDate || '结束时间' }}</text>
+        </view>
+      </view>
+      <button class="search-button" @click="handleSearch">
+        <u-icon name="search" color="#ffffff" size="20" />
+      </button>
+    </view> -->
+    <!-- 空状态 -->
+    <u-empty
+      mode="data"
+      v-if="refundList.length === 0 && !loading"
+      text="暂无退款记录"
+    ></u-empty>
+    <!-- 退款列表 -->
+    <view class="refund-list">
+      <u-list @scrolltolower="loadMore" :show-scrollbar="false">
+        <u-list-item v-for="(item, index) in refundList" :key="index">
+          <view class="refund-item">
+            <view class="refund-header">
+              <view class="order-info">
+                <text class="order-number"
+                  >订单编号：{{ item.businessCode }}</text
+                >
+                <text class="member-code">会员编号：{{ item.memberCode }}</text>
+              </view>
+              <view
+                class="refund-status"
+                :class="getStatusClass(item.refundStatus)"
+              >
+                {{ getStatusText(item.refundStatus) }}
+              </view>
+            </view>
+            <view class="refund-content">
+              <view class="refund-amount">
+                <text class="amount-label">退款金额</text>
+                <text class="amount-value"
+                  >¥{{ stateFormat(item.refundMoney) }}</text
+                >
+              </view>
+              <view class="refund-time">
+                <text class="time-label">退款时间</text>
+                <text class="time-value">{{
+                  formatDate(item.finishTime)
+                }}</text>
+              </view>
+            </view>
+          </view>
+        </u-list-item>
+      </u-list>
+
+      <!-- 加载更多 -->
+      <u-loadmore :status="loadStatus" />
+    </view>
+
+    <u-datetime-picker
+      :show="showStartDatePicker"
+      v-model="startDate"
+      mode="date"
+      @confirm="onStartDateConfirm"
+      @cancel="showStartDatePicker = false"
+      style="flex: 0"
+    ></u-datetime-picker>
+    <u-datetime-picker
+      :show="showEndDatePicker"
+      v-model="endDate"
+      mode="date"
+      @confirm="onEndDateConfirm"
+      @cancel="showEndDatePicker = false"
+      style="flex: 0"
+    ></u-datetime-picker>
+  </view>
+</template>
+
+<script>
+import { getRefundList } from '@/config/mine'
+import dayjs from '../../uni_modules/uview-ui/libs/util/dayjs.js'
+
+export default {
+  name: 'RefundDetail',
+  data() {
+    return {
+      // 筛选条件
+      startDate: '',
+      endDate: '',
+      showStartDatePicker: false,
+      showEndDatePicker: false,
+      maxDate: new Date().getTime(),
+
+      // 列表数据
+      refundList: [],
+      loading: false,
+      loadStatus: 'loadmore',
+
+      // 分页参数
+      currentPage: 1,
+      pageSize: 10,
+      hasMore: true,
+
+      // 状态映射
+      statusMap: {
+        0: '退款申请中',
+        1: '退款中',
+        2: '已退款',
+        3: '退款失败',
+      },
+    }
+  },
+  onLoad() {
+    this.loadRefundList()
+  },
+  onPullDownRefresh() {
+    this.refreshList()
+  },
+  methods: {
+    // 加载退款列表
+    async loadRefundList(isLoadMore = false) {
+      if (this.loading) return
+
+      this.loading = true
+      this.loadStatus = 'loading'
+
+      try {
+        const params = {
+          pageNum: this.currentPage,
+          pageSize: this.pageSize,
+          startDate: this.startDate,
+          endDate: this.endDate,
+        }
+
+        const res = await getRefundList(params)
+
+        if (res.code === 200) {
+          const newList = res.rows || []
+
+          if (isLoadMore) {
+            this.refundList = [...this.refundList, ...newList]
+          } else {
+            this.refundList = newList
+          }
+
+          // 判断是否还有更多数据
+          this.hasMore = newList.length === this.pageSize
+          this.loadStatus = this.hasMore ? 'loadmore' : 'nomore'
+
+          if (this.hasMore) {
+            this.currentPage++
+          }
+        } else {
+          this.$u.toast(res.message || '加载失败')
+          this.loadStatus = 'loadmore'
+        }
+      } catch (error) {
+        console.error('加载退款列表失败：', error)
+        this.$u.toast('加载失败，请重试')
+        this.loadStatus = 'loadmore'
+      } finally {
+        this.loading = false
+        uni.stopPullDownRefresh()
+      }
+    },
+    stateFormat(val) {
+      if (val) {
+        return Number(val)
+          .toFixed(2)
+          .replace(/(\d)(?=(\d{3})+\.)/g, ($0, $1) => {
+            return $1 + ','
+          })
+          .replace(/\.$/, '')
+      }
+    },
+    // 加载更多
+    loadMore() {
+      if (this.hasMore && !this.loading) {
+        this.loadRefundList(true)
+      }
+    },
+
+    // 刷新列表
+    refreshList() {
+      this.currentPage = 1
+      this.hasMore = true
+      this.loadRefundList()
+    },
+
+    // 搜索
+    handleSearch() {
+      if (this.startDate && this.endDate && this.startDate > this.endDate) {
+        this.$u.toast('开始日期不能大于结束日期')
+        return
+      }
+      this.refreshList()
+    },
+
+    // 重置
+    handleReset() {
+      this.startDate = ''
+      this.endDate = ''
+      this.refreshList()
+    },
+
+    onStartDateConfirm(e) {
+      this.startDate = this.formatDate(new Date(e.value))
+      this.startDateValue = e.value
+      this.showStartDatePicker = false
+    },
+    onEndDateConfirm(e) {
+      this.endDate = this.formatDate(new Date(e.value))
+      this.endDateValue = e.value
+      this.showEndDatePicker = false
+    },
+    // 格式化显示日期
+    formatDate(dateString) {
+      if (!dateString) return ''
+      return dayjs(dateString).format('YYYY-MM-DD HH:mm:ss')
+    },
+    // 获取状态文本
+    getStatusText(status) {
+      console.log(status)
+      return this.statusMap[status] || '未知状态'
+    },
+    // 获取状态样式类
+    getStatusClass(status) {
+      const classMap = {
+        0: 'status-pending',
+        1: 'status-failed',
+        2: 'status-success',
+        3: 'status-cancelled',
+      }
+      return classMap[status] || 'status-default'
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.refund-container {
+  min-height: 100vh;
+  background-color: #f5f5f5;
+}
+
+.tips {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f8f9fa;
+  margin: 16rpx 30rpx;
+  padding: 12rpx 20rpx;
+  border-radius: 4rpx;
+  border-left: 3rpx solid #005bac;
+
+  .tips-text {
+    font-size: 22rpx;
+    color: #005bac;
+    font-weight: 400;
+    margin-left: 8rpx;
+    line-height: 1.5;
+  }
+}
+
+.filter-section {
+  background-color: #fff;
+  padding: 20rpx 30rpx;
+  margin-bottom: 20rpx;
+
+  .date-filter {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20rpx;
+
+    .date-item {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 20rpx;
+      border: 1px solid #e4e4e4;
+      border-radius: 8rpx;
+      background-color: #fafafa;
+
+      .date-label {
+        font-size: 28rpx;
+        color: #666;
+      }
+
+      .date-value {
+        font-size: 28rpx;
+        color: #333;
+        margin-left: 10rpx;
+      }
+    }
+
+    .date-separator {
+      padding: 0 20rpx;
+      font-size: 28rpx;
+      color: #666;
+    }
+  }
+
+  .filter-actions {
+    display: flex;
+    justify-content: center;
+    gap: 20rpx;
+  }
+}
+
+.refund-list {
+  padding: 10rpx 30rpx 0;
+}
+
+.refund-item {
+  background-color: #fff;
+  border-radius: 12rpx;
+  padding: 30rpx;
+  margin-bottom: 20rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+
+  .refund-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 20rpx;
+
+    .order-info {
+      flex: 1;
+
+      .order-number {
+        display: block;
+        font-size: 28rpx;
+        color: #333;
+        font-weight: 500;
+        margin-bottom: 8rpx;
+      }
+
+      .member-code {
+        font-size: 24rpx;
+        color: #666;
+      }
+    }
+
+    .refund-status {
+      padding: 8rpx 16rpx;
+      border-radius: 20rpx;
+      font-size: 24rpx;
+      font-weight: 500;
+
+      &.status-pending {
+        background-color: #fff7e6;
+        color: #fa8c16;
+      }
+
+      &.status-success {
+        background-color: #f6ffed;
+        color: #52c41a;
+      }
+
+      &.status-failed {
+        background-color: #fff2f0;
+        color: #ff4d4f;
+      }
+
+      &.status-cancelled {
+        background-color: #f5f5f5;
+        color: #8c8c8c;
+      }
+
+      &.status-default {
+        background-color: #f5f5f5;
+        color: #666;
+      }
+    }
+  }
+
+  .refund-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .refund-amount,
+    .refund-time {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+
+      .amount-label,
+      .time-label {
+        font-size: 24rpx;
+        color: #666;
+        margin-bottom: 8rpx;
+      }
+
+      .amount-value {
+        font-size: 32rpx;
+        color: #005bac;
+        font-weight: 600;
+      }
+
+      .time-value {
+        font-size: 28rpx;
+        color: #333;
+      }
+    }
+
+    .refund-time {
+      align-items: flex-end;
+    }
+  }
+}
+
+// 响应式适配
+@media (max-width: 750rpx) {
+  .filter-section {
+    .date-filter {
+      flex-direction: column;
+      gap: 20rpx;
+
+      .date-separator {
+        display: none;
+      }
+    }
+  }
+}
+.date-filter {
+  display: flex;
+  align-items: center;
+  padding: 15px 10px;
+  background-color: #ffffff;
+
+  .date-picker-container {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    background-color: #f2f2f2;
+    border-radius: 8px;
+    padding: 4px;
+    .date-input-wrapper {
+      flex: 1;
+      text-align: center;
+      padding: 6px 0;
+      font-size: 14px;
+      color: #333;
+    }
+    .separator {
+      color: #999;
+      margin: 0 5px;
+    }
+  }
+
+  .search-button {
+    width: 44px;
+    height: 36px;
+    margin-left: 10px;
+    background-color: #007aff;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    padding: 0;
+    line-height: 1;
+    border: none;
+    &:after {
+      border: none;
+    }
+  }
+}
+</style>
diff --git a/pages/selfService/index.vue b/pages/selfService/index.vue
index 131e966..e6621d8 100644
--- a/pages/selfService/index.vue
+++ b/pages/selfService/index.vue
@@ -61,6 +61,13 @@ export default {
           path: '/pages/selfService/realName/realName',
           id: '9',
         },
+        {
+          name: '订单退款明细',
+          url: '../../static/images/refund-icon.svg',
+          path: '/pages/refund/detail',
+          id: '9',
+          alwaysShow: true,
+        },
       ],
       theselfHeader: [],
       userInfo: '',
@@ -102,7 +109,7 @@ export default {
         })
         const theselfHeader = []
         this.selfServiceList.forEach(element => {
-          if (element.ifshow == 0) {
+          if (element.ifshow == 0 || element.alwaysShow) {
             theselfHeader.push(element)
           }
         })
diff --git a/static/images/refund-icon.svg b/static/images/refund-icon.svg
new file mode 100644
index 0000000..fa25b06
--- /dev/null
+++ b/static/images/refund-icon.svg
@@ -0,0 +1 @@
+<svg t="1751697878770" class="icon" viewBox="0 0 1105 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6062" width="256" height="256"><path d="M395.815385 303.419077 490.692923 303.419077C495.655385 319.409231 501.720615 331.539692 517.159385 357.454769L598.803692 497.585231 680.487385 358.006154C695.926154 332.091077 702.542769 318.306462 706.953846 303.419077L802.382769 303.419077C795.214769 312.792615 773.159385 344.221538 763.234462 360.211692L687.104 481.595077 717.981538 481.595077C742.793846 481.595077 757.720615 480.492308 775.916308 477.184L775.916308 540.081231C757.169231 536.772923 742.242462 535.670154 717.981538 535.670154L653.430154 535.670154 635.234462 564.342154 635.234462 580.332308 716.878769 580.332308C741.691077 580.332308 755.515077 579.229538 774.813538 575.921231L774.813538 638.818462C756.066462 635.510154 741.139692 634.407385 716.878769 634.407385L635.234462 634.407385 635.234462 671.940923C635.234462 703.369846 636.337231 720.462769 639.645538 742.557538L558.001231 742.557538C560.758154 721.014154 562.412308 698.958769 562.412308 671.940923L562.412308 634.407385 479.113846 634.407385C454.301538 634.407385 439.926154 635.510154 421.179077 638.818462L421.179077 575.921231C440.477538 579.229538 453.750154 580.332308 479.113846 580.332308L562.412308 580.332308 562.412308 563.790769 544.216615 535.670154 480.216615 535.670154C454.852923 535.670154 441.028923 536.772923 422.281846 540.081231L422.281846 477.184C440.477538 480.492308 454.852923 481.595077 480.216615 481.595077L511.094154 481.595077 434.412308 360.211692C418.422154 335.399385 404.086154 313.895385 395.815385 303.419077ZM591.990154 1024C440.162462 1024 304.167385 957.518769 210.432 852.558769L272.699077 804.076308C351.901538 890.643692 465.447385 945.230769 591.990154 945.230769 831.251692 945.230769 1025.220923 751.261538 1025.220923 512 1025.220923 272.738462 831.251692 78.769231 591.990154 78.769231 396.8 78.769231 232.172308 208.029538 178.057846 385.536L243.436308 316.534154C257.378462 301.843692 279.630769 301.489231 293.139692 315.746462 306.609231 330.003692 306.254769 353.476923 292.312615 368.167385L166.124308 501.326769C156.396308 511.606154 142.651077 514.402462 130.638769 510.582154 116.224 513.654154 101.021538 507.313231 93.262769 493.016615L5.12 330.948923C-4.608 313.028923 1.142154 290.146462 18.038154 279.788308 34.894769 269.469538 56.438154 275.613538 66.166154 293.494154L102.872615 360.999385C167.345231 151.985231 361.826462 0 591.990154 0 874.771692 0 1103.990154 229.218462 1103.990154 512 1103.990154 794.781538 874.771692 1024 591.990154 1024Z" fill="#f52a10" p-id="6063"></path></svg>