完善医疗项目页面

pages/mall/merchant/search.uvue

@@ -0,0 +1,71 @@
+<!-- 机构端 - 搜索页面 -->
+<template>
+	<view class="page">
+		<!-- #ifdef MP-WEIXIN -->
+		<view class="detail-navbar">
+			<view class="detail-navbar-back" @click="uni.navigateBack()">
+				<text class="back-arrow">‹</text>
+				<text class="back-text">返回</text>
+			</view>
+			<text class="detail-navbar-title">搜索</text>
+			<view style="width: 120rpx;"></view>
+		</view>
+		<!-- #endif -->
+
+		<view class="search-bar-row">
+			<input
+				class="search-input"
+				type="text"
+				placeholder="搜索商品、订单、用户…"
+				:value="keyword"
+				@input="onInput"
+				@confirm="doSearch"
+			/>
+			<view class="search-btn" @click="doSearch">
+				<text class="search-btn-text">搜索</text>
+			</view>
+		</view>
+
+		<view class="content" v-if="!searched">
+			<text class="tip">输入关键字开始搜索</text>
+		</view>
+		<view class="content" v-else>
+			<text class="tip">暂无搜索结果</text>
+		</view>
+	</view>
+</template>
+
+<script lang="uts">
+	export default {
+		data() {
+			return {
+				keyword: '' as string,
+				searched: false as boolean
+			}
+		},
+		methods: {
+			onInput(e : InputEvent) {
+				this.keyword = e.detail.value
+			},
+			doSearch() {
+				if (!this.keyword.trim()) return
+				this.searched = true
+			}
+		}
+	}
+</script>
+
+<style>
+	.page { background-color: #f5f5f5; min-height: 100vh; }
+	.detail-navbar { display: flex; flex-direction: row; align-items: flex-end; background-color: #ffffff; border-bottom-width: 1rpx; border-bottom-style: solid; border-bottom-color: #eeeeee; box-sizing: border-box; padding-top: var(--status-bar-height); height: calc(88rpx + var(--status-bar-height)); }
+	.detail-navbar-back { display: flex; flex-direction: row; align-items: center; padding: 0 30rpx; height: 88rpx; width: 120rpx; }
+	.back-arrow { font-size: 44rpx; color: #333333; line-height: 1; margin-right: 4rpx; }
+	.back-text { font-size: 28rpx; color: #333333; }
+	.detail-navbar-title { flex: 1; text-align: center; font-size: 32rpx; font-weight: 600; color: #1a1a1a; height: 88rpx; line-height: 88rpx; }
+	.search-bar-row { display: flex; flex-direction: row; align-items: center; background-color: #ffffff; padding: 20rpx 30rpx; margin-bottom: 20rpx; }
+	.search-input { flex: 1; height: 72rpx; background-color: #f5f5f5; border-radius: 36rpx; padding: 0 30rpx; font-size: 28rpx; }
+	.search-btn { margin-left: 20rpx; padding: 0 30rpx; height: 72rpx; line-height: 72rpx; background-color: rgb(66, 121, 240); border-radius: 36rpx; }
+	.search-btn-text { font-size: 28rpx; color: #ffffff; }
+	.content { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 120rpx 40rpx; }
+	.tip { font-size: 28rpx; color: #999; }
+</style>