You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
353 lines
8.4 KiB
353 lines
8.4 KiB
<template> |
|
<view class="payxx"> |
|
<view v-if='!expirationTime' class="time">剩余支付时间{{m}} ：{{s}}</view> |
|
<view v-if="expirationTime" class="time">订单过期时间：{{expirationTime}}</view> |
|
<view class="price"> |
|
<view>￥</view> |
|
<view>{{price}}</view> |
|
</view> |
|
<view @click="godet" class="orderdetails"> |
|
<view>订单详情</view> |
|
<image src="../../static/youjiantou.png"></image> |
|
</view> |
|
</view> |
|
<view class="pay_type"> |
|
<view v-for="item in paytypes" @click="xiugai(item.id)"> |
|
<view> |
|
<image :src="item.payWay=='支付宝支付'?'../../static/zfb.png':item.payWay=='微信支付'?'../../static/wx.png':'../../static/yhk.png'"></image> |
|
<view>{{item.payWay}}</view> |
|
</view> |
|
<image :src="xzstate==item.id?'../../static/yixuan.png':'../../static/weixuan.png'"></image> |
|
</view> |
|
<!-- <view v-if="paytypes[0].payWay='微信支付'"> |
|
<view> |
|
<image src="../../static/wx.png"></image> |
|
<view>微信支付</view> |
|
</view> |
|
<image @click="xiugai(1)" :src="xzstate==1?'../../static/yixuan.png':'../../static/weixuan.png'"></image> |
|
</view> |
|
<view v-if="paytypes[1].payWay='支付宝'"> |
|
<view> |
|
<image src="../../static/zfb.png"></image> |
|
<view>支付宝支付</view> |
|
</view> |
|
<image @click="xiugai(2)" :src="xzstate==2?'../../static/yixuan.png':'../../static/weixuan.png'"></image> |
|
</view> |
|
<view v-if="paytypes[2].state"> |
|
<view> |
|
<image src="../../static/yhk.png"></image> |
|
<view>银行卡支付</view> |
|
</view> |
|
<image @click="xiugai(3)" :src="xzstate==3?'../../static/yixuan.png':'../../static/weixuan.png'"></image> |
|
</view> --> |
|
</view> |
|
<view @click="queren" class="pay_btn"> |
|
确认支付 |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import { |
|
paypayway, |
|
paypurchase, |
|
criticismdetails, |
|
} from '@/api/user.js' |
|
import wx from 'weixin-js-sdk' |
|
import {ref} from 'vue' |
|
export default { |
|
props:['id'], |
|
onShow() { |
|
for(let i=0;i<=5;i++){ |
|
criticismdetails({id:this.id}).then(res=>{ |
|
console.log(res); |
|
if(res.data.orderState==3||res.data.orderState==6){ |
|
uni.navigateTo({ |
|
url:'../paysuccess/paysuccess' |
|
}) |
|
}else if(res.data.orderState==7){ |
|
uni.reLaunch({ |
|
url:'../index/index' |
|
}) |
|
} |
|
}) |
|
} |
|
if(this.iszhifu){ |
|
this.xh=setInterval(()=>{ |
|
criticismdetails({id:this.id}).then(res=>{ |
|
console.log(res); |
|
if(res.data.orderState==3||res.data.orderState==6){ |
|
uni.navigateTo({ |
|
url:'../paysuccess/paysuccess' |
|
}) |
|
if(this.xh!=null){ |
|
clearInterval(this.xh) |
|
} |
|
}else if(res.data.orderState==7){ |
|
uni.reLaunch({ |
|
url:'../index/index' |
|
}) |
|
} |
|
}) |
|
},200) |
|
} |
|
}, |
|
onHide() { |
|
if(this.xh!=null){ |
|
clearInterval(this.xh) |
|
} |
|
}, |
|
onUnload() { |
|
if(this.xh!=null){ |
|
clearInterval(this.xh) |
|
} |
|
if(this.djsxh!=null){ |
|
clearInterval(this.djsxh) |
|
} |
|
}, |
|
setup(props) { |
|
let m=ref('10') |
|
let s=ref('00') |
|
let xh=ref(null) |
|
let djsxh=ref(null) |
|
let iszhifu=ref(false) |
|
uni.showLoading({ |
|
title:'加载中' |
|
}) |
|
function djs(){ |
|
djsxh.value=setInterval(()=>{ |
|
// console.log(m.value,Number(m.value)); |
|
if(Number(s.value)<=0){ |
|
if(Number(m.value)==0){ |
|
uni.reLaunch({ |
|
url:'../index/index' |
|
}) |
|
clearInterval(xunhuan) |
|
} |
|
if(Number(m.value)-1<10){ |
|
m.value='0'+(Number(m.value)-1) |
|
}else{ |
|
m.value=(Number(m.value)-1) |
|
} |
|
s.value=60 |
|
} |
|
let news=(Number(s.value)-1) |
|
if(news<10){ |
|
news='0'+news |
|
} |
|
s.value=news |
|
},990) |
|
} |
|
djs() |
|
let xzstate=ref(-1) |
|
let paytypes=ref([{state:true},{state:true},{state:true}]) |
|
|
|
paypayway({}).then(res=>{ |
|
console.log(res); |
|
paytypes.value=res.data |
|
}) |
|
let price=ref(0) |
|
let expirationTime=ref(null) |
|
criticismdetails({id:props.id}).then(res=>{ |
|
console.log(res,'xq'); |
|
price.value=res.data.orderAmount.split('.')[0]+'.'+res.data.orderAmount.split('.')[1].substring(0,2) |
|
expirationTime.value=res.data.expirationTime |
|
var minutes = parseInt((res.data.timeStamp % (1000 * 60 * 60)) / (1000 * 60)); |
|
var seconds = parseInt((res.data.timeStamp % (1000 * 60)) / 1000); |
|
m.value=minutes |
|
s.value=seconds |
|
uni.hideLoading() |
|
}) |
|
function xiugai(value){ |
|
xzstate.value=value |
|
} |
|
function queren(){ |
|
if(xzstate.value==-1){ |
|
uni.showToast({ |
|
title:'请选择支付方式', |
|
icon:'error' |
|
}) |
|
return |
|
} |
|
if(xzstate.value == 8){ |
|
uni.navigateTo({ |
|
url:'/pages/yanzhen/yanzhen?id='+props.id |
|
}) |
|
return |
|
} |
|
paypurchase({ |
|
orderId: props.id, |
|
payId: xzstate.value, |
|
// payWayId:, |
|
}).then(res=>{ |
|
console.log(res); |
|
// return |
|
if(res.code!=200){ |
|
uni.showToast({ |
|
title:res.msg |
|
}) |
|
return |
|
} |
|
if(res.msg=='操作成功'){ |
|
uni.reLaunch({ |
|
url:'../paybaipiao/paybaipiao' |
|
}) |
|
return |
|
} |
|
if (xzstate.value == 1) { |
|
// if(!iswx){ |
|
iszhifu.value=true |
|
let str = res.msg.split(">") |
|
let str1 = str[1].split("<"); |
|
let str2 = str1[0].slice(15) |
|
let str3 = str2.replace(/"/, '') |
|
// console.log(str3,'str3'); |
|
uni.setStorageSync("https", str3) |
|
location.href = `${str3}` |
|
// }else{ |
|
// wx.invoke( |
|
// 'getBrandWCPayRequest', { |
|
// "appId":"wx2421b1c4370ec43b", //公众号名称，由商户传入 |
|
// "timeStamp":"1395712654", //时间戳，自1970年以来的秒数 |
|
// "nonceStr":"e61463f8efa94090b1f366cccfbbb444", //随机串 |
|
// "package":"prepay_id=u802345jgfjsdfgsdg888", |
|
// "signType":"MD5", //微信签名方式： |
|
// "paySign":"70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名 |
|
// }, |
|
// function(res){ |
|
// if(res.err_msg == "get_brand_wcpay_request:ok" ){ |
|
// // 使用以上方式判断前端返回,微信团队郑重提示： |
|
// //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。 |
|
// } |
|
// }); |
|
// } |
|
|
|
} else if (xzstate.value == 2) { |
|
console.log(res.msg); |
|
const div = document.createElement('div') |
|
div.id = 'formdata' |
|
div.innerHTML = res.msg |
|
document.body.appendChild(div) |
|
const form = document.getElementById('formdata'); |
|
document.forms[0].submit() |
|
document.body.removeChild(form) |
|
}else if(xzstate.value == 7){ |
|
location.href = res.msg |
|
}else if(xzstate.value == 8){ |
|
uni.navigateTo({ |
|
url:'/pages/yanzhen/yanzhen?id='+props.id |
|
}) |
|
} |
|
}) |
|
} |
|
function godet(){ |
|
uni.navigateTo({ |
|
url:'../orderdetails/orderdetails?id='+props.id |
|
}) |
|
} |
|
return { |
|
djsxh, |
|
xzstate, |
|
expirationTime, |
|
xiugai, |
|
paytypes, |
|
queren, |
|
godet, |
|
price, |
|
m,s,iszhifu,xh |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
.pay_btn{ |
|
width: 668upx; |
|
height: 84upx; |
|
background: #3772FF; |
|
border-radius: 12upx; |
|
font-size: 28upx; |
|
font-weight: 500; |
|
color: #FFFFFF; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
margin: auto; |
|
margin-top: 320upx; |
|
} |
|
.pay_type{ |
|
display: flex; |
|
flex-direction: column; |
|
margin-top: 180upx; |
|
>view{ |
|
width: 676upx; |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
color: #ffffff; |
|
margin: auto; |
|
padding-bottom: 36upx; |
|
padding-top: 36upx; |
|
box-sizing: border-box; |
|
border-bottom: 1upx solid #373737; |
|
&:nth-last-child(1){ |
|
border-bottom:0; |
|
} |
|
>view{ |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
font-size: 28upx; |
|
font-family: PingFang SC-Medium, PingFang SC; |
|
font-weight: 500; |
|
color: #FFFFFF; |
|
>image{ |
|
width: 48upx; |
|
height: 48upx; |
|
margin-right: 30upx; |
|
} |
|
} |
|
>image{ |
|
width: 32upx; |
|
height: 32upx; |
|
} |
|
} |
|
} |
|
.payxx{ |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
.time{ |
|
font-size: 24upx; |
|
font-weight: 500; |
|
color: #8D8C9F; |
|
} |
|
.price{ |
|
font-size: 48upx; |
|
font-weight: bold; |
|
color: #FFFFFF; |
|
margin-top: 20upx; |
|
margin-bottom: 20upx; |
|
display: flex; |
|
align-items: center; |
|
>view:nth-of-type(2){ |
|
font-size: 72upx !important; |
|
} |
|
} |
|
.orderdetails{ |
|
font-size: 24upx; |
|
font-weight: 500; |
|
color: #8D8C9F; |
|
display: flex; |
|
align-items: center; |
|
>image{ |
|
width: 24upx; |
|
height: 24upx; |
|
} |
|
} |
|
} |
|
|
|
page{ |
|
padding-top: 100upx; |
|
} |
|
|
|
</style>
|
|
|