duxingchen/track
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 移动端扫码页手动输入框增加一键清除×按钮

Browse Source
This commit is contained in:
duxingchen
2026-08-12 17:23:20 +08:00
parent eba0c3be98
commit d9c875924c
1 changed files with 10 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
track-uniapp/src/pages/scan/index.vue
View File

@ -11,8 +11,11 @@
<view class="manual-section"> <view class="manual-section">
<text class="section-label">或手动输入</text> <text class="section-label">或手动输入</text>
<view class="manual-input"> <view class="manual-input">
<view class="input-wrap">
<input v-model="serialNumber" class="input" type="text" maxlength="16" <input v-model="serialNumber" class="input" type="text" maxlength="16"
placeholder="输入16位身份证" @confirm="handleSearch" /> placeholder="输入16位身份证" @confirm="handleSearch" />
<text v-if="serialNumber" class="input-clear" @tap="serialNumber=''">✕</text>
</view>
<button class="search-btn" @tap="handleSearch" :disabled="loading"> <button class="search-btn" @tap="handleSearch" :disabled="loading">
{{ loading ? '查询中' : '查询' }} {{ loading ? '查询中' : '查询' }}
</button> </button>
@ -109,8 +112,11 @@ export default {
.manual-section { margin-top: 24px; } .manual-section { margin-top: 24px; }
.section-label { font-size: 12px; color: #9ca3af; margin-bottom: 8px; display: block; } .section-label { font-size: 12px; color: #9ca3af; margin-bottom: 8px; display: block; }
.manual-input { display: flex; gap: 8px; } .manual-input { display: flex; gap: 8px; }
.input { flex: 1; height: 48px; padding: 0 14px; border: 1px solid #e5e7eb; border-radius: 12px; .input-wrap { flex: 1; position: relative; }
font-size: 15px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.04); } .input { width: 100%; height: 48px; padding: 0 36px 0 14px; border: 1px solid #e5e7eb; border-radius: 12px;
font-size: 15px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.04); box-sizing: border-box; }
.input-clear { position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
font-size: 16px; color: #9ca3af; padding: 4px; z-index: 2; }
.search-btn { height: 48px; padding: 0 22px; background: #2563EB; color: #fff; border: none; .search-btn { height: 48px; padding: 0 22px; background: #2563EB; color: #fff; border: none;
border-radius: 12px; font-size: 15px; font-weight: 600; line-height: 48px; } border-radius: 12px; font-size: 15px; font-weight: 600; line-height: 48px; }
.search-btn[disabled] { opacity: 0.5; } .search-btn[disabled] { opacity: 0.5; }