myjadmin/src/components/system/user/list.vue

<template>
  <div>
    <i-page-header :title="pageTitle"></i-page-header>
    <Card :bordered="false" dis-hover class="ivu-mt">
      <div class="fx-r" style="padding: 20px 0;">
        <Input placeholder="绑定的手机号" style="width:120px" class="mr10" v-model="detial.mobile" />
        <Input placeholder="用户昵称" style="width:120px" class="mr10" v-model="detial.nickname" />
        <Input placeholder="用户UID" style="width:120px" class="mr10" v-model="detial.uid" />
        <Input placeholder="父级用户UID" style="width:120px" class="mr10" v-model="detial.parent_uid" />
        <DatePicker style="width: 250px" format="yyyy-MM-dd HH:mm:ss" v-model="detial.time" type="datetimerange"
          placement="bottom-start" placeholder="注册时间范围" :options="options"></DatePicker>
        <el-button type="primary" style="margin-left: 6px;" @click="tapSeach">查询</el-button>
        <div class="fx-g1"></div>
      </div>

      <div class="muser-tab-continer">
        <a class="muser-tab-a" :class="detial.status == '' ? 'active' : ''" @click="statusChange('')">全部</a>
        <a class="muser-tab-a" :class="detial.status == '-1' ? 'active' : ''" @click="statusChange('-1')">禁用</a>
        <a class="muser-tab-a" :class="detial.status == '1' ? 'active' : ''" @click="statusChange('1')">使用</a>
      </div>
      <el-table :data="detial.data" v-loading="detial.loading" :stripe="true" :border="true">
        <el-table-column prop="uid" label="UID" width="80" align="center">
        </el-table-column>
        <el-table-column prop="avatar" label="头像" width="80" align="left">
          <template slot-scope="scope">
            <img v-lazy="scope.row.avatar" :src="scope.row.avatar" v-image-preview
              style="width: 60px;cursor: pointer;" />
          </template>
        </el-table-column>

        <el-table-column prop="mobile" width="100" label="绑定手机">
        </el-table-column>
        <!-- <el-table-column
				        prop="parent_uid"
				        label="上级用户">
						<template slot-scope="scope">
							<div v-if="scope.row.parent_uid>0">
								<div>昵称：{{scope.row.p_nickname}}</div>
								<div>手机号码：{{scope.row.p_mobile}}</div>
							</div>
						</template>
				</el-table-column> -->
        <!-- <el-table-column
				        prop="branchCount"
						align="center"
				        label="推广人数">
						<template slot-scope="scope">
							{{scope.row.branchCount}}
						</template>
				</el-table-column> -->
        <el-table-column prop="nickname" label="昵称">
        </el-table-column>
        <el-table-column prop="name" label="姓名">
        </el-table-column>
        <el-table-column prop="score" label="积分">
        </el-table-column>
        <el-table-column prop="parent_uid" width="100" label="邀请人">
          <template slot-scope="scope">
            <div @click="tapUserSeach(scope.row.parent_uid)">
              <div style="text-align: center;">{{ scope.row.p_nickname }}</div>
              <div style="text-align: center;">{{ scope.row.p_mobile }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="showTempCount" label="名片模板">
          <template slot-scope="scope">
            <i-link :to="'/system/user/showTemplateList?uid=' + scope.row.uid + '&title=' + scope.row.nickname + '的模板'">
              ({{ scope.row.showTempCount }}) 查看
            </i-link>
          </template>
        </el-table-column>
        <el-table-column prop="is_info_audit" label="资料审核" width="80" align="left">
          <template slot-scope="scope">
            <el-tag type="success" size="mini" v-if="scope.row.is_info_audit == 1">已审核</el-tag>
            <el-tag type="danger" size="mini" v-if="scope.row.is_info_audit == 0">未审核</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="work_type_id" align="center" label="职业名称" width="100">
          <template slot-scope="scope">
            <div v-if="scope.row.work_type_id == 0" style="color: #9B9B9B">普通用户</div>
            <div v-if="scope.row.work_type_id > 0" style="color: #00ac1c">{{ scope.row.work_type_title }}</div>
          </template>
        </el-table-column>


        <el-table-column prop="is_type_audit" label="平台认证" width="80" align="left">
          <template slot-scope="scope">
            <el-tag type="success" size="mini" v-if="scope.row.is_type_audit == 1">已认证</el-tag>
            <el-tag type="danger" size="mini" v-if="scope.row.is_type_audit == 0">未认证</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="是否禁用" width="80" align="left">
          <template slot-scope="scope">
            <el-tag type="success" size="mini" v-if="scope.row.status == 1">使用</el-tag>
            <el-tag type="danger" size="mini" v-if="scope.row.status == -1">禁用</el-tag>
          </template>
        </el-table-column>
        <!-- <el-table-column
				          prop="ercode"
				          label="推广码"
				 		 width="80"
				          align="left">
				      <template slot-scope="scope">
				 		 <img  v-lazy="scope.row.ercode" :src="scope.row.ercode" v-image-preview style="width: 60px;cursor: pointer;"/>
				      </template>
				  </el-table-column> -->
        <el-table-column prop="regtime" label="注册时间" width="150">
        </el-table-column>
        <el-table-column align="center" label="操作" prop="handle" width="200" fixed="right">
          <template slot-scope="scope">
            <div>
              <el-button plain size="mini" @click="tapEdit(scope.row)">编辑</el-button>
              <el-button plain size="mini" @click="tapScoreEdit(scope.row)">积分补扣</el-button>

              <!-- <Divider type="vertical"/>
							<i-link :to="'/system/order/index?uid=' + scope.row.uid + '&title=' +scope.row.nickname+ '的订单列表' ">
								<el-button plain size="mini" >订单</el-button>
							</i-link> -->
            </div>
            <div style="margin-top: 10px;">
              <!-- <i-link :to="'/system/circle/list?uid=' + scope.row.uid + '&title=' +scope.row.nickname+ '的动态列表' ">
								<el-button plain size="mini" >圈子</el-button>
							</i-link>
							<Divider type="vertical"/> -->
              <!-- <i-link :to="'/system/user/moneyDetail?uid=' + scope.row.uid + '&title=' +scope.row.nickname+ '的余额明细' ">
								<el-button plain size="mini" >余额</el-button>
							</i-link> -->
              <!-- 							<Divider type="vertical"/>
							<i-link :to="'/system/user/scoreDetail?uid=' + scope.row.uid + '&title=' +scope.row.nickname+ '的积分明细' ">
								<el-button plain size="mini" >积分</el-button>
							</i-link> -->
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="acea-row row-right page">
        <Page :total="detial.pageCount" show-elevator show-total @on-change="tapPage" :page-size="detial.pageSize" />
      </div>
    </Card>

    <Modal v-model="dialogVisible" :title="title" @on-cancel="editClose">
      <el-form ref="form" :model="form" label-width="120px">
        <el-divider content-position="left">用户信息</el-divider>
        <el-form-item label="用户昵称">
          <el-input placeholder="请输用户昵称！" v-model="form.nickname"></el-input>
        </el-form-item>
        <el-form-item label="用户姓名">
          <el-input placeholder="请输入用户姓名！" v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="是否禁用">
          <el-radio-group v-model="form.status">
            <el-radio :label="1">使用</el-radio>
            <el-radio :label="-1">禁用</el-radio>
          </el-radio-group>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="subAdmin">确 定</el-button>
      </span>
    </Modal>
    <Modal v-model="scoreDialogVisible" title="积分明细补扣" @on-cancel="editClose">
      <el-form ref="form" :model="scoreform" label-width="120px">
        <el-form-item label="增减积分 ">
          <el-radio-group v-model="scoreform.type">
            <el-radio :label="1">增加</el-radio>
            <el-radio :label="-1">减少</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="数量">
          <el-input placeholder="请输入积分数量" v-model="scoreform.into"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="scoreDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="subAdminscore">确 定</el-button>
      </span>
    </Modal>
  </div>
</template>
<script>
import { SystemUserList, SystemUserSave, SystemUserScoreDetailSave } from "../../../api/system/user";

import IPageHeader from "../../../layouts/system/page-header/index";
import UiUpload from "@/ui/upload/index";
import Setting from '@/setting';
export default {
  name: "SystemUserList",
  components: { UiUpload, IPageHeader },
  computed: {},
  data() {
    return {
      scoreDialogVisible: false,
      scoreform: {
        uid: '',
        type: 1,//1:增加 -1：减少
        into: '',
      },
      pageTitle: '用户列表',
      upHeaders: {},
      upUrl: "",
      labelsData: [],
      detial: {
        data: [],
        time: "",
        nickname: "",
        mobile: "",
        status: "",
        uid: "",
        parent_uid: "",

        page: 1,
        loading: true,
        pageSize: 0,
        pageCount: 0,
      },

      options: {
        shortcuts: [
          {
            text: '今天',
            value() {
              const end = new Date();
              const start = new Date();
              start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()));
              return [start, end];
            }
          },
          {
            text: '昨天',
            value() {
              const end = new Date();
              const start = new Date();
              start.setTime(start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 1)));
              end.setTime(end.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate())));
              return [start, end];
            }
          },
          {
            text: '最近7天',
            value() {
              const end = new Date();
              const start = new Date();
              start.setTime(start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 6)));
              return [start, end];
            }
          },
          {
            text: '最近30天',
            value() {
              const end = new Date();
              const start = new Date();
              start.setTime(start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 29)));
              return [start, end];
            }
          },
          {
            text: '本月',
            value() {
              const end = new Date();
              const start = new Date();
              start.setTime(start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), 1)));
              return [start, end];
            }
          },
          {
            text: '本年',
            value() {
              const end = new Date();
              const start = new Date();
              start.setTime(start.setTime(new Date(new Date().getFullYear(), 0, 1)));
              return [start, end];
            }
          }
        ]
      },

      dialogVisible: false,
      title: "",
      form: {
        status: 1,
        name: "",
        nickname: ""
      },
    }
  },

  created() {
    if (this.$route.query.title) {
      this.pageTitle = this.$route.query.title;
    }
    if (this.$route.query.uid) {
      this.detial.uid = parseInt(this.$route.query.uid);
    }
    if (this.$route.query.parent_uid) {
      this.detial.parent_uid = parseInt(this.$route.query.parent_uid);
    }
    this.initView();
  },
  methods: {
    subAdminscore() {
      if (this.scoreform.into == '') {
        this.$message.error('请输入积分数量！');
        return;
      }
      SystemUserScoreDetailSave(this.scoreform).then(res => {

        if (res.code == 200) {
          this.scoreDialogVisible = false;
          this.$message.success(res.msg);
          this.getData();
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    tapScoreEdit: function (row) {
      let rows = JSON.parse(JSON.stringify(row));
      this.scoreform = {
        uid: rows.uid,
        type: 1,//1:增加 -1：减少
        into: '',
      }
      this.scoreDialogVisible = true;
    },
    /**
     * 添加
     */
    tapAdd: function (sassid) {
      this.dialogVisible = true;
      this.$refs['form'].resetFields();
      this.form = this.$utils.resetFields(this.form, { status: 1 });
    },
    initView: function () {
      var upHeaders = {};
      this.upUrl = Setting.apiBaseURL + "/systemv1/upload/index";
      const token = this.$utils.util.cookies.get('system_token');
      if (token) {
        upHeaders['SYSTEM-ACC-TOKEN'] = token;
      }
      this.upHeaders = upHeaders;
      this.getData();
    },
    statusChange: function (status) {
      this.detial.status = status;
      this.detial.page = 1
      this.getData()
    },
    /**
     * 上传文件
     * @param res
     */
    onUpload: function (res) {
      if (res.code == -1) {
        Notice.error({ title: "系统提示", content: res.msg });
      } else {
        this.form.imgs.push(res.data.img);
      }
    },
    tapEdit: function (row) {
      this.form = JSON.parse(JSON.stringify(row));
      this.dialogVisible = true;
      this.title = "编辑";
    },
    //关闭
    editClose: function () {
      this.dialogVisible = false;
    },
    /**
     * 修改数据
     */
    subAdmin: function (e) {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          let loading = this.$loading("提交数据中...");
          var data = {};
          for (var i in this.form) {
            data[i] = this.form[i];
          }
          SystemUserSave(data)
            .then(res => {
              loading.close();
              if (res.code == 200) {
                this.dialogVisible = false;
                this.$Message.success("操作成功");
                this.getData();
              } else {
                this.$alert(res.msg, '系统提示');
              }
            })
            .catch(err => {
              loading.close();
              this.$alert("网络繁忙，加载失败，请稍等片刻在尝试!", '系统提示');
            });
        }
      });
    },


    //搜索栏目
    tapSeach: function () {
      this.detial.page = 1;
      this.getData();
    },
    tapUserSeach: function (uid) {
      this.detial.page = 1;
      this.detial.uid = uid;
      this.getData();
    },
    //分页
    tapPage: function (page) {
      this.detial.page = page;
      this.getData();
    },
    getData: function () {
      var data = {};
      this.detial.loading = true;
      data.page = this.detial.page;
      data.status = this.detial.status;
      data.uid = this.detial.uid;
      data.nickname = this.detial.nickname;
      data.time = this.detial.time;
      data.mobile = this.detial.mobile;
      data.parent_uid = this.detial.parent_uid;
      SystemUserList(data)
        .then(res => {
          this.detial.loading = false;
          this.detial.data = res.data.list;
          this.detial.pageSize = res.data.pageSize;
          this.detial.pageCount = res.data.pageCount;
          this.detial.waitCount = res.data.waitCount;
        })
        .catch(err => {
          this.detial.loading = false;
          this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示');
        });
    },

  }
}
</script>
<style scoped>
iframe.videoIframe {
  border: 0px;
  padding: 0px;
}

.el-dialog__body {
  padding: 0px;
}

.el-dialog__body iframe body {
  padding: 0px;
}

.muser-tab-continer {
  border: 1px solid #EEEEEE
}

a.muser-tab-a {
  display: inline-block;
  padding: 0px 28px;
  height: 42px;
  line-height: 42px;
  border-bottom: 3px solid transparent;
  font-size: 17px;
  color: #595959;
}

a.muser-tab-a.active {
  border-bottom: 3px solid #EA312B;
  color: #EA312B
}

.upimg-item {
  width: 82px;
  height: 82px;
  margin-right: 5px;
  overflow: hidden;
  float: left;
  margin-bottom: 5px;
  position: relative;
}

.upimg-item img {
  width: 82px;
  cursor: pointer;
}

.img-remove-btn {
  position: absolute;
  top: 0px;
  right: 0px;
  font-size: 24px;
}
</style>