commit
This commit is contained in:
@jyuhsin
@@ -0,0 +1,162 @@
|
||||
const friend = {
|
||||
template:
|
||||
/*language=HTML*/
|
||||
`
|
||||
<div>
|
||||
<div class="banner-section">
|
||||
<div class="banner-content">
|
||||
<div class="banner-text">
|
||||
<h2>
|
||||
<label>您已累计打卡</label>
|
||||
<lable style="font-size: 30px"> {{ row.checkCount }} </lable>
|
||||
<label>天</label>
|
||||
</h2>
|
||||
<div class="tooltip">
|
||||
<div>请继续加油保持喔~</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="banner-image">
|
||||
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjggMTI4Ij48cGF0aCBkPSJNMTI1LjYgMTAyLjdsLTE5LTE2LjhtLTQuNy0yMy43bDExLjUtNi44TTU3LjQgMTZsMTEuNSAxMS43TTMxLjIgNTMuOGwyMy42IDcuOSIgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6I2ZmZjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDtvcGFjaXR5Oi40Ii8+PHBhdGggZD0iTTY0LjEgMzEuN0w0NyA0OS45Yy0zIDMuMi0zLjEgOC4xLS4xIDExLjJsMjQuNCAyNWMzIDMuMSA3LjkgMy4yIDExIC4xTDk5IDY5YzMtMy4yIDMuMS04LjEuMS0xMS4yTDc0LjcgMzIuOGMtMyAzLjEtNy45IDMuMS0xMC42LTEuMXoiIHN0eWxlPSJmaWxsOiNmZmY7c3Ryb2tlOiNmZmY7c3Ryb2tlLW1pdGVybGltaXQ6MTAiLz48cGF0aCBkPSJNMTA4LjkgOTUuN2wtMTUuOC0xMi0xMi4yIDEzIDE0LjQgMTMuN2MuMyAyLjUgMi4zIDQuNSA0LjggNC41aDEzLjdjMi43IDAgNC45LTIuMiA0LjktNC45VjkzLjVjMC0yLjgtMi4xLTUtNC45LTV2OC40cy4xLTEuMi00LjkgMi44LjEtMyAuMS0zeiIgc3R5bGU9ImZpbGw6I2ZmZjtzdHJva2U6I2ZmZjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMCIvPjwvc3ZnPg=="
|
||||
alt="Feedback">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cards-container">
|
||||
<div @click="onOrder"
|
||||
class="sort"
|
||||
:style="pageForm.order ? 'color: #236eb4' : 'color: grey'"
|
||||
>
|
||||
获赞排行<i class="fa fa-sort"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<van-list
|
||||
v-model="loading"
|
||||
:finished="finished"
|
||||
:finished-text="tableData.length > 0 ? '没有更多了' : ''">
|
||||
<div class="content-container" v-if="tableData.length > 0" v-for="item in tableData">
|
||||
<div class="content-container-header">
|
||||
<div>
|
||||
<van-image v-if="item.sex === '男'" width="40" round height="40" src="/assets/platform/img/checkin/man.png"></van-image>
|
||||
<van-image v-if="item.sex === '女'" width="40" round height="40" src="/assets/platform/img/checkin/woman.png"></van-image>
|
||||
</div>
|
||||
<div class="ml10">
|
||||
<div class="title">{{item.userName}}</div>
|
||||
<div class="text">{{item.unitName}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-container-body">
|
||||
<div>{{item.content}}</div>
|
||||
<van-row class="mt5" v-if="item.files && item.files.length > 0">
|
||||
<van-col span="8" v-for="(file, index) in item.files">
|
||||
<van-image style="padding-right: 4px; width: 96%; height: 100px"
|
||||
@click="onImage(item.files, index)"
|
||||
:src="CREATE_PREVIEW_URL(file.id)"
|
||||
></van-image>
|
||||
</van-col>
|
||||
</van-row>
|
||||
</div>
|
||||
<div class="content-container-footer">
|
||||
<div>
|
||||
<span style="color: grey">{{$moment(item.creatTime).format('MM/DD HH:mm')}}</span>
|
||||
</div>
|
||||
<div @click="onPraise(item)">
|
||||
<van-icon name="good-job-o"
|
||||
:badge="item.praiseCount"
|
||||
size="18"
|
||||
:color="item.praised > 0 ? 'red' : ''"
|
||||
></van-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-list>
|
||||
<div v-if="tableData.length === 0" class="mt10">
|
||||
<van-empty class="custom-image" image="/none.svg" description="暂无数据"></van-empty>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
row: {},
|
||||
pageForm: {
|
||||
pageNumber: 1,
|
||||
pageSize: 5,
|
||||
totalCount: 0,
|
||||
order: false,
|
||||
},
|
||||
tableData: [],
|
||||
finished: false,
|
||||
loading: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onOpen(row) {
|
||||
this.row = row
|
||||
this.pageForm.pageNumber = 1
|
||||
this.tableData = []
|
||||
this.finished = false
|
||||
this.selectCheckData()
|
||||
},
|
||||
onOrder() {
|
||||
this.pageForm.order = !this.pageForm.order
|
||||
this.pageForm.pageNumber = 1
|
||||
this.tableData = []
|
||||
this.finished = false
|
||||
const toast = vant.Toast.loading({message: '获取排行中...', forbidClick: true, loadingType: 'spinner'})
|
||||
setTimeout(() => {
|
||||
this.selectCheckData()
|
||||
toast.clear()
|
||||
}, 200)
|
||||
},
|
||||
onPraise(row) {
|
||||
this.pageForm.pageNumber = 1
|
||||
this.tableData = []
|
||||
this.finished = false
|
||||
this.$axios.post("/platform/checkIn/apply/praise", { id: row.id, activityId: this.row.id }).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.$toast(res.msg)
|
||||
this.selectCheckData()
|
||||
}
|
||||
})
|
||||
},
|
||||
onImage(files, index) {
|
||||
vant.ImagePreview({
|
||||
images: files.map(o => CREATE_PREVIEW_URL(o.id)),
|
||||
startPosition: index,
|
||||
})
|
||||
},
|
||||
selectCheckData() {
|
||||
this.loading = true
|
||||
this.$set(this.pageForm, 'id', this.row.id)
|
||||
this.$set(this.pageForm, 'active', 0)
|
||||
this.$axios.post('/platform/checkIn/apply/pageData', this.pageForm)
|
||||
.then(res => {
|
||||
if (res.code === 0) {
|
||||
res.data.list.forEach(item => {
|
||||
if(item.files && item.files.length > 0) {
|
||||
item.files = JSON.parse(item.files)
|
||||
}
|
||||
})
|
||||
this.tableData = this.tableData.concat(res.data.list)
|
||||
if (this.tableData.length === res.data.totalCount) {
|
||||
this.finished = true
|
||||
} else {
|
||||
this.pageForm.pageNumber++
|
||||
}
|
||||
}
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
},
|
||||
style: /*language=CSS*/ `
|
||||
.cards-container .sort {
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
margin: 10px 10px 10px 0;
|
||||
}
|
||||
.cards-container .sort i {
|
||||
font-size: 16px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
`
|
||||
}
|
||||
@@ -0,0 +1,173 @@
|
||||
<!--#
|
||||
layout("/mobile/platform.html"){
|
||||
#-->
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--primary-color: rgb(0, 78, 100);
|
||||
--primary-light: rgba(0, 78, 100, 0.1);
|
||||
--secondary-color: #37A6BD;
|
||||
--text-color: #333333;
|
||||
--text-secondary: #666666;
|
||||
--text-light: #999999;
|
||||
--bg-color: #f6f6f6;
|
||||
--card-bg: #ffffff;
|
||||
--border-color: #eeeeee;
|
||||
--success-color: #07c160;
|
||||
--warning-color: #ff976a;
|
||||
}
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
line-height: 1.5;
|
||||
}
|
||||
.page-container {
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
/* 顶部Banner */
|
||||
.banner-section {
|
||||
padding: 0;
|
||||
height: 180px;
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
}
|
||||
.banner-curve {
|
||||
display: none;
|
||||
}
|
||||
.banner-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 24px 20px 0;
|
||||
height: 100%;
|
||||
}
|
||||
.banner-text {
|
||||
color: white;
|
||||
z-index: 2;
|
||||
width: 60%;
|
||||
}
|
||||
.banner-text h2 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.banner-text .tooltip {
|
||||
font-size: 14px;
|
||||
opacity: 0.9;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 28px;
|
||||
}
|
||||
.banner-text .tooltip .van-button {
|
||||
width: 80px;
|
||||
height: 28px;
|
||||
}
|
||||
.banner-image {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: 2;
|
||||
}
|
||||
.banner-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
.cards-container {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
background-color: var(--bg-color);
|
||||
border-radius: 20px 20px 0 0;
|
||||
}
|
||||
.content-container {
|
||||
background-color: white;
|
||||
padding: 10px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.content-container-header {
|
||||
display: flex;
|
||||
}
|
||||
.content-container-header .title {
|
||||
color: #236eb4;
|
||||
font-weight: bold
|
||||
}
|
||||
.content-container-header .text {
|
||||
font-size: 12px;
|
||||
color: grey
|
||||
}
|
||||
.content-container-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 6px;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="app" v-cloak>
|
||||
<van-nav-bar title="主题打卡" left-text="返回" left-arrow @click-left="pjaxReplace('/platform/checkIn/list/h5')" fixed placeholder></van-nav-bar>
|
||||
|
||||
<div v-if="active === 0">
|
||||
<friend ref="friendRef"></friend>
|
||||
</div>
|
||||
<div v-if="active === 1">
|
||||
<mine ref="mineRef"></mine>
|
||||
</div>
|
||||
|
||||
<van-tabbar v-model="active" @change="onChange" placeholder>
|
||||
<van-tabbar-item icon="thumb-circle-o">动态</van-tabbar-item>
|
||||
<van-tabbar-item icon="user-o">我的</van-tabbar-item>
|
||||
</van-tabbar>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
<!--#include('mine.js'){}#-->
|
||||
<!--#include('friend.js'){}#-->
|
||||
new Vue({
|
||||
el: '#app',
|
||||
mixins: [mobileMixins],
|
||||
data() {
|
||||
return {
|
||||
active: 1,
|
||||
id: GetQueryString('id'),
|
||||
activity: {},
|
||||
}
|
||||
},
|
||||
components: {
|
||||
"mine": mine,
|
||||
"friend": friend
|
||||
},
|
||||
methods: {
|
||||
onChange(index) {
|
||||
this.$nextTick(() => {
|
||||
if(index === 0) {
|
||||
this.$refs.friendRef.onOpen(this.activity)
|
||||
} else {
|
||||
this.$refs.mineRef.onOpen(this.activity)
|
||||
}
|
||||
})
|
||||
},
|
||||
async selectOne() {
|
||||
const res = await this.$axios.post('/platform/checkIn/manage/selectOne', {id: this.id})
|
||||
this.activity = res.data
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
await this.selectOne()
|
||||
this.$nextTick(() => {
|
||||
this.$refs.mineRef.onOpen(this.activity)
|
||||
})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
@@ -0,0 +1,240 @@
|
||||
const mine = {
|
||||
template:
|
||||
/*language=HTML*/
|
||||
`
|
||||
<div>
|
||||
<div class="banner-section">
|
||||
<div class="banner-content">
|
||||
<div class="banner-text">
|
||||
<h2>
|
||||
<label>您已累计打卡</label>
|
||||
<lable style="font-size: 30px"> {{ row.checkCount }} </lable>
|
||||
<label>天</label>
|
||||
</h2>
|
||||
<div class="tooltip">
|
||||
<div>请继续加油保持喔~</div>
|
||||
<div>
|
||||
<van-button v-if="sourceTableData.map(o => $moment(o.creatTime).format('YYYY-MM-DD'))?.includes($moment().format('YYYY-MM-DD'))"
|
||||
round size="small" color="#7ca4d8" type="default">
|
||||
今日已打卡
|
||||
</van-button>
|
||||
<van-button v-else @click="onApply" round icon="notes-o" size="small" color="#7ca4d8" type="default">
|
||||
打卡
|
||||
</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="banner-image">
|
||||
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjggMTI4Ij48cGF0aCBkPSJNMTI1LjYgMTAyLjdsLTE5LTE2LjhtLTQuNy0yMy43bDExLjUtNi44TTU3LjQgMTZsMTEuNSAxMS43TTMxLjIgNTMuOGwyMy42IDcuOSIgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6I2ZmZjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDtvcGFjaXR5Oi40Ii8+PHBhdGggZD0iTTY0LjEgMzEuN0w0NyA0OS45Yy0zIDMuMi0zLjEgOC4xLS4xIDExLjJsMjQuNCAyNWMzIDMuMSA3LjkgMy4yIDExIC4xTDk5IDY5YzMtMy4yIDMuMS04LjEuMS0xMS4yTDc0LjcgMzIuOGMtMyAzLjEtNy45IDMuMS0xMC42LTEuMXoiIHN0eWxlPSJmaWxsOiNmZmY7c3Ryb2tlOiNmZmY7c3Ryb2tlLW1pdGVybGltaXQ6MTAiLz48cGF0aCBkPSJNMTA4LjkgOTUuN2wtMTUuOC0xMi0xMi4yIDEzIDE0LjQgMTMuN2MuMyAyLjUgMi4zIDQuNSA0LjggNC41aDEzLjdjMi43IDAgNC45LTIuMiA0LjktNC45VjkzLjVjMC0yLjgtMi4xLTUtNC45LTV2OC40cy4xLTEuMi00LjkgMi44LjEtMyAuMS0zeiIgc3R5bGU9ImZpbGw6I2ZmZjtzdHJva2U6I2ZmZjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMCIvPjwvc3ZnPg=="
|
||||
alt="Feedback">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cards-container" style="margin-bottom: 10px">
|
||||
<van-calendar :show-title="false" row-height="50" color="#236eb4"
|
||||
@select="onCalendar"
|
||||
:formatter="onFormatter"
|
||||
:poppable="false"
|
||||
:min-date="new Date($moment(row.startTime).format('YYYY-MM-DD'))"
|
||||
:max-date="new Date($moment(row.endTime).format('YYYY-MM-DD'))"
|
||||
:show-confirm="false"
|
||||
:style="{ height: '310px' }">
|
||||
</van-calendar>
|
||||
</div>
|
||||
<div class="content-container" v-if="tableData.length > 0" v-for="item in tableData">
|
||||
<div class="content-container-header">
|
||||
<div>
|
||||
<van-image v-if="item.sex === '男'" width="40" round height="40" src="/assets/platform/img/checkin/man.png"></van-image>
|
||||
<van-image v-if="item.sex === '女'" width="40" round height="40" src="/assets/platform/img/checkin/woman.png"></van-image>
|
||||
</div>
|
||||
<div class="ml10">
|
||||
<div class="title">{{item.userName}}</div>
|
||||
<div class="text">{{item.unitName}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-container-body">
|
||||
<div>{{item.content}}</div>
|
||||
<van-row class="mt5" v-if="item.files && item.files.length > 0">
|
||||
<van-col span="8" v-for="(file, index) in item.files">
|
||||
<van-image style="padding-right: 4px; width: 96%; height: 100px"
|
||||
@click="onImage(item.files, index)"
|
||||
:src="CREATE_PREVIEW_URL(file.id)"
|
||||
></van-image>
|
||||
</van-col>
|
||||
</van-row>
|
||||
</div>
|
||||
<div class="content-container-footer">
|
||||
<div>
|
||||
<span style="color: grey">{{$moment(item.creatTime).format('HH:mm')}}</span>
|
||||
<span class="ml5" style="color: #236eb4" @click="onDelete(item)">删除</span>
|
||||
</div>
|
||||
<div @click="onPraise(item)">
|
||||
<van-icon name="good-job-o"
|
||||
:badge="item.praiseCount"
|
||||
size="18"
|
||||
:color="item.praised > 0 ? 'red' : ''"
|
||||
></van-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="tableData.length === 0" class="mt10">
|
||||
<van-empty class="custom-image" image="/none.svg" description="暂无数据"></van-empty>
|
||||
</div>
|
||||
|
||||
<van-popup v-model:show="writeVisible" :style="{ height: '100%', width: '100%' }" position="right">
|
||||
<van-nav-bar title="填写打卡信息" left-text="返回" left-arrow @click-left="writeVisible = false" fixed placeholder></van-nav-bar>
|
||||
<div class="form-content">
|
||||
<van-field
|
||||
v-model="formData.content"
|
||||
rows="3"
|
||||
autosize
|
||||
type="textarea"
|
||||
placeholder="分享新鲜事..."
|
||||
></van-field>
|
||||
<vant-file-upload :files.sync="formData.files"
|
||||
:type="['jpg', 'jpeg', 'png']"
|
||||
style="margin-top: 30px; margin-left: 20px"></vant-file-upload>
|
||||
<van-cell-group border style="margin-top: 50px">
|
||||
<van-cell @click="openVisible = true" title="是否公开" icon="user-o"
|
||||
is-link border v-model="formData.openName"></van-cell>
|
||||
</van-cell-group>
|
||||
</div>
|
||||
<van-button @click="onSubmit" type="primary" block color="#1867b0">提交</van-button>
|
||||
</van-popup>
|
||||
|
||||
<van-action-sheet v-model="openVisible"
|
||||
:actions="[{ name: '公开', value: true }, { name: '仅自己可见', value: false }]"
|
||||
cancel-text="取消"
|
||||
@select="(action) => { formData.openName = action.name; formData.open = action.value }"
|
||||
close-on-click-action
|
||||
></van-action-sheet>
|
||||
</div>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
row: {},
|
||||
tableData: [],
|
||||
pageForm: {
|
||||
pageNumber: 1,
|
||||
pageSize: 5,
|
||||
totalCount: 0
|
||||
},
|
||||
writeVisible: false,
|
||||
openVisible: false,
|
||||
formData: {
|
||||
content: '',
|
||||
files: [],
|
||||
open: false,
|
||||
openName: '仅自己可见',
|
||||
},
|
||||
sourceTableData: [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async onOpen(row) {
|
||||
this.row = row
|
||||
this.$set(this.formData, 'activityId', row.id)
|
||||
await this.selectCheckData()
|
||||
this.onCalendar(new Date())
|
||||
},
|
||||
onCalendar(date) {
|
||||
const day = this.$moment(date).format('YYYY-MM-DD')
|
||||
this.tableData = this.sourceTableData.filter(o => this.$moment(o.creatTime).format('YYYY-MM-DD') === day)
|
||||
},
|
||||
onFormatter(day) {
|
||||
const d = this.$moment(day.date).format('YYYY-MM-DD')
|
||||
const sourceData = this.sourceTableData.map(o => this.$moment(o.creatTime).format('YYYY-MM-DD'))
|
||||
day.bottomInfo = sourceData.includes(d) ? '已打卡' : ''
|
||||
day.className = sourceData.includes(d) ? 'text-success' : ''
|
||||
return day
|
||||
},
|
||||
onPraise(row) {
|
||||
this.$axios.post("/platform/checkIn/apply/praise", { id: row.id, activityId: this.row.id }).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.$toast(res.msg)
|
||||
this.selectCheckData()
|
||||
}
|
||||
})
|
||||
},
|
||||
onApply() {
|
||||
this.writeVisible = true
|
||||
},
|
||||
onSubmit() {
|
||||
this.$dialog.confirm({
|
||||
title: "提示",
|
||||
message: "您确定要提交吗？"
|
||||
}).then(() => {
|
||||
const formData = clone(this.formData)
|
||||
formData.files = JSON.stringify(formData.files)
|
||||
this.$axios.post("/platform/checkIn/apply/submit", formData).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.$toast(res.msg)
|
||||
this.writeVisible = false
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
onDelete(row) {
|
||||
this.$dialog.confirm({
|
||||
title: "提示",
|
||||
message: "您确定要删除吗？"
|
||||
}).then(() => {
|
||||
this.$axios.post("/platform/checkIn/apply/delete", {id: row.id}).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.$toast(res.msg)
|
||||
this.selectCheckData()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
onImage(files, index) {
|
||||
vant.ImagePreview({
|
||||
images: files.map(o => CREATE_PREVIEW_URL(o.id)),
|
||||
startPosition: index,
|
||||
})
|
||||
},
|
||||
async selectCheckData() {
|
||||
this.$set(this.pageForm, 'id', this.row.id)
|
||||
this.$set(this.pageForm, 'active', 1)
|
||||
this.$set(this.pageForm, 'order', false)
|
||||
const res = await this.$axios.post('/platform/checkIn/apply/pageData', this.pageForm)
|
||||
if(res.code === 0) {
|
||||
this.sourceTableData = res.data.list
|
||||
this.tableData = res.data.list
|
||||
this.tableData.forEach(item => {
|
||||
if(item.files && item.files.length > 0) {
|
||||
item.files = JSON.parse(item.files)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
style: /*language=CSS*/ `
|
||||
.cards-container .van-calendar {
|
||||
border-radius: 20px 20px 0 0;
|
||||
margin-top: -20px;
|
||||
}
|
||||
.van-cell::after {
|
||||
border: none !important;
|
||||
}
|
||||
.form-content {
|
||||
padding: 10px;
|
||||
height: calc(100vh - 46px - 44px);
|
||||
overflow-y: auto
|
||||
}
|
||||
.custom-image {
|
||||
background-color: white;
|
||||
}
|
||||
.van-calendar__bottom-info {
|
||||
bottom: 1px !important;
|
||||
}
|
||||
.text-success .van-calendar__bottom-info {
|
||||
color: #0e9558;
|
||||
font-weight: bolder;
|
||||
}
|
||||
.van-calendar__selected-day .van-calendar__bottom-info {
|
||||
color: white;
|
||||
font-weight: bolder;
|
||||
}
|
||||
`
|
||||
}
|
||||
@@ -0,0 +1,130 @@
|
||||
<!--#
|
||||
layout("/mobile/platform.html"){
|
||||
#-->
|
||||
|
||||
<style>
|
||||
.van-count-down {
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="app" v-cloak>
|
||||
<van-nav-bar title="活动列表" left-text="返回" left-arrow @click-left="pjaxReplace('/mobile/index')" fixed placeholder></van-nav-bar>
|
||||
<van-sticky offset-top="46px">
|
||||
<van-dropdown-menu :close-on-click-outside="false" :close-on-click-overlay="false">
|
||||
<van-dropdown-item v-model="pageForm.year" :options="yearOptions" @change="doSearch"></van-dropdown-item>
|
||||
</van-dropdown-menu>
|
||||
</van-sticky>
|
||||
|
||||
<table-list api="/platform/checkIn/list/pageData" title="name" :page_form.sync="pageForm" ref="tableListRef" @ready="doSearch" img="cover">
|
||||
<template v-slot="{index,row}">
|
||||
<table-column label="创建人">{{row.userName}}</table-column>
|
||||
<table-column label="开始时间">{{row.startTime}}</table-column>
|
||||
<table-column label="结束时间">{{row.endTime}}</table-column>
|
||||
</template>
|
||||
<template #actions="{index,row}">
|
||||
<div class="action-btn" @click="onView(row)">
|
||||
<i class="fa fa-eye"></i>
|
||||
<span>查看</span>
|
||||
</div>
|
||||
<div class="action-btn" @click="onApply(row)">
|
||||
<i class="fa fa-edit"></i>
|
||||
<span>打卡</span>
|
||||
</div>
|
||||
</template>
|
||||
</table-list>
|
||||
|
||||
<van-action-sheet :close-on-click-overlay="false" title="详细信息" v-model="infoVisible">
|
||||
<div class="info-container">
|
||||
<div>
|
||||
<van-image class="info-img" height="186" width="100%" :src="CREATE_PREVIEW_URL(infoRow.cover)"></van-image>
|
||||
<div class="detail-container">
|
||||
<van-cell title="活动名称">{{ infoRow.name }}</van-cell>
|
||||
<van-cell title="月打卡率">{{ infoRow.rate + '%' }}</van-cell>
|
||||
<van-cell title="开始时间">{{ infoRow.startTime }}</van-cell>
|
||||
<van-cell title="结束时间">{{ infoRow.endTime }}</van-cell>
|
||||
<van-cell title="状态">{{ infoRow.enable ? '启用' : '禁用' }}</van-cell>
|
||||
<van-cell title="活动组别">{{ infoRow.groupName }}</van-cell>
|
||||
<van-cell title="活动介绍" class="direction-column-cell">
|
||||
<span v-html="infoRow.introduce"></span>
|
||||
</van-cell>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button">
|
||||
<van-button @click="onApply(infoRow)" type="primary" block color="#1867b0">
|
||||
<span v-if="time >= 0">
|
||||
去打卡
|
||||
</span>
|
||||
<template v-else>
|
||||
距离开始
|
||||
<van-count-down :time="Math.abs(time)" class="count-down" format="DD 天 HH 时 mm 分 ss 秒" @finish="time = 0"></van-count-down>
|
||||
</template>
|
||||
</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</van-action-sheet>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
new Vue({
|
||||
el: '#app',
|
||||
mixins: [mobileMixins],
|
||||
data() {
|
||||
return {
|
||||
pageForm: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
totalCount: 0,
|
||||
searchKeyword: '',
|
||||
year: new Date().getFullYear(),
|
||||
},
|
||||
time: 0,
|
||||
yearOptions: [],
|
||||
infoVisible: false,
|
||||
infoRow: {},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onView(row) {
|
||||
this.infoRow = row
|
||||
this.time = this.$moment().diff(this.$moment(row.startTime), 'milliseconds')
|
||||
this.infoVisible = true
|
||||
},
|
||||
onApply(row) {
|
||||
if(this.$moment().isBefore(this.$moment(row.startTime))) {
|
||||
this.onView(row)
|
||||
return
|
||||
}
|
||||
vant.Toast.clear
|
||||
this.$axios.post('/platform/checkIn/apply/validate', { activityId: row.id })
|
||||
.then(res => {
|
||||
if(res.code === 0) {
|
||||
pjaxReplace('/platform/checkIn/apply/h5?id=' + row.id)
|
||||
}
|
||||
}).catch(err => {
|
||||
vant.Dialog.alert({ title: '温馨提示', message: err.msg })
|
||||
})
|
||||
},
|
||||
doSearch() {
|
||||
this.$nextTick(() => {
|
||||
this.pageForm.pageNumber = 1
|
||||
this.pageForm.totalCount = 0
|
||||
this.$refs.tableListRef.doSearch()
|
||||
})
|
||||
},
|
||||
init() {
|
||||
for (let i = new Date().getFullYear() - 10; i <= new Date().getFullYear(); i++) {
|
||||
this.yearOptions.unshift({value: i, text: i + '年'},)
|
||||
}
|
||||
},
|
||||
},
|
||||
async created() {
|
||||
this.init()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<!--#
|
||||
}
|
||||
#-->
|
||||
@@ -17,7 +17,8 @@
|
||||
<link rel="stylesheet" href="${base!}/assets/mobile/css/pdfh5.css">
|
||||
|
||||
<link rel="stylesheet" href="${base!}/assets/platform/plugins/vant/vant.css?v=1.0.1">
|
||||
|
||||
<link rel="stylesheet" href="${base!}/assets/platform/fonts/font-awesome.min.css"/>
|
||||
<link rel="stylesheet" href="${base!}/assets/platform/css/h5.css"/>
|
||||
<script>
|
||||
window._AMapSecurityConfig = {
|
||||
securityJsCode: "4fa1e1aeabba7eb9518129cf57ab17c1",
|
||||
@@ -45,7 +46,8 @@
|
||||
<script src="${base!}/assets/mobile/js/mProposal.js"></script>
|
||||
<script src="${base!}/assets/mobile/js/mCondolence.js"></script>
|
||||
<script src="${base!}/assets/mobile/js/mCommon.js"></script>
|
||||
|
||||
<!--axios-->
|
||||
<script src="${base!}/assets/platform/plugins/axios/axios.js"></script>
|
||||
|
||||
<script src="${base!}/assets/platform/plugins/moment/moment.min.js"></script>
|
||||
<script src="${base!}/assets/platform/module/condolence/common.js"></script>
|
||||
@@ -76,9 +78,12 @@
|
||||
<script>
|
||||
Vue.component('mobile-sign', httpVueLoader('/components/sign/mobileSign.vue'))
|
||||
Vue.component("text-editor", httpVueLoader("/components/plugins/TextEditor.vue?v=" + new Date().getTime()))
|
||||
Vue.component("table-list", httpVueLoader("/components/plugins/h5/TableList.vue?v=" + new Date().getTime()))
|
||||
Vue.component("table-column", httpVueLoader("/components/plugins/h5/TableColumn.vue?v=" + new Date().getTime()))
|
||||
|
||||
Vue.prototype.$auth = commonUtil.authService()
|
||||
Vue.prototype.$moment = moment
|
||||
Vue.prototype.$axios = commonUtil.axiosService()
|
||||
</script>
|
||||
|
||||
<script>
|
||||
|
||||
Reference in New Issue
Block a user