feat: 完善会员和课程管理模块

src/views/MemberView.vue

@@ -1,9 +1,164 @@
 <template>
-  <div class="page-text">这是会员列表页面</div>
+  <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="100" align="center"></el-table-column>
+        <el-table-column prop="sex" label="性别" width="80" 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="130" align="center"></el-table-column>
+
+        <el-table-column label="备注" width="200">
+          <template #default="scope">
+            <el-popover placement="right-start" :title="scope.row.name" :width="200" trigger="hover"
+              :content="scope.row.remark">
+              <template #reference>
+                <span class="remark">{{ scope.row.remark }}</span>
+              </template>
+            </el-popover>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="状态" width="200">
+          <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="80">
+          <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">
+          <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>
-.page-text {
-  line-height: 1;
+.remark {
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.el-header,
+.el-footer {
+  display: flex;
+  align-items: center;
 }
 </style>