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.
502 lines
17 KiB
502 lines
17 KiB
<template>
|
|
<view>
|
|
<view class="accounmt">
|
|
<view v-show="isadd">
|
|
<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;">
|
|
<img style="width:19px;height:19px;margin-right:5px;" src="/static/crowd/PAYB.png" alt="">
|
|
<p class="selectadd">支付宝账号</p>
|
|
</div>
|
|
<div v-if="accountform.paytype=='银行卡'" style="display: flex;align-items: center;margin-bottom:10px;">
|
|
<img style="width:18px;height:15px;margin-right:5px;" src="/static/crowd/bankcad.png" alt="">
|
|
<p class="selectadd">银行卡账号</p>
|
|
</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">
|
|
<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>
|
|
<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,
|
|
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",
|
|
},
|
|
],
|
|
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
|
|
});
|
|
},
|
|
// 添加账户
|
|
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;
|
|
this.http.quickPost(`/mpay/setting/account`,data,true).then(res=>{
|
|
console.log('res---',res)
|
|
if(res.data.data.code==200){
|
|
this.$refs.uToast.show(
|
|
{
|
|
type: 'success',
|
|
title: "添加成功",
|
|
duration: 2000,
|
|
}
|
|
)
|
|
// uni.showToast({ title: '添加成功', icon: 'none', duration: 1000, success() {
|
|
// this.isadd = false
|
|
// } });
|
|
// 获取最新账号信息
|
|
this.isadd = 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;
|
|
}
|
|
.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>
|
|
|