video_app/me/invite/cashDetail.vue

589 lines
17 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="cash">
<u-navbar title="申请提现" title-bold back-icon-color="#fff" :background="{background:'rgb(255, 117, 129)'}" immersive
:border-bottom="false" title-color="#fff">
<view slot="right" class="u-p-r-30 u-flex u-col-center color-fff" @click="showRule">
<text class="rule-btn">规则</text>
</view>
</u-navbar>
<view class=""
style="background-color: #ff7581;height: 400upx;border-bottom-right-radius: 40upx;border-bottom-left-radius: 40upx;">
<view style="font-size: 32upx;color: #FFFFFF;padding-top: 100upx;">可提现总额</view>
<view style="font-size: 40upx;color: #FFFFFF;padding-top: 20upx;">¥ {{ mayMoney }}</view>
<view
style="width: 90%;height: max-content;margin-left: 40upx;background-color: #FFFFFF;box-shadow: rgba(183, 183, 183, 0.3) 0px 1px 10px;margin-top: 50upx;border-radius: 20upx;">
<view style="display: flex;flex-direction: row;padding: 20upx;">
<view style="font-size: 32upx;color: #333333;">提现金额
<!-- <text style="font-size: 28upx;color: #ff7581;"
v-if="shouxufei">(注:提现手续费为{{shouxufei * 100}}%</text> -->
</view>
</view>
<view
style="display: flex;flex-direction: row;padding: 20upx;justify-content: space-between;align-items: center;">
<view style="display: flex;align-items: center;">
<view style="font-size: 40upx;color: #333333;">¥</view>
<input type="number" v-model="money" placeholder="请输入金额" @input="moneyInput" @blur="moneyBlur"
style="font-size: 40upx;color: #333333;text-align: left;margin-left: 10upx;width: 80%;" />
</view>
<view @click="setAllMoney"
style="font-size: 30rpx;color: #333333;background: #ff7581;color: white;border-radius: 10rpx;padding: 7rpx 15rpx;flex-shrink: 0;">
全部
</view>
</view>
<view style="background: #E6E6E6;width: 100%;height: 1upx;"></view>
<!-- <view style="display: flex;flex-direction: row;flex-wrap: wrap;">
<view style="display: flex;flex-direction: row;" v-for="(item, index) in moneyList" :key="index">
<view>
<view style="padding: 20upx;" @click="getOut1(item.money)">
<view
style="padding-top: 40upx;width: 180upx; height: 120upx;background-color: #FFFFFF;border:1px solid #ff7581;border-radius: 10upx;">
{{ item.money }}
</view>
</view>
</view>
</view>
</view> -->
</view>
<view @click="getOut"
style="margin: 32upx;font-size: 18px;background: #ff7581;color: white;border-radius: 10px;height: 40px;line-height: 40px;">
提现
</view>
<view style="display: flex;width: 100%;justify-content: center;">
<view class="u-flex-1" style="color: grey;padding-bottom: 30px;padding-top: 20upx;" @click="goZhifuBao">
提现账号
</view>
<view class="u-flex-1" style="color: grey;padding-bottom: 30px;padding-top: 20upx;" @click="goqianbao">
红包明细
</view>
<!-- <view style="color: grey;padding-bottom: 30px;padding-top: 20upx;width: 33%;" @click="gojilu">提现记录
</view> -->
</view>
<view style="text-align: left" class="moneyList u-p-b-30">
<view v-if="list.length" v-for="(item, index) in list" :key="index" class="item">
<view>
<view style="margin-bottom: 8upx;text-align: right;">
<text style="margin-bottom: 8upx;color: green" v-if="item.state===1"> 提现成功</text>
<text style="margin-bottom: 8upx;color: green" v-if="item.state===0||item.state==3">
提现中</text>
<text style="margin-bottom: 8upx;color: #FD6416" v-if="item.state===-1||item.state===2">
提现失败
</text>
</view>
<view style="color: #999999;font-size: 28upx;">
<view style="margin-bottom: 8upx"> 收款人账号:{{ item.zhifubao }}</view>
<view style="margin-bottom: 8upx"> 收款人姓名:{{ item.zhifubaoName }}</view>
<view style="margin-bottom: 8upx"> 发起时间:{{ item.createAt }}</view>
<view style="margin-bottom: 8upx" v-if="item.state===1">成功时间 {{ item.outAt }}</view>
<view style="margin-bottom: 8upx;color: #FD6416" v-if="item.state===-1||item.state===2">
失败原因:{{ item.refund }}
</view>
<view style="margin-bottom: 8upx;text-align: right;">
<!-- 提现金额: -->
<text style="color: #FD6416;font-size: 32upx;font-weight: 600"> ¥{{ item.money }}</text>
</view>
</view>
</view>
</view>
<view class="page-box" v-if="!list.length">
<view class="centre">
<image src="../../static/images/learn/none.png" mode=""></image>
<view class="tips">
暂无记录
</view>
</view>
</view>
</view>
</view>
<u-modal v-model="ruleShow" confirm-text="知道了" title="规则说明" :title-style="{fontWeight:'700'}" confirm-color="rgb(255, 117, 129)">
<view class="u-p-30 u-text-left">
<scroll-view scroll-y="true" style="max-height: 50vh;" >
<rich-text class="color-666" :nodes="ruleInfo"></rich-text>
</scroll-view>
</view>
</u-modal>
</view>
</template>
<script>
export default {
data() {
return {
ruleShow: true,
ruleInfo: `
用户在平台中对奖励提现的,适用以下规则:
<br/>
<br/>
1用户的收益达到最低提现金额要求后可以申请提现。每日发起前10笔提现为自动到账超出则需第二个工作日后到账。
<br/>
2用户需要通过支付宝提现需按照要求绑定支付宝账号并填写提现金额或其他提现所需信息请确保提供的信息准确无误以免提现失败。
<br/>
3如果用户发现显示「提现失败」需确认当前填写或绑定的支付宝账号或银行卡账号是否正确以及支付宝账号是否可用。如果用户发现显示「提现成功」但没到账
<br/>
(1)如果用户有多个支付宝账号,请检查用户是否提现到了其他支付宝账号。
<br/>
(2)高峰期提现人数多会导致网络拥堵显示提现成功之后72小时内属于正常现象请耐心等候。
<br/>
4每日23:00至次日11:00为系统维护时间活动的对应奖励可能延迟到账。提现通常会在72小时内到账如遇双休日、节假日提现到账时间可能会延长。活动高峰期间由于网络拥堵用户可能存在短时间内无法提现的情况。平台将尽最大努力及时恢复提现功能但无需因此承担任何责任。
<br/>
`,
money: '',
mayMoney: '0',
shouxufei: '',
moneyList: [{
money: '10'
},
{
money: '20'
},
{
money: '50'
},
{
money: '100'
},
{
money: '200'
},
{
money: '500'
}
],
value: 0,
min: '',
token: '',
userId: '',
zhifubao: '',
zhifubaoName: '',
certNum: '',
list: [],
page: 1,
limit: 10,
totalCount: 0,
cashMoney: 0,
};
},
onLoad() {
this.getExtractFei();
this.getMoneyDetail();
},
onShow() {
this.token = uni.getStorageSync('token')
this.userId = uni.getStorageSync('userId')
this.zhifubao = uni.getStorageSync('zhiFuBao')
this.zhifubaoName = uni.getStorageSync('zhiFuBaoName')
this.certNum = uni.getStorageSync('certNum')
this.getcashMoney()
},
onReachBottom: function() {
if (this.page * this.limit < this.totalCount) {
this.page = this.page + 1;
this.getMoneyDetail();
}
},
onPullDownRefresh: function() {
this.page = 1;
// that.list = []
this.getMoneyDetail();
},
onNavigationBarButtonTap() {
// this.list();
},
methods: {
//规则弹窗
showRule(){
this.ruleShow=true
},
moneyInput(e) {
let num = e.detail.value.match(/^\d*(\.?\d{0,2})/g)[0] || null;
this.$nextTick(() => {
this.money = num;
});
},
moneyBlur(e) {
let num = e.detail.value.match(/^\d*(\.?\d{0,2})/g)[0] || null;
this.$nextTick(() => {
this.money = num;
});
},
setAllMoney() {
this.money = Math.floor(this.mayMoney * 100) / 100
},
getMoneyDetail() {
let that = this;
let token = uni.getStorageSync('token')
if (token) {
//可以提现金额查询预估收入查询
let data = {
page: this.page,
limit: this.limit
}
this.$Request.getT('app/cash/selectPayDetails', data).then(res => {
this.totalCount = res.data.totalCount;
if (res.data.list.length > 0) {
this.list = [...this.list, ...res.data.list];
}
})
}
},
//获取收取费
getExtractFei() {
this.$u.get('app/common/type/152').then(res => {
if (res.code === 0) {
if (res.data && res.data.value) {
this.shouxufei = res.data.value;
}
}
});
this.$u.get('app/common/type/112').then(res => {
if (res.code === 0) {
if (res.data && res.data.value) {
this.cashMoney = res.data.value;
}
}
});
},
// 可提现金额
getcashMoney() {
let data = {
page: this.page,
limit: this.limit
}
// this.$u.api.myPurseDet(data).then(res => {
// if (res.code == 0) {
// this.mayMoney = res.data.inviteMoney.money
// } else {
// uni.showToast({
// title: res.msg,
// duration: 1000,
// icon: 'none'
// });
// }
// })
this.$Request.getT('app/moneyDetails/selectUserMoney').then(res => {
if (res.code == 0) {
this.mayMoney = res.data.amount || 0
}
})
},
// 提现记录
gojilu() {
uni.navigateTo({
url: '/me/invite/cashList'
});
},
//钱包明细
goqianbao() {
uni.navigateTo({
url: '/me/invite/moneyList?moneyType=1&viewType=2'
});
},
goZhifuBao() {
uni.navigateTo({
url: '/me/invite/zhifubao'
});
},
getMoney() {
let that = this;
let token = that.token
let userId = that.userId
if (token) {
//this.$queue.showLoading("加载中...");
//可以提现金额查询预估收入查询
let data = {
amount: that.money
}
uni.showLoading({
title: '提现中'
});
this.$u.api.withdraw(data).then(res => {
console.log(res)
if (res.code == 0) {
uni.showToast({
title: res.msg,
icon: 'none'
})
that.money = ''
setTimeout(function() {
that.getcashMoney()
}, 1500)
} else if (res.code == 9991) {
uni.showToast({
title: res.msg,
icon: 'none'
})
setTimeout(function() {
uni.navigateTo({
url: '/me/invite/zhifubao'
});
}, 1500)
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
})
}
},
//校验用户输入金额
checkMobile(money) {
return RegExp(/^1[34578]\d{9}$/).test(money);
},
getOut() {
let that = this;
let token = that.token
let userId = that.userId
let cashMoney = that.cashMoney;
if (token) {
if (that.zhifubao && that.zhifubaoName) {
if (!/^\d+(\.\d{1,2})?$/.test(that.money)) {
uni.showToast({
icon: 'none',
title: '请输入正确金额,不能包含中文,英文,特殊字符和小数'
});
return;
}
let shouxufei = parseFloat(that.money * that.shouxufei).toFixed(2);
if (parseFloat(that.mayMoney).toFixed(2) >= parseFloat(that.money)) {
// if (parseFloat(that.mayMoney).toFixed(1) >= parseFloat(that.money) + shouxufei * 1) {
if (parseFloat(that.money).toFixed(2) >= parseFloat(cashMoney)) {
if (that.shouxufei > 0) {
uni.showModal({
title: "提现申请提示",
content: '请仔细确认收款人信息\n\n收款人姓名:' + that.zhifubaoName + '\n\n提现金额:' + that
.money + '元\n\n收款人账号' + that.zhifubao + '',
// content: '请仔细确认收款人信息\n\n收款人姓名:' + that.zhifubaoName + '\n\n提现金额:' + that
// .money + '元\n\n提现手续费' + shouxufei +
// '\n\n收款人账号' + that.zhifubao + '',
success: (e) => {
if (e.confirm) {
// that.money = money
that.getMoney();
that.getMoneyDetail();
}
}
});
} else {
uni.showModal({
title: "提现申请提示",
content: '请仔细确认收款人信息\n\n收款人姓名:' + that.zhifubaoName + '\n\n提现金额:' + that
.money + '元\n\n收款人账号' + that.zhifubao +
'',
success: (e) => {
if (e.confirm) {
// that.money = money
that.getMoney();
that.getMoneyDetail();
}
}
});
}
} else {
uni.showToast({
icon: 'none',
title: "提现金额必须大于或等于" + cashMoney + "元才可提现"
});
}
} else {
uni.showToast({
icon: 'none',
title: "您的余额不足"
});
}
} else {
uni.navigateTo({
url: "/me/invite/zhifubao"
})
}
} else {
uni.navigateTo({
url: '/pages/login/login'
});
}
},
getOut1(money) {
let that = this;
let token = that.token
let userId = that.userId
if (token) {
if (that.zhifubao && that.zhifubaoName) {
if (parseFloat(this.mayMoney).toFixed(1) >= parseFloat(money)) {
if (parseFloat(money).toFixed(1) >= 10) {
if (this.shouxufei > 0) {
let shouxufei = parseFloat(money * this.shouxufei).toFixed(2);
uni.showModal({
title: '提现申请提示',
content: '请仔细确认收款人信息\n\n收款人姓名:' + that.zhifubaoName + '\n\n提现金额:' + money +
'元\n\n收款人账号' + that.zhifubao + '',
// content: '请仔细确认收款人信息\n\n收款人姓名:' + that.zhifubaoName + '\n\n提现金额:' + money +
// '元\n\n提现手续费' + shouxufei +
// '\n\n收款人账号' + that.zhifubao + '',
confirmColor: '#ff7581',
success: e => {
if (e.confirm) {
this.money = money
that.getMoney();
// uni.showToast({
// icon: 'none',
// title: '提现成功'
// })
}
}
});
} else {
uni.showModal({
title: '提现申请提示',
content: '请仔细确认收款人信息\n\n收款人姓名:' + that.zhifubaoName + '\n\n提现金额:' + money +
'元\n\n收款人账号' + that.zhifubao +
'',
success: e => {
if (e.confirm) {
this.money = money
that.getMoney();
// uni.showToast({
// icon: 'none',
// title: '提现成功'
// })
}
}
});
}
} else {
uni.showToast({
icon: 'none',
title: '提现金额必须大于或等于10元才可提现'
});
}
} else {
uni.showToast({
icon: 'none',
title: '您的余额不足'
});
}
} else {
uni.navigateTo({
url: '/me/invite/zhifubao'
});
}
} else {
uni.navigateTo({
url: '/pages/login/login'
});
}
}
}
};
</script>
<style lang="scss" scoped>
// @import '../../static/css/index.css';
.rule-btn {
font-size: 16px;
// padding: 2rpx 10rpx;
// border: 1px solid rgba(255, 255, 255, .8);
// border-radius: 4rpx;
}
.view2-view-text {
font-size: 14px;
color: #000000;
margin-left: 20upx;
width: 80%;
}
.view2-view-image-right {
width: 18upx;
height: 30upx;
margin-left: 50upx;
}
.cash {
text-align: center;
background: white;
height: 100%;
position: absolute;
width: 100%;
.cash-top {
padding: 32upx 32upx 50upx 32upx;
/* border-bottom: 1px solid gainsboro; */
background: #5074FF;
}
.leiji {
font-size: 14px;
color: #ffffff;
margin-bottom: 10px;
}
}
.moneyList {
.item {
background: white;
padding: 32rpx;
margin: 32rpx;
font-size: 28rpx;
box-shadow: 7px 9px 34px rgba(0, 0, 0, 0.1);
border-radius: 16upx;
}
.item:first-child {
margin-top: 0;
}
}
.centre {
text-align: center;
padding: 200rpx 0;
font-size: 32rpx;
box-sizing: border-box;
image {
width: 360rpx;
height: 360rpx;
// margin-bottom: 20rpx;
margin: 0 auto 20rpx;
// border: 1px dotted #000000;
}
.tips {
font-size: 34rpx;
color: #999999;
margin-top: 20rpx;
}
.btn {
margin: 80rpx auto;
width: 600rpx;
border-radius: 32rpx;
line-height: 90rpx;
color: #ffffff;
font-size: 34rpx;
background: #ff7581;
}
}
</style>