449 lines
10 KiB
Vue
449 lines
10 KiB
Vue
<template>
|
||
<uni-popup type="bottom" ref="videoRecharge" :mask-click='false'>
|
||
<view class="pay_box">
|
||
<view class="header_top">
|
||
<text style="font-size: 32rpx;">购买解锁后可继续观看</text>
|
||
<uni-icons type='closeempty' size="18" @tap="hideRechargePup" color="#bababa"></uni-icons>
|
||
</view>
|
||
<view class="vider_juji">
|
||
<text style="font-size: 24rpx;">{{ videoInfo.name }} · 第{{ playVideoInfo.weigh }}集</text>
|
||
<text style="font-size: 24rpx;color: #333333;">已更新至{{ videoInfo.sum }}集</text>
|
||
</view>
|
||
<view class="vider_juji">
|
||
<text style="font-size: 24rpx;">购买本集需要： {{ playVideoInfo.beans }}金豆</text>
|
||
</view>
|
||
<view class="other_recharge">
|
||
<text style="font-size: 28rpx;">金豆充值</text>
|
||
<text style="font-size: 28rpx;color: #333333;font-weight: bold;">我的金豆:{{ userBeans }}</text>
|
||
</view>
|
||
|
||
|
||
<view class="vipCarBox" v-if="payListGroupId==1">
|
||
<view :class="[
|
||
'vipCarItem',
|
||
{'vipCarThird':item.pay_type == 1},
|
||
{'vipCarFirst': item.pay_type == 2},
|
||
{'vipCarFourth':item.pay_type == 3},
|
||
] " v-for="item in list_pay" :key="item.id" @click="purchase(item)">
|
||
|
||
|
||
<text class="icon" v-if="item.pay_tab">{{ item.pay_tab }}</text>
|
||
<view class="moneyLine">
|
||
<text class="money">￥{{ item.pay_money }}</text>
|
||
<text class="beanBtn" v-if="item.pay_give_num && item.pay_type == 2">赠{{ item.pay_num }}金豆 </text>
|
||
</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 class="explainTextt" v-if="item.pay_type == 1" style="color: #333333;">全部影片免费观看</text>
|
||
<text class="explainTextt" v-if="item.pay_type == 1 && item.remark" style="color: #333333;">{{ item.remark }}</text>
|
||
<text class="explainTextt" v-if="item.pay_type == 3" style="color: #FF6900;">本剧订阅全集</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}]"
|
||
v-for="item in list_pay" :key="item.id" @click="purchase(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 class="cardMoneyText">{{ item.pay_money }}</text>
|
||
元
|
||
</view>
|
||
<text class="carMoneyExplain" v-if="item.pay_give_money>0">多送{{ item.pay_give_money }}元</text>
|
||
<text v-else class="carMoneyExplain"></text>
|
||
</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>
|
||
</uni-popup>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
import configs from "@/utils/config";
|
||
import PAY from '@/utils/pay'
|
||
export default {
|
||
name: "rechargePup",
|
||
props: {
|
||
userBeans: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
playVideoInfo: {
|
||
type: Object,
|
||
default: {}
|
||
},
|
||
videoInfo: {
|
||
type: Object,
|
||
default: {}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
payListGroupId: 1,
|
||
list_pay: [],
|
||
checkItem:{},
|
||
oid:"",
|
||
}
|
||
},
|
||
methods: {
|
||
showRechargePup() {
|
||
let that = this;
|
||
uni.request({
|
||
url: configs.webUrl + '/api/beans/payList',
|
||
data: {
|
||
vs_id: uni.getStorageSync('vs_id_code'),
|
||
token: uni.getStorageSync("userinfo").token,
|
||
video_list_id: this.videoInfo.id || 0
|
||
},
|
||
success: listRes => {
|
||
console.log(listRes.data.data)
|
||
that.list_pay = listRes.data.data
|
||
that.$refs.videoRecharge.open()
|
||
}, fail: (err) => {
|
||
uni.showToast({title: err.msg, icon: "none", duration: 2000})
|
||
}
|
||
})
|
||
},
|
||
hideRechargePup() {
|
||
this.$refs.videoRecharge.close()
|
||
},
|
||
purchase(item){
|
||
let that = this;
|
||
PAY.pays.lakalaPay({
|
||
id:item.id,
|
||
vid: that.playVideoInfo.id,
|
||
pay_type: 21,
|
||
token: uni.getStorageSync("userinfo").token,
|
||
uid: uni.getStorageSync("userinfo").id,
|
||
ad_code: uni.getStorageSync('get_ad_code')
|
||
}).then(res=>{
|
||
console.log(res)
|
||
if(res.code ==1){
|
||
// #ifdef H5
|
||
console.log('h5 open')
|
||
window.open(res.data.return_url, "_self")
|
||
// #endif
|
||
// #ifdef APP
|
||
uni.navigateTo({
|
||
url:"/pagesA/myCenter/wallet/webPay?url="+encodeURIComponent(res.data.return_url)
|
||
})
|
||
// #endif
|
||
}
|
||
}).catch(err=>{
|
||
console.log(err)
|
||
})
|
||
},
|
||
|
||
|
||
|
||
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.pay_box {
|
||
background: #ffffff;
|
||
padding-top: 30rpx;
|
||
border-radius: 30rpx 30rpx 0 0;
|
||
}
|
||
|
||
.header_top {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 30rpx 24rpx 20rpx 24rpx;
|
||
}
|
||
|
||
.imBtn {
|
||
width: 140rpx;
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
position: absolute;
|
||
top: 40rpx;
|
||
right: 100rpx;
|
||
background: #eeeeee;
|
||
}
|
||
|
||
.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 .explainTextt {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.choiceNum {
|
||
text-align: right;
|
||
font-size: 22rpx;
|
||
font-weight: 500;
|
||
color: #FFCA3A;
|
||
line-height: 32rpx;
|
||
padding-top: 10rpx;
|
||
padding-right: 20rpx;
|
||
}
|
||
|
||
// 新版
|
||
.vipCarBoxSecond {
|
||
background: #eeeeee;
|
||
}
|
||
|
||
.VipCardContent {
|
||
padding: 30rpx 0 20rpx 0;
|
||
}
|
||
|
||
.vipCarBoxSecond .vipCarItem {
|
||
background: #ffffff;
|
||
border-radius: 12rpx;
|
||
|
||
}
|
||
|
||
.vipCarBoxSecond .border {
|
||
// border: 6rpx solid #dc3a35;
|
||
background-image: url(https://wx.yaohe.hnjrdzkj.xyz/static/wechat/static/dingyue_a.png);
|
||
background-size: cover;
|
||
}
|
||
|
||
.vipCarBoxSecond .one {
|
||
|
||
.vipCarFooter {
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.carMoney {
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
background-image: url(https://wx.yaohe.hnjrdzkj.xyz/static/wechat/static/pay1.png);
|
||
background-size: cover;
|
||
}
|
||
|
||
.rightIcon {
|
||
position: absolute;
|
||
right: 0;
|
||
top: -10rpx;
|
||
line-height: 40rpx;
|
||
color: #ffffff;
|
||
font-size: 30rpx;
|
||
padding: 0 15rpx;
|
||
border-radius: 0 16rpx 0 16rpx;
|
||
background: rgb(253, 172, 18);
|
||
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 .cardMoneyText {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.carMoneyExplain {
|
||
color: red;
|
||
text-align: center;
|
||
line-height: 30rpx;
|
||
height: 30rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
//底部信息
|
||
.vipCarFooter {
|
||
line-height: 45rpx;
|
||
// background-color: #dc3a35;
|
||
color: #000000;
|
||
text-align: center;
|
||
font-size: 26rpx;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.redColor {
|
||
color: #000000;
|
||
}
|
||
|
||
//普通底部
|
||
.footerRedColor {
|
||
line-height: 50rpx;
|
||
// background-color: #fde6e6;
|
||
color: #000000;
|
||
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);
|
||
}
|
||
|
||
|
||
.explain {
|
||
padding-left: 20rpx;
|
||
}
|
||
|
||
.explainText {
|
||
line-height: 35rpx;
|
||
font-size: 24rpx;
|
||
color: #bbbbbb;
|
||
}
|
||
</style> |