✨ 售后申请：完成

pages/order/aftersale/apply.vue

@@ -3,9 +3,13 @@
   <s-layout title="申请售后">
     <!-- 售后商品 -->
     <view class="goods-box">
-      <s-goods-item :img="state.goodsItem.goods_image" :title="state.goodsItem.goods_title"
+      <s-goods-item
-        :skuText="state.goodsItem.goods_sku_text" :price="state.goodsItem.goods_price"
+        :img="state.item.picUrl"
-        :num="state.goodsItem.goods_num"></s-goods-item>
+        :title="state.item.spuName"
+        :skuText="state.item.properties?.map((property) => property.valueName).join(' ')"
+        :price="state.item.price"
+        :num="state.item.count"
+      />
     </view>
 
     <uni-forms ref="form" v-model="formData" :rules="rules" label-position="top">
@@ -14,69 +18,104 @@
         <view class="item-title ss-m-b-20">售后类型</view>
         <view class="ss-flex-col">
           <radio-group @change="onRefundChange">
-            <label class="ss-flex ss-col-center ss-p-y-10" v-for="(item, index) in state.refundTypeList" :key="index">
+            <label
-              <radio :checked="formData.type === item.value" color="var(--ui-BG-Main)" style="transform: scale(0.8)"
+              class="ss-flex ss-col-center ss-p-y-10"
-                :value="item.value" />
+              v-for="(item, index) in state.wayList"
+              :key="index"
+            >
+              <radio
+                :checked="formData.type === item.value"
+                color="var(--ui-BG-Main)"
+                style="transform: scale(0.8)"
+                :value="item.value"
+              />
               <view class="item-value ss-m-l-8">{{ item.text }}</view>
             </label>
           </radio-group>
         </view>
       </view>
+      <!-- 退款金额 -->
+      <view class="refund-item ss-flex ss-col-center ss-row-between" @tap="state.showModal = true">
+        <text class="item-title">退款金额</text>
+        <view class="ss-flex refund-cause ss-col-center">
+          <text class="ss-m-r-20">￥{{ fen2yuan(state.item.payPrice) }}</text>
+        </view>
+      </view>
       <!-- 申请原因 -->
       <view class="refund-item ss-flex ss-col-center ss-row-between" @tap="state.showModal = true">
         <text class="item-title">申请原因</text>
         <view class="ss-flex refund-cause ss-col-center">
-          <text class="ss-m-r-20" v-if="formData.reason">{{ formData.reason }}</text>
+          <text class="ss-m-r-20" v-if="formData.applyReason">{{ formData.applyReason }}</text>
           <text class="ss-m-r-20" v-else>请选择申请原因~</text>
-          <!-- <text class="ss-iconfont _icon-forward" style="color: #666"></text> -->
           <text class="cicon-forward" style="height: 28rpx"></text>
         </view>
       </view>
-      <view class="refund-item u-m-b-20">
-        <view class="item-title ss-m-b-20">联系方式</view>
-        <view class="input-box u-flex">
-          <uni-easyinput :inputBorder="false" type="number" v-model="formData.mobile" placeholder="请输入您的联系电话"
-            paddingLeft="10" />
-        </view>
-      </view>
 
       <!-- 留言 -->
       <view class="refund-item">
         <view class="item-title ss-m-b-20">相关描述</view>
         <view class="describe-box">
-          <uni-easyinput :inputBorder="false" class="describe-content" type="textarea" maxlength="120" autoHeight
+          <uni-easyinput
-            v-model="formData.content" placeholder="客官~请描述您遇到的问题，建议上传照片"></uni-easyinput>
+            :inputBorder="false"
+            class="describe-content"
+            type="textarea"
+            maxlength="120"
+            autoHeight
+            v-model="formData.applyDescription"
+            placeholder="客官~请描述您遇到的问题，建议上传照片"
+          />
+          <!-- TODO 芋艿：上传的测试 -->
           <view class="upload-img">
-            <s-uploader v-model:url="formData.images" fileMediatype="image" limit="9" mode="grid"
+            <s-uploader
-              :imageStyles="{ width: '168rpx', height: '168rpx' }" />
+              v-model:url="formData.images"
+              fileMediatype="image"
+              limit="9"
+              mode="grid"
+              :imageStyles="{ width: '168rpx', height: '168rpx' }"
+            />
           </view>
         </view>
       </view>
     </uni-forms>
+
     <!-- 底部按钮 -->
     <su-fixed bottom placeholder>
       <view class="foot-wrap">
         <view class="foot_box ss-flex ss-col-center ss-row-between ss-p-x-30">
-          <button class="ss-reset-button contcat-btn" @tap="sheep.$router.go('/pages/chat/index')">联系客服</button>
+          <button class="ss-reset-button contcat-btn" @tap="sheep.$router.go('/pages/chat/index')">
+            联系客服
+          </button>
           <button class="ss-reset-button ui-BG-Main-Gradient sub-btn" @tap="submit">提交</button>
         </view>
       </view>
     </su-fixed>
-    <!-- 申请原因弹窗 -->
 
+    <!-- 申请原因弹窗 -->
     <su-popup :show="state.showModal" round="10" :showClose="true" @close="state.showModal = false">
       <view class="modal-box page_box">
-        <view class="modal-head item-title head_box ss-flex ss-row-center ss-col-center">申请原因</view>
+        <view class="modal-head item-title head_box ss-flex ss-row-center ss-col-center">
+          申请原因
+        </view>
         <view class="modal-content content_box">
           <radio-group @change="onChange">
-            <label class="radio ss-flex ss-col-center" v-for="item in state.refundReasonList" :key="item.value">
+            <label
-              <view class="ss-flex-1 ss-p-20">{{ item.title }}</view>
+              class="radio ss-flex ss-col-center"
-              <radio :value="item.value" color="var(--ui-BG-Main)" :checked="item.value === state.currentValue" />
+              v-for="item in state.reasonList"
+              :key="item"
+            >
+              <view class="ss-flex-1 ss-p-20">{{ item }}</view>
+              <radio
+                :value="item"
+                color="var(--ui-BG-Main)"
+                :checked="item === state.currentValue"
+              />
             </label>
           </radio-group>
         </view>
         <view class="modal-foot foot_box ss-flex ss-row-center ss-col-center">
-          <button class="ss-reset-button close-btn ui-BG-Main-Gradient" @tap="onReason">确定</button>
+          <button class="ss-reset-button close-btn ui-BG-Main-Gradient" @tap="onReason">
+            确定
+          </button>
         </view>
       </view>
     </su-popup>
@@ -86,60 +125,39 @@
 <script setup>
   import sheep from '@/sheep';
   import { onLoad } from '@dcloudio/uni-app';
-import { reactive, ref, unref } from 'vue';
+  import { reactive, ref } from 'vue';
+  import OrderApi from '@/sheep/api/trade/order';
+  import TradeConfigApi from '@/sheep/api/trade/config';
+  import { fen2yuan } from '@/sheep/hooks/useGoods';
+  import AfterSaleApi from '@/sheep/api/trade/afterSale';
+
   const form = ref(null);
   const state = reactive({
-  showModal: false,
+    orderId: 0, // 订单编号
-  currentValue: 0,
+    itemId: 0, // 订单项编号
-  goodsItem: {},
+    order: {}, // 订单
-  reasonText: '',
+    item: {}, // 订单项
+    config: {}, // 交易配置
+
     // 售后类型
-  refundTypeList: [
+    wayList: [
       {
         text: '仅退款',
-      value: 'refund',
+        value: '10',
       },
       {
-      text: '退/换货',
+        text: '退款退货',
-      value: 'return',
+        value: '20',
-    },
-    {
-      text: '其他',
-      value: 'other',
-    },
-  ],
-  refundReasonList: [
-    {
-      value: '1',
-      title: '卖家发错货了',
-    },
-    {
-      value: '2',
-      title: '退运费',
-    },
-    {
-      value: '3',
-      title: '大小/重量与商品描述不符',
-    },
-    {
-      value: '4',
-      title: '生产日期/保质期与商品描述不符',
-    },
-    {
-      value: '5',
-      title: '质量问题',
-    },
-    {
-      value: '6',
-      title: '我不想要了',
       },
     ],
+    reasonList: [], // 可选的申请原因数组
+    showModal: false, // 是否显示申请原因弹窗
+    currentValue: '' // 当前选择的售后原因
   });
   const formData = reactive({
-  type: '',
+    way: '',
-  reason: '',
+    applyReason: '',
-  mobile: '',
+    applyDescription: '',
-  content: '',
     images: [],
   });
   const rules = reactive({});
@@ -150,14 +168,14 @@ async function submit() {
     sheep.$platform.useProvider('wechat').subscribeMessage('order_aftersale_change');
     // #endif
     let data = {
+      orderItemId: state.itemId,
+      refundPrice: state.item.payPrice,
       ...formData,
-    order_id: state.goodsItem.order_id,
-    order_item_id: state.goodsItem.id,
     };
-  const res = await sheep.$api.order.aftersale.apply(data);
+    const { code } = await AfterSaleApi.createAfterSale(data);
-  if (res.error === 0) {
+    if (code === 0) {
       uni.showToast({
-      title: res.msg,
+        title: '申请成功',
       });
       sheep.$router.go('/pages/order/aftersale/list');
     }
@@ -165,30 +183,51 @@ async function submit() {
 
   // 选择售后类型
   function onRefundChange(e) {
-  formData.type = e.detail.value;
+    formData.way = e.detail.value;
+    // 清理理由
+    state.reasonList =
+      formData.way === '10'
+        ? state.config.afterSaleRefundReasons || []
+        : state.config.afterSaleReturnReasons || [];
+    formData.applyReason = '';
+    state.currentValue = '';
   }
 
   // 选择申请原因
   function onChange(e) {
     state.currentValue = e.detail.value;
-  state.refundReasonList.forEach((item) => {
-    if (item.value === e.detail.value) {
-      state.reasonText = item.title;
-    }
-  });
   }
+
   // 确定
   function onReason() {
-  formData.reason = state.reasonText;
+    formData.applyReason = state.currentValue;
     state.showModal = false;
   }
 
-function onTitle(e, title) {
+  onLoad(async (options) => {
-  state.currentValue = e;
+    // 解析参数
-  state.reasonText = title;
+    if (!options.orderId || !options.itemId) {
+      sheep.$helper.toast(`缺少订单信息，请检查`);
+      return;
     }
-onLoad((options) => {
+    state.orderId = options.orderId;
-  state.goodsItem = JSON.parse(options.item);
+    state.itemId = parseInt(options.itemId);
+
+    // 读取订单信息
+    const { code, data } = await OrderApi.getOrder(state.orderId);
+    if (code !== 0) {
+      return;
+    }
+    state.order = data;
+    state.item = data.items.find((item) => item.id === state.itemId) || {};
+
+    // 设置选项
+    if (state.order.status === 10) {
+      state.wayList.splice(1, 1);
+    }
+
+    // 读取配置
+    state.config = (await TradeConfigApi.getTradeConfig()).data;
   });
 </script>
 

pages/order/detail.vue

@@ -61,7 +61,8 @@
 								<button class="ss-reset-button apply-btn" v-if="[10, 20, 30].includes(state.orderInfo.status) && item.afterSaleStatus === 0"
 									@tap.stop="
                     sheep.$router.go('/pages/order/aftersale/apply', {
-                      item: JSON.stringify(item),
+                      orderId: state.orderInfo.id,
+                      itemId: item.id
                     })
                   ">
 									申请售后

sheep/api/trade/afterSale.js

@@ -0,0 +1,15 @@
+import request2 from '@/sheep/request2';
+import request from '@/sheep/request';
+
+const AfterSaleApi = {
+  // 创建售后
+  createAfterSale: (data) => {
+    return request2({
+      url: `/app-api/trade/after-sale/create`,
+      method: 'POST',
+      data,
+    });
+  },
+};
+
+export default AfterSaleApi;

sheep/api/trade/config.js

@@ -0,0 +1,14 @@
+import request2 from '@/sheep/request2';
+import request from '@/sheep/request';
+
+const TradeConfigApi = {
+  // 获得交易配置
+  getTradeConfig: () => {
+    return request2({
+      url: `/app-api/trade/config/get`,
+      method: 'GET',
+    });
+  },
+};
+
+export default TradeConfigApi;