完善活动模块-详情和分享页

2025-05-14 11:00:22 +08:00
parent 994943b4df
commit 19c4fa5ecf
15 changed files with 520 additions and 78 deletions
--- a/view/molistar/modules/eventDetails/css/index.css
+++ b/view/molistar/modules/eventDetails/css/index.css
@@ -39,6 +39,7 @@ body {
  height: 0.5866666667rem;
  position: absolute;
  right: 0.24rem;
+  display: none;
 }

 .user_info {
@@ -54,6 +55,7 @@ body {
 .user_info .left .felx_box .avatar img {
  width: 0.9333333333rem;
  height: 0.9333333333rem;
+  border-radius: 50%;
 }
 .user_info .left .felx_box .box_right {
  margin-left: 0.16rem;
@@ -78,7 +80,7 @@ body {
  text-transform: none;
  line-height: 0.4533333333rem;
 }
-.user_info .right {
+.user_info .right_btn .right {
  background: #FFFFFF;
  border-radius: 0.4533333333rem;
  border: 0.0266666667rem solid #D9D9D9;
@@ -87,11 +89,11 @@ body {
  align-items: center;
  justify-content: center;
 }
-.user_info .right img {
+.user_info .right_btn .right img {
  width: 0.48rem;
  height: 0.48rem;
 }
-.user_info .right .Unsub {
+.user_info .right_btn .right .txt {
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 0.3466666667rem;
@@ -102,6 +104,9 @@ body {
  text-transform: none;
  margin-left: 0.1066666667rem;
 }
+.user_info .right_btn .right_Unsub, .user_info .right_btn .right_Sub, .user_info .right_btn .right_Participate {
+  display: none;
+}

 .banner {
  margin: 0.2666666667rem 0.4rem 0;
@@ -203,6 +208,7 @@ body {
 .sub_list .sub_box .info .avatar img {
  width: 0.9333333333rem;
  height: 0.9333333333rem;
+  border-radius: 50%;
 }
 .sub_list .sub_box .info .box_right {
  margin-left: 0.16rem;
@@ -216,6 +222,12 @@ body {
  font-style: normal;
  text-transform: none;
  line-height: 0.5333333333rem;
+  display: flex;
+  align-items: center;
+}
+.sub_list .sub_box .info .box_right .userLevelVo img {
+  width: 0.7733333333rem;
+  height: 0.3466666667rem;
 }
 .sub_list .sub_box .time {
  font-family: PingFang SC, PingFang SC;
@@ -226,4 +238,19 @@ body {
  text-align: right;
  font-style: normal;
  text-transform: none;
+}
+
+.gender {
+  width: 0.3733333333rem;
+  height: 0.3733333333rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #6BB3FF;
+  margin: 0 0.08rem;
+}
+.gender img {
+  width: 0.2133333333rem;
+  height: 0.2133333333rem;
 }
--- a/view/molistar/modules/eventDetails/css/index.scss
+++ b/view/molistar/modules/eventDetails/css/index.scss
@@ -49,6 +49,7 @@ body {
        height: px2rem(44);
        position: absolute;
        right: px2rem(18);
+        display: none;
    }
 }

@@ -67,6 +68,7 @@ body {
                img {
                    width: px2rem(70);
                    height: px2rem(70);
+                    border-radius: 50%;
                }
            }

@@ -98,32 +100,39 @@ body {
        }
    }

-    .right {
-        background: #FFFFFF;
-        border-radius: px2rem(34);
-        border: px2rem(2) solid #D9D9D9;
-        padding: px2rem(8) px2rem(18);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        img {
-            width: px2rem(36);
-            height: px2rem(36);
+    .right_btn{
+        .right {
+            background: #FFFFFF;
+            border-radius: px2rem(34);
+            border: px2rem(2) solid #D9D9D9;
+            padding: px2rem(8) px2rem(18);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            img {
+                width: px2rem(36);
+                height: px2rem(36);
+            }
+    
+            .txt {
+                font-family: PingFang SC, PingFang SC;
+                font-weight: 500;
+                font-size: px2rem(26);
+                color: #313131;
+                line-height: px2rem(36);
+                text-align: left;
+                font-style: normal;
+                text-transform: none;
+                margin-left: px2rem(8);
+            }
        }
-
-        .Unsub {
-            font-family: PingFang SC, PingFang SC;
-            font-weight: 500;
-            font-size: px2rem(26);
-            color: #313131;
-            line-height: px2rem(36);
-            text-align: left;
-            font-style: normal;
-            text-transform: none;
-            margin-left: px2rem(8);
+        .right_Unsub,.right_Sub,.right_Participate{
+            display: none;
        }
    }
+    
+
+    
 }

 .banner {
@@ -233,12 +242,13 @@ margin-bottom: px2rem(20);
                img {
                    width: px2rem(70);
                    height: px2rem(70);
+                    border-radius: 50%;
                }
            }

            .box_right {
                margin-left: px2rem(12);
-
+                
                .name {
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
@@ -248,6 +258,14 @@ margin-bottom: px2rem(20);
                    font-style: normal;
                    text-transform: none;
                    line-height: px2rem(40);
+                    display: flex;
+                align-items: center;
+                }
+                .userLevelVo{
+                    img{
+                        width: px2rem(58);
+                        height: px2rem(26);
+                    }
                }
            }
    }
@@ -262,4 +280,19 @@ font-style: normal;
 text-transform: none;
    }
 }
+}
+.gender{
+    width: px2rem(28);
+height: px2rem(28);
+border-radius: 50%;
+display: flex;
+align-items: center;
+justify-content: center;
+background: #6BB3FF;
+margin: 0 px2rem(6);
+img{
+    width: px2rem(16);
+    height: px2rem(16);
+}
+    // background: #FF80CC;
 }
--- a/view/molistar/modules/eventDetails/css/shareIndex.css
+++ b/view/molistar/modules/eventDetails/css/shareIndex.css
@@ -26,6 +26,9 @@ body {
  font-style: normal;
  text-transform: none;
  margin-top: 0.24rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .user_info .id_num {
  font-family: PingFang SC, PingFang SC;
@@ -140,4 +143,19 @@ body {
  justify-content: center;
  padding: 0.24rem 1.1733333333rem;
  margin: 0.5333333333rem 1.8666666667rem;
+}
+
+.gender {
+  width: 0.3733333333rem;
+  height: 0.3733333333rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #6BB3FF;
+  margin: 0 0.08rem;
+}
+.gender img {
+  width: 0.2133333333rem;
+  height: 0.2133333333rem;
 }
--- a/view/molistar/modules/eventDetails/css/shareIndex.scss
+++ b/view/molistar/modules/eventDetails/css/shareIndex.scss
@@ -32,6 +32,9 @@ text-align: center;
 font-style: normal;
 text-transform: none;
 margin-top: px2rem(18);
+display: flex;
+align-items: center;
+justify-content: center;
 }
 .id_num{
 font-family: PingFang SC, PingFang SC;
@@ -152,4 +155,18 @@ align-items: center;
 justify-content: center;
 padding: px2rem(18) px2rem(88);
 margin: px2rem(40) px2rem(140);
+}
+.gender{
+    width: px2rem(28);
+height: px2rem(28);
+border-radius: 50%;
+display: flex;
+align-items: center;
+justify-content: center;
+background: #6BB3FF;
+margin: 0 px2rem(6);
+img{
+    width: px2rem(16);
+    height: px2rem(16);
+}
 }
--- a/view/molistar/modules/eventDetails/images/boy.png
+++ b/view/molistar/modules/eventDetails/images/boy.png
--- a/view/molistar/modules/eventDetails/images/sub.png
+++ b/view/molistar/modules/eventDetails/images/sub.png
--- a/view/molistar/modules/eventDetails/images/woman.png
+++ b/view/molistar/modules/eventDetails/images/woman.png
--- a/view/molistar/modules/eventDetails/index.html
+++ b/view/molistar/modules/eventDetails/index.html
@@ -28,69 +28,74 @@
          </div>
          <div class="box_right">
            <div class="name">Namename</div>
-            <div class="id">ID:4451212</div>
+            <div class="id">ID: <span class="erbanNo"></span></div>
          </div>
        </div>
      </div>
-      <div class="right">
-        <img src="./images/unsub.png" alt="" />
-        <div class="Unsub">Unsub</div>
+      <div class="right_btn">
+        <div class="right_Unsub">
+          <div class="right">
+            <img src="./images/unsub.png" alt="" />
+            <div class="Unsub txt">Unsub</div>
+          </div>
+        </div>
+        <div class="right_Sub">
+          <div class="right">
+            <img src="./images/sub.png" alt="" />
+            <div class="Sub txt">Sub</div>
+          </div>
+        </div>
+        <div class="right_Participate">
+          <div class="right">
+            <img src="./images/home.png" alt="" />
+            <div class="Participate txt">Participate</div>
+          </div>
+        </div>
      </div>
    </div>
    <div class="banner">
      <img src="" alt="" />
    </div>
-    <div class="title_name">Singing competition. Welcome to participate!!</div>
+    <div class="title_name"></div>
    <div class="active_info">
      <div class="time">
        <img src="./images/time.png" alt="" />
-        Start Time:<span>2025-02-12 21:00</span>
+        <span class="Start_Time">Start Time</span> :<span
+          class="eventStartTimeStr"
+          ></span
+        >
      </div>
      <div class="room">
        <img src="./images/home.png" alt="" />
-        Room ID:<span>9854522</span>
+        <span class="Room_ID">Room ID</span> :<span class="roomErbanNo"
+          ></span
+        >
      </div>
    </div>
    <div class="content_description">
-      With songs as wings, sing out the future! Seek the brightest stars and let
-      the world hear your voice! With songs as wings, sing out the future! Seek
-      the brightest stars and let the world hear your voice!
    </div>
    <div class="sub_list">
-      <div class="title_num">Sub (321)</div>
-      <div class="sub_box">
+      <div class="title_num"> <span class="Sub">Sub</span>(<span class="subNum"></span>)</div>
+      <div class="sub_content"></div>
+      <!-- <div class="sub_box">
        <div class="info">
          <div class="avatar">
            <img src="" alt="" />
          </div>
          <div class="box_right">
-            <div class="name">Namename</div>
+            <div class="name">
+              Namename
+              <div class="gender boy">
+                <img src="./images/boy.png" alt="" />
+              </div>
+            </div>
+            <div class="userLevelVo">
+              <img src="https://image.pekolive.com/Wealth_03.png" alt="" />
+            </div>
          </div>
        </div>
        <div class="time">2024-01-14 12:00</div>
-      </div>
-      <div class="sub_box">
-        <div class="info">
-          <div class="avatar">
-            <img src="" alt="" />
-          </div>
-          <div class="box_right">
-            <div class="name">Namename</div>
-          </div>
-        </div>
-        <div class="time">2024-01-14 12:00</div>
-      </div>
-      <div class="sub_box">
-        <div class="info">
-          <div class="avatar">
-            <img src="" alt="" />
-          </div>
-          <div class="box_right">
-            <div class="name">Namename</div>
-          </div>
-        </div>
-        <div class="time">2024-01-14 12:00</div>
-      </div>
+      </div> -->
    </div>
  </body>
 </html>
--- a/view/molistar/modules/eventDetails/js/index.js
+++ b/view/molistar/modules/eventDetails/js/index.js
@@ -1,5 +1,6 @@
 let urlPrefix = getUrlPrefix()
 let browser = checkVersion()
+const urlData = getQueryString();
 let env = EnvCheck();
 if (env == 'test') {
    new VConsole();
@@ -53,25 +54,68 @@ $(function () {
        langReplace = window.lang.replace;
        localLang = window.lang;
        translateFun();
-        // getData()
-
+        getData()
+        getSubList();
    }, 100)

 })
 function translateFun() {
    var langReplace = window.lang.replace;
    var localLang = window.lang;
-    $('.Confirm').html(langReplace(localLang.demoModule.Confirm));
+    $('.page_title').html(langReplace(localLang.demoModule.page_title));
+    $('.active_info .time .Start_Time').html(langReplace(localLang.demoModule.Start_Time));
+    $('.active_info .room .Room_ID').html(langReplace(localLang.demoModule.Room_ID));
+    $('.Unsub').html(langReplace(localLang.demoModule.Unsub));
+    $('.Sub').html(langReplace(localLang.demoModule.Sub));
+    $('.Participate').html(langReplace(localLang.demoModule.Participate));
+    
 }
 function getData() {
    showLoading();
    networkRequest({
        type: "GET",
-        url: urlPrefix + "/bdGuild/center",
+        url: urlPrefix + "/userevent/detail",
        data: {
+            eventId: urlData.eventId,
+            uid: pubInfo.uid
+            // uid:3203
        },
        success: function (res) {
            hideLoading(layerIndex);
+            if (res.code == 200) {
+                $('.user_info .left .felx_box .avatar img').attr('src', res.data.avatar)
+                $('.user_info .left .felx_box .box_right .name').text(res.data.nick)
+                $('.user_info .left .felx_box .box_right .roomErbanNo').text(res.data.erbanNo)
+                $('.banner img').attr('src', res.data.eventBanner)
+                $('.erbanNo').text(res.data.erbanNo)
+                $('.eventStartTimeStr').text(res.data.eventStartTimeStr)
+                $('.title_name').text(res.data.eventTopic)
+                $('.content_description').text(res.data.eventDetail)
+                $('.subNum').text(res.data.subNum)
+                $('.right_Participate').attr('roomUid',res.data.roomUid)
+                if (res.data.eventStatus == 1) {
+                    if (res.data.liveStatus == 1 || res.data.liveStatus == 2) {
+                        $('.back .share').show()
+                    }
+                    if(res.data.liveStatus == 1 || res.data.liveStatus == 3){
+                        if(res.data.subStatus){
+                            $('.right_Sub').show();
+                            $('.right_Unsub').hide();
+                        }else{
+                            $('.right_Unsub').show();
+                            $('.right_Sub').hide();
+                        }
+                    }else{
+                        $('.right_Sub').hide();
+                        $('.right_Unsub').hide();
+                        $('.right_Participate').show();
+                    }
+                } else {
+                    $('.user_info .right_btn').hide()
+                }
+            } else {
+                toastMsg(res.message)
+            }
        },
        error: function (res) {
            console.log(res, "报错啦");
@@ -79,7 +123,195 @@ function getData() {
        },
    })
 }
+var page = 1;
+var pageSize = 20;
+var canNext = true;
+var subList = [];
+var resPageLength;
+function getSubList() {
+    showLoading();
+    networkRequest({
+        type: "GET",
+        url: urlPrefix + "/userevent/subList",
+        data: {
+            eventId: urlData.eventId,
+            uid: pubInfo.uid,
+            // uid: 3838,
+            page,
+            pageSize
+        },
+        success: function (res) {
+            hideLoading(layerIndex);
+            if (res.code == 200) {
+                $('.sub_content .sub_box').remove();
+                let str = ''
+                resPageLength = res.data.subUser.length;
+                subList = [...subList, ...res.data.subUser]
+                subList.forEach((item, i) => {
+                    str += `
+                         <div class="sub_box">
+        <div class="info">
+          <div class="avatar">
+            <img src="${item.avatar}" alt="" />
+          </div>
+          <div class="box_right">
+            <div class="name"
+            >${item.nick}
+            <div class="gender" style='background-color:${item.gender == 1 ? '#6BB3FF' : '#FF80CC'}'>
+                <img src="${item.gender == 1 ? './images/boy.png' : './images/woman.png'}" alt="" />
+              </div>
+            </div>
+            <div class="userLevelVo">
+              <img src="${item.userLevelVo.experUrl}" alt="" />
+            </div>
+          </div>
+        </div>
+        <div class="time">${item.subTimeStr}</div>
+      </div>
+                    `
+                    
+                })
+                $('.sub_content').append(str)
+            } else {
+                toastMsg(res.message)
+            }
+        },
+        error: function (res) {
+            hideLoading(layerIndex);
+        },
+    })
+}
+function subSun(subStatus) {
+    showLoading();
+    networkRequest({
+        type: "POST",
+        url: urlPrefix + "/userevent/sub",
+        data: {
+            eventId: urlData.eventId,
+            // uid: 3203,
+            subStatus,
+            uid: pubInfo.uid
+        },
+        success: function (res) {
+            hideLoading(layerIndex);
+            if (res.code == 200) {
+                if (subStatus == 1) {
+                    toastMsg(langReplace(localLang.demoModule.Sub_successful))
+
+                } else {
+                    toastMsg(langReplace(localLang.demoModule.Cancel_successful))
+
+                }
+                page = 1;
+                canNext = true;
+                subList = [];
+                resPageLength = 0;
+                getSubList();
+                getData();
+            } else {
+                toastMsg(res.message)
+            }
+        },
+        error: function (res) {
+            hideLoading(layerIndex);
+        },
+    })
+}
+// 订阅
+$('.right_Unsub').click(function () {
+    subSun(1);
+})
+// 取消订阅
+$('.right_Sub').click(function () {
+    subSun(0);
+})
 $('.share').click(function () {
-    window.location.href = `./shareIndex.html`
-    return
-})
+    genLink();
+    shareData();
+    // window.location.href = `./shareIndex.html`
+    // return
+})
+function genLink(){
+    showLoading();
+    networkRequest({
+        type: "POST",
+        url: urlPrefix + "/userevent/genLink",
+        data: {
+            eventId: urlData.eventId,
+            // pub_uid: 3838,
+            pub_uid: pubInfo.uid
+        },
+        success: function (res) {
+            hideLoading(layerIndex);
+            if (res.code == 200) {
+                let text = res.data;
+                if (navigator.clipboard) {
+                    // 使用 navigator.clipboard API
+                    navigator.clipboard.writeText(text)
+                      .then(function () {
+                        toastMsg(langReplace(localLang.demoModule.Copy_Successfully))
+                      })
+                      .catch(function (error) {
+                      });
+                  } else {
+                    // 使用 document.execCommand("copy") 作为备用方案
+                    var $temp = $("<textarea>");
+                    $("body").append($temp);
+                    $temp.val(text).select();
+                    document.execCommand("copy");
+                    $temp.remove();
+                    toastMsg(langReplace(localLang.demoModule.Copy_Successfully))
+                  }
+            } else {
+                toastMsg(res.message)
+            }
+        },
+        error: function (res) {
+            hideLoading(layerIndex);
+        },
+    })
+}
+function shareData() {
+    networkRequest({
+        type: "POST",
+        url: urlPrefix + "/userevent/shareData",
+        data: {
+            eventId: urlData.eventId,
+            // uid: 3838,
+            uid: pubInfo.uid
+        },
+        success: function (res) {
+            if (res.code == 200) {
+            } else {
+                toastMsg(res.message)
+            }
+        },
+        error: function (res) {
+            hideLoading(layerIndex);
+        },
+    })
+}
+// 跳轉主播房間
+$('.right_Participate').click(function () {
+    let roomUid = $(this).attr('roomUid');
+    if (browser.ios) {
+        window.webkit.messageHandlers.openRoom.postMessage(roomUid);
+    } else if (browser.android) {
+        if (androidJsObj && typeof androidJsObj === 'object') {
+            window.androidJsObj.openRoom(roomUid);
+        }
+    }
+})
+// 页面触底 分页加载
+$(window).scroll(function () {
+    if ($(this).scrollTop() + $(this).height() >= $(document).height() - 5) {
+        console.log(canNext);
+        if (canNext && resPageLength == pageSize) {
+            canNext = false
+            pageNo++;
+            getSubList();
+        } else {
+            // toastMsg("No more~");
+        }
+    }
+});
--- a/view/molistar/modules/eventDetails/js/shareIndex.js
+++ b/view/molistar/modules/eventDetails/js/shareIndex.js
@@ -45,10 +45,62 @@ $(function () {
        langReplace = window.lang.replace;
        localLang = window.lang;
        translateFun();
-        // getData()
+        getData()
    }, 100)

 })
+function translateFun() {
+    var langReplace = window.lang.replace;
+    var localLang = window.lang;
+    $('.active_info .time .Start_Time').html(langReplace(localLang.demoModule.Start_Time));
+    $('.active_info .room .Room_ID').html(langReplace(localLang.demoModule.Room_ID));
+    $('.Event_swing').html(langReplace(localLang.demoModule.Event_swing));
+    $('.Open_Molistar').html(langReplace(localLang.demoModule.Open_Molistar));
+}
+function geteventId (){
+    var path = window.location.pathname;
+    code = path.split("/")[1];
+    return code
+}
+function getData() {
+   let eventId =  geteventId();
+   console.log(eventId,'--------eventId')
+    showLoading();
+    networkRequest({
+        type: "GET",
+        url: urlPrefix + "/userevent/detail",
+        data: {
+            eventId,
+            // uid:3203
+        },
+        success: function (res) {
+            hideLoading(layerIndex);
+            if (res.code == 200) {
+                $('.user_info .avatar img').attr('src', res.data.avatar)
+                $('.user_info .Namename .nick').text(res.data.nick)
+                if(res.data.gender == 1){
+                    $('.gender img').attr('src', './images/boy.png')
+                    $('.gender').css('background', '#6BB3FF')
+                }else{
+                    $('.gender img').attr('src', './images/woman.png')
+                    $('.gender').css('background', '#FF80CC')
+                }
+                $('.erbanNo').text(res.data.erbanNo)
+                $('.banner img').attr('src', res.data.eventBanner)
+                $('.title_txt').text(res.data.eventTopic)
+                $('.content_description').text(res.data.eventDetail)
+                $('.roomErbanNo').text(res.data.roomErbanNo)
+                $('.eventStartTimeStr').text(res.data.eventStartTimeStr)
+                
+            } else {
+                toastMsg(res.message)
+            }
+        },
+        error: function (res) {
+            hideLoading(layerIndex);
+        },
+    })
+}
 $(".foot_btn").click(function (event) {
    event.preventDefault(); // 阻止默认行为
  
--- a/view/molistar/modules/eventDetails/local/ar.js
+++ b/view/molistar/modules/eventDetails/local/ar.js
@@ -2,6 +2,19 @@
 langAr = {
    // 模块
    demoModule: {
+        page_title:'تفاصيل الحدث',
+        Unsub:'إلغاء الاشتراك',
+        Sub:'فرعي',
+        Participate:'شارك',
+        Start_Time:'وقت البدء',
+        Event_starting:'بدء الحدث',
+        Event_ended:'انتهاء الحدث',
+        Room_ID:'معرف الغرفة',
+        Sub_successful:'تم الاشتراك بنجاح',
+        Cancel_successful:'تم الإلغاء بنجاح',
+        Event_swing:'الحدث في كامل نشاطه، انقر للانضمام الآن! ! !',
+        Open_Molistar:'يفتح',
+        Copy_Successfully:'تم النسخ بنجاح',

    }
 }
--- a/view/molistar/modules/eventDetails/local/en.js
+++ b/view/molistar/modules/eventDetails/local/en.js
@@ -2,6 +2,18 @@
 langEn = {
    // 模块
    demoModule: {
-
+        page_title:'Event Details',
+        Unsub:'Unsub',
+        Sub:'Sub',
+        Participate:'Participate',
+        Start_Time:'Start Time',
+        Event_starting:'Event starting',
+        Event_ended:'Event ended',
+        Room_ID:'Room ID',
+        Sub_successful:'Sub successful',
+        Cancel_successful:'Cancel successful',
+        Event_swing:'Event is in full swing, click to join now!!!',
+        Open_Molistar:'Open Molistar',
+        Copy_Successfully:'Copy Successfully',
    }
 }
--- a/view/molistar/modules/eventDetails/local/tr.js
+++ b/view/molistar/modules/eventDetails/local/tr.js
@@ -2,5 +2,19 @@
 langTr = {
    // 模块
    demoModule: {
+        page_title:'Etkinlik Detayları',
+        Unsub:'Unsub',
+        Sub:'Alt',
+        Participate:'Katılmak',
+        Start_Time:'Başlangıç Zamanı',
+        Event_starting:'Etkinlik başlangıcı',
+        Event_ended:'Etkinlik sona erdi',
+        Room_ID:'Oda Kimliği',
+        Sub_successful:'Alt başarılı',
+        Cancel_successful:'İptal başarılı',
+        Event_swing:'Etkinlik tüm hızıyla devam ediyor, hemen katılmak için tıklayın! ! !',
+        Open_Molistar:`Molistar'ı açın`,
+        Copy_Successfully:'Kopyalama Başarıyla Gerçekleştirildi',
+
    }
 }
--- a/view/molistar/modules/eventDetails/local/zh.js
+++ b/view/molistar/modules/eventDetails/local/zh.js
@@ -2,5 +2,19 @@
 langZh = {
    // 模塊
    demoModule: {
+        page_title:'活動詳細資訊',
+        Unsub:'取消訂閱',
+        Sub:'加入',
+        Participate:'參與活動',
+        Start_Time:'開始時間',
+        Event_starting:'活動開始',
+        Event_ended:'活動結束',
+        Room_ID:'房間 ID',
+        Sub_successful:'訂閱成功',
+        Cancel_successful:'取消成功',
+        Event_swing:'活动正在火热进行中，点击立即加入！！！',
+        Open_Molistar:'打开Molistar',
+        Copy_Successfully:'複製成功',
+
    }
 }
--- a/view/molistar/modules/eventDetails/shareIndex.html
+++ b/view/molistar/modules/eventDetails/shareIndex.html
@@ -19,10 +19,15 @@
        <div class="avatar">
          <img src="" alt="" />
        </div>
-        <div class="Namename">Namename</div>
-        <div class="id_num">ID:4451212</div>
+        <div class="Namename">
+         <span class="nick"></span> 
+          <div class="gender">
+            <img src="./images/boy.png" alt="" />
+          </div>
+        </div>
+        <div class="id_num">ID: <span class="erbanNo"></span> </div>
      </div>
-      <div class="title_tip">
+      <div class="title_tip Event_swing">
        A room activity has been held. Let's join in!!
      </div>
      <div class="banner">
@@ -32,11 +37,11 @@
      <div class="active_info">
        <div class="time">
          <img src="./images/time.png" alt="" />
-          Start Time:<span>2025-02-12 21:00</span>
+         <span class="Start_Time">Start Time</span> :<span class="eventStartTimeStr">2025-02-12 21:00</span>
        </div>
        <div class="room">
          <img src="./images/home.png" alt="" />
-          Room ID:<span>9854522</span>
+         <span class="Room_ID">Room ID</span> :<span class="roomErbanNo"></span>
        </div>
      </div>
      <div class="content_description">
@@ -44,7 +49,7 @@
        the world hear your voice! With songs as wings, sing out the future! Seek
        the brightest stars and let the world hear your voice!
      </div>
-      <div class="foot_btn">Open Molistar</div>
+      <div class="foot_btn Open_Molistar">Open Molistar</div>
    </div>
  </body>
 </html>