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