12.25(聊天
This commit is contained in:
Hong
1
App.vue
1
App.vue
@@ -35,6 +35,7 @@
|
||||
|
||||
<style lang="scss">
|
||||
@import "@/uni_modules/uview-ui/index.scss";
|
||||
@import "@/uni_modules/uview-ui/libs/css/flex.scss";
|
||||
@import '@/static/scss/index.scss';
|
||||
@import '@/static/scss/currency.css';
|
||||
@import '@/static/font/common.css';
|
||||
|
||||
54
api/carShop/message/index.js
Normal file
54
api/carShop/message/index.js
Normal file
@@ -0,0 +1,54 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
/**
|
||||
* 获取消息内，各种未读数量
|
||||
*/
|
||||
export function userCenterGetUnRead() {
|
||||
return request({
|
||||
url: '/user/center/get/unRead',
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
删除聊天
|
||||
*/
|
||||
export function deletedMgs(data) {
|
||||
return request({
|
||||
url: `/api/front/immsg/deleted/mgs`,
|
||||
method: 'post',
|
||||
params:data
|
||||
})
|
||||
}
|
||||
/**
|
||||
聊天列表
|
||||
*/
|
||||
export function getChatList(params) {
|
||||
return request({
|
||||
url: '/api/front/immsg/chatList',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
发送消息
|
||||
*/
|
||||
export function SendMmsg(data) {
|
||||
return request({
|
||||
url: `/api/front/immsg/send`,
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
消息列表
|
||||
*/
|
||||
export function getMsgList(params) {
|
||||
return request({
|
||||
url: '/api/front/immsg/msgList',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
@@ -10,3 +10,4 @@ export function getPageList(params) {
|
||||
params
|
||||
})
|
||||
}
|
||||
//getUserInfo
|
||||
|
||||
18
pages.json
18
pages.json
@@ -210,6 +210,24 @@
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/carShop/message/message_Chat/message_Chat",
|
||||
"name": "message_Chat",
|
||||
"Login": true,
|
||||
"style": {
|
||||
"navigationBarTitleText": "加载中...",
|
||||
"enablePullDownRefresh": false,
|
||||
"app-plus": {
|
||||
"bounce": "none",
|
||||
"softinputmode": "adjustResize",
|
||||
"titleNView": {
|
||||
"buttons": [{
|
||||
"type": "menu"
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/carShop/message/message-list",
|
||||
"style": {
|
||||
|
||||
@@ -1,119 +1,210 @@
|
||||
<!-- 消息页面 -->
|
||||
<template>
|
||||
<view>
|
||||
<view class="navbar fixed-top">
|
||||
<view :style="`height: ${$u.sys().statusBarHeight}px;`" />
|
||||
<view class="navbar-title flex align-center justify-between text-center pt-2">
|
||||
<view class="image flex-center" @click="back">
|
||||
<image class="back" src="@/static/images/icon/arrow-left.png" mode=""></image>
|
||||
<z-paging ref="paging" v-model="dataList" @query="queryList" created-reload :show-refresher-when-reload="false"
|
||||
:auto-clean-list-when-reload="false" hide-empty-view :pagingStyle="{'background-color':'#fff'}">
|
||||
<!-- 搜索框 -->
|
||||
<view slot="top">
|
||||
<u-navbar leftText="返回" title="个人中心" placeholder :safeAreaInsetTop="true">
|
||||
<view class="u-nav-slot" slot="left">
|
||||
<u-icon name="arrow-left" size="19"></u-icon>
|
||||
</view>
|
||||
<view class="title">
|
||||
消息
|
||||
<view class="u-nav-slot" slot="right">
|
||||
<u-icon name="trash" size="19"></u-icon>
|
||||
</view>
|
||||
<view class="image">
|
||||
<image class="clear" src="@/static/images/icon/clear.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</u-navbar>
|
||||
</view>
|
||||
<view :style="{ height: $u.addUnit($u.getPx('104rpx') + $u.sys().statusBarHeight,'px')}" />
|
||||
<view class="message-item flex align-center justify-between bg-white" @click="link('./message-list')">
|
||||
<view class="left flex align-center justify-start">
|
||||
<image src="@/static/images/icon/sys_icon.png" mode=""></image>
|
||||
<text class="f-32 black">系统消息</text>
|
||||
</view>
|
||||
<view class="right flex align-center justify-end">
|
||||
<view class="bg-primary flex-center white f-22">
|
||||
1
|
||||
<!-- 内容 -->
|
||||
<view>
|
||||
<!-- 消息组 -->
|
||||
<u-cell-group>
|
||||
<view v-for="(item,index) in groupList" :key="index">
|
||||
<u-cell :border="false" isLink @click="$u.route(item.url)">
|
||||
<view slot="icon">
|
||||
<u--image :src="item.img" width="92rpx" height="92rpx" />
|
||||
</view>
|
||||
<u--text slot="title" :text="item.text" color="#222" size="15" margin="0 24rpx" bold />
|
||||
<view slot="value">
|
||||
<u-badge max="99" :value="unReadObj[item.type]" />
|
||||
</view>
|
||||
</u-cell>
|
||||
<view style="width: 610rpx;height: 2rpx;border-top: 2rpx solid #e5e5e5;margin-left: auto;" />
|
||||
</view>
|
||||
<image src="@/static/images/icon/arrow-right.png" mode=""></image>
|
||||
</view>
|
||||
|
||||
</u-cell-group>
|
||||
<!-- 消息列表 -->
|
||||
<u-list height="auto">
|
||||
<u-swipe-action>
|
||||
<u-list-item v-for="(item,index) in dataList" :key="item.id">
|
||||
<u-swipe-action-item :options="options2" :name="index" :index="item.id" @click="swipeAction">
|
||||
<u-cell :border="false"
|
||||
@click="Navto('/pages/carShop/message/message_Chat/message_Chat',item,index)">
|
||||
<view slot="icon">
|
||||
<u--image :src="item.toUidAvatar" shape="circle" width="92rpx" height="92rpx" />
|
||||
</view>
|
||||
<u--text slot="title" :text="item.toUidNickname" color="#222" size="15" margin="0 24rpx"
|
||||
bold />
|
||||
<u--text slot="label" :text="content(item.content)" color="#888" size="12"
|
||||
margin="16rpx 24rpx" lines="1" />
|
||||
<view slot="value">
|
||||
<u-badge max="99" :value="item.unReadCount||0" />
|
||||
</view>
|
||||
</u-cell>
|
||||
<view
|
||||
style="width: 610rpx;height: 2rpx;border-top: 2rpx solid #e5e5e5;margin-left: auto;" />
|
||||
</u-swipe-action-item>
|
||||
</u-list-item>
|
||||
</u-swipe-action>
|
||||
</u-list>
|
||||
</view>
|
||||
<tabbar-carshop current="/pages/carShop/message/message"></tabbar-carshop>
|
||||
</view>
|
||||
</z-paging>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tabbarCarshop from '@/components/tabbar-carshop/tabbar-carshop.vue'
|
||||
|
||||
import {
|
||||
getChatList,
|
||||
deletedMgs,
|
||||
userCenterGetUnRead,
|
||||
SendMmsg
|
||||
} from '@/api/carShop/message/index.js';
|
||||
export default {
|
||||
components: {
|
||||
tabbarCarshop
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
dataList: [],
|
||||
unReadObj: {},
|
||||
options2: [{
|
||||
text: '删除',
|
||||
style: {
|
||||
backgroundColor: '#f56c6c',
|
||||
height: '154rpx'
|
||||
}
|
||||
}],
|
||||
groupList: [{
|
||||
text: '系统消息',
|
||||
img: 'https://smfwq2.oss-cn-shanghai.aliyuncs.com/2023/12/25/c55cf620899f494e9f4ba7542d0a4ac5.png',
|
||||
url: '/pages/repair/repair/message/message-list',
|
||||
type: 'systemArticleUnReadNum'
|
||||
},
|
||||
// {
|
||||
// text: '评论',
|
||||
// img: 'https://jimte.oss-cn-hangzhou.aliyuncs.com/xcximage/douyin/Comment.png',
|
||||
// url: '/pages/message/messages_comment/messages_comment',
|
||||
// type: 'replyUnReadNum'
|
||||
// },
|
||||
// {
|
||||
// text: '收到的赞',
|
||||
// img: 'https://jimte.oss-cn-hangzhou.aliyuncs.com/xcximage/douyin/ReceivedLikes.png',
|
||||
// url: '/pages/message/messages_Like/messages_Like',
|
||||
// type: 'likeUnReadNum'
|
||||
// },
|
||||
// {
|
||||
// text:'群聊',
|
||||
// img:'https://jimte.oss-cn-hangzhou.aliyuncs.com/xcximage/douyin/groupChat.png',
|
||||
// url:'/pages/message/message_Group/message_Group',
|
||||
// type: 'GroupUnReadNum'
|
||||
// }
|
||||
],
|
||||
navConfig: {
|
||||
title: "消息",
|
||||
hideback: true,
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
uni.$on('Chat', (e) => {
|
||||
if (e.type == 'add') {
|
||||
this.unReadObj = e.data;
|
||||
if (this.$refs.paging) {
|
||||
this.$refs.paging.clear();
|
||||
this.$refs.paging.refresh();
|
||||
}
|
||||
} else if (e.type == 'remove') {
|
||||
//私聊未读清0，其他消息清0有服务端处理
|
||||
if (e.index) this.dataList[e.index].unReadCount = 0;
|
||||
}
|
||||
});
|
||||
//发起聊天
|
||||
// SendMmsg({
|
||||
// "chatType": 81,
|
||||
// "content": "小宏乖乖",
|
||||
// "msgType": 78,
|
||||
// "toUid": 9
|
||||
// }).then(res => {
|
||||
// console.log(res, '聊天');
|
||||
// })
|
||||
},
|
||||
onShow() {
|
||||
// #ifdef APP-PLUS
|
||||
// if(uni.$tim.TimLogin){
|
||||
// if(this.groupList.some(item=>item.text == '群聊')) return false;
|
||||
// this.groupList.push({
|
||||
// text:'群聊',
|
||||
// img:'https://jimte.oss-cn-hangzhou.aliyuncs.com/xcximage/douyin/groupChat.png',
|
||||
// url:'/pages/message/message_Group/message_Group',
|
||||
// type: 'GroupUnReadNum'
|
||||
// });
|
||||
// }
|
||||
// #endif
|
||||
if (this.$refs.paging) {
|
||||
this.$refs.paging.refresh();
|
||||
}
|
||||
},
|
||||
onUnload() {
|
||||
uni.$off('Chat');
|
||||
},
|
||||
computed: {
|
||||
content() {
|
||||
return (val) => {
|
||||
if (val.indexOf("{") != -1) return "一起分享";
|
||||
else return val;
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
back() {
|
||||
uni.navigateBack()
|
||||
//初始化
|
||||
queryList(pageNo, pageSize) {
|
||||
getChatList({
|
||||
page: pageNo,
|
||||
limit: pageSize
|
||||
}).then(res => {
|
||||
this.$refs.paging.complete(res.data.list);
|
||||
});
|
||||
},
|
||||
link(url) {
|
||||
uni.navigateTo({
|
||||
url
|
||||
})
|
||||
//删除信息
|
||||
swipeAction({
|
||||
name
|
||||
}) {
|
||||
this.$u.throttle(() => {
|
||||
deletedMgs({
|
||||
id: this.dataList[name].id
|
||||
}).then(res => {
|
||||
if (res.data) {
|
||||
this.dataList.splice(name, 1);
|
||||
this.$u.toast('删除成功');
|
||||
} else {
|
||||
this.$u.toast('删除失败');
|
||||
}
|
||||
});
|
||||
}, 1000);
|
||||
},
|
||||
//跳转
|
||||
Navto(url, item, i) {
|
||||
this.$u.route(url, {
|
||||
charSn: JSON.stringify(encodeURIComponent(item.chatSn)),
|
||||
chatType: item.chatType,
|
||||
toUid: item.toUid,
|
||||
toUidNickname: item.toUidNickname,
|
||||
index: i
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
padding-bottom: 16rpx;
|
||||
width: 750rpx;
|
||||
background-color: #fff;
|
||||
border-bottom: 1rpx solid #EDEDED;
|
||||
z-index: 1000;
|
||||
|
||||
.navbar-title {
|
||||
padding: 0 34rpx;
|
||||
height: 88rpx;
|
||||
font-size: 36rpx;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
line-height: 36rpx;
|
||||
|
||||
.image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
|
||||
.back {
|
||||
width: 18rpx;
|
||||
height: 34rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-item {
|
||||
padding: 0 32rpx 0 24rpx;
|
||||
width: 750rpx;
|
||||
height: 168rpx;
|
||||
|
||||
.left {
|
||||
image {
|
||||
margin-right: 36rpx;
|
||||
width: 104rpx;
|
||||
height: 104rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
view {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
image {
|
||||
margin-left: 16rpx;
|
||||
width: 10rpx;
|
||||
height: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
<style scoped>
|
||||
.box {}
|
||||
</style>
|
||||
@@ -0,0 +1,229 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="chat-input-bar">
|
||||
<view class="chat-input-container">
|
||||
<view class="u-flex u-flex-items-center" style="background-color: #FFFFFF;">
|
||||
<!-- 输入框 -->
|
||||
<view style="flex: 1;position: relative;overflow: hidden;" @click.stop="openPinglun">
|
||||
<u--textarea autoHeight fixed :showConfirmBar="false" border="none" confirmHold
|
||||
:autoFocus="autoFocus" :placeholder="placeholder" maxlength="100" :disabled="disabled"
|
||||
:cursor-spacing="20" v-model="value" :focus="focus" @blur="blur"
|
||||
@focus="emojiShow=false,more=false" @linechange="linechange"
|
||||
:customStyle="'background-color: #f2f0f4; border-radius: '+ borderRadius +'rpx;'" />
|
||||
<view style="position: absolute;left: 0;top: 0;flex: 1;" @click="openPinglun" v-if="open" />
|
||||
</view>
|
||||
|
||||
<!--表情按钮 -->
|
||||
<view style="margin-left: 20rpx;" @click.stop="emojiShow = !emojiShow,more=false,blur()">
|
||||
<image src="https://jimte.oss-cn-hangzhou.aliyuncs.com/xcximage/douyin/expression.png"
|
||||
style="width: 48rpx;height: 48rpx;" />
|
||||
</view>
|
||||
<!-- 更多按钮 -->
|
||||
<view style="margin-left: 20rpx;" @click.stop="more = !more,emojiShow=false,blur()">
|
||||
<image src="https://jimte.oss-cn-hangzhou.aliyuncs.com/xcximage/douyin/more.png"
|
||||
style="width: 48rpx;height: 48rpx;" />
|
||||
</view>
|
||||
<!--发送按钮 -->
|
||||
<view v-if="value!==''" style="margin-left: 20rpx;" @click.stop="sendSMS(value,0)">
|
||||
<image src="https://smfwq2.oss-cn-shanghai.aliyuncs.com/2023/12/25/63571017a4a042b682e1c6be08a3cdda.png"
|
||||
style="width: 48rpx;height: 48rpx;" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 功能 -->
|
||||
<template v-if="more">
|
||||
<u-grid col="4" :border="false" @click="gridItemTap" customStyle="background-color: #fff;" ref="grid">
|
||||
<u-grid-item v-for="(item,index) in gridItem" :key="index" customStyle="margin-bottom: 10rpx;">
|
||||
<u--image :src="item.img" width="52" height="52" />
|
||||
<view style="margin-top: 10rpx;">
|
||||
<u--text :text="item.text" color="#999" size="24rpx" align="center" />
|
||||
</view>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</template>
|
||||
<!-- 表情 -->
|
||||
<template v-else-if="emojiShow">
|
||||
<view>
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<waterfall column-count="8" column-width="auto" column-gap="0" left-gap="10"
|
||||
style="height: 200rpx;background-color: #fff;">
|
||||
<cell v-for="(item,index) in emoicon" :key="index" style="padding: 10rpx;" @click="value += item">
|
||||
<text style="font-size: 36rpx;">{{item}}</text>
|
||||
</cell>
|
||||
</waterfall>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-PLUS -->
|
||||
<u-list height="200rpx" customStyle="background-color:#fff;padding:10rpx 0;">
|
||||
<u-grid col="10">
|
||||
<u-grid-item v-for="(item,index) in emoicon" :key="index" @click="value += item"
|
||||
customStyle="margin-bottom:20rpx;">
|
||||
<u-list-item>
|
||||
<text style="font-size: 36rpx;text-align: left;">{{item}}</text>
|
||||
</u-list-item>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</u-list>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import utils from "@/utils/util.js";
|
||||
export default {
|
||||
name: "chat-input-bar",
|
||||
props: {
|
||||
groupID: ''
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
borderRadius: 50, //评论框圆角大小
|
||||
emojiShow: false, //表情显示
|
||||
autoFocus: false, //自动焦点
|
||||
focus: false,
|
||||
disabled: false,
|
||||
open: true,
|
||||
more: false,
|
||||
placeholder: "发送信息~",
|
||||
emoicon: [
|
||||
"😁", "😋", "😜", "😉", "😌", "😅", "😳", "😊", "😝", "😰", "😠", "😩", "😲", "😞", "😭", "😍",
|
||||
"😖", "😱", "😡", "😚", "😤", "🐼", "🐲", "😺", "😸", "😹", "😽", "🙀", "🐴", "🐮", "🍺", "🔥",
|
||||
"💔", "🉑", "💢", "💣", "💩", "💪", "👍", "👊", "👋", "👌", "👐"
|
||||
],
|
||||
gridItem: [{
|
||||
img: 'https://jimte.oss-cn-hangzhou.aliyuncs.com/xcximage/douyin/album.png',
|
||||
text: '相册'
|
||||
},
|
||||
{
|
||||
img: 'https://jimte.oss-cn-hangzhou.aliyuncs.com/xcximage/douyin/video.png',
|
||||
text: '视频'
|
||||
},
|
||||
// {img:'https://jimte.oss-cn-hangzhou.aliyuncs.com/xcximage/douyin/redEnvelope.png',text:'红包'},
|
||||
{
|
||||
img: 'https://jimte.oss-cn-hangzhou.aliyuncs.com/xcximage/douyin/phone.png',
|
||||
text: '语音通话'
|
||||
},
|
||||
{
|
||||
img: 'https://jimte.oss-cn-hangzhou.aliyuncs.com/xcximage/douyin/video.png',
|
||||
text: '视频通话'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
//发送
|
||||
sendSMS(value, type) {
|
||||
if (!value) return uni.$u.toast('内容不能为空');
|
||||
this.$emit('sendSMS', {
|
||||
msg: value,
|
||||
msgType: type
|
||||
});
|
||||
this.value = '';
|
||||
},
|
||||
//点击更多事件
|
||||
gridItemTap(index) {
|
||||
switch (index) {
|
||||
case 0:
|
||||
// 从相册选择图片
|
||||
utils.uploadImageOne({
|
||||
count: 1,
|
||||
sizeType: ['original'],
|
||||
sourceType: ['album', 'camera'],
|
||||
dir: 'crmebimage/public/product/'
|
||||
}, null, (res) => {
|
||||
uni.hideLoading();
|
||||
this.sendSMS(res.data, 1);
|
||||
});
|
||||
break;
|
||||
case 1:
|
||||
// 从相册选择视频
|
||||
utils.uploadVideo({
|
||||
dir: 'crmebimage/public/product/'
|
||||
}, null, true, res => {
|
||||
uni.hideLoading();
|
||||
this.sendSMS(res.data, 2);
|
||||
});
|
||||
break;
|
||||
case 2:
|
||||
//语音通话
|
||||
this.$emit('TUICallKit', 1);
|
||||
break;
|
||||
case 3:
|
||||
//语音通话
|
||||
this.$emit('TUICallKit', 2);
|
||||
break;
|
||||
}
|
||||
},
|
||||
//输入框行数变化时
|
||||
linechange({
|
||||
detail
|
||||
}) {
|
||||
if (Math.abs(detail.height) < 26) {
|
||||
this.borderRadius = 50
|
||||
} else {
|
||||
this.borderRadius = 10
|
||||
}
|
||||
},
|
||||
//打开输入框
|
||||
openPinglun() {
|
||||
this.emojiShow = false;
|
||||
this.more = false;
|
||||
// #ifndef APP-PLUS
|
||||
this.open = false;
|
||||
uni.$u.debounce(() => {
|
||||
this.autoFocus = true;
|
||||
}, 50);
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
if (plus.os.name == "iOS") {
|
||||
this.open = false;
|
||||
this.disabled = false;
|
||||
uni.$u.debounce(() => {
|
||||
this.autoFocus = true;
|
||||
}, 50);
|
||||
} else {
|
||||
this.focus = true;
|
||||
this.$nextTick(() => {
|
||||
this.open = false;
|
||||
if (!this.open) {
|
||||
plus.key.showSoftKeybord();
|
||||
}
|
||||
});
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
//失去焦点
|
||||
blur() {
|
||||
// #ifdef APP-PLUS
|
||||
if (plus.os.name == "iOS") {
|
||||
this.disabled = true;
|
||||
this.autoFocus = false;
|
||||
}
|
||||
this.open = true;
|
||||
plus.key.hideSoftKeybord();
|
||||
// #endif
|
||||
// #ifndef APP-PLUS
|
||||
this.open = true;
|
||||
// #endif
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chat-input-bar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
border-top: solid 1px #f5f5f5;
|
||||
background-color: #fff;
|
||||
padding: 30rpx 15rpx;
|
||||
}
|
||||
|
||||
.chat-input-container {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,219 @@
|
||||
<!-- 聊天item -->
|
||||
<template>
|
||||
<view class="chat-item">
|
||||
<text class="chat-time" v-if="item.chatTime&&item.chatTime.length">
|
||||
{{item.chatTime}}
|
||||
</text>
|
||||
<view :class="{'chat-container':true,'chat-location-me':item.selfStatus}">
|
||||
<view class="chat-icon-container">
|
||||
<image class="chat-icon" :src="item.avatar" mode="aspectFill" />
|
||||
</view>
|
||||
<view class="chat-content-container">
|
||||
<text :class="{'chat-user-name':true,'chat-location-me':item.selfStatus}">
|
||||
{{item.nickname}}
|
||||
</text>
|
||||
<template v-if="item.msgType ===0">
|
||||
<view :class="{'chat-text-container':true,'chat-text-container-me':item.selfStatus}">
|
||||
<text :class="{'char-text':true,'char-text-me':item.selfStatus}"
|
||||
:style="'font-size:30rpx;color:'+(item.selfStatus?'#fff;':'#333;')" >{{item.content}}</text>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else-if="item.msgType ===1">
|
||||
<view :class="{'chat-text-container-me-border-radius':item.selfStatus,'chat-text-container-border-radius':true}"
|
||||
@click.stop="previewImage(item.content)">
|
||||
<image :src="item.content" mode="aspectFill" style="width: 170rpx;height: 262rpx;border-radius: 16rpx;"/>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else-if="item.msgType ===2">
|
||||
<view :class="{'chat-text-container-me-border-radius':item.selfStatus,'chat-text-container-border-radius':true}" style="position: relative;">
|
||||
<image @click.stop="videoPlay(item.content)"
|
||||
:src="item.content+'?x-oss-process=video/snapshot,t_1000,m_fast'"
|
||||
mode="aspectFill"
|
||||
style="width: 170rpx;height:262rpx;border-radius: 16rpx;overflow: hidden;"/>
|
||||
<view :class="{'chat-video-container-me':item.selfStatus,'chat-video-container':true}" @click.stop="videoPlay(item.content)">
|
||||
<image
|
||||
mode="aspectFit"
|
||||
src="https://jimte.oss-cn-hangzhou.aliyuncs.com/xcximage/douyin/play.png"
|
||||
style="width: 60rpx;height: 60rpx;opacity: 0.6;"/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else-if="item.msgType ===4">
|
||||
<view
|
||||
:class="{'chat-text-container-me-border-radius':item.selfStatus,'chat-text-container-border-radius':true}"
|
||||
style="position: relative;"
|
||||
@click="Navto({url:'/pages/goods/goods_details/index',type:'redirectTo',params:{id:goodsDetai(item.content).id}})">
|
||||
<image mode="aspectFill" :src="goodsDetai(item.content).image" style="width: 170rpx;height: 262rpx;border-radius: 16rpx;"/>
|
||||
<view :class="{'chat-share-container-me':item.selfStatus,'chat-share-container':true}">
|
||||
<u--text :text="goodsDetai(item.content).name" size="10" lines="1" color="#fff"/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else-if="item.msgType ===5">
|
||||
<view
|
||||
:class="{'chat-text-container-me-border-radius':item.selfStatus,'chat-text-container-border-radius':true}"
|
||||
style="position: relative;"
|
||||
@click.stop="Navto({url:'/pages/discover/discover_video/index',type:'redirectTo',params:{noteId:discoverVideo(item.content).id}})">
|
||||
<image mode="aspectFill"
|
||||
:src="discoverVideo(item.content).image" style="width: 170rpx;height:262rpx;border-radius: 16rpx;overflow: hidden;"/>
|
||||
<view :class="{'chat-video-container-me':item.selfStatus,'chat-video-container':true}">
|
||||
<image
|
||||
mode="aspectFit"
|
||||
src="https://jimte.oss-cn-hangzhou.aliyuncs.com/xcximage/douyin/play.png"
|
||||
style="width: 60rpx;height: 60rpx;opacity: 0.6;"/>
|
||||
</view>
|
||||
<view :class="{'chat-share-container-me':item.selfStatus,'chat-share-container':true}">
|
||||
<u--text :text="discoverVideo(item.content).name" size="10" lines="1" color="#fff"/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"chat-item",
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default(){
|
||||
return {
|
||||
chatTime: '',
|
||||
avatar: '',
|
||||
nickname: '',
|
||||
content: '',
|
||||
selfStatus: false
|
||||
}
|
||||
}
|
||||
},
|
||||
index:0
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
//商品详情
|
||||
goodsDetai(){
|
||||
return (val)=>{
|
||||
return JSON.parse(val)
|
||||
}
|
||||
},
|
||||
//短视频详情
|
||||
discoverVideo(){
|
||||
return (val)=>{
|
||||
return JSON.parse(val)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
previewImage(img){
|
||||
uni.previewImage({
|
||||
urls:[img],
|
||||
current:0
|
||||
});
|
||||
},
|
||||
//播放视频
|
||||
videoPlay(e){
|
||||
this.$emit('videoPlay',e)
|
||||
},
|
||||
//跳转
|
||||
Navto(url){uni.$u.route(url)},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chat-item{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20rpx;
|
||||
flex: 1;
|
||||
}
|
||||
.chat-time{
|
||||
padding: 24rpx 0rpx;
|
||||
text-align: center;
|
||||
font-size: 22rpx;
|
||||
color: #aaa;
|
||||
}
|
||||
.chat-container{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.chat-video-container{
|
||||
position: absolute;
|
||||
top: 100rpx;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
margin-left: 50rpx;
|
||||
align-items: center;
|
||||
}
|
||||
.chat-video-container-me{
|
||||
right: 50rpx;
|
||||
margin-left: 0;
|
||||
}
|
||||
.chat-text-container-me-border-radius{
|
||||
border-radius:16rpx 0 16rpx 16rpx;
|
||||
align-items: flex-end;
|
||||
overflow: hidden;
|
||||
}
|
||||
.chat-text-container-border-radius{
|
||||
border-radius:0 16rpx 16rpx 16rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
.chat-share-container{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 170rpx;
|
||||
padding: 8rpx 4rpx;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 14rpx;
|
||||
}
|
||||
.chat-share-container-me{
|
||||
right: 0;
|
||||
}
|
||||
.chat-location-me{
|
||||
flex-direction: row-reverse;
|
||||
text-align: right;
|
||||
}
|
||||
.chat-icon-container{
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
.chat-icon{
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #eee;
|
||||
}
|
||||
.chat-content-container{
|
||||
margin: 0rpx 15rpx;
|
||||
flex: 1;
|
||||
}
|
||||
.chat-user-name{
|
||||
font-size: 26rpx;
|
||||
color: #888;
|
||||
}
|
||||
.chat-text-container{
|
||||
margin-top: 10rpx;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.chat-text-container-me{
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.char-text{
|
||||
border-radius: 8rpx;
|
||||
padding: 22rpx 24rpx;
|
||||
background-color: #fff;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.char-text-me{
|
||||
background-color: #FF404B;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,210 @@
|
||||
<!-- 聊天item -->
|
||||
<template>
|
||||
<view class="chat-item">
|
||||
<text class="chat-time" v-if="item.chatTime&&item.chatTime.length">
|
||||
{{item.chatTime}}
|
||||
</text>
|
||||
<view :class="{'chat-container':true,'chat-location-me':item.selfStatus}">
|
||||
<view class="chat-icon-container">
|
||||
<image class="chat-icon" :src="item.avatar" mode="aspectFill" />
|
||||
</view>
|
||||
<view class="chat-content-container">
|
||||
<text :class="{'chat-user-name':true,'chat-location-me':item.selfStatus}">
|
||||
{{item.nickname}}
|
||||
</text>
|
||||
<template v-if="item.msgType ===0">
|
||||
<view :class="{'chat-text-container':true,'chat-text-container-me':item.selfStatus}">
|
||||
<text :class="{'char-text':true,'char-text-me':item.selfStatus}"
|
||||
:style="'font-size:30rpx;color:'+(item.selfStatus?'#000;':'#333;')" >{{item.content}}</text>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else-if="item.msgType ===1">
|
||||
<view :class="{'chat-text-container-me-border-radius':item.selfStatus,'chat-text-container-border-radius':true}"
|
||||
@click.stop="previewImage(item.content)">
|
||||
<u--image :src="item.content" width="85" height="131"/>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else-if="item.msgType ===2">
|
||||
<view :class="{'chat-text-container-me-border-radius':item.selfStatus,'chat-text-container-border-radius':true}" style="position: relative;">
|
||||
<image @click.stop="videoPlay(item.content)"
|
||||
:src="item.content+'?x-oss-process=video/snapshot,t_1000,m_fast'" style="width: 170rpx;height:262rpx;border-radius: 16rpx;overflow: hidden;"/>
|
||||
<view :class="{'chat-video-container-me':item.selfStatus,'chat-video-container':true}" @click.stop="videoPlay(item.content)">
|
||||
<image
|
||||
mode="aspectFit"
|
||||
src="https://jimte.oss-cn-hangzhou.aliyuncs.com/xcximage/douyin/play.png"
|
||||
style="width: 60rpx;height: 60rpx;opacity: 0.6;"/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else-if="item.msgType ===4">
|
||||
<view :class="{'chat-text-container-me-border-radius':item.selfStatus,'chat-text-container-border-radius':true}" style="position: relative;"
|
||||
@click="Navto({url:'/pages/goods/goods_details/index',type:'redirectTo',params:{id:goodsDetai(item.content).id}})">
|
||||
<u--image :src="goodsDetai(item.content).image" width="85" height="131"/>
|
||||
<view style="position: absolute;bottom: 0;left: 0;padding: 8rpx 4rpx;background-color: rgba(0, 0, 0, 0.5);border-radius: 14rpx;">
|
||||
<u--text :text="goodsDetai(item.content).name" size="10" lines="1" color="#fff"/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else-if="item.msgType ===5">
|
||||
<view :class="{'chat-text-container-me-border-radius':item.selfStatus,'chat-text-container-border-radius':true}" style="position: relative;"
|
||||
@click.stop="Navto({url:'/pages/discover/discover_video/index',type:'redirectTo',params:{noteId:discoverVideo(item.content).id}})">
|
||||
<image
|
||||
:src="discoverVideo(item.content).image" style="width: 170rpx;height:262rpx;border-radius: 16rpx;overflow: hidden;"/>
|
||||
<view :class="{'chat-video-container-me':item.selfStatus,'chat-video-container':true}">
|
||||
<image
|
||||
mode="aspectFit"
|
||||
src="https://jimte.oss-cn-hangzhou.aliyuncs.com/xcximage/douyin/play.png"
|
||||
style="width: 60rpx;height: 60rpx;opacity: 0.6;"/>
|
||||
</view>
|
||||
<view style="position: absolute;bottom: 8rpx;left: 0;padding: 8rpx 4rpx;background-color: rgba(0, 0, 0, 0.5);border-radius: 14rpx;">
|
||||
<u--text :text="discoverVideo(item.content).name" size="10" lines="1" color="#fff"/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"chat-item",
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default(){
|
||||
return {
|
||||
chatTime: '',
|
||||
avatar: '',
|
||||
nickname: '',
|
||||
content: '',
|
||||
selfStatus: false
|
||||
}
|
||||
}
|
||||
},
|
||||
index:0
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
//商品详情
|
||||
goodsDetai(){
|
||||
return (val)=>{
|
||||
return JSON.parse(val)
|
||||
}
|
||||
},
|
||||
//短视频详情
|
||||
discoverVideo(){
|
||||
return (val)=>{
|
||||
return JSON.parse(val)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
previewImage(img){
|
||||
uni.previewImage({
|
||||
urls:[img],
|
||||
current:0
|
||||
});
|
||||
},
|
||||
//播放视频
|
||||
videoPlay(e){
|
||||
this.$emit('videoPlay',e)
|
||||
},
|
||||
//跳转
|
||||
Navto(url){uni.$u.route(url)},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chat-item{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20rpx;
|
||||
}
|
||||
.chat-time{
|
||||
padding: 24rpx 0rpx;
|
||||
text-align: center;
|
||||
font-size: 22rpx;
|
||||
color: #aaa;
|
||||
}
|
||||
.chat-container{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.chat-video-container-me{
|
||||
margin-left: 0;
|
||||
/* #ifdef H5 */
|
||||
right:50rpx;
|
||||
/*#endif*/
|
||||
/* #ifdef MP */
|
||||
right:100rpx;
|
||||
/*#endif*/
|
||||
}
|
||||
.chat-video-container{
|
||||
position: absolute;
|
||||
top: 100rpx;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
margin-left: 50rpx;
|
||||
align-items: center;
|
||||
}
|
||||
.chat-text-container-me-border-radius{
|
||||
border-radius:16rpx 0 16rpx 16rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
.chat-text-container-border-radius{
|
||||
border-radius:0 16rpx 16rpx 16rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
.chat-location-me{
|
||||
flex-direction: row-reverse;
|
||||
text-align: right;
|
||||
}
|
||||
.chat-icon-container{
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
.chat-icon{
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #eee;
|
||||
}
|
||||
.chat-content-container{
|
||||
margin: 0rpx 15rpx;
|
||||
}
|
||||
.chat-user-name{
|
||||
font-size: 26rpx;
|
||||
color: #888;
|
||||
}
|
||||
.chat-text-container{
|
||||
background-color: #FFF;
|
||||
border-radius: 8rpx;
|
||||
padding: 22rpx 24rpx;
|
||||
margin-top: 10rpx;
|
||||
/* #ifndef APP-NVUE */
|
||||
max-width: 500rpx;
|
||||
/* #endif */
|
||||
}
|
||||
.chat-text-container-me{
|
||||
background-color: #84D2CF;
|
||||
}
|
||||
.char-text{
|
||||
font-size: 28rpx;
|
||||
/* #ifndef APP-NVUE */
|
||||
max-width: 500rpx;
|
||||
word-break: break-all;
|
||||
/* #endif */
|
||||
}
|
||||
.char-text-me{
|
||||
color: white;
|
||||
}
|
||||
.video{
|
||||
width: 170rpx;
|
||||
height:262rpx;
|
||||
}
|
||||
</style>
|
||||
167
pages/carShop/message/message_Chat/message_Chat.nvue
Normal file
167
pages/carShop/message/message_Chat/message_Chat.nvue
Normal file
@@ -0,0 +1,167 @@
|
||||
<template>
|
||||
<z-paging ref="paging" v-model="mainList" @query="queryList" :hide-empty-view="true" created-reload
|
||||
safe-area-inset-bottom use-chat-record-mode :auto-show-back-to-top="false"
|
||||
:pagingStyle="{'background-color':'#F1F1F1','height':height?($u.sys().screenHeight - height)+'px':'auto'}">
|
||||
<template slot="top">
|
||||
<view style="position: absolute;left: -99999px;z-index: 999;">
|
||||
<video id="myVideo" :src="videoUrl" @fullscreenchange="fullscreenchange" />
|
||||
</view>
|
||||
</template>
|
||||
<!-- 聊天item -->
|
||||
<template>
|
||||
<view>
|
||||
<view :id="`z-paging-${index}`" v-for="(item,index) in mainList" :key="index">
|
||||
<chatItem :item="item" :index="index" @videoPlay="videoPlay" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<!-- 底部聊天输入框 -->
|
||||
<template #bottom>
|
||||
<chatInputBar @sendSMS="sendSMS" @keyboardheightchange="keyboardheightchange" @gridItemTap="gridItemTap"
|
||||
ref="chatInputBar" />
|
||||
</template>
|
||||
</z-paging>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import chatItem from "./components/chat-item/chat-item.vue";
|
||||
import chatInputBar from "./components/chat-input-bar/chat-input-bar.vue";
|
||||
import {
|
||||
getMsgList,
|
||||
SendMmsg
|
||||
} from '@/api/carShop/message/index.js';
|
||||
export default {
|
||||
components: {
|
||||
chatItem,
|
||||
chatInputBar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mainList: [],
|
||||
height: 0,
|
||||
charSn: '',
|
||||
chatType: 0,
|
||||
toUid: 0,
|
||||
time: null,
|
||||
videoUrl: '',
|
||||
videoContext: null
|
||||
}
|
||||
},
|
||||
onUnload() {
|
||||
clearInterval(this.time);
|
||||
this.time = null;
|
||||
},
|
||||
onLoad(opt) {
|
||||
if (opt.charSn) this.charSn = JSON.parse(decodeURIComponent(opt.charSn));
|
||||
this.chatType = opt.chatType || 0;
|
||||
this.toUid = opt.toUid || 0;
|
||||
uni.setNavigationBarTitle({
|
||||
title: `${decodeURIComponent(opt.toUidNickname)||'加载中...'}`
|
||||
});
|
||||
this.$nextTick(() => {
|
||||
this.videoContext = uni.createVideoContext('myVideo', this);
|
||||
});
|
||||
this.time = setInterval(() => {
|
||||
if (!this.$store.getters.token) {
|
||||
clearInterval(this.time);
|
||||
this.time = null;
|
||||
return
|
||||
}
|
||||
if (this.charSn) {
|
||||
getMsgList({
|
||||
charSn: this.charSn,
|
||||
limit: 10,
|
||||
page: 1
|
||||
}).then(res => {
|
||||
let Stutas = this.mainList.some(item => item.chatTime == res.data.list[0]
|
||||
.chatTime);
|
||||
if (!Stutas && !res.data.list[0].selfStatus) {
|
||||
this.$refs.paging.addChatRecordData(res.data.list[0]);
|
||||
}
|
||||
});
|
||||
}
|
||||
}, 3000);
|
||||
uni.$emit('Chat', {
|
||||
type: 'remove',
|
||||
index: opt.index
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
//监听全屏
|
||||
fullscreenchange(e) {
|
||||
if (!e.detail.fullScreen) {
|
||||
this.videoContext.pause();
|
||||
} else {
|
||||
this.videoContext.play();
|
||||
}
|
||||
},
|
||||
//播放视频自动进入全屏
|
||||
videoPlay(url) {
|
||||
this.videoUrl = url;
|
||||
this.videoContext.requestFullScreen(0);
|
||||
},
|
||||
//初始化
|
||||
queryList(pageNo, pageSize) {
|
||||
// #ifdef MP
|
||||
this.$u.debounce(() => {
|
||||
if (!this.charSn) {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.paging.complete(null);
|
||||
});
|
||||
return
|
||||
}
|
||||
getMsgList({
|
||||
charSn: this.charSn,
|
||||
limit: pageSize,
|
||||
page: pageNo
|
||||
}).then(res => {
|
||||
this.$refs.paging.complete(res.data.list);
|
||||
});
|
||||
}, 0);
|
||||
// #endif
|
||||
// #ifndef MP
|
||||
if (!this.charSn) {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.paging.complete(null);
|
||||
});
|
||||
return
|
||||
}
|
||||
getMsgList({
|
||||
charSn: this.charSn,
|
||||
limit: pageSize,
|
||||
page: pageNo
|
||||
}).then(res => {
|
||||
this.$refs.paging.complete(res.data.list);
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
//发送信息
|
||||
sendSMS(e) {
|
||||
SendMmsg({
|
||||
chatType: this.chatType,
|
||||
toUid: this.toUid,
|
||||
msgType: e.msgType,
|
||||
content: e.msg
|
||||
}).then(res => {
|
||||
this.charSn = res.data.chatSn;
|
||||
this.$refs.paging.addChatRecordData({
|
||||
chatTime: this.$u.timeFormat(new Date(), 'yyyy-mm-dd hh:MM:ss'),
|
||||
avatar: this.$store.getters.userInfo.avatar,
|
||||
nickname: this.$store.getters.userInfo.nickname,
|
||||
msgType: e.msgType,
|
||||
content: e.msg,
|
||||
selfStatus: true
|
||||
});
|
||||
}).catch(err => {
|
||||
this.$u.toast(err.message);
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
169
pages/carShop/message/message_Chat/message_Chat.vue
Normal file
169
pages/carShop/message/message_Chat/message_Chat.vue
Normal file
@@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<z-paging ref="paging" v-model="mainList" @query="queryList" :hide-empty-view="true" created-reload
|
||||
safe-area-inset-bottom use-chat-record-mode :auto-show-back-to-top="false"
|
||||
:pagingStyle="{'background-color':'#F1F1F1','height':height?($u.sys().screenHeight - height)+'px':'auto'}">
|
||||
<template slot="top">
|
||||
<view style="position: absolute;left: -99999px;z-index: 999;">
|
||||
<video id="myVideo" :src="videoUrl" @fullscreenchange="fullscreenchange" />
|
||||
</view>
|
||||
</template>
|
||||
<!-- 聊天item -->
|
||||
<template>
|
||||
<view>
|
||||
<view :id="`z-paging-${index}`" v-for="(item,index) in mainList" :key="index">
|
||||
<chatItem :item="item" :index="index" @videoPlay="videoPlay" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<!-- 底部聊天输入框 -->
|
||||
<template #bottom>
|
||||
<chatInputBar @sendSMS="sendSMS" @keyboardheightchange="keyboardheightchange" @gridItemTap="gridItemTap"
|
||||
ref="chatInputBar" />
|
||||
</template>
|
||||
</z-paging>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import chatItem from "./components/chat-item/chat-item.vue";
|
||||
import chatInputBar from "./components/chat-input-bar/chat-input-bar.vue";
|
||||
import {
|
||||
getMsgList,
|
||||
SendMmsg
|
||||
} from '@/api/carShop/message/index.js';
|
||||
export default {
|
||||
components: {
|
||||
chatItem,
|
||||
chatInputBar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mainList: [],
|
||||
height: 0,
|
||||
charSn: '',
|
||||
chatType: 0,
|
||||
toUid: 0,
|
||||
time: null,
|
||||
videoUrl: '',
|
||||
videoContext: null
|
||||
}
|
||||
},
|
||||
onUnload() {
|
||||
clearInterval(this.time);
|
||||
this.time = null;
|
||||
},
|
||||
onLoad(opt) {
|
||||
if (opt.charSn) this.charSn = JSON.parse(decodeURIComponent(opt.charSn));
|
||||
this.chatType = opt.chatType || 0;
|
||||
this.toUid = opt.toUid || 0;
|
||||
uni.setNavigationBarTitle({
|
||||
title: `${decodeURIComponent(opt.toUidNickname)||'加载中...'}`
|
||||
});
|
||||
this.$nextTick(() => {
|
||||
this.videoContext = uni.createVideoContext('myVideo', this);
|
||||
});
|
||||
this.time = setInterval(() => {
|
||||
if (!this.$store.getters.token) {
|
||||
clearInterval(this.time);
|
||||
this.time = null;
|
||||
return
|
||||
}
|
||||
if (this.charSn) {
|
||||
getMsgList({
|
||||
charSn: this.charSn,
|
||||
limit: 10,
|
||||
page: 1
|
||||
}).then(res => {
|
||||
console.log(res.data,'6666');
|
||||
let Stutas = this.mainList.some(item => item.chatTime == res.data.list[0]
|
||||
.chatTime);
|
||||
if (!Stutas && !res.data.list[0].selfStatus) {
|
||||
this.$refs.paging.addChatRecordData(res.data.list[0]);
|
||||
}
|
||||
});
|
||||
}
|
||||
}, 3000);
|
||||
uni.$emit('Chat', {
|
||||
type: 'remove',
|
||||
index: opt.index
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
//监听全屏
|
||||
fullscreenchange(e) {
|
||||
if (!e.detail.fullScreen) {
|
||||
this.videoContext.pause();
|
||||
} else {
|
||||
this.videoContext.play();
|
||||
}
|
||||
},
|
||||
//播放视频自动进入全屏
|
||||
videoPlay(url) {
|
||||
this.videoUrl = url;
|
||||
this.videoContext.requestFullScreen(0);
|
||||
},
|
||||
//初始化
|
||||
queryList(pageNo, pageSize) {
|
||||
// #ifdef MP
|
||||
this.$u.debounce(() => {
|
||||
if (!this.charSn) {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.paging.complete(null);
|
||||
});
|
||||
return
|
||||
}
|
||||
getMsgList({
|
||||
charSn: this.charSn,
|
||||
limit: pageSize,
|
||||
page: pageNo
|
||||
}).then(res => {
|
||||
this.$refs.paging.complete(res.data.list);
|
||||
});
|
||||
}, 0);
|
||||
// #endif
|
||||
// #ifndef MP
|
||||
if (!this.charSn) {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.paging.complete(null);
|
||||
});
|
||||
return
|
||||
}
|
||||
getMsgList({
|
||||
charSn: this.charSn,
|
||||
limit: pageSize,
|
||||
page: pageNo
|
||||
}).then(res => {
|
||||
this.$refs.paging.complete(res.data.list);
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
//发送信息
|
||||
sendSMS(e) {
|
||||
let userInfo= uni.getStorageSync('userInfo')
|
||||
SendMmsg({
|
||||
chatType: this.chatType,
|
||||
toUid: this.toUid,
|
||||
msgType: e.msgType,
|
||||
content: e.msg
|
||||
}).then(res => {
|
||||
this.charSn = res.data.chatSn;
|
||||
this.$refs.paging.addChatRecordData({
|
||||
chatTime: this.$u.timeFormat(new Date(), 'yyyy-mm-dd hh:MM:ss'),
|
||||
avatar: userInfo.avatar,
|
||||
nickname: userInfo.nickname,
|
||||
msgType: e.msgType,
|
||||
content: e.msg,
|
||||
selfStatus: true
|
||||
});
|
||||
}).catch(err => {
|
||||
this.$u.toast(err.message);
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
@@ -19,14 +19,14 @@
|
||||
<view class="">
|
||||
<view class="user-header">
|
||||
<view class="user-header-image">
|
||||
<image src="@/static/images/carshop/user/user_to.png" mode=""></image>
|
||||
<image :src="userInfo.avatar" mode=""></image>
|
||||
<image class="user-header-image-medal" src="@/static/images/carshop/user/medal.png" mode="">
|
||||
</image>
|
||||
</view>
|
||||
<image @click="signInFn" class="user-header-sign-in" src="@/static/images/carshop/user/sign_in.png">
|
||||
</image>
|
||||
</view>
|
||||
<view class="user-header-name">浙江元通之星</view>
|
||||
<view class="user-header-name">{{userInfo.nickname}}</view>
|
||||
</view>
|
||||
<view class="user-waist">
|
||||
<view>
|
||||
@@ -74,12 +74,17 @@
|
||||
import {
|
||||
carShopUserMenuList
|
||||
} from "@/data/user_menu.js"
|
||||
import {
|
||||
getUserInfo
|
||||
} from "@/api/system/user.js"
|
||||
export default {
|
||||
components: {
|
||||
tabbarCarshop
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
//用户信息
|
||||
userInfo:{},
|
||||
//菜单栏
|
||||
carShopUserMenuList,
|
||||
signInShow: false
|
||||
@@ -101,7 +106,15 @@
|
||||
setTimeout(() => {
|
||||
this.signInShow = false
|
||||
}, 2000)
|
||||
}
|
||||
},
|
||||
signInOpen(){}
|
||||
},
|
||||
onShow() {
|
||||
getUserInfo().then(res=>{
|
||||
console.log(res,'用户信息');
|
||||
this.userInfo=res.data
|
||||
uni.setStorageSync('userInfo', res.data);
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -65,10 +65,10 @@
|
||||
repairUserMenuList
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
navigatorFn(item){
|
||||
methods: {
|
||||
navigatorFn(item) {
|
||||
uni.navigateTo({
|
||||
url:item.path
|
||||
url: item.path
|
||||
})
|
||||
}
|
||||
},
|
||||
@@ -76,6 +76,7 @@
|
||||
getUserInfo().then(res => {
|
||||
console.log(res, '用户信息');
|
||||
this.userInfo = res.data
|
||||
uni.setStorageSync('userInfo', res.data);
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -98,6 +99,7 @@
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: #000;
|
||||
|
||||
.u-cell-text {
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.0 KiB After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 1.7 KiB |
Reference in New Issue
Block a user