初始上传

addon/pc/source/os/pages/order/batchrefund.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="box">
+    <div class="null-page" v-show="yes"></div>
+
+    <el-card class="box-card">
+      <div slot="header" class="title clearfix">
+        <el-breadcrumb separator="/">
+          <el-breadcrumb-item :to="{ path: '/member/order_list' }">我的订单</el-breadcrumb-item>
+          <el-breadcrumb-item :to="{ path: '/member/order_detail?order_id=' + order_id }">订单详情</el-breadcrumb-item>
+          <el-breadcrumb-item>批量退款</el-breadcrumb-item>
+        </el-breadcrumb>
+      </div>
+      <div slot="header" class="shopings clearfix">
+        <span>选择退款商品</span>
+      </div>
+      <el-table ref="multipleTable" :data="orderData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55"></el-table-column>
+        <el-table-column label="商品图片" width="100" prop="goods_image">
+          <template slot-scope="scope">
+            <img class="box-img" :src="$img(scope.row.sku_image, { size: 'mid' })" alt="" @error="scope.row.sku_image = defaultGoodsImage" />
+          </template>
+        </el-table-column>
+        <el-table-column label="商品名称" prop="goods_name"></el-table-column>
+        <el-table-column label="价格" width="180" prop="price"></el-table-column>
+      </el-table>
+
+      <div class="flooter">
+        <div class="flooter-left">
+          <!-- <el-checkbox v-model="checked">全选</el-checkbox> -->
+        </div>
+        <div class="flooter-right">
+          共计选中{{order_goods_ids.length}}件商品
+          <el-button v-if="order_goods_ids.length" class="but" type="primary" @click="next">下一步</el-button>
+          <el-button v-else class="but" type="info">请选择退款商品</el-button>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+  import {
+    apiOrderDetail
+  } from "@/api/order/order"
+  import {
+    mapGetters
+  } from 'vuex';
+
+  export default {
+    name: "account_edit",
+    components: {},
+    data() {
+      return {
+        yes: true,
+        order_id: 0,
+        orderData: [],
+        checked: false,
+        order_goods_ids: []
+      }
+    },
+    created() {
+      this.order_id = this.$route.query.order_id
+      this.getOrderInfo()
+    },
+    mounted() {
+    },
+    computed: {
+      ...mapGetters(['defaultGoodsImage'])
+    },
+    layout: 'member',
+    methods: {
+      /**
+       * 获取商品数据
+       */
+      getOrderInfo() {
+        apiOrderDetail({
+          order_id: this.order_id
+        }).then((res) => {
+          if (res.code >= 0) {
+            this.orderData = [];
+            res.data.order_goods.forEach((item) => {
+              if (item.refund_status == 0) {
+                this.orderData.push(item);
+              }
+            })
+          }
+        })
+      },
+      handleSelectionChange(e) {
+        this.order_goods_ids = e.map((item, index) => {
+          return item.order_goods_id;
+        });
+      },
+      next() {
+        this.$router.push({
+          path: '/order/orderbatch_refund',
+          query: {
+            order_goods_id: this.order_goods_ids.join(','),
+            order_id: this.order_id
+          }
+        });
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .box-img {
+    width: 70px;
+    height: auto;
+  }
+
+  .flooter {
+    padding: 18px 20px;
+    box-sizing: border-box;
+    display: flex;
+    align-content: center;
+    justify-content: space-between;
+
+    .but {
+      padding: 10px 20px;
+      margin-left: 10px;
+    }
+  }
+
+  .title {
+    padding: 0 0 18px;
+    border-bottom: 1px solid #EBEEF5;
+  }
+
+  .shopings {
+    padding: 18px 0 0;
+  }
+</style>