fix: 赠送列表页面样式调整、赠送时长小于两位数

Signed-off-by: tangshizhe <48740614+tangshizhe@users.noreply.github.com>

apps/bigmember_pc/src/views/gift-record/index.vue

@@ -3,11 +3,11 @@
     <div class="gift-record-index__header">
       <span>超级订阅赠送好友记录</span>
     </div>
-    <div class="gift-record-index__content">
+    <div ref="giftMainContainer" class="gift-record-index__content">
       <el-tabs v-model="activeName" @tab-click="handleClick">
         <el-tab-pane label="我赠送的" name="gift">
           <div v-if="giftList.length" class="gift-record-container gift-main">
-            <vueWaterfallEasy ref="waterfall" class="gift-water-fall" :gap="20" :img-width="359" :imgs-arr="giftList" @scrollReachBottom="stopSrcollRequest" @click="clickFn">
+            <vueWaterfallEasy ref="waterfall" :max-cols="maxCols" class="gift-water-fall" :img-width="359" :imgs-arr="giftList" @scrollReachBottom="stopSrcollRequest" @click="clickFn">
               <template slot-scope="props">
                 <!-- {{ props }} -->
                 <MyGiftRecord
@@ -45,7 +45,7 @@
 </template>
 
 <script setup>
-import { computed, getCurrentInstance, onMounted, reactive, ref } from 'vue'
+import { computed, getCurrentInstance, nextTick, onMounted, reactive, ref } from 'vue'
 import vueWaterfallEasy from 'vue-waterfall-easy'
 import MyGiftRecord from './components/MyGiftRecord.vue'
 import MyReceiveRecord from './components/MyReceiveRecord.vue'
@@ -65,6 +65,7 @@ const showNotifyFriendsDialog = ref(false)
 const giftList = ref([])
 const receiveList = ref([])
 const tellInfo = ref({})
+const maxCols = ref(3) // 初始化 maxCols 为 3
 
 const computedGiftEmptyInfo = computed(() => {
   let endTime = ''
@@ -217,6 +218,19 @@ onMounted(() => {
   getRecordList('1')
   getRecordList('2')
   getSuperSubscriptionTime()
+
+  const resizeObserver = new ResizeObserver((entries) => {
+    for (const entry of entries) {
+      // 计算 maxCols 的值
+      maxCols.value = Math.floor(entry.contentRect.width / 379)
+    }
+  })
+
+  // 监听 gift-record-container gift-main 的宽度变化
+  const giftMainContainer = proxy.$refs.giftMainContainer
+  if (giftMainContainer) {
+    resizeObserver.observe(giftMainContainer)
+  }
 })
 </script>
 
@@ -244,8 +258,10 @@ onMounted(() => {
               margin-left: 0!important;
             }
             .img-box {
-              padding: 20px 0 0 22px !important;
+              padding: 20px 0 0 0 !important;
               .img-inner-box {
+                display: flex;
+                justify-content: flex-end;
                 box-shadow: none;
                 border-radius: 0;
               }
@@ -290,7 +306,7 @@ onMounted(() => {
             padding: 0px 10px 20px;
           }
           #pane-receive {
-            padding: 20px 32px;
+            padding: 20px 12px 20px 32px;
           }
         }
       }

plugins/gift-friends/src/components/GiftSubmitDialog.vue

@@ -151,6 +151,9 @@ export default {
       else if (!/^[1-9]\d*$/.test(value)) {
         callback(new Error('请输入整数'))
       }
+      else if (!/^[1-9]\d?$/.test(value)) {
+        callback(new Error('赠予时长应小于两位数'))
+      }
       else {
         callback()
       }