|
|
@@ -46,6 +46,44 @@
|
|
|
placeholder="请输入简介"
|
|
|
></el-input>
|
|
|
</el-form-item>
|
|
|
+ <el-form-item label="是否开启广告" prop="isadvert">
|
|
|
+ <el-switch style="display: block" v-model="form.isadvert" active-color="#13ce66" inactive-color="#ff4949" active-text="开启" inactive-text="关闭">
|
|
|
+ </el-switch>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="广告位">
|
|
|
+ <el-col :span="20">
|
|
|
+ <el-table :data="form.adverts" style="width: 100%">
|
|
|
+ <el-table-column prop="title" label="标题" width="180"> </el-table-column>
|
|
|
+ <el-table-column label="图片地址" width="180">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-image style="width: 100px; height: 100px" :src="scope.row.imgdir" :fit="fit"></el-image>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="imgurl" label="链接地址"> </el-table-column>
|
|
|
+ <el-table-column label="操作">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4">
|
|
|
+ <el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
|
|
|
+ 上传广告图片
|
|
|
+ </el-button>
|
|
|
+ <el-drawer title="广告位" :visible.sync="drawer" :direction="direction" :before-close="handleClose">
|
|
|
+ <el-form-item label="标题">
|
|
|
+ <el-input v-model="title" placeholder="请输入标题"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="图片">
|
|
|
+ <upload :limit="1" :data="imgdir" type="filedir" :url="'/files/advert/upload'" @upload="advertSuccess"></upload>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="链接">
|
|
|
+ <el-input v-model="imgurl" placeholder="请输入链接地址"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-drawer>
|
|
|
+ </el-col>
|
|
|
+ </el-form-item>
|
|
|
<el-form-item>
|
|
|
<el-button type="primary" @click="onSubmit('form')">提交</el-button>
|
|
|
</el-form-item>
|
|
|
@@ -68,6 +106,12 @@ export default {
|
|
|
upload,
|
|
|
},
|
|
|
data: () => ({
|
|
|
+ adverts: [],
|
|
|
+ direction: 'rtl',
|
|
|
+ drawer: false,
|
|
|
+ imgurl: '',
|
|
|
+ imgdir: '',
|
|
|
+ title: '',
|
|
|
rules: {
|
|
|
title: [{ required: true, message: '请输入房间标题', trigger: 'blur' }],
|
|
|
name: [
|
|
|
@@ -91,6 +135,24 @@ export default {
|
|
|
onSubmit() {
|
|
|
this.$emit('submitDate', { data: this.form });
|
|
|
},
|
|
|
+ advertSuccess({ type, data }) {
|
|
|
+ this.imgdir = data.uri;
|
|
|
+ },
|
|
|
+ handleClose(done) {
|
|
|
+ if (this.imgurl) {
|
|
|
+ const newdata = { imgurl: this.imgurl, imgdir: this.imgdir, title: this.title };
|
|
|
+ this.adverts.push(newdata);
|
|
|
+ this.$set(this.form, `adverts`, this.adverts);
|
|
|
+ this.imgurl = '';
|
|
|
+ this.imgdir = '';
|
|
|
+ this.title = '';
|
|
|
+ }
|
|
|
+ done();
|
|
|
+ },
|
|
|
+ handleDelete(index, row) {
|
|
|
+ console.log(index, row);
|
|
|
+ this.form.adverts.splice(index, 1);
|
|
|
+ },
|
|
|
},
|
|
|
};
|
|
|
</script>
|
liuyu