flinfo/dc-App/pages/Chat/chat.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>