418 lines
9.1 KiB
Vue
418 lines
9.1 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-start">
|
|
<image src="@/static/shop/weitu.png" mode="aspectFill"></image>
|
|
<view style="margin-left: 10rpx;">
|
|
当前积分
|
|
</view>
|
|
</view>
|
|
<view class="shop-coveroneboxnuber">
|
|
5830
|
|
</view>
|
|
<navigator url="/pages/user/shop/detail" hover-class="navigator-hover"
|
|
class="shop-coveroneboxdetail flex-start">
|
|
<view style="margin-right: 20rpx;">
|
|
积分明细
|
|
</view>
|
|
<u-icon name="arrow-right" color="#666666" size="28"></u-icon>
|
|
</navigator>
|
|
<view class="shop-coveroneinput flex-start">
|
|
<u-search shape="round" searchIconSize='32rpx' height='100%' bgColor='#fff' placeholder="请输入商品"
|
|
:animation="true" :clearabled="true" v-model="keyword"></u-search>
|
|
<view class="shop-coveroneinputsouso">
|
|
搜索
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="shop_content">
|
|
<view class="shop_contenttitle">
|
|
<view class="shop_contenttitleitem" :class="index == 1?'shop_contenttitleitems':''"
|
|
v-for="(item,index) in shopcontenboxlsit" :key="index">
|
|
{{item.name}}
|
|
</view>
|
|
</view>
|
|
<view class="shop_contentlist flex-between">
|
|
<view class="shop_contentlistitem flex-colum-start" @click="clickshopinfo(item)"
|
|
v-for="(item,index) in 4" :key="index">
|
|
<image class="shop_contentlistitemimage" src="@/static/avatar.png" mode="aspectFill"></image>
|
|
<view class="shop_contentlistitemone">
|
|
澳洲高级洗发水
|
|
</view>
|
|
<view class="shop_contentlistitemtow flex-start">
|
|
<image src="@/static/shop/weitu.png" mode="aspectFill"></image>
|
|
<view>
|
|
30积分
|
|
</view>
|
|
</view>
|
|
<view class="shop_contentlistitemthere flex-between">
|
|
<view>
|
|
市场价¥100.00
|
|
</view>
|
|
<view>
|
|
已兑换0390件
|
|
</view>
|
|
</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 {
|
|
keyword: '',
|
|
menuInfo: {},
|
|
paddingBtmSize: 6,
|
|
isFixed: false,
|
|
active: 0,
|
|
titleTopNums: [],
|
|
shopcontenboxlsit: [{
|
|
name: '全部'
|
|
},
|
|
{
|
|
name: '交易积分'
|
|
}, {
|
|
name: '活动积分'
|
|
|
|
}, {
|
|
name: '任务积分'
|
|
|
|
}, {
|
|
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() {
|
|
// #ifdef APP-PLUS || H5
|
|
uni.getSystemInfo({
|
|
success: (e) => {
|
|
console.log(e)
|
|
this.menuInfo = e
|
|
}
|
|
})
|
|
// #endif
|
|
// #ifdef MP-WEIXIN
|
|
this.menuInfo = uni.getMenuButtonBoundingClientRect()
|
|
// #endif
|
|
},
|
|
onUnload() {
|
|
|
|
},
|
|
methods: {
|
|
clickshopinfo(item) {
|
|
uni.pro.navigateTo('user/shop/shopinfo', {
|
|
item: item
|
|
})
|
|
},
|
|
// 导航栏点击
|
|
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;
|
|
|
|
page {
|
|
background: #fff;
|
|
}
|
|
|
|
.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;
|
|
width: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
padding: 0rpx 32rpx;
|
|
z-index: 2;
|
|
|
|
.shop-coveronebox {
|
|
font-family: PingFangSC-Semibold, PingFangSC-Semibold;
|
|
font-weight: normal;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
|
|
image {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
}
|
|
}
|
|
|
|
.shop-coveroneboxnuber {
|
|
margin-top: 8rpx;
|
|
font-family: Roboto, Roboto;
|
|
font-weight: bold;
|
|
font-size: 74rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
.shop-coveroneboxdetail {
|
|
font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
|
|
font-weight: normal;
|
|
font-size: 28rpx;
|
|
color: #666666;
|
|
}
|
|
|
|
.shop-coveroneinput {
|
|
margin-top: 32rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 38rpx 38rpx 38rpx 38rpx;
|
|
height: 64rpx;
|
|
line-height: 64rpx;
|
|
|
|
.shop-coveroneinputsouso {
|
|
border-left: 2rpx solid #E8E8E8;
|
|
height: 100%;
|
|
padding: 4rpx 28rpx;
|
|
font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
|
|
font-weight: normal;
|
|
font-size: 28rpx;
|
|
line-height: 60 rpx;
|
|
color: #666666;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.shop_content {
|
|
position: relative;
|
|
top: 0rpx;
|
|
margin-top: -24rpx;
|
|
z-index: 3;
|
|
width: 100%;
|
|
background: #FFFFFF;
|
|
border-radius: 32rpx 32rpx 0rpx 0rpx;
|
|
padding: 0 28rpx 28rpx 28rpx;
|
|
|
|
.shop_contenttitle {
|
|
width: 100%;
|
|
padding-top: 32rpx;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
overflow-x: scroll;
|
|
white-space: nowrap;
|
|
|
|
.shop_contenttitleitem:nth-child(1) {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.shop_contenttitleitem {
|
|
margin-left: 18rpx;
|
|
font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
|
|
font-weight: normal;
|
|
font-size: 32rpx;
|
|
color: #666666;
|
|
}
|
|
|
|
.shop_contenttitleitems {
|
|
color: #FF981E;
|
|
}
|
|
}
|
|
|
|
.shop_contentlist {
|
|
.shop_contentlistitem {
|
|
margin-top: 32rpx;
|
|
width: 48%;
|
|
background: #FFFFFF;
|
|
box-shadow: 0rpx 2rpx 4rpx 2rpx rgba(0, 0, 0, 0.16);
|
|
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
|
|
|
.shop_contentlistitemimage {
|
|
width: 100%;
|
|
height: 296rpx;
|
|
border-radius: 18rpx 18rpx 0 0;
|
|
}
|
|
|
|
.shop_contentlistitemone {
|
|
padding: 16rpx 16rpx 0 16rpx;
|
|
width: 100%;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
font-weight: normal;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
.shop_contentlistitemtow {
|
|
padding: 16rpx 16rpx 0 16rpx;
|
|
|
|
image {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
}
|
|
|
|
view {
|
|
margin-left: 6rpx;
|
|
font-family: SourceHanSansCN-Medium, SourceHanSansCN-Medium;
|
|
font-weight: normal;
|
|
font-size: 24rpx;
|
|
color: #FF981E;
|
|
}
|
|
}
|
|
|
|
.shop_contentlistitemthere {
|
|
padding: 16rpx;
|
|
width: 100%;
|
|
|
|
view:nth-child(1) {
|
|
font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
|
|
font-weight: normal;
|
|
font-size: 20rpx;
|
|
color: #999999;
|
|
text-align: center;
|
|
font-style: normal;
|
|
text-decoration-line: line-through;
|
|
text-transform: none;
|
|
}
|
|
|
|
view:nth-child(2) {
|
|
font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
|
|
font-weight: normal;
|
|
font-size: 20rpx;
|
|
color: #999999;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |