uniapp开发原来一个浏览记录界面还有这么多的细节啊！

本文链接：https://blog.csdn.net/qq_69183322/article/details/144434463

1.开发后的效果显示

2.代码讲解

（1）时间显示

这里的时间不是简单的直接显示年月日时分秒，而是通过时间工具类进行获取

具体调用工具类中的函数代码，如下所示：

<text class="time">{{getDisplayDateDetails(item.viewTime)}}</text>

时间工具类的编写：

export function getDisplayDateDetails(dateTime) {
  const now = new Date();
  const date = new Date(dateTime);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');

  // 判断是否为今天
  if (now.toDateString() === date.toDateString()) {
    return `${hours}:${minutes}`;
  }
  // 判断是否为昨天
  else if (new Date(now - 24 * 60 * 60 * 1000).toDateString() === date.toDateString()) {
    return `昨天 ${hours}:${minutes}`;
  }
  // 判断是否为今年的其他日期
  else if (now.getFullYear() === year) {
    return `${month}-${day} ${hours}:${minutes}`;
  }
  // 判断是否为今年之前的日期
  else {
    return `${year}-${month}-${day} ${hours}:${minutes}`;
  }
}

（2）编辑记录

如上图所示，当点击编辑时，除了编辑的界面之外会有模糊，且颜色变暗的效果，当我们点击除编辑界面之外，就会关闭这种效果。

（3）编辑记录-点击编辑

首先我们要解决点击编辑时，防止点击编辑时，触发浏览记录的事件

我们只需要在编辑的事件的@click触发改为@click.stop触发事件即可，如下所示：

<wd-icon @click.stop="hanldeEditRecord(item.id)" name="more1" size="15px"></wd-icon>

说明：wd-icon 是 Wot Design Uni的一个图标组件

Wot Design Uni | 一个基于Vue3+TS开发的uni-app组件库，提供70+高质量组件，支持暗黑模式、国际化和自定义主题。

（4）编辑效果实现

使用的样式如下：

.layout-opacity {
    opacity: 0.80;
    background-color: #e9e9e9;
}

实现方式：通过判断

editRecordVisible变量的值来显示效果

如果该变量为true，则使用该效果；如果该变量为false，则不使用

	<view class="layout" @click="closeEditRecord" :class="{ 'layout-opacity': editRecordVisible }">	</view>

（5）编辑记录-关闭编辑

点击除编辑之外的界面，就会关掉这种编辑状态

这里使用了closeEditRecord的事件

	<view class="layout" @click="closeEditRecord" :class="{ 'layout-opacity': editRecordVisible }">	</view>

closeEditRecord的事件代码如下：

const closeEditRecord = () => {
    if (editRecordVisible.value) {
        editRecordVisible.value = false;
    }
}

当然，点击记录时还是会触发对应的事件，会跳转到对应记录页面中，这该如何处理呢？

其实也很简单，只需要判断编辑时，不给跳转对应的记录页面即可

处理方式如下：

const handleReviewMedia = (mediaId)=>{
	//防止编辑记录时，跳转页面
	if(editRecordVisible.value){
		return;
	}
	
	uni.navigateTo({
		url:`/pages/home/mediaContent?mediaId=${mediaId}`
	})
}