siyu_app/pages/TUIKit/components/myNotice.vue

<template>
	<view>
		<view class="TUI-conversation-item" :style="{alignItems: item.mytype!='other' ?'flex-start':'center'}" @click.stop="handleDetail(item)">
			<aside class="left">
				<image mode="aspectFill" class="avatar" v-if="item.mytype!='other'" src="@/static/svg/course_icon.svg" />
				<image mode="aspectFill" class="avatar" v-else src="@/static/svg/msg_icon.svg" />
				<span class="new" v-if="item.isRead != 1&&item.mytype!='other'"></span>
				<!-- <span class="new" v-if="item.unReadNum&&item.mytype=='other'"></span> -->
				<span class="num" v-if="item.unReadNum&&item.mytype=='other'">
					{{ item.unReadNum > 99 ? "99+" : item.unReadNum }}
				</span>
			</aside>
			<main class="content">
				<header class="content-header">
					<label>
						<p class="name">{{item.mytype!='other' ? item.qwUserName: '系统消息'}}</p>
					</label>
				</header>
				<footer class="content-footer">
					<view :class="item.mytype!='other'?'textTwo':'textOne'" style="width: 240px;">{{item.title}}</view>
				</footer>
				<view class="message-time" v-if="item.mytype!='other'">过期时间： {{item.updateTime}}</view>
				<view class="item-footer">
					<span class="time">{{
			      handleItemTime(item.createTime)
			    }}</span>
				</view>
				<view class="conversation-line" :style="{bottom: item.mytype!='other' ?'-12px':'-15px'}"></view>
			</main>
		</view>
	</view>
</template>

<script>
	import { caculateTimeago } from "../utils/date";
	import { getSopCourseStudyList,updateSopAppLink } from "@/api/courseAnswer.js"
	export default {
		props: ["item"],
		data() {
			return {
				
			}
		},
		computed: {
			handleItemTime() {
				return (time)=> {
					if (time) {
						const t = new Date(time).getTime()
					  return caculateTimeago(t);
					}
					return "";
				}
			}
		},
		methods: {
			handleDetail(item) {
				if(item.mytype == 'other') {
					uni.navigateTo({
						url: '/pages/user/myNoticeList'
					})
				} else {
					this.getCourseRead(item.link)
					if(item.appRealLink) {
						uni.navigateTo({
							url: item.appRealLink
						})
					}else {
						uni.showToast({
							icon:'none',
							title: "暂无看课链接",
						});
					}
				}
			},
			getCourseRead(id) {
				updateSopAppLink(id).then(res=>{
					if(res.code == 200) {
						item.isRead = 1
						this.$updateMsgDot()
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.TUI-conversation-item {
	  position: relative;
	  padding: 12px;
	  display: flex;
	  align-items: center;
	
	  .left {
	    position: relative;
		margin-right: 10px;
	
	    .num {
	      font-family: PingFangSC-Regular;
	      position: absolute;
	      display: inline-block;
	      right: -8px;
	      top: -8px;
	      background: red;
	      min-width: 20px;
	      height: 20px;
	      font-size: 20rpx;
	      text-align: center;
	      line-height: 20px;
	      border-radius: 50%;
	      color: #ffffff;
	      font-weight: 600;
	      letter-spacing: 0;
	    }
	
	    .new {
	      position: absolute;
	      display: inline-block;
	      right: -4px;
	      top: -4px;
	      background: red;
	      width: 11px;
	      height: 11px;
	      border-radius: 50%;
	      color: #ffffff;
	    }
	
	    .avatar {
	      width: 48px;
	      height: 48px;
	      border-radius: 6px;
	    }
		.avatarCou {
			width: 48px;
			height: 48px;
			border-radius: 6px;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: center;
			image {
				width: 62px;
				height: 62px;
				// border-radius: 6px;
			}
		}
	  }
	
	  .content {
	    flex: 1;
	    // padding-left: 10px;
	    position: relative;
	
	    p {
	      width: 200px;
	      overflow: hidden;
	      text-overflow: ellipsis;
	      white-space: nowrap;
	      font-weight: 400;
	      font-size: 14px;
	      color: #999999;
	      letter-spacing: 0;
	      line-height: 19px;
	      font-family: PingFangSC-Regular;
	    }
		.message-time {
			width: 100%;
			font-family: PingFangSC-Regular;
			font-size: 12px;
			color: #b0b0b0;
			line-height: 16px;
			display: inline-block;
			font-weight: 400;
		}
	    .conversation-line {
	      position: absolute;
	      display: block;
	      left: 0;
	      right: -12px;
	      height: 0.5px;
	      transform: scaleY(0.3);
	      background: #b0b0b0;
	      /* padding-top: 10px; */
	      bottom: -12px;
	    }
	
	    .name {
	      font-weight: 400;
	      font-size: 16px;
	      color: #000000;
	      letter-spacing: 0;
	      margin-bottom: 5px;
	      font-family: PingFangSC-Regular;
	    }
	
	    &-header {
	      display: flex;
	      justify-content: space-between;
	      align-items: center;
	
	      label {
	        flex: 1;
	        font-size: 14px;
	        color: #000000;
	
	        .name {
	          // width: 110px;
	          overflow: hidden;
	          text-overflow: ellipsis;
	          white-space: nowrap;
	        }
	      }
	
	      .time {
	        font-size: 12px;
	        color: #b0b0b0;
	        line-height: 16px;
	        display: inline-block;
	        max-width: 75px;
	        font-weight: 400;
	      }
	    }
	
	    &-footer {
	      color: #999999;
	      line-height: 16px;
	      display: flex;
	
	      .message-text {
	        margin-left: 4px;
	        display: block;
	        width: 240px;
	        overflow: hidden;
	        text-overflow: ellipsis;
	        white-space: nowrap;
	      }
	    }
	
	    .item-footer {
	      position: absolute;
	      right: 0;
	      top: 0;
	      justify-items: center;
	      display: flex;
	      flex-direction: column;
	      align-items: flex-end;
	
	      .time {
	        font-size: 12px;
	        color: #b0b0b0;
	        line-height: 16px;
	        display: inline-block;
	        max-width: 75px;
	        font-weight: 400;
	        margin-bottom: 5px;
	      }
	
	      .mute-icon {
	        display: block;
	        width: 20px;
	        height: 20px;
	      }
	    }
	  }
	
	  .dialog-box {
	    position: absolute;
	    z-index: 5;
	    background: #fff;
	    border: 1px solid #dddddd;
	    padding: 15px 20px;
	    right: 15px;
	    top: 30px;
	
	    &-item {
	      top: 60px;
	      right: 40px;
	      box-shadow: 0 11px 20px 0 rgb(0 0 0 / 30%);
	      background: #ffffff;
	      border: 1px solid #e0e0e0;
	      box-shadow: 0 -4px 12px 0 rgb(0 0 0 / 6%);
	      border-radius: 8px;
	    }
	
	    .conversation-options {
	      height: 35px;
	      font-family: PingFangSC-Regular;
	      font-weight: 400;
	      font-size: 14px;
	      color: #4f4f4f;
	      letter-spacing: 0;
	      line-height: 35px;
	    }
	  }
	}
</style>