125 lines
2.2 KiB
Plaintext
125 lines
2.2 KiB
Plaintext
<template>
|
|
<view class="withdraw-success-container">
|
|
<!-- 提现成功内容 -->
|
|
<view class="success-content">
|
|
<!-- 标题 -->
|
|
<text class="success-title">提现成功</text>
|
|
|
|
<!-- 金额 -->
|
|
<text class="amount">¥6.88</text>
|
|
|
|
<!-- 提示文字 -->
|
|
<text class="hint-text">可在"微信支付-服务-钱包-账单"查看明细</text>
|
|
</view>
|
|
<!-- 返回按钮 -->
|
|
<view class="" style="position: fixed; width: 100%; bottom: 200rpx; left: 0; padding: 0 100rpx; " >
|
|
<u-button :custom-style="contactButtonStyle" type="default" :text="'返回活动页'" @click="backToActivity"></u-button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onLoad } from '@dcloudio/uni-app'
|
|
import { ref } from 'vue';
|
|
|
|
|
|
|
|
// 页面加载
|
|
onLoad((options : any) => {
|
|
console.log('提现成功页面加载成功', options)
|
|
})
|
|
|
|
// 按钮样式
|
|
const contactButtonStyle = ref({
|
|
backgroundColor: '#FF6600',
|
|
borderColor: '#FF6600',
|
|
color: '#FFFFFF',
|
|
fontSize: '28rpx',
|
|
height: '75rpx',
|
|
borderRadius: '10rpx',
|
|
});
|
|
|
|
// 返回活动页
|
|
const backToActivity = () => {
|
|
// 这里可以根据实际需求返回指定页面
|
|
uni.navigateBack({
|
|
delta: 1,
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.withdraw-success-container {
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
background-color: #fff;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 0 30rpx;
|
|
}
|
|
|
|
.success-content {
|
|
margin-top: 100rpx;
|
|
width: 100%;
|
|
max-width: 500rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 30rpx;
|
|
}
|
|
|
|
.success-title {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
.amount {
|
|
font-size: 48rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
.hint-text {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
text-align: center;
|
|
line-height: 36rpx;
|
|
padding: 0 20rpx;
|
|
}
|
|
|
|
.back-btn {
|
|
width: 100%;
|
|
height: 80rpx;
|
|
font-size: 28rpx;
|
|
background-color: #f5f5f5;
|
|
color: #333;
|
|
margin-top: 60rpx;
|
|
}
|
|
|
|
// 响应式设计
|
|
@media (max-width: 750rpx) {
|
|
.success-content {
|
|
gap: 24rpx;
|
|
}
|
|
|
|
.success-title {
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
.amount {
|
|
font-size: 44rpx;
|
|
}
|
|
|
|
.hint-text {
|
|
font-size: 22rpx;
|
|
line-height: 32rpx;
|
|
}
|
|
|
|
.back-btn {
|
|
height: 72rpx;
|
|
font-size: 26rpx;
|
|
margin-top: 48rpx;
|
|
}
|
|
}
|
|
</style> |