parent
1e5e311e46
commit
cb2e73a23f
17 changed files with 631 additions and 19 deletions
|
After Width: | Height: | Size: 414 B |
@ -0,0 +1,293 @@ |
||||
<template> |
||||
<div class="page" |
||||
style="padding-bottom: 70px"> |
||||
<el-form label-width="170px" |
||||
label-suffix=":" |
||||
class="input-form model" |
||||
size="small"> |
||||
<el-form-item class="req" |
||||
label="封面图"> |
||||
<el-upload class="m-t-10" |
||||
action="#" |
||||
list-type="picture-card" |
||||
:on-remove="handleRemove" |
||||
:limit="5" |
||||
:file-list="pics" |
||||
:on-exceed="handleExceed" |
||||
:http-request="handleRequest"> |
||||
<i class="el-icon-plus"></i> |
||||
</el-upload> |
||||
</el-form-item> |
||||
<el-form-item class="req" |
||||
label="产品名称"> |
||||
<el-input id="firstInput" |
||||
placeholder="请输入产品名称" |
||||
v-model="form.productName" |
||||
maxlength="40" |
||||
clearable></el-input> |
||||
</el-form-item> |
||||
<el-form-item class="req" |
||||
label="产品详情"> |
||||
<el-radio-group v-model="form.details"> |
||||
<el-radio label="1">详情</el-radio> |
||||
<el-radio label="2">链接</el-radio> |
||||
</el-radio-group> |
||||
</el-form-item> |
||||
<template v-if="form.details === '1'"> |
||||
<el-form-item class="req" |
||||
label="详情内容"> |
||||
<Editor api-key='rnk6zw9v267xqz7pf98twt1vmrvltmd436je7a642pckltda' |
||||
v-model="form.description" |
||||
:init="editorConfig" /> |
||||
</el-form-item> |
||||
<el-form-item class="req" |
||||
label="关联产品"> |
||||
<el-button>选择</el-button> |
||||
</el-form-item> |
||||
</template> |
||||
|
||||
<template v-else> |
||||
<el-form-item class="req" |
||||
label="链接类型"> |
||||
<el-radio-group v-model="form.link"> |
||||
<el-radio label="1">小程序内链接</el-radio> |
||||
<el-radio label="2">外链接</el-radio> |
||||
</el-radio-group> |
||||
</el-form-item> |
||||
<el-form-item v-if="form.link === '1'" |
||||
class="req" |
||||
label="链接内容"> |
||||
<el-select style="width: 150px" |
||||
v-model="form.selectLinkId" |
||||
clearable |
||||
@change="getDetails" |
||||
@clear="clearDetails"> |
||||
<el-option v-for="item in linkContents" |
||||
:key="item.id" |
||||
:label="item.name" |
||||
:value="item.id"> |
||||
</el-option> |
||||
</el-select> |
||||
<el-select class="m-l-20" |
||||
v-model="form.correspondingLinkId" |
||||
clearable> |
||||
<el-option v-for="item in linkDetails" |
||||
:key="item.id" |
||||
:label="item.name" |
||||
:value="item.id"> |
||||
</el-option> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item v-else |
||||
class="req" |
||||
label="跳转链接"> |
||||
<el-input style="width: 400px" |
||||
placeholder="请输入跳转链接" |
||||
v-model="form.jumpLink" |
||||
clearable></el-input> |
||||
</el-form-item> |
||||
</template> |
||||
</el-form> |
||||
|
||||
<div class="btns"> |
||||
<el-button @click="save(0)">保存</el-button> |
||||
<el-button type="primary" |
||||
@click="save(1)">发布</el-button> |
||||
<el-button @click="$router.back()">取消</el-button> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import Util from "@/libs/util"; |
||||
import Editor from '@tinymce/tinymce-vue' |
||||
import editorConfig from '@/components/editor' |
||||
import Setting from "@/setting"; |
||||
import Upload from '@/components/upload'; |
||||
import Oss from '@/components/upload/upload.js' |
||||
export default { |
||||
data () { |
||||
return { |
||||
id: this.$route.query.id || '', |
||||
editorConfig, |
||||
form: { |
||||
correspondingLinkId: '', |
||||
coverUrl: '', |
||||
details: '1', |
||||
description: '', |
||||
jumpLink: '', |
||||
link: '1', |
||||
productName: '', |
||||
selectLinkId: '2', |
||||
type: 0, |
||||
}, |
||||
linkContents: [ |
||||
{ |
||||
id: '2', |
||||
name: '活动' |
||||
}, |
||||
{ |
||||
id: '1', |
||||
name: '商品' |
||||
}, |
||||
{ |
||||
id: '3', |
||||
name: '供应商' |
||||
}, |
||||
{ |
||||
id: '4', |
||||
name: '店铺' |
||||
}, |
||||
], |
||||
linkDetails: [], |
||||
submiting: false, |
||||
updateTime: 0, |
||||
pics: [] |
||||
}; |
||||
}, |
||||
components: { |
||||
Editor, |
||||
Upload |
||||
}, |
||||
mounted () { |
||||
this.$store.commit('user/setCrumbs', [ |
||||
{ |
||||
name: '小程序管理', |
||||
path: '/miniProgramMg/index' |
||||
}, |
||||
{ |
||||
name: '首页设置', |
||||
path: '/miniProgramMg/list?type=0' |
||||
}, |
||||
{ |
||||
name: '新增爆款推荐', |
||||
}, |
||||
]) |
||||
this.id ? this.getData() : this.getDetails() |
||||
}, |
||||
methods: { |
||||
getData () { |
||||
this.$post(`${this.api.findExplosive}?id=${this.id}`).then(({ data }) => { |
||||
// 封面图片回显 |
||||
if (data.coverUrl) { |
||||
const urls = data.coverUrl.split(',') |
||||
this.pics = urls.map(e => { |
||||
return { |
||||
name: e, |
||||
url: e |
||||
} |
||||
}) |
||||
} |
||||
this.form = data |
||||
this.getDetails() |
||||
}).catch(err => { }) |
||||
}, |
||||
// 链接详情（要查询4个模块的列表） |
||||
async getDetails (id) { |
||||
if (id) this.form.correspondingLinkId = '' |
||||
const { selectLinkId } = this.form |
||||
// 活动列表 |
||||
if (selectLinkId === '2') { |
||||
const { data } = await this.$post(this.api.postLoginActivity, { |
||||
pageNum: 1, |
||||
pageSize: 1000, |
||||
listType: 0, |
||||
}) |
||||
data.records.forEach(e => { |
||||
e.name = e.competitionName |
||||
e.id = +e.id |
||||
}) |
||||
this.linkDetails = data.records |
||||
} else if (selectLinkId === '3') { // 供应商 |
||||
const { data } = await this.$post(this.api.selectEnterpriseCertificationList, { |
||||
pageNum: 1, |
||||
pageSize: 1000, |
||||
platformSource: 6, |
||||
}) |
||||
data.records.forEach(e => { |
||||
e.name = e.companyName |
||||
e.id = +e.id |
||||
}) |
||||
this.linkDetails = data.records |
||||
} else { |
||||
this.linkDetails = [] |
||||
} |
||||
}, |
||||
// 清除链接详情 |
||||
clearDetails () { |
||||
this.form.correspondingLinkId = '' |
||||
this.linkDetails = [] |
||||
}, |
||||
|
||||
handleExceed (files, fileList) { |
||||
Util.warningMsg(`当前限制选择 5 个文件，如需更换，请删除上一个文件再重新选择！`); |
||||
}, |
||||
beforeRemove (file, fileList) { |
||||
return this.$confirm(`确定移除 ${file.name}？`); |
||||
}, |
||||
handleRemove () { |
||||
Oss.del(file.url) |
||||
this.pics = fileList |
||||
}, |
||||
uploadError (err, file, fileList) { |
||||
this.$message({ |
||||
message: "上传出错，请重试！", |
||||
type: "error", |
||||
center: true |
||||
}) |
||||
}, |
||||
// 自定义上传 |
||||
async handleRequest ({ file }) { |
||||
Oss.upload(file).then(({ url }) => { |
||||
this.pics.push({ |
||||
url |
||||
}) |
||||
}) |
||||
}, |
||||
// 提交 |
||||
save (status) { |
||||
if (this.submiting) return false |
||||
const { form } = this |
||||
if (!form.productName) return Util.warningMsg('请填写产品名称'); |
||||
// 发布需要校验 |
||||
if (status) { |
||||
if (!this.pics.length) return Util.warningMsg('请上传封面图'); |
||||
if (form.details === '1' && !form.description) return Util.warningMsg('请填写详情内容'); |
||||
} |
||||
form.coverUrl = this.pics.map(e => e.url).join() |
||||
form.publishStatus = status |
||||
form.id = this.$route.query.id |
||||
this.submiting = true |
||||
if (form.id) { |
||||
this.$post(this.api.updateExplosive, form).then(res => { |
||||
Util.successMsg("修改成功"); |
||||
this.$router.back() |
||||
}).catch(err => { |
||||
this.submiting = false |
||||
}); |
||||
} else { |
||||
this.$post(this.api.saveExplosive, form).then(res => { |
||||
Util.successMsg("创建成功"); |
||||
this.$router.back() |
||||
}).catch(err => { |
||||
this.submiting = false |
||||
}); |
||||
} |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
/deep/.req { |
||||
.el-form-item__label { |
||||
&:before { |
||||
content: '*'; |
||||
margin-right: 5px; |
||||
font-size: 18px; |
||||
vertical-align: middle; |
||||
color: #f00; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,54 @@ |
||||
<template> |
||||
<div class="page"> |
||||
<div class="c-wrap"> |
||||
<img width="100%" |
||||
src="http://124.71.79.122/images/miniProgram/index-banner.jpg" |
||||
alt=""> |
||||
<div class="cover" |
||||
@click="toSet(1)">设置banner</div> |
||||
</div> |
||||
|
||||
<div class="c-wrap m-t-20"> |
||||
<img width="100%" |
||||
src="http://124.71.79.122/images/miniProgram/index-hot.jpg" |
||||
alt=""> |
||||
<div class="cover" |
||||
@click="toSet(0)">设置爆款</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import Setting from "@/setting"; |
||||
export default { |
||||
data () { |
||||
return { |
||||
|
||||
}; |
||||
}, |
||||
mounted () { |
||||
this.$store.commit('user/setCrumbs', [ |
||||
{ |
||||
name: '小程序管理', |
||||
}, |
||||
{ |
||||
name: '首页设置', |
||||
}, |
||||
]) |
||||
}, |
||||
methods: { |
||||
// 页面设置 |
||||
toSet (i) { |
||||
this.$router.push(`list?type=${i}`) |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import '../../../../styles/page/page.scss'; |
||||
.page { |
||||
width: 400px; |
||||
margin: 0 auto; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,185 @@ |
||||
<template> |
||||
<div class="page"> |
||||
<div class="text-right m-b-20"> |
||||
<template v-if="sorting"> |
||||
<el-button type="primary" |
||||
@click="cancelSort">取消</el-button> |
||||
<el-button type="primary" |
||||
@click="sortSubmit">保存</el-button> |
||||
</template> |
||||
<template v-if="!sorting"> |
||||
<el-button type="primary" |
||||
@click="openSort">更改排序 |
||||
</el-button> |
||||
<el-button type="primary" |
||||
@click="toAdd">新增 |
||||
</el-button> |
||||
</template> |
||||
</div> |
||||
<el-table :data="list" |
||||
class="table" |
||||
ref="table" |
||||
stripe |
||||
header-align="center" |
||||
row-key="id"> |
||||
<el-table-column type="index" |
||||
width="60" |
||||
label="序号" |
||||
align="center"></el-table-column> |
||||
<el-table-column label="封面" |
||||
min-width="120" |
||||
align="center"> |
||||
<template slot-scope="scope"> |
||||
<img v-if="scope.row.coverUrl" |
||||
class="pic" |
||||
:src="scope.row.coverUrl" |
||||
alt=""> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="productName" |
||||
label="产品名称" |
||||
min-width="130" |
||||
align="center"></el-table-column> |
||||
<el-table-column label="排序" |
||||
align="center"> |
||||
<template slot-scope="scope"> |
||||
<i v-if="scope.$index" |
||||
:class="['sort el-icon-top', {sorting}]" |
||||
@click="handleSort(scope.row, 'up', scope.$index)"></i> |
||||
<i v-if="scope.$index !== list.length - 1" |
||||
:class="['sort el-icon-bottom', {sorting}]" |
||||
@click="handleSort(scope.row, 'down', scope.$index)"></i> |
||||
</template> |
||||
</el-table-column> |
||||
<!-- <el-table-column label="状态" |
||||
align="center"> |
||||
<template slot-scope="scope"> |
||||
{{ scope.row.enabledState ? '禁用' : '启用' }} |
||||
</template> |
||||
</el-table-column> --> |
||||
<el-table-column label="操作" |
||||
width="200" |
||||
align="center"> |
||||
<template slot-scope="scope"> |
||||
<el-button type="text" |
||||
@click.stop="toEdit(scope.row)">编辑</el-button> |
||||
<el-button type="text" |
||||
@click.stop="del(scope.row)">删除</el-button> |
||||
<el-switch class="m-l-10" |
||||
v-model="scope.row.enabledState" |
||||
:active-value="0" |
||||
:inactive-value="1" |
||||
@change="switchOff($event, scope.row)"> |
||||
</el-switch> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import Util from "@/libs/util"; |
||||
import Setting from '@/setting' |
||||
export default { |
||||
data () { |
||||
return { |
||||
type: +this.$route.query.type, |
||||
list: [], |
||||
sorting: false, |
||||
}; |
||||
}, |
||||
mounted () { |
||||
this.$store.commit('user/setCrumbs', [ |
||||
{ |
||||
name: '小程序管理', |
||||
path: '/miniProgramMg/index' |
||||
}, |
||||
{ |
||||
name: '首页设置', |
||||
path: '/miniProgramMg/list' |
||||
}, |
||||
{ |
||||
name: '设置爆款', |
||||
}, |
||||
]) |
||||
this.getData(); |
||||
}, |
||||
methods: { |
||||
// 获取分类 |
||||
async getData () { |
||||
const { data } = await this.$post(this.api.explosiveList, { |
||||
pageNum: 1, |
||||
pageSize: 10000, |
||||
type: this.type |
||||
}) |
||||
data.records.forEach(e => { |
||||
if (e.coverUrl.includes(',')) e.coverUrl = e.coverUrl.split(',')[0] |
||||
}) |
||||
this.list = data.records |
||||
}, |
||||
// 禁用启用 |
||||
switchOff (val, row) { |
||||
this.$post(this.api.updateColumn, row).then(res => { }).catch((res) => { }) |
||||
}, |
||||
del (row) { |
||||
this.$confirm("此删除操作不可逆，是否确认删除选中项？", "提示", { |
||||
type: "warning" |
||||
}).then(() => { |
||||
this.$post(this.api.delExplosive, [row.id]).then(res => { |
||||
Util.successMsg("删除成功"); |
||||
this.getData(); |
||||
}).catch(res => { }); |
||||
}).catch(() => { }); |
||||
}, |
||||
// 新增 |
||||
toAdd () { |
||||
this.$router.push(`add`) |
||||
}, |
||||
// 编辑 |
||||
toEdit (row) { |
||||
this.$router.push(`add?id=${row.id}`) |
||||
}, |
||||
// 递归处理list |
||||
handleSort (row, dir, i) { |
||||
if (!this.sorting) return false |
||||
const toIndex = dir === 'up' ? i - 1 : i + 1 |
||||
const temp = this.list.splice(i, 1); |
||||
this.list.splice(toIndex, 0, temp[0]); |
||||
}, |
||||
sortSubmit () { |
||||
this.$post(this.api.sortExplosive, this.list).then(res => { |
||||
Util.successMsg("保存成功"); |
||||
this.sorting = false; |
||||
this.getData(); |
||||
}).catch(res => { }); |
||||
}, |
||||
cancelSort () { |
||||
this.sorting = false; |
||||
this.list = JSON.parse(JSON.stringify(this.originList)); |
||||
}, |
||||
openSort () { |
||||
this.originList = JSON.parse(JSON.stringify(this.list)); |
||||
this.sorting = true; |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.pic { |
||||
width: 200px; |
||||
height: 120px; |
||||
margin: 10px 0; |
||||
object-fit: cover; |
||||
} |
||||
.sort { |
||||
margin: 0 10px; |
||||
font-size: 20px; |
||||
color: #ccc; |
||||
cursor: not-allowed; |
||||
&.sorting { |
||||
color: #333; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,30 @@ |
||||
import BasicLayout from '@/layouts/home' |
||||
|
||||
const meta = {} |
||||
|
||||
export default { |
||||
path: '/miniProgramMg', |
||||
name: 'miniProgramMg', |
||||
redirect: { |
||||
path: `/miniProgramMg/index`, |
||||
}, |
||||
meta, |
||||
component: BasicLayout, |
||||
children: [ |
||||
{ |
||||
path: `index`, |
||||
component: () => import('@/pages/miniProgramMg/index/inlet'), |
||||
meta: { title: '首页管理' } |
||||
}, |
||||
{ |
||||
path: `list`, |
||||
component: () => import('@/pages/miniProgramMg/index/list'), |
||||
meta: { title: '首页管理' } |
||||
}, |
||||
{ |
||||
path: `add`, |
||||
component: () => import('@/pages/miniProgramMg/index/add'), |
||||
meta: { title: '爆款推荐' } |
||||
}, |
||||
] |
||||
} |
||||
Loading…
Reference in new issue