hy/aslan-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(banner管理): 编辑弹窗->展示位选项新增“游戏”选项

Browse Source
This commit is contained in:
hzj 2025-12-03 16:19:57 +08:00
parent 9d91849c55
commit afcaa0d55f
1 changed files with 247 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

396
src/views/sys/banner/form-edit.vue
View File

@ -11,17 +11,16 @@
custom-class="drawer-auto-layout" custom-class="drawer-auto-layout"
> >
<div v-loading="submitLoading"> <div v-loading="submitLoading">
<div class="drawer-form"> <div class="drawer-form">
<el-form ref="form" :model="form" :rules="rules" label-width="100px"> <el-form ref="form" :model="form" :rules="rules" label-width="100px">
<!-- 封面 -->
<el-form-item label="封面" prop="cover"> <el-form-item label="封面" prop="cover">
<el-col :span="8"> <el-col :span="8">
<el-form-item prop="cover" class="upload-small"> <el-form-item prop="cover" class="upload-small">
<el-upload <el-upload
:disabled="coverUploadLoading" :disabled="coverUploadLoading"
:file-list="coverFileList" :file-list="coverFileList"
:class="{'upload-but-hide': !isShowCoverUpload}" :class="{ 'upload-but-hide': !isShowCoverUpload }"
action="" action=""
list-type="picture-card" list-type="picture-card"
:http-request="uploadCover" :http-request="uploadCover"
@ -29,7 +28,11 @@
:on-remove="handleCoverFileRemove" :on-remove="handleCoverFileRemove"
accept="image/*" accept="image/*"
> >
<i slot="default" v-loading="coverUploadLoading" class="el-icon-plus" /> <i
slot="default"
v-loading="coverUploadLoading"
class="el-icon-plus"
/>
<div slot="tip" class="el-upload__tip">banner封面</div> <div slot="tip" class="el-upload__tip">banner封面</div>
</el-upload> </el-upload>
</el-form-item> </el-form-item>
@ -39,7 +42,7 @@
<el-upload <el-upload
:disabled="smallCoverUploadLoading" :disabled="smallCoverUploadLoading"
:file-list="smallCoverFileList" :file-list="smallCoverFileList"
:class="{'upload-but-hide': !isShowSmallCoverUpload}" :class="{ 'upload-but-hide': !isShowSmallCoverUpload }"
action="" action=""
list-type="picture-card" list-type="picture-card"
:http-request="uploadSmallCover" :http-request="uploadSmallCover"
@ -47,7 +50,11 @@
:on-remove="handleSmallCoverFileRemove" :on-remove="handleSmallCoverFileRemove"
accept="image/*" accept="image/*"
> >
<i slot="default" v-loading="smallCoverUploadLoading" class="el-icon-plus" /> <i
slot="default"
v-loading="smallCoverUploadLoading"
class="el-icon-plus"
/>
<div slot="tip" class="el-upload__tip">banner小图</div> <div slot="tip" class="el-upload__tip">banner小图</div>
</el-upload> </el-upload>
</el-form-item> </el-form-item>
@ -57,7 +64,7 @@
<el-upload <el-upload
:disabled="alertCoverUploadLoading" :disabled="alertCoverUploadLoading"
:file-list="alertCoverFileList" :file-list="alertCoverFileList"
:class="{'upload-but-hide': !isShowAlertCoverUpload}" :class="{ 'upload-but-hide': !isShowAlertCoverUpload }"
action="" action=""
list-type="picture-card" list-type="picture-card"
:http-request="uploadAlertCover" :http-request="uploadAlertCover"
@ -65,12 +72,18 @@
:on-remove="handlealertCoverFileRemove" :on-remove="handlealertCoverFileRemove"
accept="image/*" accept="image/*"
> >
<i slot="default" v-loading="alertCoverUploadLoading" class="el-icon-plus" /> <i
slot="default"
v-loading="alertCoverUploadLoading"
class="el-icon-plus"
/>
<div slot="tip" class="el-upload__tip">首页弹出banner</div> <div slot="tip" class="el-upload__tip">首页弹出banner</div>
</el-upload> </el-upload>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-form-item> </el-form-item>
<!-- 状态 -->
<el-form-item label="状态" prop="showcase"> <el-form-item label="状态" prop="showcase">
<el-select <el-select
v-model="form.showcase" v-model="form.showcase"
@ -83,6 +96,8 @@
<el-option label="上架" :value="true" /> <el-option label="上架" :value="true" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<!-- 类型 -->
<el-form-item label="类型" prop="type"> <el-form-item label="类型" prop="type">
<el-select <el-select
v-model="form.type" v-model="form.type"
@ -96,6 +111,7 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<!-- 内容 -->
<el-form-item label="内容"> <el-form-item label="内容">
<el-autocomplete <el-autocomplete
v-model.trim="form.content" v-model.trim="form.content"
@ -110,15 +126,41 @@
</template> </template>
</el-autocomplete> </el-autocomplete>
</el-form-item> </el-form-item>
<el-form-item v-if="form.content !== 'ENTER_ROOM' && form.content !== 'ENTER_PERSONAL_CENTER'" label="参数">
<!-- 参数 -->
<el-form-item
v-if="
form.content !== 'ENTER_ROOM' &&
form.content !== 'ENTER_PERSONAL_CENTER'
"
label="参数"
>
<el-input v-model.trim="form.params" type="text" /> <el-input v-model.trim="form.params" type="text" />
</el-form-item> </el-form-item>
<!-- 房间 -->
<el-form-item v-if="form.content === 'ENTER_ROOM'" label="房间"> <el-form-item v-if="form.content === 'ENTER_ROOM'" label="房间">
<search-room-input :room-id="tmpRoomId" @success="searchRoomSuccess" @fail="searchRoomFail" @load="loadSearchRoom" /> <search-room-input
:room-id="tmpRoomId"
@success="searchRoomSuccess"
@fail="searchRoomFail"
@load="loadSearchRoom"
/>
</el-form-item> </el-form-item>
<el-form-item v-if="form.content === 'ENTER_PERSONAL_CENTER'" label="用户">
<account-input v-model="tmpUserId" :sys-origin="sysOrigin" placeholder="用户ID" /> <!-- 用户 -->
<el-form-item
v-if="form.content === 'ENTER_PERSONAL_CENTER'"
label="用户"
>
<account-input
v-model="tmpUserId"
:sys-origin="sysOrigin"
placeholder="用户ID"
/>
</el-form-item> </el-form-item>
<!-- 展示位 -->
<el-form-item label="展示位" prop="displayPosition"> <el-form-item label="展示位" prop="displayPosition">
<el-select <el-select
v-model="form.displayPosition" v-model="form.displayPosition"
@ -128,9 +170,16 @@
style="width:100%;" style="width:100%;"
class="filter-item" class="filter-item"
> >
<el-option v-for="(item, index) in displayPosition" :key="index" :label="item.name" :value="item.value" /> <el-option
v-for="(item, index) in displayPosition"
:key="index"
:label="item.name"
:value="item.value"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<!-- 开始时间 -->
<el-form-item label="开始时间" prop="startTime"> <el-form-item label="开始时间" prop="startTime">
<el-date-picker <el-date-picker
v-model="form.startTime" v-model="form.startTime"
@ -140,6 +189,8 @@
style="width:100%;" style="width:100%;"
/> />
</el-form-item> </el-form-item>
<!-- 过期时间 -->
<el-form-item label="过期时间" prop="expiredTime"> <el-form-item label="过期时间" prop="expiredTime">
<el-date-picker <el-date-picker
v-model="form.expiredTime" v-model="form.expiredTime"
@ -149,11 +200,27 @@
style="width:100%;" style="width:100%;"
/> />
</el-form-item> </el-form-item>
<!-- 排序 -->
<el-form-item label="排序" prop="depict"> <el-form-item label="排序" prop="depict">
<el-input v-model.trim="form.sort" v-number placeholder="降序排列(数字越大越靠前)" /> <el-input
v-model.trim="form.sort"
v-number
placeholder="降序排列(数字越大越靠前)"
/>
</el-form-item> </el-form-item>
<!-- 区域 -->
<el-form-item label="区域" prop="regionList"> <el-form-item label="区域" prop="regionList">
<el-select v-model="form.regionList" v-loading="loading" multiple clearable placeholder="请选择" style="width:100%;" class="filter-item"> <el-select
v-model="form.regionList"
v-loading="loading"
multiple
clearable
placeholder="请选择"
style="width:100%;"
class="filter-item"
>
<el-option <el-option
v-for="(item, index) in regions" v-for="(item, index) in regions"
:key="index" :key="index"
@ -162,8 +229,17 @@
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<!-- 描述 -->
<el-form-item label="描述" prop="depict"> <el-form-item label="描述" prop="depict">
<el-input v-model.trim="form.depict" resize="none" show-word-limit type="textarea" :rows="6" maxlength="200" /> <el-input
v-model.trim="form.depict"
resize="none"
show-word-limit
type="textarea"
:rows="6"
maxlength="200"
/>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
@ -172,16 +248,14 @@
<el-button type="primary" @click="submitForm()">保存</el-button> <el-button type="primary" @click="submitForm()">保存</el-button>
</div> </div>
</div> </div>
</el-drawer> </el-drawer>
</div> </div>
</template> </template>
<script> <script>
import { updateBanner, addBanner } from "@/api/banner";
import { updateBanner, addBanner } from '@/api/banner' import { getElementUiUploadFile } from "@/utils";
import { getElementUiUploadFile } from '@/utils' import { mapGetters } from "vuex";
import { mapGetters } from 'vuex' import { regionConfigTable } from "@/api/sys";
import { regionConfigTable } from '@/api/sys'
export default { export default {
props: { props: {
row: { row: {
@ -191,17 +265,20 @@ export default {
sysOrigin: { sysOrigin: {
type: String, type: String,
require: false, require: false,
default: '' default: ""
} }
}, },
data() { data() {
const commonRules = [{ required: true, message: '必填字段', trigger: 'blur' }] const commonRules = [
{ required: true, message: "必填字段", trigger: "blur" }
];
return { return {
displayPosition: [ displayPosition: [
{ name: '房间内', value: 'ROOM' }, { name: "房间内", value: "ROOM" },
{ name: '发现页', value: 'EXPLORE_PAGE' }, { name: "发现页", value: "EXPLORE_PAGE" },
{ name: '首页弹出层', value: 'HOME_ALERT' }, { name: "首页弹出层", value: "HOME_ALERT" },
{ name: '钱包', value: 'WALLET' }, { name: "钱包", value: "WALLET" },
{ name: "游戏", value: "GAME" }
], ],
searchDisabled: false, searchDisabled: false,
alertCoverUploadLoading: false, alertCoverUploadLoading: false,
@ -210,25 +287,25 @@ export default {
coverFileList: [], coverFileList: [],
smallCoverUploadLoading: false, smallCoverUploadLoading: false,
smallCoverFileList: [], smallCoverFileList: [],
tmpRoomId: '', tmpRoomId: "",
loading: false, loading: false,
tmpUserId: '', tmpUserId: "",
regions: [], regions: [],
form: { form: {
id: '', id: "",
cover: '', cover: "",
smallCover: '', smallCover: "",
showcase: '', showcase: "",
type: '', type: "",
sysOrigin: '', sysOrigin: "",
content: '', content: "",
params: '', params: "",
expiredTime: '', expiredTime: "",
startTime: '', startTime: "",
depict: '', depict: "",
sort: '', sort: "",
displayPosition: '', displayPosition: "",
alertCover: '', alertCover: "",
regionList: [] regionList: []
}, },
submitLoading: false, submitLoading: false,
@ -241,179 +318,200 @@ export default {
expiredTime: commonRules expiredTime: commonRules
}, },
contentRestaurants: [ contentRestaurants: [
{ value: 'GIFT_PACK_BUY', label: '礼物背包' }, { value: "GIFT_PACK_BUY", label: "礼物背包" },
{ value: 'ENTER_ROOM', label: '进入房间' }, { value: "ENTER_ROOM", label: "进入房间" },
{ value: 'ENTER_PERSONAL_CENTER', label: '个人中心' }, { value: "ENTER_PERSONAL_CENTER", label: "个人中心" },
{ value: 'RECHARGE_IN_APP', label: '充值-站内' }, { value: "RECHARGE_IN_APP", label: "充值-站内" },
{ value: 'RECHARGE_H5', label: '充值-H5(站外)' }, { value: "RECHARGE_H5", label: "充值-H5(站外)" },
{ value: 'PROP_STORE', label: '道具商店' } { value: "PROP_STORE", label: "道具商店" }
] ]
} };
}, },
computed: { computed: {
textOptTitle() { textOptTitle() {
return `${(this.row && this.row.id ? '修改' : '新增')}(${this.sysOrigin})` return `${this.row && this.row.id ? "修改" : "新增"}(${this.sysOrigin})`;
}, },
isShowCoverUpload() { isShowCoverUpload() {
return !this.form.cover return !this.form.cover;
}, },
isShowSmallCoverUpload() { isShowSmallCoverUpload() {
return !this.form.smallCover return !this.form.smallCover;
}, },
isShowAlertCoverUpload() { isShowAlertCoverUpload() {
return !this.form.alertCover return !this.form.alertCover;
}, },
...mapGetters(['permissionsSysOriginPlatforms']) ...mapGetters(["permissionsSysOriginPlatforms"])
}, },
watch: { watch: {
row: { row: {
handler(val) { handler(val) {
if (!val) { if (!val) {
this.listRegion() this.listRegion();
return return;
} }
const form = Object.assign({}, val) const form = Object.assign({}, val);
if (form.params !== '' && form.content === 'ENTER_ROOM') { if (form.params !== "" && form.content === "ENTER_ROOM") {
this.tmpRoomId = form.params this.tmpRoomId = form.params;
} }
if (form.params !== '' && form.content === 'ENTER_PERSONAL_CENTER') { if (form.params !== "" && form.content === "ENTER_PERSONAL_CENTER") {
this.tmpUserId = form.params this.tmpUserId = form.params;
} }
if (form.displayPosition) { if (form.displayPosition) {
form.displayPosition = form.displayPosition.split(',') form.displayPosition = form.displayPosition.split(",");
} }
if (form.regions) { if (form.regions) {
form.regionList = form.regions.split(',') form.regionList = form.regions.split(",");
} }
this.coverFileList = getElementUiUploadFile(form.cover) this.coverFileList = getElementUiUploadFile(form.cover);
this.smallCoverFileList = getElementUiUploadFile(form.smallCover) this.smallCoverFileList = getElementUiUploadFile(form.smallCover);
this.alertCoverFileList = getElementUiUploadFile(form.alertCover) this.alertCoverFileList = getElementUiUploadFile(form.alertCover);
this.form = Object.assign(this.form, form) this.form = Object.assign(this.form, form);
this.listRegion() this.listRegion();
}, },
immediate: true immediate: true
} }
}, },
methods: { methods: {
querySearchContentRestaurants(queryString, cb) { querySearchContentRestaurants(queryString, cb) {
var contentRestaurants = this.contentRestaurants var contentRestaurants = this.contentRestaurants;
var results = queryString ? contentRestaurants.filter(restaurant => { var results = queryString
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0) ? contentRestaurants.filter(restaurant => {
}) : contentRestaurants return (
cb(results) restaurant.value
.toLowerCase()
.indexOf(queryString.toLowerCase()) === 0
);
})
: contentRestaurants;
cb(results);
}, },
uploadAlertCover(file) { uploadAlertCover(file) {
const that = this const that = this;
that.alertCoverUploadLoading = true that.alertCoverUploadLoading = true;
that.$simpleUploadFlie(file, that.$application.fileBucket.other).then(res => { that
that.alertCoverUploadLoading = false .$simpleUploadFlie(file, that.$application.fileBucket.other)
that.form.alertCover = that.$getAccessImgUrl(res.name) .then(res => {
}).catch(er => { that.alertCoverUploadLoading = false;
that.alertCoverUploadLoading = false that.form.alertCover = that.$getAccessImgUrl(res.name);
}) })
.catch(er => {
that.alertCoverUploadLoading = false;
});
}, },
uploadSmallCover(file) { uploadSmallCover(file) {
const that = this const that = this;
that.smallCoverUploadLoading = true that.smallCoverUploadLoading = true;
that.$simpleUploadFlie(file, that.$application.fileBucket.other).then(res => { that
that.smallCoverUploadLoading = false .$simpleUploadFlie(file, that.$application.fileBucket.other)
that.form.smallCover = that.$getAccessImgUrl(res.name) .then(res => {
}).catch(er => { that.smallCoverUploadLoading = false;
that.smallCoverUploadLoading = false that.form.smallCover = that.$getAccessImgUrl(res.name);
}) })
.catch(er => {
that.smallCoverUploadLoading = false;
});
}, },
handleSmallCoverFileRemove(file, fileList) { handleSmallCoverFileRemove(file, fileList) {
this.form.smallCover = '' this.form.smallCover = "";
this.smallCoverUploadLoading = false this.smallCoverUploadLoading = false;
}, },
handlealertCoverFileRemove(file, fileList) { handlealertCoverFileRemove(file, fileList) {
this.form.alertCover = '' this.form.alertCover = "";
this.alertCoverUploadLoading = false this.alertCoverUploadLoading = false;
}, },
uploadCover(file) { uploadCover(file) {
const that = this const that = this;
that.coverUploadLoading = true that.coverUploadLoading = true;
that.$simpleUploadFlie(file, that.$application.fileBucket.other).then(res => { that
that.coverUploadLoading = false .$simpleUploadFlie(file, that.$application.fileBucket.other)
that.form.cover = that.$getAccessImgUrl(res.name) .then(res => {
}).catch(er => { that.coverUploadLoading = false;
that.coverUploadLoading = false that.form.cover = that.$getAccessImgUrl(res.name);
}) })
.catch(er => {
that.coverUploadLoading = false;
});
}, },
handleCoverFileRemove(file, fileList) { handleCoverFileRemove(file, fileList) {
this.form.cover = '' this.form.cover = "";
this.coverUploadLoading = false this.coverUploadLoading = false;
}, },
listRegion() { listRegion() {
const that = this const that = this;
that.loading = true that.loading = true;
regionConfigTable({ 'sysOrigin': that.sysOrigin }).then(res => { regionConfigTable({ sysOrigin: that.sysOrigin })
that.regions = res.body || [] .then(res => {
that.loading = false that.regions = res.body || [];
}).catch(er => { that.loading = false;
that.loading = false })
}) .catch(er => {
that.loading = false;
});
}, },
handleClose() { handleClose() {
this.$emit('close') this.$emit("close");
}, },
submitForm() { submitForm() {
const that = this const that = this;
that.$refs.form.validate(valid => { that.$refs.form.validate(valid => {
if (!valid) { if (!valid) {
console.error('error submit!!') console.error("error submit!!");
return return;
} }
const submitForm = Object.assign({}, that.form) const submitForm = Object.assign({}, that.form);
submitForm.displayPosition = submitForm.displayPosition.join(',') submitForm.displayPosition = submitForm.displayPosition.join(",");
that.submitLoading = true that.submitLoading = true;
if (!submitForm.sysOrigin) { if (!submitForm.sysOrigin) {
submitForm.sysOrigin = that.sysOrigin submitForm.sysOrigin = that.sysOrigin;
} }
if (!submitForm.sysOrigin) { if (!submitForm.sysOrigin) {
that.$opsMessage.fail('系统错误, 没有平台信息!') that.$opsMessage.fail("系统错误, 没有平台信息!");
return return;
} }
if (submitForm.id) { if (submitForm.id) {
updateBanner(submitForm).then(res => { updateBanner(submitForm)
that.submitLoading = false .then(res => {
that.$emit('success', res) that.submitLoading = false;
}).catch(er => { that.$emit("success", res);
that.submitLoading = false })
that.$emit('fial', er) .catch(er => {
}) that.submitLoading = false;
return that.$emit("fial", er);
});
return;
} }
addBanner(submitForm).then(res => { addBanner(submitForm)
that.submitLoading = false .then(res => {
that.$emit('success', res) that.submitLoading = false;
}).catch(er => { that.$emit("success", res);
that.submitLoading = false })
console.error(er) .catch(er => {
that.$emit('fial', er) that.submitLoading = false;
}) console.error(er);
}) that.$emit("fial", er);
});
});
}, },
loadSearchRoom() { loadSearchRoom() {
this.searchDisabled = true this.searchDisabled = true;
}, },
searchRoomSuccess(res) { searchRoomSuccess(res) {
this.searchDisabled = false this.searchDisabled = false;
if (!res) { if (!res) {
return return;
} }
this.form.params = res.id this.form.params = res.id;
if (this.form.content === 'ENTER_ROOM') { if (this.form.content === "ENTER_ROOM") {
this.tmpRoomId = res.roomAccount this.tmpRoomId = res.roomAccount;
} }
}, },
searchRoomFail() { searchRoomFail() {
this.form.params = '' this.form.params = "";
this.searchDisabled = false this.searchDisabled = false;
} }
} }
} };
</script> </script>