youngS
3 years ago
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