邓平艺
4 years ago
4 changed files with 288 additions and 0 deletions
-
1components/lf-code/lf-barcode.vue
-
1components/lf-code/lf-qrcode.vue
-
7pages.json
-
279pages/point/shoppingMall/shoppingMall.vue
@ -0,0 +1,279 @@ |
|||||
|
<template> |
||||
|
<view> |
||||
|
<lf-nav title="积分商城" titleColor="#fff" bgColor="transparent" :showIcon="true" :spreadOut="false"></lf-nav> |
||||
|
<view class="head"> |
||||
|
<view class="bg-view"></view> |
||||
|
</view> |
||||
|
<view class="menu"> |
||||
|
<view class="left"> |
||||
|
<view> |
||||
|
<text class="lf-iconfont icon--"></text> |
||||
|
<text class="point-num">783</text> |
||||
|
<text class="lf-iconfont icon--"></text> |
||||
|
</view> |
||||
|
<view class="lf-font-24">当前积分</view> |
||||
|
</view> |
||||
|
<view class="lf-flex"> |
||||
|
<view class="item"> |
||||
|
<text class="lf-iconfont icon-- lf-font-50"></text> |
||||
|
<text>兑换记录</text> |
||||
|
</view> |
||||
|
<view class="item"> |
||||
|
<text class="lf-iconfont icon-- lf-font-50"></text> |
||||
|
<text>购物车</text> |
||||
|
<view class="angle-mark">99+</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="lf-m-t-30" v-if="tab_list.length"> |
||||
|
<u-tabs :list="tab_list" |
||||
|
active-color="#15716E" |
||||
|
inactive-color='#777777' |
||||
|
:is-scroll="true" |
||||
|
:current="tab_current" |
||||
|
@change="tabChange"> |
||||
|
</u-tabs> |
||||
|
</view> |
||||
|
<view class="page-item"> |
||||
|
<view class="filter"> |
||||
|
<view :class="{'filter-item': true, 'filter-active': index == filter_current}" |
||||
|
v-for="(item, index) in filter_list" :key="index" |
||||
|
@click="filter_current = index">{{ item }} |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="goods"> |
||||
|
<lf-waterfall :list="goods_list"></lf-waterfall> |
||||
|
</view> |
||||
|
</view> |
||||
|
<u-back-top :scrollTop="pageScrollTop"></u-back-top> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import lfWaterfall from '@/components/lf-waterfall-shopdetails/lf-waterfall.vue'; |
||||
|
export default { |
||||
|
components: { |
||||
|
lfWaterfall |
||||
|
}, |
||||
|
data(){ |
||||
|
let _public = { |
||||
|
page: 1, |
||||
|
isPage: true, |
||||
|
loadingClass: true, |
||||
|
loadingText: '正在加载中' |
||||
|
} |
||||
|
return { |
||||
|
tab_current: 0, |
||||
|
tab_list: [{ |
||||
|
name: '全部', |
||||
|
list: [], |
||||
|
..._public |
||||
|
},{ |
||||
|
name: '时尚尖货', |
||||
|
list: [], |
||||
|
..._public |
||||
|
},{ |
||||
|
name: '美容美妆', |
||||
|
list: [], |
||||
|
..._public |
||||
|
},{ |
||||
|
name: '家具用品', |
||||
|
list: [], |
||||
|
..._public |
||||
|
},{ |
||||
|
name: '儿童玩具', |
||||
|
list: [], |
||||
|
..._public |
||||
|
}], |
||||
|
filter_list: ['1～100','100～1万','1万～2万','2万～5万','>5万'], |
||||
|
filter_current: null, |
||||
|
goods_list: [ |
||||
|
{ |
||||
|
id: 10, |
||||
|
original_price: "4111.00", |
||||
|
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png", |
||||
|
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"], |
||||
|
price: "2412.00", |
||||
|
product_id: 1008, |
||||
|
sale: 0, |
||||
|
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)" |
||||
|
}, |
||||
|
{ |
||||
|
id: 10, |
||||
|
original_price: "4111.00", |
||||
|
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png", |
||||
|
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"], |
||||
|
price: "2412.00", |
||||
|
product_id: 1008, |
||||
|
sale: 0, |
||||
|
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)" |
||||
|
}, |
||||
|
{ |
||||
|
id: 10, |
||||
|
original_price: "4111.00", |
||||
|
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png", |
||||
|
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"], |
||||
|
price: "2412.00", |
||||
|
product_id: 1008, |
||||
|
sale: 0, |
||||
|
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)" |
||||
|
}, |
||||
|
{ |
||||
|
id: 10, |
||||
|
original_price: "4111.00", |
||||
|
picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png", |
||||
|
pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"], |
||||
|
price: "2412.00", |
||||
|
product_id: 1008, |
||||
|
sale: 0, |
||||
|
title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)" |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
onLoad(){ |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
tabChange(event){ |
||||
|
this.tab_current = event; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
page{ |
||||
|
overflow-x: hidden; |
||||
|
} |
||||
|
</style> |
||||
|
<style lang="scss" scoped="scoped"> |
||||
|
.head{ |
||||
|
width: 750rpx; |
||||
|
height: 283rpx; |
||||
|
background: linear-gradient(90deg, #22A2A0 0%, #187B7A 100%); |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
.bg-view{ |
||||
|
position: absolute; |
||||
|
right: -100rpx; |
||||
|
top: -200rpx; |
||||
|
width: 400rpx; |
||||
|
height: 400rpx; |
||||
|
border-radius: 50%; |
||||
|
background-color: rgba(255,255,255,0.04); |
||||
|
} |
||||
|
} |
||||
|
.menu{ |
||||
|
width: 686rpx; |
||||
|
height: 170rpx; |
||||
|
background: #FFFFFF; |
||||
|
box-shadow: 0rpx 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1); |
||||
|
border-radius: 20rpx; |
||||
|
box-sizing: border-box; |
||||
|
padding: 30rpx; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
color: #15716E; |
||||
|
margin: -80rpx auto 0; |
||||
|
position: relative; |
||||
|
z-index: 2; |
||||
|
.left{ |
||||
|
width: 340rpx; |
||||
|
.point-num{ |
||||
|
font-size: 48rpx; |
||||
|
font-weight: bold; |
||||
|
margin: 0 10rpx; |
||||
|
} |
||||
|
} |
||||
|
.item{ |
||||
|
width: 100rpx; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
flex-direction: column; |
||||
|
font-size: 24rpx; |
||||
|
position: relative; |
||||
|
&:nth-child(2n){ |
||||
|
margin-left: 40rpx; |
||||
|
} |
||||
|
.angle-mark{ |
||||
|
width: 30rpx; |
||||
|
height: 30rpx; |
||||
|
background-color: #FF9D9D; |
||||
|
color: #FFFFFF; |
||||
|
border-radius: 50%; |
||||
|
position: absolute; |
||||
|
right: 10rpx; |
||||
|
top: 10rpx; |
||||
|
font-size: 18rpx; |
||||
|
text-align: center; |
||||
|
line-height: 30rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.page-item{ |
||||
|
width: 750rpx; |
||||
|
height: max-content; |
||||
|
.filter{ |
||||
|
width: 100%; |
||||
|
height: 83rpx; |
||||
|
border: 1rpx solid #e5e5e5; |
||||
|
box-sizing: border-box; |
||||
|
padding: 0 32rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
.filter-item{ |
||||
|
width: 123rpx; |
||||
|
height: 43rpx; |
||||
|
font-size: 24rpx; |
||||
|
color: #777777; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
border-radius: 26rpx; |
||||
|
&:nth-child(n+2){ |
||||
|
margin-left: 28rpx; |
||||
|
} |
||||
|
&.filter-active{ |
||||
|
background-color: #15716E; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.goods{ |
||||
|
padding: 30rpx 32rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// tabs 样式修改 |
||||
|
/deep/.u-scroll-box { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
border-bottom: 1rpx solid rgba(0, 0, 0, 0.1); |
||||
|
width: max-content; |
||||
|
} |
||||
|
/deep/.u-scroll-box .u-tab-bar { |
||||
|
background-color: #15716E!important; |
||||
|
width: 80rpx!important; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
bottom: -12rpx; |
||||
|
} |
||||
|
|
||||
|
/deep/.special_tab .u-tabs .u-scroll-box .u-tab-bar { |
||||
|
background-color: #15716E!important; |
||||
|
width: 56rpx!important; |
||||
|
position: absolute; |
||||
|
height: 5rpx!important; |
||||
|
left: 8rpx; |
||||
|
bottom: -4rpx; |
||||
|
} |
||||
|
|
||||
|
/deep/ .u-tab-item { |
||||
|
font-size: 28rpx!important; |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue