ss_dc_wechat_mini_program/pages/parent/message.vue

<template>
	<view class="message-page" :class="screenMode">
		
		<!-- 顶部返回 -->
		<!-- <view class="nav-header" v-if="screenMode != 'heng'">
			<view class="back-btn" @click="back"><image  src="/static/icon/left.png"></image> 返回</view>
		</view> -->
		
		<!-- 消息列表 -->
		<view class="message-list">
            <view class="message-item ">
                <image class="avatar" src="/static/logo.png"></image>
                <view class="voice-message">
					<view class="voice-duration"> <text>你好啊</text></view>
				</view>
			</view>
            <!-- <view class="message-item right">
                <image class="avatar" src="/static/logo.png"></image>
                <view class="voice-message">
					<view class="voice-duration"> <text>注意身体注意身体注意身体注意身体注意身体注意身体注意身体注意身体注意身体注意身体注意身体注意身体注意身体注意身体注意身体注意身体注意身体注意身体注意身体注意身体注意身体注意身体注意身体注意身体注意身体注意身体注意身体注意身体注意身体</text></view>
				</view>
			</view> -->

            <view class="message-item ">
                <image class="avatar" src="/static/logo.png"></image>
                <view class="voice-message">
					<view class="voice-duration"><image  src="/static/icon/tingtong.png"></image> <text>通话时长 00:25</text></view>
				</view>
			</view>

			<!-- 通话记录 -->
			<view class="message-item right">
                <image class="avatar" src="/static/logo.png"></image>
                <view class="voice-message">
					<view class="voice-duration"><image  src="/static/icon/tingtong.png"></image> <text>通话时长 00:25</text></view>
				</view>
			</view>
			
			<!-- 语音消息 -->
			<view class="message-item left">
				<image class="avatar" src="/static/logo.png"></image>
				<view class="voice-message">
					<view class="voice-duration"> <image  src="/static/icon/guangbo.png"></image> <text>24"</text></view>
					<text class="time">17:25</text>
				</view>
			</view>
			
			<!-- 语音消息 -->
			<view class="message-item right">
                <image class="avatar" src="/static/logo.png"></image>
				<view class="voice-message">
					<view class="voice-duration"><image  src="/static/icon/yinbo.png"></image> <text>00:15</text></view>
					<text class="time">18:28</text>
				</view>
			</view>
			
			<!-- 语音消息带录音点 -->
			<view class="message-item left">
				<image class="avatar" src="/static/logo.png"></image>
				<view class="voice-message">
					<view class="voice-duration">
                        <image  src="/static/icon/guangbo.png"></image>
                        <text>16"</text>
						<view class="recording-dot"></view>
					</view>
					<text class="time">17:25</text>
				</view>
			</view>
		</view>
		
		<!-- 底部操作栏 -->
		<view class="footer">
			<view class="input-box">按住 说话</view>
			<view class="emoji-btn"><image  src="/static/icon/emjoy.png"></image></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			screenMode: 'heng',
		}
	},
    onLoad(options) {
		uni.getSystemInfo({
			success: (res) => {
				this.screenMode = res.windowWidth > res.windowHeight ? 'heng' : 'shu'
			}
		})
		// 获取路由参数中的角色信息
		const role = options.role
        console.log(role)
        if (!role) {
            uni.showToast({
                title: '缺少角色信息',
                icon: 'none'
            })
            return
        }

		// 这里可以根据角色获取对应的消息列表
		// this.getMessageList(role)
	},
	methods: {
		back() {
			uni.navigateBack({
				delta: 1
			})
		}
	}
}
</script>

<style scoped lang="less">
.heng {
  min-height: 100vh;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;

  .message-list {
    flex: 1;
    padding: 5rpx;
    background: #fff;
  }
  .message-item {
    display: flex;
    align-items: flex-start;
    margin: 15rpx 20rpx;
  }
  .avatar {
    width: 30rpx;
    height: 30rpx;
    border-radius: 2rpx;
    flex-shrink: 0;
  }
  .voice-message {
    position: relative;
    display: flex;
    align-items: flex-end;
  }
  .voice-duration {
    background: #a4b3d4;
    padding: 6rpx;
    border-radius: 4rpx;
    color: #fff;
    font-size: 12rpx;
    position: relative;
    min-width: 50rpx;
    margin: 0 10rpx;
    display: flex;
    align-items: center;
  }
  .voice-duration image {
    width: 18rpx;
    height: 18rpx;
  }
  .voice-duration text {
    margin: 0 5rpx;
  }
  .right {
    flex-direction: row-reverse;
  }
  .right .avatar{
    border-radius: 50%;
  }
  .right .voice-message {
    flex-direction: row-reverse;
  }
  .right .voice-duration {
    background: #e9e9e9;
    color: #5e5e5e;
    
  }
  .time {
    font-size: 12rpx;
    color: #999;
    display: block;
  }
  .recording-dot {
    width: 5rpx;
    height: 5rpx;
    background: #eb6100;
    border-radius: 50%;
    position: absolute;
    right: 3rpx;
    top: 3rpx;
  }
  .footer {
    padding: 10rpx 35rpx;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    border-top: 1rpx solid #eee;
	font-size: 14rpx;
  }
  .input-box {
    flex: 1;
    background: #ffffff;
	height: 30rpx;
    line-height: 30rpx;
    text-align: center;
    border-radius: 4rpx;
    margin-right: 10rpx;
    color: #666;
    border: 1rpx solid #eee;
  }
  .emoji-btn image {
    width: 20rpx;
    height: 20rpx;
  }
}
.shu{
	min-height: 100vh;
	background: #f5f5f5;
	display: flex;
	flex-direction: column;
	.nav-header {
		padding: 20rpx;
		background: #fff;
		border-bottom: 1rpx solid #eee;
	}
	.back-btn {
		width: 100rpx;
		font-size: 28rpx;
		text-align: center;
		color: #333;
		border-radius: 5rpx;
		padding: 10rpx 20rpx;
		border: 1px solid #eee;
		display: flex;
		align-items: center;
		gap: 10rpx;
	}
	.back-btn image {
		width: 25rpx;
		height: 25rpx;
	}
	.message-list {
		flex: 1;
		padding: 20rpx;
		background: #fff;
	}
	.message-item {
		display: flex;
		align-items: flex-start;
		margin: 30rpx 0;
	}
	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 8rpx;
		flex-shrink: 0;
	}
	.voice-message {
		position: relative;
		display: flex;
		align-items: flex-end;
	}
	.voice-duration {
		background: #a4b3d4;
		padding: 20rpx 20rpx;
		border-radius: 8rpx;
		color: #fff;
		font-size: 28rpx;
		position: relative;
		min-width: 100rpx;
		margin: 0 20rpx;
		display: flex;
		align-items: center;
	}
	.voice-duration image{
		width: 40rpx;
		height: 40rpx;
	}
	.voice-duration text {
		margin: 0 10rpx;
	}
	.right {
		flex-direction: row-reverse;
	}
	.right .avatar{
		border-radius: 50%;
	}
	.right .voice-message {
		flex-direction: row-reverse;
	}
	.right .voice-duration {
		background: #e9e9e9;
		color: #5e5e5e;
		
	}
	.time {
		font-size: 24rpx;
		color: #999;
		display: block;
	}
	.recording-dot {
		width: 16rpx;
		height: 16rpx;
		background: #eb6100;
		border-radius: 50%;
		position: absolute;
		right: 10rpx;
		top: 10rpx;
	}
	.footer {
		padding: 20rpx 40rpx;
		background: #f5f5f5;
		display: flex;
		align-items: center;
		border-top: 1rpx solid #eee;
	}
	.input-box {
		flex: 1;
		background: #ffffff;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 8rpx;
		margin-right: 20rpx;
		color: #666;
		border: 1px solid #eee;
	}
	.emoji-btn image{
		width: 50rpx;
		height: 50rpx;
	}
}
</style>