709 lines
30 KiB
Vue
709 lines
30 KiB
Vue
<template>
|
||
<view>
|
||
<view class="cashierTips">
|
||
<image src="/static/img/cashierTips_icon.png" mode="aspectFill"></image>注：推荐使用沃支付，可在享优惠！
|
||
</view>
|
||
<view class="cashierCont">
|
||
<view class="cashierCont-title">
|
||
<text>支付类型</text>线上支付
|
||
</view>
|
||
<view class="cashierCont-price">
|
||
<block v-if="this.defaultType == 'unicom'">
|
||
<view class="cashierCont-price-title">
|
||
中奖用户0元支付
|
||
</view>
|
||
<view class="cashierCont-price-title">
|
||
具体支付金额以页面显示为准
|
||
</view>
|
||
</block>
|
||
<block v-else>
|
||
<view class="cashierCont-price-title">
|
||
付款金额
|
||
</view>
|
||
<view class="cashierCont-price-number">
|
||
￥{{ defaultPrice }}
|
||
</view>
|
||
</block>
|
||
</view>
|
||
|
||
<view class="cashierCont-pay">
|
||
<view class="cashierCont-pay-title">
|
||
付款方式<text>*</text>
|
||
</view>
|
||
<view class="cashierCont-pay-way">
|
||
<radio-group @change="radioChange" v-if="this.defaultType == 'unicom'">
|
||
<view class="cashierCont-way-label cashierCont-way-unicom" :class="{active : current == 1}">
|
||
<view class="payContList-label-name">
|
||
<image class="payContList-label-img" src="/static/img/wqb.jpg"></image>
|
||
<text>沃支付支付</text>
|
||
</view>
|
||
<radio class="radio" value="1" checked></radio>
|
||
</view>
|
||
</radio-group>
|
||
<radio-group @change="radioChange" v-else>
|
||
<view class="cashierCont-way-label" :class="{active : current == 1}">
|
||
<view class="payContList-label-name">
|
||
<image class="payContList-label-img" src="/static/img/wqb.jpg"></image>
|
||
<text>沃支付支付</text>
|
||
</view>
|
||
<radio class="radio" value="1" checked></radio>
|
||
</view>
|
||
<view class="cashierCont-way-label" :class="{active : current == 2}" v-if="this.defaultType != 'unicom'">
|
||
<view class="payContList-label-name">
|
||
<image class="payContList-label-img" src="/static/img/wx.jpg"></image>
|
||
<text>微信支付</text>
|
||
</view>
|
||
<radio class="radio" value="2"></radio>
|
||
</view>
|
||
</radio-group>
|
||
</view>
|
||
<button class="payBtn" @tap="submitPay" :disabled="disabledOk">立即支付</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { getAuthUrl, wpayH5Info, h5Pay } from '@/apis/interfaces/rights'
|
||
const jweixin = require('jweixin-module'); //获取微信支付
|
||
export default {
|
||
data() {
|
||
return {
|
||
defaultPrice : '', //支付金额
|
||
disabledOk : false, //支付按钮状态
|
||
current : 1, //支付下标
|
||
defaultNo : '', //权益订单编号
|
||
defaultType : '', //购买类型 school为校园活动 oil为中石油活动 default为洗车券+权益+周五福利 giftPEnv为月兑活动
|
||
activityType : '', //活动类型 welfare为周五福利日 right为权益
|
||
defaultDeliver : '' //提交方式 0为快递 1为自提
|
||
}
|
||
},
|
||
|
||
// 生命周期函数--监听页面加载
|
||
onLoad(options) {
|
||
// 判断是否微信授权登录过 只有外部游览器才用到（支付需要授权微信环境）
|
||
let status = navigator.userAgent.toLowerCase();
|
||
if (status.match(/MicroMessenger/i) == "micromessenger" && !options.code) {
|
||
let locationUrl = window.location.pathname.substr(1) + window.location.search
|
||
getAuthUrl(locationUrl).then(res=> {
|
||
window.location.href = res
|
||
})
|
||
}
|
||
this.openid = options.openid || ''
|
||
this.code = options.code || '' //用code换取oppid
|
||
|
||
// 页面跳转参数接收
|
||
this.defaultPrice = options.price
|
||
this.defaultNo = options.tradeNo
|
||
this.defaultType = options.type
|
||
this.activityType = options.activity_type
|
||
this.defaultDeliver = options.deliver
|
||
},
|
||
|
||
// 生命周期函数--监听页面显示
|
||
onShow() {
|
||
// 存储环境-月兑活动
|
||
getApp().globalData.envType = 'giftPEnv'
|
||
},
|
||
|
||
methods: {
|
||
// 支付方式选择
|
||
radioChange(e) {
|
||
this.current = e.detail.value
|
||
},
|
||
|
||
// 支付提交
|
||
submitPay() {
|
||
// this.current为1的时候为沃支付-直接跳转h5
|
||
if (this.current == 1) {
|
||
// const newUrl = "https://lifetest.ysd-bs.com/unicom/payment?trade_no=" + this.defaultNo // 测试地址
|
||
const newUrl = "https://card.ysd-bs.com/unicom/payment?trade_no=" + this.defaultNo // 正式地址
|
||
window.location.href = newUrl
|
||
}
|
||
// this.current为1的时候为微信支付
|
||
if (this.current == 2) {
|
||
// 调取微信支付
|
||
this.wechatPayment();
|
||
}
|
||
},
|
||
|
||
// 微信支付数据
|
||
wechatPayment() {
|
||
let status = navigator.userAgent.toLowerCase();
|
||
if (status.match(/MicroMessenger/i) == "micromessenger") {
|
||
// 微信浏览器-获取
|
||
this.wxBrowser();
|
||
}else {
|
||
// 普通浏览器(网址游览器)
|
||
this.outBrowser();
|
||
}
|
||
},
|
||
|
||
// 当支付环境为微信游览器情况下
|
||
wxBrowser() {
|
||
wpayH5Info({
|
||
url: location.href.split('#')[0],
|
||
list:'chooseWXPay'
|
||
}).then(wechatConfig => {
|
||
let wxConfig = JSON.parse(wechatConfig)
|
||
jweixin.config({
|
||
appId: wxConfig.appId,
|
||
debug: false,
|
||
jsApiList: wxConfig.jsApiList,
|
||
signature: wxConfig.signature,
|
||
nonceStr: wxConfig.nonceStr,
|
||
timestamp: wxConfig.timestamp
|
||
})
|
||
jweixin.ready(() => {
|
||
// activityType=right为权益 支付; activityType=welfare为周五福利日 支付
|
||
let wechaUrl = '' // 定义接口来源名称
|
||
if (this.activityType == 'welfare') wechaUrl = 'payments/welfare/wechat'// 周五福利日支付接口
|
||
if (this.activityType == 'right') wechaUrl = 'payments/wechat' //权益支付接口
|
||
h5Pay(wechaUrl, {
|
||
channel: 'h5',
|
||
trade_no: this.defaultNo,
|
||
code: this.code
|
||
}).then(wechatRes => {
|
||
let wechatPay = JSON.parse(wechatRes)
|
||
jweixin.chooseWXPay({
|
||
timestamp: wechatPay.timeStamp,
|
||
nonceStr: wechatPay.nonceStr,
|
||
package: wechatPay.package,
|
||
signType: wechatPay.signType,
|
||
paySign: wechatPay.paySign,
|
||
success: payRes => {
|
||
this.disabledOk = true
|
||
uni.showToast({
|
||
title: '支付成功',
|
||
icon : 'success'
|
||
})
|
||
|
||
// 校园活动成功跳转
|
||
if(this.defaultType == 'school') {
|
||
setTimeout(()=>{
|
||
uni.reLaunch({
|
||
url: '/pages/campus/myCoupon'
|
||
})
|
||
},3000)
|
||
}
|
||
|
||
// 中石油活动活动成功跳转
|
||
if(this.defaultType == 'oil') {
|
||
setTimeout(()=>{
|
||
uni.reLaunch({
|
||
url: '/pages/oil/myCoupon'
|
||
})
|
||
},3000)
|
||
}
|
||
|
||
// 中国联通回馈活动成功跳转
|
||
if(this.defaultType == 'unicom') {
|
||
setTimeout(()=>{
|
||
uni.reLaunch({
|
||
url: '/pages/unicom/index'
|
||
})
|
||
},3000)
|
||
}
|
||
|
||
// 月兑活动成功跳转
|
||
if(this.defaultType == 'giftPEnv') {
|
||
setTimeout(()=>{
|
||
uni.reLaunch({
|
||
url: '/pages/giftPack/index'
|
||
})
|
||
},3000)
|
||
}
|
||
|
||
// 洗车券+权益+福利成功跳转 获取
|
||
if(this.defaultType == 'default') {
|
||
this.successUrl();
|
||
}
|
||
},
|
||
cancel: () =>{
|
||
this.disabledOk = true
|
||
|
||
uni.showToast({
|
||
title: '取消支付',
|
||
icon : 'success'
|
||
})
|
||
|
||
// 校园活动失败跳转
|
||
if(this.defaultType == 'school') {
|
||
setTimeout(()=>{
|
||
uni.reLaunch({
|
||
url: '/pages/campus/index'
|
||
})
|
||
},3000)
|
||
}
|
||
|
||
// 中石油活动活动成功跳转
|
||
if(this.defaultType == 'oil') {
|
||
setTimeout(()=>{
|
||
uni.reLaunch({
|
||
url: '/pages/oil/index'
|
||
})
|
||
},3000)
|
||
}
|
||
|
||
// 月兑活动成功跳转
|
||
if(this.defaultType == 'giftPEnv') {
|
||
setTimeout(()=>{
|
||
uni.reLaunch({
|
||
url: '/pages/giftPack/index'
|
||
})
|
||
},3000)
|
||
}
|
||
|
||
// 中国联通回馈活动成功跳转
|
||
if(this.defaultType == 'unicom') {
|
||
setTimeout(()=>{
|
||
uni.reLaunch({
|
||
url: '/pages/unicom/index'
|
||
})
|
||
},3000)
|
||
}
|
||
|
||
// 洗车券+权益+福利失败跳转 获取
|
||
if(this.defaultType == 'default') {
|
||
this.failUrl();
|
||
}
|
||
}
|
||
})
|
||
})
|
||
})
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: 'none'
|
||
})
|
||
if (!err.login) {
|
||
// 跳转校园活动登录页面
|
||
if (this.defaultType == 'school') {
|
||
uni.showModal({
|
||
title: '用户登录已过期',
|
||
content: '请重新登录',
|
||
showCancel: false,
|
||
success: res => {
|
||
if (res.confirm) {
|
||
uni.reLaunch({
|
||
url: '/pages/campus/signin'
|
||
});
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
// 跳转中石油活动登录页面
|
||
if (this.defaultType == 'oil') {
|
||
uni.showModal({
|
||
title: '用户登录已过期',
|
||
content: '请重新登录',
|
||
showCancel: false,
|
||
success: res => {
|
||
if (res.confirm) {
|
||
uni.reLaunch({
|
||
url: '/pages/oil/signin'
|
||
});
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
// 月兑活动成功跳转
|
||
if(this.defaultType == 'giftPEnv') {
|
||
uni.showModal({
|
||
title: '用户登录已过期',
|
||
content: '请重新登录',
|
||
showCancel: false,
|
||
success: res => {
|
||
if (res.confirm) {
|
||
uni.reLaunch({
|
||
url: '/pages/giftPack/signin'
|
||
});
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
// 中国联通回馈活动成功跳转
|
||
if (this.defaultType == 'unicom') {
|
||
uni.showModal({
|
||
title: '用户登录已过期',
|
||
content: '请重新登录',
|
||
showCancel: false,
|
||
success: res => {
|
||
if (res.confirm) {
|
||
uni.reLaunch({
|
||
url: '/pages/unicom/signin'
|
||
});
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
// 跳转本时生活平台登录页面
|
||
if (this.defaultType == 'default') {
|
||
uni.showModal({
|
||
title: '用户登录已过期',
|
||
content: '请重新登录',
|
||
showCancel: false,
|
||
success: res => {
|
||
if (res.confirm) {
|
||
uni.reLaunch({
|
||
url: '/pages/auth/login'
|
||
});
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
// 车券+权益+福利成功跳转 数据
|
||
successUrl() {
|
||
if(this.activityType == 'welfare'){
|
||
setTimeout(()=>{
|
||
if(this.defaultDeliver == 1) {
|
||
uni.reLaunch({
|
||
url: '/pages/order/order?orderType=welfareGoods'
|
||
})
|
||
} else {
|
||
uni.reLaunch({
|
||
url: '/pages/order/order?orderType=welfare'
|
||
})
|
||
}
|
||
},3000)
|
||
}
|
||
if(this.activityType == 'right'){
|
||
setTimeout(()=>{
|
||
if(this.defaultDeliver == 1) {
|
||
uni.reLaunch({
|
||
url: '/pages/order/order?orderType=rightsCoupons'
|
||
})
|
||
} else {
|
||
uni.reLaunch({
|
||
url: '/pages/order/order?orderType=rights'
|
||
})
|
||
}
|
||
},3000)
|
||
}
|
||
},
|
||
|
||
// 车券+权益+福利失败跳转 数据
|
||
failUrl() {
|
||
if(this.activityType == 'welfare'){
|
||
setTimeout(()=>{
|
||
if(this.defaultDeliver == 1) {
|
||
uni.reLaunch({
|
||
url: '/pages/order/order?orderType=welfareGoods&stateType=unpay'
|
||
})
|
||
} else {
|
||
uni.reLaunch({
|
||
url: '/pages/order/order?orderType=welfare&stateType=unpay'
|
||
})
|
||
}
|
||
},3000)
|
||
}
|
||
if(this.activityType == 'right'){
|
||
setTimeout(()=>{
|
||
if(this.defaultDeliver == 1) {
|
||
uni.reLaunch({
|
||
url: '/pages/order/order?orderType=rightsCoupons&stateType=unpay'
|
||
})
|
||
} else {
|
||
uni.reLaunch({
|
||
url: '/pages/order/order?orderType=rights&stateType=unpay'
|
||
})
|
||
}
|
||
},3000)
|
||
}
|
||
},
|
||
|
||
// 当为外部游览器环境
|
||
outBrowser(){
|
||
wechatH5({
|
||
channel: 'mweb',
|
||
trade_no: this.defaultNo
|
||
}).then(mwebRes => {
|
||
let url = mwebRes
|
||
let newUrl = ''
|
||
|
||
// 校园活动购买
|
||
if(this.defaultType == 'school') {
|
||
newUrl = url + '&redirect_url=' + window.location.protocol + '//' + window.location.host + '/pages/campus/myCoupon'
|
||
// #ifdef H5
|
||
window.location.href = newUrl
|
||
// #endif
|
||
}
|
||
|
||
// 中石油活动购买
|
||
if(this.defaultType == 'oil') {
|
||
newUrl = url + '&redirect_url=' + window.location.protocol + '//' + window.location.host + '/pages/oil/myCoupon'
|
||
// #ifdef H5
|
||
window.location.href = newUrl
|
||
// #endif
|
||
}
|
||
|
||
// 月兑活动成功跳转
|
||
if(this.defaultType == 'giftPEnv') {
|
||
newUrl = url + '&redirect_url=' + window.location.protocol + '//' + window.location.host + '/pages/giftPack/myCoupon'
|
||
// #ifdef H5
|
||
window.location.href = newUrl
|
||
// #endif
|
||
}
|
||
|
||
// 中国联通回馈活动购买
|
||
if(this.defaultType == 'unicom') {
|
||
newUrl = url + '&redirect_url=' + window.location.protocol + '//' + window.location.host + '/pages/unicom/index'
|
||
// #ifdef H5
|
||
window.location.href = newUrl
|
||
// #endif
|
||
}
|
||
|
||
// 洗车券+权益+福利购买
|
||
if(this.defaultType == 'default') {
|
||
if (this.activityType == 'welfare') {
|
||
if (this.defaultDeliver == 1) {
|
||
newUrl = url + '&redirect_url=' + window.location.protocol + '//' + window.location.host + '/pages/order/order?orderType=welfareGoods'
|
||
// #ifdef H5
|
||
window.location.href = newUrl
|
||
// #endif
|
||
} else {
|
||
newUrl = url + '&redirect_url=' + window.location.protocol + '//' + window.location.host + '/pages/order/order?orderType=welfare'
|
||
// #ifdef H5
|
||
window.location.href = newUrl
|
||
// #endif
|
||
}
|
||
}
|
||
if (this.activityType == 'right') {
|
||
if (this.defaultDeliver == 1) {
|
||
newUrl = url + '&redirect_url=' + window.location.protocol + '//' + window.location.host + '/pages/order/order?orderType=rightsCoupons'
|
||
// #ifdef H5
|
||
window.location.href = newUrl
|
||
// #endif
|
||
} else {
|
||
newUrl = url + '&redirect_url=' + window.location.protocol + '//' + window.location.host + '/pages/order/order?orderType=rights'
|
||
// #ifdef H5
|
||
window.location.href = newUrl
|
||
// #endif
|
||
}
|
||
}
|
||
}
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: 'none'
|
||
})
|
||
|
||
// 跳转校园活动登录页面
|
||
if (this.defaultType == 'school') {
|
||
if (!err.login) {
|
||
uni.showModal({
|
||
title: '用户登录已过期',
|
||
content: '请重新登录',
|
||
showCancel: false,
|
||
success: res => {
|
||
if (res.confirm) {
|
||
uni.redirectTo({
|
||
url: '/pages/campus/signin'
|
||
});
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
|
||
// 跳转中石油活动登录页面
|
||
if (this.defaultType == 'oil') {
|
||
if (!err.login) {
|
||
uni.showModal({
|
||
title: '用户登录已过期',
|
||
content: '请重新登录',
|
||
showCancel: false,
|
||
success: res => {
|
||
if (res.confirm) {
|
||
uni.redirectTo({
|
||
url: '/pages/oil/signin'
|
||
});
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
|
||
// 月兑活动成功跳转
|
||
if(this.defaultType == 'giftPEnv') {
|
||
uni.showModal({
|
||
title: '用户登录已过期',
|
||
content: '请重新登录',
|
||
showCancel: false,
|
||
success: res => {
|
||
if (res.confirm) {
|
||
uni.reLaunch({
|
||
url: '/pages/giftPack/signin'
|
||
});
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
// 中国联通回馈活动登录页面
|
||
if (this.defaultType == 'unicom') {
|
||
if (!err.login) {
|
||
uni.showModal({
|
||
title: '用户登录已过期',
|
||
content: '请重新登录',
|
||
showCancel: false,
|
||
success: res => {
|
||
if (res.confirm) {
|
||
uni.redirectTo({
|
||
url: '/pages/unicom/signin'
|
||
});
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
|
||
// 跳转本时生活平台登录页面
|
||
if (this.defaultType == 'default') {
|
||
if (!err.login) {
|
||
uni.showModal({
|
||
title: '用户登录已过期',
|
||
content: '请重新登录',
|
||
showCancel: false,
|
||
success: res => {
|
||
if (res.confirm) {
|
||
uni.redirectTo({
|
||
url: '/pages/auth/login'
|
||
});
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
page {
|
||
background-color: #bc1d30;
|
||
padding: 40rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.cashierTips {
|
||
background-color: #FFFFFF;
|
||
font-weight: 600;
|
||
font-size: 30rpx;
|
||
border-radius: 10rpx;
|
||
margin-bottom: 40rpx;
|
||
line-height: 80rpx;
|
||
padding: 0 30rpx;
|
||
box-sizing: border-box;
|
||
color: #e69500;
|
||
display: flex;
|
||
image {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin: 24rpx 10rpx 0 0;
|
||
}
|
||
}
|
||
|
||
.cashierCont {
|
||
width: 100%;
|
||
background-color: #ffffff;
|
||
padding: 30rpx;
|
||
box-sizing: border-box;
|
||
border-radius: 20rpx;
|
||
overflow: hidden;
|
||
}
|
||
.cashierCont-title text {
|
||
color: #7e7d81;
|
||
padding-right: 30rpx;
|
||
}
|
||
|
||
.cashierCont-price {
|
||
text-align: center;
|
||
margin: 90rpx 0;
|
||
color: #bc1d30;
|
||
}
|
||
|
||
.cashierCont-price-title {
|
||
font-size: 34rpx;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.cashierCont-price-number {
|
||
font-size: 60rpx;
|
||
}
|
||
|
||
.cashierCont-pay-title {
|
||
color: #7e7d81;
|
||
margin-bottom: 40rpx;
|
||
text{
|
||
color: #bc1d30;
|
||
padding-left: 10rpx;
|
||
}
|
||
}
|
||
|
||
.cashierCont-pay-way {
|
||
height: 240rpx;
|
||
}
|
||
|
||
.cashierCont-way-label {
|
||
float: left;
|
||
border: 2rpx solid #e8e8e8;
|
||
box-sizing: border-box;
|
||
padding: 30rpx 0;
|
||
border-radius: 10rpx;
|
||
width: calc(50% - 84rpx);
|
||
text-align: center;
|
||
margin: 0 40rpx;
|
||
font-size: 30rpx;
|
||
position: relative;
|
||
&.active {
|
||
border-color: #bc1d30;
|
||
color: #bc1d30;
|
||
box-shadow: 0 10rpx 20rpx rgba(188, 29, 48 ,.3);
|
||
}
|
||
radio {
|
||
opacity: 0;
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
left: 0;
|
||
top: 0;
|
||
}
|
||
image {
|
||
width: 90rpx;
|
||
height: 90rpx;
|
||
display: block;
|
||
margin: 0 auto 20rpx;
|
||
}
|
||
}
|
||
.cashierCont-way-unicom {
|
||
width: calc(100% - 84rpx);
|
||
}
|
||
.payBtn {
|
||
background-color: #bc1d30;
|
||
color: #ffffff;
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
width: 100%;
|
||
font-size: 32rpx;
|
||
padding: 0;
|
||
border-radius: 80rpx;
|
||
margin: 80rpx 0 40rpx;
|
||
}
|
||
|
||
.payBtn[disabled] {
|
||
background: #eaeaea !important;
|
||
}
|
||
|
||
</style>
|