TmOct5/ZhHealth
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

scss

Browse Source
This commit is contained in:
Jason.Chen
2022-02-08 09:42:48 +08:00
parent ab958d0777
commit 85f9a091c9
8 changed files with 260 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
pages/im/components/sentPopups.nvue
View File

@@ -1,28 +1,28 @@
<template> <template>
<view class="sent--popups u-border-top" v-if="show"> <view class="sent--popups u-border-top" v-if="show">
<view class="sent--popups--item" @click="onPopupsItem('picture')"> <view class="item" @click="onPopupsItem('picture')">
<image class="sent--popups--icon" src="@/static/icon/popups-icon-00.png" mode="widthFix"></image> <image class="icon" src="@/static/icon/popups-icon-00.png" mode="widthFix"></image>
<text class="sent--popups--text">相册</text> <text class="text">相册</text>
</view> </view>
<view class="sent--popups--item" @click="onPopupsItem('camera')"> <view class="item" @click="onPopupsItem('camera')">
<image class="sent--popups--icon" src="@/static/icon/popups-icon-01.png" mode="widthFix"></image> <image class="icon" src="@/static/icon/popups-icon-01.png" mode="widthFix"></image>
<text class="sent--popups--text">拍摄</text> <text class="text">拍摄</text>
</view> </view>
<view class="sent--popups--item" @click="onPopupsItem('video')"> <view class="item" @click="onPopupsItem('video')">
<image class="sent--popups--icon" src="@/static/icon/popups-icon-02.png" mode="widthFix"></image> <image class="icon" src="@/static/icon/popups-icon-02.png" mode="widthFix"></image>
<text class="sent--popups--text">视频通话</text> <text class="text">视频通话</text>
</view> </view>
<view class="sent--popups--item" @click="onPopupsItem('location')"> <view class="item" @click="onPopupsItem('location')">
<image class="sent--popups--icon" src="@/static/icon/popups-icon-03.png" mode="widthFix"></image> <image class="icon" src="@/static/icon/popups-icon-03.png" mode="widthFix"></image>
<text class="sent--popups--text">位置</text> <text class="text">位置</text>
</view> </view>
<view class="sent--popups--item" @click="onPopupsItem('redpacket')"> <view class="item" @click="onPopupsItem('redpacket')">
<image class="sent--popups--icon" src="@/static/icon/popups-icon-04.png" mode="widthFix"></image> <image class="icon" src="@/static/icon/popups-icon-04.png" mode="widthFix"></image>
<text class="sent--popups--text">红包</text> <text class="text">红包</text>
</view> </view>
<view class="sent--popups--item" @click="onPopupsItem('file')"> <view class="item" @click="onPopupsItem('file')">
<image class="sent--popups--icon" src="@/static/icon/popups-icon-05.png" mode="widthFix"></image> <image class="icon" src="@/static/icon/popups-icon-05.png" mode="widthFix"></image>
<text class="sent--popups--text">文件</text> <text class="text">文件</text>
</view> </view>
<u-action-sheet :actions="callActions" cancelText="取消" @close="callShow = false" @select="singleCall" <u-action-sheet :actions="callActions" cancelText="取消" @close="callShow = false" @select="singleCall"
@@ -143,19 +143,19 @@
flex-wrap: wrap; flex-wrap: wrap;
flex-direction: row; flex-direction: row;
&--item { .item {
width: 150rpx; width: 150rpx;
margin: 15rpx; margin: 15rpx;
} }
&--text { .text {
text-align: center; text-align: center;
font-size: 26rpx; font-size: 26rpx;
color: #555; color: #555;
padding-top: 15rpx; padding-top: 15rpx;
} }
&--icon { .icon {
width: 110rpx; width: 110rpx;
height: 110rpx; height: 110rpx;
margin: 0 20rpx; margin: 0 20rpx;

57
pages/im/components/sentText.nvue
View File

@@ -1,5 +1,5 @@
<template> <template>
<view class="text"> <view class="sent--text">
<input class="input" type="text" v-model="inputTxt" confirm-type="send" @confirm="sent" cursor-spacing="10" /> <input class="input" type="text" v-model="inputTxt" confirm-type="send" @confirm="sent" cursor-spacing="10" />
<!-- <button class="button" size="mini" :disabled="disabled" @click="sent">发送</button> --> <!-- <button class="button" size="mini" :disabled="disabled" @click="sent">发送</button> -->
</view> </view>
@@ -56,35 +56,34 @@
} }
</script> </script>
<style scoped> <style scoped lang="less">
.text { .sent--text {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
}
.input {
.input { background: #F3F6FB;
background: #F3F6FB; height: 70rpx;
height: 70rpx; width: 460rpx;
width: 460rpx; border-radius: 10rpx;
border-radius: 10rpx; margin-right: 15rpx;
margin-right: 15rpx; padding: 0 20rpx;
padding: 0 20rpx; }
}
.button {
.button { border: none;
border: none; background: #34CE98;
background: #34CE98; color: white;
color: white; width: 120rpx;
width: 120rpx; line-height: 70rpx;
line-height: 70rpx; text-align: center;
text-align: center; border-radius: 10rpx;
border-radius: 10rpx; font-size: 30rpx;
font-size: 30rpx; font-weight: bold;
font-weight: bold; }
} // .button[disabled] {
// background-color: #555555;
.button[disabled] { // }
background-color: #555555;
} }
</style> </style>

95
pages/im/components/sentVoice.nvue
View File

@@ -1,12 +1,12 @@
<template> <template>
<view> <view class="send--voice">
<view class="voice" hover-class="chat-hover" @touchstart="startRecord" @touchend="stopRecord"> <view class="voice" hover-class="chat-hover" @touchstart="startRecord" @touchend="stopRecord">
<text class="button">按住说话</text> <text class="button">按住说话</text>
</view> </view>
<!-- 录音中提示 --> <!-- 录音中提示 -->
<view class="audio-transcribe" v-if="showRecordTip"> <view class="modal" v-if="showRecordTip">
<image class="audio-transcribe-src" src="@/static/icon/record-icon.png" mode="widthFix"></image> <image class="icon" src="@/static/icon/record-icon.png" mode="widthFix"></image>
<text class="audio-transcribe-text">录音中 {{recordTime}} s</text> <text class="text">录音中 {{recordTime}} s</text>
</view> </view>
</view> </view>
</template> </template>
@@ -29,14 +29,14 @@
data() { data() {
return { return {
showRecordTip: false, showRecordTip: false,
recordTime: 60, recordTime: 60,
interval: 0, interval: 0,
maxRecordTime: 60, maxRecordTime: 60,
recorderManager: null recorderManager: null
} }
}, },
created() { created() {
this.recorderManager = uni.getRecorderManager() this.recorderManager = uni.getRecorderManager()
}, },
methods: { methods: {
// 检查安卓录制权限 // 检查安卓录制权限
@@ -79,7 +79,8 @@
clearInterval(this.interval) clearInterval(this.interval)
// 监听录音结束 // 监听录音结束
this.recorderManager.onStop(res => { this.recorderManager.onStop(res => {
im.sentVoice(this.conversationType, this.targetId, res.tempFilePath, (this.maxRecordTime - this im.sentVoice(this.conversationType, this.targetId, res.tempFilePath, (this.maxRecordTime -
this
.recordTime), () => { .recordTime), () => {
setTimeout(() => { setTimeout(() => {
this.$emit('success') this.$emit('success')
@@ -93,44 +94,46 @@
} }
</script> </script>
<style scoped> <style scoped lang="scss">
.voice { .send--voice {
background: #F3F6FB; .voice {
height: 70rpx; background: $window-color;
line-height: 70rpx; height: 70rpx;
justify-content: center; line-height: 70rpx;
align-items: center; justify-content: center;
width: 460rpx; align-items: center;
border-radius: 10rpx; width: 460rpx;
margin-right: 15rpx; border-radius: 10rpx;
} margin-right: 15rpx;
.button { .button {
font-size: 30rpx; font-size: 30rpx;
color: #333; color: #333;
} }
}
.audio-transcribe { .modal {
background: rgba(0, 0, 0, .6); background: rgba(0, 0, 0, .6);
position: fixed; position: fixed;
height: 200rpx; height: 200rpx;
width: 300rpx; width: 300rpx;
border-radius: 10rpx; border-radius: 10rpx;
z-index: 99; z-index: 99;
top: 550rpx; top: 550rpx;
left: 225rpx; left: 225rpx;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
}
.audio-transcribe-src { .icon {
width: 88rpx; width: 88rpx;
height: 88rpx; height: 88rpx;
} }
.audio-transcribe-text { .text {
font-size: 28rpx; font-size: 28rpx;
color: #FFFFFF; color: #FFFFFF;
}
}
} }
</style> </style>

4
pages/im/components/showImage.nvue
View File

@@ -1,5 +1,5 @@
<template> <template>
<view class="im--image" :class="guest ? 'right': 'left'"> <view class="msg--image" :class="guest ? 'right': 'left'">
<image class="img" :src="msg.thumbnail" @click="previewImage" mode="widthFix"></image> <image class="img" :src="msg.thumbnail" @click="previewImage" mode="widthFix"></image>
</view> </view>
</template> </template>
@@ -39,7 +39,7 @@
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.im--image { .msg--image {
padding: 20rpx; padding: 20rpx;
&.left { &.left {

2
pages/im/components/showText.nvue
View File

@@ -1,5 +1,5 @@
<template> <template>
<view class="im--box"> <view class="msg--text">
<text class="im--text" :class="guest ? 'right': 'left'">{{ msg.content }}</text> <text class="im--text" :class="guest ? 'right': 'left'">{{ msg.content }}</text>
</view> </view>
</template> </template>

12
pages/im/components/showVoice.nvue
View File

@@ -1,10 +1,8 @@
<template> <template>
<view> <view class="msg--voice" :class="guest ? 'right': 'left'" @click="onPlayMsg">
<view class="im--voice" :class="guest ? 'right': 'left'" @click="onPlayMsg"> <image v-if="!guest" class="icon" src="@/static/icon/audio_green.png" mode="widthFix"></image>
<image v-if="!guest" class="icon" src="@/static/icon/audio_green.png" mode="widthFix"></image> <text class="duration">{{msg.duration}}"</text>
<text class="duration">{{msg.duration}}"</text> <image v-if="guest" class="icon" src="@/static/icon/audio_white.png" mode="widthFix"></image>
<image v-if="guest" class="icon" src="@/static/icon/audio_white.png" mode="widthFix"></image>
</view>
</view> </view>
</template> </template>
@@ -58,7 +56,7 @@
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.im--voice { .msg--voice {
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;

143
pages/im/private/call.nvue
View File

@@ -1,5 +1,5 @@
<template> <template>
<view class="call-page"> <view class="call">
<view class="video"> <view class="video">
<RongCloud-Call-RCUniCallView ref="bigVideoView" :style="{width:windowWidth+'px',height:windowHeight+'px'}" <RongCloud-Call-RCUniCallView ref="bigVideoView" :style="{width:windowWidth+'px',height:windowHeight+'px'}"
class="bigVideoView"> class="bigVideoView">
@@ -9,9 +9,11 @@
</view> </view>
<view class="status" v-if="!connected || mediaType == 0"> <view class="status" v-if="!connected || mediaType == 0">
<view class="call-user"> <view class="remote">
<u-avatar v-if="userInfo.portraitUrl" :src="userInfo.portraitUrl" shape="square" size="96" bgColor="#fff" /> <u-avatar v-if="userInfo.portraitUrl" :src="userInfo.portraitUrl" shape="square" size="96"
<u-avatar size="80" v-if="!userInfo.portraitUrl" shape="square" :text="userInfo.name ? userInfo.name.substring(0,1) : '未'" font-size="44" randomBgColor /> bgColor="#fff" />
<u-avatar size="80" v-if="!userInfo.portraitUrl" shape="square"
:text="userInfo.name ? userInfo.name.substring(0,1) : '未'" font-size="44" randomBgColor />
<view><text class="nickname">{{userInfo.name}}</text></view> <view><text class="nickname">{{userInfo.name}}</text></view>
<view v-if="remoteRinging"><text class="mediaType">等待对方接听</text></view> <view v-if="remoteRinging"><text class="mediaType">等待对方接听</text></view>
<view v-if="connected"><text class="mediaType">已接通</text></view> <view v-if="connected"><text class="mediaType">已接通</text></view>
@@ -163,85 +165,88 @@
} }
</script> </script>
<style scoped> <style scoped lang="scss">
.call-page { .call {
display: flex; display: flex;
flex: 1; flex: 1;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
}
.bigVideoView { .video {
background: #000; .bigVideoView {
} background: #000;
}
.smallVideoView { .smallVideoView {
background: blue; background: blue;
position: absolute; position: absolute;
right: 100rpx; right: 100rpx;
top: 100rpx; top: 100rpx;
width: 180rpx; width: 180rpx;
height: 320rpx; height: 320rpx;
} }
}
.buttons { .status {
position: fixed; flex: 1;
bottom: 100rpx; background: #666;
width: 750rpx; width: 750rpx;
display: flex; position: fixed;
flex-direction: row; bottom: 0;
justify-content: space-around; top: 0;
}
.btn { .remote {
align-items: center; flex: 1;
} width: 750rpx;
display: flex;
align-items: center;
top: 300rpx;
.icon { .mediaType {
background: #34CE98; font-size: 32rpx;
width: 132rpx; color: #aaa;
height: 132rpx; }
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.btn .text { .nickname {
margin-top: 16rpx; margin: 30rpx;
color: #FFFFFF; font-size: 44rpx;
font-size: 32rpx; color: #ffffff;
} }
}
}
.icon.hangup { .buttons {
background: #dd524d; position: fixed;
} bottom: 100rpx;
width: 750rpx;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.status {
flex: 1;
background: #666;
width: 750rpx;
position: fixed;
bottom: 0;
top: 0;
}
.call-user { .btn {
flex: 1; align-items: center;
width: 750rpx;
display: flex;
align-items: center;
top: 300rpx;
}
.mediaType { &.hangup {
font-size: 32rpx; background: $text-price;
color: #aaa; }
}
.nickname { .icon {
margin: 30rpx; background: $main-color;
font-size: 44rpx; width: 132rpx;
color: #ffffff; height: 132rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.text {
margin-top: 16rpx;
color: #FFFFFF;
font-size: 32rpx;
}
}
} }
</style> </style>

159
pages/im/private/chat.nvue
View File

@@ -1,13 +1,13 @@
<template> <template>
<view class="chat"> <view class="chat">
<!-- chat --> <!-- chat -->
<list class="chat-scroll" :show-scrollbar="false"> <list class="body" :show-scrollbar="false">
<cell class="cell" v-for="(item, index) in messages" :key="index"> <cell class="cell" v-for="(item, index) in messages" :key="index">
<view class="cell-time"> <view class="time">
<text class="cell-time-text">{{ customCN(item.sentTime) }}</text> <text class="text">{{ customCN(item.sentTime) }}</text>
</view> </view>
<view class="cell-item" :class="item.messageDirection == 1 ? 'right' : 'left'"> <view class="cell-item" :class="item.messageDirection == 1 ? 'right' : 'left'">
<image class="active" :src="userInfo.portraitUrl" mode="aspectFill" <image class="avatar" :src="userInfo.portraitUrl" mode="aspectFill"
@click="showUser(targetId, item.messageDirection)"></image> @click="showUser(targetId, item.messageDirection)"></image>
<view class="msg"> <view class="msg">
<show-voice v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1" <show-voice v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1"
@@ -25,11 +25,11 @@
<cell class="cell-footer" ref="chatBottom"></cell> <cell class="cell-footer" ref="chatBottom"></cell>
</list> </list>
<!-- footer --> <!-- footer -->
<view class="chat-footer"> <view class="footer">
<view class="msg-type" @click="changeMessageType"> <view class="msg-type" @click="changeMessageType">
<image class="msg-type-icon" src="@/static/icon/key-icon.png" v-if="chatType === 0" mode="widthFix"> <image class="icon" src="@/static/icon/key-icon.png" v-if="chatType === 0" mode="widthFix">
</image> </image>
<image class="msg-type-icon" src="@/static/icon/msg-icon.png" v-if="chatType === 1" mode="widthFix"> <image class="icon" src="@/static/icon/msg-icon.png" v-if="chatType === 1" mode="widthFix">
</image> </image>
</view> </view>
<sent-voice v-if="chatType === 0" :conversationType="conversationType" :targetId="targetId" <sent-voice v-if="chatType === 0" :conversationType="conversationType" :targetId="targetId"
@@ -37,7 +37,7 @@
<sent-text v-if="chatType === 1" :conversationType="conversationType" :targetId="targetId" <sent-text v-if="chatType === 1" :conversationType="conversationType" :targetId="targetId"
@success="getMessageList" /> @success="getMessageList" />
<view class="msg-type msg-push" @click="showPopups = !showPopups"> <view class="msg-type msg-push" @click="showPopups = !showPopups">
<image class="msg-type-icon" src="@/static/icon/popups-icon.png"></image> <image class="icon" src="@/static/icon/popups-icon.png"></image>
</view> </view>
</view> </view>
<!-- 弹出层 --> <!-- 弹出层 -->
@@ -159,95 +159,96 @@
} }
</script> </script>
<style scoped> <style scoped lang="scss">
/* 窗口 */ /* 窗口 */
.chat { .chat {
background: #F3F6FB; background: $window-color;
flex: 1; flex: 1;
}
.chat-scroll {
flex: 1;
}
.cell { .body {
padding: 10rpx 30rpx; flex: 1;
}
.cell-time { .cell {
justify-content: center; padding: 10rpx 30rpx;
align-items: center;
padding-bottom: 20rpx;
}
.cell-time-text { .time {
background: #fff; justify-content: center;
font-size: 24rpx; align-items: center;
color: #666; padding-bottom: 20rpx;
line-height: 40rpx;
padding: 0 20rpx;
border-radius: 10rpx;
}
.cell-item { .text {
width: 690rpx; background: #fff;
justify-content: flex-start; font-size: 24rpx;
} color: #666;
line-height: 40rpx;
padding: 0 20rpx;
border-radius: 10rpx;
}
}
.cell-footer { .cell-item {
height: 20rpx; width: 690rpx;
} justify-content: flex-start;
.active {
width: 78rpx;
height: 78rpx;
background-color: white;
border-radius: 10rpx;
}
.msg { &.left {
margin: 0 20rpx; flex-direction: row;
} }
.state { &.right {
padding-top: 10rpx; flex-direction: row-reverse;
}
.state {
flex-direction: row;
justify-content: flex-end;
}
}
.state-text { .avatar {
font-size: 24rpx; width: 78rpx;
color: #666; height: 78rpx;
} background-color: white;
border-radius: 10rpx;
}
.cell-item.left { .msg {
flex-direction: row; margin: 0 20rpx;
}
.cell-item.right { .state {
flex-direction: row-reverse; padding-top: 10rpx;
}
.cell-item.right .state { .state-text {
flex-direction: row; font-size: 24rpx;
justify-content: flex-end; color: #666;
} }
}
}
}
/* footer */ .cell-footer {
.chat-footer { height: 20rpx;
background: white; }
padding: 20rpx 30rpx; }
display: flex; }
justify-content: space-between;
flex-direction: row;
}
.msg-type { .footer {
width: 70rpx; background: white;
height: 70rpx; padding: 20rpx 30rpx;
} display: flex;
justify-content: space-between;
flex-direction: row;
.msg-type>.msg-type-icon { .msg-type {
margin: 5rpx; width: 70rpx;
width: 60rpx; height: 70rpx;
height: 60rpx;
.icon {
margin: 5rpx;
width: 60rpx;
height: 60rpx;
}
}
}
} }
</style> </style>