zyedu/application/wap/view/first/service/service_list.html

<!-- +---------------------------------------------------------------------- -->
<!-- | CRMEB [ CRMEB赋能开发者，助力企业发展 ] -->
<!-- +---------------------------------------------------------------------- -->
<!-- | Copyright (c) 2016～2022 https://www.crmeb.com All rights reserved. -->
<!-- +---------------------------------------------------------------------- -->
<!-- | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权 -->
<!-- +---------------------------------------------------------------------- -->
<!-- | Author: CRMEB Team <admin@crmeb.com> -->
<!-- +---------------------------------------------------------------------- -->
{extend name="public/container"}
{block name="title"}客服列表{/block}
{block name="head_top"}
<link rel="stylesheet" type="text/css" href="{__WAP_PATH}crmeb/css/store_service.css"/>
{if $service_url neq '' && $service_configuration eq 2}
<script src="{$service_url}/customerServer.js"></script>
{/if}
<style>
    body {
        background-color: #FFFFFF;
    }
    .empty {
        display: block;
        width: 4.14rem;
        margin: 1.5rem auto 0;
    }
</style>
{/block}
{block name="content"}
<div class="cus_server" id="app" v-cloak>
    <div v-if="serviceConfiguration === '1'">
        <ul v-if="list.length">
            <li v-for="item in list" @click="go_kefu(item)">
                <img :src="item.avatar">
                <span>{{item.nickname}}</span>
            </li>
        </ul>
        <img v-if="!list.length && loadend" class="empty" src="/wap/first/zsff/images/empty.png">
    </div>
    <quick-menu></quick-menu>
</div>
{/block}
{block name="foot"}
<script>
    var site_name = "{$Auth_site_name}",isWechat='{$isWechat}',service_configuration='{$service_configuration}',serviceUrl='{$service_url}';
    var userInfo = {$userInfo};
    require(['vue', 'helper', 'store', 'layer', 'quick'], function (Vue, $h, store) {
        new Vue({
            el: '#app',
            data: {
                loading: false,
                loadend: false,
                loadTitle: '上拉加载更多',
                list:[],
                where:{
                    page:1,
                    limit:20
                },
                url: isWechat ? $h.U({ c: 'index', a: 'login' }) : $h.U({ c: 'login', a: 'phone_check' }),
                site_name: site_name,
                isWechat: isWechat,
                serviceConfiguration:service_configuration,
                kefu_token:'',
            },
            created: function () {
                var vm = this;
                if (this.serviceConfiguration === '1') {
                    this.get_service_list();
                    $h.EventUtil.listenTouchDirection(document, function (){
                        vm.get_service_list();
                    }, false);
                } else {
                    if (this.serviceConfiguration === '2') {
                        if (serviceUrl) {
                            this.get_kefu_token();
                        } else {
                            layer.msg('未配置客服站网址', { anim: 0 }, function () {
                                window.history.back();
                            });
                        }
                    }
                }
            },
            methods: {
                // crmeb客服
                initServer: function () {
                    var option = {
                        openUrl: serviceUrl,
                        token: this.kefu_token,
                        isShowTip: true,
                        domId: 'customerServerTip',
                        sendUserData: {
                            nickName: userInfo.nickname, // 用户昵称
                            phone: userInfo.phone, // 用户联系方式
                            avatar: userInfo.avatar // 用户头像 URL地址
                        }
                    };
                    var canCustomerServer = new initCustomerServer(option);
                    canCustomerServer.init();
                    window.addEventListener('message', function () {
                        document.getElementById('iframe_content').style.top = 0;
                    }, { once: true });
                },
                // 客服列表
                get_service_list:function () {
                    var vm = this;
                    if(this.loading) return;
                    if(this.loadend) return;
                    this.loadTitle = '';
                    this.loading = true;
                    store.baseGet($h.U({
                        c: 'service',
                        a: 'get_service_list',
                        q: this.where
                    }), function (res) {
                        var data = res.data.data;
                        vm.list = vm.list.concat(data);
                        vm.loading = false;
                        vm.where.page++;
                        vm.loadend = vm.where.limit > data.length;
                        vm.loadTitle = vm.loadend ? '我是有底线的' : '上拉加载更多';
                    }, function () {
                        vm.loadTitle = '上拉加载更多';
                        vm.loading = false;
                    });
                },
                // 客服token
                get_kefu_token:function () {
                    var vm = this;
                    store.baseGet($h.U({
                        c: 'service',
                        a: 'get_kefu_token'
                    }),function (res) {
                        vm.kefu_token = res.data.data.kefu_token;
                        if (vm.kefu_token) {
                            vm.initServer();
                        } else {
                            layer.msg('未配置客服token', { anim: 0 }, function () {
                                window.history.back();
                            });
                        }
                    });
                },
                go_kefu:function (item) {
                    window.location.assign("{:Url('service/service_ing')}?to_uid=" + item.uid);
                }
            }
        })
    })
</script>
{/block}