qiushang
/
xingyou


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425
							<!DOCTYPE html>
<html>
<head>
    @include('home.soft.common.head')
    <link rel="stylesheet" href="/static/css/member.css">
    <style>
        .vip-list .vip-item{
            width: 200px;
        }

        .vip-banner{
            margin-bottom: 15px;
        }

        .vip-model{
            margin-top: 0;
	        padding-top: 10px;
        }

        .il-interest{
            font-weight: 500;
            line-height: 3.8;
        }

        .pay-cont .pay-img {
            width: 120px;
            height: 120px;
        }
    </style>
</head>
<body>
<div class="vip-top">
    <img src="{{ $userInfo->avatar ?: "/static/logo.png"}}" class="vt-logo" />
    <div class="font-12">
        <p class="vt-name">{{ $userInfo->username }}</p>
        <span>会员有效期：</span>
        @if($billInfo['validity_type'] == 2)
            <span>永久有效</span>
        @elseif($billInfo['validity_type'] == 1)
            <span>{{ $billInfo['validity_end_time'] }}</span>
        @else
            <span>非VIP会员</span>
        @endif
    </div>
    <div class="v-title">VIP套餐</div>
</div>

<div class="v-right">
    @if(isset($ad) && $ad->logo)
        <div class="vip-banner">
            <img src="{{$ad->logo}}" style="width: 100%; height: 100%;border-radius:30px;"/>
        </div>
    @endif

    <div class="vip-list">
        @if($productInfo && $productInfo->price4)
            <div id="vip_item4" class="vip-item active" onclick="selectTerm(4,{{ $productInfo->price4 }})">
                <img src="/static/logo/i-costs.png" class="i-cost" />
                <div class="vip-name">永久VIP</div>
                <div>
                    <p class="vip-price">
                        ¥<span class="price-value" id="permanentPrice">{{ floatval($productInfo->price4)}}</span>
                        @if($productInfo->market_price4 > 0)
                            <span class="vip-market-price">¥{{ floatval($productInfo->market_price4) }}</span>
                        @endif
                    </p>
                    <p class="vip-desc vip-red">
                        {{ $productInfo->desc_price4 ?: "限时热销中" }}
                    </p>
                </div>
            </div>
        @endif

        <!-- @if($productInfo->price1)
            <div id="vip_item1" class="vip-item" onclick="selectTerm(1,{{ $productInfo->price1 }})">
                <div class="vip-name">三个月VIP</div>
                <div>
                    <p class="vip-price">
                        ¥<span class="price-value">{{ floatval($productInfo->price1) }}</span>
                        @if($productInfo->market_price1 > 0)
                            <span class="vip-market-price">¥{{ floatval($productInfo->market_price1) }}</span>
                        @endif
                    </p>
                    <p class="vip-desc vip-red">
                        {{ $productInfo->desc_price1 ?: "有效期三个月" }}
                    </p>
                </div>
            </div>
        @endif -->

        @if($productInfo->price2)
            <div id="vip_item2" class="vip-item" onclick="selectTerm(2,{{ $productInfo->price2 }})">
                <div class="vip-name">半年VIP</div>
                <div>
                    <p class="vip-price">
                        ¥<span class="price-value">{{ floatval($productInfo->price2) }}</span>
                        @if($productInfo->market_price2 > 0)
                            <span class="vip-market-price">¥{{ floatval($productInfo->market_price2) }}</span>
                        @endif
                    </p>
                    <p class="vip-desc">
                        {{ $productInfo->desc_price2 ?: "有效期半年" }}
                    </p>
                </div>
            </div>
        @endif

        @if($productInfo->price3)
            <div id="vip_item3" class="vip-item" onclick="selectTerm(3,{{ $productInfo->price3 }})">
                <div class="vip-name">一年VIP</div>
                <div>
                    <p class="vip-price">
                        ¥<span class="price-value">{{ floatval($productInfo->price3) }}</span>
                        @if($productInfo->market_price3 > 0)
                            <span class="vip-market-price">¥{{ floatval($productInfo->market_price3) }}</span>
                        @endif
                    </p>
                    <p class="vip-desc">
                        {{ $productInfo->desc_price3 ?: "有效期一年" }}
                    </p>
                </div>
            </div>
        @endif

        <!-- @if($productInfo->price5)
            <div id="vip_item5" class="vip-item" onclick="selectTerm(5,{{ $productInfo->price5 }})">
                <div class="vip-name">7天会员</div>
                <div>
                    <p class="vip-price">
                        ¥<span class="price-value">{{ $productInfo->price5 }}</span>
                    </p>
                    <p class="vip-desc">
                        {{ $productInfo->desc_price5 ?: "限时特价" }}
                    </p>
                </div>
            </div>
        @endif -->
    </div>
</div>
<p class="vip-tips">温馨提示：会员到期后将直接转为非VIP会员</p>
<div class="vip-model">
    <div class="v-right" style="padding: 0 30px;">
        <p class="pay-line" style="font-size: 16px;font-weight: 600;">
            支付金额：<span style="color: #ed4014;">¥</span><span id="payMoney" class="money-color">88</span>
        </p>
        <div id="dis-agreement1" class="pay-cont">
            <div class="spinner-border m-5" role="status" id="spinnerShow">
                <span class="visually-hidden">Loading...</span>
            </div>
            <div id="qrcode" class="pay-img" style="display: none"></div>
            <div class="pay-desc">
                <p class="pay-line">
					支付渠道：
					<img src="/static/logo/p-weixin.png" class="pay-icon"/>
					<img src="/static/logo/p-alipay.png" class="pay-icon"/>
				</p>
				<p class="pay-line" style="margin-top: 8px;">
					支付方式：扫码支付
				</p>
				<p class="pay-tips" style="margin-top: 8px;">不支持无理由退款</p>
            </div>
        </div>
        <div id="dis-agreement2" class="dis-agreement">请同意服务协议后方可购买产品</div>
        <div class="pay-agreement">
            <label>
                <input type="checkbox" checked="" id="payCheck" onclick="checkPayBox(this)">
            </label>
            <span>同意并接受</span>
            <span class="agreement-txt" onclick="agreementModel(true)">《软件会员增值服务协议》</span>
        </div>
    </div>
    <div class="v-left">
        <div class="il-vip">
            <img src="/static/logo/i-vip.png">
            <span class="v-name">会员尊享</span>
        </div>

        <div class="il-interest">
            <div class="il-item">
                <img src="/static/logo/a-equity1.png">
                <span>不限文件大小</span>
            </div>
            <div class="il-item">
                <img src="/static/logo/a-equity2.png">
                <span>不限电脑设备</span>
            </div>
            <div class="il-item">
                <img src="/static/logo/a-equity3.png">
                <span>一键批量转换</span>
            </div>
            <div class="il-item">
                <img src="/static/logo/a-equity4.png">
                <span>本地安全处理</span>
            </div>
            <div class="il-item">
                <img src="/static/logo/a-equity5.png">
                <span>软件免费升级</span>
            </div>
            <div class="il-item">
                <img src="/static/logo/a-equity6.png">
                <span>专业技术支持</span>
            </div>
        </div>
    </div>
</div>

<div class="member-model" id="member-model">
    <div class="agreement-content">
        <p>尊敬的用户您好：</p>
        <p>欢迎使用星优办公软件会员增值服务协议，为使用星优办公软件会员增值服务（简称为：本服务），您应当阅读《星优办公软件会员增值服务协议》（简称为：本协议）。请您务必审慎阅读、充分理解各条款内容，特别是免除或限制责任的相应条款。</p>
        <p>除非您已阅读并接受本协议所有条款，否则您无权使用本服务。您对本服务的任何购买使用行为即视为您已阅读并同意本协议的约束。如果您未满18周岁，请在法定监护人的陪同下阅读本协议。</p>
        <p>本协议是用户与苏州星优办公软件有限公司（简称为：星优办公）之间关于用户加入成为星优办公软件会员且使用星优办公相关软件以及服务所订立的协议。本协议描述星优办公与会员之间关于软件许可以及服务使用及相关方面的权利义务。星优办公软件服务涉及到的星优办公产品的所有权以及相关软件的知识产权归星优办公所有。</p>
        <p class="font-600">一、关于本服务</p>
        <p>1．会员增值服务费，指用户按照星优办公指定方式支付一定费用后，用户可以享有由星优办公软件提供的应用软件。星优办公可能会根据本服务的整体规划，对本服务的收费标准、增值服务内容进行修改和变更。</p>
        <p>2．本服务可通过会员账号在任意一台电脑上使用软件，但一个账号同一时间只能在一台电脑上使用。</p>
        <p class="font-600">二、用户禁止行为</p>
        <p>1．用户使用本服务的权利是个人的，不允许对账户进行出租、出售等，或其他利用账户进行牟利的行为，若有相关滥用行为，我方有权单方面暂停、禁止账户相关功能。</p>
        <p class="font-600">三、退款声明</p>
        <p>为了避免购买本产品后引起纠纷，用户可在购买本服务前，对产品进行下载试用，看软件具体的使用效果，软件已提供免费试用，购买本服务则同意了星优办公会员增值服务协议/已试用软件/认可软件，故本公司不接受用户退款申请。</p>
        <p class="font-600">四、争议解决</p>
        <p>若您和星优办公之间发生任何纠纷或争议，首先应友好协商解决；协商不成的，您同意将纠纷或争议提交星优办公所在地法院管辖。</p>
        <p>本协议的一切解释权与修改权归星优办公。</p>
    </div>
    <div class="member-btn">
        <Button style="margin:0 10px;" onclick="agreementModel(false);">返回购买</Button>
    </div>
</div>

<script type="text/javascript" src="/static/js/qrcode.js"></script>
<script>
    let buyContext;
    let target = '{{ $target }}';
    let agentMid = '{{$agentMid}}';
    let token = '{{$token}}';
    let pay_type = "wechat";
    let sku_type = 4;
    let pmid = "{{ $productInfo->mid }}";
    let permanentPrice = "{{floatval($productInfo->price4)}}";

    // 设置允许跨域
    axios.defaults.withCredentials = false;

    // 默认金额
    document.getElementById("payMoney").innerText = "{{ floatval($productInfo->price4) }}"

    function selectTerm(type, price) {
        sku_type = type;
        document.getElementById("payMoney").innerText = price

        // 其他的去除
        // let vipItem1 = document.getElementById("vip_item1").getAttribute("class").replace("active", " ");
        // document.getElementById("vip_item1").setAttribute("class", vipItem1);

        let vipItem2 = document.getElementById("vip_item2").getAttribute("class").replace("active", " ");
        document.getElementById("vip_item2").setAttribute("class", vipItem2);

        let vipItem3 = document.getElementById("vip_item3").getAttribute("class").replace("active", " ");
        document.getElementById("vip_item3").setAttribute("class", vipItem3);

        let vipItem4 = document.getElementById("vip_item4").getAttribute("class").replace("active", " ");
        document.getElementById("vip_item4").setAttribute("class", vipItem4);

        let classVal = document.getElementById("vip_item" + type).getAttribute("class");
        document.getElementById("vip_item" + type).setAttribute("class", classVal.concat(" active"))

        //创建支付二维码
        createPayCode();
    }

    // 创建支付二维码
    createPayCode();

    // 账户登录信息
    // getUserInfo();

    function createPayCode() {
        document.getElementById('spinnerShow').style.display = ""
        document.getElementById("qrcode").innerHTML = ""
        document.getElementById('qrcode').style.display = "none"

        let data = {
            agent_mid: agentMid,
            type: sku_type,
            pay_type: pay_type
        }

        axios.post(target + '/api/pay/getPayCode/' + pmid, data, {headers: {Authorization: token}}).then(function (response) {
            if (!response.data.error) {
                let code = response.data.result;
                createQrcode(code);
            }
        }).catch(function (error) {
            console.log(error);
        });
    }

    // 设置支付类型
    function selectPaytype(type) {
        pay_type = type

        if (type === 'wechat') {
            let str = document.getElementById("payAlipay").getAttribute("class").replace("active", " ")
            document.getElementById("payAlipay").setAttribute("class", str);

            let classVal = document.getElementById("payWechat").getAttribute("class");
            document.getElementById("payWechat").setAttribute("class", classVal.concat(" active"))
        } else {
            let str = document.getElementById("payWechat").getAttribute("class").replace("active", " ");
            document.getElementById("payWechat").setAttribute("class", str);

            let classVal = document.getElementById("payAlipay").getAttribute("class");
            document.getElementById("payAlipay").setAttribute("class", classVal.concat(" active"))
        }

        //创建支付二维码
        createPayCode();
    }

    // 创建二维码
    function createQrcode(code) {
        var qrcode = new QRCode("qrcode", {
            text: "https://www.xingyousoft.com/soft/pay/" + code,
            width: 120,
            height: 120
        });
        document.getElementById('qrcode').style.display = ""
        document.getElementById('spinnerShow').style.display = "none"

        // 开始检测支付扫描
        startScan(code);
    }

    let payScanInterval;
    let payEndInterval;

    function startScan(code) {
        if (payScanInterval) {
            clearInterval(payScanInterval);
        }
        if (payEndInterval) {
            clearInterval(payEndInterval);
        }

        payScanInterval = setInterval(() => {
            axios.post(target + '/api/pay/checkPayScan/' + code, {}, {headers: {Authorization: token}}).then((response) => {
                if (!response.data.error) {
                    // 提示消息，扫描成功
                    // 开始检测支付
                    clearInterval(payScanInterval);
                    startCheckPayEnd(code);
                }
            }).catch(function (error) {
                console.log(error);
            });
        }, 1000);
    }

    // 开始检测支付
    function startCheckPayEnd(code) {
        if (payEndInterval) {
            clearInterval(payEndInterval);
        }

        payEndInterval = setInterval(() => {
            axios.post(target + '/api/pay/checkPayEnd/' + code, {product_type: 1}, {headers: {Authorization: token}}).then((response) => {
                if (!response.data.code === 0 || !response.data.error) {
                    // 关闭定时器
                    clearInterval(payEndInterval);
                    // 支付完成
                    window.top.postMessage('paySuccess', '*');
                }
            }).catch(function (error) {
                console.log(error);
            });
        }, 1000);
    }

    // 获取用户信息
    function getUserInfo() {
        axios.post(target + '/api/login/getUserInfo', {}, {headers: {Authorization: token}}).then(function (response) {
            if (!response.data.error) {
                let userInfo = response.data.result;
            }
        }).catch(function (error) {

        });
    }

    function checkPayBox(e){
        document.getElementById('dis-agreement1').style.display = "none";
        document.getElementById('dis-agreement2').style.display = "none";
        if(!e.checked){
            document.getElementById('dis-agreement2').style.display = "block"
        }else{
            document.getElementById('dis-agreement1').style.display = "flex";
        }
    }

    function agreementModel(e){
        if(e){
            document.getElementById('member-model').style.display = "block";
        }else{
            document.getElementById('member-model').style.display = "none";
        }
    }

    function formatTime(str){
        let date = new Date(str*1000);
        const year = date.getFullYear();
        const month = date.getMonth() + 1;
        const day = date.getDate();
        const hour = date.getHours();
        const minute = date.getMinutes();
        const second = date.getSeconds();
        return [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute, second].map(formatNumber).join(':');
    }

    function formatNumber(n) {
        n = n.toString();
        return n[1] ? n : '0' + n;
    }
</script>
</body>
</html>