caimei-mall-admin-ui/src/views/club/operateList.vue

<template>
  <div class="app-container">
    <div class="app-title">当前会所: <span class="span"></span>商城测试演示会所</span> </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
    >
      <el-table-column align="center" label="序号" width="50">
        <template slot-scope="scope">
          {{ scope.$index+1 }}
        </template>
      </el-table-column>
      <el-table-column label="账号" width="150" align="center" prop="classifyNum" />
      <el-table-column label="姓名" width="150" align="center" prop="classifyName" />
      <el-table-column label="手机号码" width="110" align="center" prop="telephone" />
      <el-table-column label="邀请码" width="130" align="center" prop="code">
        <template slot-scope="{row}">
          <span v-if="row.codeType" style="text-align: center;float:left">{{ row.code }}</span>
          <span v-if="row.codeType" :style="{color: rexpStautsColor(row.status)}">{{ rexpStautsText(row.status) }}</span>
          <el-tag v-else type="info">—— ——</el-tag>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="状态" width="100" align="center" prop="status">
        <template slot-scope="{row}">
          <i v-if="row.status === 2" class="el-icon-success" style="color:#67C23A;font-size: 20px;" />
          <!-- <i v-else class="el-icon-error" style="color: #E6A23C;font-size: 20px;" /> -->
        </template>
      </el-table-column>
      <el-table-column align="center" label="微信昵称" width="110" prop="watchName" />
      <el-table-column align="center" label="OpenID" width="250" prop="openID" />
      <el-table-column align="center" label="添加时间" width="160" prop="createTime" />
      <el-table-column align="center" label="绑定时间" width="160" prop="bindTime" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button v-if="row.codeType" type="primary" size="mini" @click="handleEdit(row)">编辑</el-button>
          <el-button v-if="row.codeType" type="primary" size="mini" @click="handleUntying(row)">解绑</el-button>
          <el-button v-else type="primary" size="small" @click="handleGenerateCode(row)">生成邀请码</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="fetchData" />

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="40%">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:24%;">
        <el-form-item label="姓名" prop="classifyName">
          <el-input v-model="temp.classifyName" />
        </el-form-item>
        <el-form-item label="手机号" prop="telephone">
          <el-input v-model="temp.telephone" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="updateData()">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogVisible" width="20%">
      <span>{{ dialogVisibleText }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirm()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { 
  getOperatorList,     //初始化
  createOperatorCode,  //生成邀请码
  updateOperatorCode,  //更新邀请码
  unbindOperator,      //解绑运营
  preservOperator,     //保存
  createOperator,      //保存并生成
  queryOperatorList    //条件查询
} from '@/api/goods'
import Pagination from '@/components/Pagination'

export default {
  components: { Pagination },
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: 'success',
        0: 'gray'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      total: 100,
      dialogVisible: false,
      dialogVisibleText: '',
      handleConfirmType: '',
      listQuery: {
        page: 1,
        limit: 10,
        importance: undefined,
        title: undefined,
        type: undefined,
        sort: '+id'
      },
      temp: {
        id: 1,
        organizeID: 1,
        classifyName: '',
        telephone: ''
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        edit: '编辑',
        update: '提示',
        untying: '解绑',
        generate: '生成邀请码',
        create: 'Create'
      },
      rules: {
        classifyName: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
        telephone: [{ required: true, message: '手机号不能为空', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getOperatorList().then(response => {
        this.list = response.data.items
        this.listLoading = false
      }).catch(() => {
        // 封装静态数据
        this.list = [
          {
            id: 1,
            organizeID: 1,
            classifyName: '测试运营人员',
            classifyNum: '2020010120201110',
            watchName: '轻描淡写',
            openID: 'o0dXI5ajSPa6PkOmjjq1aar93JW4',
            code: '219845',
            telephone: 13888888888,
            createTime: '2020-01-01:20:30:56',
            bindTime: '2020-01-01:20:30:56',
            status: 0,
            codeType: false
          },
          {
            id: 2,
            organizeID: 1,
            classifyName: '吴小研',
            classifyNum: '2020010120201110',
            watchName: '轻描淡写',
            openID: 'o0dXI5ajSPa6PkOmjjq1aar93JW4',
            code: '315654',
            telephone: 13888888888,
            createTime: '2020-01-01:20:30:56',
            bindTime: '2020-01-01:20:30:56',
            status: 1,
            codeType: true
          },
          {
            id: 3,
            organizeID: 1,
            classifyName: '郑帅哥',
            classifyNum: '2020010120201110',
            watchName: '轻描淡写',
            openID: 'o0dXI5ajSPa6PkOmjjq1aar93JW4',
            code: '315654',
            telephone: 13666666666,
            createTime: '2020-01-01:20:30:56',
            bindTime: '2020-01-01:20:30:56',
            status: 2,
            codeType: true
          },
          {
            id: 3,
            organizeID: 1,
            classifyName: '李帅哥',
            classifyNum: '2020010120201110',
            watchName: '轻描淡写',
            openID: 'o0dXI5ajSPa6PkOmjjq1aar93JW4',
            code: '315654',
            telephone: 13979770618,
            createTime: '2020-01-01:20:30:56',
            bindTime: '2020-01-01:20:30:56',
            status: 3,
            codeType: true
          }
        ]
      })
      this.listLoading = false
    },
    handleEdit(row) {
      this.temp = Object.assign({}, row)
      console.log(this.temp)
      this.dialogStatus = 'edit'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    handleUntying(row) {
      this.dialogVisible = true
      this.dialogStatus = 'untying'
      this.dialogVisibleText = '确定解绑该运营人员吗?'
      this.handleConfirmType = 'untying'
    },
    handleGenerateCode(row) {
      this.dialogVisible = true
      this.dialogStatus = 'generate'
      this.dialogVisibleText = '确定生成邀请码，并短信提醒该人员?'
      this.handleConfirmType = 'generate'
    },
    handleConfirm() {
      switch (this.handleConfirmType) {
        case 'untying':
          this.untyingRequst()
          break
        case 'generate':
          this.generateRequst()
          break
      }
    },
    untyingRequst() {
      this.dialogVisible = false
      this.$message({
        message: '解绑成功',
        type: 'success',
        center: true
      });
    },
    generateRequst() {
      this.dialogVisible = false
      this.$message({
        message: '邀请码生成成功',
        type: 'success',
        center: true
      });
    },
    rexpStautsText(status) {
      let text = ''
      switch (status) {
        case 1:
          text = '有效'
          break
        case 2:
          text = '已使用'
          break
        case 3:
          text = '已失效'
          break
      }
      return text
    },
    rexpStautsColor(status) {
      let textColor = ''
      switch (status) {
        case 1:
          textColor = '#E6A441'
          break
        case 2:
          textColor = '#417DE6'
          break
        case 3:
          textColor = '#C5C5C5'
          break
      }
      return textColor
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const tempData = Object.assign({}, this.temp)
          this.dialogFormVisible = false
          this.$message({
            message: '保存成功',
            type: 'success',
            center: true
          });
          updateCategory(tempData).then(() => {

          })
        }
      })
    }
  }
}
</script>
<style lang="scss">
  .app-title{
    line-height: 40px;
    font-size: 18px;
    font-weight: bold;
    color: #999999;
    margin-bottom: 10px;
    
  }
  .app-title .span{
      color: #417DE6;
  }
</style>