软测宝小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
keysass_app/pages/personal/setup/accountoverview.vue

701 lines
22 KiB

<template>
<view>
<view class="accounmt">
<view v-show="isadd && !motify">
<p class="selectadd" style="margin-bottom: 20px;">选择添加类型</p>
<u-input style="width:100%;" v-model="accountform.paytype" type="select" @click="psytypeshow = true"
placeholder='选择添加类型' />
<u-select v-model="psytypeshow" :list="payList" @confirm="paychange"
mode="mutil-column-auto"></u-select>
<div style="border: 1px dashed #EBEBEB;margin: 20px 0;"></div>
<div v-if="accountform.paytype == '支付宝'"
style="display: flex;align-items: center;margin-bottom:10px;justify-content: space-between;">
<view style="display: flex;align-items: center;">
<img style="width:19px;height:19px;margin-right:5px;" src="/static/crowd/PAYB.png" alt="">
<p class="selectadd">支付宝账号</p>
</view>
<view @click="accountReset('支付宝')" style="color: #2587FA;">重置账号</view>
</div>
<div v-if="accountform.paytype == '银行卡'"
style="display: flex;align-items: center;margin-bottom:10px;justify-content: space-between;">
<view style="display: flex;align-items: center;">
<img style="width:18px;height:15px;margin-right:5px;" src="/static/crowd/bankcad.png" alt="">
<p class="selectadd">银行卡账号</p>
</view>
<view @click="accountReset('银行卡')" style="color: #2587FA;">重置账号</view>
</div>
<u-form :model="accountform" ref="accountform" label-position='left' label-width='140'
border-bottom='false'>
<view v-if="accountform.paytype == '支付宝' && !accountdata.alipay">
<u-form-item label="姓 名:" prop="name" border-bottom='false' required='true'>
<u-input style="" v-model="accountform.name"></u-input>
</u-form-item>
<u-form-item label="账 号:" prop="alipay" border-bottom='false' required='true'>
<u-input v-model="accountform.alipay"></u-input>
</u-form-item>
<view class="tishi">
<image style="width: 21rpx;height: 21rpx;margin-right: 10rpx;"
src="../../../static/crowd/zhuyi.png" mode=""></image>
账号添加后暂不支持更改,请仔细检查后再提交确定
</view>
<view class="addbtn">
<view class="addbtnff" v-if="accountform.paytype == '支付宝' && !accountdata.alipay"
@click="acsumbit('determine')"
style='background: linear-gradient(90deg, #5EA6FD, #1A81F9);'>确定</view>
<view v-if="accountform.paytype == '支付宝' && !accountdata.alipay" class="addbtnff"
@click="acsumbit('cancel')"
style="border: 1px solid #E0E0E0;background: #FFFFFF;color: #666666;">取消</view>
</view>
</view>
<view v-if="accountform.paytype == '银行卡' && !accountdata.bankAccount">
<u-form-item label="姓 名:" prop="name" border-bottom='false' required='true'>
<u-input style="" v-model="accountform.name"></u-input>
</u-form-item>
<u-form-item label="开户行:" prop="bankDeposit" border-bottom='false' required='true'>
<u-input v-model="accountform.bankDeposit"></u-input>
</u-form-item>
<u-form-item label="账 号:" prop="bankAccount" border-bottom='false' required='true'>
<u-input v-model="accountform.bankAccount"></u-input>
</u-form-item>
<view class="tishi">
<image style="width: 21rpx;height: 21rpx;margin-right: 10rpx;"
src="../../../static/crowd/zhuyi.png" mode=""></image>
账号添加后暂不支持更改,请仔细检查后再提交确定
</view>
<view class="addbtn">
<view class="addbtnff" v-if="accountform.paytype == '银行卡' && !accountdata.bankAccount"
@click="acsumbit('determine')"
style='background: linear-gradient(90deg, #5EA6FD, #1A81F9);'>确定</view>
<view v-if="accountform.paytype == '银行卡' && !accountdata.bankAccount" class="addbtnff"
@click="acsumbit('cancel')"
style="border: 1px solid #E0E0E0;background: #FFFFFF;color: #666666;">取消</view>
</view>
</view>
</u-form>
<!-- 已添加账号 -->
<view class="yitianjiaed" v-if="accountform.paytype == '支付宝' && accountdata.alipay">
<view class="yitianjiaedtext">
<text>*</text>
姓名:{{ accountdata.name }}
</view>
<view class="yitianjiaedtext">
<text>*</text>
账号:{{ accountdata.alipay }}
</view>
</view>
<view class="yitianjiaed" v-if="accountform.paytype == '银行卡' && accountdata.bankAccount">
<view class="yitianjiaedtext">
<text>*</text>
姓名:{{ accountdata.name }}
</view>
<view class="yitianjiaedtext">
<text>*</text>
开户行:{{ accountdata.bankDeposit }}
</view>
<view class="yitianjiaedtext">
<text>*</text>
账号:{{ accountdata.bankAccount }}
</view>
</view>
</view>
<view v-show="!isadd && !motify">
<view v-if="accountdata.alipay && accountdata.bankAccount" @click="accountdatadia('查看账户')"
style="display:flex;align-items:center;font-size:15px;cursor: pointer;">
<!-- <img style="width:20px;height:20px" src="/static/crowd/add.png" alt=""> -->
<p style="color:#2286FA;margin: 0 5px;">查看账户</p>
</view>
<view v-else @click="accountdatadia('添加账户')"
style="display:flex;align-items:center;font-size:15px;cursor: pointer;">
<img style="width:20px;height:20px" src="/static/crowd/add.png" alt="">
<p style="color:#2286FA;margin: 0 5px;">添加账户</p>
<p v-if="!accountdata.alipay && !accountdata.bankAccount" style="color:#666666FF;font-size:13px;">
(还未添加账户,无法提现)</p>
</view>
<div class="test_content">
<div
style="padding:20px;background: #F2F4F7FF;border-radius: 6px 6px 0px 0px;border: 1px solid #E6E8EB;">
<p style="font-size:26px;color:#1A1A1AFF;font-weight: bold;">账户余额</p>
<p style="margin: 20px 0 0 0;">
<span style="font-size:30px;color:#F65B24FF;">{{ accountdata.balance }}</span>
<span style="font-size:18px;color:#A6A6A6;margin-left: 10px;">元</span>
</p>
</div>
<div class="Withdrawable">
<p>可提现余额:{{ accountdata.availableBalance }}元</p>
</div>
<!-- <u-divider use-solt='false'></u-divider> -->
<!-- <div class="linex"></div> -->
<div style="margin-top:35px;display: flex;">
<button class="applbtn" @click="chongzhi"
style='background: linear-gradient(90deg, #5EA6FD, #1A81F9);'>充值</button>
<button class="applbtn" @click="openwitd"
style='border: 1px solid #2468F6;color: #2468F6; background: #FFFFFF;'>提现</button>
<!-- <button @click="openwitd" class="addbtnff" style='border: 1px solid #2468F6;'>提现</button> -->
<!-- <view style="width:150px;height:50px;font-size: 18px;margin-right:20px;">充值</view>
<view style="width:150px;height:50px;font-size: 18px;margin-left:20px;">提现</view> -->
</div>
</div>
</view>
<view v-show="motify">
<u-form :model="accountform" ref="accountform" label-position='left' label-width='140'
border-bottom='false'>
<view v-if="accountform.paytype == '支付宝' && accountdata.alipay">
<u-form-item labelWidth="0" prop="name" border-bottom='false' required='true'>
<u-input v-model="accountform.name" placeholder="请输入姓名"></u-input>
</u-form-item>
<u-form-item labelWidth="0" prop="alipay" border-bottom='false' required='true'>
<u-input v-model="accountform.alipay" placeholder="请输入支付宝账号"></u-input>
</u-form-item>
<u-form-item labelWidth="0" prop="mobile" border-bottom='false' required='true'>
<u-input v-model="accountform.mobile" placeholder="请输入手机号" disabled></u-input>
</u-form-item>
<u-form-item labelWidth="0" prop="code" border-bottom='false' required='true'>
<div style="display: flex;">
<u-input v-model="accountform.code" placeholder="请输入验证码" style="width: 70%;"></u-input>
<view :class="verifyCodeText.disabled ? 'btnDisable getVerifyCode' : 'getVerifyCode'"
@click="getVerifyCode">{{ verifyCodeText.text }}</view>
</div>
</u-form-item>
<view class="resetSubmit">
<view class="resetBtn" @click="acsumbit('determine')"
style='background: linear-gradient(90deg, #5EA6FD, #1A81F9);'>提交</view>
</view>
</view>
<view v-if="accountform.paytype == '银行卡' && accountdata.bankAccount">
<u-form-item labelWidth="0" prop="name" border-bottom='false' required='true'>
<u-input v-model="accountform.name" placeholder="请输入姓名"></u-input>
</u-form-item>
<u-form-item labelWidth="0" prop="bankDeposit" border-bottom='false' required='true'>
<u-input v-model="accountform.bankDeposit" placeholder="请输入开户行"></u-input>
</u-form-item>
<u-form-item labelWidth="0" prop="bankAccount" border-bottom='false' required='true'>
<u-input v-model="accountform.bankAccount" placeholder="请输入银行卡号"></u-input>
</u-form-item>
<u-form-item labelWidth="0" prop="mobile" border-bottom='false' required='true'>
<u-input v-model="accountform.mobile" placeholder="请输入手机号" disabled></u-input>
</u-form-item>
<u-form-item labelWidth="0" prop="code" border-bottom='false' required='true'>
<div style="display: flex;">
<u-input v-model="accountform.code" placeholder="请输入验证码" style="width: 70%;"></u-input>
<view :class="verifyCodeText.disabled ? 'btnDisable getVerifyCode' : 'getVerifyCode'"
@click="getVerifyCode">{{ verifyCodeText.text }}
</view>
</div>
</u-form-item>
<view class="resetSubmit">
<view class="resetBtn" @click="acsumbit('determine')"
style='background: linear-gradient(90deg, #5EA6FD, #1A81F9);'>提交</view>
</view>
</view>
</u-form>
</view>
</view>
<u-toast ref="uToast"></u-toast>
<!-- 充值弹层 -->
<u-popup style="background:#66666;padding:20px;" v-model="lqPasswordShow" mode="bottom" length="80%"
height='40%' border-radius="15" :closeable='true' :mask-close-able="false">
<!-- <u-code-input dot v-model="qbpassword" :maxlength="6"></u-code-input> -->
<view style="height:100rpx">
</view>
<view style="font-weight: 500;font-size: 26rpx;color: #1A1A1A;margin-bottom: 40rpx;">充值金额</view>
<u-input v-model="chongzhinum" type="digit" :border="true" />
<view class="button-g"
style="width:80vw; background: linear-gradient(90deg, #5EA6FD, #1A81F9);color: #FFFFFF;margin-top: 80rpx;margin-left: 80rpx;"
@click="chongzhipay">充值</view>
</u-popup>
</view>
</template>
<script>
export default {
data() {
return {
lqPasswordShow: false,
chongzhinum: null,
accountdata: {},
wxUserInfo: null,
isadd: false,
verifyCodeText: {
text: '获取验证码',
timer: '',
disabled: false
},
motify: false,
psytypeshow: false,
payList: [{ value: '1', label: '支付宝' }, { value: '2', label: '银行卡' },],
accountform: { paytype: '支付宝', name: '', alipay: '', bankDeposit: '', bankAccount: '' },
accountRules: {
name: [
{ required: true, message: "姓名不能为空", trigger: "blur" },
{ max: 4, message: '最多输入4个中文', trigger: 'change' },
{
pattern:
/^(?:[\u4e00-\u9fa5·]{2,16})$/,
message: "请输入中文",
trigger: "blur",
},
],
code: [
{ required: true, message: "请输入验证码", trigger: "blur" },
],
bankDeposit: [
{ required: true, message: "开户行不能为空", trigger: "blur" },
{
pattern:
/^(?:[\u4e00-\u9fa5·]{2,16})$/,
message: "请输入中文",
trigger: "blur",
},
],
alipay: [
{ required: true, message: "账号不能为空", trigger: "blur" },
{ max: 25, message: '账号格式不对', trigger: 'change' },
{
message: '账号格式不对',
trigger: 'change',
pattern: /(^[\w.\-]+@(?:[a-z0-9]+(?:-[a-z0-9]+)*\.)+[a-z]{2,3}$)|(^1[3|4|5|8]\d{9}$)/,
},
],
bankAccount: [
{ required: true, message: "账号不能为空", trigger: "blur" },
// {min:16, message: '账号格式不对', trigger: 'change' },
// {max:19, message: '账号格式不对', trigger: 'change' },
// {
// message: '账号格式不对',
// trigger: 'change',
// pattern:/^[1-9]\d*$/,
// }
{
validator: (rule, value, callback) => {
const str = value.replace(/\s/g, '');
if (/^[1-9]\d*$/.test(str)) {
if (str.length <= 19 && str.length >= 16) {
callback()
} else {
callback(new Error('账号位数错误'));
}
} else {
callback(new Error('卡号只能为数字'));
}
},
trigger: ['blur'],
}
],
},
Withdrawalform: { withdraw: 'alipay', recordAmount: '', password: '' }
}
},
onReady() {
this.$refs.accountform.setRules(this.accountRules);
},
onShow() {
if (this.isadd) {
uni.setNavigationBarTitle({
title: '添加账户'
});
} else {
uni.setNavigationBarTitle({
title: '账户概览'
});
}
},
onLoad() {
},
mounted() {
this.wxUserInfo = uni.getStorageSync('wxUserInfo');
let userId = this.wxUserInfo.userId
this.http.quickGet(`/mpay/my/account/${userId}`, true).then(res => {
this.accountdata = res.data
this.accountform.name = res.data.name
this.accountform.alipay = res.data.alipay
this.accountform.bankDeposit = res.data.bankDeposit
this.accountform.bankAccount = res.data.bankAccount
})
},
methods: {
paychange(e) {
this.accountform.paytype = e[0].label
},
// 添加账户
accountdatadia(val) {
this.isadd = true
uni.setNavigationBarTitle({
title: val
});
},
accountReset(val) {
uni.setNavigationBarTitle({
title: '充值账户'
});
this.motify = true
this.accountform = { paytype: '', name: '', alipay: '', bankDeposit: '', bankAccount: '' }
this.accountform.paytype = val
console.log(this.wxUserInfo);
this.accountform.mobile = this.wxUserInfo.phonenumber
},
// 获取验证码
getVerifyCode() {
if (this.verifyCodeText.disabled) {
return
}
const url = this.wxUserInfo.phonenumber
this.verifyCodeText.disabled = true
this.http.quickGet('/captchaUserLogin?phoneNumber=' + url)
.then((res) => {
if (res.data.code == 200) {
this.accountform.uuid = res.data.uuid
uni.showToast({
title: '发送成功',
icon: 'none',
duration: 1000,
})
const TIME_COUNT = 60 //更改倒计时时间
if (!this.verifyCodeText.timer) {
this.verifyCodeText.text = TIME_COUNT
this.verifyCodeText.disabled = true
this.verifyCodeText.timer = setInterval(() => {
if (this.verifyCodeText.text > 0 && this.verifyCodeText.text <= TIME_COUNT) {
this.verifyCodeText.text--
} else {
this.verifyCodeText.disabled = false
// this.verifyCodeText.show = true
clearInterval(this.verifyCodeText.timer) // 清除定时器
this.verifyCodeText.timer = null
this.verifyCodeText.text = '获取验证码'
}
}, 1000)
}
} else {
this.verifyCodeText.disabled = false
uni.showToast({
title: res.data.msg,
icon: 'none',
duration: 1000,
})
}
})
.catch((err) => {
this.verifyCodeText.disabled = false
console.log('err', err)
})
},
// 添加账户
acsumbit(type) {
if (type == 'cancel') {
this.isadd = false
uni.setNavigationBarTitle({
title: '账户概览'
});
} else {
this.$refs.accountform.validate((valid) => {
if (valid) {
let data = {};
if (this.accountform.paytype == '支付宝') {
data = {
name: this.accountform.name,
accountId: this.accountdata.accountId,
userId: this.wxUserInfo.userId,
alipay: this.accountform.alipay
}
} else {
data = {
name: this.accountform.name,
accountId: this.accountdata.accountId,
userId: this.wxUserInfo.userId,
bankAccount: this.accountform.bankAccount.replace(/\s/g, ''),
bankDeposit: this.accountform.bankDeposit
}
}
console.log('添加账号data---', data)
// return;
let url = ''
if (this.motify) {
data.uuid = this.accountform.uuid
data.code = this.accountform.code
url = `/mpay/update/account`
} else {
url = `/mpay/setting/account`
}
this.http.quickPost(url, data, true).then(res => {
console.log('res---', res)
let toastTitle = '';
this.motify ? (toastTitle = '重置成功'):(toastTitle = '添加成功')
if (res.data.data.code == 200) {
this.$refs.uToast.show(
{
type: 'success',
title: toastTitle,
duration: 2000,
}
)
// uni.showToast({ title: '添加成功', icon: 'none', duration: 1000, success() {
// this.isadd = false
// } });
// 获取最新账号信息
this.isadd = false
this.motify = false
this.wxUserInfo = uni.getStorageSync('wxUserInfo');
let userId = this.wxUserInfo.userId
this.http.quickGet(`/mpay/my/account/${userId}`, true).then(res => {
this.accountdata = res.data
this.accountform.name = res.data.name
this.accountform.alipay = res.data.alipay
this.accountform.bankDeposit = res.data.bankDeposit
this.accountform.bankAccount = res.data.bankAccount
})
} else {
this.$refs.uToast.show(
{
type: 'error',
title: "添加失败",
duration: 2000,
}
)
}
})
} else {
console.log('效验失败---', data)
}
})
}
},
// 提现
openwitd() {
// 如果没有提现额度
if (this.accountdata.availableBalance == 0) {
return this.$refs.uToast.show(
{
type: 'default',
title: "您的提现额度不足, 无法提现",
}
)
}
// 如果两个账户都没有
if (!this.accountform.alipay && !this.accountform.bankAccount) {
this.$refs.uToast.show(
{
type: 'default',
title: "请先添加提现账户",
}
)
} else {
uni.navigateTo({
url: '/pages/personal/setup/Withdrawal'
})
}
},
// 打开充值
chongzhi() {
this.lqPasswordShow = true
},
// 充值
chongzhipay() {
const that = this
const data = {
paytype: 'W06',
userId: this.accountdata.userId,
accountId: this.accountdata.accountId,
remark: '',
price: this.chongzhinum,
recordName: '小程序端微信充值',
}
this.http.quickPost(`/play/recharge`, data, true).then(res => {
const info = JSON.parse(res.data.payinfo)
uni.requestPayment({
timeStamp: info.timeStamp,
nonceStr: info.nonceStr,
package: info.package,
signType: info.signType,
paySign: info.paySign,
success(r) {
that.wxUserInfo = uni.getStorageSync('wxUserInfo');
let userId = that.wxUserInfo.userId
that.http.quickGet(`/mpay/my/account/${userId}`, true).then(res => {
that.accountdata = res.data
that.accountform.name = res.data.name
that.accountform.alipay = res.data.alipay
that.accountform.bankDeposit = res.data.bankDeposit
that.accountform.bankAccount = res.data.bankAccount
})
uni.showToast({
icon: 'none',
title: '充值成功'
})
that.lqPasswordShow = false
that.chongzhinum = ''
},
fail(error) {
console.log(error);
uni.showToast({
icon: 'none',
title: '充值失败'
})
}
})
})
}
}
}
</script>
<style>
.button-g {
width: 540rpx;
height: 70rpx;
background: linear-gradient(90deg, #FF8600, #FE2B2B);
border-radius: 35rpx;
text-align: center;
line-height: 70rpx;
color: #FFFFFF;
font-size: 30rpx;
margin-left: 13px;
}
/* #F2F4F7 */
.accounmt {
background: #FFFFFF;
width: 96vw;
height: 96vh;
margin: 2vh auto;
border-radius: 10px;
padding: 10px 13px;
}
.test_content {
margin: 30px 0;
/* background: #F2F4F7FF; */
text-align: center;
}
.linex {
height: 1rpx;
width: 100%;
background: #EBEBEB
}
.applbtn {
border-radius: 50px;
width: 150px;
height: 40px;
font-size: 18px;
margin-right: 20px;
background: #909399;
text-align: center;
line-height: 40px;
color: #FFFFFF;
}
.Withdrawable {
background: #DDE8F8;
border-radius: 0px 0px 6px 6px;
border: 1px solid #E6E8EB;
height: 100rpx;
line-height: 100rpx;
font-size: 16px;
color: #666666FF;
}
.selectadd {
color: #000000;
font-size: 16px;
font-weight: bold;
}
.u-input {
padding: 0 10px !important;
height: 35px;
border-radius: 4rpx;
border: 1px solid #E6E6E6;
}
.addbtn {
display: flex;
justify-content: space-evenly;
position: fixed;
bottom: 50px;
width: 100%;
margin-left: -40rpx;
}
.resetSubmit {
margin-top: 30px;
display: flex;
justify-content: center;
}
.resetBtn {
width: 85%;
height: 70rpx;
border-radius: 35rpx;
line-height: 70rpx;
font-weight: 500;
font-size: 28rpx;
color: #FFFFFF;
text-align: center;
}
.getVerifyCode {
width: 30%;
border-radius: 5rpx;
line-height: 60rpx;
font-weight: 500;
font-size: 28rpx;
color: #FFFFFF;
text-align: center;
background: linear-gradient(90deg, #5EA6FD, #1A81F9);
}
.btnDisable {
background: linear-gradient(90deg, #73a7e7, #4b8eda);
}
.addbtnff {
width: 40%;
height: 70rpx;
border-radius: 35rpx;
line-height: 70rpx;
font-weight: 500;
font-size: 28rpx;
color: #FFFFFF;
text-align: center;
}
.tishi {
font-weight: 500;
font-size: 22rpx;
color: #808080;
display: flex;
align-items: center;
}
.yitianjiaed {
width: 100%;
background: #F5F7FA;
border-radius: 4px;
border: 1px solid #E6E6E6;
box-sizing: border-box;
padding: 20rpx;
margin-top: 40rpx;
}
.yitianjiaedtext {
font-weight: 500;
font-size: 26rpx;
color: #333333;
margin-bottom: 25rpx;
}
.yitianjiaedtext text {
color: red;
margin-right: 10rpx;
}
</style>