498 lines
23 KiB
Vue
498 lines
23 KiB
Vue
<template>
|
||
<section class="content">
|
||
<div class="box box-danger">
|
||
<div class="box-body">
|
||
<!-- Content Header (Page header) -->
|
||
<section class="content-header">
|
||
<h1 id="itemTitle"></h1>
|
||
</section>
|
||
<!-- .content -->
|
||
<section class="content">
|
||
<div id="configTable"></div>
|
||
<div id="toolbar">
|
||
<button id="addBtn" class="btn btn-default">
|
||
<i class="glyphicon glyphicon-plus"></i>增加
|
||
</button>
|
||
</div>
|
||
</section><!-- .content -->
|
||
</div>
|
||
<div class="box-body" style="height:150%;">
|
||
<!-- Content Header (Page header) -->
|
||
<section class="content-header">
|
||
<h1 id="browseTitle">官网访问数据-最近30天</h1>
|
||
</section>
|
||
<!-- .content -->
|
||
<div id="browseTable"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
|
||
<div class="modal-dialog" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||
<span aria-hidden="true">×</span>
|
||
</button>
|
||
<h4 class="modal-title" id="modalLabel">H5官网配置</h4>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form class="form-horizontal">
|
||
<input type="hidden" name="id" v-model="officialConfig.id" />
|
||
<div class="form-group">
|
||
<label class="col-sm-3 control-label">iOS下载配置</label>
|
||
<div class="col-sm-8">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="iosVersion" class="col-sm-3 control-label">iOS版本号:</label>
|
||
<div class="col-sm-8">
|
||
<input type="text" class="form-control validate[required]" name="categoryCode" id="categoryCode"
|
||
v-model="officialConfig.iosVersion" />
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="iosSkipType" class="col-sm-3 control-label">iOS跳转类型:</label>
|
||
<div class="col-sm-8">
|
||
<select name="iosSkipType" id="iosSkipType" class="form-control" data-btn-class="btn-warning" v-model="officialConfig.iosSkipType">
|
||
<option value="0">AppStore</option>
|
||
<option value="1">其它H5链接</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="iosSkipUrl" class="col-sm-3 control-label">iOS跳转链接:</label>
|
||
<div class="col-sm-8">
|
||
<input type="text" class="form-control validate[required]" name="iosSkipUrl" id="iosSkipUrl"
|
||
v-model="officialConfig.iosSkipUrl" />
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="col-sm-3 control-label">Android下载配置</label>
|
||
<div class="col-sm-8">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="androidVersion" class="col-sm-3 control-label">Android版本号:</label>
|
||
<div class="col-sm-8">
|
||
<input type="text" class="form-control validate[required]" name="androidVersion" id="androidVersion"
|
||
v-model="officialConfig.androidVersion" />
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="androidSkipType" class="col-sm-3 control-label">Android跳转类型:</label>
|
||
<div class="col-sm-8">
|
||
<select name="androidSkipType" id="androidSkipType" class="form-control" data-btn-class="btn-warning" v-model="officialConfig.androidSkipType">
|
||
<option value="0">GooglePlay</option>
|
||
<option value="1">直接下载Apk</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-group" v-if="officialConfig.androidSkipType == 0">
|
||
<label for="androidSkipUrl" class="col-sm-3 control-label">Android跳转链接:</label>
|
||
<div class="col-sm-8">
|
||
<input type="text" class="form-control validate[required]" name="androidSkipUrl" id="androidSkipUrl"
|
||
v-model="officialConfig.androidSkipUrl" />
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="androidNormalUrl" class="col-sm-3 control-label">Android常规包:</label>
|
||
<div class="col-sm-8">
|
||
<input type="file" id="normalFile" name="uploadFile" @change="changeFile($event)" v-if="officialConfig.androidNormalUrl == ''"/>
|
||
<span class="btn col-sm-4" id="normalUploadInfo" style="color:red;"></span>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="col-sm-3 control-label"></label>
|
||
<div class="col-sm-8">
|
||
<button class="btn btn-default col-sm-4" type="button" id="normalUploadBtn" v-if="officialConfig.androidNormalUrl == ''">上传</button>
|
||
<button class="btn btn-danger col-sm-4" type="button" id="normalDelBtn" v-if="officialConfig.androidNormalUrl != ''">删除</button>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="androidReserveUrl" class="col-sm-3 control-label">Android备用包:</label>
|
||
<div class="col-sm-8">
|
||
<input type="file" id="reserveFile" name="uploadFile" v-if="officialConfig.androidReserveUrl == ''"/>
|
||
<span class="btn col-sm-4" id="reserveUploadInfo" style="color:red;"></span>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="col-sm-3 control-label"></label>
|
||
<div class="col-sm-8">
|
||
<button class="btn btn-default col-sm-4" type="button" id="reserveUploadBtn" v-if="officialConfig.androidReserveUrl == ''">上传</button>
|
||
<button class="btn btn-danger col-sm-4" type="button" id="reserveDelBtn" v-if="officialConfig.androidReserveUrl != ''">删除</button>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="col-sm-3 control-label">联系方式配置</label>
|
||
<div class="col-sm-8">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="contact0" class="col-sm-3 control-label">Wechat:</label>
|
||
<div class="col-sm-8">
|
||
<input type="text" class="form-control validate[required]" name="contact0" id="contact0"
|
||
v-model="officialConfig.contact0" />
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="contact1" class="col-sm-3 control-label">Line:</label>
|
||
<div class="col-sm-8">
|
||
<input type="text" class="form-control validate[required]" name="contact1" id="contact1"
|
||
v-model="officialConfig.contact1" />
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="contact2" class="col-sm-3 control-label">Email:</label>
|
||
<div class="col-sm-8">
|
||
<input type="text" class="form-control validate[required]" name="contact2" id="contact2"
|
||
v-model="officialConfig.contact2" />
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
|
||
<button type="button" class="btn btn-primary" id="save">保存</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import TableHelper from '@/utils/bootstrap-table-helper';
|
||
import { getOfficialConfigList, saveOfficialConfig } from '@/api/official/officialConfig';
|
||
import { browseFor30Days } from '@/api/official/officialRecord';
|
||
import { uploadQiNiuFile, uploadTencentFile } from '@/api/common/upload';
|
||
import { apiResult } from '@/utils/maintainer';
|
||
import { showLoading, hideLoading } from '@/utils/maintainer';
|
||
|
||
export default {
|
||
name: 'OfficialConfigView',
|
||
data() {
|
||
return {
|
||
files: {},
|
||
configColumns: [
|
||
{ field: 'iosVersion', title: 'iOS版本号', align: 'center', width: '15%' },
|
||
{
|
||
field: 'iosSkipType',
|
||
title: 'iOS跳转类型',
|
||
align: 'center',
|
||
width: '15%',
|
||
formatter: function (val, row, index) {
|
||
let value = '';
|
||
if (val == 0) {
|
||
value = 'AppStore';
|
||
} else {
|
||
value = '其它H5链接';
|
||
}
|
||
return value;
|
||
}
|
||
},
|
||
{ field: 'iosSkipUrl', title: 'iOS跳转链接', align: 'center', width: '15%' },
|
||
{ field: 'androidVersion', title: 'Android版本号', align: 'center', width: '15%' },
|
||
{
|
||
field: 'androidSkipType',
|
||
title: 'Android跳转类型',
|
||
align: 'center',
|
||
width: '15%',
|
||
formatter: function (val, row, index) {
|
||
let value = '';
|
||
if (val == 0) {
|
||
value = 'GooglePlay';
|
||
} else if (val == 1) {
|
||
value = '直接下载Apk';
|
||
}
|
||
return value;
|
||
}
|
||
},
|
||
{
|
||
field: 'android',
|
||
title: 'Android跳转链接',
|
||
align: 'center',
|
||
width: '15%',
|
||
formatter: function (val, row, index) {
|
||
let value = 'GooglePlay：';
|
||
if (row.androidSkipUrl) {
|
||
value += row.androidSkipUrl;
|
||
} else {
|
||
value += '无';
|
||
}
|
||
value += '<br/>';
|
||
value += '常规包：';
|
||
if (row.androidNormalUrl) {
|
||
value += row.androidNormalUrl;
|
||
} else {
|
||
value += '无';
|
||
}
|
||
value += '<br/>';
|
||
value += '备用包：';
|
||
if (row.androidReserveUrl) {
|
||
value += row.androidReserveUrl;
|
||
} else {
|
||
value += '无';
|
||
}
|
||
value += '<br/>';
|
||
return value;
|
||
}
|
||
},
|
||
{
|
||
field: 'contact',
|
||
title: '联系方式',
|
||
align: 'center',
|
||
width: '15%',
|
||
formatter: function (val, row, index) {
|
||
let value = '';
|
||
value += 'Wechat：';
|
||
if (row.contact0) {
|
||
value += row.contact0;
|
||
} else {
|
||
value += '无';
|
||
}
|
||
value += '<br/>';
|
||
value += 'Line：';
|
||
if (row.contact1) {
|
||
value += row.contact1;
|
||
} else {
|
||
value += '无';
|
||
}
|
||
value += '<br/>';
|
||
value += 'Email：';
|
||
if (row.contact2) {
|
||
value += row.contact2;
|
||
} else {
|
||
value += '无';
|
||
}
|
||
return value;
|
||
}
|
||
},
|
||
{
|
||
field: 'id',
|
||
title: '操作',
|
||
align: 'center',
|
||
width: '15%',
|
||
formatter: function (val, row, index) {
|
||
let value = '<button class="btn btn-sm btn-success opt-edit" data-id="' + val + '" data-index="' + index + '">编辑</button>';
|
||
return value;
|
||
}
|
||
}
|
||
],
|
||
browseColumns: [
|
||
{ field: 'dateTime', title: '日期', align: 'center', width: '15%' },
|
||
{ field: 'clientUv', title: '无线官网UV', align: 'center', width: '15%' },
|
||
{ field: 'clientPv', title: '无线官网PV', align: 'center', width: '15%' },
|
||
{ field: 'iosDownloadPv', title: '无线 iOS下载点击次数', align: 'center', width: '15%' },
|
||
{ field: 'androidDownloadPv', title: '无线 安卓下载点击次数', align: 'center', width: '15%' },
|
||
{ field: 'pcUv', title: 'PC官网UV', align: 'center', width: '15%' },
|
||
{ field: 'pcPv', title: 'PC官网PV', align: 'center', width: '15%' },
|
||
{ field: 'pcIosDownloadPv', title: 'PC iOS下载点击次数', align: 'center', width: '15%' },
|
||
{ field: 'pcAndroidDownloadPv', title: 'PC 安卓下载点击次数', align: 'center', width: '15%' },
|
||
],
|
||
officialConfig: {
|
||
id: 0,
|
||
iosVersion: '',
|
||
iosSkipType: 0,
|
||
iosSkipUrl: '',
|
||
androidVersion: '',
|
||
androidSkipType: 0,
|
||
androidSkipUrl: '',
|
||
androidNormalUrl: '',
|
||
androidReserveUrl: '',
|
||
contact0: '',
|
||
contact1: '',
|
||
contact2: '',
|
||
},
|
||
};
|
||
},
|
||
created() {
|
||
this.init();
|
||
this.getBrowse();
|
||
},
|
||
methods: {
|
||
changeFile(event) {
|
||
console.log(event);
|
||
let target = event.target;
|
||
let id = target.id;
|
||
this.files[id] = target.files[0];
|
||
},
|
||
uploadNormal() {
|
||
let $this = this;
|
||
uploadQiNiuFile($this.files['normalFile']).then(res => {
|
||
let data = res.data;
|
||
console.log(data);
|
||
if (data && data.length > 0) {
|
||
let path = data[0];
|
||
$this.officialConfig.androidNormalUrl = path;
|
||
$('#normalUploadInfo').html(path);
|
||
}
|
||
hideLoading();
|
||
}).catch(e => {
|
||
console.error(e);
|
||
hideLoading();
|
||
});
|
||
},
|
||
uploadReserve() {
|
||
let $this = this;
|
||
let file = $('#reserveFile').val();
|
||
if (file && file.length > 0) {
|
||
showLoading();
|
||
uploadTencentFile('reserveFile').then(res => {
|
||
let path = res.data;
|
||
if (path) {
|
||
$this.officialConfig.androidReserveUrl = path;
|
||
$('#reserveUploadInfo').html(path);
|
||
}
|
||
}).finally(() => {
|
||
hideLoading();
|
||
});
|
||
}
|
||
},
|
||
init() {
|
||
this.$nextTick(function () {
|
||
let $this = this;
|
||
$this.initTable();
|
||
$('#addBtn').click(function () {
|
||
$this.add();
|
||
});
|
||
$('#configTable').on('click', '.opt-edit', function () {
|
||
$this.edit(this);
|
||
});
|
||
$('#save').click(function () {
|
||
$this.save();
|
||
});
|
||
$('#normalDelBtn').click(function () {
|
||
$this.officialConfig.androidNormalUrl = '';
|
||
$('#normalUploadInfo').html('');
|
||
});
|
||
$('#reserveDelBtn').click(function () {
|
||
$this.officialConfig.androidReserveUrl = '';
|
||
$('#reserveUploadInfo').html('');
|
||
});
|
||
$('#normalUploadBtn').click(function () {
|
||
$this.uploadNormal();
|
||
});
|
||
$('#reserveUploadBtn').click(function () {
|
||
$this.uploadReserve();
|
||
});
|
||
});
|
||
},
|
||
initTable() {
|
||
let $this = this;
|
||
TableHelper.destroy('#configTable');
|
||
$('#configTable').bootstrapTable({
|
||
columns: $this.configColumns,
|
||
cache: false,
|
||
striped: true,
|
||
showRefresh: false,
|
||
pageSize: 10,
|
||
pagination: true,
|
||
pageList: [1, 10, 20, 30, 50],
|
||
search: false,
|
||
sidePagination: 'server',
|
||
queryParamsType: 'undefined',
|
||
queryParams: function queryParams(params) {
|
||
var param = {
|
||
pageNum: params.pageNumber,
|
||
pageSize: params.pageSize,
|
||
};
|
||
return param;
|
||
},
|
||
ajax:function(request){
|
||
getOfficialConfigList(request.data).then(res => {
|
||
let data = res.data;
|
||
request.success({
|
||
'rows': data,
|
||
'total': data.length,
|
||
});
|
||
});
|
||
},
|
||
toolbar: '#toolbar',
|
||
});
|
||
TableHelper.destroy('#browseTable');
|
||
$('#browseTable').bootstrapTable({
|
||
columns: $this.browseColumns,
|
||
cache: false,
|
||
striped: true,
|
||
showRefresh: false,
|
||
search: false,
|
||
pageSize: 10,
|
||
pagination: true,
|
||
pageList: [1, 10, 20, 30, 50],
|
||
sidePagination: "client",
|
||
queryParamsType: "undefined",
|
||
});
|
||
},
|
||
getBrowse() {
|
||
browseFor30Days().then(res => {
|
||
let data = res.data;
|
||
TableHelper.load('#browseTable', data);
|
||
});
|
||
},
|
||
add() {
|
||
this.officialConfig.id = 0;
|
||
this.officialConfig.iosVersion = '';
|
||
this.officialConfig.iosSkipType = 0;
|
||
this.officialConfig.iosSkipUrl = '';
|
||
this.officialConfig.androidVersion = '';
|
||
this.officialConfig.androidSkipType = 0;
|
||
this.officialConfig.androidSkipUrl = '';
|
||
this.officialConfig.androidNormalUrl = '';
|
||
this.officialConfig.androidReserveUrl = '';
|
||
this.officialConfig.contact0 = '';
|
||
this.officialConfig.contact1 = '';
|
||
this.officialConfig.contact2 = '';
|
||
this.show();
|
||
},
|
||
edit(obj) {
|
||
const index = $(obj).data('index');
|
||
const record = TableHelper.getData('#configTable')[index];
|
||
this.officialConfig.id = record.id;
|
||
this.officialConfig.iosVersion = record.iosVersion;
|
||
this.officialConfig.iosSkipType = record.iosSkipType;
|
||
this.officialConfig.iosSkipUrl = record.iosSkipUrl;
|
||
this.officialConfig.androidVersion = record.androidVersion;
|
||
this.officialConfig.androidSkipType = record.androidSkipType;
|
||
this.officialConfig.androidSkipUrl = record.androidSkipUrl;
|
||
this.officialConfig.androidNormalUrl = record.androidNormalUrl;
|
||
this.officialConfig.androidReserveUrl = record.androidReserveUrl;
|
||
this.officialConfig.contact0 = record.contact0;
|
||
this.officialConfig.contact1 = record.contact1;
|
||
this.officialConfig.contact2 = record.contact2;
|
||
this.show();
|
||
},
|
||
show() {
|
||
$('#normalUploadInfo').html(this.officialConfig.androidNormalUrl);
|
||
$('#reserveUploadInfo').html(this.officialConfig.androidReserveUrl);
|
||
$('#editModal').modal('show');
|
||
},
|
||
save() {
|
||
let data = {
|
||
id: new Number(this.officialConfig.id),
|
||
iosVersion: this.officialConfig.iosVersion,
|
||
iosSkipType: new Number(this.officialConfig.iosSkipType),
|
||
iosSkipUrl: this.officialConfig.iosSkipUrl,
|
||
androidVersion: this.officialConfig.androidVersion,
|
||
androidSkipType: new Number(this.officialConfig.androidSkipType),
|
||
androidSkipUrl: this.officialConfig.androidSkipUrl,
|
||
androidNormalUrl: this.officialConfig.androidNormalUrl,
|
||
androidReserveUrl: this.officialConfig.androidReserveUrl,
|
||
contact0: this.officialConfig.contact0,
|
||
contact1: this.officialConfig.contact1,
|
||
contact2: this.officialConfig.contact2,
|
||
};
|
||
if (data.id == 0) {
|
||
data.id = null;
|
||
}
|
||
saveOfficialConfig(data).then(res => {
|
||
console.log(res);
|
||
apiResult(res);
|
||
TableHelper.doRefresh('#configTable');
|
||
TableHelper.doRefresh('#browseTable');
|
||
$('#editModal').modal('hide');
|
||
});
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style scoped></style> |