365 lines
8.5 KiB
Vue
365 lines
8.5 KiB
Vue
<template>
|
||
<view class="mine">
|
||
<view class="mine_money">
|
||
<!-- <image class="mine_money_bei" src="/static/home/boxBor.png" mode="widthFix"></image> -->
|
||
<view class="mine_money_num">
|
||
<view class="mine_money_num_view">
|
||
<view class="mine_money_num_view_monNum">{{wallet.money || 0.00}}</view>
|
||
<view class="mine_money_num_view_tip">余额（元）</view>
|
||
</view>
|
||
<view class="mine_money_num_view">
|
||
<view style="font-size: 32rpx;" class="mine_money_num_view_monNum">
|
||
{{wallet.freeze_money || 0.00}}
|
||
</view>
|
||
<view class="mine_money_num_view_tip">冻结（元）</view>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="mine_money_bottom">
|
||
<view @click="topay()">充值</view>
|
||
<view @click="navto('/pages/wallet/withdraw')">提现</view>
|
||
</view> -->
|
||
</view>
|
||
<!-- <view class="mine_grid">
|
||
<view class="mine_grid_view" v-for="item in 8" :key="item">
|
||
<image></image>
|
||
<view>提现</view>
|
||
</view>
|
||
</view> -->
|
||
|
||
<view style="border-radius: 10rpx;background-color: #fff;margin: 20rpx 0;">
|
||
<u-grid :border="false" :col="4">
|
||
<u-grid-item :customStyle="{padding:'20rpx 0'}" @click="navto('/pages/wallet/list')">
|
||
<u-icon name="/static/icon/money-list.png" size="50rpx"></u-icon>
|
||
<view style="height: 10rpx;"></view>
|
||
<text class="grid-text-mini">账单</text>
|
||
</u-grid-item>
|
||
<u-grid-item :customStyle="{padding:'20rpx 0'}"
|
||
@click="navto(`/pages/wallet/temp?data=${encodeURIComponent(JSON.stringify(wallet))}`)">
|
||
<u-icon name="gift" size="66rpx"></u-icon>
|
||
<text class="grid-text-mini">转赠</text>
|
||
</u-grid-item>
|
||
<u-grid-item :customStyle="{padding:'20rpx 0'}" @click="navto('/pages/wallet/account/index')">
|
||
<u-icon name="/static/icon/bank.png" size="50rpx"></u-icon>
|
||
<view style="height: 10rpx;"></view>
|
||
<text class="grid-text-mini">银行卡</text>
|
||
</u-grid-item>
|
||
<u-grid-item :customStyle="{padding:'20rpx 0'}" @click="navto('/pages/wallet/withdraw')">
|
||
<u-icon name="/static/icon/tx.png" size="50rpx"></u-icon>
|
||
<view style="height: 10rpx;"></view>
|
||
<text class="grid-text-mini">提现</text>
|
||
</u-grid-item>
|
||
</u-grid>
|
||
</view>
|
||
|
||
|
||
<view class="mine_block">
|
||
<view class="mine_block_tit">
|
||
<view class="mine_block_tit_left">充电桩</view>
|
||
<!-- <view class="mine_block_tit_right">详情 <image src="/static/home/toIcon.png" mode="widthFix"></image>
|
||
</view> -->
|
||
</view>
|
||
|
||
<view class="mine_block_view">
|
||
<!-- <image mode="widthFix" src="/static/home/zu1.png"></image> -->
|
||
<view class="u-flex-y-center u-flex-between u-flex-fill">
|
||
<view style="width: 50%;">
|
||
<view style="color: #3770AE;font-size: 30rpx;">{{device.num || 0}}</view>
|
||
<view style="color: #999;">
|
||
自购充电桩数
|
||
</view>
|
||
</view>
|
||
<view style="width: 50%;">
|
||
<view style="color: #3770AE;font-size: 30rpx;">{{device.team_num || 0}}</view>
|
||
<view style="color: #999;">
|
||
团队充电桩数
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="mine_block" v-for="(item,index) in money_list" :key="index">
|
||
<view class="mine_block_tit">
|
||
<view class="mine_block_tit_left">{{item.name}}</view>
|
||
</view>
|
||
<view class="mine_block_view u-flex-between">
|
||
<!-- <image mode="widthFix" src="/static/home/zu2.png"></image> -->
|
||
<view class="u-flex-fill">
|
||
<view class="u-flex-y-center u-flex-between u-flex-fill" style="margin-bottom: 20rpx;">
|
||
<view style="width: 50%;">
|
||
<view style="font-size: 30rpx;">
|
||
<text style="color: #3770AE;">{{item.data.day_money || 0}}</text>
|
||
</view>
|
||
<view style="color: #999;">
|
||
今日{{item.type}}
|
||
</view>
|
||
</view>
|
||
|
||
<view style="width: 50%;">
|
||
<view style="font-size: 30rpx;">
|
||
<text style="color: #3770AE;">{{item.data.week_money1 || 0}}</text>
|
||
</view>
|
||
<view style="color: #999;">
|
||
上周{{item.type}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="u-flex-y-center u-flex-between u-flex-fill">
|
||
<view style="width: 50%;">
|
||
<view style="font-size: 30rpx;">
|
||
<text style="color: #3770AE;">{{item.data.week_money0 || 0}}</text>
|
||
</view>
|
||
<view style="color: #999;">
|
||
本周{{item.type}}
|
||
</view>
|
||
</view>
|
||
<view style="width: 50%;">
|
||
<view style="font-size: 30rpx;">
|
||
<text style="color: #3770AE;">{{item.data.total_money || 0}}</text>
|
||
</view>
|
||
<view style="color: #999;">
|
||
累计{{item.type}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
walletInfo: {},
|
||
order: {},
|
||
device_fee: {},
|
||
device: {},
|
||
invite: {},
|
||
wallet: {},
|
||
money_list: [{
|
||
name: "收益统计",
|
||
type: "收益",
|
||
data: {}
|
||
}, {
|
||
name: "推广统计",
|
||
type: "推广",
|
||
data: {}
|
||
}, {
|
||
name: "邀请统计",
|
||
type: "邀请",
|
||
data: {}
|
||
}]
|
||
}
|
||
},
|
||
// onLoad() {
|
||
// this.getWalletInfo()
|
||
// },
|
||
onShow() {
|
||
this.getWalletInfo()
|
||
},
|
||
methods: {
|
||
calltel() {
|
||
uni.makePhoneCall({
|
||
phoneNumber: 'tel:400-800-5326'
|
||
});
|
||
},
|
||
topay() {
|
||
uni.navigateTo({
|
||
url: '/pages/wallet/recharge?data=' + encodeURIComponent(JSON.stringify(this.wallet))
|
||
})
|
||
},
|
||
navto(url) {
|
||
uni.navigateTo({
|
||
url: url
|
||
})
|
||
},
|
||
getWalletInfo() {
|
||
this.$http.get('/shop/v10/wallet/report').then(({
|
||
data,
|
||
success
|
||
}) => {
|
||
if (success) {
|
||
this.wallet = data.wallet
|
||
this.device = data.device
|
||
// this.wallet.freeze_money = this.wallet.freeze_money.toFixed(2)
|
||
this.wallet.info = data.shop
|
||
this.money_list = [{
|
||
name: "收益统计",
|
||
type: "收益",
|
||
data: data.device_fee
|
||
}, {
|
||
name: "推广统计",
|
||
type: "推广",
|
||
data: data.order
|
||
}, {
|
||
name: "邀请统计",
|
||
type: "邀请",
|
||
data: data.invite
|
||
}]
|
||
}
|
||
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
page {
|
||
background: #F7F7F7;
|
||
}
|
||
</style>
|
||
<style scoped lang="scss">
|
||
view {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.mine {
|
||
padding: 30rpx;
|
||
|
||
&_money {
|
||
position: relative;
|
||
width: 690rpx;
|
||
height: 260rpx;
|
||
// padding: 6rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
|
||
&_bei {
|
||
width: 690rpx;
|
||
height: 172rpx;
|
||
position: absolute;
|
||
z-index: -1;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
|
||
&_num {
|
||
width: 100%;
|
||
height: 172rpx;
|
||
background-color: #4497D1;
|
||
padding: 30rpx 110rpx 30rpx 50rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
border-radius: 15rpx;
|
||
|
||
&_view {
|
||
&_monNum {
|
||
font-weight: bold;
|
||
font-size: 52rpx;
|
||
color: #FFFFFF;
|
||
height: 70rpx;
|
||
display: table-cell;
|
||
vertical-align: bottom;
|
||
}
|
||
|
||
&_tip {
|
||
margin-top: 20rpx;
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
|
||
&_bottom {
|
||
background-color: #3978B9;
|
||
width: 100%;
|
||
height: 76rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
border-radius: 0 0 15rpx 15rpx;
|
||
|
||
view {
|
||
width: 50%;
|
||
text-align: center;
|
||
line-height: 76rpx;
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
color: #D9E221;
|
||
}
|
||
}
|
||
}
|
||
|
||
&_grid {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
margin: 35rpx 0;
|
||
|
||
&_view {
|
||
width: 25%;
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
color: #707070;
|
||
text-align: center;
|
||
margin-bottom: 22rpx;
|
||
|
||
image {
|
||
width: 98rpx;
|
||
height: 98rpx;
|
||
border-radius: 50%;
|
||
background-color: #fff;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
&_block {
|
||
padding: 24rpx;
|
||
background-color: #fff;
|
||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||
margin-bottom: 20rpx;
|
||
|
||
&_tit {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
&_left {
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
color: #232323;
|
||
}
|
||
|
||
&_right {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 24rpx;
|
||
color: #CBD73B;
|
||
|
||
image {
|
||
width: 13rpx;
|
||
height: 22rpx;
|
||
margin-left: 15rpx;
|
||
margin-top: 6rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
&_view {
|
||
width: 100%;
|
||
min-height: 120rpx;
|
||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||
border: 2rpx solid rgba(55, 112, 174, 0.1);
|
||
margin-top: 16rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 28rpx;
|
||
color: #232323;
|
||
padding: 20rpx 30rpx;
|
||
text-align: center;
|
||
|
||
image {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
margin-right: 25rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |