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

完成在线商城页面UI

master
邓平艺 5 years ago
parent
86fd97ab33
commit
6fb353835e
4 changed files with 317 additions and 2 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. 2
      components/index-nav/index-nav.vue
  2. 7
      pages.json
  3. 2
      pages/discover/discover.vue
  4. 308
      pages/index/onlineMall/onlineMall.vue

2
components/index-nav/index-nav.vue
View File

@ -42,7 +42,7 @@ export default {
image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png', image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png',
name: '数码家电' name: '数码家电'
},{ },{
link: '',
link: '/pages/index/onlineMall/onlineMall',
image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png', image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png',
name: '黄金珠宝' name: '黄金珠宝'
},{ },{

7
pages.json
View File

@ -952,6 +952,13 @@
"navigationBarTitleText": "兑换记录", "navigationBarTitleText": "兑换记录",
"navigationStyle": "custom" "navigationStyle": "custom"
} }
},
{
"path" : "pages/index/onlineMall/onlineMall",
"style" : {
"navigationBarTitleText": "在线商城",
"navigationStyle": "custom"
}
} }
], ],
"globalStyle": { "globalStyle": {

2
pages/discover/discover.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<view> <view>
<lf-nav :spreadOut="true" :showIcon="true" title="发现"></lf-nav>
<lf-nav :spreadOut="true" title="发现"></lf-nav>
<view> <view>
<u-tabs :list="tab_list" active-color="#15716E" inactive-color='#777777' :is-scroll="true" :current="current" @change="tabChange"></u-tabs> <u-tabs :list="tab_list" active-color="#15716E" inactive-color='#777777' :is-scroll="true" :current="current" @change="tabChange"></u-tabs>
</view> </view>

308
pages/index/onlineMall/onlineMall.vue
View File

@ -0,0 +1,308 @@
<template>
<view>
<lf-nav title="在线商城" :showIcon="true" @changeHeight="e => nav_height = e"></lf-nav>
<view class="head">
<u-search placeholder="搜你想要的" :show-action="false" :disabled="true" @click="searchClick"></u-search>
</view>
<view class="filter-box">
<!-- tabs -->
<view class="filter-item" @click="switchTab(0)">
<text style="white-space: nowrap">综合排序</text>
</view>
<view class="filter-item">
<text style="white-space: nowrap">黄金珠宝</text>
</view>
<view class="filter-item" @click="switchTab(2)">
<text style="white-space: nowrap">筛选</text>
</view>
<!-- 普通列表文字选择 -->
<view class="filter-modal" v-if="show_filter && tab_current == 0" @click="show_filter = false">
<view class="filter-content">
<view>综合排序</view>
<view>销量最高</view>
<view>价格最香</view>
<view>好评最多</view>
</view>
</view>
<!-- 多条件搜索 -->
<view class="filter-modal" v-else-if="show_filter && tab_current == 2" @click="show_filter = false">
<view class="filter-many" @click.stop>
<view class="filter-main">
<view>
<view class="filter-title lf-row-between">
<view>价格区间</view>
<view class="lf-flex">
<input class="filter-input" placeholder="最低价" />
<view class="filter-division">-</view>
<input class="filter-input" placeholder="最高价"/>
</view>
</view>
<view class="filter-title" style="margin-top: 80rpx;">
<text>品牌</text>
<text class="lf-font-24 lf-color-777">(可多选)</text>
</view>
<view class="lf-flex-wrap">
<view class="filter-capsule" v-for="(item) in 10" :key="item">周大福</view>
</view>
</view>
</view>
<view class="filter-foot">
<button class="filter-btn" >重置条件</button>
<button class="filter-btn solid-btn" >确定</button>
</view>
</view>
</view>
</view>
<view style="height: 104rpx;"></view>
<scroll-view :style="{height: autoHeight}" :scroll-y="true">
<view class="scroll-content">
<lf-waterfall :list="list"></lf-waterfall>
</view>
</scroll-view>
</view>
</template>
<script>
import lfWaterfall from '@/components/lf-waterfall-shopdetails/lf-waterfall.vue';
export default {
components: {
lfWaterfall
},
data(){
return {
show_filter: true,
tab_current: null,
scrollH: 0,
nav_height: 0,
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)"
}
]
}
},
computed: {
autoHeight(){
return `calc(${this.scrollH}px - ${this.nav_height}px - 124rpx - 104rpx)`;
}
},
onLoad(){
let info = uni.getSystemInfoSync();
this.scrollH = info.screenHeight;
},
methods: {
searchClick(){
this.$url('/pages/shop/search');
},
switchTab(current){
if(this.tab_current != current){
this.show_filter = true;
}else{
this.show_filter = !this.show_filter;
}
this.tab_current = current;
}
}
}
</script>
<style lang="scss" scoped="scoped">
.head{
padding: 30rpx 32rpx;
}
.filter-box{
width: 750rpx;
height: 102rpx;
border-bottom: 1rpx solid #e5e5e5;
position: fixed;
background-color: #FFFFFF;
z-index: 9;
display: flex;
// justify-content: space-between;
justify-content: space-around;
align-items: center;
padding: 0 32rpx;
box-sizing: border-box;
.filter-item{
width: 114rpx;
height: 62rpx;
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
font-size: 28rpx;
color: #222222;
.tab-active{
display: inline-block;
transform: rotate(180deg);
color: #15716E !important;
}
}
.filter-modal{
position: absolute;
z-index: 7;
background-color: rgba(0,0,0,0.5);
top: 103rpx;
right: 0;
bottom: 0;
left: 0;
width: 100vw;
height: calc(100vh - 103rpx);
.filter-content{
position: absolute;
width: 100%;
height: max-content;
max-height: 806rpx;
background-color: #FFFFFF;
left: 0;
z-index: 14;
overflow-y: scroll;
padding: 0 0 32rpx 32rpx;
display: flex;
flex-direction: column;
justify-content: space-evenly;
view{
height: 60rpx;
// border-bottom: 1rpx solid #e5e5e5;
padding: 20rpx 0;
line-height: 60rpx;
}
}
.filter-many{
position: absolute;
width: 100%;
height: 630rpx;
background-color: #FFFFFF;
left: 0;
z-index: 14;
.filter-main{
height: 500rpx;
overflow-y: scroll;
box-sizing: border-box;
padding: 32rpx;
.filter-title{
font-size: 28rpx;
color: #222222;
font-weight: bold;
margin-bottom: 20rpx;
.filter-input{
width: 160rpx;
height: 50rpx;
background-color: #FFFFFF;
border: 1rpx solid #e5e5e5;
text-align: center;
font-size: 24rpx;
font-weight: initial;
border-radius: 40rpx;
}
.filter-division{
padding: 0 20rpx;
font-weight: initial;
}
}
.filter-capsule{
width: 163rpx;
height: 62rpx;
border-radius: 31rpx;
border: 1rpx solid #999999;
font-size: 20rpx;
color: #999999;
text-align: center;
line-height: 62rpx;
margin-right: 12rpx;
&:nth-child(4n){
margin-right: 0rpx;
}
&:nth-child(n+5){
margin-top: 12rpx;
}
}
.filter-active{
border-color: #15716E;
color: #15716E;
}
.input-search{
width: 686rpx;
height: 62rpx;
background-color: #FFFFFF;
border-radius: 10rpx;
border: 1rpx solid #DDDDDD;
box-sizing: border-box;
padding: 0 15rpx;
font-size: 28rpx;
margin-bottom: 50rpx;
}
}
.filter-main>view:nth-child(n+3){
margin-top: 40rpx;
}
.filter-foot{
height: 130rpx;
border-top: 1rpx solid #e5e5e5;
padding: 32rpx;
display: flex;
justify-content: space-between;
align-items: center;
.filter-btn{
width: 332rpx;
height: 90rpx;
border-radius: 10rpx;
border: 1rpx solid #555555;
background-color: #FFFFFF;
line-height: 88rpx;
font-size: 32rpx;
color: #555555;
margin: 0;
}
.solid-btn{
background-color: #15716E;
color: #FFFFFF;
border: none;
}
}
}
}
}
.scroll-content{
padding: 30rpx 32rpx;
}
</style>
Write Preview
Loading…
Cancel
Save