commit

src/main/resources/views/mobile/mine/index.html

@@ -12,58 +12,84 @@ layout("/mobile/platform.html"){
         line-height: 20px;
         font-size: 12px;
     }
-    .van-cell {
+
-        padding: 8px 8px;
-    }
     .main_content {
-        height: 290px;
+        height: 260px;
-        background: linear-gradient(to top right, rgb(238, 163, 175), rgb(149, 214, 240));
+        background-color: #4298FB;
-        border-radius: 0 0 20px 20px;
+        border-bottom-left-radius: 50% 30px;
+        border-bottom-right-radius: 50% 30px;
     }
-    .user_info_container {
+
-        display: flex;
+    .year {
-        justify-content: space-between;
+        padding: 50px 0 0 30px;
-        align-items: center;
+        font-size: 22px;
-        padding: 40px 30px 20px;
+        color: white;
-    }
-    .basic {
         font-weight: bold;
     }
-    .avatar {
+
-        width: 50px;
+    .basic {
-        height: 50px;
+        margin: 20px 20px 0 30px;
+        font-weight: bold;
+        color: #264260;
+        display: flex;
+        align-items: flex-end;
+        justify-content: space-between;
     }
-    .count_content {
+
-        text-align: center;
+    .activity_count {
-        margin-bottom: 8px;
+        height: 260px;
-        color: white;
+        margin: 40px 20px 10px 20px;
-    }
+        background: url("/assets/mobile/img/mine/back.png") no-repeat;
-    .user_info_form {
+        background-size: contain;
-        position: relative;
-        top: -55px;
-    }
-    .query {
-        text-align: right;
-        color: white;
         font-size: 14px;
-        margin-right: 20px;
     }
-    .van-tabs__nav--line {
+
-        background-color: transparent !important;
+    .activity_count_year {
+        padding: 20px 0 0 20px;
     }
-    .van-tab--active {
+
+    .activity_count_parent_div {
+        display: grid; /* 使用 Grid 布局 */
+        grid-template-columns: repeat(2, 1fr); /* 创建两列，每列占据可用空间的等分 */
+        gap: 10px; /* 设置子元素之间的间隔 */
+        font-size: 13px;
+        padding: 0 30px;
+    }
+    .activity_count_child_div {
+        text-align: center;
+    }
+    .activity_count_child_div div:nth-child(1) {
+        color: #1B6FC5;
+        font-size: 26px;
+        font-weight: bold;
+    }
+    .activity_type_parent_div {
+        display: grid; /* 使用 Grid 布局 */
+        grid-template-columns: repeat(2, 1fr); /* 创建两列，每列占据可用空间的等分 */
+        gap: 10px; /* 设置子元素之间的间隔 */
+        margin: 0 20px;
+    }
+    .activity_type_child_div{
+        position: relative;
+    }
+    .activity_type_child_div div {
+        position: absolute;
+        top: 16px;
+        left: 20px;
+        font-size: 20px;
         color: white;
+        font-weight: bold;
     }
-    .van-tab {
+    .cover {
-        color: white;
+        margin: 0 10px;
+        display: flex;
+        padding: 6px;
+        font-size: 14px;
     }
-    .van-cell__title {
+    .cover img {
-        max-width: 60px;
-    }
-    img {
         border-radius: 10px;
     }
-    .van-image__error, .van-image__loading {
+    .cover .van-image__error {
         border-radius: 10px;
     }
     .activity_name {
@@ -71,22 +97,10 @@ layout("/mobile/platform.html"){
     }
     .activity_time {
         color: grey;
+        font-size: 13px;
     }
-    .van-empty {
+    .van-divider {
-        position: relative;
+        margin: 6px 0;
-        transform: revert;
-        left: 0;
-    }
-    .activity_tooltip {
-        margin-bottom: 10px;
-        color: white;
-        padding: 0 10px;
-        font-size: 15px;
-        text-indent: 1em;
-        line-height: 20px;
-    }
-    .activity_count {
-        color: #EE0A24;
     }
 
 </style>
@@ -94,34 +108,68 @@ layout("/mobile/platform.html"){
 <div id="app" v-cloak>
 
     <div class="main_content">
-        <div class="user_info_container">
+        <div class="year">
+            <van-icon name="notes-o" style="position: relative; top: 3px"></van-icon>
+            <span @click="yearShow = true">{{ pageForm.year ? pageForm.year : '全部' }}</span>
+        </div>
         <div class="basic">
+            <div>
                 <div>Hi~</div>
                 <div>${@shiro.getPrincipalProperty('username')}老师，欢迎您！</div>
             </div>
-            <div>
+            <div @click="showInfo(0)" style="color: white; font-size: 18px">
-                <div class="avatar">
+                个人信息
-                    <img :src="avatar" fit="cover"/>
+            </div>
+        </div>
+        <div class="activity_count">
+            <div class="activity_count_year">{{ pageForm.year ? pageForm.year : '全部' }}年度</div>
+            <div style="margin: 10px 0 20px 60px">您一共参与了</div>
+            <div class="activity_count_parent_div">
+                <div class="activity_count_child_div">
+                    <div>{{activityCount.trainVideoCount}}</div>
+                    <div>次培训教育</div>
+                </div>
+                <div class="activity_count_child_div">
+                    <div>{{activityCount.trainSignUpCount}}</div>
+                    <div>次品牌活动</div>
+                </div>
+                <div class="activity_count_child_div">
+                    <div>{{activityCount.sportActivityCount}}</div>
+                    <div>次体育活动</div>
+                </div>
+                <div class="activity_count_child_div">
+                    <div>{{activityCount.cultureActivityCount}}</div>
+                    <div>次文化活动</div>
                 </div>
             </div>
         </div>
-        <div class="activity_tooltip">
+        <div class="activity_type_parent_div">
-            {{pageForm.year ? pageForm.year : '全部'}}年度， 您一共参与了，
+            <div @click="showInfo(1)" class="activity_type_child_div">
-            <span class="activity_count">{{activityCount.trainVideoCount}}</span>次培训教育，
+                <img src="/assets/mobile/img/mine/1.png" style="width: 100%"/>
-            <span class="activity_count">{{activityCount.trainSignUpCount}}</span>次品牌活动，
+                <div>培训教育</div>
-            <span class="activity_count">{{activityCount.sportActivityCount}}</span>次体育活动，
-            <span class="activity_count">{{activityCount.cultureActivityCount}}</span>次文化活动。
             </div>
-        <div class="count_content">
+            <div @click="showInfo(2)" class="activity_type_child_div">
-            <van-tabs v-model="activeName" @click="tabClick">
+                <img src="/assets/mobile/img/mine/2.png" style="width: 100%"/>
-                <van-tab :title="item" :name="index" v-for="(item,index) in itemList"></van-tab>
+                <div>品牌活动</div>
-            </van-tabs>
             </div>
-        <div class="query">
+            <div @click="showInfo(3)" class="activity_type_child_div">
-            <span @click="openQuery()">年度筛选</span>
+                <img src="/assets/mobile/img/mine/3.png" style="width: 100%"/>
-            <van-icon name="exchange" style="position: relative; top: 2px"></van-icon>
+                <div>体育活动</div>
             </div>
-        <div class="van-doc-card" style="margin-top: 6px">
+            <div @click="showInfo(4)" class="activity_type_child_div">
+                <img src="/assets/mobile/img/mine/4.png" style="width: 100%"/>
+                <div>文化活动</div>
+            </div>
+        </div>
+    </div>
+
+    <van-popup v-model:show="popupShow" position="right" :style="{ width: '100%', height: '100%' }">
+        <van-nav-bar
+                :title="infoTitle"
+                left-arrow
+                placeholder
+                @click-left="popupShow = false">
+        </van-nav-bar>
         <template v-if="activeName === 0">
             <van-cell icon="coupon-o" title="工号" :value="userInfo.loginname"></van-cell>
             <van-cell icon="manager-o" title="性别" :value="userInfo.sex"></van-cell>
@@ -130,18 +178,26 @@ layout("/mobile/platform.html"){
             <van-cell icon="cluster-o" title="所属工会" :value="userInfo.unionname"></van-cell>
         </template>
         <div style="max-height: calc(100vh - 130px - 44px - 60px); overflow: auto" v-else-if="activeName !== 0">
-                <div v-if="activityData.length > 0" v-for="item in activityData" style="display: flex; padding: 6px">
+            <div v-if="activityData.length > 0" v-for="item in activityData">
+                <div class="cover">
                     <van-image width="100" height="70"
                                :src="getImageUrl(item.cover)">
                     </van-image>
                     <div class="ml10" style="display: flex; flex-direction: column; justify-content: space-between;">
-                        <div class="activity_name">{{ item.activityName }}</div>
+                        <div class="activity_name">
+                            <van-tag type="primary" v-if="moment().unix() < moment(item.activityStartTime).unix()">未开始</van-tag>
+                            <van-tag type="primary" v-else-if="moment().unix() >= moment(item.activityStartTime).unix() && moment().unix() <= moment(item.activityEndTime).unix()">进行中</van-tag>
+                            <van-tag type="primary" v-else-if="moment().unix() > moment(item.activityEndTime).unix()">已结束</van-tag>
+                            <span>{{ item.activityName }}</span>
+                        </div>
                         <div class="activity_time">
                             <div>开始时间：{{ moment(item.activityStartTime).format('YYYY-MM-DD HH:mm') }}</div>
                             <div>结束时间：{{ moment(item.activityEndTime).format('YYYY-MM-DD HH:mm') }}</div>
                         </div>
                     </div>
                 </div>
+                <van-divider></van-divider>
+            </div>
             <van-empty
                     v-if="activityData.length === 0"
                     class="custom-image"
@@ -149,8 +205,7 @@ layout("/mobile/platform.html"){
                     description="暂无数据"
             ></van-empty>
         </div>
-        </div>
+    </van-popup>
-    </div>
 
     <van-action-sheet
             v-model="yearShow"
@@ -168,44 +223,48 @@ layout("/mobile/platform.html"){
         el: '#app',
         data() {
             return {
-                avatar: '',
+                infoTitle: '个人基本信息',
+                popupShow: false,
                 yearActions: [],
                 yearShow: false,
                 pageForm: {
                     year: new Date().getFullYear(),
                 },
-                itemList: ['个人信息', '培训教育', '品牌活动', '体育活动', '文化活动'],
                 activeName: 0,
                 userInfo: {},
                 activityData: [],
                 activityCount: {},
             }
         },
-        components: {
-            'mobile-member-info': httpVueLoader('/components/mobile/member/MobileMemberInfo.vue?v=' + new Date().getTime()),
-        },
         methods: {
-            async tabClick(name, title) {
+            async showInfo(name) {
+                this.activeName = name
                 if(name === 0) {
-                    return
+                    this.infoTitle = '个人基本信息'
-                }
+                } else {
                     let method
                     switch (name) {
                         case 1:
+                            this.infoTitle = '培训教育'
                             method = '/getTrainVideo'
                             break
                         case 2:
+                            this.infoTitle = '品牌活动'
                             method = '/getTrainActivity'
                             break
                         case 3:
+                            this.infoTitle = '体育活动'
                             method = '/getSportActivity'
                             break
                         case 4:
+                            this.infoTitle = '文化活动'
                             method = '/getCultureActivity'
                             break
                     }
                     const resp = await $.post('/mobile/mine' + method, this.pageForm)
                     this.activityData = resp.data
+                }
+                this.popupShow = true
                 this.$forceUpdate()
             },
             getImageUrl(url) {
@@ -216,22 +275,14 @@ layout("/mobile/platform.html"){
                     return FILE_DOMAIN + '/fileStreamPreview?id=' + url
                 }
             },
-            openQuery() {
-                this.yearShow = true
-            },
             async yearSelect(action, index) {
                 if (action.name === '全部') {
                     this.pageForm.year = null
                 } else {
                     this.pageForm.year = action.name.replaceAll('年', '')
                 }
-                await this.tabClick(this.activeName)
                 await this.getActivityCount()
             },
-            getShortName() {
-                const userName = "${@shiro.getPrincipalProperty('username')}"
-                return userName.length > 2 ? userName.substring(0, 2) : userName.substring(0, 1)
-            },
             async getUserInfo() {
                 const resp = await $.get('/platform/member/common/userInfo', {userId: "${@shiro.getPrincipalProperty('id')}"})
                 this.userInfo = resp.data
@@ -243,8 +294,6 @@ layout("/mobile/platform.html"){
             async init() {
                 await this.getUserInfo()
                 await this.getActivityCount()
-                const sex = "${@shiro.getPrincipalProperty('sex')}"
-                this.avatar = sex === '女' ? '/avatar_girl.svg' : '/avatar_boy.svg'
             }
         },
         async created() {