黑名单列表(添加移出)

zxl

2025-05-16 72454c3e8f686c1325fb265d59b8b63251bd17e2

黑名单列表(添加移出)

 manager/src/api/customer-black.js

New file
@@ -0,0 +1,27 @@
import service from "@/libs/axios";

// 获取客户黑名单列表
export const getCustomerBlackList = (params) => {
  return service({
    url: "/customer-black/page",
    method: "GET",
    params: params
  })
}

// 添加客户黑名单
export const addCustomerBlackByPC = (params) => {
  return service({
    url: "/customer-black",
    method: "POST",
    data: params
  })
}

// 移除客户黑名单列表
export const delCustomerBlackById = (params) => {
  return service({
    url: "/customer-black/" + params,
    method: "DELETE",
  })
}

 manager/src/views/customer/customer-black/index.vue

New file
@@ -0,0 +1,257 @@
<template>
  <card>
    <Form
      ref="searchForm"
      @keydown.enter.native="handleSearch"
      :model="searchForm"
      inline
      :label-width="70"
      class="search-form"
    >
      <Form-item label="用户名" prop="username">
        <Input
          type="text"
          v-model="searchForm.username"
          clearable
          @on-clear="handleSearch"
          @on-change="handleSearch"
          style="width: 160px"
        />
      </Form-item>
      <Form-item label="昵称" prop="nickname">
        <Input
          type="text"
          v-model="searchForm.nickName"
          clearable
          @on-clear="handleSearch"
          @on-change="handleSearch"
          style="width: 160px"
        />
      </Form-item>
      <Form-item label="商家" prop="storeId">
        <Select
          v-model="searchForm.storeId"
          style="width:160px"
          :loading="storeSelectLoading"
          class="custom-select"
          clearable
          @on-clear="handleSearch"
          @on-change="handleSearch"
        >
          <Option
            v-for="item in selectOptions"
            :value="item.id"
            :key="item.id"
          >
            {{ item.storeName }}
          </Option>
        </Select>
      </Form-item>
      <Button
        @click="handleSearch"
        type="primary"
        icon="ios-search"
        class="search-btn"
      >搜索</Button
      >
    </Form>
    <Table
      :loading="loading"
      border
      :columns="columns"
      :data="customerBlackList"
      ref="table"
      sortable="custom"
      @on-sort-change="changeSort"
      @on-selection-change="showSelect"
    >
      <template slot-scope="{ row, index }" slot="action">
        <Button type="error" size="small" style="margin-right: 5px" @click="removeBlack(row)">移出黑名单</Button>
      </template>
    </Table>
    <Row type="flex" justify="end" class="mt_10">
      <Page
        :current="searchForm.pageNumber"
        :total="total"
        :page-size="searchForm.pageSize"
        @on-change="changePage"
        @on-page-size-change="changePageSize"
        :page-size-opts="[10, 20, 50]"
        size="small"
        show-total
        show-elevator
        show-sizer
      ></Page>
    </Row>
  </card>
</template>
<script>
import JsonExcel from "vue-json-excel";
import {addCustomerBlackByPC,getCustomerBlackList,delCustomerBlackById} from "@/api/customer-black.js"
import {getStoreSelectOptions} from "@/api/customer";
export default {
  name: 'customer-black',
  components:{
    "download-excel": JsonExcel,
  },
  data(){
    return{
      searchForm:{
        storeId: '', //商家
        username:'', //用户名
        nickName:'', // 昵称
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
      },

      loading:false,
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title:'用户名',
          key: 'username',
          minWidth: 60,
          tooltip: true,
        },
        {
          title:'昵称',
          key: 'nickName',
          minWidth: 60,
          tooltip: true,
        },
        {
          title:'性别',
          key: 'sex',
          tooltip: true,
          render: (h, params) => {
            const sexText = params.row.sex === 1 ? '男' : '女';
            return h('span', sexText);
          }
        },
        {
          title:'地址',
          key: 'region',
          minWidth: 60,
          tooltip: true,
        },
        {
          title:'状态',
          key: 'disabled',
          tooltip: true,
          render: (h, params) => {
            const sexText = params.row.disabled === true ? '禁用' : '正常';
            return h('span', sexText);
          }
        },
        {
          title: '操作',
          key: 'action',
          slot: 'action',
          minWidth: 150,
          align: 'center'
        }

      ],
      total:0,
      customerBlackList:[],
      selectCount: 0, // 已选数量
      selectList: [], // 已选数据列表

      //商家下拉框数据
      selectOptions:[],
      storeSelectLoading: false,
    }
  },
  mounted() {
    this.init()
  },
  methods:{
    init(){
      this.getCustomerBlackList()
      this.getStoreSelectOptions()
    },
    getStoreSelectOptions(){
      this.storeSelectLoading = true;
      getStoreSelectOptions().then(res =>{
        this.storeSelectLoading = false;
        if (res.code === 200){
          this.selectOptions = res.data;
        }
      })
    },
    getCustomerBlackList(){
      this.loading = true;
      getCustomerBlackList(this.searchForm).then(res =>{
        this.loading = false;
        if (res.code === 200) {
          this.customerBlackList = res.data;
          this.total = res.total;
        }
      })
    },
    handleSearch(){
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.getCustomerBlackList();
    },
    changePage(v){
      this.searchForm.pageNumber = v
      this.getCustomerBlackList()
    },
    // 修改size
    changePageSize(v){
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = v;
      this.getCustomerBlackList()
    },
    changeSort(){

    },
    showSelect(){
      this.selectList = e.map(d => d.id);
      this.selectCount = e.length;
    },
    removeBlack(row){
      console.log(row)
      delCustomerBlackById(row.id).then(res =>{
        if (res.code === 200){
          this.$Message.success("移除成功");
        }
        this.getCustomerBlackList();
      })
    }

  }
}
</script>
<style lang="scss" scoped>
.export {
  margin: 10px 20px 10px 0;
}
.export-excel-wrapper {
  display: inline;
}
.order-tab {
  width: 950px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f0f0f0;
  padding: 0 10px;
  margin-bottom: 10px;
  div {
    text-align: center;
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
  }
  .current {
    background-color: #ffffff;
  }
}
</style>

 manager/src/views/customer/index.vue

@@ -126,6 +126,7 @@
<script>
import JsonExcel from "vue-json-excel";
import {getCustomerList,addCustomerTag,saveCustomerTagById,getTagList,getStoreSelectOptions} from "@/api/customer";
import {addCustomerBlackByPC} from "@/api/customer-black.js"

export default {
  name:"customer",
@@ -243,7 +244,13 @@
      },
      //商家下拉框数据
      selectOptions:[],
      storeSelectLoading: false
      storeSelectLoading: false,

      //黑名单请求对象
      blackParam:{
        storeId:'',
        userId:'',
      }

    }
  },
@@ -309,17 +316,6 @@
      this.searchForm.pageSize = 10;
      this.getCustomerList();
    },
    // 新增或修改
    // saveOrUpdate() {
    //   this.$refs.form.validate(valid => {
    //     if (valid) {
    //       this.submitLoading = true
    //         // 新增
    //         console.log(this.tagForm)
    //
    //     }
    //   });
    // },
    handleSelectChange(newVal){
      console.log(newVal)
      this.getCustomerList()
@@ -348,8 +344,14 @@
      this.searchForm.pageSize = v;
      this.getCustomerList()
    },
    joinBlack(){

    joinBlack(row){
      this.blackParam.storeId = row.storeId;
      this.blackParam.userId = row.id;
      addCustomerBlackByPC(this.blackParam).then(res =>{
        if (res.code === 200){
          this.$Message.success(res.msg);
        }
      })
    },