<template> <view> <uni-card v-for="(comment, index) in finalResult" :key="index" title="obj.personName" sub-title="obj.remark" extra="额外信息" :thumbnail="avatar"> <text class="uni-body">姓名：{{obj.personName}}~户主或户主关系{{obj.relation}}~性别：{{obj.sex}}~民族：{{obj.nation}}~出生日期：{{obj.birthday}}~身份证件编号{{obj.id}}~籍贯:{{obj.nativeplace}}~文化程度：{{obj.education}}</text> <view class="action-container"> <button class="delete-button" @click="deleteComment(index)">删除</button> </view> </uni-card> <button class="delete-all-button" @click="deleteAllComments">删除所有评论</button> </view> </template> <script> export default { data() { return { finalResult: [], avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png' }; }, onShow() { this.finalResult = uni.getStorageSync("data") }, methods: { deleteAllComments() { // 清空 finalResult 数组 this.finalResult = []; // 清空存储中的评论数据 uni.clearStorageSync(); }, deleteComment(index) { // 根据索引从 finalResult 数组中删除评论 this.finalResult.splice(index, 1); // 获取指定评论的键名 let dataArray = uni.getStorageInfoSync(); let keyArray = dataArray.keys; let commentKey = keyArray[index]; // 从存储中删除指定评论数据 uni.removeStorageSync(commentKey); } } }; </script> <style lang="scss"> .action-container { display: flex; justify-content: flex-end; } .delete-button { background-color: #f00; color: #fff; border: none; padding: 5px 10px; margin-top: 5px; cursor: pointer; } .delete-all-button { background-color: #f00; color: #fff; border: none; padding: 10px; margin-top: 10px; cursor: pointer; } <style>

这是一个使用uni-app框架开发的组件代码。该组件包含一个`<uni-card>`循环列表，用于展示评论信息。每个评论都包含一个标题、副标题、额外信息和缩略图，并且有一个删除按钮。页面底部还有一个“删除所有评论”的按钮。

在`<script>`标签中，定义了组件的数据`finalResult`和`avatar`，并在`onShow`生命周期函数中从本地存储中获取评论数据并赋值给`finalResult`。同时定义了两个方法：`deleteAllComments`用于清空所有评论和本地存储数据，`deleteComment`用于根据索引删除指定评论和本地存储数据。

在`<style>`标签中，定义了一些样式，如`.action-container`用于将删除按钮靠右显示，`.delete-button`和`.delete-all-button`是删除按钮的样式。

这段代码的功能是展示评论列表，并提供删除评论的功能。