zyedu/application/wap/view/first/special/order_pink.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"}
<style>
    body {
        background-color: #f5f5f5;
    }
</style>
{/block}
{block name="content"}
<div v-cloak id="app">
    <div class="assemble">
        <div class="header acea-row row-between-wrapper">
            <div class="item">
                <div class="iconfont icon-weixinzhifu"></div>
                <div>1.支付成功</div>
            </div>
            <div class="iconfont icon-icon-yxj-arrow-right"></div>
            <div class="item">
                <div class="iconfont icon-yaoqing-"></div>
                <div>2.邀请朋友参团</div>
            </div>
            <div class="iconfont icon-icon-yxj-arrow-right"></div>
            <div class="item">
                <div class="iconfont icon-bofang1 acea-row row-center-wrapper"></div>
                <div>3.上课啦</div>
            </div>
        </div>
        <div class="teamwork">
            <div class="list acea-row row-center-wrapper">
                <div class="pictrue">
                    <img src="{__WAP_PATH}zsff/images/king.png" class="king">
                    <img :src="pinkT.avatar">
                </div>
                <div class="pictrue" v-for="item in pinkAll"><img :src="item.avatar"></div>
                <div class="pictrue" v-for="item in count"><img src="{__WAP_PATH}zsff/images/symbol.png"></div>
            </div>
            <div class="tiptime" v-if="count && pinkBool!=1">仅剩{{count}}人，剩余时间<span class="time">{{hour}}: {{minute}}: {{second}}</span></div>
            <div class="tiptime" v-else>拼团成功,快去学习吧!</div>
            <div class="label acea-row row-center-wrapper" v-if="!pinkBool">正在拼团</div>
            <div class="label acea-row row-center-wrapper" v-else-if="pinkBool==1">拼团成功</div>
            <div class="label acea-row row-center-wrapper" v-else-if="pinkBool > 1 && pinkBool < 4">拼团失败</div>
            <div class="label acea-row row-center-wrapper" v-else-if="pinkBool==6">拼团人数已满</div>
        </div>
        <div class="my-course">
            <div class="swiper-list2">
                <div class="item acea-row">
                    <a class="pictrue" :href="getTashUrl(special.id)"><img :src="special.image"></a>
                    <div class="text-pic">
                        <div class="name line1" v-text="special.title" :href="getTashUrl(special.id)"></div>
                        <div class="label acea-row row-middle">
                            <div class="num acea-row row-center-wrapper" v-for="(vo,index) in special.label" v-text="vo" v-if="index < min"></div>
                        </div>
                        <!-- <div class="money">{{special.is_pink ? (special.pink_money == 0 ? '免费':'￥'+special.pink_money): (special.money <= 0 ? '免费':'￥'+special.money) }}</div> -->
                        <div class="bottom acea-row row-middle">
                            <template v-if="special.is_pink">
                                <div v-if="special.pink_money === '0.00'" class="free">免费</div>
                                <div v-else class="money">¥<span>{{ special.pink_money }}</span></div>
                            </template>
                            <template v-else>
                                <div v-if="special.money === '0.00'" class="free">免费</div>
                                <div v-else class="money">¥<span>{{ special.money }}</span></div>
                            </template>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="initiate-group">
            <div class="acea-row row-center-wrapper" v-if="!pinkBool">
                <a class="bnt invite acea-row row-center-wrapper" style="margin: 0 auto;width: 7rem;" :href="goPosterShow()"> {{is_help ? '帮助他完成拼团':'邀请朋友拼课'}}</a>
            </div>
            <div class="acea-row row-center-wrapper" v-else-if="pinkBool==1">
                <a class="bnt invite acea-row row-center-wrapper" style="margin: 0 auto;width: 7rem;" :href="getTashUrl(special.id,true)">去学习</a>
            </div>
            <div class="acea-row row-center-wrapper" v-else-if="pinkBool==2">
                <div class="bnt invite acea-row row-center-wrapper" style="margin: 0 auto;width: 7rem;">拼团时间已到,退款中</div>
            </div>
            <div class="acea-row row-center-wrapper" v-else-if="pinkBool==3">
                <div class="bnt invite acea-row row-center-wrapper" style="margin: 0 auto;width: 7rem;">拼团已结束,请您参加别的拼团</div>
            </div>
            <div class="acea-row row-center-wrapper" v-else-if="pinkBool==6">
                <div class="bnt invite acea-row row-center-wrapper" style="margin: 0 auto;width: 7rem;">拼团人数已满,等待订单状态</div>
            </div>
        </div>
        <div class="shares-model" v-show="shares" @click="shares=false">
            <img style="position: fixed;left: 0;top: 0;width: 100%;height: 100%;" src="{__WAP_PATH}zsff/images/share-info.png">
        </div>
        {if !$subscribe && !empty($userInfo) && $is_official_account_switch}
        <div class="publicFollow acea-row row-between-wrapper">
            <div>关注公众号"{$Auth_site_name}"，看课更方便</div>
            <div class="follow acea-row row-center-wrapper" @click=" is_code = true ">关注</div>
        </div>
        <div class="mask" style="align-items:center;display: flex;" v-show="is_code" @click="is_code=false">
            <img :src="wechat_qrcode" alt="" style="width: 5rem;height: 5rem;margin: 0 auto;">
        </div>
        <div style="height: 1.0rem"></div>
        {/if}
    </div>
    <quick-menu></quick-menu>
</div>
{/block}
{block name='foot'}
<script>
    var pink_id={$pink_id},is_help = {$is_help},wechat_qrcode = '{$subscribeQrcode}';
    window.overallShare=false;
    require(['vue','helper','store','{__WAP_PATH}zsff/js/quick.js'],function(Vue,$h,app) {
        new Vue({
            el: '#app',
            data: {
                special:{},
                pinkT:{},
                pinkAll:[],
                count:0,
                hour:"00",
                minute:"00",
                second:"00",
                shares:false,
                datatime:0,
                pinkBool:0,
                userBool:0,
                min:2,
                is_help:is_help,
                wechat_qrcode:wechat_qrcode,
                is_code: true,
            },
            methods:{
                goPosterShow:function(){
                    return $h.U({c:'special',a:'poster_show',q:{special_id:this.special.id,pinkId:pink_id,is_help:is_help}});
                },
                getTashUrl:function(id,isAtn){
                    return $h.U({c:'special',a:'details',q:{id:id}})+(isAtn ? '#tash' : '');
                },
                getPinkInfo:function () {
                    var that=this;
                    app.baseGet($h.U({c:'special',a:'get_pink_info',q:{pinkId:pink_id}}),function (res) {
                        var data=res.data.data;
                        that.$set(that,'pinkT',data.pinkT);
                        that.$set(that,'pinkAll',data.pinkAll);
                        that.$set(that,'special',data.special);
                        that.count=data.count < 0 ? 0 : data.count;
                        that.pinkBool=data.pinkBool;
                        that.userBool=data.userBool;
                        that.datatime=data.pinkT.stop_time;
                        that.show_time();
                        mapleWx($jssdk(), function () {
                            this.onMenuShareAll({
                                title:'仅差'+that.count+'人拼课成功! ['+that.special.title+']' ,
                                desc: that.special.abstract,
                                imgUrl: that.special.image,
                                link: that.special.link
                            });
                        });
                    },function (msg) {
                        $h.pushMsgOnce(msg,function () {
                            window.location.href=$h.U({c:'my',a:'order_list'});
                        })
                    },true);
                },
                show_time:function(){
                    var that = this;
                    function nowTime() {
                        var intDiff = that.datatime - Date.parse(new Date()) / 1000;
                        var days = 0, hour = 0, minute = 0, second = 0;
                        if (intDiff > 0) {
                            hour = Math.floor(intDiff / (60 * 60)) - (days * 24);
                            minute = Math.floor(intDiff / 60) -  (hour * 60);
                            second = Math.floor(intDiff) - (hour * 60 * 60) - (minute * 60);
                            if (hour <= 9) hour = '0' + hour;
                            if (minute <= 9) minute = '0' + minute;
                            if (second <= 9) second = '0' + second;
                            that.hour=hour;
                            that.minute=minute;
                            that.second=second;
                        } else {
                            that.hour="00";
                            that.minute="00";
                            that.second="00";
                            clearInterval(timer);
                        }
                    }
                    nowTime();
                    var timer = setInterval(nowTime, 1000);
                }
            },
            mounted:function () {
                this.getPinkInfo();
            }
        })
    })
</script>
{/block}