Merge branch 'feature/12月迭代' of http://git.gicdev.com/clique/clique-web into dev

e3a584e6 · chenyu · fb46050c · dd319e9d · e3a584e6 · e3a584e6
Commit e3a584e6 authored Dec 30, 2021 by chenyu
3 changed files
--- a/dist/static/js/manifest.48c1eafce6c55a935054.js.map
+++ b/dist/static/js/manifest.48c1eafce6c55a935054.js.map
 {"version":3,"sources":["webpack:///webpack/bootstrap d493e11ff6a6d381d53b"],"names":["parentJsonpFunction","window","chunkIds","moreModules","executeModules","moduleId","chunkId","result","i","resolves","length","installedChunks","push","Object","prototype","hasOwnProperty","call","modules","shift","__webpack_require__","s","installedModules","45","exports","module","l","e","installedChunkData","Promise","resolve","promise","reject","head","document","getElementsByTagName","script","createElement","type","charset","async","timeout","nc","setAttribute","src","p","0","1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31","32","33","34","35","36","37","38","39","40","41","42","setTimeout","onScriptComplete","onerror","onload","clearTimeout","chunk","Error","undefined","appendChild","m","c","d","name","getter","o","defineProperty","configurable","enumerable","get","n","__esModule","object","property","oe","err","console","error"],"mappings":"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","file":"static/js/manifest.48c1eafce6c55a935054.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tvar parentJsonpFunction = window[\"webpackJsonp\"];\n \twindow[\"webpackJsonp\"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [], result;\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules, executeModules);\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n \t\tif(executeModules) {\n \t\t\tfor(i=0; i < executeModules.length; i++) {\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = executeModules[i]);\n \t\t\t}\n \t\t}\n \t\treturn result;\n \t};\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// objects to store loaded and loading chunks\n \tvar installedChunks = {\n \t\t45: 0\n \t};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n \t// This file contains only the entry chunk.\n \t// The chunk loading function for additional chunks\n \t__webpack_require__.e = function requireEnsure(chunkId) {\n \t\tvar installedChunkData = installedChunks[chunkId];\n \t\tif(installedChunkData === 0) {\n \t\t\treturn new Promise(function(resolve) { resolve(); });\n \t\t}\n\n \t\t// a Promise means \"currently loading\".\n \t\tif(installedChunkData) {\n \t\t\treturn installedChunkData[2];\n \t\t}\n\n \t\t// setup Promise in chunk cache\n \t\tvar promise = new Promise(function(resolve, reject) {\n \t\t\tinstalledChunkData = installedChunks[chunkId] = [resolve, reject];\n \t\t});\n \t\tinstalledChunkData[2] = promise;\n\n \t\t// start chunk loading\n \t\tvar head = document.getElementsByTagName('head')[0];\n \t\tvar script = document.createElement('script');\n \t\tscript.type = \"text/javascript\";\n \t\tscript.charset = 'utf-8';\n \t\tscript.async = true;\n \t\tscript.timeout = 120000;\n\n \t\tif (__webpack_require__.nc) {\n \t\t\tscript.setAttribute(\"nonce\", __webpack_require__.nc);\n \t\t}\n \t\tscript.src = __webpack_require__.p + \"static/js/\" + chunkId + \".\" + {\"0\":\"88da6cef2a2da8c0ac06\",\"1\":\"9cecaa6c9806ca9799db\",\"2\":\"bd54b86536f9ccb82ea1\",\"3\":\"352b3a449f18f3dc371f\",\"4\":\"446ffd57d5c286d05f45\",\"5\":\"307b129f1a13ed13c71d\",\"6\":\"e6c86fd0100c3f880882\",\"7\":\"d55f58fa44f2860e9e48\",\"8\":\"0f3943c3b5490c246227\",\"9\":\"9e3105c825be19fecbdf\",\"10\":\"e595220b8f908da126fb\",\"11\":\"6ceb856a24cd48965712\",\"12\":\"aceac45e9f61f38c4df5\",\"13\":\"9b1a2bcf5c9027788364\",\"14\":\"bf21f99ec45bc38c3caa\",\"15\":\"10941fc837a82e7fb415\",\"16\":\"54e18151bb7c6fa78089\",\"17\":\"214b2699697c8d262547\",\"18\":\"f7aa00758a5a88cdf277\",\"19\":\"2fafc72e8baaaf9f47a1\",\"20\":\"ef938e3378ae39d9aa78\",\"21\":\"525dbf8118be1920c388\",\"22\":\"af1ae1b170b7f8120b9d\",\"23\":\"fba53382c3e3f84eb78f\",\"24\":\"5cb22b566e13b15c35c8\",\"25\":\"21239219d85defe5d10c\",\"26\":\"33742474be75fdb65dfd\",\"27\":\"35f58c9ddbe7c64f5f48\",\"28\":\"d3563c978cd36ce16782\",\"29\":\"1209c1e98fcbf794a936\",\"30\":\"457d9d337b3455876a51\",\"31\":\"35a63d5da2112a12c4aa\",\"32\":\"d49003d17452bc78e445\",\"33\":\"5075d3c43adc30caed4d\",\"34\":\"a6aa953460e246b74104\",\"35\":\"b82c23248198463a02eb\",\"36\":\"91fa9488365c82e00a79\",\"37\":\"add3071bfdfb6abc436c\",\"38\":\"78a7decc9907c49d4361\",\"39\":\"08493a5747c586c620cf\",\"40\":\"8040edbcddb7ddd87b3c\",\"41\":\"923a33964ec43360c6a7\",\"42\":\"967aaf73197d36304ecc\"}[chunkId] + \".js\";\n \t\tvar timeout = setTimeout(onScriptComplete, 120000);\n \t\tscript.onerror = script.onload = onScriptComplete;\n \t\tfunction onScriptComplete() {\n \t\t\t// avoid mem leaks in IE.\n \t\t\tscript.onerror = script.onload = null;\n \t\t\tclearTimeout(timeout);\n \t\t\tvar chunk = installedChunks[chunkId];\n \t\t\tif(chunk !== 0) {\n \t\t\t\tif(chunk) {\n \t\t\t\t\tchunk[1](new Error('Loading chunk ' + chunkId + ' failed.'));\n \t\t\t\t}\n \t\t\t\tinstalledChunks[chunkId] = undefined;\n \t\t\t}\n \t\t};\n \t\thead.appendChild(script);\n\n \t\treturn promise;\n \t};\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"./\";\n\n \t// on error function for async loading\n \t__webpack_require__.oe = function(err) { console.error(err); throw err; };\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap d493e11ff6a6d381d53b"],"sourceRoot":""}
\ No newline at end of file
--- a/src/view/companyGroup/membershipSystem/components/MemberCardTable.vue
+++ b/src/view/companyGroup/membershipSystem/components/MemberCardTable.vue
+<template>
+  <div class="member-grade-card-table">
+    <div class="card-table-header">
+      <p class="card-table-line"></p>
+      <p class="card-table-title">{{type|typeFilter}}</p>
+      <p class="card-table-tip">{{type|typeTipFilter}}</p>
+    </div>
+    <div class="add-level">
+      <el-button @click="editSort" v-if="type==1">调整顺序</el-button>
+      <el-button type="primary" @click="addCard(type)">新增{{type|typeFilter}}
+      </el-button>
+    </div>
+    <el-table class="only-header-table">
+      <el-table-column label="等级" width="80" v-if="type==='1'"/>
+      <el-table-column label="卡面预览" width="260" />
+      <el-table-column label="等级编码" />
+      <el-table-column label="等级折扣" />
+      <el-table-column label="计算方式" />
+      <el-table-column label="升级条件" />
+      <el-table-column label="操作" />
+    </el-table>
+    <div class="sort-btn-wrap" v-show="isEditSort">
+      <p class="sort-btn-tip">拖拽表格上下移动，调整等级顺序</p>
+      <el-button type="text" @click="cancelEditSort">取消</el-button>
+      <span class="sort-btn-line"></span>
+      <el-button type="text" @click="submitSort">保存</el-button>
+    </div>
+    <el-table :class="['only-content-table',`sortable-table-type${type}`]" :data="list"
+      style="width: 100%" row-key="gradeId" v-loading="loading">
+      <el-table-column prop="" label="等级" width="80" v-if="type==='1'">
+        <template slot-scope="scope">
+          <div class="card-index-item">
+            <p>LV.{{scope.$index| indexFilter}}</p>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="" label="卡面预览" width="260">
+        <template slot-scope="{row}">
+          <div class="card-cell" :style="{background: row.cardColor}" :title="row.gradeName">
+            <img :src="logoImg" />
+            <span :style="{color: row.cardFontColor}">{{row.gradeName}}</span>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="gradeCode" label="等级编码">
+      </el-table-column>
+      <el-table-column prop="discountRate" label="等级折扣">
+        <template slot-scope="{row}">{{row.discountRate||10}}折</template>
+      </el-table-column>
+      <el-table-column prop="gradeCode" label="计算方式">
+        <template
+          slot-scope="{row}">{{row.calculationMethod===1?'就低原则':row.calculationMethod===2?'折上折':''}}</template>
+      </el-table-column>
+      <el-table-column prop="upGradeCondition" label="升级条件">
+      </el-table-column>
+      <el-table-column prop="" label="操作">
+        <template slot-scope="{$index,row}">
+          <el-button @click="editCliqueLevel($index,row,list)" type="text" :disabled="isEditSort">编辑</el-button>
+          <delete-tip @confirm="delCliqueLevel($index,row,list)" tips="确认删除吗?">
+            <el-button v-show="list.length>1" type="text" :disabled="isEditSort">删除</el-button>
+          </delete-tip>
+        </template>
+      </el-table-column>
+      <template slot="empty">
+        <div class="no-data-wrap">
+          <div class="no-data-icon">
+            <img src="../../../../../static/img/no-data_icon.png" alt="">
+          </div>
+          <p>暂无数据</p>
+        </div>
+      </template>
+    </el-table>
+  </div>
+</template>
+<script>
+import { postRequest, postJson } from '@/api/api';
+import showMsg from '@/common/js/showmsg';
+import errMsg  from '@/common/js/error';
+import Sortable from 'sortablejs';
+export default {
+  name: 'MemberCardTable',
+  props: {
+    tableData: {
+      typeL: Array,
+      default: () => {
+        return [];
+      }
+    },
+    logoImg: {
+      typeL: String,
+      default: ''
+    },
+    type: {
+      typeL: String,
+      default: '1' // type 1 常规卡   2 特殊卡   3 付费卡
+    },
+  },
+  watch: {
+    tableData: {
+      handler (n, o){
+        this.list = JSON.parse(JSON.stringify(n));
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  filters: {
+    indexFilter: (v) => {
+      return v < 9 ? `0${v + 1}` : `${v + 1}`;
+    },
+    typeFilter: (v) => {
+      switch (v) {
+        case '1': return '常规卡';
+        case '2': return '特殊卡';
+        default:return '';
+      }
+    },
+    typeTipFilter: (v) => {
+      switch (v) {
+        case '1': return '会员等级根据从低到高的顺序，自上而下进行排序';
+        case '2': return '特殊卡不支持会员等级升降级';
+        default:return '';
+      }
+    }
+  },
+  mounted() {
+    if (this.type==1) {
+      this.rowDrop();//行拖拽排序
+    }
+  },
+  data() {
+    return {
+      list: [],
+      loading: false,
+      isEditSort: false,
+      sortTable: null,
+    };
+  },
+  methods: {
+    // 编辑集团
+    editCliqueLevel(index, row, obj) {
+      this.$router.push({
+        path: '/editGroupGrade',
+        query: {
+          gradeId: row.gradeId
+        }
+      });
+    },
+    // 删除
+    delCliqueLevel(index, row, obj) {
+      let para = {
+        gradeId: row.gradeId,
+        enterpriseId: '',
+      };
+      let list=[].concat(obj)
+      postRequest('/api-admin/delete-member-grade', para)
+        .then((res) => {
+          let resData = res.data;
+          if (resData.errorCode == 0) {
+            showMsg.showmsg('删除成功', 'success');
+            list.splice(index, 1)
+            this.list = JSON.parse(JSON.stringify(list));
+            return;
+          }
+          errMsg.errorMsg(resData);
+        });
+    },
+    addCard(type) {
+      if (this.tableData.length===10) return this.$message.warning('每个卡类型最多可创建10张会员卡')
+      this.$router.push({
+        path: '/addGroupGrade',
+        query: {
+          type
+        }
+      });
+    },
+    editSort() {
+      if (!this.list.length) return this.$message.warning(`暂无${this.$options.filters.typeFilter(this.type)}！`);
+      this.isEditSort = true;
+      this.sortTable.option('sort', true);
+    },
+    cancelEditSort() {
+      this.isEditSort = false;
+      this.sortTable.option('sort', false);
+      this.list = JSON.parse(JSON.stringify(this.tableData));
+    },
+    submitSort() {
+      this.loading = true;
+      this.isEditSort = false;
+      this.sortTable.option('sort', false);
+      let para = {
+        gradeIds: this.list.map(el => (el.gradeId)),
+        gradeType: this.type
+      };
+      postJson('/api-admin/sort-member-grade', para)
+        .then((res) => {
+          let resData = res.data;
+          if (resData.errorCode == 0) {
+            this.$message.success('设置成功');
+            return;
+          }
+        }).finally(_ => {
+          this.loading = false;
+        });
+    },
+    // 行拖拽
+    rowDrop() {
+      // 此时找到的元素是要拖拽元素的父容器
+      const tbody = document.querySelector(`.sortable-table-type${this.type} .el-table__body-wrapper tbody`);
+      const that = this;
+      this.sortTable = new Sortable(tbody, {
+        //  指定父元素下可被拖拽的子元素
+        draggable: '.el-table__row',
+        sort: this.isEditSort,
+        onEnd({ newIndex, oldIndex }) {
+          const currRow = that.list.splice(oldIndex, 1)[ 0 ];
+          that.list.splice(newIndex, 0, currRow);
+        }
+      });
+    },
+    // 取消删除
+    cancelPop(index, row, obj) {
+      row.popVisible = false;
+    },
+  }
+}
+</script>
+<style lang="less" scoped>
+/deep/.only-header-table.el-table {
+  .el-table__body-wrapper {
+    display: none;
+  }
+}
+/deep/.only-content-table.el-table {
+  .el-table__header-wrapper {
+    display: none;
+  }
+}
+.sort-btn-wrap {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 40px;
+  background: #fcf6f1;
+  .sort-btn-tip {
+    margin-right: 20px;
+    font-size: 13px;
+    font-weight: 400;
+    color: #303133;
+    line-height: 18px;
+    cursor: default;
+  }
+  .sort-btn-line {
+    display: block;
+    width: 1px;
+    height: 13px;
+    margin: 0 10px;
+    background: #c4c7cd;
+  }
+}
+.card-cell {
+  display: flex;
+  align-items: center;
+  width: 120px;
+  height: 40px;
+  padding-left: 10px;
+  border-radius: 4px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  img {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+  }
+  span {
+    margin-left: 10px;
+    font-size: 14px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    cursor: default;
+  }
+}
+.add-level {
+  width: 100%;
+  margin-bottom: 24px;
+  text-align: right;
+}
+.card-table-header {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 40px;
+  margin-bottom: 20px;
+  background: #ffffff;
+  border-bottom: 1px solid #e4e7ed;
+  .card-table {
+    &-line {
+      width: 3px;
+      height: 14px;
+      margin-right: 8px;
+      background: #1890ff;
+    }
+    &-title {
+      margin-right: 20px;
+      font-size: 14px;
+      font-weight: 500;
+      color: #303133;
+      line-height: 20px;
+    }
+    &-tip {
+      font-size: 12px;
+      font-weight: 400;
+      color: #606266;
+      line-height: 17px;
+    }
+  }
+}
+.card-index-item {
+  width: 40px;
+  height: 20px;
+  line-height: 16px;
+  text-align: center;
+  color: #778aff;
+  // background: #778aff;
+  border: 2px solid #778aff;
+  border-radius: 8px;
+  p {
+    font-size: 12px;
+    font-weight: bold;
+    transform: scale(0.9);
+  }
+}
+/deep/.el-table__empty-text::before{
+  background: none;
+}
+</style>
+<style lang="less">
+.el-tooltip__popper.member-grade-edit-form-tooltip {
+  max-width: 400px;
+  line-height: 18px;
+}
+</style>
\ No newline at end of file
--- a/src/view/companyGroup/membershipSystem/memberCardSet.vue
+++ b/src/view/companyGroup/membershipSystem/memberCardSet.vue
@@ -276,62 +276,9 @@
                </el-form-item>
              </el-form>
              <div class="add-level"><el-button type="primary" @click="changeRoute('/addGroupGrade')">新增等级</el-button></div>
-              <el-table :data="cliqueTableData" style="width: 100%">
+               <!-- type 1 常规卡   2 特殊卡  3 付费卡(集团不展示) -->
-                <el-table-column prop="" label="卡面预览" width="260">
+              <member-card-table :tableData="generalCardList" type="1" :logoImg="logoImg"/>
-                  <template slot-scope="scope">
+              <member-card-table :tableData="specialCardList" type="2" :logoImg="logoImg"/>
-                    <div class="card-cell" :style="{ background: scope.row.cardColor }">
-                      <img :src="logoImg" />
-                      <span :style="{ color: scope.row.cardFontColor }">{{ scope.row.gradeName }}</span>
-                    </div>
-                  </template>
-                </el-table-column>
-                <el-table-column prop="gradeCode" label="等级编码"> </el-table-column>
-                <el-table-column prop="" label="等级类型">
-                  <template slot-scope="scope">
-                    {{ scope.row.gradeType == 1 ? '常规卡' : '特殊卡' }}
-                  </template>
-                </el-table-column>
-                <el-table-column prop="" label="移动">
-                  <template slot-scope="scope">
-                    <!-- <div class="move-icon">
-                      <i :class="['iconfont','sort-icon-all', 'icon-yd-icon-upload2', scope.$index==0? 'disable': '']" @click="toPre(scope.$index,scope.row,cliqueTableData)"></i>
-                      <i :class="['sort-icon-all', 'sort-icon-down','iconfont','icon-yd-icon-upload2', scope.$index == cliqueTableData.length-1?'disable':'']" class="icon-font-down" @click="toNext(scope.$index,scope.row,cliqueTableData)"></i>
-                      <i :class="['sort-icon-all', 'el-icon-upload2', 'sort-icon', scope.$index==0? 'disable':'']" @click="toUp(scope.$index,scope.row,cliqueTableData)"></i>
-                      <i :class="['sort-icon-all', 'el-icon-download','sort-icon', scope.$index == cliqueTableData.length-1?'disable':'']" @click="toBottom(scope.$index,scope.row,cliqueTableData)"></i>
-                    </div> -->
-                    <i :class="['icon-color', 'el-icon-upload2', scope.$index == 0 ? 'disable' : '']" @click="toUp(scope.$index, scope.row, cliqueTableData)"></i>
-                    <i :class="['icon-color', 'el-icon-back', 'icon-to-pre', scope.$index == 0 ? 'disable' : '']" @click="toPre(scope.$index, scope.row, cliqueTableData)"></i>
-                    <i :class="['icon-color', 'el-icon-back', 'icon-to-next', scope.$index == cliqueTableData.length - 1 ? 'disable' : '']" @click="toNext(scope.$index, scope.row, cliqueTableData)"></i>
-                    <i :class="['icon-color', 'el-icon-download', scope.$index == cliqueTableData.length - 1 ? 'disable' : '']" @click="toBottom(scope.$index, scope.row, cliqueTableData)"></i>
-                  </template>
-                </el-table-column>
-                <el-table-column prop="" label="操作">
-                  <template slot-scope="scope">
-                    <!--  <el-button
-                      @click="editCliqueLevel(scope.$index,scope.row,cliqueTableData)"
-                      type="text"
-                      size="small">
-                      编辑
-                    </el-button> -->
-                    <router-link :to="{ path: '/editGroupGrade', query: { gradeId: scope.row.gradeId } }" class="edit-btn el-button--text">编辑</router-link>
-                    <!-- <el-button class="m-l-10"
-                      @click="delCliqueLevel(scope.$index,scope.row,cliqueTableData)"
-                      type="text">
-                      删除
-                    </el-button> -->
-                    <el-popover placement="top" width="160" v-model="scope.row.popVisible">
-                      <p style="line-height: 1.5; padding: 10px 10px 20px;">确认删除吗？</p>
-                      <div style="text-align: right; margin: 0">
-                        <el-button size="mini" type="text" @click="cancelPop(scope.$index, scope.row, cliqueTableData)">取消</el-button>
-                        <el-button type="primary" size="mini" @click="delCliqueLevel(scope.$index, scope.row, cliqueTableData)">确定</el-button>
-                      </div>
-                      <el-button slot="reference" class="m-l-10" type="text">
-                        删除
-                      </el-button>
-                    </el-popover>
-                  </template>
-                </el-table-column>
-              </el-table>
            </div>
          </div>
          <!-- end -->
@@ -346,6 +293,7 @@ import showMsg from '@/common/js/showmsg';
 import errMsg from '@/common/js/error';
 import topNavNew from 'components/nav/navNew';
 import cardCate from 'components/memberShip/card-cate'; // 开卡策略
+import MemberCardTable from './components/MemberCardTable.vue';
 import { getRequest, postRequest } from '@/api/api';
 import { log } from '@/utils/index.js';
 export default {
@@ -411,7 +359,8 @@ export default {
        gradeUpModelSyncchange: false, // 单商户独立计算下是否关联升级 1是 0否 (集团)
        gradeUpModel: '0' // 等级升级模式 0单商户独立计算 1跨商户联合计算 (集团参数)
      },
-      cliqueTableData: [],
+      generalCardList: [],
+      specialCardList: [],
      logoImg: '', //企业logo
      popVisible: false, //表格中删除
@@ -609,63 +558,6 @@ export default {
        });
    },
-    // 置顶 先删除后追加首部
-    toUp(index, row, obj) {
-      let that = this;
-      if (index == 0) {
-        return;
-      }
-      let newTable = JSON.parse(JSON.stringify(that.cliqueTableData));
-      newTable.splice(index, 1);
-      newTable.unshift(row);
-      // 保存设置
-      that.setSort(row.gradeId, 10);
-      that.cliqueTableData = newTable;
-    },
-    // 向上
-    toPre(index, row, obj) {
-      let that = this;
-      if (index == 0) {
-        return;
-      }
-      let newTable = JSON.parse(JSON.stringify(that.cliqueTableData));
-      let temp = {};
-      temp = newTable[index - 1];
-      newTable[index - 1] = row;
-      newTable[index] = temp;
-      // 保存设置
-      that.setSort(row.gradeId, 20);
-      that.cliqueTableData = newTable;
-    },
-    // 向下
-    toNext(index, row, obj) {
-      let that = this;
-      if (index == obj.length - 1) {
-        return;
-      }
-      let newTable = JSON.parse(JSON.stringify(that.cliqueTableData));
-      let temp = {};
-      temp = newTable[index + 1];
-      newTable[index + 1] = row;
-      newTable[index] = temp;
-      // 保存设置
-      that.setSort(row.gradeId, 30);
-      that.cliqueTableData = newTable;
-    },
-    //置底 先删除后追加尾部
-    toBottom(index, row, obj) {
-      let that = this;
-      if (index == obj.length - 1) {
-        return;
-      }
-      let newTable = JSON.parse(JSON.stringify(that.cliqueTableData));
-      newTable.splice(index, 1);
-      newTable.push(row);
-      // 保存设置
-      that.setSort(row.gradeId, 40);
-      that.cliqueTableData = newTable;
-    },
    // 等级排序
    setSort(gradeId, type, enterpriseId) {
      let para = {
@@ -733,12 +625,8 @@ export default {
            // 卡面
            that.logoImg = resData.result.logoImg;
-            if (!!resData.result.List && !!resData.result.List.length) {
+            that.generalCardList = resData.result.generalCardList||[];
-              resData.result.List.forEach(function(ele, index) {
+            that.specialCardList = resData.result.specialCardList||[];
-                ele.popVisible = false;
-              });
-              that.cliqueTableData = resData.result.List;
-            }
            return;
          }
@@ -807,6 +695,7 @@ export default {
    }
  },
  components: {
+    MemberCardTable,
    topNavNew,
    cardCate
  },