From bf1a038ed20a5e057a772cc354849e4f84389f0d Mon Sep 17 00:00:00 2001
From: jia <1451658316@qq.com>
Date: Wed, 1 Nov 2023 15:11:44 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=85=B3=E9=97=AD=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/content-top/index.vue |   92 ++
 pages/index/index.vue            |   15 +-
 pages/index/index1.vue           | 1826 ++++++++++++++++++++++++++++++
 static/icon/fb1.png              |  Bin 0 -> 446 bytes
 static/icon/fb2.png              |  Bin 0 -> 1119 bytes
 5 files changed, 1929 insertions(+), 4 deletions(-)
 create mode 100644 components/content-top/index.vue
 create mode 100644 pages/index/index1.vue
 create mode 100644 static/icon/fb1.png
 create mode 100644 static/icon/fb2.png

diff --git a/components/content-top/index.vue b/components/content-top/index.vue
new file mode 100644
index 0000000..02b9206
--- /dev/null
+++ b/components/content-top/index.vue
@@ -0,0 +1,92 @@
+<template>
+	<view class="contentgb">
+		<view class="return_top">
+			<view class="z-bootm-img1" @click="returnbom()">
+				<image src="@/static/icon/fb1.png" mode="aspectFit"></image>
+			</view>
+			<view class="z-bootm-l"></view>
+			<view class="z-bootm-img2" @click="returnbom()">
+				<image src="@/static/icon/fb2.png" mode="aspectFit"></image>
+			</view>
+			
+		</view>
+	</view>
+
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+
+			}
+		},
+		methods: {
+			returnbom() {
+				uni.sendHostEvent('closeApp',  (ret) => {
+					//发送消息成功回调
+					console.log('关闭应用' + JSON.stringify(ret));
+				});
+				
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.contentgb {
+
+		width: 166rpx;
+		height: 56rpx;
+
+		.return_top {
+			width: 166rpx;
+			height: 56rpx;
+			background: rgba(255, 255, 255, 0.6);
+			border-radius: 44rpx 44rpx;
+
+			position: relative;
+
+			.z-bootm-img1 {
+				width: 41rpx;
+				height: 13rpx;
+
+				position: absolute;
+				top: 20rpx;
+				left: 25rpx;
+
+				image {
+					width: 100%;
+					height: 100%;
+				}
+			}
+
+			.z-bootm-l {
+				width: 1px;
+				height: 32rpx;
+				background: rgba(0, 0, 0, 0.2);
+				margin: auto 0;
+
+				position: absolute;
+				top: 10rpx;
+				left: 85rpx;
+			}
+
+			.z-bootm-img2 {
+				width: 38rpx;
+				height: 34rpx;
+				margin-top: -15rpx;
+				margin-left: -15rpx;
+				position: absolute;
+				right: 25rpx;
+		       	top: 25rpx;
+
+				image {
+					width: 100%;
+					height: 100%;
+				}
+			}
+
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 1a05100..b46f9e5 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -5,9 +5,10 @@
 		<view class="conten-top">
 			<view class="" style="position: absolute;left: 30rpx;"><i class="iconfont icon-xiangzuo"
 					style="font-size: 40rpx;text-align: left;"></i></view>
-			<view class="" style="font-size: 30rpx;">
+			<view class="" style="font-size: 30rpx;margin-top: 10rpx;">
 				法律咨询
 			</view>
+				<returntop  class="container-retun"/>
 		</view>
 		<view style="padding-top:var(--status-bar-height);padding-bottom: 30rpx; margin-bottom: 30rpx;"></view>
 
@@ -250,14 +251,14 @@
 	import BingMath from "@/components/bing-math/bing-math.vue"
 	import qiqbshare from "@/components/qiqb-share/qiqb-share.vue"
 
-
+import returntop from '@/components/content-top/index.vue'
 	const recorderManager = uni.getRecorderManager()
 	const innerAudioContext = uni.createInnerAudioContext()
 	export default {
 		components: {
 			'bing-math': BingMath,
 			'qiqbshare': qiqbshare,
-
+ returntop
 
 		},
 		data() {
@@ -1605,9 +1606,15 @@
 		top: 0;
 		position: fixed;
 		z-index: 10;
+		.container-retun{
+			position: absolute;
+			right: 20rpx;
+			padding-top: var(--status-bar-height);
+			top: 0;
+		}
+		
 	}
 
-
 	.popup_box {
 		height: 100vh;
 		width: 100vw;
diff --git a/pages/index/index1.vue b/pages/index/index1.vue
new file mode 100644
index 0000000..ab70c94
--- /dev/null
+++ b/pages/index/index1.vue
@@ -0,0 +1,1826 @@
+<template>
+	<view class="wrapper" @touchmove="touchmove">
+
+
+		<view class="conten-top">
+			<view class="" style="position: absolute;left: 30rpx;"><i class="iconfont icon-xiangzuo"
+					style="font-size: 40rpx;text-align: left;"></i></view>
+			<view class="" style="font-size: 30rpx;">
+				农业咨询
+			</view>
+		</view>
+		<view style="padding-top:var(--status-bar-height);padding-bottom: 30rpx; margin-bottom: 30rpx;"></view>
+
+		<view class="tips color_fff size_12 align_c" :class="{ 'show':ajax.loading }" @tap="getHistoryMsg">
+			{{ajax.loadText}}
+		</view>
+		<view class="placeholder"></view>
+		<view class="box-1" id="list-box" ref="box">
+			<view class="talk-list">
+				<view class="talk-list-con">
+					<view class="talk-list-con-title">
+						您好！
+					</view>
+					<view class="talk-list-con-title1">
+						您可以和我说任何有关农业的问题。<br />
+						例如下面的问题，赶快试试吧！
+					</view>
+					<view class="talk-list-con-title2">
+						<text style="margin-top: 15rpx;"> 下方输入：</text>
+						<view class="" @click="sendDetail('消费者怎么维护自身权益')">
+						消费者怎么维护自身权益
+							<image src="../../static/icon/airight.png" mode=""></image>
+						</view>
+					</view>
+
+				</view>
+				<view v-for="(item,index) in talkList" :key="index" :id="`msg-${item.id}`">
+					<view class="item flex_col" :class="item.type == 1 ? 'push':'pull' ">
+						<image :src="item.type==1?avatar:item.pic" mode="aspectFill" class="pic" v-if="item.pic">
+						</image>
+
+						<view class="content" v-if="item.id=='@'">
+							<!-- 加载中 -->
+							<view class="blinking-box">
+								<image src="@/static/icon/ioc.gif" mode="aspectFit"></image>
+								<view class="">正在快速生成答案</view>
+							</view>
+						</view>
+						<view class="" v-else>
+							<view v-if="talkList.length-1==index" class="multiline-text">
+								<view class="content">
+
+									<bing-math v-if="c_content!=''" :key="`math-${item.id}`" class="bing-math1"
+										:latex="c_content"></bing-math>
+									<view v-else class="blinking-box">
+										<image src="@/static/icon/ioc.gif" mode="aspectFit"></image>
+										<view class="">正在快速生成答案</view>
+									</view>
+
+								</view>
+
+								<view class="contenta" v-if="c_content!=''&&index==nums">
+									<view class="contenta-img" v-if='palystatus' @click="palyaudio(item,index)">
+										<image src="@/static/icon/ai7.png" mode="aspectFit"></image>
+									</view>
+									<view class="contenta-img" v-else @click="palyaudio(item,index)">
+										<image src="@/static/icon/ai8.png" mode="aspectFit"></image>
+									</view>
+									<view class="contenta-ai" v-show="palystatus==false">
+										<image src="@/static/icon/ai.gif" mode="aspectFit"></image>
+									</view>
+									<view class="contenta-imga" @tap="copyContent(c_content)"
+										:style="{'margin-left':palystatus==false?'377rpx' :'427rpx','margin-right': '20rpx'}">
+										<image src="@/static/icon/ai10.png" mode="aspectFit"></image>
+									</view>
+									<view class="contenta-imga" @click="Share">
+										<image src="@/static/icon/ai9.png" mode="aspectFit"></image>
+									</view>
+								</view>
+							</view>
+							<view v-else class="content multiline-text">
+								<!-- <rich-text :nodes="item.content"></rich-text> -->
+
+								<bing-math :key="`math-${item.id}`" class="bing-math" :latex="item.content"></bing-math>
+							</view>
+						</view>
+
+					</view>
+				</view>
+
+
+				<view id="bottom-box"></view>
+			</view>
+		</view>
+		<uni-transition custom-class="box-2" mode-class="slide-left" :show="showStop">
+			<view class="flex_col">
+				<view class="flex_grow content downsocket" @click="closeSocketTask">中断连接</view>
+			</view>
+		</uni-transition>
+		<uni-transition custom-class="box-2" mode-class="slide-right" :show="!showStop">
+			<view class="flex_c">
+				<view class="flex_c_img" v-if="isshow" @click="hidesend">
+					<image src="@/static/icon/hua.png" mode="aspectFit"></image>
+				</view>
+
+				<view class="flex_c_img" v-else @click="hidesend">
+					<image src="@/static/icon/den.png" mode="aspectFit"></image>
+				</view>
+				<view class="flex_c_txt" v-if="isshow">
+					<input type="text" class="content" v-model="content" placeholder="输入您要咨询的内容" @focus="focus"
+						@confirm="send" placeholder-style="color:#DDD;" :cursor-spacing="6">
+				</view>
+				<view class="flex_c_txt" v-else>
+
+					<view class="con" @touchend="end" @touchmove="move" @touchstart="start">
+						{{btnStatus==0? "按住说话":btnStatus==1? "说话中...": btnStatus==2? "松开手指发送录音": "上划取消"}}
+					</view>
+					<!-- <view :class=" btnStatus==0? 'footerBtn': btnStatus==1?'footerBtn_star':'footerBtn_move'">
+						<view class="footerBtn_chr" @touchend="end" @touchmove="move" @touchstart="start">
+							{{btnStatus==0? "按住说话":btnStatus==1? "说话中...": btnStatus==2? "松开手指发送录音": "上划取消"}}
+						</view>
+					</view> -->
+
+				</view>
+				<view class="flex_c_img" @tap="send" v-if='content.length>0'>
+					<image src="@/static/icon/fa1.png" mode="aspectFit"></image>
+				</view>
+				<view class="flex_c_img" @tap="send" v-else>
+					<image src="@/static/icon/fa.png" mode="aspectFit"></image>
+				</view>
+				<view class="flex_c_img" @click="addgn">
+					<image src="@/static/icon/jia.png" mode="aspectFit"></image>
+				</view>
+				<!-- <button class="send" @tap="send">发送</button> -->
+			</view>
+			<view class="flex_d" v-if="gnishow">
+				<view class="" @click="album">
+					<image src="../../static/icon/ai2.png" mode=""></image>
+				</view>
+				<view class="" @click="camera">
+					<image src="../../static/icon/ai3.png" mode=""></image>
+				</view>
+			</view>
+		</uni-transition>
+
+		<uni-popup ref="popup" :mask-click="false">
+			<view class="popup_box" @touchend="end" @touchmove="move" @touchstart="start">
+				<view class="move">
+
+					<view v-if="btnStatus!==0" :class="btnStatus==3? 'move_center_clear': 'move_center'">
+
+						<view class="move_center_top">
+							<view class="move_center_item" v-for="(item,index) in 15" :key="index"
+								:style="{'background':btnStatus==3?'rgba(250, 83, 83, .5)':'rgba(149, 234, 108, .5)'}">
+							</view>
+						</view>
+						<view class="move_center_footer">
+							{{btnStatus==3? '松开手指,取消发送':"正在录音..."}}
+						</view>
+					</view>
+				</view>
+
+				<view class="popup_box-con">
+					<view class="popup_box-cona">
+
+						<view :class="risshow?'bg1':''">
+							X
+						</view>
+
+						<!-- <view class="" @tap="$u.throttle(end, 1000)">
+							文
+						</view> -->
+
+					</view>
+					<view class="popup_box-conb">
+						<image src="@/static/icon/ai1.png" mode=""></image>
+					</view>
+				</view>
+
+
+
+			</view>
+		</uni-popup>
+		<qiqbshare ref="child"></qiqbshare>
+
+	</view>
+</template>
+
+<script>
+	import {
+		xuiat,
+		iatWss,
+		debounce,
+		throttle,
+		fileToBase64,
+		dataURLtoBlob,
+		ttWss,
+	} from "@/api/api.js"
+	import {
+		HTTP_REQUEST_URL
+
+	} from '@/config/app';
+
+	import {
+		pathToBase64,
+		base64ToPath
+	} from '@/js_sdk/mmmm-image-tools/index.js'
+	import * as base64 from "base-64"
+	import CryptoJS from '../../static/crypto-js/crypto-js.js'
+	import parser from '../../static/fast-xml-parser/src/parser'
+	import * as utf8 from "utf8"
+	import BingMath from "@/components/bing-math/bing-math.vue"
+	import qiqbshare from "@/components/qiqb-share/qiqb-share.vue"
+
+
+
+	// 获取 module 
+	const sr = uni.requireNativePlugin("YL-SpeechRecognition")
+	const innerAudioContext = uni.createInnerAudioContext()
+
+	export default {
+		components: {
+			'bing-math': BingMath,
+			'qiqbshare': qiqbshare,
+
+
+		},
+		data() {
+			return {
+			    wssType: 'falv', // 网络连接类型
+			        avatarType: "/static/icon/fl.png", // AI头像类型
+				talkList: [],
+				ajax: {
+					rows: 15, //每页数量
+					page: 1, //页码
+					flag: false, // 请求开关
+					loading: false, // 加载中
+					loadText: '正在获取消息'
+				},
+				keyboardHeight: 0,
+				showplc: true,
+				content: '',
+				c_content: '',
+				n_content: '',
+				avatar: '/static/avatar.png', // 用户头像
+				params: [], // 发送的消息内容
+				timer: '',
+				timer1: '',
+				socketTask: {},
+				TEXT: '',
+				historyTextList: [], // 历史会话信息，由于最大token12000,可以结合实际使用，进行移出
+				tempRes: '', // 临时答复保存
+				socketing: false, // 是否正在接收
+				showStop: false, // 是否显示中断按钮
+				scrollTop: 0,
+				isshow: true,
+				shouldScrollToBottom: true,
+				nums: 0,
+				palystatus: true, //播放状态
+				recordFlg: true, //录音锁
+				btnStatus: 0, //按钮状态
+				audioDuration: "",
+				voicePath: "", //音频本地路径
+				timer: null, //定时器
+				num: 0, //录音时长
+				gnishow: false,
+				audioUrl: '',
+				audioTxt: '',
+				handlerInterval: null,
+				huashow: false,
+				Fstatus: false,
+				touchStartX: 0, //触摸时的原点
+				touchStartY: 0, //触摸时的原点
+				touchMoveX: 0, // x轴方向移动的距离
+				touchMoveY: 0, // y轴方向移动的距离
+				risshow: false,
+				islong: false,
+				// 是否开始绘制
+				isDraw: false,
+				imageSize: {
+
+				},
+				audio_file: [],
+				currentIndex: 0,
+				wv: null
+			}
+		},
+		mounted() {
+			this.$nextTick(() => {
+				this.getHistoryMsg();
+			});
+			uni.onKeyboardHeightChange(e => {
+				let h = this.keyboardHeight;
+				this.keyboardHeight = e.height;
+				this.$nextTick(() => {
+					setTimeout(() => {
+						uni.pageScrollTo({
+							scrollTop: 9999999, // 当前位置向下滚动
+							duration: 300 // 滚动过渡时间为300ms，默认值为300ms
+						});
+					}, 0)
+				})
+			})
+
+			//初始化
+			sr.init("2eda6c2e");
+			//创建文字转语音对象
+			sr.createTts(code => {});
+			//创建语音转文字对象
+			sr.createIat(code => {
+				console.log(code, '1111111111')
+			});
+
+			sr.setVadBos(10 * 1000); //设置语音听写前端点超时时间ms（最大10s,一般按默认即可）
+			sr.setVadEos(10 * 1000); //设置语音听写后端点超时时间ms（最大10s,一般按默认即可）
+		},
+		beforeDestroy() {
+			sr.destroy();
+		},
+		onLoad() {
+			let avatar = uni.getStorageSync('avatar');
+			avatar ? this.avatar = avatar : null;
+			uni.$on('MPinfo', (e) => {
+				this.avatar = e.avatar;
+			})
+
+
+
+
+		},
+		beforeDestroy() {
+			// #ifdef APP-PLUS
+			uni.offKeyboardHeightChange();
+			// #endif
+		},
+		onPageScroll(e) {
+			if (e.scrollTop < 5) {
+				this.getHistoryMsg();
+			}
+		},
+
+		watch: {
+			n_content(n, o) {
+
+				// this.c_content = n;
+				if (this.timer) clearInterval(this.timer);
+				let cl = this.c_content.length;
+				let nc = this.n_content.split('');
+				this.timer = setInterval(() => {
+					if (cl < nc.length) {
+						this.c_content += nc[cl];
+						cl++;
+						if (cl % 6 == 0) this.$nextTick(() => {
+							uni.pageScrollTo({
+								scrollTop: 999999,
+							})
+						})
+					} else {
+						// console.log(this.socketing==false, cl == nc.length);
+						if (this.socketing == false) this.showStop = false;
+						clearInterval(this.timer);
+						this.$nextTick(() => {
+							uni.pageScrollTo({
+								scrollTop: 9999999,
+							})
+						})
+					}
+				}, 60)
+			},
+
+		},
+
+		methods: {
+
+			//海报计算
+			cavshare(data) {
+
+				let arry = []
+				let arry1 = []
+				let a;
+				let b;
+				if (data.length > 2) {
+					a = data.length - 2
+					b = data.length - 1
+				} else {
+					a = 0
+					b = 1
+				}
+
+				for (let i in data[a].content) {
+					if (data[a].content.slice(i * 22, (i + 1) * 22)) {
+						arry.push(data[a].content.slice(i * 22, (i + 1) * 22))
+					}
+
+				}
+				for (let i in data[b].content) {
+					if (data[b].content.slice(i * 22, (i + 1) * 22)) {
+						arry1.push(data[b].content.slice(i * 22, (i + 1) * 22))
+					}
+
+
+				}
+				// console.log(arry1.length,arry.length)
+
+				this.imageSize.height = (arry1.length * 20) + (arry.length * 20) + 100 + 150
+
+				this.$refs.child.refresh(this.talkList, this.imageSize.height, (arry.length * 20) + 100);
+			},
+
+
+			//滑动到底部
+			TabItemTap(e) {
+				uni.pageScrollTo({
+					selector: ".box-1",
+					scrollTop: 0
+				})
+
+			},
+			//分享
+			Share() {
+
+				// this.isDraw = !this.isDraw;
+				this.cavshare(this.talkList)
+				this.$refs.child.init()
+
+			},
+			//打开相册
+			album() {
+				uni.chooseImage({
+					count: 1,
+					sizeType: ['original', 'compressed'],
+					sourceType: ['album'], //这要注意，camera掉拍照，album是打开手机相册
+					success: (res) => {
+						// const tempFilePaths = res.tempFilePaths;
+						this.imgfile(res.tempFilePaths)
+
+						let data = {
+							"id": '@',
+							"content": '',
+							"type": 2,
+							"pic": this.avatarType
+						}
+						this.talkList.push(data);
+					}
+				});
+
+			},
+			//拍照
+			camera() {
+				uni.chooseImage({
+					count: 1,
+					sizeType: ['original', 'compressed'],
+					sourceType: ['camera'], //这要注意，camera掉拍照，album是打开手机相册
+					success: (res) => {
+						console.log(res);
+						// const tempFilePaths = res.tempFilePaths;
+						this.imgfile(res.tempFilePaths)
+						let data = {
+							"id": '@',
+							"content": '',
+							"type": 2,
+							"pic": this.avatarType
+						}
+						this.talkList.push(data);
+					}
+				});
+
+			},
+			//复制
+			copyContent(data) {
+
+				uni.setClipboardData({
+					data,
+					success: function() {
+						uni.getClipboardData({
+							success: function(res) {
+								uni.showToast({
+									title: "复制成功",
+								});
+							}
+						});
+					}
+				});
+			},
+			//图片转文字
+			imgfile(tempFilePath) {
+				let that = this
+				console.log(tempFilePath, '2')
+				uni.uploadFile({
+					url: HTTP_REQUEST_URL + '/api/xun_fei/ocr', // 上传地址
+					filePath: tempFilePath[0], // 要上传的文件路径
+					name: 'image', // 上传文件对应的 key 值
+					header: {
+						'content-type': 'multipart/form-data'
+					},
+					success: function(res) {
+
+						let data = JSON.parse(res.data)
+						console.log(data)
+						if (data.code == 1) {
+							uni.showToast({
+								title: '图片识别成功'
+							});
+
+							that.talkList = that.talkList.filter(item => item.id !== '@');
+							if (data.data.words.length > 0) {
+								that.content = ''
+								for (let i in data.data.words) {
+									that.content = that.content + data.data.words[i]
+								}
+								that.send1()
+							}
+
+						}
+					},
+
+					fail: function(error) {
+						// 上传失败处理逻辑
+						that.talkList = that.talkList.filter(item => item.id !== '@');
+						console.log(error, 11);
+
+
+					}
+				})
+			},
+
+
+			//功能展开
+			addgn() {
+
+				this.gnishow = !this.gnishow
+
+			},
+			// 点击关闭遮罩层
+			closePop() {
+				this.$refs.popup.close()
+			},
+
+
+			//振动
+			onFeedTap() {
+				let platform = uni.getSystemInfoSync().platform
+				// #ifdef APP-PLUS
+				if (platform == "ios") {
+					let UIImpactFeedbackGenerator = plus.ios.importClass('UIImpactFeedbackGenerator');
+					let impact = new UIImpactFeedbackGenerator();
+					impact.prepare();
+					impact.init(1);
+					impact.impactOccurred();
+				}
+				if (platform == "android") {
+					// uni.vibrateShort();
+					uni.vibrateShort({
+						success: () => {
+							console.log('success');
+						},
+						fail: () => {
+							console.log('失败');
+						},
+					});
+				}
+				// #endif
+			},
+
+
+			//文字转语音
+			txtspeech(val, i) {
+
+				xuiat({
+					text: val
+				}).then(res => {
+					if (res.code == 1) {
+						this.talkList[i].audio_file = res.data.audio_file
+						this.nums = this.talkList.length - 1
+						// this.palyaudio(res.data)
+					}
+				}).catch((err) => {
+					console.log(err)
+				})
+
+
+
+				// 暂时不用
+				// let arry1;
+				// if (val.indexOf(',') == -1) {
+				// 	arry1 = val.split(',')
+				// } else if (val.indexOf('，') == -1) {
+				// 	arry1 = val.split('，')
+				// } else {
+				// 	arry1.push(val)
+				// }
+
+				// const temp = []
+				// for (let i = 0; i < arry1.length; i++) {
+				// 	temp.push(
+				// 		// 使用Promise用于异步计算
+				// 		new Promise((resolve, reject) => {
+
+				// 			ttWss({
+				// 				data: arry1[i]
+				// 			}).then(res => {
+
+				// 				return resolve(res.data.mp3)
+				// 			}).catch(err => {
+				// 				return reject(err)
+				// 			})
+				// 		})
+				// 	)
+				// }
+				// Promise.all(temp).then(res => {
+				// 	// console.log(res,'2222222')
+				// 	this.audio_file = res
+
+				// 	this.ScanAudio(res, this.currentIndex, 0)
+				// })
+
+			},
+
+			//语音分段  数组 条数 延时
+			ScanAudio(urls, currentIndex, delayInSeconds) {
+
+				if (currentIndex >= urls.length) {
+					this.palystatus = true;
+					return false;
+				}
+
+				const music = uni.createInnerAudioContext();
+				music.src = urls[currentIndex];
+				console.log(urls[currentIndex])
+
+				console.log('播放成功', this.palystatus)
+				if (this.palystatus) {
+					this.palystatus = false
+					music.play();
+
+				} else {
+
+					music.pause();
+
+				}
+
+				music.onEnded(() => {
+
+					music.destroy();
+					setTimeout(() => {
+						this.ScanAudio(urls, currentIndex + 1, delayInSeconds);
+					}, delayInSeconds * 1000);
+				});
+
+			},
+
+		
+			//开始录音
+			voiceToText() {
+				let that = this;
+
+				sr.voiceToText(data => {
+					// console.log(JSON.stringify(data));
+					if (data.code == 1001) {
+						// that.toTextStatus = "倾听中，请说话..."
+					} else if (data.code == 1006) {
+						// this.toTextStatus = "倾听完毕"
+						//文件地址
+						// sr.getIatPath(path => {
+						// 	that.path = path;
+						// });
+					} else if (data.code == 1007) {
+						// this.toTextStatus = "停止倾听"
+					} else if (data.code == 1008) {
+						// this.volume = data.msg;
+					} else if (data.code == 1009) { //结果
+						//语音识别是分段的，你说一个词语或者一个句子识别一次，返回一次，再说再返回，不是一次性的，islast代表是否是最后一句话，可以理解为本次识别是否已结束
+						// this.transText = data.msg;
+						if (data.isLast) {
+
+							if (data.msg.length > 0 && this.risshow == false) {
+								this.content = data.msg
+								this.send()
+							} else {
+								this.content = ''
+								this.stopVoiceToText()
+							}
+
+						}
+
+					} else if (data.code == 1010) { //error信息
+						//如果data.msg不为空，则属于报错
+						if (data.msg) {
+							this.transText = data.msg;
+						}
+					}
+				})
+			},
+			//结束录音
+			stopVoiceToText() {
+				//你调这个方法后，安卓的回调会先1007，再1009 ios是 1007 1006 1009 1010
+				sr.stopListening();
+			},
+			start(e) {
+				// console.log(e.touches[0].pageX)
+				this.touchStartX = e.touches[0].pageX; // 获取触摸时的原点
+				this.touchStartY = e.touches[0].pageY; // 获取触摸时的原点
+				clearTimeout(this.timer); //再次清空定时器，防止重复注册定时器
+				let that=this
+				this.timer = setTimeout(function() {
+					//执行的代码块
+					// alert("执行了一次长按事件！！！")
+					that.onFeedTap()
+					
+					that.islong = true
+					that.risshow = false
+					that.$refs.popup.open('center')
+					that.btnStatus = 1
+					that.voiceToText()
+
+				}.bind(this), 1500);
+
+			},
+
+			end() {
+
+			
+
+				if (this.islong) {
+					this.closePop()
+					this.islong = false
+					clearInterval(this.timer) //清空定时器，防止重复注册定时器
+					this.btnStatus = 0;
+					this.stopVoiceToText()
+					this.num = 0
+
+
+
+				}
+
+
+
+
+			},
+
+
+			//删除本地录音文件
+			deletespeech() {
+				this.btnStatus = 0
+				let that = this
+				this.closePop()
+
+				uni.getSavedFileList({
+					success: function(res) {
+
+						if (res.fileList.length > 0) {
+
+							uni.removeSavedFile({
+								filePath: res.fileList[0].filePath,
+								complete: function(res) {
+									console.log(res);
+								}
+							});
+						}
+					}
+				});
+			},
+			//发送示列
+			sendDetail(data) {
+				this.content = data
+				this.send()
+			},
+			//语音隐藏
+
+			hidesend() {
+				this.isshow = !this.isshow
+			},
+			//录音
+			Dialogue() {
+				// this.maskShow = !this.maskShow
+				this.$refs.popup.open('center')
+			},
+			footerCheck(e) {
+				console.log(e)
+				this.maskShow = false
+				this.isshow = true
+			},
+			//音频播放
+
+			palyaudio1(item, i) {
+				this.palystatus = !this.palystatus
+				console.log(this.audio_file, '111')
+				if (!this.palystatus) {
+
+					this.ScanAudio(this.audio_file, this.currentIndex, 0)
+				} else {
+					this.ScanAudio(this.audio_file, this.currentIndex, 0)
+					// this.txtspeech(item.content, i)
+				}
+				// innerAudioContext.onError((res) => {
+				// 	console.log(res.errMsg);
+				// 	console.log(res.errCode);
+				// 	this.palystatus = true
+				// });
+
+				innerAudioContext.onEnded((res) => {
+					this.palystatus = true
+				});
+
+			},
+			//音频播放
+
+			palyaudio(item, i) {
+				this.palystatus = !this.palystatus
+				if (!this.palystatus) {
+					innerAudioContext.src = item.audio_file;
+					innerAudioContext.play()
+				} else {
+					innerAudioContext.pause()
+				}
+				innerAudioContext.onError((res) => {
+					console.log(res.errMsg);
+					console.log(res.errCode);
+					this.palystatus = true
+				});
+
+				innerAudioContext.onEnded((res) => {
+					this.palystatus = true
+				});
+
+			},
+
+
+			copyText(str) {
+				uni.setClipboardData({
+					data: str,
+					success: function() {
+						uni.showToast({
+							icon: 'none',
+							title: '复制成功'
+						});
+					}
+				});
+			},
+			// 获取历史消息
+			getHistoryMsg() {
+				return;
+				if (this.ajax.flag) {
+					return; //
+				}
+
+				let get = async () => {
+					this.hideLoadTips();
+					this.ajax.flag = false;
+					let data = await this.joinHistoryMsg();
+
+					console.log('----- 模拟数据格式，供参考 -----');
+					// console.log(data); // 查看请求返回的数据结构 
+
+					// 获取待滚动元素选择器，解决插入数据后，滚动条定位时使用
+					let selector = '';
+
+					if (this.ajax.page > 1) {
+						// 非第一页，则取历史消息数据的第一条信息元素
+						selector = `#msg-${this.talkList[0].id}`;
+					} else {
+						// 第一页，则取当前消息数据的最后一条信息元素
+						selector = `#msg-${data[data.length-1].id}`;
+					}
+
+					// 将获取到的消息数据合并到消息数组中
+					this.talkList = [...data, ...this.talkList];
+
+					// 数据挂载后执行，不懂的请自行阅读 Vue.js 文档对 Vue.nextTick 函数说明。
+					this.$nextTick(() => {
+						// 设置当前滚动的位置
+						this.setPageScrollTo(selector);
+
+						this.hideLoadTips(true);
+
+						if (data.length < this.ajax.rows) {
+							// 当前消息数据条数小于请求要求条数时，则无更多消息，不再允许请求。
+							// 可在此处编写无更多消息数据时的逻辑
+						} else {
+							this.ajax.page++;
+
+							// 延迟 200ms ，以保证设置窗口滚动已完成
+							setTimeout(() => {
+								this.ajax.flag = true;
+							}, 200)
+						}
+
+					})
+				}
+				get();
+			},
+			// 拼接历史记录消息
+			joinHistoryMsg() {
+				let join = () => {
+					let arr = [];
+
+					//通过当前页码及页数，模拟数据内容
+					let startIndex = (this.ajax.page - 1) * this.ajax.rows;
+					let endIndex = startIndex + this.ajax.rows;
+					for (let i = startIndex; i < endIndex; i++) {
+						arr.push({
+							"id": i, // 消息的ID
+							"content": `这是历史记录的第${i+1}条消息`, // 消息内容
+							"type": Math.random() > 0.5 ? 1 : 0, // 此为消息类别，设 1 为发出去的消息，0 为收到对方的消息,
+							"pic": "/static/avatar.png" // 头像
+						})
+					}
+
+					/*
+						颠倒数组中元素的顺序。将最新的数据排在本次接口返回数据的最后面。
+						后端接口按 消息的时间降序查找出当前页的数据后，再将本页数据按消息时间降序排序返回。
+						这是数据的重点，因为页面滚动条和上拉加载历史的问题。
+					 */
+					arr.reverse();
+
+					return arr;
+				}
+
+				// 此处用到 ES6 的 Promise 知识，不懂的请自行学习。
+				return new Promise((done, fail) => {
+					// 无数据请求接口，由 setTimeout 模拟，正式项目替换为 ajax 即可。
+					setTimeout(() => {
+						let data = join();
+						done(data);
+					}, 1500);
+				})
+			},
+			focus() {
+				// this.$nextTick(()=>{
+				//   setTimeout(()=>{
+				//     uni.pageScrollTo({
+				//       scrollTop: 9999999, // 当前位置向下滚动
+				//       duration: 300 // 滚动过渡时间为300ms，默认值为300ms
+				//     });
+				//   }, 0)
+				// })
+			},
+			// 设置页面滚动位置
+			setPageScrollTo(selector) {
+				let view = uni.createSelectorQuery().in(this).select(selector);
+				view.boundingClientRect((res) => {
+					uni.pageScrollTo({
+						scrollTop: res.top - 30, // -30 为多显示出大半个消息的高度，示意上面还有信息。
+						duration: 0
+					});
+				}).exec();
+			},
+			// 隐藏加载提示
+			hideLoadTips(flag) {
+				if (flag) {
+					this.ajax.loadText = '消息获取成功';
+					setTimeout(() => {
+						this.ajax.loading = false;
+					}, 300);
+				} else {
+					this.ajax.loading = true;
+					this.ajax.loadText = '正在获取消息';
+				}
+			},
+			// 关闭连接
+			closeSocketTask() {
+				try {
+					clearInterval(this.timer);
+					this.talkList[this.talkList.length - 1].content = this.c_content + '';
+					// console.log(this.talkList[this.talkList.length - 1].content);
+					// this.c_content = '';
+					// this.n_content = '';
+					this.socketTask.close({
+						code: 500, // APP端存在BUG,正常关闭的code为1000,无法正常关闭,需要将code换为其他值
+						complete: (res) => {
+							this.showStop = false;
+							console.log('主动断开', res);
+							this.wsLiveFlag = false;
+						}
+					})
+				} catch (e) {
+					//TODO handle the exception
+				}
+			},
+			move(e) {
+
+				let that = this;
+				let moveX = this.touchMoveX - e.touches[0].pageX;
+				let moveY = this.touchMoveY - e.touches[0].pageY;
+				// console.log(-115 > moveX && -240 < moveX,moveY)
+				let platform = uni.getSystemInfoSync().platform;
+				if (platform === 'ios') {
+					if (-115 > moveX && -240 < moveX && moveY < -620 && moveY > -730) {
+						this.risshow = true
+						this.deletespeech()
+
+					} else {
+						this.risshow = false
+					}
+				} else {
+
+
+					if (-115 > moveX && -240 < moveX && moveY < -359 && moveY > -480) {
+
+						this.risshow = true
+
+						this.deletespeech()
+					} else {
+						this.risshow = false
+					}
+				}
+
+			},
+			// 发送信息
+			send() {
+				if (!this.content) {
+					uni.showToast({
+						title: '请输入有效的内容',
+						icon: 'none'
+					})
+					return;
+				}
+				this.showStop = true;
+				// 将当前发送信息 添加到消息列表。
+				let data = {
+					"id": new Date().getTime(),
+					"content": this.content,
+					"type": 1,
+					// "pic": this.avatar
+					"pic": this.avatarType
+				}
+				// console.log(data);
+				this.TEXT = this.content;
+				this.talkList.push(data);
+				this.talkList.push({
+					"id": new Date().getTime(),
+					"content": '',
+					"type": 2,
+					// "pic": this.avatarType
+				});
+				this.n_content = '';
+				this.c_content = '';
+				this.socketing = true;
+				// return ;
+				this.$nextTick(() => {
+					// 清空内容框中的内容
+					this.content = '';
+					// uni.pageScrollTo({
+					//   scrollTop: 999999, // 设置一个超大值，以保证滚动条滚动到底部
+					//   duration: 0
+					// });
+				})
+				this.sendToSpark();
+
+			},
+			async sendToSpark() {
+				this.tempRes = "";
+				let realThis = this;
+				this.socketTask = uni.connectSocket({
+					//url: encodeURI(encodeURI(myUrl).replace(/\+/g, '%2B')),
+					url: `wss://chat.lihaink.cn/chat?type=${this.wssType}&timestamp=${Date.now()}`,
+					method: 'GET',
+					token: '',
+					success: res => {
+						console.log(res, "ws成功连接...")
+						realThis.wsLiveFlag = true;
+					}
+				})
+				realThis.socketTask.onError((res) => {
+					console.log("连接发生错误，请检查appid是否填写", res)
+				})
+				realThis.socketTask.onOpen((res) => {
+					this.historyTextList.push({
+						"role": "user",
+						"content": this.TEXT
+					})
+					// 第一帧..........................................
+					console.log('连接成功...')
+					// let params = {
+					//   "header": {
+					//     "app_id": this.APPID,
+					//     "uid": "aef9f963-7"
+					//   },
+					//   "parameter": {
+					//     "chat": {
+					//       "domain": "generalv2",
+					//       "temperature": 0.5,
+					//       "max_tokens": 1024
+					//     }
+					//   },
+					//   "payload": {
+					//     "message": {
+					//       "text": this.historyTextList
+					//     }
+					//   }
+					// };
+					if (this.historyTextList.length > 9) this.params = JSON.parse(JSON.stringify(this
+						.historyTextList
+						.splice(-9)));
+					else this.params = JSON.parse(JSON.stringify(this.historyTextList));
+					this.isSurpass();
+					realThis.socketTask.send({ // 发送消息，，都用uni的官方版本
+						data: JSON.stringify(this.params),
+						success() {
+							console.log('第一帧发送成功');
+						}
+					});
+				});
+
+				// 接受到消息时
+				realThis.socketTask.onMessage((res) => {
+					// console.log('收到API返回的内容：', res.data);
+					let obj = JSON.parse(res.data)
+					// console.log("我打印的"+obj.payload);
+					if (!realThis.wsLiveFlag) return;
+					let dataArray = obj.payload.choices.text;
+					for (let i = 0; i < dataArray.length; i++) {
+						this.talkList[this.talkList.length - 1].content += dataArray[i].content;
+						this.n_content = this.talkList[this.talkList.length - 1].content;
+						realThis.tempRes = realThis.tempRes + dataArray[i].content
+
+					}
+					this.cavshare(this.talkList)
+					let temp = JSON.parse(res.data)
+					// console.log("0726",temp.header.code)
+					if (temp.header.code !== 0) {
+						this.socketing = false;
+						console.log(`${temp.header.code}:${temp.message}`);
+						realThis.socketTask.close({
+							success(res) {
+								console.log('关闭成功', res)
+								realThis.wsLiveFlag = false;
+							},
+							fail(err) {
+								console.log('关闭失败', err)
+							}
+						})
+					}
+					if (temp.header.code === 0) {
+						if (res.data && temp.header.status === 2) {
+							this.socketing = false;
+							this.historyTextList.push({
+								"role": "assistant",
+								"content": this.tempRes
+							})
+							this.nums = this.talkList.length - 1
+							this.txtspeech(this.n_content, this.talkList.length -
+								1)
+							setTimeout(() => {
+								let that = this
+								realThis.socketTask.close({
+									success(res) {
+										console.log('关闭成功', res)
+
+										realThis.wsLiveFlag = false;
+
+
+									},
+									fail(err) {
+										// console.log('关闭失败', err)
+									}
+								})
+							}, 1000)
+						}
+					}
+				})
+
+			},
+
+			// 判断文字是否超过五千字
+			isSurpass() {
+				let sum = this.params.reduce((accumulator, currentValue) => {
+					return accumulator + currentValue.content;
+				}, '');
+				if (sum.length > 5000) {
+					this.params.shift();
+					return this.isSurpass();
+				} else {
+					console.log(`本次发送${sum.length}字`);
+					return sum;
+				}
+			},
+			// 鉴权
+			getWebSocketUrl() {
+				return new Promise((resolve, reject) => {
+					// https://spark-api.xf-yun.com/v1.1/chat  V1.5 domain general
+					// https://spark-api.xf-yun.com/v2.1/chat  V2.0 domain generalv2
+					var url = "wss://spark-api.xf-yun.com/v2.1/chat";
+					var host = "spark-api.xf-yun.com";
+					var apiKeyName = "api_key";
+					var date = new Date().toGMTString();
+					var algorithm = "hmac-sha256";
+					var headers = "host date request-line";
+					var signatureOrigin = `host: ${host}\ndate: ${date}\nGET /v2.1/chat HTTP/1.1`;
+					var signatureSha = CryptoJS.HmacSHA256(signatureOrigin, this.APISecret);
+					var signature = CryptoJS.enc.Base64.stringify(signatureSha);
+					var authorizationOrigin =
+						`${apiKeyName}="${this.APIKey}", algorithm="${algorithm}", headers="${headers}", signature="${signature}"`;
+					var authorization = base64.encode(authorizationOrigin);
+					url = `${url}?authorization=${authorization}&date=${encodeURI(date)}&host=${host}`;
+
+					// console.log(url)
+					resolve(url);
+				});
+			},
+			// 滚动到头部
+			bindScroll() {
+				if (this.userId == 0) {
+					this.getHistory();
+					this.getproductInfo();
+					this.getOrderInfo();
+					this.getRefundDetail();
+					this.getStoreDetail();
+				} else {
+					this.getMerHistory();
+				}
+			},
+			// 当滑动页面时,收起键盘,与微信聊天效果保持一致
+			touchmove(e) {
+				uni.hideKeyboard()
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	@import "../../lib/global.scss";
+
+	page {
+		// background-color: #f5f5f5;
+		height: 100vh;
+		// background: url('@/static/icon/bg1.png') no-repeat;
+		background-size: 100% 100%;
+		background-attachment: fixed;
+		background-repeat: no-repeat;
+		font-size: 28rpx;
+	}
+
+	@keyframes load {
+		0% {
+			height: 10%;
+		}
+
+		50% {
+			height: 100%;
+		}
+
+		100% {
+			height: 10%;
+		}
+	}
+
+	// 取消发送
+	.move_center_footer {
+		margin-top: 20rpx;
+		font-size: 24rpx;
+		color: #666;
+	}
+
+	.bg1 {
+		background-color: #fff !important;
+		color: #000 !important;
+	}
+
+	.move_center_top {
+		height: 40rpx;
+		width: 100%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+
+		.move_center_item {
+			display: block;
+			// background: #333333;
+
+			width: 6rpx;
+			height: 10%;
+			margin: 0 6rpx;
+			float: left;
+		}
+
+		.move_center_item:nth-child(1) {
+			animation: load 2.5s 1.4s infinite linear;
+		}
+
+		.move_center_item:nth-child(2) {
+			animation: load 2.5s 1.2s infinite linear;
+		}
+
+		.move_center_item:nth-child(3) {
+			animation: load 2.5s 1s infinite linear;
+		}
+
+		.move_center_item:nth-child(4) {
+			animation: load 2.5s 0.8s infinite linear;
+		}
+
+		.move_center_item:nth-child(5) {
+			animation: load 2.5s 0.6s infinite linear;
+		}
+
+		.move_center_item:nth-child(6) {
+			animation: load 2.5s 0.4s infinite linear;
+		}
+
+		.move_center_item:nth-child(7) {
+			animation: load 2.5s 0.2s infinite linear;
+		}
+
+		.move_center_item:nth-child(8) {
+			animation: load 2.5s 0s infinite linear;
+		}
+
+		.move_center_item:nth-child(9) {
+			animation: load 2.5s 0.2s infinite linear;
+		}
+
+		.move_center_item:nth-child(10) {
+			animation: load 2.5s 0.4s infinite linear;
+		}
+
+		.move_center_item:nth-child(11) {
+			animation: load 2.5s 0.6s infinite linear;
+		}
+
+		.move_center_item:nth-child(12) {
+			animation: load 2.5s 0.8s infinite linear;
+		}
+
+		.move_center_item:nth-child(13) {
+			animation: load 2.5s 1s infinite linear;
+		}
+
+		.move_center_item:nth-child(14) {
+			animation: load 2.5s 1.2s infinite linear;
+		}
+
+		.move_center_item:nth-child(15) {
+			animation: load 2.5s 1.4s infinite linear;
+		}
+
+	}
+
+	.conten-top {
+		width: 100%;
+		padding-top: var(--status-bar-height);
+		padding-bottom: 30rpx;
+		// background: url('@/static/icon/bg1.png');
+		background-size: cover;
+		text-align: center;
+		background-color: transparent;
+		position: absolute;
+		top: 0;
+		position: fixed;
+		z-index: 10;
+	}
+
+
+	.popup_box {
+		height: 100vh;
+		width: 100vw;
+
+		position: relative;
+
+		// 取消录音区域
+		.move {
+			width: 100%;
+			position: absolute;
+			left: 0;
+			bottom: 550rpx;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+
+			.move_center_clear {
+				width: 40%;
+				height: 200rpx;
+				border-radius: 50rpx;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				flex-direction: column;
+				// background: rgba(250, 83, 83, .5);
+				background: url('@/static/icon/ai6.png') no-repeat;
+				background-size: 100% 100%;
+
+			}
+
+			.move_center {
+				width: 40%;
+				height: 200rpx;
+				// background: rgba(149, 234, 108, .5);
+				background: url('@/static/icon/ai6.png') no-repeat;
+				background-size: 100% 100%;
+
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				flex-direction: column;
+			}
+		}
+
+		.popup_box-con {
+			.popup_box-cona {
+				width: 100%;
+
+				position: absolute;
+				bottom: 288rpx;
+				display: flex;
+				justify-content: space-between;
+				padding: 0 40rpx;
+
+				view {
+					width: 140rpx;
+					height: 140rpx;
+					line-height: 140rpx;
+					border-radius: 50%;
+					text-align: center;
+					font-size: 37rpx;
+					color: #fff;
+					background: rgb(57, 57, 57);
+					margin: 0 auto;
+
+				}
+
+				view:hover {
+					background: #fff !important;
+					color: #333;
+				}
+			}
+
+			.popup_box-conb {
+				width: 100%;
+				height: 244rpx;
+				position: absolute;
+				bottom: 0;
+
+				image {
+					width: 100%;
+					height: 100%;
+				}
+			}
+		}
+	}
+
+
+	@keyframes blink {
+		0% {
+			opacity: 1;
+		}
+
+		50% {
+			opacity: 0;
+		}
+
+		100% {
+			opacity: 1;
+		}
+	}
+
+	.flex_c {
+		display: flex;
+		justify-content: space-between;
+
+
+		.flex_c_img {
+			width: 62rpx;
+			height: 62rpx;
+			margin-top: 20rpx;
+
+			image {
+				width: 100%;
+				height: 100%;
+			}
+		}
+
+		.flex_c_txt {
+			width: 450rpx;
+			margin-top: 15rpx;
+
+			.con {
+				width: 450rpx;
+				height: 70rpx;
+				line-height: 70rpx;
+
+				text-align: center;
+				background: #F5F5F5;
+				border-radius: 10rpx;
+			}
+		}
+	}
+
+	.flex_d {
+		height: 300rpx;
+		padding: 49rpx 50rpx;
+		display: flex;
+
+		view {
+			width: 136rpx;
+			height: 177rpx;
+
+			margin-right: 60rpx;
+
+			image {
+				width: 100%;
+				height: 100%;
+			}
+		}
+	}
+
+	.blinking-box {
+		display: flex;
+
+
+		font-size: 30rpx;
+		font-family: Microsoft YaHei;
+		font-weight: 400;
+		color: #182534;
+
+
+		image {
+			width: 40rpx;
+			height: 40rpx;
+			margin: auto 0;
+			margin-right: 30rpx;
+		}
+
+
+	}
+
+	.wrapper {
+		height: auto !important;
+	}
+
+	.contenta {
+		width: 710rpx;
+		height: 70rpx;
+		background-color: #fff;
+		display: flex;
+
+		margin-top: 10rpx;
+		padding-top: 12rpx;
+
+		.contenta-img {
+			width: 46rpx;
+			height: 46rpx;
+
+			image {
+				width: 100%;
+				height: 100%;
+			}
+
+			margin-left:34rpx;
+		}
+
+		.contenta-imga {
+			width: 37rpx;
+			height: 39rpx;
+			margin-top: 5rpx;
+
+			image {
+				width: 100%;
+				height: 100%;
+			}
+
+			margin-left:34rpx;
+		}
+
+		.contenta-ai {
+			width: 48rpx;
+			height: 48rpx;
+
+			image {
+				width: 100%;
+				height: 100%;
+			}
+		}
+	}
+
+
+
+	/* 加载数据提示 */
+	.tips {
+		position: fixed;
+		left: 0;
+		top: var(--window-top);
+		width: 100%;
+		z-index: 9;
+		background-color: rgba(0, 0, 0, 0.15);
+		height: 72rpx;
+		line-height: 72rpx;
+		transform: translateY(-80rpx);
+		transition: transform 0.3s ease-in-out 0s;
+
+		&.show {
+			transform: translateY(0);
+		}
+	}
+
+	.box-1 {
+		width: 100%;
+		height: 100%;
+		// min-height: calc(100vh - 100rpx);
+		padding-bottom: 200rpx;
+		box-sizing: content-box;
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-end;
+
+		// /* 兼容iPhoneX */
+		// margin-bottom: 0;
+		// margin-bottom: constant(safe-area-inset-bottom);
+		// margin-bottom: env(safe-area-inset-bottom);
+	}
+
+	.multiline-text {
+		white-space: pre-line;
+		/* 或 white-space: pre-wrap; */
+	}
+
+	.box-2 {
+		position: fixed;
+		left: 0;
+		width: 100%;
+		bottom: 0;
+		height: auto;
+		z-index: 2;
+		border-top: #e5e5e5 solid 1px;
+		box-sizing: content-box;
+		background-color: #fff;
+		transform: translateY(0);
+		/* 初始化 transform 属性 */
+		transition: transform 0.3s ease;
+		/* 添加过渡效果 */
+
+		/* 兼容iPhoneX */
+		padding-bottom: 0;
+		padding-bottom: constant(safe-area-inset-bottom);
+		padding-bottom: env(safe-area-inset-bottom);
+
+		>view {
+			padding: 20rpx 20rpx;
+
+		}
+
+		.content {
+			background: #F5F5F5;
+			height: 70rpx;
+			padding: 0 20rpx;
+			border-radius: 6rpx;
+			font-size: 28rpx;
+		}
+
+		.send {
+			background-color: #2573fb;
+			color: #fff;
+			height: 64rpx;
+			margin-left: 20rpx;
+			border-radius: 6rpx;
+			padding: 0;
+			width: 120rpx;
+			line-height: 62rpx;
+
+			&:active {
+				background-color: #1573fb;
+			}
+		}
+	}
+
+	.talk-list {
+		padding-bottom: 20rpx;
+
+		.talk-list-con {
+			width: 714rpx;
+			height: 320rpx;
+			background: #FFFFFF;
+			box-shadow: 5rpx 6rpx 0px 0px rgba(0, 0, 0, 0.02);
+			border-radius: 8rpx;
+
+			margin: 0 auto;
+			margin-top: 50rpx;
+			padding: 36rpx 32rpx;
+
+			.talk-list-con-title {
+				font-size: 32rpx;
+				font-family: Microsoft YaHei;
+				font-weight: 400;
+				color: #006CFF;
+				margin-bottom: 33rpx;
+			}
+
+			.talk-list-con-title1 {
+				font-size: 28rpx;
+				font-family: Microsoft YaHei;
+				font-weight: 400;
+				color: #182534;
+				line-height: 48rpx;
+				margin-bottom: 20rpx;
+			}
+
+			.talk-list-con-title2 {
+				display: flex;
+				font-size: 30rpx;
+				font-family: Microsoft YaHei;
+				font-weight: 400;
+				color: #182534;
+
+				view {
+					display: flex;
+					justify-content: space-between;
+					padding: 0 20rpx;
+					width: 468rpx;
+					height: 70rpx;
+					line-height: 70rpx;
+					text-align: center;
+					background: #E2EDF9;
+					border-radius: 12rpx;
+
+					image {
+						width: 55rpx;
+						height: 55rpx;
+						margin-top: 10rpx;
+					}
+
+				}
+			}
+		}
+
+		/* 消息项，基础类 */
+		.item {
+			padding: 20rpx 20rpx 0 20rpx;
+			align-items: flex-start;
+			align-content: flex-start;
+			color: #333;
+
+			.pic {
+				width: 92rpx;
+				height: 92rpx;
+				border-radius: 50%;
+
+			}
+
+			.content {
+				padding: 20rpx;
+				border-radius: 4px;
+				max-width: 580rpx;
+				word-break: break-all;
+				line-height: 52rpx;
+				position: relative;
+			}
+
+			/* 收到的消息 */
+			&.pull {
+				.content {
+					min-width: 20rpx;
+					min-height: 52rpx;
+					margin-left: 32rpx;
+					background-color: #fff;
+
+					&::after {
+						content: '';
+						display: none;
+						width: 0;
+						height: 0;
+						border-top: 16rpx solid transparent;
+						border-bottom: 16rpx solid transparent;
+						border-right: 20rpx solid #fff;
+						position: absolute;
+						top: 30rpx;
+						left: -18rpx;
+					}
+				}
+			}
+
+			/* 发出的消息 */
+			&.push {
+				/* 主轴为水平方向，起点在右端。使不修改DOM结构，也能改变元素排列顺序 */
+				// flex-direction: row-reverse;
+
+				.content {
+					min-width: 20rpx;
+					min-height: 52rpx;
+					margin-left: 32rpx;
+					background-color: #2573fb;
+					color: #fff;
+
+					&::after {
+						content: '';
+						display: block;
+						width: 0;
+						height: 0;
+						border-top: 16rpx solid transparent;
+						border-bottom: 16rpx solid transparent;
+						border-left: 20rpx solid #2573fb;
+						position: absolute;
+						top: 30rpx;
+						left: -20rpx;
+						transform: rotate(180deg);
+					}
+				}
+			}
+		}
+	}
+
+	.bing-math {
+		margin: 0 !important;
+		padding: 0 !important;
+	}
+
+	.talk-list .item.pull .content {
+		max-width: 590px;
+		margin-left: 0px;
+	}
+
+	.placeholder {
+		width: 100vw;
+		background-color: #1573fb;
+		// background-color: transparent;
+		// transform: translateY(0); /* 初始化 transform 属性 */
+		// transition: transform 0.3s ease; /* 添加过渡效果 */
+	}
+
+	.downsocket {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background-color: #2573fb !important;
+		color: #fff !important;
+	}
+</style>
\ No newline at end of file
diff --git a/static/icon/fb1.png b/static/icon/fb1.png
new file mode 100644
index 0000000000000000000000000000000000000000..786e3f31f35939f0542352f9846ea2b19a60fce6
GIT binary patch
literal 446
zcmV;v0YUzWP)<h;3K|Lk000e1NJLTq001cf000dL1^@s6G+js500001b5ch_0Itp)
z=>Px$cu7P-R7gw3)jvyIQ4j_2--3mO5DU8~u`oo-6oO3(L5PK*Mba6PPCvpz0%-(4
zKq@O2)J{;rU;-9)QLs=DOsZG}B4}ZmLWqpqh3CV4`%l)}J>JYY=g!PMQ_}wF#T;fZ
zjQIY8eXL@uU5Zkh0I!pfz5<+Gyu*2`Tv?INFoAyj#CKd308e8bT@8>2-YZ-d#J<2J
zdT^5X|3!RN<Y#=!5r)87e7y%aTKYS+wgHW|A<_D%X#T_{zhFN1BSz*84npL6RBA9?
zV-!cZ{~xi?sJcwtK$_QV>LSWDu%b}UL*!{1_*$IzRbVHzrdgd)$-t|gXzkzB;#yec
z5c$6j(;miiF+VWYtisgNrA*#n8k-`h%41iu8yAgK@&lF&X7XivZP}1c&1AU2NWIq`
zGqnAPulsE*g{)78KZZ{|#V>rT<C9a^ctD?wZ52NK1jmRaaK|TGcmua7aj6w_Y~!>l
oG`qWplHfBOVhx+E0$1~H05~#E!`+b`&j0`b07*qoM6N<$g2)HOl>h($

literal 0
HcmV?d00001

diff --git a/static/icon/fb2.png b/static/icon/fb2.png
new file mode 100644
index 0000000000000000000000000000000000000000..a9534065e79c604528fc2cdb79dba242eae84170
GIT binary patch
literal 1119
zcmV-l1fctgP)<h;3K|Lk000e1NJLTq001Tc001Hg1^@s6Gpwt)00001b5ch_0Itp)
z=>Px(8A(JzR9Hv7m|Lh-RTPFlGo&IdE7G#aO3fY&GKn(s5@l9|X^7^d<%?ZJp$F5n
zjKmviA_VpzLWx8{C1QeNX{9JZT82eh5N2gw$h?=ycbHRVleO1gOSg@;bN0CWYmI;0
zRy*oTJKzrBUf?d^R-ij@6>tS`0QeR70oV>~0@ea2>x42$RWbMrz*9iiszyQY6tEJQ
z3v8}pTLoBOU<xpzio*&z0-O}yXhZcfV3z?ife96Y)m8Zim=8<`juja<0@e-q2=Hwc
z$=|^Gz#UWbJFpMfAJW_f=m87?9s~4OBwK-Dz~21FB4D=w8-eQ!JRJmP1B)6xX#)VG
z!rRw(E<XYTfuGYKa$pkt^8!$kSK`h9PSnj?qCXXQ1!$l7u!61fKjQyWV3z}1fZH=8
z%YQhq;XDAPrXzu6z@?c#v-AKUO-O;6p64^=Ux538-7NwY-3$&K_GP4EwJu13^#QhJ
zK#v0V0bjKkRCG5ESd#hv3%J>o#y7SCkf5o&4#<fMDXV}-vjDb`83MZj_$ec#Wb6g}
z+XR(5&jAksy@BJvcOgv{%i$*WwiRPvlIZ;=CV@Q*EY2K^2i`1ks-1k8SE6I}J`KFn
z1f2cy@l0oc0X_&#F8+2T4CJz*`x0QPtB6GZq(sqFn$lEW7T7KzZG4vPfD%VG-aS<i
z1s&hqHGsq}l8XTwcUqy#1!nc7J!L5{wj}V2z?>SuRP{l9;6~zlWM_!7L0}Hli;{n~
zRYi#t=Ucy;z+MBUmDsEab2X}L6WE_X#~Q#s3;nGQwr0TI1D;GAZWfqb-KG|0Au#cO
zPG#QDRtju2Ff;-3A@D>Au<HOvRaLRNuP!0Kew;e4>rv(kOinrRqxc5h<IAL#?V?lI
z<vJt*M+xkna4@7mB=?sk$XeN8^D4I(yTn=fJ<u}&VtVr#R)jN-BsbOD!mhS693Hlm
zW+TaN;P^{9?j#r%fqDJBkwiWXJQ&vJs$4o3JzL1DnW21N6M@-vU2*NuQQX5N<k_wA
zTq2j)+#N<$+T1?{25FNnif)$gW{$oA`d3IvUCb8O7r?cNq1?I?_&NvX-){lWWKo=@
zwhuwJLM%3K%QQRsoea#10rF$Sy~uOk%{3MGEZa)m8JRzb>y)cfzVF-lT~y_En-raI
zoq=`XwdRgp>O9}xZqhJQJ7ajoOZ2pfMjelwN5V33)~?aPdnK?u7!;+?bME~>UODkC
za41ofL!M&~hb7RDEk)ue8WZOAe||6fMBtv}=K((xq+PicJTqldLr%4wYq?bUsB%+q
zFuE0p0!@729cBKi0E_l^cDD}Oir>QO%EzI2T(g@UIfdkJ7SJ(bb96FzIs5VC#>~id
l+BV~5FOLM(XtgekcLr(s%Yx}q$(aBE002ovPDHLkV1kui{;B`~

literal 0
HcmV?d00001