底部气泡提交

src/components/footer-bar-btn.vue

@@ -1,39 +1,37 @@
 <template>
-  <div v-if="keyWordshow && manualService == '1'" class="qipaomain">
+  <div class="qipaomain">
     <div v-for="(item, index) in keywordslist" :key="index">
-      <div class="footer-bar-btn an-move-left" :class="elder ? 'elder-wrapper' : ''">
-        <a href="javascript:;" class="footer-items-list _line-fine-btn" v-for="(item1, index1) in item" :key="index1"
-          v-show="item1.name" @click="keywordsClick(item1)">{{ longToShort(item1.name) }}</a>
+      <div class="footer-bar-btn an-move-left">
+        <a href="javascript:;" class="footer-items-list _line-fine-btn" v-show="item.name"
+          @click="keywordsClick(item)">{{ longToShort(item.name) }}</a>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, inject, onMounted } from 'vue'
+import { ref, computed, onMounted } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useAppStore } from '@/store/app.js'
 import { Post } from '@/utils/https'
 
-const emit = defineEmits(['onFooterBtnChoose'])
+defineEmits(['onFooterBtnChoose'])
 
-const store = inject('appStore', null)
-const userId = inject('userId', ref(''))
-const source = inject('source', ref(''))
-const mescrollContent = inject('mescrollContent', null)
-const manualService = inject('manualService', ref('1'))
-const userInfo = inject('userInfo', ref({}))
-const planCode = inject('planCode', ref(''))
-const elder = inject('elder', false)
+const store = useAppStore()
+const { source, planCode, userInfo, manualService, mescrollContent, elder } = storeToRefs(store)
 
 const keywordslist = ref([])
-const issubmit = ref(true)
-const keyWordshow = ref(false)
+const issubmit = ref(true) // 防止重复发送
+
+const keyWordshow = computed(() => keywordslist.value.length > 0)
+const isRobotService = computed(() => String(manualService.value) === '1')
 
 function scrollTopBody() {
   setTimeout(() => {
+    // 滚动到底部
     try {
-      if (mescrollContent?.value) {
-        mescrollContent.value.scrollTop = mescrollContent.value.scrollHeight || 0
-      }
+      const el = mescrollContent.value
+      if (el) el.scrollTop = el.scrollHeight || 0
     } catch (error) {
       console.log(error.message)
     }
@@ -41,60 +39,56 @@ function scrollTopBody() {
 }
 
 function keywordsClick(item) {
-  const sendParams = {
-    reqAndResType: '1',
+  const sendParmas = {
+    reqAndResType: '1', // 1文本 2图片 3问题评价
     msgText: item.name,
-    msgSource: manualService.value || manualService,
+    msgSource: manualService.value, // 1机器人 2人工
     questionType: 1,
   }
 
-  if (issubmit.value) {
+  if (!issubmit.value) return
   issubmit.value = false
   scrollTopBody()
 
-    if (store?.dispatch) {
   store
-        .dispatch('sendingRobot', sendParams)
-        .then(() => {
-          issubmit.value = true
-        })
+    .sendingRobot(sendParmas)
     .catch((err) => {
-          issubmit.value = true
       console.log(err)
     })
-    }
-  }
+    .finally(() => {
+      issubmit.value = true
+    })
 }
 
 async function initFooterBtn() {
-
   const param = {
     category: 4,
-    source: source.value || source,
-    planCode: planCode.value || planCode,
+    source: source.value,
+    planCode: planCode.value,
     keyWord: '',
-    sceneId: (userInfo.value || userInfo)?.sceneId || '',
+    sceneId: userInfo.value?.sceneId || '',
   }
 
-  Post('config/activity', param)
-    .then((res) => {
-      console.log('config/activity 响应:', res)
-      if (res.code && res.code !== 0) return
-      for (let i = 0; i < 3; i++) {
-        const list = []
-        for (let j = 0; j < 3; j++) {
-          if (res.data[i * 3 + j]) list[j] = res.data[i * 3 + j]
-        }
-        if (list.length > 0) keywordslist.value.unshift(list)
+  try {
+    const res = await Post('config/activity', param)
+    if (res.code && res.code != 0) return
+    keywordslist.value = res.data
+    // for (let i = 0; i < 3; i++) {
+    //   const list = []
+    //   for (let j = 0; j < 3; j++) {
+    //     if (res.data[i * 3 + j]) list[j] = res.data[i * 3 + j]
+    //   }
+    //   // 将list添加到keywordslist的首位
+    //   if (list.length > 0) keywordslist.value.unshift(list)
+    // }
+  } catch (error) {
+    console.log(error)
   }
-      if (keywordslist.value.length > 0) keyWordshow.value = true
-    })
-    .catch((err) => {
-      console.log('config/activity 失败:', err)
-    })
 }
 
 function longToShort(name) {
+  // return 111
+  // console.log(name, 1111)
   return name.length > 6 ? name.slice(0, 5) + '...' : name
 }
 
@@ -104,5 +98,115 @@ onMounted(() => {
 </script>
 
 <style scoped>
-/* ... 样式保持不变 ... */
+.qipaomain {
+  background-color: #ebf1ff;
+  overflow-x: auto;
+  display: flex;
+  padding: 0 9.5px;
+}
+
+.footer-bar-btn {
+  height: auto;
+  min-height: 33px;
+  line-height: 3px;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  /* padding: 0 9.5px; */
+  white-space: nowrap;
+  text-align: left;
+  -webkit-overflow-scrolling: touch;
+}
+
+.footer-bar-btn::-webkit-scrollbar {
+  display: none;
+}
+
+.footer-items-list {
+  display: inline-block;
+  font-family: 'SourceHanSansCN-Normal';
+  font-size: 13px;
+  line-height: 13px;
+  color: #848a96;
+  letter-spacing: 0;
+  text-align: justify;
+  padding: 7px 16px 6px 16px;
+  margin: 0 5.5px;
+  background-color: #fff;
+  position: relative;
+  border-radius: 82px;
+  -webkit-animation: slideInRight 0.5s ease-in-out both;
+  animation: slideInRight 0.5s ease-in-out both;
+}
+
+.footerBtn .footer-items-list:active {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  color: #fff !important;
+  background-color: #8ec2ff !important;
+}
+
+.footer-items-list:nth-child(2) {
+  -webkit-animation-delay: 0.2s;
+  animation-delay: 0.2s;
+}
+
+.footer-items-list:nth-child(3) {
+  -webkit-animation-delay: 0.4s;
+  animation-delay: 0.4s;
+}
+
+.footer-items-list:nth-child(4) {
+  -webkit-animation-delay: 0.6s;
+  animation-delay: 0.6s;
+}
+
+.footer-items-list:nth-child(5) {
+  -webkit-animation-delay: 0.8s;
+  animation-delay: 0.8s;
+}
+
+.footer-items-list:nth-child(6) {
+  -webkit-animation-delay: 1s;
+  animation-delay: 1s;
+}
+
+.footer-items-list:nth-child(7) {
+  -webkit-animation-delay: 1.2s;
+  animation-delay: 1.2s;
+}
+
+.footer-items-list:nth-child(8) {
+  -webkit-animation-delay: 1.4s;
+  animation-delay: 1.4s;
+}
+
+.footer-items-list:nth-child(9) {
+  -webkit-animation-delay: 1.6s;
+  animation-delay: 1.6s;
+}
+
+.footer-items-list:nth-child(10) {
+  -webkit-animation-delay: 1.8s;
+  animation-delay: 1.8s;
+}
+
+.footer-items-list:nth-child(11) {
+  -webkit-animation-delay: 2s;
+  animation-delay: 2s;
+}
+
+.elder-wrapper {
+  padding: 0 16px;
+}
+
+.elder-wrapper .footer-items-list {
+  font-family: PingFangSC-Medium;
+  font-size: 18px;
+  line-height: 18px;
+  color: #025cea;
+  margin: 0 8px 6px 0;
+}
+
+.elder-wrapper ._line-fine-btn::before {
+  border: 0.5px solid #dddddd;
+}
 </style>