jd_logistics/jd_logistics-app/pages/index111/index.vue

<template>
	<view class="content padding30">
		<view class="bg_color_fff padding20 border_radius_20" @click="to_service_search">
			<u-search placeholder="输入你想知道的事" v-model="keyword" 
			@search="toAi({msgContent:keyword})" 
			@custom="toAi({msgContent:keyword})"
			:showAction="false" borderColor="#ffffff"></u-search>
		</view>
		<swiper class="swiper_list bg_color_fff border_radius_20 mt20" circular :indicator-dots="true" :autoplay="true" indicator-active-color="#ffffff">
			<swiper-item v-for="(item, index) in swiperList" :key="index" class="swiper_item border_radius_20"
			@click="toWebView(item)"
			>
				<image :src="HTTP_ADMIN_URL+item.dictValue" mode="" class="swiper_img border_radius_20"></image>
			</swiper-item>
		</swiper>
		<!-- 财智工具箱 -->
		<view class="mt20 bg_color_fff border_radius_20">
			<view class="bold font_size30 padding20">财智工具箱</view>
			<view class="grid-container padding20">
				<view class="border_radius_20" 
				@click="toAi({agentId:item.agentId})"
				v-for="(item, index) in agentList" :key="index">
					<image :src="HTTP_ADMIN_URL+item.imageUrl" class="item-img"></image>
					<view class="item-content">
						<view class="font_size30 bold title text-ellipsis">{{item.agentName}}</view>
						<view class="font_size20 gray mt10 desc text-ellipsis">{{item.agentDesc}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 常见问题 -->
		<view class="mt20 bg_color_fff border_radius_20">
			<view class="bold font_size30 padding20">常见问题</view>
			<view class="padding20 flex-center-between border-bottom" 
			@click="toAi({agentId:item.cssClass*1,msgContent:item.dictValue})"
			v-for="(item, index) in adSearchList" :key="index">
				<text class="flex_1 mr20">#{{item.dictValue}}</text>
				<image src="/static/img/arrow-right.png" mode="widthFix" class="menu_img"></image>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from "vue";
import { adList, getAgentList, getAdSearch } from "@/api/home.js";
import { HTTP_ADMIN_URL } from "@/config/app.js";
import { onLoad, onShareAppMessage} from '@dcloudio/uni-app'
onShareAppMessage((res) => {
  return appStore.onShareAppMessageObj
})
import { useAppStore } from "@/stores/app";
const appStore = useAppStore();
const keyword = ref('');
const swiperList = ref([]);
const agentList = ref([]);
const adSearchList = ref([]);

onLoad(()=>{
	console.log('index onLoad');
	adListFn();
	agentListFn();
	getAdSearchFn();
});

function toWebView({targetPath,dictCode}){
	if(targetPath){
		uni.navigateTo({
			url: '/pages/webView/webView?url='+encodeURIComponent(url)
		});
	}else{
		uni.navigateTo({
			url: '/pages/policy/ad_detail?dictCode='+dictCode
		});
	}
}
function toAi({agentId='', msgContent=''}){
	if(agentId) appStore.UPDATE_agentId(agentId);
	if(msgContent)appStore.UPDATE_msgContent(msgContent);
	uni.switchTab({
		url: '/pages/ai/ai'
	});
}
//获取轮播图
function adListFn(){
	adList().then(res=>{
		if(res.code == 200){
			swiperList.value = res.data || [];
		}
	})
}
//获取智能体列表
function agentListFn(){
	getAgentList().then(res=>{
		if(res.code == 200){
			agentList.value = res.rows || [];
		}
	})
}
// 搜索常用问题
function getAdSearchFn(){
  getAdSearch().then(res=>{
    if(res.code == 200){
      adSearchList.value = res.data || [];
    }
  })
}

</script>

<style scoped lang="scss">
	.content{
		/* 轮播 */
		.swiper_list{
			height: 350rpx;
			overflow: visible;
			.swiper_item{
				height: fit-content !important;
				.swiper_img{
					width: 100%;
					height: 350rpx;
				}
			}
		}
		.grid-container{
			.item-img{
				width: 100%;
				height: 200rpx;
				object-fit: cover;
				object-position: center;
				border-radius: 20rpx 20rpx 0 0;
			}
			.title, .desc {
				display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 ，适用于webkit内核浏览器 */
				-webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 为垂直排列 */
				-webkit-line-clamp: 1; /* 显示的行数，这里设置为2行 */
				overflow: hidden; /* 隐藏超出的内容 */
			}
		}
		.menu_img{
			width: 50rpx;
			height: 50rpx;
		}
	}

</style>