From 01e5404e8cf76ac76822cdefd8ce259f83351839 Mon Sep 17 00:00:00 2001
From: sin <2943460818@qq.com>
Date: Fri, 26 Apr 2019 00:25:13 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=94=B3=E8=AF=B7=E9=80=80?=
 =?UTF-8?q?=E8=B4=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 mobile-web/package.json                      |   6 +-
 mobile-web/src/api/order.js                  |  23 ++
 mobile-web/src/config/router.js              |   2 +-
 mobile-web/src/page/user/aftersale/apply.vue | 310 +++++++++++--------
 mobile-web/src/page/user/order/info.vue      |  17 +-
 5 files changed, 218 insertions(+), 140 deletions(-)

diff --git a/mobile-web/package.json b/mobile-web/package.json
index 09fda12f3..e80d54cc8 100644
--- a/mobile-web/package.json
+++ b/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",
-    "pingpp-js": "^2.2.13"
+    "vuex": "^3.1.0"
   },
   "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",
diff --git a/mobile-web/src/api/order.js b/mobile-web/src/api/order.js
index 95bce2831..bfddcbb42 100644
--- a/mobile-web/src/api/order.js
+++ b/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,
+    },
+  });
+}
diff --git a/mobile-web/src/config/router.js b/mobile-web/src/config/router.js
index 562c22d4c..e0d6034e3 100644
--- a/mobile-web/src/config/router.js
+++ b/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: '申请售后'
diff --git a/mobile-web/src/page/user/aftersale/apply.vue b/mobile-web/src/page/user/aftersale/apply.vue
index 308bc3620..9ca0ec918 100644
--- a/mobile-web/src/page/user/aftersale/apply.vue
+++ b/mobile-web/src/page/user/aftersale/apply.vue
@@ -1,143 +1,197 @@
-</<template>
-    <div  style="font-size:12px;">
-        <headerNav title="申请售后"/>
-        <van-radio-group v-model="servicetype">
-            <van-cell-group>
-                <van-cell title="服务类型"  />
-                <van-cell title="退款" clickable @click="servicetype = '1'">
-                <van-radio name="1" />
-                </van-cell>
-                <van-cell title="退货" clickable @click="servicetype = '2'">
-                <van-radio name="2" />
-                </van-cell>
-            </van-cell-group>
-        </van-radio-group>
-        <div style="margin-top: 10px;" >
-            <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-field label="退款金额" placeholder="请输入金额" v-model="amount" :error-message="'可退金额:'+maxamount" type='number' />
-
-            <van-field
-                label="问题描述"
-                type="textarea"
-                placeholder="请您在此描述问题"
-                rows="3"
-                autosize
-            />
-            <van-cell class="uploader" style="font-size: 16px;">
-                <van-uploader :after-read="onRead" accept="image/gif, image/jpeg" multiple>
-                    <van-icon name="photograph" />
-                </van-uploader>
-                <div v-for="(image,i) in images" :key="image" class="uploader-image" >
-                    <img :src="image" />
-                    <van-icon name="close" @click="removeImage(i,image)" />
-                </div>
-            </van-cell>
-            
-        </van-cell-group>
-
-        
-        <van-cell-group style="margin-top: 10px;">
-            <van-field label="联系人"  />
-            <van-field label="联系电话"  />
-        </van-cell-group>
-
-        <van-button size="large" type="primary" style="margin-top: 10px;" >提交</van-button>
-        <van-actionsheet v-model="showPicker" >
-            <van-picker show-toolbar
-  title="申请原因" :columns="columns" @cancel="onCancel" @confirm="onConfirm" />
-        </van-actionsheet>
+<template>
+  <div style="font-size:12px;">
+    <headerNav title="申请售后"/>
+    <van-radio-group v-model="servicetype">
+      <van-cell-group>
+        <van-cell title="服务类型"/>
+        <van-cell title="退款" clickable @click="servicetype = '1'">
+          <van-radio name="1"/>
+        </van-cell>
+        <van-cell title="退货" clickable @click="servicetype = '2'">
+          <van-radio name="2"/>
+        </van-cell>
+      </van-cell-group>
+    </van-radio-group>
+    <div style="margin-top: 10px;">
+      <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-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-uploader :after-read="onRead" accept="image/gif, image/jpeg" multiple>-->
+          <!--<van-icon name="photograph"/>-->
+        <!--</van-uploader>-->
+        <!--<div v-for="(image,i) in images" :key="image" class="uploader-image">-->
+          <!--<img :src="image"/>-->
+          <!--<van-icon name="close" @click="removeImage(i,image)"/>-->
+        <!--</div>-->
+      <!--</van-cell>-->
+    </van-cell-group>
+
+
+    <!--<van-cell-group style="margin-top: 10px;">-->
+    <!--<van-field label="联系人"/>-->
+    <!--<van-field label="联系电话"/>-->
+    <!--</van-cell-group>-->
+
+    <van-button @click="handleSubmit" size="large" type="primary" style="margin-top: 10px;">提交</van-button>
+    <!--<van-actionsheet v-model="showPicker">-->
+    <!--<van-picker show-toolbar-->
+    <!--title="申请原因" :columns="columns" @cancel="onCancel" @confirm="onConfirm"/>-->
+    <!--</van-actionsheet>-->
+  </div>
 </template>
 
 <script>
-export default {
-    data(){
-        return{
-            servicetype:'1',
-            showPicker:false,
-            remark:'我不想要了',
-            amount:'50.50',
-            maxamount:'50.50',
-            images:[],
-            columns: ['我不想要了','退运费','少件/漏发','未按约定时间发货','发错货', '质量问题', '商品与页面描述不符', '商品损坏', '缺少件'],
-            products: [
-                {
-                    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',
-                    max:2,
-                    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,
-                },
-            ]
-        }
+  import {Toast} from 'vant';
+  import moment from 'moment';
+  import {getOrderInfo, getOrderReturnReason, orderReturnApply} from '../../../api/order';
+
+  export default {
+    data() {
+      return {
+        servicetype: '1',
+        showPicker: false,
+        remark: '不想要了',
+        describe: '',
+        amount: '50.50',
+        maxamount: '50.50',
+        images: [],
+        columnsData: [],
+        columns: ['我不想要了', '退运费', '少件/漏发', '未按约定时间发货', '发错货', '质量问题', '商品与页面描述不符', '商品损坏', '缺少件'],
+        products: [
+          {
+            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',
+            max: 2,
+            min: 0,
+          },
+        ]
+      }
     },
-    methods:{
-        onClickShowPicker(){
-                this.showPicker=true;
-        },
-        onCancel() {
-            this.showPicker=false;
-        },
-        onConfirm(value, index) {
-            this.remark=value;
-            this.showPicker=false;
-        },
-        onRead(file) {
-            console.log(file.length);
-            if(file.length==undefined){
-                this.images.push(file.content);
-            }else{
-                file.forEach(item => {
-                    this.images.push(item.content);
-                });
-            }
-            console.log(file)
-        },
-        removeImage(index,image){
-            this.images.splice(index,1);
+    methods: {
+      onClickShowPicker() {
+        this.showPicker = true;
+      },
+      onCancel() {
+        this.showPicker = false;
+      },
+      onConfirm(value, index) {
+        this.remark = value;
+        this.showPicker = false;
+      },
+      onRead(file) {
+        if (file.length == undefined) {
+          this.images.push(file.content);
+        } else {
+          file.forEach(item => {
+            this.images.push(item.content);
+          });
         }
+      },
+      removeImage(index, image) {
+        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{
-        float: left;
+
+    .van-uploader {
+      float: left;
     }
-    &-image{
-        margin-left: 10px;position: relative;height: 50px;width: 50px;border: 1px solid #e5e7ea;float: left;margin-top: 5px;
-        img{
-           width: 50px; 
-        }
-        i{
-            position: absolute;
-            top: -6px;
-            right: -6px;
-            font-size: 8px;
-        }
+
+    &-image {
+      margin-left: 10px;
+      position: relative;
+      height: 50px;
+      width: 50px;
+      border: 1px solid #e5e7ea;
+      float: left;
+      margin-top: 5px;
+
+      img {
+        width: 50px;
+      }
+
+      i {
+        position: absolute;
+        top: -6px;
+        right: -6px;
+        font-size: 8px;
+      }
     }
-}
+  }
 </style>
diff --git a/mobile-web/src/page/user/order/info.vue b/mobile-web/src/page/user/order/info.vue
index 05caa56af..65b652115 100644
--- a/mobile-web/src/page/user/order/info.vue
+++ b/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],
+          }
+        })
       })
     }
   }