661 lines
14 KiB
Vue
661 lines
14 KiB
Vue
<template>
|
||
<view class="pagesContent">
|
||
<view class="pagesHeader">
|
||
<view class="navBack">
|
||
<uni-icons class="backIcon" type="left" size="24" color="#ffffff" @click="navBack"></uni-icons>
|
||
金豆充值
|
||
</view>
|
||
|
||
<view class="flex cl-w" style="flex-direction: column;padding-left: 58rpx;">
|
||
<view class="flex alcenter">
|
||
<text style="font-weight: bold;font-size: 72rpx;color: #FFFFFF;float: left;">{{ userdata.beans }}</text>
|
||
<uni-icons style="margin-left: 80rpx;" type="right" size="24" color="#ffffff"
|
||
@click="goBill"></uni-icons>
|
||
</view>
|
||
|
||
|
||
<text class="ft16 ftw500" style="float: left;margin-top: 22rpx;">我的金豆</text>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
|
||
|
||
<view
|
||
style="margin-top: -36rpx;padding: 36rpx 36rpx;background-color: #fff;border-radius: 28rpx 28rpx 0rpx 0rpx;">
|
||
<view class="ftw500 ft14 cl-333" style="margin-bottom: 24rpx;">充值金额</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" :key="item.id" @click="purchase(item)">
|
||
<text class="icon" v-if="item.pay_tab > 0">特惠</text>
|
||
<view class="moneyLine">
|
||
<view class="money" v-if="system=='ios' && is_check"> </view>
|
||
<view class="money" v-else>￥{{ item.pay_money }}</view>
|
||
<view class="beanBtn" v-if="item.pay_give_num && item.pay_type == 2">赠{{ item.send_integral }}积分
|
||
</view>
|
||
</view>
|
||
<view class="depict" v-if="item.pay_give_num && item.pay_type == 2">
|
||
{{ item.pay_num }}金豆+{{ item.pay_give_num }}豆
|
||
</view>
|
||
<view class="depict" v-if="!item.pay_give_num && item.pay_type == 2">
|
||
{{ item.pay_num }}金豆
|
||
</view>
|
||
<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>
|
||
</view>
|
||
<view class="choiceNum" v-if="item.menber_sel">{{ item.menber_sel }}%用户选择</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="system=='ios' && is_check"></view>
|
||
<view class="agreement" v-else>
|
||
<view class="ft12 ftw500 cl-999">充值说明：</view>
|
||
<view class=" ftw500 cl-999" style="font-size: 22rpx;">虚拟商品购买后不可退换，青少年请在家长的陪同下充值</view>
|
||
</view>
|
||
|
||
|
||
|
||
|
||
<view v-if="show"
|
||
style="background-color: rgba(0,0,0, 0.5);width: 750rpx;height: 100vh;z-index: 99;position: absolute;bottom: 0;left: 0;opacity：.5;"
|
||
@click="show=false"></view>
|
||
<view v-if="show" style="width: 750rpx;background: #F8F8F9;position: absolute;bottom: 0;left: 0;z-index: 999;">
|
||
<view style="background-color: #fff;padding: 30rpx;">
|
||
<view class="flex alcenter space">
|
||
<text class="ft14 cl-info2">需支付</text>
|
||
<text class="ft16 cl-main ftw600 cl-orange">¥{{ pricebuy }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="box mt16 pd16_15">
|
||
<view class="ft16 pb16 ftw600 cl-main">支付方式</view>
|
||
<view class="bd-line mt16"></view>
|
||
<radio-group @change="changeType">
|
||
<view class="pt16 pb16 flex alcenter space">
|
||
<view class="flex alcenter">
|
||
<text class="iconfont iconicon_pay_balance ft32 cl-green"></text>
|
||
<text class="ml15 ft14 ftw500 cl-main">微信支付</text>
|
||
</view>
|
||
<view>
|
||
<radio value="weixin" :checked="payType == 'weixin'" />
|
||
</view>
|
||
</view>
|
||
<view class="bd-line"></view>
|
||
|
||
</radio-group>
|
||
</view>
|
||
<view class="form-footer-h">
|
||
<view class="form-footer form-footer-h">
|
||
<view class="form-footer-main pd10_15" v-if="system=='ios' && is_check">
|
||
<button class="btn-big">请使用android手机体验</button>
|
||
</view>
|
||
<view class="form-footer-main pd10_15" v-else>
|
||
<button v-if="mid>0" class="btn-big" @click="okTap">支付
|
||
¥{{ pricebuy }}
|
||
</button>
|
||
<button v-else class="btn-big" @click="okTap">支付 ¥{{ pricebuy }}</button>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import PAY from "@/utils/pay";
|
||
export default {
|
||
data() {
|
||
return {
|
||
show: false,
|
||
list: [],
|
||
userdata: {},
|
||
// payType:'微信',
|
||
payType: 'weixin',
|
||
num: 1,
|
||
coupon_id: 0,
|
||
buydata: [],
|
||
buyType: '微信',
|
||
dataList: Object,
|
||
money: 0,
|
||
mid: 0,
|
||
openid: '',
|
||
pricebuy: 0,
|
||
wxlx: 'wxh5',
|
||
coupons: [{
|
||
coupon_id: 1,
|
||
num: 20
|
||
},
|
||
{
|
||
coupon_id: 2,
|
||
num: 30
|
||
},
|
||
{
|
||
coupon_id: 3,
|
||
num: 40
|
||
},
|
||
],
|
||
id: '',
|
||
jine: '',
|
||
system: '',
|
||
payListGroupId: 1,
|
||
userInfo: {},
|
||
allVideoNum: 1,
|
||
is_check: false
|
||
}
|
||
},
|
||
onLoad() {
|
||
|
||
this.system = uni.getSystemInfoSync().osName
|
||
//#ifdef MP-WEIXIN
|
||
this.wxlx = 'wxxcx'
|
||
this.openid = uni.getStorageSync("openid")
|
||
this.userInfo = uni.getStorageSync("userinfo");
|
||
//#endif
|
||
//#ifdef H5
|
||
var ua = window.navigator.userAgent.toLowerCase();
|
||
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
|
||
this.wxlx = 'wxgzh';
|
||
}
|
||
//#endif
|
||
},
|
||
onShow() {
|
||
this.is_check = uni.getStorageSync('config').is_check == 1 ? true : false;
|
||
},
|
||
mounted() {
|
||
this.payListGroupId = uni.getStorageSync("config").pay_tpl;
|
||
this.payListGroupId = 1
|
||
this.getAllVideoNum();
|
||
this.getPayList()
|
||
this.getUserDel()
|
||
},
|
||
methods: {
|
||
okTap() {
|
||
var that = this
|
||
let defaultData = {
|
||
sum: 1,
|
||
buyType: that.buyType,
|
||
pricebuy: that.pricebuy,
|
||
token: uni.getStorageSync("userinfo").token,
|
||
uid: uni.getStorageSync("userinfo").id,
|
||
wxlx: that.wxlx,
|
||
id: that.id,
|
||
openid: that.openid,
|
||
info: [],
|
||
};
|
||
// #ifdef MP-WEIXIN
|
||
this.weiChartPay(defaultData)
|
||
// #endif
|
||
// #ifdef H5
|
||
this.H5Pay();
|
||
// #endif
|
||
},
|
||
weiChartPay(defaultData) {
|
||
var that = this
|
||
if (this.system == 'android') {
|
||
uni.login({
|
||
timeout: 10000,
|
||
provider: 'weixin', //如果是uniapp，在这里需要标明平台的类型，支持的参数请查阅uniapp官网的uni.login()文档
|
||
success: (res) => {
|
||
PAY.pays.serverCreatOrder({
|
||
id: that.id,
|
||
pay_type: 5,
|
||
code: res.code,
|
||
ad_code: uni.getStorageSync('get_ad_code'),
|
||
openid: that.openid,
|
||
}).then(creatRes => {
|
||
console.log('creat order success', creatRes)
|
||
PAY.pays.wxAppletAndroidPay(creatRes.data).then(payRes => {
|
||
console.log('pay order success', payRes)
|
||
that.getUserDel()
|
||
uni.showToast({
|
||
icon:'none',
|
||
title: '支付成功'
|
||
});
|
||
this.show = false;
|
||
uni.navigateBack();
|
||
})
|
||
}).catch(err => {
|
||
console.log(err)
|
||
})
|
||
|
||
},
|
||
})
|
||
} else {
|
||
PAY.pays.wxIosCreatOrder({
|
||
sum: defaultData.sum,
|
||
buytype: defaultData.buyType,
|
||
pricebuy: defaultData.pricebuy,
|
||
token: defaultData.token,
|
||
uid: defaultData.uid,
|
||
wxlx: defaultData.wxlx,
|
||
id: defaultData.id,
|
||
openid: defaultData.openid,
|
||
info: defaultData.info,
|
||
ad_code: uni.getStorageSync('get_ad_code')
|
||
}).then(res => {
|
||
if (res.code == 1) {
|
||
PAY.pays.wxAppletIosPay(res.data).then(payRes => {
|
||
console.log('pay order success', payRes)
|
||
that.getUserDel()
|
||
})
|
||
}
|
||
}).catch(err => {
|
||
console.log(err)
|
||
})
|
||
}
|
||
},
|
||
H5Pay() {
|
||
let that = this;
|
||
that.$httpRequest({
|
||
url: "/api/pay/payInfo",
|
||
method: "GET",
|
||
data: {
|
||
id: that.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)
|
||
// #ifdef H5
|
||
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)
|
||
})
|
||
},
|
||
|
||
goBill() { //消费明细
|
||
uni.navigateTo({ //钱包
|
||
url: '/pagesA/myCenter/wallet/bill'
|
||
})
|
||
},
|
||
|
||
|
||
changeType(e) {
|
||
this.payType = e.detail.value;
|
||
if (e.detail.value == 'money') {
|
||
this.buyType = '余额';
|
||
}
|
||
if (e.detail.value == 'weixin') {
|
||
this.buyType = '微信';
|
||
}
|
||
},
|
||
purchase(e) {
|
||
this.id = e.id
|
||
// #ifdef MP-WEIXIN
|
||
if (this.system == 'ios' && this.is_check) {} else {
|
||
this.pricebuy = e.pay_money
|
||
this.show = true
|
||
}
|
||
// #endif
|
||
|
||
// #ifdef H5
|
||
this.H5Pay()
|
||
// #endif
|
||
},
|
||
getUserDel() {
|
||
this.$httpRequest({
|
||
url: "/api/user/index",
|
||
method: "GET"
|
||
}).then(res => {
|
||
this.userdata = res.data;
|
||
uni.setStorageSync('userinfo', res.data);
|
||
uni.setStorageSync('config', res.data.config)
|
||
}).catch(err => {
|
||
console.log(err)
|
||
})
|
||
},
|
||
getPayList() {
|
||
this.$httpRequest({
|
||
url: "/api/beans/payList",
|
||
method: "GET"
|
||
}).then(res => {
|
||
if (res.code == 1) {
|
||
if (res.data.length > 0) {
|
||
let lists = [];
|
||
res.data.forEach((item) => {
|
||
if (item.pay_type != 3) {
|
||
lists.push(item)
|
||
}
|
||
})
|
||
this.list = lists
|
||
}
|
||
} else if (res.data.code == 50) {
|
||
this.is_check = true;
|
||
} else {
|
||
console.log(res)
|
||
}
|
||
|
||
}).catch(err => {
|
||
console.log(err)
|
||
})
|
||
},
|
||
navBack() {
|
||
uni.navigateBack(1);
|
||
},
|
||
goAgreement(e) {
|
||
uni.navigateTo({
|
||
url: '/pagesA/agreement/agreement?id=' + e
|
||
})
|
||
},
|
||
getAllVideoNum() {
|
||
this.$httpRequest({
|
||
url: "/api/video/videoCount",
|
||
method: "GET"
|
||
}).then(res => {
|
||
this.allVideoNum = res.data.count
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.pagesContent {
|
||
height: 100vh;
|
||
background-color: #fff;
|
||
|
||
}
|
||
|
||
.pagesHeader {
|
||
background-image: url('https://wx.yaohe.hnjrdzkj.xyz/static/wechat/static/chongz.png');
|
||
background-size: 750rpx 360rpx;
|
||
background-repeat: no-repeat;
|
||
width: 750rpx;
|
||
height: 360rpx;
|
||
padding-top: 58rpx;
|
||
|
||
}
|
||
|
||
.navBack {
|
||
font-size: 32rpx;
|
||
color: #ffffff;
|
||
font-weight: 600;
|
||
text-align: center;
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.backIcon {
|
||
position: absolute;
|
||
left: 16rpx;
|
||
top: 0rpx;
|
||
}
|
||
|
||
|
||
.explain {
|
||
padding: 0 26rpx;
|
||
}
|
||
|
||
.explainTitle {
|
||
line-height: 40rpx;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
|
||
|
||
.vipCarBox {
|
||
|
||
align-items: center;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
flex-direction: row;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.vipCarItem {
|
||
width: 336rpx;
|
||
height: 200rpx;
|
||
border-radius: 12rpx;
|
||
margin-bottom: 24rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.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%;
|
||
color: ;
|
||
}
|
||
|
||
.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(90deg, #FFBC48 0%, #FF5D41 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: #333333;
|
||
}
|
||
|
||
.vipCarFourth .depict {
|
||
color: #333333;
|
||
}
|
||
|
||
.vipCarThird .money {
|
||
color: #333333;
|
||
}
|
||
|
||
.beanBtn {
|
||
text-align: center;
|
||
font-weight: 500;
|
||
font-size: 22rpx;
|
||
color: #333333;
|
||
line-height: 48rpx;
|
||
padding: 0 16rpx;
|
||
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;
|
||
}
|
||
|
||
/*新版*/
|
||
|
||
.VipCardContent {
|
||
padding: 40rpx 0;
|
||
}
|
||
|
||
.vipCarBoxSecond .vipCarItem {
|
||
background-color: #ffffff;
|
||
border-radius: 12rpx;
|
||
|
||
}
|
||
|
||
.vipCarBoxSecond .border {
|
||
border: 6rpx solid #dc3a35;
|
||
background-color: #f6e2af;
|
||
}
|
||
|
||
.rightIcon {
|
||
position: absolute;
|
||
right: 0;
|
||
top: -20rpx;
|
||
line-height: 40rpx;
|
||
color: #ffffff;
|
||
font-size: 30rpx;
|
||
padding: 0 15rpx;
|
||
border-radius: 0 12rpx 0 12rpx;
|
||
background-color: #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;
|
||
font-size: 28rpx;
|
||
height: 30rpx;
|
||
}
|
||
|
||
.vipCarFooter {
|
||
line-height: 45rpx;
|
||
background-color: #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-color: #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);
|
||
}
|
||
|
||
.agreement {
|
||
position: fixed;
|
||
bottom: 10px;
|
||
width: 100%;
|
||
line-height: 40rpx;
|
||
font-size: 28rpx;
|
||
margin-left: 36rpx;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.agreementItem {
|
||
color: #0a5ab6;
|
||
padding: 0 10rpx;
|
||
font-size: 28rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.explainItem {
|
||
line-height: 40rpx;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
.btn-big {
|
||
background-color: #07c160;
|
||
color: #FFFFFF;
|
||
}
|
||
</style> |