feat: 语音搜索部分

src/components/Customer/Customer.vue

@@ -46,7 +46,7 @@ function close() {
     width: 600px;
     height: 400px;
     margin: 0 auto;
-    margin-top: 342px;
+    margin-top: 760px;
     background: #ffffff;
     box-shadow: 0px 40px 60px rgba(0, 0, 0, 0.08);
     border-radius: 12px;

src/components/QuestionClassify/QuestionClassify.vue

@@ -52,7 +52,7 @@ function closeQuestionClassify() {
   background: #ffffff;
   box-shadow: 0px 40px 60px rgba(0, 0, 0, 0.08);
   border-radius: 16px;
-  top: 60px;
+  top: 462px;
   left: 50%;
   margin-left: -427px;
   .title {

src/components/QuestionList/QuestionList.vue

@@ -108,7 +108,7 @@ function closeQuestionDetail() {
   background: #ffffff;
   box-shadow: 0px 40px 60px rgba(0, 0, 0, 0.08);
   border-radius: 16px;
-  top: 60px;
+  top: 462px;
   left: 50%;
   margin-left: -427px;
   .title {

src/components/Search/Search.vue

@@ -9,8 +9,8 @@
             <img @click="setVoice" src="../../assets/images/search/search-voice.png" class="voice-icon" alt="" />
           </div>
 
-          <div class="flex">
-            <div class="right-box" v-show="!showVoice">
+          <div class="flex" v-if="!showVoice">
+            <div class="right-box">
               <h1 class="title">快捷入口</h1>
               <h1 class="title-en">Quick entrance</h1>
               <div class="facility-list">
@@ -23,44 +23,32 @@
               <keyboardByWritten @del="del" @handle-word="handleLetter" v-else />
             </div>
           </div>
+        </div>
+        <div v-show="!keywords.length && !showVoice">
+          <h1 class="title">万象热搜</h1>
+          <h1 class="title-en">MIXC hot search</h1>
+          <ScrollView class="hot-scroll" :list="hotRecommend" scrollbar>
+            <div class="hot-box">
+              <div class="recommend-item" v-for="item of hotRecommend" :key="item.shopId" @click="handleShop(item)">{{ item.shopName }}</div>
+            </div>
+          </ScrollView>
+          <h1 class="title">常见问题</h1>
+          <h1 class="title-en">common problem</h1>
 
-          <!-- <div class="left-box" v-show="!keywords.length && !showVoice">
-            
- 
-           
+          <div class="question-box">
+            <QuestionList />
+            <div class="more-question" @click="showClassify = true">{{ $t('more') }}</div>
+            <Teleport to="body">
+              <Transition enter-active-class="animate__animated animate__fadeInDown" leave-active-class="animate__animated animate__fadeOutUp">
+                <QuestionClassify @close="showClassify = false" v-if="showClassify" />
+              </Transition>
+            </Teleport>
           </div>
-          <SearchResultList
-            @handle-shop="handleShop"
-            @handle-activity="handleActivity"
-            :list="searchShopListRef"
-            :config="config"
-            v-show="keywords.length && !showVoice"
-          /> -->
         </div>
-        <h1 class="title">万象热搜</h1>
-        <h1 class="title-en">MIXC hot search</h1>
-        <ScrollView class="hot-scroll" :list="hotRecommend" scrollbar>
-          <div class="hot-box">
-            <div class="recommend-item" v-for="item of hotRecommend" :key="item.shopId" @click="handleShop(item)">{{ item.shopName }}</div>
-          </div>
-        </ScrollView>
-        <h1 class="title">常见问题</h1>
-        <h1 class="title-en">common problem</h1>
 
-        <div class="question-box">
-          <QuestionList />
-          <div class="more-question" @click="showClassify = true">{{ $t('more') }}</div>
-          <Teleport to="body">
-            <Transition enter-active-class="animate__animated animate__fadeInDown" leave-active-class="animate__animated animate__fadeOutUp">
-              <QuestionClassify @close="showClassify = false" v-if="showClassify" />
-            </Transition>
-          </Teleport>
-        </div>
-        <!-- <div class="search-right">
-          
-          
-          <Voice @handle-question="showClassify = true" v-if="showVoice" />
-        </div> -->
+        <SearchResultList @handle-shop="handleShop" @handle-activity="handleActivity" :list="searchShopListRef" :config="config" v-if="keywords.length && !showVoice" />
+
+        <Voice @handle-question="showClassify = true" v-if="showVoice" />
       </div>
       <div class="search-btn" @click="close">
         <img src="../../assets/images/search/back.png" alt="" />
@@ -201,7 +189,7 @@ onBeforeUnmount(() => {
   .input {
     border: none;
     outline: none;
-    width: 255px;
+    width: 262px;
     height: 78px;
     background: transparent;
     font-weight: 700;

src/components/SearchResultItem/SearchResultItem.vue

@@ -41,7 +41,7 @@ function handleShop() {
   display: flex;
   align-items: center;
   padding: 0 24px;
-  width: 352px;
+  width: 302px;
   height: 72px;
   background: rgba(255, 255, 255, 0.8);
   border-radius: 12px;

src/components/SearchResultList/SearchResultList.vue

@@ -14,10 +14,6 @@
       <template v-if="activities.length">
         <h1 class="title">
           {{ $t('act') }}
-          <div>
-            <i>{{ $t('result') }}</i>
-            <b>{{ activities.length }}</b>
-          </div>
         </h1>
         <div class="activity">
           <div class="activity-item" @click="handleActivity(item)" v-for="item of activities" :key="item.activityId">
@@ -67,8 +63,9 @@ function handleActivity(item) {
 <style lang="scss" scoped>
 .search-result-scroll {
   position: relative;
-  height: 900px;
+  height: 1118px;
   overflow: hidden;
+  margin-left: 80px;
   .scroll-result {
     padding-bottom: 200px;
   }
@@ -94,11 +91,11 @@ function handleActivity(item) {
       align-items: center;
       padding: 0 8px;
 
-      width: 532px;
+      width: 457px;
       height: 84px;
       background: rgba(255, 255, 255, 0.8);
       border-radius: 12px;
-      margin-right: 8px;
+      margin-right: 6px;
       margin-bottom: 8px;
       .activity-name {
         font-weight: 700;

src/components/Voice/Voice.vue

@@ -77,16 +77,36 @@ const showCustomerDialog = ref(false)
 <style lang="scss" scoped>
 .speech-wrapper {
   position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  left: 16px;
+  right: 16px;
+  top: 416px;
   height: 360px;
+  :deep(svg) {
+    height: 85px !important;
+  }
+
   .lottie-box {
+    position: relative;
     height: 115px;
     margin-top: -42px;
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      width: 328px;
+      top: 42px;
+      height: 2px;
+      background: linear-gradient(90deg, #ffbd35 0%, #ffd260 100%);
+    }
+    &::before {
+      left: 0;
+    }
+    &::after {
+      right: 0;
+    }
   }
   :deep(svg) {
-    transform: scale(4.55) !important;
+    transform: scale(3.5) !important;
   }
   .start-btn {
     display: flex;
@@ -119,9 +139,9 @@ const showCustomerDialog = ref(false)
 }
 .voice-scroll {
   position: fixed;
-  top: 180px;
-  left: 72px;
-  right: 754px;
+  top: 802px;
+  left: 80px;
+  right: 58px;
   bottom: 0;
   .title {
     font-weight: 700;

src/router/index.js

@@ -26,8 +26,8 @@ router.beforeEach(async to => {
   try {
     const store = useStore()
 
-    // const voiceRes = await getIsShowVoiceBtn()
-    // store.isUseSpeech !== voiceRes.data.isOpen && store.SET_ISUSE_SPEECH(voiceRes.data.isOpen)
+    const voiceRes = await getIsShowVoiceBtn()
+    store.isUseSpeech !== voiceRes.data.isOpen && store.SET_ISUSE_SPEECH(voiceRes.data.isOpen)
 
     const res = await getIndexList()
     const { data, code } = res

src/store/root/state.js

@@ -15,5 +15,5 @@ export const state = () => ({
   showDetail: false, //是否显示详情
   currentFloor: {}, //设备所属的当前楼栋的当前楼层信息
   isUseFace: 0, //是否使用人脸 0:不使用 1: 使用
-  isUseSpeech: 1 //是否使用语音 0:不使用 1: 使用
+  isUseSpeech: 0 //是否使用语音 0:不使用 1: 使用
 })

src/views/Movie/Movie.vue

@@ -29,7 +29,7 @@
         </p>
       </ScrollView>
       <ScrollView class="movie-scroll">
-        <div class="scroll-content">
+        <TransitionGroup tag="div" name="zoom" class="scroll-content">
           <div class="movie-item" v-for="item of list" @click="handleMovie(item)" :key="item.id">
             <div class="poster-wrapper">
               <img class="poster" :src="item.posterPath" alt="" />
@@ -45,7 +45,7 @@
               <div class="buy">{{ $t('ticket') }}</div>
             </div>
           </div>
-        </div>
+        </TransitionGroup>
       </ScrollView>
     </div>
   </View>