stl/src/views/MemberView.vue

<template>
  <el-container>
    <el-header>
      <el-form :inline="true" @submit.prevent="submitHandler">
        <el-form-item label="会员名：">
          <el-input placeholder="请输入姓名" clearable v-model="queryModel.name" />
        </el-form-item>

        <el-form-item label="会员性别">
          <el-select v-model="queryModel.sex" style="width: 100px;" @change="submitHandler">
            <el-option label="全部" :value="0"></el-option>
            <el-option label="男" :value="1"></el-option>
            <el-option label="女" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="会员状态">
          <el-select v-model="queryModel.status" style="width: 100px;" @change="submitHandler">
            <el-option label="全部" :value="1"></el-option>
            <el-option label="有效" :value="2"></el-option>
            <el-option label="过期" :value="3"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="warning" native-type='submit' :icon="Search">查询</el-button>
          <el-button type="primary" :icon="Plus" @click="$router.push('/addmember')">新增</el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main>
      <el-table border :data="memberList">
        <el-table-column type="index" label="序号" width="60" align="center" :index="indexMethod"></el-table-column>
        <el-table-column prop="name" label="会员名字" width="90" align="center"></el-table-column>
        <el-table-column prop="sex" label="性别" width="60" align="center">
          <template #default="scope">
            <el-tag type="primary" v-if="scope.row.sex === 1">男</el-tag>
            <el-tag type="danger" v-else>女</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="手机号" width="120" align="center"></el-table-column>
        <el-table-column prop="joinDate" label="入会日期" width="110" align="center"></el-table-column>
        <el-table-column prop="level" label="会员等级" width="80" align="center">
          <template #default="scope">
            <el-tag type="warning" v-if="scope.row.level === '钻石'">钻石</el-tag>
            <el-tag type="success" v-else-if="scope.row.level === '金卡'">金卡</el-tag>
            <el-tag type="primary" v-else-if="scope.row.level === '银卡'">银卡</el-tag>
            <el-tag type="info" v-else>普通</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="remainCount" label="剩余次数" width="80" align="center">
          <template #default="scope">
            <span v-if="scope.row.remainCount !== null">{{ scope.row.remainCount }}次</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column prop="totalSpend" label="累计消费" width="100" align="center">
          <template #default="scope">
            <span style="color: #e6a23c;">¥{{ scope.row.totalSpend }}</span>
          </template>
        </el-table-column>

        <el-table-column label="状态" width="140">
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.expireDate === null">有效</el-tag>
            <el-tag type="info" v-else>过期:{{ scope.row.expireDate }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="头像" width="70">
          <template #default="scope">
            <el-popover v-if="scope.row.avatar" placement="right-start" :title="scope.row.name" trigger="click">
              <el-image :src="scope.row.avatar"></el-image>
              <template #reference>
                <el-button type="primary" link>查看</el-button>
              </template>
            </el-popover>
            <span v-else>暂无</span>
          </template>
        </el-table-column>

        <!-- 操作 -->
        <el-table-column label="操作" width="120" fixed="right">
          <template #default="scope">
            <el-button :icon="Delete" type="danger" size="small" v-if="scope.row.expireDate"
              @click="renewHandler(scope.row)">续费</el-button>
            <el-button :icon="Mug" type="warning" size="small" v-else @click="cancelHandler(scope.row)">注销</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer>
      <el-pagination background :total="total" layout="prev, pager, next, jumper,->,total, sizes"
        :page-sizes="[10, 20, 30, 40]" v-model:current-page="pageInfo.page" v-model:page-size="pageInfo.limit"
        @size-change="query" @current-change="query" />
    </el-footer>
  </el-container>
</template>

<script lang="ts" setup>
import { getByPage, cancel, renew } from '@/mock/member';
import { Delete, Mug, Plus, Search } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { reactive, ref, onMounted, shallowRef } from 'vue';

const queryModel = reactive({
  name: "",
  sex: 0,
  status: 1
})

const pageInfo = reactive({
  page: 1,
  limit: 10
})

const total = ref(0)
const memberList = shallowRef<any[]>([])

const query = () => {
  const response = getByPage({ ...queryModel, ...pageInfo })
  total.value = response.total
  memberList.value = response.data
}

onMounted(() => {
  query()
})

const submitHandler = () => {
  pageInfo.page = 1;
  query()
}
const indexMethod = (index: number) => {
  return (pageInfo.page - 1) * pageInfo.limit + index + 1;
}

// 注销
const cancelHandler = (member: any) => {
  ElMessageBox.confirm(`你确认要注销会员 "${member.name}" 吗?`, "警告", { type: "warning" })
    .then(() => {
      cancel(member.id)
      ElMessage({ type: 'success', message: `会员 "${member.name}" 注销成功!` })
      query()
    })
    .catch(() => { })
}

// 续费
const renewHandler = (member: any) => {
  ElMessageBox.confirm(`你确认要给会员 "${member.name}" 续费吗?`, "提示", { type: "info" })
    .then(() => {
      renew(member.id)
      ElMessage({ type: 'success', message: `会员 "${member.name}" 续费成功!` })
      query()
    })
    .catch(() => { })
}
</script>

<style scoped>
.remark {
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.el-header,
.el-footer {
  display: flex;
  align-items: center;
}
</style>