195 lines
3.9 KiB
Vue
195 lines
3.9 KiB
Vue
<template>
|
||
<view class="contentStyle" style="">
|
||
<view class="status-bar"></view>
|
||
<uni-nav-bar :title="navTitle" left-icon="left" @clickLeft="goBack" backgroundColor="transparent"
|
||
:border="false">
|
||
</uni-nav-bar>
|
||
|
||
<!-- 表单区域 -->
|
||
<scroll-view class="page" scroll-y="true">
|
||
<view class="container">
|
||
<!-- 成功图标 -->
|
||
<view class="success-icon">
|
||
<text class="icon-check">✓</text>
|
||
<!-- <image src="https://wuyeadmin.bugtc.com/images/home/bingo.png" ></image> -->
|
||
</view>
|
||
|
||
<!-- 主标题 -->
|
||
<view class="title">{{ pageTitle }}</view>
|
||
|
||
<!-- 提示文案 -->
|
||
<view class="desc" v-html="descText"></view>
|
||
|
||
<!-- 操作按钮 -->
|
||
<view class="btn-wrap">
|
||
<button class="btn-back" @click="handlePrimaryClick">{{ btnText }}</button>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
ref,
|
||
onMounted,
|
||
computed
|
||
|
||
} from 'vue'
|
||
import {
|
||
onShow,
|
||
onReady,
|
||
onReachBottom,
|
||
onLoad,
|
||
onUnload,
|
||
onPullDownRefresh
|
||
} from '@dcloudio/uni-app'
|
||
|
||
// 响应式数据
|
||
const statusBarHeight = ref(20)
|
||
const paymentType = ref(uni.getStorageSync('addPaymentType'))
|
||
const pageType = ref('bind') // 'bind' | 'pay'
|
||
|
||
// 页面配置：根据类型返回对应文案和跳转
|
||
const pageConfig = computed(() => {
|
||
const configs = {
|
||
bind: {
|
||
navTitle: '新增' + paymentType.value + '缴费',
|
||
pageTitle: '绑定成功',
|
||
descText: '恭喜您绑定成功，费用将在24小时内更新，<br>请您按时查看，避免造成费用欠费',
|
||
btnText: '返回生活缴费',
|
||
backUrl: '/pageSubPack/payment-list/paymentIndex'
|
||
},
|
||
pay: {
|
||
navTitle: '缴费支付',
|
||
pageTitle: '支付成功',
|
||
descText: '恭喜您支付成功，感谢您的使用',
|
||
btnText: '返回生活缴费',
|
||
backUrl: '/pageSubPack/payment-list/paymentIndex' // TODO: 如有缴费记录页请修改
|
||
}
|
||
}
|
||
return configs[pageType.value] || configs.bind
|
||
})
|
||
|
||
const navTitle = computed(() => pageConfig.value.navTitle)
|
||
const pageTitle = computed(() => pageConfig.value.pageTitle)
|
||
const descText = computed(() => pageConfig.value.descText)
|
||
const btnText = computed(() => pageConfig.value.btnText)
|
||
|
||
// 生命周期
|
||
onLoad((options) => {
|
||
if (options?.type) {
|
||
pageType.value = options.type
|
||
}
|
||
})
|
||
onShow(() => {})
|
||
onMounted(() => {})
|
||
onReady(() => {})
|
||
|
||
// 方法
|
||
const goBack = () => {
|
||
uni.redirectTo({ url: '/pageSubPack/payment-list/paymentIndex' });
|
||
}
|
||
|
||
const handlePrimaryClick = () => {
|
||
const url = pageConfig.value.backUrl
|
||
uni.redirectTo({ url });
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background: #f9f9f9;
|
||
}
|
||
</style>
|
||
|
||
<style scoped>
|
||
.contentStyle {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100vh;
|
||
background-color: #f9f9f9;
|
||
}
|
||
|
||
.page {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 0px 40rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
</style>
|
||
|
||
<style scoped>
|
||
/* 全局容器 */
|
||
.container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
/* 成功图标 */
|
||
.success-icon {
|
||
width: 220rpx;
|
||
height: 220rpx;
|
||
border-radius: 50%;
|
||
background-color: #1677ff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: 200rpx;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.icon-check {
|
||
color: #fff;
|
||
font-size: 130rpx;
|
||
font-weight: bold;
|
||
line-height: 1;
|
||
}
|
||
|
||
/* 主标题 */
|
||
.title {
|
||
font-size: 44rpx;
|
||
font-weight: bold;
|
||
color: #000;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
/* 提示文案 */
|
||
.desc {
|
||
font-size: 32rpx;
|
||
color: #666;
|
||
line-height: 1.6;
|
||
text-align: center;
|
||
margin-bottom: 150rpx;
|
||
}
|
||
|
||
/* 按钮容器 */
|
||
.btn-wrap {
|
||
width: 100%;
|
||
}
|
||
|
||
/* 返回按钮 */
|
||
.btn-back {
|
||
width: 100%;
|
||
height: 96rpx;
|
||
line-height: 96rpx;
|
||
background-color: #1677ff;
|
||
color: #fff;
|
||
font-size: 36rpx;
|
||
border-radius: 8rpx;
|
||
border: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
/* 按钮默认样式重置（解决uni-app button默认样式问题） */
|
||
.btn-back::after {
|
||
border: none;
|
||
}
|
||
|
||
.status-bar {
|
||
width: 100vw;
|
||
height: 46px;
|
||
}
|
||
</style> |