修改窗口长度滚动

src/api/common/upload.js

@@ -23,6 +23,41 @@ export const uploadFile = id => {
     });
 };
 
+export const uploadQiNiuFile = (file) => {
+    console.log(file);
+    let formData = new FormData();
+    formData.append('file', file);
+    return new Promise((resolve, reject) => {
+        request.post('/admin/qiniu/upload/file', formData).then(res => {
+            resolve(res);
+        }).catch(e => {
+            reject(e);
+        });
+    });
+};
+
+export const uploadTencentFile = id => {
+    return new Promise((resolve, reject) => {
+        $.ajaxFileUpload({
+            fileElementId: id,
+            url: '/admin/upload/tencent/file',
+            type: 'post',
+            dataType: 'json',
+            secureuri: false,
+            async: true,
+            submitType: 'ajax',
+            success: function (res) {
+                resolve(res);
+            },
+            error: function (res, status, e) {
+                console.error(res);
+                console.error(status);
+                reject(e);
+            }
+        });
+    });
+};
+
 export const uploadGift = (file) => {
     let formData = new FormData();
     console.log(file);

src/api/official/officialConfig.js

@@ -0,0 +1,18 @@
+import request from '@/utils/request';
+
+export const getOfficialConfigList = query => {
+    return request({
+        url: '/admin/official/config/list',
+        method: 'get',
+        params: query
+    });
+};
+
+export const saveOfficialConfig = data => {
+    return request({
+        url: '/admin/official/config/save',
+        headers:{"Content-Type": 'application/x-www-form-urlencoded'},
+        method: 'post',
+        data: data
+    });
+}

src/api/official/officialRecord.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request';
+
+export const browseFor30Days = query => {
+    return request({
+        url: '/admin/official/browse/record/browseFor30Days',
+        method: 'get',
+        params: query
+    });
+};

src/components/maintainer/index.vue

@@ -99,14 +99,13 @@
     </div>
     <div class="modal fade loading" style="background: #00000040;" tabindex="-1" role="dialog"
          aria-labelledby="loadingModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
-        <div class="loadingGif" style="position: fixed;"><img :src="loading"></div>
+        <div class="loadingGif" style="position: fixed; left:50%; top:50%;"><img src="https://img.zcool.cn/community/0111345d94b0b8a801211d53cbd04d.gif" style="width: 10%;"></div>
     </div>
 </template>
   
 <script>
 import store from '@/store';
 import { getStore } from '@/utils/store';
-import loading from '@/assets/images/loading.gif';
 
 export default {
     name: 'MaintainerView',

src/views/official/OfficialConfigView.vue

@@ -0,0 +1,488 @@
+<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>
+                </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" style="height: 100%; overflow: hidden; overflow: scroll;">
+        <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">&times;</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;">{{ officialConfig.androidNormalUrl }}</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" @click="uploadNormal" v-if="officialConfig.androidNormalUrl == ''">上传</button>
+                                <button class="btn btn-danger col-sm-4" type="button" id="normalDelBtn" @click="delNormal" 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;">{{ officialConfig.androidReserveUrl }}</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" @click="uploadReserve" v-if="officialConfig.androidReserveUrl == ''">上传</button>
+                                <button class="btn btn-danger col-sm-4" type="button" id="reserveDelBtn" @click="delReserve" 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 { showLoading, hideLoading, apiResult, formatTime } 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) {
+                        $('#itemTitle').html('<label class="col-sm-6 control-label">上次更新时间：' + formatTime(row.updateTime) + '</label>');
+                        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;
+            showLoading();
+            uploadQiNiuFile($this.files['normalFile']).then(res => {
+                let path = res.data;
+                console.log(path);
+                if (path) {
+                    $this.officialConfig.androidNormalUrl = 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;
+                    }
+                }).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();
+                });
+            });
+        },
+        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);
+            });
+        },
+        delNormal() {
+            this.officialConfig.androidNormalUrl = '';
+        },
+        delReserve() {
+            this.officialConfig.androidReserveUrl = '';
+        },
+        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() {
+            $('#normalFile').attr('src', '');
+            $('#reserveFile').attr('src', '');
+            $('#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;
+            }
+            if (!(data.androidNormalUrl != '') && !(data.androidReserveUrl != '')) {
+                $("#tipMsg").text("android未配置apk包");
+                $("#tipModal").modal('show');
+                return;
+            }
+            saveOfficialConfig(data).then(res => {
+                console.log(res);
+                apiResult(res);
+                TableHelper.doRefresh('#configTable');
+                TableHelper.doRefresh('#browseTable');
+                $('#editModal').modal('hide');
+            });
+        },
+    },
+}
+</script>
+  
+<style scoped></style>