jd_logistics/jd_logistics-app/pages/ai/components/messagesInfoDefault.vue

<template>
 <view class=" messagesInfoDefault">
  <view class="flex_1 flex-column-center">
    <image 
      src="/static/img/service/aijiqiren.png" 
      class="service-avatar"
      mode="widthFix"
    />
    <view class="bold font_size40 mt20">Hi~,我是财税小助手!</view>
  </view>
  <view class="padding30 border_radius_20 bg_color_fff mt20" v-if="adSearchList.length>0">
    <view class="font_size30 bold">AI赋能，专业解答财税问题</view>
    <view class="font_size25 mt20 padding20 bg_color_f5 border_radius_20"
     @click="sendMessage(item.dictValue)"
    v-for="(item,index) in adSearchList" :key="index">
      #{{item.dictValue}}
    </view>
    <view class="flex-center mt20">
      <view class="flex-center-between gray" @click="getAdSearchFn">
        <img src="/static/img/shuaxin.png" alt="" class="mr20" style="width:40rpx;height:40rpx;"/>
        <text>换一批</text>
      </view>
    </view>
  </view>
  <!-- <view class="gray mt20 font_size25 flex-center">( 下拉获取历史数据 )</view> -->
</view>
</template>
<script setup>
import { ref,watch,nextTick } from "vue";
import { getAdSearch } from "@/api/home";
import { useAppStore } from "@/stores/app";
import { onLoad } from '@dcloudio/uni-app'
const appStore = useAppStore();
const adSearchList = ref([]);
const emit = defineEmits(['sendMessage']);

defineExpose({
  getAdSearchFn
});

// watch(() => appStore.agentId, (state) => {
//   nextTick(()=>{
//     setTimeout(()=>{ 
//       getAdSearchFn();
//     },500)
//   })
// });

function getAdSearchFn(){
  getAdSearch(appStore.agentId).then(res=>{
    if(res.code == 200){
      adSearchList.value = res.data || [];
    }
  })
}
function sendMessage(msgContent){
  emit('sendMessage',{chatType:0,msgContent});
}

</script>
<style lang="scss" scoped>
.messagesInfoDefault{
  position: fixed;
  width: 100%;
  top: 40rpx;
  left: 0;
  padding: 30rpx;
  .service-avatar{
    width: 200rpx;
  }
}
</style>