demon.chen
/
app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

modify

This commit is contained in:
chenweiqiang 2025-05-11 10:47:52 +08:00
parent 5bb749fd14
commit 03d981283e
4 changed files with 299 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/App.vue
View File

@ -23,6 +23,7 @@ export default {
@import "@/static/iconfont/iconfont.css"; @import "@/static/iconfont/iconfont.css";
page { page {
background-color: #f0f0f0; background-color: #f0f0f0;
min-height: 100vh; min-height: 100vh; /* 固定高度为视口高度 */
} }
</style> </style>

4
src/pages.json
View File

@ -2,7 +2,9 @@
"pages": [ "pages": [
{ {
"path": "pages/home/home", "path": "pages/home/home",
"style": {} "style": {
"navigationBarTitleText": "uni-app"
}
}, },
{ {
"path": "pages/category/index", "path": "pages/category/index",

275
src/pages/category/index.vue
View File

@ -1,5 +1,36 @@
<template> <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> </template>
<script> <script>
@ -7,37 +38,241 @@ export default {
data() { data() {
return { return {
title: '分类首页', 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> </script>
<style> <style scoped>
.content { .top-fixed {
background: #f0f0f0;
position: fixed;
z-index: 999; /* 确保悬浮层级最高 */
width: 100%;
height: 240rpx;
top: 60rpx;
}
.top {
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: center; margin: 20rpx;
} }
.logo { .search-w-50 {
height: 200rpx; width: 70%;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
} }
.text-area { .scroll-H {
display: flex; white-space: nowrap;
justify-content: center; height:100rpx;
} }
.title { .scroll-V {
font-size: 36rpx; position: fixed;
color: #8f8f94; 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> </style>

22
src/pages/home/home.vue
View File

@ -1,12 +1,15 @@
<template> <template>
<view class="top-fixed">
<view class="top"> <view class="top">
<uni-icons type="location" size="30"></uni-icons> <uni-icons type="location" size="30"></uni-icons>
<text>上海</text> <text>上海</text>
<uni-search-bar class="search-w-50" v-model="searchContent" placeholder="请输入查询内容" clearButton="auto" cancelButton="none" @confirm="searchClick" /> <uni-search-bar class="search-w-50" v-model="searchContent" placeholder="请输入查询内容" clearButton="auto" cancelButton="none" @confirm="searchClick" />
</view> </view>
<view class="content"> <view class="tip">
<text >火热开团中</text> <text >火热开团中</text>
</view> </view>
</view>
<scroll-view scroll-y class="content">
<GroupOrderComponent v-for="item in data" :key="item.id" <GroupOrderComponent v-for="item in data" :key="item.id"
:id="item.id" :id="item.id"
:type="item.type" :type="item.type"
@ -20,6 +23,7 @@
@join="joinClicked" @join="joinClicked"
@fav="favClick" @fav="favClick"
></GroupOrderComponent> ></GroupOrderComponent>
</scroll-view>
</template> </template>
<script> <script>
@ -195,6 +199,14 @@ export default {
</script> </script>
<style> <style>
.top-fixed {
background: #f0f0f0;
position: fixed;
z-index: 999; /* 确保悬浮层级最高 */
width: 100%;
height: 240rpx;
top: 60rpx;
}
.top { .top {
display: flex; display: flex;
align-items: center; align-items: center;
@ -205,7 +217,7 @@ export default {
width: 70%; width: 70%;
} }
.content { .tip {
display: flex; display: flex;
margin-left: 20px; margin-left: 20px;
} }
@ -228,4 +240,10 @@ export default {
font-size: 36rpx; font-size: 36rpx;
color: #8f8f94; color: #8f8f94;
} }
.content {
position: fixed;
top:300rpx;
height:68vh;
}
</style> </style>