ds_mobile_app/mobile/pages/chat/detail.vue

<!-- 聊天界面 -->
<template>
	<view class="chat_interface">
		<!-- <view class="transparent_mask" @click="closeSomeModel"></view> -->
		<!-- 头部 start -->
		<!-- #ifndef MP-WEIXIN -->
		<!-- <view class="chat_interface_header" :style="'top:'+chatTop+'px'">
			<view class="chat_header_left" @click="goBack">
				<image :src="imgUrl + 'chat/back.png'" mode=""></image>
			</view>
			<view class="chat_header_cen">{{chatBaseInfo.storeName}}</view>

			<view class="chat_header_right" @click="goStore">{{$L('店铺')}}</view>
		</view> -->
		<!-- #endif -->
		<!-- 头部 end -->
		<!-- 聊天信息 start -->
		<view class="chat_con">
			<scroll-view class="chat_des" scroll-y :scroll-into-view="toChatLogBottom" @scrolltoupper="chatLogToTop"
				:scroll-top="scrollTop" :style="'height:'+calHeight">
				<!-- 聊天记录 start -->
				<view class="chat_record">
					<view v-for="(item, index) in msgList" :key="index" v-if="msgList.length>0">
						<template v-if="item.msgType == 'main_goods'">
							<!-- 商品链接 start -->
							<view :id="'item' + index" class="chat_goods_link"
								@click="goGoodsDetail(item.msgContent.productId)">
								<view class="goods_links">
									<view class="goods_image">
										<image :src="item.msgContent.goodsImage" mode="aspectFill"></image>
									</view>
									<view class="goods_des">
										<view class="goods_name"> {{item.msgContent.goodsName}}</view>
										<view class="goods_bottom">
											<view class="goods_price">￥{{item.msgContent.goodsPrice.toFixed(2)}}</view>
											<view class="send_link" @click.stop="sendGoods(item.msgContent)">
												{{$L('发送链接')}}
											</view>
										</view>
									</view>
								</view>
							</view>
							<!-- 商品链接 end -->
						</template>

						<template v-else-if="item.msgType == 'main_order'">
							<!-- 从订单详情进入的话显示订单信息start -->
							<view :id="'item' + index" class="send_uri" @click="goOrderDetail(item.msgContent.orderSn)">
								<view class="record_text_type">
									{{item.msgContent.orderStateValue}}
								</view>
								<view class="record_type_order_info">
									<view class="record_order">
										订单号:{{item.msgContent.orderSn}}
									</view>
									<view class="record_order_time">
										<view>{{item.msgContent.createTime.slice( 5, 16)}}</view>
									</view>
								</view>
								<view class="record_type_order_content">
									<view class="record_order_image">
										<image :src="item.msgContent.orderProductList[0].goodsImage" mode="aspectFit">
										</image>
									</view>
									<view class="record_order_con">
										<view class="record_order_name">
											{{item.msgContent.orderProductList[0].goodsName}}
										</view>
										<view class="record_price_and_status">
											<view class="record_order_price">
												￥{{item.msgContent.orderProductList[0].goodsPrice}}</view>
											<view class="record_order_status handel_send_url"
												@click.stop="sendOrder(item.msgContent,'',0)">{{$L('发送链接')}}</view>
										</view>
									</view>
								</view>
							</view>
							<!-- 发送链接end -->
						</template>

						<template v-else>
							<!-- 聊天时间  start-->
							<view
								v-if="index==0||(index>0&&$isShowTime(index>0?msgList[index-1].addTime:'',item.addTime))"
								class="chat_info_time">
								<text>{{$formatChatTime(item.addTime)}}</text>
							</view>
							<!-- 聊天时间  end-->

							<!-- 客服回复记录  start-->
							<view :id="'item' + index" v-if="item.userType == 2" class="customer_service_info">
								<view class="customer_service_avatar" @click="goStore">
									<image :src="chatBaseInfo.storeLogo" mode="aspectFit"></image>
								</view>
								<!-- 消息记录类型 start -->
								<view class="customer_record">
									<!-- 文本类型 start -->
									<view v-if="item.msgType == 1" class="record_type_text">
										<rich-text :nodes="JSON.parse(item.msgContent).content"></rich-text>
									</view>
									<!-- 文本类型 end -->

									<!-- 订单类型 start-->
									<view v-if="item.msgType == 4" class="record_type_order"
										@click="goOrderDetail(item.msgContent,1)">
										<view class="record_type_order_info">
											<view class="record_order">
												订单号:{{JSON.parse(item.msgContent).orderSn}}
											</view>
											<view class="record_order_time">
												<view>{{JSON.parse(item.msgContent).createTime. slice( 5, 16)}}</view>
											</view>
										</view>
										<view class="record_type_order_content">
											<view class="record_order_image">
												<image :src="JSON.parse(item.msgContent).goodsImage" mode="aspectFit">
												</image>
											</view>
											<view class="record_order_con">

												<view class="record_order_name">
													{{JSON.parse(item.msgContent).goodsName}}&nbsp;{{JSON.parse(item.msgContent).specValues}}
												</view>
												<view class="record_price_and_status">
													<view class="record_order_price">
														￥{{JSON.parse(item.msgContent).goodsPrice}}
													</view>
													<view class="record_order_status">
														{{JSON.parse(item.msgContent).orderStateValue}}
													</view>
												</view>

											</view>
										</view>
									</view>
									<!-- 订单类型 end -->

									<!-- 商品类型 start -->
									<view v-if="item.msgType == 3" class="good_type_order">
										<view class="record_type_order_content"
											@click="goGoodsDetail(item.msgContent,1)">
											<view class="record_order_image">
												<image :src="JSON.parse(item.msgContent).goodsImage" mode="aspectFit">
												</image>
											</view>
											<view class="record_order_con">

												<view class="record_order_name">
													{{JSON.parse(item.msgContent).goodsName}}
												</view>
												<view class="record_price_and_status">
													<view class="record_order_price">
														￥{{JSON.parse(item.msgContent).goodsPrice.toFixed(2)}}</view>

												</view>

											</view>
										</view>
									</view>
									<!-- 商品类型 end -->

									<!-- 图片类型 start -->
									<view v-if="item.msgType == 2" class="record_type_image">
										<!-- 宽 > 长 -->
										<image :src="JSON.parse(item.msgContent).pic" mode="aspectFit"
											class="record_type_image_width"
											v-if="JSON.parse(item.msgContent).width>JSON.parse(item.msgContent).height"
											@click="TanPreviewImage(item.msgContent)" @error="imageError(item,index)">
										</image>
										<!-- 宽 < 长 -->
										<image :src="JSON.parse(item.msgContent).pic" mode="aspectFit"
											class="record_type_image_height"
											v-if="JSON.parse(item.msgContent).width<JSON.parse(item.msgContent).height"
											@click="TanPreviewImage(item.msgContent)" @error="imageError(item,index)">
										</image>

										<image :src="JSON.parse(item.msgContent).pic" mode="aspectFit"
											class="record_type_image_quate"
											v-if="JSON.parse(item.msgContent).width==JSON.parse(item.msgContent).height"
											@click="TanPreviewImage(item.msgContent)" @error="imageError(item,index)">
										</image>
									</view>
									<!-- 图片类型 end -->
								</view>
								<!-- 消息记录类型 end -->
							</view>
							<!-- 客服回复记录  end-->

							<!-- 用户消息记录  start-->
							<view v-if="item.userType == 1" class="user_info_record">
								<!-- 消息记录类型 start -->
								<view :id="'item' + index" class="user_record">

									<!-- 文本类型 start -->
									<view v-if="item.msgType == 1" class="record_type_text">
										<rich-text :nodes="JSON.parse(item.msgContent).content"></rich-text>
										<!-- 已读/未读 start -->
										<view
											:class="{record_type_text_type:item.msgState==1,record_type_text_type_off:item.msgState==2}">
											{{item.msgState==1?'已读':'未读'}}
										</view>
										<!-- 已读/未读 end -->
									</view>
									<!-- 文本类型 end -->

									<!-- 订单类型 start-->
									<view v-if="item.msgType == 4" class="record_type_order"
										@click="goOrderDetail(item.msgContent,1)">
										<view class="record_type_order_info">
											<view class="record_order">
												订单号:{{JSON.parse(item.msgContent).orderSn}}
											</view>
											<view class="record_order_time">
												<view>{{JSON.parse(item.msgContent).createTime. slice( 5, 16)}}</view>
											</view>
										</view>
										<view class="record_type_order_content">
											<view class="record_order_image">
												<image :src="JSON.parse(item.msgContent).goodsImage" mode="aspectFit">
												</image>
											</view>
											<view class="record_order_con">

												<view class="record_order_name">
													{{JSON.parse(item.msgContent).goodsName}}
												</view>
												<view class="record_price_and_status">
													<view class="record_order_price">
														￥{{JSON.parse(item.msgContent).goodsPrice}}
													</view>
													<view class="record_order_status">
														{{JSON.parse(item.msgContent).orderStateValue}}
													</view>
												</view>

											</view>
										</view>
										<!-- 已读/未读 start -->
										<view
											:class="{record_type_text_type:item.msgState==1,record_type_text_type_off:item.msgState==2}">
											{{item.msgState==1?'已读':'未读'}}
										</view>
										<!-- 已读/未读 end -->
									</view>
									<!-- 订单类型 end -->

									<!-- 商品类型 start -->
									<view v-if="item.msgType == 3" class="good_type_order">
										<view class="record_type_order_content"
											@click="goGoodsDetail(item.msgContent,1)">
											<view class="record_order_image">
												<image :src="JSON.parse(item.msgContent).goodsImage" mode="aspectFit">
												</image>
											</view>
											<view class="record_order_con">

												<view class="record_order_name">
													{{JSON.parse(item.msgContent).goodsName}}
												</view>
												<view class="record_price_and_status">
													<view class="record_order_price">
														￥{{JSON.parse(item.msgContent).goodsPrice.toFixed(2)}}</view>

												</view>

											</view>
										</view>
										<!-- 已读/未读 start -->
										<view
											:class="{record_type_text_type:item.msgState==1,record_type_text_type_off:item.msgState==2}">
											{{item.msgState==1?'已读':'未读'}}
										</view>
										<!-- 已读/未读 end -->
									</view>
									<!-- 商品类型 end -->


									<!-- 图片类型 start -->
									<view v-if="item.msgType == 2" class="record_type_image">
										<!-- 宽 > 长 -->
										<image :src="JSON.parse(item.msgContent).pic" mode="aspectFit"
											class="record_type_image_width"
											v-if="JSON.parse(item.msgContent).width>JSON.parse(item.msgContent).height"
											@click="TanPreviewImage(item.msgContent)" @error="imageError(item,index)"
											@load="imageLoad(item)">
										</image>
										<!-- 宽 < 长 -->
										<image :src="JSON.parse(item.msgContent).pic" mode="aspectFit"
											class="record_type_image_height"
											v-if="JSON.parse(item.msgContent).width<JSON.parse(item.msgContent).height"
											@click="TanPreviewImage(item.msgContent)" @error="imageError(item,index)"
											@load="imageLoad(item)">
										</image>
										<!-- 宽 == 长 -->
										<image :src="JSON.parse(item.msgContent).pic" mode="aspectFit"
											class="record_type_image_quate"
											v-if="JSON.parse(item.msgContent).width==JSON.parse(item.msgContent).height"
											@click="TanPreviewImage(item.msgContent)" @error="imageError(item,index)"
											@load="imageLoad(item)">
										</image>
										<!-- 已读/未读 start -->
										<view
											:class="{record_type_text_type:item.msgState==1,record_type_text_type_off:item.msgState==2}">
											{{item.msgState==1?'已读':'未读'}}
										</view>
										<!-- 已读/未读 end -->
									</view>
									<!-- 图片类型 end -->


								</view>
								<!-- 消息记录类型 end -->
								<view class="user_info_avatar" @click="goMemberCenter">
									<image :src="userCenterData.memberAvatar" mode="aspectFill"></image>
								</view>
							</view>
							<!-- 用户消息记录  end-->
						</template>

					</view>
				</view>
				<!-- 聊天记录 end -->


			</scroll-view>


			<!-- 聊天框 start -->
			<view class="chat_info_con">
				<view class="chat_info">
					<!-- <input type="text" :style="{'width':inputVal?'526rpx':'578rpx'}" class="chat_info_input"
						v-model="inputVal" placeholder="请输入您要咨询的问题"
						placeholder-style="font-size:26rpx;color:#999;font-weight:400" confirm-type="send"
						@confirm="send" @focus="inputFocus" cursor-spacing="20" /> -->
					
					<editor id="editor" placeholder="请输入您要咨询的问题" :style="{'width':inputVal!='<p><br></p>'&&inputVal?'526rpx':'578rpx'}" class="chat_info_input" @input="editorContent($event)" @ready="onEditorReady" @focus="inputFocus" cursor-spacing="20"></editor>

					<image :src="imgUrl + 'chat/expression.png'" mode="" class="chat_info_expression" @click="moreOptions(1)"></image>
					<image :src="optionPic" mode="" class="chat_info_options" @click="moreOptions(0)" v-if="inputVal=='<p><br></p>'||!inputVal">
					</image>
					<div type="default" class="send_button" @touchend.prevent="send" v-if="inputVal!='<p><br></p>'&&inputVal">发送</div>
				</view>
				<!-- 更多操作 start -->
				<view class="info_options" v-if="moreOptionsModel">
					<block v-if="modelFlag==0">
						<view class="info_options_pre" @click="sendPic(0)">
							<view class="tpe">
								<image :src="imgUrl + 'chat/album.png'" mode=""></image>
							</view>
							<text>{{$L('相册')}}</text>
						</view>
						<view class="info_options_pre" @click="sendPic(1)">
							<view class="tpe">
								<image :src="imgUrl + 'chat/shot.png'" mode=""></image>
							</view>
							<text>{{$L('拍摄')}}</text>
						</view>
						<view class="info_options_pre" @click="openMoreListModel(0)">
							<view class="tpe">
								<image :src="imgUrl + 'chat/order.png'" mode=""></image>
							</view>
							<text>{{$L('订单')}}</text>
						</view>
						<view class="info_options_pre" @click="openMoreListModel(1)">
							<view class="tpe">
								<image :src="imgUrl + 'chat/footprint.png'" mode=""></image>
							</view>
							<text>{{$L('足迹')}}</text>
						</view>
						<view class="info_options_pre" @click="openMoreListModel(2)">
							<view class="tpe">
								<image :src="imgUrl + 'chat/recommend.png'" mode=""></image>
							</view>
							<text>{{$L('推荐')}}</text>
						</view>
						<view class="info_options_pre" @click="commonProblem">
							<view class="tpe">
								<image :src="imgUrl + 'chat/common_problem.png'" mode=""></image>
							</view>
							<text>{{$L('常见问题')}}</text>
						</view>
					</block>
					<block v-if="modelFlag==1" >
						<view class="emoji_item" v-for="(item,index) in emoji" :key="index" @click="insertEmoji(item.src)">
							<img :src="(emojiPath)+''+(item.src)" alt="">
						</view>
					</block>
				</view>
				<!-- 更多操作 end -->
			</view>
			<!-- 聊天框 end -->
		</view>

		<!-- 常见问题弹框 start -->
		<uni-popup ref="commonProblemModel" type="bottom">
			<view class="common_problem">
				<view class="common_problem_title">
					<text>{{$L('请选择您要咨询的问题')}}</text>
					<view class="common_problem_close" @click="closeModel">
						<image :src="imgUrl + 'chat/close.png'" mode=""></image>
					</view>
				</view>
				<scroll-view scroll-y="true" v-if="commonProblemList.length>0">
					<view class="common_problem_list">
						<view class="common_problem_pre" v-for="(com,comIndex) in commonProblemList" :key="comIndex"
							@click="sendProblem(com)">
							<view class="common_problem_text">{{com.msgContent}}</view>
						</view>
					</view>
				</scroll-view>
				<view class="empty_page" v-if="!orderList.length>0&&firstloadinglist.problem">
					<image :src="imgUrl+'empty_goods.png'" mode=""></image>
					<text>暂无常见问题</text>
				</view>
			</view>
		</uni-popup>
		<!-- 常见问题弹框 end -->






		<!-- 订单，足迹，推荐 弹框 start -->
		<uni-popup ref="moreListModel" type="bottom">
			<view class="more_list_model">
				<view class="about_more_title">
					<view class="about_more_title_left" v-if="aboutMore && aboutMore.length > 0">
						<view class="about_more_title_pre" :class="{current:item.aboutId == currentAboutId}"
							v-for="(item,index) in aboutMore" :key="index" @click="openMoreListModel(item.aboutId)">
							{{item.title}}
						</view>
					</view>
					<view class="about_more_close" @click="closeModel">
						<image :src="imgUrl + 'chat/close.png'" mode=""></image>
					</view>
				</view>
				<view class="about_more_con">
					<!-- 我的订单 start -->
					<view v-if="currentAboutId == 0">
						<scroll-view scroll-y="true" class="order_list_scroll" @scrolltolower="loadData(currentAboutId)"
							v-if="orderList.length>0">
							<view class="about_more_list" v-for="(orderItem,orderIndex) in orderList" :key="orderIndex">
								<view class="about_more_pre">
									<view class="order_title">
										<text>{{$L('订单号')}}:{{orderItem.orderSn}}</text>
										<text>{{orderItem.createTime}}</text>
									</view>
									<view class="order_list"
										v-for="(goodsItem,goodsIndex) in orderItem.orderProductList" :key="goodsIndex"
										@click="sendOrder(orderItem,'bottom',goodsIndex)">
										<view class="order_list_pre" v-if="goodsIndex<orderItem.limit">
											<view class="order_pre_img">
												<image :src="goodsItem.productImage" mode=""></image>
											</view>
											<view class="order_pre_des">
												<view class="order_pre_name">
													{{goodsItem.goodsName}}&nbsp;{{goodsItem.specValues}}
												</view>
												<view class="order_pre_des_bot">
													<view class="order_pre_price_active order_pre_price">
														￥{{goodsItem.productShowPrice.toFixed(2)}}</view>
													<view
														:class="{order_status:true,order_status_awaits:orderItem.orderState==20||orderItem.orderState==10||orderItem.orderState==30,order_status_await:orderItem.orderState==50||orderItem.orderState==0}">
														{{orderItem.orderStateValue}}
													</view>

													<view class="order_pre_link"
														@click.stop="sendGoods(goodsItem,'bottom_order')">
														{{$L('发送商品链接')}} >

													</view>

												</view>

											</view>
										</view>
									</view>
									<view class="unfold_fold" @click.stop="unfold(orderItem)"
										v-if="orderItem.orderProductList.length>2">
										<block>
											<text v-if="orderItem.isFold==true">{{$L('展开全部')}}</text>
											<text v-if="orderItem.isFold==false">{{$L('收起全部')}}</text>
											<image :src="imgUrl + 'chat/unfold.png'" mode=""
												v-if="orderItem.isFold==true"></image>
											<image :src="imgUrl + 'chat/fold.png'" mode=""
												v-if="orderItem.isFold==false"></image>
										</block>

									</view>

								</view>
							</view>
							<loadingState v-if="loadingState == 'first_loading'||orderList.length > 0"
								:state='loadingState' />
						</scroll-view>
						<view class="empty_page" v-if="!orderList.length>0&&firstloadinglist.order">
							<image :src="imgUrl+'empty_goods.png'" mode=""></image>
							<text>暂无订单数据</text>
						</view>
					</view>

					<!-- 我的订单 end -->
					<!-- 我的足迹 start -->
					<view v-if="currentAboutId == 1">
						<scroll-view scroll-y="true" class="footprint_list_scroll"
							@scrolltolower="loadData(currentAboutId)" v-if="footprint.length>0">
							<view class="footprint_list" v-for="(foot,footIndex) in footprint" :key="footIndex">
								<view class="order_list_pre" @click="sendGoods(foot,'footprint')">
									<view class="order_pre_img">
										<image :src="foot.goodsImage" mode=""></image>
									</view>
									<view class="order_pre_des">
										<view class="order_pre_name">{{foot.goodsName}}</view>
										<view class="order_pre_des_bot">
											<view class="order_pre_price order_pre_price_active">
												￥{{foot.productPrice.toFixed(2)}}</view>
											<view class="order_pre_link">{{$L('发送商品链接')}} ></view>
										</view>
									</view>
								</view>
							</view>
							<loadingState v-if="loadingState == 'first_loading'||footprint.length > 0"
								:state='loadingState' />
						</scroll-view>
						<view class="empty_page" v-if="!footprint.length>0&&firstloadinglist.foot">
							<image :src="imgUrl+'empty_goods.png'" mode=""></image>
							<text>暂无足迹数据</text>
						</view>
					</view>

					<!-- 我的足迹end-->
					<!-- 店铺推荐 start -->
					<view v-if="currentAboutId == 2">
						<scroll-view scroll-y="true" class="footprint_list_scroll" style="width:710rpx"
							@scrolltolower="loadData(currentAboutId)" v-if="storeRecom.length>0">
							<view class="footprint_list" v-for="(recom,recomIndex) in storeRecom" :key="recomIndex">
								<view class="order_list_pre" @click="sendGoods(recom,'rec')">
									<view class="order_pre_img">
										<image :src="recom.goodsImage" mode=""></image>
									</view>
									<view class="order_pre_des">
										<view class="order_pre_name">{{recom.goodsName}}</view>
										<view class="order_pre_des_bot">
											<view class="order_pre_price order_pre_price_active">
												￥{{recom.goodsPrice.toFixed(2)}}</view>
											<view class="order_pre_link">{{$L('发送商品链接')}} ></view>
										</view>
									</view>
								</view>
							</view>
							<loadingState v-if="loadingState == 'first_loading'||storeRecom.length > 0"
								:state='loadingState' />
						</scroll-view>
						<view class="empty_page" v-if="!storeRecom.length>0&&firstloadinglist.recom">
							<image :src="imgUrl+'empty_goods.png'" mode=""></image>
							<text>暂无商品数据</text>
						</view>
					</view>
					<!-- 店铺推荐 end-->
				</view>
			</view>
		</uni-popup>
		<!-- 订单，足迹，推荐 弹框 end -->
		<!-- 聊天信息 end -->
	</view>
</template>

<script>
	import loadingState from "@/components/loading-state.vue";
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import io from '@hyoga/uni-socket.io';
	import {emoji,emojiPath} from '@/utils/live.js'
	import {
		mapState
	} from 'vuex';
	export default {
		components: {
			loadingState,
			uniPopup
		},
		data() {
			return {
				connectBaseData: {}, //每次通信必传信息
				socketInfo: '', //socket连接成功返回的房间信息
				imgUrl: getApp().globalData.imgUrl,
				uploadSize: getApp().globalData.uploadMaxSize,
				msgList: [], //消息列表
				moreOptionsModel: false, //聊天框 更多操作是否显示
				currentAboutId: 0, //订单，足迹，推荐，弹框，默认选中第一个（即订单）
				aboutMore: [{
					title: '我的订单',
					aboutId: 0,
				}, {
					title: '我的足迹',
					aboutId: 1,
				}, {
					title: '店铺推荐',
					aboutId: 2,
				}],
				inputVal: '', //输入框内容,
				orderList: [],
				footprint: [],
				storeRecom: [],
				storeId: '',
				orderCurrent: 1,
				footCurrent: 1,
				storeCurrent: 1,
				toChatLogBottom: '', //聊天界面滚动到页面最底部
				minMsgId: '', //当前消息聊天记录列表里的最小消息id
				isLoadMoreChatTop: true, //页面滑到顶部是否加载更多数据，默认true，true为加载
				isFirstLoadingChatLog: true, //是否是第一次渲染聊天记录
				comCurrent: 1,
				commonProblemList: [],
				picture: '',
				optionPic: getApp().globalData.imgUrl + 'chat/more_options.png',
				loadingState: '',
				firstloadinglist: {
					order: false,
					foot: false,
					recom: false,
					problem: false
				},
				scrollTop: 0,
				// #ifdef APP-PLUS || MP-WEIXIN
				calHeight: 'calc(100vh - 98rpx)',
				// #endif
				// #ifdef H5
				calHeight: 'calc(100vh - 98rpx - 88rpx)',
				// #endif
				scrollHeight: 0,
				modelFlag:null,
				emoji,
				emojiPath
			};
		},
		computed: {
			...mapState(['userInfo', 'chatBaseInfo', 'userCenterData'])
		},
		async onLoad(options) {
			this.storeId = options.vid
			await this.initChatLog();
			this.initSocket();

			uni.setNavigationBarTitle({
				title: this.chatBaseInfo.storeName
			})

		},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {
			if (this.socket) {
				this.closeSocket();
			}
		},

		onBackPress() {
			this.closeSocket();
		},

		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: '/pages/store/shopHomePage?vid=' + this.chatBaseInfo.storeId
			})
		},

		//#ifdef APP-PLUS ||MP-WEIXIN
		onReady() {
			let _this = this
			let obj = uni.createSelectorQuery().select('.chat_des')
			obj.boundingClientRect(function(data) { // data - 各种参数
				_this.scrollHeight = data.height
				setTimeout(() => {
					_this.$nextTick(function() {
						_this.scrollTop = _this.scrollHeight
						_this.scrollTop = 99999999
					})
				}, 100)
			}).exec()
		},
		// #endif


		watch: {
			moreOptionsModel: {
				handler(nv, ov) {
					if (!nv) {
						// #ifdef H5
						this.calHeight = 'calc(100vh - 98rpx - 88rpx)'
						// #endif
						// #ifdef APP-PLUS || MP-WEIXIN
						this.calHeight = 'calc(100vh - 98rpx)'
						// #endif
					} else {
						// #ifdef H5
						this.calHeight = 'calc(100vh - 418rpx - 98rpx - 88rpx)'
						this.$nextTick(function() {
							this.scrollTop = 9999
						})
						// #endif
						// #ifdef APP-PLUS || MP-WEIXIN
						this.calHeight = 'calc(100vh - 418rpx - 98rpx)'
						this.$nextTick(function() {
							this.scrollTop = 99999999
							this.scrollTop++
						})
						// #endif
					}
				},
				deep: true
			}
		},

		methods: {
			//点击图片预览放大
			TanPreviewImage(val) {
				let imageUrl = JSON.parse(val).pic
				var images = [];
				images.push(imageUrl);
				uni.previewImage({ // 预览图片  图片路径必须是一个数组 => ["http://192.168.100.251:8970/6_1597822634094.png"]
					current: 0,
					urls: images,
					longPressActions: { //长按保存图片到相册
						itemList: ['保存图片'],
						success: (data) => {
							uni.saveImageToPhotosAlbum({ //保存图片到相册
								filePath: payUrl,
								success: function() {
									uni.showToast({
										icon: 'success',
										title: '保存成功'
									})
								},
								fail: (err) => {
									uni.showToast({
										icon: 'none',
										title: '保存失败，请重新尝试'
									})
								}
							});
						},
						fail: (err) => {}
					}
				});
			},
			//进入聊天详情页首次获取聊天记录
			async initChatLog() {
				await this.getCHatLog(0);
			},
			//获取聊天记录
			async getCHatLog(msgId) {
				let param = {}
				param.data = {}
				param.url = 'v3/helpdesk/front/chat/msgLog'
				param.method = 'POST'
				param.data.storeId = this.storeId;
				if (msgId) {
					param.data.msgId = msgId;
				}
				await this.$request(param).then(res => {
					if (res.state == 200) {
						if (res.data.length > 0) {
							if (msgId) {
								this.changeMsgState(res.data);
							}
							this.minMsgId = res.data[0].msgId;
							this.msgList = res.data.concat(this.msgList);
							if (res.data.length < 10) {
								this.isLoadMoreChatTop = false;
							}
						} else {
							this.isLoadMoreChatTop = false;
						}
						if (!msgId && this.chatBaseInfo.source == 'goods') {
							this.msgList.push({
								msgType: 'main_goods',
								msgContent: this.chatBaseInfo.showData
							});
						}
						if (!msgId && this.chatBaseInfo.source == 'order') {
							this.msgList.push({
								msgType: 'main_order',
								msgContent: this.chatBaseInfo.showData
							});
						}
						if (this.isFirstLoadingChatLog) {
							let _this = this;
							setTimeout(() => {
								this.toChatLogBottom = this.msgList.length > 0 ? 'item' + (this.msgList
									.length - 1) : '0';
							}, 1)
						}
						this.isFirstLoadingChatLog = false;
					}
				})
			},
			//修改当前消息列表的未读消息为已读
			changeMsgState(data) {
				let tmpMsgIdArray = [];
				data.map(item => {
					if (item.userType == 2 && item.msgState == 2) {
						tmpMsgIdArray.push(item.msgId);
					}
				});
				if (tmpMsgIdArray.length > 0) {
					this.socket.emit("read_msg", {
						msgIds: tmpMsgIdArray.join(','),
						...this.connectBaseData
					});
				}
			},
			initSocket() {
				if (this.socket) {
					this.closeSocket();
				}
				let sourceUrl = '';
				//#ifdef APP-PLUS
				sourceUrl += 'APP:';
				//#endif
				//#ifdef H5
				sourceUrl += 'H5:';
				//#endif
				//#ifdef MP-WEIXIN
				sourceUrl += '微信小程序:';
				//#endif

				if (this.chatBaseInfo.source == 'chat_list') {
					sourceUrl += '从聊天列表页进入'
				} else if (this.chatBaseInfo.source == 'order') {
					sourceUrl += '从订单详情页进入'
				} else if (this.chatBaseInfo.source == 'store') {
					sourceUrl += '从店铺详情页进入'
				} else if (this.chatBaseInfo.source == 'goods') {
					sourceUrl += '从商品详情页进入'
				}
				this.connectBaseData = {
					storeId: this.chatBaseInfo.storeId,
					userId: this.chatBaseInfo.memberId,
					role: 1,
					sourceUrl: sourceUrl
				};
				this.socket = io(getApp().globalData.chatUrl, {
					reconnection: true,
					jsonp: true,
					transports: ['websocket', 'polling'],
					timeout: 5000,
				});
				this.socket.on("connect", () => {
					//监听连接成功事件
					this.socket.emit("connect_success", this.connectBaseData);
					//连接成功之后获取房间信息
					this.socket.on("get_room_info", e => {
						this.socketInfo = e;
					})
					//连接成功 需要将当前消息列表：未读消息改为已读状态
					if (this.msgList.length > 0) {
						this.changeMsgState(this.msgList);
					}
					//监听接收消息
					this.socket.on("get_send_msg", e => {
						if (e.vendorId == this.socketInfo.vendorId) {
							this.msgList.push(e);
							// #ifdef H5 || MP-WEIXIN
							setTimeout(() => {
								this.toChatLogBottom = this.msgList.length > 0 ? 'item' + (this
									.msgList.length - 1) : '0';
							}, 1)
							// #endif

							// #ifdef APP-PLUS
							this.$nextTick(function() {
								this.scrollTop++
								this.scrollTop = 99999999
							})
							// #endif

						}
					});
					//监听消息已读事件
					this.socket.on("get_read_msg", e => {
						let allData = e.msgIds.split(',');
						this.msgList.map(item => {
							if (allData.indexOf(item.msgId)) {
								item.msgState = 1;
							}
						});
					});
				});
			},

			//聊天记录滑动到页面顶部
			chatLogToTop() {
				this.getCHatLog(this.minMsgId);
			},
			
			editorContent(e){
				this.inputVal = e.detail.html
			},
			
			onEditorReady() {
				uni.createSelectorQuery().select('#editor').context((res) => {
					this.editorCtx = res.context
				}).exec()
			},
			
			insertEmoji(src){
				this.editorCtx.insertImage({
					src:this.emojiPath+''+src,
					alt: 'img',
				})
			},

			inputFocus() {
				// #ifndef MP-WEIXIN
				this.optionPic = this.imgUrl + 'chat/more_options.png'
				// #endif

				// #ifdef H5
				this.$nextTick(function() {
					this.scrollTop = 9999
				})
				// #endif
				// #ifdef APP-PLUS || MP-WEIXIN
				this.$nextTick(function() {
					this.scrollTop = 99999999
					this.scrollTop++
				})
				// #endif

				
				setTimeout(() => {
					this.moreOptionsModel = false;
				}, 10)
				

			},

			imageLoad(item) {
				this.scrollTop += JSON.parse(item.msgContent).height
			},

			//发送按钮事件
			send() {
				let content = this.inputVal.replace(/(<\/?p.*?>)/g,''); //没有内容的话直接结束
				if (!content.trim()&&!content) {
					return false;
				}

				let msgData = {};
				msgData.memberId = this.socketInfo.memberId;
				msgData.vendorId = this.socketInfo.vendorId;
				msgData.msgType = '1'; //1.text(文本) 2.img(图片) 3.goods(商品) 4.order(订单)用户 5.常见问题
				msgData.msg = {
					content: content
				};
				this.socket.emit("send_msg", {
					...msgData,
					...this.connectBaseData
				});
				// #ifdef APP-PLUS
				setTimeout(() => {
					this.$nextTick(function() {
						this.scrollTop = 99999999
						this.scrollTop++
					})
				}, 10)
				// #endif
				this.inputVal = ''; //清空输入框的内容
				this.editorCtx.clear({})

			},

			//选择图片(相册)
			choosePicture() {
				return new Promise(resolve => {
					uni.chooseImage({
						count: 1,
						sizeType: ['original', 'compressed'],
						//可选择原图或压缩后的图片
						sourceType: ['album'],
						success: res => {
							resolve(res)
						}
					})
				})
			},

			//拍摄图片
			cameraShot() {
				return new Promise(resolve => {
					uni.chooseImage({
						count: 1,
						sizeType: ['original', 'compressed'],
						//可选择原图或压缩后的图片
						sourceType: ['camera'],
						success: res => {
							resolve(res)
						}
					})
				})
			},


			//上传图片
			async uploadPic(type) {
				let result = ''
				if (type == 0) {
					result = await this.choosePicture()
				} else if (type == 1) {
					result = await this.cameraShot()
				}
				if (result.tempFiles[0].size > this.uploadSize * 1024 * 1024) {
					uni.showToast({
						title: '图片超过20M',
						icon: 'none'
					})
					return;
				} else {
					return new Promise((resolve, reject) => {
						uni.uploadFile({
							url: getApp().globalData.apiUrl + '/v3/oss/common/upload',
							filePath: result.tempFilePaths[0],
							name: 'file',
							formData: {
								'source': 'goods',
								'file': result.tempFilePaths[0]
							},
							success: resup => {
								resup = JSON.parse(resup.data);
								if (resup.state == 200) {
									resolve(resup)
								}
							}
						});
					})
				}

			},


			//发送图片
			async sendPic(type) {
				if (type == 0) {
					this.picture = await this.uploadPic(0)
				} else if (type == 1) {
					this.picture = await this.uploadPic(1)
				}
				let msgData = {};
				if (this.picture) {
					msgData.memberId = this.socketInfo.memberId;
					msgData.vendorId = this.socketInfo.vendorId;
					msgData.msgType = '2'; //1.text(文本) 2.img(图片) 3.goods(商品) 4.order(订单)用户 5.常见问题
					msgData.msg = {
						pic: this.picture.data.url,
						width: this.picture.data.width,
						height: this.picture.data.height
					};
					this.socket.emit("send_msg", {
						...msgData,
						...this.connectBaseData
					});
					// #ifdef APP-PLUS
					setTimeout(() => {
						this.$nextTick(function() {
							this.scrollTop = 99999999
							this.scrollTop++
						})
					}, 200)
					// #endif
					this.moreOptionsModel = false;
					this.optionPic = this.imgUrl + 'chat/more_options.png'
				}
			},

			//发送商品事件,source来源  默认为空，表示main_goods里的商品  footprint、rec 表示足迹或者推荐商品 bottom_order 表示底部订单里的商品
			sendGoods(goodsData, source) {
				let msgData = {};
				msgData.memberId = this.socketInfo.memberId;
				msgData.vendorId = this.socketInfo.vendorId;
				msgData.msgType = '3'; //1.text(文本) 2.img(图片) 3.goods(商品) 4.order(订单)用户 5.常见问题
				msgData.msg = {
					productId: goodsData.productId,
					goodsImage: goodsData.goodsImage,
					goodsName: goodsData.goodsName,
					goodsPrice: goodsData.goodsPrice,
				};
				if (source == 'footprint') {
					msgData.msg.goodsPrice = goodsData.productPrice;
				} else if (source == 'bottom_order') {
					msgData.msg.goodsImage = goodsData.productImage;
					msgData.msg.goodsPrice = goodsData.productShowPrice;
				} else if (source == 'rec') {
					msgData.msg.productId = goodsData.defaultProductId
				}
				this.socket.emit("send_msg", {
					...msgData,
					...this.connectBaseData
				});
				// #ifdef APP-PLUS
				setTimeout(() => {
					this.$nextTick(function() {
						this.scrollTop = 99999999
						this.scrollTop++
					})
				}, 200)
				// #endif
				this.closeModel();
			},
			//发送订单事件,source来源  默认为空，表示main_order里的订单  bottom表示来自于底部我的订单
			sendOrder(orderData, source = '', index) {
				let msgData = {};
				msgData.memberId = this.socketInfo.memberId;
				msgData.vendorId = this.socketInfo.vendorId;
				msgData.msgType = '4'; //1.text(文本) 2.img(图片) 3.goods(商品) 4.order(订单)用户 5.常见问题
				let tempGoodsData = orderData.orderProductList[index];
				if (source) {
					tempGoodsData.goodsImage = tempGoodsData.productImage;
					tempGoodsData.goodsPrice = tempGoodsData.productShowPrice;
				}
				msgData.msg = {
					'orderSn': orderData.orderSn,
					'orderStateValue': orderData.orderStateValue,
					'createTime': orderData.createTime,
					'productId': tempGoodsData.productId,
					'goodsImage': tempGoodsData.goodsImage,
					'goodsName': tempGoodsData.goodsName,
					'goodsPrice': tempGoodsData.goodsPrice
				};
				this.socket.emit("send_msg", {
					...msgData,
					...this.connectBaseData
				});
				// #ifdef APP-PLUS
				setTimeout(() => {
					this.$nextTick(function() {
						this.scrollTop = 99999999
						this.scrollTop++
					})
				}, 200)
				// #endif
				this.closeModel();
			},
			//发送常见问题
			sendProblem(problemData, source = "") {
				let msgData = {};
				msgData.memberId = this.socketInfo.memberId;
				msgData.vendorId = this.socketInfo.vendorId;
				msgData.msgType = '5'; //1.text(文本) 2.img(图片) 3.goods(商品) 4.order(订单)用户 5.常见问题
				msgData.msg = {
					content: problemData.msgContent,
					reply: problemData.msgReply
				};
				this.socket.emit("send_msg", {
					...msgData,
					...this.connectBaseData
				});
				// #ifdef APP-PLUS
				setTimeout(() => {
					this.$nextTick(function() {
						this.scrollTop = 99999999
						this.scrollTop++
					})
				}, 200)
				// #endif
				this.closeModel();
			},
			//关闭socket
			closeSocket() {
				if (this.socket) {
					this.socket.close();
				}
			},
			//聊天框 更多操作
			moreOptions(index) {
				if(this.modelFlag == index){
					this.moreOptionsModel = !this.moreOptionsModel;
				}
				this.modelFlag = index
				
				
				if (!this.inputVal && this.moreOptionsModel && this.modelFlag==0) {
					this.optionPic = this.imgUrl + 'chat/delt.png'
				}else{
					this.optionPic = this.imgUrl + 'chat/more_options.png'
				}



			},
			//打开常见问题弹框
			commonProblem() {
				this.$refs.commonProblemModel.open();
				this.moreOptionsModel = false;
				this.getComProblemList()
				this.optionPic = this.imgUrl + 'chat/more_options.png'
			},
			//关闭弹框
			closeModel() {
				this.$refs.commonProblemModel.close();
				this.$refs.moreListModel.close();
				this.optionPic = this.imgUrl + 'chat/more_options.png'
			},
			//打开订单，足迹，推荐弹框  type：0,订单，1：足迹，2：推荐
			openMoreListModel(type) {
				this.moreOptionsModel = false;
				this.$refs.moreListModel.open();
				this.currentAboutId = type;
				if (type == 0) {
					this.getOrderList()
				} else if (type == 1) {
					this.getFootPrint()
				} else if (type == 2) {
					this.getStoreRecom()
				}
				this.optionPic = this.imgUrl + 'chat/more_options.png'
			},
			//展开全部，收起全部
			unfold(item) {
				if (item.isFold) {
					item.limit = item.orderProductList.length
					item.isFold = false
				} else {
					item.limit = 2
					item.isFold = true
				}
			},
			//关闭所有弹框
			closeSomeModel() {
				this.moreOptionsModel = false;
			},
			//返回上一页
			goBack() {
				uni.navigateBack()
			},
			//进入店铺
			goStore() {
				uni.navigateTo({
					url: '/pages/store/shopHomePage?vid=' + this.chatBaseInfo.storeId
				})
			},
			//进入会员中心
			goMemberCenter() {
				uni.navigateTo({
					url: '/pages/user/info'
				})
			},
			//进入商品详情页 type为1，说明需要把json字符串转为对象，为空则直接使用
			goGoodsDetail(val, type) {
				let productId = val;
				if (type) {
					productId = JSON.parse(val).productId
				}
				uni.navigateTo({
					url: '/pages/product/detail?productId=' + productId
				})
			},

			//进入订单详情页 type为1，说明需要把json字符串转为对象，为空则直接使用
			goOrderDetail(val, type = '') {
				let orderSn = val;
				if (type) {
					orderSn = JSON.parse(val).orderSn
				}
				uni.navigateTo({
					url: '/pages/order/detail?orderSn=' + orderSn
				})
			},

			//订单列表
			getOrderList() {
				let params = {
					url: '/v3/business/front/orderInfo/myOrders',
					method: 'GET',
					data: {
						current: this.orderCurrent,
						storeId: this.storeId
					}
				}
				this.$request(params).then(res => {
					if (res.state == 200) {
						if (this.orderCurrent == 1) {
							this.orderList = res.data.list;
						} else {
							this.orderList = this.orderList.concat(res.data.list);
						}
						this.hasMore = this.$checkPaginationHasMore(res.data.pagination); //是否还有数据
						if (this.hasMore) {
							this.orderCurrent++;
							this.loadingState = 'allow_loading_more';
						} else {
							this.loadingState = 'no_more_data';
						}

						this.orderList.map(item => {
							this.$set(item, 'limit', 2)
							this.$set(item, 'isFold', true)
						})
						this.orderList.map(item => {
							if (item.orderState == 10) {
								item.orderStateValue = "待付款"
							}
						})
						this.firstloadinglist.order = true
					} else {
						this.$api.msg(res.msg);
					}
				})
			},

			//我的足迹
			getFootPrint() {
				let params = {
					url: 'v3/member/front/productLookLog/myFootprint',
					method: 'GET',
					data: {
						current: this.footCurrent,
						storeId: this.storeId
					}
				}
				this.$request(params).then(res => {
					if (res.state == 200) {
						if (this.footCurrent == 1) {
							this.footprint = res.data.list;
						} else {
							this.footprint = this.footprint.concat(res.data.list);
						}
						this.hasMore = this.$checkPaginationHasMore(res.data.pagination); //是否还有数据
						if (this.hasMore) {
							this.footCurrent++;
							this.loadingState = 'allow_loading_more';
						} else {
							this.loadingState = 'no_more_data';
						}
						this.firstloadinglist.foot = true
					} else {
						this.$api.msg(res.msg);
					}
				})
			},

			//店铺推荐
			getStoreRecom() {
				let params = {
					url: 'v3/goods/front/goods/goodsList',
					method: 'GET',
					data: {
						current: this.storeCurrent,
						storeId: this.storeId,
						sort: 7
					}
				}
				this.$request(params).then(res => {
					if (res.state == 200) {
						if (this.storeCurrent == 1) {
							this.storeRecom = res.data.list;
						} else {
							this.storeRecom = this.storeRecom.concat(res.data.list);
						}
						this.hasMore = this.$checkPaginationHasMore(res.data.pagination); //是否还有数据
						if (this.hasMore) {
							this.storeCurrent++;
							this.loadingState = 'allow_loading_more';
						} else {
							this.loadingState = 'no_more_data';
						}
						this.firstloadinglist.recom = true
					} else {
						this.$api.msg(res.msg);
					}
				})
			},

			//常见问题列表
			getComProblemList() {
				let params = {
					url: 'v3/helpdesk/front/chat/problemList',
					method: 'GET',
					data: {
						storeId: this.storeId,
						current: this.comCurrent,
					}
				}
				this.$request(params).then(res => {
					if (res.state == 200) {
						if (this.comCurrent == 1) {
							this.commonProblemList = res.data.list.filter(item => item.isShow == 1);
						} else {
							this.commonProblemList = this.commonProblemList.concat(res.data.list).filter(item =>
								item.isShow == 1);
						}
						this.hasMore = this.$checkPaginationHasMore(res.data.pagination); //是否还有数据
						if (this.hasMore) {
							this.comCurrent++;
							this.loadingState = 'allow_loading_more';
						} else {
							this.loadingState = 'no_more_data';
						}
						this.firstloadinglist.problem = true
					} else {
						this.$api.msg(res.msg);
					}
				})
			},


			loadData(id) {
				if (id == 0 && this.hasMore) {
					this.getOrderList()
				} else if (id == 1 && this.hasMore) {
					this.getFootPrint()
				} else if (id == 2 && this.hasMore) {
					this.getStoreRecom()
				}
			},

			imageError(item, index) {
				JSON.parse(this.msgList[index].msgContent).pic = imgUrl + 'errorImage.jpg'
			}

		},
	}
</script>

<style lang='scss'>
	page {
		background: #F5F5F5;
	}


	uni-page-wrapper {
		height: auto !important;
	}
	
	.emoji_item{
		height: 56rpx;
		margin: 0 10rpx;
		image{
			width:44rpx;
			height: 44rpx;
		}
	}

	.chat_interface {
		height: auto !important;

		.transparent_mask {
			width: 100%;
			height: 100%;
			position: fixed;
			background: #FFFFFF;
			top: 0;
			left: 0;
			opacity: 0;
			z-index: 5;
		}

		/* 头部  start*/
		.chat_interface_header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #FFFFFF;
			/* padding-top: var(--status-bar-height); */
			height: calc(var(--status-bar-height) + 88rpx);
			padding-right: 20rpx;
			position: fixed;
			top: 0;
			width: 750rpx;
			z-index: 50;
			left: calc((100vw - 750rpx) / 2);
			position: fixed;
			padding: 14rpx 6px;
			padding-top: calc(14rpx + env(safe-area-inset-top));
			z-index: 998;
			color: #fff;
			transition-property: all;

			.chat_header_left {
				width: 44rpx;
				height: 44rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 17rpx;
					height: 29rpx;
				}
			}

			.chat_header_cen {
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #2D2D2D;
				line-height: 32rpx;
			}

			.chat_header_right {
				width: 80rpx;
				height: 46rpx;
				background: linear-gradient(128deg, #FED600 0%, #FF5D00 0%, #FC7100 0%, #FC1C1C 100%);
				border-radius: 40rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 600;
				color: #FEFEFE;
				line-height: 44rpx;
				text-align: center;
			}

			.chat_header_right_mp {
				width: 80rpx;
				height: 46rpx;
				background: #fff
			}
		}

		/* 头部  end*/

		/* 聊天消息 start */
		.chat_con {
			.chat_des {
				position: absolute;
				left: calc((100vw - 750rpx) / 2);
				right: 0;
				/* #ifdef APP-PLUS */
				height: calc(100vh - 98rpx);
				top: 0;
				/* #endif */
				/* #ifdef H5 */
				height: calc(100vh - 98rpx - 88rpx);
				top: 0;
				/* #endif */
				/* #ifdef MP-WEIXIN */
				height: calc(100vh - 98rpx);
				top: 0;
				/* #endif */
				bottom: 98rpx;
				width: 750rpx;

				.chat_info_time {
					display: flex;
					justify-content: center;

					text {
						width: 270rpx;
						height: 40rpx;
						background: #DDDDDD;
						border-radius: 20rpx;
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #949494;
						line-height: 40rpx;
						text-align: center;
						margin-top: 30rpx;
					}
				}

				.chat_goods_link {
					display: flex;
					justify-content: center;
					margin-top: 20rpx;

					.goods_links {
						width: 670rpx;
						height: 192rpx;
						background: #FFFFFF;
						border-radius: 6rpx;
						align-items: center;
						display: flex;

						.goods_image {
							margin: 0 20rpx;

							image {
								width: 156rpx;
								height: 156rpx;
								border-radius: 6rpx;
							}
						}

						.goods_des {
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							height: 192rpx;
							padding: 20rpx 0;
							box-sizing: border-box;

							.goods_name {
								font-size: 26rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #2D2D2D;
								line-height: 39rpx;
								width: 453rpx;
								text-overflow: -o-ellipsis-lastline;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								line-clamp: 2;
								-webkit-box-orient: vertical;
							}

							.goods_bottom {
								display: flex;
								justify-content: space-between;

								.goods_price {
									font-size: 26rpx;
									font-family: PingFang SC;
									font-weight: 500;
									color: #FF3125;
									line-height: 39rpx;

									text:nth-child(2) {
										font-size: 30rpx;
									}
								}

								.send_link {
									width: 141rpx;
									height: 38rpx;
									background: linear-gradient(128deg, #FC1C1C 0%, #FC5309 100%);
									border-radius: 19rpx;
									font-size: 24rpx;
									font-family: PingFang SC;
									font-weight: 500;
									color: #FFFFFF;
									line-height: 38rpx;
									text-align: center;
								}
							}
						}
					}
				}

				/* 聊天记录 start */
				.chat_record {
					padding: 20rpx 20rpx;

					/* 发送链接start */
					.send_uri {
						width: 670rpx;
						height: 260rpx;
						background: #FFFFFF;
						border-radius: 6rpx;
						margin-top: 30rpx;
						position: relative;
						box-sizing: border-box;

						.record_text_type {
							/* width: 82rpx; */
							height: 32rpx;
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #999999;
							position: absolute;
							left: 0rpx;
							bottom: 0rpx;
							background: #EDEDED;
							border-radius: 0 5px 0 0;
							z-index: 2;
						}

						.record_type_order_info {
							width: 100%;
							height: 63rpx;
							display: flex;
							font-size: 24rpx;
							line-height: 63rpx;
							position: relative;
							justify-content: space-around;
							color: #949494;

							.record_order {
								width: 50%;
								box-sizing: border-box;
								padding-left: 20rpx;
								/* font-size: 24rpx; */
							}

							.record_order_time {
								width: 50%;
								transform: translate(-20rpx, 0);

								display: flex;
								justify-content: flex-end;
							}
						}

						.record_type_order_info::before {
							content: '';
							display: inline-block;
							width: 97%;
							height: 1rpx;
							border-top: 1rpx solid #F3F3F3;
							position: absolute;
							bottom: 0;
							left: 0;
						}

						.record_type_order_content {
							width: 100%;
							display: flex;
							justify-content: space-around;
							box-sizing: border-box;
							padding-top: 20rpx;

							.record_order_image {
								width: 156rpx;
								height: 156rpx;
								border-radius: 10rpx !important;

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

							.record_order_con {
								width: 453rpx;
								/* height: 64rpx; */
								font-size: 26rpx;
								padding-top: 19rpx;
								margin-left: -20px;

								.record_order_name {
									width: 100% !important;
									font-size: 26rpx;
									font-family: PingFang SC;
									font-weight: 500;
									color: #333333;
									line-height: 36rpx;
									text-overflow: -o-ellipsis-lastline;
									overflow: hidden;
									text-overflow: ellipsis;
									display: -webkit-box;
									-webkit-line-clamp: 2;
									line-clamp: 2;
									-webkit-box-orient: vertical;
									width: 418rpx;
									padding-left: 20rpx;
									box-sizing: border-box;
								}

								.record_price_and_status {
									width: 100%;
									height: 70rpx;
									display: flex;
									justify-content: space-between;
									padding-top: 30rpx;

									.handel_send_url {
										width: 75px;
										background: linear-gradient(128deg, #FC1C1C 0%, #FC5309 100%);
										border-radius: 19px;
										color: #FFFFFF;
									}

									.record_order_price {
										font-size: 26rpx;
										font-family: PingFang SC;
										font-weight: 500;
										color: #FF4032;
										margin-bottom: 12rpx;
										padding-left: 20rpx;

									}

									.record_order_status {
										height: 35rpx;
										border-radius: 24rpx;
										font-size: 22rpx;
										font-family: PingFang SC;
										font-weight: 500;
										line-height: 35rpx;
										text-align: center;
										margin-left: 60rpx;
									}
								}


								.record_order_des {
									display: flex;
									margin: 10rpx 0 20rpx;
									padding-left: 20rpx;
									box-sizing: border-box;

									.record_order_ordersn {
										font-size: 24rpx;
										font-family: PingFang SC;
										font-weight: 500;
										color: #949494;
									}

									.record_order_time {
										font-size: 24rpx;
										font-family: PingFang SC;
										font-weight: 500;
										color: #949494;
										margin-left: 17rpx;
									}

								}
							}

							.record_order_status {
								width: 760rpx;
								height: 30rpx;
								background: #F0F2F5;
								border-radius: 24rpx;
								font-size: 22rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #949494;
								line-height: 30rpx;
								text-align: center;
								margin-left: 20rpx;
							}
						}
					}

					/* 发送链接结束 */
					.customer_service_info {
						display: flex;
						justify-content: flex-start;
						margin-top: 30rpx;

						.customer_service_avatar {
							width: 80rpx;
							height: 80rpx;
							border-radius: 50%;
							margin-right: 20rpx;

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

						/* 消息记录类型 start */
						.customer_record {
							.record_type_text {
								max-width: 493rpx;
								min-height: 70rpx;
								background: #FFFFFF;
								border-radius: 0px 10px 10px 10px;
								font-size: 28rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #2D2D2D;
								line-height: 39rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								padding: 15rpx 15rpx;
								word-break: break-all;
							}

						}

						/* 消息记录类型 end */
					}

					.user_info_record {
						display: flex;
						justify-content: flex-end;
						margin-top: 30rpx;

						/* 消息记录类型 start */
						.user_record {
							display: flex;
							flex-direction: column;
							align-items: flex-end;
						}

						/* 消息记录类型 end */
						.user_info_avatar {
							width: 80rpx;
							height: 80rpx;
							border-radius: 50%;
							margin-left: 20rpx;

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

				/* 聊天记录 end */
			}

			/* 聊天框 start */
			.chat_info_con {
				width: 750rpx;
				position: fixed;
				bottom: 0;
				padding-bottom: env(safe-area-inset-bottom);
				left: calc((100vw - 750rpx) / 2);
				z-index: 10;
				min-height: calc(98rpx + env(safe-area-inset-bottom));;
				
				.chat_info {
					width: 750rpx;
					height: 98rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 0rpx 19rpx 1rpx rgba(214, 214, 214, 0.1);
					display: flex;
					padding: 0 20rpx;
					box-sizing: border-box;
					justify-content: space-between;
					align-items: center;

					.send_button {
						width: 100rpx;
						height: 50rpx;
						background: linear-gradient(90deg, #FC1C1C 0%, #FC5309 100%);
						border-radius: 6px;
						color: #FFFFFF;
						line-height: 50rpx;
						text-align: center;
						margin-left: 0rpx;
						font-size: 26rpx;

					}

					.chat_info_input {
						height: 62rpx !important;
						min-height: unset !important;
						background: #F8F8F8;
						border: 1rpx solid rgba(0, 0, 0, .05);
						border-radius: 31rpx;
						padding-left: 20rpx;
						font-size: 24rpx;
						opacity: 0.5;
						
					}

					.chat_info_expression {
						width: 50rpx;
						height: 50rpx;
					}

					.chat_info_options {
						width: 50rpx;
						height: 50rpx;
					}
				}

				/* 更多操作 start */
				.info_options {
					height: 418rpx;
					background-color: #FFFFFF;
					display: flex;
					flex-wrap: wrap;
					padding: 0 25rpx 0 30rpx;

					.info_options_pre {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						/* margin-bottom: 3rpx; */
						width: 106rpx;
						margin-right: 90rpx;

						.tpe {
							/* width: 100rpx;
							height: 100rpx; */
							margin-top: 12rpx;
							/* padding: 20rpx 20rpx; */
							background-color: #FFFFFF;

							image {
								width: 58rpx;
								height: 58rpx;
								margin: auto;
							}
						}

						text {
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #2D2D2D;
							line-height: 39rpx;
							/* margin-top: 13rpx; */
						}
					}

					.info_options_pre:nth-of-type(4n) {
						margin-right: 0;
					}
				}

				/* 更多操作 end */
			}

			/* 聊天框 end */
		}

		/* 聊天消息 end */

		/* 常见问题弹框  start*/
		.common_problem {
			width: 750rpx;
			height: 763rpx;
			background: #FFFFFF;
			border-radius: 10rpx 10rpx 0 0;

			.common_problem_title {
				width: 100%;
				height: 88rpx;
				display: flex;
				justify-content: space-between;
				padding: 0 8rpx 0 20rpx;
				box-sizing: border-box;
				align-items: center;
				border-bottom: 1rpx solid #F2F2F2;
				border-radius: 10rpx 10rpx 0 0;

				text {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #2D2D2D;
					line-height: 39rpx;
				}

				.common_problem_close {
					width: 44rpx;
					height: 44rpx;
					display: flex;
					justify-content: center;
					align-items: center;

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

			.common_problem_list {
				width: 750rpx;
				height: 675rpx;

				.common_problem_pre {
					width: 750rpx;

					.common_problem_text {
						width: 710rpx;
						margin: 0 20rpx;
						font-size: 28rpx;
						padding: 33rpx 0 40rpx;
						box-sizing: border-box;
						font-family: PingFang SC;
						font-weight: 500;
						color: #2D2D2D;
						line-height: 39rpx;
						border-bottom: 1rpx solid #F2F2F2;
						display: flex;
						align-items: center;
						word-break: break-all;
					}

					&:hover {
						background: #F8F8F8;
					}
				}

				.common_problem_pre_active {
					background: #F8F8F8;
				}
			}
		}

		/* 常见问题弹框 end */

		/* 订单，足迹，推荐 弹框 start */
		.more_list_model {
			width: 750rpx;
			height: 900rpx;
			background: #F8F8F8;
			border-radius: 10rpx 10rpx 0 0;

			.about_more_title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-left: 20rpx;
				box-sizing: border-box;
				height: 87rpx;
				background: #FFFFFF;

				.about_more_title_left {
					display: flex;
					align-items: center;

					.about_more_title_pre {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #2D2D2D;
						line-height: 87rpx;
						position: relative;
						margin-right: 56rpx;

						&.current {
							color: $main-color;
							font-size: 32rpx;
							font-weight: bold;

							&:after {
								content: '';
								position: absolute;
								left: 50%;
								bottom: 0;
								transform: translateX(-50%);
								width: 52rpx;
								height: 6rpx;
								background-color: $main-color;
								border-radius: 3rpx;
							}
						}
					}

					.about_more_title_pre:nth-last-of-type(1) {
						margin-right: 0;
					}
				}

				.about_more_close {
					width: 44rpx;
					height: 44rpx;
					display: flex;
					align-items: center;

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

			.about_more_con {
				width: 750rpx;
				height: 813rpx;
				padding: 20rpx;

				/* 我的订单 start */
				.order_list_scroll {
					width: 740rpx;
					height: 793rpx;
				}

				.about_more_list {
					.about_more_pre {
						width: 710rpx;
						background: #FFFFFF;
						position: relative;
						border-radius: 6rpx;
						margin-bottom: 14rpx;

						.order_title {
							display: flex;
							align-items: center;
							justify-content: space-between;
							height: 60rpx;
							padding: 0 20rpx;

							text:nth-child(1) {
								font-size: 24rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #949494;
								line-height: 39rpx;
							}

							text:nth-child(2) {
								font-size: 24rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #949494;
								line-height: 39rpx;
							}
						}

						.order_list {
							.order_list_pre {
								height: 174rpx;
								margin: 0 20rpx;
								border-top: 1rpx solid #F2F2F2;
								display: flex;
								justify-content: space-between;
								padding: 20rpx 0;
								box-sizing: border-box;

								.order_pre_img {
									width: 134rpx;
									height: 134rpx;
									border-radius: 6rpx;

									image {
										width: 134rpx;
										height: 134rpx;
										border-radius: 6rpx;
									}
								}

								.order_pre_des {
									display: flex;
									flex-direction: column;
									justify-content: space-between;

									.order_pre_name {
										width: 515rpx;
										font-size: 24rpx;
										font-family: PingFang SC;
										font-weight: 500;
										color: #2D2D2D;
										line-height: 36rpx;
										text-overflow: -o-ellipsis-lastline;
										overflow: hidden;
										text-overflow: ellipsis;
										display: -webkit-box;
										-webkit-line-clamp: 2;
										line-clamp: 2;
										-webkit-box-orient: vertical;
									}

									.order_pre_des_bot {
										display: flex;
										justify-content: space-between;
										align-items: center;

										.order_pre_price_active {
											color: #FF3E32;
										}

										.order_pre_price {
											font-size: 26rpx;
											font-family: PingFang SC;
											font-weight: 600;
											color: #FF0000;
											line-height: 36rpx;

											text:nth-child(2) {
												font-size: 30rpx;
											}
										}

										.order_pre_link {
											font-size: 24rpx;
											font-family: PingFang SC;
											font-weight: 500;
											color: #FF3E32;
											line-height: 36rpx;
										}
									}
								}
							}
						}

						.unfold_fold {
							display: flex;
							justify-content: center;
							padding: 10rpx 0 20rpx;
							align-items: center;

							text {
								font-size: 24rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #333333;
								line-height: 39rpx;
							}

							image {
								width: 19rpx;
								height: 11rpx;
								margin-left: 10rpx;
							}
						}

						.order_status {
							position: absolute;
							width: 100rpx;
							height: 30rpx;
							background: #FFE5E5;
							border-radius: 6rpx;
							font-size: 22rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #FF0000;
							line-height: 30rpx;
							text-align: center;
							bottom: 0;
							left: 0;
						}

						.order_status_await {
							background: #F8F8F8;
							color: #949494;
						}

						order_status_awaits {
							background: #F8F8F8;
							color: #FF0000;
						}
					}
				}

				/* 我的订单 end */
				.footprint_list_scroll {
					width: 710rpx;
					height: 773rpx;
				}

				/* 我的足迹 start */
				.footprint_list {
					background: #FFFFFF;

					.order_list_pre {
						height: 174rpx;
						margin: 0 20rpx;
						border-top: 1rpx solid #F2F2F2;
						display: flex;
						justify-content: space-between;
						padding: 20rpx 0;
						box-sizing: border-box;

						.order_pre_img {
							width: 134rpx;
							height: 134rpx;
							border-radius: 6rpx;

							image {
								width: 134rpx;
								height: 134rpx;
								border-radius: 6rpx;
							}
						}

						.order_pre_des {
							display: flex;
							flex-direction: column;
							justify-content: space-between;

							.order_pre_name {
								width: 515rpx;
								font-size: 24rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #2D2D2D;
								line-height: 36rpx;
								text-overflow: -o-ellipsis-lastline;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								line-clamp: 2;
								-webkit-box-orient: vertical;
							}

							.order_pre_des_bot {
								display: flex;
								justify-content: space-between;
								align-items: center;

								.order_pre_price {
									font-size: 26rpx;
									font-family: PingFang SC;
									font-weight: 600;
									color: #FF0000;
									line-height: 36rpx;

									text:nth-child(2) {
										font-size: 30rpx;
									}
								}

								.order_pre_price_active {
									color: #FF3E32;
								}

								.order_pre_link {
									font-size: 24rpx;
									font-family: PingFang SC;
									font-weight: 500;
									color: #FF3E32;
									line-height: 36rpx;
								}
							}
						}
					}
				}

				/* 我的足迹 end */
			}
		}

		/* 订单，足迹，推荐 弹框 end */
	}

	.empty_page {
		margin-top: 60rpx;
		height: 270rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		padding-right: 20rpx;

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

		text {
			margin-top: 20rpx;
			font-size: 24rpx;
			color: #999999;
		}
	}

	.record_type_text {
		max-width: 493rpx;
		min-height: 70rpx;
		background: linear-gradient(128deg, #FF3E32 0%, #FF5134 100%);
		border-radius: 10rpx 0rpx 10rpx 10rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 39rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 15rpx 15rpx;
		max-width: 550rpx;
		position: relative;
		word-break: break-all;

		.record_type_text_type {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			position: absolute;
			left: -65rpx;
			bottom: 0;
		}

		.record_type_text_type_off {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FE2315;
			position: absolute;
			left: -65rpx;
			bottom: 0;
		}
	}


	.good_type_order {
		width: 510rpx;
		height: 196rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-top: 30rpx;
		position: relative;

		/* 已读/未读 */
		.record_type_text_type {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			position: absolute;
			left: -65rpx;
			bottom: 0;
		}

		.record_type_text_type_off {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FE2315;
			position: absolute;
			left: -65rpx;
			bottom: 0;
		}

		.record_text_type {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FE2012;
			position: absolute;
			left: -65rpx;
			bottom: 14rpx;

		}

		.record_type_order_info {
			width: 100%;
			height: 63rpx;
			display: flex;
			font-size: 24rpx;
			line-height: 63rpx;
			position: relative;
			justify-content: space-around;
			color: #949494;

			.record_order_time {
				flex-grow: .3;
				display: flex;
				justify-content: space-around;
			}
		}

		.record_type_order_info::before {
			content: '';
			display: inline-block;
			width: 97%;
			height: 1rpx;
			border-top: 1rpx solid #F3F3F3;
			position: absolute;
			bottom: 0;
			left: 0;
		}

		.record_type_order_content {
			width: 100%;
			display: flex;
			justify-content: space-around;
			box-sizing: border-box;
			padding-top: 20rpx;

			.record_type_text_type {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				position: absolute;
				left: -65rpx;
				bottom: 0;
			}

			.record_type_text_type_off {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FE2315;
				position: absolute;
				left: -65rpx;
				bottom: 0;
			}

			.record_order_image {
				width: 156rpx;
				height: 156rpx;
				border-radius: 10rpx !important;

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

			.record_order_con {
				width: 310rpx;
				/* height: 242rpx; */
				padding-top: 19rpx;
				margin-left: -20px;

				.record_order_name {
					width: 100% !important;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 36rpx;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
					width: 418rpx;
					padding-left: 20rpx;
					box-sizing: border-box;
				}

				.record_price_and_status {
					width: 100%;
					height: 70rpx;
					display: flex;
					justify-content: space-between;
					padding-top: 60rpx;

					.record_order_price {
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #FF4032;
						position: absolute;
						top: 140rpx;
						left: 200rpx;
					}

					.record_order_status {
						width: 76rpx;
						height: 30rpx;
						background: #F0F2F5;
						border-radius: 24rpx;
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #949494;
						line-height: 30rpx;
						text-align: center;
						margin-left: 60rpx;
					}
				}


				.record_order_des {
					display: flex;
					margin: 10rpx 0 20rpx;
					padding-left: 20rpx;
					box-sizing: border-box;

					.record_order_ordersn {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #949494;
					}

					.record_order_time {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #949494;
						margin-left: 17rpx;
					}

				}
			}

			.record_order_status {
				width: 76rpx;
				height: 30rpx;
				background: #F0F2F5;
				border-radius: 24rpx;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #949494;
				line-height: 30rpx;
				text-align: center;
				margin-left: 20rpx;
			}
		}
	}

	.record_type_order {
		width: 510rpx;
		height: 260rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-top: 20rpx;
		position: relative;

		.record_type_text_type {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			position: absolute;
			left: -65rpx;
			bottom: 0;
		}

		.record_type_text_type_off {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FE2315;
			position: absolute;
			left: -65rpx;
			bottom: 0;
		}

		.record_text_type {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			position: absolute;
			left: -65rpx;
			bottom: 14rpx;

		}

		.record_type_order_info {
			width: 100%;
			height: 63rpx;
			display: flex;
			font-size: 24rpx;
			line-height: 63rpx;
			position: relative;
			justify-content: space-around;
			color: #949494;

			.record_order {
				width: 80%;
				box-sizing: border-box;
				padding-left: 20rpx;
				word-break: break-all;
			}

			.record_order_time {
				width: 50%;
				transform: translate(-20rpx, 0);

				display: flex;
				justify-content: flex-end;
			}
		}

		.record_type_order_info::before {
			content: '';
			display: inline-block;
			width: 97%;
			height: 1rpx;
			border-top: 1rpx solid #F3F3F3;
			position: absolute;
			bottom: 0;
			left: 0;
		}

		.record_type_order_content {
			width: 100%;
			display: flex;
			justify-content: space-around;
			box-sizing: border-box;
			padding-top: 20rpx;

			.record_order_image {
				width: 156rpx;
				height: 156rpx;
				border-radius: 10rpx !important;

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

			.record_order_con {
				width: 310rpx;
				/* height: 242rpx; */
				padding-top: 19rpx;
				margin-left: -20px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.record_order_name {
					width: 100% !important;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 36rpx;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
					width: 418rpx;
					padding-left: 20rpx;
					box-sizing: border-box;
				}

				.record_price_and_status {
					width: 100%;
					height: 70rpx;
					display: flex;
					justify-content: space-between;
					padding-top: 30rpx;

					.record_order_price {
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #FF4032;
						margin-bottom: 12rpx;
						padding-left: 20rpx;

					}

					.record_order_status {
						width: 120rpx;
						height: 30rpx;
						background: #F0F2F5;
						border-radius: 14rpx;
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #949494;
						line-height: 30rpx;
						text-align: center;
						margin-left: 20rpx;
					}
				}


				.record_order_des {
					display: flex;
					margin: 10rpx 0 20rpx;
					padding-left: 20rpx;
					box-sizing: border-box;

					.record_order_ordersn {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #949494;
					}

					.record_order_time {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #949494;
						margin-left: 17rpx;
					}

				}
			}

			.record_order_status {
				width: 76rpx;
				height: 30rpx;
				background: #F0F2F5;
				border-radius: 14rpx;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #949494;
				line-height: 30rpx;
				text-align: center;
				margin-left: 20rpx;
			}
		}
	}

	.record_type_image {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		margin-top: 20rpx;
		position: relative;

		.record_type_image_width {
			width: 460rpx;
			height: 345rpx;
			border-radius: 10rpx;
		}

		/* 已读/未读 */
		.record_type_text_type {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			position: absolute;
			left: -65rpx;
			bottom: 0;
		}

		.record_type_text_type_off {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FE2315;
			position: absolute;
			left: -65rpx;
			bottom: 0;
		}

		.record_type_image_height {
			width: 343rpx;
			height: 460rpx;
			border-radius: 10px;
			margin-top: 30rpx;
		}

		.record_type_image_quate {
			width: 343rpx;
			height: 343rpx;
		}

	}
</style>