h5gamePay/_src/page/taptapstar/index.vue

<template>
    <div class="page-taptapstar">
        <div class="bg-mask"></div>
        <div class="box-shop-wrap">
            <div class="box-shop">
                <div class="box-hd">
                    <ul>
                        <li :class='[{"active":selectIndex==1}]' @click="changeType(1)">推荐</li>
                        <li :class='[{"active":selectIndex==2}]' @click="changeType(2)">钻石</li>
                        <li :class='[{"active":selectIndex==3}]' @click="changeType(3)">金币</li>
                        <li :class='[{"active":selectIndex==4}]' @click="changeType(4)">礼包</li>
                    </ul>
                </div>
                <div class="box-bd">
                    <div :class='["tab-panel",{"active":selectIndex==1}]'>
                        <ul class="list-recommend">
                            <li class="recommend-item bg0" v-for="(item,index) in recommendList" :key="index" v-if="index==0||index>=3">
                                <div class="item-fl">
                                    <img :class="['item-pic','pic'+item.picId]" :src='""+picUrl+item.picId+".png"'/>
                                    <div class="item-cont">
                                        <h3>{{item.name}}</h3>
                                        <p>{{item.desc}}</p>
                                    </div>
                                </div>
                                <div class="item-btn ext-buy" v-if="index>=3" @click="handlePay(item.id,1)">
                                    ￥ {{item.price/100}}
                                </div>
                                <div class="item-btn" @click="showPopupBook(true)" v-else>
                                    订阅<br>查看详情内容
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div :class='["tab-panel",{"active":selectIndex==2}]'>
                        <ul class="list-gold">
                            <li class="gold-item" v-for="(item,index) in diamondList" :key="index">
                                <img :class="['item-pic','pic'+item.picId]" :src='""+picUrl+item.picId+".png"'/>
                                <button class="item-btn" @click="handlePay(item.id,1)">￥ {{item.price/100}}</button>
                            </li>
                        </ul>
                    </div>
                    <div :class='["tab-panel",{"active":selectIndex==3}]'>
                        <ul class="list-gold">
                            <li class="gold-item" v-for="(item,index) in goldList" :key="index">
                                <img :class="['item-pic','pic'+item.picId]" :src='""+picUrl+item.picId+".png"'/>
                                <p>{{item.desc}}</p>
                                <button class="item-btn" @click="handlePay(item.id,1)">￥ {{item.price/100}}</button>
                            </li>
                        </ul>
                    </div>
                    <div :class='["tab-panel",{"active":selectIndex==4}]'>
                        <ul class="list-recommend">
                            <li :class="['recommend-item','bg'+index]" v-for="(item,index) in giftList" :key="index">
                                <div class="item-fl">
                                    <img :class="['item-pic','pic'+item.picId]" :src='""+picUrl+item.picId+".png"'/>
                                    <div class="item-cont">
                                        <h3>{{item.name}}</h3>
                                        <p>{{item.desc}}</p>
                                    </div>
                                </div>
                                <div class="item-btn ext-buy" @click="showPopupGift(true,index)">
                                    ￥ {{item.price/100}}
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>
        <div :class='["popup popup-book",{"active":isShowPopupBook}]'>
            <div class="bg-mask"></div>
            <div class="box-pop-wrap">
                <div class="box-pop">
                    <h3 class="box-pop_title"><img src="@/img/taptapstar/recommend_title1.png" alt=""></h3>
                    <img class="book-pic" src="@/img/taptapstar/popup_logo.png" alt="">
                    <p class="book-desc" v-for="(item,index) in recommendPlanList" :key="index" v-if="index==0">{{item.desc}}</p>
                    <ul class="list-book">
                        <li :class="['book-item',{'ext-recommend':index==1}]" v-for="(item,index) in recommendPlanList" :key="index"
                             @click="handlePay(item.id,1)">
                            <h3 v-if="index==0">月使用权</h3>
                            <h3 v-else-if="index==1">周使用权</h3>
                            <h3 v-else>年使用权</h3>
                            <p>￥ {{item.price/100}}</p>
                        </li>
                    </ul>
                    <button @click="showPopupBook(false)" class="btn-close"></button>
                </div>
            </div>
            
        </div>
        <div :class='["popup popup-first",{"active":isShowPopupFirst}]'>
            <div class="bg-mask"></div>
            <div class="box-pop-wrap">
                <div class="box-pop">
                    <h2></h2>
                    <ul class="list-first">
                        <li class="first-item active">
                            <img src="@/img/taptapstar/diamond_dis1.png" alt="" class="item-pic">
                        </li>
                        <li class="first-item">
                            <img src="@/img/taptapstar/diamond_dis2.png" alt="" class="item-pic">
                        </li>
                        <li class="first-item">
                            <img src="@/img/taptapstar/diamond_dis3.png" alt="" class="item-pic">
                        </li>
                        <li class="first-item">
                            <img src="@/img/taptapstar/diamond_dis4.png" alt="" class="item-pic">
                        </li>
                    </ul>
                    <p>2倍<span>仅一次</span>领取机会</p>
                    <button class="btn-buy">购买</button>
                </div>
                <button class="box-pop_close" @click="showPopupFirst(false)"></button>
            </div>
            
        </div>
        <div :class='["popup popup-gift",{"active":isShowPopupGift}]'>
            <div class="bg-mask"></div>
            <div class="box-pop-wrap">
                <div class="box-pop">
                    <h3 class="box-pop_title">{{giftInfo.name}}</h3>
                    <div class="star-wrap">
                        <img :src='""+picUrl+"stand_"+giftInfo.picId+".png"'/>
                    </div>
                    <p>{{giftInfo.desc}}</p>
                    <button class="btn-buy" @click="handlePay(giftInfo.id,1)">购买</button>
                </div>
                <button class="box-pop_close" @click="showPopupGift(false)"></button>
            </div>
            
        </div>
    </div>
</template>
<script>
    import lib from 'lib'
    import axios from 'axios'
    import {Indicator, Toast, MessageBox} from 'mint-ui';
    import pay from 'pay';

    export default {
        data () {
            return {
                picUrl: lib.domain+"/build/img/taptapstar/",
                appid: lib.getParam('dwAppId'),
                isShowPopupBook: false,
                isShowPopupFirst: false,
                isShowPopupGift: false,
                selectIndex:1,      //1推荐2钻石3金币4礼包    
                listName : ["","recommendList","diamondList","goldList","giftList"],
                recommendList : [], //推荐列表
                recommendPlanList : [],  //推荐购买列表
                diamondList : [],   //钻石列表
                goldList : [],      //金币列表
                giftList : [],      //礼包列表
                giftInfo : {},      //礼包信息
                tradeNo: "",        //小游戏支付交易的订单号
            }
        },
        mounted () {
            this.getGoodsInfo();
        },
        methods:{
            changeType(index){
                this.selectIndex = index;

                if(this[this.listName[this.selectIndex]].length==0) {
                    this.getGoodsInfo();
                }
            },
            showPopupBook(flag){
                this.isShowPopupBook = flag;
            },
            showPopupFirst(flag){
                this.isShowPopupFirst = flag;
            },
            showPopupGift(flag,index=0){
                this.isShowPopupGift = flag;
                this.giftInfo = this.giftList[index];
            },
            getGoodsInfo(){
                let url = `${lib.apiUrl}/product/${this.appid}/products/${this.selectIndex}`;

                Indicator.open();
                axios.get(url,{
                    dwAppId : this.appid,
                    type : this.selectIndex
                }).then(({data}) => {
                    Indicator.close();
                    this[this.listName[this.selectIndex]] = data.data.list;

                    if(this.selectIndex==1 && this.recommendList.length>=3 ){ //推荐
                        this.recommendPlanList = [
                            this.recommendList[1],
                            this.recommendList[0],
                            this.recommendList[2]
                        ]
                    }
                    if(this.selectIndex==4) { //礼包
                        this.giftInfo = this.giftList[0];
                    }
                }).catch(({data}) => {
                    Indicator.close();
                })
            },
            handlePay(productId,productCount=1){
                pay.handlePay(productId,productCount);
            }
        }
    }
</script>

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