From 38c2e9a8731e0b8a7b8e6e6ea3b8cafb916c57cc Mon Sep 17 00:00:00 2001
From: mixtan <424491071@qq.com>
Date: Fri, 15 Aug 2025 09:29:45 +0800
Subject: [PATCH] =?UTF-8?q?update:=20=E6=88=91=E7=9A=84=E4=B8=BE=E6=8A=A5?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 java-mall-app-shop-admin/pages/my/tipOff.vue | 313 ++++++++++++++-----
 java-mall-app-shop-admin/styles/myui.scss    |   3 +
 2 files changed, 234 insertions(+), 82 deletions(-)

diff --git a/java-mall-app-shop-admin/pages/my/tipOff.vue b/java-mall-app-shop-admin/pages/my/tipOff.vue
index 736ff32..ccf75d5 100644
--- a/java-mall-app-shop-admin/pages/my/tipOff.vue
+++ b/java-mall-app-shop-admin/pages/my/tipOff.vue
@@ -1,101 +1,250 @@
 <template>
-   <view class="main">
+  <view class="my_tipoff">
     <view class="list">
-        <view class="item" v-for="item in list" :key="item.id">
-            <view class="header">
-                <view class="username">{{ item.reportedNickname }}</view>
-                <view class="more">查看详情</view>
-            </view>
-            <view class="body">
-                <view class="left">
-                    <image src="" class="img" />
-                </view>
-                <view class="right">
-                    <view class="desc">{{ item.reportContent }}</view>
-                    <view class="type">{{ item.reportCategory }}</view>
-                    <view class="time">{{ item.createdAt }}</view>
-                </view>
-            </view>
-            <view class="footer">
-                {{ item.processingResult }}
+      <view class="item" v-for="item in list" :key="item.id">
+        <view class="header">
+          <view class="username">{{ item.reporterNickname }}</view>
+          <view class="more" @click="showResult(item, $event)"
+            >查看详情<u-icon name="arrow-right" color="#666" size="12"></u-icon
+          ></view>
+        </view>
+        <view class="body">
+          <view class="left">
+            <image :src="getThumb(item)" class="img" />
+          </view>
+          <view class="right">
+            <view class="desc">{{ item.reportContent }}</view>
+            <view class="type"
+              >举报原因：{{
+                item.reportCategory && typeMap[item.reportCategory]
+              }}</view
+            >
+            <view class="time">举报时间：{{ item.createdAt }}</view>
+          </view>
+        </view>
+        <view class="footer">
+          <u-icon
+            name="error-circle-fill"
+            color="#F07C09"
+            size="20"
+            class="icon"
+          ></u-icon>
+          <view class="text">{{ item.processingResult }}</view>
+        </view>
+      </view>
+    </view>
+
+    <u-popup :show="show" mode="center" @close="close" @open="open">
+      <view class="my_result">
+        <view class="btn_close">
+            <u-icon name="close" color="#ffffff" size="24"></u-icon>
+        </view>
+        <view class="item">
+            <view class="lable">举报对象ID</view>
+            <view class="value">{{currentInfo.reportedUserId}}</view>
+        </view>
+         <view class="item">
+            <view class="lable">举报对象昵称</view>
+            <view class="value">{{currentInfo.reportedNickname}}</view>
+        </view>
+         <view class="item">
+            <view class="lable">举报原因</view>
+            <view class="value">{{typeMap[currentInfo.reportCategory]}}</view>
+        </view>
+         <view class="item">
+            <view class="lable">举报内容</view>
+            <view class="value">{{currentInfo.reportContent}}</view>
+        </view>
+         <view class="item">
+            <view class="lable">举报凭证</view>
+            <view class="value">
+                <u-album :urls="getImageList()" keyName="url"></u-album>
             </view>
         </view>
-    </view>
-   </view>
+         <view class="item">
+            <view class="lable">举报时间</view>
+            <view class="value">{{currentInfo.createdAt}}</view>
+        </view>
+         <view class="item">
+            <view class="lable">举报结果</view>
+            <view class="value">{{resultType[currentInfo.processingStatus]}}</view>
+        </view>
+         <view class="item">
+            <view class="lable">举报反馈</view>
+            <view class="value">{{currentInfo.processingResult}}</view>
+        </view>
+      </view>
+    </u-popup>
+  </view>
 </template>
 
 <script>
 import { apiGetTipOffList } from "@/api/user";
 
-    export default {
-        data(){
-            return {
-                list: [],
-                imgUrl: ''
-            }
-        },
-        mounted(){
-           this.getTipOffList() 
-        },
-        methods:{
-            async getTipOffList(){
-                const res = await apiGetTipOffList();
-                this.list = res.records
-            }
-        }
-    }
+export default {
+  data() {
+    return {
+      list: [],
+      imgUrl: "",
+      typeMap: {
+        1: "该账号发布淫秽色情内容",
+        2: "该账号发布违法违规内容",
+        3: "该账号存在欺诈骗钱行为",
+        4: "该账号对我进行辱骂骚扰",
+        5: "该账号侵犯未成年人权益",
+        6: "其他",
+      },
+      resultType: {
+        0: '待处理',
+        1: '处理中',
+        2: '已驳回',
+        3: '已完成',
+      },
+      show: false,
+      currentInfo: {}
+    };
+  },
+  mounted() {
+    this.getTipOffList();
+  },
+  methods: {
+    open() {
+      // console.log('open');
+    },
+    close() {
+      this.show = false;
+      // console.log('close');
+    },
+    showResult(data){
+        this.show = true
+        this.currentInfo = data
+    },
+    getThumb(item) {
+      const data = item?.evidenceImages
+        ? JSON.parse(item?.evidenceImages)?.[0].url
+        : "";
+      return data;
+    },
+    getImageList() {
+      const data = this.currentInfo?.evidenceImages
+        ? JSON.parse(this.currentInfo?.evidenceImages)
+        : [];
+      return data;
+    },
+    async getTipOffList() {
+      const res = await apiGetTipOffList();
+      this.list = res.records;
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-.list{
+.list {
+  padding: 30rpx;
+  font-size: 24rpx;
+  .item {
     padding: 20rpx;
-    .item{
-        padding: 12rpx;
-        .header{
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
+    background: #fff;
+    margin-bottom: 24rpx;
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 20rpx;
+      .username {
+        color: #222;
+        font-size: 28rpx;
+      }
+      .more {
+        color: #666;
+        display: flex;
+        align-items: center;
+        gap: 6rpx;
+        line-height: 1;
+      }
+    }
+    .body {
+      display: flex;
+      align-items: center;
+      height: 128rpx;
+      .left {
+        width: 128rpx;
+        height: 128rpx;
+        margin-right: 20rpx;
+        .img {
+          width: 100%;
+          height: 100%;
+          background: #eee;
+          border-radius: 8rpx;
         }
-        .body{
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            .left{
-                .img{
-                    width: 128rpx;
-                    height: 128rpx;
-                }
-                 .username{
-                    color: #222;
-                }
-                .more{
-                    color: #666;
-                }
-            }
-            .right{
-                .desc{
-                    color: #222;
-                }
-                .type{
-                    color: #666;
-                }
-                .time{
-                    color: #666;
-                }
-            }
+      }
+      .right {
+         width: calc(100% - 128rpx - 20rpx);
+        .desc {
+          color: #222;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
         }
-        .footer{
-            display: flex;
-            align-items: center;
-            padding: 4rpx 8rpx;
-            border-radius: 8rpx;
-            background: #222;
-            color: #666;
+        .type {
+          color: #666;
+          margin: 12rpx 0;
+        }
+        .time {
+          color: #666;
+        }
+      }
+    }
+    .footer {
+      display: flex;
+      align-items: center;
+      padding: 8rpx;
+      border-radius: 8rpx;
+      line-height: 1;
+      margin-top: 24rpx;
+      background: #eee;
+      color: #666;
 
-            .icon{
-                margin-right: 12rpx;
-            }
+      .icon {
+        margin-right: 8rpx;
+      }
+
+      .text{
+         white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+      }
+    }
+  }
+}
+.my_result{
+    position: relative;
+    width: calc(100vw - 60rpx);
+    padding: 20rpx 0;
+    font-size: 24rpx;
+
+    .btn_close{
+        position: absolute;
+        left: 50%;
+        bottom: -100rpx;
+        transform: translateX(-50%);
+        pointer-events: none;
+    }
+    .item{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 12rpx 24rpx;
+
+        .lable{
+            width: 150rpx;
+        }
+        .value{
+            width: calc(100% - 160rpx);
+            display: flex;
+            justify-content: flex-end;
         }
     }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/java-mall-app-shop-admin/styles/myui.scss b/java-mall-app-shop-admin/styles/myui.scss
index 360fea1..c69105d 100644
--- a/java-mall-app-shop-admin/styles/myui.scss
+++ b/java-mall-app-shop-admin/styles/myui.scss
@@ -26,4 +26,7 @@
 
 .u-loadmore-tips{
   font-size: 24rpx;
+}
+.uni-system-preview-image{
+    z-index: 999999;
 }
\ No newline at end of file