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

完成搜索页和搜索结果列表页UI

master
邓平艺 4 years ago
parent
df26efd601
commit
c80d463657
4 changed files with 282 additions and 1 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 14
      pages.json
  2. 2
      pages/index/index/index.vue
  3. 86
      pages/shop/search.vue
  4. 181
      pages/shop/searchList.vue

14
pages.json
View File

@ -893,6 +893,20 @@
"navigationBarTitleText": "领券中心",
"navigationStyle": "custom"
}
},
{
"path" : "pages/shop/search",
"style" : {
"navigationBarTitleText": "搜索",
"navigationStyle": "custom"
}
},
{
"path" : "pages/shop/searchList",
"style" : {
"navigationBarTitleText": "搜索",
"navigationStyle": "custom"
}
}
],
"globalStyle": {

2
pages/index/index/index.vue
View File

@ -9,7 +9,7 @@
<text class="lf-iconfont icon-nv"></text>
<text class="lf-m-l-4">停车</text>
</view>
<view class="lf-nav-capsule lf-bg-search" @click="$msg('敬请期待')">
<view class="lf-nav-capsule lf-bg-search" @click="$url('/pages/shop/search')">
<text class="lf-iconfont icon-nv"></text>
<text class="lf-m-l-4">搜索</text>
</view>

86
pages/shop/search.vue
View File

@ -0,0 +1,86 @@
<template>
<view>
<lf-nav title="搜索" :showIcon="true"></lf-nav>
<view class="head">
<u-search placeholder="请输入商品名或商户名" :focus="is_focus" v-model="value" @custom="customClick"></u-search>
</view>
<view class="content">
<!-- 大家都在搜 -->
<view>
<text class="title">大家都在搜</text>
</view>
<view class="list">
<view class="item">秋上新</view>
<view class="item">纪梵希</view>
<view class="item">雅诗兰黛</view>
<view class="item">中秋</view>
<view class="item">苹果爱普</view>
<view class="item">基督教烧烤</view>
</view>
<!-- 我搜过的 -->
<view class="lf-row-between">
<text class="title">我搜过的</text>
<text class="lf-iconfont icon--1 lf-color-777"></text>
</view>
<view class="list">
<view class="item item-2">秋上新</view>
<view class="item item-2">纪梵希</view>
<view class="item item-2">雅诗兰黛</view>
<view class="item item-2">中秋</view>
<view class="item item-2">苹果爱普</view>
<view class="item item-2">基督教烧烤</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
value: '',
is_focus: true // 是否自动获得焦点
}
},
onLoad(){
},
methods: {
customClick(event){
console.log("点击了", event);
this.$url('/pages/shop/searchList');
}
}
}
</script>
<style lang="scss" scoped>
.head{
padding: 30rpx 32rpx;
}
.content{
padding: 20rpx 32rpx;
.title{
font-size: 28rpx;
color: #999999;
}
.list{
display: flex;
flex-wrap: wrap;
padding: 20rpx 0 40rpx;
.item{
padding: 4rpx 20rpx;
background-color: #15716E;
color: #FFFFFF;
border-radius: 34rpx;
font-size: 28rpx;
margin-right: 20rpx;
margin-bottom: 20rpx;
}
.item-2{
background-color: #F4F8F8;
color: #333333;
}
}
}
</style>

181
pages/shop/searchList.vue
View File

@ -0,0 +1,181 @@
<template>
<view>
<lf-nav title="搜索" :showIcon="true" @changeHeight="e => nav_height = e"></lf-nav>
<view class="head">
<u-search placeholder="请输入商品名或商户名" action-text="取消" v-model="value" @custom="customClick"></u-search>
</view>
<view>
<u-tabs :list="tab_list" active-color="#15716E" inactive-color='#777777' :is-scroll="false" :current="tab_current" @change="tabChange"></u-tabs>
</view>
<swiper :current="tab_current" @change="swiperChange" :style="{height: autoHeight}">
<swiper-item v-for="(tab_item, tab_index) in tab_list" :key="tab_index">
<scroll-view :scroll-y="true" :style="{height: autoHeight}">
<view class="scroll-content" v-if="tab_index == 0">
<lf-waterfall :list="goods_list"></lf-waterfall>
</view>
<view class="scroll-content" v-else>
<view class="shop-box" v-for="(item, index) in 3" :key="index">
<image class="shop-img"></image>
<view class="shop-info">
<view class="lf-line-1">luckin coffee 瑞幸咖啡</view>
<view>餐饮·美食</view>
</view>
</view>
</view>
</scroll-view>
</swiper-item>
</swiper>
</view>
</template>
<script>
import lfWaterfall from '@/components/lf-waterfall-shopdetails/lf-waterfall.vue';
export default {
components: {
lfWaterfall
},
data() {
return {
value: '爱慕先生',
tab_current: 0,
tab_list: [{
name: '商品(8)'
},{
name: '商户(1)'
}],
scrollH: 0,
nav_height: 0,
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)"
}
]
}
},
computed: {
autoHeight(){
return `calc(${this.scrollH}px - ${this.nav_height}px - 124rpx - 86rpx)`;
}
},
onLoad(options){
let info = uni.getSystemInfoSync();
this.scrollH = info.screenHeight;
},
methods: {
customClick(){
this.$toBack();
},
tabChange(event){
this.tab_current = event;
},
swiperChange(event){
this.tab_current = event.detail.current;
}
}
}
</script>
<style lang="scss" scoped>
.head{
padding: 30rpx 32rpx;
}
.scroll-content{
padding: 30rpx 32rpx;
}
.shop-box{
width: 100%;
height: 100rpx;
display: flex;
&:nth-child(n+2){
margin-top: 60rpx;
}
.shop-img{
width: 100rpx;
height: 100rpx;
background-color: #EEEEEE;
border-radius: 5rpx;
margin-right: 15rpx;
}
.shop-info{
width: 570rpx;
height: 100rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
&>view:nth-child(1){
font-size: 36rpx;
color: #222222;
font-weight: bold;
}
&>view:nth-child(2){
font-size: 24rpx;
color: #777777;
}
}
}
// 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