home-medal page

nova-werun/pages/home/medal/index.js

@@ -1,4 +1,6 @@
 // nova-werun/pages/home/medal/index.js
+const Parse = getApp().Parse;
+const company = getApp().globalData.company;
 Page({
 
     /**
@@ -13,6 +15,12 @@ Page({
         contentHeight: 0, // 可用内容高度
         contentHeight2: 0,
         contentpadding: 0, //顶部padding高度
+
+        userList: [],
+        alreadyList: [],
+        MedalList: [],
+        show: false,
+        title:''
     },
 
     /**
@@ -37,6 +45,8 @@ Page({
             contentpadding,
             contentHeight
         });
+        this.getuser()
+        this.alreadyMedal()
     },
 
     /**
@@ -86,5 +96,96 @@ Page({
      */
     onShareAppMessage: function () {
 
-    }
+    },
+    async getuser() {
+        const currentUser = Parse.User.current();
+        let userquery = new Parse.Query('_User');
+        userquery.equalTo('company', company);
+        userquery.equalTo('objectId', currentUser.id);
+        userquery.notEqualTo('isDeleted', true)
+        let user = await userquery.find();
+        let userList = user.map(item => item.toJSON());
+        this.setData({
+            userList
+        })
+        console.log(this.data.userList);
+    },
+    // 已获得勋章
+    async alreadyMedal() {
+        const currentUser = Parse.User.current();
+        let MedalLogquery = new Parse.Query('MedalLog');
+        MedalLogquery.equalTo('company', company);
+        MedalLogquery.equalTo('user', currentUser.id);
+        MedalLogquery.notEqualTo('isDeleted', true);
+        MedalLogquery.include('medal');
+
+        let MedalLog = await MedalLogquery.find();
+        let alreadyList = MedalLog.map(item => {
+            let itemData = item.toJSON();
+            // 格式化 createdAt 为 YYYY-M-D
+            const createdAt = new Date(itemData.createdAt);
+            const formattedDate = `${createdAt.getFullYear()}-${createdAt.getMonth() + 1}-${createdAt.getDate()}`;
+            itemData.createdAt = formattedDate; // 将格式化后的日期赋值回 createdAt
+            return itemData;
+        });
+
+        this.setData({
+            alreadyList
+        });
+        console.log('alreadyList', this.data.alreadyList);
+
+        // 获取 MedalList，并剔除 alreadyList 中的勋章
+        await this.lossMedal(alreadyList);
+    },
+
+    // 为获得勋章
+    async lossMedal(alreadyList) {
+        let Medalquery = new Parse.Query('Medal');
+        Medalquery.equalTo('company', company);
+        Medalquery.notEqualTo('isDeleted', true);
+        Medalquery.ascending('order');
+
+        let r = await Medalquery.find();
+        let MedalList = r.map(item => item.toJSON());
+
+        // 创建一个集合存储 alreadyList 中的 medal.objectId
+        const alreadyMedalIds = new Set(alreadyList.map(item => item.medal.objectId));
+
+        // 从 MedalList 中剔除已获得的勋章
+        MedalList = MedalList.filter(item => !alreadyMedalIds.has(item.objectId));
+
+        this.setData({
+            MedalList
+        });
+        console.log('MedalList', this.data.MedalList);
+    },
+    showPopup(e) {
+        const objectId = e.currentTarget.dataset.id
+        const type = e.currentTarget.dataset.type
+        if(type=='alreadyList'){
+            this.data.alreadyList.forEach((item)=>{
+                if(item.objectId==objectId){
+                    this.setData({
+                        title:item.medal.title
+                    })
+                }
+            })
+            console.log(this.data.title);
+        }else{
+            this.data.MedalList.forEach((item)=>{
+                if(item.objectId==objectId){
+                    this.setData({
+                        title:item.title
+                    })
+                }
+            })
+            console.log(this.data.title);
+        }
+        
+        this.setData({ show: true });
+      },
+    
+      onClose() {
+        this.setData({ show: false });
+      },
 })

nova-werun/pages/home/medal/index.json

@@ -1,3 +1,5 @@
 {
-  "usingComponents": {}
+  "usingComponents": {
+    "van-popup": "@vant/weapp/popup/index"
+  }
 }

nova-werun/pages/home/medal/index.less

@@ -75,15 +75,25 @@
                     font-size: 36rpx;
                     font-weight: 600;
                 }
-                .med-rul{
-                    margin-top: 10rpx;
-                    font-size: 34rpx;
-                }
                 .med-time{
                     margin-top: 10rpx;
                     font-size: 30rpx;
                 }
             }
+            .med-rul{
+                margin-top: 10rpx;
+                font-size: 34rpx;
+                margin-left: 40rpx;
+                margin-left: 10rpx;
+            }
+            .title-title{
+                font-size: 40rpx;
+                font-weight: 600;
+                width: 100%;
+                display: flex;
+                justify-content: center;
+            }
         }
+
     }
 }

nova-werun/pages/home/medal/index.wxml

@@ -2,9 +2,9 @@
 <nav type="back" title="我的勋章" background-color="{{'#87ceeb'}}" front-color="{{'#ffffff'}}"></nav>
 <view class="all" style="height: {{contentHeight}}rpx;">
     <view class="infobox">
-        <image class="avater" src="https://file-cloud.fmode.cn//tmp/sBX4tFxdGjkk1fea2c9db35cbd67b50b01dd3bae1592.png?imageView2/1/w/200/h/200"></image>
+        <image class="avater" src="{{userList[0].avatar}}"></image>
         <view class="info">
-            <view class="name">超级无敌暴龙战士战士</view>
+            <view class="name">{{userList[0].nickname}}</view>
             <view class="but-box">
                 <image src="https://file-cloud.fmode.cn/qpFbRRSZrO/20241112/m61jkv024259213.png?imageView2/1/w/200/h/200"></image>
                 <view class="text">分享 ></view>
@@ -15,16 +15,28 @@
     <view class="medalbox">
         <view class="med-text">全部勋章</view>
         <view class="med-infobox">
-            <block wx:for="{{15}}">
-                <view class="med-info">
-                    <image src="https://file-cloud.fmode.cn/qpFbRRSZrO/20241112/61d821025820167.png?imageView2/1/w/200/h/200"></image>
-                    <view class="med-name">勋章名称</view>
-                    <view class="med-rul">勋章达成规则</view>
-                    <view class="med-time">2024-9-17</view>
+            <!-- 已获得 -->
+            <block wx:if="{{alreadyList.length>0}}" wx:for="{{alreadyList}}" wx:key="index">
+                <view class="med-info" bindtap="showPopup" data-id="{{item.objectId}}" data-type="alreadyList">
+                    <image src="{{item.medal.image}}"></image>
+                    <view class="med-name">{{item.medal.name}}</view>
+                    <!-- <view class="med-rul">勋章达成规则</view> -->
+                    <view class="med-time">{{item.createdAt}}</view>
+                </view>
+            </block>
+            <!-- 为获得 -->
+            <block wx:if="{{MedalList.length>0}}" wx:for="{{MedalList}}">
+                <view class="med-info" bindtap="showPopup" data-id="{{item.objectId}}" data-type="MedalList">
+                    <image src="{{item.imageIn}}"></image>
+                    <view class="med-name">{{item.name}}</view>
                 </view>
             </block>
 
-
+            <!-- 勋章介绍 -->
+            <van-popup show="{{ show }}" position="bottom" custom-style="height: 40%;" bind:close="onClose">
+                <view class="title-title">获取条件</view>
+                <view class="med-rul">{{title}}</view>
+            </van-popup>
         </view>
     </view>
 

nova-werun/pages/home/medal/index.wxss

@@ -1 +1 @@
-.all{width:100vw;padding-left:40rpx;padding-right:40rpx;padding-top:20rpx;overflow-y:scroll}.all .infobox{width:100%;height:130rpx;display:flex;align-items:center}.all .infobox .avater{width:110rpx;height:110rpx;border-radius:50%}.all .infobox .info{height:130rpx;margin-left:20rpx;display:flex;flex-direction:column;justify-content:center}.all .infobox .info .name{font-size:34rpx}.all .infobox .info .but-box{margin-top:10rpx;width:130rpx;height:45rpx;display:flex;justify-content:center;align-items:center;border-radius:12rpx;border:gray solid 1px}.all .infobox .info .but-box image{width:26rpx;height:26rpx}.all .infobox .info .but-box .text{margin-left:5rpx;font-size:26rpx}.all .medalbox{width:100%;border:solid black 2px;border-radius:15rpx;margin-bottom:40rpx;margin-top:25rpx}.all .medalbox .med-text{margin-left:20rpx;font-size:32rpx;margin-top:10rpx}.all .medalbox .med-infobox{width:100%;display:flex;flex-wrap:wrap}.all .medalbox .med-infobox .med-info{width:50%;height:400rpx;display:flex;align-items:center;justify-content:center;flex-direction:column}.all .medalbox .med-infobox .med-info image{width:180rpx;height:180rpx}.all .medalbox .med-infobox .med-info .med-name{margin-top:10rpx;font-size:36rpx;font-weight:600}.all .medalbox .med-infobox .med-info .med-rul{margin-top:10rpx;font-size:34rpx}.all .medalbox .med-infobox .med-info .med-time{margin-top:10rpx;font-size:30rpx}
+.all{width:100vw;padding-left:40rpx;padding-right:40rpx;padding-top:20rpx;overflow-y:scroll}.all .infobox{width:100%;height:130rpx;display:flex;align-items:center}.all .infobox .avater{width:110rpx;height:110rpx;border-radius:50%}.all .infobox .info{height:130rpx;margin-left:20rpx;display:flex;flex-direction:column;justify-content:center}.all .infobox .info .name{font-size:34rpx}.all .infobox .info .but-box{margin-top:10rpx;width:130rpx;height:45rpx;display:flex;justify-content:center;align-items:center;border-radius:12rpx;border:gray solid 1px}.all .infobox .info .but-box image{width:26rpx;height:26rpx}.all .infobox .info .but-box .text{margin-left:5rpx;font-size:26rpx}.all .medalbox{width:100%;border:solid black 2px;border-radius:15rpx;margin-bottom:40rpx;margin-top:25rpx}.all .medalbox .med-text{margin-left:20rpx;font-size:32rpx;margin-top:10rpx}.all .medalbox .med-infobox{width:100%;display:flex;flex-wrap:wrap}.all .medalbox .med-infobox .med-info{width:50%;height:400rpx;display:flex;align-items:center;justify-content:center;flex-direction:column}.all .medalbox .med-infobox .med-info image{width:180rpx;height:180rpx}.all .medalbox .med-infobox .med-info .med-name{margin-top:10rpx;font-size:36rpx;font-weight:600}.all .medalbox .med-infobox .med-info .med-time{margin-top:10rpx;font-size:30rpx}.all .medalbox .med-infobox .med-rul{margin-top:10rpx;font-size:34rpx;margin-left:40rpx;margin-left:10rpx}.all .medalbox .med-infobox .title-title{font-size:40rpx;font-weight:600;width:100%;display:flex;justify-content:center}