【退款】

1、发起退款界面 50%

api/trade/afterSale.js

@@ -3,3 +3,9 @@ import request from "@/utils/request.js";
 export function getAfterSalePage(data) {
   return request.get("app-api/trade/after-sale/page", data);
 }
+
+export function getAfterSaleReasonList(way) {
+  return request.get("app-api/trade/after-sale/get-reason-list", {
+    way
+  });
+}

pages/users/goods_return/index.vue

@@ -2,37 +2,54 @@
 	<view>
 		<form  @submit="subRefund" report-submit='true'>
 		  <view class='apply-return'>
-		    <view class='goodsStyle acea-row row-between borRadius14' v-for="(item,index) in orderInfo.orderInfoList" :key="index">
+		    <view class='goodsStyle acea-row row-between borRadius14'>
-		        <view class='pictrue'><image :src='item.image'></image></view>
+          <view class='pictrue'>
+            <image :src='orderItem.picUrl' />
+          </view>
           <view class='text acea-row row-between'>
-		          <view class='name line2'>{{item.storeName}}</view>
+            <view class='name line2'>{{ orderItem.spuName }}</view>
             <view class='money'>
-		              <view>￥{{item.price}}</view>
+              <view>￥{{(parseFloat(orderItem.price) / 100.0).toFixed(2)}}</view>
-		              <view class='num'>x{{item.cartNum}}</view>
+              <view class='num'>x{{ orderItem.count}}</view>
             </view>
           </view>
         </view>
 		    <view class='list borRadius14'>
           <view class='item acea-row row-between-wrapper'>
-		          <view>退货件数</view>
+            <view>售后方式</view>
-		          <view class='num'>{{orderInfo.totalNum}}</view>
+            <!-- 如果未发货，则只能退款 -->
+            <view class="" v-if="order.status === 20">仅退款</view>
+            <picker v-else class='num' @change="wayChange"
+                    :value="wayIndex" :range="ways">
+              <view class="picker acea-row row-between-wrapper">
+                <view class='reason'>{{ ways[wayIndex] }}</view>
+                <text class='iconfont icon-jiantou'></text>
               </view>
+            </picker>
+          </view>
+          <!-- TODO 芋艿：按照有赞的做法；未发货，不输入件数；已发货，可调整 -->
+          <view class='item acea-row row-between-wrapper'>
+            <view>退货件数</view>
+            <view class='num'>{{ orderItem.count }}</view>
+          </view>
+          <!-- TODO 芋艿：后端改成可以填写金额 -->
           <view class='item acea-row row-between-wrapper'>
             <view>退款金额</view>
-		          <view class='num'>￥{{orderInfo.payPrice}}</view>
+            <view class='num'>￥{{ (parseFloat(orderItem.payPrice) / 100.0).toFixed(2) }}</view>
           </view>
-		        <view class='item acea-row row-between-wrapper' @tap="toggleTab('region')">
+          <view class='item acea-row row-between-wrapper'>
             <view>退款原因</view>
-		          <picker class='num' @change="bindPickerChange" :value="index" :range="RefundArray">
+            <picker class='num' @change="bindPickerChange" :value="reasonIndex" :range="reasons">
               <view class="picker acea-row row-between-wrapper">
-		                <view class='reason'>{{RefundArray[index]}}</view>
+                <view class='reason'>{{ reasons[reasonIndex] }}</view>
                 <text class='iconfont icon-jiantou'></text>
               </view>
             </picker>
           </view>
           <view class='item textarea acea-row row-between'>
             <view>备注说明</view>
-		          <textarea placeholder='填写备注信息，100字以内' class='num' name="refund_reason_wap_explain" placeholder-class='填写备注信息，100字以内'></textarea>
+            <textarea placeholder='填写备注信息，100字以内' class='num' name="refund_reason_wap_explain"
+                      placeholder-class='填写备注信息，100字以内' />
           </view>
           <view class='item acea-row row-between' style="border: none;">
             <view class='title acea-row row-between-wrapper'>
@@ -41,51 +58,45 @@
             </view>
             <view class='upload acea-row row-middle'>
               <view class='pictrue' v-for="(item,index) in refund_reason_wap_imgPath" :key="index">
-		                <image :src='item'></image>
+                <image :src='item' />
-		                <view class='iconfont icon-guanbi1 font-color' @tap='DelPic(index)'></view>
+                <view class='iconfont icon-guanbi1 font-color' @tap='DelPic(index)' />
               </view>
-		              <view class='pictrue acea-row row-center-wrapper row-column' @tap='uploadpic' v-if="refund_reason_wap_imgPath.length < 3">
+              <view class='pictrue acea-row row-center-wrapper row-column' @tap='uploadpic'
-		                <text class='iconfont icon-icon25201'></text>
+                    v-if="refund_reason_wap_imgPath.length < 3">
+                <text class='iconfont icon-icon25201' />
                 <view>上传凭证</view>
               </view>
             </view>
           </view>
-				<button class='returnBnt bg-color' form-type="submit">申请退款</button>
+				  <button class='returnBnt bg-color' form-type="submit">提交</button>
 		    </view>
 		  </view>
 		</form>
-		<!-- #ifdef MP -->
-		<!-- <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize> -->
-		<!-- #endif -->
 	</view>
 </template>
 <script>
-	import { ordeRefundReason, orderRefundVerify, applyRefund} from '@/api/order.js';
+	import { orderRefundVerify } from '@/api/order.js';
-	import {
+	import { toLogin } from '@/libs/login.js';
-		toLogin
+	import { mapGetters } from "vuex";
-	} from '@/libs/login.js';
+  import * as TradeOrderApi from '@/api/trade/order.js';
-	import {
+  import * as AfterSaleApi from '@/api/trade/afterSale.js';
-		mapGetters
-	} from "vuex";
-	// #ifdef MP
-	import authorize from '@/components/Authorize';
-	// #endif
   export default {
-		components: {
-			// #ifdef MP
-			authorize
-			// #endif
-		},
 		data() {
 			return {
+        orderId: 0,
+        orderItemId: 0,
+        order: {}, // 订单
+        orderItem: {}, // 订单项
+
+        wayIndex: 0, // 选中 ways 的位置
+        ways: ['仅退款', '退款退货'], // 可选的售后方式
+
+        reasons: [], // 售后原因
+        reasonIndex: 0, // 选中 reasons 的位置
+
         refund_reason_wap_img:[],
 				refund_reason_wap_imgPath:[],
-				    orderInfo:{},
+
-				    RefundArray: [],
-				    index: 0,
-				    orderId:0,
-				isAuto: false, //没有授权的不会自动授权
-				isShowAuth: false //是否隐藏授权
 			};
 		},
 		computed: mapGetters(['isLogin']),
@@ -101,14 +112,22 @@
 			}
 		},
 		 onLoad: function (options) {
-		    if (!options.orderId) return this.$util.Tips({title:'缺少订单id,无法退款'},{tab:3,url:1});
+       if (!this.isLogin) {
-			this.orderId = options.orderId;
+         toLogin();
-			if (this.isLogin) {
+         return;
+       }
+      if (!options.orderId || !options.orderItemId) {
+        return this.$util.Tips({
+          title:'缺少订单id,无法退款'
+        },{
+          tab: 3,
+          url:1
+        });
+      }
+			this.orderId = parseInt(options.orderId);
+      this.orderItemId = parseInt(options.orderItemId);
       this.getOrderInfo();
       this.getRefundReason();
-			} else {
-				toLogin();
-			}
     },
 		methods: {
 			onLoadFun:function() {
@@ -117,27 +136,44 @@
       },
       /**
        * 获取订单详情
-			     * 
       */
       getOrderInfo:function(){
-			      let that=this;
+        TradeOrderApi.getOrderDetail(this.orderId).then(res => {
-			      applyRefund(that.orderId).then(res=>{
+          // 设置订单信息
-					that.$set(that,'orderInfo',res.data);
+          const order = res.data;
+          this.order = order;
+          // 查询订单项信息
+          this.orderItem = order.items.find(item => item.id === this.orderItemId) || {};
+        }).catch(err => {
+          return this.$util.Tips({
+            title: err
           });
+        })
+      },
+      /**
+       * 更改售后方式
+       */
+      wayChange: function(e) {
+        this.$set(this, 'wayIndex', e.detail.value);
+        this.getRefundReason();
+      },
+      /**
+       * 获得售后方式
+       */
+      getWay: function () {
+        return this.wayIndex === 0 ? 10 : 20
       },
       /**
        * 获取退款理由
        */
       getRefundReason: function() {
-			      let that=this;
+        const way = this.getWay();
-			      ordeRefundReason().then(res=>{
+        AfterSaleApi.getAfterSaleReasonList(way).then(res => {
-					  that.$set(that,'RefundArray',res.data);
+          this.reasons = res.data;
         })
       },
-			  
       /**
        * 删除图片
-			     * 
        */
       DelPic:function(e) {
         let index = e, that = this;
@@ -145,7 +181,6 @@
       },
       /**
        * 上传文件
-			     * 
        */
       uploadpic:function(){
         let that=this;
@@ -178,7 +213,6 @@
 		}
 	}
 </script>
-
 <style scoped lang="scss">
 	.apply-return{
 		padding: 20rpx 30rpx 70rpx 30rpx;