486 lines
12 KiB
Vue
486 lines
12 KiB
Vue
<style lang="scss" scoped>
|
||
@import "@/static/scss/global.scss";
|
||
|
||
.balance_wrapper {
|
||
// color: #fff;
|
||
|
||
.balance_wrapper_bg {
|
||
// padding: 40rpx 20rpx;
|
||
padding-bottom: 100rpx;
|
||
flex-direction: column;
|
||
background-color: #3c96f3;
|
||
font-size: 36 rpx;
|
||
|
||
.balance_text {
|
||
font-size: 50 rpx;
|
||
font-weight: bold;
|
||
|
||
text {
|
||
font-size: 32 rpx;
|
||
font-weight: normal;
|
||
margin-right: 10 rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.count_wrapper {
|
||
border-radius: 20 rpx;
|
||
padding: 0rpx 30rpx;
|
||
}
|
||
|
||
.padding-20 {
|
||
padding: 0 20 rpx;
|
||
}
|
||
|
||
.mask {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
.picker_box {
|
||
position: fixed;
|
||
bottom: -100%;
|
||
left: 0;
|
||
right: 0;
|
||
height: 700 rpx;
|
||
transition: all 0.3s;
|
||
border-radius: 20rpx 20rpx 0 0;
|
||
|
||
.title {
|
||
padding: 20rpx 30rpx;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.button {
|
||
color: rgb(60, 150, 243);
|
||
}
|
||
|
||
.scroll_view {
|
||
height: 600 rpx;
|
||
padding: 0 20 rpx;
|
||
width: auto;
|
||
|
||
.item {
|
||
padding: 20rpx 30rpx;
|
||
justify-content: space-between;
|
||
border-bottom: 1 rpx solid #e6e6e6;
|
||
}
|
||
}
|
||
}
|
||
|
||
.picker_box_active {
|
||
bottom: 0;
|
||
}
|
||
|
||
.balance_wrapper {
|
||
padding: 20rpx 30rpx;
|
||
}
|
||
|
||
/deep/.card-type .u-radio__text {
|
||
margin-left: 80rpx;
|
||
color: #000 !important;
|
||
}
|
||
|
||
/deep/.with-draw .u-radio__text {
|
||
margin-left: 200rpx;
|
||
color: #000 !important;
|
||
}
|
||
</style>
|
||
<template>
|
||
<view class="asset_container">
|
||
<!-- todo 将购买券 和土地兑付 水平排放-->
|
||
<view class="flex flex-align-center balance_wrapper flex-between bg-w">
|
||
<view class="action-item">
|
||
<text class="text"> 槟榔券: </text>
|
||
<text class="text">{{ this.blMoney }}</text>
|
||
</view>
|
||
<view class="action-item">
|
||
<text class="text"> 槟榔兑付: </text>
|
||
<text class="text">{{ this.bldfMoney }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<u-gap height="20rpx"></u-gap>
|
||
<view class="count_wrapper bg-w">
|
||
<text>提现金额</text>
|
||
<u-gap height="20rpx"></u-gap>
|
||
<view>
|
||
<u-input
|
||
border="none"
|
||
fontSize="36rpx"
|
||
type="number"
|
||
v-model="formData.money"
|
||
placeholder="输入提现金额"
|
||
>
|
||
<u-text
|
||
text="¥"
|
||
slot="prefix"
|
||
margin="0 3px 0 0"
|
||
type="tips"
|
||
></u-text>
|
||
</u-input>
|
||
</view>
|
||
</view>
|
||
<u-gap height="20rpx"></u-gap>
|
||
<view class="flex flex-align-center balance_wrapper flex-between bg-w">
|
||
<view class="action-item">
|
||
<text class="text"> 到账金额: </text>
|
||
<text class="text font34">¥{{Number(formData.money * 0.94).toFixed(4)}}</text>
|
||
</view>
|
||
</view>
|
||
<u-gap height="20rpx"></u-gap>
|
||
<view class="count_wrapper bg-w">
|
||
<view>
|
||
<u--form labelPosition="left" ref="form1" labelWidth="100">
|
||
<u-form-item label="提现类型" @click="asstypeShow = true">
|
||
<u--input
|
||
v-model="asstTypeSellectItem.assetTypeName"
|
||
border="none"
|
||
disabled
|
||
disabledColor="#ffffff"
|
||
placeholder="请选择提现类型"
|
||
></u--input>
|
||
<u-icon slot="right" name="arrow-right"></u-icon>
|
||
</u-form-item>
|
||
</u--form>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- <view class="mask" v-if=""></view> -->
|
||
<u-gap height="20rpx"></u-gap>
|
||
<view class="count_wrapper bg-w">
|
||
<view>
|
||
<u--form labelPosition="left" ref="form1" labelWidth="100">
|
||
<u-form-item label="银行卡号" @click="show = true">
|
||
<u--input
|
||
v-model="selectItem.bankCardNumber"
|
||
border="none"
|
||
type="number"
|
||
disabled
|
||
disabledColor="#ffffff"
|
||
placeholder="请选择银行卡号"
|
||
></u--input>
|
||
<u-icon slot="right" name="arrow-right"></u-icon>
|
||
</u-form-item>
|
||
</u--form>
|
||
</view>
|
||
</view>
|
||
<u-gap height="140rpx"></u-gap>
|
||
<view class="padding-20">
|
||
<u-button @click="handlerDraw" type="primary" text="确认提现" color="#4BB22E"></u-button>
|
||
</view>
|
||
<view class="mask" v-if="show || asstypeShow" @click="handlerClose"> </view>
|
||
<!-- // 底部弹出列表-银行卡-->
|
||
<view class="picker_box bg-w" :class="show ? 'picker_box_active' : ''">
|
||
<view class="title flex2">
|
||
<text @click="handlerClose(1)">取消</text>
|
||
<view>选择银行卡</view>
|
||
<text @click="handlerConfirm(1)" class="button">确定</text>
|
||
</view>
|
||
<scroll-view class="scroll_view card-type" scroll-y="true">
|
||
<u-radio-group
|
||
:value="value"
|
||
@change="handlerChange"
|
||
placement="column"
|
||
>
|
||
<view
|
||
@click="handlerItem(item, index)"
|
||
class="item flex2 flex-align-center"
|
||
v-for="(item, index) in bankList"
|
||
:key="index"
|
||
>
|
||
<u-radio :name="index" :label="item.number"></u-radio>
|
||
<!-- <view class="flex-1 font28">
|
||
{{ item.number }}
|
||
</view> -->
|
||
<view class="font28">持卡人：{{ item.cardholderName }}</view>
|
||
</view>
|
||
</u-radio-group>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<!-- // 底部弹出列表-资产类型-->
|
||
<view
|
||
class="picker_box bg-w"
|
||
:class="asstypeShow ? 'picker_box_active' : ''"
|
||
>
|
||
<view class="title flex2">
|
||
<text @click="handlerClose(2)">取消</text>
|
||
<view>选择提现类型</view>
|
||
<text @click="handlerConfirm(2)" class="button">确定</text>
|
||
</view>
|
||
<scroll-view class="scroll_view with-draw" scroll-y="true">
|
||
<u-radio-group
|
||
:value="assetTypeValue"
|
||
@change="assetTypehandlerChange"
|
||
placement="column"
|
||
>
|
||
<view
|
||
@click="assetTypehandlerItem(item, index)"
|
||
class="item flex2"
|
||
v-for="(item, index) in assetTypeList"
|
||
:key="index"
|
||
>
|
||
<u-radio
|
||
:name="index"
|
||
:label="' 提现类型名称:' + item.assetTypeName"
|
||
></u-radio>
|
||
<!-- {{ item.assetType }} -->
|
||
<!-- <view>提现类型名称：{{ item.assetTypeName }}</view> -->
|
||
</view>
|
||
</u-radio-group>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getBankList,
|
||
widthDraw,
|
||
getUserBalance,
|
||
tudicheckapi,
|
||
} from "@/api/system/user.js";
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
formData: {
|
||
money: "",
|
||
bankCardId: "",
|
||
assetType: "",
|
||
},
|
||
bankList: [],
|
||
assetTypeList: [],
|
||
page: {
|
||
page: 1,
|
||
size: 10,
|
||
},
|
||
show: false,
|
||
asstypeShow: false,
|
||
value: null,
|
||
assetTypeValue: null,
|
||
showlab: null,
|
||
selectItem: {},
|
||
asstTypeSellectItem: {},
|
||
blMoney: 0,
|
||
bldfMoney: 0,
|
||
};
|
||
},
|
||
onLoad() {
|
||
this.getBankList();
|
||
this.getAssetTypeList();
|
||
},
|
||
onShow() {
|
||
this.getUserBalance();
|
||
},
|
||
methods: {
|
||
handlerClose(closeType) {
|
||
// if (closeType == 1) {
|
||
this.show = false;
|
||
// } else if (closeType == 2) {
|
||
this.asstypeShow = false;
|
||
// }
|
||
},
|
||
|
||
handlerNavigate(item) {
|
||
console.log(item);
|
||
uni.navigateTo({
|
||
url: item.path,
|
||
});
|
||
},
|
||
async handlerDraw() {
|
||
uni.showLoading({ title: "数据提交中" });
|
||
let { formData } = this.$data;
|
||
// if (formData.money <= 0 || formData.tudiduihuan <= 0) return this.$toast('请输入正确的提现金额');
|
||
if (!formData.bankCardId) return this.$toast("请输入选择银行卡");
|
||
if (!formData.assetType) return this.$toast("请选择提现类型");
|
||
if (formData.assetType === 5) {
|
||
if (this.blMoney < this.formData.money)
|
||
return this.$toast("槟榔券不足");
|
||
} else if(formData.assetType === 6) {
|
||
if (this.bldfMoney < this.formData.money)
|
||
return this.$toast("槟榔兑付不足");
|
||
}
|
||
if (this.formData.assetType == 4) {
|
||
let check_ = await this.checkApi(formData);
|
||
formData = { ...formData, ...check_.data };
|
||
}
|
||
let res = await widthDraw(formData);
|
||
let { code } = res;
|
||
if (code == 200)
|
||
this.$toast("提现成功", () => {
|
||
uni.hideLoading();
|
||
uni.navigateBack();
|
||
});
|
||
},
|
||
//如果是土地兑付,走一次打赏再走widthDraw
|
||
checkApi(formData) {
|
||
return new Promise((resolve, reject) => {
|
||
tudicheckapi(formData)
|
||
.then((res) => {
|
||
resolve(res);
|
||
})
|
||
.catch((err) => {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: err.msg || "当前错误",
|
||
icon: "none",
|
||
});
|
||
reject();
|
||
});
|
||
});
|
||
},
|
||
handlerSelect() {
|
||
// uni.navigateTo({
|
||
// url: '/pages/mine/account/bankList?isSelect=1'
|
||
// })
|
||
},
|
||
handlerItem(item, index) {
|
||
this.value = index;
|
||
},
|
||
assetTypehandlerItem(item, index) {
|
||
this.assetTypeVale = index;
|
||
},
|
||
//选项框中的确认 将银行卡选择和提现类型选项通过参数分开 showType 1表示 银行卡 2 提现类型
|
||
handlerConfirm(showType) {
|
||
console.log(this.value);
|
||
if (showType == 1) {
|
||
if (this.value == null) return this.$toast("请选择银行卡");
|
||
if (!this.bankList.length) return this.$toast("请先绑定银行卡");
|
||
|
||
this.selectItem = this.bankList[this.value];
|
||
this.formData.bankCardId = this.selectItem.id;
|
||
this.show = false;
|
||
} else if (showType == 2) {
|
||
if (this.assetTypeValue == null) return this.$toast("请选择提现类型");
|
||
if (!this.assetTypeList.length)
|
||
return this.$toast("没有获取到提现类型");
|
||
|
||
this.asstTypeSellectItem = this.assetTypeList[this.assetTypeValue];
|
||
this.formData.assetType = this.asstTypeSellectItem.assetType;
|
||
|
||
this.asstypeShow = false;
|
||
}
|
||
},
|
||
handlerChange(e) {
|
||
console.log(e);
|
||
this.value = e;
|
||
},
|
||
assetTypehandlerChange(e) {
|
||
console.log("更换按钮");
|
||
console.log(e);
|
||
this.assetTypeValue = e;
|
||
console.log("此时");
|
||
console.log(this.assetTypeValue);
|
||
console.log("----");
|
||
},
|
||
async getUserBalance() {
|
||
let res = await getUserBalance();
|
||
if (res.code == 200) {
|
||
this.blMoney = res.data.bl_money;
|
||
this.bldfMoney = res.data.bl_df_money;
|
||
}
|
||
|
||
console.log("res", res);
|
||
},
|
||
async getBankList() {
|
||
let res = await getBankList(this.page);
|
||
let { code, rows } = res;
|
||
|
||
if (code == 200) {
|
||
if (rows === 0) {
|
||
uni.showModal({
|
||
title: "提示",
|
||
content: "暂未绑定银行卡",
|
||
cancelColor: "取消",
|
||
confirmText: "去绑定",
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
uni.navigateTo({
|
||
url: "/pages/licai/mine/account/bindBank",
|
||
});
|
||
}
|
||
},
|
||
});
|
||
//todo 弹出对话框"暂未绑定银行卡" "去绑定" "取消" 选择"去绑定" 则跳转绑定银行卡 绑定结束后跳回这个页面 取消 关闭窗口
|
||
}
|
||
|
||
rows.forEach((item) => {
|
||
item.number = item.bankCardNumber
|
||
.replace(/\s/g, "")
|
||
.replace(/(\d{4})(?=\d)/g, "$1 ");
|
||
});
|
||
this.bankList = [...this.bankList, ...rows];
|
||
}
|
||
},
|
||
|
||
// 提现类型加载
|
||
getAssetTypeList() {
|
||
this.assetTypeList = [
|
||
{ assetType: 5, assetTypeName: "槟榔券" },
|
||
{ assetType: 6, assetTypeName: "槟榔兑付" },
|
||
];
|
||
},
|
||
},
|
||
|
||
props: {
|
||
// 是否显示加载
|
||
// show:{
|
||
// type:Boolean,
|
||
// default(){
|
||
// return true
|
||
// }
|
||
// },
|
||
// 显示的图标类型
|
||
type: {
|
||
type: String,
|
||
default() {
|
||
return "round";
|
||
},
|
||
},
|
||
// 加载动画的文字
|
||
loadTxt: {
|
||
type: String,
|
||
default() {
|
||
return "加载中";
|
||
},
|
||
},
|
||
// 加载遮罩的背景,可选值为white
|
||
shadowBg: {
|
||
type: String,
|
||
default() {
|
||
return "black";
|
||
},
|
||
},
|
||
// 显示图标颜色，type值为rect或round才可改背景颜色
|
||
iconBg: {
|
||
type: String,
|
||
default() {
|
||
return "#167BEF";
|
||
},
|
||
},
|
||
// 加载文字颜色
|
||
color: {
|
||
type: String,
|
||
default() {
|
||
return "#434343";
|
||
},
|
||
},
|
||
// 是否开启加载文字闪烁
|
||
animateTxt: {
|
||
type: Boolean,
|
||
default() {
|
||
return true;
|
||
},
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|