parent
cb2e73a23f
commit
c53de0c857
6 changed files with 588 additions and 34 deletions
@ -0,0 +1,351 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<el-form label-width="170px" |
||||||
|
label-suffix=":" |
||||||
|
class="input-form model" |
||||||
|
size="small"> |
||||||
|
<el-form-item class="req" |
||||||
|
label="图片"> |
||||||
|
<el-upload class="avatar-uploader" |
||||||
|
accept=".jpg,.png,.jpeg,.gif" |
||||||
|
:limit="1" |
||||||
|
:on-exceed="handleExceed" |
||||||
|
:before-remove="beforeRemove" |
||||||
|
:on-remove="handleRemove" |
||||||
|
:on-error="uploadError" |
||||||
|
action="" |
||||||
|
:http-request="handleRequest"> |
||||||
|
<img v-if="form.coverUrl" |
||||||
|
:src="form.coverUrl" |
||||||
|
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 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.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 |
||||||
|
filterable> |
||||||
|
<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> |
||||||
|
</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 Upload from '@/components/upload'; |
||||||
|
import Oss from '@/components/upload/upload.js' |
||||||
|
export default { |
||||||
|
props: ['id'], |
||||||
|
data () { |
||||||
|
return { |
||||||
|
originForm: {}, |
||||||
|
form: { |
||||||
|
correspondingLinkId: '', |
||||||
|
coverUrl: '', |
||||||
|
details: '1', |
||||||
|
description: '', |
||||||
|
jumpLink: '', |
||||||
|
link: '1', |
||||||
|
productName: '', |
||||||
|
selectLinkId: '2', |
||||||
|
type: 1, |
||||||
|
}, |
||||||
|
linkContents: [ |
||||||
|
{ |
||||||
|
id: '2', |
||||||
|
name: '活动' |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: '1', |
||||||
|
name: '商品' |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: '3', |
||||||
|
name: '供应商' |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: '4', |
||||||
|
name: '店铺' |
||||||
|
}, |
||||||
|
], |
||||||
|
linkDetails: [], |
||||||
|
submiting: false, |
||||||
|
updateTime: 0, |
||||||
|
}; |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
id: { |
||||||
|
handler () { |
||||||
|
if (this.id) { |
||||||
|
this.getData() |
||||||
|
} else { |
||||||
|
this.pics = [] |
||||||
|
this.form = JSON.parse(JSON.stringify(this.originForm)) |
||||||
|
this.getDetails() |
||||||
|
} |
||||||
|
}, |
||||||
|
} |
||||||
|
}, |
||||||
|
components: { |
||||||
|
Upload |
||||||
|
}, |
||||||
|
mounted () { |
||||||
|
this.originForm = JSON.parse(JSON.stringify(this.form)) |
||||||
|
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(`当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！`); |
||||||
|
}, |
||||||
|
beforeRemove (file, fileList) { |
||||||
|
return this.$confirm(`确定移除 ${file.name}？`); |
||||||
|
}, |
||||||
|
handleRemove () { |
||||||
|
Oss.del(this.form.coverUrl) |
||||||
|
this.form.coverUrl = '' |
||||||
|
}, |
||||||
|
uploadError (err, file, fileList) { |
||||||
|
this.$message({ |
||||||
|
message: "上传出错，请重试！", |
||||||
|
type: "error", |
||||||
|
center: true |
||||||
|
}) |
||||||
|
}, |
||||||
|
// 封面自定义上传 |
||||||
|
async handleRequest ({ file }) { |
||||||
|
this.form.coverUrl && Oss.del(this.form.coverUrl) |
||||||
|
Oss.upload(file).then(res => { |
||||||
|
this.form.coverUrl = res.url |
||||||
|
}) |
||||||
|
}, |
||||||
|
// 提交 |
||||||
|
save (status) { |
||||||
|
if (this.submiting) return false |
||||||
|
const { form } = this |
||||||
|
if (!form.productName) return Util.warningMsg('请填写产品名称'); |
||||||
|
// 发布需要校验 |
||||||
|
if (status) { |
||||||
|
if (!form.coverUrl) return Util.warningMsg('请上传图片'); |
||||||
|
} |
||||||
|
form.publishStatus = status |
||||||
|
this.submiting = true |
||||||
|
if (this.id) { |
||||||
|
this.$post(this.api.updateExplosive, form).then(res => { |
||||||
|
this.submiting = false |
||||||
|
Util.successMsg("修改成功"); |
||||||
|
this.$emit('closeDia') |
||||||
|
}).catch(err => { |
||||||
|
this.submiting = false |
||||||
|
}); |
||||||
|
} else { |
||||||
|
this.$post(this.api.saveExplosive, form).then(res => { |
||||||
|
this.submiting = false |
||||||
|
Util.successMsg("创建成功"); |
||||||
|
this.$emit('closeDia') |
||||||
|
}).catch(err => { |
||||||
|
this.submiting = false |
||||||
|
}); |
||||||
|
} |
||||||
|
}, |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="scss"> |
||||||
|
$upload-width: 220px; |
||||||
|
$upload-height: 140px; |
||||||
|
$upload-lg-height: 150px; |
||||||
|
/deep/ .avatar-uploader { |
||||||
|
.el-upload { |
||||||
|
position: relative; |
||||||
|
width: $upload-width; |
||||||
|
height: $upload-height; |
||||||
|
border: 1px dashed #d9d9d9; |
||||||
|
border-radius: 6px; |
||||||
|
cursor: pointer; |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
&:hover { |
||||||
|
border-color: #cb221c; |
||||||
|
} |
||||||
|
|
||||||
|
.uploader-default { |
||||||
|
display: flex; |
||||||
|
height: $upload-height; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: center; |
||||||
|
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-uploader-lg { |
||||||
|
.el-upload { |
||||||
|
width: 100%; |
||||||
|
max-width: 960px; |
||||||
|
height: $upload-lg-height; |
||||||
|
|
||||||
|
.uploader-default { |
||||||
|
height: $upload-lg-height; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.avatar { |
||||||
|
display: block; |
||||||
|
width: $upload-width; |
||||||
|
height: $upload-height; |
||||||
|
} |
||||||
|
|
||||||
|
.avatar-lg { |
||||||
|
display: block; |
||||||
|
width: 100%; |
||||||
|
height: $upload-lg-height; |
||||||
|
} |
||||||
|
|
||||||
|
.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; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
/deep/.req { |
||||||
|
.el-form-item__label { |
||||||
|
&:before { |
||||||
|
content: '*'; |
||||||
|
margin-right: 5px; |
||||||
|
font-size: 18px; |
||||||
|
vertical-align: middle; |
||||||
|
color: #f00; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,165 @@ |
|||||||
|
<template> |
||||||
|
<div class="page"> |
||||||
|
<div class="text-right m-b-20"> |
||||||
|
<el-button type="primary" |
||||||
|
@click="toAdd">新增 |
||||||
|
</el-button> |
||||||
|
</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"> |
||||||
|
无 |
||||||
|
</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> |
||||||
|
|
||||||
|
<el-drawer :title="id ? '编辑' : '新增'" |
||||||
|
size="900px" |
||||||
|
:visible.sync="diaVisible" |
||||||
|
@closed="diaClose"> |
||||||
|
<Add :id.sync="id" |
||||||
|
@closeDia="closeDia" /> |
||||||
|
</el-drawer> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import Add from '../add' |
||||||
|
import Util from "@/libs/util"; |
||||||
|
import Setting from '@/setting' |
||||||
|
export default { |
||||||
|
data () { |
||||||
|
return { |
||||||
|
list: [], |
||||||
|
sorting: false, |
||||||
|
id: '', |
||||||
|
diaVisible: false, |
||||||
|
}; |
||||||
|
}, |
||||||
|
components: { |
||||||
|
Add, |
||||||
|
}, |
||||||
|
mounted () { |
||||||
|
this.$store.commit('user/setCrumbs', [ |
||||||
|
{ |
||||||
|
name: '小程序管理', |
||||||
|
path: '/miniProgramMg/index' |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '首页设置', |
||||||
|
path: '/miniProgramMg/banner' |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '设置banner', |
||||||
|
}, |
||||||
|
]) |
||||||
|
this.getData(); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 获取分类 |
||||||
|
async getData () { |
||||||
|
const { data } = await this.$post(this.api.explosiveList, { |
||||||
|
pageNum: 1, |
||||||
|
pageSize: 10000, |
||||||
|
type: 1 |
||||||
|
}) |
||||||
|
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.id = '' |
||||||
|
this.diaVisible = true |
||||||
|
}, |
||||||
|
// 编辑 |
||||||
|
toEdit (row) { |
||||||
|
this.id = row.id |
||||||
|
this.diaVisible = true |
||||||
|
}, |
||||||
|
// 弹框关闭回调 |
||||||
|
diaClose () { |
||||||
|
this.id = '' |
||||||
|
}, |
||||||
|
// 关闭弹框 |
||||||
|
closeDia () { |
||||||
|
this.diaVisible = false |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
} |
||||||
|
}; |
||||||
|
</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> |
||||||
Loading…
Reference in new issue