|
@@ -0,0 +1,269 @@
|
|
|
|
+<template>
|
|
|
|
+ <view class="withdraw">
|
|
|
|
+ <view class="overage">
|
|
|
|
+ 账户剩余金额:<text class="number">{{ userInfo.income }}元</text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="input-box main-left cross-center">
|
|
|
|
+ <view class="left">姓名</view>
|
|
|
|
+ <view class="center">
|
|
|
|
+ <input v-model="name" type="text" placeholder="请输入姓名">
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="input-box main-left cross-center">
|
|
|
|
+ <view class="left">手机号</view>
|
|
|
|
+ <view class="center">
|
|
|
|
+ <input v-model="phone_num" type="number" placeholder="请输入手机号">
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="input-box main-left cross-center">
|
|
|
|
+ <view class="left">提现账号</view>
|
|
|
|
+ <view class="center">
|
|
|
|
+ <input v-model="account" type="text" placeholder="请输入提现账号">
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="input-box main-left cross-center">
|
|
|
|
+ <view class="left">¥</view>
|
|
|
|
+ <view class="center">
|
|
|
|
+ <input v-model="price" type="text" placeholder="请输入提现金额">
|
|
|
|
+ </view>
|
|
|
|
+ <view class="right" @click="handleAll">全部</view>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ <view class="tips">
|
|
|
|
+ <view>提现金额不能小于{{ setting.withdraw_min }}元</view>
|
|
|
|
+ <view>提现需要加收{{ setting.withdraw_discount }}%手续费</view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="type-box main-between cross-center" @click="show = true">
|
|
|
|
+ <view>提现方式</view>
|
|
|
|
+ <view class="main-left cross-center">
|
|
|
|
+ <text>{{ selectType.name }}</text>
|
|
|
|
+ <u-icon name="arrow-right" :color="$colors.infoColor" bold top="1" />
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ <view class="btn" @click="handleConfirm">提交申请</view>
|
|
|
|
+ <!-- 选择提现方式 -->
|
|
|
|
+ <u-popup
|
|
|
|
+ :show="show"
|
|
|
|
+ :round="20"
|
|
|
|
+ closeable
|
|
|
|
+ @close="handleClose"
|
|
|
|
+ >
|
|
|
|
+ <view class="popup-content">
|
|
|
|
+ <view
|
|
|
|
+ v-for="(type, index) in types"
|
|
|
|
+ :key="index"
|
|
|
|
+ class="type-item main-between cross-center"
|
|
|
|
+ @click="handleSelect(type, index)"
|
|
|
|
+ >
|
|
|
|
+ <view class="left-box dir-left-nowrap cross-center">
|
|
|
|
+ <view class="icon" :class="{bank: index === 2}">
|
|
|
|
+ <image :src="type.icon" />
|
|
|
|
+ </view>
|
|
|
|
+ <text>{{ type.name }}</text>
|
|
|
|
+ </view>
|
|
|
|
+ <u-icon v-if="selectIndex === index" name="checkmark" color="#68EBE9" size="24" />
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </u-popup>
|
|
|
|
+ </view>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+import { mapState } from 'vuex'
|
|
|
|
+export default {
|
|
|
|
+ name: 'Withdraw',
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ price: '',
|
|
|
|
+ account: '',
|
|
|
|
+ name: '',
|
|
|
|
+ phone_num: '',
|
|
|
|
+ setting: { withdraw_min: 0, withdraw_discount: 0 },
|
|
|
|
+ show: false,
|
|
|
|
+ types: [
|
|
|
|
+ { icon: '/static/image/share/wechat.png', value: 1, name: '微信线下打款' },
|
|
|
|
+ { icon: '/static/image/share/alipay.png', value: 2, name: '支付宝线下打款' },
|
|
|
|
+ { icon: '/static/image/share/bank.png', value: 3, name: '银联线下打款' }
|
|
|
|
+ ],
|
|
|
|
+ selectIndex: 0,
|
|
|
|
+ selectType: {}
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ computed: {
|
|
|
|
+ ...mapState({
|
|
|
|
+ userInfo: seate => seate.user.info
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ handleConfirm() {
|
|
|
|
+ if (!this.name) {
|
|
|
|
+ this.$u.toast(`请输入姓名`)
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+ if (!this.phone_num) {
|
|
|
|
+ this.$u.toast(`请输入手机号`)
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+ if (!this.account) {
|
|
|
|
+ this.$u.toast(`请输入账号`)
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+ if (Object.keys(this.selectType).length === 0) {
|
|
|
|
+ this.$u.toast(`请选择提现方式`)
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+ if (parseFloat(this.price) < parseFloat(this.setting.withdraw_min)) {
|
|
|
|
+ this.$u.toast(`提现金额不能小于${this.setting.withdraw_min}元`)
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+ if (parseFloat(this.price) > this.userInfo.income) {
|
|
|
|
+ this.$u.toast(`提现金额不能大于可提现余额`)
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+ if (Object.keys(this.selectType).length === 0) {
|
|
|
|
+ this.$u.toast(`请选择提现方式`)
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ const params = {
|
|
|
|
+ price: this.price,
|
|
|
|
+ type: this.selectType.value,
|
|
|
|
+ account: this.account,
|
|
|
|
+ name: this.name,
|
|
|
|
+ phone_num: this.phone_num
|
|
|
|
+ }
|
|
|
|
+ this.$loading()
|
|
|
|
+ this.$api.share.withdraw.create(params).then(res => {
|
|
|
|
+ this.$hideLoading()
|
|
|
|
+ this.$u.toast(`提交成功`)
|
|
|
|
+ this.$api.user.info().then(res => {
|
|
|
|
+ this.$store.dispatch('user/info', res.data)
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ this.$u.route({ type: 'redirect', url: '/pages/share/withdrawDetail?active=1' })
|
|
|
|
+ }, 500)
|
|
|
|
+ })
|
|
|
|
+ }).catch(() => {
|
|
|
|
+ this.$hideLoading()
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ handleAll() {
|
|
|
|
+ this.price = this.userInfo.income
|
|
|
|
+ },
|
|
|
|
+ handleSelect(item, index) {
|
|
|
|
+ this.selectIndex = index
|
|
|
|
+ this.selectType = item
|
|
|
|
+ this.handleClose()
|
|
|
|
+ },
|
|
|
|
+ handleClose() {
|
|
|
|
+ this.show = false
|
|
|
|
+ },
|
|
|
|
+ getSetting() {
|
|
|
|
+ this.$loading()
|
|
|
|
+ this.$api.share.setting().then(res => {
|
|
|
|
+ this.$hideLoading()
|
|
|
|
+ this.setting = res.data
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ onLoad() {
|
|
|
|
+ this.getSetting()
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
+.withdraw {
|
|
|
|
+ padding: 30rpx 30rpx 80rpx;
|
|
|
|
+ color: #FFFFFF;
|
|
|
|
+ font-size: 38rpx;
|
|
|
|
+ .overage{
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ padding-bottom: 30rpx;
|
|
|
|
+ border-bottom: 1rpx solid #232849;
|
|
|
|
+ .number{
|
|
|
|
+ color: #6eebe8;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .input-box{
|
|
|
|
+ padding: 30rpx 0;
|
|
|
|
+ border-bottom: 1rpx solid #232849;
|
|
|
|
+ .left{
|
|
|
|
+ width: 180rpx;
|
|
|
|
+ }
|
|
|
|
+ .center{
|
|
|
|
+ flex: 1;
|
|
|
|
+ margin-left: 10rpx;
|
|
|
|
+ }
|
|
|
|
+ .right{
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
+ color: #6eebe8;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .tips{
|
|
|
|
+ background: #1c203b;
|
|
|
|
+ border-radius: 20rpx;
|
|
|
|
+ padding: 30rpx 20rpx;
|
|
|
|
+ color: #ccc;
|
|
|
|
+ margin: 30rpx 0;
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
+ }
|
|
|
|
+ .type-box{
|
|
|
|
+ border-bottom: 1rpx solid #232849;
|
|
|
|
+ padding: 30rpx 0;
|
|
|
|
+ text{
|
|
|
|
+ margin-right: 10rpx;
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .btn{
|
|
|
|
+ background: linear-gradient(270deg, #6EEBE8 0%, #FF74B9 100%);
|
|
|
|
+ text-align: center;
|
|
|
|
+ padding: 26rpx 0;
|
|
|
|
+ width: 90%;
|
|
|
|
+ margin: 60rpx auto;
|
|
|
|
+ border-radius: 50rpx;
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
+ }
|
|
|
|
+ .popup-content{
|
|
|
|
+ padding: 120rpx 0 40rpx;
|
|
|
|
+ .type-item{
|
|
|
|
+ padding: 20rpx 40rpx;
|
|
|
|
+ background: transparent;
|
|
|
|
+ border: none;
|
|
|
|
+ text-align: unset;
|
|
|
|
+ width: 100%;
|
|
|
|
+ line-height: initial;
|
|
|
|
+ font-size: initial;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ border-top: 1rpx solid #CECFD1;
|
|
|
|
+ border-radius: 0;
|
|
|
|
+ &:first-child{
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ .left-box{
|
|
|
|
+ flex: 1;
|
|
|
|
+ .icon{
|
|
|
|
+ width: 60rpx;
|
|
|
|
+ height: 48rpx;
|
|
|
|
+ transform: translateY(4rpx);
|
|
|
|
+ image{
|
|
|
|
+ width: 48rpx;
|
|
|
|
+ height: 48rpx;
|
|
|
|
+ }
|
|
|
|
+ &.bank{
|
|
|
|
+ image{
|
|
|
|
+ width: 56rpx;
|
|
|
|
+ height: 38rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ text{
|
|
|
|
+ color: #777777;
|
|
|
|
+ margin-left: 10rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</style>
|