Leadfyy.co
/
ec.uniapp-master
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

[完成] 商品专题页面UI 

[完成] 商品专题商品列表页面UI
master
邓平艺 4 years ago
parent
e752916122
commit
43252c52eb
3 changed files with 186 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 14
      pages.json
  2. 33
      pages/shop/goodsSpecial.vue
  3. 139
      pages/shop/specialList.vue

14
pages.json
View File

@ -830,6 +830,20 @@
"navigationBarTitleText": "确认订单", "navigationBarTitleText": "确认订单",
"navigationStyle": "custom" "navigationStyle": "custom"
} }
},
{
"path" : "pages/shop/goodsSpecial",
"style" : {
"navigationBarTitleText": "商品专题",
"navigationStyle": "custom"
}
},
{
"path" : "pages/shop/specialList",
"style" : {
"navigationBarTitleText": "商品专题列表",
"navigationStyle": "custom"
}
} }
], ],
"globalStyle": { "globalStyle": {

33
pages/shop/goodsSpecial.vue
View File

@ -0,0 +1,33 @@
<template>
<view class="content">
<lf-nav title="商品专题" :showIcon="true"></lf-nav>
<lf-shop-goods-card v-for="(item, index) in 5" :key="index"></lf-shop-goods-card>
<u-back-top :scrollTop="pageScrollTop"></u-back-top>
</view>
</template>
<script>
import lfShopGoodsCard from '@/components/lf-shopGoodsCard/lf-shopGoodsCard.vue';
export default {
components: {
lfShopGoodsCard
},
data(){
return {
}
},
onLoad(){
},
methods: {
}
}
</script>
<style lang="scss" scoped="scoped">
.content{
padding: 30rpx 0;
}
</style>

139
pages/shop/specialList.vue
View File

@ -0,0 +1,139 @@
<template>
<view>
<lf-nav title="活动名称活动名称" :showIcon="true"></lf-nav>
<view class="cover">
<image class="img" src="https://picsum.photos/200"></image>
</view>
<view>
<u-tabs :list="tab_list" active-color="#15716E" inactive-color='#777777' :is-scroll="true" :current="current" @change="tabChange"></u-tabs>
</view>
<view class="goods-list">
<!-- TODO 此处应为渲染多个lf-waterfall组件 -->
<lf-waterfall :list="list" ref="uWaterfallFather"></lf-waterfall>
</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(){
return {
current: 0,
tab_list: [{
name: '综合'
},{
name: '销量'
},{
name: '价格'
}],
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)"
},
{
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(index){
this.current = index;
}
}
}
</script>
<style lang="scss" scoped="scoped">
.cover{
width: 750rpx;
height: 245rpx;
.img{
width: 100%;
height: 100%;
}
}
.goods-list{
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);
}
/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