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.
474 lines
10 KiB
474 lines
10 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: 66rpx;height: 66rpx;width: 70%;padding: 0 20rpx;" />
|
|
<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?'28rpx':'24rpx','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: 50rpx;line-height: 50rpx;width: 100%;padding-left: 24rpx;font-size: 24rpx;font-weight: 700;">
|
|
更多分类
|
|
<text style="font-size: 24rpx;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: 10rpx;" />
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/90a37f3f8a204d7eaa8ea2d3293e1086.png" alt=""
|
|
style="margin-left: 10rpx;" />
|
|
</view>
|
|
<view style="display: flex;flex-wrap: wrap;">
|
|
<view class="c-1" @tap="goDetail(item)" v-for="(item,index) in goodsList" :key="index">
|
|
<view class="c-2">
|
|
<img :src="item.pic" alt="">
|
|
</view>
|
|
<view class="c-3">
|
|
{{item.text}}
|
|
</view>
|
|
<view class="c-4">
|
|
<view class="c-5">
|
|
￥{{item.price}}
|
|
</view>
|
|
<view class="c-6">
|
|
{{item.xiangyao}}人想要
|
|
</view>
|
|
</view>
|
|
<view class="c-7">
|
|
<img :src="item.icon" alt="" />
|
|
<view class="c-8">
|
|
AAA二手数码
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view style="width: 100%;height: 200rpx;"></view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
goodsList: [{
|
|
pic: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/9362dfb66c0f426789584cabb3977ccc.png',
|
|
text: 'LG27寸显示屏，带底座，屏幕显示正常',
|
|
price: 100,
|
|
xiangyao: 12,
|
|
icon: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/801c569079da4540990c1cc634186fdd.png',
|
|
shopName: 'AAA二手数码'
|
|
}, {
|
|
pic: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/9362dfb66c0f426789584cabb3977ccc.png',
|
|
text: 'LG27寸显示屏，带底座，屏幕显示正常',
|
|
price: 100,
|
|
xiangyao: 12,
|
|
icon: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/801c569079da4540990c1cc634186fdd.png',
|
|
shopName: 'AAA二手数码'
|
|
}, {
|
|
pic: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/9362dfb66c0f426789584cabb3977ccc.png',
|
|
text: 'LG27寸显示屏，带底座，屏幕显示正常',
|
|
price: 100,
|
|
xiangyao: 12,
|
|
icon: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/801c569079da4540990c1cc634186fdd.png',
|
|
shopName: 'AAA二手数码'
|
|
}, {
|
|
pic: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/9362dfb66c0f426789584cabb3977ccc.png',
|
|
text: 'LG27寸显示屏，带底座，屏幕显示正常',
|
|
price: 100,
|
|
xiangyao: 12,
|
|
icon: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/801c569079da4540990c1cc634186fdd.png',
|
|
shopName: 'AAA二手数码'
|
|
}, {
|
|
pic: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/9362dfb66c0f426789584cabb3977ccc.png',
|
|
text: 'LG27寸显示屏，带底座，屏幕显示正常',
|
|
price: 100,
|
|
xiangyao: 12,
|
|
icon: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/801c569079da4540990c1cc634186fdd.png',
|
|
shopName: 'AAA二手数码'
|
|
}],
|
|
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() {
|
|
this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
|
this.$forceUpdate()
|
|
},
|
|
goDetail(item){
|
|
uni.navigateTo({
|
|
url:'/package2/IdleTrad/detail'
|
|
})
|
|
},
|
|
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%;
|
|
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: 200rpx;
|
|
background-size: 100%;
|
|
}
|
|
|
|
.title-sreach {
|
|
width: 70%;
|
|
display: flex;
|
|
height: 66rpx;
|
|
line-height: 66rpx;
|
|
display: flex;
|
|
background: #fff;
|
|
border-radius: 66rpx;
|
|
padding-left: 20rpx;
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
.sreach-btn {
|
|
width: 100rpx;
|
|
height: 50rpx;
|
|
line-height: 50rpx;
|
|
background: rgba(0, 35, 28, 1);
|
|
color: rgba(166, 255, 234, 1);
|
|
border-radius: 60rpx;
|
|
text-align: center;
|
|
margin: 8rpx;
|
|
}
|
|
|
|
.tab-box {
|
|
display: flex;
|
|
height: 60rpx;
|
|
line-height: 40rpx;
|
|
padding-left: 24rpx;
|
|
width: 100%;
|
|
overflow: scroll;
|
|
white-space: nowrap;
|
|
position: relative;
|
|
}
|
|
|
|
.tab1 {
|
|
margin-right: 36rpx;
|
|
}
|
|
|
|
.nav-tab {
|
|
position: relative;
|
|
}
|
|
|
|
.black-line {
|
|
width: 50rpx;
|
|
height: 6rpx;
|
|
background: #000;
|
|
border-radius: 6rpx;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.down-tab {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
background: #fff;
|
|
width: 110rpx;
|
|
height: 40rpx;
|
|
text-align: right;
|
|
line-height: 40rpx;
|
|
padding-right: 14rpx;
|
|
background: linear-gradient(to right, transparent 0%, #ffffff 60%, #ffffff 100%);
|
|
}
|
|
|
|
.up-tab {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 400rpx;
|
|
border-bottom-left-radius: 20rpx;
|
|
border-bottom-right-radius: 20rpx;
|
|
z-index: 99;
|
|
background: #F5F8F5;
|
|
}
|
|
|
|
.tab-mask {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
top: 200rpx;
|
|
left: 0;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
z-index: 97;
|
|
}
|
|
|
|
.tanchu-tab {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.tanchu1 {
|
|
width: 160rpx;
|
|
height: 60rpx;
|
|
background: #fff;
|
|
border-radius: 20rpx;
|
|
text-align: center;
|
|
margin: 20rpx 0 0 20rpx;
|
|
line-height: 60rpx;
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
.shop-list {
|
|
display: flex;
|
|
white-space: nowrap;
|
|
width: 100%;
|
|
padding: 0 24rpx;
|
|
overflow: scroll;
|
|
margin-top: 30rpx;
|
|
}
|
|
|
|
.shop1 {
|
|
height: 140rpx;
|
|
width: 100rpx;
|
|
text-align: center;
|
|
margin-right: 36rpx;
|
|
|
|
img {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 100rpx;
|
|
}
|
|
}
|
|
|
|
.shop-name {
|
|
height: 40rpx;
|
|
line-height: 40rpx;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.huodong {
|
|
padding: 0 24rpx;
|
|
display: flex;
|
|
height: 170rpx;
|
|
margin-top: 24rpx;
|
|
|
|
img {
|
|
height: 170rpx;
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
.c-1 {
|
|
background: #fff;
|
|
width: 340rpx;
|
|
margin-left: 24rpx;
|
|
margin-top: 20rpx;
|
|
border-radius: 20rpx;
|
|
height: 580rpx;
|
|
}
|
|
|
|
.c-2 {
|
|
background: #fff;
|
|
width: 340rpx;
|
|
height: 340rpx;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: 100%;
|
|
border-radius: 20rpx;
|
|
}
|
|
}
|
|
|
|
.c-3 {
|
|
background: #fff;
|
|
font-size: 28rpx;
|
|
font-weight: 700;
|
|
padding: 10rpx;
|
|
}
|
|
|
|
.c-4 {
|
|
display: flex;
|
|
padding: 0 10rpx;
|
|
height: 40rpx;
|
|
line-height: 40rpx;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.c-5 {
|
|
flex: 1;
|
|
font-size: 36rpx;
|
|
color: red;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.c-6 {
|
|
color: rgba(0, 35, 28, 0.6);
|
|
}
|
|
|
|
.c-7 {
|
|
height: 48rpx;
|
|
line-height: 48rpx;
|
|
display: flex;
|
|
margin-top: 20rpx;
|
|
padding:0 10rpx;
|
|
img {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
background-size: 100%;
|
|
border-radius: 48rpx;
|
|
}
|
|
}
|
|
|
|
.c-8 {
|
|
padding-left: 20rpx;
|
|
color: rgba(0, 35, 28, 0.6)
|
|
}
|
|
</style>
|