短录音头像 名字 时间

pages/mine/details.vue

@@ -67,7 +67,12 @@
 						:class="{active: item.bg < playNow &&  item.ed > playNow &&  i==0}"
 						v-for="(item,index) in dialog.message" :key="index" :data-speaker="item.speaker">
 						<view class="avatar">
-							<text v-if="item.speaker == 1" style="color: #60CBEC;">A</text>
+							<view :style="[SPEAKERSTYLE(item.speaker)]">
+								<!-- <image v-if="item.isShow == 0" :src="Aimg.replace(/[\r\n]/g,'')" mode="widthFix"></image> -->
+								<text v-if="item.speaker == 0">顾</text>
+								<text v-else>{{ item.speaker | toCapital }}</text>
+							</view>
+							<!-- <text v-if="item.speaker == 1" style="color: #60CBEC;">A</text>
 							<text v-if="item.speaker == 2" style="color: #EC8B47;">B</text>
 							<text v-if="item.speaker == 3" style="color: #4F861E;">C</text>
 							<text v-if="item.speaker == 4" style="color: #9F61C8;">D</text>
@@ -76,22 +81,29 @@
 							<text v-if="item.speaker == 6" style="color: #60CBEC;">F</text>
 							<text v-if="item.speaker == 7" style="color: #EC8B47;">G</text>
 							<text v-if="item.speaker == 8" style="color: #4F861E;">H</text>
-							<text v-if="item.speaker == 9" style="color: #9F61C8;">I</text>
+							<text v-if="item.speaker == 9" style="color: #9F61C8;">I</text> -->
 						</view>
-						<view class="content">
-							<view @longpress="changanxiaoguo(item,index,i)" v-html="item.onebest"></view>
-							<view class="tankuangcss" :class="{bottoms:index == 0}"  v-if="item.isshow">
-								<view @click="clickcopy()"
-									style="width: 60rpx;font-size: 24rpx;text-align: center;margin-left: 24rpx;">复制
-								</view>
-								<view @click="Oftenthewrongword()"
-									style="width: 80rpx;font-size: 24rpx;text-align: center;margin-left: 22rpx;">常错词
-								</view>
-								<view v-if="jiaoseshow" @click="Addtheessence()"
-									style="width: 80rpx;font-size: 24rpx;text-align: center;margin-left: 22rpx;">加精华
-								</view>
-								<view @click="clickbofang(dialog.backindex,item)"
-									style="width: 80rpx;font-size: 24rpx;text-align: center;margin-left: 14rpx;">播放
+						<view class="contentInfo">
+							<view class="info">
+								<text class="AudioUserName" v-if="item.speaker == 0">{{ item.username }}</text>
+								<text class="AudioUserName" v-else>{{ item.speaker | toCapital }}</text>
+								<text>{{conversionTiame(item.bg/1000)}}</text>
+							</view>
+							<view class="content">
+								<view @longpress="changanxiaoguo(item,index,i)" v-html="item.onebest"></view>
+								<view class="tankuangcss" :class="{bottoms:index == 0}"  v-if="item.isshow">
+									<view @click="clickcopy()"
+										style="width: 60rpx;font-size: 24rpx;text-align: center;margin-left: 24rpx;">复制
+									</view>
+									<view @click="Oftenthewrongword()"
+										style="width: 80rpx;font-size: 24rpx;text-align: center;margin-left: 22rpx;">常错词
+									</view>
+									<view v-if="jiaoseshow" @click="Addtheessence()"
+										style="width: 80rpx;font-size: 24rpx;text-align: center;margin-left: 22rpx;">加精华
+									</view>
+									<view @click="clickbofang(dialog.backindex,item)"
+										style="width: 80rpx;font-size: 24rpx;text-align: center;margin-left: 14rpx;">播放
+									</view>
 								</view>
 							</view>
 						</view>
@@ -310,8 +322,57 @@
 			// 销毁
 			// this.innerAudioContext.destroy();
 		},
-		
+		computed: {
+			conversionTiame() {
+				return (e) => {
+					return this.getTime(e);
+				}
+			},
+		},
+		filters: {
+			// ASCII码转换 大写字母A是65 演讲人是从1开始所以num+64
+			toCapital(num) {
+				let str = ''
+				if (num) {
+					str = String.fromCharCode(num + 64)
+				}
+				return str
+			}
+		},
 		methods: {
+			SPEAKERSTYLE(index) {
+				let obj = {
+					color: '',
+				}
+				switch (index) {
+					case 1:
+						obj.color = '#60CBEC';
+						break;
+					case 2:
+						obj.color = '#EC8B47';
+						break;
+					case 3:
+						obj.color = '#4F861E';
+						break;
+					case 5:
+						obj.color = '#4980C8';
+						break;
+					case 6:
+						obj.color = '#60CBEC';
+						break;
+					case 7:
+						obj.color = '#EC8B47';
+						break;
+					case 8:
+						obj.color = '#4F861E';
+						break;
+					default:
+						obj.color = '#9F61C8';
+						break;
+				}
+				return obj
+			},
+			
 			effectiveAdd(){
 				if(this.effectiveindex==4){
 					if(this.effectiveitext.length==0){
@@ -1475,6 +1536,31 @@
 			color: #999999;
 		}
 	}
+	.scroll-Y .text[data-speaker="2"],
+	.scroll-Y .text[data-speaker="4"],
+	.scroll-Y .text[data-speaker="6"] {
+		.contentInfo {
+			.info {
+				.AudioUserName {
+					margin-left: 10rpx;
+				}
+	
+				display: flex;
+				flex-direction: row-reverse;
+			}
+		}
+	}
+	
+	.scroll-Y .text {
+		.contentInfo {
+			.info {
+				.AudioUserName {
+					margin-right: 10rpx;
+				}
+			}
+		}
+	}
+	
 	.scroll-Y .text .avatar {
 		width: 64upx;
 		height: 64upx;
@@ -1492,6 +1578,50 @@
 		// 	width: 40upx;
 		// }
 	}
+	
+	.scroll-Y .text .contentInfo .info {
+		color: #ccc;
+		font-size: 18rpx;
+		font-size: 30rpx;
+		padding: 0 28rpx;
+	}
+	
+	
+	.scroll-Y .text .contentInfo .content {
+		margin-left: 30upx;
+		line-height: 60rpx;
+		text-align: left;
+		padding: 0 5px;
+		background: #2BC805;
+		border-radius: 8upx;
+		max-width: 442rpx;
+		color: #FFFFFF;
+		position: relative;
+	
+		.tankuangcss {
+			position: absolute;
+			top: -140rpx;
+			left: -120rpx;
+			width: 308rpx;
+			height: 130rpx;
+			background-color: #333333;
+			font-size: 24rpx;
+			color: #FFFFFF;
+			padding-top: 4rpx;
+			padding-bottom: 4rpx;
+			display: flex;
+			flex-wrap: wrap;
+			border-radius: 15rpx;
+			z-index: 1000;
+		}
+	
+		.bottoms {
+			top: unset;
+			bottom: -140rpx;
+		}
+	}
+	
+	
 	.scroll-Y .text .content {
 		margin-left: 30upx;
 		line-height: 60rpx;