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