951 lines
26 KiB
Vue
951 lines
26 KiB
Vue
<template>
|
||
<view class="content">
|
||
<!-- <view class="title">
|
||
<image src="../../static/huijiantou.png" @click="back"></image>
|
||
{{currentItem.senderName}}
|
||
</view> -->
|
||
<!-- 聊天渲染列表 -->
|
||
<!-- scroll-y scroll-into-view="placeholder" scroll-top="500" scroll-with-animation -->
|
||
<u-navbar :is-back="false" :background="background" class="u-navbar">
|
||
<image src="@/static/fanhui.png" mode="" @tap="goprevious"></image>
|
||
<view class="navbartitle" @tap="goprevious">
|
||
{{title}}
|
||
</view>
|
||
</u-navbar>
|
||
<scroll-view scroll-y="true" :scroll-top='scrollTop' id="demo"
|
||
:style="'height:calc(100vh - '+ inputboxtop +'px)'" scroll-with-animation="true">
|
||
<view style="height: 85vh; padding-top: 200rpx;" @tap='touchend'>
|
||
<view class="snedItem" v-for="(item, index) in newsList" :key="index">
|
||
<view class="ifSend" v-if="item.senderName == userName">
|
||
<view class="sendBox" v-if="item.messageType==1">{{item.content}}</view>
|
||
<image v-if="item.messageType==2" :src="baseurl+item.content" class="snedItemimage"
|
||
@tap='lookimage(baseurl+item.content)' />
|
||
<image class="head" src="@/static/headsculpture.png"></image>
|
||
</view>
|
||
<view class="doctorSend" v-else>
|
||
<image class="head" src="@/static/docHead.png"></image>
|
||
<view class="">
|
||
<!-- <text>{{item.senderName}}</text> -->
|
||
<view class="sendBox" v-if="item.messageType==1">{{item.content}}</view>
|
||
<image v-if="item.messageType==2" :src="baseurl+item.content" class="snedItemimage"
|
||
@tap='lookimage(baseurl+item.content)' />
|
||
</view>
|
||
</view>
|
||
<video v-if="item.video" :src="item.video"></video>
|
||
</view>
|
||
<!-- <view class="placeholder" id="placeholder" v-if="showFunBtn"></view> -->
|
||
</view>
|
||
</scroll-view>
|
||
<!-- 底部输入 -->
|
||
<view class="input-box" :class="{ 'input-box-mpInputMargin': mpInputMargin }"
|
||
v-if='Number(currentItem.status)!=2' :style="{'padding-bottom':bottomVal+'px'}">
|
||
<view class="input-box-flex">
|
||
<!--弹出常用 -->
|
||
<!-- <image class="icon_img" :src="require('@/static/ico/often.png')" @tap="oftenx"></image> -->
|
||
<!-- 输入框 -->
|
||
<view class="input-box-flex-grow"> <input type="text" class="contenxxt" id="input"
|
||
v-model="formData.content" :hold-keyboard="true" :confirm-type="'send'" :confirm-hold="true"
|
||
placeholder-style="color:#DDDDDD;" :cursor-spacing="10" @confirm='sendconfirm'
|
||
:adjust-position="false" @keyboardheightchange="keyboardheightchange" @focus='focus'
|
||
@blur='blur' /> </view>
|
||
<!-- 选择表情包 -->
|
||
<!-- <image class=" icon_btn_add" :src="require('@/static/ico/emoji.png')" @tap="exprec"></image> -->
|
||
<!-- 发送消息按钮 -->
|
||
<image class=" icon_btn_add" :src="require('@/static/ico/send.png')" @tap="sendout"
|
||
v-if="formData.content!==''" mode=""></image>
|
||
<!-- <text class="send-out iconfont icon-fasong" ></text> -->
|
||
<!-- 弹出拍照-->
|
||
<!-- @tap="switchFun" -->
|
||
<uni-icons type="plus" size="33" class="icon_btn_add" v-else @tap='goshowFunBtn'></uni-icons>
|
||
<!-- <image :src="require('@/static/ico/more.png')" v-else @tap='goshowFunBtn'></image> -->
|
||
</view>
|
||
<!-- 弹出拍照-->
|
||
<view class="fun-box" :class="{'show-fun-box':showFunBtn}">
|
||
<u-grid :col="4" hover-class="contentType2-hover-class" :border="false">
|
||
<u-grid-item v-for="(item, index) in funList" @tap.stop="tapGrid(index)" :index="index" :key="index"
|
||
bg-color="#f3f3f3">
|
||
<u-icon :name="item.icon" :size="52"></u-icon>
|
||
<uni-icons style="opacity: 0.7;width: 52rpx;height: 52rpx; " v-if="index==2"
|
||
:type="index==2?'folder-add-filled':''" size="26"></uni-icons>
|
||
<view class="grid-text">{{ item.title }}</view>
|
||
</u-grid-item>
|
||
</u-grid>
|
||
</view>
|
||
<!-- 弹出表情 -->
|
||
<view class="fun-box2" :class="{'show-fun-box':showExpre}">
|
||
<view class="emoji-box emoji-move-in">
|
||
<scroll-view scroll-y="true" style="height:200px">
|
||
<view class="list">
|
||
<text v-for="(item,index) in emojisList" :key="index" @tap.stop="expre(item)"
|
||
class="touch-active">{{item}}</text>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<u-toast ref="uToast" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
sendMessage,
|
||
getChatRecord,
|
||
markRead
|
||
} from '@/api/pagesC/seekadvicefrom/seekadvicefrom.js';
|
||
import baseurl from '@/api/baseurl.js'
|
||
import {
|
||
socketurl
|
||
} from '@/api/socketurl.js'
|
||
import {
|
||
mapMutations
|
||
} from "vuex";
|
||
export default {
|
||
data() {
|
||
return {
|
||
background: {
|
||
backgroundColor: '#26A888',
|
||
},
|
||
baseurl: '',
|
||
title: '',
|
||
SOCKETURL: '',
|
||
socketOpen: false,
|
||
sendInfo: {},
|
||
currentItem: '',
|
||
userName: '',
|
||
mpInputMargin: true, //适配微信小程序 底部输入框高度被顶起的问题
|
||
//发送的聊天消息
|
||
formData: {
|
||
content: "",
|
||
limit: 15,
|
||
index: 1,
|
||
},
|
||
timeoutObj: null,
|
||
newsList: [],
|
||
showFunBtn: false, //是否展示功能型按钮
|
||
showOften: false, //是否展示常用
|
||
showExpre: false, //是否显示表情
|
||
//九宫格
|
||
funList: [{
|
||
icon: "photo-fill",
|
||
title: "照片",
|
||
uploadType: ["album"]
|
||
},
|
||
{
|
||
icon: "camera-fill",
|
||
title: "拍摄",
|
||
uploadType: ["camera"]
|
||
},
|
||
{
|
||
icon: "",
|
||
title: "文件",
|
||
},
|
||
],
|
||
emojisList: [
|
||
'😄', '😃', '😀', '😊', '😉', '😍', '😘', '😚', '😗',
|
||
'😙', '😜', '😝', '😛', '😳', '😁', '😔', '😌', '😒',
|
||
'😞', '😣', '😢', '😂', '😭', '😪', '😥', '😰', '😅',
|
||
'😓', '😩', '😫', '😨', '😱', '😠', '😡', '😤', '😖',
|
||
'👦', '👧', '👨', '👩', '👴', '👵', '👱', '👼', '👸',
|
||
'👀', '👍', '👎', '👌', '👊', '✊', '✌', '👉', '👏',
|
||
'💗', '💛', '💙', '💜', '💚', '❤', '💔', '💓', '💕',
|
||
'🌟', '💢', '🏃', '🙅', '💁', '🙋', '💼', '💬', '💭',
|
||
], //表情包
|
||
//常用语
|
||
oftenTermList: [{
|
||
id: 0,
|
||
title: "你好，很高兴",
|
||
},
|
||
{
|
||
id: 0,
|
||
title: "在吗",
|
||
},
|
||
],
|
||
scrollTop: 999999,
|
||
inputboxtop: undefined,
|
||
bottomVal: 0,
|
||
automaticreplylist: [],
|
||
};
|
||
},
|
||
onReady() { //更改导航栏文字
|
||
// uni.setNavigationBarTitle({
|
||
// title: this.title,
|
||
// });
|
||
},
|
||
onLoad(options) {
|
||
// if (uni.getStorageSync('patientId') && !this.$store.state.socketOpen) {
|
||
// this.scoket();
|
||
// }
|
||
this.baseurl = baseurl;
|
||
// uni.closeSocket()
|
||
this.currentItem = JSON.parse(options.item)
|
||
// this.scoket()
|
||
this.title = this.currentItem.doctorName //导航栏标题
|
||
this.userName = this.currentItem.patientName
|
||
if (uni.getStorageSync('patientId')) {
|
||
this.messagescoket();
|
||
}
|
||
this.getPageHistory()
|
||
},
|
||
mounted() {
|
||
// wx.pageScrollTo({
|
||
// scrollTop: 9999999
|
||
// })
|
||
},
|
||
methods: {
|
||
messagescoket() {
|
||
const that = this
|
||
this.SOCKETURL = socketurl + this.currentItem.patientId
|
||
this.socketOpen = false
|
||
try {
|
||
uni.connectSocket({
|
||
url: that.SOCKETURL
|
||
})
|
||
uni.onSocketOpen(res => {
|
||
console.log('webScoket连接已打开', res);
|
||
that.socketOpen = true
|
||
that.reset()
|
||
})
|
||
uni.onSocketError(err => {
|
||
console.log('webScoket连接打开失败', err);
|
||
if (err && err.code != 1000) {
|
||
setTimeout(() => {
|
||
that.socketOpen = true
|
||
uni.connectSocket({
|
||
url: that.SOCKETURL
|
||
})
|
||
}, 3000)
|
||
}
|
||
})
|
||
uni.onSocketClose(err => {
|
||
console.log('webScoket连接关闭', err);
|
||
if (err && err.code !== 1000) {
|
||
setTimeout(() => {
|
||
that.socketOpen = true
|
||
uni.connectSocket({
|
||
url: that.SOCKETURL
|
||
})
|
||
}, 3000)
|
||
}
|
||
})
|
||
uni.onSocketMessage(res => {
|
||
console.log("webScoket监听收到的信息", res);
|
||
that.getPageHistory()
|
||
})
|
||
} catch (e) {
|
||
console.log(e);
|
||
}
|
||
},
|
||
// 心跳响应
|
||
reset() {
|
||
let that = this
|
||
clearInterval(that.timeoutObj);
|
||
that.timeoutObj = setInterval(() => {
|
||
uni.sendSocketMessage({
|
||
data: 'ping',
|
||
success(res) {
|
||
console.log('正在发送心跳');
|
||
},
|
||
fail(err) {
|
||
console.log('心跳发送失败，重新连接...');
|
||
that.socketOpen = true
|
||
uni.connectSocket({
|
||
url: that.SOCKETURL
|
||
})
|
||
}
|
||
})
|
||
}, 3000)
|
||
},
|
||
lookimage(item) {
|
||
uni.previewImage({
|
||
urls: [item], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
|
||
current: 1, // 当前显示图片的http链接，默认是第一个
|
||
success: function(res) {},
|
||
fail: function(res) {},
|
||
complete: function(res) {},
|
||
})
|
||
},
|
||
blur() {
|
||
uni.onKeyboardHeightChange(res => {
|
||
this.bottomVal = res.height
|
||
setTimeout(() => {
|
||
let query = uni.createSelectorQuery().in(this);
|
||
//需要给黄色区域设置一个id标识，在这里是demo
|
||
query.select('.input-box').boundingClientRect(data => {
|
||
this.inputboxtop = data.height //赋值，待会要用
|
||
setTimeout(e => {
|
||
this.scrollTop = this.scrollTop + 1;
|
||
}, 500)
|
||
}).exec();
|
||
}, 500)
|
||
})
|
||
},
|
||
focus() {
|
||
uni.onKeyboardHeightChange(res => {
|
||
this.bottomVal = res.height
|
||
setTimeout(() => {
|
||
let query = uni.createSelectorQuery().in(this);
|
||
//需要给黄色区域设置一个id标识，在这里是demo
|
||
query.select('.input-box').boundingClientRect(data => {
|
||
this.inputboxtop = data.height //赋值，待会要用
|
||
setTimeout(e => {
|
||
this.scrollTop = this.scrollTop + 1;
|
||
}, 500)
|
||
}).exec();
|
||
}, 500)
|
||
})
|
||
},
|
||
keyboardheightchange(event) {
|
||
const {
|
||
height,
|
||
duration
|
||
} = event.detail
|
||
this.bottomVal = height
|
||
setTimeout(() => {
|
||
let query = uni.createSelectorQuery().in(this);
|
||
//需要给黄色区域设置一个id标识，在这里是demo
|
||
query.select('.input-box').boundingClientRect(data => {
|
||
this.inputboxtop = data.height //赋值，待会要用
|
||
setTimeout(e => {
|
||
this.scrollTop = this.scrollTop + 1;
|
||
}, 500)
|
||
}).exec();
|
||
}, 500)
|
||
},
|
||
getPageHistory() {
|
||
let obj = {
|
||
consultationId: this.currentItem.id,
|
||
senderId: this.currentItem.patientId,
|
||
recipientId: this.currentItem.doctorId,
|
||
}
|
||
getChatRecord(obj).then(res => {
|
||
res.data.forEach(e => {
|
||
if (Number(e.readStatus) == 0) {
|
||
this.Read()
|
||
}
|
||
})
|
||
this.newsList = res.data
|
||
setTimeout(() => {
|
||
let query = uni.createSelectorQuery().in(this);
|
||
//需要给黄色区域设置一个id标识，在这里是demo
|
||
query.select('.input-box').boundingClientRect(data => {
|
||
this.inputboxtop = data.height //赋值，待会要用
|
||
setTimeout(e => {
|
||
this.scrollTop = this.scrollTop + 1;
|
||
}, 300)
|
||
}).exec();
|
||
}, 100)
|
||
})
|
||
},
|
||
Read() {
|
||
let markReadData = {
|
||
readStatus: '1',
|
||
consultationId: this.currentItem.id,
|
||
recipientId: this.currentItem.patientId,
|
||
}
|
||
markRead(markReadData)
|
||
},
|
||
//键盘发送
|
||
sendconfirm(value) {
|
||
this.sendout();
|
||
},
|
||
touchend() {
|
||
this.showFunBtn = false; //隐藏功能
|
||
this.showExpre = false; //隐藏表情
|
||
this.showOften = false; //隐藏常用
|
||
uni.hideKeyboard();
|
||
setTimeout(() => {
|
||
let query = uni.createSelectorQuery().in(this);
|
||
//需要给黄色区域设置一个id标识，在这里是demo
|
||
query.select('.input-box').boundingClientRect(data => {
|
||
this.inputboxtop = data.height //赋值，待会要用
|
||
setTimeout(e => {
|
||
this.scrollTop = this.scrollTop + 1;
|
||
}, 300)
|
||
}).exec();
|
||
}, 200)
|
||
},
|
||
goshowFunBtn() {
|
||
this.showFunBtn = !this.showFunBtn; //隐藏功能
|
||
uni.hideKeyboard();
|
||
setTimeout(() => {
|
||
let query = uni.createSelectorQuery().in(this);
|
||
//需要给黄色区域设置一个id标识，在这里是demo
|
||
query.select('.input-box').boundingClientRect(data => {
|
||
this.inputboxtop = data.height //赋值，待会要用
|
||
setTimeout(() => {
|
||
this.scrollTop = this.scrollTop + 1;
|
||
}, 200)
|
||
}).exec();
|
||
}, 300)
|
||
},
|
||
...mapMutations(['scoket']),
|
||
//自动回复
|
||
automaticreply() {
|
||
const that = this
|
||
let currentDate = new Date();
|
||
let year = currentDate.getFullYear();
|
||
let month = currentDate.getMonth() + 1;
|
||
let day = currentDate.getDate();
|
||
month >= 1 && month <= 9 ? (month = "0" + month) : "";
|
||
day >= 0 && day <= 9 ? (day = "0" + day) : "";
|
||
let time = `${year}-${month}-${day}`
|
||
if (uni.getStorageSync('automaticreplylist') && uni.getStorageSync('automaticreplylist').length > 0) {
|
||
if (uni.getStorageSync('automaticreplylist')[0].sendtime != time) {
|
||
uni.removeStorageSync('automaticreplylist');
|
||
} else {
|
||
this.automaticreplylist = uni.getStorageSync('automaticreplylist')
|
||
if (this.automaticreplylist.some(e => e.doctorId == this.currentItem.doctorId)) {
|
||
return
|
||
}
|
||
}
|
||
}
|
||
let obj = {
|
||
consultationId: that.currentItem.id,
|
||
recipientId: that.currentItem.patientId,
|
||
recipientName: that.currentItem.patientName,
|
||
senderId: that.currentItem.doctorId,
|
||
senderName: that.currentItem.doctorName,
|
||
messageType: 1,
|
||
sendTime: new Date(),
|
||
content: '您好，正在努力联系您的家庭医生，请稍等...',
|
||
sourcePlatform: 'APPLET',
|
||
autoResponder: 'AUTORESPONDER',
|
||
sendWho: '1'
|
||
}
|
||
sendMessage(obj).then(res => {
|
||
if (res.code == 200) {
|
||
that.newsList.push({
|
||
senderName: that.currentItem.doctorName,
|
||
content: '您好，正在努力联系您的家庭医生，请稍等...',
|
||
messageType: 1,
|
||
})
|
||
setTimeout(() => {
|
||
that.scrollTop = that.scrollTop + 1;
|
||
}, 100)
|
||
let automaticreplyitem = {
|
||
sendtime: time,
|
||
doctorId: that.currentItem.doctorId
|
||
}
|
||
that.automaticreplylist.unshift(automaticreplyitem)
|
||
uni.setStorageSync('automaticreplylist', that.automaticreplylist);
|
||
}
|
||
})
|
||
},
|
||
//发送图片
|
||
chooseImage(sourceType) {
|
||
var that = this
|
||
if (this.$store.state.socketOpen == false) {
|
||
// this.$refs.uToast.show({
|
||
// title: '聊天连接异常，正在重连',
|
||
// type: 'warning',
|
||
// })
|
||
this.scoket()
|
||
this.messagescoket()
|
||
// return
|
||
}
|
||
uni.chooseImage({
|
||
sourceType,
|
||
sizeType: ["compressed"],
|
||
success: (res) => {
|
||
that.showFunBtn = false;
|
||
res.tempFilePaths.forEach(e => {
|
||
uni.uploadFile({
|
||
url: baseurl +
|
||
'/nurseApplet/consultationInfo/uploadConsultationFile',
|
||
filePath: e,
|
||
name: 'file',
|
||
timeout: 5000,
|
||
success(resp) {
|
||
var fileurls = JSON.parse(resp.data)
|
||
let obj = {
|
||
consultationId: that.currentItem.id,
|
||
senderId: that.currentItem.patientId,
|
||
senderName: that.currentItem.patientName,
|
||
recipientId: that.currentItem.doctorId,
|
||
recipientName: that.currentItem.doctorName,
|
||
messageType: 2,
|
||
sendTime: new Date(),
|
||
content: fileurls.fileUrl,
|
||
sourcePlatform: 'APPLET',
|
||
sendWho: '1'
|
||
}
|
||
sendMessage(obj).then(respp => {
|
||
if (respp.code == 200) {
|
||
that.newsList.push({
|
||
content: fileurls.fileUrl,
|
||
messageType: 2,
|
||
senderName: that.currentItem
|
||
.patientName,
|
||
})
|
||
setTimeout(() => {
|
||
let query = uni
|
||
.createSelectorQuery().in(
|
||
that);
|
||
//需要给黄色区域设置一个id标识，在这里是demo
|
||
query.select('.input-box')
|
||
.boundingClientRect(
|
||
data => {
|
||
that.inputboxtop =
|
||
data
|
||
.height //赋值，待会要用
|
||
setTimeout(() => {
|
||
that.scrollTop =
|
||
that
|
||
.scrollTop +
|
||
1;
|
||
}, 200)
|
||
}).exec();
|
||
}, 300)
|
||
setTimeout(() => {
|
||
this.automaticreply()
|
||
}, 1000)
|
||
}
|
||
})
|
||
}
|
||
})
|
||
})
|
||
},
|
||
});
|
||
},
|
||
sendout() {
|
||
const that = this
|
||
var content = JSON.parse(JSON.stringify(that.formData.content))
|
||
if (this.$store.state.socketOpen == false) {
|
||
// this.$refs.uToast.show({
|
||
// title: '聊天连接异常，正在重连',
|
||
// type: 'warning',
|
||
// })
|
||
this.scoket();
|
||
this.messagescoket()
|
||
// return
|
||
}
|
||
let obj = {
|
||
consultationId: that.currentItem.id,
|
||
senderId: that.currentItem.patientId,
|
||
senderName: that.currentItem.patientName,
|
||
recipientId: that.currentItem.doctorId,
|
||
recipientName: that.currentItem.doctorName,
|
||
messageType: 1,
|
||
sendTime: new Date(),
|
||
content: that.formData.content,
|
||
sourcePlatform: 'APPLET',
|
||
sendWho: '1'
|
||
}
|
||
that.formData.content = '' //清空输入框的文本
|
||
sendMessage(obj).then(res => {
|
||
if (res.code == 200) {
|
||
that.newsList.push({
|
||
senderName: that.currentItem.patientName,
|
||
content: content,
|
||
messageType: 1,
|
||
})
|
||
setTimeout(() => {
|
||
that.scrollTop = that.scrollTop + 1;
|
||
}, 100)
|
||
setTimeout(() => {
|
||
this.automaticreply()
|
||
}, 1000)
|
||
}
|
||
})
|
||
// try {
|
||
// const that = this
|
||
// let message = this.formData.content
|
||
// uni.sendSocketMessage({
|
||
// data: message,
|
||
// success(res) {
|
||
// let obj = {
|
||
// consultationId: that.currentItem.id,
|
||
// senderId: that.currentItem.patientId,
|
||
// senderName: that.currentItem.patientName,
|
||
// recipientId: that.currentItem.doctorId,
|
||
// recipientName: that.currentItem.doctorName,
|
||
// messageType: 1,
|
||
// sendTime: new Date(),
|
||
// // messageType: 消息类型(0： 其他 1： 文字， 2： 图片 3： 表情 4： 视频 5： 文件 6： 链接)
|
||
// content: message,
|
||
// sendWho: '1'
|
||
// }
|
||
// sendMessage(obj).then(res => {
|
||
// setTimeout(() => {
|
||
// that.scrollTop = that.scrollTop + 1;
|
||
// }, 100)
|
||
// })
|
||
// }
|
||
// })
|
||
// } catch (e) {
|
||
// console.log(e, '断线了')
|
||
// // uni.closeSocket();
|
||
// }
|
||
},
|
||
//输入常用消息
|
||
oftenc(e) {
|
||
this.formData.content = e.title;
|
||
},
|
||
goprevious() {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
})
|
||
},
|
||
//选择表情
|
||
expre(e) {
|
||
this.formData.content = !this.formData.content ? e : this.formData.content + e;
|
||
},
|
||
//切换功能性按钮
|
||
// switchFun() {
|
||
// this.showOften = false; //隐藏常用
|
||
// this.showExpre = false; //隐藏表情
|
||
// this.showFunBtn = !this.showFunBtn; //显示功能
|
||
// uni.hideKeyboard();
|
||
// setTimeout(() => {
|
||
// let query = uni.createSelectorQuery().in(this);
|
||
// //需要给黄色区域设置一个id标识，在这里是demo
|
||
// query.select('.input-box').boundingClientRect(data => {
|
||
// this.inputboxtop = data.height //赋值，待会要用
|
||
// }).exec();
|
||
// this.scrollTop = this.scrollTop + 1;
|
||
// }, 200)
|
||
// },
|
||
//是否展示常用
|
||
// oftenx() {
|
||
// this.showFunBtn = false; //隐藏功能
|
||
// this.showExpre = false; //隐藏表情
|
||
// this.showOften = !this.showOften; //显示常用
|
||
// uni.hideKeyboard();
|
||
// setTimeout(() => {
|
||
// let query = uni.createSelectorQuery().in(this);
|
||
// //需要给黄色区域设置一个id标识，在这里是demo
|
||
// query.select('.input-box').boundingClientRect(data => {
|
||
// this.inputboxtop = data.height //赋值，待会要用
|
||
// }).exec();
|
||
// this.scrollTop = this.scrollTop + 1;
|
||
// }, 100)
|
||
// },
|
||
//是否展示表情
|
||
// exprec() {
|
||
// this.showFunBtn = false; //隐藏功能
|
||
// this.showOften = false; //隐藏常用
|
||
// this.showExpre = !this.showExpre; //显示表情
|
||
// uni.hideKeyboard();
|
||
// setTimeout(() => {
|
||
// let query = uni.createSelectorQuery().in(this);
|
||
// //需要给黄色区域设置一个id标识，在这里是demo
|
||
// query.select('.input-box').boundingClientRect(data => {
|
||
// this.inputboxtop = data.height //赋值，待会要用
|
||
// }).exec();
|
||
// this.scrollTop = this.scrollTop + 1;
|
||
// }, 100)
|
||
// },
|
||
//点击宫格时触发
|
||
tapGrid(index) {
|
||
if (index == 0) {
|
||
this.chooseImage(["album"]);
|
||
} else if (index == 1) {
|
||
this.chooseImage(["camera"]);
|
||
} else if (index == 2) {
|
||
uni.chooseMessageFile({
|
||
count: 6, //默认100
|
||
extension: ['.zip', '.doc'],
|
||
success: function(res) {
|
||
console.log(res)
|
||
// console.log(JSON.stringify(res.tempFilePaths));
|
||
}
|
||
});
|
||
}
|
||
},
|
||
//用户触摸屏幕的时候隐藏键盘
|
||
touchstart() {
|
||
uni.hideKeyboard();
|
||
setTimeout(() => {
|
||
let query = uni.createSelectorQuery().in(this);
|
||
//需要给黄色区域设置一个id标识，在这里是demo
|
||
query.select('.input-box').boundingClientRect(data => {
|
||
this.inputboxtop = data.height //赋值，待会要用
|
||
setTimeout(e => {
|
||
this.scrollTop = this.scrollTop + 1;
|
||
}, 300)
|
||
}).exec();
|
||
}, 200)
|
||
},
|
||
back() {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
})
|
||
}
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
page {
|
||
background-color: #f3f3f3;
|
||
}
|
||
|
||
#demo {
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.content {
|
||
::v-deep .u-navbar-placeholder {
|
||
background-color: #F7F5F5;
|
||
z-index: 999;
|
||
}
|
||
|
||
.u-navbar {
|
||
display: inline-block;
|
||
position: fixed;
|
||
top: 0;
|
||
z-index: 99999;
|
||
|
||
image {
|
||
margin: 0 4% 0 4%;
|
||
width: 20rpx;
|
||
height: 30rpx;
|
||
}
|
||
|
||
.navbartitle {
|
||
width: 31%;
|
||
font-size: 34rpx;
|
||
font-weight: 500;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
|
||
.input-box {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
box-sizing: content-box;
|
||
z-index: 999;
|
||
background-color: #f3f3f3;
|
||
/* #ifdef APP-PLUS */
|
||
margin-bottom: 0rpx;
|
||
margin-bottom: constant(safe-area-inset-bottom);
|
||
margin-bottom: env(safe-area-inset-bottom);
|
||
/* #endif */
|
||
/* #ifdef MP-WEIXIN */
|
||
padding-bottom: 0rpx;
|
||
padding-bottom: constant(safe-area-inset-bottom);
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
/* #endif */
|
||
|
||
.input-box-flex {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
flex-wrap: nowrap;
|
||
flex-direction: row;
|
||
padding: 20rpx;
|
||
box-sizing: border-box;
|
||
|
||
image {
|
||
width: 63rpx;
|
||
height: 63rpx;
|
||
}
|
||
|
||
.icon_img {
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.icon_btn_add {
|
||
margin-left: 20rpx;
|
||
}
|
||
|
||
// .send-out {
|
||
// font-size: 65rpx;
|
||
// margin-left: 15rpx;
|
||
// color: #16c694;
|
||
// width: 100rpx;
|
||
// height: 100rpx;
|
||
// }
|
||
|
||
.input-box-flex-grow {
|
||
flex: 1;
|
||
}
|
||
|
||
.contenxxt {
|
||
box-sizing: border-box;
|
||
background-color: #fff;
|
||
height: 80rpx;
|
||
padding: 0 20rpx;
|
||
border-radius: 12rpx;
|
||
font-size: 28rpx;
|
||
caret-color: $uni-color-success;
|
||
}
|
||
}
|
||
|
||
.fun-box {
|
||
opacity: 0;
|
||
height: 0;
|
||
transition: all 0.3s ease;
|
||
transform: translateY(100%);
|
||
|
||
.grid-text {
|
||
padding-top: 10rpx;
|
||
color: $uni-text-color-grey;
|
||
}
|
||
}
|
||
|
||
.fun-box1 {
|
||
opacity: 0;
|
||
transition: all 0.1s ease-in-out;
|
||
height: 0;
|
||
|
||
.often-super {
|
||
padding: 30rpx;
|
||
height: 240rpx;
|
||
background-color: #f3f3f3;
|
||
width: auto;
|
||
|
||
.flex-row {
|
||
padding: 10rpx 0;
|
||
border-bottom: 1rpx #e8e8e8 solid;
|
||
|
||
.often-text-size {
|
||
color: #5a5a5a;
|
||
font-size: 26rpx;
|
||
margin-top: 6rpx;
|
||
margin-bottom: 6rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.fun-box2 {
|
||
opacity: 0;
|
||
transition: all 0.1s ease-in-out;
|
||
height: 0;
|
||
|
||
.emoji-box {
|
||
position: relative;
|
||
height: 200rpx;
|
||
padding: 5rpx 0;
|
||
box-sizing: border-box;
|
||
margin-bottom: -200rpx;
|
||
background-color: #f3f3f3;
|
||
|
||
.list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
padding: 0 0 0 14rpx;
|
||
padding-bottom: constant(safe-area-inset-bottom);
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
|
||
.touch-active {
|
||
width: 65rpx;
|
||
height: 60rpx;
|
||
text-align: center;
|
||
border-radius: 3rpx;
|
||
line-height: 60rpx;
|
||
font-size: 38rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.emoji-move-in {
|
||
-webkit-animation: emoji-move-in 0.3s forwards;
|
||
animation: emoji-move-in 0.3s forwards;
|
||
}
|
||
}
|
||
|
||
.show-fun-box {
|
||
opacity: 1;
|
||
height: 300rpx;
|
||
transition: all 0.3s ease;
|
||
transform: translateY(0%) !important;
|
||
}
|
||
}
|
||
|
||
.input-box-mpInputMargin {
|
||
/* #ifdef MP-WEIXIN */
|
||
padding-bottom: 0rpx;
|
||
/* #endif */
|
||
}
|
||
}
|
||
|
||
.snedItem {
|
||
padding: 0rpx 30rpx 40rpx 30rpx;
|
||
|
||
.snedItemimage {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
border-radius: 3rpx;
|
||
}
|
||
}
|
||
|
||
.ifSend {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
|
||
.head {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
margin-left: 20rpx;
|
||
}
|
||
|
||
.sendBox {
|
||
background-color: #4AC4AB;
|
||
padding: 18rpx 20rpx;
|
||
border-radius: 0 0 10rpx 10rpx;
|
||
font-size: 34rpx;
|
||
flex: none;
|
||
max-width: 550rpx;
|
||
word-break: break-all;
|
||
}
|
||
}
|
||
|
||
.doctorSend {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
|
||
.head {
|
||
width: 90rpx;
|
||
height: 90rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
text {
|
||
color: #b2b2b2;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.sendBox {
|
||
background-color: #d7d7d77d;
|
||
padding: 18rpx 20rpx;
|
||
border-radius: 0 0 10rpx 10rpx;
|
||
font-size: 34rpx;
|
||
flex: none;
|
||
max-width: 550rpx;
|
||
word-break: break-all;
|
||
}
|
||
}
|
||
|
||
.placeholder {
|
||
height: 200rpx;
|
||
transition: all 0.3s ease;
|
||
transform: translateY(0%) !important;
|
||
}
|
||
|
||
.title {
|
||
font-size: 20px;
|
||
text-align: center;
|
||
height: 80rpx;
|
||
border-bottom: 1rpx solid #f6f6f6;
|
||
padding-top: 100rpx;
|
||
position: fixed;
|
||
width: 100%;
|
||
background: white;
|
||
z-index: 10;
|
||
|
||
image {
|
||
width: 20rpx;
|
||
height: 30rpx;
|
||
transform: rotate(180deg);
|
||
position: absolute;
|
||
left: 40rpx;
|
||
bottom: 38rpx;
|
||
}
|
||
}
|
||
</style> |