378 lines
9.0 KiB
Vue
378 lines
9.0 KiB
Vue
<template>
|
|
<view class="container">
|
|
<!-- 状态栏 -->
|
|
<view class="status-bar"></view>
|
|
|
|
<!-- 顶部导航 -->
|
|
<uni-nav-bar
|
|
title="支付收银台"
|
|
left-icon="left"
|
|
@clickLeft="goBack"
|
|
background-color="#F5F6F9"
|
|
color="#000"
|
|
/>
|
|
|
|
<!-- 内容区域 -->
|
|
<view class="content">
|
|
<!-- 金额区域 -->
|
|
<view class="amount-box">
|
|
<view class="amount-text">缴费金额</view>
|
|
<text class="amount"> <text style="font-size: 32rpx;"> ¥ </text>{{ amount }}</text>
|
|
<view class="countdown-wrap">
|
|
<text class="countdown">剩余支付时间 {{ countdownTime }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 支付方式列表 -->
|
|
<view class="tip">请选择支付方式</view>
|
|
<view class="pay-list">
|
|
<view class="pay-item" @click="selectPayType('wx')">
|
|
<view class="left">
|
|
<image src="https://wuye.ckdzkj.com/images/home/wechat.png" class="icon" mode="widthFix" />
|
|
<view class="pay-info">
|
|
<text class="pay-name">微信</text>
|
|
</view>
|
|
</view>
|
|
<view class="radio" :class="{ active: selectedType === 'wx' }" />
|
|
</view>
|
|
|
|
<view class="pay-item" @click="selectPayType('alipay')">
|
|
<view class="left">
|
|
<image src="https://wuye.ckdzkj.com/images/home/alipay.png" class="icon" mode="widthFix" />
|
|
<view class="pay-info">
|
|
<text class="pay-name">支付宝</text>
|
|
</view>
|
|
</view>
|
|
<view class="radio" :class="{ active: selectedType === 'alipay' }" />
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
<!-- 底部支付按钮 -->
|
|
<view class="btn-wrap">
|
|
<view class="pay-btn" @click="handlePayClick">
|
|
<text class="btn-text">立即支付 {{ amount }} 元</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onUnmounted } from 'vue'
|
|
import { onLoad } from '@dcloudio/uni-app'
|
|
import { getUnionPayTn } from '/pageSubPack/api/apiSub.js'
|
|
import { getPushSingle } from '/pageSubPack/api/api.js'
|
|
|
|
// 支付宝和微信支付
|
|
|
|
const amount = ref('0.00')
|
|
const countdownTime = ref('10:00')
|
|
let timer = null
|
|
const payData = ref({})
|
|
|
|
onLoad(() => {
|
|
const data = uni.getStorageSync('payData')
|
|
if (data) {
|
|
payData.value = data
|
|
amount.value = Number(data.amount || 0).toFixed(2)
|
|
}
|
|
startCountdown()
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
if (timer) clearInterval(timer)
|
|
})
|
|
|
|
const startCountdown = () => {
|
|
let [min, sec] = countdownTime.value.split(':')
|
|
let totalSec = parseInt(min) * 60 + parseInt(sec)
|
|
timer = setInterval(() => {
|
|
totalSec--
|
|
if (totalSec <= 0) {
|
|
clearInterval(timer)
|
|
uni.showToast({ title: '支付超时', icon: 'none' })
|
|
setTimeout(() => uni.navigateBack(), 1500)
|
|
return
|
|
}
|
|
const newMin = Math.floor(totalSec / 60).toString().padStart(2, '0')
|
|
const newSec = (totalSec % 60).toString().padStart(2, '0')
|
|
countdownTime.value = `${newMin}:${newSec}`
|
|
}, 1000)
|
|
}
|
|
|
|
const selectedType = ref('wx')
|
|
const goBack = () => uni.navigateBack()
|
|
|
|
const selectPayType = (type) => {
|
|
selectedType.value = type
|
|
// #ifndef APP-HARMONY
|
|
uni.vibrateShort({ type: 'light' })
|
|
// #endif
|
|
}
|
|
|
|
const handlePayClick = () => {
|
|
handlePay()
|
|
}
|
|
|
|
const handlePay = async () => {
|
|
try {
|
|
uni.showLoading({ title: '发起支付中' })
|
|
const payTypeMap = { wx: '0', alipay: '1' }
|
|
const backendPayType = payTypeMap[selectedType.value] || '1'
|
|
|
|
const res = await getUnionPayTn({
|
|
amount: amount.value,
|
|
orderDesc: (payData.value.type || '缴费') + '缴费',
|
|
residentUserId: uni.getStorageSync('userId'),
|
|
payType: backendPayType,
|
|
deviceCode: payData.value.deviceCode || '',
|
|
deviceType: '2',
|
|
chargeTypeId: payData.value.chargeTypeId,
|
|
chargeItemId: payData.value.chargeItemId,
|
|
billId: payData.value.billId,
|
|
houseId: payData.value.houseId
|
|
})
|
|
console.log('支付接口返回:', JSON.stringify(res.data))
|
|
uni.hideLoading()
|
|
|
|
if (res.code !== 200 || !res.data) {
|
|
uni.showToast({ title: res.msg || '获取支付参数失败', icon: 'none' })
|
|
return
|
|
}
|
|
|
|
const payType = selectedType.value
|
|
const data = res.data
|
|
|
|
if (payType === 'wx') {
|
|
invokeWxPay(data.wx || data.wxPayInfo || data)
|
|
} else if (payType === 'alipay') {
|
|
invokeAlipay(data.alipay || data.aliPayInfo || data)
|
|
}
|
|
|
|
} catch (err) {
|
|
uni.hideLoading()
|
|
console.log('支付异常', err)
|
|
uni.showToast({ title: '支付请求异常', icon: 'none' })
|
|
}
|
|
}
|
|
|
|
// 微信支付
|
|
const invokeWxPay = (data) => {
|
|
const orderInfo = {
|
|
appid: data.appId,
|
|
partnerid: data.partnerId || data.partnerid || '',
|
|
prepayid: data.prepayId || data.prepayid || (data.package || '').replace('prepay_id=', ''),
|
|
package: 'Sign=WXPay',
|
|
noncestr: data.nonceStr,
|
|
timestamp: data.timeStamp,
|
|
sign: data.paySign
|
|
}
|
|
|
|
uni.requestPayment({
|
|
provider: 'wxpay',
|
|
orderInfo: orderInfo,
|
|
success: (res) => {
|
|
console.log('微信支付成功', res)
|
|
paySuccess()
|
|
},
|
|
fail: (err) => {
|
|
console.error('微信支付失败或取消', err)
|
|
uni.showToast({ title: '支付取消或失败', icon: 'none' })
|
|
}
|
|
})
|
|
}
|
|
|
|
// 支付宝支付
|
|
const invokeAlipay = (data) => {
|
|
const orderInfo = data.orderInfo || data
|
|
uni.requestPayment({
|
|
provider: 'alipay',
|
|
orderInfo: orderInfo,
|
|
success: (res) => {
|
|
console.log('支付宝支付成功', res)
|
|
paySuccess()
|
|
},
|
|
fail: (err) => {
|
|
console.error('支付宝支付失败或取消', err)
|
|
uni.showToast({ title: '支付取消或失败', icon: 'none' })
|
|
}
|
|
})
|
|
}
|
|
|
|
const paySuccess = () => {
|
|
sendPaySuccessPush()
|
|
uni.showToast({ title: '支付成功', icon: 'success' })
|
|
uni.setStorageSync('paySuccess', true)
|
|
setTimeout(() => {
|
|
uni.navigateTo({
|
|
url: '/pageSubPack/payment-list/addPaymentSuccess?type=pay'
|
|
})
|
|
}, 1500)
|
|
}
|
|
|
|
const sendPaySuccessPush = () => {
|
|
const userId = uni.getStorageSync('userId')
|
|
if (userId) {
|
|
getPushSingle({
|
|
userId: userId,
|
|
channel: 'resident',
|
|
title: '缴费成功',
|
|
content: `您已成功缴纳${payData.value.type || ''}费用 ¥${amount.value}元`
|
|
}).catch(err => console.log('推送发送失败', err))
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 全局背景 */
|
|
.container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
background-color: #F5F6F9;
|
|
padding: 0 30rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* 状态栏 */
|
|
.status-bar {
|
|
width: 100%;
|
|
height: var(--status-bar-height);
|
|
}
|
|
|
|
/* 内容区域 */
|
|
.content {
|
|
/* flex: 1; */
|
|
}
|
|
|
|
/* 金额卡片 */
|
|
.amount-box {
|
|
background: #ffffff;
|
|
border-radius: 20rpx;
|
|
padding: 50rpx 0;
|
|
text-align: center;
|
|
margin: 30rpx 0;
|
|
}
|
|
|
|
.amount-text {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.amount {
|
|
display: block;
|
|
font-size: 52rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
/* 倒计时样式 */
|
|
.countdown-wrap {
|
|
display: inline-block;
|
|
margin-top: 24rpx;
|
|
padding: 8rpx 24rpx;
|
|
background: #F4F4F4;
|
|
border-radius: 30rpx;
|
|
}
|
|
|
|
.countdown {
|
|
font-size: 28rpx;
|
|
color: #000;
|
|
}
|
|
|
|
/* 支付方式卡片 */
|
|
.pay-list {
|
|
background: #ffffff;
|
|
border-radius: 20rpx;
|
|
padding: 0 30rpx;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.pay-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 36rpx 0;
|
|
border-bottom: 1rpx solid #f2f2f2;
|
|
}
|
|
|
|
.pay-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.left {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.icon {
|
|
width: 56rpx;
|
|
height: 56rpx;
|
|
margin-right: 24rpx;
|
|
}
|
|
|
|
.pay-name {
|
|
font-size: 32rpx;
|
|
color: #333;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* 单选按钮 — 对勾样式 */
|
|
.radio {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
border-radius: 50%;
|
|
border: 3rpx solid #d0d0d0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.radio.active {
|
|
background-color: #2F77FD;
|
|
border-color: #2F77FD;
|
|
}
|
|
|
|
.radio.active::after {
|
|
content: '';
|
|
width: 12rpx;
|
|
height: 22rpx;
|
|
border: 4rpx solid #fff;
|
|
border-left: 0;
|
|
border-top: 0;
|
|
transform: rotate(45deg) translate(-2rpx, -2rpx);
|
|
}
|
|
|
|
/* 提示 */
|
|
.tip {
|
|
font-size: 32rpx;
|
|
color: #333;
|
|
font-weight: 500;
|
|
text-align: left;
|
|
padding: 20rpx 0;
|
|
}
|
|
|
|
/* 底部按钮区域 */
|
|
.btn-wrap {
|
|
padding: 30rpx 0 60rpx;
|
|
}
|
|
|
|
/* 底部支付按钮 */
|
|
.pay-btn {
|
|
width: 100%;
|
|
height: 96rpx;
|
|
line-height: 96rpx;
|
|
background: #2F77FD;
|
|
color: #fff;
|
|
text-align: center;
|
|
font-size: 34rpx;
|
|
font-weight: bold;
|
|
border-radius: 8rpx;
|
|
box-shadow: 0 6rpx 20rpx rgba(47, 119, 253, 0.3);
|
|
}
|
|
</style> |