wt_admin_web/src/view/customer/wxulist.vue

<template>
    <div id="wxulist">
    <!-- 查询条件 -->
        <Row>
            <Col span="24">
            <Card class="margin-bottom-10">
                <Form inline>
                    <FormItem class="margin-bottom-0">
                        <Input v-model="searchConf.phone" @on-enter="search" clearable placeholder="输入手机号码查询"></Input>
                    </FormItem>
                    <FormItem class="margin-bottom-0">
                        <Button type="primary" @click="search">{{ $t('find_button') }}/{{ $t('refresh_button') }}</Button>
                    </FormItem>
                </Form>
            </Card>
            </Col>
        </Row>

        <Row>
            <Col span="24">
            <Card>
                <!-- 用户列表 -->
                <div>
                    <Table :loading="listLoading" :columns="columnsList" :data="tableData" stripe disabled-hover></Table>
                </div>
                <div class="margin-top-15" style="text-align: center">
                    <Page :total="tableShow.listCount" :current="tableShow.currentPage" :page-size="tableShow.pageSize" @on-change="changePage" @on-page-size-change="changeSize" show-elevator show-sizer show-total></Page>
                </div>
            </Card>
            </Col>
        </Row>
    </div>
</template>

<style lang="less" scoped>
.api-box {
    max-height: 300px;
    overflow: auto;
}

.api-group {
    margin-top: 10px;
    border: 1px solid #dddee1;
    border-radius: 5px;
    padding: 10px;
}
</style>

<script>
import { getList } from '@/api/wechat'
//
export default {
  name: 'wechat_user_list',
  data () {
    return {
      appGroup: [],
      columnsList: [{
        title: '序号',
        type: 'index',
        width: 65,
        align: 'center'
      },
      {
        title: '手机号码',
        align: 'center',
        key: 'phone',
        width: 260
      },
      {
        title: 'openid',
        align: 'openid',
        key: 'openid',
        minWidth: 280
      },

      {
        title: '头像',
        align: 'center',
        key: 'headimgurl',
        width: 100,
        render: (h, params) => {
          return h('img', {
            attrs: {
              src: params.row.headimgurl,
              style: 'width:72px;height:72px;'
            }
          })
        }
      },
      {
        title: '上次登录时间',
        align: 'center',
        key: 'last_login_time',
        width: 210
      },
      {
        title: '创建时间',
        align: 'center',
        key: 'create_time',
        width: 310
      },
      {
        title: '状态',
        align: 'center',
        key: 'status',
        width: 200,
        render: (h, params) => {
          let _st = params.row.status === 0 ? '禁用' : '正常'
          return h('p', [
            _st
          ])
        }
      }
      ],
      tableData: [],
      groupInfo: {},
      groupList: {},
      tableShow: {
        currentPage: 1,
        pageSize: 10,
        listCount: 0
      },
      // 搜索配置
      searchConf: {
        phone: ''
      },
      modalSetting: {
        show: false,
        loading: false,
        index: 0
      },

      listLoading: false
    }
  },
  created () {
    let vm = this
    vm.getList()
    //
  },
  methods: {
    alertAdd () {
      let vm = this
      getAll().then(response => {
        vm.appGroup = response.data.data.list
      })
      getAppInfo().then(response => {
        let res = response.data
        vm.formItem.app_id = res.data.app_id
        vm.formItem.app_secret = res.data.app_secret
        vm.groupInfo = res.data.groupInfo
        vm.groupList = res.data.apiList
        for (let index in vm.groupInfo) {
          vm.$set(vm.checkAllStatus, index, false)
          vm.$set(vm.checkAllIndeterminate, index, false)
          vm.$set(vm.formItem.app_api, index, [])
        }
      })
      vm.modalSetting.show = true
    },
    submit () {
      //
    },
    cancel () {
      this.formItem.id = 0
      this.$refs['myForm'].resetFields()
      this.modalSetting.show = false
      this.modalSetting.loading = false
      this.modalSetting.index = 0
    },
    changePage (page) {
      this.tableShow.currentPage = page
      this.getList()
    },
    changeSize (size) {
      this.tableShow.pageSize = size
      this.getList()
    },
    handleCheckAll (groupId) {
      if (this.checkAllStatus[groupId]) {
        this.checkAllStatus[groupId] = false
      } else {
        this.checkAllStatus[groupId] = !this.checkAllStatus[groupId]
      }
      this.checkAllIndeterminate[groupId] = false

      if (this.checkAllStatus[groupId]) {
        let vm = this
        this.groupList[groupId].forEach(item => {
          vm.formItem.app_api[groupId].push(item.hash)
        })
      } else {
        this.formItem.app_api[groupId] = []
      }
    },
    checkAllGroupChange (groupId) {
      if (this.formItem.app_api[groupId].length === this.groupList[groupId].length) {
        this.checkAllIndeterminate[groupId] = false
        this.checkAllStatus[groupId] = true
      } else if (this.formItem.app_api[groupId].length > 0) {
        this.checkAllIndeterminate[groupId] = true
        this.checkAllStatus[groupId] = false
      } else {
        this.checkAllIndeterminate[groupId] = false
        this.checkAllStatus[groupId] = false
      }
    },
    search () {
      this.tableShow.currentPage = 1
      this.getList()
    },
    refreshAppSecret () {
      let vm = this
      refreshAppSecretApi().then(response => {
        vm.formItem.app_secret = response.data.data.app_secret
      })
    },
    getList () {
      let vm = this
      vm.listLoading = true
      getList({
        page: vm.tableShow.currentPage,
        size: vm.tableShow.pageSize,
        key: vm.searchConf.phone
        // type: vm.searchConf.type,
        // keywords: vm.searchConf.keywords,
        // status: vm.searchConf.status
      }).then(response => {
        vm.tableData = response.data.data.list
        vm.tableShow.listCount = response.data.data.count
        vm.listLoading = false
      })
    },
    doCancel (data) {
      if (!data) {
        this.formItem.id = 0
        this.$refs['myForm'].resetFields()
        this.modalSetting.loading = false
        this.modalSetting.index = 0
      }
    }
  }
}
</script>