此项目是 vue + element-ui 构建的后台管理系统，所有的数据都是从服务器实时获取的真实数据，具有注册、登陆、管理数据、权限验证等功能。
技术栈
vue2 + vuex + vue-router + webpack + ES6/7 + less + element-ui
功能
- 登陆/注销
- 添加商铺
- 添加商品
- 数据展示
- 管理用户
- 管理商铺
- 管理食品
- 用户分布
HTML页面
登录页面
用到了vue结合element-ui的表单验证
<script>
import {login, getAdminInfo} from '@/api/getData'
import {mapActions, mapState} from 'vuex'
export default {
data(){
return {
loginForm: {
username: '',
password: '',
},
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
],
},
showLogin: false,
}
},
mounted(){
this.showLogin = true;
if (!this.adminInfo.id) {
this.getAdminData()
}
},
computed: {
...mapState(['adminInfo']),
},
methods: {
...mapActions(['getAdminData']),
async submitForm(formName) {
this.$refs[formName].validate(async (valid) => {
if (valid) {
const res = await login({user_name: this.loginForm.username, password: this.loginForm.password})
if (res.status == 1) {
this.$message({
type: 'success',
message: '登录成功'
});
this.$router.push('manage')
}else{
this.$message({
type: 'error',
message: res.message
});
}
} else {
this.$notify.error({
title: '错误',
message: '请输入正确的用户名密码',
offset: 100
});
return false;
}
});
},
},
watch: {
adminInfo: function (newValue){
if (newValue.id) {
this.$message({
type: 'success',
message: '检测到您之前登录过，将自动登录'
});
this.$router.push('manage')
}
}
}
}
</script>
主页
<template>
<div>
<head-top></head-top>
<section class="data_section">
<header class="section_title">数据统计</header>
<el-row :gutter="20" style="margin-bottom: 10px;">
<el-col :span="4"><div class="data_list today_head"><span class="data_num head">当日数据：</span></div></el-col>
<el-col :span="4"><div class="data_list"><span class="data_num">{{userCount}}</span> 新增用户</div></el-col>
<el-col :span="4"><div class="data_list"><span class="data_num">{{orderCount}}</span> 新增订单</div></el-col>
<el-col :span="4"><div class="data_list"><span class="data_num">{{adminCount}}</span> 新增管理员</div></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="4"><div class="data_list all_head"><span class="data_num head">总数据：</span></div></el-col>
<el-col :span="4"><div class="data_list"><span class="data_num">{{allUserCount}}</span> 注册用户</div></el-col>
<el-col :span="4"><div class="data_list"><span class="data_num">{{allOrderCount}}</span> 订单</div></el-col>
<el-col :span="4"><div class="data_list"><span class="data_num">{{allAdminCount}}</span> 管理员</div></el-col>
</el-row>
</section>
<tendency :sevenDate='sevenDate' :sevenDay='sevenDay'></tendency>
</div>
</template>
<script>
import headTop from '../components/headTop'
import tendency from '../components/tendency'
import dtime from 'time-formater'
import {userCount, orderCount, getUserCount, getOrderCount, adminDayCount, adminCount} from '@/api/getData'
export default {
data(){
return {
userCount: null,
orderCount: null,
adminCount: null,
allUserCount: null,
allOrderCount: null,
allAdminCount: null,
sevenDay: [],
sevenDate: [[],[],[]],
}
},
components: {
headTop,
tendency,
},
mounted(){
this.initData();
for (let i = 6; i > -1; i--) {
const date = dtime(new Date().getTime() - 86400000*i).format('YYYY-MM-DD')
this.sevenDay.push(date)
}
this.getSevenData();
},
computed: {
},
methods: {
async initData(){
const today = dtime().format('YYYY-MM-DD')
Promise.all([userCount(today), orderCount(today), adminDayCount(today), getUserCount(), getOrderCount(), adminCount()])
.then(res => {
this.userCount = res[0].count;
this.orderCount = res[1].count;
this.adminCount = res[2].count;
this.allUserCount = res[3].count;
this.allOrderCount = res[4].count;
this.allAdminCount = res[5].count;
}).catch(err => {
console.log(err)
})
},
async getSevenData(){
const apiArr = [[],[],[]];
this.sevenDay.forEach(item => {
apiArr[0].push(userCount(item))
apiArr[1].push(orderCount(item))
apiArr[2].push(adminDayCount(item))
})
const promiseArr = [...apiArr[0], ...apiArr[1], ...apiArr[2]]
Promise.all(promiseArr).then(res => {
const resArr = [[],[],[]];
res.forEach((item, index) => {
if (item.status == 1) {
resArr[Math.floor(index/7)].push(item.count)
}
})
this.sevenDate = resArr;
}).catch(err => {
console.log(err)
})
}
}
}
</script>
添加商铺
<template>
<div>
<head-top></head-top>
<el-row style="margin-top: 20px;">
<el-col :span="12" :offset="4">
<el-form :model="formData" :rules="rules" ref="formData" label-width="110px" class="demo-formData">
<el-form-item label="店铺名称" prop="name">
<el-input v-model="formData.name"></el-input>
</el-form-item>
<el-form-item label="详细地址" prop="address">
<el-autocomplete
v-model="formData.address"
:fetch-suggestions="querySearchAsync"
placeholder="请输入地址"
style="width: 100%;"
@select="addressSelect"
></el-autocomplete>
<span>当前城市：{{city.name}}</span>
</el-form-item>
<el-form-item label="联系电话" prop="phone">
<el-input v-model.number="formData.phone" maxLength="11"></el-input>
</el-form-item>
<el-form-item label="店铺简介" prop="description">
<el-input v-model="formData.description"></el-input>
</el-form-item>
<el-form-item label="店铺标语" prop="promotion_info">
<el-input v-model="formData.promotion_info"></el-input>
</el-form-item>
<el-form-item label="店铺分类">
<el-cascader
:options="categoryOptions"
v-model="selectedCategory"
change-on-select
></el-cascader>
</el-form-item>
<el-form-item label="店铺特点" style="white-space: nowrap;">
<span>品牌保证</span>
<el-switch on-text="" off-text="" v-model="formData.is_premium"></el-switch>
<span>蜂鸟专送</span>
<el-switch on-text="" off-text="" v-model="formData.delivery_mode"></el-switch>
<span>新开店铺</span>
<el-switch on-text="" off-text="" v-model="formData.new"></el-switch>
</el-form-item>
<el-form-item style="white-space: nowrap;">
<span>外卖保</span>
<el-switch on-text="" off-text="" v-model="formData.bao"></el-switch>
<span>准时达</span>
<el-switch on-text="" off-text="" v-model="formData.zhun"></el-switch>
<span>开发票</span>
<el-switch on-text="" off-text="" v-model="formData.piao"></el-switch>
</el-form-item>
<el-form-item label="配送费" prop="float_delivery_fee">
<el-input-number v-model="formData.float_delivery_fee" :min="0" :max="20"></el-input-number>
</el-form-item>
<el-form-item label="起送价" prop="float_minimum_order_amount">
<el-input-number v-model="formData.float_minimum_order_amount" :min="0" :max="100"></el-input-number>
</el-form-item>
<el-form-item label="营业时间" style="white-space: nowrap;">
<el-time-select
placeholder="起始时间"
v-model="formData.startTime"
:picker-options="{
start: '05:30',
step: '00:15',
end: '23:30'
}">
</el-time-select>
<el-time-select
placeholder="结束时间"
v-model="formData.endTime"
:picker-options="{
start: '05:30',
step: '00:15',
end: '23:30',
minTime: formData.startTime
}">
</el-time-select>
</el-form-item>
<el-form-item label="上传店铺头像">
<el-upload
class="avatar-uploader"
:action="baseUrl + '/v1/addimg/shop'"
:show-file-list="false"
:on-success="handleShopAvatarScucess"
:before-upload="beforeAvatarUpload">
<img v-if="formData.image_path" :src="baseImgPath + formData.image_path" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
<el-form-item label="上传营业执照">
<el-upload
class="avatar-uploader"
:action="baseUrl + '/v1/addimg/shop'"
:show-file-list="false"
:on-success="handleBusinessAvatarScucess"
:before-upload="beforeAvatarUpload">
<img v-if="formData.business_license_image" :src="baseImgPath + formData.business_license_image" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
<el-form-item label="上传餐饮服务许可证">
<el-upload
class="avatar-uploader"
:action="baseUrl + '/v1/addimg/shop'"
:show-file-list="false"
:on-success="handleServiceAvatarScucess"
:before-upload="beforeAvatarUpload">
<img v-if="formData.catering_service_license_image" :src="baseImgPath + formData.catering_service_license_image" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
<el-form-item label="优惠活动">
<el-select v-model="activityValue" @change="selectActivity" :placeholder="activityValue">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-table
:data="activities"
style="min-width: 600px;margin-bottom: 20px;"
align="cneter"
:row-class-name="tableRowClassName">
<el-table-column
prop="icon_name"
label="活动标题"
align="cneter"
width="120">
</el-table-column>
<el-table-column
prop="name"
label="活动名称"
align="cneter"
width="120">
</el-table-column>
<el-table-column
prop="description"
align="cneter"
label="活动详情">
</el-table-column>
<el-table-column
label="操作"
width="120">
<template slot-scope="scope">
<el-button
size="small"
type="danger"
@click="handleDelete(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-form-item class="button_submit">
<el-button type="primary" @click="submitForm('formData')">立即创建</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
</div>
</template>
<script>
import headTop from '@/components/headTop'
import {cityGuess, addShop, searchplace, foodCategory} from '@/api/getData'
import {baseUrl, baseImgPath} from '@/config/env'
export default {
data(){
return {
city: {},
formData: {
name: '', //店铺名称
address: '', //地址
latitude: '',
longitude: '',
description: '', //介绍
phone: '',
promotion_info: '',
float_delivery_fee: 5, //运费
float_minimum_order_amount: 20, //起价
is_premium: true,
delivery_mode: true,
new: true,
bao: true,
zhun: true,
piao: true,
startTime: '',
endTime: '',
image_path: '',
business_license_image: '',
catering_service_license_image: '',
},
rules: {
name: [
{ required: true, message: '请输入店铺名称', trigger: 'blur' },
],
address: [
{ required: true, message: '请输入详细地址', trigger: 'blur' }
],
phone: [
{ required: true, message: '请输入联系电话' },
{ type: 'number', message: '电话号码必须是数字' }
],
},
options: [{
value: '满减优惠',
label: '满减优惠'
}, {
value: '优惠大酬宾',
label: '优惠大酬宾'
}, {
value: '新用户立减',
label: '新用户立减'
}, {
value: '进店领券',
label: '进店领券'
}],
activityValue: '满减优惠',
activities: [{
icon_name: '减',
name: '满减优惠',
description: '满30减5，满60减8',
}],
baseUrl,
baseImgPath,
categoryOptions: [],
selectedCategory: ['快餐便当', '简餐']
}
},
components: {
headTop,
},
mounted(){
this.initData();
},
methods: {
async initData(){
try{
this.city = await cityGuess();
const categories = await foodCategory();
categories.forEach(item => {
if (item.sub_categories.length) {
const addnew = {
value: item.name,
label: item.name,
children: []
}
item.sub_categories.forEach((subitem, index) => {
if (index == 0) {
return
}
addnew.children.push({
value: subitem.name,
label: subitem.name,
})
})
this.categoryOptions.push(addnew)
}
})
}catch(err){
console.log(err);
}
},
async querySearchAsync(queryString, cb) {
if (queryString) {
try{
const cityList = await searchplace(this.city.id, queryString);
if (cityList instanceof Array) {
cityList.map(item => {
item.value = item.address;
return item;
})
cb(cityList)
}
}catch(err){
console.log(err)
}
}
},
addressSelect(address){
this.formData.latitude = address.latitude;
this.formData.longitude = address.longitude;
console.log(this.formData.latitude, this.formData.longitude)
},
handleShopAvatarScucess(res, file) {
if (res.status == 1) {
this.formData.image_path = res.image_path;
}else{
this.$message.error('上传图片失败！');
}
},
handleBusinessAvatarScucess(res, file) {
if (res.status == 1) {
this.formData.business_license_image = res.image_path;
}else{
this.$message.error('上传图片失败！');
}
},
handleServiceAvatarScucess(res, file) {
if (res.status == 1) {
this.formData.catering_service_license_image = res.image_path;
}else{
this.$message.error('上传图片失败！');
}
},
beforeAvatarUpload(file) {
const isRightType = (file.type === 'image/jpeg') || (file.type === 'image/png');
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isRightType) {
this.$message.error('上传头像图片只能是 JPG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
return isRightType && isLt2M;
},
tableRowClassName(row, index) {
if (index === 1) {
return 'info-row';
} else if (index === 3) {
return 'positive-row';
}
return '';
},
selectActivity(){
this.$prompt('请输入活动详情', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
}).then(({ value }) => {
if (value == null) {
this.$message({
type: 'info',
message: '请输入活动详情'
});
return
}
let newObj = {};
switch(this.activityValue){
case '满减优惠':
newObj= {
icon_name: '减',
name: '满减优惠',
description: value,
}
break;
case '优惠大酬宾':
newObj= {
icon_name: '特',
name: '优惠大酬宾',
description: value,
}
break;
case '新用户立减':
newObj= {
icon_name: '新',
name: '新用户立减',
description: value,
}
break;
case '进店领券':
newObj= {
icon_name: '领',
name: '进店领券',
description: value,
}
break;
}
this.activities.push(newObj);
}).catch(() => {
this.$message({
type: 'info',
message: '取消输入'
});
});
},
handleDelete(index){
this.activities.splice(index, 1)
},
submitForm(formName) {
this.$refs[formName].validate(async (valid) => {
if (valid) {
Object.assign(this.formData, {activities: this.activities}, {
category: this.selectedCategory.join('/')
})
try{
let result = await addShop(this.formData);
if (result.status == 1) {
this.$message({
type: 'success',
message: '添加成功'
});
this.formData = {
name: '', //店铺名称
address: '', //地址
latitude: '',
longitude: '',
description: '', //介绍
phone: '',
promotion_info: '',
float_delivery_fee: 5, //运费
float_minimum_order_amount: 20, //起价
is_premium: true,
delivery_mode: true,
new: true,
bao: true,
zhun: true,
piao: true,
startTime: '',
endTime: '',
image_path: '',
business_license_image: '',
catering_service_license_image: '',
};
this.selectedCategory = ['快餐便当', '简餐'];
this.activities = [{
icon_name: '减',
name: '满减优惠',
description: '满30减5，满60减8',
}];
}else{
this.$message({
type: 'error',
message: result.message
});
}
console.log(result)
}catch(err){
console.log(err)
}
} else {
this.$notify.error({
title: '错误',
message: '请检查输入是否正确',
offset: 100
});
return false;
}
});
},
}
}
</script>
添加食品
<script>
import headTop from '@/components/headTop'
import {getCategory, addCategory, addFood} from '@/api/getData'
import {baseUrl, baseImgPath} from '@/config/env'
export default {
data(){
return {
baseUrl,
baseImgPath,
restaurant_id: 1,
categoryForm: {
categoryList: [],
categorySelect: '',
name: '',
description: '',
},
foodForm: {
name: '',
description: '',
image_path: '',
activity: '',
attributes: [],
specs: [{
specs: '默认',
packing_fee: 0,
price: 20,
}],
},
foodrules: {
name: [
{ required: true, message: '请输入食品名称', trigger: 'blur' },
],
},
attributes: [{
value: '新',
label: '新品'
}, {
value: '招牌',
label: '招牌'
},],
showAddCategory: false,
foodSpecs: 'one',
dialogFormVisible: false,
specsForm: {
specs: '',
packing_fee: 0,
price: 20,
},
specsFormrules: {
specs: [
{ required: true, message: '请输入规格', trigger: 'blur' },
],
}
}
},
components: {
headTop,
},
created(){
if (this.$route.query.restaurant_id) {
this.restaurant_id = this.$route.query.restaurant_id;
}else{
this.restaurant_id = Math.ceil(Math.random()*10);
this.$msgbox({
title: '提示',
message: '添加食品需要选择一个商铺，先去就去选择商铺吗？',
showCancelButton: true,
confirmButtonText: '确定',
cancelButtonText: '取消',
beforeClose: (action, instance, done) => {
if (action === 'confirm') {
this.$router.push('/shopList');
done();
} else {
this.$message({
type: 'info',
message: '取消'
});
done();
}
}
})
}
this.initData();
},
computed: {
selectValue: function (){
return this.categoryForm.categoryList[this.categoryForm.categorySelect]||{}
}
},
methods: {
async initData(){
try{
const result = await getCategory(this.restaurant_id);
if (result.status == 1) {
result.category_list.map((item, index) => {
item.value = index;
item.label = item.name;
})
this.categoryForm.categoryList = result.category_list;
}else{
console.log(result)
}
}catch(err){
console.log(err)
}
},
addCategoryFun(){
this.showAddCategory = !this.showAddCategory;
},
submitcategoryForm(categoryForm) {
this.$refs[categoryForm].validate(async (valid) => {
if (valid) {
const params = {
name: this.categoryForm.name,
description: this.categoryForm.description,
restaurant_id: this.restaurant_id,
}
try{
const result = await addCategory(params);
if (result.status == 1) {
this.initData();
this.categoryForm.name = '';
this.categoryForm.description = '';
this.showAddCategory = false;
this.$message({
type: 'success',
message: '添加成功'
});
}
}catch(err){
console.log(err)
}
} else {
this.$notify.error({
title: '错误',
message: '请检查输入是否正确',
offset: 100
});
return false;
}
});
},
uploadImg(res, file) {
if (res.status == 1) {
this.foodForm.image_path = res.image_path;
}else{
this.$message.error('上传图片失败！');
}
},
beforeImgUpload(file) {
const isRightType = (file.type === 'image/jpeg') || (file.type === 'image/png');
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isRightType) {
this.$message.error('上传头像图片只能是 JPG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
return isRightType && isLt2M;
},
addspecs(){
this.foodForm.specs.push({...this.specsForm});
this.specsForm.specs = '';
this.specsForm.packing_fee = 0;
this.specsForm.price = 20;
this.dialogFormVisible = false;
},
handleDelete(index){
this.foodForm.specs.splice(index, 1);
},
tableRowClassName(row, index) {
if (index === 1) {
return 'info-row';
} else if (index === 3) {
return 'positive-row';
}
return '';
},
addFood(foodForm){
this.$refs[foodForm].validate(async (valid) => {
if (valid) {
const params = {
...this.foodForm,
category_id: this.selectValue.id,
restaurant_id: this.restaurant_id,
}
try{
const result = await addFood(params);
if (result.status == 1) {
console.log(result)
this.$message({
type: 'success',
message: '添加成功'
});
this.foodForm = {
name: '',
description: '',
image_path: '',
activity: '',
attributes: [],
specs: [{
specs: '默认',
packing_fee: 0,
price: 20,
}],
}
}else{
this.$message({
type: 'error',
message: result.message
});
}
}catch(err){
console.log(err)
}
} else {
this.$notify.error({
title: '错误',
message: '请检查输入是否正确',
offset: 100
});
return false;
}
});
}
}
}
</script>
8536
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
