會員資料功能更新

html/script_profiles.js

@@ -52,16 +52,34 @@ function renderView() {
                 <p><strong>${userInfo.user_info.left_sec}</strong><span set-lan="html:sec">秒</span></p>
             </div>
         </div>`;
+        // 使用者名稱
         const userName = `<h2 class="user-name text-white mt-4 fw-bold">Hello,${userInfo.user_info.userName}</h2>`;
+        // 已使用
         const usedtime=`<h1 class="text-center">${userInfo.user_info.total_sec}&ensp;<span style="font-size:15px;">秒</span></h1>`;
+        // 未使用
         const NotUsedTime=`<h1  class="text-center">${userInfo.user_info.left_sec}&ensp;<span style="font-size:15px;">秒</span></h1>`;
+        // user資訊
         const infContent=`
         <div class="inf-content">
             <p>${userInfo.user_info.userName}</p>
-            <p>abc***************0&nbsp;<a href="">更改密碼</a></p>
+            <p>***************&nbsp;<a href="">更改密碼</a></p>
             <p>${userInfo.user_info.email}</p>
         </div>`;
-       
+        // 歷史紀錄
+        // const historicalrecord 
+        var  historicalrecord=''
+        for (var i = 0; i < userInfo.video_info.length; i++) {
+            historicalrecord+='\
+            <tr>\
+            <td class="px-0">'+userInfo.video_info[i].time_stamp+'</td>\
+            <td class="px-0">'+userInfo.video_info[i].title+'</td>\
+            <td class="px-0 w-25">'+userInfo.video_info[i].duration+'</td>\
+          </tr>`\
+            ';
+         
+        }
+
+        $('.historical-content').html(historicalrecord); 
         $('.userinf').html(infContent);
         $('.userName').html(userName);
         $('.used-time').html(usedtime);
@@ -92,4 +110,10 @@ function checkLogin() {
 }
 
 
-checkLogin();
+checkLogin();
+$(".historical-record").hide();
+
+$( ".check-history" ).click(function() {
+  $(".historical-record").toggle();
+  $(".arrowdown").toggleClass("arrowdoup");
+  });

html/static/scss/style.css

@@ -1349,6 +1349,10 @@ body {
   font-weight: 900;
 }
 
+.userprofile .userprofile-content .user-information .historical-record td {
+  font-size: 15px;
+}
+
 .sidenav {
   height: 100%;
   width: 250px;

html/static/scss/style.scss

@@ -1222,6 +1222,9 @@ body {
 					color:#183790;
 					font-weight: 900;
 				}
+				td{
+					font-size: 15px;
+				}
 			}
 		}
 	}

html/user_profile2.html

@@ -158,17 +158,17 @@
                                     </div>
                                 </div>
                                 <div class="historical-record col-lg-12">
-                                    <div class="card p-4">
+                                    <div class="card p-3">
                                         <table class="table text-center">
                                             <thead>
                                               <tr>
                                                 <th scope="col">日期</th>
                                                 <th scope="col">標題</th>
-                                                <th scope="col">影片時間</th>
+                                                <th class="px-0" scope="col">影片時間</th>
                                               </tr>
                                             </thead>
-                                            <tbody>
-                                              <tr>
+                                            <tbody class="historical-content">
+                                              <!-- <tr>
                                                 <td>21/09/01</td>
                                                 <td>歐盟提「碳邊境稅」 台灣也將受碳稅影響</td>
                                                 <td>0:36</td>
@@ -192,7 +192,7 @@
                                                 <td>21/09/01</td>
                                                 <td>歐盟提「碳邊境稅」 台灣也將受碳稅影響</td>
                                                 <td>0:36</td>
-                                              </tr>
+                                              </tr> -->
                                             </tbody>
                                           </table>
                                     </div>