<!DOCTYPE html>
|
<html>
|
|
<head>
|
<meta charset="utf-8">
|
<title>开通会员</title>
|
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
|
<!-- <script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script> -->
|
<script>
|
window.onresize = function() {
|
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
|
};
|
window.onresize();
|
</script>
|
<link href="css/index.css" rel="stylesheet" type="text/css" />
|
</head>
|
|
<body style="background: #B4E4FF;">
|
|
<img src="img/ic_top_bg.png" style="width: 7.5rem; height: 4.38rem;position: absolute;margin-left: -0.2rem;z-index: -1;top:0" />
|
|
<div id="data" style="display: none;" v-cloak>
|
<div class="user" v-if="user">
|
<!-- <img class="portrait" v-bind:src="user.portrait" />不需要头像了 -->
|
<div class="content">
|
<!-- <div class="nick-name">{{user.nickName}}</div>不需要用户名了 -->
|
<div class="top" id="bigtop">
|
<!-- <div style="font-size: 0.26rem; color: #0E96FF; margin-left: 0.27rem; line-height: 0.72rem;">2020-05-20 12:00 到期</div> -->
|
<div class="date" style="font-size: 0.26rem; color: #0E96FF; margin-left: 0.27rem; line-height: 0.72rem;" v-if="user.expireDate">{{user.expireDate}}
|
到期</div>
|
<span class="littlebtn">
|
<span v-on:click="record">开通记录 </span><img class="record-input" src="img/icon_input.png">
|
</span>
|
</div>
|
</div>
|
|
|
</div>
|
<div class="item" id="bigitem">
|
<div class="title">
|
会员权益
|
</div>
|
<div class="quanyi">
|
<div>
|
<img src="img/quanyi_1.png" />
|
<div class="desc">实时定位</div>
|
</div>
|
<div>
|
<img src="img/quanyi_2.png" />
|
<div class="desc">记录轨迹<br></div>
|
</div>
|
<div>
|
<img src="img/quanyi_3.png" />
|
<div class="desc">轨迹跟踪<br></div>
|
</div>
|
<div>
|
<img src="img/quanyi_4.png" />
|
<div class="desc">保障私密<br></div>
|
</div>
|
</div>
|
<div class="quanyi">
|
<div>
|
<img src="img/quanyi_5.png" />
|
<div class="desc">一键求助</div>
|
</div>
|
<div>
|
<img src="img/quanyi_6.png" />
|
<div class="desc">去除广告<br></div>
|
</div>
|
<div>
|
<img src="img/quanyi_7.png" />
|
<div class="desc">VIP标识<br></div>
|
</div>
|
<div>
|
<img src="img/quanyi_8.png" />
|
<div class="desc">更多权益<br></div>
|
</div>
|
</div>
|
</div>
|
|
<div class="item pay">
|
<div class="title">
|
开通方式1
|
</div>
|
<div class="desc" style="margin-bottom: 0.14rem;">备注:需要观看视频广告</div>
|
<div class="btn" v-on:click="freeOpen">免费开通</div>
|
<div class="desc" style="margin-top: 0.14rem;">阅读并同意<a href="free_protocol.html">《免费开通会员服务协议》</a></div>
|
</div>
|
|
<div class="item pay">
|
<div class="title">
|
开通方式2
|
</div>
|
<div class="pay-info">
|
<div class="price-item" v-for="item,index in priceList" v-bind:class="{'pay-info-active':index==priceSelectIndex}"
|
v-bind:style="{'margin-right': (index+1)%3==0?'0':'0.17rem','margin-bottom': '0.18rem'}" v-on:click="selectPrice(index)">
|
<div class="tag">限免</div>
|
<div class="type" v-bind:class="{'active':index==priceSelectIndex}">{{item.type}}</div>
|
<div class="price" v-html="item.actualPrice" v-bind:class="{'active':index==priceSelectIndex}"></div>
|
<div class="price-old" v-bind:class="{'active':index==priceSelectIndex}">
|
原价:<span style="text-decoration: line-through;">¥{{item.price}}</span>
|
</div>
|
</div>
|
</div>
|
|
<div class="pay-way-title">选择支付方式</div>
|
|
<div class="pay-way" v-on:click="changePayWay(1)">
|
<img src="img/icon_pay_way_alipay.png" />
|
<div class="name">支付宝支付</div>
|
<img v-bind:src="payWay==1?'img/icon_selected.png':'img/icon_unselected.png'" />
|
</div>
|
|
<div style="height: 1px;background: #EAEAEA; display: none;"></div>
|
|
<div class="pay-way" v-on:click="changePayWay(2)" style="display: none;">
|
<img src="img/icon_pay_way_wx.png" />
|
<div class="name">微信支付</div>
|
<img v-bind:src="payWay==2?'img/icon_selected.png':'img/icon_unselected.png'" />
|
</div>
|
|
<div class="btn" style="margin-top: 0.36rem;" v-on:click="payOpen"> 支付开通</div>
|
<div class="desc" style="margin-top: 0.14rem;">阅读并同意<a href="protocol.html">《付费开通会员服务协议》</a></div>
|
</div>
|
<div class="item" style="margin-bottom: 1.2rem;">
|
<div class="title">
|
温馨提示
|
</div>
|
|
<div class="content">
|
1.免费开通和付费开通会员享受同等的会员权益,仅会员有效期有差异。
|
<br> 2.免费开通每观看1次激励视频可获得会员权益1天,观看第2次可加倍叠加,即共3天,每天最多可免费观看两次广告。
|
<br> 3.未成年人请勿支付开通会员,建议监护人组织其操作开通会员行为。
|
<br> 4.如你对支付过程中、支付后有异议请联系官方客服邮箱dw365@foxmail.com。
|
<br> 5.如你发现本App有暗扣资费行为,请直接拨打110,本App承诺绝无暗扣行为。
|
<br> 6.会员权益相关服务最终解释权归本App所有。
|
|
|
</div>
|
</div>
|
|
</div>
|
|
|
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
|
<script src="../js/app.js"></script>
|
<script src="js/vue-2.6.12.min.js"></script>
|
<script src="js/http.js"></script>
|
|
|
|
<script>
|
Date.prototype.format = function(fmt) { //author: meizz
|
var o = {
|
"M+": this.getMonth() + 1, //月份
|
"d+": this.getDate(), //日
|
"h+": this.getHours(), //小时
|
"H+": this.getHours(), //小时
|
"m+": this.getMinutes(), //分
|
"s+": this.getSeconds(), //秒
|
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
|
"S": this.getMilliseconds() //毫秒
|
};
|
if (/(y+)/.test(fmt))
|
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
|
for (var k in o)
|
if (new RegExp("(" + k + ")").test(fmt))
|
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
|
return fmt;
|
}
|
|
|
function onResume() {
|
app.getPriceList();
|
}
|
|
var app = null;
|
$(function() {
|
// var vConsole = new VConsole();
|
app = new Vue({
|
el: '#data',
|
// 数据定义
|
data: {
|
priceList: [],
|
priceSelectIndex: 0,
|
user: null,
|
payWay: 1
|
},
|
watch: {
|
priceList: function(res) {
|
$("#data").css("display", "block");
|
},
|
user: function(res) {
|
setTimeout(function() {
|
if (app.user.expireDate == null) {
|
$('#bigtop').css('display', 'none'), $('#bigitem').css('margin-top', '1.5rem')
|
}
|
}, 1);
|
},
|
|
},
|
methods: {
|
selectPrice: function(index) {
|
app.priceSelectIndex = index;
|
},
|
changePayWay: function(way) {
|
app.payWay = way;
|
},
|
payOpen: function() {
|
app.createOrder();
|
},
|
freeOpen: function() {
|
window.location.href = "reward.html"
|
},
|
record: function() {
|
window.location.href = "record.html"
|
},
|
getPriceList: function() {
|
var params = {
|
uid: 5,
|
packages: "com.dw.zzql",
|
timestamp: new Date().getTime(),
|
version: 1
|
|
//bridge.call("yestv.getUid")
|
}
|
ksbridge.call("getUid", function(res) {
|
var params = {};
|
if (res && res != null && res != "") {
|
params.uid = res;
|
}
|
|
ksbridge.call("getRequestBaseParams", params, function(res) {
|
params = JSON.parse(res);
|
$.ajax({
|
type: 'POST',
|
url: ksapp.host + '/api/v1/vip/getVIPPriceList',
|
data: params,
|
success: function(data) {
|
data = JSON.parse(data);
|
// console.log(data);
|
if (data.code == 0) {
|
var list = data.data.list;
|
for (var i = 0; i < list.length; i++) {
|
var money = "¥" + list[i].actualPrice + "";
|
// console.log("money:", money);
|
money = money.replace(".", ".</span>").replace("¥", "¥<span style='font-size:0.30rem'>");
|
if (money.indexOf("</span>") < 0)
|
money = money + "</span>"
|
list[i].actualPrice = money;
|
}
|
app.priceList = list;
|
if (data.data.user && data.data.user.vipExpireTime > 0) {
|
data.data.user.expireDate = new Date(data.data.user.vipExpireTime).format("yyyy.MM.dd HH:mm");
|
}
|
app.user = data.data.user;
|
|
|
|
|
} else {
|
bridge.call("yestv.toast", data.msg);
|
}
|
},
|
fail: function(result) {
|
bridge.call("yestv.toast", "网络请求出错");
|
},
|
complete: function(res) {
|
bridge.call("yestv.hideLoading");
|
}
|
});
|
});
|
|
|
});
|
|
|
|
|
|
},
|
createOrder: function() {
|
ksbridge.call("getUid", function(res) {
|
var params = {
|
uid: res,
|
priceId: app.priceList[app.priceSelectIndex].id,
|
payWay: app.payWay
|
}
|
ksbridge.call("getRequestBaseParams", params, function(res) {
|
params = JSON.parse(res);
|
|
ksbridge.call("showLoading");
|
$.ajax({
|
type: 'POST',
|
url: ksapp.host + '/api/v1/vip/createOrder',
|
data: params,
|
success: function(data) {
|
data = JSON.parse(data);
|
console.log(data);
|
if (data.code == 0) {
|
window.location.href = data.data.payUrl;
|
} else {
|
ksbridge.call("toast", {
|
msg: data.msg
|
});
|
}
|
},
|
fail: function(result) {
|
ksbridge.call("toast", {
|
msg: '网络请求出错'
|
});
|
},
|
complete: function(res) {
|
ksbridge.call("hideLoading");
|
}
|
});
|
|
|
});
|
|
|
|
});
|
|
|
|
|
}
|
|
}
|
});
|
app.getPriceList();
|
});
|
</script>
|
|
<div style="display: none;">
|
<script type="text/javascript" src="https://v1.cnzz.com/z_stat.php?id=1279874893&web_id=1279874893"></script>
|
</div>
|
</body>
|
|
</html>
|