发送按钮样式优化和代码联调

src/components/footer-bar-btn.vue

@@ -1,230 +1,230 @@
-<template>
+<template>
-  <div class="qipaomain">
+  <div class="qipaomain">
-    <div v-for="(item, index) in keywordslist" :key="index">
+    <div v-for="(item, index) in keywordslist" :key="index">
-      <div class="footer-bar-btn an-move-left">
+      <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)">
+        <a href="javascript:;" class="footer-items-list _line-fine-btn" v-show="item.name" @click="keywordsClick(item)">
-          <img class="footer-items-img" :src="item.icon" alt="">{{ longToShort(item.name) }}</a>
+          <img class="footer-items-img" :src="item.icon" alt="">{{ longToShort(item.name) }}</a>
-      </div>
+      </div>
-    </div>
+    </div>
-  </div>
+  </div>
-</template>
+</template>
-
+
-<script setup>
+<script setup>
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted } from 'vue'
-import { storeToRefs } from 'pinia'
+import { storeToRefs } from 'pinia'
-import { useAppStore } from '@/store/app.js'
+import { useAppStore } from '@/store/app.js'
-import { Post } from '@/utils/https'
+import { Post } from '@/utils/https'
-import { jumpOpenWeb } from '@/utils'
+import { jumpOpenWeb } from '@/utils'
-import footerBarBtnIcon from '@/assets/images/footer-bar-btn-icon.png'
+import footerBarBtnIcon from '@/assets/images/footer-bar-btn-icon.png'
-import footerBarBtnIcon2 from '@/assets/images/footer-bar-btn-icon2.png'
+import footerBarBtnIcon2 from '@/assets/images/footer-bar-btn-icon2.png'
-import footerBarBtnIcon3 from '@/assets/images/footer-bar-btn-icon3.png'
+import footerBarBtnIcon3 from '@/assets/images/footer-bar-btn-icon3.png'
-import footerBarBtnIcon4 from '@/assets/images/footer-bar-btn-icon4.png'
+import footerBarBtnIcon4 from '@/assets/images/footer-bar-btn-icon4.png'
-
+
-defineEmits(['onFooterBtnChoose'])
+defineEmits(['onFooterBtnChoose'])
-
+
-const store = useAppStore()
+const store = useAppStore()
-const { source, planCode, userInfo, manualService, mescrollContent, elder, isChatLoading } =
+const { source, planCode, userInfo, manualService, mescrollContent, elder, isChatLoading } =
-  storeToRefs(store)
+  storeToRefs(store)
-
+
-const keywordslist = ref([
+const keywordslist = ref([
-  { name: "查保单", icon: footerBarBtnIcon, URL: "https://yzsslfw.cpiccdn.com/accept_pad/index.html#/phone/base/wxxcxHomeSearch?source=wxxcx&bqtype=search&ticket=%s" },
+  { name: "查保单", icon: footerBarBtnIcon, URL: "https://yzsslfw.cpiccdn.com/accept_pad/index.html#/phone/base/wxxcxHomeSearch?source=wxxcx&bqtype=search&ticket=%s" },
-  { name: "查收益", icon: footerBarBtnIcon2, URL: "https://yzsslfw.cpiccdn.com/accept_pad/index.html#/phone/base/wxxcxHomeSearch?source=wxxcx&bqtype=search&ticket=%s" },
+  { name: "查收益", icon: footerBarBtnIcon2, URL: "https://yzsslfw.cpiccdn.com/accept_pad/index.html#/phone/base/wxxcxHomeSearch?source=wxxcx&bqtype=search&ticket=%s" },
-  { name: "贷还款", icon: footerBarBtnIcon3, URL: "https://yzsslfw.cpiccdn.com/accept_pad/index.html#/phone/infoChange/eye?source=wxxcx&bqtype=search&ticket=%s" },
+  { name: "贷还款", icon: footerBarBtnIcon3, URL: "https://yzsslfw.cpiccdn.com/accept_pad/index.html#/phone/infoChange/eye?source=wxxcx&bqtype=search&ticket=%s" },
-  { name: "续期交费", icon: footerBarBtnIcon4, URL: "/packageAgent/pages/renewalPayment/renewalPayment?source_channel=GDFW&ticket=%s" },
+  { name: "续期交费", icon: footerBarBtnIcon4, URL: "/packageAgent/pages/renewalPayment/renewalPayment?source_channel=GDFW&ticket=%s" },
-])
+])
-
+
-const keyWordshow = computed(() => keywordslist.value.length > 0)
+const keyWordshow = computed(() => keywordslist.value.length > 0)
-const isRobotService = computed(() => String(manualService.value) === '1')
+const isRobotService = computed(() => String(manualService.value) === '1')
-
+
-function scrollTopBody() {
+function scrollTopBody() {
-  setTimeout(() => {
+  setTimeout(() => {
-    // 滚动到底部
+    // 滚动到底部
-    try {
+    try {
-      const el = mescrollContent.value
+      const el = mescrollContent.value
-      if (el) el.scrollTop = el.scrollHeight || 0
+      if (el) el.scrollTop = el.scrollHeight || 0
-    } catch (error) {
+    } catch (error) {
-      console.log(error.message)
+      console.log(error.message)
-    }
+    }
-  }, 300)
+  }, 300)
-}
+}
-
+
-function keywordsClick(item) {
+function keywordsClick(item) {
-  // 只把问题写入对话气泡，不走对话接口
+  // 只把问题写入对话气泡，不走对话接口
-  store.addSendMessageList({ msgText: item.name, reqAndResType: '1' })
+  store.addSendMessageList({ msgText: item.name, reqAndResType: '1', sendLoading: false })
-  // 没有机器人回复来复位打字动画，这里手动复位，避免"正在输入"一直转
+  // 没有机器人回复来复位打字动画，这里手动复位，避免"正在输入"一直转
-  isChatLoading.value = false
+  isChatLoading.value = false
-  scrollTopBody()
+  scrollTopBody()
-
+
-  jumpOpenWeb('YY_GWXCX', item.URL)
+  jumpOpenWeb('YY_GWXCX', item.URL)
-}
+}
-
+
-async function initFooterBtn() {
+async function initFooterBtn() {
-  const param = {
+  const param = {
-    category: 4,
+    category: 4,
-    source: source.value,
+    source: source.value,
-    planCode: planCode.value,
+    planCode: planCode.value,
-    keyWord: '',
+    keyWord: '',
-    sceneId: userInfo.value?.sceneId || '',
+    sceneId: userInfo.value?.sceneId || '',
-  }
+  }
-
+
-  try {
+  try {
-    const res = await Post('config/activity', param)
+    const res = await Post('config/activity', param)
-    if (res.code && res.code != 0) return
+    if (res.code && res.code != 0) return
-    keywordslist.value = res.data
+    keywordslist.value = res.data
-    // for (let i = 0; i < 3; i++) {
+    // for (let i = 0; i < 3; i++) {
-    //   const list = []
+    //   const list = []
-    //   for (let j = 0; j < 3; j++) {
+    //   for (let j = 0; j < 3; j++) {
-    //     if (res.data[i * 3 + j]) list[j] = res.data[i * 3 + j]
+    //     if (res.data[i * 3 + j]) list[j] = res.data[i * 3 + j]
-    //   }
+    //   }
-    //   // 将list添加到keywordslist的首位
+    //   // 将list添加到keywordslist的首位
-    //   if (list.length > 0) keywordslist.value.unshift(list)
+    //   if (list.length > 0) keywordslist.value.unshift(list)
-    // }
+    // }
-  } catch (error) {
+  } catch (error) {
-    console.log(error)
+    console.log(error)
-  }
+  }
-}
+}
-
+
-function longToShort(name) {
+function longToShort(name) {
-  // return 111
+  // return 111
-  // console.log(name, 1111)
+  // console.log(name, 1111)
-  return name.length > 6 ? name.slice(0, 5) + '...' : name
+  return name.length > 6 ? name.slice(0, 5) + '...' : name
-}
+}
-
+
-onMounted(() => {
+onMounted(() => {
-  // initFooterBtn()
+  // initFooterBtn()
-})
+})
-</script>
+</script>
-
+
-<style scoped>
+<style scoped>
-.qipaomain {
+.qipaomain {
-  background-color: #ebf1ff;
+  background-color: #ebf1ff;
-  overflow-x: auto;
+  overflow-x: auto;
-  display: flex;
+  display: flex;
-  padding: 0 16rem;
+  padding: 0 16rem;
-  gap: 8rem;
+  gap: 8rem;
-  scrollbar-width: none;
+  scrollbar-width: none;
-  -ms-overflow-style: none;
+  -ms-overflow-style: none;
-  -webkit-overflow-scrolling: touch;
+  -webkit-overflow-scrolling: touch;
-}
+}
-
+
-.qipaomain::-webkit-scrollbar {
+.qipaomain::-webkit-scrollbar {
-  display: none;
+  display: none;
-}
+}
-
+
-.footer-bar-btn {
+.footer-bar-btn {
-  height: auto;
+  height: auto;
-  line-height: 3rem;
+  line-height: 3rem;
-  overflow-x: scroll;
+  overflow-x: scroll;
-  overflow-y: hidden;
+  overflow-y: hidden;
-  /* padding: 0 9.5rem; */
+  /* padding: 0 9.5rem; */
-  white-space: nowrap;
+  white-space: nowrap;
-  text-align: left;
+  text-align: left;
-  -webkit-overflow-scrolling: touch;
+  -webkit-overflow-scrolling: touch;
-}
+}
-
+
-.footer-bar-btn::-webkit-scrollbar {
+.footer-bar-btn::-webkit-scrollbar {
-  display: none;
+  display: none;
-}
+}
-
+
-.footer-items-list {
+.footer-items-list {
-  display: inline-block;
+  display: inline-block;
-  font-family: 'SourceHanSansCN-Normal';
+  font-family: 'SourceHanSansCN-Normal';
-  font-size: 13rem;
+  font-size: 13rem;
-  line-height: 13rem;
+  line-height: 13rem;
-  color: #17204D;
+  color: #17204D;
-  letter-spacing: 0;
+  letter-spacing: 0;
-  text-align: justify;
+  text-align: justify;
-  padding: 6.5rem 10rem;
+  padding: 6.5rem 10rem;
-  position: relative;
+  position: relative;
-  /* border-radius: 82rem; */
+  /* border-radius: 82rem; */
-  -webkit-animation: slideInRight 0.5s ease-in-out both;
+  -webkit-animation: slideInRight 0.5s ease-in-out both;
-  animation: slideInRight 0.5s ease-in-out both;
+  animation: slideInRight 0.5s ease-in-out both;
-  display: flex;
+  display: flex;
-  background: linear-gradient(140deg, #dcfcff 6%, #ffffffbf 18%, #ffffff 56%);
+  background: linear-gradient(140deg, #dcfcff 6%, #ffffffbf 18%, #ffffff 56%);
-  box-sizing: border-box;
+  box-sizing: border-box;
-  border-image: linear-gradient(115deg, #ffffff 4%, #ffffff 89%) 1.2;
+  border-image: linear-gradient(115deg, #ffffff 4%, #ffffff 89%) 1.2;
-  backdrop-filter: blur(14px);
+  backdrop-filter: blur(14px);
-  /* box-shadow: 0px 4px 10px 0px rgba(181, 189, 216, 0.3); */
+  /* box-shadow: 0px 4px 10px 0px rgba(181, 189, 216, 0.3); */
-  z-index: 3;
+  z-index: 3;
-  border-radius: 101rem;
+  border-radius: 101rem;
-}
+}
-
+
-.footerBtn .footer-items-list:active {
+.footerBtn .footer-items-list:active {
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  color: #fff !important;
+  color: #fff !important;
-  background-color: #8ec2ff !important;
+  background-color: #8ec2ff !important;
-}
+}
-
+
-.footer-items-list:nth-child(2) {
+.footer-items-list:nth-child(2) {
-  -webkit-animation-delay: 0.2s;
+  -webkit-animation-delay: 0.2s;
-  animation-delay: 0.2s;
+  animation-delay: 0.2s;
-}
+}
-
+
-.footer-items-list:nth-child(3) {
+.footer-items-list:nth-child(3) {
-  -webkit-animation-delay: 0.4s;
+  -webkit-animation-delay: 0.4s;
-  animation-delay: 0.4s;
+  animation-delay: 0.4s;
-}
+}
-
+
-.footer-items-list:nth-child(4) {
+.footer-items-list:nth-child(4) {
-  -webkit-animation-delay: 0.6s;
+  -webkit-animation-delay: 0.6s;
-  animation-delay: 0.6s;
+  animation-delay: 0.6s;
-}
+}
-
+
-.footer-items-list:nth-child(5) {
+.footer-items-list:nth-child(5) {
-  -webkit-animation-delay: 0.8s;
+  -webkit-animation-delay: 0.8s;
-  animation-delay: 0.8s;
+  animation-delay: 0.8s;
-}
+}
-
+
-.footer-items-list:nth-child(6) {
+.footer-items-list:nth-child(6) {
-  -webkit-animation-delay: 1s;
+  -webkit-animation-delay: 1s;
-  animation-delay: 1s;
+  animation-delay: 1s;
-}
+}
-
+
-.footer-items-list:nth-child(7) {
+.footer-items-list:nth-child(7) {
-  -webkit-animation-delay: 1.2s;
+  -webkit-animation-delay: 1.2s;
-  animation-delay: 1.2s;
+  animation-delay: 1.2s;
-}
+}
-
+
-.footer-items-list:nth-child(8) {
+.footer-items-list:nth-child(8) {
-  -webkit-animation-delay: 1.4s;
+  -webkit-animation-delay: 1.4s;
-  animation-delay: 1.4s;
+  animation-delay: 1.4s;
-}
+}
-
+
-.footer-items-list:nth-child(9) {
+.footer-items-list:nth-child(9) {
-  -webkit-animation-delay: 1.6s;
+  -webkit-animation-delay: 1.6s;
-  animation-delay: 1.6s;
+  animation-delay: 1.6s;
-}
+}
-
+
-.footer-items-list:nth-child(10) {
+.footer-items-list:nth-child(10) {
-  -webkit-animation-delay: 1.8s;
+  -webkit-animation-delay: 1.8s;
-  animation-delay: 1.8s;
+  animation-delay: 1.8s;
-}
+}
-
+
-.footer-items-list:nth-child(11) {
+.footer-items-list:nth-child(11) {
-  -webkit-animation-delay: 2s;
+  -webkit-animation-delay: 2s;
-  animation-delay: 2s;
+  animation-delay: 2s;
-}
+}
-
+
-.elder-wrapper {
+.elder-wrapper {
-  padding: 0 16rem;
+  padding: 0 16rem;
-}
+}
-
+
-.elder-wrapper .footer-items-list {
+.elder-wrapper .footer-items-list {
-  font-family: PingFangSC-Medium;
+  font-family: PingFangSC-Medium;
-  font-size: 18rem;
+  font-size: 18rem;
-  line-height: 18rem;
+  line-height: 18rem;
-  color: #025cea;
+  color: #025cea;
-  margin: 0 8rem 6rem 0;
+  margin: 0 8rem 6rem 0;
-}
+}
-
+
-.elder-wrapper ._line-fine-btn::before {
+.elder-wrapper ._line-fine-btn::before {
-  border: 0.5rem solid #dddddd;
+  border: 0.5rem solid #dddddd;
-}
+}
-
+
-.footer-items-img {
+.footer-items-img {
-  height: 14rem;
+  height: 14rem;
-  width: 14rem;
+  width: 14rem;
-  margin-right: 2rem;
+  margin-right: 2rem;
-}
+}
-</style>
+</style>

src/components/footer-bar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="footer-bar" style="max-width: 750rem">
+  <div class="footer-bar">
     <div class="footer-item footerBtn" v-show="footer_btn_type === 'footerBtn'">
       <footer-bar-btn @onFooterBtnChoose="handleFooterBtnChoose" v-if="tokenExist && showQiPao"></footer-bar-btn>
     </div>