146 lines
5.5 KiB
Vue
146 lines
5.5 KiB
Vue
<template>
|
|
<view class="order-detail-container">
|
|
<!-- 支付金额头部 -->
|
|
<view class="payment-header">
|
|
<view class="amount-info">
|
|
<text class="amount-symbol">¥</text>
|
|
<text class="amount-value">{{ itemObj.paymentAmount }}</text>
|
|
<text class="payment-status">待付款</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 订单详情内容 -->
|
|
<view class="order-content">
|
|
<!-- 停车场信息 -->
|
|
<view class="detail-item">
|
|
<text class="detail-label">停车场</text>
|
|
<view class="detail-value">
|
|
<text class="park-type">{{ itemObj.selectedParkType == 1 ? '地上' : '地下' }}</text>
|
|
<text class="park-name">{{ itemObj.headerTitle }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 车牌号 -->
|
|
<view class="detail-item">
|
|
<text class="detail-label">车牌号</text>
|
|
<text class="detail-value">{{ itemObj.selectedCarPlate }}</text>
|
|
</view>
|
|
|
|
<!-- 开始时间 -->
|
|
<view class="detail-item">
|
|
<text class="detail-label">开始时间</text>
|
|
<text class="detail-value">{{ itemObj.startTime }}</text>
|
|
</view>
|
|
|
|
<!-- 结束时间 -->
|
|
<view class="detail-item">
|
|
<text class="detail-label">结束时间</text>
|
|
<text class="detail-value">{{ itemObj.endTime }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 支付方式选择 -->
|
|
<view class="payment-method">
|
|
<view class="method-item">
|
|
<view class="method-info">
|
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_wechat.png"
|
|
mode="aspectFit" class="method-info-img"></image>
|
|
<text class="method-text">微信支付</text>
|
|
</view>
|
|
<!-- <view class="payment-select" v-if="selectedPayment === 'wechat'">
|
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check2.png"
|
|
mode="aspectFit" style="width: 40rpx; height: 40rpx;"></image>
|
|
</view>
|
|
<view class="payment-select" v-else>
|
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check1.png"
|
|
mode="aspectFit" style="width: 40rpx; height: 40rpx;"></image>
|
|
</view> -->
|
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check2.png"
|
|
mode="aspectFit" style="width: 30rpx; height: 30rpx;"></image>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 底部支付栏 -->
|
|
<view class="bottom-payment">
|
|
<view class="total-amount">
|
|
<text class="total-label">合计¥</text>
|
|
<text class="total-value">{{ itemObj.paymentAmount }}</text>
|
|
</view>
|
|
<view class="pay-button" @tap="submitPayment">
|
|
<text class="pay-text">立即支付</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
isPhone,
|
|
picUrl,
|
|
request,
|
|
upload,
|
|
NavgateTo
|
|
} from '../../../utils';
|
|
import { apiArr } from '@/api/park.js'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
itemObj: {}
|
|
}
|
|
},
|
|
methods: {
|
|
// 提交支付
|
|
submitPayment() {
|
|
const param = {
|
|
order_id: this.itemObj.order_id,
|
|
user_id: uni.getStorageSync('userId'),
|
|
trans_type: this.itemObj.trans_type,
|
|
}
|
|
request(apiArr.monthCardOrderPreorder, "POST", param).then(res => {
|
|
if (res && res.timeStamp && res.nonceStr && res.package && res.signType && res.paySign) {
|
|
// 调用微信支付
|
|
uni.requestPayment({
|
|
timeStamp: res.timeStamp,
|
|
nonceStr: res.nonceStr,
|
|
package: res.package,
|
|
signType: res.signType,
|
|
paySign: res.paySign,
|
|
success: (payRes) => {
|
|
const params = {
|
|
order_id: resVal.order_id,
|
|
}
|
|
request(apiArr.monthCardOrderQuery, "POST", params).then(res => {
|
|
this.boxshadow1 = true
|
|
})
|
|
|
|
},
|
|
fail: (payErr) => {
|
|
uni.showToast({
|
|
title: payErr.errMsg == 'requestPayment:fail cancel' ? '用户取消支付' : '支付失败',
|
|
icon: 'none'
|
|
})
|
|
},
|
|
complete: () => {
|
|
// 支付完成后的回调，无论成功失败都会执行
|
|
}
|
|
})
|
|
} else {
|
|
console.error("获取支付参数失败，缺少必要参数")
|
|
uni.showToast({
|
|
title: '获取支付信息失败',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.itemObj = JSON.parse(decodeURIComponent(options.item));
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
@import url('./index.css');
|
|
</style> |