siyu_app/pages/ai/list.vue

<template>
	<view>
		<view class="chatlist">
			<view class="chatlist-item" v-for="(item, i) in dataList" :key="item.roleId" @click="handleDetail(item)">
				<image class="chatlist-head" :src="item.roleAvatar||'https://fs-1319721001.cos.ap-chongqing.myqcloud.com/fs/20240229/be32b8d2ae9f497297d10327656bb43c.png'" mode="aspectFill"></image>
				<view style="overflow: hidden;">
					<view class="chatlist-namebox">
						<view class="chatlist-tag" v-for="(tag,i) in getTag(item.roleTag)" :key="i">{{tag}}</view>
						<view class="chatlist-name textOne">{{item.roleName}}</view>
					</view>
					<view class="chatlist-msg textOne">{{item.lastContent || item.welcomeMessage}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getAllRolesListByUserId} from "@/api/ai.js"
	export default {
		data() {
			return {
				dataList: []
			}
		},
		computed: {
			getTag(){
				return (tag)=>{
					if (tag) {
						return tag.split(',')
					} else {
						return []
					}
				}
			}
		},
		onShow() {
			if(this.$isLogin()) {
				const user = this.$getUserInfo()
				const userId = user.userId || ''
				this.getList(userId)
			} else {
				this.$showLoginPage()
			}
		},
		methods: {
			handleDetail(item) {
				const sessionId = item.sessionId ||''
				uni.navigateTo({
					url: '/pages/ai/chat?roleId='+item.roleId+'&roleName='+item.roleName+'&sessionId='+sessionId
				})
			},
			getList(userId) {
				getAllRolesListByUserId({userId:userId}).then(res=>{
					if(res.code == 200) {
						this.dataList = res.data
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}
	.search-cont{
		width: 100%;
		padding: 16rpx 30rpx;
		background-color: #FFFFFF;
		box-sizing: border-box;
		.inner{
			box-sizing: border-box;
			width: 100%;
			height: 72rpx;
			background: #F7F7F7;
			border-radius: 36rpx;
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			.icon-search{
				width: 28rpx;
				height: 28rpx;
				margin-right: 20rpx;
			}
			input{
				height: 60rpx;
				line-height: 60rpx;
				flex: 1;
			}
		}
	}
	.chatlist {
		width: 100%;
		box-sizing: border-box;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
		background-color: #fff;
		&-item {
			padding: 20rpx 32rpx;
			box-sizing: border-box;
			overflow: hidden;
			@include u-flex(row,center,flex-start);
		}
		&-head {
			flex-shrink: 0;
			width: 96rpx;
			height: 96rpx;
			margin-right: 24rpx;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			overflow: hidden;
		}
		&-namebox {
			margin-bottom: 8rpx;
			@include u-flex(row,center,flex-start);
		}
		&-name {
			flex: 1;
			overflow: hidden;
			margin-left: 12rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: #222222;
		}
		&-msg {
			width: 100%;
		}
		&-tag {
			flex-shrink: 0;
			max-width: 120rpx;
			padding: 5rpx 12rpx;
			background: #DBE8F8;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			box-sizing: border-box;
			text-align: center;
			word-break: keep-all;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #3B74E1;
		}
	}
</style>