680 lines
16 KiB
Vue
680 lines
16 KiB
Vue
<template>
|
||
<view class="pay_box">
|
||
<view class="noRecharge" v-if="is_check && system=='ios'">
|
||
根据相关规范ios暂不可用此功能，请使用android手机体验
|
||
</view>
|
||
<view class="recharge" v-else>
|
||
<view class="header_top">
|
||
<text style="font-size: 32rpx;">解锁后可继续观看</text>
|
||
<image @tap="close_pay_box" :src="config.webUrl + '/static/wechat/static/fanhui.png'"
|
||
style="width: 36rpx;height: 36rpx;"></image>
|
||
</view>
|
||
<view class="vider_juji">
|
||
<text style="font-size: 24rpx;">{{ videoSynopsis.name }} · 第{{ serialNo }}集</text>
|
||
<text style="font-size: 24rpx;color: #333333;">本剧共{{ videoSynopsis.sum }}集</text>
|
||
</view>
|
||
<view class="vider_juji">
|
||
<text style="font-size: 24rpx;">解锁本集需要： {{ videoSynopsis.beans }}金豆</text>
|
||
</view>
|
||
<view class="other_recharge">
|
||
<text style="font-size: 28rpx;">金豆充值</text>
|
||
<text style="font-size: 28rpx;color: #333333;font-weight: bold;">我的金豆:{{ userInfo.beans || 0 }}</text>
|
||
</view>
|
||
<view class="vipCarBox" v-if="payListGroupId==1">
|
||
<view :class="[
|
||
'vipCarItem',
|
||
{'vipCarFirst':item.pay_type == 1},
|
||
{'vipCarSecond': item.pay_type == 2},
|
||
{'vipCarThird':item.pay_type == 3},
|
||
{'vipCarFourth':item.pay_type == 4},
|
||
] " v-for="item in list_pay" :key="item.id" @click="getSelectItemId(item)">
|
||
<text class="icon" v-if="item.pay_tab">{{ item.pay_tab }}</text>
|
||
<view class="moneyLine">
|
||
<view class="money">￥{{ item.pay_money }}</view>
|
||
<view class="beanBtn" v-if="item.pay_give_num && item.pay_type == 2">赠{{ item.pay_give_num }}金豆
|
||
</view>
|
||
<view class="moneyInfoBtn" v-if="item.pay_type == 4">解锁全集</view>
|
||
</view>
|
||
<text class="depict" v-if="item.pay_give_num && item.pay_type == 2">
|
||
{{ item.pay_num }}金豆+{{ item.pay_give_num }}豆
|
||
</text>
|
||
<text class="depict" v-if="!item.pay_give_num && item.pay_type == 2">
|
||
{{ item.pay_num }}金豆
|
||
</text>
|
||
<view class="explainText" v-if="item.pay_type != 2">
|
||
<text v-if="item.pay_type == 1" style="color: #333333;">全部影片免费观看</text>
|
||
<text v-if="item.pay_type == 3" style="color: #FF6900;">本剧订阅全集</text>
|
||
<text v-if="item.pay_type == 4" style="color: #ffffff;">邀请好友拼团享返利</text>
|
||
</view>
|
||
<view class="choiceNum" v-if="item.menber_sel">{{ item.menber_sel }}%用户选择</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<view class="vipCarBox vipCarBoxSecond" v-else>
|
||
<view
|
||
:class="['vipCarItem',{'border':item.is_red==1},{'der':item.pay_give_num == 0},{'one':item.pay_type == 1},{'vipCarFourth':item.pay_type == 4}]"
|
||
v-for="item in list_pay" :key="item.id" @click="getSelectItemId(item)">
|
||
<text class="rightIcon" v-if="item.pay_tab">{{ item.pay_tab }}</text>
|
||
<view class="VipCardContent">
|
||
<view :class="['carMoney',{'redColor':item.is_red==1}]">
|
||
<text>{{ item.pay_money }}</text>
|
||
元
|
||
</view>
|
||
<view class="carMoneyExplain" v-if="item.pay_give_money>0">多送{{ item.pay_give_money }}元</view>
|
||
<!-- <view v-else :class="item.pay_type == 4?'carMoneyExplainText':'carMoneyExplain'">{{item.pay_type == 4?'解锁全集':' '}}</view>-->
|
||
<view v-else class="carMoneyExplain"></view>
|
||
</view>
|
||
<view :class="['vipCarFooter',{'footerRedColor':item.is_red!=1}]">
|
||
{{ item.remark ? item.remark : '' }}
|
||
</view>
|
||
<image v-if="item.is_finger" class="hands" :src="config.webUrl + '/static/wechat/static/hands.gif'"
|
||
mode=""></image>
|
||
</view>
|
||
</view>
|
||
<view class="adBox" v-if="adLoaded" @click="showAd">看广告解锁</view>
|
||
<view class="explainList">
|
||
<text class="explainItem"> 充值代表接受
|
||
<text class="explainText" @click="goAgreement(1)">《充值/退款协议》</text>
|
||
和
|
||
<text class="explainText" @click="goAgreement(2)">《会员服务协议》</text>
|
||
</text>
|
||
<text class="explainItem"> 本小程序共有{{ allVideoNum }}部剧正在热播</text>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
httpRequest
|
||
} from '@/utils/request'
|
||
import PAY from '@/utils/pay'
|
||
const playletPlugin = requirePlugin('playlet-plugin')
|
||
import config from "@/utils/config";
|
||
import insertAd from '@/utils/insertAd'
|
||
export default {
|
||
name: "payDom",
|
||
props: {
|
||
playerId: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
srcAppid: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
dramaId: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
serialNo: {
|
||
type: Number,
|
||
default: 0,
|
||
},
|
||
extParam: {
|
||
type: String,
|
||
default: '',
|
||
}
|
||
|
||
},
|
||
data() {
|
||
return {
|
||
_isInitChargeDialog: false,
|
||
list_pay: [],
|
||
payListGroupId: 1,
|
||
userInfo: {},
|
||
videoSynopsis: {},
|
||
vid: "",
|
||
mid: '',
|
||
system: "",
|
||
payItemData: {},
|
||
g_order_id: "",
|
||
is_check: false,
|
||
allVideoNum: 0,
|
||
adLoaded: false
|
||
}
|
||
},
|
||
watch: {
|
||
serialNo(newValue, oldvalue) {
|
||
console.log('ready get pay list')
|
||
this.is_check = uni.getStorageSync('config').is_check == 1 ? true : false;
|
||
this.userInfo = uni.getStorageSync('userinfo');
|
||
this.system = uni.getSystemInfoSync().osName;
|
||
this.initChargeDialog();
|
||
this.getVideoData();
|
||
this.getPayList();
|
||
this.initAd();
|
||
},
|
||
playerId(newValue, oldvalue) {
|
||
console.log('this.initChargeDialog', newValue)
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
// 初始化广告
|
||
initAd() {
|
||
let pms = this.getPlayerManager();
|
||
// 监听加载成功 → 显示按钮
|
||
insertAd.insertAdonLoad(() => {
|
||
this.adLoaded = true;
|
||
});
|
||
// 监听加载失败 → 隐藏按钮
|
||
insertAd.insertAdonError(() => {
|
||
this.adLoaded = false;
|
||
});
|
||
// 监听关闭
|
||
insertAd.insertAdonClose((isEnded) => {
|
||
if (isEnded) {
|
||
console.log('广告看完，发放奖励');
|
||
// TODO: 调用你的解锁接口
|
||
pms.emitCustomEvent('adEnd', this.im)
|
||
}
|
||
});
|
||
// 开始加载广告
|
||
insertAd.insertAdload();
|
||
},
|
||
showAd() {
|
||
insertAd.insertAdshow();
|
||
},
|
||
goAgreement(num) {
|
||
const pm = this.getPlayerManager()
|
||
pm.navigateTo({
|
||
url: '/pagesA/agreement/agreement?id=' + num
|
||
})
|
||
},
|
||
initChargeDialog() {
|
||
if (!this.playerId) return
|
||
if (this._isInitChargeDialog) return
|
||
this._isInitChargeDialog = true;
|
||
this.g_order_id = uni.getStorageSync('g_order_id');
|
||
const pm = this.getPlayerManager()
|
||
if (pm) {
|
||
let extparams = pm.getInfo().extParam;
|
||
if (extparams) {
|
||
if (extparams.indexOf('%') < 0) {
|
||
this.vid = JSON.parse(extparams).vid;
|
||
} else {
|
||
this.vid = JSON.parse(decodeURIComponent(extparams)).vid
|
||
}
|
||
console.log('ChargeDialog res', extparams)
|
||
}
|
||
|
||
// console.log(this.pm.getInfo())
|
||
// 注册弹窗显示事件
|
||
pm.onShowChargeDialog(this.onShowChargeDialog.bind(this))
|
||
// 注册弹窗隐藏事件
|
||
pm.onHideChargeDialog(this.onHideChargeDialog.bind(this))
|
||
|
||
}
|
||
},
|
||
getPlayerManager() {
|
||
return playletPlugin.PlayletManager.getPageManager(this.playerId);
|
||
},
|
||
onShowChargeDialog() {
|
||
console.log('onShowChargeDialog bbs')
|
||
this.getPayList();
|
||
},
|
||
onHideChargeDialog() {
|
||
// this.$refs.back_ref.close();
|
||
},
|
||
close_pay_box() {
|
||
const pm = this.getPlayerManager()
|
||
pm.hideChargeDialog();
|
||
},
|
||
getAllVideoNum() {
|
||
httpRequest({
|
||
url: "/api/video/videoCount",
|
||
method: "GET"
|
||
}).then(res => {
|
||
this.allVideoNum = res.data.count
|
||
}).catch(err => {
|
||
console.log(err)
|
||
})
|
||
},
|
||
// 视频信息
|
||
getVideoData() {
|
||
let that = this;
|
||
httpRequest({
|
||
url: "/api/video/dramaIdToVideoId",
|
||
method: "GET",
|
||
data: {
|
||
drama_id: this.dramaId,
|
||
no: this.serialNo
|
||
}
|
||
}).then(res => {
|
||
that.videoSynopsis = res.data;
|
||
that.vid = res.data.drama_vid
|
||
}).catch(err => {
|
||
console.log(err)
|
||
})
|
||
},
|
||
//充值方式
|
||
getPayList() {
|
||
httpRequest({
|
||
url: "/api/beans/payList",
|
||
method: "GET",
|
||
data: {
|
||
gid: uni.getStorageSync('g_order_id') || '',
|
||
vs_id: uni.getStorageSync('vs_id_code'),
|
||
token: this.userInfo.token,
|
||
video_list_id: this.vid
|
||
}
|
||
}).then(res => {
|
||
if (res.code == 1) {
|
||
this.payListGroupId = uni.getStorageSync('config').pay_tpl;
|
||
// this.payListGroupId = 2;
|
||
this.list_pay = res.data
|
||
} else if (res.code == 50) {
|
||
this.is_check = true;
|
||
}
|
||
|
||
}).catch(err => {
|
||
console.log(err)
|
||
})
|
||
},
|
||
getSelectItemId(item) {
|
||
let that = this;
|
||
httpRequest({
|
||
url: "/api/video/dramaIdToVideoId",
|
||
method: "GET",
|
||
data: {
|
||
drama_id: that.dramaId,
|
||
no: that.serialNo
|
||
}
|
||
}).then(res => {
|
||
that.mid = res.data.id;
|
||
that.selectPayItem(item)
|
||
}).catch(err => {
|
||
console.log(err)
|
||
})
|
||
},
|
||
|
||
|
||
selectPayItem(item) {
|
||
let that = this,
|
||
pms = that.getPlayerManager();
|
||
this.payItemData = item;
|
||
let gid = "",
|
||
gvid = uni.getStorageSync('g_order_vid');
|
||
if (gvid) {
|
||
if (gvid == that.vid) {
|
||
gid = uni.getStorageSync('g_order_id') || ''
|
||
}
|
||
}
|
||
if (this.system == 'android') {
|
||
wx.login({
|
||
success(login) {
|
||
let upData = {
|
||
new: 1,
|
||
id: item.id,
|
||
pay_type: 5,
|
||
code: login.code,
|
||
token: that.userInfo.token,
|
||
uid: that.userInfo.id,
|
||
vid: that.mid,
|
||
ad_code: uni.getStorageSync('get_ad_code'),
|
||
gid: gid,
|
||
}
|
||
PAY.pays.serverCreatOrder(upData).then(resa => {
|
||
PAY.pays.wxAppletAndroidPay(resa.data.data).then(payRes => {
|
||
let payParam = {
|
||
status: 'paySuccess',
|
||
serialNo: that.serialNo,
|
||
gOrderId: "",
|
||
vid: that.vid,
|
||
oid: resa.data.oid
|
||
}
|
||
if (that.payItemData.pay_type == 4) {
|
||
// that.$refs.back_ref.open('center');
|
||
that.payEnd(payParam)
|
||
} else {
|
||
pms.emitCustomEvent('chargeEnd', payParam)
|
||
}
|
||
}).catch(payErr => {
|
||
console.log(payErr)
|
||
})
|
||
})
|
||
}
|
||
})
|
||
} else {
|
||
let upData = {
|
||
new: 1,
|
||
id: item.id,
|
||
sum: 1,
|
||
buytype: "微信",
|
||
pricebuy: item.pay_money,
|
||
token: that.userInfo.token,
|
||
uid: that.userInfo.id,
|
||
vid: that.mid,
|
||
wxlx: "wxxcx",
|
||
openid: uni.getStorageSync("openid"),
|
||
gid: gid,
|
||
};
|
||
PAY.pays.wxIosCreatOrder(upData).then(resa => {
|
||
PAY.pays.wxAppletIosPay(resa.data.data).then(payRes => {
|
||
let payParam = {
|
||
status: 'paySuccess',
|
||
serialNo: that.serialNo,
|
||
gOrderId: "",
|
||
vid: that.vid,
|
||
oid: resa.data.oid
|
||
}
|
||
if (that.payItemData.pay_type == 4) {
|
||
// that.$refs.back_ref.open('center');
|
||
that.payEnd(payParam)
|
||
} else {
|
||
pms.emitCustomEvent('chargeEnd', payParam)
|
||
}
|
||
}).catch(payErr => {
|
||
console.log('ios pay err', payErr)
|
||
})
|
||
}).catch(err => {
|
||
console.log('creat ios order err', err)
|
||
})
|
||
}
|
||
},
|
||
payEnd(payParam) {
|
||
let that = this;
|
||
console.log("payEnd getOrderId", payParam)
|
||
console.log(that.vid)
|
||
|
||
httpRequest({
|
||
url: "/api/order/getGroupOrderId",
|
||
method: "POST",
|
||
data: {
|
||
vid: that.vid
|
||
}
|
||
}).then(res => {
|
||
console.log("payEnd getOrderId Success", res)
|
||
let pms = that.getPlayerManager();
|
||
payParam.gOrderId = res.data.gid;
|
||
pms.emitCustomEvent('chargeEnd', payParam)
|
||
})
|
||
},
|
||
|
||
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.adBox {
|
||
width: 100%;
|
||
height: 56rpx;
|
||
background: linear-gradient(to right, #FF5205, #FF0591);
|
||
color: #fff;
|
||
border-radius: 48rpx;
|
||
}
|
||
|
||
.noRecharge {
|
||
font-size: 40rpx;
|
||
line-height: 200rpx;
|
||
text-align: center;
|
||
color: #333333;
|
||
}
|
||
|
||
.pay_box {
|
||
width: 750rpx;
|
||
background: #ffffff;
|
||
border-radius: 28rpx 28rpx 0 0;
|
||
}
|
||
|
||
.header_top {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 30rpx 24rpx 12rpx 24rpx;
|
||
}
|
||
|
||
.vider_juji {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 24rpx;
|
||
}
|
||
|
||
.other_recharge {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 24rpx;
|
||
margin-top: 40rpx;
|
||
}
|
||
|
||
.vipCarBox {
|
||
padding: 26rpx;
|
||
align-items: center;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
flex-direction: row;
|
||
}
|
||
|
||
.vipCarItem {
|
||
width: 336rpx;
|
||
height: 200rpx;
|
||
border-radius: 12rpx;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.vipCarFirst {
|
||
background-image: linear-gradient(to right, #FF9A54, #FF3C3C);
|
||
}
|
||
|
||
.vipCarSecond {
|
||
background-image: linear-gradient(to right, #FF9A54, #FF3C3C);
|
||
}
|
||
|
||
.vipCarThird {
|
||
background-image: url('https://wx.yaohe.hnjrdzkj.xyz/static/wechat/static/taoc2.png');
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.vipCarFourth {
|
||
background-image: url('https://wx.yaohe.hnjrdzkj.xyz/static/wechat/static/dingyue_a.png');
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.icon {
|
||
position: absolute;
|
||
color: #333333;
|
||
font-size: 20rpx;
|
||
font-weight: 500;
|
||
line-height: 35rpx;
|
||
padding: 0 20rpx;
|
||
border-radius: 0rpx 0rpx 16rpx 0rpx;
|
||
background: linear-gradient(180deg, #FFFFFF 0%, #FFC833 100%);
|
||
}
|
||
|
||
.vipCarThird .icon {
|
||
background: linear-gradient(180deg, #FF8F8F 0%, #FF3333 100%);
|
||
color: #ffffff;
|
||
}
|
||
|
||
.vipCarFourth .icon {
|
||
background: linear-gradient(90deg, #FFBC48 0%, #FF5D41 100%);
|
||
color: #ffffff;
|
||
}
|
||
|
||
.moneyLine {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
padding: 0 20rpx;
|
||
margin-top: 45rpx;
|
||
}
|
||
|
||
.vipCarFourth .moneyLine {
|
||
color: #FF300A;
|
||
padding-left: 20rpx;
|
||
}
|
||
|
||
.money {
|
||
font-size: 32rpx;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.vipCarFourth .money {
|
||
color: #FF300A;
|
||
}
|
||
|
||
.vipCarThird .money {
|
||
color: #333333;
|
||
}
|
||
|
||
.beanBtn {
|
||
text-align: center;
|
||
font-weight: 500;
|
||
font-size: 22rpx;
|
||
color: #333333;
|
||
line-height: 48rpx;
|
||
padding: 0 20rpx;
|
||
background: linear-gradient(180deg, #FFF2D1 0%, #FFC323 100%);
|
||
border-radius: 24rpx;
|
||
}
|
||
|
||
.depict {
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
color: #FFFFFF;
|
||
line-height: 44rpx;
|
||
padding: 10rpx 20rpx;
|
||
}
|
||
|
||
.explainText {
|
||
margin-top: 26rpx;
|
||
padding-left: 20rpx;
|
||
|
||
}
|
||
|
||
.explainText text {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.choiceNum {
|
||
text-align: right;
|
||
font-size: 22rpx;
|
||
font-weight: 500;
|
||
color: #FFCA3A;
|
||
line-height: 32rpx;
|
||
padding-right: 20rpx;
|
||
}
|
||
|
||
// 新版
|
||
.vipCarBoxSecond {
|
||
background: #eeeeee;
|
||
}
|
||
|
||
.VipCardContent {
|
||
padding: 40rpx 0;
|
||
}
|
||
|
||
.vipCarBoxSecond .vipCarItem {
|
||
background: #ffffff;
|
||
border-radius: 12rpx;
|
||
|
||
}
|
||
|
||
.vipCarBoxSecond .border {
|
||
border: 6rpx solid #dc3a35;
|
||
background: #f6e2af;
|
||
}
|
||
|
||
.rightIcon {
|
||
position: absolute;
|
||
right: 0;
|
||
top: -20rpx;
|
||
line-height: 40rpx;
|
||
color: #ffffff;
|
||
font-size: 24rpx;
|
||
padding: 0 15rpx;
|
||
border-radius: 0 12rpx 0 12rpx;
|
||
background: #dc3a35;
|
||
max-width: 336rpx;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.carMoney {
|
||
text-align: center;
|
||
font-size: 26rpx;
|
||
font-weight: bold;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
}
|
||
|
||
.carMoney text {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.carMoneyExplain {
|
||
color: #666666;
|
||
text-align: center;
|
||
line-height: 30rpx;
|
||
height: 30rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.vipCarFooter {
|
||
line-height: 45rpx;
|
||
background: #dc3a35;
|
||
color: #ffffff;
|
||
text-align: center;
|
||
font-size: 26rpx;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.redColor {
|
||
color: #dc3a35;
|
||
}
|
||
|
||
.footerRedColor {
|
||
line-height: 50rpx;
|
||
background: #fde6e6;
|
||
color: #dc3a35;
|
||
text-align: center;
|
||
font-size: 26rpx;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
border-radius: 0 0 12rpx 12rpx;
|
||
}
|
||
|
||
.hands {
|
||
position: absolute;
|
||
right: -10px;
|
||
bottom: 0rpx;
|
||
width: 90rpx;
|
||
height: 90rpx;
|
||
z-index: 300;
|
||
transform: rotate(-15deg);
|
||
}
|
||
|
||
.explainList {
|
||
padding: 40rpx 0 20rpx 30rpx;
|
||
line-height: 30rpx;
|
||
|
||
.explainItem {
|
||
font-size: 22rpx;
|
||
|
||
.explainText {
|
||
color: #0a5ab6;
|
||
padding: 0 10rpx;
|
||
font-size: 22rpx;
|
||
}
|
||
}
|
||
}
|
||
</style> |