|
@@ -2,40 +2,76 @@
|
|
<div class="app-container">
|
|
<div class="app-container">
|
|
<div style="width: 400px">
|
|
<div style="width: 400px">
|
|
<el-image :src="require('@/assets/images/ohplay/search.png')" />
|
|
<el-image :src="require('@/assets/images/ohplay/search.png')" />
|
|
- <el-image :class="['border', active === item.id ? 'active' : '']" v-for="item in img" :key="item.id"
|
|
|
|
- :src="item.url" @click="getActive(item.id)" />
|
|
|
|
|
|
+ <el-image
|
|
|
|
+ :class="['border', active === item.id ? 'active' : '']"
|
|
|
|
+ v-for="item in img"
|
|
|
|
+ :key="item.id"
|
|
|
|
+ :src="item.url"
|
|
|
|
+ @click="getActive(item.id)"
|
|
|
|
+ />
|
|
<el-image :src="require('@/assets/images/ohplay/comment.png')" />
|
|
<el-image :src="require('@/assets/images/ohplay/comment.png')" />
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<keep-alive>
|
|
<keep-alive>
|
|
<div class="isShow">
|
|
<div class="isShow">
|
|
- <el-button v-if="isShow()" type="primary" icon="el-icon-plus" @click="getAdd"
|
|
|
|
- v-hasPermi="['ohplay:operation:add']">添加</el-button>
|
|
|
|
|
|
+ <el-button
|
|
|
|
+ v-if="isShow()"
|
|
|
|
+ type="primary"
|
|
|
|
+ icon="el-icon-plus"
|
|
|
|
+ @click="getAdd"
|
|
|
|
+ v-hasPermi="['ohplay:operation:add']"
|
|
|
|
+ >添加</el-button
|
|
|
|
+ >
|
|
<el-form label-width="100px" v-for="(item, index) in list" :key="index">
|
|
<el-form label-width="100px" v-for="(item, index) in list" :key="index">
|
|
- <el-link :underline="false" class="close" icon="el-icon-close" @click="getDelete(item.id, index)" />
|
|
|
|
|
|
+ <el-link
|
|
|
|
+ :underline="false"
|
|
|
|
+ class="close"
|
|
|
|
+ icon="el-icon-close"
|
|
|
|
+ @click="getDelete(item.id, index)"
|
|
|
|
+ />
|
|
<el-form-item :label="label + (index + 1)" />
|
|
<el-form-item :label="label + (index + 1)" />
|
|
<el-form-item v-if="active === 3" label="文字:">
|
|
<el-form-item v-if="active === 3" label="文字:">
|
|
<el-input v-model="item.script" placeholder="请输入快捷按钮文字" />
|
|
<el-input v-model="item.script" placeholder="请输入快捷按钮文字" />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item v-else label="Banner:">
|
|
<el-form-item v-else label="Banner:">
|
|
- <Upload listType="picture-card" :url="item.banner" :width="343" :height="140" @upload="getUpload($event, index)" />
|
|
|
|
|
|
+ <Upload
|
|
|
|
+ listType="picture-card"
|
|
|
|
+ :url="item.banner"
|
|
|
|
+ :width="343"
|
|
|
|
+ :height="140"
|
|
|
|
+ @upload="getUpload($event, index)"
|
|
|
|
+ />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item label="选择日期:">
|
|
<el-form-item label="选择日期:">
|
|
- <el-date-picker v-model="item.date" size="small" type="datetimerange" start-placeholder="开始时间"
|
|
|
|
- end-placeholder="结束时间" value-format="yyyy-MM-dd HH:mm:ss" />
|
|
|
|
|
|
+ <el-date-picker
|
|
|
|
+ v-model="item.date"
|
|
|
|
+ size="small"
|
|
|
|
+ type="datetimerange"
|
|
|
|
+ start-placeholder="开始时间"
|
|
|
|
+ end-placeholder="结束时间"
|
|
|
|
+ value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
|
+ />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item label="跳转:">
|
|
<el-form-item label="跳转:">
|
|
<el-select v-model="item.skip" placeholder="请选择跳转页面">
|
|
<el-select v-model="item.skip" placeholder="请选择跳转页面">
|
|
- <el-option v-for="item in typeOptions" :key="item.value" :label="item.label"
|
|
|
|
- :value="Number(item.value)" />
|
|
|
|
|
|
+ <el-option
|
|
|
|
+ v-for="item in typeOptions"
|
|
|
|
+ :key="item.value"
|
|
|
|
+ :label="item.label"
|
|
|
|
+ :value="Number(item.value)"
|
|
|
|
+ />
|
|
</el-select>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item label="网址:">
|
|
<el-form-item label="网址:">
|
|
<el-input v-model="item.skipUrl" placeholder="请输入网址" />
|
|
<el-input v-model="item.skipUrl" placeholder="请输入网址" />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-form-item>
|
|
- <el-button type="primary" @click="getSubmit(item, index)"
|
|
|
|
- v-hasPermi="['ohplay:operation:submit']">确定</el-button>
|
|
|
|
|
|
+ <el-button
|
|
|
|
+ type="primary"
|
|
|
|
+ @click="getSubmit(item, index)"
|
|
|
|
+ v-hasPermi="['ohplay:operation:submit']"
|
|
|
|
+ >确定</el-button
|
|
|
|
+ >
|
|
</el-form-item>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
@@ -44,100 +80,119 @@
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
-import { create, edit, list, remove } from '@/api/ohplay/operation';
|
|
|
|
|
|
+import { create, edit, list, remove } from "@/api/ohplay/operation";
|
|
|
|
+import { dialogCallBack } from "@/utils/DialogUtil";
|
|
export default {
|
|
export default {
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
- img: [{
|
|
|
|
- id: 1,
|
|
|
|
- url: require('@/assets/images/ohplay/banner.png')
|
|
|
|
- }, {
|
|
|
|
- id: 2,
|
|
|
|
- url: require('@/assets/images/ohplay/pop.png')
|
|
|
|
- }, {
|
|
|
|
- id: 3,
|
|
|
|
- url: require('@/assets/images/ohplay/shortcut.png')
|
|
|
|
- }],
|
|
|
|
|
|
+ img: [
|
|
|
|
+ {
|
|
|
|
+ id: 1,
|
|
|
|
+ url: require("@/assets/images/ohplay/banner.png"),
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ id: 2,
|
|
|
|
+ url: require("@/assets/images/ohplay/pop.png"),
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ id: 3,
|
|
|
|
+ url: require("@/assets/images/ohplay/shortcut.png"),
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
active: 1,
|
|
active: 1,
|
|
- label: '广告位',
|
|
|
|
|
|
+ label: "广告位",
|
|
// 列表
|
|
// 列表
|
|
list: [],
|
|
list: [],
|
|
// 跳转类型
|
|
// 跳转类型
|
|
- typeOptions: [{
|
|
|
|
- value: 0,
|
|
|
|
- label: '指定页面'
|
|
|
|
- }, {
|
|
|
|
- value: 1,
|
|
|
|
- label: '指定URL'
|
|
|
|
- }]
|
|
|
|
- }
|
|
|
|
|
|
+ typeOptions: [
|
|
|
|
+ {
|
|
|
|
+ value: 0,
|
|
|
|
+ label: "指定页面",
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ value: 1,
|
|
|
|
+ label: "指定URL",
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ };
|
|
},
|
|
},
|
|
mounted() {
|
|
mounted() {
|
|
- this.getList()
|
|
|
|
|
|
+ this.getList();
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
// 切换选中位置
|
|
// 切换选中位置
|
|
getActive(id) {
|
|
getActive(id) {
|
|
if (this.active !== id) {
|
|
if (this.active !== id) {
|
|
- this.active = id
|
|
|
|
- this.label = id === 1 ? '广告位' : id === 2 ? '推广位' : '快捷位'
|
|
|
|
- this.getList()
|
|
|
|
|
|
+ this.active = id;
|
|
|
|
+ this.label = id === 1 ? "广告位" : id === 2 ? "推广位" : "快捷位";
|
|
|
|
+ this.getList();
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
|
|
// 添加
|
|
// 添加
|
|
getAdd() {
|
|
getAdd() {
|
|
- this.list.push({})
|
|
|
|
|
|
+ this.list.push({});
|
|
},
|
|
},
|
|
|
|
|
|
// 隐藏添加按钮
|
|
// 隐藏添加按钮
|
|
isShow() {
|
|
isShow() {
|
|
- return this.active === 3 ? this.list.length < 4 ? true : false : this.list.length < 6 ? true : false
|
|
|
|
|
|
+ return this.active === 3
|
|
|
|
+ ? this.list.length < 4
|
|
|
|
+ ? true
|
|
|
|
+ : false
|
|
|
|
+ : this.list.length < 6
|
|
|
|
+ ? true
|
|
|
|
+ : false;
|
|
},
|
|
},
|
|
|
|
|
|
// 删除
|
|
// 删除
|
|
getDelete(id, index) {
|
|
getDelete(id, index) {
|
|
- if (id) {
|
|
|
|
- this.$confirm('是否删除?', '提示', {
|
|
|
|
- 'confirmButtonText': '确定',
|
|
|
|
- 'cancelButtonText': '取消',
|
|
|
|
- type: 'warning'
|
|
|
|
- }).then(() => {
|
|
|
|
- remove(id).then(res => {
|
|
|
|
- if (res.code === 0) {
|
|
|
|
- this.$message.success('删除成功!')
|
|
|
|
- this.getList()
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
- })
|
|
|
|
- } else {
|
|
|
|
- this.list.splice(index, 1)
|
|
|
|
- }
|
|
|
|
|
|
+ var that = this;
|
|
|
|
+ dialogCallBack(that, function () {
|
|
|
|
+ if (id) {
|
|
|
|
+ that
|
|
|
|
+ .$confirm("是否删除?", "提示:", {
|
|
|
|
+ confirmButtonText: "确定",
|
|
|
|
+ cancelButtonText: "取消",
|
|
|
|
+ type: "warning",
|
|
|
|
+ })
|
|
|
|
+ .then(() => {
|
|
|
|
+ remove(id).then((res) => {
|
|
|
|
+ if (res.code === 0) {
|
|
|
|
+ that.$message.success("删除成功!");
|
|
|
|
+ that.getList();
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ });
|
|
|
|
+ } else {
|
|
|
|
+ that.list.splice(index, 1);
|
|
|
|
+ }
|
|
|
|
+ });
|
|
},
|
|
},
|
|
|
|
|
|
// 列表
|
|
// 列表
|
|
getList() {
|
|
getList() {
|
|
- let type = this.active === 1 ? 2 : this.active === 2 ? 0 : 1
|
|
|
|
- this.list = []
|
|
|
|
|
|
+ let type = this.active === 1 ? 2 : this.active === 2 ? 0 : 1;
|
|
|
|
+ this.list = [];
|
|
list({
|
|
list({
|
|
- type: type
|
|
|
|
- }).then(res => {
|
|
|
|
|
|
+ type: type,
|
|
|
|
+ }).then((res) => {
|
|
if (res.code === 0) {
|
|
if (res.code === 0) {
|
|
if (res.data) {
|
|
if (res.data) {
|
|
- res.data.map(i => {
|
|
|
|
|
|
+ res.data.map((i) => {
|
|
this.list.push({
|
|
this.list.push({
|
|
date: [i.startCreateTime, i.endCreateTime],
|
|
date: [i.startCreateTime, i.endCreateTime],
|
|
- ...i
|
|
|
|
- })
|
|
|
|
- })
|
|
|
|
|
|
+ ...i,
|
|
|
|
+ });
|
|
|
|
+ });
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- })
|
|
|
|
|
|
+ });
|
|
},
|
|
},
|
|
|
|
|
|
// 上传图片
|
|
// 上传图片
|
|
getUpload(e, index) {
|
|
getUpload(e, index) {
|
|
- this.list[index].banner = e.file
|
|
|
|
|
|
+ this.list[index].banner = e.file;
|
|
},
|
|
},
|
|
|
|
|
|
// 新增 编辑
|
|
// 新增 编辑
|
|
@@ -150,27 +205,27 @@ export default {
|
|
skip: item.skip,
|
|
skip: item.skip,
|
|
skipUrl: item.skipUrl,
|
|
skipUrl: item.skipUrl,
|
|
script: item.script,
|
|
script: item.script,
|
|
- banner: item.banner
|
|
|
|
- }
|
|
|
|
|
|
+ banner: item.banner,
|
|
|
|
+ };
|
|
if (item.id) {
|
|
if (item.id) {
|
|
- form.id = item.id
|
|
|
|
- edit(form).then(res => {
|
|
|
|
|
|
+ form.id = item.id;
|
|
|
|
+ edit(form).then((res) => {
|
|
if (res.code === 0) {
|
|
if (res.code === 0) {
|
|
- this.$message.success('修改成功!')
|
|
|
|
- this.getList()
|
|
|
|
|
|
+ this.$message.success("修改成功!");
|
|
|
|
+ this.getList();
|
|
}
|
|
}
|
|
- })
|
|
|
|
|
|
+ });
|
|
} else {
|
|
} else {
|
|
- create(form).then(res => {
|
|
|
|
|
|
+ create(form).then((res) => {
|
|
if (res.code === 0) {
|
|
if (res.code === 0) {
|
|
- this.$message.success('创建成功!')
|
|
|
|
- this.getList()
|
|
|
|
|
|
+ this.$message.success("创建成功!");
|
|
|
|
+ this.getList();
|
|
}
|
|
}
|
|
- })
|
|
|
|
|
|
+ });
|
|
}
|
|
}
|
|
- }
|
|
|
|
- }
|
|
|
|
-}
|
|
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+};
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
@@ -216,7 +271,7 @@ export default {
|
|
}
|
|
}
|
|
|
|
|
|
.active::after {
|
|
.active::after {
|
|
- content: '';
|
|
|
|
|
|
+ content: "";
|
|
background: rgba(255, 255, 0, 0.3);
|
|
background: rgba(255, 255, 0, 0.3);
|
|
position: absolute;
|
|
position: absolute;
|
|
top: 0;
|
|
top: 0;
|
|
@@ -224,4 +279,4 @@ export default {
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
-</style>
|
|
|
|
|
|
+</style>
|