yunshangxie-admin/src/pages/user/user_index.vue

<template>
  <t-card :bordered="false">
    <div class="form-step-container">
      <t-form
        ref="form"
        :data="formData"
        :label-width="80"
        @submit="onSubmit"
        :style="{ marginBottom: '30px' }"
      >
        <t-row>
          <t-col :span="5">
            <t-row :gutter="[16, 24]">
              <t-col :flex="2">
                <t-form-item label="姓名" name="nikename">
                  <t-input
                    v-model="formData.nikename"
                    class="form-item-content"
                    type="search"
                    placeholder="请输入姓名"
                    :style="{ minWidth: '134px' }"
                  />
                </t-form-item>
              </t-col>

              <t-col :flex="2">
                <t-form-item label="手机号" name="phone">
                  <t-input
                    v-model="formData.phone"
                    class="form-item-content"
                    placeholder="请输入手机号"
                    :style="{ minWidth: '134px' }"
                  />
                </t-form-item>
              </t-col>
            </t-row>
          </t-col>
          <t-col :span="2" class="operation-container">
            <t-button theme="primary" type="submit" :style="{ marginLeft: '8px' }"> 查询</t-button>
          </t-col>
        </t-row>
      </t-form>
      <t-table
        rowKey="index"
        :data="list"
        :columns="columns"
        :stripe="true"
        :bordered="false"
        :hover="true"
        size="large"
        table-layout="auto"
        cellEmptyContent="-"
      >
        <template #photo_image="{ row }">
          <img :src="'http://192.168.3.130/'+row.photo_image" style="width: 50px;height: 50px">
        </template>
        <template #gender="{ row }">
          {{row.gender==1?"男":"女"}}
        </template>
        <template #if_xianshi="{ row }">
          <t-tag theme="primary" v-if="row.if_xianshi==0">待审核</t-tag>
          <t-tag theme="success" v-if="row.if_xianshi==1">正式会员</t-tag>
          <t-tag theme="danger" v-if="row.if_xianshi==2">申请已被拒绝</t-tag>
        </template>
        <template #select="{ row }">
          <t-space size="24px">
            <t-button theme="default" v-if="row.if_xianshi==1" @click="openUrl(row.member_id)">详细信息</t-button>
            <t-button theme="default" v-if="row.if_xianshi==0" @click="openUrl(row.member_id)">审核</t-button>
<!--            <t-button>编辑</t-button>-->

            <t-popconfirm content="确认要删除吗？" @confirm="del(row)">
              <t-button theme="warning">删除</t-button>
            </t-popconfirm>
          </t-space>
        </template>
      </t-table>
      <div style="margin-top: 30px">
        <t-pagination
          :total="total"
          :page-size="size"
          @current-change="onCurrentChange"
          :showPageSize="false"
        ></t-pagination>
      </div>
    </div>
  </t-card>
</template>
<script lang="ts">
import store from "@/store";

export default {
  data() {
    return {
      association:{},
      list:[],
      columns:[
        { colKey: 'member_id', title: '会员ID'},
        { colKey: 'photo_image', title: '证件照'},
        { colKey: 'nikename', title: '会员姓名'},
        { colKey: 'position_name', title: '头衔'},
        { colKey: 'gender', title: '性别'},
        { colKey: 'phone', title: '手机号'},
        { colKey: 'nation', title: '民族'},
        { colKey: 'if_xianshi', title: '状态'},
        { colKey: 'select', title: '操作',width: 200},
      ],
      total:0,
      page:1,
      size:10,
      formData:{
        nikename: '',
        phone: ''
      },

    }
  },
  mounted() {
    if(typeof (this.$store.state.user.association)=='object'){
      this.association=this.$store.state.user.association;
    }else{
      this.association=JSON.parse(this.$store.state.user.association);
    }
    this.getList();
  },
  methods: {
    del(row){
        this.$request
          .post("/member/del",{member_id:row.id})
          .then( (res) => {
            console.log(res);
            if (res.code==1){
              this.$message.success(res.msg);
            }else{
              this.$message.error(res.msg);
            }
            this.getList();
          })
          .catch((e) => {
            console.log(e);
          });
    },
    onCurrentChange(d){
      this.page=d;
      this.getList();
    },
    openUrl(member_id){
      this.$router.push('/user/user_info?id='+member_id);
    },
    getList() {
      this.formData.page=this.page;
      this.formData.size=this.size;
      this.$request
        .post("/member",this.formData)
        .then( (res) => {
          console.log(res);
          this.list=res.data.ret;
          this.total=res.data.count;
        })
        .catch((e) => {
          console.log(e);
        });
    },
    onSubmit(){
      this.getList();
    },
  }
}
</script>
<style scoped lang="less">

</style>