四零语境前端代码仓库
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

213 lines
4.5 KiB

<template>
<view class="cash-page">
<!-- 顶部标题栏 -->
<view class="header-icon">
<image class="cash-icon" src="/static/withdraw-icon.png" mode="aspectFit"></image>
</view>
<!-- 表单内容 -->
<view class="form-container">
<view class="header">
<view class="title">微信提现</view>
<!-- <view class="flow-link">过往流水 ></view> -->
</view>
<!-- 真实姓名 -->
<view class="form-item">
<view class="label">真实姓名</view>
<uv-input
v-model="realName"
placeholder="请输入"
border="none"
:custom-style="inputStyle"
></uv-input>
</view>
<!-- 提现金额 -->
<view class="form-item">
<view class="label">提现金额</view>
<uv-input
v-model="amount"
placeholder="请输入"
type="digit"
border="none"
:custom-style="inputStyle"
></uv-input>
</view>
</view>
<!-- 说明文字 -->
<view class="notice-text">
请仔细检查并确认相关信息,因用户个人疏忽导致的充值错误,需由用户自行承担。
<text class="link-text" @click="showWithdrawRules">《提现须知》</text>
</view>
<!-- 固定底部按钮 -->
<view class="fixed-bottom">
<uv-button
type="primary"
:custom-style="buttonStyle"
@click="handleWithdraw"
>
提现
</uv-button>
<uv-safe-bottom></uv-safe-bottom>
</view>
</view>
</template>
<script>
export default {
data() {
return {
realName: '',
amount: '',
inputStyle: {
backgroundColor: 'transparent',
fontSize: '32rpx',
color: '#333'
},
buttonStyle: {
backgroundColor: '#22F2EB',
borderRadius: '50rpx',
height: '88rpx',
fontSize: '32rpx',
fontWeight: 'bold'
}
}
},
methods: {
async handleWithdraw() {
if (!this.realName) {
uni.showToast({
title: '请输入真实姓名',
icon: 'none'
})
return
}
if (!this.amount) {
uni.showToast({
title: '请输入提现金额',
icon: 'none'
})
return
}
const subRes = await this.$api.promotion.withdraw({
// #ifdef H5
type : 'official',
// #endif
name: this.realName,
money: this.amount
})
if (subRes.code === 200) {
uni.showToast({
title: '提现申请已提交',
icon: 'success'
})
uni.navigateBack({
delta: 1,
duration: 1000
})
} else {
uni.showToast({
title: subRes.msg,
icon: 'none'
})
}
// 提现逻辑
console.log('提现信息:', {
realName: this.realName,
amount: this.amount
})
uni.showToast({
title: '提现申请已提交',
icon: 'success'
})
},
showWithdrawRules() {
// 显示提现须知
uni.showModal({
title: '提现须知',
content: this.configParamContent('cash_policy'),
showCancel: false
})
}
}
}
</script>
<style lang="scss" scoped>
// @import '@/uni.scss';
.cash-page {
min-height: 100vh;
background-color: #F2F2F2;
padding-bottom: 200rpx;
padding-top: 40rpx;
.header {
background-color: #fff;
padding: 40rpx 40rpx 30rpx;
display: flex;
justify-content: space-between;
align-items: center;
.title {
font-size: 36rpx;
font-weight: bold;
color: #333;
}
.flow-link {
font-size: 28rpx;
color: #999;
}
}
.form-container {
background-color: #fff;
margin: 20rpx 40rpx;
border-radius: 32rpx;
margin-top: 20rpx;
.form-item {
padding: 40rpx;
border-bottom: 1rpx solid #f0f0f0;
&:last-child {
border-bottom: none;
}
.label {
font-size: 32rpx;
color: #333;
margin-bottom: 20rpx;
font-weight: 500;
}
}
}
.notice-text {
padding: 40rpx;
font-size: 24rpx;
color: #999;
line-height: 1.6;
.link-text {
color: #22F2EB;
}
}
.fixed-bottom {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 30rpx 40rpx;
background-color: #fff;
border-top: 1rpx solid #f0f0f0;
z-index: 999;
}
}
</style>