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.
315 lines
9.8 KiB
315 lines
9.8 KiB
7 months ago
|
<template>
|
||
|
|
<view class="body">
|
||
|
|
<mescroll-uni ref="mescrollRef" @down="downCallback" @up="getData" :up="upOption" :down="downOption">
|
||
|
|
<view class="body_content">
|
||
|
|
<view class="comment_list">
|
||
|
|
<view class="comment_nav" v-for="(item, index) in items" :key="index">
|
||
|
|
<view class="left">
|
||
|
|
<image class="header" :src="item.userimg"></image>
|
||
|
|
</view>
|
||
|
|
<view class="right">
|
||
|
|
<view class="comment_nav_name" v-text="item.username"></view>
|
||
|
|
<view class="comment_nav_time" v-text="item.CreateDate"></view>
|
||
|
|
<view class="comment_nav_content" v-text="item.Content"></view>
|
||
|
|
<view class="changguan_list">
|
||
|
|
<navigator hover-class="none" :url="'/pages/changguan/detail/index?id=' + item.cgid" class="changguan_nav">
|
||
|
|
<view class="changguan_inner">
|
||
|
|
<view class="changguan_nav_img"><image class="img" :src="item.ImgUrl"></image></view>
|
||
|
|
<view class="changguan_nav_content">
|
||
|
|
<view class="changguan_nav_title font_bold text_hidden" v-text="item.cgname"></view>
|
||
|
|
<view class="changguan_nav_subtitle text_hidden" v-text="item.Author"></view>
|
||
|
|
<view class="changguan_nav_label d_flex">
|
||
|
|
<view v-for="(item2,index2) in item.Source" :key="index2" class="changguan_nav_label_txt" :class="[index2==0?'label1':'',index2==1?'label2':'',index2==2?'label3':'']" v-text="item2"></view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</navigator>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</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: [
|
||
|
|
{
|
||
|
|
header:'/static/header.png',
|
||
|
|
name:"金嘉豪",
|
||
|
|
content:"场馆非常新，体验很赞！环境舒适!",
|
||
|
|
time:"2021/08/10",
|
||
|
|
title: '百人体育馆',
|
||
|
|
subtitle: '常熟市社区活动',
|
||
|
|
imgUrl: '/static/changguan_img1.png',
|
||
|
|
labels: ['课外活动', '大空调', '运动'],
|
||
|
|
status:0
|
||
|
|
},
|
||
|
|
{
|
||
|
|
header:'/static/header.png',
|
||
|
|
name:"金嘉豪",
|
||
|
|
content:"体验不错，经常去打羽毛球。",
|
||
|
|
time:"2021/08/10",
|
||
|
|
title: '常熟市体育中心',
|
||
|
|
subtitle: '常熟市社区活动',
|
||
|
|
imgUrl: '/static/changguan_img2.png',
|
||
|
|
labels: ['课外活动', '大空调', '运动'],
|
||
|
|
status:0
|
||
|
|
},
|
||
|
|
{
|
||
|
|
header:'/static/header.png',
|
||
|
|
name:"金嘉豪",
|
||
|
|
content:"场馆非常新，体验很赞！环境舒适!",
|
||
|
|
time:"2021/08/10",
|
||
|
|
title: '高尔夫俱乐部',
|
||
|
|
subtitle: '常熟市社区活动',
|
||
|
|
imgUrl: '/static/changguan_img3.png',
|
||
|
|
labels: ['课外活动', '大空调', '运动'],
|
||
|
|
status:1
|
||
|
|
},
|
||
|
|
{
|
||
|
|
header:'/static/header.png',
|
||
|
|
name:"金嘉豪",
|
||
|
|
content:"体验不错，经常去打羽毛球。",
|
||
|
|
time:"2021/08/10",
|
||
|
|
title: '体育中心游泳馆',
|
||
|
|
subtitle: '常熟市社区活动',
|
||
|
|
imgUrl: '/static/changguan_img4.png',
|
||
|
|
labels: ['课外活动', '大空调', '运动'],
|
||
|
|
status:0
|
||
|
|
},
|
||
|
|
{
|
||
|
|
header:'/static/header.png',
|
||
|
|
name:"金嘉豪",
|
||
|
|
content:"场馆非常新，体验很赞！环境舒适!",
|
||
|
|
time:"2021/08/10",
|
||
|
|
title: '百人体育馆',
|
||
|
|
subtitle: '常熟市社区活动',
|
||
|
|
imgUrl: '/static/changguan_img5.png',
|
||
|
|
labels: ['课外活动', '大空调', '运动'],
|
||
|
|
status:1
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
},
|
||
|
|
onLoad(options) {
|
||
|
|
let that = this;
|
||
|
|
},
|
||
|
|
onReady() {},
|
||
|
|
onShow() {},
|
||
|
|
methods: {
|
||
|
|
collectClick(e){
|
||
|
|
var index = e;
|
||
|
|
if(this.items[index].status==0){
|
||
|
|
this.items[index].status = 1;
|
||
|
|
}else{
|
||
|
|
this.items[index].status = 0;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
tabClick(e) {
|
||
|
|
this.tabIndex = e;
|
||
|
|
},
|
||
|
|
getData(mescroll) {
|
||
|
|
let that = this;
|
||
|
|
let loginInfo = that.$util.getLoginInfo();
|
||
|
|
that.$doPost('Server.aspx', {
|
||
|
|
mod: 'getPL',
|
||
|
|
myuserid: loginInfo.UserId || 1,
|
||
|
|
cgid: 0,
|
||
|
|
page: mescroll.num,
|
||
|
|
pagesize: mescroll.size
|
||
|
|
})
|
||
|
|
.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.CreateDate = that.$util.strDateFormat(item.CreateDate, 'yyyy-MM-dd');
|
||
|
|
item.ImgUrl = that.baseImgUrl + item.ImgUrl;
|
||
|
|
if(item.Source){
|
||
|
|
item.Source = item.Source.split("|");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
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);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
downCallback(mescroll) {
|
||
|
|
setTimeout(function() {
|
||
|
|
mescroll.endSuccess(0);
|
||
|
|
}, 600);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onShareTimeline(res) {
|
||
|
|
return {
|
||
|
|
title: '活动列表',
|
||
|
|
imageUrl: '',
|
||
|
|
query: ''
|
||
|
|
};
|
||
|
|
},
|
||
|
|
onShareAppMessage(res) {
|
||
|
|
return {
|
||
|
|
title: '活动列表',
|
||
|
|
imageUrl: '',
|
||
|
|
path: ''
|
||
|
|
};
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
page,
|
||
|
|
.body {
|
||
|
|
background: #fff;
|
||
|
|
}
|
||
|
|
.comment_list{
|
||
|
|
width: 100%;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
.comment_nav{
|
||
|
|
margin: 0 30upx;
|
||
|
|
border-bottom: 1upx solid #edeaea;
|
||
|
|
padding-top: 20upx;
|
||
|
|
padding-bottom: 26upx;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
.comment_nav .left{
|
||
|
|
width: 100upx;
|
||
|
|
height: 100upx;
|
||
|
|
float: left;
|
||
|
|
}
|
||
|
|
.comment_nav .left .header{
|
||
|
|
box-sizing: border-box;
|
||
|
|
border:6upx solid #f5f5f5;
|
||
|
|
border-radius: 50%;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
.comment_nav .right{
|
||
|
|
float: left;
|
||
|
|
width: calc(100% - 120upx);
|
||
|
|
margin-left: 20upx;
|
||
|
|
}
|
||
|
|
.comment_nav .comment_nav_content{
|
||
|
|
margin-bottom: 28upx;
|
||
|
|
margin-top: 40upx;
|
||
|
|
overflow: hidden;
|
||
|
|
font-size: 30upx;
|
||
|
|
color:#393a38;
|
||
|
|
}
|
||
|
|
.comment_nav .comment_nav_name{
|
||
|
|
font-size: 24upx;
|
||
|
|
padding-top: 10upx;
|
||
|
|
padding-bottom: 20upx;
|
||
|
|
}
|
||
|
|
.comment_nav .comment_nav_time{
|
||
|
|
font-size: 20upx;
|
||
|
|
color:#767676;
|
||
|
|
}
|
||
|
|
/*场馆列表*/
|
||
|
|
.changguan_list {
|
||
|
|
padding: 12upx;
|
||
|
|
overflow: hidden;
|
||
|
|
background: #f5f5f5;
|
||
|
|
border-radius: 20upx;
|
||
|
|
}
|
||
|
|
.changguan_nav {
|
||
|
|
margin: 0 0 0 0;
|
||
|
|
position: relative;
|
||
|
|
z-index: 10;
|
||
|
|
}
|
||
|
|
.changguan_nav .changguan_inner {
|
||
|
|
width: 100%;
|
||
|
|
overflow: hidden;
|
||
|
|
border-radius: 20upx;
|
||
|
|
}
|
||
|
|
.changguan_nav .changguan_time .icon{
|
||
|
|
width: 29upx;
|
||
|
|
height: 30upx;
|
||
|
|
margin-right: 10upx;
|
||
|
|
}
|
||
|
|
.changguan_nav .changguan_nav_img {
|
||
|
|
width: 160upx;
|
||
|
|
height: 97upx;
|
||
|
|
float: left;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.changguan_nav .changguan_nav_img .img {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
border-radius: 20upx;
|
||
|
|
}
|
||
|
|
.changguan_nav .changguan_nav_content {
|
||
|
|
width: calc(100% - 196upx);
|
||
|
|
margin-left: 20upx;
|
||
|
|
float: left;
|
||
|
|
padding-right: 16upx;
|
||
|
|
}
|
||
|
|
.changguan_nav .changguan_nav_title {
|
||
|
|
font-size: 26upx;
|
||
|
|
color: #3c3d3b;
|
||
|
|
margin-top: 0;
|
||
|
|
line-height: 28upx;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
.changguan_nav .changguan_nav_subtitle {
|
||
|
|
color: #767676;
|
||
|
|
font-size: 20upx;
|
||
|
|
margin-top: 6upx;
|
||
|
|
margin-bottom: 6upx;
|
||
|
|
}
|
||
|
|
.changguan_nav .changguan_nav_label {
|
||
|
|
}
|
||
|
|
.changguan_nav .changguan_nav_label_txt {
|
||
|
|
height: 34upx;
|
||
|
|
line-height: 34upx;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 20upx;
|
||
|
|
color: #fff;
|
||
|
|
padding:0 20upx;
|
||
|
|
}
|
||
|
|
.changguan_nav .changguan_nav_label_txt.label1 {
|
||
|
|
background: #fdf6e5;
|
||
|
|
color: #f4bd67;
|
||
|
|
margin-right: 12upx;
|
||
|
|
}
|
||
|
|
.changguan_nav .changguan_nav_label_txt.label2 {
|
||
|
|
background: #f2fcfe;
|
||
|
|
color: #80a9f4;
|
||
|
|
margin-right: 12upx;
|
||
|
|
}
|
||
|
|
.changguan_nav .changguan_nav_label_txt.label3 {
|
||
|
|
background: #e9f1fa;
|
||
|
|
color: #9f9d9d;
|
||
|
|
}
|
||
|
|
</style>
|