72 lines
2.6 KiB
Plaintext
72 lines
2.6 KiB
Plaintext
<!-- 机构端 - 搜索页面 -->
|
||
<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: #09C39D; 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>
|