parent
fac7eccc05
commit
d34073301b
@ -0,0 +1,430 @@ |
|||||||
|
<template> |
||||||
|
<el-main> |
||||||
|
|
||||||
|
<!-- vueCropper 剪裁图片实现--> |
||||||
|
<el-dialog title="图片剪裁" :visible.sync="dialogVisible" append-to-body> |
||||||
|
<div style="height: 500px"> |
||||||
|
<vueCropper |
||||||
|
ref="cropper" |
||||||
|
:img="option.img" |
||||||
|
:outputSize="option.size" |
||||||
|
:outputType="option.outputType" |
||||||
|
:info="true" |
||||||
|
:full="option.full" |
||||||
|
:canScale="option.canScale" |
||||||
|
:canMove="option.canMove" |
||||||
|
:canMoveBox="option.canMoveBox" |
||||||
|
:autoCropWidth="option.autoCropWidth" |
||||||
|
:autoCropHeight="option.autoCropHeight" |
||||||
|
:original="option.original" |
||||||
|
:autoCrop="option.autoCrop" |
||||||
|
:fixed="option.fixed" |
||||||
|
:fixedNumber="option.fixedNumber" |
||||||
|
:centerBox="option.centerBox" |
||||||
|
:infoTrue="option.infoTrue" |
||||||
|
:fixedBox="option.fixedBox" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div slot="footer" class="dialog-footer"> |
||||||
|
<el-button @click="dialogVisible = false">取 消</el-button> |
||||||
|
<el-button type="primary" @click="finish">确认</el-button> |
||||||
|
</div> |
||||||
|
</el-dialog> |
||||||
|
|
||||||
|
<el-dialog |
||||||
|
:title="advert_title" |
||||||
|
:close-on-click-modal="false" |
||||||
|
:close-on-press-escape="false" |
||||||
|
:visible.sync="bind_advert_sure" |
||||||
|
center |
||||||
|
width="666px"> |
||||||
|
|
||||||
|
<el-form :model="editadvertinfo" |
||||||
|
label-width="180px" style="margin:0 auto;"> |
||||||
|
|
||||||
|
<el-form-item label="广告名称"> |
||||||
|
<el-input v-model="editadvertinfo.ad_name" clearable/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="展示图片【高80像素】"> |
||||||
|
<el-upload |
||||||
|
action="#" |
||||||
|
drag |
||||||
|
:show-file-list="false" |
||||||
|
:auto-upload="false" |
||||||
|
accept=".png , .jpg , .jpeg" |
||||||
|
style="max-height: 200px" |
||||||
|
:on-change="onUploadChange"> |
||||||
|
<img v-if="upload_pic_b" :src="upload_pic_b" class="avatar"> |
||||||
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i> |
||||||
|
</el-upload> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="点击跳转连接"> |
||||||
|
<el-input v-model="editadvertinfo.ad_uri" clearable/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="展示权重"> |
||||||
|
<el-input-number v-model="editadvertinfo.weight" :min="0" :max="100" |
||||||
|
label="展示权重"/> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="是否发布"> |
||||||
|
<el-switch |
||||||
|
v-model="editadvertinfo.is_enable" |
||||||
|
active-color="#13ce66" |
||||||
|
inactive-color="#ff4949" |
||||||
|
active-text="发布" |
||||||
|
inactive-text="未发布"> |
||||||
|
</el-switch> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="备注"> |
||||||
|
<el-input type="textarea" v-model="editadvertinfo.description" |
||||||
|
:autosize="{ minRows: 3, maxRows: 6}"/> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
|
||||||
|
<div slot="footer" class="dialog-footer"> |
||||||
|
<el-button v-if="!disabled" @click="saveadvert">保存</el-button> |
||||||
|
<el-button v-if="!disabled" @click="bind_advert_sure=false,init_advertinfo()">取消</el-button> |
||||||
|
</div> |
||||||
|
|
||||||
|
</el-dialog> |
||||||
|
<div> |
||||||
|
<el-input |
||||||
|
style="width: 30%;margin-right: 30px;margin-bottom: 5px" |
||||||
|
v-model="search_key" |
||||||
|
clearable |
||||||
|
placeholder="输入名称搜索"/> |
||||||
|
<el-button type="primary" icon="el-icon-search" @click="handleCurrentChange(1)"> |
||||||
|
搜索 |
||||||
|
</el-button> |
||||||
|
<div style="float: right"> |
||||||
|
<el-button type="primary" plain @click="bind_advert_sure=true,init_advertinfo()"> |
||||||
|
添加 |
||||||
|
</el-button> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
<el-table |
||||||
|
:data="advert_info_list" |
||||||
|
v-loading="loading" |
||||||
|
border |
||||||
|
stripe |
||||||
|
style="width: 100%"> |
||||||
|
|
||||||
|
<el-table-column |
||||||
|
fixed |
||||||
|
prop="ad_name" |
||||||
|
align="center" |
||||||
|
label="名称"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column |
||||||
|
fixed |
||||||
|
prop="ad_pic" |
||||||
|
align="center" |
||||||
|
label="展示图片"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<img :src="scope.row.ad_pic" style="max-height: 80px;width: 100%;object-fit: cover"/> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column |
||||||
|
fixed |
||||||
|
prop="ad_uri" |
||||||
|
align="center" |
||||||
|
label="点击跳转连接"> |
||||||
|
</el-table-column> |
||||||
|
|
||||||
|
|
||||||
|
<el-table-column |
||||||
|
prop="is_enable" |
||||||
|
label="是否发布" |
||||||
|
align="center" |
||||||
|
width="110"> |
||||||
|
|
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-button v-if="scope.row.is_enable === true" type="success" size="small">已发布 |
||||||
|
</el-button> |
||||||
|
<el-button v-else type="warning" size="small">未发布 |
||||||
|
</el-button> |
||||||
|
|
||||||
|
</template> |
||||||
|
|
||||||
|
</el-table-column> |
||||||
|
<el-table-column |
||||||
|
prop="weight" |
||||||
|
width="110" |
||||||
|
align="center" |
||||||
|
label="展示权重"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column |
||||||
|
:formatter="format_create_time" |
||||||
|
prop="created_time" |
||||||
|
width="170" |
||||||
|
align="center" |
||||||
|
label="添加时间" |
||||||
|
> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column |
||||||
|
fixed="right" |
||||||
|
label="操作" |
||||||
|
align="center" |
||||||
|
width="150"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
|
||||||
|
<el-button |
||||||
|
size="mini" |
||||||
|
@click="handleEditAdvert(scope.row)">编辑 |
||||||
|
</el-button> |
||||||
|
<el-button |
||||||
|
size="mini" |
||||||
|
type="danger" |
||||||
|
@click="handleDeleteAdvert(scope.row)">删除 |
||||||
|
</el-button> |
||||||
|
|
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
|
||||||
|
|
||||||
|
</div> |
||||||
|
<div style="margin-top: 20px;margin-bottom: 20px"> |
||||||
|
<el-pagination |
||||||
|
@size-change="handleSizeChange" |
||||||
|
@current-change="handleCurrentChange" |
||||||
|
:current-page.sync="pagination.currentPage" |
||||||
|
:page-sizes="[10, 20, 50, 100]" |
||||||
|
:page-size="pagination.pagesize" |
||||||
|
layout="total,sizes, prev, pager, next" |
||||||
|
:total="pagination.total"> |
||||||
|
</el-pagination> |
||||||
|
</div> |
||||||
|
</el-main> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
|
||||||
|
import {advertinfo} from "@/restful"; |
||||||
|
import {VueCropper} from 'vue-cropper' |
||||||
|
import {getUserInfoFun, AvatarUploadUtils, dataURLtoFile} from '@/utils' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "FirUserAdvert", |
||||||
|
components: { |
||||||
|
VueCropper, |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
dialogVisible: false, |
||||||
|
option: { |
||||||
|
img: '', // 裁剪图片的地址 |
||||||
|
info: true, // 裁剪框的大小信息 |
||||||
|
outputSize: 1, // 裁剪生成图片的质量 |
||||||
|
outputType: 'jpeg', // 裁剪生成图片的格式 |
||||||
|
canScale: true, // 图片是否允许滚轮缩放 |
||||||
|
autoCrop: true, // 是否默认生成截图框 |
||||||
|
autoCropWidth: 200, // 默认生成截图框宽度 |
||||||
|
autoCropHeight: 80, // 默认生成截图框高度 |
||||||
|
fixedBox: false, // 固定截图框大小 不允许改变 |
||||||
|
fixed: false, // 是否开启截图框宽高固定比例 |
||||||
|
fixedNumber: [7, 2], // 截图框的宽高比例 |
||||||
|
full: true, // 是否输出原图比例的截图 |
||||||
|
canMoveBox: true, // 截图框能否拖动 |
||||||
|
original: false, // 上传图片按照原始比例渲染 |
||||||
|
centerBox: true, // 截图框是否被限制在图片里面 |
||||||
|
infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高 |
||||||
|
}, |
||||||
|
advert_title: '添加新宣传广告', |
||||||
|
bind_advert_sure: false, |
||||||
|
advert_info_list: [], |
||||||
|
search_key: "", |
||||||
|
pagination: {"currentPage": 1, "total": 0, "pagesize": 10}, |
||||||
|
loading: false, |
||||||
|
editadvertinfo: {}, |
||||||
|
upload_file: undefined, |
||||||
|
disabled: false, |
||||||
|
upload_pic_b: '' |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
finish() { |
||||||
|
this.$refs.cropper.getCropData((data) => { |
||||||
|
this.upload_pic_b = data; |
||||||
|
this.upload_file = dataURLtoFile(data, this.upload_file.name); |
||||||
|
this.dialogVisible = false; |
||||||
|
}) |
||||||
|
}, |
||||||
|
init_advertinfo() { |
||||||
|
this.editadvertinfo = { |
||||||
|
'ad_name': '', |
||||||
|
'ad_pic': '', |
||||||
|
'ad_uri': '', |
||||||
|
'is_enable': true, |
||||||
|
'weight': 10 |
||||||
|
}; |
||||||
|
this.upload_file = undefined; |
||||||
|
this.upload_pic_b = ''; |
||||||
|
}, |
||||||
|
saveadvert() { |
||||||
|
if (this.editadvertinfo.ad_pic && this.editadvertinfo.ad_pic.indexOf("http") > -1) { |
||||||
|
advertinfo(data => { |
||||||
|
if (data.code === 1000) { |
||||||
|
if (data.data && data.data.id) { |
||||||
|
if (this.upload_file) { |
||||||
|
this.beforeAvatarUpload(this.upload_file, data.data.id, 'update') |
||||||
|
} else { |
||||||
|
this.$message.success("更新成功") |
||||||
|
} |
||||||
|
} else { |
||||||
|
this.$message.error("操作失败 " + data.msg) |
||||||
|
} |
||||||
|
|
||||||
|
} else { |
||||||
|
this.$message.error("更新失败 " + data.msg) |
||||||
|
} |
||||||
|
this.loading = false; |
||||||
|
}, {methods: 'PUT', data: this.editadvertinfo}) |
||||||
|
} else { |
||||||
|
advertinfo(data => { |
||||||
|
if (data.code === 1000) { |
||||||
|
if (data.data && data.data.id) { |
||||||
|
this.beforeAvatarUpload(this.upload_file, data.data.id, 'create') |
||||||
|
} else { |
||||||
|
this.$message.error("操作失败 " + data.msg) |
||||||
|
} |
||||||
|
|
||||||
|
} else { |
||||||
|
this.$message.error("添加失败 " + data.msg) |
||||||
|
} |
||||||
|
this.loading = false; |
||||||
|
}, {methods: 'POST', data: this.editadvertinfo}) |
||||||
|
} |
||||||
|
}, |
||||||
|
beforeAvatarUpload(file, id, act) { |
||||||
|
return AvatarUploadUtils(this, file, { |
||||||
|
'app_id': this.$store.state.userinfo.uid, |
||||||
|
'upload_key': file.name, |
||||||
|
'ftype': 'advert', |
||||||
|
'ext': {'id': id} |
||||||
|
// eslint-disable-next-line no-unused-vars |
||||||
|
}, res => { |
||||||
|
this.get_data_from_tabname(); |
||||||
|
this.upload_file = undefined; |
||||||
|
let msg = '添加成功'; |
||||||
|
if (act === 'update') { |
||||||
|
msg = '更新成功' |
||||||
|
} else { |
||||||
|
this.bind_advert_sure = false; |
||||||
|
this.upload_pic_b = ''; |
||||||
|
} |
||||||
|
this.$message.success(msg); |
||||||
|
|
||||||
|
}); |
||||||
|
|
||||||
|
}, |
||||||
|
// eslint-disable-next-line no-unused-vars |
||||||
|
onUploadChange(file, fileList) { |
||||||
|
this.upload_file = file.raw; |
||||||
|
const reader = new FileReader(); |
||||||
|
reader.readAsDataURL(file.raw); |
||||||
|
// eslint-disable-next-line no-unused-vars |
||||||
|
reader.onload = res => { |
||||||
|
this.upload_pic_b = reader.result; |
||||||
|
this.option.img = reader.result; |
||||||
|
this.dialogVisible = true |
||||||
|
}; |
||||||
|
}, |
||||||
|
copy_success() { |
||||||
|
this.$message.success('复制剪切板成功'); |
||||||
|
}, |
||||||
|
handleSizeChange(val) { |
||||||
|
this.pagination.pagesize = val; |
||||||
|
this.get_data_from_tabname({ |
||||||
|
"size": this.pagination.pagesize, |
||||||
|
"page": 1 |
||||||
|
}) |
||||||
|
}, |
||||||
|
handleCurrentChange(val) { |
||||||
|
this.pagination.currentPage = val; |
||||||
|
this.get_data_from_tabname({ |
||||||
|
"size": this.pagination.pagesize, |
||||||
|
"page": this.pagination.currentPage |
||||||
|
}) |
||||||
|
}, |
||||||
|
handleEditAdvert(ad_info) { |
||||||
|
this.editadvertinfo = ad_info; |
||||||
|
this.upload_pic_b = ad_info.ad_pic; |
||||||
|
this.advert_title = "编辑广告信息"; |
||||||
|
this.bind_advert_sure = true; |
||||||
|
}, |
||||||
|
handleDeleteAdvert(ad_info) { |
||||||
|
this.loading = true; |
||||||
|
advertinfo(data => { |
||||||
|
if (data.code === 1000) { |
||||||
|
this.advert_info_list = data.data; |
||||||
|
this.pagination.total = data.count; |
||||||
|
this.$message.success("操作成功") |
||||||
|
} else { |
||||||
|
this.$message.error("信息获取失败") |
||||||
|
} |
||||||
|
this.loading = false; |
||||||
|
}, {methods: 'DELETE', data: {'pk': ad_info.id}}) |
||||||
|
}, |
||||||
|
get_data_from_tabname(data = {}) { |
||||||
|
data.search_key = this.search_key.replace(/^\s+|\s+$/g, ""); |
||||||
|
this.UseradvertFun(data) |
||||||
|
}, |
||||||
|
UseradvertFun(params) { |
||||||
|
this.loading = true; |
||||||
|
advertinfo(data => { |
||||||
|
if (data.code === 1000) { |
||||||
|
this.advert_info_list = data.data; |
||||||
|
this.pagination.total = data.count; |
||||||
|
} else { |
||||||
|
this.$message.error("信息获取失败") |
||||||
|
} |
||||||
|
this.loading = false; |
||||||
|
}, {methods: 'GET', data: params}) |
||||||
|
}, |
||||||
|
|
||||||
|
format_create_time(row) { |
||||||
|
return this.format_time(row.created_time) |
||||||
|
}, |
||||||
|
|
||||||
|
format_time(stime) { |
||||||
|
if (stime) { |
||||||
|
stime = stime.split(".")[0].split("T"); |
||||||
|
return stime[0] + " " + stime[1] |
||||||
|
} else |
||||||
|
return ''; |
||||||
|
}, |
||||||
|
}, mounted() { |
||||||
|
getUserInfoFun(this); |
||||||
|
this.get_data_from_tabname(); |
||||||
|
}, |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.el-main { |
||||||
|
margin: 20px auto 100px; |
||||||
|
width: 1166px; |
||||||
|
position: relative; |
||||||
|
padding-bottom: 1px; |
||||||
|
color: #9b9b9b; |
||||||
|
-webkit-font-smoothing: antialiased; |
||||||
|
border-radius: 1%; |
||||||
|
} |
||||||
|
|
||||||
|
.avatar-uploader-icon { |
||||||
|
font-size: 28px; |
||||||
|
color: #8c939d; |
||||||
|
width: 178px; |
||||||
|
height: 178px; |
||||||
|
line-height: 178px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
.avatar { |
||||||
|
max-height: 80px; |
||||||
|
margin-top: 50px; |
||||||
|
object-fit: cover; |
||||||
|
} |
||||||
|
|
||||||
|
</style> |
@ -0,0 +1,32 @@ |
|||||||
|
# Generated by Django 3.2.3 on 2021-10-14 14:35 |
||||||
|
|
||||||
|
from django.conf import settings |
||||||
|
from django.db import migrations, models |
||||||
|
import django.db.models.deletion |
||||||
|
|
||||||
|
|
||||||
|
class Migration(migrations.Migration): |
||||||
|
dependencies = [ |
||||||
|
('api', '0011_appudid_is_download'), |
||||||
|
] |
||||||
|
|
||||||
|
operations = [ |
||||||
|
migrations.CreateModel( |
||||||
|
name='UserAdDisplayInfo', |
||||||
|
fields=[ |
||||||
|
('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')), |
||||||
|
('ad_uri', models.CharField(max_length=256, verbose_name='广告跳转地址')), |
||||||
|
('ad_pic', models.CharField(help_text='像素最高80px', max_length=256, verbose_name='广告图片地址')), |
||||||
|
('weight', models.IntegerField(default=1, verbose_name='广告展示权重')), |
||||||
|
('description', models.TextField(blank=True, default='', null=True, verbose_name='描述信息')), |
||||||
|
('is_enable', models.BooleanField(default=False, verbose_name='广告开启状态')), |
||||||
|
('created_time', models.DateTimeField(auto_now_add=True, verbose_name='广告创建时间')), |
||||||
|
('user_id', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL, |
||||||
|
verbose_name='用户ID')), |
||||||
|
], |
||||||
|
options={ |
||||||
|
'verbose_name': '用户自定义广告', |
||||||
|
'verbose_name_plural': '用户自定义广告', |
||||||
|
}, |
||||||
|
), |
||||||
|
] |
@ -0,0 +1,22 @@ |
|||||||
|
# Generated by Django 3.2.3 on 2021-10-14 16:17 |
||||||
|
|
||||||
|
from django.db import migrations, models |
||||||
|
|
||||||
|
|
||||||
|
class Migration(migrations.Migration): |
||||||
|
dependencies = [ |
||||||
|
('api', '0012_useraddisplayinfo'), |
||||||
|
] |
||||||
|
|
||||||
|
operations = [ |
||||||
|
migrations.AddField( |
||||||
|
model_name='useraddisplayinfo', |
||||||
|
name='ad_name', |
||||||
|
field=models.CharField(default='xx', max_length=256, verbose_name='广告名称'), |
||||||
|
preserve_default=False, |
||||||
|
), |
||||||
|
migrations.AddIndex( |
||||||
|
model_name='useraddisplayinfo', |
||||||
|
index=models.Index(fields=['ad_name', 'user_id'], name='api_useradd_ad_name_4ea10e_idx'), |
||||||
|
), |
||||||
|
] |
@ -0,0 +1,16 @@ |
|||||||
|
# Generated by Django 3.2.3 on 2021-10-14 16:18 |
||||||
|
|
||||||
|
from django.db import migrations |
||||||
|
|
||||||
|
|
||||||
|
class Migration(migrations.Migration): |
||||||
|
dependencies = [ |
||||||
|
('api', '0013_auto_20211014_1617'), |
||||||
|
] |
||||||
|
|
||||||
|
operations = [ |
||||||
|
migrations.AlterUniqueTogether( |
||||||
|
name='useraddisplayinfo', |
||||||
|
unique_together={('ad_name', 'user_id')}, |
||||||
|
), |
||||||
|
] |
Loading…
Reference in new issue