ohplay_system/src/views/user/list/index.vue

<template>
  <div class="app-container">
    <!-- 搜索 -->
    <el-form inline size="mini">
      <el-form-item label="用户账号:">
        <el-input v-model="form.userName" placeholder="请输入用户账号" clearable />
      </el-form-item>
      <el-form-item label="用户手机号:">
        <el-input type="number" v-model="form.phone" placeholder="请输入用户手机号" clearable />
      </el-form-item>
      <el-form-item label="设备型号：">
        <el-select v-model="form.clientTypeId" filterable placeholder="请选择设备型号" clearable>
          <el-option v-for="item in devOptions" :key="item.value" :value="item.value" :label="item.label" />
        </el-select>
      </el-form-item>
      <el-form-item label="注册来源:">
        <el-select v-model="form.registerChannel" placeholder="请选择注册来源" clearable>
          <el-option v-for="item in regOptions" :key="item.value" :value="item.value" :label="item.label" />
        </el-select>
      </el-form-item>
      <el-form-item label="注册时间:">
        <el-date-picker v-model="form.startsignTime" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期"
          format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getSearch">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="getRefresh">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 列表 -->
    <el-table :data="tableData" v-loading="loading">
      <el-table-column label="用户ID" prop="id" align="center" show-overflow-tooltip />
      <el-table-column label="用户账号" prop="nickname" align="center" />
      <el-table-column label="用户手机号" prop="phone" align="center" />
      <el-table-column label="用户头像" align="center" width="100px">
        <template slot-scope="scope">
          <el-image :src="scope.row.headUrl" />
        </template>
      </el-table-column>
      <el-table-column label="用户性别" prop="sex" align="center" :formatter="sexFormatter" />
      <el-table-column label="绑定设备" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.deviceList.join('，') }}
        </template>
      </el-table-column>
      <el-table-column label="注册来源" prop="registerChannel" align="center" :formatter="regFormatter" />
      <el-table-column label="注册系统" prop="mtype" align="center" :formatter="typeFormatter" />
      <el-table-column label="注册时间" prop="createTime" align="center" />
      <el-table-column label="用户积分" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.totalPoint | empty(scope.row.totalPoint) }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center">
        <template slot="header">
          <div>钱包余额</div>
          <div>(Android)</div>
        </template>
        <template slot-scope="scope">
          <span>{{ scope.row.balanceAndroid.toFixed(2) }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center">
        <template slot="header">
          <div>钱包余额</div>
          <div>(iOS)</div>
        </template>
        <template slot-scope="scope">
          <span>{{ scope.row.balanceIos.toFixed(2) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="已绑设备" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-if="scope.row.deviceList">
            {{ scope.row.deviceList.join('，') }}
          </span>
          <span v-else>
            暂无绑定
          </span>
        </template>
      </el-table-column>
      <el-table-column label="购买次数" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.buyCount | empty(scope.row.buyCount) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="累计消费 / 元" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.buyAmount | emptyCount(scope.row.buyAmount) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="上次消费" prop="lastBuyTime" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.lastBuyTime | emptyDate(scope.row.lastBuyTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="累计充值 / 元" prop="rechargeAmount" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.rechargeAmount | emptyCount(scope.row.rechargeAmount) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="上次充值" prop="lastRechargeTime" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.lastRechargeTime | emptyDate(scope.row.lastRechargeTime) }}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="form.pageNum" :limit.sync="form.pageSize"
      @pagination="getList" />
  </div>
</template>

<script>
import { list } from '@/api/user/list'
import { sexMixin, devMixin } from '@/mixin/index'
export default {
  mixins: [sexMixin, devMixin],
  data() {
    return {
      // 遮罩层
      loading: false,
      // 表单
      form: {
        pageNum: 1,
        pageSize: 10
      },
      // 列表
      tableData: [],
      // 总数据
      total: 0,
      // 注册来源
      regOptions: [{
        value: -1,
        label: '未知'
      }, {
        value: 0,
        label: '小米'
      }, {
        value: 1,
        label: '360'
      }, {
        value: 2,
        label: '应用宝'
      }, {
        value: 3,
        label: 'OPPP'
      }, {
        value: 4,
        label: 'ViVO'
      }, {
        value: 5,
        label: '魅族'
      }, {
        value: 6,
        label: '华为'
      }, {
        value: 7,
        label: '微信小程序'
      }, {
        value: 8,
        label: 'AppStore'
      }],
      // 注册系统
      typeOptions: [{
        value: 0,
        label: '未知'
      }, {
        value: 1,
        label: 'Android'
      }, {
        value: 2,
        label: 'iOS'
      }]
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 列表
    getList() {
      this.loading = true
      list(this.form).then(res => {
        if (res.code === 0) {
          this.tableData = res.data.records
          this.total = res.data.total
          this.loading = false
        }
      })
    },

    // 搜索
    getSearch() {
      this.form.pageNum = 1
      this.getList()
    },

    // 重置
    getRefresh() {
      this.form = {
        pageNum: 1,
        pageSize: 10
      }
      this.getList()
    },

    // 字典翻译
    regFormatter(row) {
      return this.selectDictLabel(this.regOptions, row.registerChannel)
    },

    sexFormatter(row) {
      return this.selectDictLabel(this.sexOptions, row.sex)
    },

    typeFormatter(row) {
      return this.selectDictLabel(this.typeOptions, row.mtype)
    }
  },

  // 过滤器
  filters: {
    // 是否为空
    empty(item) {
      return !item ? 0 : item
    },

    // 金额是否为空
    emptyCount(item) {
      return !item ? '0.00' : Number(item).toFixed(2)
    },

    // 时间为空
    emptyDate(item) {
      return !item ? '-' : item
    }
  }
}
</script>