吆喝
This commit is contained in:
蔡同学
@@ -0,0 +1,449 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user