crmeb_shop/template/admin/src/components/customerInfo/index.vue

<template>
  <div class="customer">
    <Form ref="formValidate" :model="formValidate" :label-width="100" @submit.native.prevent>
      <Row :gutter="24" type="flex">
        <Col span="24" class="ivu-text-left">
          <FormItem label="搜索日期：">
            <RadioGroup
              v-model="formValidate.data"
              type="button"
              @on-change="selectChange(formValidate.data)"
              class="mr"
            >
              <Radio :label="item.val" v-for="(item, i) in fromList.fromTxt" :key="i">{{ item.text }}</Radio>
            </RadioGroup>
            <DatePicker
              :editable="false"
              @on-change="onchangeTime"
              :value="timeVal"
              format="yyyy/MM/dd"
              type="daterange"
              placement="bottom-end"
              placeholder="请选择时间"
              style="width: 200px"
            ></DatePicker>
          </FormItem>
        </Col>
        <Col span="12" class="ivu-text-left">
          <FormItem label="用户名称：">
            <Input
              search
              enter-button
              placeholder="请输入用户名称"
              v-model="formValidate.nickname"
              style="width: 90%"
              @on-search="userSearchs"
            ></Input>
          </FormItem>
        </Col>
      </Row>
    </Form>
    <Table
      :loading="loading2"
      highlight-row
      no-userFrom-text="暂无数据"
      no-filtered-userFrom-text="暂无筛选结果"
      ref="selection"
      :columns="columns4"
      :data="tableList2"
    >
      <template slot-scope="{ row, index }" slot="nickname">
        <div>{{ row.nickname }}</div>
        <div style="color: red">{{ row.is_del ? '用户已注销' : '' }}</div>
      </template>
      <template slot-scope="{ row, index }" slot="headimgurl">
        <div class="tabBox_img" v-viewer>
          <img v-lazy="row.headimgurl" />
        </div>
      </template>
      <template slot-scope="{ row, index }" slot="user_type">
        <span v-if="row.user_type === 'wechat'">公众号</span>
        <span v-else-if="row.user_type === 'routine'">小程序</span>
        <span v-else-if="row.user_type === 'h5'">H5</span>
        <span v-else-if="row.user_type === 'pc'">PC</span>
        <span v-else>--</span>
      </template>
      <template slot-scope="{ row, index }" slot="sex">
        <span v-show="row.sex === 1">男</span>
        <span v-show="row.sex === 2">女</span>
        <span v-show="row.sex === 0">保密</span>
        <span v-show="row.sex === null">--</span>
      </template>
      <template slot-scope="{ row, index }" slot="country">
        <span v-if="row.country || row.province || row.city">{{ row.country + row.province + row.city }}</span>
        <span v-else>--</span>
      </template>
      <template slot-scope="{ row, index }" slot="subscribe">
        <span v-text="row.subscribe === 1 ? '关注' : '未关注'"></span>
      </template>
    </Table>
    <div class="acea-row row-right page">
      <Page :total="total2" show-elevator show-total @on-change="pageChange2" :page-size="formValidate.limit" />
    </div>
  </div>
</template>
<script>
import { kefucreateApi } from '@/api/setting';
export default {
  name: 'index',
  data() {
    return {
      formValidate: {
        page: 1,
        limit: 15,
        data: '',
        nickname: '',
      },
      tableList2: [],
      timeVal: [],
      fromList: {
        title: '选择时间',
        custom: true,
        fromTxt: [
          { text: '全部', val: '' },
          { text: '今天', val: 'today' },
          { text: '昨天', val: 'yesterday' },
          { text: '最近7天', val: 'lately7' },
          { text: '最近30天', val: 'lately30' },
          { text: '本月', val: 'month' },
          { text: '本年', val: 'year' },
        ],
      },
      currentid: 0,
      productRow: {},
      columns4: [
        {
          title: '选择',
          key: 'chose',
          width: 60,
          align: 'center',
          render: (h, params) => {
            let uid = params.row.uid;
            let flag = false;
            if (this.currentid === uid) {
              flag = true;
            } else {
              flag = false;
            }
            let self = this;
            return h('div', [
              h('Radio', {
                props: {
                  value: flag,
                  disabled: !!params.row.is_del,
                },
                on: {
                  'on-change': () => {
                    self.currentid = uid;
                    this.productRow = params.row;
                    if (this.productRow.uid) {
                      if (this.$route.query.fodder === 'image') {
                        /* eslint-disable */
                        let imageObject = {
                          image: this.productRow.headimgurl,
                          uid: this.productRow.uid,
                        };
                        form_create_helper.set('image', imageObject);
                        form_create_helper.close('image');
                      } else {
                        this.$emit('imageObject', {
                          image: this.productRow.headimgurl,
                          uid: this.productRow.uid,
                        });
                      }
                    } else {
                      this.$Message.warning('请先选择商品');
                    }
                  },
                },
              }),
            ]);
          },
        },
        {
          title: 'ID',
          key: 'uid',
          width: 80,
        },
        {
          title: '微信用户名称',
          slot: 'nickname',
          minWidth: 180,
        },
        {
          title: '客服头像',
          slot: 'headimgurl',
          minWidth: 60,
        },
        {
          title: '用户类型',
          slot: 'user_type',
          minWidth: 100,
        },
        {
          title: '性别',
          slot: 'sex',
          minWidth: 60,
        },
        {
          title: '地区',
          slot: 'country',
          minWidth: 120,
        },
        {
          title: '是否关注公众号',
          slot: 'subscribe',
          minWidth: 120,
        },
      ],
      loading2: false,
      total2: 0,
    };
  },
  created() {},
  mounted() {
    this.getListService();
  },
  methods: {
    // 具体日期
    onchangeTime(e) {
      this.timeVal = e;
      this.formValidate.data = this.timeVal.join('-');
      this.getListService();
    },
    // 选择时间
    selectChange(tab) {
      this.formValidate.data = tab;
      this.timeVal = [];
      this.getListService();
    },
    // 客服列表
    getListService() {
      this.loading2 = true;
      kefucreateApi(this.formValidate)
        .then(async (res) => {
          let data = res.data;
          this.tableList2 = data.list;
          this.total2 = data.count;
          this.tableList2.map((item) => {
            item._isChecked = false;
          });
          this.loading2 = false;
        })
        .catch((res) => {
          this.loading2 = false;
          this.$Message.error(res.msg);
        });
    },
    pageChange2(pageIndex) {
      this.formValidate.page = pageIndex;
      this.getListService();
    },
    // 搜索
    userSearchs() {
      this.formValidate.page = 1;
      this.getListService();
    },
  },
};
</script>

<style scoped lang="stylus">
.customer
  overflow-y auto
  overflow-x hidden
  height 500px
.tabBox_img
    width 36px
    height 36px
    border-radius:4px;
    cursor pointer
    img
        width 100%
        height 100%
.modelBox
    >>>
    .ivu-table-header
        width 100% !important
.trees-coadd
    width: 100%;
    height: 385px;
    .scollhide
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: scroll;
.scollhide::-webkit-scrollbar {
    display: none;
}
.footer{
    margin: 15px 0;
    padding-right: 20px;
}
</style>