336 lines
7.6 KiB
Vue
336 lines
7.6 KiB
Vue
<template>
|
||
<view class="containear bg-w">
|
||
<u-tabs v-if="type == 2" class="bg-w" :list="tabsList" @click="handlerTabClick"></u-tabs>
|
||
<u--form
|
||
:model="model1"
|
||
:rules="rules"
|
||
ref="uForm"
|
||
labelPosition="left"
|
||
labelWidth="90">
|
||
<u-form-item
|
||
label="转账类型"
|
||
prop="form.transferType"
|
||
borderBottom
|
||
@click="showTransferType = true; hideKeyboard()"
|
||
ref="item1"
|
||
v-if="type == 2 && tabsIndex == 1"
|
||
>
|
||
<u--input
|
||
:value="transferType != null ? actions[transferType]['name']:''"
|
||
disabled
|
||
disabledColor="#ffffff"
|
||
placeholder="请选择转账类型"
|
||
border="none"
|
||
></u--input>
|
||
<u-icon
|
||
slot="right"
|
||
name="arrow-right"
|
||
></u-icon>
|
||
</u-form-item>
|
||
<u-form-item
|
||
label="转入账号"
|
||
prop="form.proceedUsername"
|
||
borderBottom
|
||
>
|
||
<u--input
|
||
v-model="model1.form.proceedUsername"
|
||
disabledColor="#ffffff"
|
||
placeholder="请输入转入账号"
|
||
border="none"
|
||
></u--input>
|
||
<u-button
|
||
slot="right"
|
||
@tap="handlerCheck"
|
||
text="校验"
|
||
type="success"
|
||
size="mini"
|
||
:disabled="disabled1"
|
||
></u-button>
|
||
</u-form-item>
|
||
<u-form-item
|
||
label="账号昵称"
|
||
prop="nickname"
|
||
borderBottom
|
||
>
|
||
<u--input
|
||
v-model="nickname"
|
||
disabledColor="#ffffff"
|
||
disabled
|
||
placeholder="账号昵称"
|
||
border="none"
|
||
></u--input>
|
||
</u-form-item>
|
||
<u-form-item
|
||
label="转账数量"
|
||
prop="form.transferAccount"
|
||
borderBottom
|
||
>
|
||
<u--input
|
||
type="number"
|
||
v-model="model1.form.transferAccount"
|
||
disabledColor="#ffffff"
|
||
placeholder="请输入转账数量"
|
||
border="none"
|
||
></u--input>
|
||
</u-form-item>
|
||
<u-form-item
|
||
label="备注"
|
||
prop="form.remar"
|
||
borderBottom
|
||
>
|
||
<u--input
|
||
v-model="model1.form.remark"
|
||
disabledColor="#ffffff"
|
||
placeholder="请输入备注"
|
||
border="none"
|
||
></u--input>
|
||
</u-form-item>
|
||
<u-form-item
|
||
label="验证码"
|
||
prop="form.code"
|
||
borderBottom
|
||
class="flex"
|
||
>
|
||
<u--input
|
||
v-model="model1.form.code"
|
||
disabledColor="#ffffff"
|
||
placeholder="请输入验证码"
|
||
border="none"
|
||
></u--input>
|
||
<sms :phone="userInfo.mobile" :username="userInfo.username" typeCode="5"></sms>
|
||
<!-- <u-button
|
||
slot="right"
|
||
@tap="getCode"
|
||
:text="tips"
|
||
type="success"
|
||
size="mini"
|
||
:disabled="disabled1"
|
||
></u-button> -->
|
||
</u-form-item>
|
||
<u-form-item
|
||
label="支付密码"
|
||
prop="form.payPassword"
|
||
borderBottom
|
||
>
|
||
<u--input
|
||
type="password"
|
||
v-model="model1.form.payPassword"
|
||
disabledColor="#ffffff"
|
||
placeholder="请输入支付密码"
|
||
border="none"
|
||
></u--input>
|
||
</u-form-item>
|
||
</u--form>
|
||
<u-button
|
||
type="primary"
|
||
text="提交"
|
||
customStyle="margin-top: 50px"
|
||
@click="handlerSubmit"
|
||
></u-button>
|
||
<u-action-sheet
|
||
:show="showTransferType"
|
||
:actions="actions"
|
||
title="请选择转账类型"
|
||
@close="showTransferType = false"
|
||
@select="handlerTransferType"
|
||
>
|
||
</u-action-sheet>
|
||
<u-code
|
||
ref="uCode"
|
||
@change="codeChange"
|
||
seconds="60"
|
||
@start="disabled1 = true"
|
||
@end="disabled1 = false"
|
||
></u-code>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import url from '@/common/http/url.js';
|
||
import sms from "@/components/sms.vue";
|
||
import { mapState } from 'vuex'
|
||
export default {
|
||
components: {
|
||
sms
|
||
},
|
||
data() {
|
||
return {
|
||
disabled1: false,
|
||
tips: '获取验证码',
|
||
tabsList: [
|
||
{ name: '转绿色积分'},
|
||
{ name: '转管理钱包'}
|
||
],
|
||
tabsIndex: 0,
|
||
transferType: 0,
|
||
nickname: null,
|
||
model1: {
|
||
form: {
|
||
proceedUsername: null,
|
||
transferAccount: null,
|
||
code: null,
|
||
payPassword: null
|
||
}
|
||
},
|
||
showTransferType: false,
|
||
actions: [
|
||
{
|
||
name: '转账给自己',
|
||
index: 0
|
||
},
|
||
{
|
||
name: '转账给他人',
|
||
index: 1
|
||
}
|
||
],
|
||
rules: {
|
||
'form.proceedUsername': {
|
||
type: 'string',
|
||
required: true,
|
||
message: '请输入转入账号',
|
||
trigger: ['blur', 'change']
|
||
},
|
||
'form.transferAccount': {
|
||
type: 'string',
|
||
required: true,
|
||
message: '请输入转账数量',
|
||
trigger: ['blur', 'change']
|
||
},
|
||
'form.code': {
|
||
type: 'string',
|
||
required: true,
|
||
message: '请输入验证码',
|
||
trigger: ['blur', 'change']
|
||
},
|
||
'form.payPassword': {
|
||
type: 'string',
|
||
required: true,
|
||
message: '请输入支付密码',
|
||
trigger: ['blur', 'change']
|
||
},
|
||
},
|
||
type: null
|
||
};
|
||
},
|
||
onReady() {
|
||
//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
|
||
console.log('this.$refs.uForm', this.$refs.uForm)
|
||
this.$refs.uForm.setRules(this.rules)
|
||
},
|
||
onLoad(e) {
|
||
this.type = e.type || null;
|
||
let title = ''
|
||
// if (e.type == 1) {
|
||
// title = '转账'
|
||
// }
|
||
// uni.setNavigationBarTitle({
|
||
// title: title
|
||
// })
|
||
},
|
||
computed: {
|
||
...mapState(["userInfo"])
|
||
},
|
||
methods: {
|
||
handlerCheck () {
|
||
let userName = this.model1.form.proceedUsername
|
||
if (!userName) return this.$msg('请输入转入账号')
|
||
this.$http("GET", url.user.getUserInfo, {
|
||
username: userName
|
||
}).then(({ code, data }) => {
|
||
if (code == 200) {
|
||
if (data == null) this.$msg('用户不存在');
|
||
else this.nickname = data.nickname;
|
||
}
|
||
})
|
||
},
|
||
handlerTransferType (e) {
|
||
console.log(e)
|
||
let { index } = e;
|
||
this.transferType = index;
|
||
if (index == 0) {
|
||
this.model1.form.proceedUsername = this.userInfo.username;
|
||
this.model1.form.nickname = this.userInfo.nickname;
|
||
|
||
} else {
|
||
this.model1.form.proceedUsername = '';
|
||
this.model1.form.nickname = '';
|
||
}
|
||
},
|
||
handlerTransfer () {
|
||
if (!this.nickname) return this.$msg('请校验用户是否存在');
|
||
if (this.model1.form.transferAccount <=0) return this.$msg('转账数量必须大于0')
|
||
let _type = null;
|
||
if( this.type == 2) {
|
||
_type = this.transferType == 0 ? 4 : 6
|
||
} else {
|
||
_type = 2
|
||
}
|
||
this.$httpJson('POST', url.asset.transferAccount, {
|
||
type:2,
|
||
memberUsername: this.userInfo.username,
|
||
mobile: this.userInfo.mobile,
|
||
...this.model1.form
|
||
}).then(({ code, msg }) => {
|
||
this.$msg(msg);
|
||
if (code == 200) {
|
||
setTimeout(() => {
|
||
uni.navigateBack()
|
||
},2000)
|
||
}
|
||
})
|
||
},
|
||
handlerSubmit () {
|
||
// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
|
||
if (this.tabsIndex == 1) {
|
||
if (this.transferType == null)return this.$msg('请选择转账类型');
|
||
}
|
||
|
||
|
||
this.$refs.uForm.validate().then(res => {
|
||
this.handlerTransfer()
|
||
}).catch(errors => {
|
||
// uni.$u.toast('校验失败')
|
||
})
|
||
},
|
||
handlerTabClick (e) {
|
||
console.log(e);
|
||
let { index } = e;
|
||
this.tabsIndex = index;
|
||
},
|
||
codeChange(text) {
|
||
this.tips = text;
|
||
},
|
||
getCode() {
|
||
if (this.$refs.uCode.canGetCode) {
|
||
// 模拟向后端请求验证码
|
||
uni.showLoading({
|
||
title: '正在获取验证码'
|
||
})
|
||
setTimeout(() => {
|
||
uni.hideLoading();
|
||
// 这里此提示会被this.start()方法中的提示覆盖
|
||
uni.$u.toast('验证码已发送');
|
||
// 通知验证码组件内部开始倒计时
|
||
this.$refs.uCode.start();
|
||
}, 2000);
|
||
} else {
|
||
uni.$u.toast('倒计时结束后再发送');
|
||
}
|
||
},
|
||
hideKeyboard () {
|
||
uni.hideKeyboard()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
/deep/.u-tabs__wrapper__nav__item {
|
||
flex: 1;
|
||
}
|
||
.containear {
|
||
height: 100%;
|
||
padding: 0 20rpx;
|
||
}
|
||
</style>
|