311 lines
11 KiB
HTML
311 lines
11 KiB
HTML
<!--#
|
|
layout("/mobile/platform.html"){
|
|
#-->
|
|
<style>
|
|
|
|
.van-doc-card {
|
|
margin: 16px;
|
|
padding: 4px;
|
|
background-color: #fff;
|
|
border-radius: 10px;
|
|
box-shadow: 0 8px 12px #ebedf0;
|
|
line-height: 20px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.main_content {
|
|
height: 260px;
|
|
background-color: #4298FB;
|
|
border-bottom-left-radius: 50% 30px;
|
|
border-bottom-right-radius: 50% 30px;
|
|
}
|
|
|
|
.year {
|
|
padding: 50px 0 0 30px;
|
|
font-size: 22px;
|
|
color: white;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.basic {
|
|
margin: 20px 20px 0 30px;
|
|
font-weight: bold;
|
|
color: #264260;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.activity_count_year {
|
|
padding: 20px 0 0 20px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
.cover {
|
|
margin: 0 10px;
|
|
display: flex;
|
|
padding: 6px;
|
|
font-size: 14px;
|
|
}
|
|
.cover img {
|
|
border-radius: 10px;
|
|
}
|
|
.cover .van-image__error {
|
|
border-radius: 10px;
|
|
}
|
|
.activity_name {
|
|
font-weight: bold;
|
|
}
|
|
.activity_time {
|
|
color: grey;
|
|
font-size: 13px;
|
|
}
|
|
.van-divider {
|
|
margin: 6px 0;
|
|
}
|
|
|
|
</style>
|
|
|
|
<div id="app" v-cloak>
|
|
|
|
<div class="main_content">
|
|
<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 @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_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>
|
|
|
|
<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)">
|
|
</van-image>
|
|
<div class="ml10" style="display: flex; flex-direction: column; justify-content: space-between;">
|
|
<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"
|
|
image="/none.svg"
|
|
description="暂无数据"
|
|
></van-empty>
|
|
</div>
|
|
</van-popup>
|
|
|
|
<van-action-sheet
|
|
v-model="yearShow"
|
|
:actions="yearActions"
|
|
cancel-text="取消"
|
|
close-on-click-action
|
|
@cancel="yearShow = false"
|
|
@select="yearSelect"
|
|
></van-action-sheet>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
const vue = new Vue({
|
|
el: '#app',
|
|
data() {
|
|
return {
|
|
infoTitle: '个人基本信息',
|
|
popupShow: false,
|
|
yearActions: [],
|
|
yearShow: false,
|
|
pageForm: {
|
|
year: new Date().getFullYear(),
|
|
},
|
|
activeName: 0,
|
|
userInfo: {},
|
|
activityData: [],
|
|
activityCount: {},
|
|
}
|
|
},
|
|
methods: {
|
|
async showInfo(name) {
|
|
this.activeName = name
|
|
if(name === 0) {
|
|
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) {
|
|
try {
|
|
const u = JSON.parse(url)
|
|
return FILE_DOMAIN + '/fileStreamPreview?id=' + u?.id
|
|
}catch (e) {
|
|
return FILE_DOMAIN + '/fileStreamPreview?id=' + url
|
|
}
|
|
},
|
|
async yearSelect(action, index) {
|
|
if (action.name === '全部') {
|
|
this.pageForm.year = null
|
|
} else {
|
|
this.pageForm.year = action.name.replaceAll('年', '')
|
|
}
|
|
await this.getActivityCount()
|
|
},
|
|
async getUserInfo() {
|
|
const resp = await $.get('/platform/member/common/userInfo', {userId: "${@shiro.getPrincipalProperty('id')}"})
|
|
this.userInfo = resp.data
|
|
},
|
|
async getActivityCount() {
|
|
const resp = await $.post('/mobile/mine/getActivityCount', this.pageForm)
|
|
this.activityCount = resp.data
|
|
},
|
|
async init() {
|
|
await this.getUserInfo()
|
|
await this.getActivityCount()
|
|
}
|
|
},
|
|
async created() {
|
|
await this.init()
|
|
for (let i = new Date().getFullYear() - 6; i <= new Date().getFullYear(); i++) {
|
|
this.yearActions.unshift({name: i + '年'},)
|
|
}
|
|
this.yearActions.unshift({name: '全部'})
|
|
}
|
|
})
|
|
</script>
|
|
<!--#
|
|
}
|
|
#-->
|