zhangjing/douhuo-h5
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[抖火客户端]

Browse Source
This commit is contained in:
张慢慢
2023-05-15 13:18:38 +08:00
commit d61dde8bd8
818 changed files with 142329 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

618
pages/sheet/pay.vue Normal file
View File

@@ -0,0 +1,618 @@
<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('dgwx')" >
<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 == 'dgwx' ? '/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 class="paymentList-label" @click="payType('dgAli')">
<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 == 'dgAli' ? '/static/imgs/payCheck_active.png' : '/static/imgs/payCheck.png'" mode="widthFix"></image>
</view>
</view>
</view>
<view class="paymentBtn" v-if="Payment == 'umsMp'">
<!-- web.douhuotest.douhuofalv dev=0是线上 dev=1是线下 -->
<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="paymentBtn" v-else-if="Payment == 'dgwx'">
<button type="default" class="paymentBtn-go" :disabled="disabled" @click="payChickDg">
打开小程序收银台
</button>
</view>
<view class="paymentBtn" v-else>
<button class="paymentBtn-go" type="default" @click="payClick" :disabled="disabled">立即支付</button>
</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 { Apply, Wechat } from '@/apis/interfaces/index'
import { ums, umsState, umsDg } from '@/apis/interfaces/pay'
export default {
data() {
return {
token : '', // 登录token
tradeId : '', // 微信支付id
jumpUrlDg : '', // 抖巩支付
Payment : 'wechat', // 支付类型
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)
uni.hideLoading()
uni.showToast({
title: "查询支付结果失败",
icon : "none",
mask : true
})
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()
} else if(type === 'dgwx') {
uni.showLoading({
title: '加载中...',
mask : true
})
this.dgwxPay()
}
},
// 斗拱微信支付
dgwxPay(){
let payType = this.Payment == 'dgwx' ? 'mp' : 'mp_alipay'
umsDg(this.orderNo, {type: payType, app_schema: 'weixin://'}).then(res => {
let { params, trade_id } = res;
this.getState = true
switch (payType){
case 'mp':
this.tradeId = trade_id
this.jumpUrlDg = JSON.parse(params.miniapp_data)
this.Payment = 'dgwx'
break;
case 'mp_alipay':
this.tradeId = trade_id
window.location.href = `https://ds.alipay.com/?scheme=` + encodeURIComponent(params.jump_url)
this.Payment = 'dgwxalipay'
break;
}
}).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'
})
})
},
// 抖供支付
payChickDg() {
window.location.href = this.jumpUrlDg.scheme_code
},
// 微信支付
payClick() {
if(this.Payment === 'umsMp' || this.Payment === 'umsAli'){
this.UMSPay()
return
} else if (this.Payment === 'dgwx' || this.Payment === 'dgAli') {
this.dgwxPay()
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"
})
})
},
// 优惠券-点击
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 100rpx;
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>