parent
801c4683a9
commit
36c1a45fe2
44 changed files with 2318 additions and 2631 deletions
@ -1,28 +0,0 @@ |
|||||||
.header{ |
|
||||||
background-color: #242f42; |
|
||||||
} |
|
||||||
.login-wrap{ |
|
||||||
background: #324157; |
|
||||||
} |
|
||||||
.plugins-tips{ |
|
||||||
background: #eef1f6; |
|
||||||
} |
|
||||||
.plugins-tips a{ |
|
||||||
color: #20a0ff; |
|
||||||
} |
|
||||||
.el-upload--text em { |
|
||||||
color: #20a0ff; |
|
||||||
} |
|
||||||
.pure-button{ |
|
||||||
background: #20a0ff; |
|
||||||
} |
|
||||||
.tags-li.active { |
|
||||||
border: 1px solid #409EFF; |
|
||||||
background-color: #409EFF; |
|
||||||
} |
|
||||||
.message-title{ |
|
||||||
color: #20a0ff; |
|
||||||
} |
|
||||||
.collapse-btn:hover{ |
|
||||||
background: rgb(40,52,70); |
|
||||||
} |
|
||||||
@ -0,0 +1,7 @@ |
|||||||
|
/* 改变主题色变量 */ |
||||||
|
|
||||||
|
$--color-primary: #062c87; |
||||||
|
|
||||||
|
/* 改变 icon 字体路径变量，必需 */ |
||||||
|
$--font-path: '~element-ui/lib/theme-chalk/fonts'; |
||||||
|
@import "~element-ui/packages/theme-chalk/src/index"; |
||||||
@ -1,29 +0,0 @@ |
|||||||
.header{ |
|
||||||
background-color: #fff; |
|
||||||
} |
|
||||||
.login-wrap{ |
|
||||||
background: rgba(56, 157, 170, 0.82);; |
|
||||||
} |
|
||||||
.plugins-tips{ |
|
||||||
background: #f2f2f2; |
|
||||||
} |
|
||||||
.plugins-tips a{ |
|
||||||
color: #00d1b2; |
|
||||||
} |
|
||||||
.el-upload--text em { |
|
||||||
color: #00d1b2; |
|
||||||
} |
|
||||||
.pure-button{ |
|
||||||
background: #00d1b2; |
|
||||||
} |
|
||||||
.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus, .pagination > .active > span, .pagination > .active > span:hover, .pagination > .active > span:focus { |
|
||||||
background-color: #00d1b2 !important; |
|
||||||
border-color: #00d1b2 !important; |
|
||||||
} |
|
||||||
.tags-li.active { |
|
||||||
border: 1px solid #9278FF; |
|
||||||
background-color: #9278FF; |
|
||||||
} |
|
||||||
.collapse-btn:hover{ |
|
||||||
background: #00d1b2; |
|
||||||
} |
|
||||||
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 697 B |
|
After Width: | Height: | Size: 583 B |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
@ -0,0 +1,251 @@ |
|||||||
|
<template> |
||||||
|
<div class="page"> |
||||||
|
<div style="margin-bottom: 10px;text-align: right;"> |
||||||
|
<el-button v-auth="'/shop:营销推广管理:新增'" type="primary" round @click="add">新增</el-button> |
||||||
|
</div> |
||||||
|
<el-table :data="list" class="table" ref="table" stripe header-align="center" row-key="id"> |
||||||
|
<el-table-column type="index" width="100" label="序号" align="center"></el-table-column> |
||||||
|
<el-table-column prop="courseName" label="图片" min-width="150" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<img width="100" :src="scope.row.banner" alt=""> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="title" label="标题" min-width="150" align="center"></el-table-column> |
||||||
|
<el-table-column prop="subheading" label="副标题" min-width="150" align="center"></el-table-column> |
||||||
|
<el-table-column prop="url" label="链接" min-width="150" align="center"></el-table-column> |
||||||
|
<el-table-column label="操作" align="center" width="250"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-switch v-model="scope.row.isOpen" :active-value="0" :inactive-value="1" |
||||||
|
@change="switchOff($event, scope.row)" v-auth="'/shop:营销推广管理:禁用'"> |
||||||
|
</el-switch> |
||||||
|
<el-button style="margin-left: 10px;" v-auth="'/shop:营销推广管理:编辑'" type="text" |
||||||
|
@click="edit(scope.row)">编辑</el-button> |
||||||
|
<el-button v-auth="'/shop:营销推广管理:删除'" type="text" @click="handleDelete(scope.row)">删除</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
|
||||||
|
<el-dialog :title="(form.id ? '编辑' : '新增') + 'banner'" :visible.sync="bannerVisible" width="500px" class="dialog" |
||||||
|
:close-on-click-modal="false"> |
||||||
|
<el-form ref="form" label-width="60px"> |
||||||
|
<el-form-item label="图片"> |
||||||
|
<el-upload class="avatar-uploader" accept=".jpg,.png,.jpeg,.gif" :on-change="changeFile" |
||||||
|
:show-file-list="false" action="" :auto-upload="false"> |
||||||
|
<img v-if="form.banner" :src="form.banner" class="avatar"> |
||||||
|
<div class="uploader-default" v-else> |
||||||
|
<i class="el-icon-plus"></i> |
||||||
|
<p>上传图片</p> |
||||||
|
</div> |
||||||
|
</el-upload> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="标题"> |
||||||
|
<el-input v-model="form.title" placeholder="请输入标题" maxlength="100"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="副标题"> |
||||||
|
<el-input v-model="form.subheading" placeholder="请输入副标题" maxlength="100"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="链接"> |
||||||
|
<el-input v-model="form.url" placeholder="请输入链接" maxlength="100"></el-input> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<span slot="footer" class="dialog-footer"> |
||||||
|
<el-button @click="bannerVisible = false">取消</el-button> |
||||||
|
<el-button type="primary" @click="submitBanner">确定</el-button> |
||||||
|
</span> |
||||||
|
</el-dialog> |
||||||
|
|
||||||
|
<!-- 剪裁组件弹窗 --> |
||||||
|
<el-dialog title="图片裁剪" append-to-body :visible.sync="cropperModel" width="1100px" :close-on-click-modal="false"> |
||||||
|
<Cropper ref="cropper" :img-file.sync="file" :is-upload="isUpload" :fixed="true" :fixedNumber.sync="fixedNumber" |
||||||
|
:autoCropWidth="500" :autoCropHeight="138.8" @upload="customUpload" /> |
||||||
|
</el-dialog> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import Util from "@/libs/util"; |
||||||
|
import Setting from '@/setting' |
||||||
|
import Cropper from '@/components/img-upload/Cropper' |
||||||
|
import Axios from 'axios' |
||||||
|
import Oss from '@/components/upload/upload.js' |
||||||
|
export default { |
||||||
|
data () { |
||||||
|
return { |
||||||
|
headers: { |
||||||
|
token: sessionStorage.getItem("token") |
||||||
|
}, |
||||||
|
list: [], |
||||||
|
bannerVisible: false, |
||||||
|
form: { |
||||||
|
id: '', |
||||||
|
banner: '', |
||||||
|
title: '', |
||||||
|
subheading: '', |
||||||
|
url: '', |
||||||
|
}, |
||||||
|
cropperModel: false, |
||||||
|
isUpload: false, |
||||||
|
fixedNumber: [5.4, 1], |
||||||
|
file: '' |
||||||
|
}; |
||||||
|
}, |
||||||
|
components: { |
||||||
|
Cropper |
||||||
|
}, |
||||||
|
mounted () { |
||||||
|
this.getList() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getList () { |
||||||
|
this.$post(this.api.listMarketing, { |
||||||
|
pageNum: 1, |
||||||
|
pageSize: 1000 |
||||||
|
}).then(({ page }) => { |
||||||
|
this.list = page.records; |
||||||
|
this.total = page.total; |
||||||
|
}).catch(res => { |
||||||
|
}); |
||||||
|
}, |
||||||
|
// 图片裁剪上传事件 |
||||||
|
customUpload (data) { |
||||||
|
data.name = this.file.name |
||||||
|
this.imgUpload(data) |
||||||
|
}, |
||||||
|
// 图片上传到服务器 |
||||||
|
imgUpload (formData) { |
||||||
|
this.isUpload = true |
||||||
|
Oss.upload(formData).then(res => { |
||||||
|
this.form.banner && Oss.del(this.form.banner) |
||||||
|
this.form.banner = res.url |
||||||
|
}) |
||||||
|
this.$refs.cropper.isDisabled = false |
||||||
|
this.isUpload = false |
||||||
|
this.cropperModel = false |
||||||
|
}, |
||||||
|
// 图片改变钩子 |
||||||
|
changeFile (file) { |
||||||
|
const { size, name } = file |
||||||
|
const ext = name.substring(name.lastIndexOf('.') + 1) |
||||||
|
if (!Util.isImg(ext)) { |
||||||
|
this.$message.error('请上传图片！') |
||||||
|
return false |
||||||
|
} |
||||||
|
this.file = file |
||||||
|
this.cropperModel = true |
||||||
|
this.$nextTick(() => { |
||||||
|
this.$refs.cropper.updateImg({ |
||||||
|
url: window.URL.createObjectURL(file.raw), |
||||||
|
size: file.size |
||||||
|
}) |
||||||
|
}) |
||||||
|
}, |
||||||
|
add () { |
||||||
|
this.form = { |
||||||
|
id: '', |
||||||
|
banner: '', |
||||||
|
title: '', |
||||||
|
subheading: '', |
||||||
|
url: '', |
||||||
|
} |
||||||
|
this.bannerVisible = true |
||||||
|
}, |
||||||
|
edit (row) { |
||||||
|
this.form = JSON.parse(JSON.stringify(row)) |
||||||
|
this.bannerVisible = true |
||||||
|
}, |
||||||
|
// banner弹框提交 |
||||||
|
submitBanner () { |
||||||
|
const { form } = this |
||||||
|
if (!form.banner) return Util.errorMsg('请上传图片') |
||||||
|
this.$post(this.api[form.id ? 'updateMarketing' : 'saveMarketing'], form).then(res => { |
||||||
|
this.getList() |
||||||
|
this.bannerVisible = false |
||||||
|
}).catch(res => { }) |
||||||
|
}, |
||||||
|
handleDelete (row) { |
||||||
|
this.$confirm("此删除操作不可逆，是否确认删除选中项？", "提示", { |
||||||
|
type: "warning" |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
this.$post(`${this.api.delMarketing}?ids=${row.id}`).then(res => { |
||||||
|
Util.successMsg("删除成功"); |
||||||
|
this.getList(); |
||||||
|
}).catch(res => { |
||||||
|
}); |
||||||
|
}) |
||||||
|
.catch(() => { |
||||||
|
}); |
||||||
|
}, |
||||||
|
switchOff (val, row) { |
||||||
|
this.$post(`${this.api.bannerEnableOrDisable}?id=${row.id}&isDisable=${row.isOpen}`).then(res => { }).catch(err => { }) |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.m-l-10 { |
||||||
|
margin-left: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
$avatar-width: 104px; |
||||||
|
|
||||||
|
/deep/ .avatar-uploader { |
||||||
|
.el-upload { |
||||||
|
position: relative; |
||||||
|
width: $avatar-width; |
||||||
|
height: $avatar-width; |
||||||
|
border: 1px dashed #d9d9d9; |
||||||
|
border-radius: 2px; |
||||||
|
cursor: pointer; |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
&:hover { |
||||||
|
border-color: #409eff; |
||||||
|
} |
||||||
|
|
||||||
|
.uploader-default { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: center; |
||||||
|
width: $avatar-width !important; |
||||||
|
height: $avatar-width; |
||||||
|
text-align: center; |
||||||
|
background: rgba(0, 0, 0, 0.04); |
||||||
|
|
||||||
|
i { |
||||||
|
font-size: 20px; |
||||||
|
font-weight: bold; |
||||||
|
color: #8c939d; |
||||||
|
} |
||||||
|
|
||||||
|
p { |
||||||
|
margin-top: 10px; |
||||||
|
font-size: 14px; |
||||||
|
color: rgba(0, 0, 0, 0.65); |
||||||
|
line-height: 1; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.avatar { |
||||||
|
width: $avatar-width; |
||||||
|
height: $avatar-width; |
||||||
|
display: block; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.el-upload__tip { |
||||||
|
margin-top: 0; |
||||||
|
|
||||||
|
p { |
||||||
|
font-size: 14px; |
||||||
|
color: rgba(0, 0, 0, 0.45); |
||||||
|
line-height: 1; |
||||||
|
|
||||||
|
&:first-child { |
||||||
|
margin-bottom: 5px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
File diff suppressed because it is too large
Load Diff
@ -1,55 +0,0 @@ |
|||||||
<template> |
|
||||||
<div class="page"> |
|
||||||
<div class="tabs"> |
|
||||||
<a class="item" |
|
||||||
v-for="(item,index) in tabs" |
|
||||||
:key="index" |
|
||||||
:class="{active: index == active}" |
|
||||||
@click="tabChange(index)">{{ item }}</a> |
|
||||||
</div> |
|
||||||
<div class="page-content"> |
|
||||||
<product v-if="active == 'first'" /> |
|
||||||
<market v-if="active == 'second'" /> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import Setting from "@/setting"; |
|
||||||
import product from "./product"; |
|
||||||
import market from "./market"; |
|
||||||
export default { |
|
||||||
components: { |
|
||||||
product, |
|
||||||
market, |
|
||||||
}, |
|
||||||
data () { |
|
||||||
return { |
|
||||||
active: "first", // 当前标签页 |
|
||||||
tabs: { |
|
||||||
first: "产品管理", |
|
||||||
second: "营销推广管理", |
|
||||||
}, |
|
||||||
showTabs: true |
|
||||||
}; |
|
||||||
}, |
|
||||||
mounted () { |
|
||||||
Setting.dynamicRoute && this.initTabs(); |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
tabChange (index) { |
|
||||||
this.active = index; |
|
||||||
}, |
|
||||||
initTabs () { |
|
||||||
const { btns } = this.$store.state |
|
||||||
const tab1 = btns.includes('/shop:产品管理') |
|
||||||
const tab2 = btns.includes('/shop:营销推广管理') |
|
||||||
tab1 || delete this.tabs.first |
|
||||||
tab2 || delete this.tabs.second |
|
||||||
} |
|
||||||
} |
|
||||||
}; |
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss" scoped> |
|
||||||
</style> |
|
||||||
@ -1,314 +0,0 @@ |
|||||||
<template> |
|
||||||
<!-- 营销推广管理 --> |
|
||||||
<div style="padding-top: 24px"> |
|
||||||
<div style="margin-bottom: 10px;text-align: right;"> |
|
||||||
<el-button v-auth="'/shop:营销推广管理:新增'" |
|
||||||
type="primary" |
|
||||||
round |
|
||||||
@click="add">新增</el-button> |
|
||||||
</div> |
|
||||||
<el-table :data="list" |
|
||||||
class="table" |
|
||||||
ref="table" |
|
||||||
stripe |
|
||||||
header-align="center" |
|
||||||
row-key="id"> |
|
||||||
<el-table-column type="index" |
|
||||||
width="100" |
|
||||||
label="序号" |
|
||||||
align="center"></el-table-column> |
|
||||||
<el-table-column prop="courseName" |
|
||||||
label="图片" |
|
||||||
min-width="150" |
|
||||||
align="center"> |
|
||||||
<template slot-scope="scope"> |
|
||||||
<img width="100" |
|
||||||
:src="scope.row.banner" |
|
||||||
alt=""> |
|
||||||
</template> |
|
||||||
</el-table-column> |
|
||||||
<el-table-column prop="title" |
|
||||||
label="标题" |
|
||||||
min-width="150" |
|
||||||
align="center"></el-table-column> |
|
||||||
<el-table-column prop="subheading" |
|
||||||
label="副标题" |
|
||||||
min-width="150" |
|
||||||
align="center"></el-table-column> |
|
||||||
<el-table-column prop="url" |
|
||||||
label="链接" |
|
||||||
min-width="150" |
|
||||||
align="center"></el-table-column> |
|
||||||
<el-table-column label="操作" |
|
||||||
align="center" |
|
||||||
width="250"> |
|
||||||
<template slot-scope="scope"> |
|
||||||
<el-switch v-model="scope.row.isOpen" |
|
||||||
:active-value="0" |
|
||||||
:inactive-value="1" |
|
||||||
@change="switchOff($event, scope.row)" |
|
||||||
v-auth="'/shop:营销推广管理:禁用'"> |
|
||||||
</el-switch> |
|
||||||
<el-button style="margin-left: 10px;" |
|
||||||
v-auth="'/shop:营销推广管理:编辑'" |
|
||||||
type="text" |
|
||||||
@click="edit(scope.row)">编辑</el-button> |
|
||||||
<el-button v-auth="'/shop:营销推广管理:删除'" |
|
||||||
type="text" |
|
||||||
@click="handleDelete(scope.row)">删除</el-button> |
|
||||||
</template> |
|
||||||
</el-table-column> |
|
||||||
</el-table> |
|
||||||
|
|
||||||
<el-dialog :title="(form.id ? '编辑' : '新增') + 'banner'" |
|
||||||
:visible.sync="bannerVisible" |
|
||||||
width="500px" |
|
||||||
class="dialog" |
|
||||||
:close-on-click-modal="false"> |
|
||||||
<el-form ref="form" |
|
||||||
label-width="60px"> |
|
||||||
<el-form-item label="图片"> |
|
||||||
<el-upload class="avatar-uploader" |
|
||||||
accept=".jpg,.png,.jpeg,.gif" |
|
||||||
:on-change="changeFile" |
|
||||||
:show-file-list="false" |
|
||||||
action="" |
|
||||||
:auto-upload="false"> |
|
||||||
<img v-if="form.banner" |
|
||||||
:src="form.banner" |
|
||||||
class="avatar"> |
|
||||||
<div class="uploader-default" |
|
||||||
v-else> |
|
||||||
<i class="el-icon-plus"></i> |
|
||||||
<p>上传图片</p> |
|
||||||
</div> |
|
||||||
</el-upload> |
|
||||||
</el-form-item> |
|
||||||
<el-form-item label="标题"> |
|
||||||
<el-input v-model="form.title" |
|
||||||
placeholder="请输入标题" |
|
||||||
maxlength="100"></el-input> |
|
||||||
</el-form-item> |
|
||||||
<el-form-item label="副标题"> |
|
||||||
<el-input v-model="form.subheading" |
|
||||||
placeholder="请输入副标题" |
|
||||||
maxlength="100"></el-input> |
|
||||||
</el-form-item> |
|
||||||
<el-form-item label="链接"> |
|
||||||
<el-input v-model="form.url" |
|
||||||
placeholder="请输入链接" |
|
||||||
maxlength="100"></el-input> |
|
||||||
</el-form-item> |
|
||||||
</el-form> |
|
||||||
<span slot="footer" |
|
||||||
class="dialog-footer"> |
|
||||||
<el-button @click="bannerVisible = false">取消</el-button> |
|
||||||
<el-button type="primary" |
|
||||||
@click="submitBanner">确定</el-button> |
|
||||||
</span> |
|
||||||
</el-dialog> |
|
||||||
|
|
||||||
<!-- 剪裁组件弹窗 --> |
|
||||||
<el-dialog title="图片裁剪" |
|
||||||
append-to-body |
|
||||||
:visible.sync="cropperModel" |
|
||||||
width="1100px" |
|
||||||
:close-on-click-modal="false"> |
|
||||||
<Cropper ref="cropper" |
|
||||||
:img-file.sync="file" |
|
||||||
:is-upload="isUpload" |
|
||||||
:fixed="true" |
|
||||||
:fixedNumber.sync="fixedNumber" |
|
||||||
:autoCropWidth="500" |
|
||||||
:autoCropHeight="138.8" |
|
||||||
@upload="customUpload" /> |
|
||||||
</el-dialog> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import Util from "@/libs/util"; |
|
||||||
import Setting from '@/setting' |
|
||||||
import Cropper from '@/components/img-upload/Cropper' |
|
||||||
import Axios from 'axios' |
|
||||||
import Oss from '@/components/upload/upload.js' |
|
||||||
export default { |
|
||||||
data () { |
|
||||||
return { |
|
||||||
headers: { |
|
||||||
token: sessionStorage.getItem("token") |
|
||||||
}, |
|
||||||
list: [], |
|
||||||
bannerVisible: false, |
|
||||||
form: { |
|
||||||
id: '', |
|
||||||
banner: '', |
|
||||||
title: '', |
|
||||||
subheading: '', |
|
||||||
url: '', |
|
||||||
}, |
|
||||||
cropperModel: false, |
|
||||||
isUpload: false, |
|
||||||
fixedNumber: [5.4, 1], |
|
||||||
file: '' |
|
||||||
}; |
|
||||||
}, |
|
||||||
components: { |
|
||||||
Cropper |
|
||||||
}, |
|
||||||
mounted () { |
|
||||||
this.getList() |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
getList () { |
|
||||||
this.$post(this.api.listMarketing, { |
|
||||||
pageNum: 1, |
|
||||||
pageSize: 1000 |
|
||||||
}).then(({ page }) => { |
|
||||||
this.list = page.records; |
|
||||||
this.total = page.total; |
|
||||||
}).catch(res => { |
|
||||||
}); |
|
||||||
}, |
|
||||||
// 图片裁剪上传事件 |
|
||||||
customUpload (data) { |
|
||||||
data.name = this.file.name |
|
||||||
this.imgUpload(data) |
|
||||||
}, |
|
||||||
// 图片上传到服务器 |
|
||||||
imgUpload (formData) { |
|
||||||
this.isUpload = true |
|
||||||
Oss.upload(formData).then(res => { |
|
||||||
this.form.banner && Oss.del(this.form.banner) |
|
||||||
this.form.banner = res.url |
|
||||||
}) |
|
||||||
this.$refs.cropper.isDisabled = false |
|
||||||
this.isUpload = false |
|
||||||
this.cropperModel = false |
|
||||||
}, |
|
||||||
// 图片改变钩子 |
|
||||||
changeFile (file) { |
|
||||||
const { size, name } = file |
|
||||||
const ext = name.substring(name.lastIndexOf('.') + 1) |
|
||||||
if (!Util.isImg(ext)) { |
|
||||||
this.$message.error('请上传图片！') |
|
||||||
return false |
|
||||||
} |
|
||||||
this.file = file |
|
||||||
this.cropperModel = true |
|
||||||
this.$nextTick(() => { |
|
||||||
this.$refs.cropper.updateImg({ |
|
||||||
url: window.URL.createObjectURL(file.raw), |
|
||||||
size: file.size |
|
||||||
}) |
|
||||||
}) |
|
||||||
}, |
|
||||||
add () { |
|
||||||
this.form = { |
|
||||||
id: '', |
|
||||||
banner: '', |
|
||||||
title: '', |
|
||||||
subheading: '', |
|
||||||
url: '', |
|
||||||
} |
|
||||||
this.bannerVisible = true |
|
||||||
}, |
|
||||||
edit (row) { |
|
||||||
this.form = JSON.parse(JSON.stringify(row)) |
|
||||||
this.bannerVisible = true |
|
||||||
}, |
|
||||||
// banner弹框提交 |
|
||||||
submitBanner () { |
|
||||||
const { form } = this |
|
||||||
if (!form.banner) return Util.errorMsg('请上传图片') |
|
||||||
this.$post(this.api[form.id ? 'updateMarketing' : 'saveMarketing'], form).then(res => { |
|
||||||
this.getList() |
|
||||||
this.bannerVisible = false |
|
||||||
}).catch(res => { }) |
|
||||||
}, |
|
||||||
handleDelete (row) { |
|
||||||
this.$confirm("此删除操作不可逆，是否确认删除选中项？", "提示", { |
|
||||||
type: "warning" |
|
||||||
}) |
|
||||||
.then(() => { |
|
||||||
this.$post(`${this.api.delMarketing}?ids=${row.id}`).then(res => { |
|
||||||
Util.successMsg("删除成功"); |
|
||||||
this.getList(); |
|
||||||
}).catch(res => { |
|
||||||
}); |
|
||||||
}) |
|
||||||
.catch(() => { |
|
||||||
}); |
|
||||||
}, |
|
||||||
switchOff (val, row) { |
|
||||||
this.$post(`${this.api.bannerEnableOrDisable}?id=${row.id}&isDisable=${row.isOpen}`).then(res => { }).catch(err => { }) |
|
||||||
} |
|
||||||
} |
|
||||||
}; |
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss" scoped> |
|
||||||
.m-l-10 { |
|
||||||
margin-left: 10px; |
|
||||||
} |
|
||||||
|
|
||||||
$avatar-width: 104px; |
|
||||||
/deep/ .avatar-uploader { |
|
||||||
.el-upload { |
|
||||||
position: relative; |
|
||||||
width: $avatar-width; |
|
||||||
height: $avatar-width; |
|
||||||
border: 1px dashed #d9d9d9; |
|
||||||
border-radius: 2px; |
|
||||||
cursor: pointer; |
|
||||||
overflow: hidden; |
|
||||||
|
|
||||||
&:hover { |
|
||||||
border-color: #409eff; |
|
||||||
} |
|
||||||
|
|
||||||
.uploader-default { |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
justify-content: center; |
|
||||||
width: $avatar-width !important; |
|
||||||
height: $avatar-width; |
|
||||||
text-align: center; |
|
||||||
background: rgba(0, 0, 0, 0.04); |
|
||||||
|
|
||||||
i { |
|
||||||
font-size: 20px; |
|
||||||
font-weight: bold; |
|
||||||
color: #8c939d; |
|
||||||
} |
|
||||||
|
|
||||||
p { |
|
||||||
margin-top: 10px; |
|
||||||
font-size: 14px; |
|
||||||
color: rgba(0, 0, 0, 0.65); |
|
||||||
line-height: 1; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.avatar { |
|
||||||
width: $avatar-width; |
|
||||||
height: $avatar-width; |
|
||||||
display: block; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.el-upload__tip { |
|
||||||
margin-top: 0; |
|
||||||
|
|
||||||
p { |
|
||||||
font-size: 14px; |
|
||||||
color: rgba(0, 0, 0, 0.45); |
|
||||||
line-height: 1; |
|
||||||
|
|
||||||
&:first-child { |
|
||||||
margin-bottom: 5px; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -0,0 +1,217 @@ |
|||||||
|
<template> |
||||||
|
<div class="wrap"> |
||||||
|
<div class="block block1"> |
||||||
|
<div class="title">系统后台</div> |
||||||
|
<div class="apps"> |
||||||
|
<div class="app"> |
||||||
|
<img src="@/assets/img/workbench/1.png" alt=""> |
||||||
|
<p class="name">Python系统</p> |
||||||
|
</div> |
||||||
|
<div class="app"> |
||||||
|
<img src="@/assets/img/workbench/2.png" alt=""> |
||||||
|
<p class="name">理论考试系统</p> |
||||||
|
</div> |
||||||
|
<div class="app"> |
||||||
|
<img src="@/assets/img/workbench/3.png" alt=""> |
||||||
|
<p class="name">金融产品设计及数字化营销沙盘系统</p> |
||||||
|
</div> |
||||||
|
<div class="app"> |
||||||
|
<img src="@/assets/img/workbench/4.png" alt=""> |
||||||
|
<p class="name">银行综合系统</p> |
||||||
|
</div> |
||||||
|
<div class="app"> |
||||||
|
<img src="@/assets/img/workbench/5.png" alt=""> |
||||||
|
<p class="name">众筹系统</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="block block2"> |
||||||
|
<div class="title">职站教学后台</div> |
||||||
|
<div class="apps"> |
||||||
|
<div class="app" @click="to('/curriculum')"> |
||||||
|
<img src="@/assets/img/workbench/6.png" alt=""> |
||||||
|
<p class="name">教学课程管理</p> |
||||||
|
</div> |
||||||
|
<div class="app" @click="to('/theoreticalCourse')"> |
||||||
|
<img src="@/assets/img/workbench/7.png" alt=""> |
||||||
|
<p class="name">精品课程管理</p> |
||||||
|
</div> |
||||||
|
<div class="app" @click="to('/information')"> |
||||||
|
<img src="@/assets/img/workbench/8.png" alt=""> |
||||||
|
<p class="name">资讯管理</p> |
||||||
|
</div> |
||||||
|
<div class="app" @click="to('/curriculum')"> |
||||||
|
<img src="@/assets/img/workbench/9.png" alt=""> |
||||||
|
<p class="name">资源库</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="block middle" @click="to('/shop')"> |
||||||
|
<img src="@/assets/img/workbench/10.png" alt=""> |
||||||
|
<p class="name">产品管理</p> |
||||||
|
</div> |
||||||
|
<div class="block middle" @click="to('/market')"> |
||||||
|
<img src="@/assets/img/workbench/11.png" alt=""> |
||||||
|
<p class="name">营销管理</p> |
||||||
|
</div> |
||||||
|
<div class="block middle" @click="to('/parnerOperation')"> |
||||||
|
<img src="@/assets/img/workbench/12.png" alt=""> |
||||||
|
<p class="name">小程序内容管理</p> |
||||||
|
</div> |
||||||
|
<div class="block middle" @click="to('/parner')"> |
||||||
|
<img src="@/assets/img/workbench/13.png" alt=""> |
||||||
|
<p class="name">销售代理人管理</p> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="block block3"> |
||||||
|
<div class="title">运营后台</div> |
||||||
|
<div class="apps"> |
||||||
|
<div class="app" @click="to('/match')"> |
||||||
|
<img src="@/assets/img/workbench/14.png" alt=""> |
||||||
|
<p class="name">大赛管理</p> |
||||||
|
</div> |
||||||
|
<div class="app" @click="to('/data')"> |
||||||
|
<img src="@/assets/img/workbench/15.png" alt=""> |
||||||
|
<p class="name">数据管理</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import Setting from '@/setting' |
||||||
|
export default { |
||||||
|
data () { |
||||||
|
return { |
||||||
|
|
||||||
|
|
||||||
|
}; |
||||||
|
}, |
||||||
|
mounted () { |
||||||
|
|
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getData () { |
||||||
|
this.loading = true |
||||||
|
this.$post(this.api.userManagementList, { |
||||||
|
countries: this.form.countries, |
||||||
|
provinceId: this.form.provinces, |
||||||
|
cityId: this.form.city, |
||||||
|
platformId: this.form.platformId, |
||||||
|
schoolId: this.form.schoolId, |
||||||
|
month: this.form.month, |
||||||
|
creationTime: this.form.startTime, |
||||||
|
endTime: this.form.endTime, |
||||||
|
roleId: this.form.accountRole, |
||||||
|
searchContent: this.form.keyword, |
||||||
|
pageNum: this.page, |
||||||
|
pageSize: this.pageSize |
||||||
|
}).then(({ page }) => { |
||||||
|
const { records, total } = page |
||||||
|
records.map(e => { |
||||||
|
e.enable = e.displayState |
||||||
|
if (e.enable === 2) { |
||||||
|
e.enable = 1 |
||||||
|
} |
||||||
|
}) |
||||||
|
this.userData = records |
||||||
|
this.totals = total |
||||||
|
this.loading = false |
||||||
|
}).catch(res => { |
||||||
|
this.loading = false |
||||||
|
}) |
||||||
|
}, |
||||||
|
to (path) { |
||||||
|
this.$router.push(path) |
||||||
|
}, |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.wrap { |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
justify-content: space-between; |
||||||
|
width: 1000px; |
||||||
|
margin: 0 auto; |
||||||
|
|
||||||
|
.block { |
||||||
|
padding: 20px 20px 0; |
||||||
|
background-color: #fff; |
||||||
|
border-radius: 20px; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
|
||||||
|
.block1 { |
||||||
|
width: 55%; |
||||||
|
|
||||||
|
.app { |
||||||
|
width: 30%; |
||||||
|
} |
||||||
|
|
||||||
|
img { |
||||||
|
margin-bottom: 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.block2 { |
||||||
|
width: 40%; |
||||||
|
|
||||||
|
.app { |
||||||
|
width: 48%; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.block3 { |
||||||
|
width: 100%; |
||||||
|
margin-top: 30px; |
||||||
|
|
||||||
|
.app { |
||||||
|
display: inline-flex; |
||||||
|
align-items: center; |
||||||
|
margin-right: 100px; |
||||||
|
} |
||||||
|
|
||||||
|
img { |
||||||
|
margin-right: 20px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.middle { |
||||||
|
display: inline-flex; |
||||||
|
align-items: center; |
||||||
|
width: 200px; |
||||||
|
padding: 20px; |
||||||
|
margin-top: 30px; |
||||||
|
cursor: pointer; |
||||||
|
|
||||||
|
img { |
||||||
|
margin-right: 20px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.title { |
||||||
|
margin-bottom: 30px; |
||||||
|
font-size: 18px; |
||||||
|
} |
||||||
|
|
||||||
|
.apps { |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
} |
||||||
|
|
||||||
|
.app { |
||||||
|
margin-bottom: 30px; |
||||||
|
text-align: center; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
.name { |
||||||
|
font-size: 14px; |
||||||
|
color: #333; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue