You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

295 lines
8.9 KiB

<template>
<view class="body">
<mescroll-uni class="mescroll-uni" ref="mescrollRef" @down="downCallback" @up="getData" @init="mescrollInit" :up="upOption" :down="downOption">
<view class="list">
<view class="fd2_box" v-for="(item, index) in items" :key="index">
<view class="fd2_inner d_flex j_between">
<view class="left d_flex j_center"><image class="checked" src="/static/checked2.png" mode="widthFix"></image></view>
<view class="right">
<view class="fd2_title" v-text="item.title"></view>
<view class="fd2_subtitle d_flex a_center">
<view class="icon_con"><image class="icon icon1" src="/static/news_icon1.png"></image></view>
<view class="txt txt1">活动名称:{{ item.Title }}</view>
</view>
<view class="fd2_subtitle">
<view class="icon_con"><image class="icon icon2" src="/static/news_icon2.png"></image></view>
<view class="txt" v-text="item.stime + ' - ' + item.etime"></view>
</view>
<view class="fd2_subtitle">
<view class="icon_con"><image class="icon icon3" src="/static/news_icon3.png"></image></view>
<view class="txt">负责人:{{ item.LinkUrl }}</view>
</view>
<view class="fd2_subtitle">
<view class="icon_con"><image class="icon icon4" src="/static/news_icon4.png"></image></view>
<view class="txt">活动地址:{{ item.MContent }}</view>
</view>
<view class="fd2_subtitle">
<view class="icon_con"><image class="icon icon5" src="/static/news_icon5.png"></image></view>
<view class="txt">活动介绍:{{ item.Content }}</view>
</view>
<view class="fd2_subtitle" v-if="item.isqd==1" style="color:#f33030">
<view class="icon_con">
<image class="icon icon6" src="/static/news_icon6.png"></image>
</view>
<view class="txt">已签到,签到时间:{{ item.qdtime }}</view>
</view>
<navigator open-type="switchTab" hover-class="none" url="/pages/tab/my/index" class="fd2_subtitle" style="color:#ffb155" v-else>
<view class="icon_con">
<image class="icon icon6" src="/static/news_icon7.png"></image>
</view>
<view class="txt">暂未签到,快去签到吧</view>
</navigator>
<!-- <view class="sign_in" v-if="item.isqd==0" @click="showClick(index)">签到</view> -->
</view>
</view>
</view>
</view>
<!-- <view class="alert_con" v-if="isAlert">
<view class="alert_content">
<image class="qr_img" :src="qrImg"></image>
</view>
<image @click="closeClick" class="close_icon" src="/static/close_icon.png"></image>
</view> -->
</mescroll-uni>
</view>
</template>
<script>
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
export default {
mixins: [MescrollMixin],
components: {},
data() {
return {
mescroll: null,
downOption: {
use: false, //是否启用下拉刷新
auto: false //是否自动加载
},
upOption: {
use: true, //是否启用上拉加载更多
auto: true //是否自动加载
},
items: [],
id: '',
isAlert:false,
itemIndex:0,
qrImg:""
};
},
onLoad(options) {
this.id = options.id;
this.getQr();
},
onReady() {},
onShow() {},
computed: {},
methods: {
showClick(index){
this.itemIndex = index;
this.isAlert = true;
},
closeClick(){
this.isAlert = false;
},
getQr(){
let that = this;
that.$doPost('Server.aspx', {
mod: 'getQR'
})
.then(res => {
if (res.data.resultcode != 0) {
that.$util.showToast(res.data.msg);
return;
}
let body = res.data.data;
that.qrImg = body;
})
.catch(err => {
console.log('request fail', err);
});
},
getData(mescroll) {
let that = this;
that.$doPost('Server.aspx', {
mod: 'getHDhistory',
page: mescroll.num,
pagesize: mescroll.size,
hdid:that.id
})
.then(res => {
if (res.data.resultcode != 0) {
that.$util.showToast(res.data.msg);
return;
}
let body = res.data.data;
body.filter(function(item, index) {
item.stime = that.$util.strDateFormat(item.stime,"yyyy.MM.dd hh:mm");
item.etime = that.$util.strDateFormat(item.etime,"yyyy.MM.dd hh:mm");
if(item.qdtime){
item.qdtime = that.$util.strDateFormat(item.qdtime,"yyyy-MM-dd hh:mm");
}
});
if (mescroll.num == 1) {
that.items = body;
} else {
that.items = that.items.concat(body);
}
mescroll.endSuccess(body.length);
})
.catch(err => {
that.$util.showToast('网络错误,稍后重试');
mescroll.endErr();
console.log('request fail', err);
});
},
mescrollInit(mescroll) {
this.mescroll = mescroll;
},
downCallback(mescroll) {
this.isAlert = false;
this.mescroll.resetUpScroll();
}
}
};
</script>
<style lang="scss">
page,
.body {
background: #ffffff;
}
.fd2_box {
margin: 0 30upx;
border-bottom: 1upx solid #e6e3e3;
}
.fd2_box:last-child {
border-bottom: none;
}
.checked {
width: 24upx;
height: 24upx;
}
.fd2_box .fd2_inner {
padding-bottom: 30upx;
padding-top: 30upx;
position: relative;
}
.fd2_box .fd2_inner::after {
background: #ffb155;
width: 6upx;
height: calc(100% - 106upx);
position: absolute;
left: 23upx;
top: 74upx;
z-index: 10;
content: '';
border-radius: 10upx;
}
.fd2_inner .left {
width: 50upx;
}
.fd2_inner .fd2_title {
color: #313131;
font-size: 28upx;
line-height: 32upx;
width: 85%;
}
.fd2_inner .fd2_subtitle {
color: #95979d;
font-size: 24upx;
line-height: 32upx;
padding-top: 14upx;
overflow: hidden;
}
.fd2_inner .right {
width: calc(100% - 50upx);
position: relative;
}
.fd2_inner .fd2_subtitle .txt{
width: calc(100% - 40upx);
float: left;
}
.fd2_inner .fd2_subtitle .txt1{
width: 80%;
}
.fd2_inner .fd2_subtitle .icon_con{
width: 40upx;
float: left;
}
.fd2_inner .sign_in{
position: absolute;
width: 112upx;
height: 62upx;
border:1upx solid #ffb155;
border-radius:10upx;
color:#ffb155;
text-align: center;
line-height: 62upx;
box-sizing: border-box;
right: 0;
top: 0;
z-index: 10;
}
.icon1 {
width: 27upx;
height: 27upx;
}
.icon2 {
width: 25upx;
height: 26upx;
margin-top: 5upx;
}
.icon3 {
width: 24upx;
height: 26upx;
margin-top: 4upx;
}
.icon4 {
width: 22upx;
height: 29upx;
}
.icon5 {
width: 24upx;
height: 26upx;
margin-top: 4upx;
}
.icon6 {
width: 28upx;
height: 27upx;
margin-top: 4upx;
}
.alert_con{
position: fixed;
left: 0;
top: 0;
z-index: 1002;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
}
.alert_con .alert_content{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.alert_con .alert_content .qr_img{
width: 320upx;
height: 320upx;
border:10upx solid #fff;
box-sizing: border-box;
}
.alert_con .close_icon{
width: 26upx;
height: 27upx;
padding:20upx;
border-radius: 50%;
background: rgba(255,255,255,1);
position: absolute;
right: 50upx;
top: 50upx;
z-index: 1003;
}
</style>