邓平艺
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