|
|
<template>
|
|
|
<view class="content">
|
|
|
<!-- 聊天内容 -->
|
|
|
<scroll-view
|
|
|
class="chat"
|
|
|
scroll-y="true"
|
|
|
scroll-with-animation="true"
|
|
|
:scroll-into-view="scrollToView"
|
|
|
refresher-enabled="true"
|
|
|
:refresher-triggered="triggered"
|
|
|
:refresher-threshold="100"
|
|
|
refresher-background="#f0f0f0"
|
|
|
@refresherpulling="onPulling"
|
|
|
@refresherrefresh="onRefresh"
|
|
|
@refresherrestore="onRestore"
|
|
|
@refresherabort="onAbort"
|
|
|
>
|
|
|
<view class="chat-main" :style="{ paddingBottom: inputh + 'px' }">
|
|
|
<view
|
|
|
class="chat-ls"
|
|
|
v-for="(item, index) in messageList"
|
|
|
:key="index"
|
|
|
:id="'msg' + index"
|
|
|
>
|
|
|
<!-- 时间分隔 -->
|
|
|
<view class="chat-time" v-if="item.fromtime != ''">
|
|
|
{{ changeTime(item.fromtime) }}
|
|
|
</view>
|
|
|
|
|
|
<!-- 消息体：左侧（对方） -->
|
|
|
<view class="msg-m msg-left" v-if="item.fromuser !== userId">
|
|
|
<view class="user-img">
|
|
|
<image
|
|
|
class="uimg"
|
|
|
:src="item.headimg"
|
|
|
@error="handleImageError($event, index)"
|
|
|
mode="aspectFill"
|
|
|
/>
|
|
|
<text class="uname">{{ item.fromname }}</text>
|
|
|
</view>
|
|
|
|
|
|
<!-- 文本 -->
|
|
|
<view class="message" v-if="item.type == 'txt'">
|
|
|
<view class="msg-text"><text selectable>{{ item.content }}</text></view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 图片 -->
|
|
|
<view class="message" v-if="item.type == 'image'" @tap="previewImg(item.content)">
|
|
|
<image :src="item.content" class="msg-img" mode="widthFix" />
|
|
|
</view>
|
|
|
|
|
|
<!-- 视频 -->
|
|
|
<view class="messagevideo" v-if="item.type == 'video'">
|
|
|
<myVideo :videoUrl="item.content" />
|
|
|
</view>
|
|
|
|
|
|
<!-- 音频 -->
|
|
|
<view class="message" v-if="item.type == 'audio'" @click="playVoice(item.content, item.ifaudio, index)">
|
|
|
<view class="msg-text voice" :style="{ width: item.time * 40 + 'rpx' }">
|
|
|
<view class="voicel" v-if="item.ifaudio"><div class="bg voicePlay"></div></view>
|
|
|
<image v-else src="../../static/icon/horn.png" class="voice-img" />
|
|
|
{{ item.time }}″
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 商品/订单 -->
|
|
|
<view class="message" v-if="item.type == 'product'">
|
|
|
<view v-if="item.send" class="msg-product" @click="gotoDetail(item)">
|
|
|
<view v-if="item.send.type == 3" class="zx">
|
|
|
<view class="zxname">订单咨询</view>
|
|
|
<view class="zxview">查看订单</view>
|
|
|
</view>
|
|
|
<view class="msg-con">
|
|
|
<image class="img" :src="item.send.pic" mode="aspectFit" />
|
|
|
<view class="info">
|
|
|
<view class="name">
|
|
|
<text class="ntxt">{{ item.send.name }}</text>
|
|
|
<text
|
|
|
v-if="item.send.spData"
|
|
|
v-for="(value, key) in item.send.spData"
|
|
|
:key="key"
|
|
|
class="txt"
|
|
|
>
|
|
|
{{ key }}: {{ value }}
|
|
|
</text>
|
|
|
</view>
|
|
|
<view class="xq">
|
|
|
<view class="list">
|
|
|
<view v-if="item.send.type == 3" class="ord">
|
|
|
购买金额:¥ <text style="font-size: 30rpx;">{{ item.send.price }}</text>
|
|
|
{{ item.send.unit ? '/' + item.send.unit : '' }}
|
|
|
</view>
|
|
|
<view v-else class="price">
|
|
|
¥{{ item.send.price }}{{ item.send.unit ? '/' + item.send.unit : '' }}
|
|
|
</view>
|
|
|
<view v-if="item.send.quantity" class="qty">
|
|
|
共({{ item.send.quantity }}{{ item.send.unit ? item.send.unit : '件' }})
|
|
|
</view>
|
|
|
</view>
|
|
|
<button class="btn" type="primary" v-if="item.send.type == 1 || item.send.type == 2">
|
|
|
去购买
|
|
|
</button>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 消息体：右侧（自己） -->
|
|
|
<view class="msg-m msg-right" v-if="item.fromuser == userId">
|
|
|
<view class="user-img">
|
|
|
<image class="uimg" :src="item.headimg" @error="handleImageError($event, index)" mode="aspectFill" />
|
|
|
<text class="uname">{{ item.fromname }}</text>
|
|
|
</view>
|
|
|
|
|
|
<!-- 群聊才显示已读/未读按钮 -->
|
|
|
<template v-if="chatType === 'group'">
|
|
|
<view v-if="item.type == 'txt' || item.type == 'image' || item.type == 'video' || item.type == 'audio' || item.type == 'product'" class="message" style="flex-direction: column; align-items: flex-end;">
|
|
|
<view class="rcon">
|
|
|
<view class="read" @click="openRead(item)">已读{{ item.read ? item.read.length : 0 }}</view>
|
|
|
<view class="noread" @click="openNoRead(item)">未读{{ item.read ? 3 - item.read.length : 3 }}</view>
|
|
|
</view>
|
|
|
<!-- 内容显示与左侧类似，但文字颜色为白色，背景为绿色，故复用部分结构 -->
|
|
|
<view v-if="item.type == 'txt'" class="msg-text" style="margin-right: 0;">
|
|
|
<text selectable>{{ item.content }}</text>
|
|
|
</view>
|
|
|
<image v-if="item.type == 'image'" :src="item.content" class="msg-img" mode="widthFix" style="margin-right: 0;" />
|
|
|
<myVideo v-if="item.type == 'video'" :videoUrl="item.content" style="margin-right: 0;" />
|
|
|
<view v-if="item.type == 'audio'" class="msg-text voice" :style="{ width: item.time * 40 + 'rpx' }">
|
|
|
{{ item.time }}″
|
|
|
<view class="voicel" v-if="item.ifaudio"><div class="bg voicePlay"></div></view>
|
|
|
<image v-else src="../../static/icon/hornrw.png" class="voice-img" />
|
|
|
</view>
|
|
|
<view v-if="item.type == 'product'" class="msg-product" style="margin-right: 0;">
|
|
|
<!-- 商品卡片复用左侧相同结构，但右侧需调整样式，因为父级flex方向不同，此处省略重复代码 -->
|
|
|
<!-- 实际开发中应抽离为组件，这里为简洁略 -->
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<!-- 私聊显示已读/未读状态（仅文字和图片） -->
|
|
|
<template v-else>
|
|
|
<view v-if="item.type == 'txt'" class="message">
|
|
|
<view v-if="item.ifread" class="read">已读</view>
|
|
|
<view v-else class="noread">未读</view>
|
|
|
<view class="msg-text"><text selectable>{{ item.content }}</text></view>
|
|
|
</view>
|
|
|
<view v-if="item.type == 'image'" @tap="previewImg(item.content)" class="message">
|
|
|
<view v-if="item.ifread" class="read">已读</view>
|
|
|
<view v-else class="noread">未读</view>
|
|
|
<image :src="item.content" class="msg-img" mode="widthFix" />
|
|
|
</view>
|
|
|
<view v-if="item.type == 'video'" class="messagevideo">
|
|
|
<view v-if="item.ifread" class="read">已读</view>
|
|
|
<view v-else class="noread">未读</view>
|
|
|
<myVideo :videoUrl="item.content" />
|
|
|
</view>
|
|
|
<view v-if="item.type == 'audio'" @click="playVoice(item.content, item.ifaudio, index)" class="message">
|
|
|
<view v-if="item.ifread" class="read">已读</view>
|
|
|
<view v-else class="noread">未读</view>
|
|
|
<view class="msg-text voice" :style="{ width: item.time > 2 ? item.time * 40 + 'rpx' : 'auto' }">
|
|
|
{{ item.time }}″
|
|
|
<view class="voicel" v-if="item.ifaudio"><div class="bg voicePlay"></div></view>
|
|
|
<image v-else src="../../static/icon/hornrw.png" class="voice-img" />
|
|
|
</view>
|
|
|
</view>
|
|
|
<view v-if="item.type == 'product'" class="message">
|
|
|
<view v-if="item.ifread" class="read">已读</view>
|
|
|
<view v-else class="noread">未读</view>
|
|
|
<view v-if="item.send" class="msg-product" @click="gotoDetail(item)">
|
|
|
<!-- 商品卡片，略 -->
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
|
|
|
<!-- 商品/订单发送弹窗 -->
|
|
|
<view class="popup" v-if="ifSend && sendInfo">
|
|
|
<view class="tipcon">
|
|
|
<image class="img" :src="sendInfo.pic" mode="aspectFit" />
|
|
|
<view class="info">
|
|
|
<view class="name">
|
|
|
<text class="ntxt">{{ sendInfo.name }}</text>
|
|
|
<text v-if="sendInfo.spData" v-for="(value, key) in sendInfo.spData" :key="key" class="txt">
|
|
|
{{ key }}: {{ value }}
|
|
|
</text>
|
|
|
</view>
|
|
|
<view class="xq">
|
|
|
<view class="list">
|
|
|
<view v-if="sendInfo.type == 3" class="ord">
|
|
|
购买金额:¥ <text style="font-size: 30rpx;">{{ sendInfo.price }}</text>
|
|
|
{{ sendInfo.unit ? '/' + sendInfo.unit : '' }}
|
|
|
</view>
|
|
|
<view v-else class="price">
|
|
|
¥{{ sendInfo.price }}{{ sendInfo.unit ? '/' + sendInfo.unit : '' }}
|
|
|
</view>
|
|
|
<view class="qty">
|
|
|
{{ sendInfo.quantity ? '共(' + sendInfo.quantity + (sendInfo.unit ? sendInfo.unit : '件') + ')' : '' }}
|
|
|
</view>
|
|
|
</view>
|
|
|
<button class="btn" type="primary" @click="sendServer">发送{{ sendInfo.type == 1 ? '商品' : sendInfo.type == 2 ? '课程' : '订单' }}</button>
|
|
|
</view>
|
|
|
<view class="close">
|
|
|
<uni-icons type="closeempty" color="#bebdbd" size="16" @click="closeSendPopup" />
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 输入组件 -->
|
|
|
<submit @inputs="inputs" @heights="heights" />
|
|
|
|
|
|
<!-- 提示 Toast -->
|
|
|
<u-toast ref="uToast" />
|
|
|
|
|
|
<!-- 群公告弹窗（仅群聊） -->
|
|
|
<uni-popup ref="popup" background-color="#fff" v-if="chatType === 'group'">
|
|
|
<view class="popup-content">
|
|
|
<view class="example">
|
|
|
<view class="order">
|
|
|
<view class="chatlist">
|
|
|
<view class="chatcell" v-for="(person, key) in groupPersons" :key="key">
|
|
|
<image class="user-img" :src="person.img" />
|
|
|
<text class="user-name">{{ person.name }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="lcon">
|
|
|
<view class="lhtxt">群聊名称</view>
|
|
|
<view class="ltxt">{{ chatInfo.chatName || '未设置' }}</view>
|
|
|
</view>
|
|
|
<view class="lcon">
|
|
|
<view class="lhtxt">群公告</view>
|
|
|
<view class="ltxt">{{ chatInfo.notice || '未设置' }}</view>
|
|
|
</view>
|
|
|
<view class="lcon">
|
|
|
<view class="lhtxt">备注</view>
|
|
|
<view class="ltxt">{{ chatInfo.reason ? chatInfo.reason : '无' }}</view>
|
|
|
</view>
|
|
|
<view class="lcon">
|
|
|
<view class="lhtxt">在本群昵称</view>
|
|
|
<view class="ltxt">{{ userName || '' }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</uni-popup>
|
|
|
|
|
|
<!-- 已读/未读列表弹窗（仅群聊） -->
|
|
|
<uni-popup ref="popupRead" background-color="#fff" v-if="chatType === 'group'">
|
|
|
<view class="popup-content">
|
|
|
<view class="example">
|
|
|
<view class="order">
|
|
|
<view class="qhbtn">
|
|
|
<view :class="ifRead ? 'btn cur' : 'btn'" @click="switchReadTab(1)">已读({{ readInfo.read.length }})</view>
|
|
|
<view :class="ifRead ? 'btn' : 'btn cur'" @click="switchReadTab(2)">未读({{ readInfo.noread.length }})</view>
|
|
|
</view>
|
|
|
<view class="readlist" v-if="ifRead">
|
|
|
<view class="readcell" v-for="(item, idx) in readInfo.read" :key="idx">
|
|
|
<text class="readname">{{ item.name }}</text>
|
|
|
<text class="readtime">{{ item.time }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="readlist" v-else>
|
|
|
<view class="readcell" v-for="(item, idx) in readInfo.noread" :key="idx">
|
|
|
<text class="readname">{{ item.name }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</uni-popup>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { myCache } from '../../utils/utils.js';
|
|
|
import dateTime from '@/common/dateTime.js';
|
|
|
import submit from '@/components/chat/submit.vue';
|
|
|
import myVideo from '@/components/myVideo.vue';
|
|
|
|
|
|
const innerAudioContext = uni.createInnerAudioContext();
|
|
|
|
|
|
export default {
|
|
|
components: { submit, myVideo },
|
|
|
data() {
|
|
|
return {
|
|
|
triggered: false,
|
|
|
userName: '',
|
|
|
userId: '',
|
|
|
userHeadImg: '',
|
|
|
chatInfo: {}, // 会话基本信息
|
|
|
// 聊天类型：'private' 或 'group'
|
|
|
chatType: 'private',
|
|
|
// 消息列表
|
|
|
messageList: [],
|
|
|
// 图片预览用
|
|
|
imgMsg: [],
|
|
|
scrollToView: '',
|
|
|
inputh: '90',
|
|
|
ifaudio: false,
|
|
|
// 商品/订单发送
|
|
|
ifSend: false,
|
|
|
sendInfo: null,
|
|
|
// 群聊特有
|
|
|
ifRead: true,
|
|
|
readInfo: { read: [], noread: [] },
|
|
|
// WebSocket相关（页面内独立管理，也可抽离为全局）
|
|
|
isConnected: false,
|
|
|
heartbeatInterval: null,
|
|
|
heartbeatTimeout: 20000,
|
|
|
};
|
|
|
},
|
|
|
onLoad(options) {
|
|
|
// 从缓存获取用户信息
|
|
|
const user = myCache('user');
|
|
|
this.userName = user.nickName || '';
|
|
|
this.userId = user.userid || '';
|
|
|
this.userHeadImg = user.avatar || require('@/static/image/girl.png');
|
|
|
|
|
|
if (options.data) {
|
|
|
this.chatInfo = JSON.parse(decodeURIComponent(options.data));
|
|
|
// 根据会话类型设置 chatType
|
|
|
this.chatType = this.chatInfo.sort === 'groupchat' ? 'group' : 'private';
|
|
|
// 设置标题
|
|
|
uni.setNavigationBarTitle({ title: this.chatInfo.chatName || '聊天' });
|
|
|
|
|
|
// 是否有待发送的商品/订单
|
|
|
if (this.chatInfo.sendinfo) {
|
|
|
this.ifSend = true;
|
|
|
this.sendInfo = this.chatInfo.sendinfo;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 群聊时获取教练、客服等头像
|
|
|
if (this.chatType === 'group') {
|
|
|
this.getGroupMemberInfo();
|
|
|
}
|
|
|
},
|
|
|
onShow() {
|
|
|
this.getMessageList();
|
|
|
// 重新连接WebSocket
|
|
|
this.reconnect();
|
|
|
// 滚动到底部
|
|
|
setTimeout(() => this.scrollToBottom(), 300);
|
|
|
},
|
|
|
methods: {
|
|
|
// ---------- 消息列表加载 ----------
|
|
|
getMessageList() {
|
|
|
const list = myCache(this.chatInfo.chatId) || [];
|
|
|
if (list.length === 0) {
|
|
|
// 首次会话显示欢迎语
|
|
|
const welcome = `Hi，${this.userName}，欢迎您！这里是${this.chatInfo.chatName}，请问有什么可以帮助您的呢？`;
|
|
|
this.messageList = [{
|
|
|
fromname: this.chatInfo.chatName,
|
|
|
fromuser: this.chatInfo.friendId || this.chatInfo.ownerId,
|
|
|
headimg: this.chatInfo.chatAvatar,
|
|
|
toname: this.userName,
|
|
|
touser: this.userId,
|
|
|
content: welcome,
|
|
|
fromtime: new Date().toISOString(),
|
|
|
type: 'txt',
|
|
|
}];
|
|
|
// 立即缓存
|
|
|
myCache(this.chatInfo.chatId, this.messageList);
|
|
|
} else {
|
|
|
this.messageList = list;
|
|
|
// 处理时间显示（已由缓存保存时处理好）
|
|
|
}
|
|
|
this.$forceUpdate();
|
|
|
// 加载完成后滚动到底部
|
|
|
this.$nextTick(() => this.scrollToBottom());
|
|
|
},
|
|
|
|
|
|
// ---------- WebSocket 连接（合并后统一管理） ----------
|
|
|
socketInit() {
|
|
|
const that = this;
|
|
|
if (this.isConnected) return;
|
|
|
uni.connectSocket({
|
|
|
url: 'wss://www.sanduolantoyoga.com/yoga-imserver',
|
|
|
header: { Authorization: uni.getStorageSync('token') },
|
|
|
success: (res) => {
|
|
|
console.log('socket连接成功', res);
|
|
|
// 拉取离线消息
|
|
|
this.getReadedId();
|
|
|
},
|
|
|
fail: (err) => console.log('socket连接失败', err),
|
|
|
});
|
|
|
uni.onSocketOpen(() => {
|
|
|
that.isConnected = true;
|
|
|
// 登录包
|
|
|
uni.sendSocketMessage({
|
|
|
data: JSON.stringify({ cmd: 0, data: { accessToken: uni.getStorageSync('token') } }),
|
|
|
success: () => console.log('登录包发送成功'),
|
|
|
fail: () => console.log('登录包发送失败'),
|
|
|
});
|
|
|
that.startHeartbeat();
|
|
|
});
|
|
|
uni.onSocketClose(() => {
|
|
|
that.isConnected = false;
|
|
|
that.reconnect();
|
|
|
});
|
|
|
uni.onSocketError(() => {
|
|
|
that.isConnected = false;
|
|
|
that.reconnect();
|
|
|
});
|
|
|
uni.onSocketMessage((res) => {
|
|
|
if (!res.data) return;
|
|
|
const data = JSON.parse(res.data);
|
|
|
console.log('收到消息', data);
|
|
|
// 根据 cmd 分发
|
|
|
if (data.cmd === 3) {
|
|
|
// 私聊
|
|
|
this.handlePrivateMessage(data.data);
|
|
|
} else if (data.cmd === 4) {
|
|
|
// 群聊
|
|
|
this.handleGroupMessage(data.data);
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
|
|
|
handlePrivateMessage(data) {
|
|
|
// 仅处理发给自己的消息
|
|
|
if (data.recvId != this.userId) return;
|
|
|
if (!this.ifMsgExist(data.id)) {
|
|
|
this.appendMessage(data);
|
|
|
// 已读上报
|
|
|
this.readedPrivate(data.id);
|
|
|
// 更新会话列表
|
|
|
this.updateChatList(data);
|
|
|
}
|
|
|
},
|
|
|
|
|
|
handleGroupMessage(data) {
|
|
|
if (data.groupId != this.chatInfo.groupId) return;
|
|
|
if (!this.ifMsgExist(data.id)) {
|
|
|
this.appendMessage(data);
|
|
|
this.readedGroup();
|
|
|
this.updateChatList(data);
|
|
|
}
|
|
|
},
|
|
|
|
|
|
ifMsgExist(id) {
|
|
|
return this.messageList.some(item => item.id === id);
|
|
|
},
|
|
|
|
|
|
appendMessage(data) {
|
|
|
// 将消息转换为显示格式
|
|
|
const msg = {
|
|
|
fromname: data.sendNickName || '匿名',
|
|
|
fromuser: data.sendId,
|
|
|
headimg: data.headImage || require('@/static/image/girl.png'),
|
|
|
toname: this.userName,
|
|
|
touser: this.userId,
|
|
|
content: data.type === 0 ? decodeURIComponent(data.content) : data.content,
|
|
|
fromtime: data.sendTime,
|
|
|
type: this.mapMsgType(data.type),
|
|
|
id: data.id,
|
|
|
sendId: data.sendId,
|
|
|
recvId: data.recvId,
|
|
|
time: data.type === 3 ? 5 : 0,
|
|
|
ifaudio: false,
|
|
|
read: data.readedCount ? [] : undefined, // 群聊使用
|
|
|
ifread: false, // 私聊使用
|
|
|
send: data.type === 6 ? this.getProduct(data.content) : (data.type === 5 ? this.getOrder(data.content) : null),
|
|
|
};
|
|
|
this.messageList.push(msg);
|
|
|
this.$forceUpdate();
|
|
|
// 缓存
|
|
|
myCache(this.chatInfo.chatId, this.messageList);
|
|
|
this.scrollToBottom();
|
|
|
},
|
|
|
|
|
|
mapMsgType(type) {
|
|
|
const map = {
|
|
|
0: 'txt',
|
|
|
1: 'image',
|
|
|
3: 'audio',
|
|
|
4: 'video',
|
|
|
5: 'product',
|
|
|
6: 'product',
|
|
|
};
|
|
|
return map[type] || 'txt';
|
|
|
},
|
|
|
|
|
|
// ---------- 读写已读状态 ----------
|
|
|
async readedPrivate() {
|
|
|
await uni.$http.put(`/api/message/private/readed?friendId=${this.chatInfo.friendId}`);
|
|
|
},
|
|
|
async readedGroup() {
|
|
|
await uni.$http.put(`/api/message/group/readed?groupId=${this.chatInfo.groupId}`);
|
|
|
},
|
|
|
|
|
|
// ---------- 拉取离线消息 ----------
|
|
|
async getReadedId() {
|
|
|
let url, param;
|
|
|
if (this.chatType === 'private') {
|
|
|
url = '/api/message/private/maxReadedId';
|
|
|
param = { friendId: this.chatInfo.friendId };
|
|
|
} else {
|
|
|
url = '/api/message/group/maxReadedId';
|
|
|
param = { groupId: this.chatInfo.groupId };
|
|
|
}
|
|
|
const { data: res } = await uni.$http.get(url, param);
|
|
|
if (res.data) {
|
|
|
this.chatInfo.minId = res.data;
|
|
|
this.pullOfflineMessages();
|
|
|
}
|
|
|
},
|
|
|
|
|
|
async pullOfflineMessages() {
|
|
|
let url, param;
|
|
|
if (this.chatType === 'private') {
|
|
|
url = '/api/message/private/pullOfflineMessage';
|
|
|
param = { minId: this.chatInfo.minId };
|
|
|
} else {
|
|
|
url = '/api/message/group/pullOfflineMessage';
|
|
|
param = { minId: this.chatInfo.minId };
|
|
|
}
|
|
|
const { data: res } = await uni.$http.get(url, param);
|
|
|
if (res.data && res.data.length) {
|
|
|
// 倒序插入（因为消息按时间升序）
|
|
|
res.data.forEach(item => {
|
|
|
if (!this.ifMsgExist(item.id)) {
|
|
|
const msg = this.convertMsg(item);
|
|
|
this.messageList.push(msg);
|
|
|
}
|
|
|
});
|
|
|
this.messageList.sort((a, b) => a.fromtime - b.fromtime);
|
|
|
myCache(this.chatInfo.chatId, this.messageList);
|
|
|
this.$forceUpdate();
|
|
|
this.scrollToBottom();
|
|
|
}
|
|
|
},
|
|
|
|
|
|
// ---------- 发送消息 ----------
|
|
|
async inputs(e) {
|
|
|
const data = {
|
|
|
fromname: this.userName,
|
|
|
fromuser: this.userId,
|
|
|
headimg: this.userHeadImg,
|
|
|
toname: this.chatInfo.chatName,
|
|
|
touser: this.chatInfo.friendId || this.chatInfo.groupId,
|
|
|
content: e.type === 'audio' ? e.message.voice : e.message,
|
|
|
time: e.type === 'audio' ? e.message.time : 0,
|
|
|
ifaudio: false,
|
|
|
fromtime: new Date(),
|
|
|
type: e.type,
|
|
|
};
|
|
|
if (e.type !== 'video') {
|
|
|
this.messageList.push(data);
|
|
|
this.scrollToBottom();
|
|
|
myCache(this.chatInfo.chatId, this.messageList);
|
|
|
}
|
|
|
// 根据类型上传文件并发送
|
|
|
if (['txt', 'audio', 'image', 'video'].includes(e.type)) {
|
|
|
let content = data.content;
|
|
|
if (e.type !== 'txt') {
|
|
|
// 上传文件
|
|
|
const url = await this.uploadFile(e.message, e.type);
|
|
|
content = url;
|
|
|
}
|
|
|
// 发送消息
|
|
|
await this.sendMsg(content, e.type);
|
|
|
}
|
|
|
},
|
|
|
|
|
|
async uploadFile(filePath, type) {
|
|
|
let url = '';
|
|
|
const token = uni.getStorageSync('token');
|
|
|
const uploadUrl = uni.$http.baseUrl + (type === 'image' ? '/api/image/upload' : '/api/file/upload');
|
|
|
uni.showLoading({ title: '上传中...' });
|
|
|
try {
|
|
|
const res = await new Promise((resolve, reject) => {
|
|
|
uni.uploadFile({
|
|
|
url: uploadUrl,
|
|
|
filePath,
|
|
|
name: 'file',
|
|
|
header: { Authorization: token },
|
|
|
success: (res) => {
|
|
|
const data = JSON.parse(res.data);
|
|
|
if (data.data) resolve(data.data.originUrl || data.data);
|
|
|
else reject(data.msg);
|
|
|
},
|
|
|
fail: reject,
|
|
|
});
|
|
|
});
|
|
|
uni.hideLoading();
|
|
|
return res;
|
|
|
} catch (err) {
|
|
|
uni.hideLoading();
|
|
|
this.$refs.uToast.show({ title: err || '上传失败', type: 'error' });
|
|
|
throw err;
|
|
|
}
|
|
|
},
|
|
|
|
|
|
async sendMsg(content, type) {
|
|
|
const mtypeMap = { txt: '0', image: '1', audio: '3', video: '4' };
|
|
|
const mtype = mtypeMap[type] || '0';
|
|
|
let param = { content };
|
|
|
if (this.chatType === 'private') {
|
|
|
param.recvId = this.chatInfo.friendId;
|
|
|
} else {
|
|
|
param.groupId = this.chatInfo.groupId;
|
|
|
param.atUserIds = [this.chatInfo.friendId, this.chatInfo.teacherId].filter(Boolean);
|
|
|
}
|
|
|
param.type = mtype;
|
|
|
const url = this.chatType === 'private' ? '/api/message/private/send' : '/api/message/group/send';
|
|
|
try {
|
|
|
const res = await uni.$http.post(url, param);
|
|
|
if (res.data) {
|
|
|
const msg = res.data;
|
|
|
// 更新已发送的消息
|
|
|
const last = this.messageList[this.messageList.length - 1];
|
|
|
if (last && last.content === param.content) {
|
|
|
last.id = msg.id;
|
|
|
last.fromtime = msg.sendTime;
|
|
|
last.sendId = msg.sendId;
|
|
|
last.recvId = msg.recvId;
|
|
|
last.ifread = false;
|
|
|
myCache(this.chatInfo.chatId, this.messageList);
|
|
|
}
|
|
|
}
|
|
|
} catch (err) {
|
|
|
this.messageList.pop();
|
|
|
uni.showToast({ title: err.msg || '发送失败', icon: 'none' });
|
|
|
}
|
|
|
},
|
|
|
|
|
|
// ---------- 聊天列表更新（缓存） ----------
|
|
|
updateChatList(data) {
|
|
|
const list = myCache('chatlist-' + this.userId) || [];
|
|
|
const idx = list.findIndex(item => item.id === this.chatInfo.chatId);
|
|
|
const entry = {
|
|
|
id: this.chatInfo.chatId,
|
|
|
content: data.content || '',
|
|
|
type: data.type,
|
|
|
minId: data.id,
|
|
|
datetime: data.sendTime,
|
|
|
name: this.chatInfo.chatName,
|
|
|
userid: this.userId,
|
|
|
fromuser: data.sendId,
|
|
|
img: this.chatInfo.chatAvatar,
|
|
|
sort: this.chatType === 'private' ? 'privatechat' : 'groupchat',
|
|
|
groupId: this.chatInfo.groupId,
|
|
|
friendId: this.chatInfo.friendId,
|
|
|
teacherId: this.chatInfo.teacherId,
|
|
|
};
|
|
|
if (idx >= 0) {
|
|
|
list[idx] = entry;
|
|
|
} else {
|
|
|
list.unshift(entry);
|
|
|
}
|
|
|
myCache('chatlist-' + this.userId, list);
|
|
|
},
|
|
|
|
|
|
// ---------- 工具方法 ----------
|
|
|
changeTime(date) {
|
|
|
return dateTime.dateTime1(date);
|
|
|
},
|
|
|
|
|
|
previewImg(url) {
|
|
|
const idx = this.imgMsg.indexOf(url);
|
|
|
uni.previewImage({
|
|
|
current: idx >= 0 ? idx : 0,
|
|
|
urls: this.imgMsg,
|
|
|
});
|
|
|
},
|
|
|
|
|
|
playVoice(url, ifplay, index) {
|
|
|
innerAudioContext.stop();
|
|
|
this.messageList.forEach((item, i) => (item.ifaudio = false));
|
|
|
ifplay = !ifplay;
|
|
|
this.messageList[index].ifaudio = ifplay;
|
|
|
this.$forceUpdate();
|
|
|
if (ifplay) {
|
|
|
innerAudioContext.src = url;
|
|
|
innerAudioContext.play();
|
|
|
innerAudioContext.onEnded(() => {
|
|
|
this.messageList[index].ifaudio = false;
|
|
|
this.$forceUpdate();
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
|
|
|
handleImageError(e, index) {
|
|
|
this.messageList[index].headimg = require('@/static/image/girl.png');
|
|
|
},
|
|
|
|
|
|
scrollToBottom() {
|
|
|
const len = this.messageList.length;
|
|
|
if (len) {
|
|
|
this.scrollToView = '';
|
|
|
this.$nextTick(() => {
|
|
|
this.scrollToView = 'msg' + (len - 1);
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
|
|
|
// 下拉刷新
|
|
|
onPulling() {
|
|
|
this.triggered = true;
|
|
|
setTimeout(() => (this.triggered = false), 2000);
|
|
|
},
|
|
|
onRefresh() {
|
|
|
this.pullOfflineMessages();
|
|
|
},
|
|
|
onRestore() { this.triggered = false; },
|
|
|
onAbort() { this.triggered = false; },
|
|
|
|
|
|
// 输入框高度
|
|
|
heights(h) {
|
|
|
this.inputh = h;
|
|
|
this.scrollToBottom();
|
|
|
},
|
|
|
|
|
|
// 商品/订单弹窗
|
|
|
closeSendPopup() {
|
|
|
this.ifSend = false;
|
|
|
this.sendInfo = null;
|
|
|
},
|
|
|
sendServer() {
|
|
|
// 触发发送商品/订单消息，实际调用 inputs 或直接 sendMsg
|
|
|
const data = {
|
|
|
type: 'product',
|
|
|
message: this.sendInfo.id,
|
|
|
};
|
|
|
this.inputs(data);
|
|
|
},
|
|
|
|
|
|
// 跳转详情
|
|
|
gotoDetail(item) {
|
|
|
const send = item.send;
|
|
|
if (!send) return;
|
|
|
let url = '';
|
|
|
if (send.type === 1) url = `/pages/product/detail?id=${send.id}`;
|
|
|
else if (send.type === 2) url = `/pages/product/cdetail?id=${send.id}`;
|
|
|
else if (send.type === 3) url = `/pages/order/orderinfo?id=${send.orderId}`;
|
|
|
if (url) uni.navigateTo({ url });
|
|
|
},
|
|
|
|
|
|
// 群聊成员信息（客服、教练、咨询用户）
|
|
|
async getGroupMemberInfo() {
|
|
|
const ids = [this.chatInfo.customerService, this.chatInfo.instructor, this.chatInfo.ownerId];
|
|
|
// 实际项目中可批量请求，此处简化，只取当前用户信息
|
|
|
// 为了演示，直接设置占位
|
|
|
this.groupPersons = [
|
|
|
{ name: this.chatInfo.customername || '客服', img: this.chatInfo.customerimg || '/static/image/kfr.png' },
|
|
|
{ name: this.chatInfo.instructorname || '教练', img: this.chatInfo.instructorimg || '/static/image/jltx.png' },
|
|
|
{ name: this.chatInfo.ownername || '咨询用户', img: this.chatInfo.ownerimg || '/static/image/mr.png' },
|
|
|
];
|
|
|
},
|
|
|
|
|
|
// 群聊已读未读弹窗
|
|
|
openRead(item) {
|
|
|
this.ifRead = true;
|
|
|
this.buildReadInfo(item);
|
|
|
this.$refs.popupRead.open('right');
|
|
|
},
|
|
|
openNoRead(item) {
|
|
|
this.ifRead = false;
|
|
|
this.buildReadInfo(item);
|
|
|
this.$refs.popupRead.open('right');
|
|
|
},
|
|
|
buildReadInfo(item) {
|
|
|
// 假设 item.read 存储已读用户id列表，此处仅为示例
|
|
|
// 实际需从服务器获取或本地维护，此处仅演示界面
|
|
|
const readList = item.read || [];
|
|
|
const allUsers = [
|
|
|
{ id: this.chatInfo.customerService, name: this.chatInfo.customername || '客服' },
|
|
|
{ id: this.chatInfo.instructor, name: this.chatInfo.instructorname || '教练' },
|
|
|
{ id: this.chatInfo.ownerId, name: this.chatInfo.ownername || '咨询用户' },
|
|
|
];
|
|
|
this.readInfo.read = allUsers.filter(u => readList.includes(u.id)).map(u => ({ ...u, time: new Date() }));
|
|
|
this.readInfo.noread = allUsers.filter(u => !readList.includes(u.id));
|
|
|
},
|
|
|
switchReadTab(type) {
|
|
|
this.ifRead = type === 1;
|
|
|
},
|
|
|
|
|
|
// WebSocket 心跳/重连（合并，与上述 socketInit 配合）
|
|
|
startHeartbeat() {
|
|
|
clearInterval(this.heartbeatInterval);
|
|
|
this.heartbeatInterval = setInterval(() => {
|
|
|
if (this.isConnected) {
|
|
|
uni.sendSocketMessage({
|
|
|
data: JSON.stringify({ cmd: 1, data: { accessToken: uni.getStorageSync('token') } }),
|
|
|
fail: () => this.reconnect(),
|
|
|
});
|
|
|
}
|
|
|
}, this.heartbeatTimeout);
|
|
|
},
|
|
|
reconnect() {
|
|
|
if (!this.isConnected) {
|
|
|
clearTimeout(this.heartbeatInterval);
|
|
|
this.heartbeatInterval = setTimeout(() => this.socketInit(), this.heartbeatTimeout);
|
|
|
}
|
|
|
},
|
|
|
|
|
|
// 获取商品/订单详情（略，实际调用接口）
|
|
|
async getProduct(id) {
|
|
|
// 模拟
|
|
|
return { type: 1, id, name: '商品名', pic: '/static/image/nopic.png', price: 100, unit: '元' };
|
|
|
},
|
|
|
async getOrder(id) {
|
|
|
return { type: 3, id, orderId: '123', name: '订单', pic: '/static/image/nopic.png', price: 200, quantity: 1 };
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
page {
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
.content {
|
|
|
height: 100%;
|
|
|
background-color: rgba(244, 244, 244, 1);
|
|
|
position: relative;
|
|
|
}
|
|
|
::v-deep .uni-noticebar{
|
|
|
margin-bottom: 0 !important;
|
|
|
padding: 10rpx 12rpx !important;
|
|
|
border-radius: 10rpx;
|
|
|
}
|
|
|
|
|
|
.chat {
|
|
|
height: 100%;
|
|
|
|
|
|
.chat-main {
|
|
|
padding-left: 20rpx;
|
|
|
padding-right: 20rpx;
|
|
|
padding-top: 20rpx;
|
|
|
// padding-bottom: 120rpx; //获取动态高度
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
|
|
|
.chat-ls {
|
|
|
.chat-time {
|
|
|
font-size: 24rpx;
|
|
|
color: rgba(39, 40, 50, 0.3);
|
|
|
line-height: 34rpx;
|
|
|
padding: 10rpx 0rpx;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.msg-m {
|
|
|
display: flex;
|
|
|
padding: 20rpx 0;
|
|
|
|
|
|
.user-img {
|
|
|
flex: none;
|
|
|
width: 92rpx;
|
|
|
height: 90rpx;
|
|
|
border-radius: 20rpx;
|
|
|
text-align: center;
|
|
|
.uimg{
|
|
|
width: 70rpx;
|
|
|
height: 70rpx;
|
|
|
margin: 0 auto;
|
|
|
border-radius: 35rpx;
|
|
|
}
|
|
|
.uname{
|
|
|
height: 30rpx;
|
|
|
display: block;
|
|
|
margin: 0 auto;
|
|
|
line-height: 30rpx;
|
|
|
color: rgba(39, 40, 50, 0.5);
|
|
|
font-size: 24rpx;
|
|
|
}
|
|
|
}
|
|
|
.message {
|
|
|
flex: none;
|
|
|
max-width: 540rpx;
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
}
|
|
|
.messagevideo {
|
|
|
max-width: 540rpx;
|
|
|
height: 300rpx;
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
}
|
|
|
.msg-text {
|
|
|
font-size: 32rpx;
|
|
|
color: rgba(39, 40, 50, 1);
|
|
|
line-height: 44rpx;
|
|
|
padding: 18rpx 24rpx;
|
|
|
}
|
|
|
|
|
|
.msg-img {
|
|
|
max-width: 400rpx;
|
|
|
border-radius: 20rpx;
|
|
|
}
|
|
|
.msg-video{
|
|
|
width: 400rpx;
|
|
|
height: 300rpx;
|
|
|
border-radius: 20rpx;
|
|
|
}
|
|
|
.msg-map {
|
|
|
background: #fff;
|
|
|
width: 464rpx;
|
|
|
height: 284rpx;
|
|
|
overflow: hidden;
|
|
|
margin: 0 20rpx;
|
|
|
.map-name {
|
|
|
font-size: 32rpx;
|
|
|
color: rgba(39, 40, 50, 1);
|
|
|
line-height: 44rpx;
|
|
|
padding: 18rpx 24rpx 0 24rpx;
|
|
|
//下面四行是单行文字的样式
|
|
|
display: -webkit-box;
|
|
|
-webkit-box-orient: vertical;
|
|
|
-webkit-line-clamp: 1;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
.map-address {
|
|
|
font-size: 24rpx;
|
|
|
color: rgba(39, 40, 50, 0.4);
|
|
|
padding: 0 24rpx;
|
|
|
//下面四行是单行文字的样式
|
|
|
display: -webkit-box;
|
|
|
-webkit-box-orient: vertical;
|
|
|
-webkit-line-clamp: 1;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.map {
|
|
|
padding-top: 8rpx;
|
|
|
width: 464rpx;
|
|
|
height: 190rpx;
|
|
|
}
|
|
|
}
|
|
|
.voice {
|
|
|
// width: 200rpx;
|
|
|
min-width: 100rpx;
|
|
|
max-width: 400rpx;
|
|
|
}
|
|
|
.voice-img {
|
|
|
width: 36rpx;
|
|
|
height: 36rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.msg-left {
|
|
|
flex-direction: row;
|
|
|
.feed-imgy{
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: center;
|
|
|
align-self: center;
|
|
|
margin-right: 0rpx;
|
|
|
width: 95rpx;
|
|
|
height: 75rpx;
|
|
|
}
|
|
|
.feed-img{
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: center;
|
|
|
align-self: center;
|
|
|
margin-right: 0rpx;
|
|
|
width: 75rpx;
|
|
|
height: 75rpx;
|
|
|
}
|
|
|
.msg-text {
|
|
|
margin-left: 16rpx;
|
|
|
background-color: #fff;
|
|
|
border-radius: 0rpx 20rpx 20rpx 20rpx;
|
|
|
}
|
|
|
|
|
|
.ms-img {
|
|
|
margin-left: 16rpx;
|
|
|
}
|
|
|
.msg-video{
|
|
|
margin-left: 16rpx;
|
|
|
}
|
|
|
.msh-map {
|
|
|
margin-left: 16rpx;
|
|
|
border-radius: 0rpx 20rpx 20rpx 20rpx;
|
|
|
}
|
|
|
|
|
|
.msg-img {
|
|
|
margin: 0 0 0 20rpx;
|
|
|
}
|
|
|
|
|
|
.voice {
|
|
|
text-align: left;
|
|
|
display: flex;
|
|
|
}
|
|
|
.voice-img {
|
|
|
transform: rotate(180deg);
|
|
|
width: 36rpx;
|
|
|
height: 36rpx;
|
|
|
padding-bottom: 4rpx;
|
|
|
margin-right: 10rpx;
|
|
|
}
|
|
|
.voicel{
|
|
|
height: 32rpx;
|
|
|
width: 32rpx;
|
|
|
}
|
|
|
.bg {
|
|
|
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAYCAYAAAAF6fiUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MEM0NzgwODc1MDY0MTFFRjk1QjhFRUUxQjYyOUQ5NDQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MEM0NzgwODg1MDY0MTFFRjk1QjhFRUUxQjYyOUQ5NDQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowQzQ3ODA4NTUwNjQxMUVGOTVCOEVFRTFCNjI5RDk0NCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowQzQ3ODA4NjUwNjQxMUVGOTVCOEVFRTFCNjI5RDk0NCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqxjhsEAAANzSURBVHjazJlLaNRQFIaTVIcRQUELoggVKYIgQvGFr40giLMRBAtjXblwUSmIK1vBTQUREUFB8NGdGwUXgoIVFwq6EGSkOAguXKiUQQq6kKK0Gv+LJ+HkTpLJfYUc+DnJ3M436Tn3eeKHYeiZ2NDQkGfZfCj03Nka6DzUgqZMYa1WS45HzIf15C/xqmeuE7ATOs3up1zxRefslYSgggn465j/GLpJ13ehfS75SEIu36/AFCQ6wQHoBbTgIOBZfBGow9AvaIXBb8d89PYFFpcEn7e5GAG+wXfPQc+g91DNQQKy+A3oB1SnkWDMR9BrbG0oxLeVgNAgCeLhF6FN0CuLiS3CP07+BDTgko/kbHC9BugG6w20ja63QxNSYk0tj/8EatP1uOYuKMFHoCdYW09+kDKnT0Kz0KjGKChik9AsxPkz0FnWvtIgsar8y2wUBDp8BDrBR+zS+CP4PCgyApZDa6Eb+ELDQQJiPs3DkV2FOnQ9atDjVfkPyS+DduvykQQtfpAypM7A3aPbB0iC7bNCgi+dRW6RP2owDanyf0Lv6HqPKl+KTxcf8czlBxnz2gjcPGXtiIOdSRb/Ofmt1KY7DanyZ8gP2uIjMYX4eXPeNPm9jg5Eafwv7IS+rkT+N/Kry+bnJeA3+T5HCUjjhxa3oCr8UOM3rfDzEnCQ/Fu2Q7K5be3i0+IWWadEfj/572Xzg4zywhW4VWwhs128y+LvJ9+mxbEs/mbyn2zxafHtyU87B4yzPe1JgOZZ8x8LwU/waTGL7BT5RwZTkSq/Rge06NCmxJfi08Wn8kQmP20ErKc56xIvpQJUx72NBMR8L1kKbkIb6fq6FKDQIb9BI1v8by91+YiPFj+1GgpYP4I9x+593IcZ05VOEsScOMfuxUuMr/Sg4uHHWNtSjUqlCv81HZDuQ8OqfPFChl7CxHx8NsbiE/Px+XChBKiYhXL0IPUMsYB9lopiddpthI74O9i0sIXVbbT5CPIAi02Cj7a2y2KcrjXp4UXpdpfUtmihIJfHjxbQp5rBL8xPC77NXY2JXaOeOS1t3fooAa74t9loaNrgI8gd1vsL8f0KvpSPdj4u3wuLncxFuj4mbSWVTH4pz3aSMR9/k8mv4jthz3HwD7HgXDAJfkaHTPDzgl+VKahs+wjdgT54/0vUzvhUos61fwIMANiWariLn8/jAAAAAElFTkSuQmCC);
|
|
|
width: 32rpx;
|
|
|
height: 32rpx;
|
|
|
background-size: 400%;
|
|
|
}
|
|
|
|
|
|
.msg-product{
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
width: 100%;
|
|
|
background-color: #FFFFFF;
|
|
|
padding: 10rpx;
|
|
|
border-radius: 16rpx;
|
|
|
width: 480rpx;
|
|
|
margin-left: 12rpx;
|
|
|
.zx{
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
width: 100%;
|
|
|
font-size: 28rpx;
|
|
|
margin: 10rpx;
|
|
|
.zxview{
|
|
|
color: darkgrey;
|
|
|
font-size: 26rpx;
|
|
|
margin-right: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
.msg-con{
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
width: 100%;
|
|
|
padding: 10rpx;
|
|
|
border-radius: 16rpx;
|
|
|
}
|
|
|
.img{
|
|
|
width: 120rpx;
|
|
|
height: 120rpx;
|
|
|
}
|
|
|
.info{
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
flex: 1;
|
|
|
padding: 6rpx 8rpx;
|
|
|
position: relative;
|
|
|
margin-left: 10rpx;
|
|
|
background-color: #f4f4f4;
|
|
|
border-radius: 0 10rpx 10rpx 0;
|
|
|
.name{
|
|
|
width: 330rpx;
|
|
|
// white-space: nowrap; /* 防止文本换行 */
|
|
|
// overflow: hidden; /* 隐藏溢出的内容 */
|
|
|
// text-overflow: ellipsis; /* 溢出部分显示省略号 */
|
|
|
.txt{
|
|
|
font-size: 26rpx;
|
|
|
color: darkgrey;
|
|
|
margin-left: 6rpx;
|
|
|
}
|
|
|
.ntxt{
|
|
|
font-size: 28rpx;
|
|
|
color: #000;
|
|
|
}
|
|
|
}
|
|
|
.sku{
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
.txt{
|
|
|
font-size: 26rpx;
|
|
|
color: darkgrey;
|
|
|
margin-right: 6rpx;
|
|
|
}
|
|
|
}
|
|
|
.xq{
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
.list{
|
|
|
display: flex;
|
|
|
flex: 1;
|
|
|
}
|
|
|
.price{
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
font-size: 28rpx;
|
|
|
color: #ff007f;
|
|
|
}
|
|
|
.ord{
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
font-size: 26rpx;
|
|
|
color: #232323;
|
|
|
}
|
|
|
.qty{
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
font-size: 26rpx;
|
|
|
color: darkgrey;
|
|
|
margin-left: 8rpx;
|
|
|
}
|
|
|
.btn{
|
|
|
font-size: 26rpx;
|
|
|
font-family: PingFang SC-Medium, PingFang SC;
|
|
|
font-weight: 500;
|
|
|
color: #FCFCFD;
|
|
|
width: 110rpx;
|
|
|
height: 50rpx;
|
|
|
line-height: 50rpx;
|
|
|
background: #ff007f;
|
|
|
box-shadow: 0rpx 10rpx 30rpx 2rpx rgba(255,0,127,0.2);
|
|
|
border-radius: 60rpx;
|
|
|
opacity: 1;
|
|
|
margin-right: 10rpx;
|
|
|
margin-top: 10rpx;
|
|
|
margin-bottom: 10rpx;
|
|
|
padding-left:0 !important;
|
|
|
padding-right:0 !important;
|
|
|
&::after{
|
|
|
border:none;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.msg-right {
|
|
|
flex-direction: row-reverse;
|
|
|
.rcon{
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: flex-end;
|
|
|
align-items: flex-end;
|
|
|
}
|
|
|
.read{
|
|
|
font-size: 24rpx;
|
|
|
color: #888;
|
|
|
margin-right: 10rpx;
|
|
|
display: flex;
|
|
|
justify-content: flex-end;
|
|
|
align-items: flex-end;
|
|
|
}
|
|
|
.noread{
|
|
|
font-size: 24rpx;
|
|
|
color: #00a89b;
|
|
|
margin-right: 10rpx;
|
|
|
display: flex;
|
|
|
justify-content: flex-end;
|
|
|
align-items: flex-end;
|
|
|
}
|
|
|
|
|
|
.feed-imgy{
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: center;
|
|
|
align-self: center;
|
|
|
margin-right: 0rpx;
|
|
|
width: 95rpx;
|
|
|
height: 75rpx;
|
|
|
}
|
|
|
.feed-img{
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: center;
|
|
|
align-self: center;
|
|
|
margin-right: 0rpx;
|
|
|
width: 75rpx;
|
|
|
height: 75rpx;
|
|
|
}
|
|
|
.msg-text {
|
|
|
margin-right: 16rpx;
|
|
|
background-color: #00a89b;
|
|
|
font-family: PingFang SC, PingFang SC;
|
|
|
font-weight: 400;
|
|
|
font-size: 32rpx;
|
|
|
color: #FFFFFF;
|
|
|
line-height: 48rpx;
|
|
|
border-radius: 20rpx 0rpx 20rpx 20rpx;
|
|
|
}
|
|
|
|
|
|
.ms-img {
|
|
|
margin-right: 16rpx;
|
|
|
}
|
|
|
|
|
|
.msg-img {
|
|
|
margin: 0 20rpx 0 0;
|
|
|
}
|
|
|
.msg-video{
|
|
|
margin: 0 20rpx 0 0;
|
|
|
}
|
|
|
.msh-map {
|
|
|
margin-left: 16rpx;
|
|
|
border-radius: 20rpx 0rpx 20rpx 20rpx;
|
|
|
}
|
|
|
|
|
|
.voice {
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
align-items: center;
|
|
|
justify-content: flex-end;
|
|
|
}
|
|
|
|
|
|
.voice-img {
|
|
|
display: block;
|
|
|
width: 36rpx;
|
|
|
height: 36rpx;
|
|
|
margin-left: 10rpx;
|
|
|
}
|
|
|
.voicel{
|
|
|
height: 32rpx;
|
|
|
width: 32rpx;
|
|
|
}
|
|
|
.bg {
|
|
|
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAYCAYAAAAF6fiUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6REJBQzQ1RjQ1MDYzMTFFRjk5QjZEQkI5MDlENzE3RTQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6REJBQzQ1RjU1MDYzMTFFRjk5QjZEQkI5MDlENzE3RTQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpEQkFDNDVGMjUwNjMxMUVGOTlCNkRCQjkwOUQ3MTdFNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpEQkFDNDVGMzUwNjMxMUVGOTlCNkRCQjkwOUQ3MTdFNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pm5p+OoAAAKmSURBVHja1Jk/SBxBFMbdy6mHSEARNYIkhU0ICCEkEEynEYmkUEiTxmBtZZHCgGVsAgEhQozYaAo7G0GwjgemC1ZBgzbaKKnEIsb1HbwjH8PM7szdfEQffMzyzexvhn2zM/snSdO0wSOmRfdFc6JfDfGDzb++UUlAjmbTfzHi0T5UbP61Vl6DV3BxZggDYPNRyU1LQDtcnC9GXY/ojeh2HZ2z+ahbZD4lAZt6cQ4Mv1v0W+tm6+icza+qSOZTEvAAZudjo+5Q/SNRX40ds/m47JSIfFoC1nSQ24Y/r/4fUZdR1xHQMZtfVSOZH7LndPgmoEl0oQMdA/8OzNrXxjlzokvRgsfA2HxUM5nvUsmXbzt5CGZJE/jv1d832k8GPsmw+TgDEyLfd8PP5NsAM9q4bPi76r8FrwXgHzwHyOa7loDY/Kw73JtvAyzpCcvgtQLoKfgT6p0GDJDNtyWAwXepEMIvWF6O27Q8Aa8bjo/h+JGWWwEv32y+Ldh8jMsQvi0B1Y9DicUz/b9aNod8/SDzs/pk8V2Ry7cl4FTLTvCORBd63Av+Ny2HAwbF5tuCzXdFLt+WgD0t+8E7F/3Q40Hw17WuRbTqOSg23zbrGXyfyOdbNoYB2LBaLU8vx0b7UWj/0WOTYvNdGzGD76NMvu0OKGvWKjEO/ifY0KbB3xBN6eZ25jEr2HxXxOQnAf1m8x1ZW9SM7Rr+O8hmfx2z4jOZ71IsfoH9LegeDPSFUfcd3mSf1NjxXTI/64UsBj/av4WC47Y5EK3o8VejbkD0U1QUPa9xOTgk812bcSx+GrgM1fRLsvIl8Vxny4albqjOW5HNz+ubyY/2S/IZLBULhAGz+Tf+n7D5Ne8lYRBsPmXzjKWixyq1rOVD0Q7hZYXNz9oP/ntcCTAAHScbp0OSlTgAAAAASUVORK5CYII=);
|
|
|
width: 32rpx;
|
|
|
height: 32rpx;
|
|
|
background-size: 400%;
|
|
|
}
|
|
|
|
|
|
.msg-product{
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
width: 100%;
|
|
|
background-color: #FFFFFF;
|
|
|
padding: 10rpx;
|
|
|
border-radius: 16rpx;
|
|
|
width: 480rpx;
|
|
|
margin-right: 12rpx;
|
|
|
.zx{
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
width: 100%;
|
|
|
font-size: 28rpx;
|
|
|
margin: 10rpx;
|
|
|
.zxview{
|
|
|
color: darkgrey;
|
|
|
font-size: 26rpx;
|
|
|
margin-right: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
.msg-con{
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
width: 100%;
|
|
|
padding: 10rpx;
|
|
|
border-radius: 16rpx;
|
|
|
}
|
|
|
.img{
|
|
|
width: 120rpx;
|
|
|
height: 120rpx;
|
|
|
}
|
|
|
.info{
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
flex: 1;
|
|
|
padding: 6rpx 8rpx;
|
|
|
position: relative;
|
|
|
margin-left: 10rpx;
|
|
|
background-color: #f4f4f4;
|
|
|
border-radius: 0 10rpx 10rpx 0;
|
|
|
.name{
|
|
|
width: 330rpx;
|
|
|
// white-space: nowrap; /* 防止文本换行 */
|
|
|
// overflow: hidden; /* 隐藏溢出的内容 */
|
|
|
// text-overflow: ellipsis; /* 溢出部分显示省略号 */
|
|
|
.txt{
|
|
|
font-size: 26rpx;
|
|
|
color: darkgrey;
|
|
|
margin-left: 6rpx;
|
|
|
}
|
|
|
.ntxt{
|
|
|
font-size: 28rpx;
|
|
|
color: #000;
|
|
|
}
|
|
|
}
|
|
|
.sku{
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
.txt{
|
|
|
font-size: 26rpx;
|
|
|
color: darkgrey;
|
|
|
margin-right: 6rpx;
|
|
|
}
|
|
|
}
|
|
|
.xq{
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
.list{
|
|
|
display: flex;
|
|
|
flex: 1;
|
|
|
}
|
|
|
.price{
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
font-size: 28rpx;
|
|
|
color: #ff007f;
|
|
|
}
|
|
|
.ord{
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
font-size: 26rpx;
|
|
|
color: #232323;
|
|
|
}
|
|
|
.qty{
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
font-size: 26rpx;
|
|
|
color: darkgrey;
|
|
|
margin-left: 8rpx;
|
|
|
}
|
|
|
.btn{
|
|
|
font-size: 26rpx;
|
|
|
font-family: PingFang SC-Medium, PingFang SC;
|
|
|
font-weight: 500;
|
|
|
color: #FCFCFD;
|
|
|
width: 110rpx;
|
|
|
height: 50rpx;
|
|
|
line-height: 50rpx;
|
|
|
background: #ff007f;
|
|
|
box-shadow: 0rpx 10rpx 30rpx 2rpx rgba(255,0,127,0.2);
|
|
|
border-radius: 60rpx;
|
|
|
opacity: 1;
|
|
|
margin-right: 10rpx;
|
|
|
margin-top: 10rpx;
|
|
|
margin-bottom: 10rpx;
|
|
|
padding-left:0 !important;
|
|
|
padding-right:0 !important;
|
|
|
&::after{
|
|
|
border:none;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.voicePlay {
|
|
|
animation-name: voicePlay;
|
|
|
animation-duration: 1s;
|
|
|
animation-direction: normal;
|
|
|
animation-iteration-count: infinite;
|
|
|
animation-timing-function: steps(3);
|
|
|
}
|
|
|
|
|
|
@keyframes voicePlay {
|
|
|
0% {
|
|
|
background-position: 0;
|
|
|
}
|
|
|
100% {
|
|
|
background-position: 100%;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.popup{
|
|
|
position: fixed;
|
|
|
bottom: 180rpx;
|
|
|
/* #ifdef H5 */
|
|
|
bottom: 100rpx;
|
|
|
/* #endif */
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
padding: 18rpx;
|
|
|
border-radius: 16rpx;
|
|
|
.tipcon{
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
width: 100%;
|
|
|
background-color: #FFFFFF;
|
|
|
padding: 16rpx;
|
|
|
border-radius: 16rpx;
|
|
|
.img{
|
|
|
width: 100rpx;
|
|
|
height: 100rpx;
|
|
|
}
|
|
|
.info{
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
flex: 1;
|
|
|
margin-left: 16rpx;
|
|
|
position: relative;
|
|
|
.name{
|
|
|
width: 550rpx;
|
|
|
// white-space: nowrap; /* 防止文本换行 */
|
|
|
// overflow: hidden; /* 隐藏溢出的内容 */
|
|
|
// text-overflow: ellipsis; /* 溢出部分显示省略号 */
|
|
|
margin-right: 50rpx;
|
|
|
.txt{
|
|
|
font-size: 26rpx;
|
|
|
color: darkgrey;
|
|
|
margin-left: 6rpx;
|
|
|
}
|
|
|
.ntxt{
|
|
|
font-size: 28rpx;
|
|
|
color: #000;
|
|
|
}
|
|
|
}
|
|
|
.sku{
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
.txt{
|
|
|
font-size: 26rpx;
|
|
|
color: darkgrey;
|
|
|
margin-right: 6rpx;
|
|
|
}
|
|
|
}
|
|
|
.xq{
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
.list{
|
|
|
display: flex;
|
|
|
flex: 1;
|
|
|
align-items: flex-end;
|
|
|
}
|
|
|
.price{
|
|
|
font-size: 28rpx;
|
|
|
color: #ff007f;
|
|
|
}
|
|
|
.ord{
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
font-size: 26rpx;
|
|
|
color: #232323;
|
|
|
}
|
|
|
.qty{
|
|
|
font-size: 26rpx;
|
|
|
color: darkgrey;
|
|
|
margin-left: 6rpx;
|
|
|
}
|
|
|
.btn{
|
|
|
font-size: 26rpx;
|
|
|
font-family: PingFang SC-Medium, PingFang SC;
|
|
|
font-weight: 500;
|
|
|
color: #FCFCFD;
|
|
|
width: 150rpx;
|
|
|
height: 50rpx;
|
|
|
line-height: 50rpx;
|
|
|
background: #ff007f;
|
|
|
box-shadow: 0rpx 10rpx 30rpx 2rpx rgba(255,0,127,0.2);
|
|
|
border-radius: 10rpx;
|
|
|
opacity: 1;
|
|
|
margin-right: 10rpx;
|
|
|
padding-left:0 !important;
|
|
|
padding-right:0 !important;
|
|
|
&::after{
|
|
|
border:none;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.close{
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
right: 6rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.example {
|
|
|
width: 550rpx;
|
|
|
opacity: 1;
|
|
|
padding: 0;
|
|
|
box-sizing: border-box;
|
|
|
.order {
|
|
|
position: relative;
|
|
|
overflow: hidden;
|
|
|
display: block;
|
|
|
background-color: #ffffff;
|
|
|
margin: 0 0 10rpx;
|
|
|
box-sizing: border-box;
|
|
|
padding: 0rpx 20rpx;
|
|
|
}
|
|
|
.qhbtn{
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
.btn{
|
|
|
width: 120rpx;
|
|
|
height: 60rpx;
|
|
|
border-radius: 20rpx;
|
|
|
background-color: #eee;
|
|
|
color: #000;
|
|
|
font-size: 26rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
margin-right: 16rpx;
|
|
|
margin-top: 16rpx;
|
|
|
}
|
|
|
.cur{
|
|
|
background-color: #00a89b;
|
|
|
color: #fff;
|
|
|
}
|
|
|
}
|
|
|
.readlist{
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
padding: 20rpx 0 0 10rpx ;
|
|
|
}
|
|
|
.readcell{
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
width: 100%;
|
|
|
padding: 16rpx 0;
|
|
|
border-bottom: 1rpx solid #eee;
|
|
|
.readtime{
|
|
|
font-size: 24rpx;
|
|
|
color: #888;
|
|
|
}
|
|
|
.readname{
|
|
|
font-size: 26rpx;
|
|
|
color: #33383c;
|
|
|
display: flex;
|
|
|
flex: 1;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.chatlist{
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
padding: 20rpx 0 0 10rpx ;
|
|
|
}
|
|
|
.chatcell{
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
min-width: 90rpx;
|
|
|
height: 150rpx;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
margin-right: 30rpx;
|
|
|
.user-img{
|
|
|
width: 90rpx;
|
|
|
height: 90rpx;
|
|
|
border-radius: 5rpx;
|
|
|
}
|
|
|
.user-name{
|
|
|
font-size: 26rpx;
|
|
|
color: #33383c;
|
|
|
margin-top: 16rpx;
|
|
|
}
|
|
|
}
|
|
|
.lcon{
|
|
|
padding: 20rpx 10rpx;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
border-bottom: 1rpx solid #eee;
|
|
|
.lhtxt{
|
|
|
font-size: 30rpx;
|
|
|
color: #33383c;
|
|
|
line-height: 40rpx;
|
|
|
}
|
|
|
.ltxt{
|
|
|
margin-top: 16rpx;
|
|
|
font-size: 28rpx;
|
|
|
color: #888;
|
|
|
line-height: 30rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
</style>
|
