Browse Source

增加首页分包;增加搜索组件

htc 2 tuần trước cách đây
mục cha
commit
af16bf3c03
6 tập tin đã thay đổi với 118 bổ sung7 xóa
  1. 6 0
      App.vue
  2. 8 6
      components/CusHeader/index.vue
  3. 56 0
      components/CusSearch/index.vue
  4. 13 0
      pages.json
  5. 7 1
      pages/home.vue
  6. 28 0
      pagesHome/allActivity.vue

+ 6 - 0
App.vue

@@ -23,6 +23,12 @@
 		box-sizing: border-box;
 	}
 	
+	.common_page{
+		background: #F7F7F7;
+		padding: 0 24rpx 40rpx;
+		box-sizing: border-box;
+	}
+	
 	.top_bg_img{
 		width: 100%;
 		position: fixed;

+ 8 - 6
components/CusHeader/index.vue

@@ -1,9 +1,11 @@
-<template>
-	<u-navbar :title="title" :bgColor="bgColor" :titleStyle="titleStyle">
-		<view class="u-nav-slot" slot="left" style="display: flex;background-color: transparent;">
-			<u-icon v-if="showback" name="arrow-left" size="44" :color="leftIconColor" @tap="toBack(backUrl)"></u-icon>
-		</view>
-	</u-navbar>
+<template>
+	<up-navbar :title="title" :bgColor="bgColor" :titleStyle="titleStyle">
+	    <template #left>
+			<view class="u-nav-slot" slot="left" style="display: flex;background-color: transparent;">
+				<image v-if="showback" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/19/27b15a2d-2974-4f2e-a06e-8d13c0519113.png" style="width: 40rpx;height: 40rpx;" @tap="toBack(backUrl)"></image>
+			</view>
+		</template>
+	</up-navbar>
 </template>
 
 <script setup lang="ts">

+ 56 - 0
components/CusSearch/index.vue

@@ -0,0 +1,56 @@
+<template>
+	<view class="search adfac">
+		<image class="icon" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/19/d568b395-8490-4e44-af30-7fb5288b8bad.png"></image>
+		<div class="input">
+			<up-input :placeholder="placeholder" v-model="keyword" border="none" style="font-size: 26rpx;"></up-input>
+		</div>
+		<div class="btn" @tap="handleSearch">搜索</div>
+	</view>
+</template>
+
+<script setup name="CusSearch">
+	defineProps({
+		placeholder:{
+			typeof: String,
+			default: '查找公益活动'
+		}
+	})
+	
+	import { ref } from 'vue'
+	
+	const keyword = ref('')
+	const emits = defineEmits(['handleSearch'])
+	
+	const handleSearch = () => {
+		emits('handleSearch',keyword.value);
+	}
+</script>
+
+<style scoped lang="scss">
+	.search{
+		width: 100%;
+		background: #FFFFFF;
+		border-radius: 34rpx;
+		padding: 6rpx 6rpx 6rpx 26rpx;
+		box-sizing: border-box;
+		.icon{
+			width: 36rpx;
+			height: 36rpx;
+		}
+		.input{
+			flex: 1;
+			padding: 0 11rpx;
+			box-sizing: border-box;
+		}
+		.btn{
+			padding: 9rpx 27rpx;
+			background: #B7F358;
+			border-radius: 34rpx;
+			font-family: PingFangSC, PingFang SC;
+			font-weight: 400;
+			font-size: 26rpx;
+			color: #252525;
+			line-height: 37rpx;
+		}
+	}
+</style>

+ 13 - 0
pages.json

@@ -19,6 +19,19 @@
 			}
 		}
 	],
+	"subPackages": [
+		{
+			"root": "pagesHome",
+			"pages": [
+				{
+					"path": "allActivity",
+					"style": {
+						"navigationStyle": "custom"
+					}
+				}
+			]
+		}
+	],
 	"globalStyle": {
 		"navigationBarTitleText": "善行少年",
 		"navigationBarBackgroundColor": "#FFFFFF",

+ 7 - 1
pages/home.vue

@@ -27,7 +27,7 @@
 			</div>
 			<div class="c-box-title adfacjb">
 				<div class="c-box-title-left">公益活动</div>
-				<div class="c-box-title-right adfac">更多 <up-icon name="arrow-right" size="30rpx" style="margin-left: 10rpx;"></up-icon></div>
+				<div class="c-box-title-right adfac" @tap="toTurnPage('/pagesHome/allActivity',false)">更多 <up-icon name="arrow-right" size="30rpx" style="margin-left: 10rpx;"></up-icon></div>
 			</div>
 			<div class="c-box-type">
 				<scroll-view class="scroll-view_H" scroll-x="true" scroll-with-animation="true" :scroll-left="scrollLeft">
@@ -80,6 +80,12 @@
 			}
 		}
 	}
+	
+	const toTurnPage = (url,needLogin) => {
+		if(!needLogin){
+			uni.navigateTo({ url })
+		}
+	}
 </script>
 
 <style scoped lang="scss">

+ 28 - 0
pagesHome/allActivity.vue

@@ -0,0 +1,28 @@
+<template>
+	<view class="common_page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
+		<cus-header title="全部活动" bgColor="transparent"></cus-header>
+		<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/19/54b75bc8-d926-449b-95a5-1126f700b481.png" class="top_bg_img" mode="widthFix"></image>
+		<div class="top-search">
+			<cus-search @handleSearch="search"></cus-search>
+		</div>
+	</view>
+</template>
+
+<script setup name="">
+	import CusHeader from '@/components/CusHeader/index.vue'
+	import CusSearch from '@/components/CusSearch/index.vue'
+	import { ref } from 'vue'
+	
+	const search = (keyword) => {
+		console.log(keyword);
+	}
+</script>
+
+<style scoped lang="scss">
+	.common_page{
+		.top-search{
+			position: relative;
+			margin-top: 20rpx;
+		}
+	}
+</style>