初始化仓库
This commit is contained in:
wangxiaowei
235
bundle/pages/user_wallet/user_wallet.vue
Normal file
235
bundle/pages/user_wallet/user_wallet.vue
Normal file
@ -0,0 +1,235 @@
|
||||
<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>
|
||||
</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="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>
|
||||
// +----------------------------------------------------------------------
|
||||
// | likeshop开源商城系统
|
||||
// +----------------------------------------------------------------------
|
||||
// | 欢迎阅读学习系统程序代码，建议反馈是我们前进的动力
|
||||
// | gitee下载：https://gitee.com/likeshop_gitee
|
||||
// | github下载：https://github.com/likeshop-github
|
||||
// | 访问官网：https://www.likeshop.cn
|
||||
// | 访问社区：https://home.likeshop.cn
|
||||
// | 访问手册：http://doc.likeshop.cn
|
||||
// | 微信公众号：likeshop技术社区
|
||||
// | likeshop系列产品在gitee、github等公开渠道开源版本可免费商用，未经许可不能去除前后端官方版权标识
|
||||
// | likeshop系列产品收费版本务必购买商业授权，购买去版权授权后，方可去除前后端官方版权标识
|
||||
// | 禁止对系统程序代码以任何目的，任何形式的再发布
|
||||
// | likeshop团队版权所有并拥有最终解释权
|
||||
// +----------------------------------------------------------------------
|
||||
// | author: likeshop.cn.team
|
||||
// +----------------------------------------------------------------------
|
||||
|
||||
import { getWallet } from "@/api/user";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
wallet: {},
|
||||
// 热门活动列表数据
|
||||
activityList: [
|
||||
{
|
||||
title: "领取优惠券",
|
||||
slogan: "每日优惠券抢不停",
|
||||
button: "立即抢购",
|
||||
buttonColor: "#FC597A",
|
||||
href: "/bundle/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: 30rpx;
|
||||
top: 50rpx;
|
||||
padding: 0 51rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.nav {
|
||||
border-bottom: $-solid-border;
|
||||
|
||||
.nav-item {
|
||||
width: 25%;
|
||||
padding: 40rpx 0;
|
||||
|
||||
.icon {
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
||||
Reference in New Issue
Block a user