587 lines
22 KiB
HTML
587 lines
22 KiB
HTML
{extend name="public/base" /} {block name="body"}
|
||
<style>
|
||
.body-content{
|
||
width: 96%;
|
||
height:100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
display:block;
|
||
margin: 0 auto;
|
||
padding-bottom: 50px;
|
||
}
|
||
.tit{
|
||
width: 100%;
|
||
padding-top:18px;
|
||
}
|
||
.inp{
|
||
width: 250px;
|
||
}
|
||
.avatar {
|
||
width: 178px;
|
||
display: block;
|
||
}
|
||
.avatar-uploader .el-upload {
|
||
border: 1px dashed #d9d9d9;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.avatar-uploader .el-upload:hover {
|
||
border-color: #409EFF;
|
||
}
|
||
.avatar-uploader-icon {
|
||
font-size: 28px;
|
||
color: #8c939d;
|
||
width: 178px;
|
||
height: 178px;
|
||
line-height: 178px;
|
||
text-align: center;
|
||
}
|
||
input[type=file]{
|
||
display: none;
|
||
}
|
||
.uploadlist{
|
||
margin-left:20px;
|
||
margin-top:20px;
|
||
margin-bottom:20px;
|
||
}
|
||
</style>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||
<link rel="stylesheet" type="text/css" href="/application/admin/static/js/oss-h5-upload-js-direct/style.css" />
|
||
|
||
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
|
||
style="box-shadow: 2px 2px 2px #eee;">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content" style="overflow:auto;height:555px">
|
||
|
||
<div class="uploadlist">
|
||
<div id="ossfile">你的浏览器不支持flash,Silverlight或者HTML5！</div>
|
||
|
||
<br/>
|
||
|
||
<div id="container">
|
||
<a id="selectfiles" href="javascript:void(0);" class='btn btn-info'>选择文件</a>
|
||
<a id="postfiles" href="javascript:void(0);" class='btn btn-info'>开始上传</a>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="main-box clearfix" id="app">
|
||
<div class="body-content">
|
||
|
||
<div class="tit">
|
||
<el-button type="primary" size="mini" @click="uploadpart">上传集数</el-button>
|
||
<el-button type="primary" size="mini" @click="setall">批量设置</el-button>
|
||
</div>
|
||
|
||
|
||
<el-table
|
||
:data="tableData"
|
||
style="width: 100%">
|
||
|
||
<el-table-column
|
||
fixed
|
||
prop="order"
|
||
label="集">
|
||
</el-table-column>
|
||
|
||
<el-table-column
|
||
label="视频">
|
||
<template slot-scope="scope">
|
||
<el-button type="primary" size="mini" @click="getmp4(scope.row.video_url)">查看</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column
|
||
prop="title"
|
||
label="标题">
|
||
</el-table-column>
|
||
|
||
<el-table-column
|
||
prop="price"
|
||
label="书币">
|
||
</el-table-column>
|
||
|
||
<el-table-column
|
||
label="是否付费">
|
||
<template slot-scope="scope">
|
||
<el-tag type="warning" v-if="scope.row.isvip==1">付费</el-tag>
|
||
<el-tag type="success" v-if="scope.row.isvip==0">免费</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column
|
||
label="状态">
|
||
<template slot-scope="scope">
|
||
<el-tag type="warning" v-if="scope.row.status==0">禁用</el-tag>
|
||
<el-tag type="success" v-if="scope.row.status==1">正常</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column
|
||
prop="addtime"
|
||
label="添加时间">
|
||
</el-table-column>
|
||
|
||
<el-table-column
|
||
fixed="right"
|
||
label="操作"
|
||
width="120">
|
||
<template slot-scope="scope">
|
||
|
||
<el-button
|
||
@click="addlinkshow(scope.row)"
|
||
type="text"
|
||
size="small"
|
||
v-if="scope.row.order<=6">
|
||
生成推广链接
|
||
</el-button>
|
||
|
||
<el-button
|
||
@click="exitRow(scope.row)"
|
||
type="text"
|
||
size="small">
|
||
编辑
|
||
</el-button>
|
||
|
||
<el-button
|
||
@click="deleteRow(scope.row.id)"
|
||
type="text"
|
||
size="small">
|
||
删除
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
|
||
<el-dialog title="查看视频" :visible.sync="dialogFormVisible">
|
||
<video controls="controls" autoplay="autoplay" :src="videourl" width="100%"></video>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button @click="dialogFormVisible = false">关闭</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
<el-dialog title="编辑" :visible.sync="dialogFormVisible2">
|
||
<el-form :model="exitRowData">
|
||
|
||
<el-form-item label="标题" :label-width="formLabelWidth">
|
||
<el-input v-model="exitRowData.title" autocomplete="off" class="inp"></el-input>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="书币价格" :label-width="formLabelWidth">
|
||
<el-input v-model="exitRowData.price" autocomplete="off" class="inp"></el-input>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="是否付费" :label-width="formLabelWidth">
|
||
<el-select v-model="exitRowData.isvip" placeholder="是否付费" style="width:108px;">
|
||
<el-option label="免费" value="0"></el-option>
|
||
<el-option label="付费" value="1"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="状态" :label-width="formLabelWidth">
|
||
<el-select v-model="exitRowData.status" placeholder="状态" style="width:108px;">
|
||
<el-option label="禁用" value="0"></el-option>
|
||
<el-option label="正常" value="1"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="集" :label-width="formLabelWidth">
|
||
<el-input v-model="exitRowData.order" autocomplete="off" class="inp"></el-input>
|
||
</el-form-item>
|
||
|
||
</el-form>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button @click="dialogFormVisible2 = false">取 消</el-button>
|
||
<el-button type="primary" @click="exitdataca(exitRowData)" :loading="loadingav">确 定</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
|
||
<el-dialog title="批量设置" :visible.sync="dialogFormVisible3">
|
||
|
||
<el-form :model="selalldata">
|
||
<el-form-item label="类型" :label-width="formLabelWidth">
|
||
<el-select v-model="selone" placeholder="选择" style="width:108px;">
|
||
<el-option label="章节付费" value="1"></el-option>
|
||
<el-option label="全本购买" value="2"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="全本购买价格" :label-width="formLabelWidth" v-if="selone==2">
|
||
<el-input v-model="selalldata.allprice" style="width:108px"></el-input>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="集选择" :label-width="formLabelWidth" v-if="selone==1">
|
||
<el-input v-model="selalldata.start" style="width:108px" placeholder="第1集" type="number" min="1"></el-input>
|
||
<label>-</label>
|
||
<el-input v-model="selalldata.end" style="width:108px" placeholder="第2集" type="number" min="1"></el-input>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="操作" :label-width="formLabelWidth" v-if="selone==1">
|
||
<template>
|
||
<el-radio v-model="allradio" label="1">禁用</el-radio>
|
||
<el-radio v-model="allradio" label="2">正常</el-radio>
|
||
<el-radio v-model="allradio" label="3">付费</el-radio>
|
||
<el-radio v-model="allradio" label="4">免费</el-radio>
|
||
</template>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="单章价格" :label-width="formLabelWidth" v-if="allradio==3 && selone==1">
|
||
<el-input v-model="selalldata.bookone" style="width:108px"></el-input>
|
||
</el-form-item>
|
||
|
||
</el-form>
|
||
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button @click="dialogFormVisible3 = false">取 消</el-button>
|
||
<el-button type="primary" @click="upallconf">确 定</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
|
||
<el-dialog title="生成推广链接" :visible.sync="dialogFormVisible4">
|
||
<el-form :model="linkRowData">
|
||
|
||
<el-form-item label="短剧名称" :label-width="formLabelWidth">
|
||
<el-input v-model="linkRowData.title" autocomplete="off" class="inp" :disabled="true"></el-input>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="第X集" :label-width="formLabelWidth">
|
||
<el-input v-model="linkRowData.order" autocomplete="off" class="inp" :disabled="true"></el-input>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="渠道名称" :label-width="formLabelWidth">
|
||
<el-input v-model="linkRowData.remark" autocomplete="off" class="inp"></el-input>
|
||
</el-form-item>
|
||
|
||
</el-form>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button @click="dialogFormVisible4 = false">取 消</el-button>
|
||
<el-button type="primary" @click="addlink()" :loading="loadingav">生 成</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
</div>
|
||
</div>
|
||
{/block} {block name="script"}
|
||
<script type="text/javascript" src="/application/admin/static/js/oss-h5-upload-js-direct/lib/crypto1/crypto/crypto.js"></script>
|
||
<script type="text/javascript" src="/application/admin/static/js/oss-h5-upload-js-direct/lib/crypto1/hmac/hmac.js"></script>
|
||
<script type="text/javascript" src="/application/admin/static/js/oss-h5-upload-js-direct/lib/crypto1/sha1/sha1.js"></script>
|
||
<script type="text/javascript" src="/application/admin/static/js/oss-h5-upload-js-direct/lib/base64.js"></script>
|
||
<script type="text/javascript" src="/application/admin/static/js/oss-h5-upload-js-direct/lib/plupload-2.1.2/js/plupload.full.min.js"></script>
|
||
<script>
|
||
var app = new Vue({
|
||
el: '#app',
|
||
data: {
|
||
tableData: [],
|
||
dialogFormVisible:false,
|
||
dialogFormVisible2:false,
|
||
dialogFormVisible3:false,
|
||
dialogFormVisible4:false,
|
||
videourl:'',
|
||
exitRowData:'',
|
||
linkRowData:[],
|
||
formLabelWidth:"100px",
|
||
selone:'1',
|
||
selalldata:[],
|
||
allradio:'',
|
||
loadingav:false,
|
||
},
|
||
methods: {
|
||
refreshs() {
|
||
this.loading = true
|
||
var that = this
|
||
var id = "{$id}"
|
||
$.ajax({
|
||
type: "POST",
|
||
url: "{:url('Skitchapter/refreshs')}",
|
||
data: {id:id},
|
||
dataType: "json",
|
||
success: function(data) {
|
||
that.loading = false
|
||
if (data.status == 1) {
|
||
that.tableData = data.data
|
||
}
|
||
}
|
||
});
|
||
},
|
||
uploadpart(){
|
||
$("#myModal").modal('show');
|
||
},
|
||
deleteRow(id){
|
||
this.$confirm('此操作将删除该章节该视频 确定?', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
var that = this
|
||
$.ajax({
|
||
type: "POST",
|
||
url: "{:url('Skitchapter/deleteRow')}",
|
||
data: {id:id},
|
||
dataType: "json",
|
||
success: function(data) {
|
||
if (data.status == 1) {
|
||
that.refreshs()
|
||
that.$message({
|
||
type: 'success',
|
||
message: '删除成功!'
|
||
});
|
||
}
|
||
}
|
||
});
|
||
}).catch(() => {
|
||
|
||
});
|
||
},
|
||
getmp4(url){
|
||
this.dialogFormVisible = true
|
||
this.videourl = url
|
||
},
|
||
exitRow(data){
|
||
this.dialogFormVisible2 = true
|
||
this.exitRowData = data
|
||
|
||
},
|
||
exitdataca(data){
|
||
var that = this
|
||
$.ajax({
|
||
type: "POST",
|
||
url: "{:url('Skitchapter/exitdataca')}",
|
||
data: {data:data},
|
||
dataType: "json",
|
||
success: function(data) {
|
||
if (data.status == 1) {
|
||
that.refreshs()
|
||
that.$message({
|
||
type: 'success',
|
||
message: '成功!'
|
||
});
|
||
that.dialogFormVisible2 = false
|
||
}else{
|
||
that.$message({
|
||
message: data.msg,
|
||
type: 'warning'
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
setall(){
|
||
this.dialogFormVisible3 = true
|
||
var id = "{$id}"
|
||
var that = this
|
||
$.ajax({
|
||
type: "POST",
|
||
url: "{:url('Skitchapter/getbuytype')}",
|
||
data: {id:id},
|
||
dataType: "json",
|
||
success: function(data) {
|
||
if (data.status == 1) {
|
||
if(data.buytype==1){
|
||
that.selone = '2'
|
||
that.selalldata.allprice = data.allprice
|
||
}else{
|
||
that.selone = '1'
|
||
}
|
||
}
|
||
}
|
||
});
|
||
},
|
||
upallconf(){
|
||
var selone = this.selone
|
||
var allprice = this.selalldata.allprice
|
||
var start = this.selalldata.start
|
||
var end = this.selalldata.end
|
||
var allradio = this.allradio
|
||
var bookone = this.selalldata.bookone
|
||
var id = "{$id}"
|
||
this.loadingav = true
|
||
var that = this
|
||
$.ajax({
|
||
type: "POST",
|
||
url: "{:url('Skitchapter/upallconf')}",
|
||
data: {
|
||
selone:selone,
|
||
allprice:allprice,
|
||
start:start,
|
||
end:end,
|
||
allradio:allradio,
|
||
bookone:bookone,
|
||
id:id
|
||
},
|
||
dataType: "json",
|
||
success: function(data) {
|
||
that.loadingav = false
|
||
if (data.status == 1) {
|
||
that.refreshs()
|
||
that.$message({
|
||
type: 'success',
|
||
message: '成功!'
|
||
});
|
||
that.dialogFormVisible3 = false
|
||
}else{
|
||
that.$message({
|
||
message: data.msg,
|
||
type: 'warning'
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
addlinkshow(one){
|
||
this.dialogFormVisible4 = true
|
||
this.linkRowData.title = "{$name}"
|
||
this.linkRowData.order = one.order
|
||
this.linkRowData.id = one.id
|
||
},
|
||
addlink(){
|
||
this.$confirm('确定生成?', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(() => {
|
||
var that = this
|
||
$.ajax({
|
||
type: "POST",
|
||
url: "{:url('Skitchapter/addlink')}",
|
||
data: {
|
||
id:that.linkRowData.id,
|
||
remark:that.linkRowData.remark
|
||
},
|
||
dataType: "json",
|
||
success: function(data) {
|
||
if (data.status == 1) {
|
||
that.$message({
|
||
type: 'success',
|
||
message: '生成成功!'
|
||
});
|
||
that.dialogFormVisible4 = false
|
||
that.linkRowData = []
|
||
}else{
|
||
that.$message({
|
||
message: data.msg,
|
||
type: 'warning'
|
||
});
|
||
}
|
||
}
|
||
});
|
||
}).catch(() => {
|
||
|
||
});
|
||
},
|
||
},
|
||
created: function() {
|
||
this.refreshs()
|
||
var that = this
|
||
var policyText = {
|
||
"expiration": "2023-01-01T12:00:00.000Z", //设置该Policy的失效时间，超过这个失效时间之后，就没有办法通过这个policy上传文件了
|
||
"conditions": [
|
||
["content-length-range", 0, 1048576000] // 设置上传文件的大小限制
|
||
]
|
||
};
|
||
|
||
accessid = 'LTAI4G4vE6yQ8YRztNZ65Wrf';
|
||
accesskey = 'OCyBu0ThZOgSHz2JLHyXOm7evWf0NA';
|
||
host = 'https://ytyss.oss-cn-beijing.aliyuncs.com';
|
||
dirname = "{$directoryname}"+"/";
|
||
|
||
|
||
var policyBase64 = Base64.encode(JSON.stringify(policyText))
|
||
message = policyBase64
|
||
var bytes = Crypto.HMAC(Crypto.SHA1, message, accesskey, {
|
||
asBytes: true
|
||
});
|
||
var signature = Crypto.util.bytesToBase64(bytes);
|
||
var uploader = new plupload.Uploader({
|
||
runtimes: 'html5,flash,silverlight,html4',
|
||
browse_button: 'selectfiles',
|
||
//runtimes : 'flash',
|
||
container: document.getElementById('container'),
|
||
flash_swf_url: '/application/admin/static/js/oss-h5-upload-js-direct/lib/plupload-2.1.2/js/Moxie.swf',
|
||
silverlight_xap_url: '/application/admin/static/js/oss-h5-upload-js-direct/lib/plupload-2.1.2/js/Moxie.xap',
|
||
|
||
url: host,
|
||
|
||
multipart_params: {
|
||
'Filename': '${filename}',
|
||
'key': dirname + '${filename}',
|
||
'policy': policyBase64,
|
||
'OSSAccessKeyId': accessid,
|
||
'success_action_status': '200', //让服务端返回200,不然，默认会返回204
|
||
'signature': signature,
|
||
},
|
||
|
||
init: {
|
||
PostInit: function() {
|
||
document.getElementById('ossfile').innerHTML = '';
|
||
document.getElementById('postfiles').onclick = function() {
|
||
uploader.start();
|
||
return false;
|
||
};
|
||
},
|
||
|
||
FilesAdded: function(up, files) {
|
||
plupload.each(files, function(file) {
|
||
document.getElementById('ossfile').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ')<b></b>' +
|
||
'<div class="progress"><div class="progress-bar" style="width: 0%"></div></div>' +
|
||
'</div>';
|
||
});
|
||
},
|
||
|
||
UploadProgress: function(up, file) {
|
||
var d = document.getElementById(file.id);
|
||
d.getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
|
||
|
||
var prog = d.getElementsByTagName('div')[0];
|
||
var progBar = prog.getElementsByTagName('div')[0]
|
||
progBar.style.width = 2 * file.percent + 'px';
|
||
progBar.setAttribute('aria-valuenow', file.percent);
|
||
},
|
||
|
||
FileUploaded: function(up, file, info) {
|
||
if (info.status >= 200 || info.status < 200) {
|
||
var id = "{$id}"
|
||
$.ajax({
|
||
type: "POST",
|
||
url: "{:url('Skitchapter/uploadvideo')}",
|
||
data: {filename:file.name,id:id},
|
||
dataType: "json",
|
||
success: function(data) {
|
||
if (data.status == 1) {
|
||
that.$message({
|
||
message: '成功',
|
||
type: 'success'
|
||
});
|
||
that.refreshs()
|
||
}else{
|
||
that.$message({
|
||
message: data.msg,
|
||
type: 'warning'
|
||
})
|
||
}
|
||
}
|
||
});
|
||
} else {
|
||
document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = info.response;
|
||
}
|
||
},
|
||
|
||
Error: function(up, err) {
|
||
document.getElementById('console').appendChild(document.createTextNode("\nError xml:" + err.response));
|
||
}
|
||
}
|
||
});
|
||
|
||
uploader.init();
|
||
}
|
||
})
|
||
</script>
|
||
{/block} |