JenkinsTest/page/act/invite.vue

<style lang="sass">
@import "./scss/invite.scss";
</style>

<template>
    <div :class='"page-act-invite "+(isApp?"is-app":"")'>
        <h1  v-if="!isApp&&userHeadInfo">{{userHeadInfo.nick}} 邀请你看微剧院</h1>
        <section class="invite-info" v-if="userHeadInfo">
            <div class="u-head">
                <img :src='userHeadInfo.head ? userHeadInfo.head : "/_src/img/pic-head.png"'>
            </div>

            <h2 class="u-title" v-if="isApp">您的邀请码</h2>
            <h2 class="u-title" v-else>他的邀请码</h2>

            <p class="u-code">{{userHeadInfo.id}}</p>
        </section>

        <section class="invite-btn" v-if="!isApp">
            <div class="btn-copy" ref="copy" :data-clipboard-text="userHeadInfo.id" @click="copy()">复制邀请码并立即下载</div>
            <p>安装app后，按提示输入邀请码即可</p>
        </section>

        <section class="invite-share" v-if="isApp">
            <h2>邀请好友</h2>
            <ul>
                <li @click="shareMessage(0)" v-if="isSupportList[0]">
                    <i class="icon-share0"></i>
                    <p>微信</p>
                </li>
                <li @click="shareMessage(1)" v-if="isSupportList[1]">
                    <i class="icon-share1"></i>
                    <p>朋友圈</p>
                </li>
                <li @click="shareMessage(3)" v-if="isSupportList[2]">
                    <i class="icon-share3"></i>
                    <p>QQ</p>
                </li>
                <li @click="shareMessage(4)" v-if="isSupportList[3]">
                    <i class="icon-share4"></i>
                    <p>QQ空间</p>
                </li>
                <li @click="shareMessage(2)" v-if="isSupportList[4]">
                    <i class="icon-share2"></i>
                    <p>新浪微博</p>
                </li>
            </ul>
        </section>

        <section class="invite-list" v-if="isApp">

            <div class="is-success" v-if="invitedCount>0">
                <h2>已成功邀请<em>{{invitedCount}}</em>人</h2>
                <ul>
                    <li v-for="(user,index) in invitedUser" :key="index">
                        <img :src='user.role==1 ? user.head : "/_src/img/pic-head.png"'>
                        <p>{{user.role==1 ? user.nick : "游客"+user.id}}</p>
                    </li>
                </ul>
            </div>
            <div class="is-empty" v-else>暂未邀请好友</div>

        </section>

        <section class="invite-add" v-if="!isApp">
            <div class="box-add1">
                <img src="./../../img/act/bg-invite2.jpg" />
            </div>
            <div class="box-add2">
                <h2>热映中的电影</h2>
                <p>（点击影片播放）</p>
                <div class="swiper-container swiper-video">
                    <ul class="swiper-wrapper">
                        <li class="swiper-slide" v-for="(film,index) in recommendFilms" :key="index">
                            <a :data-href=' film.commentaryCount>0  ? "/?page=video-post&articleId="+film.id+"&cid="+film.ups[0].cid+"&uid="+userHeadInfo.id : "/?page=video-detail&articleId="+film.id+"&uid="+userHeadInfo.id'>
                                <span class="item-cover">
                                    <img :src="film.cover">
                                    <em>{{film.dbRate}}</em>
                                </span>
                                <span class="item-title">{{film.name}}</span>
                                <span class="item-num">{{film.commentaryCount}}个解说</span>
                            </a>      
                        </li>
                    </ul>
                </div>
            </div>
            <div class="box-add3">
                <h2>更多精选专题，尽在微剧院</h2>
                <img src="./../../img/act/bg-invite4.jpg" />
            </div>
        </section>

        <section class="invite-sugg" v-if="isApp">任何意见和反馈可联系客服<span @click="openFeedback">意见反馈</span></section>

        <dlfooter v-if="!isApp"></dlfooter>
    </div>
</template>

<script>
    import invite from './js/invite.js'
    export default invite
</script>