modify
This commit is contained in:
chenweiqiang
parent
5bb749fd14
commit
03d981283e
|
|
@ -23,6 +23,7 @@ export default {
|
|||
@import "@/static/iconfont/iconfont.css";
|
||||
page {
|
||||
background-color: #f0f0f0;
|
||||
min-height: 100vh;
|
||||
min-height: 100vh; /* 固定高度为视口高度 */
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,9 @@
|
|||
"pages": [
|
||||
{
|
||||
"path": "pages/home/home",
|
||||
"style": {}
|
||||
"style": {
|
||||
"navigationBarTitleText": "uni-app"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/category/index",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,36 @@
|
|||
<template>
|
||||
<view>{{title}}</view>
|
||||
<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>
|
||||
|
|
@ -7,37 +38,241 @@ 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
|
||||
}
|
||||
},
|
||||
onLoad() {},
|
||||
methods: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
<style scoped>
|
||||
.top-fixed {
|
||||
background: #f0f0f0;
|
||||
position: fixed;
|
||||
z-index: 999; /* 确保悬浮层级最高 */
|
||||
width: 100%;
|
||||
height: 240rpx;
|
||||
top: 60rpx;
|
||||
}
|
||||
.top {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 20rpx;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 200rpx;
|
||||
width: 200rpx;
|
||||
margin-top: 200rpx;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 50rpx;
|
||||
.search-w-50 {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.text-area {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.scroll-H {
|
||||
white-space: nowrap;
|
||||
height:100rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
color: #8f8f94;
|
||||
.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>
|
||||
|
|
@ -1,12 +1,15 @@
|
|||
<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>
|
||||
<view class="content">
|
||||
<view class="tip">
|
||||
<text >火热开团中</text>
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view scroll-y class="content">
|
||||
<GroupOrderComponent v-for="item in data" :key="item.id"
|
||||
:id="item.id"
|
||||
:type="item.type"
|
||||
|
|
@ -20,6 +23,7 @@
|
|||
@join="joinClicked"
|
||||
@fav="favClick"
|
||||
></GroupOrderComponent>
|
||||
</scroll-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -195,6 +199,14 @@ export default {
|
|||
</script>
|
||||
|
||||
<style>
|
||||
.top-fixed {
|
||||
background: #f0f0f0;
|
||||
position: fixed;
|
||||
z-index: 999; /* 确保悬浮层级最高 */
|
||||
width: 100%;
|
||||
height: 240rpx;
|
||||
top: 60rpx;
|
||||
}
|
||||
.top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -205,7 +217,7 @@ export default {
|
|||
width: 70%;
|
||||
}
|
||||
|
||||
.content {
|
||||
.tip {
|
||||
display: flex;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
|
@ -228,4 +240,10 @@ export default {
|
|||
font-size: 36rpx;
|
||||
color: #8f8f94;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: fixed;
|
||||
top:300rpx;
|
||||
height:68vh;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue