|
|
@@ -1,13 +1,348 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
-user
|
|
|
+ <div class="user-page">
|
|
|
+ <div class="user-title">
|
|
|
+ <div class="title-l">
|
|
|
+ <el-icon size="24" class="user-icon" color="#000000"><UserFilled /></el-icon>
|
|
|
+ <span class="user-name">用户管理</span>
|
|
|
+ <span class="title-line"></span>
|
|
|
+ <span class="title-info">共 258 个用户，更新日期于 2025.06.26</span>
|
|
|
+ </div>
|
|
|
+ <div class="title-r">
|
|
|
+ <el-input
|
|
|
+ size="large"
|
|
|
+ v-model="searchVal"
|
|
|
+ style="width: 200px"
|
|
|
+ placeholder="搜索用户/手机号"
|
|
|
+ :prefix-icon="Search"
|
|
|
+ />
|
|
|
+ <el-button class="ml-10" size="large" type="primary">上传订单</el-button>
|
|
|
+ <el-button size="large" type="primary" plain>新建分组</el-button>
|
|
|
+ <el-button size="large" type="primary" plain>批量发送</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="user-btn-group">
|
|
|
+ <div class="btn-l">
|
|
|
+ <el-button size="large" type="primary">优质用户</el-button>
|
|
|
+ <el-button size="large" type="primary" plain>中等用户</el-button>
|
|
|
+ <el-button size="large" type="primary" plain>普通用户</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="select-group">
|
|
|
+ <el-select
|
|
|
+ v-model="cityVal"
|
|
|
+ placeholder="选择省份"
|
|
|
+ size="large"
|
|
|
+ class="ml-10"
|
|
|
+ style="width: 100px"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in cityOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ <el-select
|
|
|
+ v-model="groupVal"
|
|
|
+ placeholder="选择分组"
|
|
|
+ size="large"
|
|
|
+ class="ml-10"
|
|
|
+ style="width: 120px"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in groupOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ <el-select
|
|
|
+ v-model="levelVal"
|
|
|
+ placeholder="守护等级"
|
|
|
+ size="large"
|
|
|
+ class="ml-10"
|
|
|
+ style="width: 120px"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in levelOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="table-wrap">
|
|
|
+ <el-table :data="tableData" style="width: 100%" @selection-change="handleTableSelect">
|
|
|
+ <el-table-column type="selection" width="55" />
|
|
|
+ <el-table-column property="code" label="用户编码" />
|
|
|
+ <el-table-column property="name" label="用户昵称">
|
|
|
+ <template #default="scope">
|
|
|
+ <div class="user-info">
|
|
|
+ <el-avatar :size="24" src="https://birdseye-img-ali-cdn.sysuimars.com/birdseye-look-mini/91754/1750583672619.png" />
|
|
|
+ <span class="ml-10">{{ scope.row.name }}</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column property="tel" label="联系电话" />
|
|
|
+ <el-table-column
|
|
|
+ property="address"
|
|
|
+ label="具体住址"
|
|
|
+ width="240"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column property="count" label="订单量" />
|
|
|
+ <el-table-column label="守护等级">
|
|
|
+ <template #default="scope">
|
|
|
+ <span :class="['level-tag', 'level-'+scope.row.level]">{{ levelObj[scope.row.level] }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column property="treeCode" label="守护树编号" />
|
|
|
+ <el-table-column label="状态">
|
|
|
+ <template #default="scope">
|
|
|
+ <span :class="['status-text', 'status-'+scope.row.status]">{{ statusObj[scope.row.status] }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="日期" sortable>
|
|
|
+ <template #default="scope">{{ scope.row.date }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" width="260">
|
|
|
+ <template #default="scope">
|
|
|
+ <div class="action-btn">
|
|
|
+ <el-button type="primary" @click="handleMsg(scope.row)"><el-icon class="el-icon--right"><Comment /></el-icon>发消息</el-button>
|
|
|
+ <el-button type="primary" @click="handleMsg(scope.row)"><el-icon><Briefcase /></el-icon>发礼物</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <div class="put-btn" v-if="selectedRows.length">
|
|
|
+ <div class="btn-l">推送消息</div>
|
|
|
+ <div class="btn-r">推送优惠券</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
+import { ref } from 'vue';
|
|
|
+import { Search } from '@element-plus/icons-vue'
|
|
|
|
|
|
+const searchVal = ref(null)
|
|
|
+
|
|
|
+const levelObj = {
|
|
|
+ 0: "平民",
|
|
|
+ 1: "青铜守护",
|
|
|
+ 2: "白银守护",
|
|
|
+ 3: "赤金守护",
|
|
|
+ 4: "星勋守护",
|
|
|
+}
|
|
|
+
|
|
|
+const statusObj = {
|
|
|
+ 0: "未授权",
|
|
|
+ 1: "待登录",
|
|
|
+ 2: "待激活",
|
|
|
+}
|
|
|
+
|
|
|
+const tableData = ref([
|
|
|
+ {
|
|
|
+ code: "c2547475411",
|
|
|
+ name: "张三三",
|
|
|
+ tel: "13969685874",
|
|
|
+ address: "湖北省武汉市智慧谷A3座1104",
|
|
|
+ count: "3",
|
|
|
+ treeCode: "tree857874574",
|
|
|
+ level: 1,
|
|
|
+ status: 1,
|
|
|
+ date: "2025-07-04",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ code: "c388547411",
|
|
|
+ name: "李四四",
|
|
|
+ tel: "159856874",
|
|
|
+ address: "湖北省武汉市江夏区山川街道光束庆南城12栋1258室",
|
|
|
+ count: "3",
|
|
|
+ treeCode: "tree857874574",
|
|
|
+ level: 0,
|
|
|
+ status: 0,
|
|
|
+ date: "2025-07-04",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ code: "c2547475411",
|
|
|
+ name: "张三三",
|
|
|
+ tel: "13969685874",
|
|
|
+ address: "湖北省武汉市智慧谷A3座1104",
|
|
|
+ count: "3",
|
|
|
+ treeCode: "tree857874574",
|
|
|
+ level: 2,
|
|
|
+ status: 2,
|
|
|
+ date: "2025-07-04",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ code: "c2547475411",
|
|
|
+ name: "张三三",
|
|
|
+ tel: "13969685874",
|
|
|
+ address: "湖北省武汉市智慧谷A3座1104",
|
|
|
+ count: "1",
|
|
|
+ treeCode: "tree857874574",
|
|
|
+ level: 3,
|
|
|
+ status: 1,
|
|
|
+ date: "2025-07-04",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ code: "c2547475411",
|
|
|
+ name: "张三三",
|
|
|
+ tel: "13969685874",
|
|
|
+ address: "湖北省武汉市智慧谷A3座1104",
|
|
|
+ count: "3",
|
|
|
+ treeCode: "tree857874574",
|
|
|
+ level: 4,
|
|
|
+ status: 2,
|
|
|
+ date: "2025-07-04",
|
|
|
+ },
|
|
|
+]);
|
|
|
+
|
|
|
+const selectedRows = ref([])
|
|
|
+function handleTableSelect(selection) {
|
|
|
+ selectedRows.value = selection
|
|
|
+}
|
|
|
+function handleMsg(row) {
|
|
|
+ console.log('row');
|
|
|
+}
|
|
|
+
|
|
|
+const cityVal = ref("广东省")
|
|
|
+const cityOptions = ref([
|
|
|
+ {label: "广东省", value: "广东省"},
|
|
|
+ {label: "湖北省", value: "湖北省"},
|
|
|
+])
|
|
|
+
|
|
|
+const groupVal = ref("分组101")
|
|
|
+const groupOptions = ref([
|
|
|
+ {label: "分组101", value: "分组101"},
|
|
|
+ {label: "分组102", value: "分组102"},
|
|
|
+])
|
|
|
+
|
|
|
+const levelVal = ref("")
|
|
|
+const levelOptions = ref([
|
|
|
+ {label: "平民", value: "平民"},
|
|
|
+ {label: "青铜守护", value: "青铜守护"},
|
|
|
+ {label: "白银守护", value: "白银守护"},
|
|
|
+])
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-
|
|
|
-</style>
|
|
|
+.user-page {
|
|
|
+ padding: 41px 20px 0 20px;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .user-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .title-l {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .user-name {
|
|
|
+ font-family: "PangMenZhengDao";
|
|
|
+ padding-left: 10px;
|
|
|
+ font-size: 24px;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ .title-line {
|
|
|
+ display: inline-block;
|
|
|
+ width: 1px;
|
|
|
+ height: 12px;
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
+ margin: 0 15px;
|
|
|
+ }
|
|
|
+ .title-info {
|
|
|
+ color: rgba(0, 0, 0, 0.5);
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .title-r {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ml-10 {
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ .user-btn-group {
|
|
|
+ padding: 24px 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ .table-wrap {
|
|
|
+ flex: 1;
|
|
|
+ .action-btn {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .user-info {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .level-tag {
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 30px;
|
|
|
+ padding: 0 10px;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+ .level-0 {
|
|
|
+ color: #7D7D7D;
|
|
|
+ background: rgba(125, 125, 125, 0.2);
|
|
|
+ }
|
|
|
+ .level-1 {
|
|
|
+ color: #D88C4A;
|
|
|
+ background: rgba(200, 156, 117, 0.2);
|
|
|
+ }
|
|
|
+ .level-2 {
|
|
|
+ color: #6293C1;
|
|
|
+ background: rgba(115, 193, 255, 0.2);
|
|
|
+ }
|
|
|
+ .level-3 {
|
|
|
+ color: #B18C0D;
|
|
|
+ background: rgba(243, 191, 48, 0.2);
|
|
|
+ }
|
|
|
+ .level-4 {
|
|
|
+ color: #BD6FE8;
|
|
|
+ background: rgba(236, 125, 255, 0.2);
|
|
|
+ }
|
|
|
+ .status-text {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #7D7D7D;
|
|
|
+ }
|
|
|
+ .status-1 {
|
|
|
+ color: #FFAA00;
|
|
|
+ }
|
|
|
+ .status-2 {
|
|
|
+ color: #2199F8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .put-btn {
|
|
|
+ padding: 20px 0 26px 0;
|
|
|
+ border-top: 1px solid rgba(0, 0, 0, 0.2);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ .btn-l {
|
|
|
+ padding: 18px 44px;
|
|
|
+ background: #F0AC37;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .btn-r {
|
|
|
+ margin-left: 30px;
|
|
|
+ padding: 18px 36px;
|
|
|
+ background: #2199F8;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
