通过微信开发者工具 商城模板 创建新小程序

mini-program/pages/order/after-service-detail/api.js

@@ -0,0 +1,34 @@
+import { resp } from '../after-service-list/api';
+import dayjs from 'dayjs';
+import { mockIp, mockReqId } from '../../../utils/mock';
+
+export const formatTime = (date, template) => dayjs(date).format(template);
+
+export function getRightsDetail({ rightsNo }) {
+  const _resq = {
+    data: {},
+    code: 'Success',
+    msg: null,
+    requestId: mockReqId(),
+    clientIp: mockIp(),
+    rt: 79,
+    success: true,
+  };
+  _resq.data =
+    resp.data.dataList.filter((item) => item.rights.rightsNo === rightsNo) ||
+    {};
+  return Promise.resolve(_resq);
+}
+
+export function cancelRights() {
+  const _resq = {
+    data: {},
+    code: 'Success',
+    msg: null,
+    requestId: mockReqId(),
+    clientIp: mockIp(),
+    rt: 79,
+    success: true,
+  };
+  return Promise.resolve(_resq);
+}

mini-program/pages/order/after-service-detail/index.js

@@ -0,0 +1,205 @@
+import Toast from 'tdesign-miniprogram/toast/index';
+import { ServiceType, ServiceTypeDesc, ServiceStatus } from '../config';
+import { formatTime, getRightsDetail } from './api';
+
+const TitleConfig = {
+  [ServiceType.ORDER_CANCEL]: '退款详情',
+  [ServiceType.ONLY_REFUND]: '退款详情',
+  [ServiceType.RETURN_GOODS]: '退货退款详情',
+};
+
+Page({
+  data: {
+    pageLoading: true,
+    serviceRaw: {},
+    service: {},
+    deliveryButton: {},
+    gallery: {
+      current: 0,
+      show: false,
+      proofs: [],
+    },
+    showProofs: false,
+    backRefresh: false,
+  },
+
+  onLoad(query) {
+    this.rightsNo = query.rightsNo;
+    this.inputDialog = this.selectComponent('#input-dialog');
+    this.init();
+  },
+
+  onShow() {
+    // 当从其他页面返回，并且 backRefresh 被置为 true 时，刷新数据
+    if (!this.data.backRefresh) return;
+    this.init();
+    this.setData({ backRefresh: false });
+  },
+
+  // 页面刷新，展示下拉刷新
+  onPullDownRefresh_(e) {
+    const { callback } = e.detail;
+    return this.getService().then(() => callback && callback());
+  },
+
+  init() {
+    this.setData({ pageLoading: true });
+    this.getService().then(() => {
+      this.setData({ pageLoading: false });
+    });
+  },
+
+  getService() {
+    const params = { rightsNo: this.rightsNo };
+    return getRightsDetail(params).then((res) => {
+      const serviceRaw = res.data[0];
+      // 滤掉填写运单号、修改运单号按钮，这两个按钮特殊处理，不在底部按钮栏展示
+      if (!serviceRaw.buttonVOs) serviceRaw.buttonVOs = [];
+      const deliveryButton = {};
+      const service = {
+        id: serviceRaw.rights.rightsNo,
+        serviceNo: serviceRaw.rights.rightsNo,
+        storeName: serviceRaw.rights.storeName,
+        type: serviceRaw.rights.rightsType,
+        typeDesc: ServiceTypeDesc[serviceRaw.rights.rightsType],
+        status: serviceRaw.rights.rightsStatus,
+        statusIcon: this.genStatusIcon(serviceRaw.rights),
+        statusName: serviceRaw.rights.userRightsStatusName,
+        statusDesc: serviceRaw.rights.userRightsStatusDesc,
+        amount: serviceRaw.rights.refundRequestAmount,
+        goodsList: (serviceRaw.rightsItem || []).map((item, i) => ({
+          id: i,
+          thumb: item.goodsPictureUrl,
+          title: item.goodsName,
+          specs: (item.specInfo || []).map((s) => s.specValues || ''),
+          itemRefundAmount: item.itemRefundAmount,
+          rightsQuantity: item.rightsQuantity,
+        })),
+        orderNo: serviceRaw.rights.orderNo, // 订单编号
+        rightsNo: serviceRaw.rights.rightsNo, // 售后服务单号
+        rightsReasonDesc: serviceRaw.rights.rightsReasonDesc, // 申请售后原因
+        isRefunded: serviceRaw.rights.userRightsStatus === ServiceStatus.REFUNDED, // 是否已退款
+        refundMethodList: (serviceRaw.refundMethodList || []).map((m) => ({
+          name: m.refundMethodName,
+          amount: m.refundMethodAmount,
+        })), // 退款明细
+        refundRequestAmount: serviceRaw.rights.refundRequestAmount, // 申请退款金额
+        payTraceNo: serviceRaw.rightsRefund.traceNo, // 交易流水号
+        createTime: formatTime(parseFloat(`${serviceRaw.rights.createTime}`), 'YYYY-MM-DD HH:mm'), // 申请时间
+        logisticsNo: serviceRaw.logisticsVO.logisticsNo, // 退货物流单号
+        logisticsCompanyName: serviceRaw.logisticsVO.logisticsCompanyName, // 退货物流公司
+        logisticsCompanyCode: serviceRaw.logisticsVO.logisticsCompanyCode, // 退货物流公司
+        remark: serviceRaw.logisticsVO.remark, // 退货备注
+        receiverName: serviceRaw.logisticsVO.receiverName, // 收货人
+        receiverPhone: serviceRaw.logisticsVO.receiverPhone, // 收货人电话
+        receiverAddress: this.composeAddress(serviceRaw), // 收货人地址
+        applyRemark: serviceRaw.rightsRefund.refundDesc, // 申请退款时的填写的说明
+        buttons: serviceRaw.buttonVOs || [],
+        logistics: serviceRaw.logisticsVO,
+      };
+      const proofs = serviceRaw.rights.rightsImageUrls || [];
+      this.setData({
+        serviceRaw,
+        service,
+        deliveryButton,
+        'gallery.proofs': proofs,
+        showProofs:
+          serviceRaw.rights.userRightsStatus === ServiceStatus.PENDING_VERIFY &&
+          (service.applyRemark || proofs.length > 0),
+      });
+      wx.setNavigationBarTitle({
+        title: TitleConfig[service.type],
+      });
+    });
+  },
+
+  composeAddress(service) {
+    return [
+      service.logisticsVO.receiverProvince,
+      service.logisticsVO.receiverCity,
+      service.logisticsVO.receiverCountry,
+      service.logisticsVO.receiverArea,
+      service.logisticsVO.receiverAddress,
+    ]
+      .filter((item) => !!item)
+      .join(' ');
+  },
+
+  onRefresh() {
+    this.init();
+  },
+
+  editLogistices() {
+    this.setData({
+      inputDialogVisible: true,
+    });
+    this.inputDialog.setData({
+      cancelBtn: '取消',
+      confirmBtn: '确定',
+    });
+    this.inputDialog._onConfirm = () => {
+      Toast({
+        message: '确定填写物流单号',
+      });
+    };
+  },
+
+  onProofTap(e) {
+    if (this.data.gallery.show) {
+      this.setData({
+        'gallery.show': false,
+      });
+      return;
+    }
+    const { index } = e.currentTarget.dataset;
+    this.setData({
+      'gallery.show': true,
+      'gallery.current': index,
+    });
+  },
+
+  onGoodsCardTap(e) {
+    const { index } = e.currentTarget.dataset;
+    const goods = this.data.serviceRaw.rightsItem[index];
+    wx.navigateTo({ url: `/pages/goods/details/index?skuId=${goods.skuId}` });
+  },
+
+  onServiceNoCopy() {
+    wx.setClipboardData({
+      data: this.data.service.serviceNo,
+    });
+  },
+
+  onAddressCopy() {
+    wx.setClipboardData({
+      data: `${this.data.service.receiverName}  ${this.data.service.receiverPhone}\n${this.data.service.receiverAddress}`,
+    });
+  },
+
+  /** 获取状态ICON */
+  genStatusIcon(item) {
+    const { userRightsStatus, afterSaleRequireType } = item;
+    switch (userRightsStatus) {
+      // 退款成功
+      case ServiceStatus.REFUNDED: {
+        return 'succeed';
+      }
+      // 已取消、已关闭
+      case ServiceStatus.CLOSED: {
+        return 'indent_close';
+      }
+      default: {
+        switch (afterSaleRequireType) {
+          case 'REFUND_MONEY': {
+            return 'goods_refund';
+          }
+          case 'REFUND_GOODS_MONEY':
+            return 'goods_return';
+          default: {
+            return 'goods_return';
+          }
+        }
+      }
+    }
+  },
+});

mini-program/pages/order/after-service-detail/index.json

@@ -0,0 +1,21 @@
+{
+  "navigationBarTitleText": "",
+  "usingComponents": {
+    "wr-loading-content": "/components/loading-content/index",
+    "wr-price": "/components/price/index",
+    "wr-service-goods-card": "../components/order-goods-card/index",
+    "t-cell": "tdesign-miniprogram/cell/cell",
+    "t-icon": "tdesign-miniprogram/icon/icon",
+    "t-cell-group": "tdesign-miniprogram/cell-group/cell-group",
+    "t-pull-down-refresh": "tdesign-miniprogram/pull-down-refresh/pull-down-refresh",
+    "t-grid": "tdesign-miniprogram/grid/grid",
+    "t-grid-item": "tdesign-miniprogram/grid-item/grid-item",
+    "t-toast": "tdesign-miniprogram/toast/toast",
+    "t-dialog": "tdesign-miniprogram/dialog/dialog",
+    "t-input": "tdesign-miniprogram/input/input",
+    "t-swiper": "tdesign-miniprogram/swiper/swiper",
+    "t-swiper-nav": "tdesign-miniprogram/swiper-nav/swiper-nav",
+    "wr-after-service-button-bar": "../components/after-service-button-bar/index",
+    "t-image": "/components/webp-image/index"
+  }
+}

mini-program/pages/order/after-service-detail/index.wxml

@@ -0,0 +1,197 @@
+<wr-loading-content position="fixed" type="spinner" wx:if="{{pageLoading}}" />
+<view class="page-container">
+  <t-pull-down-refresh id="t-pull-down-refresh" bind:refresh="onPullDownRefresh_" t-class-indicator="t-class-indicator">
+    <!-- 页面内容 -->
+    <view class="service-detail safe-bottom">
+      <!-- 状态及描述 -->
+      <view class="service-detail__header">
+        <view class="title">
+          <t-icon prefix="wr" name="{{service.statusIcon}}" size="30px" />
+          {{service.statusName}}
+        </view>
+        <view class="desc"> {{service.statusDesc}} </view>
+      </view>
+      <!-- 退款金额 -->
+      <view class="service-section__pay pay-result" wx:if="{{service.isRefunded}}">
+        <t-cell
+          t-class-title="title"
+          t-class-note="right"
+          t-class="t-class-wrapper-first-child"
+          title="{{service.isRefunded ? '退款金额' : '预计退款金额'}}"
+          bordered="{{false}}"
+        >
+          <wr-price slot="note" price="{{service.refundRequestAmount}}" fill />
+        </t-cell>
+        <t-cell
+          wx:for="{{service.refundMethodList}}"
+          wx:key="name"
+          wx:for-index="index"
+          wx:for-item="item"
+          t-class-title="t-cell-title"
+          t-class-note="t-cell-title"
+          t-class="t-class-wrapper"
+          title="{{item.name}}"
+          bordered="{{service.refundMethodList.length - 1 === index ? true : false}}"
+        >
+          <wr-price slot="note" price="{{item.amount}}" fill />
+        </t-cell>
+        <block wx:if="{{service.isRefunded}}">
+          <t-cell
+            title=""
+            t-class="t-class-wrapper-first-child"
+            t-class-description="label"
+            description="说明：微信退款后，可以在微信支付账单查询，实际退款到时间可能受到银行处理时间的影响有一定延时，可以稍后查看"
+          />
+        </block>
+      </view>
+      <!-- 物流 -->
+      <view class="service-section logistics" wx:if="{{service.logisticsNo}}">
+        <view class="service-section__title">
+          <t-cell
+            align="top"
+            title="{{service.logisticsCompanyName + ' ' + service.logisticsNo}}"
+            bordered="{{false}}"
+            description="买家已寄出"
+            arrow
+          >
+            <t-icon prefix="wr" color="#333333" name="deliver" size="40rpx" slot="left-icon" />
+          </t-cell>
+          <view style="padding: 0 32rpx">
+            <wr-after-service-button-bar service="{{service}}" />
+          </view>
+        </view>
+      </view>
+      <!-- 收货地址 -->
+      <view class="service-section goods-refund-address" wx:if="{{service.receiverName}}">
+        <t-cell-group>
+          <t-cell align="top" title="退货地址" bordered="{{false}}">
+            <t-icon prefix="wr" color="#333333" name="location" size="40rpx" slot="left-icon" />
+            <view
+              slot="note"
+              class="right text-btn goods-refund-address-copy-btn"
+              hover-class="text-btn--active"
+              bindtap="onAddressCopy"
+              >复制
+            </view>
+            <view slot="description">
+              <view> {{service.receiverAddress}} </view>
+              <view>收货人：{{service.receiverName}}</view>
+              <view>收货人手机：{{service.receiverName}}</view>
+            </view>
+          </t-cell>
+        </t-cell-group>
+      </view>
+      <!-- 商品卡片 -->
+      <view
+        class="service-section service-goods-card-wrap"
+        wx:if="{{service.goodsList && service.goodsList.length > 0}}"
+      >
+        <wr-service-goods-card
+          wx:for="{{service.goodsList}}"
+          wx:key="id"
+          wx:for-item="goods"
+          goods="{{goods}}"
+          no-top-line
+          bindtap="onGoodsCardTap"
+          data-index="{{index}}"
+        >
+          <view slot="footer" class="order-goods-card-footer">
+            <wr-price
+              price="{{goods.itemRefundAmount}}"
+              fill
+              wr-class="order-goods-card-footer-price-class"
+              symbol-class="order-goods-card-footer-price-symbol"
+              decimal-class="order-goods-card-footer-price-decimal"
+            />
+            <view class="order-goods-card-footer-num">x {{goods.rightsQuantity}}</view>
+          </view>
+        </wr-service-goods-card>
+      </view>
+      <!-- 退款信息 -->
+      <view class="service-section__pay">
+        <t-cell bordered="{{false}}" title="退款信息" t-class="t-refund-wrapper" t-class-title="t-refund-title" />
+        <t-cell
+          bordered="{{false}}"
+          t-class="t-refund-wrapper"
+          t-class-title="t-refund-info"
+          t-class-note="t-refund-note"
+          title="订单编号"
+          note="{{service.orderNo}}"
+        />
+        <t-cell
+          bordered="{{false}}"
+          t-class="t-refund-wrapper"
+          t-class-title="t-refund-info"
+          t-class-note="t-refund-note"
+          title="服务单号"
+          note="{{service.rightsNo}}"
+        >
+          <view slot="right-icon" class="text-btn" hover-class="text-btn--active" bindtap="onServiceNoCopy">复制 </view>
+        </t-cell>
+        <t-cell
+          bordered="{{false}}"
+          t-class="t-refund-wrapper"
+          t-class-title="t-refund-info"
+          t-class-note="t-refund-note"
+          title="退款原因"
+          note="{{service.rightsReasonDesc}}"
+        />
+        <t-cell
+          bordered="{{false}}"
+          t-class="t-refund-wrapper"
+          t-class-title="t-refund-info"
+          t-class-note="t-refund-note"
+          title="退款金额"
+        >
+          <wr-price slot="note" price="{{service.refundRequestAmount}}" fill />
+        </t-cell>
+        <t-cell
+          bordered="{{false}}"
+          t-class="t-refund-wrapper"
+          t-class-title="t-refund-info"
+          t-class-note="t-refund-note"
+          title="申请时间"
+          note="{{service.createTime}}"
+        />
+      </view>
+      <!-- 凭证/说明 -->
+      <view class="service-section__pay" wx:if="{{showProofs}}">
+        <t-cell
+          bordered="{{false}}"
+          title="凭证/说明"
+          t-class="t-refund-wrapper"
+          t-class-title="t-refund-info"
+          description="{{service.applyRemark}}"
+        />
+        <t-grid border="{{false}}" column="{{3}}">
+          <t-grid-item
+            t-class-image="t-refund-grid-image"
+            wx:for="{{gallery.proofs}}"
+            wx:key="index"
+            image="{{item}}"
+            bindclick="onProofTap"
+            data-index="{{index}}"
+          />
+        </t-grid>
+      </view>
+      <t-swiper
+        wx:if="{{gallery.show}}"
+        current="{{gallery.current}}"
+        img-srcs="{{gallery.proofs}}"
+        full-screen
+        circular="{{false}}"
+        bindtap="onProofTap"
+      />
+    </view>
+  </t-pull-down-refresh>
+</view>
+<t-toast id="t-toast" />
+<!-- 退款说明填写 -->
+<t-dialog id="input-dialog" visible="{{inputDialogVisible}}">
+  <view class="input-dialog__content" slot="content">
+    <view style="color: #333333; padding-left: 32rpx">物流单号</view>
+    <t-input class="input" placeholder="请输入物流单号" />
+    <view class="tips">{{amountTip}}</view>
+  </view>
+</t-dialog>
+<t-dialog id="t-dialog" />

mini-program/pages/order/after-service-detail/index.wxss

@@ -0,0 +1,435 @@
+:host {
+  background-color: #f5f5f5;
+}
+
+.service-detail {
+  position: relative;
+}
+
+.service-detail wr-service-goods-card .wr-goods-card__body {
+  margin-left: 50rpx;
+}
+
+.order-goods-card-footer {
+  display: flex;
+  width: calc(100% - 190rpx);
+  justify-content: space-between;
+  position: absolute;
+  bottom: 20rpx;
+  left: 190rpx;
+}
+
+.order-goods-card-footer-num {
+  color: #999;
+  line-height: 40rpx;
+}
+
+.service-detail .order-goods-card-footer .order-goods-card-footer-price-class {
+  font-size: 36rpx;
+  color: #333;
+  font-family: DIN Alternate;
+}
+
+.service-detail .order-goods-card-footer .order-goods-card-footer-price-decimal {
+  font-size: 28rpx;
+  color: #333;
+  font-family: DIN Alternate;
+}
+
+.service-detail .order-goods-card-footer .order-goods-card-footer-price-symbol {
+  color: #333;
+  font-size: 24rpx;
+  font-family: DIN Alternate;
+}
+
+.service-detail .service-detail__header {
+  padding: 60rpx 0 48rpx 40rpx;
+  box-sizing: border-box;
+  height: 220rpx;
+  background-color: #fff;
+}
+.service-detail .service-detail__header .title,
+.service-detail .service-detail__header .desc {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
+
+.service-detail .service-detail__header .title {
+  -webkit-line-clamp: 1;
+  font-size: 48rpx;
+  font-weight: bold;
+  color: #333;
+  display: flex;
+}
+
+.service-detail .service-detail__header .desc {
+  -webkit-line-clamp: 2;
+  margin-top: 10rpx;
+  font-size: 28rpx;
+  color: #999;
+}
+
+.service-detail .service-detail__header .desc .count-down {
+  color: #fff185;
+  display: inline;
+}
+
+.service-detail .service-section {
+  margin: 20rpx 0 20rpx 0;
+  /* padding: 30rpx 32rpx; */
+  width: auto;
+  border-radius: 8rpx;
+  background-color: white;
+  overflow: hidden;
+}
+.service-section__pay {
+  margin: 0 0 20rpx 0;
+  width: auto;
+  border-radius: 8rpx;
+  background-color: white;
+  overflow: hidden;
+}
+.service-detail .service-section__title {
+  color: #333333;
+  margin-bottom: 10rpx;
+  padding-bottom: 18rpx;
+  height: 224rpx;
+  position: relative;
+}
+.service-detail .service-section__title .icon {
+  margin-right: 16rpx;
+  font-size: 40rpx !important;
+}
+.service-detail .service-section__title .right {
+  flex: none;
+  font-weight: normal;
+  font-size: 26rpx;
+}
+.service-detail .section-content {
+  margin: 16rpx 0 0 52rpx;
+}
+
+.service-detail .main {
+  font-size: 28rpx;
+  color: #222427;
+  font-weight: bold;
+}
+
+.service-detail .main .phone-num {
+  margin-left: 16rpx;
+  display: inline;
+}
+.service-detail .label {
+  color: #999999;
+  font-size: 26rpx;
+}
+
+.service-detail .custom-remark {
+  font-size: 26rpx;
+  line-height: 36rpx;
+  color: #333333;
+  word-wrap: break-word;
+}
+.service-detail .proofs {
+  margin-top: 20rpx;
+}
+
+.service-detail .proofs .proof {
+  width: 100%;
+  height: 100%;
+  background-color: #f9f9f9;
+}
+
+.service-detail .pay-result .t-cell-title,
+.service-detail .pay-result .t-cell-value {
+  color: #666666;
+  font-size: 28rpx;
+}
+
+.t-class-wrapper {
+  padding: 10rpx 24rpx !important;
+}
+
+.t-class-wrapper-first-child {
+  padding: 24rpx !important;
+}
+
+.service-detail .pay-result .wr-cell__value {
+  font-weight: bold;
+}
+.service-detail .right {
+  font-size: 36rpx;
+  color: #fa550f;
+  font-weight: bold;
+}
+
+.service-detail .title {
+  font-weight: bold;
+}
+
+.service-detail .pay-result .service-section__title .right.integer {
+  font-size: 48rpx;
+}
+.service-detail .pay-result .split-line {
+  position: relative;
+}
+
+.service-detail .pay-result .split-line::after {
+  position: absolute;
+  display: block;
+  content: ' ';
+  height: 1px;
+  left: -50%;
+  right: -50%;
+  transform: scale(0.5);
+  background-color: #e6e6e6;
+}
+
+.service-detail .pay-result .section-content {
+  margin-left: 0;
+}
+
+.service-detail .pay-result .section-content .label {
+  color: #999999;
+  font-size: 24rpx;
+}
+
+.service-detail .pay-result .wr-cell::after {
+  left: 0;
+}
+
+.service-detail .footer-bar-wrapper {
+  height: 100rpx;
+}
+
+.service-detail .footer-bar-wrapper .footer-bar {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  height: 100rpx;
+  width: 100vw;
+  box-sizing: border-box;
+  padding: 0 20rpx;
+  background-color: white;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.service-detail .text-btn {
+  display: inline;
+  box-sizing: border-box;
+  color: #333;
+  border: 2rpx solid #ddd;
+  border-radius: 32rpx;
+  margin-left: 10rpx;
+  padding: 0 16rpx;
+  font-weight: normal;
+  font-size: 24rpx;
+  line-height: 32rpx;
+}
+.service-detail .text-btn--active {
+  opacity: 0.5;
+}
+
+.service-detail .specs-popup .bottom-btn {
+  color: #fa550f;
+}
+.service-detail .specs-popup .bottom-btn::after {
+  color: #fa550f;
+}
+
+.dialog .dialog__button-confirm {
+  color: #fa550f;
+}
+
+.page-container .order-goods-card > wr-goods-card .wr-goods-card__bottom .price {
+  top: 100rpx;
+  left: 10rpx;
+  position: absolute;
+  color: #333;
+}
+
+.page-container .order-goods-card > wr-goods-card .wr-goods-card__num {
+  top: 100rpx;
+  right: 0;
+  position: absolute;
+}
+
+.page-container .order-goods-card > wr-goods-card .wr-goods-card__bottom .price::before {
+  display: inline;
+  content: '退款金额:';
+  margin-right: 1em;
+  font-size: 24rpx;
+  color: #333333;
+  font-weight: normal;
+}
+
+.page-container .wr-goods-card__specs {
+  margin: 14rpx 20rpx 0 0;
+}
+
+.page-container .order-goods-card > wr-goods-card .wr-goods-card__title {
+  margin-right: 0;
+  -webkit-line-clamp: 1;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  width: 80%;
+}
+
+.page-container .order-card .header .store-name {
+  -webkit-line-clamp: 1;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  width: 80%;
+}
+
+.page-container .status-desc {
+  box-sizing: border-box;
+  padding: 22rpx 20rpx;
+  font-size: 26rpx;
+  line-height: 1.3;
+  text-align: left;
+  color: #333333;
+  background-color: #f5f5f5;
+  border-radius: 8rpx;
+  word-wrap: break-word;
+  margin-top: 40rpx;
+  margin-bottom: 20rpx;
+}
+
+.page-container .header__right {
+  font-size: 24rpx;
+  color: #333333;
+  display: flex;
+  align-items: center;
+}
+
+.page-container .header__right__icon {
+  color: #d05b27;
+  font-size: 16px !important;
+  margin-right: 10rpx;
+}
+
+.page-container .wr-goods-card__thumb {
+  width: 140rpx;
+}
+.page-container .page-background {
+  position: absolute;
+  z-index: -1;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  color: #fff;
+  overflow: hidden;
+}
+.page-container .page-background-img {
+  width: 100%;
+  height: 320rpx !important;
+}
+.page-container .navbar-bg .nav-back,
+.page-container .navbar-bg .page-background {
+  background: linear-gradient(to right, rgba(250, 85, 15, 1) 0%, rgba(250, 85, 15, 0.6) 100%) !important;
+}
+
+.page-container .navigation-bar__btn {
+  font-size: 40rpx !important;
+  font-weight: bold !important;
+  color: #333;
+}
+
+.t-class-title {
+  color: #000;
+}
+
+.refresh-bar {
+  background: linear-gradient(90deg, #ff6b44 0%, #ed3427 100%) !important;
+}
+
+.page-container .navigation-bar__inner .navigation-bar__left {
+  padding-left: 16rpx;
+}
+
+.t-refund-info {
+  font-size: 26rpx;
+  color: #666;
+}
+
+.t-refund-grid-image {
+  width: 212rpx !important;
+  height: 212rpx !important;
+}
+
+.t-refund-info-img {
+  width: 100%;
+  height: 100%;
+}
+
+.t-refund-wrapper {
+  padding-top: 18rpx !important;
+  padding-bottom: 18rpx !important;
+}
+
+.t-refund-title {
+  font-size: 28rpx;
+  color: #333;
+  font-weight: bold;
+}
+
+.t-refund-note {
+  font-size: 26rpx;
+  color: #333 !important;
+}
+
+.service-detail .logistics {
+  padding-top: 0;
+  padding-bottom: 0;
+  padding-right: 0;
+}
+
+.service-section__title__header {
+  display: flex;
+  align-items: center;
+  color: #333;
+  font-weight: normal;
+  font-size: 32rpx;
+}
+
+.safe-bottom {
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.service-section-logistics {
+  display: flex;
+  justify-content: center;
+  color: #fa4126;
+  align-items: center;
+  margin-top: 24rpx;
+}
+
+.t-class-indicator {
+  color: #b9b9b9 !important;
+}
+
+.service-detail .goods-refund-address {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.service-detail .goods-refund-address .goods-refund-address-copy-btn {
+  position: absolute;
+  top: 22rpx;
+  right: 32rpx;
+}
+
+.service-detail .service-goods-card-wrap {
+  padding: 0 32rpx;
+}
+
+.t-button {
+  --td-button-default-color: #000;
+  --td-button-primary-text-color: #fa4126;
+}