XiaoLingHou_web/pages/consult/index.vue

<template>
	<view class="uni-page ai-chat">
		<u-navbar :left-icon="null" placeholder :autoBack="true" bgColor="#fff0e7" title="寄信助手"></u-navbar>
		<view class="ai-chat-hint">
			<view class="message-item-chat message-item">
				<view class="message-item-avatar">
					<img src="/static/03头像@2x.png" alt="">
				</view>
				<view class="message-item-content">
					<view class="message-hint-temp-title">
						Hi,我是你的寄信助手小艾
					</view>
					<view class="message-hint-temp-explain">
						有什么问题可以直接问我...
					</view>
				</view>
			</view>
		</view>
		<view class="chat-messageList">
			<template v-for="(mess,index) in messageList">
				<view v-if="mess.type==='user'" :key="index" class="message-item-user message-item">
					<view class="message-item-content" style="margin:0 10rpx 0 100rpx;">
						我也不周到爱思。阿斯加德记录基拉s./、。。萨达好看。阿是点开链接啊时间。。阿圣诞节啊克
					</view>
					<view class="message-item-avatar">
						<img :src="userInfo.avatar" alt="">
					</view>
				</view>
				<view v-if="mess.type==='rebot'" :key="index" class="message-item-chat message-item">
					<view class="message-item-avatar">
						<img :src="userInfo.avatar" alt="">
					</view>
					<view class="message-item-content" style="margin:0  100rpx 0 10rpx ;">
						我也不周到爱思。阿斯加德记录基拉s./、。。萨达好看。阿是点开链接啊时间。。阿圣诞节啊克
					</view>
				</view>
				<view v-if="mess.type==='rebootremplate'" :key="index" class="message-item-chat-template message-item">
					<view class="message-item-avatar">
						<img src="/static/03头像@2x.png" alt="">
					</view>
					<view class="message-item-content" style="margin:0  100rpx 0 10rpx ;">
						<view class="template-title">
							{{baseRobotMessage.title}}
						</view>
						<view class="template-item" v-for="(item,index) in baseRobotMessage.data" :key="index">
							{{item}}？
						</view>
					</view>
				</view>
			</template>
		</view>

		<view class="chat-floor">
			<view class="floor-toolbar">
				<view class="floor-toolbar-item">
					发送照片
				</view>
				<view class="floor-toolbar-item">
					发送订单
				</view>
			</view>
			<u-input class="u-input" :placeholder="placeholder" v-module="mesText">
				<view slot="suffix">
					<u-button color="null" class="self-button" :customStyle="{height:'66rpx',border:'unset'}"
						@tap="sendMessage(mesText)" type="success" size="mini">
						<img style="width: 110rpx;height: 65rpx;" src="/static/25发送@2x.png" alt="发送">
					</u-button>
				</view>
			</u-input>
		</view>
	</view>
</template>

<script>
	import {
		getQuestionApi
	} from '@/request/wm.js'
	export default {
		data() {
			return {
				placeholder: '输入您的问题...',
				baseRobotMessage: {
					type: 'rebootremplate',
					title: '您是否要咨询以下问题？',
					data: ['我要如何寄信？', '不知道地址怎么寄信？？', '我要如何寄信？？', '我要如何寄信？', '不知道地址怎么寄信？', '我要如何寄信？']
				},
				messageList: [],
				hintMessage: ['我要给狱中的朋友寄一封信...', '帮我给好朋友写封信...', '帮我写封信...', '我想给狱中的朋友写封信，有什么注意事项...'],
				mesText: '',
				userInfo: {},
			}
		},
		async onLoad() {
			this.userInfo = this.$store.userInf
			let res = await getQuestionApi()
			console.log(res);
			this.messageList.push(this.baseRobotMessage)
			console.log(this.userInfo);
		},
		methods: {
			sendMessage(mes) {
				console.log(mes);
				this.messageList.push({
					mes: 'mes'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.uni-page {
		display: flex;
		flex-direction: column;
		background: radial-gradient(circle, #ffe3d6, #ffe8dd, #fff3ee);

		.chat-messageList {
			width: 100%;
			display: flex;
			flex-direction: column;
			flex: 1;
		}
	}

	.ai-chat-hint {
		.message-item {
			.message-item-content {
				padding: 12rpx;
				background-color: transparent;
			}
		}

	}

	.ai-chat {
		.message-item {
			padding: 20rpx 0;
			display: flex;
			width: 100%;
			overflow: hidden;

			.message-item-content {
				flex: 1;
				font-size: 30rpx;
				color: #222222;
			}

		}

		.message-item-avatar {
			width: 96rpx;
			height: 96rpx;
			border-radius: 50%;
			overflow: hidden;

			img {
				width: 100%;
				height: 100%;
				// border-radius: 50%;
			}
		}

		.hint-message-box {
			display: flex;
			flex-wrap: wrap;

			.hint-message-item {
				color: #333333;
				width: fit-content;
				border-radius: 40rpx;
				margin-right: 30rpx;
				margin-top: 20rpx;
				background-color: rgba(255, 255, 255, 0.5);
				padding: 22rpx 35rpx;
				font-size: 32rpx;
			}
		}

		.message-item-content {
			padding: 35rpx;
			background-color: rgba(255, 255, 255, 0.5);
			;
			border-radius: 40rpx;

			.message-hint-temp-title {
				font-size: 32rpx;
				// width: 387rpx;
				// height: 42rpx;
				color: #333333;
			}

			.message-hint-temp-explain {
				// width: 340rpx;
				// height: 40rpx;
				color: #E08745;
				font-size: 30rpx;
			}
		}

		.message-item-chat-template {

			.message-item-content {
				background-color: #FFFFFF;
			}
		}

		.chat-floor {
			padding-bottom: 20rpx;

			.floor-toolbar {
				display: flex;
				font-size: 26rpx;
				flex-wrap: wrap;
				margin-bottom: 20rpx;
			}

			.floor-toolbar-item {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 123rpx;
				height: 52rpx;
				background: #FFE7D9;
				color: #FE9161;
				margin-right: 30rpx;
			}

			::v-deep .u-input {
				height: 102rpx;
				border-radius: 20rpx !important;
				padding: 0 0rpx 0 20rpx !important;
				border: 3rpx solid #FE9161 !important;
			}

		}
	}

	.template-title {
		font-size: 30rpx;
		margin-bottom: 23rpx;
	}

	.template-item {
		font-size: 26rpx;
		padding: 23rpx 0;
		font-weight: 700;
		border-bottom: 1rpx solid #E2E2E2;
	}

	.self-button {
		background-color: unset;
		border: unset;
		width: 120rpx;
		height: 76rpx;

		img {
			width: 100%;
			height: 100%;
		}
	}
</style>