生日看板搜索框优化

hdApp/src/admin/birthday/board.vue

@@ -6,6 +6,9 @@
         <view class="green-btn outline" @click="goGiftStats">赠礼统计</view>
         <view class="search-wrap">
           <input class="search-inp" v-model="searchText" placeholder="请输入搜索关键字" @confirm="reload" />
+          <view v-if="searchText" class="search-clear" @click.stop="clearSearch">
+            <text class="search-clear-icon">×</text>
+          </view>
         </view>
       </view>
       <view class="filter-row">
@@ -285,6 +288,11 @@ export default {
       this.loadCounts()
       this.resetList()
     },
+    clearSearch() {
+      if (!this.searchText) return
+      this.searchText = ''
+      this.reload()
+    },
     resetList() {
       this.list.page = 1
       this.list.data = []
@@ -369,7 +377,7 @@ export default {
     confirmCollect(index, list) {
       const item = list[index]
       if (!this.canCollect(item)) return
-      this.$util.confirmModal({ content: '是否更新为已领取？', okText: '确认', cancelText: '取消' }, () => {
+      this.$util.confirmModal({ content: '更新为已领取？', okText: '确认', cancelText: '取消' }, () => {
         this.collectGift(item)
       })
     },
@@ -457,13 +465,14 @@ export default {
   gap: 12upx;
 }
 .green-btn {
-  padding: 12upx 24upx;
+  padding: 12upx 22upx;
   background: linear-gradient(135deg, #19d471, #08b955);
   color: #fff;
   font-size: 26upx;
   border-radius: 8upx;
 }
 .green-btn.outline {
+  padding: 10upx 22upx;
   background: #fff;
   color: #08b955;
   border: 1upx solid #08b955;
@@ -471,14 +480,34 @@ export default {
 .search-wrap {
   flex: 1;
   min-width: 200upx;
+  position: relative;
 }
 .search-inp {
   height: 64upx;
   background: #f1f3f2;
   border-radius: 32upx;
-  padding: 0 24upx;
+  padding: 0 72upx 0 24upx;
   font-size: 26upx;
 }
+.search-clear {
+  position: absolute;
+  right: 18upx;
+  top: 50%;
+  width: 40upx;
+  height: 40upx;
+  margin-top: -20upx;
+  border-radius: 50%;
+  background: #c7c7c7;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.search-clear-icon {
+  line-height: 40upx;
+  font-size: 34upx;
+  color: #fff;
+  transform: translateY(-2upx);
+}
 .filter-row {
   display: flex;
   align-items: center;