Skip to content

U
uniapp_vedio
Commit ba603b94 authored by jyx's avatar jyx
Browse files
Options

VIP 弹窗添加付费须知

parent a8dcb8c8
Hide whitespace changes
Inline Side-by-side
Showing with 183 additions and 147 deletions
vedio/components/charge-dialog/charge-dialog.vue
View file @ ba603b94
<template> <template>
<view class="body" style="height: 60%;"> <view style="position: relative;">
<scroll-view scroll-y> <view v-if="agreeFlag"
<view style="display: flex;flex-direction: column;align-items: flex-end;"> style="width: 100%;height: 100%;background-color: black;opacity: 0.8;display: flex;position: absolute;z-index: 100;color: white;flex-direction: column;align-items: center;padding:40rpx 0;">
<image @click="onClose" <text style="font-size: 30rpx;width: 90%;white-space:pre-wrap">
style="width: 30rpx;height: 30rpx;display: flex;align-items: right;margin-top: 20rpx;margin-right: 20rpx;margin-bottom: 10rpx;" {{agreeText}}
src="@/static/index/ic_quit_white.png" /> </text>
</view> <image @click="agreeFlag=false" style="width: 30rpx;height: 30rpx;margin-top:150rpx;"
<view style="display: flex;flex-direction: column;align-items: center;margin-bottom: 20rpx;"> src="@/static/index/ic_quit_white.png"></image>
<view style="font-size: 38rpx;color: black;">{{title}}</view> </view>
<view class="flex">
<view v-if="point>0" style="display: flex;flex-direction: row;margin-top: 10rpx;"> <view class="body" style="height: 60%;">
<view style="font-size: 28rpx;color: #644238;margin-top: 12rpx;">解锁本集：</view> <scroll-view scroll-y>
<view style="font-size: 42rpx;color: red;font-weight: 777;">{{point}}</view> <view style="display: flex;flex-direction: column;align-items: flex-end;">
<view style="font-size: 28rpx;color: #644238;margin-top: 12rpx;margin-left: 6rpx;">看点 <view style="display: flex;flex-direction: row;">
</view> <view @click="agreeFlag=true" style="margin-top: 12rpx;margin-right: 10rpx;">付费须知></view>
<image @click="onClose"
style="width: 30rpx;height: 30rpx;display: flex;align-items: right;margin-top: 20rpx;margin-right: 20rpx;margin-bottom: 10rpx;"
src="@/static/index/ic_quit_white.png" />
</view> </view>
<view v-if="point>0" style="width: 60rpx;"></view> </view>
<view style="display: flex;flex-direction: row;margin-top: 10rpx;"> <view style="display: flex;flex-direction: column;align-items: center;margin-bottom: 20rpx;">
<view style="font-size: 28rpx;color: #644238;margin-top: 12rpx;">账户余额：</view> <view style="font-size: 38rpx;color: black;">{{title}}</view>
<view style="font-size: 42rpx;color: red;font-weight: 777;">{{userBean.point}}</view> <view class="flex">
<view style="font-size: 28rpx;color: #644238;margin-top: 12rpx;margin-left: 6rpx;">看点 <view v-if="point>0" style="display: flex;flex-direction: row;margin-top: 10rpx;">
<view style="font-size: 28rpx;color: #644238;margin-top: 12rpx;">解锁本集：</view>
<view style="font-size: 42rpx;color: red;font-weight: 777;">{{point}}</view>
<view style="font-size: 28rpx;color: #644238;margin-top: 12rpx;margin-left: 6rpx;">看点
</view>
</view>
<view v-if="point>0" style="width: 60rpx;"></view>
<view style="display: flex;flex-direction: row;margin-top: 10rpx;">
<view style="font-size: 28rpx;color: #644238;margin-top: 12rpx;">账户余额：</view>
<view style="font-size: 42rpx;color: red;font-weight: 777;">{{userBean.point}}</view>
<view style="font-size: 28rpx;color: #644238;margin-top: 12rpx;margin-left: 6rpx;">看点
</view>
</view> </view>
</view> </view>
</view> </view>
</view> <view class="section">
<view class="section"> <view class="pack-box">
<view class="pack-box"> <view class="pack-item"
<view class="pack-item" :style="item.largeType !=='vip' ?'background: #f5f5f5;':'background: #f4c98b;'"
:style="item.largeType !=='vip' ?'background: #f5f5f5;':'background: #f4c98b;'" :class="[{active: index==selectedIndex}]" v-for='(item, index) in vipList' :key='index'
:class="[{active: index==selectedIndex}]" v-for='(item, index) in vipList' :key='index' @click="choosePack(item, index)">
@click="choosePack(item, index)"> <view style="display: flex;flex-direction: column;align-items: center;">
<view style="display: flex;flex-direction: column;align-items: center;"> <view class="price row"> {{item.firstPayPrice}}元 </view>
<view class="price row"> {{item.firstPayPrice}}元 </view>
<view class="name row"> {{item.title}} </view> <view class="name row"> {{item.title}} </view>
<view class="origin row" v-if="item.remarks!=null&&item.remarks!=''"> {{item.remarks}} <view class="origin row" v-if="item.remarks!=null&&item.remarks!=''"> {{item.remarks}}
</view>
</view>
<view class="cut-down" v-if='item.topTitle!=null&&item.topTitle.length>0'>
{{item.topTitle}}
</view>
<view v-if="index==selectedIndex" style="position: absolute;bottom: 0;right: 0;">
<image mode="scaleToFill"
style="width: 100rpx;height: 100rpx;display: flex;align-items: right;"
src="https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/img/ic_loading.gif">
</image>
</view> </view>
</view> </view>
<view class="cut-down" v-if='item.topTitle!=null&&item.topTitle.length>0'>
{{item.topTitle}}
</view>
<view v-if="index==selectedIndex" style="position: absolute;bottom: 0;right: 0;">
<image mode="scaleToFill"
style="width: 100rpx;height: 100rpx;display: flex;align-items: right;"
src="https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/img/ic_loading.gif">
</image>
</view>
</view>
</view>
</view>
<view style="display: flex;flex-direction: column;align-items: center;">
<view style="font-size: 24rpx;color: gray;margin-top: 16rpx;margin-bottom: 10rpx;">
订单中如有疑问，请在个人中心联系客服</view>
</view> </view>
</view> </scroll-view>
<view style="display: flex;flex-direction: column;align-items: center;"> </view>
<view style="font-size: 24rpx;color: gray;margin-top: 16rpx;margin-bottom: 10rpx;">
订单中如有疑问，请在个人中心联系客服</view>
</view>
</scroll-view>
</view> </view>
</template> </template>
...@@ -83,6 +97,8 @@ ...@@ -83,6 +97,8 @@
playerId: this.playerId playerId: this.playerId
}, },
point: 0, point: 0,
agreeFlag: false,
agreeText: "付费须知\n\n1、看点和会员属于虚拟商品，一经购买不可退换\n\n2、未满18岁的未成年人需要在监护人主导、同意下进行相关付费操作;\n\n3、充值看点一般5分钟内到账，如未到账请在“我的”页面联系客服;"
}; };
}, },
props: { props: {
......
vedio/components/coin-popup/coin-popup.vue
View file @ ba603b94
<template> <template>
<view> <view>
<uni-popup :type="popType" :animation="showAnim" ref="coinPop" :maskClick="false" :isMaskClick="false"> <uni-popup :type="popType" :animation="showAnim" ref="coinPop" :maskClick="false" :isMaskClick="false">
<view class="body" style="margin-top: 500rpx;border-radius: 10rpx;width: 100%;height: 100%;"> <view style="position: relative;">
<scroll-view scroll-y> <view v-if="agreeFlag"
<view style="display: flex;flex-direction: column;align-items: flex-end;"> style="width: 100%;height: 100%;background-color: black;opacity: 0.8;display: flex;position: absolute;z-index: 100;color: white;flex-direction: column;align-items: center;padding:40rpx 0;">
<image @click="handleClose" <text style="font-size: 30rpx;width: 90%;white-space:pre-wrap">
style="width: 30rpx;height: 30rpx;display: flex;align-items: right;margin-top: 20rpx;margin-right: 20rpx;margin-bottom: 10rpx;" {{agreeText}}
src="@/static/index/ic_quit_white.png" /> </text>
</view> <image @click="agreeFlag=false" style="width: 30rpx;height: 30rpx;margin-top:150rpx;"
<view style="display: flex;flex-direction: column;align-items: center;margin-bottom: 20rpx;"> src="@/static/index/ic_quit_white.png"></image>
<view style="font-size: 38rpx;color: black;">{{title}}</view> </view>
<view v-if="!isFirstPayFlag" class="flex">
<view v-if="point>0" style="display: flex;flex-direction: row;margin-top: 10rpx;"> <view class="body" style="margin-top: 500rpx;border-radius: 10rpx;width: 100%;height: 100%;">
<view style="font-size: 28rpx;color: #644238;margin-top: 12rpx;">解锁本集：</view> <scroll-view scroll-y>
<view style="font-size: 42rpx;color: red;font-weight: 777;">{{point}}</view> <view style="display: flex;flex-direction: column;align-items: flex-end;">
<view style="font-size: 28rpx;color: #644238;margin-top: 12rpx;margin-left: 6rpx;">看点 <view style="display: flex;flex-direction: row;">
<view @click="agreeFlag=true" style="margin-top: 12rpx;margin-right: 10rpx;">付费须知>
</view> </view>
<image @click="handleClose"
style="width: 30rpx;height: 30rpx;display: flex;align-items: right;margin-top: 20rpx;margin-right: 20rpx;margin-bottom: 10rpx;"
src="@/static/index/ic_quit_white.png" />
</view> </view>
<view v-if="point>0" style="width: 60rpx;"></view> </view>
<view style="display: flex;flex-direction: row;margin-top: 10rpx;"> <view style="display: flex;flex-direction: column;align-items: center;margin-bottom: 20rpx;">
<view style="font-size: 28rpx;color: #644238;margin-top: 12rpx;">账户余额：</view> <view style="font-size: 38rpx;color: black;">{{title}}</view>
<view style="font-size: 42rpx;color: red;font-weight: 777;">{{userBean.point}}</view> <view v-if="!isFirstPayFlag" class="flex">
<view style="font-size: 28rpx;color: #644238;margin-top: 12rpx;margin-left: 6rpx;">看点 <view v-if="point>0" style="display: flex;flex-direction: row;margin-top: 10rpx;">
<view style="font-size: 28rpx;color: #644238;margin-top: 12rpx;">解锁本集：</view>
<view style="font-size: 42rpx;color: red;font-weight: 777;">{{point}}</view>
<view style="font-size: 28rpx;color: #644238;margin-top: 12rpx;margin-left: 6rpx;">
看点
</view>
</view>
<view v-if="point>0" style="width: 60rpx;"></view>
<view style="display: flex;flex-direction: row;margin-top: 10rpx;">
<view style="font-size: 28rpx;color: #644238;margin-top: 12rpx;">账户余额：</view>
<view style="font-size: 42rpx;color: red;font-weight: 777;">{{userBean.point}}
</view>
<view style="font-size: 28rpx;color: #644238;margin-top: 12rpx;margin-left: 6rpx;">
看点
</view>
</view> </view>
</view> </view>
</view> </view>
</view> <view class="section" v-if="!isFirstPayFlag">
<view class="section" v-if="!isFirstPayFlag"> <view class="pack-box">
<view class="pack-box"> <view class="pack-item"
<view class="pack-item" :style="item.largeType !=='vip' ?'background: #f5f5f5;':'background: #f4c98b;'"
:style="item.largeType !=='vip' ?'background: #f5f5f5;':'background: #f4c98b;'" :class="[{active: index==selectedIndex}]" v-for='(item, index) in vipList'
:class="[{active: index==selectedIndex}]" v-for='(item, index) in vipList' :key='index' :key='index' @click="choosePack(item, index)">
@click="choosePack(item, index)"> <view style="display: flex;flex-direction: column;align-items: center;">
<view style="display: flex;flex-direction: column;align-items: center;"> <view class="price row">
<view class="price row"> {{item.firstPayPrice}}元
{{item.firstPayPrice}}元 </view>
</view>
<view class="name row"> <view class="name row">
{{item.title}} {{item.title}}
</view> </view>
<view class="origin row" v-if="item.remarks!=null&&item.remarks!=''"> <view class="origin row" v-if="item.remarks!=null&&item.remarks!=''">
{{item.remarks}} {{item.remarks}}
</view>
</view>
<view class="cut-down" v-if='item.topTitle!=null&&item.topTitle.length>0'>
{{item.topTitle}}
</view>
<view v-if="index==selectedIndex" style="position: absolute;bottom: 0;right: 0;">
<image mode="scaleToFill"
style="width: 100rpx;height: 100rpx;display: flex;align-items: right;"
src="https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/img/ic_loading.gif">
</image>
</view> </view>
</view> </view>
<view class="cut-down" v-if='item.topTitle!=null&&item.topTitle.length>0'>
{{item.topTitle}}
</view>
<view v-if="index==selectedIndex" style="position: absolute;bottom: 0;right: 0;">
<image mode="scaleToFill"
style="width: 100rpx;height: 100rpx;display: flex;align-items: right;"
src="https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/img/ic_loading.gif">
</image>
</view>
</view>
</view>
</view>
<view style="display: flex;flex-direction: column;align-items: center;">
<view style="font-size: 24rpx;color: gray;margin-top: 16rpx;margin-bottom: 18rpx;">
订单中如有疑问，请在个人中心联系客服</view>
</view> </view>
</view> </scroll-view>
<view style="display: flex;flex-direction: column;align-items: center;"> </view>
<view style="font-size: 24rpx;color: gray;margin-top: 16rpx;margin-bottom: 18rpx;">
订单中如有疑问，请在个人中心联系客服</view>
</view>
</scroll-view>
</view> </view>
</uni-popup> </uni-popup>
</view> </view>
...@@ -102,7 +120,9 @@ ...@@ -102,7 +120,9 @@
os: 'android', os: 'android',
isFirstPayFlag: false, isFirstPayFlag: false,
popType: 'bottom', popType: 'bottom',
showAnim: true showAnim: true,
agreeFlag: false,
agreeText: "付费须知\n\n1、看点和会员属于虚拟商品，一经购买不可退换\n\n2、未满18岁的未成年人需要在监护人主导、同意下进行相关付费操作;\n\n3、充值看点一般5分钟内到账，如未到账请在“我的”页面联系客服;"
}; };
}, },
methods: { methods: {
...@@ -202,55 +222,55 @@ ...@@ -202,55 +222,55 @@
// 符合首充 // 符合首充
vipBean = this.firstPayList[0]; vipBean = this.firstPayList[0];
} }
if(this.os=='ios'){ if (this.os == 'ios') {
this.post({ this.post({
url: '/vip/getVipPayParams', url: '/vip/getVipPayParams',
data: { data: {
vedioId: that.point <= 0 ? null : that.vedioId, vedioId: that.point <= 0 ? null : that.vedioId,
pid: vipBean.pid, pid: vipBean.pid,
payChannel: 'WEIXIN' payChannel: 'WEIXIN'
}, },
showLoading: true, showLoading: true,
success: ({ success: ({
data data
}) => { }) => {
that.wxPay(data, vipBean.largeType); that.wxPay(data, vipBean.largeType);
} }
}); });
}else{ } else {
this.post({ this.post({
url: '/vip/getVipPayParams/xpay', url: '/vip/getVipPayParams/xpay',
data: { data: {
vedioId: that.point <= 0 ? null : that.vedioId, vedioId: that.point <= 0 ? null : that.vedioId,
pid: vipBean.pid, pid: vipBean.pid,
os: that.os, os: that.os,
payChannel: 'WEIXIN' payChannel: 'WEIXIN'
}, },
showLoading: true, showLoading: true,
success: ({ success: ({
data data
}) => { }) => {
that.wxVirtuallyPay(data, vipBean.largeType); that.wxVirtuallyPay(data, vipBean.largeType);
} }
}); });
} }
}, },
wxPay(wxData, largeType) { wxPay(wxData, largeType) {
let wxParams = wxData.params; let wxParams = wxData.params;
let that = this; let that = this;
// 发起微信支付 // 发起微信支付
wx.requestPayment({ wx.requestPayment({
timeStamp: wxParams.timeStamp, timeStamp: wxParams.timeStamp,
nonceStr: wxParams.nonceStr, nonceStr: wxParams.nonceStr,
package: wxParams.packageStr, package: wxParams.packageStr,
signType: wxParams.signType, signType: wxParams.signType,
paySign: wxParams.paySign, paySign: wxParams.paySign,
success(res) { success(res) {
that.paySuccess(largeType); that.paySuccess(largeType);
}, },
fail(res) {} fail(res) {}
}) })
}, },
wxVirtuallyPay(wxData, largeType) { wxVirtuallyPay(wxData, largeType) {
// 虚拟支付 // 虚拟支付
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment