630 lines
14 KiB
Vue
630 lines
14 KiB
Vue
<template>
|
||
<view class="mine-container">
|
||
<u-navbar @leftClick="handlerLeft" leftIconColor="#000" title="我的钱包" :placeholder="true"></u-navbar>
|
||
<view class="top-box">
|
||
<view class="top-row">
|
||
<view class="row1-col">
|
||
<view class="title">
|
||
消费余额
|
||
</view>
|
||
<view class="price-group">
|
||
<view class="price">
|
||
{{assetMap.asset_10}}
|
||
</view>
|
||
<view class="unit">
|
||
元
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="grp">
|
||
</view>
|
||
<view class="row1-col">
|
||
<view class="title">
|
||
消费券
|
||
</view>
|
||
<view class="price-group">
|
||
<view class="price">
|
||
{{assetMap.asset_9}}
|
||
</view>
|
||
<view class="unit">
|
||
元
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="grp">
|
||
</view>
|
||
<view class="row1-col">
|
||
<view class="title">
|
||
消费金
|
||
</view>
|
||
<view class="price-group">
|
||
<view class="price">
|
||
{{assetMap.asset_9}}
|
||
</view>
|
||
<view class="unit">
|
||
元
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 第二行 -->
|
||
<view class="top-row row-next">
|
||
<view class="row1-col">
|
||
<view class="title">
|
||
冻结资产
|
||
</view>
|
||
<view class="price-group">
|
||
<view class="price">
|
||
{{assetMap.asset_14}}
|
||
</view>
|
||
<view class="unit">
|
||
元
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="row1-col">
|
||
<view class="title">
|
||
补贴
|
||
</view>
|
||
<view class="price-group">
|
||
<view class="price">
|
||
{{assetMap.asset_12}}
|
||
</view>
|
||
<view class="unit">
|
||
元
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="top-row row-next">
|
||
<view class="row1-col">
|
||
<view class="title">
|
||
槟榔收益
|
||
</view>
|
||
<view class="price-group">
|
||
<view class="price">
|
||
{{assetMap.asset_13}}
|
||
</view>
|
||
<view class="unit">
|
||
元
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="row1-col" v-if="assetMap.asset_8!=-1">
|
||
<view class="title">
|
||
分红额
|
||
</view>
|
||
<view class="price-group">
|
||
<view class="price">
|
||
{{assetMap.asset_8}}
|
||
</view>
|
||
<view class="unit">
|
||
元
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 中间的银行卡,提现申请 -->
|
||
<view class="zhong-box">
|
||
<view class="item" v-for="(item,i) in navList" :key="i" @click="goto(item.path)">
|
||
<view class="item-group">
|
||
<image :src="item.icon" mode=""></image>
|
||
<view>
|
||
{{item.name}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="handle-box">
|
||
<view class="handle-detail">
|
||
<view class="handle-item" @click="goto(item.path)" v-for="(item,index) in otherList" :key="index">
|
||
<view class="item-box">
|
||
<view class="item-icon">
|
||
<image :src="item.icon" mode=""></image>
|
||
</view>
|
||
<view class="handle-name">
|
||
{{ item.name }}
|
||
</view>
|
||
</view>
|
||
|
||
<view class="item-right">
|
||
<image class="right" src="@/static/back.png" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="bottom-x">
|
||
|
||
|
||
</view>
|
||
<!-- 输入框示例 -->
|
||
<uni-popup ref="inputDialog" type="dialog">
|
||
<uni-popup-dialog mode="input" :title="dialogTitle" placeholder="请输入兑换资产数量" @confirm="dialogInputConfirm">
|
||
</uni-popup-dialog>
|
||
</uni-popup>
|
||
<!-- 输入框示例 -->
|
||
<uni-popup ref="inputDialogRef" type="dialog">
|
||
<uni-popup-dialog mode="input" :title="dialogTitle" placeholder="请输入兑换资产数量" @confirm="dialogInputConfirm">
|
||
<view style="width:100%;display: flex;text-align: center;align-items: center;flex-direction: column;">
|
||
<uni-data-checkbox v-model="cashAwardInfo.handleType" :localdata="[{
|
||
text: '100%兑换成余额',
|
||
value: 1
|
||
}, {
|
||
text: '30%槟榔果+70%余额',
|
||
value: 2
|
||
}]"></uni-data-checkbox>
|
||
<uni-easyinput style="margin-top: 20rpx;" trim="all" v-model="cashAwardInfo.changeMoney"
|
||
placeholder="请输入金额"></uni-easyinput>
|
||
<!-- <input style="border: solid 1px red; border-radius: 5rpx;" class="uni-input" :value="cashAwardInfo.price"/> -->
|
||
</view>
|
||
</uni-popup-dialog>
|
||
</uni-popup>
|
||
<!-- 输入框示例 -->
|
||
<uni-popup ref="inputDialogBankRef" type="dialog">
|
||
<uni-popup-dialog mode="input" :title="dialogTitle" placeholder="请输入兑换资产数量" @confirm="dialogInputConfirm">
|
||
<view style="width:100%;display: flex;text-align: center;align-items: center;flex-direction: column;">
|
||
<uni-easyinput disabled style="margin-top: 20rpx;" trim="all" @click="showBank=true"
|
||
v-model="cashInfo.bankName" placeholder="请选择开户行"></uni-easyinput>
|
||
<uni-easyinput style="margin-top: 10rpx;" trim="all" v-model="cashInfo.changeMoney"
|
||
placeholder="请输入金额"></uni-easyinput>
|
||
</view>
|
||
</uni-popup-dialog>
|
||
</uni-popup>
|
||
<u-action-sheet :show="showBank" :actions="bankList" title="请选择提现开户行" @close="showBank = false"
|
||
@select="handlerBank">
|
||
</u-action-sheet>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
myAssetDetail,
|
||
handleCashInteger,
|
||
balanceCaseApply,
|
||
caseTree2Balance,
|
||
caseWared2Balance
|
||
} from "@/api/system/api.js";
|
||
import {
|
||
getBankList
|
||
} from '@/api/system/user.js';
|
||
import {
|
||
mapMutations
|
||
} from "vuex";
|
||
import url from "../../../common/http/url";
|
||
export default {
|
||
data() {
|
||
return {
|
||
cashAwardInfo: {
|
||
handleType: 1,
|
||
changeMoney: ''
|
||
},
|
||
assetMap: {
|
||
"asset_8": -1,
|
||
"asset_13": 0,
|
||
"asset_12": 0,
|
||
"asset_9": 0,
|
||
"asset_15": 0,
|
||
"asset_10": 0,
|
||
"asset_11": 0,
|
||
"asset_14": 0
|
||
},
|
||
navList: [{
|
||
name: "银行卡",
|
||
path: "/pages/licai/mine/account/bankList?use=2",
|
||
icon: require("@/static/newBinLang/asset/yinhangka@2x.png"),
|
||
bgColor: "rgb(16, 160, 244)",
|
||
},
|
||
{
|
||
name: "绑定银行卡",
|
||
path: "/pages/licai/mine/account/bindBank?use=2",
|
||
icon: require("@/static/newBinLang/asset/bangdingyinhangka@2x.png"),
|
||
bgColor: "rgb(16, 160, 244)",
|
||
},
|
||
{
|
||
name: "提现申请",
|
||
path: "cashBalance",
|
||
icon: require("@/static/newBinLang/asset/tixianshenqing@2x.png"),
|
||
bgColor: "rgb(11, 190, 60)",
|
||
},
|
||
{
|
||
name: "余额转账",
|
||
path: "/pages/licai/mine/account/change?asstype=10",
|
||
icon: require("@/static/newBinLang/asset/yuezhuanzhang@2x.png"),
|
||
bgColor: "rgb(11, 190, 60)",
|
||
},
|
||
],
|
||
otherList: [{
|
||
name: "资产变更记录",
|
||
path: "/pages/home/myService/recored",
|
||
icon: require("@/static/newBinLang/asset/zichanbiangeng@2x.png"),
|
||
bgColor: "rgb(11, 190, 160)",
|
||
},
|
||
{
|
||
name: "兑付资产转余额",
|
||
path: "tree2Balance",
|
||
icon: require("@/static/newBinLang/asset/duifuzichanzhuan@2x.png"),
|
||
|
||
bgColor: "rgb(11, 190, 60)",
|
||
}, {
|
||
name: "补贴转余额",
|
||
path: "caseWared2Balance",
|
||
icon: require("@/static/newBinLang/asset/jiangjinzichanzhuan@2x.png"),
|
||
|
||
bgColor: "rgb(11, 190, 60)",
|
||
}
|
||
],
|
||
showBank: false,
|
||
bankList: [],
|
||
cashInfo: {
|
||
bankName: '',
|
||
bankId: '',
|
||
changeMoney: ''
|
||
},
|
||
dialogTitle: ''
|
||
};
|
||
},
|
||
async onShow() {
|
||
await this.getAssetList()
|
||
await this.checkToken()
|
||
},
|
||
onLoad() {
|
||
this.getMyBindBank()
|
||
},
|
||
methods: {
|
||
...mapMutations(["logout"]),
|
||
//就是点击下边四个tab的时候调用一下这个接口，返回false的话就调用一下退出登录，给他退掉
|
||
checkToken() {
|
||
this.$http("GET", "/user/userCache").then((res) => {
|
||
if (!res.data) {
|
||
this.logout();
|
||
}
|
||
});
|
||
},
|
||
handlerBank(e) {
|
||
this.cashInfo.bankId = e.id;
|
||
this.cashInfo.bankName = e.name;
|
||
this.$refs.inputDialogBankRef.open()
|
||
},
|
||
async getMyBindBank() {
|
||
let {
|
||
rows
|
||
} = await getBankList();
|
||
rows.forEach(x => {
|
||
x.name = x.bankLabel + x.bankCardNumber
|
||
})
|
||
this.bankList = rows
|
||
},
|
||
inputDialogToggle() {
|
||
if (this.cashType == "caseWared2Balance") {
|
||
this.cashAwardInfo.handleType = 1
|
||
this.cashAwardInfo.changeMoney = ''
|
||
this.$refs.inputDialogRef.open()
|
||
} else if (this.cashType == "cashBalance") {
|
||
this.cashInfo = {
|
||
bankName: '',
|
||
bankId: '',
|
||
changeMoney: ''
|
||
}
|
||
this.showBank = true
|
||
} else {
|
||
this.$refs.inputDialog.open()
|
||
}
|
||
},
|
||
async dialogInputConfirm(val) {
|
||
if (this.cashType == "caseWared2Balance") {
|
||
val = this.cashAwardInfo.changeMoney
|
||
}
|
||
if (this.cashType == "cashBalance") {
|
||
val = this.cashInfo.changeMoney
|
||
if (!this.cashInfo.bankId) {
|
||
this.$msg("请选择有效提现银行卡")
|
||
return
|
||
}
|
||
}
|
||
if (parseFloat(val).toString() == "NaN") {
|
||
this.$msg("请填写数字")
|
||
return
|
||
}
|
||
if (parseFloat(val) <= 0) {
|
||
this.$msg("操作失败,填写错误")
|
||
return
|
||
}
|
||
//判断是否金额并且判断是否积分大于
|
||
if (parseFloat(val) > this.cashAsset) {
|
||
this.$msg("操作失败,资产不足")
|
||
return
|
||
}
|
||
if (this.cashType == "cashBalance") {
|
||
console.log()
|
||
await balanceCaseApply(this.cashInfo)
|
||
this.$msg("提现申请成功，请等待审核！")
|
||
return
|
||
}
|
||
if (this.cashType == "tree2Balance") {
|
||
await caseTree2Balance({
|
||
changeMoney: val
|
||
})
|
||
this.$msg("兑付成功，请稍后刷新资产明细！")
|
||
return
|
||
}
|
||
if (this.cashType == "caseWared2Balance") {
|
||
//奖金闪兑
|
||
await caseWared2Balance(this.cashAwardInfo)
|
||
this.$msg("兑付成功，请稍后刷新资产明细！")
|
||
return
|
||
}
|
||
},
|
||
handlerLeft() {
|
||
// uni.navigateTo({
|
||
// url: '/pages/home/zhongYiWanShangMy'
|
||
// })
|
||
uni.navigateBack()
|
||
},
|
||
goto(url) {
|
||
if (url == "cashBalance") {
|
||
this.cashAsset = this.getAssetValue(10)
|
||
this.cashType = url
|
||
this.dialogTitle = "当前消费余额：" + this.cashAsset
|
||
this.inputDialogToggle()
|
||
return
|
||
}
|
||
if (url == "tree2Balance") {
|
||
this.cashAsset = this.getAssetValue(13)
|
||
this.cashType = url
|
||
this.dialogTitle = "当前槟榔收益：" + this.cashAsset
|
||
this.inputDialogToggle()
|
||
return
|
||
}
|
||
if (url == "caseWared2Balance") {
|
||
this.cashAsset = this.getAssetValue(12)
|
||
this.cashType = url
|
||
this.dialogTitle = "当前补贴：" + this.cashAsset
|
||
this.inputDialogToggle()
|
||
return
|
||
}
|
||
if (url == "cashInteger") {
|
||
this.cashAsset = this.getAssetValue(11)
|
||
this.cashType = url
|
||
this.dialogTitle = "当前槟榔果：" + this.cashAsset
|
||
this.inputDialogToggle()
|
||
return
|
||
}
|
||
uni.navigateTo({
|
||
url,
|
||
});
|
||
},
|
||
async getAssetList() {
|
||
let resp = await myAssetDetail()
|
||
console.log(resp)
|
||
console.log("this.assetMap" + this.assetMap)
|
||
resp.forEach(asset => {
|
||
this.assetMap['asset_' + asset.assetType] = asset.value.toFixed(2)
|
||
})
|
||
},
|
||
getAssetValue(assetType) {
|
||
return this.assetMap['asset_' + assetType]
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.page {
|
||
background: #F5F5F5;
|
||
}
|
||
|
||
.top-box {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
background: #77E9D2;
|
||
border-bottom-right-radius: 24rpx;
|
||
border-bottom-left-radius: 24rpx;
|
||
padding: 20rpx;
|
||
|
||
.top-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.grp {
|
||
flex: 0;
|
||
border: 1rpx solid #00D6AB;
|
||
margin: 30rpx 0;
|
||
}
|
||
|
||
.row1-col {
|
||
flex: 1;
|
||
padding: 20rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.title {
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #484848;
|
||
margin-bottom: 30rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.price-group {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.price {
|
||
font-size: 40rpx;
|
||
color: #000000;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.unit {
|
||
margin-left: 10rpx;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #636262;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.row-next {
|
||
margin-top: 20rpx;
|
||
background: rgba(255, 255, 255, 0.5);
|
||
border-radius: 16rpx;
|
||
}
|
||
}
|
||
|
||
.zhong-box {
|
||
margin: 20rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
background: #FFFFFF;
|
||
border-radius: 16rpx;
|
||
|
||
.item {
|
||
display: flex;
|
||
padding: 20rpx;
|
||
|
||
.item-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
image {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
}
|
||
|
||
view {
|
||
margin-top: 10rpx;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #484848;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
//=================
|
||
.title-box {
|
||
margin: 30rpx 30rpx 10rpx 30rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding-bottom: 10rpx;
|
||
border-bottom: solid #d5d5d5 5rpx;
|
||
|
||
.title-left {
|
||
border-left: 12rpx solid rgba(75, 178, 46, 1);
|
||
padding-left: 20rpx;
|
||
font-size: 35rpx;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.title-right {
|
||
font-size: 28rpx;
|
||
color: #7a7a7a;
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
|
||
.asset-box {
|
||
margin: 0rpx 30rpx 30rpx 30rpx;
|
||
background-image: linear-gradient(to bottom,
|
||
rgba(75, 178, 46, 1) 0%,
|
||
rgba(75, 178, 46, 0.9) 70%,
|
||
rgba(75, 178, 46, 0.8) 100%);
|
||
border-radius: 10rpx;
|
||
padding: 30rpx 30rpx;
|
||
color: #fff;
|
||
|
||
|
||
.detail-box {
|
||
margin-bottom: -15rpx;
|
||
|
||
.detail-item {
|
||
margin-bottom: 15rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.item-name {
|
||
display: flex;
|
||
|
||
image {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
flex: 1;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.item-value {
|
||
flex: 1;
|
||
font-size: 35Arpx;
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.handle-box {
|
||
margin: 0rpx 20rpx 20rpx 20rpx;
|
||
|
||
.handle-detail {
|
||
background-color: #fff;
|
||
border-radius: 16rpx;
|
||
padding: 20rpx 20rpx 0 20rpx;
|
||
|
||
.handle-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
border-bottom: solid #00D6AB 2rpx;
|
||
padding-bottom: 20rpx;
|
||
margin-top: 20rpx;
|
||
|
||
.item-box {
|
||
font-weight: 600;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.item-icon {
|
||
border-radius: 50%;
|
||
margin-right: 40rpx;
|
||
|
||
image {
|
||
width: 70rpx;
|
||
height: 70rpx;
|
||
}
|
||
}
|
||
|
||
.handle-name {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
.item-right {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.right {
|
||
width: 15rpx;
|
||
height: 25rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.handle-item:last-child {
|
||
border-bottom: solid #fff 2rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.bottom-x {
|
||
height: 200rpx
|
||
}
|
||
</style> |