Files
video_mini/components/charge-dialog/charge-dialog.vue
T
2025-08-25 11:20:35 +08:00

736 lines
18 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<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="https://wx.yaohe.hnjrdzkj.xyz/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="https://wx.yaohe.hnjrdzkj.xyz/static/wechat/static/hands.gif" mode=""></image>
</view>
</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>
<uni-popup ref="back_ref" type="center">
<view class="teamPupCont">
<view class="closeIcon" @click="closePup">
<uni-icons type="closeempty" size="16" color="#ffffff"></uni-icons>
</view>
<view class="textBox">
<view class="textLine">用户只能发起一次邀请</view>
<view class="textLine">有效时间为24小时</view>
<view class="textLine">分享好友拼团,拼成退差价</view>
</view>
<button open-type="share" class="inviteBtn">立即邀请</button>
</view>
</uni-popup>
</view>
</view>
</template>
<script>
import {
httpRequest
} from '@/utils/request'
import PAY from '@/utils/pay'
const playletPlugin = requirePlugin('playlet-plugin')
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
}
},
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.getAllVideoNum();
this.getPayList();
},
playerId(newValue, oldvalue) {
console.log('this.initChargeDialog', newValue)
}
},
methods: {
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)
})
},
// wxxcx_xuni(data) {
// console.log(data)
// let that = this,
// pms = that.getPlayerManager();
// uni.requestVirtualPayment({
// signData: JSON.stringify({
// buyQuantity: data.signData.buyQuantity,
// currencyType: data.signData.currencyType,
// env: data.signData.env,
// goodsPrice: data.signData.goodsPrice,
// offerId: data.signData.offerId,
// outTradeNo: data.signData.outTradeNo,
// platform: data.signData.platform,
// productId: data.signData.productId,
// attach: data.signData.attach,
// }),
// paySig: data.paySig,
// signature: data.signature,
// mode: 'short_series_coin',
// success(res) {
// let payParam = {
// status: 'paySuccess',
// serialNo: that.serialNo,
// gOrderId: "",
// vid: that.vid,
// oid: data.oid
// }
// if (that.payItemData.pay_type == 4) {
// // that.$refs.back_ref.open('center');
// that.payEnd(payParam)
// } else {
// pms.emitCustomEvent('chargeEnd', payParam)
// }
// },
// fail({errMsg, errCode}) {
// console.log(errMsg, errCode, data.signature)
// },
// })
// },
// wxxcx(data) {
// let that = this,
// pms = that.getPlayerManager();
// uni.requestPayment({
// "provider": 'wxpay',
// "appId": data.appId,
// "timeStamp": data.timeStamp + '',
// "nonceStr": data.nonceStr,
// "package": data.package,
// "signType": 'MD5',
// "paySign": data.sign,
// success: function (res1) {
// let payParam = {
// status: 'paySuccess',
// serialNo: that.serialNo,
// gOrderId: "",
// vid: that.vid,
// oid: data.oid
// }
// if (that.payItemData.pay_type == 4) {
// // that.$refs.back_ref.open('center');
//
// that.payEnd(payParam)
// } else {
// pms.emitCustomEvent('chargeEnd', payParam)
// }
// console.log('success:' + JSON.stringify(res1));
// },
// fail: function (err1) {
// console.log('fail:' + JSON.stringify(err1));
// }
// });
// },
closePup() {
// this.$refs.back_ref.close();
}
},
}
</script>
<style scoped lang="scss">
.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>