添加申请退货

mobile-web/package.json

@@ -11,16 +11,16 @@
   "dependencies": {
     "axios": "^0.18.0",
     "moment": "^2.24.0",
+    "pingpp-js": "^2.2.13",
     "vant": "^1.3.1",
     "vue": "^2.5.17",
     "vue-router": "^3.0.1",
-    "vuex": "^3.1.0",
+    "vuex": "^3.1.0"
-    "pingpp-js": "^2.2.13"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.4.1",
     "@vue/cli-plugin-eslint": "^3.4.1",
-    "@vue/cli-service": "^3.4.1",
+    "@vue/cli-service": "^3.6.0",
     "babel-plugin-import": "^1.8.0",
     "less": "^3.8.1",
     "less-loader": "^4.1.0",

mobile-web/src/api/order.js

@@ -142,3 +142,26 @@ export function getLogisticsInfo(params) {
     }
   });
 }
+
+
+// 退货信息
+
+export function getOrderReturnReason() {
+  return request({
+    url: '/order-api/users/order_return/reason',
+    method: 'get',
+  });
+}
+
+export function orderReturnApply(params) {
+  return request({
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    url: '/order-api/users/order_return/apply',
+    method: 'POST',
+    data: {
+      ...params,
+    },
+  });
+}

mobile-web/src/config/router.js

@@ -133,7 +133,7 @@ const routes = [
     }
   },
   {
-    path: '/user/aftersale/apply',
+    path: '/user/aftersale/apply/:orderId',
     component: () => import('../page/user/aftersale/apply'),
     meta: {
       title: '申请售后'

mobile-web/src/page/user/aftersale/apply.vue

@@ -1,143 +1,197 @@
-</<template>
+<template>
   <div style="font-size:12px;">
     <headerNav title="申请售后"/>
     <van-radio-group v-model="servicetype">
       <van-cell-group>
-                <van-cell title="服务类型"  />
+        <van-cell title="服务类型"/>
         <van-cell title="退款" clickable @click="servicetype = '1'">
-                <van-radio name="1" />
+          <van-radio name="1"/>
         </van-cell>
         <van-cell title="退货" clickable @click="servicetype = '2'">
-                <van-radio name="2" />
+          <van-radio name="2"/>
         </van-cell>
       </van-cell-group>
     </van-radio-group>
-        <div style="margin-top: 10px;" >
+    <div style="margin-top: 10px;">
-            <product-card v-for="(product,i) in products" :key="i" :product='product' iscard ></product-card>
+      <product-card v-for="(product,i) in products" :key="i" :product='product'
+                    iscard></product-card>
     </div>
 
     <van-cell-group style="margin-top: 10px;">
-            <van-cell title="申请原因" :label="remark" is-link @click="onClickShowPicker" />
+      <van-cell title="申请原因" :label="remark" is-link @click="onClickShowPicker"/>
 
-            <van-field label="退款金额" placeholder="请输入金额" v-model="amount" :error-message="'可退金额:'+maxamount" type='number' />
+      <van-field label="退款金额" placeholder="请输入金额" v-model="amount"
+                 :error-message="'可退金额:'+maxamount" type='number'/>
 
       <van-field
         label="问题描述"
         type="textarea"
+        v-model="describe"
         placeholder="请您在此描述问题"
         rows="3"
         autosize
       />
-            <van-cell class="uploader" style="font-size: 16px;">
+      <!--<van-cell class="uploader" style="font-size: 16px;">-->
-                <van-uploader :after-read="onRead" accept="image/gif, image/jpeg" multiple>
+        <!--<van-uploader :after-read="onRead" accept="image/gif, image/jpeg" multiple>-->
-                    <van-icon name="photograph" />
+          <!--<van-icon name="photograph"/>-->
-                </van-uploader>
+        <!--</van-uploader>-->
-                <div v-for="(image,i) in images" :key="image" class="uploader-image" >
+        <!--<div v-for="(image,i) in images" :key="image" class="uploader-image">-->
-                    <img :src="image" />
+          <!--<img :src="image"/>-->
-                    <van-icon name="close" @click="removeImage(i,image)" />
+          <!--<van-icon name="close" @click="removeImage(i,image)"/>-->
-                </div>
+        <!--</div>-->
-            </van-cell>
+      <!--</van-cell>-->
-            
     </van-cell-group>
 
 
-        <van-cell-group style="margin-top: 10px;">
+    <!--<van-cell-group style="margin-top: 10px;">-->
-            <van-field label="联系人"  />
+    <!--<van-field label="联系人"/>-->
-            <van-field label="联系电话"  />
+    <!--<van-field label="联系电话"/>-->
-        </van-cell-group>
+    <!--</van-cell-group>-->
 
-        <van-button size="large" type="primary" style="margin-top: 10px;" >提交</van-button>
+    <van-button @click="handleSubmit" size="large" type="primary" style="margin-top: 10px;">提交</van-button>
-        <van-actionsheet v-model="showPicker" >
+    <!--<van-actionsheet v-model="showPicker">-->
-            <van-picker show-toolbar
+    <!--<van-picker show-toolbar-->
-  title="申请原因" :columns="columns" @cancel="onCancel" @confirm="onConfirm" />
+    <!--title="申请原因" :columns="columns" @cancel="onCancel" @confirm="onConfirm"/>-->
-        </van-actionsheet>
+    <!--</van-actionsheet>-->
   </div>
 </template>
 
 <script>
-export default {
+  import {Toast} from 'vant';
-    data(){
+  import moment from 'moment';
-        return{
+  import {getOrderInfo, getOrderReturnReason, orderReturnApply} from '../../../api/order';
-            servicetype:'1',
+
-            showPicker:false,
+  export default {
-            remark:'我不想要了',
+    data() {
-            amount:'50.50',
+      return {
-            maxamount:'50.50',
+        servicetype: '1',
-            images:[],
+        showPicker: false,
-            columns: ['我不想要了','退运费','少件/漏发','未按约定时间发货','发错货', '质量问题', '商品与页面描述不符', '商品损坏', '缺少件'],
+        remark: '不想要了',
+        describe: '',
+        amount: '50.50',
+        maxamount: '50.50',
+        images: [],
+        columnsData: [],
+        columns: ['我不想要了', '退运费', '少件/漏发', '未按约定时间发货', '发错货', '质量问题', '商品与页面描述不符', '商品损坏', '缺少件'],
         products: [
           {
-                    id:1,
+            id: 1,
             imageURL:
               "https://img10.360buyimg.com/mobilecms/s88x88_jfs/t17572/12/840082281/351445/e1828c58/5aab8dbbNedb77d88.jpg",
             title: "良品铺子 肉肉聚汇猪肉脯 猪蹄卤 辣味小吃520g",
             desc: "0.670kg/件，肉肉聚汇520g",
             quantity: 2,
-                    price:'50.5',
+            price: '50.5',
-                    max:2,
+            max: 2,
-                    min:0,
+            min: 0,
-                },
-                {
-                    id:1,
-                    imageURL:
-                        "https://img10.360buyimg.com/mobilecms/s88x88_jfs/t22720/128/1410375403/319576/8dbd859f/5b5e69b3Nf4f0e9e7.jpg",
-                    title: "元朗 鸡蛋卷 饼干糕点 中秋礼盒 广东特产680g",
-                    desc: "1.320kg/件",
-                    quantity: 1,
-                    price:'225.5',
-                    max:1,
-                    min:0,
           },
         ]
       }
     },
-    methods:{
+    methods: {
-        onClickShowPicker(){
+      onClickShowPicker() {
-                this.showPicker=true;
+        this.showPicker = true;
       },
       onCancel() {
-            this.showPicker=false;
+        this.showPicker = false;
       },
       onConfirm(value, index) {
-            this.remark=value;
+        this.remark = value;
-            this.showPicker=false;
+        this.showPicker = false;
       },
       onRead(file) {
-            console.log(file.length);
+        if (file.length == undefined) {
-            if(file.length==undefined){
           this.images.push(file.content);
-            }else{
+        } else {
           file.forEach(item => {
             this.images.push(item.content);
           });
         }
-            console.log(file)
       },
-        removeImage(index,image){
+      removeImage(index, image) {
-            this.images.splice(index,1);
+        this.images.splice(index, 1);
+      },
+      handleSubmit() {
+        const {orderId} = this.$route.params;
+        const filterData = this.columnsData.filter(data => {
+          if (data.displayName == this.remark) {
+            return data;
           }
+        });
+
+        const params = {
+          orderId,
+          returnType: this.servicetype,
+          reason: filterData[0].id,
+          describe: this.describe,
         }
 
-}
+        orderReturnApply(params).then(res => {
+          Toast('操作成功');
+          this.$router.go(-1);
+        })
+      },
+    },
+    mounted() {
+      const {orderId} = this.$route.params;
+      this.orderId = orderId;
+      getOrderInfo(orderId).then(res => {
+        const {buyPrice, discountPrice, orderItems} = res;
+
+        // 退还金额
+        const maxAmount = buyPrice - discountPrice / 100
+        this.amount = maxAmount;
+        this.maxamount = maxAmount;
+
+        this.products = orderItems.map(item => {
+          return {
+            ...item,
+            picUrls: [item.skuImage],
+          }
+        });
+      });
+
+      // 获取订单 退款原因
+      getOrderReturnReason().then(res => {
+        this.columnsData = res;
+        this.columns = res.map(item => {
+          return item.displayName;
+        })
+        // 默认选中
+        this.remark = this.columns[0]
+      })
+    }
+
+  }
 </script>
 
 <style lang="less">
-.uploader{
+  .uploader {
     font-size: 16px;
-    .van-uploader{
+
+    .van-uploader {
       float: left;
     }
-    &-image{
+
-        margin-left: 10px;position: relative;height: 50px;width: 50px;border: 1px solid #e5e7ea;float: left;margin-top: 5px;
+    &-image {
-        img{
+      margin-left: 10px;
+      position: relative;
+      height: 50px;
+      width: 50px;
+      border: 1px solid #e5e7ea;
+      float: left;
+      margin-top: 5px;
+
+      img {
         width: 50px;
       }
-        i{
+
+      i {
         position: absolute;
         top: -6px;
         right: -6px;
         font-size: 8px;
       }
     }
-}
+  }
 </style>

mobile-web/src/page/user/order/info.vue

@@ -46,7 +46,7 @@
     </van-cell-group>
     <div class="footer">
       <div class="munu">
-        <van-button v-if="orderInfo.status === 3 " size="small">退货</van-button>
+        <van-button size="small">申请售后</van-button>
         <van-button v-if="orderInfo.status === 3 " size="small" v-on:click="clickConfirmReceiving(orderId)">确认收货</van-button>
         <van-button v-if="orderInfo.status === 1 " size="small" type="danger" @click="goPay(orderInfo.id)">支付</van-button>
       </div>
@@ -74,12 +74,6 @@
             price: '499',
             quantity: 2
           },
-          {
-            imageURL: 'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
-            title: 'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
-            price: '499',
-            quantity: 2
-          },
         ]
       }
     },
@@ -97,7 +91,7 @@
       const { id } = this.$route.params;
       this.orderId = id;
       getOrderInfo(id).then(res => {
-        const { status, recipient, latestLogisticsDetail} = res;
+        const { status, recipient, latestLogisticsDetail, orderItems} = res;
         // 提交订单、配送中、交易成功
         if ([1, 2].indexOf(status) !== -1) {
           this.active = 0
@@ -126,6 +120,13 @@
           ...latestLogisticsDetail,
           logisticsTimeText: logisticsTimeText,
         }
+
+        this.products = orderItems.map(item => {
+          return {
+            ...item,
+            picUrls: [item.skuImage],
+          }
+        })
       })
     }
   }