zx

src/router/index.js

@@ -10,6 +10,14 @@ const routes = [
 			title: '首页',
 		},
 		children: [
+			{
+				path: '/homePage',
+				name: "HomePage",
+				component: () => import("@/views/HomePage/index.vue"),
+				meta: {
+					title: '首页',
+				}
+			},
 			{
 				path: '/questManage',
 				name: "QuestManage",

src/views/Home/index.vue

@@ -1,24 +0,0 @@
-<template>
-    <div>
-       首页 
-    </div>
-</template>
-
-<script>
-import { defineComponent} from 'vue'
-export default defineComponent({
-    name: 'v-home',
-    props: {
-
-    },
-    setup() {
-        return {
-
-        }
-    }
-})
-</script>
-
-<style lang="less" scoped>
-
-</style>

src/views/HomePage/index.vue

@@ -0,0 +1,120 @@
+<template>
+    <div class="home-page-content">
+       <div class="top-number">
+           <div class="top-number-item">
+               <div class="top-number-content">
+                   <div style="display: flex; justify-content: space-between">
+                       <div class="top-number-content-title">
+                           <img src="@/assets/ic_renwu_slices/ic_renwu.png" alt="" />
+                           <span style="margin-left: 12px;width: 120px;line-height: 34px">总任务数</span>
+                        </div>
+                       <div class="top-number-content-tag">
+                           <span class="average" style="padding: 10px">日均</span>
+                           <span class="average-number" style="padding: 10px">15000</span>
+                       </div>
+                   </div>
+                   <div class="top-number-total">126560</div>
+               </div>
+           </div>
+           <div class="grey-line"></div>
+           <div class="top-number-item">
+
+           </div>
+           <div class="grey-line"></div>
+           <div class="top-number-item">
+
+           </div>
+       </div>
+       <div class="grey-line-cross"></div>
+       <div class="top-number">
+           <div class="top-number-item-small">
+               <div class="top-number-content">
+                   <div style="display: flex; justify-content: space-between">
+                       <div class="top-number-content-title">
+                           <img src="@/assets/ic_bofang_slices/ic_bofang.png" alt="" />
+                           <span style="margin-left: 12px;width: 120px;line-height: 32px">总播放数</span>
+                        </div>
+                   </div>
+                   <div class="top-number-total">126560</div>
+               </div>
+           </div>
+           <div class="grey-line"></div>
+           <div class="top-number-item-small">
+               
+           </div>
+           <div class="grey-line"></div>
+           <div class="top-number-item-small">
+
+           </div>
+           <div class="top-number-item-small">
+
+           </div>
+           <div class="grey-line"></div>
+           <div class="top-number-item-small">
+
+           </div>
+           <div class="grey-line"></div>
+           <div class="top-number-item-small">
+
+           </div>
+       </div>
+       <div class="middle-charts" style="margin-top: 24px">
+           <el-tabs v-model="playNumForm.type" @tab-change="statusChange">
+                <el-tab-pane label="播放" :name="1"></el-tab-pane>
+                <el-tab-pane label="点赞" :name="2"></el-tab-pane>
+                <el-tab-pane label="收藏" :name="3"></el-tab-pane>
+                <el-tab-pane label="评论" :name="4"></el-tab-pane>
+                <el-tab-pane label="转发" :name="5"></el-tab-pane>
+                <el-tab-pane label="推荐" :name="6"></el-tab-pane>
+            </el-tabs>
+            <div style="padding: 6px">
+                <el-button size="default" text>今日</el-button>
+                <el-button size="default" text>本周</el-button>
+                <el-button size="default" text>本月</el-button>
+                <el-button size="default" text>全年</el-button>
+            </div>
+        </div>
+        <div class="bottom-table" style="margin-top: 24px">
+            <el-tabs v-model="form.status" @tab-change="statusChange">
+                <el-tab-pane label="经销商统计" :name="1"></el-tab-pane>
+                <el-tab-pane label="员工统计" :name="2"></el-tab-pane>
+            </el-tabs>
+            <div style="padding: 6px">
+                <el-button size="default" text>本周</el-button>
+                <el-button size="default" text>本月</el-button>
+                <el-button size="default" text>全年</el-button>
+            </div>
+        </div>
+        <div class="table-content">
+            test
+        </div>
+    </div>
+</template>
+
+<script>
+import {defineComponent, reactive, getCurrentInstance} from 'vue'
+export default defineComponent({
+    name: 'v-home',
+    setup() {
+        const form = reactive({
+            status: 1,
+        });
+        const playNumForm = reactive({
+            type: 1,
+        })
+        return {
+            form,playNumForm
+        }
+    },
+    mounted() {
+
+    },
+    methods: {
+        statusChange() {}
+    }
+})
+</script>
+
+<style lang="less" scoped>
+@import './title.less';
+</style>

src/views/HomePage/title.less

@@ -0,0 +1,100 @@
+.home-page-content {
+    padding: 24px;
+    background: #F9F9F9;
+    .top-number {
+        display: flex;
+        justify-content: flex-start;
+        .top-number-item {
+            width: 527px;
+            height: 152px;
+            background: #FFFFFF;
+            .top-number-content {
+                padding:  26px;
+                .top-number-content-title {
+                    font-size: 19px;
+                    font-weight: 600;
+                    color: #333333;
+                    display: flex;
+                    justify-content: center;
+                }
+                .top-number-content-tag {
+                    width: 213px;
+                    height: 35px;
+                    background: #F9F9F9;
+                    border-radius: 21px;
+                    display: flex; 
+                    justify-content: space-between
+                };
+                .top-number-total {
+                    font-size: 35px;
+                    font-family: MiSans-Bold, MiSans;
+                    font-weight: bold;
+                    color: rgba(0, 0, 0, 0.85);
+                    line-height: 85px;
+                }
+            }
+        };
+        .grey-line {
+            width: 1px;
+            height: 93px;
+            margin-top: 29.5px;
+            background: #E8E8E8;
+        }
+        .top-number-item-small {
+            width: 263.5px;
+            height: 152px;
+            background: #FFFFFF;
+            .top-number-content {
+                padding:  26px;
+                .top-number-content-title {
+                    font-size: 17px;
+                    font-weight: 400;
+                    color: #333333;
+                    display: flex;
+                    justify-content: center;
+                }
+                .top-number-total {
+                    font-size: 27px;
+                    font-family: MiSans-Bold, MiSans;
+                    font-weight: bold;
+                    color: rgba(0, 0, 0, 0.85);
+                    line-height: 90px;
+                }
+            }
+        }
+    };
+    .grey-line-cross {
+        width: 1515px;
+        margin-left: 14px;
+        height: 1px;
+        background: #E8E8E8;
+    }
+    
+}
+.average {
+    font-size: 16px;
+    font-weight: 400;
+    color: #999999;
+}
+.average-number {
+    font-size: 16px;
+    font-family: MiSans-Regular, MiSans;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.85);
+}
+.bottom-table {
+    padding: 11px 24px 0px 24px;
+    background: #FFF;
+    display: flex;
+    justify-content: space-between;
+}
+.table-content {
+    padding: 0px 24px 24px 24px;
+    background: #FFF;
+}
+.middle-charts {
+    padding: 11px 24px 0px 24px;
+    background: #FFF;
+    display: flex;
+    justify-content: space-between;
+}

src/views/SystemManage/_accountManage/index.vue

@@ -17,7 +17,7 @@
            </el-form>
        </div>
        <div class="button-tab">
-           <el-button size="default" type="primary" @click="addVisible = true">添加</el-button>
+           <el-button size="default" type="primary" @click="addVisible = true;isEditing = false;">添加</el-button>
        </div>
        <div class="area-table">
            <el-table :data="tableData.data" size="default" border :header-cell-style="{background: '#EEE'}">
@@ -33,7 +33,7 @@
                <el-table-column prop="action" label="操作" fixed="right" width="240">
                    <template #default="scope">
                        <el-link type="primary" style="margin-right: 8px" @click="goEdit(scope.row.id)">编辑</el-link>
-                       <el-link type="danger" style="margin-right: 8px" @click="handlerBan(scope.row.id,scope.row.id)">
+                       <el-link :type="scope.row.status == 1?'danger':'success'" style="margin-right: 8px" @click="handlerBan(scope.row.id,scope.row.id)">
                            {{scope.row.status == 1?'禁用':'启用'}}
                         </el-link>
                    </template>
@@ -48,7 +48,7 @@
                 :total="pagination.total"
             />
        </div>
-       <el-dialog v-model="addVisible" width="30%" title="添加用户">
+       <el-dialog v-model="addVisible" width="30%" :title="isEditing?'编辑账号':'添加账号'">
            <el-form label-width="80px" size="default">
                <el-form-item label="用户名" >
                    <el-input v-model="addForm.name" placeholder="请输入" style="width: 70%"></el-input>
@@ -104,11 +104,13 @@ export default defineComponent({
         })
         const charList = ref([])
         const addVisible = ref(false);
+        const activeId = ref(0);
+        const isEditing = ref(false);
         const { proxy } = getCurrentInstance();
         return {
             form,proxy,
             tableData,pagination,
-            addVisible, addForm,charList,
+            addVisible, addForm,charList,isEditing,activeId,
             statusFormatter, charFormatter
         }
     },
@@ -145,23 +147,42 @@ export default defineComponent({
             this.getData()
         },
         goEdit(value) {
-            
+            this.isEditing = true;
+            this.addVisible = true;
+            this.activeId = value;
         },
         addConfirm() {
             this.addForm.roleIds = this.addForm.roleIds.toString();
-            this.proxy.$post("/admin/register", this.addForm).then(res => {
-                if(res.code == 200) {
-                    this.getData();
-                    this.$message.success('添加成功');
-                    this.addVisible = false;
-                    this.addForm.name = '';
-                    this.addForm.tel = '';
-                    this.addForm.password = '';
-                    this.addForm.realName = '';
-                } else {
-                    this.$message.error(res.msg)
-                }
-            }).catch(() => {}); 
+            if(this.isEditing) {
+                let obj = Object.assign(this.addForm, {id: this.activeId})
+                this.proxy.$post("/admin/edit", obj).then(res => {
+                    if(res.code == 200) {
+                        this.getData();
+                        this.$message.success('修改成功');
+                        this.addVisible = false;
+                        this.addForm.name = '';
+                        this.addForm.tel = '';
+                        this.addForm.password = '';
+                        this.addForm.realName = '';
+                    } else {
+                        this.$message.error(res.msg)
+                    }
+                }).catch(() => {});
+            } else {
+                this.proxy.$post("/admin/register", this.addForm).then(res => {
+                    if(res.code == 200) {
+                        this.getData();
+                        this.$message.success('添加成功');
+                        this.addVisible = false;
+                        this.addForm.name = '';
+                        this.addForm.tel = '';
+                        this.addForm.password = '';
+                        this.addForm.realName = '';
+                    } else {
+                        this.$message.error(res.msg)
+                    }
+                }).catch(() => {}); 
+            }
         },
         //禁用
         handlerBan(id,status) {