Skip to content

杨炀 / ztx_wx_gzt

Go to a project
Toggle navigation
Toggle navigation pinning
07d82489 by 张猛
Options

个人支付跳转

1 parent 4377830a
Inline Side-by-side
Showing 3 changed files with 272 additions and 271 deletions
level/ztx/cert.vue
......@@ -94,11 +94,11 @@ onLoad((option) => {
})
}
})
onShow(() => {
if (app.globalData.isLogin) {
init()
} else {
app.firstLoadCallback = () => {
init()
};
......
personal/order.vue
......@@ -20,9 +20,9 @@
<view class="card-header">
<view class="date">
<!-- <image v-if="item.payTime" :src="config.baseUrl_api + '/fs/static/calendar@2x.png'" mode="widthFix" -->
<!-- style="width:30rpx;height:30rpx;"/> -->
<!-- style="width:30rpx;height:30rpx;"/> -->
<!-- <text v-if="item.payTime" class="date-text">{{ item.payTime }}</text> -->
<text class="value text-primary" >{{ item.wfCode || '——' }}</text>
<text class="value text-primary">{{ item.wfCode || '——' }}</text>
</view>
<view
:class="{
......@@ -124,7 +124,7 @@
<script setup>
import {ref, reactive, onMounted, computed} from 'vue';
import {onReachBottom} from '@dcloudio/uni-app'
import {useUserStore} from "../store/modules/user";
import {useUserStore} from "@/store/modules/user";
import * as api from '@/common/api.js'
import config from '@/config.js'
......@@ -242,7 +242,7 @@ const confirmDel = async () => {
uni.showToast({title: '删除成功', icon: 'success'});
pageNum.value = 1;
list.value = [];
initData();
await initData();
closeDelPopup();
} catch (e) {
uni.showToast({title: '删除失败', icon: 'error'});
......@@ -288,7 +288,7 @@ const confirmCancel = async () => {
uni.showToast({title: '取消成功', icon: 'success'});
pageNum.value = 1;
list.value = [];
initData();
await initData();
closeCancelPopup();
} catch (e) {
uni.showToast({title: '取消失败', icon: 'error'});
......@@ -309,7 +309,7 @@ const closeCancelPopup = () => {
height: 100vh;
display: flex;
flex-direction: column;
&.no-scroll {
overflow: hidden;
height: 100vh;
......@@ -326,7 +326,7 @@ const closeCancelPopup = () => {
// 订单列表
.order-list {
padding: 20rpx;
.order-card {
background: #fff;
margin-bottom: 20rpx;
......@@ -342,35 +342,35 @@ const closeCancelPopup = () => {
justify-content: space-between;
align-items: center;
padding-bottom: 20rpx;
.date {
display: flex;
align-items: center;
gap: 8rpx;
font-size: 26rpx;
.date-text {
color: #666;
}
}
.status-tag {
font-size: 22rpx;
padding: 6rpx 16rpx;
border-radius: 20rpx;
&.success {
background: #e6f7ef;
color: #52c41a;
border: 1rpx solid rgba(82, 196, 26, 0.3);
}
&.danger {
background: #fff1f0;
color: #ff4d4f;
border: 1rpx solid rgba(232, 52, 29, 0.3);
}
&.pending {
background: #fff7e6;
color: #faad14;
......@@ -385,13 +385,13 @@ const closeCancelPopup = () => {
align-items: center;
margin-bottom: 20rpx;
font-size: 26rpx;
.label {
color: #999;
flex-shrink: 0;
width: 140rpx;
}
.value {
color: #333;
word-break: break-all;
......@@ -417,12 +417,12 @@ const closeCancelPopup = () => {
padding: 16rpx 20rpx;
border-radius: 8rpx;
font-size: 26rpx;
.label {
color: #999;
text-align: center;
}
.value {
color: #333;
font-weight: 500;
......@@ -439,11 +439,11 @@ const closeCancelPopup = () => {
margin: 0 0 16rpx;
padding: 8rpx 0;
font-size: 26rpx;
.label {
color: #333;
}
.amount {
color: #EB6100;
font-weight: 600;
......@@ -458,7 +458,7 @@ const closeCancelPopup = () => {
align-items: center;
gap: 16rpx;
width: 100%;
.btn {
padding: 12rpx 32rpx;
border-radius: 40rpx;
......@@ -470,35 +470,35 @@ const closeCancelPopup = () => {
border: none;
width: 80px;
background: transparent;
&::after {
border: none;
}
&.btn-delete {
background: #fff;
color: #e4393c;
border: 1rpx solid #e4393c;
}
&.btn-invoice {
background: #fff;
color: #e4393c;
border: 1rpx solid #e4393c;
}
&.btn-cancel {
background: #fff;
color: #666;
border: 1rpx solid #ccc;
}
&.btn-pay {
background: linear-gradient(90deg, #FF755A, #F51722);
color: #fff;
border: none;
}
&:disabled {
opacity: 0.6;
pointer-events: none;
......@@ -571,7 +571,7 @@ const closeCancelPopup = () => {
border: none;
margin: 0;
padding: 0;
&::after {
border: none;
}
......@@ -588,7 +588,7 @@ const closeCancelPopup = () => {
border: none;
margin: 0;
padding: 0;
&::after {
border: none;
}
......
personal/sucPay.vue
<template>
<view class="success-container">
<!-- 成功图标（渐变圆形+动效） -->
<view class="success-icon">
<view class="icon-circle">
<text class="check-icon">✓</text>
</view>
</view>
<!-- 支付成功标题（动画） -->
<view class="success-title">支付成功</view>
<view class="success-subtitle">支付成功，请等待审核</view>
<!-- 订单信息卡片（带阴影） -->
<view class="info-card">
<view class="info-item">
<text class="label">交易流水号</text>
<text class="value">{{ orderInfo.tradeNo||'--' }}</text>
</view>
<view class="info-item">
<text class="label">商户名称</text>
<text class="value">{{ orderInfo.merchantName || '中国跆拳道协会' }}</text>
</view>
<view class="info-item">
<text class="label">订单金额</text>
<text class="value amount">{{ orderInfo.price ? orderInfo.price + '元' : '--' }}</text>
</view>
</view>
<!-- 确定按钮（渐变+动效） -->
<view class="confirm-btn-area">
<button class="confirm-btn" @click="goBack">确定</button>
</view>
</view>
<view class="success-container">
<!-- 成功图标（渐变圆形+动效） -->
<view class="success-icon">
<view class="icon-circle">
<text class="check-icon">✓</text>
</view>
</view>
<!-- 支付成功标题（动画） -->
<view class="success-title">支付成功</view>
<view class="success-subtitle">支付成功，请等待审核</view>
<!-- 订单信息卡片（带阴影） -->
<view class="info-card">
<view class="info-item">
<text class="label">交易流水号</text>
<text class="value">{{ orderInfo.tradeNo || '--' }}</text>
</view>
<view class="info-item">
<text class="label">商户名称</text>
<text class="value">{{ orderInfo.merchantName || '中国跆拳道协会' }}</text>
</view>
<view class="info-item">
<text class="label">订单金额</text>
<text class="value amount">{{ orderInfo.price ? orderInfo.price + '元' : '--' }}</text>
</view>
</view>
<!-- 确定按钮（渐变+动效） -->
<view class="confirm-btn-area">
<button class="confirm-btn" @click="goBack">确定</button>
</view>
</view>
</template>
<script setup>
import {
ref
} from 'vue'
import {
onLoad
} from '@dcloudio/uni-app'
import to from 'await-to-js'
import * as api from '@/common/api.js'
const orderInfo = ref({
id: '',
tradeNo: '',
merchantName: '中国跆拳道协会',
price: ''
})
const goBack = () => {
uni.reLaunch({
url: '/login/login'
})
}
onLoad(async (option) => {
if (option.orderId) {
const [err, res] = await to(api.getOrderInfo(option.orderId))
if (!err && res.data) {
orderInfo.value = res.data
} else {
orderInfo.value.id = option.orderId
}
}
})
import {
ref
} from 'vue'
import {
onLoad
} from '@dcloudio/uni-app'
import to from 'await-to-js'
import * as api from '@/common/api.js'
const orderInfo = ref({
id: '',
tradeNo: '',
merchantName: '中国跆拳道协会',
price: ''
})
const goBack = () => {
uni.redirectTo({
// url: '/login/login'
url: '/personal/order'
})
}
onLoad(async (option) => {
if (option.orderId) {
const [err, res] = await to(api.getOrderInfo(option.orderId))
if (!err && res.data) {
orderInfo.value = res.data
} else {
orderInfo.value.id = option.orderId
}
}
})
</script>
<style scoped>
/* 全局容器 */
.success-container {
display: flex;
flex-direction: column;
align-items: center;
padding: 100rpx 40rpx 60rpx;
min-height: 100vh;
background-color: #f8f9fa;
box-sizing: border-box;
}
/* 成功图标容器 */
.success-icon {
margin-bottom: 40rpx;
animation: fadeIn 0.6s ease-out;
}
/* 渐变圆形背景 */
.icon-circle {
width: 180rpx;
height: 180rpx;
border-radius: 50%;
/* 青绿色渐变 */
background: linear-gradient(135deg, #06c1ae, #04a896);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8rpx 30rpx rgba(6, 193, 174, 0.3);
/* 轻微上浮动效 */
animation: scaleIn 0.8s ease-out;
}
/* 对勾图标 */
.check-icon {
font-size: 90rpx;
color: #ffffff;
font-weight: bold;
}
/* 支付成功标题 */
.success-title {
font-size: 48rpx;
font-weight: 700;
color: #333333;
margin-bottom: 12rpx;
animation: slideUp 0.6s ease-out;
}
/* 副标题 */
.success-subtitle {
font-size: 28rpx;
color: #666666;
margin-bottom: 60rpx;
animation: slideUp 0.8s ease-out;
}
/* 订单信息卡片 */
.info-card {
width: 100%;
background: #ffffff;
border-radius: 20rpx;
padding: 40rpx 30rpx;
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.05);
margin-bottom: 80rpx;
animation: fadeIn 1s ease-out;
}
/* 单个信息项 */
.info-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24rpx 0;
border-bottom: 1rpx solid #f5f5f5;
}
/* 最后一项去掉下划线 */
.info-item:last-child {
border-bottom: none;
}
/* 标签样式 */
.label {
font-size: 32rpx;
color: #666666;
white-space: nowrap;
margin-right: 20rpx;
flex-shrink: 0;
}
/* 值样式 */
.value {
font-size: 32rpx;
color: #333333;
text-align: right;
word-break: break-all;
word-wrap: break-word;
}
/* 金额特殊样式 */
.amount {
color: #cd1e27;
font-weight: 600;
}
/* 确定按钮区域 */
.confirm-btn-area {
width: 100%;
padding: 0 20rpx;
box-sizing: border-box;
}
/* 确定按钮（渐变+动效） */
.confirm-btn {
width: 100%;
height: 90rpx;
line-height: 90rpx;
/* 按钮渐变背景 */
background: #fff;
color: #C4121B;
font-size: 36rpx;
font-weight: 600;
border-radius: 45rpx;
border: 1px solid #C4121B;
animation: slideUp 1s ease-out;
/* 禁止默认样式 */
position: relative;
overflow: hidden;
}
/* 按钮点击反馈 */
.confirm-btn::after {
border: none;
}
.confirm-btn:active {
transform: scale(0.98);
box-shadow: 0 4rpx 10rpx rgba(6, 193, 174, 0.2);
}
/* 动画定义 */
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes scaleIn {
0% {
transform: scale(0);
}
70% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
@keyframes slideUp {
0% {
opacity: 0;
transform: translateY(30rpx);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
</style>
\ No newline at end of file
/* 全局容器 */
.success-container {
display: flex;
flex-direction: column;
align-items: center;
padding: 100rpx 40rpx 60rpx;
min-height: 100vh;
background-color: #f8f9fa;
box-sizing: border-box;
}
/* 成功图标容器 */
.success-icon {
margin-bottom: 40rpx;
animation: fadeIn 0.6s ease-out;
}
/* 渐变圆形背景 */
.icon-circle {
width: 180rpx;
height: 180rpx;
border-radius: 50%;
/* 青绿色渐变 */
background: linear-gradient(135deg, #06c1ae, #04a896);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8rpx 30rpx rgba(6, 193, 174, 0.3);
/* 轻微上浮动效 */
animation: scaleIn 0.8s ease-out;
}
/* 对勾图标 */
.check-icon {
font-size: 90rpx;
color: #ffffff;
font-weight: bold;
}
/* 支付成功标题 */
.success-title {
font-size: 48rpx;
font-weight: 700;
color: #333333;
margin-bottom: 12rpx;
animation: slideUp 0.6s ease-out;
}
/* 副标题 */
.success-subtitle {
font-size: 28rpx;
color: #666666;
margin-bottom: 60rpx;
animation: slideUp 0.8s ease-out;
}
/* 订单信息卡片 */
.info-card {
width: 100%;
background: #ffffff;
border-radius: 20rpx;
padding: 40rpx 30rpx;
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.05);
margin-bottom: 80rpx;
animation: fadeIn 1s ease-out;
}
/* 单个信息项 */
.info-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24rpx 0;
border-bottom: 1rpx solid #f5f5f5;
}
/* 最后一项去掉下划线 */
.info-item:last-child {
border-bottom: none;
}
/* 标签样式 */
.label {
font-size: 32rpx;
color: #666666;
white-space: nowrap;
margin-right: 20rpx;
flex-shrink: 0;
}
/* 值样式 */
.value {
font-size: 32rpx;
color: #333333;
text-align: right;
word-break: break-all;
word-wrap: break-word;
}
/* 金额特殊样式 */
.amount {
color: #cd1e27;
font-weight: 600;
}
/* 确定按钮区域 */
.confirm-btn-area {
width: 100%;
padding: 0 20rpx;
box-sizing: border-box;
}
/* 确定按钮（渐变+动效） */
.confirm-btn {
width: 100%;
height: 90rpx;
line-height: 90rpx;
/* 按钮渐变背景 */
background: #fff;
color: #C4121B;
font-size: 36rpx;
font-weight: 600;
border-radius: 45rpx;
border: 1px solid #C4121B;
animation: slideUp 1s ease-out;
/* 禁止默认样式 */
position: relative;
overflow: hidden;
}
/* 按钮点击反馈 */
.confirm-btn::after {
border: none;
}
.confirm-btn:active {
transform: scale(0.98);
box-shadow: 0 4rpx 10rpx rgba(6, 193, 174, 0.2);
}
/* 动画定义 */
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes scaleIn {
0% {
transform: scale(0);
}
70% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
@keyframes slideUp {
0% {
opacity: 0;
transform: translateY(30rpx);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
</style>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!