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>
|