181 lines
4.2 KiB
Vue
181 lines
4.2 KiB
Vue
<template>
|
||
<view style="padding: 30rpx">
|
||
<view class="card_zhaun" style="color: #949494">当前余额：{{ userInfo.money }}</view>
|
||
<view class="card_zhaun">
|
||
<view class="card_zhaun_flex">
|
||
<view class="card_zhaun_flex_title">划转金额</view>
|
||
<input type="number" placeholder="请输入金额" v-model="dataForm.money" />
|
||
</view>
|
||
<view class="card_zhaun_flex">
|
||
<view class="card_zhaun_flex_title">划转给（手机号）</view>
|
||
<input type="number" placeholder="请输入手机号" v-model="dataForm.toPhone" />
|
||
</view>
|
||
<view class="card_zhaun_flex">
|
||
<view class="card_zhaun_flex_title">当前手机号</view>
|
||
<input type="number" disabled placeholder="请输入手机号" v-model="userInfo.mobile" />
|
||
</view>
|
||
<view class="card_zhaun_flex">
|
||
<view class="card_zhaun_flex_title">验证码</view>
|
||
<view style="display: flex; align-items: center; justify-content: space-between; border-bottom: 1rpx solid #e8e8e8">
|
||
<input style="border: 0" type="number" v-model="dataForm.smsCode" placeholder="请输入验证码" />
|
||
<view class="code-btn" @click="getCode">{{ current.seconds || codeIngo }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="card_zhaun">
|
||
<view style="color: #f29100">温馨提示</view>
|
||
<view style="height: 10rpx"></view>
|
||
<view style="font-size: 28rpx; color: #909399">
|
||
<view>1.划转金额实时到账，不扣手续费；</view>
|
||
<view style="height: 10rpx"></view>
|
||
<view>2.划转成功后实时生效，不支持撤回。</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="bottom-btn">
|
||
<view class="button-a" @click="confirm">确认</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed } from 'vue';
|
||
import api from '@/api/index';
|
||
import { Store } from '@/store';
|
||
import { toast } from '@/utils/fun.js';
|
||
import { useCountDown } from '@/uni_modules/wot-design-uni';
|
||
|
||
let dataForm = ref({
|
||
toPhone: '',
|
||
smsCode: '',
|
||
money: ''
|
||
});
|
||
|
||
const codeIngo = ref('获取验证码');
|
||
|
||
const { start, pause, reset, current } = useCountDown({
|
||
time: 60 * 1000,
|
||
onChange(current) {},
|
||
onFinish() {
|
||
codeIngo.value = '重新发送';
|
||
}
|
||
});
|
||
|
||
// 获取验证码方法
|
||
const getCode = (e) => {
|
||
if (!userInfo.value.mobile) {
|
||
toast('请输入手机号');
|
||
return;
|
||
}
|
||
|
||
if (current.value.seconds) {
|
||
toast('请等待倒计时结束');
|
||
return;
|
||
}
|
||
|
||
api.smsCode({
|
||
mobile: userInfo.value.mobile,
|
||
scene: 6
|
||
})
|
||
.then((res) => {
|
||
start();
|
||
toast('验证码发送成功');
|
||
})
|
||
.catch((err) => {
|
||
console.log(err);
|
||
toast('验证码发送失败');
|
||
});
|
||
};
|
||
|
||
const store = Store();
|
||
const userInfo = computed(
|
||
() =>
|
||
store.userInfo || {
|
||
inviteCode: '',
|
||
nickname: '',
|
||
mobile: '',
|
||
avatar: '',
|
||
paywallet: {
|
||
balance: 0
|
||
}
|
||
}
|
||
);
|
||
|
||
const confirm = () => {
|
||
if (!dataForm.value.toPhone) return uni.showToast({ title: '请输入划转手机号', icon: 'none' });
|
||
if (!dataForm.value.money) return uni.showToast({ title: '请输入划转金额', icon: 'none' });
|
||
if (!dataForm.value.smsCode) return uni.showToast({ title: '请输入验证码', icon: 'none' });
|
||
api.transfer2other(dataForm.value).then((res) => {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '划转成功',
|
||
showCancel: false,
|
||
success: () => {
|
||
uni.reLaunch({
|
||
url: '/pages/mine/mine'
|
||
});
|
||
}
|
||
});
|
||
});
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.card_zhaun {
|
||
padding: 30rpx;
|
||
background-color: #fff;
|
||
border-radius: 16rpx;
|
||
margin-bottom: 25rpx;
|
||
&_flex {
|
||
margin-bottom: 20rpx;
|
||
&_title {
|
||
font-size: 28rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
input {
|
||
font-size: 28rpx;
|
||
border-bottom: 1rpx solid #e8e8e8;
|
||
padding: 5rpx 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.bottom-btn {
|
||
width: 100%;
|
||
height: 150rpx;
|
||
padding: 30rpx;
|
||
background-color: #ffffff;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
border-radius: 20rpx 20rpx 0 0;
|
||
box-shadow: 0px 6rpx 16rpx 2rpx rgba(170, 170, 170, 0.35);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.button-a {
|
||
width: 690rpx;
|
||
height: 90rpx;
|
||
background: #799675;
|
||
border-radius: 15rpx;
|
||
text-align: center;
|
||
font-size: 30rpx;
|
||
color: #ffffff;
|
||
line-height: 90rpx;
|
||
}
|
||
}
|
||
|
||
.code-btn {
|
||
width: 175rpx;
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
font-size: 28rpx;
|
||
color: #5d7a4e;
|
||
border: 1rpx solid #5d7a4e;
|
||
text-align: center;
|
||
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
||
}
|
||
</style>
|