积分商城 添加地址
This commit is contained in:
魏啾
400
pages/user/shop/index.vue
Normal file
400
pages/user/shop/index.vue
Normal file
@@ -0,0 +1,400 @@
|
||||
<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';
|
||||
import webSocketUtils from '@/common/js/websocket.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
keyword: '',
|
||||
menuInfo: uni.getMenuButtonBoundingClientRect(),
|
||||
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(e) {
|
||||
|
||||
},
|
||||
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>
|
||||
Reference in New Issue
Block a user