|
|
|
@ -1,53 +1,68 @@ |
|
|
|
<template> |
|
|
|
<view class="page"> |
|
|
|
<!-- 导航栏 --> |
|
|
|
<navbar title="提现" leftClick @leftClick="$utils.navigateBack" bgColor="#E3441A" color="#fff" /> |
|
|
|
<navbar title="提现" leftClick @leftClick="$utils.navigateBack" color="#fff" /> |
|
|
|
|
|
|
|
<!-- 佣金信息 --> |
|
|
|
<view class="b-relative center font-m"> |
|
|
|
<image :src="configList.tx_image" mode="aspectFill" /> |
|
|
|
<view class="content"> |
|
|
|
|
|
|
|
<view class="user-money"> |
|
|
|
<view class="title">总佣金</view> |
|
|
|
<view class="money">{{ riceInfo.canWithdraw}}元</view> |
|
|
|
</view> |
|
|
|
<!-- 佣金信息 --> |
|
|
|
<view class="info"> |
|
|
|
<image class="info-bg" src="../static/withdraw/bg.png"></image> |
|
|
|
|
|
|
|
<view class="operation"> |
|
|
|
<!-- <view @click="toRunningWater" class="operation-item"> |
|
|
|
余额记录 |
|
|
|
<view class="info-content"> |
|
|
|
<view class="label">总佣金余额（元）</view> |
|
|
|
<view class="value">{{ riceInfo.canWithdraw || 0 }}</view> |
|
|
|
<view class="flex desc"> |
|
|
|
<!-- todo: 对接接口字段 --> |
|
|
|
<view>{{ `累积提现：${123 || 0} 元` }}</view> |
|
|
|
<button plain class="btn"> |
|
|
|
<text>提现记录</text> |
|
|
|
<image class="btn-icon" src="@/static/image/center/icon-arrow.png" mode="widthFix"></image> |
|
|
|
</button> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
| |
|
|
|
<view @click="toRunningWater" class="operation-item"> |
|
|
|
提现记录 |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 我要提现 --> |
|
|
|
<view class="form"> |
|
|
|
<view class="form-title">我要提现</view> |
|
|
|
<view class="form-item"> |
|
|
|
<uv-input |
|
|
|
v-model.number="form.money" |
|
|
|
placeholder="请输入提现金额" |
|
|
|
:placeholderStyle="placeholderStyle" |
|
|
|
:customStyle="customStyle" |
|
|
|
color="#FF2A2A" |
|
|
|
> |
|
|
|
<template #prefix> |
|
|
|
<view class="unit">￥</view> |
|
|
|
</template> |
|
|
|
</uv-input> |
|
|
|
</view> |
|
|
|
| --> |
|
|
|
<view @click="toRunningWater" class="operation-item"> |
|
|
|
流水记录 |
|
|
|
<view class="form-item"> |
|
|
|
<uv-input |
|
|
|
v-model.trim="form.name" |
|
|
|
placeholder="请输入真实姓名" |
|
|
|
:placeholderStyle="placeholderStyle" |
|
|
|
:customStyle="customStyle" |
|
|
|
></uv-input> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 我要提现 --> |
|
|
|
<view class="from-body"> |
|
|
|
<view class="title">我要提现</view> |
|
|
|
|
|
|
|
<view class="money-form"> |
|
|
|
<view class="unit"> |
|
|
|
￥ |
|
|
|
</view> |
|
|
|
<uv-input type="number" placeholder="请输入提现金额" border="surround" v-model.number="form.money"></uv-input> |
|
|
|
<!-- 提现说明 --> |
|
|
|
<view class="desc"> |
|
|
|
<view class="desc-title">提现说明</view> |
|
|
|
<!-- todo: check --> |
|
|
|
<uv-parse class="desc-content" :content="configList.recharge_instructions"></uv-parse> |
|
|
|
<!-- <view v-html="configList.recharge_instructions" class="withdrawal-statement" style="color: #666666;"></view> --> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="tools"> |
|
|
|
<button class="flex btn" @click="withdraw">立即提现</button> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 提现说明 --> |
|
|
|
<view class="withdrawal-statement"> |
|
|
|
<view class="title">提现说明</view> |
|
|
|
<view v-html="configList.recharge_instructions" class="withdrawal-statement" style="color: #666666;"></view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view @click="withdraw" class="uni-color-btn"> |
|
|
|
立即提现 |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -64,8 +79,19 @@ |
|
|
|
data() { |
|
|
|
return { |
|
|
|
form: { |
|
|
|
money: '' |
|
|
|
money: '', |
|
|
|
name: '', |
|
|
|
}, |
|
|
|
placeholderStyle: { |
|
|
|
color: '#999999', |
|
|
|
fontSize: '28rpx', |
|
|
|
}, |
|
|
|
customStyle: { |
|
|
|
backgroundColor: '#F5F5F5', |
|
|
|
border: 'none', |
|
|
|
borderRadius: '16rpx', |
|
|
|
padding: '28rpx 35rpx' |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
onShow() { |
|
|
|
@ -74,6 +100,16 @@ |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
withdraw() { //立即提现 |
|
|
|
if (!this.form.name) { |
|
|
|
uni.showToast({ |
|
|
|
title: '请输入真实姓名', |
|
|
|
icon: 'none' |
|
|
|
}) |
|
|
|
|
|
|
|
return |
|
|
|
} |
|
|
|
|
|
|
|
// todo |
|
|
|
if (this.form.money < 300) { |
|
|
|
return uni.showToast({ |
|
|
|
title: '未满300元不可提现哦！', |
|
|
|
@ -126,131 +162,116 @@ |
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
.page { |
|
|
|
|
|
|
|
// 佣金信息 |
|
|
|
.center { |
|
|
|
position: relative; |
|
|
|
width: 710rpx; |
|
|
|
height: 316rpx; |
|
|
|
margin: 20rpx auto; |
|
|
|
background-color: $uni-fg-color; |
|
|
|
min-height: 100vh; |
|
|
|
|
|
|
|
/deep/ .nav-bar__view { |
|
|
|
background-image: linear-gradient(#84A73F, #D8FF8F); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.center image { |
|
|
|
position: absolute; |
|
|
|
left: 0; |
|
|
|
top: 0; |
|
|
|
width: 710rpx; |
|
|
|
height: 316rpx; |
|
|
|
border-radius: 12rpx; |
|
|
|
.content { |
|
|
|
padding: 28rpx 13rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.info { |
|
|
|
position: relative; |
|
|
|
width: 100%; |
|
|
|
height: 290rpx; |
|
|
|
|
|
|
|
&-bg { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.center .user-money { |
|
|
|
&-content { |
|
|
|
position: absolute; |
|
|
|
top: 50%; |
|
|
|
transform: translateY(-50%); |
|
|
|
z-index: 9; |
|
|
|
color: white; |
|
|
|
padding-left: 50rpx; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
width: 100%; |
|
|
|
box-sizing: border-box; |
|
|
|
padding: 42rpx 48rpx 0 35rpx; |
|
|
|
|
|
|
|
.title { |
|
|
|
font-size: 36rpx; |
|
|
|
} |
|
|
|
color: $uni-text-color-inverse; |
|
|
|
|
|
|
|
.money { |
|
|
|
font-size: 40rpx; |
|
|
|
.label { |
|
|
|
font-size: 30rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.operation { |
|
|
|
position: absolute; |
|
|
|
bottom: 20rpx; |
|
|
|
left: 0rpx; |
|
|
|
width: 100%; |
|
|
|
display: flex; |
|
|
|
justify-content: flex-end; |
|
|
|
color: white; |
|
|
|
|
|
|
|
.operation-item { |
|
|
|
margin: 0rpx 20rpx; |
|
|
|
.value { |
|
|
|
margin-top: 18rpx; |
|
|
|
font-weight: 700; |
|
|
|
font-size: 55rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 我要提现 |
|
|
|
.from-body { |
|
|
|
padding: 40rpx 20rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
text-align: left; |
|
|
|
color: #333333; |
|
|
|
} |
|
|
|
.desc { |
|
|
|
justify-content: space-between; |
|
|
|
font-size: 22rpx; |
|
|
|
margin-top: 58rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.from-body .title { |
|
|
|
font-size: 36rpx; |
|
|
|
} |
|
|
|
.btn { |
|
|
|
border: none; |
|
|
|
font-size: 22rpx; |
|
|
|
color: $uni-text-color-inverse; |
|
|
|
|
|
|
|
.money-form { |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
align-items: center; |
|
|
|
background: #ebebeb; |
|
|
|
border-radius: 10rpx; |
|
|
|
margin-top: 20rpx; |
|
|
|
&-icon { |
|
|
|
width: 16rpx; |
|
|
|
height: 16rpx; |
|
|
|
margin-left: 7rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.money-form .unit { |
|
|
|
display: flex; |
|
|
|
justify-content: flex-end; |
|
|
|
color: $uni-color; |
|
|
|
width: 60rpx; |
|
|
|
} |
|
|
|
.form { |
|
|
|
margin-top: 30rpx; |
|
|
|
|
|
|
|
&::v-deep .uv-border { |
|
|
|
border: none; |
|
|
|
&-title { |
|
|
|
color: #000000; |
|
|
|
font-size: 28rpx; |
|
|
|
padding: 0 35rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.money { |
|
|
|
margin: 20rpx 0rpx; |
|
|
|
} |
|
|
|
&-item { |
|
|
|
margin-top: 18rpx; |
|
|
|
|
|
|
|
// 提现说明 |
|
|
|
.withdrawal-statement { |
|
|
|
padding: 0rpx 20rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
|
|
|
|
.title { |
|
|
|
font-size: 36rpx; |
|
|
|
margin-bottom: 20rpx; |
|
|
|
.unit { |
|
|
|
color: #FF2A2A; |
|
|
|
padding-left: 42rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.recharge { |
|
|
|
position: fixed; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
left: 0; |
|
|
|
bottom: 0; |
|
|
|
width: 750rpx; |
|
|
|
height: 100rpx; |
|
|
|
background: white; |
|
|
|
.desc { |
|
|
|
margin-top: 45rpx; |
|
|
|
padding: 0 42rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
|
|
|
|
&-title { |
|
|
|
color: #000000; |
|
|
|
} |
|
|
|
|
|
|
|
.recharge .btn { |
|
|
|
width: 85%; |
|
|
|
height: 80rpx; |
|
|
|
border-radius: 40rpx; |
|
|
|
color: white; |
|
|
|
text-align: center; |
|
|
|
line-height: 80rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
background: $uni-color; |
|
|
|
&-content { |
|
|
|
margin-top: 10rpx; |
|
|
|
color: #707070; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@media all and (min-width: 961px) { |
|
|
|
.recharge { |
|
|
|
left: 50% !important; |
|
|
|
transform: translateX(-50%); |
|
|
|
} |
|
|
|
.tools { |
|
|
|
margin-top: 166rpx; |
|
|
|
padding: 0 69rpx; |
|
|
|
|
|
|
|
.btn { |
|
|
|
width: 100%; |
|
|
|
padding: 29rpx 0; |
|
|
|
color: $uni-text-color-inverse; |
|
|
|
font-size: 28rpx; |
|
|
|
line-height: 40rpx; |
|
|
|
border-radius: 49rpx; |
|
|
|
border: none; |
|
|
|
background-image: linear-gradient(to right, #84A73F, #D8FF8F); |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
