起因：
最近在工作中，老大讓我重構一下商城的客服聊天頁面（因為之前是買來的代碼---php渲染惡心的一比，現在要用uniapp做多端應用，所以前端這塊的重構基本上就是重做）
規划：
- 既然要做實時聊天呢，那自然少不了websocket的參與，當然了，在uniapp中，對websocket做了封裝和處理，我們直接使用它提供的api就行；
- 布局方面，其實只需要區分，自己發送的消息和別人發送的消息，自己發送的展示在右邊，別人發送的展示在左邊（這快比較簡單），然后你要展示什么樣的內容，那必須要有對應的標簽占位先（比如你要發送一個圖片，后端返回的是一個url，那你就需要留一個image標簽）
- 各種交互，需要考慮的是，每發送一個消息，都要滑動到最底部（剛進來之后同理）、還有輸入較多字符后，輸入框要增高一定的高度、點擊更多后要在底下展示發送圖片，拍照等按鈕、圖片預覽等（這塊很煩，h5，小程序，客戶端三端兼容很痛苦~）
實際效果展示：
代碼展示：
嗯...,代碼好像有點多（采用的是uniapp + uview，所以組件、路由跳轉、網絡請求這些都是采用uview的方式）
<template>
<view class="service">
<!-- 頭部 -->
<u-navbar :is-back="false" title=" " title-width="0" :background="background" :border-bottom="false" class="header"
height="44">
<view class="serviceTitle">
<u-image :src="fanhui" alt @click="goBack" width="24rpx" height="40rpx" />
<view v-if="!isSysMessage">{{userInfo.shopName}}</view>
<view v-else>通知消息</view>
</view>
<view class="goShopBtn" @click="goShopDetail" v-if="!isSysMessage">進店</view>
</u-navbar>
<!-- 分割線 -->
<view class="hrline"></view>
<view class="goodHref" v-if="!isSysMessage && goodsId" @click="goGoodsDetail">
<view class="goodContent">
<u-image :src="goodsInfo.goodsImg?url + goodsInfo.goodsImg:''" width="90rpx" height="90rpx" border-radius="12rpx"></u-image>
<text>{{goodsInfo.goodsName}}</text>
</view>
<!-- <view class="goHref" @click="sendGoodsHref">發送鏈接</view> -->
</view>
<!-- 聊天窗口區域 -->
<scroll-view :class="{'chatBox':true,'isGoods':Boolean(goodsId)}" :scroll-y="true" id="chatBoxScroll" :style="{height: style.contentViewHeight + 'px'}"
:scroll-with-animation="true" :scroll-top="scrollTop" @click="noShowMore" refresher-enabled="true"
:refresher-triggered="triggered" :refresher-threshold="100" refresher-background="#f2f2f2" @refresherrefresh="onRefresh"
@refresherrestore="onRestore" @refresherpulling="isLoadmore=false">
<!-- 加載中與沒有更多展示 -->
<u-loadmore :status="status" margin-top="60" class="loadmore" v-show="isLoadmore" />
<!-- 再包一層，方便計算高度 -->
<view id="chatContent" :class="{isPadding:!isSysMessage}">
<!-- 商品鏈接發送 -->
<!-- 聊天 -->
<view class="chat">
<!-- 這里再包一層殼子，方便整體循環 -->
<!-- 這里過濾，只展示圖片和文字，訂單和商品不展示 -->
<view class="chatMessage" v-for="(item,index) in messageList" :key="index" v-if="!isSysMessage">
<!-- 如果不是系統消息 -->
<view class="timeShow" v-if="((item.content&&(item.content.type=='image' || !item.content.type)))">{{item.createTime}}</view>
<!-- 別人發的信息展示 -->
<view v-if="item.type=='chat' && item.groupName=='店鋪客服'" class="isText">店鋪客服接待了你</view>
<view v-if="item.type=='message'" class="isText">當前無客服在線，您可以留言，我們會盡快回復您</view>
<view class="chatY" v-if="item.from && Number(item.from)!==userInfo.userId && ((item.content&&(item.content.type=='image' || !item.content.type)))">
<u-image :src="userInfo.shopImg" width="72rpx" height="72rpx" border-radius="50%"></u-image>
<view class="messagey" v-if="item.content && !item.content.type">
<text selectable="true">{{item.content}}</text>
</view>
<u-image class="messageyImg" :src="item.content?item.content.content:''" width="300rpx" height="300rpx"
border-radius="12rpx" v-if="item.content && item.content.type=='image'" @click="checkImg(item)"></u-image>
</view>
<!-- 自己發的信息展示 -->
<view class="chatM" v-if="(!item.from || (Number(item.from)==userInfo.userId)) && ((item.content&&(item.content.type=='image' || !item.content.type)))">
<view class="messagex" v-if="item.content && !item.content.type">
<text selectable="true">{{item.content}}</text>
</view>
<u-image class="messagexImg" :src="item.content?item.content.content:''" width="300rpx" height="300rpx"
border-radius="12rpx" v-if="item.content && item.content.type=='image'" @click="checkImg(item)"></u-image>
<u-image :src="userInfo.userPhoto" width="72rpx" height="72rpx" border-radius="50%"></u-image>
</view>
</view>
<!-- 如果是系統消息 -->
<view class="chatMessage" v-for="(item,index) in messageList" :key="index" v-if="isSysMessage && item.msgContent">
<!-- 別人發的信息展示 -->
<view class="timeShow">{{item.createTime}}</view>
<view class="chatY">
<u-image :src="sysImg" width="72rpx" height="72rpx" border-radius="50%"></u-image>
<view class="messagey">{{item.msgContent}}</view>
</view>
</view>
</view>
</view>
</scroll-view>
<!-- 輸入框 -->
<view class="inputBox" v-if="!isSysMessage" id="inputBox">
<u-field v-model="message" label=" " label-width="0" placeholder="在此輸入文字" type="textarea" maxlength="100" :clearable="false"
clear-size="0" placeholder-style="color: #9A9A9A;font-size:28rpx" @click="isFocus" @blur="isBlur">
</u-field>
<u-image :src="jiahao" width="54rpx" height="54rpx" v-show="!message" @click="sendImage"></u-image>
<view v-show="message" class="sendStn" @click="sendText">發送</view>
</view>
<!-- 更多 -->
<!-- #ifdef H5 -->
<view class="more" style="background: #f2f2f2; height: 200rpx;" v-if="!isSysMessage && isf">
<!-- #endif -->
<!-- #ifndef H5 -->
<view class="more" style="background: #f2f2f2; height: 200rpx;" v-if="!isSysMessage">
<!-- #endif -->
<u-image :src="xiangji" width="90rpx" height="90rpx" @click="goCamera"></u-image>
<u-image :src="tupian" width="90rpx" height="90rpx" @click="goAlbum"></u-image>
<!-- <u-image :src="shangpin" width="90rpx" height="90rpx"></u-image> -->
</view>
<!-- toast彈窗 -->
<u-toast ref="uToast" />
<!-- 圖片預覽 -->
<previewImage ref="previewImage" :imgs="messgaeImgList" :index="indexImg" @setIndexImg="indexImg=0"></previewImage>
<!-- 無網絡提示 -->
<u-no-network></u-no-network>
</view>
</template>
<script>
// 用戶圖片預覽
import config from "common/config.js";
import previewImage from '@/components/kxj-previewImage/kxj-previewImage.vue';
// 引入，為解決小程序不支持eval和new Function
import {
Function,
evaluate
} from 'eval5';
export default {
data() {
return {
url: config.baseUrl,
fanhui: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAsCAYAAAB2d9g5AAADoElEQVRYR72YX4jUVRTHv+dOu670BypJEyySENrY3bn37i7kixQI9SAsFrmEW6AmCoJEFojiixCCWCQ9VIJEKhmVPmhUEu1jT+f8Yl962Ycl9sF92IcNLW3G34kLM8Psb+/M/Gb2p/dx7v19P/ece+455w7hAQ96wDwUDhwcHNwwMDBwnoi2qeofAPaJyJ91wwoFOueeJ6IbAJ5r8lzCzK5woHNumIh+AbCh+ZhU9ZaIPFoo0Fo7aowJsCciMXGJmXcXBiyXy1tLpdJPAB6LwL5fXFycmpubu1MI0Hv/sqpeI6KHszBVPSciBwCkzXM9B41z7lUiugJgbcSyj5n5/diV6wnovZ9Q1ctEtCYiepKZT7S6310DnXO7iOgCgL6I6FFmPtUumXQFtNZOGmMC7KGMqAJ4j5k/7ZS5cgOttW8bY84DKGXuWQiKgyLyZSdYmM8FtNbuMcYEwWUwAPfSNN2fJEnYSK7REeicexfA50RkMorVNE33JEkSXJx7tAU65w4BOEtE2XVVVd0tIt/mJtUWtgR67w8D+CTi9oqq7hKRq93CWp6h9/4IgNOR7PEfgMleYVGg9/4ogI8isLtE9Doz/9iLZdFc6r0/DuDk/YIts7CNGwuxbIWF3vu/ATQKZW3BvwAmmDlU8UJGI0q99zcBrM+ohoic6iX8W+2uAXTOvUlElyJ5MlzwvUmSfF2EicvuYa0SXIxA76lqyJfnVgtdcfGdczuJ6HK2/KhqSNKHReSz1UCjmcY5twPAd5ECG8rQB8x8pldoy9RmrX3NGPNDrIVQ1WMisiI55NlE2+Q9Ojq6PU3Tq7EmKSSIdq1ExyhttcBau42IrhPRI5EMdFpEPsxjWTS1tYG+ZIz5uUXveZaZQ2XJNToW4LpKuVweC901ET0esfQLETkIIARV25EbGFS89+FRElr6dRHVr5h5b7bxza7rChg+ttaO1N4R2TQYpr9h5qnQ6/QcNLEPrbWDxphfATwdce8VIppk5krs264trIuMjIxsKZVK00S0MSJ8fWlp6Y3Z2dm7q3Zps8DQ0NDm/v7+aQDPRKA3FhYWJubn50OJa4yeLawrWGufNcb8BmBzBDpdqVR2zMzM3O7qHnYK9bGxsU1pmoYz3RJZGwLprUKBtejdWAukFzLQf5i58X5ctUubxYeHh5/q6+sL7n2x/ruq/i4iWwu3sC44Pj7+ZLVaDe+QV4go/G3yDjP/dd+Anc67UJd2goX5/wFbWz08tGZtggAAAABJRU5ErkJggg==',
jiahao: 'data:image/png;base64,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',
xiangji: 'data:image/png;base64,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',
tupian: 'data:image/png;base64,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',
shangpin: 'data:image/png;base64,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',
sysImg: 'data:image/png;base64,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',
background: {
backgroundColor: '#f2f2f2'
},
message: '',
messageList: [],
scrollTop: 0,
// 聊天時頁面滾動樣式
style: {
pageHeight: 0,
contentViewHeight: 0,
footViewHeight: 90,
mitemHeight: 0
},
messgaeImgList: [],
indexImg: 0,
// 這個狀態為了判斷更多是否顯示
morenStyle: false,
triggered: false,
_freshing: false,
isSysMessage: false,
initHeight: 0,
// 下拉加載更多相關
lastPage: 1,
page: 1,
status: 'loadmore',
isLoadmore: false,
shopId: 0,
// shopInfo: {},
goodsId: 0,
goodsInfo: {},
userInfo: {},
// 聊天分頁
chatPage: 1,
chatLastPage: 1,
wssServer: '',
tokenId: '',
socketOpen: false,
// 訂單相關
orderNo: 0,
orderId: 0,
isKill: false,
killId: 0,
isf: true,
windowSize: 0,
// isNetWork: false
}
},
components: {
previewImage,
},
watch: {
// 這個通過監聽輸入值的改變，改變聊天區域的高度
message(val, oldVal) {
// 小程序中，因為加了setTimeout，所以先觸發了監聽，導致that.initHeight!==res[0].height，最終高度計算錯誤
// 所以，在這個做判斷，如果清空輸入值時，不觸發監聽
if (val !== '') {
let that = this;
let query = uni.createSelectorQuery();
query.select('#inputBox').boundingClientRect();
setTimeout(() => {
query.exec((res) => {
if (that.initHeight !== res[0].height) {
that.style.contentViewHeight = that.style.contentViewHeight - (res[0].height - that.initHeight);
that.initHeight = res[0].height;
}
})
}, 100);
}
},
windowSize(val, oldVal) {
if (val > oldVal) {
this.isf = true;
}
},
isNetWork(val, oldVal) {
// 防止進入自己店鋪后也會觸發
if (this.wssServer) {
if (val) {
this.connectWS();
} else {
uni.closeSocket();
}
}
}
},
onUnload() {
uni.setStorageSync('isNet', false);
uni.closeSocket();
// 將未讀變為已讀
if (this.isSysMessage) {
this.updateMessages()
} else {
this.updataSysMessage()
}
},
onLoad(data) {
uni.setStorageSync('isNet', true);
// this.isNetWork = uni.getStorageSync('isNetwork');
if (data.sys) {
this.isSysMessage = data.sys;
}
this.shopId = data.shopId;
this.goodsId = data.goodsId;
this.orderId = data.orderId;
this.orderNo = data.orderNo;
this.isKill = data.isKill;
this.killId = data.id;
this.tokenId = uni.getStorageSync('tokenId');
// 獲取用戶信息
this.queryUserDetails()
// 進來先請求一次數據(歷史記錄)
this.$nextTick(() => {
this.onRefresh();
this.scrollToBottom();
});
//監聽服務器打開
uni.onSocketOpen(() => {
this.socketOpen = true;
let sendData = {
type: 'login',
uid: this.userInfo.userId,
userName: this.userInfo.loginName,
role: 'user',
platform: 2,
shopId: this.userInfo.shopId,
group: this.userInfo.receiveId
}
uni.sendSocketMessage({
data: JSON.stringify(sendData),
})
// 獲取帶出商品信息
if (this.goodsId) {
this.getGoodsInfo(this.goodsId);
}
// 如果是訂單，則發送訂單
if (this.orderId) {
let ordersData = {
content: `{"type":"orders","orderId":"${this.orderId}","content": "訂單號:${this.orderNo}"}`,
role: 'user',
type: 'say',
to: this.userInfo.receiveId
}
uni.sendSocketMessage({
data: JSON.stringify(ordersData)
})
}
// 接受服務器傳來的數據
uni.onSocketMessage((res) => {
let data = JSON.parse(res.data);
// 如果是圖片相關，則轉換為json對象，重構數據
try {
// 這里不處理數字，否則回變為科學計數法
if (isNaN(data.content)) {
// let text = eval("(" + data.content + ")");
let text = (new Function("return" + data.content))();
data.content = text;
}
if (data.content && data.content.type == 'image') {
data.content.content = this.url + data.content.content;
}
if ((data.type == 'say' && data.role == 'user') || (data.type == 'chat' && data.groupName) || (data.type ==
'message')) {
this.messageList.push(data)
// 圖片預覽相關
this.messgaeImgList = [];
this.messageList.forEach((item, index) => {
if (item.content && item.content.type == 'image') {
this.messgaeImgList.push(item.content.content);
}
})
};
// 如果是文字相關，則直接push
} catch (e) {
if ((data.type == 'say' && data.role == 'user') || (data.type == 'chat' && data.groupName) || (data.type ==
'message')) {
this.messageList.push(data)
}
}
this.$nextTick(function() {
this.scrollToBottom();
})
});
});
//監聽服務器打開失敗重連
uni.onSocketError((res) => {
console.log('WebSocket連接打開失敗，請檢查!');
});
//監聽服務器關閉
uni.onSocketClose((res) => {
console.log("webSocket on 關閉連接");
});
// 獲取底部輸入框高度
this.$nextTick(() => {
let that = this;
let query = uni.createSelectorQuery();
query.select('#inputBox').boundingClientRect();
query.exec((res) => {
that.initHeight = res[0].height;
})
})
// 聊天區域高度獲取
this.getchatHeight()
if (this.goodsId) {
this.style.contentViewHeight = this.style.contentViewHeight - 70
}
// 將未讀變為已讀
if (this.isSysMessage) {
this.updateMessages()
} else {
this.updataSysMessage()
}
uni.onWindowResize((res) => {
this.windowSize = res.size.windowHeight;
// alert('變化后的窗口高度=' + res.size.windowHeight)
})
},
methods: {
//創建wekSocket長連接
connectWS() {
// 創建Socket
let that = this;
this.$u.vuex('SocketTask', uni.connectSocket({
url: that.wssServer,
header: {
'content-type': 'application/json'
},
method: 'post',
success: function(res) {
console.log('WebSocket連接創建success', res);
},
fail: function(err) {
setTimeout(() => {
that.connectWS();
}, 500);
console.log('WebSocket連接創建fail', err)
},
}));
},
goBack() {
this.$u.route({
type: 'navigateBack'
})
},
isJson(obj) {
let isjson = typeof(obj) == "object" && Object.prototype.toString.call(obj).toLowerCase() == "[object object]" && !
obj.length;
return isjson;
},
// 聊天區域高度獲取
getchatHeight() {
// 獲取頁面高度相關
const res = uni.getSystemInfoSync(); //獲取手機可使用窗口高度
this.style.pageHeight = res.windowHeight - res.statusBarHeight;
if (this.isSysMessage) {
// 如果是系統消息
// #ifndef MP-WEIXIN
this.style.contentViewHeight = this.style.pageHeight - uni.getSystemInfoSync().screenWidth / 750 * (100) + 10 //像素 因為給出的是像素高度 然后我們用的是rpx 所以換算一下
// #endif
// #ifdef MP-WEIXIN
this.style.contentViewHeight = this.style.pageHeight - uni.getSystemInfoSync().screenWidth / 750 * (100);
// #endif
} else {
// 否則
// #ifndef MP-WEIXIN
this.style.contentViewHeight = this.style.pageHeight - uni.getSystemInfoSync().screenWidth / 750 * (100) - 40; //像素 因為給出的是像素高度 然后我們用的是rpx 所以換算一下
// #endif
// #ifdef MP-WEIXIN
this.style.contentViewHeight = this.style.pageHeight - uni.getSystemInfoSync().screenWidth / 750 * (100) - 40;
// #endif
}
},
// 下拉相關
onRefresh(pagesize, page) {
// 下拉被觸發
// 這里下拉刷新邏輯有點坑，參照：https://ask.dcloud.net.cn/article/37181
this.isLoadmore = false;
if (this._freshing) return;
this._freshing = true;
if (!this.triggered) { //界面下拉觸發，triggered可能不是true，要設為true
this.triggered = true;
}
if (this.isSysMessage) {
// 請求系統消息
this.queryMessages(4, this.page);
} else {
// 這里加載更多聊天歷史記錄
this.getHistory(this.shopId, this.chatPage);
}
},
onRestore() {
// 下拉刷新被復位
console.log("onRestore");
},
goShopDetail() {
this.$u.route({
url: "pagesShopping/shop/index",
params: {
shopId: this.shopId,
isAgain: true
},
type: 'redirect'
})
},
// 發送圖片
sendImage() {
this.isf = true;
// #ifndef APP-PLUS
if (!this.morenStyle) {
this.morenStyle = true;
/*
這里是為了給下面的更多區域一個從下面滑上來的效果，
主要是通過改變回話區域的高度，來控制下方是否展示，下方隱藏展示同理
*/
let i = 0;
const setTime = setInterval(() => {
i = i + 10;
this.style.contentViewHeight = this.style.contentViewHeight - 10;
if (i == 100) {
clearInterval(setTime)
this.scrollTop = this.scrollTop + 100;
}
}, 2)
}
// #endif
// #ifdef APP-PLUS
if (!this.morenStyle) {
this.morenStyle = true;
this.style.contentViewHeight = this.style.contentViewHeight - 100;
this.scrollTop = this.scrollTop + 100;
}
// #endif
},
// 點擊回話框其他區域，隱藏下方更多展示
noShowMore() {
// #ifndef APP-PLUS
if (this.morenStyle) {
this.morenStyle = false;
let n = 0;
const setTime1 = setInterval(() => {
n = n + 10;
this.style.contentViewHeight = this.style.contentViewHeight + 10;
if (n == 100) {
clearInterval(setTime1)
this.scrollTop = this.scrollTop - 100;
}
}, 5)
}
// #endif
// #ifdef APP-PLUS
if (this.morenStyle) {
this.morenStyle = false;
this.style.contentViewHeight = this.style.contentViewHeight + 100;
this.scrollTop = this.scrollTop - 100;
}
// #endif
},
// 獲取焦點
isFocus() {
this.isf = false;
},
// 失去焦點
isBlur() {},
// 預覽圖片
checkImg(item) {
if (item.content && item.content.type == 'image') {
this.indexImg = this.messgaeImgList.indexOf(item.content.content);
this.$refs.previewImage.show = true;
}
},
// 發送文字按鈕
sendText() {
if (this.message) {
let message = {
content: this.message,
role: 'user',
type: 'say',
to: this.userInfo.receiveId
};
//發送會話內容
if (this.socketOpen) {
uni.sendSocketMessage({
data: JSON.stringify(message),
success: () => {
this.$nextTick(function() {
// 發送完之后清空輸入框
this.message = '';
// 重新獲取底部高度
let that = this;
let query = uni.createSelectorQuery();
query.select('#inputBox').boundingClientRect();
setTimeout(() => {
query.exec((res) => {
that.initHeight = res[0].height;
// 重新獲取內容區高度
this.getchatHeight();
if (this.goodsId) {
this.style.contentViewHeight = this.style.contentViewHeight - 70
}
})
}, 150)
this.morenStyle = false;
})
},
fail: (err) => {
console.log(err)
}
});
} else {
this.$refs.uToast.show({
title: '服務未開啟，暫不能發送消息'
})
}
}
},
// 調起相機方法
goCamera() {
uni.chooseImage({
count: 1, //默認9
sizeType: ['compressed'],
sourceType: ['camera'],
success: (res) => {
const tempFilePaths = res.tempFilePaths;
uni.uploadFile({
url: this.url + '/weapp/user/uploadPicture',
filePath: tempFilePaths[0],
name: 'img',
formData: {
dir: 'users',
isTumb: 1,
isLocation: 1,
id: 'WU_FILE_0',
},
header: {
tokenid: this.tokenId
},
success: (ress) => {
let data = JSON.parse(ress.data);
let message = {
content: `{"content":"${data.data}","type": "image"}`,
role: 'user',
type: 'say',
to: this.userInfo.receiveId
};
uni.sendSocketMessage({
data: JSON.stringify(message)
})
}
});
}
});
},
// 選擇圖片方法
goAlbum() {
uni.chooseImage({
count: 1, //默認9
sizeType: ['original', 'compressed'],
sourceType: ['album'],
success: (res) => {
const tempFilePaths = res.tempFilePaths;
uni.uploadFile({
url: this.url + '/weapp/user/uploadPicture',
filePath: tempFilePaths[0],
name: 'img',
formData: {
dir: 'users',
isTumb: 1,
isLocation: 1,
id: 'WU_FILE_0',
},
header: {
tokenid: this.tokenId
},
success: (ress) => {
let data = JSON.parse(ress.data);
let message = {
content: `{"content":"${data.data}","type": "image"}`,
role: 'user',
type: 'say',
to: this.userInfo.receiveId
};
uni.sendSocketMessage({
data: JSON.stringify(message)
})
}
});
}
});
},
// 下滑到底部的方法
scrollToBottom() {
let that = this;
let query = uni.createSelectorQuery();
query.select('#chatContent').boundingClientRect();
query.select('#chatBoxScroll').boundingClientRect();
query.exec((res) => {
that.style.mitemHeight = 0;
that.style.mitemHeight = res[0].height;
// res[0].forEach((rect) => that.style.mitemHeight = that.style.mitemHeight + rect.height + 40) //獲取所有內部子元素的高度
if (that.style.mitemHeight > (that.style.contentViewHeight)) { //判斷子元素高度是否大於顯示高度
that.scrollTop = that.style.mitemHeight - that.style.contentViewHeight + 100 //用子元素的高度減去顯示的高度就獲益獲得序言滾動的高度
}
})
},
// 點擊進入商品詳情
goGoodsDetail() {
if (!this.orderNo && !this.isKill) {
this.$u.route({
url: 'pagesShopping/commodity/index',
params: {
goodsId: this.goodsId,
isAgain: true
},
type: 'redirect'
})
} else if (this.isKill) {
this.$u.route({
url: 'pagesShopping/seckill/seckillDetail',
params: {
id: this.killId,
goodsId: this.goodsId,
isAgain: true
},
type: 'redirect'
})
} else {
this.$u.route({
url: 'pageOrders/orderDetail/index',
params: {
orderId: this.orderId,
shopId: this.shopId,
isAgain: true
},
type: 'redirect'
})
}
},
// 網絡請求相關
queryMessages(pagesize, page) {
// 獲取系統消息
this.$u.post('/messages/queryMessages', {
pagesize,
page
}).then(res => {
if (res.status == 200) {
this.lastPage = res.data.last_page;
if (this.page <= this.lastPage) {
this.lastPage == 1 ? this.status = 'nomore' : this.status = 'loading';
// 這里調轉一下數組之后再保存
let newList = [];
newList.push(...res.data.data);
newList.reverse();
this.messageList.unshift(...newList);
this.page++
this._freshing = false;
this.triggered = false
} else {
this.status = 'nomore';
this.isLoadmore = true;
this._freshing = false;
this.triggered = false
}
} else {
this._freshing = false;
this.triggered = false;
}
})
},
// 獲取歷史聊天記錄
getHistory(receiveId, page) {
this.$u.post('/addon/wstim-chats-pagequery', {
receiveId,
page,
}).then(res => {
if (res.status == 1 || res.status == 200) {
this.chatLastPage = res.data.last_page;
if (this.chatPage <= this.chatLastPage) {
this.chatLastPage == 1 ? this.status = 'nomore' : this.status = 'loading';
this.messageList.unshift(...res.data.data);
this.chatPage++
this._freshing = false;
this.triggered = false;
// 圖片預覽相關
res.data.data.forEach((item, index) => {
if (item.content && item.content.type == 'image') {
this.messgaeImgList.push(item.content.content);
}
})
} else {
this.status = 'nomore';
this.isLoadmore = true;
this._freshing = false;
this.triggered = false
}
} else {
this._freshing = false;
this.triggered = false;
}
})
},
updateMessages() {
// 修改系統消息狀態（全部變為已讀）
this.$u.post('/messages/updateMessages', {}).then(res => {
if (res.status == 200) {
return;
}
})
},
updataSysMessage() {
// 修改回話消息狀態（全部變為已讀）
this.$u.post('/addon/wstim-chats-setRead', {
shopId: this.shopId
}).then(res => {
if (res.status == 1 || res.status == 200) {
return;
}
})
},
// 帶出商品信息獲取
getGoodsInfo(goodsId) {
this.$u.post('/goods_details/getProductDetails', {
goodsId
}).then(res => {
if (res.status == 200) {
this.goodsInfo = res.data;
this.sendGoodsHref()
}
})
},
// 發送商品信息
sendGoodsHref() {
let goodsData = {
content: `{"type":"goods","goodsId":"${this.goodsId}","content": "${this.goodsInfo.goodsName}"}`,
role: 'user',
type: 'say',
to: this.userInfo.receiveId
}
uni.sendSocketMessage({
data: JSON.stringify(goodsData),
})
},
// 獲取基礎基礎數據（用戶，店鋪，聯系信息）
queryUserDetails() {
this.$u.get('/addon/wstim-chats-getBaseData', {
shopId: this.shopId,
}).then(res => {
if (res.status == 1 || res.status == 200) {
this.userInfo = res.data;
this.wssServer = res.data.server;
//連接websoket
if (this.tokenId) {
this.connectWS();
}
}
})
}
}
}
</script>
<style lang="scss">
.service {
background: $bg_color;
height: 100vh;
width: 100vw;
overflow: hidden;
// 頭部
.header {
/deep/ .u-slot-content {
display: flex;
justify-content: space-between;
padding-right: 24rpx;
}
.serviceTitle {
display: flex;
/* #ifdef MP-WEIXIN */
.u-image {
margin-left: 24rpx;
}
/* #endif */
&>view {
font-size: 32rpx;
font-family: PingFang SC;
font-weight: bold;
color: #343434;
margin-left: 24rpx;
}
}
.goShopBtn {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: bold;
color: $white_color;
width: 87rpx;
height: 48rpx;
background: #CA3232;
border-radius: 12rpx;
text-align: center;
line-height: 48rpx;
}
}
// 分割線
.hrline {
height: 2rpx;
width: 100vh;
background: #E5E5E5;
// margin-bottom: 69rpx;
}
.goodHref {
position: fixed;
left: 0;
right: 0;
z-index: 10;
top: 120rpx;
/* #ifdef MP-WEIXIN */
top: 150rpx;
/* #endif */
/* #ifdef APP-PLUS */
top: 180rpx;
/* #endif */
margin: 0 36rpx;
// margin-top: 69rpx;
background: $white_color;
box-shadow: 1rpx 6rpx 24rpx 0rpx rgba(186, 186, 186, 0.11);
border-radius: 30rpx;
.goodContent {
display: flex;
padding: 36rpx;
text {
margin-left: 24rpx;
flex: 1;
font-size: 28rpx;
font-family: PingFang SC;
color: #343434;
line-height: 42rpx;
}
}
.goHref {
text-align: center;
font-size: 28rpx;
font-family: PingFang SC;
font-weight: bold;
color: #343434;
padding: 30rpx 0;
border-top: 2px solid #F5F5F5;
}
}
.isGoods {
margin-top: 140rpx;
}
.loadmore {
padding-bottom: 0rpx;
}
.chatBox {
height: calc(100vh - 170rpx);
#chatContent {
.chat {
margin-top: 72rpx;
padding: 0 36rpx;
.chatMessage {
@mixin textShow {
margin: 0 auto;
background: #E3E3E3;
border-radius: 8rpx;
font-size: 24rpx;
font-family: PingFang SC;
font-weight: bold;
color: #939393;
width: 300rpx;
height: 42rpx;
line-height: 42rpx;
text-align: center;
margin-bottom: 52rpx;
}
.timeShow {
@include textShow;
}
.isText {
@include textShow;
background: transparent;
}
.chatY {
display: flex;
position: relative;
margin-bottom: 68rpx;
&>.messagey {
// flex: 1;
margin-left: 24rpx;
padding: 23rpx 26rpx;
background: $white_color;
max-width: 558rpx;
border-radius: 12rpx;
word-break: break-all;
&::before {
content: '';
display: inline-block;
border: 12rpx solid;
border-color: transparent $white_color transparent transparent;
position: absolute;
left: 75rpx;
top: 30rpx;
}
}
&>.messageyImg {
/* #ifndef MP-WEIXIN */
&::before {
content: '';
display: inline-block;
border: 12rpx solid;
border-color: transparent $white_color transparent transparent;
position: absolute;
left: 4rpx;
top: 30rpx;
}
/deep/ .u-image__image {
padding: 20rpx;
background: $white_color;
margin-left: 24rpx;
}
/* #endif */
.u-image {
&::before {
content: '';
display: inline-block;
border: 12rpx solid;
border-color: transparent $white_color transparent transparent;
position: absolute;
left: 4rpx;
top: 30rpx;
}
}
/* #ifdef MP-WEIXIN */
&::before {
content: '';
display: inline-block;
border: 12rpx solid;
border-color: transparent $white_color transparent transparent;
position: absolute;
left: 0rpx;
top: 30rpx;
}
/deep/ .u-image__image {
padding: 20rpx;
background: $white_color;
margin-left: 24rpx;
}
/* #endif */
}
}
.chatM {
display: flex;
position: relative;
justify-content: flex-end;
margin-bottom: 68rpx;
&>.messagex {
margin-right: 24rpx;
padding: 23rpx 26rpx;
max-width: 558rpx;
border-radius: 12rpx;
background: #CA3232;
color: $white_color;
word-break: break-all;
&::after {
content: '';
display: inline-block;
border: 12rpx solid;
border-color: transparent transparent transparent #CA3232;
position: absolute;
right: 75rpx;
top: 30rpx;
}
}
&>.messagexImg {
display: flex;
// 微信小程序樣式
/* #ifdef MP-WEIXIN */
.u-image {
margin-right: 64rpx;
/deep/ .u-image__image {
padding: 20rpx;
background: #CA3232;
}
&::after {
content: '';
display: inline-block;
border: 12rpx solid;
border-color: transparent transparent transparent #CA3232;
position: absolute;
right: -62rpx;
top: 30rpx;
}
}
/* #endif */
/* #ifndef MP-WEIXIN */
/deep/ .u-image__image {
padding: 20rpx;
background: #CA3232;
margin-left: -65rpx;
}
&::after {
content: '';
display: inline-block;
border: 12rpx solid;
border-color: transparent transparent transparent #CA3232;
position: absolute;
right: 4rpx;
top: 30rpx;
}
/* #endif */
}
}
}
}
}
.isPadding {
padding-top: 69rpx;
}
}
.inputBox {
background: #FFFFFF;
// position: fixed;
// bottom: 0;
// right: 0;
// left: 0;
display: flex;
align-items: center;
position: relative;
/deep/ .u-field {
padding: 0;
width: 650rpx;
margin-left: 24rpx;
.u-flex {
margin: 0 !important;
.u-textarea-class {
// display: flex;
// align-items: center;
min-height: 30rpx !important;
max-height: 150rpx;
padding: 30rpx;
.uni-textarea-textarea {
overflow-y: auto !important;
}
}
}
}
&>.u-image {
position: absolute;
right: 24rpx;
}
&>.sendStn {
position: absolute;
right: 28rpx;
background: #CA3232;
color: $white_color;
font-weight: bold;
padding: 10rpx 18rpx;
border-radius: 12rpx;
top: 50%;
transform: translateY(-50%);
}
}
.more {
display: flex;
.u-image {
margin: 0 24rpx;
margin-top: 36rpx;
}
}
}
</style>