JinShan_uniapp/pages/chat/index.vue

<template>
	
	<view class="aiHelper">

		<view class="aiHelperContainer">
		
			<view class="aiHelperTitle" :style="{'background-image': `url(${aiHelperTitleBackground})`}">{{aiHelperTitle}}</view>
			<view class="aiBox">
				<view class="aiType" v-for="(item,index) in aiType" :key="item.id" @click="goAiType(item)">
					<view class="aiTypeContainer" :style="{'background-image': `url(${item.background})`}">
						<view class="aiLeft" :style="{'background-image': `url(${item.imagePath})`}">
							<view class="aiLeftTitle">{{item.name}}</view>
						</view>
						<view class="aiRight">
							<view class="aiRightTitle"><text>{{item.description}}</text></view>
							<view class="aiDescription"><text>开始对话></text></view>
						</view>
					</view>
				</view>
			</view>
		</view>

       
	   <view><Footer></Footer></view>
		
	</view>
	
</template>

<script>
	import Footer from '@/components/footer_common.vue';
     import {get,post} from '@/utils/request';
	 import {IMAGE_BASE_URL,BASE_URL} from '@/utils/config';
	export default{
		name:'aiHelper',
		components:{Footer},
		data(){
			return{
				aiHelperTitle:'AI智能助手',
				aiHelperTitleBackground:'../../static/imgs/ai/title.png',
				aiType:[],
			}
		},
		mounted() {
			this.getData();
		},
		methods:{
			goAiType(item){
				uni.navigateTo({
				    url: `/pages/chat/chatPage?serviceUrl=${item.serviceUrl}&apiKey=${item.apiKey}&id=${item.id}&name=${item.name}&icon=${item.icon}`
				});
			},
			async getData(){
				let params = {
					current: 1,
					pageSize: 10,
				};
				try {
					const res = await get('/api/v1/apps/ai_request', params);
					if (!res || !res.success) {
						throw new Error('获取AI助手失败');
					}
					if(res.data.length>0){
						res.data.forEach((item)=>{
							item.background=IMAGE_BASE_URL+item.background
							item.imagePath=IMAGE_BASE_URL+item.imagePath
							item.icon=IMAGE_BASE_URL+item.icon
						})
					}
					this.aiType=res.data
				} catch (err) {
					console.error('获取AI助手失败:', err);
				}
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	.aiHelper{
		// margin-top: 90rpx;
		.aiHelperContainer {
		    padding: 2%;
		    padding-bottom: 50%;
		
		    .aiHelperTitle {
		        font-size: 1rem;
		        font-weight: 600;
		        letter-spacing: 0;
		        line-height: 1.5;
		        color: rgba(0, 0, 0, 1);
		        text-align: center;
		        vertical-align: top;
		        margin-bottom: 3%;
				// background-image: url('../../static/imgs/ai/title.png');
				background-repeat: no-repeat;
				background-position: 50% 80%;
				 background-size: 30%;
		    }
		
		    .aiBox {
		        .aiType {
		            margin-bottom: 3%;
		            width: 100%;
					height: 310rpx;
		            display: flex;
		            justify-content: center;
		
		            .aiTypeContainer {
		                display: flex;
		                margin: 1%;
		                border-radius: 0.5rem;
		                background-size: cover;
						box-shadow: 4px 4px 4px  rgba(0, 0, 0, 0.25);
		                background-position: 30% 50%;
		                background-repeat: no-repeat;
		                width: 96%;
		                aspect-ratio: 2.1/1;
		
		                .aiLeft {
		                    border-radius: 0.5rem;
		                    padding: 5% 0;
		                    margin-right: 12%;
		                    background-size: cover;
		                    background-position: center;
		                    background-repeat: no-repeat;
		                    width: 35%;
		                    // height: 100%;
		                   /* margin-left: -5%;*/
		                    position: relative;
		
		                    .aiLeftTitle {
		                        font-size: 0.8rem;
		                        font-weight: 900;
		                        letter-spacing: 0;
		                        line-height: 1.4;
		                        color: rgba(255, 255, 255, 1);
		                        text-align: left;
		                        position: absolute;
		                        bottom: 10%;
		                        left: 10%;
		                    }
		                }
		
		                .aiRight {
		                    flex: 1;
		                    display: flex;
		                    flex-direction: column;
		                    justify-content: normal;
		
		                    .aiRightTitle {
		                        font-size: 0.8rem;
		                        font-weight: 700;
		                        letter-spacing: 0;
		                        line-height: 1.4;
		                        color: rgba(0, 0, 0, 1);
		                        text-align: left;
		                        margin-bottom: 5%;
								margin-top: 22%;
		                    }
		
		                    .aiDescription {
		                        font-size: 26rpx;
		                        font-weight: 700;
		                        letter-spacing: 0;
		                        line-height: 2.5;
		                        color: #999;
		                        text-align: right;
								width: 90%;
		                    }
		                }
		            }
		        }
		    }
		}
	}
	
	
</style>