305 lines
7.0 KiB
Vue
305 lines
7.0 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view style="text-align: center">
|
||
<!-- 循环渲染列表项，添加动态样式绑定 -->
|
||
<view
|
||
class="list_top"
|
||
v-for="(item, index) in list"
|
||
:key="index"
|
||
@click="selectItem(item, index)"
|
||
>
|
||
<view class="img_">
|
||
<image :src="selectedIndex === index ? item.selectedIcon : item.icon" mode="scaleToFill"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="introduction">
|
||
<scroll-view scroll-y="true">
|
||
<view>Agent Introduction</view>
|
||
<view>
|
||
<u-image height="400" :src="selectedItem.introduction" mode=""></u-image>
|
||
</view>
|
||
<view v-for="(item, index) in selectedItem.step" style="justify-content:left" :key="index" class="step-item">
|
||
<view class="step-index">{{ index + 1 }}</view>
|
||
<view class="step-content">{{ item }}</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<!-- 新增底部按钮 -->
|
||
<view class="enter-btn" @click="handleEnter">
|
||
Enter
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import request from '../../utils/request'
|
||
import tabbar from '../../components/tabbar/tabbar.vue'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
msg: "2",
|
||
list: [
|
||
{
|
||
title: 'Translator',
|
||
icon: '../../static/chatImg/tran.png',
|
||
token: 'Bearer app-EcJaT2EkUjHNJsax9SwESQuK',
|
||
detail: '',
|
||
conversation: 'Translator',
|
||
introduction: '../../static/chatImg/fanyi.png',
|
||
selectedIcon: '../../static/chatImg/transelect.png',
|
||
step: [
|
||
'Choose the language to be translated',
|
||
'Choose the language to translate',
|
||
'Return key',
|
||
'Translate images in to text(Long press trigger)',
|
||
'Send images for translation',
|
||
'Send voice for translation',
|
||
'Send text for translation',
|
||
'Translate text into images(Only for sending pictures)',
|
||
'Translate voice(Long press trigger)'
|
||
]
|
||
},
|
||
{
|
||
title: 'Trip Advisor',
|
||
icon: '../../static/chatImg/trip.png',
|
||
token: 'Bearer app-4Wqu03XTw297LtEsTXhotOuP',
|
||
detail: '',
|
||
conversation: 'Trip',
|
||
introduction: '../../static/chatImg/ai.png',
|
||
selectedIcon: '../../static/chatImg/tripselect.png',
|
||
step: [
|
||
'Return key',
|
||
'Send images',
|
||
]
|
||
},
|
||
{
|
||
title: 'Budget Planner',
|
||
icon: '../../static/chatImg/bud.png',
|
||
token: 'Bearer app-wNZ3qcMRhNUj0K9FrH8ERPwF',
|
||
detail: '',
|
||
conversation: 'Budget',
|
||
introduction: '../../static/chatImg/ai.png',
|
||
selectedIcon: '../../static/chatImg/budselect.png',
|
||
step: [
|
||
'Return key',
|
||
'Send images',
|
||
]
|
||
},
|
||
{
|
||
title: 'Ai Search',
|
||
icon: '../../static/chatImg/search.png',
|
||
token: 'Bearer app-4Wqu03XTw297LtEsTXhotOuP',
|
||
detail: '',
|
||
conversation: 'Ai',
|
||
introduction: '../../static/chatImg/ai.png',
|
||
selectedIcon: '../../static/chatImg/searchselect.png',
|
||
step: [
|
||
'Return key',
|
||
'Send images',
|
||
]
|
||
},
|
||
],
|
||
userInfo: {},
|
||
// 新增变量，用于记录当前选中的索引
|
||
selectedIndex: null,
|
||
selectedItem: null,
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.selectedItem = this.list[0];
|
||
this.selectedIndex = 0;
|
||
},
|
||
components: {
|
||
tabbar
|
||
},
|
||
methods: {
|
||
async goDetails(item, index) {
|
||
// 更新选中的索引
|
||
this.selectedIndex = index;
|
||
this.selectedItem = item;
|
||
let res = await request({
|
||
url: 'system/user/getUserBaseInfo',
|
||
method: 'get',
|
||
})
|
||
if (res.code == 200) {
|
||
let toData = {...item, userId: res.data.userId, userAvatar: res.data.avatar}
|
||
let data = JSON.stringify(toData)
|
||
uni.navigateTo({
|
||
url: '/pages/Chat/newChat?data=' + data
|
||
})
|
||
}
|
||
},
|
||
selectItem(item, index) {
|
||
this.selectedIndex = index;
|
||
this.selectedItem = item;
|
||
},
|
||
handleEnter(){
|
||
this.goDetails(this.selectedItem, this.selectedIndex)
|
||
},
|
||
async goNewChat(item) {
|
||
let res = await request({
|
||
url: 'system/user/getUserBaseInfo',
|
||
method: 'get',
|
||
})
|
||
if (res.code == 200) {
|
||
let toData = {...item, userId: res.data.userId, userAvatar: res.data.avatar}
|
||
let data = JSON.stringify(toData)
|
||
uni.navigateTo({
|
||
url: '/pages/Chat/newChat/index?data=' + data
|
||
})
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.container {
|
||
// 添加内边距
|
||
padding: 30rpx 20rpx;
|
||
}
|
||
|
||
.list_top {
|
||
display: inline-flex;
|
||
width: calc(25% - 10rpx);
|
||
box-sizing: border-box;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 0 5rpx;
|
||
}
|
||
|
||
.img_ {
|
||
width: 100%;
|
||
// height: 180rpx; // 设置固定高度
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.img_ image {
|
||
width: 100%;
|
||
height: 180rpx;
|
||
object-fit: contain; // 确保图片按比例缩放
|
||
}
|
||
|
||
.k_ {
|
||
width: 100%;
|
||
height: 120px;
|
||
}
|
||
|
||
.right_ {
|
||
width: auto;
|
||
}
|
||
|
||
.right_top {
|
||
font-weight: bold;
|
||
font-size: 18rpx;
|
||
margin-bottom: 10rpx;
|
||
/* 新增文本不换行属性 */
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
width: 100%;
|
||
}
|
||
|
||
.right_buttom {
|
||
font-weight: 500;
|
||
font-size: 14px;
|
||
color: #999999;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
-o-text-overflow: ellipsis;
|
||
}
|
||
|
||
/* 新增样式 */
|
||
.intro-container {
|
||
height: 200rpx;
|
||
margin-top: 20rpx;
|
||
padding: 20rpx;
|
||
background-color: #fff;
|
||
border-radius: 10rpx;
|
||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.intro-content {
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.enter-btn {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 80%;
|
||
height: 80rpx;
|
||
background-color: #337151;
|
||
color: #fff;
|
||
border-radius: 40rpx;
|
||
text-align: center;
|
||
line-height: 80rpx;
|
||
font-size: 32rpx;
|
||
box-shadow: 0 4rpx 10rpx rgba(51, 113, 81, 0.3);
|
||
}
|
||
.introduction{
|
||
background-color: #F4F4F4;
|
||
padding: 20rpx;
|
||
margin-top: 20rpx;
|
||
margin-bottom: 60rpx; // 新增底部间距
|
||
text-align: center;
|
||
font-weight: bold;
|
||
border-radius: 20rpx;
|
||
|
||
// 新增图片容器样式
|
||
view {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
// 修改图片样式
|
||
.u-image {
|
||
width: 100%;
|
||
object-fit: contain;
|
||
}
|
||
}
|
||
|
||
.step-item {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 20rpx;
|
||
justify-content: flex-start; // 新增靠左对齐
|
||
}
|
||
|
||
.step-content {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
text-align: left; // 新增靠左对齐
|
||
}
|
||
|
||
.step-index {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
border-radius: 50%;
|
||
background-color: #FBB72A;
|
||
color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.step-content {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
}
|
||
</style>
|