ct-mattress/page_user/tixian.vue

481 lines
11 KiB
Vue
Raw Normal View History

2024-08-28 11:04:46 +08:00
<template>
<view class="pages">
<u-navbar title="提现" :border-bottom="false" :background="bgc" back-icon-color="#3D3D3D" title-color='#3D3D3D'
title-size='36' height='44'></u-navbar>
<view class="txbj">
<image src="https://api.ccttiot.com/smartmeter/img/static/u6AjKXtuB4JqKNw9gtD4" mode=""></image>
<view class="zhye">
账户余额
</view>
<view class="yuan">
{{userinfo.balance == undefined ? '--' : userinfo.balance}}
</view>
</view>
<!-- 余额提现 -->
<view class="yuetx">
<view class="tit">
余额提现
</view>
<view class="inp">
<view class="fh">
</view>
<input type="text" v-model="money" placeholder="输入自定义金额"/>
<view class="but" @click="btnqb">
全部提现
</view>
</view>
<view class="tit" style="margin-top: 70rpx;">
提现方式
</view>
<!-- <view class="tx_list">
<view class="tx_item" v-for="(item,index) in 3" :key="index" @click="btnbd">
<view class="lt">
<image src="https://api.ccttiot.com/smartmeter/img/static/ukPmjYrM4qa1TgwKli59" mode=""></image> <text>微信提现</text>
</view>
<view class="rt">
<view class="wx">未绑定微信</view> <u-icon name="arrow-right" color="#3D3D3D" size="28"></u-icon>
</view>
</view>
</view> -->
<view class="pay_type" style="width: 100%;">
<view class="type_box" v-if="listflag" v-for="(item,index) in txlist" :key="index" @click="pay(index,item.channelId)">
<view class="box_left">
<image :src="item.picture" mode=""></image>
<view class="text">
{{item.name}}
</view>
</view>
<view class="box_right" :class="currentindex==index?'act1':''">
<span v-if="currentindex==index" style="color: #fff;"> <u-icon style="margin-top: 22rpx;" name="checkbox-mark" color="#fff" size="28"></u-icon> </span>
</view>
</view>
<!-- <view class="wutx" style="width: 100%;margin-top: 230rpx;text-align: center;">
<view class="" style="font-size: 32rpx;">
当前暂无提现方式
</view>
<view class="addtj" @click="btnadd">
添加银行卡
</view>
</view> -->
</view>
<!-- 提现说明 -->
<view class="tx_shuom">
提现说明
</view>
<view class="tx_wz">
-提现额度单笔提现金额最低1元
</view>
<view class="tx_wz">
-到账时间3个工作日内
</view>
<view class="tx_wz">
-提现手续费3%
</view>
</view>
<view class="butan" @click="sub" v-if="btnmsk">
确定提现
</view>
<view class="butan" @click="sub" v-else>
确定提现
</view>
</view>
</template>
<script>
export default {
data() {
return {
bgc: {
// backgroundColor: "#8883f0",
},
name:'',
idnum:'',
money:'',
infoList:{},
currentindex:-1,
payType:1,
accountNo:'',
userinfo:{},
serviceType:'',
serviceRate:'',
serviceRates:'',
sjmeoey:'',
txlist:'',
channelId:'',
btnmsk:false,
listflag:true
}
},
onLoad() {
this.gettxlist()
// this.getfuwu()
this.getinfo()
this.getuserinfo()
},
// 分享到好友(会话)
onShareAppMessage: function() {
return {
title: '创亿康',
path: '/pages/index/index'
}
},
// 分享到朋友圈
onShareTimeline: function() {
return {
title: '创亿康',
query: '',
path: '/pages/index/index'
}
},
methods: {
btnqb(){
this.money = this.userinfo.balance
},
btnbd(){
uni.navigateTo({
url:'/page_user/bangding'
})
},
// 获取提现渠道列表
gettxlist(){
this.$u.get('/app/channel/withdraw/enabledList').then(res => {
if(res.code == 200){
if(res.data.length > 0){
this.listflag = true
this.txlist = res.data
}else{
this.listflag = false
}
}
})
},
change(){
if(this.serviceType == 2){
this.serviceRates = this.serviceRate
this.sjmeoey = Number(this.money) - Number(this.serviceRates)
}else{
let qian = this.money * this.serviceRate / 100
this.serviceRates = qian
this.sjmeoey = Number(this.money) - Number(this.serviceRates)
}
},
// 计算小数
roundToTwoDecimalsTraditional(num) {
return Math.round(num * 100) / 100;
},
// 跳转到提现记录
btntxrecord(){
uni.navigateTo({
url:'/page_user/txrecord'
})
},
getinfo(){
this.$u.get('/app/account' ).then((res) => {
if (res.code == 200) {
this.infoList = res.data
}
})
},
pay(index,id){
this.channelId = id
this.getfuwu()
this.currentindex=index
},
all(){
this.money=this.userinfo.balance
if(this.serviceType == 2){
this.serviceRates = this.serviceRate
this.sjmeoey = Number(this.money) - Number(this.serviceRates)
}else{
let qian = this.money * this.serviceRate / 100
this.serviceRates = qian
this.sjmeoey = Number(this.money) - Number(this.serviceRates)
}
},
// 获取提现服务费
getfuwu(){
this.$u.get(`/app/bill/getWithdrawService?channelId=${this.channelId}`).then((res) => {
if (res.code == 200) {
this.serviceType = res.data.serviceType
this.serviceRate = res.data.serviceRate
if(this.serviceType == 2){
this.serviceRates = this.serviceRate
}else{
this.serviceRates = this.serviceRate * this.money / 100
}
}
})
},
sub(){
if(this.money<20){
uni.showToast({
title: '提现金额不能低于20元',
icon: 'none',
duration: 2000
});
}else if (this.money>this.userinfo.balance){
uni.showToast({
title: '提现金额不能大于余额',
icon: 'none',
duration: 2000
});
}else if(this.currentindex == -1){
uni.showToast({
title: '请选择提现方式',
icon: 'none',
duration: 2000
})
} else{
this.btnmsk = true
let data ={
money:this.money,
arrivalAmount:this.roundToTwoDecimalsTraditional(Number(this.money) - Number(this.roundToTwoDecimalsTraditional(this.serviceRates))),
serviceCharge:this.roundToTwoDecimalsTraditional(this.serviceRates),
channelId:this.channelId,
serviceRate:this.serviceRate , //服务费
serviceType:this.serviceType //服务费收取方式
}
this.$u.post('/app/bill/withdraw',data).then((res) => {
if (res.code == 200) {
this.getuserinfo()
uni.showToast({
title: '申请提现成功',
icon: 'success',
duration: 2000
})
this.serviceRates = 0
this.btnmsk = false
setTimeout(()=>{
uni.navigateBack()
},500)
}else{
uni.showToast({
title:res.msg,
icon: 'none',
duration: 2000
})
this.currentindex = -1
this.btnmsk = false
}
})
}
},
getuserinfo() {
this.$u.get("/app/user/userInfo").then((res) => {
if (res.code == 200) {
this.userinfo=res.data
this.money = ''
}
})
},
}
}
</script>
<style lang="scss" scoped>
/deep/ .u-title {
padding-bottom: 15rpx;
}
/deep/ .u-icon__icon {
padding-bottom: 15rpx;
}
/deep/ .uicon-arrow-right{
padding-bottom: 0 !important;
}
page {
background-color: #F7FAFE;
}
.pay_type{
.type_box{
width: 100%;
margin-top: 26rpx;
display: flex;
align-items: center;
flex-wrap: nowrap;
width: 634rpx;
height: 86rpx;
background: #FFFFFF;
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42,130,228,0.1);
border-radius: 20rpx;
.box_left{
display: flex;
align-items: center;
flex-wrap: nowrap;
margin-left:22rpx ;
image{
width: 50rpx;
height: 50rpx;
}
.text{
margin-left: 30rpx;
font-weight: 400;
font-size: 32rpx;
color: #3D3D3D;
line-height: 44rpx;
}
}
.box_right{
display: flex;
align-items: center;
justify-content: center;
margin-left: auto;
margin-right: 34rpx;
width: 44rpx;
height: 44rpx;
border: 2rpx solid #444444 ;
border-radius: 50%;
}
.act1{
color: #FFFFFF;
background-color: #8883F0;
}
}
}
.butan{
width: 590rpx;
height: 84rpx;
background: #8883F0;
filter: blur(0px);
border-radius: 50rpx;
text-align: center;
line-height: 84rpx;
font-size: 36rpx;
color: #FFFFFF;
position: fixed;
bottom: 60rpx;
left: 50%;
transform: translateX(-50%);
}
.yuetx{
width: 750rpx;
height: 1198rpx;
background: #FFFFFF;
border-radius:30rpx 30rpx 0 0;
margin-top: 240rpx;
padding-top: 54rpx;
padding-left: 56rpx;
padding-right: 56rpx;
box-sizing: border-box;
.tx_shuom{
font-size: 28rpx;
color: #808080;
margin-top: 40rpx;
}
.tx_wz{
font-size: 24rpx;
color: #808080;
margin-top: 20rpx;
}
.tx_list{
.tx_item{
width: 642rpx;
height: 86rpx;
margin-top: 30rpx;
background: #FFFFFF;
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42,130,228,0.1);
border-radius: 20rpx;
display: flex;
justify-content: space-between;
padding: 0 30rpx;
box-sizing: border-box;
align-items: center;
.lt{
display: flex;
align-items: center;
image{
width: 50rpx;
height: 50rpx;
margin-right: 30rpx;
}
}
.rt{
display: flex;
align-items: center;
.wx{
margin-right: 20rpx;
color: #F76D6D;
}
}
}
}
.tit{
font-weight: 600;
font-size: 36rpx;
color: #3D3D3D;
border-left: 8rpx solid #8883F0;
padding-left: 12rpx;
box-sizing: border-box;
}
.inp{
display: flex;
margin-top: 42rpx;
width: 642rpx;
height: 108rpx;
background: #F4F4F4;
border-radius: 10rpx;
line-height: 108rpx;
padding-left: 18rpx;
padding-right: 22rpx;
box-sizing: border-box;
align-items: center;
justify-content: space-between;
input{
height: 108rpx;
line-height: 108rpx;
}
.fh{
font-size: 52rpx;
color: #8883F0;
font-weight: 600;
margin-right: 14rpx;
}
.but{
width: 158rpx;
height: 56rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.2);
border-radius: 12rpx 12rpx 12rpx 12rpx;
border-radius: 10rpx;
text-align: center;
line-height: 56rpx;
font-size: 28rpx;
color: #8883F0;
}
}
}
.txbj{
position: fixed;
top: 0;
z-index: -1;
.zhye{
font-size: 32rpx;
color: #FFFFFF;
margin-top: 224rpx;
margin-left: 84rpx;
}
.yuan{
font-size: 72rpx;
color: #FFFFFF;
font-weight: 600;
margin-top: 14rpx;
margin-left: 84rpx;
}
image{
position: absolute;
top: 0;
z-index: -1;
width: 750rpx;
height: 552rpx;
}
}
</style>