first commit
This commit is contained in:
PC-202306242200\Administrator
180
pages/wallet/zhaun.vue
Normal file
180
pages/wallet/zhaun.vue
Normal file
@@ -0,0 +1,180 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user