135 lines
2.8 KiB
Vue
135 lines
2.8 KiB
Vue
<template>
|
||
<view class="index home-bg" :style="[navBackground]">
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent" :enable="true">
|
||
<u-navbar
|
||
:border-bottom="false"
|
||
:is-fixed="false"
|
||
custom-class="home-bg"
|
||
:background="navBackground"
|
||
:is-back="true"
|
||
:backText="backText"
|
||
:title="title"
|
||
title-color="#fff"
|
||
backIconColor="#fff"
|
||
>
|
||
</u-navbar>
|
||
</u-sticky>
|
||
<!-- #endif -->
|
||
|
||
<view class="row-center balance u-relative" :style="{paddingTop: topSpace + 'px'}">
|
||
<view class="u-text-center w-full">
|
||
<view class="text-fff" style="font-size: 96rpx;">0</view>
|
||
<view class="text-fff nr">积分</view>
|
||
</view>
|
||
|
||
<view class="u-absolute right-0">
|
||
<view class="excharge row-center text-default">
|
||
<text class="xs">兑换商品</text>
|
||
<u-icon name="arrow-right" size="22" :color="themeColor" class="u-m-l-10"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="u-p-b-40" style="margin-top: 132rpx;">
|
||
<view class="list bg-white br16 u-p-32">
|
||
<view class="lg">积分明细</view>
|
||
<view class="u-m-t-16">
|
||
<view class="u-m-b-16">
|
||
<view class="nr row-between">
|
||
<view>积分</view>
|
||
<view class="deduct">-2000</view>
|
||
</view>
|
||
<view class="date xs u-m-t-16">2022-12-24 16:32:44</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
title: '积分',
|
||
statusBarHeight: 0, // 状态栏高度
|
||
bgImageHeight: 244 ,// 背景图高度，单位px，根据实际情况调整
|
||
selectIndex: 0,
|
||
backText: '',
|
||
topSpace: 0
|
||
}
|
||
},
|
||
|
||
onLoad() {
|
||
const systemInfo = uni.getSystemInfoSync()
|
||
this.statusBarHeight = systemInfo.statusBarHeight
|
||
|
||
// #ifdef MP-WEIXIN
|
||
this.topSpace = (80 - this.statusBarHeight)
|
||
// #endif
|
||
|
||
|
||
// #ifndef MP-WEIXIN
|
||
this.topSpace = (80 + 44)
|
||
// #endif
|
||
},
|
||
|
||
methods: {
|
||
// 跳转个人信息
|
||
toProfile() {
|
||
uni.navigateTo({
|
||
url: '/pages/my/profile'
|
||
})
|
||
},
|
||
|
||
// 跳转我的钱包
|
||
toWallet() {
|
||
uni.navigateTo({
|
||
url: '/pages/my/wallet'
|
||
})
|
||
}
|
||
},
|
||
computed: {
|
||
navBackground() {
|
||
return {
|
||
'background-image': `url(${this.cloudPath}img/icon_recharge_bg.png)`
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: #fff;
|
||
}
|
||
|
||
.index {
|
||
background-size: 100% auto;
|
||
}
|
||
|
||
.home-bg {
|
||
background: url(#{$cloudPath}img/icon_recharge_bg.png) no-repeat;
|
||
background-size: 100% auto;
|
||
}
|
||
|
||
.list {
|
||
margin: 22rpx 34rpx;
|
||
height: 962rpx;
|
||
box-shadow: 0rpx 6rpx 28rpx 4rpx rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.date {
|
||
color: rgba(0, 0, 0, .4);
|
||
}
|
||
|
||
.excharge {
|
||
width: 180rpx;
|
||
height: 56rpx;
|
||
background-color: #DBE7F6;
|
||
border-top-left-radius: 100rpx;
|
||
border-bottom-left-radius: 100rpx;
|
||
}
|
||
</style> |