278 lines
6.6 KiB
Vue
278 lines
6.6 KiB
Vue
<template>
|
|
<view class="top-fixed">
|
|
<view class="top">
|
|
<uni-icons type="location" size="30"></uni-icons>
|
|
<text>上海</text>
|
|
<uni-search-bar class="search-w-50" v-model="searchContent" placeholder="请输入查询内容" clearButton="auto" cancelButton="none" @confirm="searchClick" />
|
|
</view>
|
|
<scroll-view class="scroll-H" scroll-x="true" show-scrollbar="false" >
|
|
<button class="category-btn" v-for="item in categoryList"
|
|
:type="item.id ===selectId?'primary':'default'"
|
|
:key="item.id"
|
|
@click="categoryFilter(item.id)">
|
|
{{item.name}}
|
|
</button>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<scroll-view class="scroll-V" scroll-y>
|
|
<GroupOrderComponent v-for="item in orderList" :key="item.id"
|
|
:id="item.id"
|
|
:type="item.type"
|
|
:desc="item.desc"
|
|
:status="item.status"
|
|
:pickupAddr = "item.pickup_addr"
|
|
:itemList="item.item_list"
|
|
:groupLeader = "item.group_leader"
|
|
:statisticDesc = "item.statistic_desc"
|
|
@share="shareClick"
|
|
@join="joinClicked"
|
|
@fav="favClick"
|
|
></GroupOrderComponent>
|
|
</scroll-view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
title: '分类首页',
|
|
selectId:0,
|
|
categoryList:[
|
|
{
|
|
id:1,
|
|
name:"全部"
|
|
},
|
|
{
|
|
id:2,
|
|
name:"生鲜"
|
|
},
|
|
{
|
|
id:3,
|
|
name:"食品"
|
|
},
|
|
{
|
|
id:4,
|
|
name:"日用"
|
|
},
|
|
{
|
|
id:5,
|
|
name:"日期"
|
|
},
|
|
{
|
|
id:6,
|
|
name:"服装"
|
|
},
|
|
{
|
|
id:7,
|
|
name:"美妆"
|
|
},
|
|
{
|
|
id:8,
|
|
name:"文办"
|
|
}
|
|
],
|
|
orderList: [
|
|
{
|
|
id:"1",
|
|
type:"express",
|
|
desc:"测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述",
|
|
status:"start",
|
|
pickup_addr:"自提点地址",
|
|
item_list:[
|
|
{
|
|
id:1,
|
|
image_url:"/static/logo.png",
|
|
price:"20"
|
|
},
|
|
{
|
|
id:2,
|
|
image_url:"/static/logo.png",
|
|
price:"30"
|
|
},
|
|
{
|
|
id:3,
|
|
image_url:"/static/logo.png",
|
|
price:"40"
|
|
},
|
|
{
|
|
id:4,
|
|
image_url:"/static/logo.png",
|
|
price:"60"
|
|
}
|
|
],
|
|
group_leader:{
|
|
id:1,
|
|
fav:true,
|
|
avatar:"adsfadfa",
|
|
nickname:"测试团长1"
|
|
},
|
|
statistic_desc:"20000人参团"
|
|
},
|
|
{
|
|
id:"2",
|
|
type:"express",
|
|
desc:"测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述",
|
|
status:"start",
|
|
pickup_addr:"自提点地址",
|
|
item_list:[
|
|
{
|
|
id:1,
|
|
image_url:"/static/logo.png",
|
|
price:"20"
|
|
},
|
|
{
|
|
id:2,
|
|
image_url:"/static/logo.png",
|
|
price:"30"
|
|
},
|
|
{
|
|
id:3,
|
|
image_url:"/static/logo.png",
|
|
price:"40"
|
|
},
|
|
{
|
|
id:4,
|
|
image_url:"/static/logo.png",
|
|
price:"60"
|
|
}
|
|
],
|
|
group_leader:{
|
|
id:1,
|
|
fav:true,
|
|
avatar:"adsfadfa",
|
|
nickname:"测试团长1"
|
|
},
|
|
statistic_desc:"20000人参团"
|
|
},
|
|
{
|
|
id:"3",
|
|
type:"pickup",
|
|
desc:"测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述",
|
|
status:"start",
|
|
pickup_addr:"自提点地址自提点地址自提点地址自提点地址自提点地址自提点地址自提点地址自提点地址",
|
|
item_list:[
|
|
{
|
|
id:1,
|
|
image_url:"/static/logo.png",
|
|
price:"20"
|
|
},
|
|
{
|
|
id:2,
|
|
image_url:"/static/logo.png",
|
|
price:"30"
|
|
},
|
|
{
|
|
id:3,
|
|
image_url:"/static/logo.png",
|
|
price:"40"
|
|
},
|
|
{
|
|
id:4,
|
|
image_url:"/static/logo.png",
|
|
price:"60"
|
|
}
|
|
],
|
|
group_leader:{
|
|
id:2,
|
|
fav:false,
|
|
avatar:"adsfadfa",
|
|
nickname:"测试团长2"
|
|
},
|
|
statistic_desc:"20000人参团"
|
|
},
|
|
{
|
|
id:"4",
|
|
type:"express",
|
|
desc:"测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述测试描述",
|
|
status:"start",
|
|
pickupAddr:"自提点地址",
|
|
item_list:[
|
|
{
|
|
id:1,
|
|
image_url:"/static/logo.png",
|
|
price:"20"
|
|
},
|
|
{
|
|
id:2,
|
|
image_url:"/static/logo.png",
|
|
price:"30"
|
|
},
|
|
{
|
|
id:3,
|
|
image_url:"/static/logo.png",
|
|
price:"40"
|
|
},
|
|
{
|
|
id:4,
|
|
image_url:"/static/logo.png",
|
|
price:"60"
|
|
}
|
|
],
|
|
group_leader:{
|
|
id:3,
|
|
fav:false,
|
|
avatar:"adsfadfa",
|
|
nickname:"测试团长3"
|
|
},
|
|
statistic_desc:"20000人参团"
|
|
},
|
|
]
|
|
}
|
|
},
|
|
onLoad() {
|
|
// 处理分类选中
|
|
console.log("aa:",this.categoryList.length)
|
|
if (this.categoryList.length > 0) {
|
|
this.selectId = this.categoryList[0].id
|
|
}
|
|
},
|
|
methods: {
|
|
categoryFilter(categoryID) {
|
|
this.selectId = categoryID
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.top-fixed {
|
|
background: #f0f0f0;
|
|
position: fixed;
|
|
z-index: 999; /* 确保悬浮层级最高 */
|
|
width: 100%;
|
|
height: 240rpx;
|
|
top: 60rpx;
|
|
}
|
|
.top {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 20rpx;
|
|
}
|
|
|
|
.search-w-50 {
|
|
width: 70%;
|
|
}
|
|
|
|
.scroll-H {
|
|
white-space: nowrap;
|
|
height:100rpx;
|
|
}
|
|
|
|
.scroll-V {
|
|
position: fixed;
|
|
top:300rpx;
|
|
height:68vh;
|
|
}
|
|
|
|
.category-btn {
|
|
display: inline-block;
|
|
margin-left: 20rpx;
|
|
margin-right: 20rpx;
|
|
width: 100rpx;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
</style> |