341 lines
7.3 KiB
Vue
341 lines
7.3 KiB
Vue
<template>
|
|
<view id="wrapper">
|
|
<view class="nav-wrap" :class="{ 'is-fixed': isFixed }"
|
|
:style="{ paddingTop: `${menuInfo.top}px`, paddingBottom: `${paddingBtmSize}px` }">
|
|
<view class="content" :style="{ height: `${menuInfo.height}px`, paddingLeft: `${paddingBtmSize}px` }">
|
|
<view class="left-btn">
|
|
<view class="btn" :style="{ width: `${menuInfo.height}px`, height: `${menuInfo.height}px` }"
|
|
@click="navClickHandle(1)">
|
|
<u-icon name="arrow-left" :color="isFixed ? '#333' : '#fff'" size="38"></u-icon>
|
|
</view>
|
|
<view class="left-btntitle"
|
|
:style="{ height: `${menuInfo.height}px`,lineHeight:`${menuInfo.height}px`}">
|
|
积分商城
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
<view class="shop-cover">
|
|
<image class="img" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/shopindexnav.png" mode="widthFix">
|
|
</image>
|
|
<view class="shop-coverone" :style="{ paddingTop: `${menuInfo.top + menuInfo.height + 25}px`}">
|
|
<view class="shop-coveronebox flex-center">
|
|
<view style="margin-right: 10rpx;">
|
|
当前积分
|
|
</view>
|
|
<u-icon name="error-circle" color="#fff" size="32"></u-icon>
|
|
</view>
|
|
<view class="shop-coveroneboxnuber">
|
|
5830
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="shop_content">
|
|
<view class="shop_contenttitle">积分明细</view>
|
|
<!-- <view class="shop_contenbox flex-start">
|
|
<view class="shop_contenboxitem" :class="index == 0?'shop_contenboxitems':''"
|
|
v-for="(item,index) in shopcontenboxlsit" :key="index">
|
|
{{item.name}}
|
|
</view>
|
|
</view> -->
|
|
<view class="shop_contenlist">
|
|
<view class="shop_contenlistabsolute">
|
|
<view class="flex-start">
|
|
<text class="flex-starttext">收入</text>
|
|
/
|
|
<text>支出</text>
|
|
</view>
|
|
</view>
|
|
<view class="shop_contenlistitem flex-between" v-for="(item,index) in 6" :key="index">
|
|
<view class="shop_contenlistitemone flex-colum-start">
|
|
<view>交易积分-线下收款</view>
|
|
<view>2023-01-11 17:33:09</view>
|
|
</view>
|
|
<view class="shop_contenlistitemtow">+0.02</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import _ from 'lodash';
|
|
import navbar from '@/uni_modules/uview-ui/libs/config/props/navbar';
|
|
export default {
|
|
data() {
|
|
return {
|
|
menuInfo: uni.getMenuButtonBoundingClientRect(),
|
|
paddingBtmSize: 6,
|
|
isFixed: false,
|
|
active: 0,
|
|
titleTopNums: [],
|
|
shopcontenboxlsit: [{
|
|
name: '全部'
|
|
|
|
},
|
|
{
|
|
name: '交易积分'
|
|
|
|
}, {
|
|
name: '活动积分'
|
|
|
|
}, {
|
|
name: '任务积分'
|
|
|
|
}
|
|
]
|
|
};
|
|
},
|
|
onPageScroll(e) {
|
|
if (e.scrollTop >= (this.menuInfo.top + this.menuInfo.height + this.paddingBtmSize) / 2) {
|
|
this.isFixed = true;
|
|
uni.setNavigationBarColor({
|
|
frontColor: '#000000',
|
|
backgroundColor: '#ffffff'
|
|
});
|
|
} else {
|
|
this.isFixed = false;
|
|
uni.setNavigationBarColor({
|
|
frontColor: '#ffffff',
|
|
backgroundColor: '#000000'
|
|
});
|
|
}
|
|
this.countScrollTitle(e.scrollTop);
|
|
},
|
|
onLoad(e) {
|
|
// #ifdef APP-PLUS || H5
|
|
uni.getSystemInfo({
|
|
success: (res) => {
|
|
console.log(res)
|
|
this.menuInfo = res
|
|
}
|
|
})
|
|
// #endif
|
|
// #ifdef MP-WEIXIN
|
|
this.menuInfo = uni.getMenuButtonBoundingClientRect()
|
|
// #endif
|
|
},
|
|
onUnload() {
|
|
|
|
},
|
|
methods: {
|
|
// 导航栏点击
|
|
navClickHandle(t) {
|
|
switch (t) {
|
|
case 1:
|
|
// 返回
|
|
uni.switchTab({
|
|
url: '/pages/index/index'
|
|
})
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
},
|
|
countScrollTitle: _.throttle(function(top) {
|
|
if (this.titleTopNums.length > 1) {
|
|
for (let i = 0; i <= this.titleTopNums.length - 1; i++) {
|
|
if (top >= this.titleTopNums[i] && top < this.titleTopNums[i + 1]) {
|
|
this.titleTopNumIndex = i;
|
|
}
|
|
}
|
|
if (top >= this.titleTopNums[this.titleTopNums.length - 1]) {
|
|
this.titleTopNumIndex = this.titleTopNums.length - 1;
|
|
}
|
|
}
|
|
}, 100),
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
$bg: #fafafa;
|
|
$tabLeft: 200upx;
|
|
$itemH: 100upx;
|
|
$cartH: 90upx;
|
|
|
|
.nav-wrap {
|
|
width: 100%;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 97;
|
|
|
|
&.is-fixed {
|
|
background-color: #fff;
|
|
}
|
|
|
|
.content {
|
|
position: relative;
|
|
|
|
.left-btn {
|
|
display: flex;
|
|
|
|
.btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: $paddingSize;
|
|
}
|
|
}
|
|
|
|
.left-btntitle {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
|
|
text-align: center;
|
|
font-family: SourceHanSansCN-Bold, SourceHanSansCN-Bold;
|
|
font-weight: normal;
|
|
font-size: 36rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
|
|
.shop-cover {
|
|
position: relative;
|
|
z-index: 1;
|
|
// &::after {
|
|
// content: '';
|
|
// width: 100%;
|
|
// height: 100%;
|
|
// position: absolute;
|
|
// top: 0;
|
|
// left: 0;
|
|
// z-index: 2;
|
|
// background-color: rgba(0, 0, 0, 0.3);
|
|
// }
|
|
|
|
.img {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.shop-coverone {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
padding: 0rpx 32rpx;
|
|
z-index: 2;
|
|
|
|
.shop-coveronebox {
|
|
padding: 6rpx 10rpx;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border-radius: 58rpx 58rpx 58rpx 58rpx;
|
|
font-family: PingFangSC-Semibold, PingFangSC-Semibold;
|
|
font-weight: normal;
|
|
font-size: 28rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.shop-coveroneboxnuber {
|
|
margin-top: 32rpx;
|
|
font-family: Roboto, Roboto;
|
|
font-weight: 400;
|
|
font-size: 74rpx;
|
|
color: #FFFFFF;
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.shop_content {
|
|
background: #FFFFFF;
|
|
border-radius: 26rpx 26rpx 0rpx 0rpx;
|
|
position: relative;
|
|
z-index: 5;
|
|
top: -92rpx;
|
|
|
|
.shop_contenttitle {
|
|
padding: 16rpx 0;
|
|
width: 100%;
|
|
text-align: center;
|
|
font-family: SourceHanSansCN-Medium, SourceHanSansCN-Medium;
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
.shop_contenbox {
|
|
padding: 0 60rpx;
|
|
|
|
.shop_contenboxitem:nth-child(1) {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.shop_contenboxitem {
|
|
margin-left: 24rpx;
|
|
padding: 6rpx 10rpx;
|
|
background: #F9F9F9;
|
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
|
|
font-weight: normal;
|
|
font-size: 28rpx;
|
|
color: #666666;
|
|
}
|
|
|
|
.shop_contenboxitems {
|
|
background: #F1CB66;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
|
|
.shop_contenlist {
|
|
position: relative;
|
|
margin-top: 32rpx;
|
|
background: #fff;
|
|
|
|
.shop_contenlistabsolute {
|
|
position: absolute;
|
|
top: -32rpx;
|
|
right: 32rpx;
|
|
|
|
.flex-start {
|
|
font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
|
|
font-weight: normal;
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
|
|
.flex-starttext {
|
|
color: #FF981E;
|
|
}
|
|
}
|
|
}
|
|
|
|
.shop_contenlistitem {
|
|
padding: 32rpx 44rpx;
|
|
border-bottom: 2rpx solid #E5E5E5;
|
|
|
|
.shop_contenlistitemone {
|
|
view:nth-child(1) {
|
|
font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
|
|
font-weight: normal;
|
|
font-size: 28rpx;
|
|
color: #666666;
|
|
}
|
|
|
|
view:nth-child(2) {
|
|
margin-top: 16rpx;
|
|
font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
|
|
font-weight: normal;
|
|
font-size: 28rpx;
|
|
color: #999999;
|
|
}
|
|
}
|
|
|
|
.shop_contenlistitemtow {
|
|
font-family: SourceHanSansCN-Medium, SourceHanSansCN-Medium;
|
|
font-weight: normal;
|
|
font-size: 32rpx;
|
|
color: #FF981E;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |