217 lines
5.4 KiB
Vue
217 lines
5.4 KiB
Vue
<template>
|
||
<view class="user-wallet">
|
||
<view class="contain bg-white m-b-20">
|
||
<!-- 资产总计 -->
|
||
<view class="header">
|
||
<view class="white m-b-20">
|
||
<view class="xs">总资产(元)</view>
|
||
<view style="font-size: 76rpx">{{wallet.user_money || '0.00'}}</view>
|
||
</view>
|
||
<view class="money white flex">
|
||
<!-- <view class="item">
|
||
<view class="xs">累计充值(元)</view>
|
||
<view style="font-size: 38rpx">{{wallet.total_recharge_amount || '0.00'}}</view>
|
||
</view> -->
|
||
<view class="item">
|
||
<view class="xs">累计消费(元)</view>
|
||
<view style="font-size: 38rpx">{{wallet.total_order_amount || '0.00'}}</view>
|
||
</view>
|
||
<template v-if="wallet.open_racharge">
|
||
<router-link style="height: 58rpx;" class="flex primary bg-white br60 btn" size="xs"
|
||
to="/bundle/pages/user_payment/user_payment">充值</router-link>
|
||
</template>
|
||
<template>
|
||
<router-link style="height: 58rpx;" class="flex primary bg-white br60 btn_2" size="xs"
|
||
to="/bundle/pages/user_wallet/user_wallet_withdraw">提现</router-link>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<!-- 资金明细 -->
|
||
<view class="nav flex">
|
||
|
||
<!-- <router-link class="nav-item">
|
||
<view class="flex-col col-center">
|
||
<image class="icon" src="../../static/icon_yezz.png"></image>
|
||
<view class="m-t-10 sm">余额转账</view>
|
||
</view>
|
||
</router-link> -->
|
||
<router-link class="nav-item" to="/bundle/pages/user_bill/user_bill">
|
||
<view class="flex-col col-center">
|
||
<image class="icon" src="../../static/icon_zhmx.png"></image>
|
||
<view class="m-t-10 sm">账户明细</view>
|
||
</view>
|
||
</router-link>
|
||
<!-- <router-link class="nav-item">
|
||
<view class="flex-col col-center">
|
||
<image class="icon" src="../../static/icon_zzjl.png"></image>
|
||
<view class="m-t-10 sm">转账记录</view>
|
||
</view>
|
||
</router-link> -->
|
||
<router-link class="nav-item" to="/bundle/pages/recharge_record/recharge_record">
|
||
<view class="flex-col col-center">
|
||
<image class="icon" src="../../static/icon_czjl.png"></image>
|
||
<view class="m-t-10 sm">充值记录</view>
|
||
</view>
|
||
</router-link>
|
||
</view>
|
||
|
||
<view class="rule">
|
||
<view class="title">规则：</view>
|
||
<view>1. 此余额提现需要扣除50%的手续费</view>
|
||
<view>2. 此余额不能参与返补</view>
|
||
<view>3. 此余额不能参与8折</view>
|
||
</view>
|
||
|
||
<!-- 热门活动 -->
|
||
<!-- <view class="activity">
|
||
<view class="activity-title xl flex">
|
||
<view class="m-r-20 bg-primary" style="width: 6rpx;height: 30rpx;"></view>
|
||
<text>热门活动</text>
|
||
</view>
|
||
<block v-for="(item, index) in activityList" :key="item.title">
|
||
<view class="activity-item flex row-between" :style="{backgroundColor: item.background}">
|
||
<view>
|
||
<view class="xl normal" style="font-weight: 500;">{{ item.title }}</view>
|
||
<view class="muted sm m-t-10">{{ item.slogan }}</view>
|
||
<router-link style="display: inline-block;" :to="item.href">
|
||
<view :style="{backgroundColor: item.buttonColor}"
|
||
class="br60 white join-btn flex row-center">立即参与</view>
|
||
</router-link>
|
||
</view>
|
||
<image style="width:274rpx; height: 210rpx;" :src="item.image"></image>
|
||
</view>
|
||
</block>
|
||
</view> -->
|
||
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getWallet
|
||
} from '@/api/user';
|
||
export default {
|
||
data() {
|
||
return {
|
||
wallet: {},
|
||
// 热门活动列表数据
|
||
activityList: [
|
||
{
|
||
title: "领取优惠券",
|
||
slogan: "每日优惠券抢不停",
|
||
button: "立即抢购",
|
||
buttonColor: "#FC597A",
|
||
href: "/pages/get_coupon/get_coupon",
|
||
image: "/bundle/static/img_activity_coupon.png",
|
||
background: "rgba(252, 89, 122, 0.1)"
|
||
},
|
||
{
|
||
title: "超值商品 限时秒杀",
|
||
slogan: "最新商品秒杀中",
|
||
button: "立即抢购",
|
||
buttonColor: "#FF2C3C",
|
||
href: "/bundle/pages/goods_seckill/goods_seckill",
|
||
image: "/bundle/static/img_activity_seckill.png",
|
||
background: "rgba(236, 71, 37, 0.1)"
|
||
}
|
||
]
|
||
};
|
||
},
|
||
|
||
onShow() {
|
||
this.getWalletFun();
|
||
},
|
||
|
||
methods: {
|
||
getWalletFun() {
|
||
getWallet().then(res => {
|
||
if (res.code == 1) {
|
||
this.wallet = res.data
|
||
}
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss">
|
||
.user-wallet {
|
||
.contain {
|
||
padding: 20rpx 30rpx 36rpx;
|
||
|
||
.header {
|
||
position: relative;
|
||
background: linear-gradient(180deg, rgba(255, 44, 60, 1) 0%, rgba(255, 49, 106, 1) 100%);
|
||
border-radius: 20rpx;
|
||
height: 320rpx;
|
||
padding: 50rpx 30rpx 30rpx;
|
||
box-sizing: border-box;
|
||
|
||
.money {
|
||
.item {
|
||
flex: 1;
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
position: absolute;
|
||
right: 220rpx;
|
||
top: 50rpx;
|
||
padding: 0 51rpx;
|
||
}
|
||
.btn_2 {
|
||
position: absolute;
|
||
right: 30rpx;
|
||
top: 50rpx;
|
||
padding: 0 51rpx;
|
||
}
|
||
}
|
||
|
||
.nav {
|
||
border-bottom: $-solid-border;
|
||
|
||
.nav-item {
|
||
width: 25%;
|
||
padding: 40rpx 0;
|
||
|
||
.icon {
|
||
width: 52rpx;
|
||
height: 52rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.rule {
|
||
margin-top: 30rpx;
|
||
font-size: 28rpx;
|
||
|
||
.title {
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.activity {
|
||
padding: 40rpx 0rpx;
|
||
|
||
.activity-title {
|
||
font-weight: bold;
|
||
}
|
||
|
||
.activity-item {
|
||
padding: 15rpx 40rpx;
|
||
// box-shadow: 0px 0rpx 20rpx rgba(0, 0, 0, 0.16);
|
||
margin-top: 34rpx;
|
||
|
||
.join-btn {
|
||
height: 52rpx;
|
||
width: 156rpx;
|
||
margin-top: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|