售后修改

src/views/platmanag/sales/detail.vue

@@ -5,7 +5,7 @@
         <el-col class="top-btn">
           <el-button type="primary" size="mini" @click="toBack()">返回</el-button>
         </el-col>
-        <el-col :span="8" class="one">
+        <el-col :span="8" class="one" v-if="info.type == '1' || info.type == '2' || info.type == '3'">
           <el-col :span="24" class="shop"> <i class="el-icon-s-shop"></i>{{ shop.name }}</el-col>
           <el-col :span="24" class="goods">
             <el-col :span="6"><el-image :src="file"></el-image></el-col>
@@ -52,60 +52,56 @@
             <el-col :span="6">售后描述</el-col>
             <el-col :span="18" class="other">{{ info.desc }}</el-col>
           </el-col>
-          <el-col>
-            <!-- <el-button type="primary" @click="toStatus()">
-              {{
-                info.type == '1' && info.status == '0'
-                  ? '正在处理退款'
-                  : info.type == '1' && info.status == '1'
-                  ? '已退款'
-                  : info.type == '2' && info.status == '0'
-                  ? '正在处理退货'
-                  : info.type == '2' && info.status == '2'
-                  ? '已退货'
-                  : info.type == '3' && info.status == '0'
-                  ? '正在处理换货'
-                  : '已换货'
-              }}
-            </el-button> -->
-            <el-button type="primary" @click="toStatus('1')" v-if="info.type == '1' && info.status == '0'"> 正在处理退款 </el-button>
-            <el-button type="primary" @click="toStatus('-1')" v-if="info.type == '1' && info.status == '1'"> 已退款 </el-button>
-            <el-button type="primary" @click="toStatus('2')" v-if="info.type == '2' && info.status == '0'"> 正在处理退货 </el-button>
-            <el-button type="primary" @click="toStatus('-2')" v-if="info.type == '2' && info.status == '2'"> 已退货 </el-button>
-            <el-button type="primary" @click="toStatus('3')" v-if="info.type == '3' && info.status == '0'"> 正在处理换货 </el-button>
-            <el-button type="primary" @click="toStatus('-3')" v-if="info.type == '3' && info.status == '3'"> 已换货 </el-button>
-          </el-col>
-          <el-col :span="24">
-            <el-form :model="form" ref="form" label-width="100px" class="demo-ruleForm">
-              <!-- <el-form-item label="售后状态" prop="status">
-                <el-select v-model="form.status" clearable filterable placeholder="请选择" style="width: 100%" size="small">
-                  <el-option v-for="i in status" :key="i.label" :label="i.label" :value="i.value"></el-option>
-                </el-select>
-              </el-form-item> -->
-              <el-form-item label="寄出运单号" prop="shop_transport_no" v-if="info.type == '2' && !transport.shop_transport_no">
-                <el-input v-model="form.shop_transport_no" placeholder="请输入运单号,快递类型,同时填入" size="small"></el-input>
-              </el-form-item>
-              <el-form-item label="快递类型" prop="shop_transport_type" v-if="info.type == '2' && !transport.shop_transport_no">
-                <el-select
-                  v-model="form.shop_transport_type"
-                  clearable
-                  filterable
-                  placeholder="请选择快递类型,运单号,同时填入"
-                  size="small"
-                  style="width: 100%"
-                >
-                  <el-option v-for="i in shop_transport_typeList" :key="i._id" :label="i.label" :value="i.value"> </el-option>
-                </el-select>
-              </el-form-item>
-              <el-form-item label="售后结束时间" prop="end_time" v-if="!info.end_time">
-                <el-date-picker v-model="form.end_time" type="datetime" placeholder="选择时间" value-format="yyyy-MM-dd HH:mm:ss"> </el-date-picker>
-              </el-form-item>
-              <el-form-item>
-                <el-button type="primary" @click="onSubmit()">保存</el-button>
-              </el-form-item>
-            </el-form>
+        </el-col>
+        <el-col :span="8" class="one" v-if="info.type == '4' || info.type == '5'">
+          <el-col :span="24" class="shop"> <i class="el-icon-s-shop"></i>{{ shop.name }}</el-col>
+          <el-col :span="24" v-for="(item, index) in list" :key="index">
+            <el-col :span="24" class="goods bode">
+              <el-col :span="6"><el-image :src="item.goods.file[0].url"></el-image></el-col>
+              <el-col :span="18">
+                <el-col :span="12">
+                  <el-col>
+                    <p>{{ item.goods.name }}</p>
+                  </el-col>
+                  <el-col>
+                    <p>规格：{{ item.name }}</p>
+                  </el-col>
+                </el-col>
+                <el-col :span="12" class="money">
+                  <el-col>
+                    <p v-if="form.type == '0'">￥{{ item.sell_money }}</p>
+                    <p v-else-if="form.type == '1'">￥{{ item.group_config.money }}</p>
+                  </el-col>
+                  <el-col>
+                    <p>X{{ item.buy_num }}</p>
+                  </el-col>
+                </el-col>
+              </el-col>
+            </el-col>
+            <el-col :span="24" class="bode">
+              <el-col :span="6">运费</el-col>
+              <el-col :span="18" class="other" v-if="!item.goods.freight == '0'">{{ item.goods.freight }}</el-col>
+              <el-col :span="18" class="other" v-else>包邮</el-col>
+            </el-col>
           </el-col>
         </el-col>
+        <el-col :span="12" class="two">
+          <steps-1 v-if="info.type == '1'" @next="next" @exam="exam" :active="active"></steps-1>
+          <steps-2 v-if="info.type == '2'" @next="next" @exam="exam" :active="active" :activities="activities"></steps-2>
+          <steps-3
+            v-if="info.type == '3'"
+            @next="next"
+            @exam="exam"
+            :active="active"
+            @onSubmit="onSubmit"
+            :form="form"
+            :shop_transport_typeList="shop_transport_typeList"
+            @querySearch="querySearch"
+            :activities="activities"
+          ></steps-3>
+          <steps-4 v-if="info.type == '4'" @next="next" @exam="exam" :active="active"></steps-4>
+          <steps-5 v-if="info.type == '5'" @next="next" @exam="exam" :active="active"></steps-5>
+        </el-col>
       </el-col>
     </el-row>
   </div>
@@ -122,10 +118,20 @@ const { mapActions: sot } = createNamespacedHelpers('sot');
 export default {
   name: 'form-1',
   props: {},
-  components: {},
+  components: {
+    steps1: () => import('./parts/steps-1.vue'),
+    steps2: () => import('./parts/steps-2.vue'),
+    steps3: () => import('./parts/steps-3.vue'),
+    steps4: () => import('./parts/steps-4.vue'),
+    steps5: () => import('./parts/steps-5.vue'),
+  },
   data: function () {
     return {
+      // 商品
       shop: {},
+      // 状态4,5商品
+      list: [],
+      // 图片
       file: '',
       goods: {},
       good: {},
@@ -135,7 +141,10 @@ export default {
       status: [],
       form: {},
       info: {},
+      // 物流
       shop_transport_typeList: [],
+      activities: [],
+      active: 0,
     };
   },
   async created() {
@@ -156,44 +165,54 @@ export default {
         if (status) res.data.zhStatus = status.label;
         this.$set(this, `info`, res.data);
         this.$set(this, `shop`, res.data.shop);
-        if (res.data.transport) {
-          this.$set(this, `transport`, res.data.transport);
+        if (res.data.type == '4' || res.data.type == '5') {
+          // 商品
+          this.$set(this, `list`, res.data.order_detail.goods);
+        } else if (res.data.type == '1' || res.data.type == '2' || res.data.type == '3') {
+          if (res.data.transport) {
+            this.$set(this, `transport`, res.data.transport);
+          }
+          // 图片
+          this.$set(this, `file`, res.data.goods.goods.file[0].url);
+          // 商品
+          this.$set(this, `goods`, res.data.goods.goods);
+          // 规格
+          this.$set(this, `good`, res.data.goods);
         }
-        // 图片
-        this.$set(this, `file`, res.data.goods.goods.file[0].url);
-        // 商品
-        this.$set(this, `goods`, res.data.goods.goods);
-        // 规格
-        this.$set(this, `good`, res.data.goods);
       }
     },
-    // 修改状态
-    async toStatus(val) {
-      this.$confirm('是否确认修改订单状态', '提示', {
+    next(active) {
+      this.active = active + 1;
+    },
+    async exam(status) {
+      let info = this.info;
+      info.status = status;
+      let res;
+      this.$confirm('是否确认修改售后状态', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning',
       }).then(async () => {
-        let form = this.info;
-        form.status = val;
-        let res;
-        if (form.id) res = await this.update(form);
+        if (info.id) res = await this.update(info);
         if (this.$checkRes(res)) {
           this.$message({ type: `success`, message: `维护信息成功` });
           this.search();
         }
       });
     },
-    // 提交
-    async onSubmit() {
+    async querySearch(value) {
+      let res = await this.dictQuery({ code: 'transport_type', label: value });
+      if (this.$checkRes(res)) {
+        this.$set(this, 'shop_transport_typeList', res.data);
+      }
+    },
+    async onSubmit(val) {
       let info = this.info;
-      let form = this.form;
       let transport = {};
       let res;
-      if (form.end_time) info.end_time = form.end_time;
-      if (form.shop_transport_no && form.shop_transport_type) {
-        transport.shop_transport_no = form.shop_transport_no;
-        transport.shop_transport_type = form.shop_transport_type;
+      if (val.shop_transport_no && val.shop_transport_type) {
+        transport.shop_transport_no = val.shop_transport_no;
+        transport.shop_transport_type = val.shop_transport_type;
         info.transport = transport;
       }
       if (info.id) res = await this.update(info);
@@ -202,6 +221,7 @@ export default {
         this.search();
       }
     },
+
     // 查询其他信息
     async searchOther() {
       let res;
@@ -214,11 +234,11 @@ export default {
       if (this.$checkRes(res)) {
         this.$set(this, `statusList`, res.data);
       }
-      // 减免方式
-      res = await this.dictQuery({ code: 'transport_type' });
-      if (this.$checkRes(res)) {
-        this.$set(this, `shop_transport_typeList`, res.data);
-      }
+      // 物流
+      // res = await this.dictQuery({ code: 'transport_type' });
+      // if (this.$checkRes(res)) {
+      //   this.$set(this, `shop_transport_typeList`, res.data);
+      // }
     },
     // 返回
     toBack() {
@@ -247,7 +267,7 @@ export default {
 .main {
   .one {
     font-size: 20px;
-    margin: 10px 0 0 20%;
+    margin: 10px 0 0 8%;
     padding: 5px;
     .add {
       border-bottom: 2px dashed #ccc;
@@ -275,5 +295,8 @@ export default {
       margin: 4px 0;
     }
   }
+  .two {
+    margin: 0 0 0 20px;
+  }
 }
 </style>

src/views/platmanag/sales/parts/steps-1.vue

@@ -0,0 +1,58 @@
+<template>
+  <div id="steps-1">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-steps :active="active" align-center finish-status="success">
+          <el-step title="步骤1"> </el-step>
+          <el-step title="步骤2"> </el-step>
+          <el-step title="步骤3"> </el-step>
+        </el-steps>
+        <el-col :span="24" style="text-align: center">
+          <el-col v-if="active == '0'"> 买家已申请仅退款 </el-col>
+          <el-col v-if="active == '1'">
+            <el-button type="primary" @click="exam('1')">同意售后，处理退款</el-button>
+            <el-button type="primary" @click="exam('!1')">拒绝</el-button>
+          </el-col>
+          <el-col v-if="active == '2'"> 已完成退款 </el-col>
+          <el-button type="primary" style="margin-top: 10%" @click="next(active)" v-if="active < 2">下一步</el-button>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'steps-1',
+  props: { active: { type: Number } },
+  components: {},
+  data: function () {
+    return {};
+  },
+  created() {},
+  methods: {
+    next(active) {
+      this.$emit('next', active);
+    },
+    exam(status) {
+      this.$emit('exam', status);
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/platmanag/sales/parts/steps-2.vue

@@ -0,0 +1,79 @@
+<template>
+  <div id="steps-1">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-steps :active="active" align-center finish-status="success">
+          <el-step title="步骤1"> </el-step>
+          <el-step title="步骤2"> </el-step>
+          <el-step title="步骤3"> </el-step>
+          <el-step title="步骤4"> </el-step>
+        </el-steps>
+        <el-col :span="24" style="text-align: center">
+          <el-col v-if="active == '0'"> 买家已申请退货 </el-col>
+          <el-col v-if="active == '1'">
+            <el-button type="primary" @click="exam('2')">同意售后，处理退货</el-button>
+            <el-button type="primary" @click="exam('!2')">拒绝</el-button>
+          </el-col>
+          <el-col v-if="active == '2'">
+            <p>查看买家寄出物流</p>
+            <!-- <el-col :span="24">{{ activit.is_check || '暂无快递信息' }}</el-col>
+            <el-col :span="24">{{ transport.shop_transport_name || '暂无快递信息' }}: {{ activit.no || '暂无快递信息' }}</el-col>
+            <el-col :span="24">
+              <p>订单编号: {{ form.id }}</p>
+            </el-col>
+            <el-col :span="24">
+              <p>收货地址：{{ address.province }} , {{ address.city }} , {{ address.area }} , {{ address.address }}</p>
+            </el-col> -->
+            <el-col :span="24">
+              <el-timeline :reverse="reverse">
+                <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.time" :color="activity.color">
+                  {{ activity.context }}
+                </el-timeline-item>
+              </el-timeline>
+            </el-col>
+          </el-col>
+          <el-col v-if="active == '3'"> <el-button type="primary" @click="exam('-2')">已退货</el-button> </el-col>
+          <el-button type="primary" style="margin-top: 10%" @click="next(active)" v-if="active < 3">下一步</el-button>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'steps-1',
+  props: { active: { type: Number } },
+  components: {},
+  data: function () {
+    return {
+      reverse: false,
+    };
+  },
+  created() {},
+  methods: {
+    next(active) {
+      this.$emit('next', active);
+    },
+    exam(status) {
+      this.$emit('exam', status);
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/platmanag/sales/parts/steps-3.vue

@@ -0,0 +1,141 @@
+<template>
+  <div id="steps-1">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-steps :active="active" align-center finish-status="success">
+          <el-step title="步骤1"> </el-step>
+          <el-step title="步骤2"> </el-step>
+          <el-step title="步骤3"> </el-step>
+          <el-step title="步骤4"> </el-step>
+          <el-step title="步骤5"> </el-step>
+          <el-step title="步骤6"> </el-step>
+        </el-steps>
+        <el-col :span="24" style="text-align: center">
+          <el-col v-if="active == '0'"> 买家已申请退货 </el-col>
+          <el-col v-if="active == '1'">
+            <el-button type="primary" @click="exam('3')">同意售后，处理退货</el-button>
+            <el-button type="primary" @click="exam('!3')">拒绝</el-button>
+          </el-col>
+          <el-col v-if="active == '2'">
+            <p>查看买家寄出物流</p>
+            <!-- <el-col :span="24">{{ activit.is_check || '暂无快递信息' }}</el-col>
+            <el-col :span="24">{{ transport.shop_transport_name || '暂无快递信息' }}: {{ activit.no || '暂无快递信息' }}</el-col>
+            <el-col :span="24">
+              <p>订单编号: {{ form.id }}</p>
+            </el-col>
+            <el-col :span="24">
+              <p>收货地址：{{ address.province }} , {{ address.city }} , {{ address.area }} , {{ address.address }}</p>
+            </el-col> -->
+            <el-col :span="24">
+              <el-timeline :reverse="reverse">
+                <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.time" :color="activity.color">
+                  {{ activity.context }}
+                </el-timeline-item>
+              </el-timeline>
+            </el-col>
+          </el-col>
+          <el-col v-if="active == '3'">
+            <p>收到买家寄回快递，填写寄出物流信息</p>
+            <el-col>
+              <el-form :model="form" ref="form" label-width="100px" class="demo-ruleForm">
+                <el-form-item label="寄出运单号" prop="shop_transport_no">
+                  <el-input v-model="form.shop_transport_no" placeholder="请输入运单号,快递类型,同时填入" size="small"></el-input>
+                </el-form-item>
+                <el-form-item label="快递类型" prop="shop_transport_type">
+                  <el-select
+                    v-model="form.shop_transport_type"
+                    filterable
+                    remote
+                    reserve-keyword
+                    placeholder="请选择快递类型,运单号,同时填入"
+                    :remote-method="querySearch"
+                    :loading="loading"
+                    @change="handleSelect"
+                    size="small"
+                    style="width: 100%"
+                  >
+                    <el-option v-for="item in shop_transport_typeList" :key="item.id" :label="item.label" :value="item.value"> </el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item>
+                  <el-button type="primary" @click="onSubmit()">保存</el-button>
+                </el-form-item>
+              </el-form>
+            </el-col>
+          </el-col>
+          <el-col v-if="active == '4'">
+            <p>查看寄出物流</p>
+            <!-- <el-col :span="24">{{ activit.is_check || '暂无快递信息' }}</el-col>
+            <el-col :span="24">{{ transport.shop_transport_name || '暂无快递信息' }}: {{ activit.no || '暂无快递信息' }}</el-col>
+            <el-col :span="24">
+              <p>订单编号: {{ form.id }}</p>
+            </el-col>
+            <el-col :span="24">
+              <p>收货地址：{{ address.province }} , {{ address.city }} , {{ address.area }} , {{ address.address }}</p>
+            </el-col> -->
+            <el-col :span="24">
+              <el-timeline :reverse="reverse">
+                <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.time" :color="activity.color">
+                  {{ activity.context }}
+                </el-timeline-item>
+              </el-timeline>
+            </el-col>
+          </el-col>
+          <el-col v-if="active == '5'">
+            <el-col>买家确认收货</el-col>
+            <el-col><el-button type="primary" @click="exam('-3')">已换货</el-button></el-col>
+          </el-col>
+          <el-button type="primary" style="margin-top: 10%" @click="next(active)" v-if="active < 5">下一步</el-button>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'steps-1',
+  props: { active: { type: Number }, form: { type: Object }, shop_transport_typeList: { type: Array }, activities: { type: Array } },
+  components: {},
+  data: function () {
+    return {
+      loading: false,
+      reverse: false,
+    };
+  },
+  created() {},
+  methods: {
+    next(active) {
+      this.$emit('next', active);
+    },
+    exam(status) {
+      this.$emit('exam', status);
+    },
+    onSubmit() {
+      this.$emit('onSubmit', this.form);
+    },
+    async querySearch(value) {
+      this.loading = true;
+      this.$emit('querySearch', value);
+      this.loading = false;
+    },
+    handleSelect(value) {},
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/platmanag/sales/parts/steps-4.vue

@@ -0,0 +1,60 @@
+<template>
+  <div id="steps-1">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-steps :active="active" align-center finish-status="success">
+          <el-step title="步骤1"> </el-step>
+          <el-step title="步骤2"> </el-step>
+          <el-step title="步骤3"> </el-step>
+        </el-steps>
+        <el-col :span="24" style="text-align: center">
+          <el-col v-if="active == '0'"> 买家已申请取消订单 </el-col>
+          <el-col v-if="active == '1'">
+            <el-button type="primary" @click="exam('4')">同意售后，处理取消订单</el-button>
+            <el-button type="primary" @click="exam('!4')">拒绝</el-button>
+          </el-col>
+          <el-col v-if="active == '2'">
+            <el-col><el-button type="primary" @click="exam('-4')">已取消订单</el-button></el-col>
+          </el-col>
+          <el-button type="primary" style="margin-top: 10%" @click="next(active)" v-if="active < 2">下一步</el-button>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'steps-1',
+  props: { active: { type: Number } },
+  components: {},
+  data: function () {
+    return {};
+  },
+  created() {},
+  methods: {
+    next(active) {
+      this.$emit('next', active);
+    },
+    exam(status) {
+      this.$emit('exam', status);
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/platmanag/sales/parts/steps-5.vue

@@ -0,0 +1,60 @@
+<template>
+  <div id="steps-1">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-steps :active="active" align-center finish-status="success">
+          <el-step title="步骤1"> </el-step>
+          <el-step title="步骤2"> </el-step>
+          <el-step title="步骤3"> </el-step>
+        </el-steps>
+        <el-col :span="24" style="text-align: center">
+          <el-col v-if="active == '0'"> 买家已申请拒收商品 </el-col>
+          <el-col v-if="active == '1'">
+            <el-button type="primary" @click="exam('5')">同意拒收商品</el-button>
+            <el-button type="primary" @click="exam('!5')">拒绝</el-button>
+          </el-col>
+          <el-col v-if="active == '2'">
+            <el-col><el-button type="primary" @click="exam('-5')">结束拒收商品</el-button></el-col>
+          </el-col>
+          <el-button type="primary" style="margin-top: 10%" @click="next(active)" v-if="active < 2">下一步</el-button>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'steps-1',
+  props: { active: { type: Number } },
+  components: {},
+  data: function () {
+    return {};
+  },
+  created() {},
+  methods: {
+    next(active) {
+      this.$emit('next', active);
+    },
+    exam(status) {
+      this.$emit('exam', status);
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/selfShop/sales/detail.vue

@@ -5,7 +5,7 @@
         <el-col class="top-btn">
           <el-button type="primary" size="mini" @click="toBack()">返回</el-button>
         </el-col>
-        <el-col :span="8" class="one">
+        <el-col :span="8" class="one" v-if="info.type == '1' || info.type == '2' || info.type == '3'">
           <el-col :span="24" class="shop"> <i class="el-icon-s-shop"></i>{{ shop.name }}</el-col>
           <el-col :span="24" class="goods">
             <el-col :span="6"><el-image :src="file"></el-image></el-col>
@@ -52,45 +52,56 @@
             <el-col :span="6">售后描述</el-col>
             <el-col :span="18" class="other">{{ info.desc }}</el-col>
           </el-col>
-          <el-col>
-            <el-button type="primary" @click="toStatus('1')" v-if="info.type == '1' && info.status == '0'"> 正在处理退款 </el-button>
-            <el-button type="primary" @click="toStatus('-1')" v-if="info.type == '1' && info.status == '1'"> 已退款 </el-button>
-            <el-button type="primary" @click="toStatus('2')" v-if="info.type == '2' && info.status == '0'"> 正在处理退货 </el-button>
-            <el-button type="primary" @click="toStatus('-2')" v-if="info.type == '2' && info.status == '2'"> 已退货 </el-button>
-            <el-button type="primary" @click="toStatus('3')" v-if="info.type == '3' && info.status == '0'"> 正在处理换货 </el-button>
-            <el-button type="primary" @click="toStatus('-3')" v-if="info.type == '3' && info.status == '3'"> 已换货 </el-button>
-          </el-col>
-          <el-col :span="24">
-            <el-form :model="form" ref="form" label-width="100px" class="demo-ruleForm">
-              <!-- <el-form-item label="售后状态" prop="status">
-                <el-select v-model="form.status" clearable filterable placeholder="请选择" style="width: 100%" size="small">
-                  <el-option v-for="i in status" :key="i.label" :label="i.label" :value="i.value"></el-option>
-                </el-select>
-              </el-form-item> -->
-              <el-form-item label="寄出运单号" prop="shop_transport_no" v-if="info.type == '2' && !transport.shop_transport_no">
-                <el-input v-model="form.shop_transport_no" placeholder="请输入运单号,快递类型,同时填入" size="small"></el-input>
-              </el-form-item>
-              <el-form-item label="快递类型" prop="shop_transport_type" v-if="info.type == '2' && !transport.shop_transport_no">
-                <el-select
-                  v-model="form.shop_transport_type"
-                  clearable
-                  filterable
-                  placeholder="请选择快递类型,运单号,同时填入"
-                  size="small"
-                  style="width: 100%"
-                >
-                  <el-option v-for="i in shop_transport_typeList" :key="i._id" :label="i.label" :value="i.value"> </el-option>
-                </el-select>
-              </el-form-item>
-              <el-form-item label="售后结束时间" prop="end_time" v-if="!info.end_time">
-                <el-date-picker v-model="form.end_time" type="datetime" placeholder="选择时间" value-format="yyyy-MM-dd HH:mm:ss"> </el-date-picker>
-              </el-form-item>
-              <el-form-item>
-                <el-button type="primary" @click="onSubmit()">保存</el-button>
-              </el-form-item>
-            </el-form>
+        </el-col>
+        <el-col :span="8" class="one" v-if="info.type == '4' || info.type == '5'">
+          <el-col :span="24" class="shop"> <i class="el-icon-s-shop"></i>{{ shop.name }}</el-col>
+          <el-col :span="24" v-for="(item, index) in list" :key="index">
+            <el-col :span="24" class="goods bode">
+              <el-col :span="6"><el-image :src="item.goods.file[0].url"></el-image></el-col>
+              <el-col :span="18">
+                <el-col :span="12">
+                  <el-col>
+                    <p>{{ item.goods.name }}</p>
+                  </el-col>
+                  <el-col>
+                    <p>规格：{{ item.name }}</p>
+                  </el-col>
+                </el-col>
+                <el-col :span="12" class="money">
+                  <el-col>
+                    <p v-if="form.type == '0'">￥{{ item.sell_money }}</p>
+                    <p v-else-if="form.type == '1'">￥{{ item.group_config.money }}</p>
+                  </el-col>
+                  <el-col>
+                    <p>X{{ item.buy_num }}</p>
+                  </el-col>
+                </el-col>
+              </el-col>
+            </el-col>
+            <el-col :span="24" class="bode">
+              <el-col :span="6">运费</el-col>
+              <el-col :span="18" class="other" v-if="!item.goods.freight == '0'">{{ item.goods.freight }}</el-col>
+              <el-col :span="18" class="other" v-else>包邮</el-col>
+            </el-col>
           </el-col>
         </el-col>
+        <el-col :span="12" class="two">
+          <steps-1 v-if="info.type == '1'" @next="next" @exam="exam" :active="active"></steps-1>
+          <steps-2 v-if="info.type == '2'" @next="next" @exam="exam" :active="active" :activities="activities"></steps-2>
+          <steps-3
+            v-if="info.type == '3'"
+            @next="next"
+            @exam="exam"
+            :active="active"
+            @onSubmit="onSubmit"
+            :form="form"
+            :shop_transport_typeList="shop_transport_typeList"
+            @querySearch="querySearch"
+            :activities="activities"
+          ></steps-3>
+          <steps-4 v-if="info.type == '4'" @next="next" @exam="exam" :active="active"></steps-4>
+          <steps-5 v-if="info.type == '5'" @next="next" @exam="exam" :active="active"></steps-5>
+        </el-col>
       </el-col>
     </el-row>
   </div>
@@ -107,10 +118,20 @@ const { mapActions: sot } = createNamespacedHelpers('sot');
 export default {
   name: 'form-1',
   props: {},
-  components: {},
+  components: {
+    steps1: () => import('./parts/steps-1.vue'),
+    steps2: () => import('./parts/steps-2.vue'),
+    steps3: () => import('./parts/steps-3.vue'),
+    steps4: () => import('./parts/steps-4.vue'),
+    steps5: () => import('./parts/steps-5.vue'),
+  },
   data: function () {
     return {
+      // 商品
       shop: {},
+      // 状态4,5商品
+      list: [],
+      // 图片
       file: '',
       goods: {},
       good: {},
@@ -120,7 +141,10 @@ export default {
       status: [],
       form: {},
       info: {},
+      // 物流
       shop_transport_typeList: [],
+      activities: [],
+      active: 0,
     };
   },
   async created() {
@@ -141,71 +165,54 @@ export default {
         if (status) res.data.zhStatus = status.label;
         this.$set(this, `info`, res.data);
         this.$set(this, `shop`, res.data.shop);
-        if (res.data.transport) {
-          this.$set(this, `transport`, res.data.transport);
+        if (res.data.type == '4' || res.data.type == '5') {
+          // 商品
+          this.$set(this, `list`, res.data.order_detail.goods);
+        } else if (res.data.type == '1' || res.data.type == '2' || res.data.type == '3') {
+          if (res.data.transport) {
+            this.$set(this, `transport`, res.data.transport);
+          }
+          // 图片
+          this.$set(this, `file`, res.data.goods.goods.file[0].url);
+          // 商品
+          this.$set(this, `goods`, res.data.goods.goods);
+          // 规格
+          this.$set(this, `good`, res.data.goods);
         }
-        // 图片
-        this.$set(this, `file`, res.data.goods.goods.file[0].url);
-        // 商品
-        this.$set(this, `goods`, res.data.goods.goods);
-        // 规格
-        this.$set(this, `good`, res.data.goods);
-        // this.getStatusList();
       }
     },
-    // async getStatusList() {
-    //   let form = this.info;
-    //   let e = this.statusList;
-    //   let list = [];
-    //   if (form.type == '0') {
-    //     for (const val of e) {
-    //       if (val.value == '0' || val.value == '1' || val.value == '-1') {
-    //         list.push(val);
-    //       }
-    //     }
-    //   } else if (form.type == '1') {
-    //     for (const val of e) {
-    //       if (val.value == '0' || val.value == '2' || val.value == '-2') {
-    //         list.push(val);
-    //       }
-    //     }
-    //   } else {
-    //     for (const val of e) {
-    //       if (val.value == '0' || val.value == '3' || val.value == '-3') {
-    //         list.push(val);
-    //       }
-    //     }
-    //   }
-    //   this.$set(this, `status`, list);
-    // },
-    // 修改状态
-    async toStatus(val) {
-      this.$confirm('是否确认修改订单状态', '提示', {
+    next(active) {
+      this.active = active + 1;
+    },
+    async exam(status) {
+      let info = this.info;
+      info.status = status;
+      let res;
+      this.$confirm('是否确认修改售后状态', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning',
       }).then(async () => {
-        let form = this.info;
-        form.status = val;
-        let res;
-        if (form.id) res = await this.update(form);
+        if (info.id) res = await this.update(info);
         if (this.$checkRes(res)) {
           this.$message({ type: `success`, message: `维护信息成功` });
           this.search();
         }
       });
     },
-    // 提交
-    async onSubmit() {
+    async querySearch(value) {
+      let res = await this.dictQuery({ code: 'transport_type', label: value });
+      if (this.$checkRes(res)) {
+        this.$set(this, 'shop_transport_typeList', res.data);
+      }
+    },
+    async onSubmit(val) {
       let info = this.info;
-      let form = this.form;
       let transport = {};
       let res;
-      if (form.end_time) info.end_time = form.end_time;
-      // if (form.status) info.status = form.status;
-      if (form.shop_transport_no && form.shop_transport_type) {
-        transport.shop_transport_no = form.shop_transport_no;
-        transport.shop_transport_type = form.shop_transport_type;
+      if (val.shop_transport_no && val.shop_transport_type) {
+        transport.shop_transport_no = val.shop_transport_no;
+        transport.shop_transport_type = val.shop_transport_type;
         info.transport = transport;
       }
       if (info.id) res = await this.update(info);
@@ -214,6 +221,7 @@ export default {
         this.search();
       }
     },
+
     // 查询其他信息
     async searchOther() {
       let res;
@@ -226,11 +234,11 @@ export default {
       if (this.$checkRes(res)) {
         this.$set(this, `statusList`, res.data);
       }
-      // 减免方式
-      res = await this.dictQuery({ code: 'transport_type' });
-      if (this.$checkRes(res)) {
-        this.$set(this, `shop_transport_typeList`, res.data);
-      }
+      // 物流
+      // res = await this.dictQuery({ code: 'transport_type' });
+      // if (this.$checkRes(res)) {
+      //   this.$set(this, `shop_transport_typeList`, res.data);
+      // }
     },
     // 返回
     toBack() {
@@ -259,7 +267,7 @@ export default {
 .main {
   .one {
     font-size: 20px;
-    margin: 10px 0 0 20%;
+    margin: 10px 0 0 8%;
     padding: 5px;
     .add {
       border-bottom: 2px dashed #ccc;
@@ -287,5 +295,8 @@ export default {
       margin: 4px 0;
     }
   }
+  .two {
+    margin: 0 0 0 20px;
+  }
 }
 </style>

src/views/selfShop/sales/parts/steps-1.vue

@@ -0,0 +1,58 @@
+<template>
+  <div id="steps-1">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-steps :active="active" align-center finish-status="success">
+          <el-step title="步骤1"> </el-step>
+          <el-step title="步骤2"> </el-step>
+          <el-step title="步骤3"> </el-step>
+        </el-steps>
+        <el-col :span="24" style="text-align: center">
+          <el-col v-if="active == '0'"> 买家已申请仅退款 </el-col>
+          <el-col v-if="active == '1'">
+            <el-button type="primary" @click="exam('1')">同意售后，处理退款</el-button>
+            <el-button type="primary" @click="exam('!1')">拒绝</el-button>
+          </el-col>
+          <el-col v-if="active == '2'"> 已完成退款 </el-col>
+          <el-button type="primary" style="margin-top: 10%" @click="next(active)" v-if="active < 2">下一步</el-button>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'steps-1',
+  props: { active: { type: Number } },
+  components: {},
+  data: function () {
+    return {};
+  },
+  created() {},
+  methods: {
+    next(active) {
+      this.$emit('next', active);
+    },
+    exam(status) {
+      this.$emit('exam', status);
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/selfShop/sales/parts/steps-2.vue

@@ -0,0 +1,79 @@
+<template>
+  <div id="steps-1">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-steps :active="active" align-center finish-status="success">
+          <el-step title="步骤1"> </el-step>
+          <el-step title="步骤2"> </el-step>
+          <el-step title="步骤3"> </el-step>
+          <el-step title="步骤4"> </el-step>
+        </el-steps>
+        <el-col :span="24" style="text-align: center">
+          <el-col v-if="active == '0'"> 买家已申请退货 </el-col>
+          <el-col v-if="active == '1'">
+            <el-button type="primary" @click="exam('2')">同意售后，处理退货</el-button>
+            <el-button type="primary" @click="exam('!2')">拒绝</el-button>
+          </el-col>
+          <el-col v-if="active == '2'">
+            <p>查看买家寄出物流</p>
+            <!-- <el-col :span="24">{{ activit.is_check || '暂无快递信息' }}</el-col>
+            <el-col :span="24">{{ transport.shop_transport_name || '暂无快递信息' }}: {{ activit.no || '暂无快递信息' }}</el-col>
+            <el-col :span="24">
+              <p>订单编号: {{ form.id }}</p>
+            </el-col>
+            <el-col :span="24">
+              <p>收货地址：{{ address.province }} , {{ address.city }} , {{ address.area }} , {{ address.address }}</p>
+            </el-col> -->
+            <el-col :span="24">
+              <el-timeline :reverse="reverse">
+                <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.time" :color="activity.color">
+                  {{ activity.context }}
+                </el-timeline-item>
+              </el-timeline>
+            </el-col>
+          </el-col>
+          <el-col v-if="active == '3'"> <el-button type="primary" @click="exam('-2')">已退货</el-button> </el-col>
+          <el-button type="primary" style="margin-top: 10%" @click="next(active)" v-if="active < 3">下一步</el-button>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'steps-1',
+  props: { active: { type: Number } },
+  components: {},
+  data: function () {
+    return {
+      reverse: false,
+    };
+  },
+  created() {},
+  methods: {
+    next(active) {
+      this.$emit('next', active);
+    },
+    exam(status) {
+      this.$emit('exam', status);
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/selfShop/sales/parts/steps-3.vue

@@ -0,0 +1,141 @@
+<template>
+  <div id="steps-1">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-steps :active="active" align-center finish-status="success">
+          <el-step title="步骤1"> </el-step>
+          <el-step title="步骤2"> </el-step>
+          <el-step title="步骤3"> </el-step>
+          <el-step title="步骤4"> </el-step>
+          <el-step title="步骤5"> </el-step>
+          <el-step title="步骤6"> </el-step>
+        </el-steps>
+        <el-col :span="24" style="text-align: center">
+          <el-col v-if="active == '0'"> 买家已申请退货 </el-col>
+          <el-col v-if="active == '1'">
+            <el-button type="primary" @click="exam('3')">同意售后，处理退货</el-button>
+            <el-button type="primary" @click="exam('!3')">拒绝</el-button>
+          </el-col>
+          <el-col v-if="active == '2'">
+            <p>查看买家寄出物流</p>
+            <!-- <el-col :span="24">{{ activit.is_check || '暂无快递信息' }}</el-col>
+            <el-col :span="24">{{ transport.shop_transport_name || '暂无快递信息' }}: {{ activit.no || '暂无快递信息' }}</el-col>
+            <el-col :span="24">
+              <p>订单编号: {{ form.id }}</p>
+            </el-col>
+            <el-col :span="24">
+              <p>收货地址：{{ address.province }} , {{ address.city }} , {{ address.area }} , {{ address.address }}</p>
+            </el-col> -->
+            <el-col :span="24">
+              <el-timeline :reverse="reverse">
+                <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.time" :color="activity.color">
+                  {{ activity.context }}
+                </el-timeline-item>
+              </el-timeline>
+            </el-col>
+          </el-col>
+          <el-col v-if="active == '3'">
+            <p>收到买家寄回快递，填写寄出物流信息</p>
+            <el-col>
+              <el-form :model="form" ref="form" label-width="100px" class="demo-ruleForm">
+                <el-form-item label="寄出运单号" prop="shop_transport_no">
+                  <el-input v-model="form.shop_transport_no" placeholder="请输入运单号,快递类型,同时填入" size="small"></el-input>
+                </el-form-item>
+                <el-form-item label="快递类型" prop="shop_transport_type">
+                  <el-select
+                    v-model="form.shop_transport_type"
+                    filterable
+                    remote
+                    reserve-keyword
+                    placeholder="请选择快递类型,运单号,同时填入"
+                    :remote-method="querySearch"
+                    :loading="loading"
+                    @change="handleSelect"
+                    size="small"
+                    style="width: 100%"
+                  >
+                    <el-option v-for="item in shop_transport_typeList" :key="item.id" :label="item.label" :value="item.value"> </el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item>
+                  <el-button type="primary" @click="onSubmit()">保存</el-button>
+                </el-form-item>
+              </el-form>
+            </el-col>
+          </el-col>
+          <el-col v-if="active == '4'">
+            <p>查看寄出物流</p>
+            <!-- <el-col :span="24">{{ activit.is_check || '暂无快递信息' }}</el-col>
+            <el-col :span="24">{{ transport.shop_transport_name || '暂无快递信息' }}: {{ activit.no || '暂无快递信息' }}</el-col>
+            <el-col :span="24">
+              <p>订单编号: {{ form.id }}</p>
+            </el-col>
+            <el-col :span="24">
+              <p>收货地址：{{ address.province }} , {{ address.city }} , {{ address.area }} , {{ address.address }}</p>
+            </el-col> -->
+            <el-col :span="24">
+              <el-timeline :reverse="reverse">
+                <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.time" :color="activity.color">
+                  {{ activity.context }}
+                </el-timeline-item>
+              </el-timeline>
+            </el-col>
+          </el-col>
+          <el-col v-if="active == '5'">
+            <el-col>买家确认收货</el-col>
+            <el-col><el-button type="primary" @click="exam('-3')">已换货</el-button></el-col>
+          </el-col>
+          <el-button type="primary" style="margin-top: 10%" @click="next(active)" v-if="active < 5">下一步</el-button>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'steps-1',
+  props: { active: { type: Number }, form: { type: Object }, shop_transport_typeList: { type: Array }, activities: { type: Array } },
+  components: {},
+  data: function () {
+    return {
+      loading: false,
+      reverse: false,
+    };
+  },
+  created() {},
+  methods: {
+    next(active) {
+      this.$emit('next', active);
+    },
+    exam(status) {
+      this.$emit('exam', status);
+    },
+    onSubmit() {
+      this.$emit('onSubmit', this.form);
+    },
+    async querySearch(value) {
+      this.loading = true;
+      this.$emit('querySearch', value);
+      this.loading = false;
+    },
+    handleSelect(value) {},
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/selfShop/sales/parts/steps-4.vue

@@ -0,0 +1,60 @@
+<template>
+  <div id="steps-1">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-steps :active="active" align-center finish-status="success">
+          <el-step title="步骤1"> </el-step>
+          <el-step title="步骤2"> </el-step>
+          <el-step title="步骤3"> </el-step>
+        </el-steps>
+        <el-col :span="24" style="text-align: center">
+          <el-col v-if="active == '0'"> 买家已申请取消订单 </el-col>
+          <el-col v-if="active == '1'">
+            <el-button type="primary" @click="exam('4')">同意售后，处理取消订单</el-button>
+            <el-button type="primary" @click="exam('!4')">拒绝</el-button>
+          </el-col>
+          <el-col v-if="active == '2'">
+            <el-col><el-button type="primary" @click="exam('-4')">已取消订单</el-button></el-col>
+          </el-col>
+          <el-button type="primary" style="margin-top: 10%" @click="next(active)" v-if="active < 2">下一步</el-button>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'steps-1',
+  props: { active: { type: Number } },
+  components: {},
+  data: function () {
+    return {};
+  },
+  created() {},
+  methods: {
+    next(active) {
+      this.$emit('next', active);
+    },
+    exam(status) {
+      this.$emit('exam', status);
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/selfShop/sales/parts/steps-5.vue

@@ -0,0 +1,60 @@
+<template>
+  <div id="steps-1">
+    <el-row>
+      <el-col :span="24" class="main">
+        <el-steps :active="active" align-center finish-status="success">
+          <el-step title="步骤1"> </el-step>
+          <el-step title="步骤2"> </el-step>
+          <el-step title="步骤3"> </el-step>
+        </el-steps>
+        <el-col :span="24" style="text-align: center">
+          <el-col v-if="active == '0'"> 买家已申请拒收商品 </el-col>
+          <el-col v-if="active == '1'">
+            <el-button type="primary" @click="exam('5')">同意拒收商品</el-button>
+            <el-button type="primary" @click="exam('!5')">拒绝</el-button>
+          </el-col>
+          <el-col v-if="active == '2'">
+            <el-col><el-button type="primary" @click="exam('-5')">结束拒收商品</el-button></el-col>
+          </el-col>
+          <el-button type="primary" style="margin-top: 10%" @click="next(active)" v-if="active < 2">下一步</el-button>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'steps-1',
+  props: { active: { type: Number } },
+  components: {},
+  data: function () {
+    return {};
+  },
+  created() {},
+  methods: {
+    next(active) {
+      this.$emit('next', active);
+    },
+    exam(status) {
+      this.$emit('exam', status);
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>