异常会员

src/components/wechatmembers/abnormal-member-list/abnormal-member.js

+import { doFetch } from "@/components/axios/api";
+import url from "@/components/axios/url";
+import { mapState } from "vuex";
+import { 
+  checkFalse,
+  checkStatus,
+  checkSuccess 
+} from "../../../../static/js/checkStatus";
+import authMethods from "@/mixins/auth";
+import defaultImg from "../../../../static/img/default.png";
+import { formatLongTime } from "@/utils/utils";
+import tableColumDialog from './components/dialog/tableColumDialog.vue';
+export default {
+  name: "forzenlist",
+  components: {
+    tableColumDialog
+  },
+  mixins: [authMethods],
+  filters: {
+    formatDate(val, format) {
+      if (!val || val == -1) return format == 'hms' ? '' : "--";
+      let str = formatLongTime(val,1);
+      let arr = str.split(' ');
+      if (format == "ymd") {
+        return arr[0];
+      } else if (format == "hms") {
+        return arr[1] || '';
+      }
+      return str;
+    },
+    formatCardName(val) {
+      if (val) {
+        if (val.length > 10) {
+          val = val.substr(0, 10) + "...";
+        }
+      }
+      return val;
+    },
+    formatMember(val) {
+      if (val) {
+        if (val.length > 3) {
+          val = val.substr(0, 3) + "...";
+        }
+      }
+      return val;
+    },
+    formatPhone(value) {
+      if (!value) {
+        return "--";
+      }
+      if (value.length != 11) {
+        return value;
+      }
+      return `${value.substr(0, 3)}****${value.substr(7, 4)}`;
+    }
+  },
+  data() {
+    return {
+      dialogFieldVisible: false,
+      defaultImg,
+      settingType: 0,// 0未查询 1已设置 2未设置
+      selectPage: {
+        type: 0,
+        dataReady: true
+      },
+      searchData: {
+        // memberCardStatus: "", //会员状态
+        phoneNameCard: "", // 搜索字段
+        pageName: "notMember,wxOpenCarMember,posMember",
+        pageSize: 20,
+        currentPage: 1,
+        sortColName: "", // 排序字段
+        sortType: "", // 排序方式
+        showFields: "-1",
+        memberSearchStr: -1 // 人群筛选
+      },
+      load: false,
+      total: 0,
+      memberFields: [],// 顶部标题配置
+      frozenList: [],
+      multipleList: []
+    };
+  },
+  computed: {
+    ...mapState(["storeImageUrl"])
+  },
+  created() {
+    if (!this.storeImageUrl) {
+      this.$store.dispatch("getStorePicture");
+    }
+    if (JSON.parse(sessionStorage.getItem("frozenListSearchData"))) {
+      this.searchData = JSON.parse(
+        sessionStorage.getItem("frozenListSearchData")
+      );
+    }
+  },
+  beforeMount() {
+    this.init();
+  },
+  watch: {
+    searchData: {
+      handler(newval) {
+        sessionStorage.setItem("frozenListSearchData", JSON.stringify(newval));
+      }
+    },
+    deep: true,
+    immediate: true
+  },
+  methods: {
+    init(){
+      this.getSetting()
+      .then(()=>{
+        this.settingType = 1;
+        return this.getFindMemberFields('notMember');
+      })
+      .then(()=>{
+        this.getList();
+      })
+    },
+    getSetting(){
+      return new Promise((resolve,reject)=>{
+        resolve({})
+      })
+    },
+    getFindMemberFields(pageName) {
+      return new Promise((resolve,reject)=>{
+        this.load = true;
+        doFetch(url.findMemberFields, {
+          pageName: this.searchData.pageName,
+        })
+          .then(res => {
+            let { errorCode, result } = res.data;
+            if (errorCode === 0 && Array.isArray(result)) {
+              this.memberFields = result || [];
+              resolve();
+            } else {
+              checkFalse(res.data.message);
+              reject();
+            }
+          })
+          .catch(err => {
+            checkStatus(err);
+            reject();
+          }).finally(()=>{
+            this.load = false;
+          });
+      })
+    },
+    getList() {
+      this.load = true;
+      this.selectPage.dataReady = false;
+      doFetch(url.ajaxMembers, this.searchData)
+        .then(res => {
+          this.selectPage.dataReady = true;
+          let { errorCode, result } = res.data || {};
+          if (errorCode === 0) {
+            let { page, fields, fieldsStr } = result || {};
+            let { result: list, totalCount } = page || {};
+            this.frozenList = list || [];
+            this.total = totalCount || 0;
+            this.load = false;
+          } else {
+            this.load = false;
+          }
+        }).finally(_ => {
+          this.loading = false; 
+          this.selectPage.dataReady = true;
+        });;
+    },
+    sortChange(column){
+      console.log(column)
+      let {prop,order,} = column;
+      this.searchData.sortColName = prop;
+      if (order === "descending") {
+        this.searchData.sortType = "desc";
+      }
+      if (order === "ascending") {
+        this.searchData.sortType = "asc";
+      }
+      this.getList();
+    },
+
+    // 搜索选项改变时
+    onSearchDataChange() {
+      this.getList();
+    },
+    handleCurrentChange(val) {
+      this.searchData.currentPage = val;
+      this.getList();
+    },
+    unfreezeItem(item){
+      const datas = {
+        memberIds: item.memberId, // 会员id
+        remark: "", // 备注暂留
+        //所有会员是2 当前是1 其他是0
+        isCurrent: 1,
+        status: frozenStatus == 1 ? 1 : 0, // 1 冻结 0 解冻
+        phoneNameCard: item.cardNo||'', // 会员名称 手机号
+      };
+      doFetch(url.batchUpdateFrozen, datas)
+      .then((res)=>{
+        if (res.data.errorCode === 0) {
+          this.$message({
+            message: "解冻成功",
+            type: "success"
+          });
+          this.$nextTick(_ => {
+            this.getList();
+          });
+        }
+      });
+    },
+    freezeItem(item){
+      let {memberId} = item;
+      this.$confirm(`确定冻结?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        const datas = {
+          memberIds: memberId, // 会员id
+          remark: "", // 备注暂留
+          //所有会员是2 当前是1 其他是0
+          isCurrent: 1,
+          status: 1, // 1 冻结 0 解冻
+          phoneNameCard: item.cardNo||'', // 会员名称 手机号
+        };
+        return doFetch(url.batchUpdateFrozen, datas);
+      }).then((res)=>{
+        if (res.data.errorCode === 0) {
+          this.$message({
+            message: "冻结成功",
+            type: "success"
+          });
+          this.$nextTick(_ => {
+            this.getList();
+          });
+        }
+      });
+    },
+
+    submitMemberFields(fields){
+      console.log('submitMemberFields->',fields);
+      // this.dialogFieldVisible = true;
+      doFetch(url.updateFields, {
+        pageName: this.searchData.pageName,
+        fields
+      })
+        .then(res => {
+          if (res.data.errorCode === 0) {
+            checkSuccess();
+            // 需要对选中字段排序
+            this.init();
+          } else {
+            checkFalse(res.data.message);
+          }
+        })
+        .catch(err => {
+          checkStatus(err);
+        });
+    },
+    // 批量冻结
+    batchFreeze(){
+      let {multipleList} = this;
+      if(!(multipleList && multipleList.length)){
+        return this.$message.warning('请勾选要修改的商户');
+      }
+      
+    },
+    // 搜索结果导出
+    download(){
+      // let {clique,status,search,principalMobile,areaCode} = this.searchParams;
+      // window.location.href = `/gic-enterprise-operation-web/enterprise_service/export?clique=${clique}&status=${status}&search=${search}&principalMobile=${principalMobile}&areaCode=${areaCode}`
+    },
+    // 去配置
+    toSettingPage(){
+      this.$router.push({
+        path: "/abnormal-setting"
+      });
+    },
+    linkDetail(memberId) {
+      this.$router.push({
+        path: "/customerDetail",
+        query: { memberId }
+      });
+    }
+  }
+};

src/components/wechatmembers/abnormal-member-list/abnormal-member.less

+.forzen-container {
+  padding: 20px;
+  background-color: #fff;
+  .search {
+    margin-bottom: 24px;
+    .top-header {
+      display: flex;
+      align-items: center;
+      margin-bottom: 20px;
+
+      h2 {
+        margin-right: 20px;
+        font-size: 16px;
+        font-weight: bold;
+        color: #303133;
+        line-height: 22px;
+      }
+    }
+
+    .search-item {
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+
+  .basic-info-table {
+    color: #303133;
+    font-size: 14px;
+    .nick-name {
+      color: #909399;
+      font-size: 14px;
+    }
+    .basic-img {
+      display: inline-block;
+      vertical-align: middle;
+      height: 40px;
+      width: 40px;
+      min-width: 40px;
+      border-radius: 50%;
+      overflow: hidden;
+      margin-right: 10px;
+    }
+  }
+}
+
+.frozen-table {
+  .pager {
+    text-align: right;
+    padding: 20px 0 0;
+  }
+  /deep/.el-table-column--selection {
+    .cell {
+      padding-left: 16px;
+      padding-right: 0px;
+    }
+  }
+  /deep/.cell {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  /deep/.table-select-page .cell {
+    padding-left: 10px;
+    padding-right: 0;
+    display: flex;
+    align-items: center;
+    .el-dropdown {
+      padding: 0;
+    }
+  }
+}
+
+.frozen-list {
+  height: 100%;
+}
+
+.no-setting-page {
+  height: 100%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .tips-box {
+    height: auto;
+    margin-right: 150px;
+    .label {
+      color: #0a1c2b;
+      font-size: 20px;
+      font-weight: 500;
+    }
+    .el-button--primary {
+      margin-top: 40px;
+      border-radius: 2px;
+    }
+  }
+}
+.no-update-page {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  height: 100%;
+  .icon {
+    width: 120px;
+    height: 120px;
+    margin: 0 auto 16px;
+  }
+  .label {
+    color: #606266;
+    font-size: 14px;
+  }
+}
+
+.data-abnormal-page{
+  position: relative;
+  text-align: center;
+  height: 100%;
+  padding: 0 30px;
+  .icon{
+    margin: 116px auto 30px;
+    color: #FA8C16;
+    width: 72px;
+    height: 72px;
+    font-size: 72px;
+  }
+  .title{
+    color: #303133;
+    font-size: 14px;
+    line-height: 20px;
+  }
+  .subtitle{
+    color: #606266;
+    font-size: 14px;
+    line-height: 20px;
+  }
+  .el-button--primary{
+    margin: 30px auto;
+  }
+}
+
+.channel-box {
+  display: inline-block;
+  + .channel-box {
+    margin-left: 6px;
+  }
+  .channel-icon {
+    width: 20px;
+    height: 20px;
+    vertical-align: middle;
+  }
+}
+
+.frozen-table /deep/.el-table {
+  .setting-cell.el-table__cell {
+    display: flex;
+    align-items: center;
+    height: 65px;
+    padding: 0;
+    .cell.setting-cell {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: 65px;
+      padding-right: 0;
+      .el-icon-setting {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 60px;
+        height: 100%;
+        font-size: 20px;
+        color: #666;
+        cursor: pointer;
+        background: #eaeaea;
+
+        &:hover {
+          color: #000;
+        }
+      }
+    }
+  }
+
+  /deep/.el-table__empty-block {
+    z-index: 1;
+    position: relative;
+    background: white;
+  }
+}

src/components/wechatmembers/abnormal-member-list/components/dialog/freeze.vue

+<template>
+  <div>
+    <el-dialog :title="canEdit ? '编辑使用期限' : '查看使用期限'" :visible.sync="visible" width="600px" @close="onClose">
+      <el-row type="flex" justify="end" v-if="canEdit">
+        <el-button @click="onClose">取消</el-button>
+        <el-button type="primary" @click="submit()">确定</el-button>
+      </el-row>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+const ONE_M = 60 * 1000;
+const ONE_HOUR = 60 * ONE_M;
+const ONE_DAY = 24 * ONE_HOUR;
+const ONE_YEAR = 365 * ONE_DAY;
+
+export default {
+  name: 'EditDialog',
+  components: {
+  },
+  props: {
+    visible: false,
+
+  },
+  data() {
+    return {
+      showLog: false,
+    };
+  },
+  methods: {
+    onClose() {
+      this.$emit('update:visible', false);
+    },
+    submit() {
+      // console.log(this.dateValue,getTime(this.dateValue[0]));
+    }
+  },
+  watch: {
+    detailItem: {
+      immediate: true,
+      deep: true,
+      handler(detailItem) {
+        this.serviceList.map((item, index) => {
+          if (!detailItem.enterpriseServices) {
+            return;
+          }
+          let service = detailItem.enterpriseServices[item.key] || {};
+          item = Object.assign(item, service);
+          if (service.serviceEndDate && service.serviceStartDate) {
+            this.$set(item, 'dateValue', [new Date(service.serviceStartDate), new Date(service.serviceEndDate)]);
+          } else {
+            this.$set(item, 'dateValue', ['', '']);
+          }
+          this.serviceList[index] = item;
+        });
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/wechatmembers/abnormal-member-list/components/dialog/tableColumDialog.vue

+<template>
+  <div>
+    <el-dialog
+      title="设置显示字段"
+      custom-class="table-colum-dailog"
+      :visible.sync="visible"
+      @close="cancel"
+      width="600px"
+    >
+      <div class="checkwtip mBottom10">
+        请选择您想显示的列表字段，最多勾选8个选项，已经勾选了 <span
+          class="curcheck"
+        >{{ checkedFieldsCopy.length }}</span> 个
+      </div>
+      <el-checkbox-group
+        v-model="checkedFieldsCopy"
+        class="table-colum-wrap"
+        :min="0"
+        :max="8"
+      >
+        <el-checkbox
+          v-for="(item, index) in memberFields"
+          class="table-colum-item"
+          :key="index"
+          :label="item"
+          :disabled="item.code==='name'"
+        >
+          {{ item.name }}
+        </el-checkbox>
+      </el-checkbox-group>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="cancel">取消</el-button>
+        <el-button type="primary" @click="submitFields">确定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  name: 'TableColumDailog',
+  props: {
+    checkedFields: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    memberFields: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    dialogVisible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data () {
+    return {
+      visible: false,
+      checkedFieldsCopy: [],
+    };
+  },
+  watch: {
+    dialogVisible (n, o) {
+      this.visible = n;
+      if(!(this.memberFields && this.memberFields.length)){
+        this.$message({
+            message: "设置异常",
+            type: "error"
+          });
+        return this.visible = false;
+      }
+      if (n) { 
+        this.checkedFieldsCopy = this.memberFields.filter((item)=>{
+          return item.check
+        }); 
+      }
+    },
+  },
+  methods: {
+    submitFields () {
+      this.$emit('update:dialogVisible', false);
+      this.$emit('submit', this.checkedFieldsCopy.map((item)=>{
+        return item.code;
+      }).join(','));
+    },
+    cancel () {
+      this.checkedFieldsCopy = [].concat(this.checkedFields);
+      this.$emit('update:dialogVisible', false);
+    },
+  },
+};
+
+</script>
+<style lang="less" scoped>
+.table-colum-wrap {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  .table-colum-item {
+    flex: 25%;
+    line-height: 35px;
+  }
+  .table-colum-item + .table-colum-item {
+    margin-left: 0;
+  }
+}
+</style>
+<style lang="less">
+// 去除dailog-footer上边框
+.table-colum-dailog .el-dialog__footer {
+  border-top: none !important;
+}
+.table-colum-dailog .el-checkbox:last-of-type {
+  margin-right: 30px;
+}
+</style>

src/router/index.js

@@ -305,12 +305,20 @@ export const constantRouterMap = [
       {
         path: '/abnormal-member',
         name: '/abnormal-member',
-        component: _import('wechatmembers', 'abnormal-member'),
+        component: _import('wechatmembers', 'abnormal-member-list/abnormal-member'),
         meta: {
           title: '异常会员列表',
         },
       },
       {
+        path: '/abnormal-setting',
+        name: '/abnormal-setting',
+        component: _import('wechatmembers', 'abnormal-setting/abnormal-setting'),
+        meta: {
+          title: '异常会员配置',
+        },
+      },
+      {
         path: '/abnormal-member-option',
         name: '/abnormal-member-option',
         component: _import('wechatmembers', 'abnormal-member-option'),