[抖火申请支付]
This commit is contained in:
550
pages/sheet/pay.vue
Normal file
550
pages/sheet/pay.vue
Normal file
@@ -0,0 +1,550 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="paymentTop">
|
||||
<view class="paymentTop-name">
|
||||
需支付金额（元）
|
||||
</view>
|
||||
<view class="paymentTop-price">
|
||||
<text>￥</text>{{applyData.price}}
|
||||
</view>
|
||||
<view class="paymentTop-text">
|
||||
与人方便,与己方便,珍惜时间,请先付款
|
||||
</view>
|
||||
</view>
|
||||
<view class="paymentList">
|
||||
<view class="paymentList-label" v-if="couponData" @click="payType('coupon')">
|
||||
<view class="paymentList-left">
|
||||
<image class="paymentList-icon" src="@/static/imgs/payCoupon.png" mode="widthFix"></image>抵值券
|
||||
</view>
|
||||
<view class="paymentList-right" @click="couponState = true">
|
||||
<view class="paymentList-tips" v-if="Payment == 'wechat'">
|
||||
使用优惠券
|
||||
</view>
|
||||
<view class="paymentList-price" v-else>{{couponData.price}}元</view>
|
||||
<image class="paymentList-img" :src="Payment == 'coupon' ? '/static/imgs/payCheck_active.png' : '/static/imgs/payCheck.png'" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="paymentList-label" @click="payType('wechat')">
|
||||
<view class="paymentList-left">
|
||||
<image class="paymentList-icon" src="@/static/imgs/payWechat.png" mode="widthFix"></image>微信支付
|
||||
</view>
|
||||
<view class="paymentList-right">
|
||||
<image class="paymentList-img" :src="Payment == 'wechat' ? '/static/imgs/payCheck_active.png' : '/static/imgs/payCheck.png'" mode="widthFix"></image>
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="paymentList-label" @click="payType('umsMp')">
|
||||
<view class="paymentList-left">
|
||||
<image class="paymentList-icon" src="@/static/imgs/minPay.png" mode="widthFix"></image>微信支付（银联商务）
|
||||
</view>
|
||||
<view class="paymentList-right">
|
||||
<image class="paymentList-img" :src="Payment == 'umsMp' ? '/static/imgs/payCheck_active.png' : '/static/imgs/payCheck.png'" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="paymentList-label" @click="payType('umsAli')">
|
||||
<view class="paymentList-left">
|
||||
<image class="paymentList-icon" src="@/static/imgs/aliPay.png" mode="widthFix"></image>支付宝（银联商务）
|
||||
</view>
|
||||
<view class="paymentList-right">
|
||||
<image class="paymentList-img" :src="Payment == 'umsAli' ? '/static/imgs/payCheck_active.png' : '/static/imgs/payCheck.png'" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="paymentBtn" v-if="Payment != 'umsMp'">
|
||||
<button class="paymentBtn-go" type="default" @click="payClick" :disabled="disabled">立即支付</button>
|
||||
</view>
|
||||
<view class="paymentBtn" v-else>
|
||||
<wx-open-launch-weapp
|
||||
username="gh_918c81628d6f"
|
||||
:path="'pages/pay/pay?type=h5&dev=1&trade_id=' + tradeId + '&token=' + token"
|
||||
>
|
||||
<script type="text/wxtag-template">
|
||||
<style>
|
||||
.gobtn {
|
||||
width: 280px;
|
||||
background-color: #da2b56;
|
||||
color: #ffffff;
|
||||
border-radius: 5px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
font-size: 18px;
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
<button type="default" class="gobtn">打开小程序收银台</button>
|
||||
</script>
|
||||
</wx-open-launch-weapp>
|
||||
</view>
|
||||
<!-- 抵值券选择 -->
|
||||
<view class="couponPop" v-if="couponState"></view>
|
||||
<view class="couponEject" :class="{active: couponState}">
|
||||
<image class="couponClose" src="@/static/imgs/payClose.png" mode="widthFix" @click="couponState = false"></image>
|
||||
<view class="couponEject-title">
|
||||
抵值券选择
|
||||
</view>
|
||||
<scroll-view class="couponEject-list" scroll-y="true" show-scrollbar="false">
|
||||
<view class="couponEject-label" v-for="(item, index) in couponArr" :key="index" @click="selectClick(index)">
|
||||
<image class="couponSelect" :src="!item.state ? '/static/imgs/paySelect.png' : '/static/imgs/paySelect_active.png'" mode="aspectFill"></image>
|
||||
<view class="couponEject-top">
|
||||
<view class="couponEject-number">
|
||||
{{item.price}}<text>元</text>
|
||||
</view>
|
||||
<view class="couponEject-head">
|
||||
{{item.title}}
|
||||
<view class="couponEject-clue">{{item.price_text}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="couponEject-bottom">
|
||||
<view class="couponEject-tips">
|
||||
抵值券
|
||||
</view>
|
||||
<view class="couponEject-time">
|
||||
{{item.time.interval}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="couponBtn" @click="couponGo">
|
||||
确定
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VConsole from 'vconsole';
|
||||
import { Apply, Wechat } from '@/apis/interfaces/index'
|
||||
import { ums, umsState } from '@/apis/interfaces/pay'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
token : '', // 登录token
|
||||
tradeId : '', // 微信支付id
|
||||
Payment : '', // 支付类型
|
||||
applyData : '', // 支付数据
|
||||
orderNo : '', // 订单
|
||||
couponState : false, // 优惠券弹出层
|
||||
couponData : '', // 优惠券
|
||||
couponArr : [], // 优惠券列表
|
||||
disabled : false, // 按钮状态
|
||||
getState : false, // 获取订单状态
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
if(this.getState && this.tradeId != ''){
|
||||
this.getUmsState(this.tradeId)
|
||||
}
|
||||
this.token = this.$store.getters.getToken
|
||||
this.applyInfo();
|
||||
},
|
||||
methods: {
|
||||
// 查询支付状态
|
||||
getUmsState(tradeId){
|
||||
uni.showLoading({
|
||||
title: '查询支付结果...',
|
||||
mask : true
|
||||
})
|
||||
let outTime;
|
||||
let resNumb = 0;
|
||||
outTime = setInterval(() => {
|
||||
if(resNumb >= 3){
|
||||
clearInterval(outTime)
|
||||
return
|
||||
}
|
||||
umsState(tradeId).then(res => {
|
||||
resNumb++
|
||||
if(res.state === 'success'){
|
||||
clearInterval(outTime)
|
||||
uni.hideLoading()
|
||||
this.$Router.replace({name: 'sheetPoint'})
|
||||
}
|
||||
}).catch(err => {
|
||||
clearInterval(outTime)
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
}, 2000)
|
||||
},
|
||||
// 获取9.9预约
|
||||
applyInfo() {
|
||||
Apply(this.$Route.query.id).then(res => {
|
||||
let newCoupons = res.coupons
|
||||
newCoupons.forEach((item, index) => {
|
||||
item.state = false
|
||||
})
|
||||
this.couponData = res.coupon
|
||||
this.couponArr = newCoupons
|
||||
this.applyData = res.apply
|
||||
this.orderNo = res.apply.order_no
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon: "none"
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 选择支付方式
|
||||
payType(type) {
|
||||
if(this.Payment === type) return
|
||||
this.Payment = type
|
||||
if(type === 'umsMp'){
|
||||
uni.showLoading({
|
||||
title: '加载中...',
|
||||
mask : true
|
||||
})
|
||||
this.UMSPay()
|
||||
}
|
||||
},
|
||||
// 微信支付
|
||||
payClick() {
|
||||
if(this.Payment === '') {
|
||||
uni.showToast({
|
||||
title: '请选择支付方式',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
if(this.Payment === 'umsMp' || this.Payment === 'umsAli'){
|
||||
this.UMSPay()
|
||||
return
|
||||
}
|
||||
let newCouponid
|
||||
if(this.Payment == 'coupon') {
|
||||
newCouponid = this.couponData.coupon_grant_id
|
||||
} else {
|
||||
newCouponid = ''
|
||||
}
|
||||
Wechat(this.orderNo, {
|
||||
coupon_grant_id : newCouponid,
|
||||
openid : this.$store.getters.getOpenId
|
||||
}).then(res => {
|
||||
// 直接跳到列表
|
||||
if(res.canPay == false) {
|
||||
this.disabled = true
|
||||
uni.showToast({
|
||||
title: '支付成功',
|
||||
icon: "none"
|
||||
})
|
||||
setTimeout(()=>{
|
||||
this.$Router.replace({name: 'User'})
|
||||
},3000)
|
||||
return
|
||||
}
|
||||
// 跳支付
|
||||
let wxConfig = JSON.parse(res.wechat)
|
||||
this.$wx.chooseWXPay({
|
||||
timestamp: wxConfig.timeStamp,
|
||||
nonceStr: wxConfig.nonceStr,
|
||||
package: wxConfig.package,
|
||||
signType: wxConfig.signType,
|
||||
paySign: wxConfig.paySign,
|
||||
success: payRes => {
|
||||
uni.showToast({
|
||||
title: '支付成功',
|
||||
icon: "none"
|
||||
})
|
||||
this.disabled = true
|
||||
// 先跳支付成功
|
||||
setTimeout(()=>{
|
||||
this.$Router.replace({name: 'sheetPoint'})
|
||||
},2000)
|
||||
},
|
||||
cancel: payCancel => {
|
||||
// 跳到个人中心
|
||||
this.$Router.replace({name: 'User'})
|
||||
this.disabled = true
|
||||
},
|
||||
fail: payfail => {
|
||||
uni.showToast({
|
||||
title: '取消支付',
|
||||
icon: 'none'
|
||||
})
|
||||
this.disabled = true
|
||||
setTimeout(()=>{
|
||||
this.$Router.replace({name: 'User'})
|
||||
},1000)
|
||||
}
|
||||
});
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon: "none"
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 新银联商务支付
|
||||
UMSPay(){
|
||||
let payType = this.Payment == 'umsMp' ? 'mp' : 'mp_alipay'
|
||||
ums(this.orderNo, {type: payType}).then(res => {
|
||||
this.getState = true
|
||||
switch (payType){
|
||||
case 'mp':
|
||||
this.tradeId = res.trade_id
|
||||
break;
|
||||
case 'mp_alipay':
|
||||
this.tradeId = res.trade_id
|
||||
window.location.href = res.alipay
|
||||
break;
|
||||
}
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 优惠券-点击
|
||||
selectClick(index) {
|
||||
var listData = this.couponArr
|
||||
var helpFlag = this.couponArr[index].state
|
||||
listData.forEach((item) => {
|
||||
item.state = false
|
||||
})
|
||||
listData[index].state = !helpFlag
|
||||
this.couponArr = listData
|
||||
this.couponIndex = index
|
||||
},
|
||||
|
||||
// 选择优惠券
|
||||
couponGo() {
|
||||
if(this.couponArr[this.couponIndex]) {
|
||||
this.couponData = this.couponArr[this.couponIndex]
|
||||
this.couponState = false
|
||||
return
|
||||
}
|
||||
uni.showToast({
|
||||
title: '请选择抵值券',
|
||||
icon: "none"
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content{
|
||||
background: #f4f4f4;
|
||||
height: 100vh;
|
||||
// height: calc(100vh - 44px);
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.paymentTop {
|
||||
padding: $padding * 4 $padding;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
color: #666666;
|
||||
.paymentTop-name {
|
||||
padding-left: $padding;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.paymentTop-price {
|
||||
color: $mian-color;
|
||||
font-size: $title-size + 40;
|
||||
font-weight: 600;
|
||||
margin: $margin - 10 0;
|
||||
text {
|
||||
font-size: $title-size + 10;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.paymentList {
|
||||
padding: 0 $padding;
|
||||
box-sizing: border-box;
|
||||
.paymentList-label {
|
||||
background-color: #ffffff;
|
||||
border-radius: $radius;
|
||||
padding: $padding + 10 $padding;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: $margin + 10;
|
||||
display: flex;
|
||||
.paymentList-left {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
line-height: 40rpx;
|
||||
.paymentList-icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-right: $margin - 10;
|
||||
}
|
||||
}
|
||||
.paymentList-right {
|
||||
display: flex;
|
||||
.paymentList-price {
|
||||
color: $mian-color;
|
||||
font-weight: 600;
|
||||
}
|
||||
.paymentList-tips {
|
||||
background-image: linear-gradient(to left, #FF4646, #FF7676);
|
||||
height: 44rpx;
|
||||
line-height: 44rpx;
|
||||
font-size: $title-size-sm;
|
||||
color: #ffffff;
|
||||
opacity: .9;
|
||||
border-radius: $radius * 2;
|
||||
padding: 0 10rpx;
|
||||
}
|
||||
.paymentList-arrow {
|
||||
width: 14rpx;
|
||||
margin: 10rpx 0 0 20rpx;
|
||||
}
|
||||
.paymentList-img {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-top: 4rpx;
|
||||
margin-left: $margin;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.paymentBtn {
|
||||
text-align: center;
|
||||
padding: 0 $padding;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
.paymentBtn-go {
|
||||
position: relative;
|
||||
width: 280px;
|
||||
background-color: #da2b56;
|
||||
color: #ffffff;
|
||||
border-radius: 5px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
font-size: 18px;
|
||||
&[disabled] {
|
||||
background-color: #eba5a5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 弹出层
|
||||
.couponPop {
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
.couponEject {
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 70vh;
|
||||
left: 0;
|
||||
bottom: -1000%;
|
||||
background-color: #ffffff;
|
||||
z-index: 12;
|
||||
padding: $padding $padding + 20;
|
||||
box-sizing: border-box;
|
||||
border-radius: $radius + 10 $radius + 10 0 0;
|
||||
transition: .2s;
|
||||
&.active {
|
||||
bottom: 0;
|
||||
}
|
||||
.couponClose {
|
||||
position: absolute;
|
||||
right: $margin + 10;
|
||||
top: $margin + 10;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
.couponEject-title {
|
||||
text-align: center;
|
||||
font-size: $title-size + 4;
|
||||
height: 60rpx;
|
||||
}
|
||||
.couponEject-list {
|
||||
height: calc(100% - 200rpx);
|
||||
overflow-y: scroll;
|
||||
overflow: hidden;
|
||||
margin-top: $margin;
|
||||
.couponEject-label {
|
||||
background-color: #FFF5EA;
|
||||
border-radius: $radius;
|
||||
margin-bottom: $margin;
|
||||
position: relative;
|
||||
&::after,
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
bottom: 80rpx;
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
&::after {
|
||||
left: -15rpx;
|
||||
}
|
||||
&::before {
|
||||
right: -15rpx;
|
||||
}
|
||||
.couponSelect {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 20%;
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
.couponEject-top,
|
||||
.couponEject-bottom {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.couponEject-top {
|
||||
padding: $padding 0;
|
||||
box-sizing: border-box;
|
||||
.couponEject-number {
|
||||
width: 220rpx;
|
||||
text-align: center;
|
||||
font-size: $title-size + 25;
|
||||
text {
|
||||
font-size: $title-size-m;
|
||||
padding-left: 5rpx;
|
||||
}
|
||||
}
|
||||
.couponEject-head {
|
||||
width: calc(100% - 220rpx);
|
||||
padding-left: $padding + 10;
|
||||
box-sizing: border-box;
|
||||
border-left: 2rpx dashed #fffdf7;
|
||||
.couponEject-clue {
|
||||
color: #FFA031;
|
||||
font-size: $title-size-m;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.couponEject-bottom {
|
||||
padding: $padding - 10 $padding;
|
||||
box-sizing: border-box;
|
||||
font-size: $title-size-m;
|
||||
color: #e17900;
|
||||
border-top: 2rpx dashed #fffdf7;
|
||||
.couponEject-tips {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.couponBtn {
|
||||
height: 94rpx;
|
||||
line-height: 94rpx;
|
||||
margin: 30rpx 0;
|
||||
background-color: #FFA031;
|
||||
color: #ffffff;
|
||||
border-radius: $radius * 4;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user