珠宝小程序前端代码
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.
 
 
 

284 lines
5.1 KiB

<template>
<view class="page">
<!-- 导航栏 -->
<navbar title="提现" leftClick @leftClick="$utils.navigateBack" bgColor="#E3441A" color="#fff" />
<!-- 佣金信息 -->
<view class="b-relative center font-m">
<image :src="configList.tx_image" />
<view class="user-money">
<view class="title">总佣金</view>
<view class="money">999999</view>
</view>
<view class="operation">
<view class="operation-item">
余额记录
</view>
|
<view class="operation-item">
提现记录
</view>
|
<view class="operation-item">
佣金记录
</view>
</view>
</view>
<!-- 我要提现 -->
<view class="from-body">
<view class="title">我要提现</view>
<view class="money">
<uv-input placeholder="请输入提现金额" border="surround" v-model="form.money"></uv-input>
</view>
</view>
<!-- 提现说明 -->
<view class="withdrawal-statement">
<view class="title">提现说明</view>
<view v-html="configList.recharge_instructions" class="withdrawal-statement"></view>
</view>
<view class="recharge">
<view @click="withdraw" class="btn">
立即提现
</view>
</view>
</view>
</template>
<script>
import mixinsList from '@/mixins/list.js'
import {
mapState
} from 'vuex'
export default {
mixins: [mixinsList],
data() {
return {
mixinsListApi: 'getWaterPageList',
list: [],
type: ['+', '-'],
state: ['未到账', '已到账'],
form: {
money: ''
},
}
},
computed: {
...mapState(['userInfo', 'riceInfo']),
},
data() {
return {
form: {
type: 1,
price: undefined,
bank: '',
card: ''
},
}
},
onShow() {
this.getConfig()
this.getUserInfo()
this.getTenRealName()
},
methods: {
getConfig() { //获取配置信息
this.$api('getConfig', {}, res => {
if (res.code == 200) {
res.result.forEach(item => {
if (item.keyValue === 'withdraw') {
this.withdrawalStatement = item.content
}
})
}
})
},
withdraw() { //立即提现
let isOk = this.parameterVerification();
if (isOk && !isOk.auth) {
return uni.showToast({
title: isOk.title,
icon: 'none'
})
}
this.$api('recharge', this.form, res => {
if (res.code == 200) {
uni.showToast({
title: '提现成功',
icon: 'none'
})
this.getUserInfo()
}
})
},
getTenRealName() { //获取技师实名认证
this.$api('getTenRealName', {}, res => {
if (res.code == 200) {
let result = res.result;
if (result && result.bank && result.card) {
this.form.bank = result.bank
this.form.card = result.card
}
}
})
},
parameterVerification() { //验证用户参数合法性
let {
price,
bank,
card
} = this.form
if (!price) {
return {
title: '请填写提现金额',
auth: false
}
} else if (price <= 0) {
return {
title: '提现金额必须大于0',
auth: false
}
} else if (price > this.userInfo.price) {
return {
title: '提现金额大于余额',
auth: false
}
} else if (bank.trim() == '') {
return {
title: '请填写开户行',
auth: false
}
} else if (card.trim() == '') {
return {
title: '请填写卡号',
auth: false
}
}
return {
title: '验证通过',
auth: true
}
}
}
}
</script>
<style scoped lang="scss">
.page {
// 佣金信息
.center {
position: relative;
width: 710rpx;
height: 316rpx;
margin: 20rpx auto;
}
.center image {
position: absolute;
left: 0;
top: 0;
width: 710rpx;
height: 316rpx;
border-radius: 12rpx;
}
.center .user-money {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 9;
color: white;
padding-left: 50rpx;
box-sizing: border-box;
.title {
font-size: 36rpx;
}
.money {
font-size: 40rpx;
}
}
.operation {
position: absolute;
bottom: 20rpx;
left: 0rpx;
width: 100%;
display: flex;
justify-content: center;
color: white;
.operation-item {
margin: 0rpx 20rpx;
}
}
// 我要提现
.from-body {
padding: 40rpx 20rpx;
font-size: 28rpx;
text-align: left;
color: #333333;
}
.from-body .title{
font-size: 36rpx;
}
.money {
margin: 20rpx 0rpx;
}
// 提现说明
.withdrawal-statement {
padding: 0rpx 20rpx;
box-sizing: border-box;
.title {
font-size: 36rpx;
margin-bottom: 20rpx;
}
}
.recharge {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
left: 0;
bottom: 0;
width: 750rpx;
height: 100rpx;
background: white;
}
.recharge .btn {
width: 85%;
height: 80rpx;
border-radius: 40rpx;
color: white;
text-align: center;
line-height: 80rpx;
font-size: 28rpx;
background: $uni-color;
}
@media all and (min-width: 961px) {
.recharge {
left: 50% !important;
transform: translateX(-50%);
}
}
}
</style>