commit

2024-11-27 14:41:32 +08:00
parent bdfda1e08e
commit ad1b4e1e71
8 changed files with 176 additions and 127 deletions
@@ -12,58 +12,84 @@ layout("/mobile/platform.html"){
        line-height: 20px;
        font-size: 12px;
    }
-    .van-cell {
-        padding: 8px 8px;
-    }
+
    .main_content {
-        height: 290px;
-        background: linear-gradient(to top right, rgb(238, 163, 175), rgb(149, 214, 240));
-        border-radius: 0 0 20px 20px;
+        height: 260px;
+        background-color: #4298FB;
+        border-bottom-left-radius: 50% 30px;
+        border-bottom-right-radius: 50% 30px;
    }
-    .user_info_container {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 40px 30px 20px;
-    }
-    .basic {
+
+    .year {
+        padding: 50px 0 0 30px;
+        font-size: 22px;
+        color: white;
        font-weight: bold;
    }
-    .avatar {
-        width: 50px;
-        height: 50px;
+
+    .basic {
+        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;
-        margin-bottom: 8px;
-        color: white;
-    }
-    .user_info_form {
-        position: relative;
-        top: -55px;
-    }
-    .query {
-        text-align: right;
-        color: white;
+
+    .activity_count {
+        height: 260px;
+        margin: 40px 20px 10px 20px;
+        background: url("/assets/mobile/img/mine/back.png") no-repeat;
+        background-size: contain;
        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 {
-        color: white;
+    .cover {
+        margin: 0 10px;
+        display: flex;
+        padding: 6px;
+        font-size: 14px;
    }
-    .van-cell__title {
-        max-width: 60px;
-    }
-    img {
+    .cover 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 {
-        position: relative;
-        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;
+    .van-divider {
+        margin: 6px 0;
    }

 </style>
@@ -94,63 +108,104 @@ layout("/mobile/platform.html"){
 <div id="app" v-cloak>

    <div class="main_content">
-        <div class="user_info_container">
-            <div class="basic">
+        <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 class="avatar">
-                    <img :src="avatar" fit="cover"/>
+            <div @click="showInfo(0)" style="color: white; font-size: 18px">
+                个人信息
+            </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">
-            {{pageForm.year ? pageForm.year : '全部'}}年度， 您一共参与了，
-            <span class="activity_count">{{activityCount.trainVideoCount}}</span>次培训教育，
-            <span class="activity_count">{{activityCount.trainSignUpCount}}</span>次品牌活动，
-            <span class="activity_count">{{activityCount.sportActivityCount}}</span>次体育活动，
-            <span class="activity_count">{{activityCount.cultureActivityCount}}</span>次文化活动。
+        <div class="activity_type_parent_div">
+            <div @click="showInfo(1)" class="activity_type_child_div">
+                <img src="/assets/mobile/img/mine/1.png" style="width: 100%"/>
+                <div>培训教育</div>
+            </div>
+            <div @click="showInfo(2)" class="activity_type_child_div">
+                <img src="/assets/mobile/img/mine/2.png" style="width: 100%"/>
+                <div>品牌活动</div>
+            </div>
+            <div @click="showInfo(3)" class="activity_type_child_div">
+                <img src="/assets/mobile/img/mine/3.png" style="width: 100%"/>
+                <div>体育活动</div>
+            </div>
+            <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 class="count_content">
-            <van-tabs v-model="activeName" @click="tabClick">
-                <van-tab :title="item" :name="index" v-for="(item,index) in itemList"></van-tab>
-            </van-tabs>
-        </div>
-        <div class="query">
-            <span @click="openQuery()">年度筛选</span>
-            <van-icon name="exchange" style="position: relative; top: 2px"></van-icon>
-        </div>
-        <div class="van-doc-card" style="margin-top: 6px">
-            <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>
-                <van-cell icon="phone-o" title="手机号" :value="userInfo.mobile"></van-cell>
-                <van-cell icon="bar-chart-o" title="所属单位" :value="userInfo.unitname"></van-cell>
-                <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>
+
+    <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>
+            <van-cell icon="phone-o" title="手机号" :value="userInfo.mobile"></van-cell>
+            <van-cell icon="bar-chart-o" title="所属单位" :value="userInfo.unitname"></van-cell>
+            <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">
+                <div class="cover">
                    <van-image width="100" height="70"
-                            :src="getImageUrl(item.cover)">
+                               :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-empty
-                        v-if="activityData.length === 0"
-                        class="custom-image"
-                        image="/none.svg"
-                        description="暂无数据"
-                ></van-empty>
+                <van-divider></van-divider>
            </div>
+            <van-empty
+                    v-if="activityData.length === 0"
+                    class="custom-image"
+                    image="/none.svg"
+                    description="暂无数据"
+            ></van-empty>
        </div>
-    </div>
+    </van-popup>

    <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
                }
-                let method
-                switch (name) {
-                    case 1:
-                        method = '/getTrainVideo'
-                        break
-                    case 2:
-                        method = '/getTrainActivity'
-                        break
-                    case 3:
-                        method = '/getSportActivity'
-                        break
-                    case 4:
-                        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() {