You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
338 lines
6.9 KiB
338 lines
6.9 KiB
<template>
|
|
<!-- 鱼塘 -->
|
|
<view class="page1">
|
|
<view class="tab-mask" v-if="showMoreTab == true"></view>
|
|
<view class="title">
|
|
<view class="title-sreach" :style="{'margin-top': menuButtonInfo.top +'px'}">
|
|
<uni-icons type="search"></uni-icons>
|
|
<input type="text" placeholder="搜索"
|
|
style="flex:1;line-height: 33px;height: 33px;width: 70%;padding: 0 10px;" />
|
|
<view class="sreach-btn">
|
|
搜索
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="nav-tab">
|
|
<view class="tab-box">
|
|
<view @tap="checkTab(index)" class="tab1" v-for="(item,index) in tabList" :key="index">
|
|
<view class="" style=""
|
|
:style="{'font-size':tabIndex == index?'14px':'12px','font-weight':tabIndex == index?'700':'400'}">
|
|
{{item.name}}
|
|
</view>
|
|
<view class="black-line" v-if="tabIndex == index"></view>
|
|
</view>
|
|
<view class="down-tab" @tap="showMoreTab = true">
|
|
<uni-icons type="down"></uni-icons>
|
|
</view>
|
|
</view>
|
|
<view class="up-tab" v-if="showMoreTab == true">
|
|
<view>
|
|
<view
|
|
style="height: 25px;line-height: 25px;width: 100%;padding-left: 12px;font-size: 14px;font-weight: 700;">
|
|
更多分类
|
|
<text style="font-size: 12px;color: rgba(0, 35, 28, 0.5);">
|
|
点击进入分类
|
|
</text>
|
|
</view>
|
|
<view class="down-tab" @tap="showMoreTab = false">
|
|
<uni-icons type="down"></uni-icons>
|
|
</view>
|
|
</view>
|
|
<view class="tanchu-tab">
|
|
<view class="tanchu1" v-for="(item,index) in tabList" :key="index"
|
|
:style="{'background':tabIndex == index?'rgba(0, 35, 28, 1)':'#fff','color':tabIndex == index?'rgba(166, 255, 234, 1)':''}">
|
|
{{item.name}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="shop-list">
|
|
<view class="shop1" v-for="(item,index) in shopList" :key="index">
|
|
<img :src="item.img" alt="" />
|
|
<view class="shop-name">
|
|
{{item.shopName | sliceMsg}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="huodong">
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/bc6b887514a5469a938cdd0001e841c2.png" alt="" style="margin-right: 5px;" />
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/90a37f3f8a204d7eaa8ea2d3293e1086.png" alt="" style="margin-left: 5px;" />
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
shopList: [{
|
|
shopName: '高徒课堂',
|
|
img: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/6c4ab92a43c842d8bb22035bce1f65cc.png'
|
|
}, {
|
|
shopName: '赵一鸣',
|
|
img: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/6c4ab92a43c842d8bb22035bce1f65cc.png'
|
|
}, {
|
|
shopName: '蜜雪冰城',
|
|
img: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/6c4ab92a43c842d8bb22035bce1f65cc.png'
|
|
}, {
|
|
shopName: '怂柠',
|
|
img: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/6c4ab92a43c842d8bb22035bce1f65cc.png'
|
|
}, {
|
|
shopName: '麻辣烫酸辣粉',
|
|
img: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/6c4ab92a43c842d8bb22035bce1f65cc.png'
|
|
}, {
|
|
shopName: '鲸鱼AI教育',
|
|
img: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/6c4ab92a43c842d8bb22035bce1f65cc.png'
|
|
}],
|
|
showMoreTab: false,
|
|
tabIndex: 0,
|
|
tabList: [{
|
|
name: '兼职',
|
|
index: 0
|
|
}, {
|
|
name: '广告',
|
|
index: 1
|
|
}, {
|
|
name: '活动',
|
|
index: 2
|
|
}, {
|
|
name: '美妆个护',
|
|
index: 3
|
|
}, {
|
|
name: '考学职称',
|
|
index: 4
|
|
}, {
|
|
name: '技能服务',
|
|
index: 5
|
|
}, {
|
|
name: '省钱神券',
|
|
index: 6
|
|
}, {
|
|
name: '推荐',
|
|
index: 7
|
|
}, {
|
|
name: '摄影',
|
|
index: 8
|
|
}, {
|
|
name: '吃饭',
|
|
index: 8
|
|
}, {
|
|
name: '电影',
|
|
index: 8
|
|
}, {
|
|
name: '唱歌',
|
|
index: 8
|
|
}, {
|
|
name: '美妆个护',
|
|
index: 8
|
|
}, {
|
|
name: '考学职称',
|
|
index: 8
|
|
}, {
|
|
name: '技能服务',
|
|
index: 8
|
|
}, {
|
|
name: '二手旧物',
|
|
index: 8
|
|
}],
|
|
menuButtonInfo: {}
|
|
}
|
|
},
|
|
filters:{
|
|
sliceMsg(val) {
|
|
return val.slice(0, 4);
|
|
}
|
|
},
|
|
props: {
|
|
|
|
},
|
|
watch: {
|
|
|
|
},
|
|
onReachBottom() {
|
|
if (this.searchForm.pageNumber >= this.totalPages) return;
|
|
// this.status = 'loading';
|
|
this.searchForm.pageNumber++;
|
|
this.getShopList();
|
|
|
|
},
|
|
methods: {
|
|
init() {
|
|
console.log("配送初始化")
|
|
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
|
this.$forceUpdate()
|
|
},
|
|
checkTab(index) {
|
|
this.tabIndex = index
|
|
},
|
|
getShopList() {
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 24rpx;
|
|
background: #F5F8F5;
|
|
color: #00231C;
|
|
}
|
|
|
|
.page1 {
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 24rpx;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.title {
|
|
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/25cad6ddbfb44230abf0c4d1a6259e16.png') no-repeat;
|
|
width: 100%;
|
|
height: 100px;
|
|
background-size: 100%;
|
|
}
|
|
|
|
.title-sreach {
|
|
width: 70%;
|
|
display: flex;
|
|
height: 66rpx;
|
|
line-height: 66rpx;
|
|
display: flex;
|
|
background: #fff;
|
|
border-radius: 66rpx;
|
|
padding-left: 10px;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.sreach-btn {
|
|
width: 50px;
|
|
height: 25px;
|
|
line-height: 25px;
|
|
background: rgba(0, 35, 28, 1);
|
|
color: rgba(166, 255, 234, 1);
|
|
border-radius: 30px;
|
|
text-align: center;
|
|
margin: 4px;
|
|
}
|
|
|
|
.tab-box {
|
|
display: flex;
|
|
height: 30px;
|
|
line-height: 20px;
|
|
padding-left: 12px;
|
|
width: 100%;
|
|
overflow: scroll;
|
|
white-space: nowrap;
|
|
position: relative;
|
|
}
|
|
|
|
.tab1 {
|
|
margin-right: 18px;
|
|
}
|
|
|
|
.nav-tab {
|
|
position: relative;
|
|
}
|
|
|
|
.black-line {
|
|
width: 25px;
|
|
height: 3px;
|
|
background: #000;
|
|
border-radius: 3px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.down-tab {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
background: #fff;
|
|
width: 55px;
|
|
height: 20px;
|
|
text-align: right;
|
|
line-height: 20px;
|
|
padding-right: 7px;
|
|
background: linear-gradient(to right, transparent 0%, #ffffff 60%, #ffffff 100%);
|
|
}
|
|
|
|
.up-tab {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 200px;
|
|
border-bottom-left-radius: 10px;
|
|
border-bottom-right-radius: 10px;
|
|
z-index: 99;
|
|
background: #F5F8F5;
|
|
}
|
|
|
|
.tab-mask {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
top: 100px;
|
|
left: 0;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
z-index: 97;
|
|
}
|
|
|
|
.tanchu-tab {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.tanchu1 {
|
|
width: 80px;
|
|
height: 30px;
|
|
background: #fff;
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
margin: 10px 0 0 10px;
|
|
line-height: 30px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.shop-list {
|
|
display: flex;
|
|
white-space: nowrap;
|
|
width: 100%;
|
|
padding: 0 12px;
|
|
overflow: scroll;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.shop1 {
|
|
height: 70px;
|
|
width: 50px;
|
|
text-align: center;
|
|
margin-right: 18px;
|
|
img {
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50px;
|
|
}
|
|
}
|
|
|
|
.shop-name {
|
|
height: 20px;
|
|
line-height: 20px;
|
|
font-weight: 600;
|
|
}
|
|
.huodong{
|
|
padding: 0 12px;
|
|
display: flex;
|
|
height: 85px;
|
|
margin-top: 12px;
|
|
img{
|
|
height: 85px;
|
|
flex: 1;
|
|
}
|
|
}
|
|
</style>
|