digitalMen/pages/chat/chat.vue

<template>
	<view>
		<view style="color: #000;">
			<tn-nav-bar backgroundColor="#fff">{{ zhuangtai }}
			<!-- <view slot="right" class='tn-custom-nav-bar__back' @click="goBack"> -->
				<!-- #ifdef H5 -->
				<!-- <text class='tn-icon tn-icon-align' style="font-size: 42rpx;margin-right: 22rpx;"></text> -->
				<!-- #endif -->
			    <!-- #ifdef MP-WEIXIN -->
			    <!-- <text class='tn-icon tn-icon-align' style="font-size: 42rpx;font-weight: bold;color: #26b3a0d6;"></text> -->
			    <!-- #endif -->
			  <!-- </view> -->
			</tn-nav-bar>
			<view :style="{ height: tobheight + 'px' }"></view>
		</view>
		<view class="content" @touchmove="touchmove">
			<view class="msg-list">
				<view class="row">
					<block>
						<view class="other">
							<view class="left" v-if="appInfo.is_show_gpt_avatar_nickname == 1"
								@click="switchmodel = true">
								<u-image :src="
										homeTemplate.mode &&  homeTemplate.mode[0].img_file != null &&homeTemplate.mode[0].img_file.path
											? homeTemplate.mode[0].img_file.path
											: '/static/images/open.png'
									" mode="aspectFill" radius="5" width="40" height="40"></u-image>
							</view>
							<view class="right">
								<view class="username">
									<view class="name"></view>
									<view class="time">{{ homeTemplate.mode && homeTemplate.mode.length>0&& homeTemplate.mode[0].img_file != null && homeTemplate.mode[0].name
											?homeTemplate.mode[0].name :'ai问答机器人' }}</view>
								</view>
								<view class="bubble">
									<view class="content mytheme">
										<view style="font-size: 32rpx;">您可以点击下方示例直接提问......</view>
										<block v-for="(item, index) in homeTemplate.hot" :key="index">
											<view class="ask" @click="send(item.text)">{{ item.text }}</view>
										</block>
										<view @click="commontemplate" class="tn-flex align-center"
											style="justify-content: flex-end;margin-top: 15rpx;margin-bottom: 15rpx;">
											<view style="color: #9e9e9e;margin-right: 10rpx;">换一换</view>
											<u-icon name="reload" color="#9e9e9e" size="18"></u-icon>
										</view>
										<u-button size="small" @click="switchmodel = true" type="primary"
											text="切换角色"></u-button>
									</view>
								</view>
							</view>
						</view>
					</block>
				</view>
				<block v-for="(row, index) in talkList" :key="index" :id="'msg' + row.id">
					<view class="row">
						<block>
							<view class="my" v-if="row.fromid == userInfo.id">
								<view class="left">
									<view class="username">
										<view class="name">{{ row.nickname }}</view>
									</view>
									<view class="u-flex u-flex-nowrap justify-between" style="align-items: center;">
										<!-- v-if="row.content !='该问题已被隐藏!'" -->
										<view class="mycopy u-flex justify-center align-center">
											<u-icon  @click="copyText(index)"
												name="file-text" top="1" color="#fff" size="18"></u-icon>
										</view>
										
										<view v-if="row.type == 1" class="bubble mytheme" style="color: #fff;">
											<!-- <rich-text :nodes="row.content" @longtap="copy" :data-text="row.content"
												selectable="true"></rich-text> -->
											<!-- <zero-markdown-view :themeColor="themeColor"
												:markdown="row.content"></zero-markdown-view> -->
												<u-parse :content="row.content" scrollTable :tag-style="parse_style" selectable style="width: 100%;"></u-parse>
											<!-- <mp-html :content="row.content" /> -->
										</view>
									</view>

								</view>
								
								<view class="right">
									<u-image :src="row.avatar ? row.avatar : '/static/images/head.jpg'" mode="aspectFill"
										radius="5" width="42" height="42"></u-image>
								</view>
							</view>
							<!-- GPT -->
							<view class="other" v-if="row.fromid != userInfo.id">
								<view class="left" v-if="appInfo.is_show_gpt_avatar_nickname == 1"
									@click="switchmodel = true">
									<u-image :src="row.avatar" mode="aspectFill" radius="5" width="42"
										height="42"></u-image>
								</view>
								<view class="right">
									<view class="username" v-if="appInfo.is_show_gpt_avatar_nickname == 1">
										<view class="name"></view>
										<view class="time">{{ row.nickname }}</view>
									</view>
									<view v-if="row.type == 1" class="bubble"
										style="display: block;position: relative;">
										<view class="mytheme">

											<!-- <zero-markdown-view
												v-if="(row.done && row.content.indexOf('```') != -1) || (row.done && row.content.indexOf('/*') != -1 || row.content.indexOf('---') != -1)"
												:themeColor="themeColor" :markdown="row.content"></zero-markdown-view>
											<text v-else @longtap="copy"
												:data-text="row.content">{{ row.content.replace(/^\s+|\s+$/g, '') }}</text>
											<text v-if="row.content == '正在思考中...'">{{ second }}s</text>
											<text class="flash" v-if="row.show_flash">│</text> -->
											<view class="u-flex align-center flex-wrap">
												<text
													v-if="row.content == '正在思考中...'||row.content == '请等我几秒钟,正在输入回答...'">{{row.content}}</text>
												<!-- <zero-markdown-view v-else :themeColor="themeColor"
													:markdown="row.content"></zero-markdown-view> -->
													<u-parse v-else :content="row.content" :tag-style="parse_style" scrollTable selectable style="width: 100%;"></u-parse>
												<!-- <mp-html v-else :content="row.content" /> -->
												<text v-if="row.content == '正在思考中...'">{{ second }}s</text>
												<view
													:style="{marginLeft: row.content == '正在思考中...'||row.content == '请等我几秒钟,正在输入回答...'?20+'rpx':0+'rpx',marginTop: row.content != '正在思考中...'||row.content != '请等我几秒钟,正在输入回答...'?10+'rpx':0+'rpx'}"
													v-if="row.show_flash">
													<view style="margin-top: -5rpx;">
														<u-loading-icon size="17" mode="circle" color="#00ca88" :duration="300"></u-loading-icon>
													</view>
													
												</view>

											</view>
											
										</view>
										<view v-if="row.done && !row.donec" class="tn-flex align-center justify-between operate">
											<view @click="send(talkList[index-1].content)" hover-class="hoversubmit"
												class="tn-flex justify-center align-center dialogue" style="margin-right: 10px;">
												<u-icon name="reload" top="1" color="#fff" size="18"></u-icon>
												<!-- <view class="duplicate">复制回答</view> -->
											</view>
											<view class="tn-flex align-center">
												<view @click="copyText(index)" hover-class="hoversubmit"
													class="tn-flex justify-center align-center dialogue">
													<u-icon name="file-text" top="1" color="#fff" size="18"></u-icon>
													<!-- <view class="duplicate">复制回答</view> -->
												</view>
												
												<view @click="createPoster(index)" hover-class="hoversubmit"
													class="tn-flex justify-center align-center dialogue" style="margin-left: 10px;">
													<u-icon name="share-square" top="1" color="#fff" size="18"></u-icon>
													<!-- <view class="share">分享对话</view> -->
												</view>
												
												<view v-if="appInfo.is_vop&&appInfo.is_vop == 1" class="eliseaudio">
													<elise-audio @aittsjob="aittsjob" :audioId="'audioId'+index"
														:url="row.audiolink" audioColor="#68d7bb" :durationS="5"
														:content="row.backups" :index="index" :cancel="cancel"></elise-audio>
												</view>
											</view>
											
										</view>
									</view>
									<!-- <view v-if="row.type == 2" class="bubble"
										style="display: block;position: relative;">
										<view class="u-flex align-center">
											<text style="margin-right: 20rpx;">{{row.content}}</text>
											<u-loading-icon size="17"></u-loading-icon>
										</view>
									</view> -->
									<!-- <view v-if="row.type == 3" class="bubbleimg">
										<image @click="preview(index)" :src="row.img" mode="aspectFill"></image>
									</view> -->
									
								</view>
							</view>
						</block>
					</view>
				</block>
			</view>
			<view class="bottomheight"></view>
			<view class="env"></view>
		</view>
		<view class="box-2">
			<view class="flex_col">
				<view class="flex_grow">
					<!-- height="45" -->
					<u--textarea height="45" @blur="blurinput" @focus="focusinput" fixed :showConfirmBar="false"
						v-model="content" :placeholder="'请输入您的问题...'"
						:maxlength="-1" border="none" :cursorSpacing="80"></u--textarea>
				</view>
				<!-- <u-icon  name="close-circle-fill" color="#ededed"
					size="20"></u-icon> -->
				<u-icon v-if="appInfo.is_vop&&appInfo.is_vop == 1" @click="openmicrophone" name="mic" color="#ff9800"
					size="30"></u-icon>
				<button class="send"
					@click.prevent="send(content)">{{'发送'}}</button>
			</view>
		</view>
		<u-popup :show="showexpand" zIndex="1" mode="bottom" bgColor="transparent" :overlay="false"
			@close="showexpand = false">
			<scroll-view class="scroll-view_H" scroll-x="true">
				<view class="expand u-flex">
					<view @click="showsheet = true" class="surplus u-flex align-center">
						<u-icon name="grid-fill" color="#26b3a0d6" size="18" top="1"></u-icon>
						<!-- <view class="item">
							{{currentmodel}}{{userData.is_validity>0&&!this.showchat4&&userData.vip_info&&userData.vip_info.gpt35_times>0?' - 今日限量：'+userData.vip_info.gpt35_used+'/'+userData.vip_info.gpt35_times:''}}
						</view> -->
						<view v-if="showchat4" class="item">{{currentmodel}}{{userData.vip_info&&userData.is_validity>0?(userData.vip_info.gpt4_type == 'time'?' - 今日':' - 会员')+'剩余提问:'+(userData.vip_info.gpt4_times == -1?'无限量':userData.vip_info.gpt4_times-userData.vip_info.gpt4_used+'次'):''}} ></view>
						<view v-else class="item">{{currentmodel}}{{userData.vip_info&&userData.is_validity>0?(userData.vip_info.gpt35_type == 'time'?' - 今日':' - 会员')+'剩余提问:'+(userData.vip_info.gpt35_times == -1?'无限量':userData.vip_info.gpt35_times-userData.vip_info.gpt35_used+'次'):''}} ></view>
					</view>
					<!-- <block v-if="!showchat4"> -->
						<navigator @click="getroute"
							:url="isLogin ?'/pages/user/member/member?id=2':'/pages/user/signin'"
							class="surplus u-flex align-center"
							v-if="appInfo.time_member && appInfo.time_member == 1">
							<u-icon name="clock-fill" color="#607d8b" size="18" top="1"></u-icon>
							<view class="item">
								会员套餐:{{ userData.is_validity == 1 ? (userData.vip_time == 9999?'永久':userData.countdown+'天') : '0天' }}
							</view>
						</navigator>
					<!-- </block> -->
					<block v-if="appInfo.number_member">
						<navigator @click="getroute"
							:url="isLogin ?'/pages/user/member/member?id=1':'/pages/user/signin'"
							class="surplus u-flex align-center" v-if="appInfo.number_member == 1">
							<u-icon name="question-circle-fill" color="#ff9800" size="18" top="1"></u-icon>
							<view class="item">
								{{appInfo.number_alias?appInfo.number_alias+':':'点数:'}}{{ userData.coin ? userData.coin : 0 }}
							</view>
						</navigator>
					</block>
					<block v-else>
						<navigator @click="getroute"
							:url="isLogin ?'/pages/user/member/member?id=1':'/pages/user/signin'"
							class="surplus u-flex align-center">
							<u-icon name="question-circle-fill" color="#ff9800" size="18" top="1"></u-icon>
							<view class="item">
								{{appInfo.number_alias?appInfo.number_alias+':':'点数:'}}{{ userData.coin ? userData.coin : 0 }}
							</view>
						</navigator>
					</block>
						
					<!-- <view class="surplus">分享好友赚佣金</view> -->
					<navigator @click="getroute" :url="isLogin ?'/pages/user/member/member?id=3':'/pages/user/signin'"
						class="surplus u-flex align-center">
						<u-icon name="more-circle-fill" color="#2979ff" size="18" top="1"></u-icon>
						<view class="item">免费领{{appInfo.number_alias?appInfo.number_alias:'点数'}}</view>
					</navigator>
					<view class="surplus u-flex align-center" style="background: #fff0;padding: 1rpx;">
					</view>
				</view>
			</scroll-view>
		</u-popup>
		<!-- <wike-skeleton count="4" type="user" v-if="homeTemplate.length === 0"></wike-skeleton> -->
		<u-no-network></u-no-network>
		<!-- <navigator v-if="is_commission == 1" class="neckBtn_view" url="/pages/user/commission/index">
			<text class="free_view">分享</text>
			赚佣金
		</navigator> -->
		<u-action-sheet @select="selectClick" :round="10" :actions="sheetlist" :title="titlesheet" :show="showsheet"
			safeAreaInsetBottom @close="showsheet = false" cancelText="关闭"></u-action-sheet>
		<!-- <u-popup :show="showPoster" mode="bottom" :round="10" safeAreaInsetTop @close="showPoster = false">
			<view class="poster">
				<wike-painter :board="posterObj" @success="posterSuccess" ref="painter"></wike-painter>
				<view class="footer-btn">
					<view class="" @click="showPoster = false">退出</view>
					<view class="save" @click="toSave">保存/分享</view>
				</view>
			</view>
		</u-popup> -->
		<u-popup :show="showPoster" mode="bottom" @close="showPoster = false">
			<scroll-view scroll-y="true" :style="{maxHeight: (posterheight) +'px'}">
				<wike-painter  :board="posterObj" @done="posterSuccess" ref="painter"></wike-painter>
				<view style="height: 78px;"></view>
				<view class="dygbhg" >
					<view class="whole" @click="showPoster = false">取消</view>
					<view class="distinguish" @click="toSave">保存/分享</view>
				</view>
			</scroll-view>
		</u-popup>
		<u-popup :show="soundrecording" mode="bottom" :round="20" safeAreaInsetTop @close="soundrecording = false">
			<view class="soundrecording u-flex justify-center">
				<view v-if="showlongpress" class="waveform">
					<image :src="'https://s1.voicecloud.cn/activity/imeVoiceShare/img/yuyin.gif'" mode="aspectFill">
					</image>
				</view>
				<view class="operation u-flex">
					<!-- <view class="affirm">
						<image src="/static/tf-speech-recognizer/cancel.png"></image>
					</view> -->
					<view @touchstart="startrecording" @touchend="stoprecording" class="longpress"
						hover-class="hoversubmit">
						<!-- <image disabled src="/static/tf-speech-recognizer/recording.png"></image> -->
						<u-icon name="mic" color="#fff" size="35"></u-icon>
					</view>
					<!-- <view class="affirm">
						<image src="/static/tf-speech-recognizer/confirm.png"></image>
					</view> -->
				</view>
				<view class="discriminate">长按识别语音</view>
			</view>
		</u-popup>
		<wike-loading-page :isLoading="isLoading"></wike-loading-page>
		<!-- 生成的图片 -->
		<u-popup type="center" mode="center">
			<view class="poster-img">
				<text @click="closePopup"></text>
				<!-- <image :src="path" mode="" @click="previewImg"></image> -->
				<!-- #ifdef H5 -->
				<view class="">长按图片保存到手机</view>
				<!-- #endif -->
				<!-- #ifndef H5 -->
				<view class="">点击图片保存到手机</view>
				<!-- #endif -->
			</view>
		</u-popup>
		<u-popup :show="switchmodel" @close="switchmodel = false" :round="15" closeable>
			<view class="select u-flex justify-center"><text>选择角色</text></view>
			<scroll-view scroll-y="true"
				:style="{ height: homeTemplate.mode&&homeTemplate.mode.length > 6 ? 700 + 'rpx' : 'auto' }">
				<block v-for="(item, index) in homeTemplate.mode" :key="index">
					<view class="u-flex justify-between model_view">
						<u-avatar
							:src="item.img_file != null&&item.img_file.path?item.img_file.path:'/static/images/open.png'"
							shape="square" mode="aspectFill" size="60"></u-avatar>
						<view class="modelname">
							<view class="name">{{ item.name }}</view>
							<view class="modeldetails">{{ item.intro }}</view>
						</view>
						<view @click="onselect(index)" class="modelselect"
							:style="{ background: selectornot == index ? '#9e9e9e' : '' }">
							{{ selectornot == index ? '已选择' : '选择' }}
						</view>
					</view>
				</block>
				<view style="height: 30rpx;"></view>
			</scroll-view>
		</u-popup>
		<wike-model v-if="signShow" :authorize="false" :title="signTitle" btnText="立即获取" @save="signSign"
			@close="signShow = false"></wike-model>
			<wike-modal-qrcode :qrcode="gzhqrcode" :showconcern="showconcern" @concernclose="concernclose"></wike-modal-qrcode>
	</view>
</template>

<script>
	const {
	        marked
	    } = require('marked');
	    import hljs from "highlight.js";
	    import "highlight.js/scss/atom-one-dark.scss";
	import {
		Socket
	} from 'dgram';
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	import {
		apiurl,
	} from '@/common/request/request';
	import {
		API_STEROOT,
	} from '@/common/request/request';
	import MumuRecorder from '@/uni_modules/mumu-recorder/components/mumu-recorder/mumu-recorder.vue';
	import eliseAudio from '@/components/elise-audio/elise-audio.vue';
	import {
		toPx,
		base64ToPath,
		pathToBase64,
		isBase64,
		sleep,
		getImageInfo
	} from '@/components/wike-painter/utils';
	// #ifdef H5
	import Recorder from 'recorder-core';
	import 'recorder-core/src/engine/wav'
	// #endif
	let down, delay;
	let interstitialAd = null,
		timer,
		time2,
		timingr;
	// const innerAudioContext = uni.createInnerAudioContext();
	const recorderManager = uni.getRecorderManager();
	export default {
		components: {
			MumuRecorder,
			eliseAudio,
			// #ifdef H5
			Recorder
			// #endif
		},
		data() {
			return {
				// API_ROOT: API_ROOT,
				signShow: false,
				signTitle: '',
				talkList: [],
				toid: 1,
				content: '',
				thecontent: '',
				image: '',
				// scrollTop: 999999,
				// scrollAnimation: false,
				// text1: ['您好，ChatGPT为您服务', '长按对话即可复制'],
				tobheight: 45,
				zhuangtai: 'AI智能问答机器人',
				platform: this.$platform.get(),
				// isFlash:false,
				showPoster: false,
				posterObj: {},
				switchmodel: false,
				selectornot: 0,
				// modeldata: [],
				qrcode: '',
				haddressurl: '',
				haddresssk: '',
				// scrollToView: '',
				question_index: 0,
				answer_index: 0,
				themeColor: '#007AFF',
				// codeBgColor: '#26B3A0',
				showexpand: true,
				second: 11,
				showanswer: false,
				h5question: '',
				followornot: true,
				// eights: false,
				spmplatform: 0,
				is_commission: 0,
				timing: 30,
				showcontext: true,
				showfetch: true,
				//倒计时
				showdirect: true,
				//通道
				thoroughfare: 0,
		
				//弹出录音
				soundrecording: false,
				//是否长按
				showlongpress: false,
				//音频
				innerAudioContextsrc: '',
				//取消音频加载
				cancel: false,
				//第一次录
				firstrecording: 0,
				//加载
				isLoading: true,
				//模型
				showsheet: false,
				//当前模型
				currentmodel: '',
				titlesheet: '切换模型',
				//是否为gpt4模型
				showchat4: false,
				//模型数据
				// #ifdef MP-WEIXIN
				sheetlist: [{
						index: 1,
						name: 'ChatGPT 3.5',
						subname: "高效沟通·简单提问",
						color: '#26b3a0d6',
						disabled: false
					},
				],
				// #endif
				// #ifdef H5
				sheetlist: [

					{
						index: 0,
						name: 'ChatGPT 4.0',
						subname: "超级高效沟通·简单提问",
						disabled: false
					},

					{
						index: 1,
						name: 'ChatGPT 3.5',
						subname: "高效沟通·简单提问",
						color: '#26b3a0d6',
						disabled: false
					},
				],
				// #endif
				// 消耗
				plan: {},
				chatgpturl: '',
				showconcern:false,
				gzhqrcode:'',
				posterheight:'',
				parse_style: {
				                   // 字符串的形式
								   p: 'margin-bottom:0rpx;',
				                   // 一级标题
				                   	h1: `
				                   margin:25px 0;
				                   font-size: 24px;
				                   text-align: center;
				                   font-weight: bold;
				                   color: #00ca88;
				                   padding:3px 10px 1px;
				                   border-bottom: 2px solid #00ca88;
				                   border-top-right-radius:3px;
				                   border-top-left-radius:3px;
				                   `,
				                   // 二级标题
				                   	h2: `
				                   margin:40px 0 20px 0;	
				                   font-size: 20px;
				                   text-align:center;
				                   color:#00ca88;
				                   font-weight:bolder;
				                   padding-left:10px;
				                   border:1px solid #00ca88;
				                   `,
				                   // 三级标题
				                   	h3: `
				                   margin:30px 0 10px 0;
				                   font-size: 18px;
				                   color: #00ca88;
				                   padding-left:10px;
				                   border-left:3px solid #00ca88;
				                   `,
				                   // 四级标题
				                   	h4: `
				                   margin:20px 0 10px 0;
				                   font-size: 16px;
				                   color: #00ca88;
				                   padding-left:10px;
				                   border-left:3px solid #00ca88;
				                   `,
				                   // 五级标题
				                   	h5: `
				                   margin:10px 0 10px 0;
				                   font-size: 14px;
				                   color: #00ca88;
				                   padding-left:10px;
				                   border-left:3px solid #00ca88;
				                   `,
				                   // 六级标题
				                   	h6: `
				                   margin:10px 0 10px 0;
				                   font-size: 12px;
				                   color: #00ca88;
				                   padding-left:10px;
				                   border-left:3px solid #00ca88;
				                   `,
				                   ul: 'margin:24rpx;color: #555;',
				                   ol: 'margin:12rpx;color:#555;',
				                   li: `
				                   margin: 12rpx 0;
				                   color: #555;
				                   `,
								   // 链接
								   	a: `
								   color: #00ca88;`,
								   // 加粗
								   	strong: `
								   font-weight: border;
								   color: #00ca88;
								   `,
								   // 斜体
								   	em: `
								   color: #00ca88;
								   letter-spacing:0.3em;
								   `,
				                   // code: 'width:90%;',
				                  
				                  //  pre: 'white-space: pre;overflow: auto;background: #2d2d2d;border-radius: 4rpx;border: none;color: #ccc;margin: 12rpx;padding:20rpx;',
				                   // 'pre code': 'margin:0;padding:0;background: none;color: #ccc;',
				                   blockquote: 'padding: 15rpx;margin:0 0 12rpx 0;border-radius: 6rpx;color: #555;border-left: 4px solid #dddddd;',
				                   
								   hr: `height:1px;padding:0;border:none;text-align:center;background-image:linear-gradient(to right,rgba(248,57,41,0),${'#9e9e9e'},rgba(248,57,41,0));`,
				                   table: 'border-spacing:0;overflow:auto;min-width:100%;margin:10px 0;border-collapse: collapse;',
				                   th: 'background-color: whitesmoke;border: 1px solid #2d2d2d;padding:10rpx;',
				                   td: 'border: 1px solid #2d2d2d;padding:10rpx;',
								   pre: `
								   color: #c7254e;
								   padding: 20rpx;
								   border-radius: 5px;
								   white-space: pre;
								   overflow: auto;
								   margin:12rpx 0;
								   font-size:13px;
								   background: #2d2d2d;
								   `,
				               },
			};
		},
		computed: {
			...mapGetters(['appInfo', 'isLogin', 'userInfo', 'homeTemplate', 'userData'])
		},
		watch: {
			appInfo: function(e) {
				let that = this;
				// uni.setNavigationBarTitle({
				// 	title: that.appInfo.site_name
				// });
				// console.log(that.appInfo.site_logo_path);
				// that.$base64.imageUrlToBase64(that.appInfo.site_logo_path)
			}
		},
		onReady() {
			let that = this;
			// #ifdef MP-WEIXIN
			clearTimeout(timer);
			// 在适合的场景显示插屏广告
			timer = setTimeout(function() {
				// 在页面onLoad回调事件中创建插屏广告实例
				if (wx.createInterstitialAd && that.appInfo.interstitial_status == 1) {
					interstitialAd = wx.createInterstitialAd({
						adUnitId: that.appInfo.interstitial_id
					});
					interstitialAd.onLoad(() => {});
					interstitialAd.onError(err => {});
					interstitialAd.onClose(() => {
						if (that.appInfo.interstitial_infinite_status && that.appInfo
							.interstitial_infinite_status == 1) {
							that.showInterstitial();
						} else {
							interstitialAd.show().catch(err => {
								console.error(err);
							});
						}
					});
					interstitialAd.show().catch(err => {});
				}
			}, 4000);
			// #endif
		},
		onLoad() {
			var that = this;
			if (that.platform == 'wxMiniProgram') {
				var menumtop = uni.getMenuButtonBoundingClientRect().top - uni.getSystemInfoSync().statusBarHeight;
				var paddingtop = uni.getSystemInfoSync().statusBarHeight + menumtop;
				that.tobheight = menumtop + paddingtop + uni.getMenuButtonBoundingClientRect().height;
			}
            this.posterheight = uni.$u.sys().windowHeight-this.tobheight
			if (that.$Route.query.chat4) {
				that.showchat4 = true
				this.sheetlist[1].color = '#000'
				this.sheetlist[0].color = '#26b3a0d6'
				if (this.$Route.query.showchat4) {
					// console.log(this.$Route.query.showchat4);
					// this.send(this.$Route.query.showchat4);
					// #ifdef H5
					this.h5question = this.$Route.query.showchat4;
					// this.eventsource()
					this.aigetAddress();
					// #endif
				}

			}
			if (this.$Route.query.question) {
				if (this.$Route.query.selectornot) {
					this.selectornot = this.$Route.query.selectornot
				}
				// #ifdef MP-WEIXIN
				this.send(this.$Route.query.question);
				// #endif
				// #ifdef H5
				this.h5question = this.$Route.query.question;
				// this.eventsource()
				this.aigetAddress();
				// #endif
			}
			this.spmplatform = ['H5', 'wxOfficialAccount', 'wxMiniProgram', 'App'].indexOf(this.platform) + 1;
			this.followornot = true;
			// #ifdef H5
			this.toaigetAddress();
			// #endif
			this.isLoading = false
			this.initGpt();
			this.getCommissionSetting()
			this.onmessage();

			uni.onSocketError(function(res) {});
			// #ifdef MP-WEIXIN
			let self = this;
			recorderManager.onStop(function(res) {
				self.aiaudiocheck(res.tempFilePath)
			});
			// #endif
            this.initHighLight();
		},
		onShow: function() {
			if (this.isLogin) {
				this.getUserData();

			}
			this.getPlan();
            this.systemwechat()
		},
		onUnload() {
			this.followornot = false;
			clearInterval(time2);
			clearTimeout(timingr);
			uni.$emit('stop')
			if (this.$ws.socketStatus()) {
				this.$ws.completeClose();
			}
		},
		onHide() {
			if (this.$ws.socketStatus()) {
				this.$ws.completeClose();
			}
		},
		onReachBottom() {},
		methods: {
			...mapActions(['getUserInfo', 'showAuthModal', 'getUserData']),
			systemwechat(){
				this.$http('conf.getGroupConf', { group: 'system.wechat' }).then(res => {
					if (res.code == 0) {
						this.gzhqrcode = res.data.qrcode_path
						const focuson = uni.getStorageSync('focuson');
						// console.log(focuson);
						if(!focuson){
							if(this.gzhqrcode){
								if(this.isLogin&&this.appInfo.is_show_logged_qrcode == 1  ){
									this.showconcern = true
								}
							}
						}
					}
					})
			},
			initHighLight() {
			                hljs.configure({
			                    useBR: true,
			                    tabReplace: " ",
			                });
			                marked.setOptions({
			                    renderer: new marked.Renderer(),
			                    gfm: true,
			                    tables: true,
			                    breaks: false,
			                    pedantic: false,
			                    highlight: function(code, lang) {
			                        if (lang && hljs.getLanguage(lang)) {
			                            return hljs.highlight(lang, code, true).value;
			                        } else {
			                            return hljs.highlightAuto(code).value;
			                        }
			                    },
			                });
			            },
			concernclose(){
				this.showconcern = false
			},
			// 角色角色初始化
			switcmode() {

				// #ifdef MP-WEIXIN
				this.zhuangtai = this.appInfo.site_name ? this.appInfo.site_name :
					'AI问答机器人';
				// #endif
				// #ifdef H5
				uni.setNavigationBarTitle({
					title: this.appInfo.site_name ? this.appInfo.site_name : 'AI问答机器人'
				});
				this.zhuangtai = this.homeTemplate.mode && this.homeTemplate.mode.length >
					0 ? this.homeTemplate.mode[this
						.selectornot].name : 'AI问答机器人';
				// #endif
				
				this.Audio()
				this.$nextTick(() => {
					// 清空内容框中的内容
					this.content = '';
					uni.pageScrollTo({
						scrollTop: 99999,
						duration: 300
					});
				});
			},
			//选择模型
			selectClick(index) {
				for (var a = 0; a < this.sheetlist.length; a++) {
					this.sheetlist[a].color = '#000'
				}
				// #ifdef H5
				this.sheetlist[index.index].color = '#26b3a0d6'
				// #endif
				// #ifdef MP-WEIXIN
				this.sheetlist[index.index - 1].color = '#26b3a0d6'
				// #endif
				if (index.index == 0) {
					this.showchat4 = true
					
				} else {
					
					this.showchat4 = false
				}
				this.switcmode()
				this.getcurrentmodel()
			},
			//开始录音的方法
			uploadRecord() {
				// 开始录音
				if (!this.rec) {
					uni.showToast({
						title: '未打开录音权限'
					})
					return;
				}
				this.rec.start();
				this.showlongpress = true
			},
			//结束录音的方法
			h5btn_sub_stop() {
				var This = this;
				var rec = This.rec;
				This.rec = null;
				if (!rec) {
					uni.showToast({
						title: '未打开录音'
					})
					return;
				}
				rec.stop(function(blob, duration) {
					var reader = new FileReader();
					reader.addEventListener("load", function() {
						if (reader.result.length > 100) {
							This.he_show = true
						}
					}, false);
					reader.readAsDataURL(blob);
					// console.log(blob,duration,'blob')
					let blobURL = window.URL.createObjectURL(blob)
					// console.log(blobURL, '--------')
					This.aiaudiocheck(blobURL)
				}, function(s) {
					This.showlongpress = false
				}, true); //自动close
			},
			//登录
			getroute() {
				if (!this.isLogin) {
					uni.setStorageSync('route', '/pages/chat/chat');
				}
				this.Audio()
			},
			//关闭语音输出
			Audio() {
				uni.$emit('stop')
			},
			//语音识别
			aiaudiocheck(e) {
				var that = this;
				// console.log(e, '5');
				uni.showLoading({
					title: '识别中'
				})
				uni.uploadFile({
					url: apiurl('ai/recognizer'),
					filePath: e,
					name: 'speech',
					header: {
						platform: that.platform
					},
					success: res2 => {
						uni.hideLoading();
						let a = JSON.parse(res2.data);
						if (a.code == 0) {
							uni.showToast({
								title: '识别成功',
							})
							this.content += a.data.result[0]
							this.thecontent += a.data.result[0]
						} else {
							uni.showToast({
								title: '识别失败',
								icon: 'none'
							})
						}
					}
				});
			},
			//语音输入
			openmicrophone() {
				var that = this;
				this.Audio()
				this.cancel = true
				if (!this.isLogin) {
					uni.navigateTo({
						url: '/pages/user/signin'
					});
					uni.setStorageSync('route', '/pages/chat/chat');
					return;
				}
				// #ifdef H5
				let This = this;
				let rec = This.rec = Recorder({
					type: "wav", // wav格式, 需要使用的type类型，需提前把格式支持文件加载进来
					bitRate: 16, // 比特率kbps，越大音质越好
					sampleRate: 16000, // 采样率hz，每秒音波震动次数，越大细节越丰富
					onProcess: function(buffers, powerLevel, duration, sampleRate) {
						if (duration > 60000) {
							This.h5btn_sub_stop()
							This.showlongpress = false
							This.soundrecording = false
						}
					} //录音实时回调，大约1秒调用12次回调
				});
				rec.open(function() {
					// console.log('打开成功：');
					// 渲染音频波形图
					This.soundrecording = true
				}, function(msg, isUserNotAllow) {
					uni.showToast({
						title: '麦克风已拒绝打开',
						icon: 'none'
					})
					// 浏览器不支持录音、用户拒绝麦克风权限、或者非安全环境（非https、file等 
					// console.log((isUserNotAllow ? "UserNotAllow，" : "") + "无法录音:" + msg);
				});
				// #endif
				// #ifdef MP-WEIXIN
				uni.getSetting({
					success: (res) => {
						if (res.authSetting['scope.record'] == false) {
							uni.showModal({
								confirmText: '去打开',
								content: '请先开启麦克风授权',
								title: '提示',
								confirmColor: '#26B3A0',
								success(res) {
									// console.log(res);
									if (res.confirm) {
										uni.openSetting({
											success: function(ress) {
												// console.log(ress);
											}
										});
									}
								}
							})
							return false
						} else {
							uni.authorize({
								scope: 'scope.record',
								success: (res) => {
									that.soundrecording = true
								},
								fail: (res) => {
									uni.showToast({
										title: '麦克风打开失败',
										icon: 'none'
									})
								}
							})
						}

					},
				})
				// #endif
			},
			startrecording() {
				// console.log('开始录音');
				// #ifdef H5
				// this.$refs.recorder.start()
				this.uploadRecord()
				// #endif
				// #ifdef MP-WEIXIN
				recorderManager.start({
					sampleRate: 16000,
					numberOfChannels: 1,
					format: 'aac',
					duration: 60000
				})
				this.showlongpress = true
				// #endif
			},
			stoprecording() {
				// console.log('停止录音');
				// #ifdef H5
				// this.$refs.recorder.stop()
				this.h5btn_sub_stop()
				// #endif
				// #ifdef MP-WEIXIN
				recorderManager.stop();
				// #endif
				this.showlongpress = false
				this.soundrecording = false
			},
			//语音输出
			aittsjob(res) {
				this.talkList[res.index].audiolink = res.speech_url
			},

			//ai绘画信息
			initGpt() {
				// console.log(this.homeTemplate.mode);
				// #ifdef MP-WEIXIN
				this.zhuangtai = this.appInfo.site_name ? this.appInfo
					.site_name :
					'AI问答机器人';
				// #endif
				// #ifdef H5
				uni.setNavigationBarTitle({
					title: this.appInfo.site_name ? this.appInfo.site_name : 'AI问答机器人'
				});
				this.zhuangtai = this.homeTemplate.mode && this.homeTemplate.mode.length >
					0 ? this
					.homeTemplate.mode[this
						.selectornot].name : 'AI问答机器人';
				// #endif				
				this.commonqrcodePath();
				//
				// this.onmessage();
			},

			// 关闭跟随
			touchmove() {
				this.followornot = false;
			},
			// 是否显示分销按钮
			getCommissionSetting() {
				this.$http('conf.getGroupConf', {
					group: 'system.commission'
				}).then(res => {
					if (res.code == 0) {
						this.is_commission = res.data.is_commission
					}
				});
			},
			// 上下文倒计时
			getcontext() {
				var that = this;
				that.timing--;
				// console.log(that.timing);
				if (that.timing == 0) {
					// console.log('关闭上下文定时器');
					clearTimeout(timingr);
					that.timing = that.appInfo.text_expire_time ? Number(that.appInfo.text_expire_time) :
						30;
					// console.log('取消下文关联');
					that.showcontext = false
					return;
				}
				timingr = setTimeout(() => {
					that.getcontext();
				}, 1000);
			},
			// 监听WebSocket是否打开
			waitWss() {
				return new Promise((resolve, reject) => {
					uni.onSocketOpen(function(res) {
						// console.log('WebSocket连接已打开！');
						resolve(1);
					});
				});
			},
			// 监听WebSocket是否关闭
			waitClose() {
				return new Promise((resolve, reject) => {
					uni.onSocketClose(function(res) {
						// console.log('WebSocket 已关闭！');
						resolve(1);
					});
				});
			},
			// fetch模式url
			aigetAddress() {
				var that = this;
				let uniacid = uni.getStorageSync("uniacid") || "";
				that.chatgpturl = API_STEROOT + 'api.ai/chatgpt?uniacid=' + uniacid;
				that.send(that.h5question);
			},
			// fetch模式url
			toaigetAddress() {
				var that = this;
				let uniacid = uni.getStorageSync("uniacid") || "";
				that.chatgpturl = API_STEROOT + 'api.ai/chatgpt?uniacid=' + uniacid;
			},
			// 海报二维码
			commonqrcodePath() {
				let spm = this.userInfo.id + '.1.0.' + this.spmplatform + '.1';
				this.$http('common.qrcodePath', {
					spm: spm
				}).then(res => {
					if (res.code == 0) {
						this.qrcode = res.data;
					}
				});
			},
			//长按复制
			copy(e) {
				var that = this;
				var text = e.currentTarget.dataset.text;
				uni.setClipboardData({
					data: text,
					success(res) {
						uni.getClipboardData({
							success(res) {}
						});
					}
				});
			},
			//输入框聚焦操作
			focusinput() {
				this.showexpand = false;
				this.$nextTick(() => {
					uni.pageScrollTo({
						scrollTop: 99999,
						duration: 300
					});
				});
				if (!this.isLogin) {
					uni.navigateTo({
						url: '/pages/user/signin'
					});
					uni.setStorageSync('route', '/pages/chat/chat');
					return;
				}
			},
			signSign() {
				uni.navigateTo({
					url: '/pages/user/member/member'
				});
				this.signShow = false
			},
			//功能按钮显示
			blurinput() {
				this.showexpand = true;
			},
			//角色角色
			commontemplate() {
				this.$store.dispatch('getTemplate');
			},
			//敏感词过滤检测
			getcheckText() {
				var that = this;
				return new Promise((resolve, reject) => {
					that.$http('ai.checkText', {
						prompt: that.thecontent
					}).then(res => {
						if (res.code == 0) {
							resolve(1);
						} else {
							let data = {
								id: new Date().getTime(),
								content: '该问题已被隐藏!',
								type: 1,
								toid: that.toid,
								fromid: that.userInfo.id,
								avatar: that.userInfo.avatar,
								nickname: that.userInfo.nickname,
								done: true
							};
							that.talkList.push(data);
							let chat_data = {
								id: new Date().getTime(),
								content: res.msg,
								type: 1,
								toid: this.toid,
								fromid: -1,
								avatar: this.homeTemplate.mode && this.homeTemplate.mode.length > 0 &&
									this.homeTemplate.mode[this.selectornot].img_file != null && this
									.homeTemplate.mode[this.selectornot].img_file.path,
								nickname: this.homeTemplate.mode && this.homeTemplate.mode.length >
									0 && this.homeTemplate.mode[this.selectornot].name,
								show_flash: false,
								done: true,
								donec: true
							};
							this.talkList.push(chat_data);
							this.$nextTick(() => {
								// 清空内容框中的内容
								this.content = '';
								uni.pageScrollTo({
									scrollTop: 99999,
									duration: 300
								});
							});
						}
					})
				});
			},
			getPlan() {
				let that = this;
				this.$http('conf.getGroupConf', {
					group: 'system.plan'
				}).then(res => {
					if (res.code == 0) {
						this.plan = res.data

						let gpt = this.appInfo;
						// #ifdef H5
						// this.sheetlist[0].disabled = gpt.is_gpt4 == 1 ? false : true

						// this.sheetlist[0].name = gpt.gpt4_alias ? gpt.gpt4_alias : 'ChatGPT 4.0'
						// this.sheetlist[0].subname = gpt.gpt4_intro ? gpt.gpt4_intro : '高效沟通·简单提问'

						// this.sheetlist[1].name = gpt.gpt35_alias ? gpt.gpt35_alias : 'ChatGPT 3.5'
						// this.sheetlist[1].subname = gpt.gpt35_intro ? gpt.gpt35_intro : '高效沟通·简单提问'
                        if(gpt.is_gpt4 == 2){
                        	this.sheetlist.shift()
                        	this.sheetlist[0].name = gpt.gpt35_alias?gpt.gpt35_alias:'ChatGPT 3.5'
                        	this.sheetlist[0].subname = gpt.gpt35_intro?gpt.gpt35_intro:'高效沟通·简单提问'
                        }else{
                        	this.sheetlist[0].name = gpt.gpt4_alias?gpt.gpt4_alias:'ChatGPT 4.0'
                        	this.sheetlist[0].subname = gpt.gpt4_intro?gpt.gpt4_intro:'高效沟通·简单提问'
                        	  
                        	this.sheetlist[1].name = gpt.gpt35_alias?gpt.gpt35_alias:'ChatGPT 3.5'
                        	this.sheetlist[1].subname = gpt.gpt35_intro?gpt.gpt35_intro:'高效沟通·简单提问'
                        }
						// #endif
						// #ifdef MP-WEIXIN
						this.sheetlist[0].name = gpt.gpt35_alias ? gpt.gpt35_alias : 'ChatGPT 3.5'
						this.sheetlist[0].subname = gpt.gpt35_intro ? gpt.gpt35_intro : '高效沟通·简单提问'

						// #endif

						this.getcurrentmodel()
					}
				})

			},
			getcurrentmodel() {
				let gpt = this.appInfo;
				if (this.showchat4) {
					this.currentmodel = gpt.gpt4_alias ? gpt.gpt4_alias : 'ChatGPT 4.0'
				}else {
					this.currentmodel = gpt.gpt35_alias ? gpt.gpt35_alias : 'ChatGPT 3.5'
				}
			},
			// 发送信息
			async send(e) {
				let that = this;
				if (!that.isLogin) {
					uni.navigateTo({
						url: '/pages/user/signin'
					});
					uni.setStorageSync('route', '/pages/chat/chat');
					return;
				}
				if (that.appInfo.time_member && that.appInfo.time_member == 1) {
					if (that.showchat4) {
						if (that.userData.vip_info && that.userData.is_validity > 0 && that.userData.vip_info.gpt4_used ==
							that.userData.vip_info.gpt4_times && that.userData.coin <  that.plan.lock_gpt4) {
							var alias = that.appInfo.number_alias ? that.appInfo.number_alias : '点数';
							// this.signTitle = "<p style='font-weight: 550;font-size: 16px;'>您的提问<span>" + alias +
							// 	"</span>不足或会员套餐内剩余次数不足，无法发起提问</p>"
							this.signTitle =
								"<p style='font-weight: 550;font-size: 16px;'>提问需要<span style='color: #26b3a0;padding: 0 4px;'>" +
								that.plan.lock_gpt4 + "</span><span>" + alias +
								"</span></p><p style='padding-top: 10px;'>您的提问<span>" + alias +"</span>不足或会员套餐内剩余次数不足，无法发起提问</p>"
							this.signShow = true
							return;
						}
						if (that.userData.is_validity == 0&&that.userData.coin < that.plan.lock_gpt4) {
							var alias = that.appInfo.number_alias ? that.appInfo.number_alias : '点数';
							this.signTitle =
								"<p style='font-weight: 550;font-size: 16px;'>提问需要<span style='color: #26b3a0;padding: 0 4px;'>" +
								that.plan.lock_gpt4 + "</span><span>" + alias +
								"</span></p><p style='padding-top: 10px;'>您的提问<span>" + alias +"</span>不足或会员套餐内剩余次数不足，无法发起提问</p>"
							this.signShow = true
							return;
						}
					} else {
						if (that.userData.is_validity > 0 && that.userData.vip_info.gpt35_used == that.userData.vip_info
							.gpt35_times && that.userData.coin <= 0) {
							var alias = that.appInfo.number_alias ? that.appInfo.number_alias : '点数';
							
								this.signTitle =
									"<p style='font-weight: 550;font-size: 16px;'>提问需要<span style='color: #26b3a0;padding: 0 4px;'>" +
									1 + "</span><span>" + alias +
									"</span></p><p style='padding-top: 10px;'>您的提问<span>" + alias +"</span>不足或会员套餐内剩余次数不足，无法发起提问</p>"
							this.signShow = true
							return;
						}
						if (that.userData.is_validity == 0&&that.userData.coin <= 0) {
							var alias = that.appInfo.number_alias ? that.appInfo.number_alias : '点数';
							this.signTitle =
								"<p style='font-weight: 550;font-size: 16px;'>提问需要<span style='color: #26b3a0;padding: 0 4px;'>" +
								1 + "</span><span>" + alias +
								"</span></p><p style='padding-top: 10px;'>您的提问<span>" + alias +"</span>不足或会员套餐内剩余次数不足，无法发起提问</p>"
							this.signShow = true
							return;
						}
					}
				} else {
					if (that.showchat4 && that.userData.coin < that.plan.lock_gpt4) {
						var alias = that.appInfo.number_alias ? that.appInfo.number_alias : '点数';
						this.signTitle =
							"<p style='font-weight: 550;font-size: 16px;'>提问需要<span style='color: #26b3a0;padding: 0 4px;'>" +
							that.plan.lock_gpt4 + "</span><span>" + alias +
							"</span></p><p style='padding-top: 10px;'>您当前有<span style='color: #26b3a0;padding: 0 4px;'>" +
							that.userData.coin + "</span><span>" + alias + "</span>，无法发起提问，快去获取<span>" + alias +
							"</span>吧</p>"
						this.signShow = true
						return;
					}
					if (!that.showchat4 && that.userData.coin <= 0) {
						var alias = that.appInfo.number_alias ? that.appInfo.number_alias : '点数';
						this.signTitle =
							"<p style='font-weight: 550;font-size: 16px;'>提问需要<span style='color: #26b3a0;padding: 0 4px;'>" +
							1 + "</span><span>" + alias +
							"</span></p><p style='padding-top: 10px;'>您当前有<span style='color: #26b3a0;padding: 0 4px;'>" +
							that.userData.coin + "</span><span>" + alias + "</span>，无法发起提问，快去获取<span>" + alias +
							"</span>吧</p>"
						this.signShow = true
						return;
					}
				}
				// if (that.showchat4) {
				// 	if (that.userData.coin < that.plan.lock_gpt4) {
				// 		var alias = that.appInfo.number_alias ? that.appInfo.number_alias : '点数';
				// 		this.signTitle =
				// 			"<p style='font-weight: 550;font-size: 16px;'>提问需要<span style='color: #26b3a0;padding: 0 4px;'>" +
				// 			that.plan.lock_gpt4 + "</span><span>" + alias +
				// 			"</span></p><p style='padding-top: 10px;'>您当前有<span style='color: #26b3a0;padding: 0 4px;'>" +
				// 			that.userData.coin + "</span><span>" + alias + "</span>，此模型不支持会员套餐，无法发起提问，快去获取<span>" + alias +
				// 			"</span>吧</p>"
				// 		this.signShow = true
				// 		return;
				// 	}
				// }
				// if (that.appInfo.time_member && that.appInfo.time_member == 1) {
				// 	if (that.userData.is_validity > 0 && that.userData.vip_info.gpt35_used == that.userData.vip_info.gpt35_times && that.userData.coin <= 0) {
				// 		var alias = that.appInfo.number_alias ? that.appInfo.number_alias : '点数';
				// 		this.signTitle = "<p style='font-weight: 550;font-size: 16px;'>您的提问<span>"+alias+"</span>/会员套餐内剩余次数不足</p>"
				// 		this.signShow = true
						
				// 		return;
				// 	}
				// 	if (that.userData.is_validity == 0) {
				// 		if (that.userData.coin <= 0) {
				// 			var alias = that.appInfo.number_alias ? that.appInfo.number_alias : '点数';
				// 			this.signTitle = "<p style='font-weight: 550;font-size: 16px;'>您的提问<span>" + alias +
				// 				"</span>/会员套餐不足</p>"
				// 			this.signShow = true
				// 			return;
				// 		}
				// 	}
				// } else {
				// 	if (that.userData.coin <= 0) {
				// 		var alias = that.appInfo.number_alias ? that.appInfo.number_alias : '点数';
				// 		this.signTitle = "<p style='font-weight: 550;font-size: 16px;'>您的提问<span>" + alias +
				// 			"</span>/会员套餐不足</p>"
				// 		this.signShow = true
				// 		return;
				// 	}
				// }
				if (that.talkList.length > 1 && !that.talkList[that.talkList.length - 1].done) {
					uni.showToast({
						title: '正在输入回答,请等待输入完成',
						icon: 'none'
					});
					return;
				}
				if (!e) {
					uni.showToast({
						title: '请输入有效的内容',
						icon: 'none'
					});
					return;
				}
				that.thecontent = e;
				// console.log('提问内容检测');
				uni.showLoading({})
				// #ifdef H5
				let check = this.appInfo.is_h5_filter && this.appInfo.is_h5_filter == 1 ? await this.getcheckText() :
					1;

				// #endif
				// #ifdef MP-WEIXIN
				let check = await this.getcheckText();
				// #endif
				if (check == 1) {
					uni.hideLoading();
					// 将当前发送信息 添加到消息列表。
					let data = {
						id: new Date().getTime(),
						content: e,
						type: 1,
						toid: this.toid,
						fromid: this.userInfo.id,
						avatar: this.userInfo.avatar,
						nickname: this.userInfo.nickname,
						done: true
					};

					this.talkList.push(data);
					// console.log(this.homeTemplate.mode[this.selectornot]);
					// #ifdef MP-WEIXIN
					if (this.showchat4) {
						let chat_data = {
							id: new Date().getTime(),
							content: '正在输入中，请等待...',
							type: 2,
							toid: this.toid,
							fromid: -1,
							avatar: this.homeTemplate.mode && this.homeTemplate.mode[this.selectornot].img_file !=
								null && this.homeTemplate.mode[this.selectornot].img_file.path ? this.homeTemplate
								.mode[this.selectornot].img_file.path : '/static/images/head.jpg',
							nickname: this.homeTemplate.mode && this.homeTemplate.mode[this.selectornot].name ?
								this.homeTemplate.mode[this.selectornot].name : 'AI问答机器人',
						};
						this.talkList.push(chat_data);
					} else {
						let chat_data = {
							id: new Date().getTime(),
							content: '正在思考中...',
							type: 1,
							toid: this.toid,
							fromid: -1,
							avatar: this.homeTemplate.mode && this.homeTemplate.mode[this.selectornot].img_file !=
								null && this.homeTemplate.mode[this.selectornot].img_file.path ? this.homeTemplate
								.mode[this.selectornot].img_file.path : '/static/images/open.png',
							nickname: this.homeTemplate.mode && this.homeTemplate.mode[this.selectornot].name ?
								this.homeTemplate.mode[this.selectornot].name : 'AI问答机器人',
							show_flash: true,
							done: false
						};
						this.talkList.push(chat_data);
					}
					// #endif
					// #ifdef H5
					let chat_data = {
						id: new Date().getTime(),
						content: '正在思考中...',
						type: 1,
						toid: this.toid,
						fromid: -1,
						avatar: this.homeTemplate.mode && this.homeTemplate.mode[this.selectornot].img_file !=
							null && this.homeTemplate.mode[this.selectornot].img_file.path ? this.homeTemplate
							.mode[this.selectornot].img_file.path : '/static/images/open.png',
						nickname: this.homeTemplate.mode && this.homeTemplate.mode[this.selectornot].name ? this
							.homeTemplate.mode[this.selectornot].name : 'AI问答机器人',
						show_flash: true,
						done: false
					};
					this.talkList.push(chat_data);
					// #endif
					// console.log(this.talkList);
					this.$nextTick(() => {
						// 清空内容框中的内容
						this.content = '';
						uni.pageScrollTo({
							scrollTop: 999999,
							duration: 300
						});
					});
					// 重置是否来数据的判断
					this.showanswer = false;
					// 允许跟随到最底部
					this.followornot = true;
					// 关闭重置上下文的秒倒计时
					// clearTimeout(timingr);
					// this.timing = this.appInfo.text_expire_time ? Number(this.appInfo.text_expire_time) : 30;

					// #ifdef MP-WEIXIN
					// 判断是否连接wss
					if (!this.$ws.socketStatus()) {
						// 重置倒计时15秒后的wss未返数据走直连模式
						this.showdirect = true;
						// console.log('15秒倒计时开始');
						this.countdown();
						// console.log('重连wss');
						this.$ws.init();
						let re = await this.waitWss();
						if (re == 1) {
							// console.log('等待wss打开后执行');
							this.getChatGPT(e);
						}
					} else {
						// 关闭wss

						that.$ws.completeClose();

						// console.log('15秒倒计时开始');
						this.countdown();
						let answer = '';
						if (that.talkList.length > 2) {
							// answer = that.talkList[that.talkList.length - 4].content + '\n' + that
							// 	.talkList[that
							// 		.talkList.length - 3].content;
							answer = that.talkList[that.talkList.length - 3].content;
						}
						// console.log('倒计时15秒后不再走直连模式');
						this.showdirect = false;
						this.directGpt(that.thecontent, answer);
					}
					// #endif
					// #ifdef H5
					this.showdirect = true;
					// console.log('15秒倒计时开始');
					this.countdown();
					// console.log('走方案2');
					that.fetchmodel(that.thecontent);
					// #endif
				}
			},
			//定时器
			countdown() {
				var that = this;
				that.second--;
				if (that.second == 0) {
					if (!that.showanswer) {
						let answer = '';
						if (that.talkList.length > 2) {
							answer = that.talkList[that.talkList.length - 3].content;
						}
						uni.showLoading({
							title: '加载中...'
						});
						// clearTimeout(down);
						// console.log('关闭定时器');
						// #ifdef MP-WEIXIN
						if (that.$ws.socketStatus()) {
							// console.log('关闭直连');
							that.$ws.completeClose();
						}
						// #endif
						if (that.showdirect) {
							setTimeout(() => {
								uni.hideLoading();
								that.second = 11;
								that.directGpt(that.thecontent, answer);
							}, 1500);
						} else {
							uni.hideLoading();
							that.second = 11;
							if (that.talkList[that.question_index].content == '正在思考中...') {
								that.talkList[that.question_index].content = '请等我几秒钟,正在输入回答...';
							}
						}
						return;
					} else {
						that.second = 11;
						clearTimeout(down);
						// console.log('关闭定时器');
					}
					// clearTimeout(down);
					return;
				}


				down = setTimeout(() => {
					// console.log(that.showanswer);
					if (that.showanswer) {
						clearTimeout(down);
						// console.log('关闭定时器');
						that.second = 11;
						return;
					}
					that.countdown();
				}, 1000);
				// console.log(second);
			},
			//wss返回数据
			onmessage() {
				let that = this,
					message = '';
				uni.onSocketMessage(function(res) {
					that.showanswer = true;
					let a = res.data;
					if (a.indexOf('wike_err:') != -1) {
						uni.showToast({
							title: '报错:' + a,
							icon: 'none'
						});
						that.talkList[that.question_index].show_flash = false;
						that.talkList[that.question_index].content = '报错:' + a;
						that.talkList[that.question_index].done = true;
						return;
					}
					if (!that.$ws.socketStatus()) {
						uni.showToast({
							title: '连接错误',
							icon: 'none'
						});
						that.talkList[that.question_index].show_flash = false;
						that.talkList[that.question_index].content = '报错';
						return;
					}
					if (a.indexOf('[DONE]') != -1) {
						that.$nextTick(() => {
							// that.timing = that.appInfo.text_expire_time ? Number(that.appInfo
							// 	.text_expire_time) : 30;
							// that.showcontext = true;
							// that.getcontext()
							that.talkList[that.question_index].show_flash = false;
							that.talkList[that.question_index].done = true;
							that.record(that.talkList[that.answer_index].content, message);
							message = '';
							if (that.$ws.socketStatus()) {
								that.$ws.completeClose();
							}
							that.$nextTick(() => {
								if (that.followornot) {
									uni.pageScrollTo({
										scrollTop: 99999,
										duration: 300
									});
								}

							});
						});
					} else {
						var b = a.split('data:').filter(w => !!w.trim() && w.trim() !== '[DONE]');
						var c = '';
						b.map(w => JSON.parse(w))
							.map(w => (c = w.choices[0].delta.content))
							.join('');
						if (that.followornot) {
							uni.pageScrollTo({
								scrollTop: 99999,
								duration: 0
							});
						}
						if (c != undefined) {
							message += c;
						}
						if (that.thoroughfare == 1) {
							that.talkList[that.question_index].backups = message;
							that.talkList[that.question_index].content = marked(message);
						}
					}
				});
			},
			//wss模式
			getChatGPT(e) {
				var that = this;
				let i = 1,
					message = '';
				this.question_index = that.talkList.length - 1;
				this.answer_index = that.talkList.length - 2;
				let answer = '';
				if (that.talkList.length > 2 ) {
					answer = that.talkList[that.question_index - 2].content;
				}
				var ty = {
					prompt: e,
					guide: that.homeTemplate.mode[that.selectornot].guide,
					
					answer: answer,
					key: that.appInfo.sk ? that.appInfo.sk : '',
					lines: that.appInfo.connect_lines ? this.appInfo.connect_lines : 1,
					temperature: that.appInfo.temperature ? this.appInfo.temperature : 0,
					presence_penalty: that.appInfo.presence_penalty ? this.appInfo.presence_penalty : 0,
					frequency_penalty: that.appInfo.frequency_penalty ? this.appInfo.frequency_penalty : 0,
				};
				var json = JSON.stringify(ty);
				that.thoroughfare = 1
				that.$ws.send(json);
			},
			//php模式
			directGpt(e, answer) {
				// console.log('走方案3');
				let that = this;
				this.question_index = that.talkList.length - 1;
				if (this.showdirect) {
					that.talkList[that.question_index].content = '请等我几秒钟,正在输入回答...';
				}
				// this.showdirect = false;
				that.showanswer = this.showdirect;
				that.thoroughfare = 3
				// var url = 
				that.$http(that.showchat4 ? 'ai.chat4' : 'ai.chat', {
					prompt: e,
					guide: that.homeTemplate.mode[that.selectornot].guide,
					answer: answer
				}).then(res => {
					if (that.thoroughfare == 3) {
						if (res.code == 0) {
							that.talkList[that.question_index].backups = res.data.trim();
							that.talkList[that.question_index].content = marked(res.data.trim());
							that.talkList[that.question_index].show_flash = false;
							that.talkList[that.question_index].done = true;
							that.talkList[that.question_index].type = 1;
						} else if (res.code == 3 || res.code == 1) {
							that.talkList[that.question_index].content = res.msg;
							that.talkList[that.question_index].show_flash = false;
							that.talkList[that.question_index].done = true;
							that.talkList[that.question_index].type = 1;
						} else {
							that.talkList[that.question_index].content = res.msg;
							that.talkList[that.question_index - 1].content = '该问题已被隐藏!';
							that.talkList[that.question_index].show_flash = false;
							that.talkList[that.question_index].done = true;
							that.talkList[that.question_index].type = 1;
						}
						that.showanswer = true;
						that.getUserData();
						// that.timing = that.appInfo.text_expire_time ? Number(that.appInfo
						// 	.text_expire_time) : 30;
						
						// that.getcontext();
						that.$nextTick(() => {
							// 清空内容框中的内容
							that.content = '';
							if (that.followornot) {
								uni.pageScrollTo({
									scrollTop: 99999,
									duration: 300
								});
							}
						});
					}
				});
			},

			//fetch模式
			fetchmodel(e) {
				// console.log('走方案2');
				var that = this;
				let i = 1,
					message = '';
				let answer = '';
				that.thoroughfare = 2;
				this.question_index = that.talkList.length - 1;
				this.answer_index = that.talkList.length - 2;
				if (that.talkList.length > 2) {
					answer = that.talkList[that.question_index - 2].content;
				}

				// let param = {
				// 								max_tokens: 3000,
				// 								model: 'gpt-3.5-turbo-0301',
				// 								stream: true,
				// 								messages: [{
				// 										role: 'assistant',
				// 										content: answer
				// 									},
				// 									{
				// 										role: 'system',
				// 										content: that.homeTemplate.mode[that.selectornot].guide
				// 									},
				// 									{
				// 										role: 'user',
				// 										content: e
				// 									}
				// 								]
				// 							};

				let param = {
					type: that.showchat4 ? 'gpt4' : 'gpt35',
					prompt: e,
					answer: answer,
					guide: that.homeTemplate.mode[that.selectornot].guide,
					// messages: [{
					// 		role: 'assistant',
					// 		content: answer
					// 	},
					// 	{
					// 		role: 'system',
					// 		content: that.homeTemplate.mode[that.selectornot].guide
					// 	},
					// 	{
					// 		role: 'user',
					// 		content: e
					// 	}
					// ]
				};
				let headers = {
					'token': uni.getStorageSync("token") || "",
					'platform': this.platform,
					'Content-Type': 'application/json',
				}
				fetch(that.chatgpturl, {
						method: 'POST',
						body: JSON.stringify(param),
						headers: headers
					})
					.then(x => {
						// console.log(x);
						if (x.status === 404) {
							// that.showdirect = true;
							this.showdirect = false;
							that.directGpt(e, answer)
							return;
						}
						if (x.status === 200) return x.body;
						throw x;
					})
					.then(x => {
						const k = x.getReader();
						return new ReadableStream({
							start(V) {
								function F() {
									k.read().then(({
										done: E,
										value: U
									}) => {

										if (E) {
											// console.log('s');
											if (that.talkList[that.question_index].content ==
												'正在思考中...' || that.talkList[that.question_index]
												.content == '请等我几秒钟,正在输入回答...') {
												return;
											}
											// that.timing = that.appInfo.text_expire_time ? Number(that
											// 	.appInfo.text_expire_time) : 30;
											// that.showcontext = true;
											// that.getcontext();
											that.talkList[that.question_index].show_flash = false;
											that.talkList[that.question_index].done = true;
											that.getUserData();
											// console.log(that.talkList);
											// console.log(that.userData.vip_info);
											// if(that.userData.is_validity > 0&&that.userData.vip_info&&that.userData.vip_info.gpt4_used == 1 || that.userData.is_validity > 0&&that.userData.vip_info&&that.userData.vip_info.gpt35_used == 1){
											// 	var sty = '会员套餐内当前提问次数已用完，继续提问将会消耗您的'+that.appInfo.number_alias?that.appInfo.number_alias:'点数'
											// 	uni.showModal({
											// 		showCancel:false,
											// 		title:'提示',
											// 		confirmColor:'#26B3A0',
											// 		confirmText:'我知道了',
											// 		content:sty
											// 	})
											// }
											setTimeout(() => {
												if (that.followornot) {
													uni.pageScrollTo({
														scrollTop: 99999,
														duration: 300
													});
												}
											}, 100);
											return;
										}
										
										V.enqueue(U);
										// console.log(U);
										const L = new TextDecoder().decode(U);
										const N = L;
										// console.log(L);
										// console.log('5');
										that.showanswer = true;
										if (N != undefined) {

											message += N;
										}
										
										if (that.thoroughfare == 2) {
											if (N == '内容包含敏感信息，不予展示。') {

												that.talkList[that.question_index - 1].content =
													'该问题已被隐藏!';
												that.talkList[that.question_index].content =
													'内容包含敏感信息，不予展示。';
												that.talkList[that.question_index].show_flash = false;
												that.talkList[that.question_index].done = true;
												return;
											}
											// console.log(JSON.parse(N));
											that.talkList[that.question_index].backups = message;
											that.talkList[that.question_index].content = marked(message);
											// console.log(marked(message));
										}
										if (that.followornot) {
											uni.pageScrollTo({
												scrollTop: 99999,
												duration: 0
											});
										}
										F();
									});
								}
								F();
							}
						});
					})
					.then(x =>
						new Response(x, {
							headers: {
								'Content-Type': 'text/html'
							}
						}).text()
					);
			},
			// 记录回答
			record(question, answer) {
				let that = this,type = that.showchat4 ? 'gpt4' : 'gpt35';
				this.$http('question.add', {
					question,
					answer,
					type
				}).then(res => {
					if (res.code == 0) {
						that.getUserData();
						// console.log(that.getUserData());
					} else {
						that.talkList[that.question_index].content = res.msg;
						that.talkList[that.question_index - 1].content = '该问题已被隐藏!';
						that.talkList[that.question_index].show_flash = false;
						that.talkList[that.question_index].done = true;
						that.talkList[that.question_index].donec = true;
					}

				});
			},
			// 复制文本
			copyText(e) {
				// console.log(marked(this.talkList[e].content));
				uni.setClipboardData({
					data: this.talkList[e].backups,
					success: function() {
						// console.log('success');
						uni.showToast({
							title: '复制成功'
						});
					}
				});
			},
			// 插屏广告显示时间
			showInterstitial() {
				time2 = setInterval(
					function() {
						interstitialAd.show().catch(err => {
							// console.error(err);
						});
					},
					this.appInfo.gap ? this.appInfo.gap * 1000 : 12000
				);
			},
			// 生成图片
			toSave() {
				uni.showLoading({
					title: '海报生成中'
				});
				this.$refs.painter.canvasToTempFilePathSync({
					// 在nvue里是jpeg
					fileType: 'jpg',
					quality: 1,
					success: res => {
						// H5 提示用户长按图另存
						// #ifdef MP-WEIXIN
						wx.showShareImageMenu({
							path: res.tempFilePath
						})
						this.showPoster = false;
						uni.hideLoading();
						// #endif
						// #ifdef H5
						this.showPoster = false;
						uni.hideLoading();
						uni.showModal({
							confirmColor: '#26B3A0',
							confirmText: '查看图片',
							title: '提示',
							content: '查看图片后长按图片即可保存或分享',
							success(src) {
								if (src.confirm) {
									uni.previewImage({
										urls: [res.tempFilePath]
									});
								} else if (src.cancel) {
									this.showPoster = true;
								}
							}
						});
						// #endif
					}
				});
			},
			
			//选择角色
			onselect(e) {
				if (this.selectornot != e) {
					let data = {
						content: uni.$u.trim(this.homeTemplate.mode[e].greetings),
						type: 1,
						toid: this.toid,
						fromid: -1,
						avatar: this.homeTemplate.mode[e].img_file.path,
						nickname: this.homeTemplate.mode[e].name,
						done: true,
						donec: true
					};
					this.talkList.push(data);
					this.$nextTick(() => {
						uni.pageScrollTo({
							scrollTop: 99999,
							duration: 300
						});
					});
				}
				// this.showcontext = false
				this.switchmodel = this.selectornot == e ? true : false;
				this.selectornot = e;
				// #ifdef H5
				this.zhuangtai = this.homeTemplate.mode[e].name;
				// #endif
			},
			getdownload(e,type){
				return new Promise((resolve, reject) => {
				// uni.getImageInfo({
				// 	src: e,
				// 	success: res => {
				// 		uni.downloadFile({
				// 			url: e,
				// 			success: (res) => {
				// 				if (res.statusCode === 200) {
				// 					resolve(res.tempFilePath);
				// 				}
				// 				if(res.statusCode === 404){
				// 					let head = '/static/images/head.jpg',open = '/static/images/open.png';
				// 					if(type == 1){
				// 						resolve(head);
				// 					}else{
				// 						resolve(open);
				// 					}
				// 				}
				// 			}
				// 		});
				// 	},
				// 	fail: err => {
				// 		let head = '/static/images/head.jpg',open = '/static/images/open.png';
				// 		if(type == 1){
				// 			resolve(head);
				// 		}else{
				// 			resolve(open);
				// 		}
				// 	}
				// })
				uni.request({
				                        url: e,
				                        method:'GET',
				                        responseType:'arraybuffer',
				                        success: ress => {
				                            let base64 = wx.arrayBufferToBase64(ress.data); 
				                            base64 = 'data:image/jpeg;base64,' + base64
											resolve(base64);
				                        },
										fail: (e) => {
				                            let head = '/static/images/head.jpg',open = '/static/images/open.png';
				                            if(type == 1){
				                            	resolve(head);
				                            }else{
				                            	resolve(open);
				                            }
				                        }
				                    })
				});
			},
			posterSuccess(){
				uni.hideLoading();
			},
			// 海报绘制
			async createPoster(e) {
				let that = this;
				let site_logo = '';
				uni.showLoading({
					title: '海报渲染中'
				});
				let avatar_logo = that.userInfo.avatar ? await this.getdownload(that.userInfo.avatar,1):'/static/images/head.jpg';
				if(that.appInfo.site_logo_path.indexOf("https") < 0){
					site_logo = that.appInfo.site_logo_path ? await that.getdownload(that.appInfo.site_logo_path.replace("http:", "https:"),2):'/static/images/open.png';
				}else{
					site_logo = that.appInfo.site_logo_path ? await that.getdownload(that.appInfo.site_logo_path,2):'/static/images/open.png';
				}
				(this.posterObj = {
					width: uni.$u.sys().windowWidth+ 'px',
					background: 'linear-gradient(to right, #00ca88 0%, #00BCD4 100%)',
					css: {
						// 根节点若无尺寸，自动获取父级节点
						width: uni.$u.sys().windowWidth+ 'px',
					},
					views: [{
							type: 'view',
							css: {
								marginTop: '20rpx',
								paddingLeft: '10rpx',
								display: 'flex'
							},
							views: [{
									type: 'image',
									src: avatar_logo,
									css: {
										marginTop: '10rpx',
										marginLeft: '20rpx',
										borderRadius: '16rpx',
										width: '80rpx',
										height: '80rpx',
										border: '2rpx solid #fff',
										objectFit: 'cover'
									}
								},
								{
									type: 'view',
									css: {
										marginTop: '10rpx',
										marginLeft: '20rpx'
										// display:'flex',
										// flexDirection:'column'
									},
									views: [{
											type: 'view',
											views: [{
												type: 'text',
												text: this.userInfo.nickname ? this
													.userInfo
													.nickname : '提问者',
												css: {
													marginTop: '10rpx',
													fontSize: '28rpx',
													fontWeight: 'bold',
													color: '#32324A',
													lineHeight: '28rpx'
												}
											}]
										},
										{
											type: 'view',
											views: [{
												type: 'text',
												text: '我的提问❓',
												css: {
													marginTop: '15rpx',
													fontSize: '20rpx',
													
													color: '#fff',
													lineHeight: '25rpx',
												}
											}]
										}
									]
								}
							]
						},
						{
							type: 'view',
							css: {
								marginTop: '20rpx',
								width: (uni.$u.sys().windowWidth - 48) + 'px',
								padding: '15rpx',
								background: '#fff',
								borderRadius: '16rpx',
								marginLeft: '30rpx',
							},
							views: [{
								type: 'text',
								text: that.talkList[e - 1].content,
								css: {
									fontSize: '28rpx',
									color: '#000',
									// lineHeight: '45rpx',
									// lineClamp: 2,
									// padding: '10rpx',
									// paddingRight: '10rpx',
									width: (uni.$u.sys().windowWidth - 48) + 'px',
									// padding:'10rpx'
								}
							}]
						},
						{
							type: 'view',
							css: {
								marginTop: '20rpx',
								paddingLeft: '10rpx',
								display: 'flex'
							},
							views: [{
									type: 'image',
									src: site_logo,
									css: {
										marginTop: '10rpx',
										marginLeft: '20rpx',
										borderRadius: '16rpx',
										width: '80rpx',
										height: '80rpx',
										border: '2rpx solid #fff',
										objectFit: 'cover'
									}
								},
								{
									type: 'view',
									css: {
										marginTop: '10rpx',
										marginLeft: '20rpx'
										// display:'flex',
										// flexDirection:'column'
									},
									views: [{
											type: 'view',
											views: [{
												type: 'text',
												text: this.appInfo.site_name ? this
													.appInfo
													.site_name : 'AI智能问答机器人',
												css: {
													marginTop: '10rpx',
													fontSize: '28rpx',
													fontWeight: 'bold',
													color: '#32324A',
													lineHeight: '28rpx'
												}
											}]
										},
										{
											type: 'view',
											views: [{
												type: 'text',
												text: '回答结果📝',
												css: {
													marginTop: '15rpx',
													fontSize: '20rpx',
													
													color: '#fff',
													lineHeight: '25rpx',
													
												}
											}]
										}
									]
								}
							]
						},
						{
							type: 'view',
							css: {
							marginTop: '20rpx',
							width: (uni.$u.sys().windowWidth - 48) + 'px',
							padding: '15rpx',
							background: '#fff',
							borderRadius: '16rpx',
							marginLeft: '30rpx',
							
						},
							views: [{
								type: 'text',
								text: uni.$u.trim(that.talkList[e].backups),
								css: {
									fontSize: '28rpx',
									color: '#000',
									// lineHeight: '45rpx',
									// lineClamp: 11,
									width: (uni.$u.sys().windowWidth - 48) + 'px',
									// padding: '10rpx',
								}
							}]
						},
						{
							type: 'view',
							css: {
								marginTop: '30rpx',
								width: '100%',
								textAlign: 'center'
							},
							// #ifdef H5
							views: [{
								type: 'qrcode',
								text: this.qrcode,
								css: {
									width: '200rpx',
									height: '200rpx',
									borderRadius: '16rpx',
								}
							}],
							// #endif
							// #ifdef MP-WEIXIN
							views: [{
								type: 'image',
								src: this.qrcode,
								css: {
									width: '200rpx',
									height: '200rpx',
									borderRadius: '16rpx',
								}
							}]
							// #endif
						},
						{
							type: 'text',
							text: '————  ' + '长按识别 | 欢迎使用' + '  ————',
							css: {
								marginTop: '20rpx',
								marginBottom: '20rpx',
								width: '100%',
								textAlign: 'center',
								fontSize: '24rpx',
								color: '#fff',
								lineHeight: '33rpx'
							}
						}
					]
				}),
				(this.showPoster = true);
			}
		}
	};
</script>

<style lang="scss">
	@import '@/pages/chat/global.scss';

	page {
		background-color: #f1f1f1;
		font-size: 28rpx;
	}

	.ask {
		color: #26b3a0;
		margin-top: 22rpx;
	}

	/* 加载数据提示 */
	.tips {
		// bottom: ;
		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: auto;
		padding-bottom: 138rpx;
		box-sizing: content-box;

		/* 兼容iPhoneX */
		margin-bottom: 0;
		margin-bottom: constant(safe-area-inset-bottom);
		margin-bottom: env(safe-area-inset-bottom);
	}

	.box-2 {
		position: fixed;
		left: 0;
		width: 100%;
		bottom: 0;
		height: auto;
		// border-radius: 30rpx 30rpx 0 0;
		z-index: 2;
		border-top: #9e9e9e38 solid 1px;
		// border-bottom: #e5e5e5 solid 1px;
		box-sizing: content-box;
		background-color: #ffffff;

		/* 兼容iPhoneX */
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		>view {
			padding: 0 20rpx;
			height: 150rpx;

		}

		.content {
			background-color: #f1f1f1;
			height: 64rpx;
			width: 100%;
			padding: 15rpx 20rpx 0;
			border-radius: 32rpx;
			// font-size: 28rpx;
		}

		.send {
			background: linear-gradient(to right, #00ca88, #00BCD4);
			color: #fff;
			height: 75rpx;
			margin-left: 20rpx;
			border-radius: 50rpx;
			padding: 0;
			width: 138rpx;
			font-size: 30rpx;
			font-weight: bold;
			line-height: 75rpx;

			&:active {
				background-color: #26b3a08a;
			}
		}
	}

	.talk-list {
		padding-bottom: 20rpx;

		/* 消息项，基础类 */
		.item {
			padding: 20rpx 20rpx 0 20rpx;
			align-items: flex-start;
			align-content: flex-start;
			color: #333;

			.pic {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				border: #fff solid 1px;
			}

			.content {
				font-weight: bold;
				padding: 15rpx 25rpx;
				border-radius: 4px;
				max-width: 500rpx;
				word-break: break-all;
				line-height: 52rpx;
				position: relative;
			}

			/* 收到的消息 */
			&.pull {
				.time {
					margin-left: 22rpx;
					font-size: 24rpx;
					margin-bottom: 15rpx;
					color: #9e9e9e;
					position: absolute;
					width: 300rpx;
					top: 0rpx;
					left: 0rpx;
				}

				.content {
					margin-left: 22rpx;
					background-color: #fff;
					border-radius: 0px 8px 8px 8px;
					margin-top: 45rpx;
					// &::after{
					// 	content: '';
					// 	display: block;
					// 	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;
					// }
				}

				.sentpictures {
					width: 300rpx;
					// height: 237.5rpx;
					margin-left: 22rpx;
					border-radius: 0px 8px 8px 8px;
					margin-top: 46rpx;
				}
			}

			/* 发出的消息 */
			&.push {
				/* 主轴为水平方向，起点在右端。使不修改DOM结构，也能改变元素排列顺序 */
				flex-direction: row-reverse;

				.time {
					margin-right: 22rpx;
					font-size: 24rpx;
					margin-bottom: 15rpx;
					color: #9e9e9e;
					position: absolute;
					width: 300rpx;
					top: 0rpx;
					right: 0rpx;
					display: flex;
					justify-content: flex-end;
				}

				.content {
					margin-right: 22rpx;
					background-color: #26b3a0;
					color: #fff;
					border-radius: 8px 0px 8px 8px;
					margin-top: 45rpx;
				}

				.sentpictures {
					width: 300rpx;

					margin-right: 22rpx;
					border-radius: 8px 0 8px 8px;
					margin-top: 46rpx;
				}
			}
		}
	}

	.flex_photo {
		// width: 80rpx;
		border-radius: 50%;
		background: #f1f1f1;
		padding: 12rpx;
		margin-right: 20rpx;
	}

	.content {
		width: 100%;

		.msg-list {
			// width: 95%;
			// padding: 38rpx 20rpx 237rpx 20rpx;
			padding: 20rpx;
			// position: absolute;
			// top: 0rpx;
			// bottom: 130rpx;
			// margin-bottom: constant(safe-area-inset-bottom);
			// margin-bottom: env(safe-area-inset-bottom);

			.loading {
				//loading动画
				display: flex;
				justify-content: center;

				@keyframes stretchdelay {

					0%,
					40%,
					100% {
						transform: scaleY(0.6);
					}

					20% {
						transform: scaleY(1);
					}
				}

				.spinner {
					margin: 20rpx 0;
					width: 60rpx;
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					view {
						background-color: #f06c7a;
						height: 50rpx;
						width: 6rpx;
						border-radius: 6rpx;
						animation: stretchdelay 1.2s infinite ease-in-out;
					}

					.rect2 {
						animation-delay: -1.1s;
					}

					.rect3 {
						animation-delay: -1s;
					}

					.rect4 {
						animation-delay: -0.9s;
					}

					.rect5 {
						animation-delay: -0.8s;
					}
				}
			}

			.row {
				.system {
					display: flex;
					justify-content: center;

					view {
						padding: 0 30rpx;
						height: 50rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						background-color: #c9c9c9;
						color: #fff;
						font-size: 24rpx;
						border-radius: 40rpx;
					}

					.red-envelope {
						image {
							margin-right: 5rpx;
							width: 30rpx;
							height: 30rpx;
						}
					}
				}

				&:first-child {
					// margin-top: 20rpx;
				}

				padding: 15rpx 0;

				.my .left,
				.other .right {
					width: 86%;
					display: flex;

					.bubble {
						max-width: 90%;
						min-height: 50rpx;
						// border-radius: 13rpx;
						// padding: 22rpx 30rpx;
						display: flex;
						align-items: center;
						font-size: 30rpx;
						word-break: break-word;

						&.img {
							background-color: transparent;
							padding: 0;
							overflow: hidden;

							image {
								max-width: 300rpx;
								// max-height: 350rpx;
							}
						}

						&.red-envelope {
							background-color: transparent;
							padding: 0;
							overflow: hidden;
							position: relative;
							justify-content: center;
							align-items: flex-start;

							image {
								width: 250rpx;
								height: 313rpx;
							}

							.tis {
								position: absolute;
								top: 6%;
								font-size: 26rpx;
								color: #9c1712;
							}

							.blessing {
								position: absolute;
								bottom: 14%;
								color: #e9b874;
								width: 80%;
								text-align: center;
								overflow: hidden;
								// 最多两行
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
							}
						}

						&.voice {
							.icon {
								font-size: 40rpx;
								display: flex;
								align-items: center;
							}

							.icon:after {
								content: ' ';
								width: 53rpx;
								height: 53rpx;
								border-radius: 100%;
								position: absolute;
								box-sizing: border-box;
							}

							.length {
								font-size: 28rpx;
							}
						}
					}
				}

				.my .right,
				.other .left {
					flex-shrink: 0;
					// width: 84rpx;
					// height: 84rpx;

					// image {
					// 	width: 80rpx;
					// 	height: 80rpx;
					// 	border-radius: 50%;
					// }
				}

				.my {
					width: 100%;
					display: flex;
					justify-content: flex-end;

					.left {
						min-height: 80rpx;
						flex-wrap: wrap;
						align-items: center;
						justify-content: flex-end;

						.bubbleimg {
							image {
								height: 300rpx;
								width: 400rpx;
								border-radius: 10px 0px 10px 10px;
							}
						}

						.bubble {
							border-radius: 20rpx 0rpx 20rpx 20rpx;
						}

						.username {
							width: 100%;
							height: 48rpx;
							font-size: 26rpx;
							color: #999;
							display: flex;
							justify-content: flex-end;

							.name {
								// margin-right: 50rpx;
							}
						}

						.bubble {
							background: linear-gradient(to right, #00ca88, #00BCD4);
							color: #000;
							font-size: 30rpx;

							&.voice {
								.icon {
									color: #fff;
								}

								.length {
									margin-right: 20rpx;
								}
							}

							&.play {
								@keyframes my-play {
									0% {
										transform: translateX(80%);
									}

									100% {
										transform: translateX(0%);
									}
								}

								.icon:after {
									border-left: solid 10rpx rgba(240, 108, 122, 0.5);
									animation: my-play 1s linear infinite;
								}
							}
						}
					}

					.right {
						margin-left: 22rpx;
					}
				}

				.other {
					width: 100%;
					display: flex;

					.bubbleimg {
						image {
							width: 400rpx;
							height: 300rpx;
							border-radius: 0px 10px 10px 10px;
						}
					}

					.bubble {
						border-radius: 0rpx 20rpx 20rpx 20rpx;
					}

					.left {
						margin-right: 22rpx;
					}

					.tip {
						display: flex;
						flex-direction: column;
						position: absolute;
						justify-content: space-between;
						right: -50rpx;
						bottom: 0;
						height: 92rpx;
					}

					.right {
						flex-wrap: wrap;

						.username {
							width: 100%;
							height: 48rpx;
							font-size: 26rpx;
							color: #999;
							display: flex;

							.name {
								// margin-right: 50rpx;
							}
						}

						.bubble {
							// background-color: #fff;
							color: #333;

							&.voice {
								.icon {
									color: #333;
								}

								.length {
									margin-left: 20rpx;
								}
							}

							&.play {
								@keyframes other-play {
									0% {
										transform: translateX(-80%);
									}

									100% {
										transform: translateX(0%);
									}
								}

								.icon:after {
									border-right: solid 10rpx rgba(255, 255, 255, 0.8);

									animation: other-play 1s linear infinite;
								}
							}
						}
					}
				}

				.exchange {
					font-weight: bold;
					font-size: 30rpx;
					background: #00000014;
					padding: 15rpx 35rpx;
					border-radius: 45rpx;

					.launch {
						margin-right: 35rpx;
					}

					.agree {
						color: #4095e5;
						margin-right: 25rpx;
					}

					.refuse {
						color: #fe7058;
					}
				}
			}
		}
	}

	.ability {
		width: 100%;
		position: fixed;
		top: 0;
		height: 115rpx;
		background: #ffffff;
		z-index: 9;
		border-bottom: #e5e5e5 solid 1px;

		.item_ability {
			width: 20%;

			.t_ability {
				font-size: 26rpx;
				margin-top: 6rpx;
			}
		}
	}

	.flash {
		margin-left: 2px;
		animation: flash 0.8s linear infinite;
	}

	// 实现光标闪烁
	@keyframes flash {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	.neckBtn_view {
		align-items: center;
		display: flex;
		justify-content: center;
		position: fixed;
		flex-direction: column;
		background: linear-gradient(-45deg, #26b3a0, #3edd3e);
		border-radius: 100rpx 0 0 100rpx;
		box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(0, 0, 0, 0.2);
		box-sizing: border-box;
		color: #fff;
		font-size: 25rpx;
		line-height: 30rpx;
		padding: 10rpx 25rpx 10rpx;
		right: 0;
		text-align: center;
		bottom: 415rpx;

		.free_view {
			font-size: 28rpx;
			margin-bottom: 6rpx;
		}
	}

	.poster-img {
		width: 670rpx;
		height: 928rpx;
		position: relative;

		text {
			background: url('https://s.yun-live.com/images/20210201/5c4ef9d86bc5eec90f2f915683d9db08.png') no-repeat;
			background-size: 100% 100%;
			display: inline-block;
			width: 50rpx;
			height: 50rpx;
			position: absolute;
			top: -60rpx;
			right: 0;
		}

		image {
			width: 100%;
			height: 100%;
		}

		view {
			font-size: 32rpx;
			font-family: PingFang-SC-Bold, PingFang-SC;
			font-weight: bold;
			color: #ffffff;
			line-height: 32rpx;
			text-align: center;
			margin-top: 28rpx;
		}
	}

	.poster {
		padding: 40rpx;

		.footer-btn {
			margin-top: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			view {
				width: 319rpx;
				height: 66rpx;
				border-radius: 40rpx;
				border: 1px solid #4070ff;
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #4070ff;
				line-height: 66rpx;
				text-align: center;
			}

			.save {
				background: #4070ff;
				color: #ffffff;
			}
		}
	}

	.poster-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 140rpx;
		background: #ffffff;
		border-radius: 32rpx 32rpx 0px 0px;
		display: flex;
		align-items: center;
		justify-content: space-around;

		>view {
			width: 80rpx;
			height: 80rpx;
			position: relative;
			border-radius: 10rpx;
			border: 4rpx solid #fff;

			&.is-check {
				border: 4rpx solid #4070ff;
			}

			image {
				width: 100%;
				height: 100%;
			}

			view {
				width: 30rpx;
				height: 30rpx;
				position: absolute;
				right: -15rpx;
				bottom: -15rpx;
				background: url('https://s.yun-live.com/images/20210201/311c01265c1aa508418f6bae10d67602.png') no-repeat;
				background-size: 100% 100%;
			}
		}
	}

	.select {
		font-weight: bold;
		font-size: 32rpx;
		margin: 30rpx;
	}

	.model_view {
		margin: 30rpx;

		.modelname {
			font-size: 32rpx;
			font-weight: bold;
			width: 56%;

			.name {
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.modeldetails {
				font-size: 26rpx;
				font-weight: 500;
				margin-top: 12rpx;
				color: #9e9e9e;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
		}

		.modelselect {
			background: #03a9f4;
			border-radius: 14rpx;
			color: #fff;
			width: 58px;
			height: 30px;
			line-height: 30px;
			text-align: center;
		}
	}

	.expand {
		// padding: 20rpx;
		// margin: 20rpx 20rpx 155rpx 20rpx;
		// padding-bottom: env(safe-area-inset-bottom);
		margin-left: 20rpx;

		.surplus {
			font-size: 26rpx;
			background: #fff;
			border-radius: 50rpx;
			padding: 8rpx 12rpx;
			margin-right: 20rpx;
			border: 1px solid #ededed;
			// box-shadow: 0px 0px 10px 3px #f1f1f1;

			.item {
				margin-left: 10rpx;
			}

			// display: inline-block;
		}
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
		margin-bottom: 177rpx;
	}

	.operate {
		// width: 90%;
		// max-width: 90%;
		margin-top: 12rpx;
		position: relative;

		.dialogue {
			// width: 140rpx;
			// white-space: nowrap;
			// margin-right: 50rpx;
			width: 24px;
			    height: 24px;
			    background: #68d7bb;
			    border-radius: 50%;
				// margin-right: 20rpx;
		}

		.duplicate {
			font-size: 26rpx;
			margin-left: 6rpx;
			color: #9e9e9e;
		}

		.eliseaudio {
			margin-left: 10px;
		}

		.share {
			font-size: 26rpx;
			margin-left: 6rpx;
			color: #9e9e9e;
		}

		.broadcast {
			background: #fff;
			width: 150rpx;
			height: 40rpx;
			border-radius: 60rpx;

			// padding: 0 5rpx;
			.play {
				border-radius: 50%;
			}

			image {
				width: 150rpx;
				height: 40rpx;
				border-radius: 60rpx;
			}
		}

		.hoversubmit {
			background: #9e9e9e61;
		}
	}

	.bottomheight {
		width: 100%;
		height: 217rpx;
	}

	.soundrecording {
		flex-direction: column;

		.discriminate {
			color: #9e9e9e;
			margin-bottom: 30rpx;
		}
	}

	.waveform {
		image {
			width: 468rpx;
			height: 168rpx;
		}


	}

	.operation {
		margin: 60rpx 0 30rpx;

		.affirm {
			margin: 0 42rpx;

			image {
				width: 60rpx;
				height: 60rpx;
			}
		}

		.longpress {
			background: red;
			border-radius: 50%;
			padding: 30rpx;

			image {
				width: 70rpx;
				height: 70rpx;
			}
		}

		.hoversubmit {
			background: #9e9e9e61;
		}
	}

	.env {
		padding-bottom: env(safe-area-inset-bottom);
	}
	.dygbhg {
				background: #ffffff;
				border-radius: 15rpx 15rpx 0 0;
				position: fixed;
				bottom: 0;
				left: 0;
				width: 100%;
				box-shadow: 0px 0px 10px #00000024;
				display: flex;
				align-items: center;
				justify-content: space-evenly;
			}
			.whole{
				width: 45%;
				height: 88rpx;
				display: flex;
				color: #ffffff;
				align-items: center;
				justify-content: center;
				background: #f3f3f3;
				font-weight: bold;
				border-radius: 60rpx;
				color: #3d7eff;
			}
			.distinguish {
				width: 45%;
				height: 88rpx;
				display: flex;
				color: #ffffff;
				align-items: center;
				justify-content: center;
				background: #3d7eff;
				font-weight: bold;
				border-radius: 60rpx;
				margin: 38rpx 0;
				margin-left: 4%;
			}
			.mytheme{
				padding: 12px 16px;
				background: #fff;
				border-radius: 0px 11px 11px 11px;
				// overflow: auto;
			}
			.mycopy{
				    width: 24px;
				    height: 24px;
				    background: #4c4c4c30;
				    border-radius: 50%;
					margin-right: 12rpx;
			}
</style>