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