|
|
@@ -5,16 +5,34 @@
|
|
|
<el-form :model="table.where" label-width="90px" class="ele-form-search"
|
|
|
@keyup.enter.native="$refs.table.reload()" @submit.native.prevent>
|
|
|
<el-row :gutter="15">
|
|
|
- <el-col :md="6" :sm="12">
|
|
|
+ <el-col :md="4" :sm="12">
|
|
|
<el-form-item label="广告标题:">
|
|
|
<el-input v-model="table.where.title" placeholder="请输入广告标题" clearable/>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
+ <el-col :md="4" :sm="12">
|
|
|
+ <el-form-item label="广告位置:">
|
|
|
+ <el-select v-model="table.where.position" placeholder="请选择广告位置" clearable class="ele-block">
|
|
|
+ <el-option label="全部" :value="0"/>
|
|
|
+ <el-option label="主页轮播图" :value="1"/>
|
|
|
+ <el-option label="会员中心占位图" :value="2"/>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :md="4" :sm="12">
|
|
|
+ <el-form-item label="状态:">
|
|
|
+ <el-select v-model="table.where.status" placeholder="请选择状态" clearable class="ele-block">
|
|
|
+ <el-option label="全部" :value="0"/>
|
|
|
+ <el-option label="在用" :value="1"/>
|
|
|
+ <el-option label="停用" :value="2"/>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
<el-col :md="6" :sm="12">
|
|
|
<div class="ele-form-actions">
|
|
|
<el-button type="primary" @click="$refs.table.reload()" icon="el-icon-search" class="ele-btn-icon">查询
|
|
|
</el-button>
|
|
|
- <el-button @click="(table.where={})&&$refs.table.reload()">重置</el-button>
|
|
|
+ <el-button @click="handleReset">重置</el-button>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
@@ -33,23 +51,51 @@
|
|
|
<el-table-column type="index" :index="index" label="编号" width="60" align="center" fixed="left" show-overflow-tooltip/>
|
|
|
<el-table-column label="广告封面" min-width="100" align="center">
|
|
|
<template slot-scope="{row}">
|
|
|
- <el-avatar shape="square" :size="25" :src="row.cover"/>
|
|
|
+ <el-image v-if="row.cover" :src="row.cover" style="width: 60px; height: 60px;" fit="cover"
|
|
|
+ :preview-src-list="[row.cover]" />
|
|
|
+ <span v-else>-</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="title" label="广告标题" sortable="custom" show-overflow-tooltip min-width="150"/>
|
|
|
+ <el-table-column prop="description" label="广告描述" show-overflow-tooltip min-width="150"/>
|
|
|
+ <el-table-column prop="position" label="广告位置" sortable="custom" show-overflow-tooltip min-width="120" align="center">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <el-tag v-if="row.position == 1" type="success" size="small">主页轮播图</el-tag>
|
|
|
+ <el-tag v-else-if="row.position == 2" type="info" size="small">会员中心占位图</el-tag>
|
|
|
+ <span v-else>-</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="title" label="广告标题" sortable="custom" show-overflow-tooltip min-width="200"/>
|
|
|
- <el-table-column prop="position" label="所属广告位" sortable="custom" show-overflow-tooltip min-width="200">
|
|
|
+ <el-table-column label="跳转类型" min-width="100" align="center">
|
|
|
<template slot-scope="{row}">
|
|
|
- <span class="ele-text-primary" v-if="row.position == 1">首页</span>
|
|
|
+ <el-tag v-if="row.link_type == 1" type="primary" size="small">默认</el-tag>
|
|
|
+ <el-tag v-else-if="row.link_type == 2" type="warning" size="small">小程序</el-tag>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="url" label="广告地址" show-overflow-tooltip min-width="200" align="center"/>
|
|
|
- <el-table-column prop="status" label="状态" sortable min-width="100">
|
|
|
+ <el-table-column prop="url" label="广告链接" show-overflow-tooltip min-width="180" align="center"/>
|
|
|
+ <el-table-column label="尺寸" min-width="100" align="center">
|
|
|
<template slot-scope="{row}">
|
|
|
- <ele-dot :type="['danger', 'success'][row.status]" :ripple="row.status===0"
|
|
|
- :text="['禁用','正常'][row.status]"/>
|
|
|
+ <span v-if="row.width && row.height">{{ row.width }}x{{ row.height }}</span>
|
|
|
+ <span v-else>-</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="sort" label="排序" sortable="custom" show-overflow-tooltip/>
|
|
|
+ <el-table-column label="投放时间" show-overflow-tooltip min-width="180" align="center">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <div v-if="row.start_time">
|
|
|
+ <div>{{ row.start_time }}</div>
|
|
|
+ <div style="color: #909399;">至</div>
|
|
|
+ <div>{{ row.end_time || '长期' }}</div>
|
|
|
+ </div>
|
|
|
+ <span v-else>-</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="view_num" label="点击次数" sortable="custom" min-width="100" align="center"/>
|
|
|
+ <el-table-column prop="status" label="状态" sortable min-width="80" align="center">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <el-switch v-model="row.status" @change="editStatus(row)" :active-value="1" :inactive-value="2"
|
|
|
+ active-color="#13ce66" inactive-color="#ff4949" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="sort" label="排序" sortable="custom" show-overflow-tooltip min-width="80" align="center"/>
|
|
|
<el-table-column label="创建时间" sortable="custom" show-overflow-tooltip min-width="160">
|
|
|
<template slot-scope="{row}">{{ row.create_time | toDateString }}</template>
|
|
|
</el-table-column>
|
|
|
@@ -65,41 +111,106 @@
|
|
|
</ele-data-table>
|
|
|
</el-card>
|
|
|
<!-- 编辑弹窗 -->
|
|
|
- <el-dialog :title="editForm.id?'修改广告':'修改广告'" :visible.sync="showEdit" width="700px"
|
|
|
- @closed="editForm={status: 1,position: 1}" :destroy-on-close="true" custom-class="ele-dialog-form" :lock-scroll="false">
|
|
|
- <el-form :model="editForm" ref="editForm" :rules="editRules" label-width="100px">
|
|
|
- <el-form-item label="广告图片:">
|
|
|
- <uploadImage :limit="1" v-model="editForm.cover"></uploadImage>
|
|
|
- </el-form-item>
|
|
|
+ <el-dialog :title="editForm.id?'修改广告':'添加广告'" :visible.sync="showEdit" width="800px"
|
|
|
+ @closed="editForm={status: 1,position: 1,link_type: 1,sort: 125}" :destroy-on-close="true" custom-class="ele-dialog-form" :lock-scroll="false">
|
|
|
+ <el-form :model="editForm" ref="editForm" :rules="editRules" label-width="120px">
|
|
|
<el-row :gutter="15">
|
|
|
<el-col :sm="12">
|
|
|
<el-form-item label="广告标题:" prop="title">
|
|
|
<el-input v-model="editForm.title" placeholder="请输入广告标题" clearable/>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="广告URL:" prop="url">
|
|
|
- <el-input v-model="editForm.url" placeholder="请输入广告URL" clearable/>
|
|
|
+ </el-col>
|
|
|
+ <el-col :sm="12">
|
|
|
+ <el-form-item label="广告位置:" prop="position">
|
|
|
+ <el-select v-model="editForm.position" placeholder="请选择广告位置" class="ele-block" clearable>
|
|
|
+ <el-option label="主页轮播图" :value="1"/>
|
|
|
+ <el-option label="会员中心占位图" :value="2"/>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-form-item label="广告图片:" prop="cover">
|
|
|
+ <uploadImage :limit="1" v-model="editForm.cover"></uploadImage>
|
|
|
+ <div style="color: #909399; font-size: 12px; margin-top: 5px;">建议尺寸：根据广告位置选择合适尺寸</div>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="广告描述:">
|
|
|
+ <el-input v-model="editForm.description" type="textarea" :rows="3" placeholder="请输入广告描述（选填）" maxlength="150" show-word-limit/>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-row :gutter="15">
|
|
|
+ <el-col :sm="12">
|
|
|
+ <el-form-item label="跳转类型:" prop="link_type">
|
|
|
+ <el-radio-group v-model="editForm.link_type">
|
|
|
+ <el-radio :label="1">默认链接</el-radio>
|
|
|
+ <el-radio :label="2">小程序</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :sm="12">
|
|
|
+ <el-form-item label="广告状态:" prop="status">
|
|
|
+ <el-radio-group v-model="editForm.status">
|
|
|
+ <el-radio :label="1">在用</el-radio>
|
|
|
+ <el-radio :label="2">停用</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-form-item v-if="editForm.link_type == 1" label="广告链接:" prop="url">
|
|
|
+ <el-input v-model="editForm.url" placeholder="请输入广告链接URL" clearable/>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-row :gutter="15" v-if="editForm.link_type == 2">
|
|
|
+ <el-col :sm="12">
|
|
|
+ <el-form-item label="小程序APPID:" prop="mp_appid">
|
|
|
+ <el-input v-model="editForm.mp_appid" placeholder="请输入小程序APPID" clearable/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :sm="12">
|
|
|
+ <el-form-item label="小程序页面:" prop="url">
|
|
|
+ <el-input v-model="editForm.url" placeholder="请输入小程序页面路径" clearable/>
|
|
|
</el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row :gutter="15">
|
|
|
+ <el-col :sm="8">
|
|
|
+ <el-form-item label="广告宽度:">
|
|
|
+ <el-input-number v-model="editForm.width" controls-position="right" :min="0"
|
|
|
+ placeholder="宽度(px)" class="ele-fluid ele-text-left"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :sm="8">
|
|
|
+ <el-form-item label="广告高度:">
|
|
|
+ <el-input-number v-model="editForm.height" controls-position="right" :min="0"
|
|
|
+ placeholder="高度(px)" class="ele-fluid ele-text-left"/>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :sm="8">
|
|
|
<el-form-item label="排序号:" prop="sort">
|
|
|
<el-input-number v-model="editForm.sort" controls-position="right" :min="0"
|
|
|
- placeholder="请输入排序号" class="ele-fluid ele-text-left"/>
|
|
|
+ placeholder="排序号" class="ele-fluid ele-text-left"/>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row :gutter="15">
|
|
|
<el-col :sm="12">
|
|
|
- <el-form-item label="广告位" prop="position" :rules="{
|
|
|
- required: true, message: '所属广告位不能为空', trigger: 'change'
|
|
|
- }">
|
|
|
- <el-select v-model="editForm.position" placeholder="请选择广告位" class="ele-block" clearable>
|
|
|
- <el-option label="首页轮播" :value="1"/>
|
|
|
- </el-select>
|
|
|
+ <el-form-item label="开始时间:" prop="start_time">
|
|
|
+ <el-date-picker v-model="editForm.start_time" type="datetime" placeholder="选择开始时间"
|
|
|
+ class="ele-block" value-format="yyyy-MM-dd HH:mm:ss" />
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="广告状态:">
|
|
|
- <el-radio-group v-model="editForm.status">
|
|
|
- <el-radio :label="1">正常</el-radio>
|
|
|
- <el-radio :label="2">禁用</el-radio>
|
|
|
- </el-radio-group>
|
|
|
+ </el-col>
|
|
|
+ <el-col :sm="12">
|
|
|
+ <el-form-item label="结束时间:">
|
|
|
+ <el-date-picker v-model="editForm.end_time" type="datetime" placeholder="选择结束时间（不选则长期有效）"
|
|
|
+ class="ele-block" value-format="yyyy-MM-dd HH:mm:ss" />
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
+
|
|
|
</el-form>
|
|
|
<div slot="footer">
|
|
|
<el-button @click="showEdit=false">取消</el-button>
|
|
|
@@ -120,21 +231,50 @@ export default {
|
|
|
table: {url: '/ad/index', where: {}}, // 表格配置
|
|
|
choose: [], // 表格选中数据
|
|
|
showEdit: false, // 是否显示表单弹窗
|
|
|
- editForm: {status:1,position: 1}, // 表单数据
|
|
|
+ editForm: {status:1,position: 1,link_type: 1,sort: 125}, // 表单数据
|
|
|
editRules: { // 表单验证规则
|
|
|
title: [
|
|
|
{required: true, message: '请输入广告标题', trigger: 'blur'}
|
|
|
],
|
|
|
position: [
|
|
|
- {required: true, message: '请选择所属广告位', trigger: 'blur'}
|
|
|
+ {required: true, message: '请选择广告位置', trigger: 'change'}
|
|
|
],
|
|
|
- type: [
|
|
|
- {required: true, message: '请选择广告类型', trigger: 'blur'}
|
|
|
+ cover: [
|
|
|
+ {required: true, message: '请上传广告图片', trigger: 'change'}
|
|
|
],
|
|
|
-
|
|
|
+ link_type: [
|
|
|
+ {required: true, message: '请选择跳转类型', trigger: 'change'}
|
|
|
+ ],
|
|
|
+ url: [
|
|
|
+ {
|
|
|
+ validator: (rule, value, callback) => {
|
|
|
+ if (this.editForm.link_type == 1 && !value) {
|
|
|
+ callback(new Error('请输入广告链接'));
|
|
|
+ } else if (this.editForm.link_type == 2 && !value) {
|
|
|
+ callback(new Error('请输入小程序页面路径'));
|
|
|
+ } else {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ mp_appid: [
|
|
|
+ {
|
|
|
+ validator: (rule, value, callback) => {
|
|
|
+ if (this.editForm.link_type == 2 && !value) {
|
|
|
+ callback(new Error('请输入小程序APPID'));
|
|
|
+ } else {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ start_time: [
|
|
|
+ {required: true, message: '请选择开始时间', trigger: 'change'}
|
|
|
+ ]
|
|
|
},
|
|
|
- // 广告位列表
|
|
|
- adSortList:[],
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -144,6 +284,11 @@ export default {
|
|
|
|
|
|
},
|
|
|
methods: {
|
|
|
+ /* 重置搜索 */
|
|
|
+ handleReset() {
|
|
|
+ this.table.where = {};
|
|
|
+ this.$refs.table.reload();
|
|
|
+ },
|
|
|
/* 显示编辑 */
|
|
|
edit(row) {
|
|
|
this.editForm = Object.assign({}, row);
|
|
|
@@ -172,6 +317,24 @@ export default {
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
+ /* 修改状态 */
|
|
|
+ editStatus(row) {
|
|
|
+ this.$message.closeAll();
|
|
|
+ const loading = this.$loading({ lock: true });
|
|
|
+ this.$http.post('/ad/status', { id: row.id, status: row.status }).then(res => {
|
|
|
+ loading.close();
|
|
|
+ if (res.data.code === 0) {
|
|
|
+ this.$message({ type: 'success', message: res.data.msg });
|
|
|
+ } else {
|
|
|
+ row.status = row.status === 1 ? 2 : 1;
|
|
|
+ this.$message.error(res.data.msg);
|
|
|
+ }
|
|
|
+ }).catch(e => {
|
|
|
+ loading.close();
|
|
|
+ row.status = row.status === 1 ? 2 : 1;
|
|
|
+ this.$message.error(e.message);
|
|
|
+ });
|
|
|
+ },
|
|
|
/* 删除 */
|
|
|
remove(row) {
|
|
|
if (!row) { // 批量删除
|
|
|
@@ -216,4 +379,4 @@ export default {
|
|
|
.ele-block >>> .el-upload, .ele-block >>> .el-upload-dragger {
|
|
|
width: 100%;
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
罗永浩