758 lines
18 KiB
Vue
758 lines
18 KiB
Vue
<template>
|
||
<view style="padding: 20rpx 0;">
|
||
<!-- 视频简介 -->
|
||
<view class="info flex align-center justify-center">
|
||
<view class="info-box flex align-center">
|
||
<view class="info-box-l">
|
||
<image :src="titleImg" mode="aspectFill"></image>
|
||
</view>
|
||
<view class="info-box-r">
|
||
<view class="info-box-r-t">
|
||
{{type==1?name:courseDetailsName}}
|
||
</view>
|
||
<view class="info-box-r-b flex align-center" v-if="type == 1">
|
||
全集价格：
|
||
<view class="flex align-center">
|
||
<image style="width: 38rpx;height: 38rpx;margin-right: 10rpx;"
|
||
src="../../static/images/me/jindou.png" mode="">
|
||
</image>
|
||
{{parsePrice(zongPrice)}}
|
||
</view>
|
||
</view>
|
||
<view class="info-box-r-b flex align-center" v-else>
|
||
单集价格：
|
||
<view class="flex align-center">
|
||
<image style="width: 38rpx;height: 38rpx;margin-right: 10rpx;"
|
||
src="../../static/images/me/jindou.png" mode="">
|
||
</image>
|
||
{{parsePrice(price)}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 价格提示 -->
|
||
<view class="price flex align-center justify-center">
|
||
<view class="price-box flex align-center justify-between">
|
||
<view class="price-box-title">
|
||
需支付
|
||
</view>
|
||
<view class="price-box-price flex align-center" v-if="type==1">
|
||
<image style="width: 38rpx;height: 38rpx;margin-right: 10rpx;"
|
||
src="../../static/images/me/jindou.png" mode="">
|
||
</image>
|
||
{{parsePrice(zongPrice)}}
|
||
</view>
|
||
<view class="price-box-price flex align-center" v-else>
|
||
<image style="width: 38rpx;height: 38rpx;margin-right: 10rpx;"
|
||
src="../../static/images/me/jindou.png" mode="">
|
||
</image>
|
||
{{parsePrice(price)}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 支付方式 -->
|
||
<view v-if="payList.length>0" class="pay flex align-center justify-center">
|
||
<view class="pay-box">
|
||
<view class="pay-box-title">
|
||
支付方式
|
||
</view>
|
||
<u-radio-group style="width: 100%;" size="44" v-model="payAway">
|
||
<view class="pay-box-item flex align-center justify-between" v-for="(item,index) in payList"
|
||
:key="index">
|
||
<view class="pay-box-item-l flex align-center">
|
||
<image :src="item.imgurl" mode=""></image>
|
||
{{item.name}}
|
||
</view>
|
||
<view class="pay-box-item-r">
|
||
<u-radio active-color="5074FF" :name="item.payAway"></u-radio>
|
||
</view>
|
||
</view>
|
||
</u-radio-group>
|
||
</view>
|
||
</view>
|
||
<view class="illustrate flex align-center justify-center">
|
||
<view class="illustrate-box flex align-center">
|
||
<u-checkbox v-model="checked" :size="40" shape="circle"></u-checkbox>
|
||
<text @click="checked = !checked">我已经阅读并同意</text>
|
||
<view @click="goXieyi()" class="illustrate-box-txt">
|
||
《付费须知说明》
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 支付 -->
|
||
<view class="submit flex align-center justify-center">
|
||
<view class="submit-box flex align-center justify-center" @click="getOrderInfo()">
|
||
支付 ¥{{type==1?parsePrice(zongPrice):parsePrice(price)}}
|
||
</view>
|
||
</view>
|
||
<u-toast ref="uToast" />
|
||
<!-- 抖音im客服 -->
|
||
<ttMsg />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import ttMsg from '../../components/ttMsg/ttMsg.vue'
|
||
export default {
|
||
components: {
|
||
ttMsg
|
||
},
|
||
data() {
|
||
return {
|
||
courseId: '', //整部视频id
|
||
courseDetailsId: '', //单集id
|
||
titleImg: '', //图片
|
||
courseDetailsName: '', //名称
|
||
price: 0, //单价
|
||
zongPrice: 0, //总价
|
||
type: 1, //类型：1:整部 2:单部
|
||
name: '', //全集名称
|
||
payList: [],
|
||
payAway: 1,
|
||
checked: false
|
||
};
|
||
},
|
||
onLoad(option) {
|
||
// #ifdef APP
|
||
if (plus.os.name.toLowerCase() === 'android') {
|
||
this.payList = [{
|
||
imgurl: '/static/images/pay/weixin.png',
|
||
name: '微信支付',
|
||
payAway: 1
|
||
},
|
||
{
|
||
imgurl: '/static/images/pay/zhifubao.png',
|
||
name: '支付宝支付',
|
||
payAway: 2
|
||
},
|
||
{
|
||
imgurl: '/static/images/pay/lingqian.png',
|
||
name: '金豆支付',
|
||
payAway: 3
|
||
}
|
||
]
|
||
this.payAway = 1
|
||
} else {
|
||
let checkIosPay = this.$queue.getData('checkIosPay');
|
||
if (checkIosPay === '是') {
|
||
this.payList = [{
|
||
imgurl: '/static/images/pay/lingqian.png',
|
||
name: '金豆支付',
|
||
payAway: 3
|
||
}]
|
||
this.payAway = 3
|
||
} else {
|
||
this.payList = [{
|
||
imgurl: '/static/images/pay/weixin.png',
|
||
name: '微信支付',
|
||
payAway: 1
|
||
},
|
||
{
|
||
imgurl: '/static/images/pay/zhifubao.png',
|
||
name: '支付宝支付',
|
||
payAway: 2
|
||
},
|
||
{
|
||
imgurl: '/static/images/pay/lingqian.png',
|
||
name: '金豆支付',
|
||
payAway: 3
|
||
}
|
||
]
|
||
this.payAway = 1
|
||
}
|
||
}
|
||
// #endif
|
||
// #ifdef MP-WEIXIN
|
||
this.payList = [{
|
||
imgurl: '/static/images/pay/lingqian.png',
|
||
name: '金豆支付',
|
||
payAway: 3
|
||
}]
|
||
this.payAway = 3
|
||
// #endif
|
||
// #ifdef H5
|
||
let ua = navigator.userAgent.toLowerCase();
|
||
if (ua.indexOf('micromessenger') !== -1) {
|
||
this.payList = [{
|
||
imgurl: '/static/images/pay/weixin.png',
|
||
name: '微信支付',
|
||
payAway: 1
|
||
},
|
||
{
|
||
imgurl: '/static/images/pay/lingqian.png',
|
||
name: '金豆支付',
|
||
payAway: 3
|
||
}
|
||
]
|
||
this.payAway = 1
|
||
} else {
|
||
this.payList = [{
|
||
imgurl: '/static/images/pay/zhifubao.png',
|
||
name: '支付宝支付',
|
||
payAway: 2
|
||
},
|
||
{
|
||
imgurl: '/static/images/pay/lingqian.png',
|
||
name: '金豆支付',
|
||
payAway: 3
|
||
}
|
||
]
|
||
this.payAway = 2
|
||
}
|
||
// #endif
|
||
// #ifdef MP-TOUTIAO
|
||
this.payList = [{
|
||
imgurl: '/static/images/pay/zhifubao.png',
|
||
name: '抖音支付',
|
||
payAway: 4
|
||
},
|
||
{
|
||
imgurl: '/static/images/pay/lingqian.png',
|
||
name: '金豆支付',
|
||
payAway: 3
|
||
}
|
||
]
|
||
this.payAway = 4
|
||
// #endif
|
||
// #ifdef MP-KUAISHOU
|
||
const osName = uni.getSystemInfoSync().osName;
|
||
if (osName != 'ios') { //安卓
|
||
this.payList = [{
|
||
imgurl: '/static/images/pay/zhifubao.png',
|
||
name: '快手支付',
|
||
payAway: 5
|
||
},
|
||
{
|
||
imgurl: '/static/images/pay/lingqian.png',
|
||
name: '金豆支付',
|
||
payAway: 3
|
||
}
|
||
]
|
||
this.payAway = 5
|
||
} else {
|
||
this.payList = [{
|
||
imgurl: '/static/images/pay/lingqian.png',
|
||
name: '金豆支付',
|
||
payAway: 3
|
||
}]
|
||
this.payAway = 3
|
||
}
|
||
// #endif
|
||
if (option.info) {
|
||
let info = JSON.parse(decodeURIComponent(option.info))
|
||
this.courseId = info.courseId
|
||
this.courseDetailsId = info.courseDetailsId
|
||
this.titleImg = info.titleImg
|
||
this.courseDetailsName = info.courseDetailsName
|
||
this.price = info.price
|
||
this.zongPrice = info.zongPrice
|
||
this.name = info.name
|
||
this.type = info.type
|
||
}
|
||
},
|
||
methods: {
|
||
//去付费须知说明
|
||
goXieyi() {
|
||
uni.navigateTo({
|
||
url: '/me/setting/payXieYi'
|
||
})
|
||
},
|
||
/**
|
||
* @param {Number} price
|
||
* 价格保留两位小数
|
||
*/
|
||
parsePrice(price) {
|
||
return price.toFixed(2)
|
||
},
|
||
//生成订单
|
||
getOrderInfo() {
|
||
if (this.checked == false) {
|
||
this.$refs.uToast.show({
|
||
title: '请阅读并同意《付费须知说明》',
|
||
duration: 1500
|
||
})
|
||
return
|
||
}
|
||
let data = {
|
||
courseId: this.courseId
|
||
}
|
||
if (this.type != 1) { //购买单集
|
||
data.courseDetailsId = this.courseDetailsId
|
||
}
|
||
this.$Request.getT('/app/order/insertCourseOrders', data).then(res => {
|
||
if (res.code == 0) {
|
||
this.payOrder(res.data.orders.ordersId)
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
|
||
|
||
},
|
||
/**
|
||
* @param {Object} orderId 订单id
|
||
*/
|
||
payOrder(orderId) {
|
||
let that = this
|
||
if (that.payAway == 4) { //抖音支付
|
||
uni.showLoading({
|
||
title: '支付中...'
|
||
})
|
||
this.$Request.postT('/app/dyPay/payVirtualAppOrder', {
|
||
orderId: orderId
|
||
}).then(res => {
|
||
if (res.code == 0) {
|
||
tt.requestOrder({
|
||
data: JSON.stringify(res.data.data), // 请勿在前端对data做任何处理
|
||
byteAuthorization: res.data
|
||
.byteAuthorization, // 请勿在前端对byteAuthorization做任何处理
|
||
success(redd) {
|
||
console.log(JSON.stringify(redd))
|
||
tt.getOrderPayment({
|
||
orderId: redd.orderId,
|
||
success(reee) {
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: '支付成功'
|
||
})
|
||
setTimeout(function() {
|
||
let data = {
|
||
flag: true
|
||
}
|
||
uni.$emit('back', data)
|
||
uni.navigateBack();
|
||
}, 1000)
|
||
},
|
||
fail(ee) {
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: '支付失败',
|
||
icon: 'none'
|
||
})
|
||
console.log(ee)
|
||
}
|
||
});
|
||
|
||
},
|
||
fail(e) {
|
||
console.log(e)
|
||
}
|
||
});
|
||
}
|
||
})
|
||
} else if (that.payAway == 5) { //快手支付
|
||
uni.showLoading({
|
||
title: '支付中...'
|
||
})
|
||
this.$Request.postT('/app/ksPay/payAppOrder', {
|
||
orderId: orderId
|
||
}).then(res => {
|
||
if (res.code == 0) {
|
||
ks.pay({
|
||
serviceId: '1', //服务类型id（固定值为‘1’）
|
||
orderInfo: res.data,
|
||
success(succ) {
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: '支付成功'
|
||
})
|
||
setTimeout(function() {
|
||
let data = {
|
||
flag: true
|
||
}
|
||
uni.$emit('back', data)
|
||
uni.navigateBack();
|
||
}, 1000)
|
||
},
|
||
fail(err) {
|
||
uni.hideLoading()
|
||
that.$refs.uToast.show({
|
||
title: '支付失败，请重试!',
|
||
duration: 1500
|
||
})
|
||
},
|
||
})
|
||
} else {
|
||
uni.hideLoading()
|
||
this.$refs.uToast.show({
|
||
title: res.msg,
|
||
duration: 1500
|
||
})
|
||
}
|
||
})
|
||
} else {
|
||
switch (this.payAway) { //1:微信支付,2:支付宝支付 3:金豆支付
|
||
case 1: //微信支付
|
||
// #ifdef MP-WEIXIN
|
||
that.$Request.postT("/app/wxPay/wxPayJsApiOrder", {
|
||
orderId: orderId,
|
||
}).then(red => {
|
||
if (red.code == 0) {
|
||
uni.requestPayment({
|
||
provider: 'wxpay',
|
||
timeStamp: red.data.timestamp,
|
||
nonceStr: red.data.noncestr,
|
||
package: red.data.package,
|
||
signType: red.data.signType,
|
||
paySign: red.data.sign,
|
||
success: function(redd) {
|
||
uni.showLoading({
|
||
title: '支付成功'
|
||
});
|
||
uni.hideLoading();
|
||
setTimeout(function() {
|
||
let data = {
|
||
flag: true
|
||
}
|
||
uni.$emit('back', data)
|
||
uni.navigateBack();
|
||
}, 1000)
|
||
},
|
||
fail: function(err) {
|
||
uni.hideLoading();
|
||
that.$queue.showToast(
|
||
'支付失败');
|
||
}
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: red.msg,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
});
|
||
// #endif
|
||
|
||
// #ifdef H5
|
||
let ua = navigator.userAgent.toLowerCase();
|
||
console.log(ua)
|
||
if (ua.indexOf('micromessenger') !== -1) {
|
||
that.$Request.postT("/app/wxPay/wxPayMpOrder", {
|
||
orderId: orderId,
|
||
}).then(red => {
|
||
if (red.code == 0) {
|
||
that.callPay(red.data);
|
||
} else {
|
||
that.isPay = true
|
||
uni.showToast({
|
||
title: red.msg,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
});
|
||
}
|
||
|
||
// #endif
|
||
|
||
// #ifdef APP-PLUS
|
||
that.$Request.postT("/app/wxPay/payAppOrder", {
|
||
orderId: orderId,
|
||
}).then(red => {
|
||
if (red.code == 0) {
|
||
console.log(red, '+++++++++++++++++++++')
|
||
that.setPayment('wxpay', JSON.stringify(red.data));
|
||
} else {
|
||
that.isPay = true
|
||
uni.showToast({
|
||
title: red.msg,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
});
|
||
// #endif
|
||
break;
|
||
case 2: //支付宝
|
||
// #ifdef H5
|
||
that.$Request.postT("/app/aliPay/payOrder", {
|
||
orderId: orderId,
|
||
classify: 2
|
||
}).then(red => {
|
||
if (red.code == 0) {
|
||
const div = document.createElement('div')
|
||
div.innerHTML = red.data //此处form就是后台返回接收到的数据
|
||
document.body.appendChild(div)
|
||
document.forms[0].submit()
|
||
} else {
|
||
uni.showToast({
|
||
title: red.msg,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
});
|
||
// #endif
|
||
// #ifdef APP-PLUS
|
||
that.$Request.postT("/app/aliPay/payOrder", {
|
||
orderId: orderId,
|
||
classify: 1
|
||
}).then(red => {
|
||
if (red.code == 0) {
|
||
that.setPayment('alipay', red.data);
|
||
} else {
|
||
uni.showToast({
|
||
title: red.msg,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
});
|
||
// #endif
|
||
break;
|
||
default: //零钱
|
||
that.$Request.postT("/app/order/payOrders", {
|
||
orderId: orderId,
|
||
}).then(res => {
|
||
if (res.code == 0) {
|
||
uni.showToast({
|
||
title: '支付成功'
|
||
})
|
||
setTimeout(function() {
|
||
let data = {
|
||
flag: true
|
||
}
|
||
uni.$emit('back', data)
|
||
uni.navigateBack();
|
||
}, 1000)
|
||
} else {
|
||
// uni.showToast({
|
||
// title: res.msg,
|
||
// icon: 'none'
|
||
// })
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '支付失败，余额不足！',
|
||
confirmText: '去充值',
|
||
complete(ret) {
|
||
if (ret.confirm) {
|
||
uni.navigateTo({
|
||
url: '/me/wallet/wallet'
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
});
|
||
break;
|
||
}
|
||
}
|
||
},
|
||
callPay: function(response) {
|
||
if (typeof WeixinJSBridge === "undefined") {
|
||
if (document.addEventListener) {
|
||
document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(response), false);
|
||
} else if (document.attachEvent) {
|
||
document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(response));
|
||
document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(response));
|
||
}
|
||
} else {
|
||
this.onBridgeReady(response);
|
||
}
|
||
},
|
||
onBridgeReady: function(response) {
|
||
let that = this;
|
||
if (!response.package) {
|
||
return;
|
||
}
|
||
WeixinJSBridge.invoke(
|
||
'getBrandWCPayRequest', {
|
||
"appId": response.appid, //公众号名称，由商户传入
|
||
"timeStamp": response.timestamp, //时间戳，自1970年以来的秒数
|
||
"nonceStr": response.noncestr, //随机串
|
||
"package": response.package,
|
||
"signType": response.signType, //微信签名方式：
|
||
"paySign": response.sign //微信签名
|
||
},
|
||
function(res) {
|
||
if (res.err_msg === "get_brand_wcpay_request:ok") {
|
||
// 使用以上方式判断前端返回,微信团队郑重提示：
|
||
//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
|
||
uni.removeStorageSync('EditAddress')
|
||
uni.showLoading({
|
||
title: '支付成功'
|
||
});
|
||
uni.hideLoading();
|
||
setTimeout(function() {
|
||
let data = {
|
||
flag: true
|
||
}
|
||
uni.$emit('back', data)
|
||
uni.navigateBack();
|
||
}, 1000)
|
||
} else {
|
||
uni.hideLoading();
|
||
}
|
||
WeixinJSBridge.log(response.err_msg);
|
||
}
|
||
);
|
||
},
|
||
setPayment(name, order) {
|
||
let that = this;
|
||
uni.requestPayment({
|
||
provider: name,
|
||
orderInfo: order, //微信、支付宝订单数据
|
||
success: function(res) {
|
||
uni.showLoading({
|
||
title: '支付成功'
|
||
});
|
||
uni.hideLoading();
|
||
setTimeout(function() {
|
||
let data = {
|
||
flag: true
|
||
}
|
||
uni.$emit('back', data)
|
||
uni.navigateBack();
|
||
}, 1000)
|
||
},
|
||
fail: function(err) {
|
||
uni.hideLoading();
|
||
console.log(err, 12)
|
||
}
|
||
});
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
/deep/.u-radio {
|
||
display: block !important;
|
||
}
|
||
|
||
.illustrate {
|
||
width: 100%;
|
||
margin: 30rpx 0;
|
||
|
||
.illustrate-box {
|
||
width: 686rpx;
|
||
}
|
||
|
||
.illustrate-box-txt {
|
||
color: #5173F8;
|
||
}
|
||
|
||
}
|
||
|
||
/deep/.u-radio__label {
|
||
display: none !important;
|
||
}
|
||
|
||
.info {
|
||
width: 100%;
|
||
height: auto;
|
||
|
||
.info-box {
|
||
width: 686rpx;
|
||
height: 100%;
|
||
border-radius: 24rpx;
|
||
padding: 30rpx;
|
||
background-color: #ffffff;
|
||
}
|
||
|
||
.info-box-l {
|
||
width: 200rpx;
|
||
height: 150rpx;
|
||
border-radius: 8rpx;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 8rpx;
|
||
}
|
||
}
|
||
|
||
.info-box-r {
|
||
margin-left: 30rpx;
|
||
|
||
.info-box-r-t {
|
||
font-weight: bold;
|
||
}
|
||
|
||
.info-box-r-b {
|
||
margin-top: 20rpx;
|
||
color: #5074FF;
|
||
|
||
text {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.price {
|
||
width: 100%;
|
||
height: auto;
|
||
margin-top: 30rpx;
|
||
|
||
.price-box {
|
||
width: 686rpx;
|
||
height: 100%;
|
||
background-color: #ffffff;
|
||
border-radius: 24rpx;
|
||
padding: 30rpx;
|
||
}
|
||
|
||
.price-box-price {
|
||
color: #5074FF;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.pay {
|
||
width: 100%;
|
||
height: auto;
|
||
margin-top: 30rpx;
|
||
|
||
.pay-box {
|
||
width: 686rpx;
|
||
height: 100%;
|
||
background-color: #ffffff;
|
||
border-radius: 24rpx;
|
||
padding: 30rpx;
|
||
}
|
||
|
||
.pay-box-title {
|
||
width: 100%;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
|
||
}
|
||
|
||
.pay-box-item {
|
||
width: 100%;
|
||
margin-top: 40rpx;
|
||
|
||
.pay-box-item-l {
|
||
font-weight: 500;
|
||
|
||
image {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
margin-right: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.submit {
|
||
width: 100%;
|
||
height: auto;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
background-color: #ffffff;
|
||
padding: 20rpx 0;
|
||
|
||
.submit-box {
|
||
width: 686rpx;
|
||
height: 88rpx;
|
||
border-radius: 40rpx;
|
||
background-color: #5074FF;
|
||
color: #ffffff;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
</style> |