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