朋友圈样式问题
/pages.json
{ "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path" : "pages/common/login/login", "style" : { "navigationBarTitleText": "", "enablePullDownRefresh": false } }, { "path": "pages/tabbar/index/index", "style": { "navigationBarTitleText": "uni-app", "disableScroll": true // 不嵌套 scroller } } ,{ "path" : "pages/tabbar/find/find", "style" : { "navigationBarTitleText": "", "enablePullDownRefresh": false } } ,{ "path" : "pages/tabbar/my/my", "style" : { "navigationBarTitleText": "", "enablePullDownRefresh": false } } ,{ "path" : "pages/tabbar/mail/mail", "style" : { "navigationBarTitleText": "", "enablePullDownRefresh": false } } ,{ "path" : "pages/chat/chat/chat", "style" : { "navigationBarTitleText": "", "enablePullDownRefresh": false } } ,{ "path" : "pages/chat/video/video", "style" : { "navigationBarTitleText": "", "enablePullDownRefresh": false } } ,{ "path" : "pages/chat/chat-set/chat-set", "style" : { "navigationBarTitleText": "", "enablePullDownRefresh": false } } ,{ "path" : "pages/mail/user-base/user-base", "style" : { "navigationBarTitleText": "", "enablePullDownRefresh": false } } ,{ "path" : "pages/mail/user-tag-set/user-tag-set", "style" : { "navigationBarTitleText": "", "enablePullDownRefresh": false } } ,{ "path" : "pages/mail/user-remark-tag/user-remark-tag", "style" : { "navigationBarTitleText": "", "enablePullDownRefresh": false } } ,{ "path" : "pages/mail/user-moments-auth/user-moments-auth", "style" : { "navigationBarTitleText": "", "enablePullDownRefresh": false } } ,{ "path" : "pages/mail/send-card/send-card", "style" : { "navigationBarTitleText": "", "enablePullDownRefresh": false } } ,{ "path" : "pages/mail/user-report/user-report", "style" : { "navigationBarTitleText": "", "enablePullDownRefresh": false } } ,{ "path" : "pages/find/moments/moments", "style" : { "navigationBarTitleText": "", "enablePullDownRefresh": true, "app-plus":{ "pullToRefresh":{ "support":true, "style":"circle" } } } } ,{ "path" : "pages/my/userinfo/userinfo", "style" : { "navigationBarTitleText": "", "enablePullDownRefresh": false } } ,{ "path" : "pages/my/code/code", "style" : { "navigationBarTitleText": "", "enablePullDownRefresh": false } } ,{ "path" : "pages/my/fava/fava", "style" : { "navigationBarTitleText": "", "enablePullDownRefresh": true } } ,{ "path" : "pages/common/search/search", "style" : { "navigationBarTitleText": "", "enablePullDownRefresh": false } } ,{ "path" : "pages/find/add-moment/add-moment", "style" : { "navigationBarTitleText": "", "enablePullDownRefresh": false } } ,{ "path" : "pages/my/setting/setting", "style" : { "navigationBarTitleText": "", "enablePullDownRefresh": false } } ,{ "path" : "pages/mail/add-friend/add-friend", "style" : { "navigationBarTitleText": "", "enablePullDownRefresh": false } } ,{ "path" : "pages/mail/apply-list/apply-list", "style" : { "enablePullDownRefresh": true } } ,{ "path" : "pages/mail/mail/mail", "style" : { "navigationBarTitleText": "", "enablePullDownRefresh": false } } ,{ "path" : "pages/mail/group-list/group-list", "style" : { "navigationBarTitleText": "", "enablePullDownRefresh": false } } ,{ "path" : "pages/chat/group-remark/group-remark", "style" : { "navigationBarTitleText": "", "enablePullDownRefresh": false } } ,{ "path" : "pages/chat/chat-list/chat-list", "style" : { "navigationBarTitleText": "", "enablePullDownRefresh": false } } ,{ "path" : "pages/chat/chat-history/chat-history", "style" : { "navigationBarTitleText": "", "enablePullDownRefresh": false } } ,{ "path" : "pages/chat/group-user/group-user", "style" : { "navigationBarTitleText": "", "enablePullDownRefresh": false } } ,{ "path" : "pages/mail/tag-list/tag-list", "style" : { "navigationBarTitleText": "", "enablePullDownRefresh": true } } ,{ "path" : "pages/mail/tag-read/tag-read", "style" : { "navigationBarTitleText": "", "enablePullDownRefresh": false } } ], "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "uni-app", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8" }, "globalStyle":{ "navigationBarTextStyle":"black", "navigationBarTitleText":"微信", "navigationBarBackgroundColor":"#F8F8F8", "backgroundColor":"#F8F8F8", "app-plus":{ "titleNView":false, "scrollIndicator":"none" } }, "tabBar":{ "borderStyle":"black", "backgroundColor":"#F7F7F7", "color":"#000000", "selectedColor":"#08C261", "list":[ { "iconPath":"./static/tabbar/index.png", "selectedIconPath":"./static/tabbar/index-select.png", "pagePath":"pages/tabbar/index/index", "text":"首页" }, { "iconPath":"./static/tabbar/mail.png", "selectedIconPath":"./static/tabbar/mail-select.png", "pagePath":"pages/tabbar/mail/mail", "text":"通讯录" }, { "iconPath":"./static/tabbar/find.png", "selectedIconPath":"./static/tabbar/find-select.png", "pagePath":"pages/tabbar/find/find", "text":"发现" }, { "iconPath":"./static/tabbar/my.png", "selectedIconPath":"./static/tabbar/my-select.png", "pagePath":"pages/tabbar/my/my", "text":"我的" } ] }, "dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize", "condition" : { //模式配置，仅开发期间生效 "current": 0, //当前激活的模式(list 的索引项) "list": [ { "name": "", //模式名称 "path": "", //启动页面，必选 "query": "" //启动参数，在页面的onLoad函数里面得到 } ] } }
弹出层问题
/components/free-ui/free-popup.vue
<template> <div style="z-index:9999;overflow:hidden;" v-if="status"> <!-- 蒙版 --> <view v-if="mask" class="position-fixed top-0 left-0 right-0 bottom-0 z-index" :style="getMaskColor" @click="hide"></view> <!-- 弹出框内容 --> <div ref="popup" class="position-fixed free-animated z-index" :class="getBodyClass" :style="getBodyStyle"> <slot></slot> </div> </div> </template> <script> // #ifdef APP-PLUS-NVUE const animation = weex.requireModule('animation') // #endif export default { props: { // 是否开启蒙版颜色 maskColor: { type: Boolean, default: false }, // 是否开启蒙版 mask:{ type:Boolean, default:true }, // 是否居中 center:{ type:Boolean, default:false }, // 是否处于底部 bottom:{ type:Boolean, default:false }, // 弹出层内容宽度 bodyWidth:{ type:Number, default:0 }, // 弹出层内容高度 bodyHeight:{ type:Number, default:0 }, bodyBgColor:{ type:String, default:"bg-white" }, transformOrigin:{ type:String, default:"left top" }, // tabbar高度 tabbarHeight:{ type:Number, default:0 } }, data() { return { status: false, x:-1, y:1, maxX:0, maxY:0 } }, mounted() { try { const res = uni.getSystemInfoSync(); this.maxX = res.windowWidth - uni.upx2px(this.bodyWidth) this.maxY = res.windowHeight - uni.upx2px(this.bodyHeight) - uni.upx2px(this.tabbarHeight) } catch (e) { // error } }, computed: { getMaskColor() { let i = this.maskColor ? 0.5 : 0 return `background-color: rgba(0,0,0,${i});` }, getBodyClass(){ if(this.center){ return 'left-0 right-0 bottom-0 top-0 flex align-center justify-center' } let bottom = this.bottom ? 'left-0 right-0 bottom-0' : 'rounded border' return `${this.bodyBgColor} ${bottom}` }, getBodyStyle(){ let left = this.x > -1 ? `left:${this.x}px;` : '' let top = this.y > -1 ? `top:${this.y}px;` : '' return left + top } }, methods:{ show(x = -1 ,y = -1){ if (this.status) { return; } this.x = (x > this.maxX) ? this.maxX : x this.y = (y > this.maxY) ? this.maxY : y this.status = true // #ifdef APP-PLUS-NVUE // this.$nextTick(()=>{ // animation.transition(this.$refs.popup, { // styles: { // transform: 'scale(1,1)', // transformOrigin:this.transformOrigin, // opacity:1 // }, // duration: 100, //ms // timingFunction: 'ease', // }, function () { // console.log('动画执行结束'); // }) // }) // #endif }, hide(){ this.$emit('hide') // #ifdef APP-PLUS-NVUE // animation.transition(this.$refs.popup, { // styles: { // transform: 'scale(0,0)', // transformOrigin:this.transformOrigin, // opacity:0 // }, // duration: 100, //ms // timingFunction: 'ease', // }, ()=> { // this.status = false // console.log('动画执行结束'); // }) // #endif this.status = false } } } </script> <style scoped> .free-animated{ /* #ifdef APP-PLUS-NVUE */ /* transform: scale(0,0); opacity: 0; */ /* #endif */ } .z-index{ /* #ifndef APP-NVUE */ z-index: 9999; /* #endif */ } </style>
底部聊天框问题
/pages/chat/chat/chat.nvue
<template> <view> <!-- 导航栏 --> <free-nav-bar :title="detail.name" :noreadnum="totalNoreadnum" showBack> <free-icon-button slot="right" @click="openChatSet"><text class="iconfont font-lg"></text> </free-icon-button> </free-nav-bar> <!-- 聊天内容区域 --> <scroll-view scroll-y class="bg-light position-fixed left-0 right-0 px-3" style="bottom: 105rpx;box-sizing: border-box;" :style="chatBodyBottom" :show-scrollbar="false" :scroll-into-view="scrollIntoView" :scroll-with-animation="true" @click="clickPage"> <!-- 聊天信息列表组件 --> <view v-for="(item,index) in list" :key="index" :id="'chatItem_'+index"> <free-chat-item :item="item" :index="index" ref="chatItem" :pretime=" index > 0 ? list[index-1].create_time : 0" @long="long" @preview="previewImage" :shownickname="currentChatItem.shownickname"></free-chat-item> </view> </scroll-view> <!-- #ifdef APP-PLUS-NVUE --> <div v-if="mode === 'action' || mode === 'emoticon'" class="position-fixed top-0 right-0 left-0" :style="'bottom:'+maskBottom+'px;'" @click="clickPage"></div> <!-- #endif --> <!-- 底部输入框 --> <view class="position-fixed left-0 right-0 border-top " :style="'bottom:'+KeyboardHeight+'px;'"> <view class="flex align-center" style="background-color: #F7F7F6;height: 105rpx;"> <free-icon-button v-if="mode === 'audio'" @click="changeVoiceOrText"><text class="iconfont font-lg"></text></free-icon-button> <free-icon-button v-else @click="changeVoiceOrText"><text class="iconfont font-lg"></text> </free-icon-button> <view class="flex-1"> <view v-if="mode === 'audio'" class="rounded flex align-center justify-center" style="height: 80rpx;" :class="isRecording?'bg-hover-light':'bg-white'" @touchstart="voiceTouchStart" @touchend="voiceTouchEnd" @touchcancel="voiceTouchCancel" @touchmove="voiceTouchMove"> <text class="font">{{isRecording ? '松开 结束':'按住 说话'}}</text> </view> <textarea v-else fixed class="bg-white rounded p-2 font-md" style="height: 80rpx;max-width: 450rpx;" :adjust-position="false" v-model="text" @focus="focus" @blur="blur" /> </view> <!-- 表情 --> <free-icon-button @click="openActionOrEmoticon('emoticon')"><text class="iconfont font-lg"></text> </free-icon-button> <template v-if="text.length === 0"> <!-- 扩展菜单 --> <free-icon-button @click="openActionOrEmoticon('action')"><text class="iconfont font-lg"></text> </free-icon-button> </template> <view v-else class="flex-shrink"> <!-- 发送按钮 --> <free-main-button name="发送" @click="send('text')"></free-main-button> </view> </view> <view v-if="mode==='emoticon' || mode ==='action'" style="height: 580rpx;" class="border-top border-light-secondary bg-light"> <swiper :indicator-dots="emoticonOrActionList.length > 1" style="height: 510rpx;"> <swiper-item class="row" v-for="(item,index) in emoticonOrActionList" :key="index"> <view class="col-3 flex flex-column align-center justify-center" style="height: 255rpx;" v-for="(item2,index2) in item" :key="index2" @click="actionEvent(item2)"> <image :src="item2.icon" mode="widthFix" style="width: 100rpx;height: 100rpx;"></image> <text class="font-sm text-muted mt-2">{{item2.name}}</text> </view> </swiper-item> </swiper> </view> </view> <!-- 扩展菜单 --> <!-- <free-popup ref="action" bottom transformOrigin="center bottom" @hide="KeyboardHeight = 0" :mask="false"> <view style="height: 580rpx;" class="border-top border-light-secondary bg-light"> <swiper :indicator-dots="emoticonOrActionList.length > 1" style="height: 510rpx;"> <swiper-item class="row" v-for="(item,index) in emoticonOrActionList" :key="index"> <view class="col-3 flex flex-column align-center justify-center" style="height: 255rpx;" v-for="(item2,index2) in item" :key="index2" @click="actionEvent(item2)"> <image :src="item2.icon" mode="widthFix" style="width: 100rpx;height: 100rpx;"></image> <text class="font-sm text-muted mt-2">{{item2.name}}</text> </view> </swiper-item> </swiper> </view> </free-popup> --> <!-- 弹出层 --> <free-popup ref="extend" :bodyWidth="240" :bodyHeight="450" :tabbarHeight="105"> <view class="flex flex-column" style="width: 240rpx;" :style="getMenusStyle"> <view class="flex-1 flex align-center" hover-class="bg-light" v-for="(item,index) in menusList" :key="index" @click="clickEvent(item.event)"> <text class="font-md pl-3">{{item.name}}</text> </view> </view> </free-popup> <!-- 录音提示 --> <view v-if="isRecording" class="position-fixed top-0 left-0 right-0 flex align-center justify-center" style="bottom: 105rpx;"> <view style="width: 360rpx;height: 360rpx;background-color: rgba(0,0,0,0.5);" class="rounded flex flex-column align-center justify-center"> <image src="/static/images/audio/audio/recording.gif" style="width: 150rpx;height: 150rpx;"></image> <text class="font text-white mt-3">{{unRecord ? '松开手指，取消发送':'手指上滑，取消发送'}}</text> </view> </view> </view> </template> <script> // #ifdef APP-PLUS-NVUE const dom = weex.requireModule('dom') // #endif import freeNavBar from "@/components/free-ui/free-nav-bar.vue" import freeIconButton from "@/components/free-ui/free-icon-button.vue" import freeChatItem from '@/components/free-ui/free-chat-item.vue'; import freePopup from "@/components/free-ui/free-popup.vue" import freeMainButton from '@/components/free-ui/free-main-button.vue'; import { mapState, mapMutations } from 'vuex' import auth from '@/common/mixin/auth.js'; import $U from '@/common/free-lib/util.js'; import $H from '@/common/free-lib/request.js'; import $C from '@/common/free-lib/config.js'; export default { mixins: [auth], components: { freeNavBar, freeIconButton, freeChatItem, freePopup, freeMainButton }, data() { return { scrollIntoView: "", // 模式 text输入文字，emoticon表情，action操作，audio音频 mode: "text", // 扩展菜单列表 actionList: [ [{ name: "相册", icon: "/static/images/extends/pic.png", event: "uploadImage" }, { name: "拍摄", icon: "/static/images/extends/video.png", event: "uploadVideo" }, { name: "收藏", icon: "/static/images/extends/shoucan.png", event: "openFava" }, { name: "名片", icon: "/static/images/extends/man.png", event: "sendCard" }, { name: "语音通话", icon: "/static/images/extends/phone.png", event: "" }, { name: "位置", icon: "/static/images/extends/path.png", event: "" }] ], emoticonList: [], // 键盘高度 KeyboardHeight: 0, menusList: [], navBarHeight: 0, list: [], // 当前操作的气泡索引 propIndex: -1, // 输入文字 text: "", // 音频录制状态 isRecording: false, RecordingStartY: 0, // 取消录音 unRecord: false, detail: { id: 0, name: "", avatar: "", chat_type: "user" }, isfocus:false } }, mounted() { var statusBarHeight = 0 // #ifdef APP-PLUS-NVUE statusBarHeight = plus.navigator.getStatusbarHeight() // #endif this.navBarHeight = statusBarHeight + uni.upx2px(90) // // 监听键盘高度变化 // uni.onKeyboardHeightChange(res => { // if (this.mode !== 'action' && this.mode !== 'emoticon') { // this.KeyboardHeight = res.height // } // if (this.KeyboardHeight > 0) { // this.pageToBottom() // } // }) // 注册发送音频事件 this.regSendVoiceEvent((url) => { if (!this.unRecord) { this.send('audio', url, { time: this.RecordTime }) } }) this.pageToBottom() }, computed: { ...mapState({ chatList: state => state.user.chatList, RECORD: state => state.audio.RECORD, RecordTime: state => state.audio.RecordTime, chat: state => state.user.chat, totalNoreadnum: state => state.user.totalNoreadnum, user: state => state.user.user }), // 当前会话配置信息 currentChatItem() { let index = this.chatList.findIndex(item => item.id === this.detail.id && item.chat_type === this.detail .chat_type) if (index !== -1) { return this.chatList[index] } return {} }, // 获取蒙版的位置 maskBottom() { let h = this.mode !== 'emoticon' || this.mode === 'action' ? uni.upx2px(685) : uni.upx2px(105) if(this.isfocus){ h = this.KeyboardHeight + uni.upx2px(105) } return this.KeyboardHeight + h }, // 动态获取菜单高度 getMenusHeight() { let H = 100 return this.menusList.length * H }, // 获取菜单的样式 getMenusStyle() { return `height: ${this.getMenusHeight}rpx;` }, // 判断是否操作本人信息 isdoSelf() { // 获取本人id（假设拿到了） let id = 1 let user_id = this.propIndex > -1 ? this.list[this.propIndex].user_id : 0 return user_id === id }, // 聊天区域bottom chatBodyBottom() { let h = this.mode !== 'emoticon' || this.mode === 'action' ? uni.upx2px(685) : uni.upx2px(105) if(this.isfocus){ h = this.KeyboardHeight + uni.upx2px(105) } return `bottom:${h}px;top:${this.navBarHeight}px;` }, // 获取操作或者表情列表 emoticonOrActionList() { return (this.mode === 'emoticon' || this.mode === 'action') ? this[this.mode + 'List'] : [] }, // 所有信息的图片地址 imageList() { let arr = [] this.list.forEach((item) => { if (item.type === 'emoticon' || item.type === 'image') { arr.push(item.data) } }) return arr } }, watch: { mode(newValue, oldValue) { if (newValue !== 'text') { this.KeyboardHeight = 0; this.isfocus = false; uni.hideKeyboard() } } }, onLoad(e) { if (!e.params) { return this.backToast() } this.detail = JSON.parse(decodeURIComponent(e.params)) //console.log(this.detail); // 初始化 this.__init() // 创建聊天对象 this.chat.createChatObject(this.detail) // 获取历史记录 this.list = this.chat.getChatDetail() // 监听接收聊天信息 uni.$on('onMessage', this.onMessage) uni.$on('updateHistory', this.updateHistory) // 监听发送收藏和名片 uni.$on('sendItem', this.onSendItem) }, destroyed() { // 销毁聊天对象 this.chat.destoryChatObject() // 销毁监听接收聊天消息 uni.$off('onMessage', this.onMessage) uni.$off('updateHistory', this.updateHistory) uni.$off('sendItem', this.onSendItem) }, methods: { ...mapMutations(['regSendVoiceEvent']), onSendItem(e) { if (e.sendType === 'fava' || e.sendType === 'card') { this.send(e.type, e.data, e.options) } }, updateHistory(isclear = true) { if (isclear) { this.list = [] } else { this.list = this.chat.getChatDetail() } }, onMessage(message) { //console.log('[聊天页] 监听接收聊天信息', message); if ((message.from_id === this.detail.id && message.chat_type === 'user') || (message.chat_type === 'group' && message.to_id === this.detail.id)) { if (message.isremove !== 1) { this.list.push(message) // 置于底部 return this.pageToBottom() } // 撤回消息 let index = this.list.findIndex(item => item.id === message.id) if (index !== -1) { this.list[index].isremove = 1 } } }, __init() { var total = 24; var page = Math.ceil(total / 8); var arr = []; for (var i = 0; i < page; i++) { var start = i * 8; arr[i] = []; for (var j = 0; j <= 8; j++) { arr[i].push({ name: '表情' + (start + j), icon: '/static/images/emoticon/5497/' + (start + j) + '.gif', event: 'sendEmoticon' }) } } this.emoticonList = arr; // var total = 20 // var page = Math.ceil(total/8) // var arr = [] // for (var i = 0; i < page; i++) { // var start = i*8 // arr[i] = [] // for (var j = 0; j < 8; j++) { // var no = start + j // if ((no+1) > total) { // continue; // } // arr[i].push({ // name:"表情"+no, // icon: $C.emoticonUrl + no +'.gif', // event:"sendEmoticon" // }) // } // } // this.emoticonList = arr // 初始化会话列表 this.chat.initChatListItem({ chat_type: this.detail.chat_type, to_id: this.detail.id, to_name: this.detail.name, to_avatar: this.detail.avatar, data: this.detail.chat_type === 'user' ? '你们已经是好友，可以开始聊天了' : '你已经加入群聊，可以开始聊天了' }) }, // 打开扩展菜单或者表情包 openActionOrEmoticon(mode = 'action') { this.mode = mode this.$refs.action.show() uni.hideKeyboard() this.KeyboardHeight = uni.upx2px(580) }, // 发送 send(type, data = '', options = {}) { // 组织数据格式 switch (type) { case 'text': data = data || this.text break; } let message = this.chat.formatSendData({ type, data, options }) // 渲染到页面 let index = this.list.length this.list.push(message) // 监听上传进度 let onProgress = false if (message.type !== 'text' && message.type !== 'emoticon' && message.type !== 'card' && !message.data .startsWith('http')) { onProgress = (progress) => { // //console.log('上传进度：', progress); } } // 发送到服务端 this.chat.send(message, onProgress).then(res => { //console.log(res); // 发送成功 this.list[index].id = res.id this.list[index].data = res.data; this.list[index].sendStatus = 'success' }).catch(err => { // 发送失败 this.list[index].sendStatus = 'fail' //console.log(err); }) // 发送文字成功，清空输入框 if (type === 'text') { this.text = '' } // 置于底部 this.pageToBottom() }, // 回到底部 pageToBottom() { setTimeout(() => { // #ifdef APP-PLUS-NVUE let chatItem = this.$refs.chatItem if(chatItem){ let lastIndex = chatItem.length > 0 ? chatItem.length - 1 : 0 if (chatItem[lastIndex]) { dom.scrollToElement(chatItem[lastIndex], {}) } } // #endif // #ifndef APP-NVUE let lastIndex = this.list.length - 1 this.scrollIntoView = 'chatItem_' + lastIndex // #endif }, 300) }, // 长按消息气泡 long({ x, y, index }) { // 初始化 索引 this.propIndex = index // 组装菜单 let menus = [{ name: "发送给朋友", event: 'sendToChatItem' }, { name: "收藏", event: 'fava' }, { name: "删除", event: 'delete' }] let item = this.list[this.propIndex] let isSelf = this.user.id === item.from_id if (isSelf) { menus.push({ name: "撤回", event: 'removeChatItem' }) } // #ifndef H5 if (item.type === 'text') { menus.unshift({ name: "复制", event: 'copy', }) } // #endif this.menusList = menus // 显示扩展菜单 this.$refs.extend.show(x, y) }, // 操作菜单方法分发 clickEvent(event) { let item = this.list[this.propIndex] let isSelf = this.user.id === item.from_id switch (event) { case 'removeChatItem': // 撤回消息 // 拿到当前被操作的信息 this.chat.recall(item).then(res => { item.isremove = 1 }) break; case 'sendToChatItem': uni.navigateTo({ url: '../chat-list/chat-list?params=' + encodeURIComponent(JSON.stringify(item)), }); break; case 'copy': // 复制 uni.setClipboardData({ data: item.data, success: () => { uni.showToast({ title: '复制成功', icon: 'none' }); } }); break; case 'delete': uni.showModal({ content: '是否要删除该记录？', success: (res) => { if (!res.confirm) return; this.chat.deleteChatDetailItem(item, isSelf) this.list.splice(this.propIndex, 1) // 删除最后一条消息 if (this.list.length === this.propIndex) { this.chat.updateChatItem({ id: this.detail.id, chat_type: this.detail.chat_type }, (v) => { let o = this.list[this.propIndex - 1] let data = '' if (o) { data = this.chat.formatChatItemData(o, isSelf) } v.data = data return v }) } } }); break; case 'fava': // 加入收藏 uni.showModal({ content: '是否要加入收藏？', success: (res) => { if (res.confirm) { $H.post('/fava/create', { type: item.type, data: item.data, options: JSON.stringify(item.options) }).then(res => { uni.showToast({ title: '加入收藏成功', icon: 'none' }); }) } } }); break; } // 关闭菜单 this.$refs.extend.hide() }, // 扩展菜单 actionEvent(e) { switch (e.event) { case 'uploadImage': // 选择相册 uni.chooseImage({ count: 9, success: (res) => { // 发送到服务器 // 渲染到页面 res.tempFilePaths.forEach((item) => { this.send('image', item) }) } }) break; case 'uploadVideo': // 发送短视频 uni.chooseVideo({ maxDuration: 10, success: (res) => { this.send('video', res.tempFilePath) // 渲染页面 // 发送到服务端（获取视频封面，返回url） // 修改本地的发送状态 } }) break; case 'sendEmoticon': // 发送表情包 this.send('emoticon', e.icon) break; case 'openFava': // 发送收藏 uni.navigateTo({ url: '../../my/fava/fava?type=send', }); break; case 'sendCard': // 发送名片 uni.navigateTo({ url: '../../mail/mail/mail?type=sendCard&limit=1', }); break; } }, // 点击页面 clickPage() { this.mode = '' }, // 预览图片 previewImage(url) { uni.previewImage({ current: url, urls: this.imageList, indicator: "default" }) }, // 切换音频录制和文本输入 changeVoiceOrText() { this.mode = this.mode !== 'audio' ? 'audio' : 'text' }, // 录音相关 // 录音开始 voiceTouchStart(e) { // 初始化 this.isRecording = true this.RecordingStartY = e.changedTouches[0].screenY this.unRecord = false // 开始录音 this.RECORD.start({ format: "mp3" }) }, // 录音结束 voiceTouchEnd() { this.isRecording = false // 停止录音 this.RECORD.stop() }, // 录音被打断 voiceTouchCancel() { this.isRecording = false this.unRecord = true // 停止录音 this.RECORD.stop() }, voiceTouchMove(e) { let Y = Math.abs(e.changedTouches[0].screenY - this.RecordingStartY) this.unRecord = (Y >= 50) }, // 打开聊天信息设置 openChatSet() { uni.navigateTo({ url: '../chat-set/chat-set?params=' + JSON.stringify({ id: this.detail.id, chat_type: this.detail.chat_type }), }); }, focus(e){ this.mode = 'text'; this.isfocus = true; this.KeyboardHeight = e.detail.height; }, blur(){ this.KeyboardHeight = 0; this.isfocus = false; } } } </script> <style> </style>
感谢大家观看，我们下次见
