新增订单管理

src/router/views/index.js

@@ -524,6 +524,23 @@ export default [{
       }
     ]
   },
+  // 订单详情
+  {
+    path: '/orderManagement/orderDetail/index',
+    component: Layout,
+    hidden: true,
+    children: [
+      {
+        path: '/orderManagement/orderDetail/index',
+        name:"订单详情",
+        meta: {
+          i18n: '/orderManagement/orderDetail/index',
+          keepAlive: true,
+        },
+        component: () => import( /* webpackChunkName: "views" */ '@/views/orderManagement/orderDetail/index')
+      }
+    ]
+  },
     {
         path: '/work/process/leave',
         component: Layout,

src/views/orderManagement/orderDetail/config/consigneeOption.json

@@ -0,0 +1,31 @@
+{
+  "searchShow": true,
+  "searchMenuSpan": 6,
+  "border": true,
+  "index": false,
+  "viewBtn": false,
+  "editBtn": false,
+  "addBtn": false,
+  "delBtn": false,
+  "align": "center",
+  "menuWidth": 150,
+  "menu": false,
+  "refreshBtn": false,
+  "column": [{
+    "label": "收货人名称",
+    "prop": "name",
+    "index": 1
+  },{
+    "label": "收货地址",
+    "prop": "address",
+    "index": 2
+  },{
+    "label": "详细收货地址",
+    "prop": "addressDetail",
+    "index": 3
+  },{
+    "label": "收货人手机号",
+    "prop": "phone",
+    "index": 4
+  }]
+}

src/views/orderManagement/orderDetail/config/evaluateOption.json

@@ -0,0 +1,43 @@
+{
+  "searchShow": true,
+  "searchMenuSpan": 6,
+  "border": true,
+  "index": false,
+  "viewBtn": false,
+  "editBtn": false,
+  "addBtn": false,
+  "delBtn": false,
+  "align": "center",
+  "menuWidth": 150,
+  "menu": false,
+  "refreshBtn": false,
+  "column": [{
+    "label": "订单编号",
+    "prop": "id",
+    "index": 1
+  },{
+    "label": "评价内容",
+    "prop": "content",
+    "index": 1
+  },{
+    "label": "评价图片",
+    "prop": "img",
+    "index": 1
+  },{
+    "label": "商品评分",
+    "prop": "score",
+    "index": 1
+  },{
+    "label": "商家回复",
+    "prop": "reply",
+    "index": 1
+  },{
+    "label": "评价时间",
+    "prop": "time",
+    "index": 1
+  },{
+    "label": "状态",
+    "prop": "status",
+    "index": 1
+  }]
+}

src/views/orderManagement/orderDetail/config/goodsOption.json

@@ -0,0 +1,47 @@
+{
+  "searchShow": true,
+  "searchMenuSpan": 6,
+  "border": true,
+  "index": false,
+  "viewBtn": false,
+  "editBtn": false,
+  "addBtn": false,
+  "delBtn": false,
+  "align": "center",
+  "menuWidth": 150,
+  "menu": false,
+  "refreshBtn": false,
+  "column": [{
+    "label": "订单号",
+    "prop": "orderNo",
+    "index": 1
+  },{
+    "label": "商品",
+    "prop": "goods",
+    "index": 1
+  },{
+    "label": "价格",
+    "prop": "price",
+    "index": 1
+  },{
+    "label": "商品数量",
+    "prop": "goodsNum",
+    "index": 1
+  },{
+    "label": "商品SKU",
+    "prop": "goodsSKU",
+    "index": 1
+  },{
+    "label": "VIP",
+    "prop": "isVip",
+    "index": 1
+  },{
+    "label": "分销",
+    "prop": "goods",
+    "index": 1
+  },{
+    "label": "下单时间",
+    "prop": "goods",
+    "index": 1
+  }]
+}

src/views/orderManagement/orderDetail/config/journalOption.json

@@ -0,0 +1,43 @@
+{
+  "searchShow": true,
+  "searchMenuSpan": 6,
+  "border": true,
+  "index": false,
+  "viewBtn": false,
+  "editBtn": false,
+  "addBtn": false,
+  "delBtn": false,
+  "align": "center",
+  "menuWidth": 150,
+  "menu": false,
+  "refreshBtn": false,
+  "column": [{
+    "label": "订单ID",
+    "prop": "orderId",
+    "index": 1
+  },{
+    "label": "操作类型",
+    "prop": "type",
+    "index": 1
+  },{
+    "label": "当前状态",
+    "prop": "status",
+    "index": 1
+  },{
+    "label": "上个状态",
+    "prop": "lastStatus",
+    "index": 1
+  },{
+    "label": "IP",
+    "prop": "ip",
+    "index": 1
+  },{
+    "label": "备注",
+    "prop": "remark",
+    "index": 1
+  },{
+    "label": "创建时间",
+    "prop": "createTime",
+    "index": 1
+  }]
+}

src/views/orderManagement/orderDetail/config/payOption.json

@@ -0,0 +1,35 @@
+{
+  "searchShow": true,
+  "searchMenuSpan": 6,
+  "border": true,
+  "index": false,
+  "viewBtn": false,
+  "editBtn": false,
+  "addBtn": false,
+  "delBtn": false,
+  "align": "center",
+  "menuWidth": 150,
+  "menu": false,
+  "refreshBtn": false,
+  "column": [{
+    "label": "支付编号",
+    "prop": "payNo",
+    "index": 1
+  },{
+    "label": "支付方式",
+    "prop": "payment",
+    "index": 1
+  },{
+    "label": "支付状态",
+    "prop": "paymentStatus",
+    "index": 1
+  },{
+    "label": "支付类型",
+    "prop": "paymentType",
+    "index": 1
+  },{
+    "label": "支付时间",
+    "prop": "paymentTime",
+    "index": 1
+  }]
+}

src/views/orderManagement/orderDetail/index.vue

@@ -0,0 +1,523 @@
+<template>
+  <div class="borderless">
+    <div class="customer-head">
+      <div class="customer-back">
+        <el-button
+          type="danger"
+          style="border: none;background: none;color: red"
+          icon="el-icon-arrow-left"
+          @click="backToList"
+        >返回列表
+        </el-button>
+      </div>
+    </div>
+    <div style="margin-top: 60px;margin-bottom:35px">
+      <containerTitle title="基础信息"></containerTitle>
+      <basic-container>
+        <avue-form ref="form" v-model="form" :option="option"></avue-form>
+      </basic-container>
+      <!--    选择-->
+      <div class="tags" style="margin: 15px 0">
+        <ul>
+          <li @click="changeTags('收货人')"><span :class="{'active': tagsName == '收货人'}">收货人<div v-if="tagsName == '收货人'" class="active_bot el-button--primary"></div></span></li>
+          <li @click="changeTags('商品')"><span :class="{'active': tagsName == '商品'}">商品<div v-if="tagsName == '商品'" class="active_bot el-button--primary"></div></span></li>
+          <li @click="changeTags('日志')"><span :class="{'active': tagsName == '日志'}">日志<div v-if="tagsName == '日志'" class="active_bot el-button--primary"></div></span></li>
+          <li @click="changeTags('评价')"><span :class="{'active': tagsName == '评价'}">评价<div v-if="tagsName == '评价'" class="active_bot el-button--primary"></div></span></li>
+          <li @click="changeTags('支付')"><span :class="{'active': tagsName == '支付'}">支付<div v-if="tagsName == '支付'" class="active_bot el-button--primary"></div></span></li>
+        </ul>
+      </div>
+      <basic-container>
+        <avue-crud
+          ref="consignee"
+          :data="consigneeList"
+          v-if="tagsName == '收货人'"
+          :option="consigneeOption"
+        ></avue-crud>
+        <avue-crud
+          ref="consignee"
+          :data="goodsList"
+          v-if="tagsName == '商品'"
+          :option="goodsOption"
+        ></avue-crud>
+        <avue-crud
+          ref="consignee"
+          :data="journalList"
+          v-if="tagsName == '日志'"
+          :option="journalOption"
+        ></avue-crud>
+        <avue-crud
+          ref="consignee"
+          :data="evaluateList"
+          v-if="tagsName == '评价'"
+          :option="evaluateOption"
+        ></avue-crud>
+        <avue-crud
+          ref="consignee"
+          :data="payList"
+          v-if="tagsName == '支付'"
+          :option="payOption"
+        ></avue-crud>
+      </basic-container>
+    </div>
+  </div>
+</template>
+
+<script>
+import consigneeOption from './config/consigneeOption.json'
+import goodsOption from './config/goodsOption.json'
+import journalOption from './config/journalOption.json'
+import evaluateOption from './config/evaluateOption.json'
+import payOption from './config/payOption.json'
+
+export default {
+  name: "orderDetail",
+  data() {
+    return {
+      form: {},
+      option: {
+        menuBtn: false,
+        labelWidth: 100,
+        column: [
+          {
+            label: "下单人",
+            prop: "corpId",
+            rules: [
+              {
+                required: false,
+                message: "",
+                trigger: "blur"
+              }
+            ],
+            span: 6,
+            slot: false
+          },{
+            label: "订单编号",
+            prop: "corpId",
+            rules: [
+              {
+                required: false,
+                message: "",
+                trigger: "blur"
+              }
+            ],
+            span: 6,
+            slot: false
+          },{
+            label: "客户名称",
+            prop: "corpId",
+            rules: [
+              {
+                required: false,
+                message: "",
+                trigger: "blur"
+              }
+            ],
+            span: 6,
+            slot: false
+          },{
+            label: "下单人openid",
+            prop: "corpId",
+            rules: [
+              {
+                required: false,
+                message: "",
+                trigger: "blur"
+              }
+            ],
+            span: 6,
+            slot: false
+          },{
+            label: "收货人",
+            prop: "corpId",
+            rules: [
+              {
+                required: false,
+                message: "",
+                trigger: "blur"
+              }
+            ],
+            span: 6,
+            slot: false
+          },{
+            label: "收货人手机号",
+            prop: "corpId",
+            rules: [
+              {
+                required: false,
+                message: "",
+                trigger: "blur"
+              }
+            ],
+            span: 6,
+            slot: false
+          },{
+            label: "快递公司",
+            prop: "corpId",
+            rules: [
+              {
+                required: false,
+                message: "",
+                trigger: "blur"
+              }
+            ],
+            span: 6,
+            slot: false
+          },{
+            label: "快递单号",
+            prop: "corpId",
+            rules: [
+              {
+                required: false,
+                message: "",
+                trigger: "blur"
+              }
+            ],
+            span: 6,
+            slot: false
+          },{
+            label: "支付编号",
+            prop: "corpId",
+            rules: [
+              {
+                required: false,
+                message: "",
+                trigger: "blur"
+              }
+            ],
+            span: 6,
+            slot: false
+          },{
+            label: "支付方式",
+            prop: "corpId",
+            rules: [
+              {
+                required: false,
+                message: "",
+                trigger: "blur"
+              }
+            ],
+            span: 6,
+            slot: false
+          },{
+            label: "支付渠道",
+            prop: "corpId",
+            rules: [
+              {
+                required: false,
+                message: "",
+                trigger: "blur"
+              }
+            ],
+            span: 6,
+            slot: false
+          },{
+            label: "支付状态",
+            prop: "corpId",
+            rules: [
+              {
+                required: false,
+                message: "",
+                trigger: "blur"
+              }
+            ],
+            span: 6,
+            slot: false
+          },{
+            label: "支付方式",
+            prop: "corpId",
+            rules: [
+              {
+                required: false,
+                message: "",
+                trigger: "blur"
+              }
+            ],
+            span: 6,
+            slot: false
+          },{
+            label: "订单总金额",
+            prop: "corpId",
+            rules: [
+              {
+                required: false,
+                message: "",
+                trigger: "blur"
+              }
+            ],
+            span: 6,
+            slot: false
+          },{
+            label: "订单数量",
+            prop: "corpId",
+            rules: [
+              {
+                required: false,
+                message: "",
+                trigger: "blur"
+              }
+            ],
+            span: 6,
+            slot: false
+          },{
+            label: "订单方式",
+            prop: "corpId",
+            rules: [
+              {
+                required: false,
+                message: "",
+                trigger: "blur"
+              }
+            ],
+            span: 6,
+            slot: false
+          },{
+            label: "订单信息",
+            prop: "corpId",
+            rules: [
+              {
+                required: false,
+                message: "",
+                trigger: "blur"
+              }
+            ],
+            span: 6,
+            slot: false
+          },{
+            label: "订单类型",
+            prop: "corpId",
+            rules: [
+              {
+                required: false,
+                message: "",
+                trigger: "blur"
+              }
+            ],
+            span: 6,
+            slot: false
+          },{
+            label: "商品数量",
+            prop: "corpId",
+            rules: [
+              {
+                required: false,
+                message: "",
+                trigger: "blur"
+              }
+            ],
+            span: 6,
+            slot: false
+          },{
+            label: "实际付款金额",
+            prop: "corpId",
+            rules: [
+              {
+                required: false,
+                message: "",
+                trigger: "blur"
+              }
+            ],
+            span: 6,
+            slot: false
+          },{
+            label: "来源",
+            prop: "corpId",
+            rules: [
+              {
+                required: false,
+                message: "",
+                trigger: "blur"
+              }
+            ],
+            span: 6,
+            slot: false
+          },{
+            label: "退款状态",
+            prop: "corpId",
+            rules: [
+              {
+                required: false,
+                message: "",
+                trigger: "blur"
+              }
+            ],
+            span: 6,
+            slot: false
+          },{
+            label: "退款原因",
+            prop: "corpId",
+            rules: [
+              {
+                required: false,
+                message: "",
+                trigger: "blur"
+              }
+            ],
+            span: 6,
+            slot: false
+          },{
+            label: "退款说明",
+            prop: "corpId",
+            rules: [
+              {
+                required: false,
+                message: "",
+                trigger: "blur"
+              }
+            ],
+            span: 6,
+            slot: false
+          },{
+            label: "拒绝退款原因",
+            prop: "corpId",
+            rules: [
+              {
+                required: false,
+                message: "",
+                trigger: "blur"
+              }
+            ],
+            span: 6,
+            slot: false
+          },{
+            label: "状态",
+            prop: "corpId",
+            rules: [
+              {
+                required: false,
+                message: "",
+                trigger: "blur"
+              }
+            ],
+            span: 6,
+            slot: false
+          },
+
+          {
+            label: "备注",
+            prop: "remark",
+            rules: [
+              {
+                required: false,
+                message: "",
+                trigger: "blur"
+              }
+            ],
+            span: 6,
+            slot: false
+          },
+        ]
+      },
+      tagsName: '收货人',
+      consigneeList:[],
+      goodsList: [],
+      journalList: [],
+      evaluateList: [],
+      payList: [],
+      consigneeOption: consigneeOption,
+      goodsOption: goodsOption,
+      journalOption: journalOption,
+      evaluateOption: evaluateOption,
+      payOption: payOption,
+    }
+  },
+  methods: {
+    // 选择卡切换
+    changeTags(name) {
+      if (this.tagsName == name) return
+      this.tagsName = name
+    },
+    backToList() {
+      this.$router.$avueRouter.closeTag("/orderManagement/orderDetail/index");
+      this.$router.go(-1)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.customer-head {
+  position: fixed;
+  top: 105px;
+  width: 100%;
+  margin-left: -10px;
+  height: 62px;
+  background: #ffffff;
+  box-shadow: 0 4px 12px 0px rgba(232, 232, 235, 1);
+  z-index: 999;
+}
+
+.customer-back {
+  cursor: pointer;
+  line-height: 62px;
+  font-size: 16px;
+  color: #323233;
+  font-weight: 400;
+}
+
+.back-icon {
+  line-height: 64px;
+  font-size: 20px;
+  margin-right: 8px;
+}
+
+.copy-customer-btn {
+  position: fixed;
+  right: 140px;
+  top: 115px;
+}
+
+.add-customer-btn {
+  position: fixed;
+  right: 36px;
+  top: 115px;
+}
+::v-deep .el-form-item {
+  margin-bottom: 8px;
+}
+::v-deep .el-form-item__error {
+  display: none;
+}
+::v-deep .select-component {
+  display: flex;
+}
+.tags ul {
+  margin: 0;
+  padding: 0 10px;
+  display: flex;
+  justify-content: flex-start;
+  li {
+    list-style: none;
+    font-size: 14px;
+    color: #999;
+    display: flex;
+    align-items: center;
+    position: relative;
+    cursor: pointer;
+    margin-left: 30px;
+    .orderNum {
+      display: inline-block;
+      font-size: 14px;
+      margin-left: 5px;
+      padding: 0 5px;
+      background-color: #ff6a6c;
+      line-height: 15px;
+      text-align: center;
+      border-radius: 10px;
+    }
+  }
+}
+.active {
+  font-size: 17px;
+  font-weight: bold;
+  color: #000;
+  position: relative;
+}
+.active_bot {
+  position: absolute;
+  //background-color: #a4da89;
+  opacity: 0.7;
+  width: 100%;
+  height: 12px;
+  bottom: -4px;
+}
+</style>

src/views/orderManagement/orderList/config/mainList.json

@@ -0,0 +1,109 @@
+{
+  "searchShow": true,
+  "searchMenuSpan": 12,
+  "border": true,
+  "index": true,
+  "viewBtn": false,
+  "editBtn": false,
+  "delBtn": false,
+  "addBtn": false,
+  "align": "center",
+  "menuWidth": "180",
+  "searchLabelWidth": 100,
+  "searchIcon": true,
+  "searchIndex": 3,
+  "column": [{
+    "label": "订单号",
+    "prop": "orderNo",
+    "search": true,
+    "index": 1,
+    "width": 100,
+    "overHidden": true
+  },{
+    "label": "下单人",
+    "prop": "createUser",
+    "search": true,
+    "index": 2,
+    "width": 100,
+    "overHidden": true
+  },{
+    "label": "订单金额",
+    "prop": "createUser",
+    "search": false,
+    "index": 3,
+    "width": 100,
+    "overHidden": true
+  },{
+    "label": "实际付款",
+    "prop": "createUser",
+    "search": false,
+    "index": 4,
+    "width": 100,
+    "overHidden": true
+  },{
+    "label": "订单状态",
+    "prop": "createUser",
+    "search": false,
+    "index": 5,
+    "width": 100,
+    "overHidden": true
+  },{
+    "label": "订单类型",
+    "prop": "createUser",
+    "search": false,
+    "index": 6,
+    "width": 100,
+    "overHidden": true
+  },{
+    "label": "下单人手机号",
+    "prop": "createUser",
+    "search": true,
+    "index": 7,
+    "width": 180,
+    "overHidden": true
+  },{
+    "label": "下单时间",
+    "prop": "createUser",
+    "search": true,
+    "index": 8,
+    "width": 100,
+    "overHidden": true
+  },{
+    "label": "支付方式",
+    "prop": "createUser",
+    "type": "select",
+    "dicUrl": "/api/blade-system/dict-biz/dictionary?code=order_status",
+    "search": true,
+    "index": 9,
+    "width": 100,
+    "overHidden": true
+  },{
+    "label": "收货人",
+    "prop": "createUser",
+    "search": true,
+    "index": 10,
+    "width": 100,
+    "overHidden": true
+  },{
+    "label": "收货人手机号",
+    "prop": "createUser",
+    "search": true,
+    "index": 11,
+    "width": 100,
+    "overHidden": true
+  },{
+    "label": "订单来源",
+    "prop": "createUser",
+    "search": false,
+    "index": 12,
+    "width": 100,
+    "overHidden": true
+  },{
+    "label": "分销",
+    "prop": "createUser",
+    "search": false,
+    "index": 13,
+    "width": 100,
+    "overHidden": true
+  }]
+}

src/views/orderManagement/orderList/index.vue

@@ -0,0 +1,133 @@
+<template>
+  <div>
+    <div v-if="show">
+      <!--    选择-->
+      <div class="tags">
+        <ul>
+          <li @click="changeTags('待付款')"><span :class="{'active': tagsName == '待付款'}">待付款<div v-if="tagsName == '待付款'" class="active_bot el-button--primary"></div></span> <span class="orderNum el-button--primary">0</span></li>
+          <li @click="changeTags('待发货')"><span :class="{'active': tagsName == '待发货'}">待发货<div v-if="tagsName == '待发货'" class="active_bot el-button--primary"></div></span> <span class="orderNum el-button--primary">0</span></li>
+          <li @click="changeTags('待收货')"><span :class="{'active': tagsName == '待收货'}">待收货<div v-if="tagsName == '待收货'" class="active_bot el-button--primary"></div></span> <span class="orderNum el-button--primary">0</span></li>
+          <li @click="changeTags('待评价')"><span :class="{'active': tagsName == '待评价'}">待评价<div v-if="tagsName == '待评价'" class="active_bot el-button--primary"></div></span> <span class="orderNum el-button--primary">0</span></li>
+          <li @click="changeTags('已完成')"><span :class="{'active': tagsName == '已完成'}">已完成<div v-if="tagsName == '已完成'" class="active_bot el-button--primary"></div></span> <span class="orderNum el-button--primary">0</span></li>
+          <li @click="changeTags('已取消')"><span :class="{'active': tagsName == '已取消'}">已取消<div v-if="tagsName == '已取消'" class="active_bot el-button--primary"></div></span> <span class="orderNum el-button--primary">0</span></li>
+          <li @click="changeTags('售后中')"><span :class="{'active': tagsName == '售后中'}">售后中<div v-if="tagsName == '售后中'" class="active_bot el-button--primary"></div></span> <span class="orderNum el-button--primary">0</span></li>
+          <li @click="changeTags('售后结束')"><span :class="{'active': tagsName == '售后结束'}">售后结束<div v-if="tagsName == '售后结束'" class="active_bot el-button--primary"></div></span> <span class="orderNum el-button--primary">0</span></li>
+          <li @click="changeTags('全部')"><span :class="{'active': tagsName == '全部'}">全部<div v-if="tagsName == '全部'" class="active_bot el-button--primary"></div></span> <span class="orderNum" style="background: #000;color: #fff">0</span></li>
+        </ul>
+      </div>
+      <!--    分割线-->
+      <div style="width: 100%;margin: 20px auto;border-top: 1px solid #aaa8a8"></div>
+      <basic-container>
+        <avue-crud
+          :option="option"
+          ref="crud"
+          :data="dataList"
+          :page.sync="page"
+          :search.sync="search"
+          @on-load="onLoad"
+        >
+          <template slot-scope="scope" slot="menu">
+            <el-button
+              type="text"
+              icon="el-icon-view"
+              size="small"
+              @click="handleView(scope.row)"
+            >查看
+            </el-button>
+          </template>
+        </avue-crud>
+      </basic-container>
+    </div>
+  </div>
+</template>
+
+<script>
+import option from "./config/mainList.json"
+
+export default {
+  name: "orderList",
+  data() {
+    return {
+      option: option,
+      dataList: [{orderNo: '00001'}],
+      tagsName: '待付款',
+      page: {
+        pageSize: 10,
+        currentPage: 1,
+        total: 0
+      },
+      search: {},
+      show: true,
+      detailData: {},
+      loading: false
+    }
+  },
+  created() {
+    let i = 0;
+    this.option.column.forEach(item => {
+      if (item.search) i++
+    })
+    if (i % 4 !== 0){
+      const num = 4 - Number(i % 4)
+      this.option.searchMenuSpan = num * 6;
+      this.option.searchMenuPosition = "right";
+    }
+  },
+  methods: {
+    // 选择卡切换
+    changeTags(name) {
+      if (this.tagsName == name) return
+      this.tagsName = name
+    },
+    onLoad(page, params) {
+    },
+    handleView(row) {
+      this.$router.push({
+        path: "/orderManagement/orderDetail/index",
+      })
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.tags ul {
+  margin: 0;
+  padding: 0 10px;
+  display: flex;
+  justify-content: space-between;
+  li {
+    list-style: none;
+    font-size: 14px;
+    color: #999;
+    display: flex;
+    align-items: center;
+    position: relative;
+    cursor: pointer;
+    .orderNum {
+      display: inline-block;
+      font-size: 14px;
+      margin-left: 5px;
+      padding: 0 5px;
+      background-color: #ff6a6c;
+      line-height: 15px;
+      text-align: center;
+      border-radius: 10px;
+    }
+  }
+}
+.active {
+  font-size: 17px;
+  font-weight: bold;
+  color: #000;
+  position: relative;
+}
+.active_bot {
+  position: absolute;
+  //background-color: #a4da89;
+  opacity: 0.7;
+  width: 100%;
+  height: 12px;
+  bottom: -4px;
+}
+</style>

src/views/orderManagement/refund/config/mainList.json

@@ -0,0 +1,69 @@
+{
+  "searchShow": true,
+  "searchMenuSpan": 12,
+  "border": true,
+  "index": true,
+  "viewBtn": false,
+  "editBtn": false,
+  "delBtn": false,
+  "addBtn": false,
+  "align": "center",
+  "menuWidth": "180",
+  "column": [{
+    "label": "订单号",
+    "prop": "orderNo",
+    "search": true,
+    "index": 1,
+    "width": 100,
+    "overHidden": true
+  },{
+    "label": "会员",
+    "prop": "createUser",
+    "search": true,
+    "index": 2,
+    "width": 100,
+    "overHidden": true
+  },{
+    "label": "货物状态",
+    "prop": "createUser",
+    "search": false,
+    "index": 3,
+    "width": 100,
+    "overHidden": true
+  },{
+    "label": "退款原因",
+    "prop": "createUser",
+    "search": false,
+    "index": 4,
+    "width": 100,
+    "overHidden": true
+  },{
+    "label": "退款说明",
+    "prop": "createUser",
+    "search": false,
+    "index": 5,
+    "width": 100,
+    "overHidden": true
+  },{
+    "label": "备注",
+    "prop": "createUser",
+    "search": false,
+    "index": 6,
+    "width": 100,
+    "overHidden": true
+  },{
+    "label": "状态",
+    "prop": "createUser",
+    "search": false,
+    "index": 7,
+    "width": 100,
+    "overHidden": true
+  },{
+    "label": "创建时间",
+    "prop": "createUser",
+    "search": true,
+    "index": 8,
+    "width": 180,
+    "overHidden": true
+  }]
+}

src/views/orderManagement/refund/index.vue

@@ -0,0 +1,130 @@
+<template>
+  <div>
+    <div v-if="show">
+      <!--    选择-->
+      <div class="tags">
+        <ul>
+          <li @click="changeTags('处理中')"><span :class="{'active': tagsName == '处理中'}">处理中<div v-if="tagsName == '处理中'" class="active_bot el-button--primary"></div></span> <span class="orderNum el-button--primary">0</span></li>
+          <li @click="changeTags('已退款')"><span :class="{'active': tagsName == '已退款'}">已退款<div v-if="tagsName == '已退款'" class="active_bot el-button--primary"></div></span> <span class="orderNum el-button--primary">0</span></li>
+          <li @click="changeTags('拒绝退款')"><span :class="{'active': tagsName == '拒绝退款'}">拒绝退款<div v-if="tagsName == '拒绝退款'" class="active_bot el-button--primary"></div></span> <span class="orderNum el-button--primary">0</span></li>
+          <li style="position: absolute;right: 15px" @click="changeTags('全部')"><span :class="{'active': tagsName == '全部'}">全部<div v-if="tagsName == '全部'" class="active_bot el-button--primary"></div></span> <span class="orderNum" style="background: #000;color: #fff">0</span></li>
+        </ul>
+      </div>
+      <!--    分割线-->
+      <div style="width: 100%;margin: 20px auto;border-top: 1px solid #aaa8a8"></div>
+      <basic-container>
+        <avue-crud
+          :option="option"
+          ref="crud"
+          :data="dataList"
+          :page.sync="page"
+          :search.sync="search"
+          @on-load="onLoad"
+        >
+          <template slot-scope="scope" slot="menu">
+            <el-button
+              type="text"
+              icon="el-icon-view"
+              size="small"
+              @click="handleView(scope.row)"
+            >查看
+            </el-button>
+          </template>
+        </avue-crud>
+      </basic-container>
+    </div>
+  </div>
+</template>
+
+<script>
+import option from "./config/mainList.json"
+
+export default {
+  name: "refund",
+  data() {
+    return {
+      option: option,
+      dataList: [{orderNo: '000001'}],
+      tagsName: '全部',
+      page: {
+        pageSize: 10,
+        currentPage: 1,
+        total: 0
+      },
+      search: {},
+      show: true,
+      detailData: {},
+      loading: false
+    }
+  },
+  created() {
+    let i = 0;
+    this.option.column.forEach(item => {
+      if (item.search) i++
+    })
+    if (i % 4 !== 0){
+      const num = 4 - Number(i % 4)
+      this.option.searchMenuSpan = num * 6;
+      this.option.searchMenuPosition = "right";
+    }
+  },
+  methods: {
+    // 选择卡切换
+    changeTags(name) {
+      if (this.tagsName == name) return
+      this.tagsName = name
+    },
+    onLoad(page, params) {
+    },
+    handleView(row) {
+      this.$router.push({
+        path: "/orderManagement/orderDetail/index",
+      })
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.tags ul {
+  margin: 0;
+  padding: 0 10px;
+  display: flex;
+  justify-content: flex-start;
+  li {
+    list-style: none;
+    font-size: 14px;
+    color: #999;
+    display: flex;
+    align-items: center;
+    position: relative;
+    cursor: pointer;
+    margin-left: 30px;
+    .orderNum {
+      display: inline-block;
+      font-size: 14px;
+      margin-left: 5px;
+      padding: 0 5px;
+      background-color: #ff6a6c;
+      line-height: 15px;
+      text-align: center;
+      border-radius: 10px;
+    }
+  }
+}
+.active {
+  font-size: 17px;
+  font-weight: bold;
+  color: #000;
+  position: relative;
+}
+.active_bot {
+  position: absolute;
+  //background-color: #a4da89;
+  opacity: 0.7;
+  width: 100%;
+  height: 12px;
+  bottom: -4px;
+}
+</style>
+