新增售后详情页面

src/api/order.js

@@ -61,3 +61,11 @@ export function repaymentApi(data) {
     data,
   });
 }
+
+export function afterSale(data) {
+  return request({
+    url: '/sgyrdd/sgyOrder/afterSales/getInfo',
+    method: 'GET',
+    data,
+  });
+}

src/pages/order/afterSales.vue

 <template>
   <view class="container">
-        <Header title="售后"></Header>
+    <Header title="售后详情"></Header>
 
     <view class="content">
-            111
+      <view class="box box1">
+        <view class="money">
+          <view class="money_l">退款金额</view>
+          <view class="money_r">￥{{ afterSaleDetail.refundPrice }}</view>
+        </view>
+        <view class="intro">申请通过后退回至原账户</view>
+      </view>
+      <view class="box">
+        <view class="steps">
+          <view class="step" v-for="(item, index) in handleLog" :key="index">
+            <wd-icon name="check-circle-filled" size="12px" class="tag" v-if="index == 0"></wd-icon>
+            <view class="head">{{ item.title }}</view>
+            <view class="time" v-if="item.content">{{ item.content }}</view>
+            <view class="time">{{ item.time }}</view>
+          </view>
+        </view>
+      </view>
+      <view class="box">
+        <view class="goods">
+          <view class="g1">退款信息</view>
+          <view class="g2" v-for="(item, index) in orderItems" :key="index">
+            <img :src="fileDomain + item.pic" />
+            <view class="g2_item">
+              <view class="g2_info">
+                <view class="g2_name">{{ item.prodName }}</view>
+                <view class="g2_price">￥{{ item.actualTotal }}</view>
+              </view>
+              <view class="g2_number">X {{ item.prodCount }}</view>
+            </view>
+          </view>
+          <view class="g3">
+            <view class="g3_item">
+              <view class="g3_title">申请时间:</view>
+              <view class="g3_intro">{{ afterSaleDetail.applyTime }}</view>
+            </view>
+            <view class="g3_item">
+              <view class="g3_title">退款原因:</view>
+              <view class="g3_intro">{{ afterSaleDetail.refundMemo }}</view>
+            </view>
+            <view class="g3_item">
+              <view class="g3_title">订单号:</view>
+              <view class="g3_intro">{{ afterSaleDetail.orderNumber.split('-')[1] }}</view>
+            </view>
+          </view>
+        </view>
+      </view>
     </view>
   </view>
 </template>
 
 <script setup>
 import Header from '@/pages/order/components/Header/index.vue';
-
+import { afterSale } from '@/api/order';
+const fileDomain = import.meta.env.VITE_APP_IMG_URL;
+const orderNumber = ref('');
+const afterSaleDetail = ref();
+const handleLog = ref();
+const orderItems = ref();
+const getAterSaleDetail = async (id) => {
+  const res = await afterSale({ orderNumber: id });
+  handleLog.value = res.data[0].handleLog;
+  afterSaleDetail.value = res.data[0];
+  orderItems.value = res.data[0].orderItems;
+};
+onLoad((options) => {
+  // orderNumber.value = options.orderNumber;
+  getAterSaleDetail('NEONO-2024080113095213631');
+});
 </script>
 
 <style lang="scss" scoped>
@@ -24,6 +84,162 @@ page {
 
   .content {
     padding-top: 88rpx;
+    .box1 {
+      display: flex;
+      flex-direction: column;
+      .intro {
+        font-size: 12px;
+        font-weight: normal;
+        line-height: 12px;
+        letter-spacing: 0em;
+        font-variation-settings: 'opsz' auto;
+        font-feature-settings: 'kern' on;
+        color: #bcbcbc;
+      }
+      .money {
+        display: flex;
+        line-height: 14px;
+        letter-spacing: 0em;
+        font-variation-settings: 'opsz' auto;
+        font-feature-settings: 'kern' on;
+        color: #3d3d3d;
+        font-family: Source Han Sans;
+        font-size: 14px;
+        margin-bottom: 10rpx;
+        .money_l {
+          font-weight: normal;
+          flex: 1;
+        }
+        .money_r {
+          font-weight: bold;
+          flex: 2;
+          text-align: right;
+          margin-top: -15rpx;
+        }
+      }
+    }
+    .box {
+      width: 710rpx;
+      margin: 10rpx auto 3rpx;
+      border-radius: 8px;
+      background-color: #fff;
+      padding: 40rpx 40rpx;
+      box-sizing: border-box;
+      .steps {
+        border-left: 2px solid #f3f3f3;
+        .step {
+          position: relative;
+          padding-left: 25rpx;
+          .tag {
+            position: absolute;
+            left: -6px;
+            top: 0px;
+            opacity: 1;
+            color: #fa5151;
+          }
+          .head {
+            font-family: Source Han Sans;
+            font-size: 14px;
+            font-weight: bold;
+            line-height: 14px;
+            letter-spacing: 0em;
+            font-variation-settings: 'opsz' auto;
+            font-feature-settings: 'kern' on;
+            color: #3d3d3d;
+            margin-bottom: 10rpx;
+          }
+          .time {
+            font-family: Source Han Sans;
+            font-size: 11px;
+            font-weight: normal;
+            line-height: 14px;
+            letter-spacing: 0em;
+            font-variation-settings: 'opsz' auto;
+            font-feature-settings: 'kern' on;
+            color: #bcbcbc;
+            margin-bottom: 10rpx;
+          }
+          .time:last-child {
+            margin-bottom: 40rpx;
+          }
+        }
+      }
+    }
+  }
+}
+
+.goods {
+  .g1 {
+    font-family: Source Han Sans;
+    font-size: 14px;
+    font-weight: normal;
+    line-height: 14px;
+    letter-spacing: 0em;
+    font-variation-settings: 'opsz' auto;
+    font-feature-settings: 'kern' on;
+    color: #3d3d3d;
+    margin-bottom: 40rpx;
+  }
+  .g2 {
+    display: flex;
+    margin-bottom: 20rpx;
+    img {
+      width: 176rpx;
+      height: 176rpx;
+      border-radius: 8px;
+      opacity: 1;
+      margin-right: 20rpx;
+    }
+    .g2_item {
+      flex: 1;
+      font-family: Source Han Sans;
+      font-variation-settings: 'opsz' auto;
+      font-feature-settings: 'kern' on;
+      font-size: 14px;
+      line-height: 14px;
+      letter-spacing: 0em;
+      color: #3d3d3d;
+      .g2_info {
+        display: flex;
+        margin-top: 20rpx;
+        margin-bottom: 22rpx;
+        justify-content: space-between;
+        .g2_name {
+          font-weight: bold;
+        }
+        .g2_price {
+          font-weight: bold;
+          text-align: right;
+        }
+      }
+      .g2_number {
+        font-weight: normal;
+      }
+    }
+  }
+  .g3 {
+    font-family: Source Han Sans;
+    font-size: 14px;
+    font-weight: normal;
+    line-height: 14px;
+    letter-spacing: 0em;
+
+    font-variation-settings: 'opsz' auto;
+    font-feature-settings: 'kern' on;
+    .g3_item {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 20rpx;
+      .g3_title {
+        color: #767676;
+        width: 120rpx;
+      }
+      .g3_intro {
+        color: #3d3d3d;
+        text-align: right;
+        flex: 1;
+      }
+    }
   }
 }
 </style>