首次提交
This commit is contained in:
duan
645
pages/riderMy/kefu/chat.vue
Normal file
645
pages/riderMy/kefu/chat.vue
Normal file
@@ -0,0 +1,645 @@
|
||||
<template>
|
||||
<view>
|
||||
<view style="width: 100%;">
|
||||
<view style="display: flex;flex-direction: column;" v-for="(item,index) in ListItem" :key='index' >
|
||||
<view style="margin-top: 15rpx;width: 100%;text-align: center;font-size: 26rpx;color: #999999;">
|
||||
{{item.createTime}}</view>
|
||||
<view v-if="item.sendType === 2" style="width: 83%;margin-right: 15%;">
|
||||
<view class="chat-listitem" style="float: left;margin-left: 10rpx;">
|
||||
<view>
|
||||
<image src="../../../static/logo.png" class="chat-listitem-image"></image>
|
||||
</view>
|
||||
<view v-if="item.content && item.type === 1" class="chat-listitem-text"
|
||||
style="margin-left: 20rpx;">{{item.content}}</view>
|
||||
<image @tap="viewImg(item.content)" v-if="item.content && item.type === 2" :src="item.content"
|
||||
style="height: 200rpx;width: 200rpx;margin-left: 20rpx;"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="item.sendType === 1" style="width: 83%;margin-left: 15%;">
|
||||
<view class="chat-listitem" style="float: right;">
|
||||
<view v-if="item.content && item.type === 1" @longpress="copy(item.content)"
|
||||
class="chat-listitem-text" style="margin-right: 20rpx;">{{item.content}}</view>
|
||||
<view v-if="item.content && item.type === 4" @click="goShop(item.content[3])"
|
||||
style="width: 400rpx;background: #FFFFFF;height: max-content;margin-right: 20rpx;margin-top: 10rpx;border-radius: 20rpx;">
|
||||
<image :src="item.content[0]" class="chat-listitem-image-type4"
|
||||
style="width: 400rpx;height: 350rpx;"></image>
|
||||
<view style="padding: 10rpx;padding-bottom: 20rpx;">
|
||||
<view style="color: #ed5732;font-size: 34rpx;"><text style="font-size: 22rpx;">￥ </text>
|
||||
{{item.content[2]}}</view>
|
||||
<view
|
||||
style="overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;width: 100%;height: 75upx;">
|
||||
{{item.content[1]}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="item.content && item.type === 3"
|
||||
style="width: 500rpx;background: #FFFFFF;height: max-content;margin-right: 20rpx;margin-top: 10rpx;border-radius: 20rpx;padding: 15rpx 10rpx;">
|
||||
<view style="color: #000000;font-weight: 600;margin-left: 10rpx;">你正在咨询的订单</view>
|
||||
<view style="display: flex;">
|
||||
<image :src="item.content[0]" class="chat-listitem-image-type4"
|
||||
style="margin-left: 7rpx;margin-top: 20rpx;width: 110rpx;height: 110rpx;"></image>
|
||||
<view
|
||||
style="margin-top: 15rpx;padding: 10rpx 0rpx 5rpx 10rpx;width: 75%;background: #f5f5f5;margin-left: 10rpx;">
|
||||
<view
|
||||
style="font-size: 28rpx;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;height: 75upx;width: 100%;">
|
||||
{{item.content[1]}}</view>
|
||||
<view style="color: #ed5732;font-size: 28rpx;"><text style="font-size: 22rpx;">￥
|
||||
</text>{{item.content[5]}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="color: #999999;margin-top: 10rpx;margin-left: 12rpx;">
|
||||
<view>订单编号：{{item.content[3]}}</view>
|
||||
<view style="margin-top: 10rpx;">创建时间：{{item.content[4]}}</view>
|
||||
</view>
|
||||
<view
|
||||
style="float: right;margin-right: 10rpx;margin-top: 15rpx;background: #F9221D;color: #FFFFFF;border-radius: 50rpx;width: 150rpx;height: 50rpx;font-size: 24rpx;text-align: center;line-height: 50rpx;"
|
||||
@click="goDingdanDetail(item.content[2])">查看</view>
|
||||
</view>
|
||||
<image @tap="viewImg(item.content)" v-if="item.content && item.type === 2" :src="item.content"
|
||||
style="height: 200rpx;width: 200rpx;margin-right: 20rpx;"></image>
|
||||
<view>
|
||||
<image v-if="item.chat.userHead" :src="item.chat.userHead" class="chat-listitem-image">
|
||||
</image>
|
||||
<image v-else src="../../../static/logo.png" class="chat-listitem-image"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view v-if="item.sendType === 4" style="width: 83%;margin-left: 15%;">
|
||||
<view class="chat-listitem" style="float: right;">
|
||||
<view style="height: max-content;">
|
||||
<image :src="type4[0]" mode=""></image>
|
||||
</view>
|
||||
<image @tap="viewImg(item.content)" v-if="item.content && item.type === 2" :src="item.content" style="height: 200rpx;width: 170rpx;margin-right: 20rpx;"></image>
|
||||
<view>
|
||||
<image :src="item.chat.userHead" class="chat-listitem-image"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="ShopState"
|
||||
style="width: 95%;margin-left: 20rpx;height: 150upx;position: fixed;bottom: 120upx;z-index: 99;background-color: #FFFFFF;border-radius: 20rpx;">
|
||||
<view style="display: flex;width: 100%;color: #000000;padding: 20rpx;">
|
||||
<image :src="Shopimage" style="width: 110rpx;height: 110rpx;"></image>
|
||||
<view style="margin-left: 20rpx;width: 400rpx;">
|
||||
<view
|
||||
style="font-size: 34rpx;color: #000000;overflow: hidden;text-overflow: ellipsis;flex-wrap: nowrap;white-space: nowrap;width: 98%;">
|
||||
{{ShopTitle}}</view>
|
||||
<view style="margin-top: 20rpx;color: #ed5732;font-size: 34rpx;">￥{{Shopmoney}}</view>
|
||||
</view>
|
||||
<view style="text-align: right;">
|
||||
<image @click="ShopClose" src="../../../static/image/close.png"
|
||||
style="width: 30rpx;height: 30rpx;"></image>
|
||||
<view
|
||||
style="margin-top: 20rpx;background: #F9221D;color: #FFFFFF;border-radius: 50rpx;width: 150rpx;height: 50rpx;font-size: 24rpx;text-align: center;line-height: 50rpx;"
|
||||
@click="goMaijia">发送给商家</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view v-if="orderState"
|
||||
style="width: 95%;margin-left: 20rpx;height: 150upx;position: fixed;bottom: 120upx;z-index: 99;background-color: #FFFFFF;border-radius: 20rpx;">
|
||||
<view style="display: flex;width: 100%;color: #000000;padding: 20rpx;">
|
||||
<image :src="orderimage" style="width: 110rpx;height: 110rpx;"></image>
|
||||
<view style="margin-left: 20rpx;width: 400rpx;">
|
||||
<view
|
||||
style="font-size: 34rpx;color: #000000;overflow: hidden;text-overflow: ellipsis;flex-wrap: nowrap;white-space: nowrap;width: 98%;">
|
||||
你可能想咨询该订单</view>
|
||||
<view style="margin-top: 20rpx;color: #ed5732;font-size: 34rpx;">￥{{ordermoney}}</view>
|
||||
</view>
|
||||
<view style="text-align: right;">
|
||||
<image @click="orderClose" src="../../../static/image/close.png"
|
||||
style="width: 30rpx;height: 30rpx;"></image>
|
||||
<view
|
||||
style="margin-top: 20rpx;background: #F9221D;color: #000000;border-radius: 50rpx;width: 150rpx;height: 50rpx;font-size: 24rpx;text-align: center;line-height: 50rpx;"
|
||||
@click="goDingdan">发送订单</view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<!-- 底部聊天输入框 -->
|
||||
<view class="input-box">
|
||||
<!-- <view class="justify-between padding-lr" style="display: flex;margin-top: 15rpx;width: 100%;background-color: #eee;padding-top: 4upx;">
|
||||
<image src="../../../static/image/add.png" @click="chooseImage(['album'])"
|
||||
style="width: 60rpx;height: 60rpx;margin-top: 8rpx;margin-right: 12rpx;"></image>
|
||||
<input confirm-type="send" @confirm='setChatSave(1)' type="text" v-model="content"
|
||||
style="width: 72%;height: 70rpx;background: #fff;margin: 4rpx 10rpx 0;border-radius: 70rpx;padding-left: 10rpx;color: #000000;" />
|
||||
<view class="save" @tap='setChatSave(1)'>发送</view>
|
||||
</view> -->
|
||||
<view class="justify-between padding-lr align-center"
|
||||
style="display: flex;width: 100%;background-color: #EEEEEE;">
|
||||
<image src="../../../static/image/add.png" @click="chooseImage(['album'])"
|
||||
style="width: 60rpx;height: 60rpx;margin-right: 12rpx;border-radius: 50upx;"></image>
|
||||
<input confirm-type="send" @confirm='setChatSave(1)' type="text" v-model="content"
|
||||
style="width: 72%;height: 70rpx;background: #fff;margin: 0 10rpx;border-radius: 5rpx;padding-left: 10rpx;" />
|
||||
<view class="save" @tap='setChatSave(1)'>发送</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import configdata from '../../../common/config.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
connected: false,
|
||||
connecting: false,
|
||||
msg: false,
|
||||
type4: [],
|
||||
listRight: {
|
||||
chat: {
|
||||
userHead: ""
|
||||
},
|
||||
content: "",
|
||||
sendType: 1,
|
||||
type: 1
|
||||
},
|
||||
content: '',
|
||||
chatId: '',
|
||||
type: 1,
|
||||
ListItem: [],
|
||||
ShopState: false,
|
||||
ShopordersId: '',
|
||||
Shopimage: '',
|
||||
Shopmoney: '',
|
||||
ShopTitle: '',
|
||||
orderState: false,
|
||||
ordersId: '',
|
||||
orderimage: '',
|
||||
orderNum: '',
|
||||
ordermoney: '',
|
||||
orderTitle: '',
|
||||
orderCreateTime: '',
|
||||
className: '',
|
||||
Shopsales: '',
|
||||
hand: 1,
|
||||
index: 0,
|
||||
page: 0,
|
||||
size: 1000,
|
||||
countDown: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
showMsg() {
|
||||
if (this.connected) {
|
||||
if (this.msg) {
|
||||
return '收到消息：' + this.msg
|
||||
} else {
|
||||
return '等待接收消息'
|
||||
}
|
||||
} else {
|
||||
return '尚未连接'
|
||||
}
|
||||
}
|
||||
},
|
||||
onUnload() {
|
||||
uni.closeSocket()
|
||||
uni.hideLoading()
|
||||
},
|
||||
onLoad(d) {
|
||||
if (d.className) {
|
||||
this.className = d.className;
|
||||
if (d.className === 'shop') {
|
||||
this.ShopState = true;
|
||||
this.ShopordersId = d.ordersId;
|
||||
this.Shopimage = d.image;
|
||||
this.Shopmoney = d.money;
|
||||
this.Shopsales = d.sales;
|
||||
this.ShopTitle = d.title;
|
||||
} else if (d.className === 'order') {
|
||||
this.orderState = true;
|
||||
this.ordersId = d.id;
|
||||
this.orderimage = d.image;
|
||||
this.ordermoney = d.money;
|
||||
this.orderTitle = d.title;
|
||||
this.orderNum = d.orderNum;
|
||||
this.orderCreateTime = d.createTime;
|
||||
}
|
||||
}
|
||||
this.getChatSave();
|
||||
this.connect();
|
||||
},
|
||||
onShow() {
|
||||
if (this.connected || this.connecting) {
|
||||
|
||||
} else {
|
||||
this.connect();
|
||||
}
|
||||
},
|
||||
onHide() {
|
||||
uni.closeSocket()
|
||||
},
|
||||
methods: {
|
||||
copy(content) {
|
||||
uni.showModal({
|
||||
title: '温馨提示',
|
||||
content: '确认要复制此文字吗？',
|
||||
showCancel: true,
|
||||
cancelText: '取消',
|
||||
confirmText: '确认',
|
||||
success: res => {
|
||||
if (res.confirm) {
|
||||
uni.setClipboardData({
|
||||
data: content,
|
||||
success: r => {
|
||||
this.$queue.showToast('复制成功');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
h5Copy(content) {
|
||||
if (!document.queryCommandSupported('copy')) {
|
||||
// 不支持
|
||||
return false
|
||||
}
|
||||
let textarea = document.createElement("textarea")
|
||||
textarea.value = content
|
||||
textarea.readOnly = "readOnly"
|
||||
document.body.appendChild(textarea)
|
||||
textarea.select() // 选择对象
|
||||
textarea.setSelectionRange(0, content.length) //核心
|
||||
let result = document.execCommand("copy") // 执行浏览器复制命令
|
||||
textarea.remove()
|
||||
return result
|
||||
},
|
||||
getDateDiff(data) {
|
||||
// 传进来的data必须是日期格式，不能是时间戳
|
||||
//var str = data;
|
||||
//将字符串转换成时间格式
|
||||
var timePublish = new Date(data);
|
||||
var timeNow = new Date();
|
||||
var minute = 1000 * 60;
|
||||
var hour = minute * 60;
|
||||
var day = hour * 24;
|
||||
var month = day * 30;
|
||||
var result = "2";
|
||||
|
||||
var diffValue = timeNow - timePublish;
|
||||
var diffMonth = diffValue / month;
|
||||
var diffWeek = diffValue / (7 * day);
|
||||
var diffDay = diffValue / day;
|
||||
var diffHour = diffValue / hour;
|
||||
var diffMinute = diffValue / minute;
|
||||
|
||||
|
||||
if (diffMonth > 3) {
|
||||
result = timePublish.getFullYear() + "-";
|
||||
result += timePublish.getMonth() + "-";
|
||||
result += timePublish.getDate();
|
||||
} else if (diffMonth > 1) { //月
|
||||
result = data.substring(0, 10);
|
||||
} else if (diffWeek > 1) { //周
|
||||
result = data.substring(0, 10);
|
||||
} else if (diffDay > 1) { //天
|
||||
result = data.substring(0, 10);
|
||||
} else if (diffHour > 1) { //小时
|
||||
result = parseInt(diffHour) + "小时前";
|
||||
} else if (diffMinute > 1) { //分钟
|
||||
result = parseInt(diffMinute) + "分钟前";
|
||||
} else {
|
||||
result = "刚刚";
|
||||
}
|
||||
return result;
|
||||
},
|
||||
goDingdanDetail(id) {
|
||||
uni.navigateTo({
|
||||
url: '../member/orderdetail?id=' + id
|
||||
});
|
||||
},
|
||||
goShop(ordersId) {
|
||||
uni.navigateTo({
|
||||
url: './commoditydetail?ordersId=' + ordersId
|
||||
});
|
||||
},
|
||||
ShopClose() {
|
||||
this.ShopState = false;
|
||||
},
|
||||
orderClose() {
|
||||
this.orderState = false;
|
||||
},
|
||||
goDingdan() {
|
||||
this.orderState = false;
|
||||
this.setChatSave(3);
|
||||
},
|
||||
goMaijia() {
|
||||
this.ShopState = false;
|
||||
this.setChatSave(4);
|
||||
},
|
||||
connect() {
|
||||
let userId = this.$queue.getData('userId');
|
||||
if (this.connected || this.connecting) {
|
||||
uni.showModal({
|
||||
content: '正在连接或者已经连接，请勿重复连接',
|
||||
showCancel: false
|
||||
})
|
||||
return false
|
||||
}
|
||||
let token = uni.getStorageSync('token')
|
||||
this.connecting = true
|
||||
uni.showLoading({
|
||||
title: '连接中...'
|
||||
})
|
||||
uni.connectSocket({
|
||||
// url: 'wss://game.shengqianxiong.com.cn/wss/websocket/' + userId,
|
||||
// url: 'ws://74165o0188.uicp.fun/sqx_fast/websocket/' + userId,
|
||||
url: this.config("WSHOST") + userId,
|
||||
data() {
|
||||
return {
|
||||
msg: 'Hello'
|
||||
}
|
||||
},
|
||||
header: {
|
||||
'content-type': 'application/json',
|
||||
'token': token
|
||||
},
|
||||
method: 'GET',
|
||||
success(res) {
|
||||
// 这里是接口调用成功的回调，不是连接成功的回调，请注意
|
||||
},
|
||||
fail(err) {
|
||||
// 这里是接口调用失败的回调，不是连接失败的回调，请注意
|
||||
}
|
||||
})
|
||||
uni.onSocketOpen((res) => {
|
||||
this.connecting = false
|
||||
this.connected = true
|
||||
uni.hideLoading()
|
||||
// uni.showToast({
|
||||
// icon: 'none',
|
||||
// title: '连接成功'
|
||||
// })
|
||||
console.log('onOpen', res);
|
||||
})
|
||||
uni.onSocketError((err) => {
|
||||
this.connecting = false
|
||||
this.connected = false
|
||||
uni.hideLoading()
|
||||
uni.showModal({
|
||||
content: '网络较差，请稍后再试',
|
||||
showCancel: false
|
||||
})
|
||||
console.log('onError', err);
|
||||
})
|
||||
uni.onSocketMessage((res) => {
|
||||
// let that = this;
|
||||
// let datas = JSON.parse(res.data)
|
||||
// let data = {
|
||||
// chat: {
|
||||
// userHead: '../../static/logo.png'
|
||||
// },
|
||||
// content: datas.content,
|
||||
// type: datas.type,
|
||||
// sendType: datas.sendType
|
||||
// }
|
||||
// that.ListItem.push(data);
|
||||
this.getTimeOrListItem1();
|
||||
console.log('onMessage', res)
|
||||
})
|
||||
uni.onSocketClose((res) => {
|
||||
this.connected = false
|
||||
this.startRecive = false
|
||||
this.msg = false
|
||||
console.log('onClose', res)
|
||||
})
|
||||
},
|
||||
close() {
|
||||
uni.closeSocket()
|
||||
},
|
||||
getTimeOrListItem1() {
|
||||
this.$Request.getT('/app/chats/list?chatId=' + this.chatId).then(
|
||||
res => {
|
||||
this.ListItem = [];
|
||||
if (res.data) {
|
||||
var time = '';
|
||||
res.data.forEach(d => {
|
||||
d.createTime = this.getDateDiff(d.createTime);
|
||||
if (d.createTime === time) {
|
||||
d.createTime = '';
|
||||
} else {
|
||||
time = d.createTime;
|
||||
}
|
||||
if (!d.chat.userHead) {
|
||||
// d.chat.userHead = '../../static/logo.png';
|
||||
let avatar = this.$queue.getData('avatar');
|
||||
d.chat.userHead = avatar
|
||||
}
|
||||
if (d.type === 4) {
|
||||
let data = d.content.split(',');
|
||||
d.content = data;
|
||||
}
|
||||
if (d.type === 3) {
|
||||
let data = d.content.split(',');
|
||||
d.content = data;
|
||||
}
|
||||
this.ListItem.push(d);
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.pageScrollTo({
|
||||
scrollTop: 99999,
|
||||
duration: 0
|
||||
});
|
||||
}, 50);
|
||||
}
|
||||
uni.hideLoading();
|
||||
});
|
||||
},
|
||||
getChatSave() {
|
||||
let userId = this.$queue.getData('userId');
|
||||
let phone = this.$queue.getData('phone');
|
||||
let userName = this.$queue.getData('userName');
|
||||
if (!phone) {
|
||||
phone = this.$queue.getData('userName');
|
||||
}
|
||||
let avatar = this.$queue.getData('avatar');
|
||||
let data = {
|
||||
userId: userId,
|
||||
userHead: avatar,
|
||||
userName: userName,
|
||||
storeId: '0',
|
||||
storeHead: '码兄外卖',
|
||||
storeName: ''
|
||||
}
|
||||
this.$Request.postJson('/app/chats/save', data).then(res => {
|
||||
if (res.status === 0) {
|
||||
this.chatId = res.data.chatId;
|
||||
uni.showLoading({
|
||||
title: '加载中...'
|
||||
});
|
||||
this.getTimeOrListItem1();
|
||||
}
|
||||
});
|
||||
},
|
||||
setChatSave(type) {
|
||||
//type:1文字 2图片
|
||||
if (type === 1 && this.content == '') {
|
||||
this.$queue.showToast('请输入聊天内容');
|
||||
return;
|
||||
}
|
||||
if (this.chatId == '' || this.chatId == undefined) {
|
||||
this.$queue.showToast('网络较差，请稍后再试');
|
||||
return;
|
||||
}
|
||||
let userId = this.$queue.getData('userId');
|
||||
if (type === 4) {
|
||||
this.content = this.Shopimage + ',' + this.ShopTitle + ',' + this.Shopmoney + ',' + this.ShopordersId;
|
||||
}
|
||||
if (type === 3) {
|
||||
this.content = this.orderimage + ',' + this.orderTitle + ',' + this.ordersId + ',' + this.orderNum +
|
||||
',' + this.orderCreateTime +
|
||||
',' + this.ordermoney
|
||||
}
|
||||
let data = {
|
||||
userId: userId,
|
||||
content: this.content,
|
||||
chatId: this.chatId,
|
||||
type: type,
|
||||
storeId: '0',
|
||||
sendType: '1'
|
||||
}
|
||||
data = JSON.stringify(data);
|
||||
let that = this;
|
||||
uni.sendSocketMessage({
|
||||
data: data,
|
||||
success(res) {
|
||||
let avatar = that.$queue.getData('avatar');
|
||||
if (!avatar) {
|
||||
avatar = '../../static/logo.png';
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
that.getTimeOrListItem1();
|
||||
}, 50);
|
||||
console.log(that.content);
|
||||
},
|
||||
fail(err) {
|
||||
console.log(err);
|
||||
}
|
||||
})
|
||||
this.content = '';
|
||||
},
|
||||
//发送图片
|
||||
chooseImage(sourceType) {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sourceType: ['album', 'camera'],
|
||||
success: res => {
|
||||
for (let i = 0; i < res.tempFilePaths.length; i++) {
|
||||
this.$queue.showLoading("上传中...");
|
||||
uni.uploadFile({ // 上传接口
|
||||
url: this.config("APIHOST") + '/alioss/upload', //真实的接口地址
|
||||
filePath: res.tempFilePaths[i],
|
||||
name: 'file',
|
||||
success: (uploadFileRes) => {
|
||||
this.content = JSON.parse(uploadFileRes.data).data;
|
||||
this.setChatSave(2);
|
||||
uni.hideLoading();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
config: function(name) {
|
||||
var info = null;
|
||||
if (name) {
|
||||
var name2 = name.split("."); //字符分割
|
||||
if (name2.length > 1) {
|
||||
info = configdata[name2[0]][name2[1]] || null;
|
||||
} else {
|
||||
info = configdata[name] || null;
|
||||
}
|
||||
if (info == null) {
|
||||
// let web_config = cache.get("web_config");
|
||||
// if (web_config) {
|
||||
// if (name2.length > 1) {
|
||||
// info = web_config[name2[0]][name2[1]] || null;
|
||||
// } else {
|
||||
// info = web_config[name] || null;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
return info;
|
||||
},
|
||||
//查看大图
|
||||
viewImg(item) {
|
||||
let imgsArray = [];
|
||||
imgsArray[0] = item;
|
||||
uni.previewImage({
|
||||
current: 0,
|
||||
urls: imgsArray
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
/* background: #1c1b20; */
|
||||
}
|
||||
|
||||
.input-box {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 100rpx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
box-sizing: content-box;
|
||||
z-index: 999;
|
||||
/* background-color: #ececec; */
|
||||
/* padding: 0 5rpx; */
|
||||
}
|
||||
|
||||
.chat-listitem {
|
||||
display: flex;
|
||||
margin-top: 20rpx;
|
||||
padding: 10rpx;
|
||||
}
|
||||
|
||||
.chat-listitem-text {
|
||||
color: #000000;
|
||||
background: #FFFFFF;
|
||||
margin-top: 10rpx;
|
||||
width: fit-content;
|
||||
padding: 15rpx;
|
||||
font-size: 30rpx;
|
||||
height: max-content;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.chat-listitem-image-type4 {
|
||||
color: #000000;
|
||||
background: #FFFFFF;
|
||||
width: fit-content;
|
||||
font-size: 30rpx;
|
||||
height: max-content;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
border-top-left-radius: 20rpx;
|
||||
border-top-right-radius: 20rpx;
|
||||
}
|
||||
|
||||
.chat-listitem-image {
|
||||
margin-top: 5rpx;
|
||||
width: 75rpx;
|
||||
height: 75rpx;
|
||||
border-radius: 5rpx;
|
||||
}
|
||||
|
||||
.save {
|
||||
width: 130rpx;
|
||||
text-align: center;
|
||||
border-radius: 10rpx;
|
||||
height: 70rpx;
|
||||
color: #FFF;
|
||||
background: #1789FD;
|
||||
margin: 5rpx 10rpx 0;
|
||||
line-height: 70rpx;
|
||||
}
|
||||
</style>
|
||||
238
pages/riderMy/kefu/kefu.vue
Normal file
238
pages/riderMy/kefu/kefu.vue
Normal file
@@ -0,0 +1,238 @@
|
||||
<template>
|
||||
<view style="height: 100vh;">
|
||||
<!-- border-radius: 32upx; -->
|
||||
<view style="text-align: center;background: #FFFFFF;padding: 30upx;">
|
||||
<view class="item">
|
||||
<view class="lef">
|
||||
<image src="../../../static/my/QQ.png"></image>
|
||||
<view class="txt">
|
||||
<text>QQ</text>
|
||||
<text>{{qq}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view @click="copyHref" class="copy" data-txt='qq'>复制QQ</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="lef">
|
||||
<image src="../../../static/my/wx.png"></image>
|
||||
<view class="txt">
|
||||
<text>微信</text>
|
||||
<text>{{weixin}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view @click="copyHref" class="copy" data-txt='weixin'>复制微信</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="lef">
|
||||
<image src="../../../static/my/phone.png"></image>
|
||||
<view class="txt">
|
||||
<text>电话</text>
|
||||
<text>{{phone}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view @click="copyHref" data-txt='phone' class="copy">拨打电话</view>
|
||||
</view>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="item">
|
||||
<view class="lef">
|
||||
<image src="../../../static/my/kf.png"></image>
|
||||
<view class="txt">
|
||||
<text>在线客服</text>
|
||||
<text>在线客服专员为你解答问题</text>
|
||||
</view>
|
||||
</view>
|
||||
<button class="copys" data-txt='qq' open-type="contact">在线客服</button>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
image: 'https://taobao.xianmxkj.com/custom.jpg',
|
||||
isWeiXin: false,
|
||||
weixin: '',
|
||||
qq: '',
|
||||
phone: '',
|
||||
webviewStyles: {
|
||||
progress: {
|
||||
color: '#FF2638'
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
// #ifdef H5
|
||||
let ua = navigator.userAgent.toLowerCase();
|
||||
if (ua.indexOf('micromessenger') !== -1) {
|
||||
this.isWeiXin = true;
|
||||
}
|
||||
// #endif
|
||||
|
||||
//微信号码
|
||||
this.$Request.getT('/app/common/type/44').then(res => {
|
||||
if (res.code == 0) {
|
||||
if (res.data && res.data.value) {
|
||||
this.weixin = res.data.value;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
//客服电话
|
||||
this.$Request.getT('/app/common/type/252').then(res => {
|
||||
if (res.code == 0) {
|
||||
if (res.data && res.data.value) {
|
||||
this.phone = res.data.value;
|
||||
}
|
||||
}
|
||||
});
|
||||
//qq号码
|
||||
this.$Request.getT('/app/common/type/274').then(res => {
|
||||
if (res.code == 0) {
|
||||
if (res.data && res.data.value) {
|
||||
this.qq = res.data.value;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
onPullDownRefresh: function() {
|
||||
uni.stopPullDownRefresh(); // 停止刷新
|
||||
},
|
||||
methods: {
|
||||
//邀请码复制
|
||||
copyHref(e) {
|
||||
console.log(e.target.dataset.txt)
|
||||
if (e.target.dataset.txt == 'qq') {
|
||||
this.copy(this.qq)
|
||||
} else if (e.target.dataset.txt == 'weixin') {
|
||||
this.copy(this.weixin)
|
||||
} else {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: this.phone
|
||||
})
|
||||
|
||||
}
|
||||
},
|
||||
copy(item) {
|
||||
uni.setClipboardData({
|
||||
data: item,
|
||||
success: r => {
|
||||
this.$queue.showToast('复制成功');
|
||||
}
|
||||
});
|
||||
},
|
||||
saveImg() {
|
||||
let that = this;
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: that.image,
|
||||
success(res) {
|
||||
that.$queue.showToast('保存成功');
|
||||
}
|
||||
});
|
||||
},
|
||||
rests() {
|
||||
uni.showToast({
|
||||
title: '已刷新请再次长按识别',
|
||||
mask: false,
|
||||
duration: 1500,
|
||||
icon: 'none'
|
||||
});
|
||||
window.location.reload();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* @import '../../static/css/index.css'; */
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 36rpx;
|
||||
}
|
||||
|
||||
.items {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.lef {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.item image {
|
||||
width: 89rpx;
|
||||
height: 89rpx;
|
||||
margin-right: 26rpx;
|
||||
}
|
||||
|
||||
.item .txt {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.txt>text:nth-child(1) {
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #1F2029;
|
||||
/* line-height: 87rpx; */
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.txt>text:nth-child(2) {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #666666;
|
||||
/* line-height: 87rpx; */
|
||||
}
|
||||
|
||||
.copy {
|
||||
width: 140rpx;
|
||||
height: 54rpx;
|
||||
background: #FF1E43;
|
||||
border-radius: 27rpx;
|
||||
text-align: center;
|
||||
line-height: 54rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.copys {
|
||||
height: 54rpx;
|
||||
background: #FF1E43;
|
||||
border-radius: 27rpx;
|
||||
text-align: center;
|
||||
line-height: 54rpx;
|
||||
font-size: 24rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
margin-right: 0rpx;
|
||||
}
|
||||
|
||||
/*
|
||||
<!-- <view style="font-size: 38upx;color: #000000">添加客服微信咨询</view>
|
||||
<view style="font-size: 32upx;margin-top: 32upx;color: #000000">微信号：{{weixin}}</view>
|
||||
<view @click="copyHref" style="width:200upx;margin-top: 32upx;font-size: 30upx;margin-left: 36%;color: #FFFFFF;background: #FF2638;padding: 4upx 20upx;border-radius: 24upx;">一键复制</view>
|
||||
|
||||
<image @click="saveImg" mode="aspectFit" style="margin-top: 32upx" :src="image"></image>
|
||||
<view style="font-size: 28upx;color: #000000;margin-top: 32upx" v-if="isWeiXin">{{ isWeiXin ? '长按识别上方二维码' : '' }}</view>
|
||||
|
||||
|
||||
|
||||
<view v-if="isWeiXin" style="font-size: 24upx;color: #000000;margin-top: 80upx" @click="rests">无法识别？</view> -->
|
||||
|
||||
*/
|
||||
</style>
|
||||
170
pages/riderMy/kefu/liaotian.vue
Normal file
170
pages/riderMy/kefu/liaotian.vue
Normal file
@@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<view class="">
|
||||
<view v-if="chatList.length" class="content ">
|
||||
<view class="radius padding-lr-sm bg" style="margin-top: 4rpx;" @click="goIM(item)"
|
||||
v-for="(item,index) in chatList" :key='index'>
|
||||
<view class="flex padding-tb " v-if="userId == item.userId">
|
||||
<view>
|
||||
<u-image shape="circle" width='80rpx' height="80rpx" :src="item.shopCover"></u-image>
|
||||
</view>
|
||||
<view class="flex-sub margin-left-sm">
|
||||
<view class="flex justify-between">
|
||||
<view style="width: 55%;">{{item.shopName}}</view>
|
||||
<view class="text-grey">{{item.createTime}}</view>
|
||||
</view>
|
||||
<view class="flex justify-between">
|
||||
<view class="text-grey">{{ item.messageType == 1? item.content : '[图片]'}}</view>
|
||||
<view v-if="item.riderUnread"
|
||||
style="height: 32rpx;width: 32rpx;border-radius: 100rpx;background-color: red;color: #FFF;text-align: center;">
|
||||
{{item.riderUnread}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex padding-tb" v-else>
|
||||
<view>
|
||||
<u-image shape="circle" width='80rpx' height="80rpx" :src="item.shopCover"></u-image>
|
||||
</view>
|
||||
<view class="flex-sub margin-left-sm">
|
||||
<view class="flex justify-between">
|
||||
<view style="width: 55%;">{{item.shopName}}</view>
|
||||
<view class="text-grey">{{item.createTime}}</view>
|
||||
</view>
|
||||
<view class="flex justify-between">
|
||||
<view class="text-grey">{{ item.messageType == 1? item.content : '[图片]'}}</view>
|
||||
<view v-if="item.riderUnread"
|
||||
style="height: 32rpx;width: 32rpx;border-radius: 100rpx;background-color: red;color: #FFF;text-align: center;">
|
||||
{{item.riderUnread}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<empty v-if="!chatList.length && !msgList.length" content='暂无消息'></empty>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import empty from '../../../components/empty.vue'
|
||||
export default {
|
||||
components: {
|
||||
empty
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
page: 1,
|
||||
limit: 20,
|
||||
chatList: [],
|
||||
userId: '',
|
||||
msgList: [],
|
||||
count: 0,
|
||||
time: '',
|
||||
messageCount: 0,
|
||||
scrollTop: false,
|
||||
}
|
||||
},
|
||||
|
||||
onPullDownRefresh: function() {
|
||||
this.page = 1;
|
||||
this.getChatList();
|
||||
},
|
||||
onLoad() {
|
||||
this.$queue.showLoading("加载中...")
|
||||
that.userId = uni.getStorageSync('userId')
|
||||
if (that.userId) {
|
||||
that.time = setInterval(function() {
|
||||
that.getChatList()
|
||||
// that.getMsgList()
|
||||
that.$nextTick(function() {
|
||||
that.messageCount = uni.getStorageSync('messageCount')
|
||||
})
|
||||
|
||||
}, 10000)
|
||||
|
||||
} else {
|
||||
that.chatList = []
|
||||
that.msgList = []
|
||||
}
|
||||
|
||||
},
|
||||
onShow() {
|
||||
let that = this
|
||||
|
||||
this.page = 1;
|
||||
this.getChatList();
|
||||
|
||||
},
|
||||
onHide() {
|
||||
clearInterval(this.time)
|
||||
|
||||
},
|
||||
methods: {
|
||||
getChatList() {
|
||||
this.$Request.getT("/app/ordersChat/selectOrdersChatPageRider", {
|
||||
page: this.page,
|
||||
limit: this.limit,
|
||||
// shopId: uni.getStorageSync('shopId')
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.totalCount = res.data.totalCount
|
||||
if (this.page == 1) {
|
||||
this.chatList = res.data.list
|
||||
} else {
|
||||
res.data.list.forEach(d => {
|
||||
this.chatList.push(d);
|
||||
});
|
||||
}
|
||||
this.count = res.data.totalCount;
|
||||
}
|
||||
uni.hideLoading();
|
||||
uni.stopPullDownRefresh();
|
||||
// if (res.code == 0) {
|
||||
// this.chatList = res.data.list
|
||||
// }
|
||||
});
|
||||
},
|
||||
goIM(e) {
|
||||
let userId = this.$queue.getData('userId');
|
||||
if (e.userId == userId) {
|
||||
userId = e.byUserId
|
||||
} else {
|
||||
userId = e.userId
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: '/pages/riderMy/kefu/liaotianshi?orderId=' + e.ordersId
|
||||
})
|
||||
},
|
||||
goMsg() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/msg/message'
|
||||
})
|
||||
}
|
||||
},
|
||||
onPageScroll: function(e) {
|
||||
this.scrollTop = e.scrollTop > 200;
|
||||
},
|
||||
onReachBottom: function() {
|
||||
if (this.chatList.length == this.count) {
|
||||
uni.showToast({
|
||||
title: '已经到底了',
|
||||
icon: 'none'
|
||||
})
|
||||
} else {
|
||||
this.page = this.page + 1;
|
||||
this.getChatList();
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background-color: #F7F7F7;
|
||||
}
|
||||
|
||||
.bg {
|
||||
background: #FFFFFF;
|
||||
}
|
||||
</style>
|
||||
533
pages/riderMy/kefu/liaotianshi.vue
Normal file
533
pages/riderMy/kefu/liaotianshi.vue
Normal file
@@ -0,0 +1,533 @@
|
||||
<template>
|
||||
<view>
|
||||
<view style="width: 100%;padding-bottom: 140rpx;">
|
||||
<view style="display: flex;flex-direction: column;" v-for="(item,index) in ListItem" :key='index'>
|
||||
<view style="margin-top: 15rpx;width: 100%;text-align: center;font-size: 26rpx;color: #999999;">
|
||||
{{item.createTime}}
|
||||
</view>
|
||||
|
||||
<view v-if="item.riderId === userId" style="width: 83%;margin-left: 15%;">
|
||||
<view class="chat-listitem" style="float: right;">
|
||||
<view v-if="item.content && item.messageType === 1" @longpress="copy(item.content)"
|
||||
class="chat-listitem-text" style="margin-right: 20rpx;">{{item.content}}</view>
|
||||
<image @tap="viewImg(item.content)" v-if="item.content && item.messageType === 2"
|
||||
:src="item.content" style="height: 200rpx;width: 200rpx;margin-right: 20rpx;"></image>
|
||||
<view>
|
||||
<image v-if="item.riderAvatar" :src="item.riderAvatar" class="chat-listitem-image"></image>
|
||||
<image v-else src="../../../static/logo.png" class="chat-listitem-image"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="item.riderId != userId" style="width: 83%;margin-right: 15%;">
|
||||
<view class="chat-listitem" style="float: left;margin-left: 10rpx;">
|
||||
<view>
|
||||
<image v-if="item.shopCover" :src="item.shopCover" class="chat-listitem-image"></image>
|
||||
<image v-else-if="item.userAvatar" :src="item.userAvatar" class="chat-listitem-image"></image>
|
||||
<image v-else src="../../../static/logo.png" class="chat-listitem-image"></image>
|
||||
</view>
|
||||
<view v-if="item.content && item.messageType === 1" class="chat-listitem-text"
|
||||
style="margin-left: 20rpx;">{{item.content}}</view>
|
||||
<image @tap="viewImg(item.content)" v-if="item.content && item.messageType === 2"
|
||||
:src="item.content" style="height: 200rpx;width: 200rpx;margin-left: 20rpx;"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 跳转订单 -->
|
||||
<view class="order" @click="bindorder()">
|
||||
<image src="../../../static/image/order.png"></image>
|
||||
</view>
|
||||
<!-- 底部聊天输入框 -->
|
||||
<view class="input-box ">
|
||||
<view class="justify-between padding-lr align-center"
|
||||
style="display: flex;width: 100%;background-color: #EEEEEE;">
|
||||
<image src="../../../static/image/add.png" @click="chooseImage(['album'])"
|
||||
style="width: 60rpx;height: 60rpx;margin-right: 12rpx;border-radius: 50upx;"></image>
|
||||
<input confirm-type="send" @confirm='setChatSave(1)' type="text" v-model="content"
|
||||
style="width: 72%;height: 70rpx;background: #fff;margin: 0 10rpx;border-radius: 5rpx;padding-left: 10rpx;" />
|
||||
<view class="save" @tap='setChatSave(1)'>发送</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import configdata from '../../../common/config.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
connected: false,
|
||||
connecting: false,
|
||||
msg: false,
|
||||
type4: [],
|
||||
listRight: {
|
||||
chat: {
|
||||
userHead: ""
|
||||
},
|
||||
content: "",
|
||||
sendType: 1,
|
||||
type: 1
|
||||
},
|
||||
content: '',
|
||||
chatId: '',
|
||||
type: 1,
|
||||
ListItem: [],
|
||||
ShopState: false,
|
||||
ShopordersId: '',
|
||||
Shopimage: '',
|
||||
Shopmoney: '',
|
||||
ShopTitle: '',
|
||||
orderState: false,
|
||||
ordersId: '',
|
||||
userId: '',
|
||||
orderimage: '',
|
||||
orderNum: '',
|
||||
teamId: '',
|
||||
hand: 1,
|
||||
index: 0,
|
||||
page: 0,
|
||||
size: 1000,
|
||||
countDown: '',
|
||||
chatConversationId: '',
|
||||
byUserId: '',
|
||||
orderId: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
showMsg() {
|
||||
if (this.connected) {
|
||||
if (this.msg) {
|
||||
return '收到消息：' + this.msg
|
||||
} else {
|
||||
return '等待接收消息'
|
||||
}
|
||||
} else {
|
||||
return '尚未连接'
|
||||
}
|
||||
}
|
||||
},
|
||||
onUnload() {
|
||||
// uni.closeSocket()
|
||||
uni.hideLoading()
|
||||
},
|
||||
onLoad(d) {
|
||||
console.log(d)
|
||||
this.userId = this.$queue.getData('userId');
|
||||
this.byUserId = d.byUserId
|
||||
this.indentId = d.indentId
|
||||
this.orderId = d.orderId
|
||||
this.connect();
|
||||
|
||||
// if (d.teamName) {
|
||||
// uni.setNavigationBarTitle({
|
||||
// title: d.teamName
|
||||
// });
|
||||
// }
|
||||
},
|
||||
onShow() {
|
||||
if (this.connected || this.connecting) {
|
||||
|
||||
} else {
|
||||
this.connect();
|
||||
}
|
||||
},
|
||||
onHide() {
|
||||
// uni.closeSocket()
|
||||
},
|
||||
onUnload() {
|
||||
this.close()
|
||||
},
|
||||
methods: {
|
||||
// 跳转订单
|
||||
bindorder() {
|
||||
console.log(this.ordersId)
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/orderdetail/orderdetail?orderId='+this.orderId
|
||||
})
|
||||
},
|
||||
copy(content) {
|
||||
uni.showModal({
|
||||
title: '温馨提示',
|
||||
content: '确认要复制此文字吗？',
|
||||
showCancel: true,
|
||||
cancelText: '取消',
|
||||
confirmText: '确认',
|
||||
success: res => {
|
||||
if (res.confirm) {
|
||||
uni.setClipboardData({
|
||||
data: content,
|
||||
success: r => {
|
||||
this.$queue.showToast('复制成功');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
getDateDiff(data) {
|
||||
// 传进来的data必须是日期格式，不能是时间戳
|
||||
//var str = data;
|
||||
//将字符串转换成时间格式
|
||||
var timePublish = new Date(data);
|
||||
var timeNow = new Date();
|
||||
var minute = 1000 * 60;
|
||||
var hour = minute * 60;
|
||||
var day = hour * 24;
|
||||
var month = day * 30;
|
||||
var result = "2";
|
||||
|
||||
var diffValue = timeNow - timePublish;
|
||||
var diffMonth = diffValue / month;
|
||||
var diffWeek = diffValue / (7 * day);
|
||||
var diffDay = diffValue / day;
|
||||
var diffHour = diffValue / hour;
|
||||
var diffMinute = diffValue / minute;
|
||||
|
||||
|
||||
if (diffMonth > 3) {
|
||||
result = timePublish.getFullYear() + "-";
|
||||
result += timePublish.getMonth() + "-";
|
||||
result += timePublish.getDate();
|
||||
} else if (diffMonth > 1) { //月
|
||||
result = data.substring(0, 10);
|
||||
} else if (diffWeek > 1) { //周
|
||||
result = data.substring(0, 10);
|
||||
} else if (diffDay > 1) { //天
|
||||
result = data.substring(0, 10);
|
||||
} else if (diffHour > 1) { //小时
|
||||
result = parseInt(diffHour) + "小时前";
|
||||
} else if (diffMinute > 1) { //分钟
|
||||
result = parseInt(diffMinute) + "分钟前";
|
||||
} else {
|
||||
result = "刚刚";
|
||||
}
|
||||
return result;
|
||||
},
|
||||
|
||||
connect() {
|
||||
let that = this;
|
||||
let userId = that.$queue.getData('userId');
|
||||
if (that.connected || that.connecting) {
|
||||
uni.showModal({
|
||||
content: '正在连接或者已经连接，请勿重复连接',
|
||||
showCancel: false
|
||||
})
|
||||
return false
|
||||
}
|
||||
that.connecting = true
|
||||
uni.showLoading({
|
||||
title: '连接中...'
|
||||
})
|
||||
console.log(userId, '*******************')
|
||||
uni.connectSocket({
|
||||
// url: 'ws://192.168.1.17:8881/gameTeamChat/' + userId + '_' + this.teamId,
|
||||
// url: 'wss://game.shengqianxiong.com.cn/wss/gameTeamChat/' + userId + '_' + this.teamId,
|
||||
// url: 'ws://192.168.1.17:8180/sqx_fast/chatSocket/' + userId,
|
||||
url: this.config("WSHOST1") + this.orderId,
|
||||
data() {
|
||||
return {
|
||||
msg: 'Hello'
|
||||
}
|
||||
},
|
||||
header: {
|
||||
'content-type': 'application/json'
|
||||
},
|
||||
method: 'GET',
|
||||
success(res) {
|
||||
uni.hideLoading();
|
||||
that.getTimeOrListItem1();
|
||||
// 这里是接口调用成功的回调，不是连接成功的回调，请注意
|
||||
},
|
||||
fail(err) {
|
||||
// 这里是接口调用失败的回调，不是连接失败的回调，请注意
|
||||
console.log("--------------" + JSON.stringify(err))
|
||||
}
|
||||
});
|
||||
uni.onSocketOpen((res) => {
|
||||
that.connecting = false
|
||||
that.connected = true
|
||||
uni.hideLoading()
|
||||
// uni.showToast({
|
||||
// icon: 'none',
|
||||
// title: '连接成功'
|
||||
// })
|
||||
console.log('onOpen', res);
|
||||
})
|
||||
uni.onSocketError((err) => {
|
||||
that.connecting = false
|
||||
that.connected = false
|
||||
uni.hideLoading()
|
||||
uni.showModal({
|
||||
content: '网络较差，请稍后再试',
|
||||
showCancel: false
|
||||
})
|
||||
console.log('onError', err);
|
||||
})
|
||||
uni.onSocketMessage((res) => {
|
||||
// let that = this;
|
||||
// let datas = JSON.parse(res.data)
|
||||
// let data = {
|
||||
// chat: {
|
||||
// userHead: '../../../static/logo2.png'
|
||||
// },
|
||||
// content: datas.content,
|
||||
// type: datas.type,
|
||||
// sendType: datas.sendType
|
||||
// }
|
||||
// that.ListItem.push(data);
|
||||
this.getTimeOrListItem1();
|
||||
console.log('onMessage', res)
|
||||
})
|
||||
uni.onSocketClose((res) => {
|
||||
that.connected = false
|
||||
that.startRecive = false
|
||||
that.msg = false
|
||||
console.log('onClose', res)
|
||||
});
|
||||
},
|
||||
close() {
|
||||
uni.closeSocket()
|
||||
},
|
||||
getTimeOrListItem1() {
|
||||
this.$Request.get('/app/ordersChat/selectGameChatDetails?page=1&limit=1000&ordersId=' + this.orderId+'&type=2')
|
||||
.then(
|
||||
res => {
|
||||
this.ListItem = [];
|
||||
if (res.data) {
|
||||
var time = '';
|
||||
res.data.list.forEach(d => {
|
||||
if (!d.avatar) {
|
||||
// d.chat.userHead = '../../static/logo.png';
|
||||
let avatar = this.$queue.getData('avatar');
|
||||
d.avatar = avatar
|
||||
}
|
||||
this.ListItem.push(d);
|
||||
});
|
||||
this.ListItem = this.ListItem.reverse();
|
||||
setTimeout(() => {
|
||||
uni.pageScrollTo({
|
||||
scrollTop: 99999,
|
||||
duration: 0
|
||||
});
|
||||
}, 50);
|
||||
}
|
||||
uni.hideLoading();
|
||||
});
|
||||
},
|
||||
getChatSave() {
|
||||
let userId = this.$queue.getData('userId');
|
||||
let phone = this.$queue.getData('phone');
|
||||
let userName = this.$queue.getData('userName');
|
||||
if (!phone) {
|
||||
phone = this.$queue.getData('userName');
|
||||
}
|
||||
let avatar = this.$queue.getData('avatar');
|
||||
let data = {
|
||||
userId: userId,
|
||||
userHead: avatar,
|
||||
userName: userName,
|
||||
storeId: '0',
|
||||
storeHead: '省钱兄陪玩',
|
||||
storeName: ''
|
||||
}
|
||||
this.$Request.postJson('/chat/save', data).then(res => {
|
||||
if (res.status === 0) {
|
||||
this.chatId = res.data.chatId;
|
||||
uni.showLoading({
|
||||
title: '加载中...'
|
||||
});
|
||||
this.getTimeOrListItem1();
|
||||
}
|
||||
});
|
||||
},
|
||||
setChatSave(type) {
|
||||
//type:1文字 2图片
|
||||
if (type === 1 && this.content == '') {
|
||||
this.$queue.showToast('请输入聊天内容');
|
||||
return;
|
||||
}
|
||||
// if (this.chatId == '' || this.chatId == undefined) {
|
||||
// this.$queue.showToast('网络较差，请稍后再试');
|
||||
// return;
|
||||
// }
|
||||
let userId = this.$queue.getData('userId');
|
||||
let avatar = this.$queue.getData('avatar');
|
||||
let phone = this.$queue.getData('phone');
|
||||
let userName = this.$queue.getData('userName');
|
||||
if (!phone) {
|
||||
phone = this.$queue.getData('userName');
|
||||
}
|
||||
console.log(this.byUserId)
|
||||
let data = {
|
||||
content: this.content,
|
||||
messageType: type,
|
||||
riderId: this.userId,
|
||||
chatConversationId: this.chatConversationId,
|
||||
ordersId: this.orderId
|
||||
}
|
||||
data = JSON.stringify(data);
|
||||
let that = this;
|
||||
uni.sendSocketMessage({
|
||||
data: data,
|
||||
success(res) {
|
||||
|
||||
let avatar = that.$queue.getData('avatar');
|
||||
if (!avatar) {
|
||||
avatar = '../../static/logo.png';
|
||||
}
|
||||
let data = {
|
||||
chat: {
|
||||
userHead: avatar
|
||||
},
|
||||
content: that.content,
|
||||
type: type,
|
||||
userId: userId
|
||||
}
|
||||
console.log(data, 'data99999999999999999')
|
||||
// that.ListItem.push(data);
|
||||
setTimeout(() => {
|
||||
that.getTimeOrListItem1();
|
||||
}, 50);
|
||||
console.log(that.content);
|
||||
},
|
||||
fail(err) {
|
||||
console.log(err);
|
||||
}
|
||||
})
|
||||
this.content = '';
|
||||
},
|
||||
//发送图片
|
||||
chooseImage(sourceType) {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sourceType: ['album', 'camera'],
|
||||
success: res => {
|
||||
for (let i = 0; i < res.tempFilePaths.length; i++) {
|
||||
this.$queue.showLoading("上传中...");
|
||||
uni.uploadFile({ // 上传接口
|
||||
url: this.config("APIHOST1") + '/alioss/upload', //真实的接口地址
|
||||
filePath: res.tempFilePaths[i],
|
||||
name: 'file',
|
||||
success: (uploadFileRes) => {
|
||||
console.log(uploadFileRes)
|
||||
this.content = JSON.parse(uploadFileRes.data).data;
|
||||
this.setChatSave(2);
|
||||
uni.hideLoading();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
config: function(name) {
|
||||
var info = null;
|
||||
if (name) {
|
||||
var name2 = name.split("."); //字符分割
|
||||
if (name2.length > 1) {
|
||||
info = configdata[name2[0]][name2[1]] || null;
|
||||
} else {
|
||||
info = configdata[name] || null;
|
||||
}
|
||||
if (info == null) {
|
||||
let web_config = cache.get("web_config");
|
||||
if (web_config) {
|
||||
if (name2.length > 1) {
|
||||
info = web_config[name2[0]][name2[1]] || null;
|
||||
} else {
|
||||
info = web_config[name] || null;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return info;
|
||||
},
|
||||
//查看大图
|
||||
viewImg(item) {
|
||||
let imgsArray = [];
|
||||
imgsArray[0] = item;
|
||||
uni.previewImage({
|
||||
current: 0,
|
||||
urls: imgsArray
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
/* background: #1c1b20; */
|
||||
}
|
||||
|
||||
.input-box {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 120rpx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
box-sizing: content-box;
|
||||
z-index: 999;
|
||||
/* background-color: #ececec; */
|
||||
/* padding: 0 5rpx; */
|
||||
}
|
||||
|
||||
.chat-listitem {
|
||||
display: flex;
|
||||
margin-top: 20rpx;
|
||||
padding: 10rpx;
|
||||
}
|
||||
|
||||
.chat-listitem-text {
|
||||
color: #000000;
|
||||
background: #FFFFFF;
|
||||
margin-top: 10rpx;
|
||||
width: fit-content;
|
||||
padding: 15rpx;
|
||||
font-size: 30rpx;
|
||||
height: max-content;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.chat-listitem-image-type4 {
|
||||
color: #000000;
|
||||
background: #FFFFFF;
|
||||
width: fit-content;
|
||||
font-size: 30rpx;
|
||||
height: max-content;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
border-top-left-radius: 20rpx;
|
||||
border-top-right-radius: 20rpx;
|
||||
}
|
||||
|
||||
.chat-listitem-image {
|
||||
margin-top: 5rpx;
|
||||
width: 75rpx;
|
||||
height: 75rpx;
|
||||
border-radius: 5rpx;
|
||||
}
|
||||
|
||||
.save {
|
||||
width: 130rpx;
|
||||
text-align: center;
|
||||
border-radius: 70rpx;
|
||||
height: 70rpx;
|
||||
color: #FFF;
|
||||
background: #1789FD;
|
||||
margin: 5rpx 10rpx 0;
|
||||
line-height: 70rpx;
|
||||
}
|
||||
.order {
|
||||
position: fixed;
|
||||
bottom: 65px;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
.order image {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user