mtb-vue
<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <noscript> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
import Vue from 'vue' import axios from 'axios' import VueAxios from 'vue-axios' import {getToken} from "@/plugins/cookie" import router from '../router/index' import store from '../store/index' import {Message} from "element-ui" Vue.use(VueAxios, axios) // 设置默认值 axios.defaults.baseURL = 'http://127.0.0.1:8005/api/'; // axios.defaults.baseURL = 'http://127.0.0.1:8000/api/'; // axios.defaults.baseURL = 'http://124.222.193.204:8000/api/'; // axios.defaults.headers.common['Authorization'] = getToken(); // 只在页面刷新时才执行 // axios.defaults.headers.post['Content-Type'] = 'application/json'; // axios.defaults.headers.put['Content-Type'] = 'application/json'; // 请求拦截器，axios发送请求时候，每次请求 axios.interceptors.request.use(function (config) { // 在发送请求之前做些什么 const token = getToken(); if (token) { // 表示用户已登录 config.headers.common['Authorization'] = token; } return config; }); // 响应拦截器 axios.interceptors.response.use(function (response) { // API请求执行成功，响应状态码200，自动执行 if (response.data.code === "2000") { // store中的logout方法 store.commit("logout"); // 重定向登录页面 [Login,] // router.push({name:"Login"}); router.replace({name: "Login"}); // 页面提示 Message.error("认证过期，请重新登录..."); return Promise.reject(); // 下一个相应拦截器的第二个函数 } return response; }, function (error) { // API请求执行失败，响应状态码400/500，自动执行 if (error.response.status === 401) { // store中的logout方法 store.commit("logout"); // 重定向登录页面 [Login,] // router.push({name:"Login"}); router.replace({name: "Login"}); Message.error("认证过期，请重新登录..."); // return } return Promise.reject(error); // 下一个相应拦截器的第二个函数 });
import Vue from 'vue' import VueCookie from 'vue-cookie' Vue.use(VueCookie) export const getToken = () => { return Vue.cookie.get("token") } export const getUserName = () => { return Vue.cookie.get("username") } export const setUserToken = (username, token) => { Vue.cookie.set('username', username, {expires: '7D'}); Vue.cookie.set('token', token, {expires: '7D'}); } export const clearUserToken = () => { Vue.cookie.delete('username'); Vue.cookie.delete('token'); }
import Vue from 'vue' import Element from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(Element)
import Vue from 'vue' import VueRouter from 'vue-router' import {getToken} from '@/plugins/cookie' Vue.use(VueRouter) const routes = [ { path: '/login', name: 'Login', component: () => import('../views/Login.vue') }, { path: '/', name: 'Layout', component: () => import('../views/Layout.vue'), children: [ { path: "", redirect: "task", }, { path: 'task', name: 'Task', component: () => import('../views/task/TaskLayout.vue'), children: [ { path: "/", redirect: "activity" }, { path: "activity", name: 'Activity', component: () => import('../views/task/Activity.vue'), children: [ { path: "/", redirect: "list" }, { path: "list", name: 'ActivityList', component: () => import('../views/task/ActivityList.vue'), }, { path: "create", name: 'ActivityCreate', component: () => import('../views/task/ActivityCreate.vue'), } ] }, { path: "promo", name: 'Promo', component: () => import('../views/task/Promo.vue'), }, { path: "stat", name: 'Stat', component: () => import('../views/task/Stat.vue'), }, { path: "fans", name: 'Fans', component: () => import('../views/task/Fans.vue'), }, ] }, { path: 'msg', name: 'Msg', component: () => import('../views/msg/MsgLayout.vue'), children: [ { path: "/", redirect: "push" }, { path: "push", name: 'Push', component: () => import('../views/msg/Push.vue'), }, { path: "sop", name: 'Sop', component: () => import('../views/msg/Sop.vue'), }, ] }, { path: 'auth', name: 'Auth', component: () => import('../views/auth/Auth.vue'), } ] }, { path: '/*', component: () => import('../views/NotFound.vue') } ] const router = new VueRouter({ routes, mode: "history" }) // router.beforeEach((to, from, next) => { // let token = getToken(); // // // 如果已登录，则可以继续访问目标地址 // if (token) { // next(); // return; // } // // 未登录，访问登录页面 // if (to.name === "Login") { // next(); // return; // } // // // 未登录，跳转登录页面 // next({name: 'Login'}); // }) export default router
import Vue from 'vue' import Vuex from 'vuex' import {getUserName, getToken, setUserToken,clearUserToken} from "@/plugins/cookie" Vue.use(Vuex) export default new Vuex.Store({ state: { username: getUserName(), token: getToken(), }, mutations: { login: function (state, {username, token}) { state.username = username; state.token = token; // Vue.cookie.set("username",username); // Vue.cookie.set("token",token); setUserToken(username, token); }, logout:function (state) { state.username = "" state.token = "" clearUserToken() } }, actions: {}, modules: {} })
<template>
<div>
<el-card class="box-card flex-row-center" shadow="hover">
<div class="flex-col-center">
<i class="el-icon-circle-plus-outline icon"></i>
<div class="text">添加公众号</div>
</div>
</el-card>
<el-card class="box-card box-item" shadow="hover" :body-style="{width:'100%',padding:'20px'}">
<div class="item flex-row-center">
<el-avatar size="large"
src="http://wx.qlogo.cn/mmopen/t6cpMpYeAkhIjyBs9Y5nD6g8SPSfXbVRY2icK7MELDVWs0jPuQQXga8YCnVY6z8U4DI4ZMfvTqTww6FQeQNc4cfyDTHyr4wMm/0"></el-avatar>
</div>
<div class="item flex-row-center">路飞小课</div>
<div class="item flex-row-center">
<div class="flex-row-between" style="width: 100px;font-size: 12px;">
<div style="color: gray">服务号</div>
<div style="color: #0c8eff;">已认证</div>
</div>
</div>
<el-divider></el-divider>
<div class="item small flex-row-between">
<div><i class="el-icon-position"></i> 任务包</div>
<div class="date">2020-11-11到期</div>
</div>
<div class="item small flex-row-between">
<div><i class="el-icon-bell"></i> 消息宝</div>
<div class="date">2020-11-11到期</div>
</div>
</el-card>
<el-card class="box-card box-item" shadow="hover" :body-style="{width:'100%',padding:'20px'}">
<div class="item flex-row-center">
<el-avatar size="large"
src="http://wx.qlogo.cn/mmopen/t6cpMpYeAkhIjyBs9Y5nD6g8SPSfXbVRY2icK7MELDVWs0jPuQQXga8YCnVY6z8U4DI4ZMfvTqTww6FQeQNc4cfyDTHyr4wMm/0"></el-avatar>
</div>
<div class="item flex-row-center">路飞小课</div>
<div class="item flex-row-center">
<div class="flex-row-between" style="width: 100px;font-size: 12px;">
<div style="color: gray">服务号</div>
<div style="color: #0c8eff;">已认证</div>
</div>
</div>
<el-divider></el-divider>
<div class="item small flex-row-between">
<div><i class="el-icon-position"></i> 任务包</div>
<div class="date">2020-11-11到期</div>
</div>
<div class="item small flex-row-between">
<div><i class="el-icon-bell"></i> 消息宝</div>
<div class="date">2020-11-11到期</div>
</div>
</el-card>
<el-card class="box-card box-item" shadow="hover" :body-style="{width:'100%',padding:'20px'}">
<div class="item flex-row-center">
<el-avatar size="large"
src="http://wx.qlogo.cn/mmopen/t6cpMpYeAkhIjyBs9Y5nD6g8SPSfXbVRY2icK7MELDVWs0jPuQQXga8YCnVY6z8U4DI4ZMfvTqTww6FQeQNc4cfyDTHyr4wMm/0"></el-avatar>
</div>
<div class="item flex-row-center">路飞小课</div>
<div class="item flex-row-center">
<div class="flex-row-between" style="width: 100px;font-size: 12px;">
<div style="color: gray">服务号</div>
<div style="color: #0c8eff;">已认证</div>
</div>
</div>
<el-divider></el-divider>
<div class="item small flex-row-between">
<div><i class="el-icon-position"></i> 任务包</div>
<div class="date">2020-11-11到期</div>
</div>
<div class="item small flex-row-between">
<div><i class="el-icon-bell"></i> 消息宝</div>
<div class="date">2020-11-11到期</div>
</div>
</el-card>
<el-card class="box-card box-item" shadow="hover" :body-style="{width:'100%',padding:'20px'}">
<div class="item flex-row-center">
<el-avatar size="large"
src="http://wx.qlogo.cn/mmopen/t6cpMpYeAkhIjyBs9Y5nD6g8SPSfXbVRY2icK7MELDVWs0jPuQQXga8YCnVY6z8U4DI4ZMfvTqTww6FQeQNc4cfyDTHyr4wMm/0"></el-avatar>
</div>
<div class="item flex-row-center">路飞小课</div>
<div class="item flex-row-center">
<div class="flex-row-between" style="width: 100px;font-size: 12px;">
<div style="color: gray">服务号</div>
<div style="color: #0c8eff;">已认证</div>
</div>
</div>
<el-divider></el-divider>
<div class="item small flex-row-between">
<div><i class="el-icon-position"></i> 任务包</div>
<div class="date">2020-11-11到期</div>
</div>
<div class="item small flex-row-between">
<div><i class="el-icon-bell"></i> 消息宝</div>
<div class="date">2020-11-11到期</div>
</div>
</el-card>
<el-card class="box-card box-item" shadow="hover" :body-style="{width:'100%',padding:'20px'}">
<div class="item flex-row-center">
<el-avatar size="large"
src="http://wx.qlogo.cn/mmopen/t6cpMpYeAkhIjyBs9Y5nD6g8SPSfXbVRY2icK7MELDVWs0jPuQQXga8YCnVY6z8U4DI4ZMfvTqTww6FQeQNc4cfyDTHyr4wMm/0"></el-avatar>
</div>
<div class="item flex-row-center">路飞小课</div>
<div class="item flex-row-center">
<div class="flex-row-between" style="width: 100px;font-size: 12px;">
<div style="color: gray">服务号</div>
<div style="color: #0c8eff;">已认证</div>
</div>
</div>
<el-divider></el-divider>
<div class="item small flex-row-between">
<div><i class="el-icon-position"></i> 任务包</div>
<div class="date">2020-11-11到期</div>
</div>
<div class="item small flex-row-between">
<div><i class="el-icon-bell"></i> 消息宝</div>
<div class="date">2020-11-11到期</div>
</div>
</el-card>
</div>
</template>
<script>
export default {
name: 'Auth',
created: function () {
}
}
</script>
<style scoped>
.box-card {
width: 240px;
height: 260px;
float: left;
margin: 20px;
}
.box-item {
display: flex;
}
.box-item .item {
padding: 5px 0;
}
.box-item .small {
font-size: 14px;
padding: 10px 0;
color: #646464;
}
.box-item .date {
font-size: 13px;
color: #908e8e;
}
.flex-row-center {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.flex-row-between {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.flex-col-center {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box-card .icon {
font-size: 50px;
}
.box-card .text {
font-size: 14px;
margin-top: 8px;
}
.el-divider--horizontal {
margin: 18px 0;
}
</style>
<template>
<div>
<el-menu class="sub-menu" mode="horizontal" :default-active="subActiveRouter" router>
<el-menu-item index="Push" :route="{name:'Push'}"><i class="el-icon-coin"></i>消息推送</el-menu-item>
<el-menu-item index="Sop" :route="{name:'Sop'}"><i class="el-icon-data-analysis"></i>SOP计划</el-menu-item>
</el-menu>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "MsgLayout",
data() {
return {
subActiveRouter: ""
}
},
mounted() {
// 获取当前的所有路由
this.subActiveRouter = this.$route.matched[2].name;
}
}
</script>
<style scoped>
.sub-menu .el-menu-item {
line-height: 40px;
height: 40px;
vertical-align: middle;
font-size: 13px;
}
.sub-menu .el-menu-item i {
margin-top: -3px;
}
</style>
<template>
<div style="padding: 20px;">
<el-card class="box-card">
<el-form :inline="true" class="demo-form-inline" size="small" :model="searchForm" ref="searchForm">
<el-form-item label="标题" prop="title">
<el-input placeholder="标题" v-model="searchForm.title"></el-input>
</el-form-item>
<el-form-item label="类型" prop="category">
<el-select placeholder="类型" v-model="searchForm.category">
<el-option v-for="item in categoryOptions" :key="item.value" :label="item.label"
:value="item.value"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="推送时间" prop="dateValue">
<el-date-picker
v-model="searchForm.dateValue"
type="datetimerange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="['12:00:00']">
</el-date-picker>
</el-form-item>
</el-form>
<el-row type="flex" justify="center">
<el-button size="small" type="primary" @click="clickSearch">筛选</el-button>
<el-button size="small" @click="resetSearchForm('searchForm')">重置</el-button>
</el-row>
</el-card>
<el-card class="box-card" style="margin-top: 25px;">
<div slot="header" class="clearfix">
<span><i class="el-icon-s-grid"></i> 消息列表</span>
<el-button style="float: right;" type="primary" size="small" @click="clickAddDialog">
<i class="el-icon-circle-plus-outline"></i> 操作按钮
</el-button>
</div>
<div>
<el-table :data="tableData" border style="width: 100%">
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
<el-popconfirm title="这是一段内容确定删除吗？" @confirm="confirmDelete(scope.row)">
<el-button slot="reference" type="text" size="small">删除</el-button>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
</div>
<el-row type="flex" justify="end" style="margin-top: 30px;">
<el-pagination
:total="page.totalCount"
:page-size="page.perPageSize"
background
layout="prev, pager, next,jumper"
@current-change="handleCurrentChange"
>
</el-pagination>
</el-row>
</el-card>
<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
<el-form label-position="left" label-width="80px" :model="addForm">
<el-form-item label="活动名称" prop="x1">
<el-input autocomplete="off" v-model="addForm.x1"></el-input>
</el-form-item>
<el-form-item label="活动区域" prop="x2">
<el-select placeholder="请选择活动区域" v-model="addForm.x2">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
</div>
</el-dialog>
<el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
name: "Push",
data() {
return {
searchForm: {
title: "",
category: "",
dateValue: "",
},
categoryOptions: [
{
value: '1',
label: '黄金糕'
}, {
value: '2',
label: '双皮奶'
}, {
value: '3',
label: '蚵仔煎'
}, {
value: '4',
label: '龙须面'
}, {
value: '5',
label: '北京烤鸭'
}],
tableData: [
{
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1517 弄',
zip: 200333
}, {
date: '2016-05-01',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1519 弄',
zip: 200333
}, {
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1516 弄',
zip: 200333
}],
page: {
totalCount: 10000,
perPageSize: 20
},
dialogFormVisible: false,
addForm: {
x1: "",
x2: ""
},
dialogVisible:false
}
},
methods: {
clickSearch() {
console.log(this.searchForm);
},
resetSearchForm(formName) {
this.$refs[formName].resetFields();
},
handleClick(row) {
console.log(row);
this.dialogVisible = true;
},
confirmDelete(row) {
console.log("确定删除", row);
},
handleCurrentChange(page) {
console.log("想要查看：", page);
},
clickAddDialog() {
this.dialogFormVisible = true;
},
}
}
</script>
<style scoped>
</style>
<template>
<div style="padding: 20px;">
<el-card class="box-card">
<el-form :inline="true" class="demo-form-inline" size="small" :model="searchForm" ref="searchForm">
<el-form-item label="标题" prop="title">
<el-input placeholder="标题" v-model="searchForm.title"></el-input>
</el-form-item>
<el-form-item label="类型" prop="category">
<el-select placeholder="类型" v-model="searchForm.category">
<el-option v-for="item in categoryOptions" :key="item.value" :label="item.label"
:value="item.value"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button size="small" type="primary" @click="clickSearch">筛选</el-button>
<el-button size="small" @click="resetSearchForm('searchForm')">重置</el-button>
</el-form-item>
</el-form>
</el-card>
<el-card class="box-card" style="margin-top: 25px;">
<div slot="header" class="clearfix">
<span><i class="el-icon-s-grid"></i> 消息列表</span>
<el-button style="float: right;" type="primary" size="small" @click="clickAddDialog">
<i class="el-icon-circle-plus-outline"></i> 操作按钮
</el-button>
</div>
<div>
<el-table :data="tableData" border style="width: 100%">
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
<el-table-column label="状态">
<template slot-scope="scope">
<el-tag v-if="scope.row.status === 1" type="success">成功</el-tag>
<el-tag v-else type="danger">失败</el-tag>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
<el-popconfirm title="这是一段内容确定删除吗？" @confirm="confirmDelete(scope.row)">
<el-button slot="reference" type="text" size="small">删除</el-button>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
</div>
<el-row type="flex" justify="end" style="margin-top: 30px;">
<el-pagination
:total="page.totalCount"
:page-size="page.perPageSize"
background
layout="prev, pager, next,jumper"
@current-change="handleCurrentChange"
>
</el-pagination>
</el-row>
</el-card>
<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
<el-form label-position="left" label-width="80px" :model="addForm">
<el-form-item label="活动名称" prop="x1">
<el-input autocomplete="off" v-model="addForm.x1"></el-input>
</el-form-item>
<el-form-item label="活动区域" prop="x2">
<el-select placeholder="请选择活动区域" v-model="addForm.x2">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
</div>
</el-dialog>
<el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
name: "Sop",
data() {
return {
searchForm: {
title: "",
category: ""
},
categoryOptions: [
{
value: '1',
label: '黄金糕'
}, {
value: '2',
label: '双皮奶'
}, {
value: '3',
label: '蚵仔煎'
}, {
value: '4',
label: '龙须面'
}, {
value: '5',
label: '北京烤鸭'
}],
tableData: [
{
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333,
status:1
}, {
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1517 弄',
zip: 200333,
status:2
}, {
date: '2016-05-01',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1519 弄',
zip: 200333,
status:1
}, {
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1516 弄',
zip: 200333,
status:1
}],
page: {
totalCount: 10000,
perPageSize: 20
},
dialogFormVisible: false,
addForm: {
x1: "",
x2: ""
},
dialogVisible: false
}
},
methods: {
clickSearch() {
console.log(this.searchForm);
},
resetSearchForm(formName) {
this.$refs[formName].resetFields();
},
handleClick(row) {
console.log(row);
this.dialogVisible = true;
},
confirmDelete(row) {
console.log("确定删除", row);
},
handleCurrentChange(page) {
console.log("想要查看：", page);
},
clickAddDialog() {
this.dialogFormVisible = true;
},
}
}
</script>
<style scoped>
</style>
<template>
<div>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "Activity"
}
</script>
<style scoped>
</style>
<template>
<div style="padding: 20px;">
<el-row type="flex" justify="end">
<el-button type="success" size="small"><i class="el-icon-setting"></i> 保存</el-button>
</el-row>
<el-tabs tab-position="left" v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="活动设置" name="tab1">活动设置</el-tab-pane>
<el-tab-pane label="参与公众号" name="tab2">参与公众号</el-tab-pane>
<el-tab-pane label="奖励设置" name="tab3">奖励设置</el-tab-pane>
<el-tab-pane label="海报设置" name="tab4">海报设置</el-tab-pane>
<el-tab-pane label="进度消息" name="tab5">进度消息</el-tab-pane>
<el-tab-pane label="其他消息" name="tab6">其他消息</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
export default {
name: "ActivityCreate",
data() {
return {
activeName: "tab2"
}
},
created() {
const loading = this.$loading({
lock: true,
text: '努力加载中',
spinner: 'el-icon-loading'
});
setTimeout(() => {
loading.close();
}, 2000);
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
}
}
}
</script>
<style scoped>
</style>
<template>
<div style="padding: 20px">
<router-link :to="{name:'ActivityCreate'}">
<el-button type="primary" size="small"><i class="el-icon-circle-plus-outline"></i> 新建活动</el-button>
</router-link>
<el-row style="margin-top: 25px;">
<el-form :inline="true" class="demo-form-inline" size="small" :model="searchForm" ref="searchForm">
<el-form-item label="活动状态" prop="category">
<el-select placeholder="全部状态" v-model="searchForm.category">
<el-option v-for="item in categoryOptions" :key="item.value" :label="item.label"
:value="item.value"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="公众号" prop="category">
<el-select placeholder="全部公众号" v-model="searchForm.category">
<el-option v-for="item in categoryOptions" :key="item.value" :label="item.label"
:value="item.value"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="活动名称" prop="title">
<el-input placeholder="活动名称" v-model="searchForm.title"></el-input>
</el-form-item>
<el-form-item>
<el-button size="small" type="primary">筛选</el-button>
<el-button size="small">重置</el-button>
</el-form-item>
</el-form>
</el-row>
<el-row :gutter="20">
<el-col style="width: 240px;margin-bottom: 20px;" v-for="(o, index) in 12" :key="o">
<el-card :body-style="{ padding: '0px' }">
<img style="height: 160px;width: 100%;"
src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
class="image">
<div style="padding: 14px;">
<span>好吃的汉堡{{index}}</span>
<el-row style="margin-top: 8px;">
<el-button icon="el-icon-search" size="mini" circle></el-button>
<el-button icon="el-icon-edit" size="mini" circle></el-button>
<el-button icon="el-icon-check" size="mini" circle></el-button>
<el-button icon="el-icon-message" size="mini" circle></el-button>
</el-row>
</div>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: "ActivityList",
data() {
return {
searchForm: {
title: "",
category: ""
},
categoryOptions: [
{
value: '1',
label: '黄金糕'
}, {
value: '2',
label: '双皮奶'
}, {
value: '3',
label: '蚵仔煎'
}, {
value: '4',
label: '龙须面'
}, {
value: '5',
label: '北京烤鸭'
}],
currentDate: new Date()
}
},
created() {
this.axios.get("/base/test/").then(res => {
console.log("请求成功", res);
}).catch(reason => {
console.log('请求失败', reason);
return reason;
})
}
}
</script>
<style scoped>
.image {
width: 100%;
display: block;
}
</style>
<template>
<div style="padding: 20px;">
<el-card class="box-card">
<el-form :inline="true" class="demo-form-inline" size="small" :model="searchForm" ref="searchForm">
<el-form-item label="当前任务" prop="category" style="margin-bottom: 0">
<el-select placeholder="全部任务" v-model="searchForm.task" @change="changeTask">
<el-option v-for="item in categoryOptions" :key="item.value" :label="item.label"
:value="item.value"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="推广码" prop="category" style="margin-bottom: 0">
<el-select placeholder="全部渠道" v-model="searchForm.category">
<el-option v-for="item in categoryOptions" :key="item.value" :label="item.label"
:value="item.value"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-form>
</el-card>
<!-- <el-button @click="selectedOne">点我</el-button>-->
<el-row style="margin-top: 30px;">
<el-row justify="end" type="flex" style="float: right;z-index: 1">
<el-input
style="margin-right: 10px;"
size="small"
placeholder="请输入内容"
suffix-icon="el-icon-search"
v-model="keySearch">
</el-input>
<el-button size="small" type="primary">导出</el-button>
<el-button size="small" type="primary" @click="addToBlackList">移入黑名单</el-button>
<el-button size="small" type="primary">移出黑名单</el-button>
</el-row>
<el-tabs v-model="activeName" type="card">
<el-tab-pane label="参与用户" name="first">
<el-table ref="myTable" :data="tableData" style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
<el-table-column label="状态">
<template slot-scope="scope">
<el-tag v-if="scope.row.status === 1" type="success">成功</el-tag>
<el-tag v-else type="danger">失败</el-tag>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
<el-popconfirm title="这是一段内容确定删除吗？" @confirm="confirmDelete(scope.row)">
<el-button slot="reference" type="text" size="small">删除</el-button>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<el-row type="flex" justify="end" style="margin-top: 30px;">
<el-pagination
:total="page.totalCount"
:page-size="page.perPageSize"
background
layout="prev, pager, next,jumper"
@current-change="handleCurrentChange"
>
</el-pagination>
</el-row>
</el-tab-pane>
<el-tab-pane label="黑名单" name="second">
<el-table :data="tableData" border style="width: 100%">
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
<el-table-column label="状态">
<template slot-scope="scope">
<el-tag v-if="scope.row.status === 1" type="success">成功</el-tag>
<el-tag v-else type="danger">失败</el-tag>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
<el-popconfirm title="这是一段内容确定删除吗？" @confirm="confirmDelete(scope.row)">
<el-button slot="reference" type="text" size="small">删除</el-button>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<el-row type="flex" justify="end" style="margin-top: 30px;">
<el-pagination
:total="page.totalCount"
:page-size="page.perPageSize"
background
layout="prev, pager, next,jumper"
@current-change="handleCurrentChange"
>
</el-pagination>
</el-row>
</el-tab-pane>
</el-tabs>
</el-row>
<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
<el-form label-position="left" label-width="80px" :model="addForm">
<el-form-item label="活动名称" prop="x1">
<el-input autocomplete="off" v-model="addForm.x1"></el-input>
</el-form-item>
<el-form-item label="活动区域" prop="x2">
<el-select placeholder="请选择活动区域" v-model="addForm.x2">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
</div>
</el-dialog>
<el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
name: "Fans",
data() {
return {
keySearch: "",
activeName: "first",
searchForm: {
task: "3",
category: ""
},
categoryOptions: [
{
value: '11',
label: '黄金糕'
}, {
value: '12',
label: '双皮奶'
}, {
value: '3',
label: '蚵仔煎'
}, {
value: '4',
label: '龙须面'
}, {
value: '5',
label: '北京烤鸭'
}],
tableData: [
{
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333,
status: 1
}, {
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1517 弄',
zip: 200333,
status: 2
}, {
date: '2016-05-01',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1519 弄',
zip: 200333,
status: 1
}, {
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1516 弄',
zip: 200333,
status: 1
}],
page: {
totalCount: 10000,
perPageSize: 20
},
dialogFormVisible: false,
addForm: {
x1: "",
x2: ""
},
dialogVisible: false,
checkDataList: []
}
},
mounted() {
this.$refs.myTable.toggleRowSelection(this.tableData[3]);
},
methods: {
clickSearch() {
console.log(this.searchForm);
},
resetSearchForm(formName) {
this.$refs[formName].resetFields();
},
handleClick(row) {
console.log(row);
this.dialogVisible = true;
},
confirmDelete(row) {
console.log("确定删除", row);
},
handleCurrentChange(page) {
console.log("想要查看：", page);
},
clickAddDialog() {
this.dialogFormVisible = true;
},
changeTask(obj) {
console.log("修改任务", obj);
},
handleSelectionChange(valueList) {
console.log(valueList);
this.checkDataList = valueList;
},
selectedOne() {
this.$refs.myTable.toggleRowSelection(this.tableData[2]);
},
addToBlackList() {
// 获取已经选中的数据
console.log('移入黑名单', this.checkDataList);
}
}
}
</script>
<style scoped>
</style>
<template>
<div style="padding: 20px;">
<el-card class="box-card">
<el-form :inline="true" class="demo-form-inline" size="small" :model="searchForm" ref="searchForm">
<el-form-item label="标题" prop="title">
<el-input placeholder="标题" v-model="searchForm.title"></el-input>
</el-form-item>
<el-form-item label="类型" prop="category">
<el-select placeholder="类型" v-model="searchForm.category">
<el-option v-for="item in categoryOptions" :key="item.value" :label="item.label"
:value="item.value"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button size="small" type="primary" @click="clickSearch">筛选</el-button>
<el-button size="small" @click="resetSearchForm('searchForm')">重置</el-button>
</el-form-item>
</el-form>
</el-card>
<el-card class="box-card" style="margin-top: 25px;">
<div slot="header" class="clearfix">
<span><i class="el-icon-s-grid"></i> 消息列表</span>
<el-button style="float: right;" type="primary" size="small" @click="clickAddDrawer">
<i class="el-icon-circle-plus-outline"></i> 新建推广码
</el-button>
</div>
<div>
<el-table :data="tableData" border style="width: 100%">
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
<el-table-column label="二维码">
<template slot-scope="scope">
<el-popover
placement="right"
trigger="hover">
<div>
<el-image
style="width: 140px; height: 140px"
:src="scope.row.url"
fit="fit"></el-image>
</div>
<el-image slot="reference" style="width: 40px; height: 40px" :src="scope.row.url"
fit="fit"></el-image>
</el-popover>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
<el-button @click="handleEditClick(scope.row)" type="text" size="small">编辑</el-button>
<el-popconfirm style="display: inline-block;margin-left: 10px;" title="这是一段内容确定删除吗？" @confirm="confirmDelete(scope.row)">
<el-button slot="reference" type="text" size="small">删除</el-button>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
</div>
<el-row type="flex" justify="end" style="margin-top: 30px;">
<el-pagination
:total="page.totalCount"
:page-size="page.perPageSize"
background
layout="prev, pager, next,jumper"
@current-change="handleCurrentChange"
>
</el-pagination>
</el-row>
</el-card>
<el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
<el-drawer title="我是标题" :visible.sync="drawerVisible" :before-close="handleDrawerClose" direction="ltr">
<div style="padding: 25px;">
<el-form label-position="left" label-width="80px" :model="addForm" size="small">
<el-form-item label="活动名称" prop="x1">
<el-input autocomplete="off" v-model="addForm.x1"></el-input>
</el-form-item>
<el-form-item label="活动区域" prop="x2">
<el-select placeholder="请选择活动区域" v-model="addForm.x2">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
</el-form-item>
</el-form>
</div>
</el-drawer>
</div>
</template>
<script>
export default {
name: "Promo",
data() {
return {
drawerVisible: false,
searchForm: {
title: "",
category: ""
},
categoryOptions: [
{
value: '1',
label: '黄金糕'
}, {
value: '2',
label: '双皮奶'
}, {
value: '3',
label: '蚵仔煎'
}, {
value: '4',
label: '龙须面'
}, {
value: '5',
label: '北京烤鸭'
}],
tableData: [
{
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333,
url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
status: 1
}, {
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1517 弄',
zip: 200333,
url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
status: 2
}, {
date: '2016-05-01',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1519 弄',
zip: 200333,
url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
status: 1
}, {
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1516 弄',
zip: 200333,
url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
status: 1
}],
page: {
totalCount: 10000,
perPageSize: 20
},
dialogFormVisible: false,
addForm: {
x1: "",
x2: ""
},
dialogVisible: false
}
},
methods: {
clickSearch() {
console.log(this.searchForm);
},
resetSearchForm(formName) {
this.$refs[formName].resetFields();
},
handleClick(row) {
console.log(row);
this.dialogVisible = true;
},
confirmDelete(row) {
console.log("确定删除", row);
},
handleCurrentChange(page) {
console.log("想要查看：", page);
},
clickAddDrawer() {
this.drawerVisible = true;
},
handleDrawerClose(done) {
console.log("要关闭了");
done(); // 关闭
},
handleEditClick(row){
console.log(row);
this.drawerVisible = true;
}
}
}
</script>
<style scoped>
</style>
<template>
<div style="padding: 20px;">
<el-card class="box-card" shadow="never">
<el-form :inline="true" class="demo-form-inline" size="small" :model="searchForm" ref="searchForm">
<el-form-item label="当前任务" prop="category" style="margin-bottom: 0">
<el-select placeholder="全部任务" v-model="searchForm.task" @change="changeTask">
<el-option v-for="item in categoryOptions" :key="item.value" :label="item.label"
:value="item.value"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="推广码" prop="category" style="margin-bottom: 0">
<el-select placeholder="全部渠道" v-model="searchForm.category">
<el-option v-for="item in categoryOptions" :key="item.value" :label="item.label"
:value="item.value"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-form>
</el-card>
<el-row style="margin-top: 30px;" :gutter="20">
<el-col :span="12">
<el-row type="flex" justify="space-between" :gutter="20" style="flex-wrap: wrap">
<el-col :span="12">
<el-card shadow="never" class="stat-panel">
<div class="row">
<el-row type="flex" justify="space-between">
<div>
<div style="font-size: 40px;font-weight: bold">0</div>
<div>今日新增</div>
</div>
<div>
<i class="el-icon-attract" style="font-size: 60px;color: #0c8eff"></i>
</div>
</el-row>
<el-row type="flex" justify="space-between">
<div>昨日数据：0</div>
<div>累计：23</div>
</el-row>
</div>
</el-card>
</el-col>
<el-col :span="12">
<el-card shadow="never" class="stat-panel">
<div class="row">
<el-row type="flex" justify="space-between">
<div>
<div style="font-size: 40px;font-weight: bold">0</div>
<div>今日新增</div>
</div>
<div>
<i class="el-icon-attract" style="font-size: 60px;color: #0c8eff"></i>
</div>
</el-row>
<el-row type="flex" justify="space-between">
<div>昨日数据：0</div>
<div>累计：23</div>
</el-row>
</div>
</el-card>
</el-col>
<el-col :span="12" style="margin-top: 8px">
<el-card shadow="never" class="stat-panel">
<div class="row">
<el-row type="flex" justify="space-between">
<div>
<div style="font-size: 40px;font-weight: bold">0</div>
<div>今日新增</div>
</div>
<div>
<i class="el-icon-attract" style="font-size: 60px;color: #0c8eff"></i>
</div>
</el-row>
<el-row type="flex" justify="space-between">
<div>昨日数据：0</div>
<div>累计：23</div>
</el-row>
</div>
</el-card>
</el-col>
<el-col :span="12" style="margin-top: 8px">
<el-card shadow="never" class="stat-panel">
<div class="row">
<el-row type="flex" justify="space-between">
<div>
<div style="font-size: 40px;font-weight: bold">0</div>
<div>今日新增</div>
</div>
<div>
<i class="el-icon-attract" style="font-size: 60px;color: #0c8eff"></i>
</div>
</el-row>
<el-row type="flex" justify="space-between">
<div>昨日数据：0</div>
<div>累计：23</div>
</el-row>
</div>
</el-card>
</el-col>
</el-row>
</el-col>
<el-col :span="12">
<el-card class="box-card" shadow="never">
<highcharts :options="opt1" style="height: 330px;min-width: 300px"></highcharts>
</el-card>
</el-col>
</el-row>
<el-row style="margin-top: 30px;" :gutter="20" type="flex" justify="space-between">
<el-col :xs="12">
<el-card class="box-card" shadow="never">
<div slot="header">
<span>xx统计情况</span>
</div>
<highcharts :options="opt2" style="height: 330px;min-width: 300px"></highcharts>
</el-card>
</el-col>
<el-col :xs="12">
<el-card class="box-card" shadow="never">
<div slot="header">
<span>裂变情况</span>
</div>
<highcharts :options="opt3" style="height: 330px;min-width: 300px"></highcharts>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: "Stat",
data() {
return {
searchForm: {
task: "3",
category: ""
},
categoryOptions: [
{
value: '11',
label: '黄金糕'
}, {
value: '12',
label: '双皮奶'
}, {
value: '3',
label: '蚵仔煎'
}, {
value: '4',
label: '龙须面'
}, {
value: '5',
label: '北京烤鸭'
}],
opt1: {
title: {
text: '2010 ~ 2016 年太阳能行业就业人员发展情况'
},
subtitle: {
text: '数据来源：thesolarfoundation.com'
},
yAxis: {
title: {
text: '就业人数'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
series: [{
name: '安装，实施人员',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: '工人',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: '销售',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: '项目开发',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: '其他',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
},
opt2: {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: '2018 年浏览器市场份额'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Chrome',
y: 61.41,
sliced: true,
selected: true
}, {
name: 'Internet Explorer',
y: 11.84
}, {
name: 'Firefox',
y: 10.85
}, {
name: 'Edge',
y: 4.67
}, {
name: 'Safari',
y: 4.18
}, {
name: 'Other',
y: 7.05
}]
}]
},
opt3: {
chart: {
type: 'column'
},
title: {
text: '月平均降雨量'
},
subtitle: {
text: '数据来源: WorldClimate.com'
},
xAxis: {
categories: [
'一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: '降雨量 (mm)'
}
},
tooltip: {
// head + 每个 point + footer 拼接成完整的 table
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
borderWidth: 0
}
},
series: [{
name: '东京',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
name: '纽约',
data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
}, {
name: '伦敦',
data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
}, {
name: '柏林',
data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
}]
}
}
}
}
</script>
<style scoped>
.stat-panel .row {
height: 140px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
</style>
<template>
<div>
<el-menu class="sub-menu" mode="horizontal" :default-active="subActiveRouter" router>
<el-menu-item index="Activity" :route="{name:'ActivityList'}"><i class="el-icon-coin"></i>活动管理</el-menu-item>
<el-menu-item index="Promo" :route="{name:'Promo'}"><i class="el-icon-data-analysis"></i>推广码</el-menu-item>
<el-menu-item index="Stat" :route="{name:'Stat'}"><i class="el-icon-document"></i>数据统计</el-menu-item>
<el-menu-item index="Fans" :route="{name:'Fans'}"><i class="el-icon-setting"></i>参与粉丝</el-menu-item>
</el-menu>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "TaskLayout",
data() {
return {
subActiveRouter: ""
}
},
watch:{
$route:function (to) {
// console.log('--->',to);
this.subActiveRouter = to.matched[2].name;
}
},
mounted(){
// 获取当前的所有路由
this.subActiveRouter = this.$route.matched[2].name;
}
}
</script>
<style scoped>
.sub-menu .el-menu-item {
line-height: 40px;
height: 40px;
vertical-align: middle;
font-size: 13px;
}
.sub-menu .el-menu-item i {
margin-top: -3px;
}
</style>
<template>
<div class="home">
<div>
<el-menu class="el-menu-demo" mode="horizontal" :default-active="rootActiveRouter"
background-color="#545c64"
text-color="#fff" active-text-color="#ffd04b" router>
<el-menu-item>媒体宝系统</el-menu-item>
<el-menu-item index="Task" :route="{name:'Activity'}">任务宝</el-menu-item>
<el-menu-item index="Msg" :route="{name:'Push'}">消息宝</el-menu-item>
<el-menu-item index="Auth" :route="{name:'Auth'}">公众号授权</el-menu-item>
<el-submenu class="right">
<template slot="title">{{username}}</template>
<el-menu-item index="Info" :route="{name:'Info'}">个人信息</el-menu-item>
<el-menu-item index="Login" @click="goTo">注销</el-menu-item>
</el-submenu>
</el-menu>
</div>
</div>
</template>
<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'Home',
components: {
// HelloWorld
}
}
</script>
<template>
<div>
<!--顶部菜单-->
<div>
<el-menu class="el-menu-demo" mode="horizontal" background-color="#545c64"
:default-active="rootActiveRouter"
text-color="#fff" active-text-color="#ffd04b" router>
<el-menu-item>媒体宝系统</el-menu-item>
<el-menu-item index="Task" :route="{name:'ActivityList'}">任务宝</el-menu-item>
<el-menu-item index="Msg" :route="{name:'Push'}">消息宝</el-menu-item>
<el-menu-item index="Auth" :route="{name:'Auth'}">授权</el-menu-item>
<el-submenu index="5" style="float: right">
<template slot="title">{{username}}</template>
<el-menu-item index="5-1">个人中心</el-menu-item>
<el-menu-item index="5-2">注销</el-menu-item>
</el-submenu>
</el-menu>
</div>
<div>
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
name: "Layout",
data() {
return {
rootActiveRouter: ""
}
},
mounted() {
// 获取当前的所有路由
this.rootActiveRouter = this.$route.matched[1].name;
},
computed: {
username() {
return this.$store.state.username;
}
}
}
</script>
<style scoped>
</style>
<template>
<div class="main">
<div class="loginBox">
<div class="tabBoxSwitch">
<ul class="tabBoxSwitchUl">
<li :class="tabSelected === index?'tab-active' : ''" v-for="(txt,index) in tabList" :key="index"
@click="tabSelected=index">{{txt}}
</li>
</ul>
</div>
<div v-show="tabSelected===0">
<el-form :model="userForm" :rules="userRules" ref="userForm" >
<!--<el-form :model="userForm" :rules="userRules" ref="userForm" label-width="80px" label-position="left">-->
<!--<el-form-item label="用户名:">-->
<!--<el-input></el-input>-->
<!--</el-form-item>-->
<el-form-item prop="username" style="margin-top: 24px;" :error="userFormError.username">
<el-input v-model="userForm.username" placeholder="用户名或手机号"></el-input>
</el-form-item>
<el-form-item prop="password" :error="userFormError.password">
<el-input v-model="userForm.password" placeholder="密码" show-password></el-input>
</el-form-item>
<el-form-item>
<el-button @click="submitForm('userForm')" type="primary" size="medium">登 录</el-button>
</el-form-item>
</el-form>
</div>
<div v-show="tabSelected===1">
<el-form :model="smsForm" :rules="smsRules" ref="smsForm">
<el-form-item prop="phone" style="margin-top: 24px;">
<el-input v-model="smsForm.phone" placeholder="手机号"></el-input>
</el-form-item>
<el-form-item prop="code">
<el-row type="flex" justify="space-between">
<el-input v-model="smsForm.code" placeholder="验证码"></el-input>
<el-button :disabled="btnSmsDisabled" @click="sendSmsCode" style="margin-left: 10px;">
{{btnSmsText}}
</el-button>
</el-row>
</el-form-item>
<el-form-item>
<el-button @click="submitForm('smsForm')" type="primary" size="medium">登 录</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Login",
data() {
return {
tabSelected: 0,
tabList: ["密码登录", "免密码登录"],
userForm: {
username: "",
password: ""
},
userFormError: {
username: "",
password: ""
},
userRules: {
username: [
{required: true, message: '请输入用户名或手机', trigger: 'blur'},
],
password: [
{required: true, message: '请输入密码', trigger: 'blur'},
],
},
smsForm: {
phone: "",
code: ""
},
smsRules: {
phone: [
{required: true, message: '请输入手机号', trigger: 'blur'},
{pattern: /^1[3456789]\d{9}$/, message: '手机号格式错误', trigger: 'blur'},
],
code: [
{required: true, message: '验证码', trigger: 'blur'},
],
},
btnSmsDisabled: false,
btnSmsText: "发送验证码"
}
},
methods: {
submitForm(formName) {
// 清空原来的错误
this.clearCustomFormError();
// 执行验证规则
this.$refs[formName].validate((valid) => {
if (!valid) {
//console.log("验证未通过");
return false;
}
// console.log("验证通过");
// 验证通过，向后端的API发送请求
this.axios.post("/base/auth/", this.userForm).then(res => {
// res.data = {code:1000, detail:"...."}
// res.data = {code:0, detail:"....", data:{ username:"用户名", token:"jwt"}}
if (res.data.code === 0) {
// 登录成功：写入cookie、写入state
this.$store.commit("login", res.data.data);
this.$router.push({path: "/"})
return
}
// 1000，字段错误，把相关错误信息现在标签上
if (res.data.code === 1000) {
// 不好弄，API获取数据，错误显示表单。
// detail = { username:['错误',] ,password: [11,22] }
this.validateFormFailed(res.data.detail);
return;
}
// 1001，整体错误，整体显示
if (res.data.code === 1001) {
this.$message.error(res.data.detail);
} else {
this.$message.error("请求失败");
}
});
});
},
sendSmsCode() {
this.$refs.smsForm.validateField("phone", (error) => {
if (error) {
return false;
}
// 验证通过拿到手机号，向后台发送请求 -> 发送验证码
// 禁用按钮
this.btnSmsDisabled = true;
// 设置倒计时
let txt = 60;
let interval = window.setInterval(() => {
txt -= 1;
this.btnSmsText = `${txt}秒后重发`
if (txt < 1) {
this.btnSmsText = "重新发送";
this.btnSmsDisabled = false;
window.clearInterval(interval);
}
}, 1000);
})
},
validateFormFailed(errorData) {
for (let fieldName in errorData) {
let error = errorData[fieldName][0];
this.userFormError[fieldName] = error;
}
},
clearCustomFormError() {
for (let key in this.userFormError) {
this.userFormError[key] = ""
}
},
}
}
</script>
<style scoped>
.main {
width: 100%;
height: 100vh;
background-color: #2E3E9C;
display: flex;
flex-direction:column;
justify-content: center;
align-items: center;
}
.loginBox {
background-color: #FFFFFF;
box-shadow: 0 1px 3px rgba(26, 26, 26, 0.1);
border-radius: 2px;
width: 380px;
min-height: 200px;
padding: 0 24px 20px;
}
.tabBoxSwitch .tabBoxSwitchUl {
list-style: none;
padding: 0;
margin: 0;
}
.tabBoxSwitch .tabBoxSwitchUl li {
display: inline-block;
height: 60px;
font-size: 16px;
line-height: 60px;
margin-right: 24px;
cursor: pointer;
}
.tab-active {
position: relative;
color: #1a1a1a;
font-weight: 600;
font-synthesis: style;
}
.tab-active::before {
display: block;
position: absolute;
bottom: 0;
content: "";
width: 100%;
height: 3px;
background-color: #0084ff;
}
</style>
<template>
<div>
<el-empty description="页面没找到"></el-empty>
</div>
</template>
<script>
export default {
name: "NotFound"
}
</script>
<style scoped>
</style>
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app',
components: {
}
}
</script>
<style>
body{
margin: 0;
}
</style>
import Vue from 'vue' import App from './App.vue' import './plugins/cookie' import router from './router' import './plugins/axios' import store from './store' import './plugins/element.js' import HighchartsVue from 'highcharts-vue' Vue.use(HighchartsVue) Vue.config.productionTip = false new Vue({ router, store, render: h => h(App) }).$mount('#app')
module.exports = { lintOnSave:false, //关闭语法检查 devServer: { disableHostCheck: true, } }
