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.
554 lines
16 KiB
554 lines
16 KiB
<template>
|
|
<view class="body">
|
|
<mescroll-uni ref="mescrollRef" @down="downCallback" @up="getData" @init="mescrollInit" :up="upOption" :down="downOption">
|
|
<view class="body_content">
|
|
<view class="swiper_con">
|
|
<swiper
|
|
:current="swiperIndex"
|
|
@change="swiperChange"
|
|
class="swiper"
|
|
:indicator-dots="indicatorDots"
|
|
:autoplay="autoplay"
|
|
:interval="interval"
|
|
:duration="duration"
|
|
>
|
|
<swiper-item v-for="(item, index) in detail.ImgList" :key="index"><image class="swiper_img" :src="item" mode="widthFix"></image></swiper-item>
|
|
</swiper>
|
|
<view class="swiper_page d_flex j_center a_center">
|
|
<view class="swiper_page_txt" v-text="swiperIndex + 1"></view>
|
|
<view class="swiper_page_line">/</view>
|
|
<view class="swiper_page_txt" v-text="detail.ImgList.length"></view>
|
|
</view>
|
|
</view>
|
|
<view class="detail_con">
|
|
<view class="detail_box">
|
|
<view class="detail_box_1 d_flex j_between">
|
|
<view class="left">
|
|
<view class="detail_title font_bold" v-text="detail.Title">百人体育馆</view>
|
|
<view class="detail_subtitle" v-text="detail.Author">常熟市社区活动</view>
|
|
</view>
|
|
<view class="right d_flex j_center">
|
|
<view class="detail_box_nav" @click="collectClick">
|
|
<image v-if="isCollect==0" class="detail_box_icon icon1" src="/static/collect1.png" mode="heightFix"></image>
|
|
<image v-else class="detail_box_icon icon1" src="/static/collect2.png" mode="heightFix"></image>
|
|
<view class="txt">收藏</view>
|
|
</view>
|
|
<button hover-class="none" open-type="share" class="detail_box_nav">
|
|
<image class="detail_box_icon icon2" src="/static/share_icon.png" mode="heightFix"></image>
|
|
<view class="txt">分享</view>
|
|
</button>
|
|
</view>
|
|
</view>
|
|
<view class="detail_box_2 d_flex a_center" @click="callPhone(detail.Summary)">
|
|
<image class="phone_icon" src="/static/phone.png"></image>
|
|
<view class="phone_txt">负责人电话</view>
|
|
<view class="phone_num" v-text="detail.Summary"></view>
|
|
</view>
|
|
<view class="detail_box_2" v-text="detail.MContent"></view>
|
|
</view>
|
|
<view class="cgd_box cgd1_box">
|
|
<view class="i1_head">
|
|
<view class="i1_head_left">场馆介绍</view>
|
|
<view class="i1_head_right"></view>
|
|
</view>
|
|
<view class="cgd1_content" v-html="detail.Content">
|
|
<view class="cgd1_txt1">
|
|
百人体育馆（ Sports
|
|
Centre）位于浙江省杭州市余杭区，可进行足球、篮球等多种比赛，是现中甲球队浙江绿城队的主场，也是FIFA2007年中国女足世界杯的比赛场地之一。
|
|
</view>
|
|
<image class="img" src="/static/changguan_detail1.png" mode="widthFix"></image>
|
|
<view class="cgd1_txt2">干净卫生,基础设施完善</view>
|
|
<view class="cgd1_txt3">地理位置优越，四周环境独特，景色宜人，交通便利，生活方便，是福州迄今为止保留最完整的一座古典园林...</view>
|
|
</view>
|
|
</view>
|
|
<view class="cgd_box cgd2_box">
|
|
<view @click="goUrl" :data-url="'/pages/changguan/comment/index?id=' + id" class="i1_head d_flex j_between a_center">
|
|
<view class="i1_head_left">网友评论</view>
|
|
<view class="i1_head_right d_flex a_center">
|
|
<view class="txt">发表评论</view>
|
|
<image class="more_arrow" src="/static/more_arrow2.png"></image>
|
|
</view>
|
|
</view>
|
|
<view class="comment_list">
|
|
<view class="comment_nav" v-for="(item, index) in comments" :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>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</mescroll-uni>
|
|
<view v-if="detail.note3==1" @click="goUrl" :data-url="'/pages/changguan/reservation/index?id=' + id" class="content_btn_con">
|
|
<view class="main_content_btn">去预约</view>
|
|
</view>
|
|
<view v-else class="content_btn_con">
|
|
<view class="main_content_btn gray_content_btn">无预约时间</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
|
|
export default {
|
|
mixins: [MescrollMixin],
|
|
components: {},
|
|
data() {
|
|
return {
|
|
indicatorDots: false,
|
|
autoplay: true,
|
|
interval: 5000,
|
|
duration: 1000,
|
|
mescroll: null,
|
|
downOption: {
|
|
use: false, //是否启用下拉刷新
|
|
auto: false //是否自动加载
|
|
},
|
|
upOption: {
|
|
use: true, //是否启用上拉加载更多
|
|
auto: false //是否自动加载
|
|
},
|
|
swiperIndex: 0,
|
|
banners: [],
|
|
id: '',
|
|
detail: {},
|
|
comments: [],
|
|
isCollect: 0 ,// 判断收藏
|
|
isLogin: false,
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
let that = this;
|
|
that.id = options.id;
|
|
},
|
|
onReady() {},
|
|
onShow() {
|
|
if(this.$util.isLogin()){
|
|
this.isLogin = true;
|
|
this.getCollect();
|
|
}else{
|
|
this.isLogin = false;
|
|
}
|
|
this.getDetail();
|
|
},
|
|
methods: {
|
|
goUrl(e){
|
|
let toUrls = e.currentTarget.dataset.url;
|
|
if(!this.isLogin){
|
|
this.goLogin();
|
|
return;
|
|
}
|
|
uni.navigateTo({
|
|
url: toUrls
|
|
});
|
|
},
|
|
goLogin(){
|
|
let url = '/pages/changguan/detail/index?id=' + this.id;
|
|
url = encodeURIComponent(url);
|
|
uni.navigateTo({
|
|
url: '/pages/login/index?url=' + url
|
|
});
|
|
},
|
|
callPhone(phone) {
|
|
this.$util.callPhone(phone);
|
|
},
|
|
collectClick(e) {
|
|
let that = this;
|
|
if(!that.isLogin){
|
|
that.goLogin();
|
|
return;
|
|
}
|
|
that.$doPost('Server.aspx', {
|
|
mod: 'addSC',
|
|
scid: that.id,
|
|
type: 1
|
|
})
|
|
.then(res => {
|
|
if (res.data.resultcode != 0) {
|
|
that.$util.showToast(res.data.msg);
|
|
return;
|
|
}
|
|
if (that.isCollect == 0) {
|
|
that.isCollect = 1;
|
|
} else {
|
|
that.isCollect = 0;
|
|
}
|
|
that.$util.showToast('操作成功');
|
|
})
|
|
.catch(err => {
|
|
console.log('request fail', err);
|
|
});
|
|
},
|
|
swiperChange(e) {
|
|
this.swiperIndex = e.detail.current;
|
|
},
|
|
getCollect() {
|
|
let that = this;
|
|
that.$doPost('Server.aspx', {
|
|
mod: 'isSC',
|
|
scid: that.id,
|
|
type: 1
|
|
})
|
|
.then(res => {
|
|
if (res.data.resultcode != 0) {
|
|
that.$util.showToast(res.data.msg);
|
|
return;
|
|
}
|
|
let body = res.data.data;
|
|
that.isCollect = body.id && body.id!=0 ? 1 : 0;
|
|
})
|
|
.catch(err => {
|
|
console.log('request fail', err);
|
|
});
|
|
},
|
|
getDetail() {
|
|
let that = this;
|
|
that.$doPost('Server.aspx', {
|
|
mod:'getCSinfo',
|
|
cgid:that.id
|
|
})
|
|
.then(res => {
|
|
if (res.data.resultcode != 0) {
|
|
that.$util.showToast(res.data.msg);
|
|
return;
|
|
}
|
|
let body = res.data.data;
|
|
body.ImgList = body.ImgList.split('|');
|
|
body.ImgUrl = that.baseImgUrl + body.ImgUrl;
|
|
for (let i = 0; i < body.ImgList.length; i++) {
|
|
body.ImgList[i] = that.baseImgUrl + body.ImgList[i];
|
|
}
|
|
that.detail = body;
|
|
that.$nextTick(function(){
|
|
that.mescroll.resetUpScroll();
|
|
})
|
|
})
|
|
.catch(err => {
|
|
console.log('request fail', err);
|
|
});
|
|
},
|
|
mescrollInit(mescroll) {
|
|
this.mescroll = mescroll;
|
|
},
|
|
downCallback(mescroll) {
|
|
this.getData();
|
|
},
|
|
getData(mescroll) {
|
|
let that = this;
|
|
that.$doPost('Server.aspx', {
|
|
mod: 'getPL',
|
|
myuserid: 0,
|
|
cgid: that.id,
|
|
page: that.mescroll.num,
|
|
pagesize: that.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');
|
|
});
|
|
if (that.mescroll.num == 1) {
|
|
that.comments = body;
|
|
} else {
|
|
that.comments = that.comments.concat(body);
|
|
}
|
|
that.mescroll.endSuccess(body.length);
|
|
})
|
|
.catch(err => {
|
|
that.$util.showToast('网络错误，稍后重试');
|
|
that.mescroll.endErr();
|
|
console.log('request fail', err);
|
|
});
|
|
}
|
|
},
|
|
onShareTimeline(res) {
|
|
let that = this;
|
|
let detail = this.detail;
|
|
return {
|
|
title: detail.Title,
|
|
imageUrl: detail.ImgUrl,
|
|
query: 'pages/changguan/detail/index?id=' + that.id
|
|
};
|
|
},
|
|
onShareAppMessage(res) {
|
|
let that = this;
|
|
let detail = this.detail;
|
|
return {
|
|
title: detail.Title,
|
|
imageUrl: detail.ImgUrl,
|
|
path: 'pages/changguan/detail/index?id=' + that.id
|
|
};
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page,
|
|
.body {
|
|
background: #fff;
|
|
}
|
|
.mescroll-uni-fixed {
|
|
height: calc(100% - 148upx) !important;
|
|
}
|
|
/*标题*/
|
|
.i1_head {
|
|
padding: 30upx 0 0 0;
|
|
overflow: hidden;
|
|
background: #fff;
|
|
}
|
|
.i1_head .i1_head_left {
|
|
color: #000000;
|
|
font-size: 36upx;
|
|
padding-left: 14upx;
|
|
position: relative;
|
|
}
|
|
.i1_head .i1_head_left::after {
|
|
width: 8upx;
|
|
height: 26upx;
|
|
background: #ffb155;
|
|
border-radius: 10upx;
|
|
content: '';
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
position: absolute;
|
|
}
|
|
.i1_head .i1_head_right {
|
|
font-size: 24upx;
|
|
color: #888a87;
|
|
}
|
|
.i1_head .more_arrow {
|
|
width: 12upx;
|
|
height: 19upx;
|
|
margin-left: 8upx;
|
|
}
|
|
/*广告*/
|
|
.swiper,
|
|
.swiper_img,
|
|
.swiper_con {
|
|
width: 100%;
|
|
height: 430upx;
|
|
position: relative;
|
|
}
|
|
.swiper_page {
|
|
width: 76upx;
|
|
height: 30upx;
|
|
border-radius: 20upx;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: 20upx;
|
|
position: absolute;
|
|
right: 30upx;
|
|
bottom: 50upx;
|
|
z-index: 1000;
|
|
}
|
|
.swiper_page .swiper_page_line {
|
|
margin: 0 5upx;
|
|
}
|
|
/*详情*/
|
|
.detail_con {
|
|
background: #fff;
|
|
}
|
|
.detail_con .detail_box {
|
|
border-radius: 20upx;
|
|
box-shadow: 0px 0px 15upx 0px rgba(0, 0, 0, 0.15);
|
|
position: relative;
|
|
z-index: 1010;
|
|
top: -20upx;
|
|
background: #fff;
|
|
padding: 0 30upx;
|
|
}
|
|
.detail_box_1 {
|
|
width: 100%;
|
|
border-bottom: 1upx solid #edeaea;
|
|
padding: 46upx 0;
|
|
}
|
|
.detail_box_1 .detail_box_nav {
|
|
background: transparent;
|
|
line-height: 24upx;
|
|
}
|
|
.detail_box_1 .detail_box_nav:first-child {
|
|
margin-right: 26upx;
|
|
}
|
|
.detail_box_1 .left {
|
|
width: 72%;
|
|
}
|
|
.detail_box_1 .right {
|
|
width: 28%;
|
|
position: relative;
|
|
}
|
|
.detail_box_1 .right::after {
|
|
content: '';
|
|
left: 0;
|
|
width: 1upx;
|
|
background: #edeaea;
|
|
height: 80upx;
|
|
top: 0;
|
|
position: absolute;
|
|
}
|
|
.detail_box_1 .detail_box_icon {
|
|
height: 39upx;
|
|
}
|
|
.detail_box_1 .detail_box_icon.icon1 {
|
|
width: 40upx;
|
|
}
|
|
.detail_box_1 .detail_box_icon.icon2 {
|
|
width: 42upx;
|
|
}
|
|
.detail_box_1 .txt {
|
|
font-size: 20upx;
|
|
text-align: center;
|
|
margin-top: 10upx;
|
|
color: #767676;
|
|
}
|
|
.detail_box_1 .detail_title {
|
|
font-size: 36upx;
|
|
line-height: 40upx;
|
|
color: #000000;
|
|
padding-bottom: 20upx;
|
|
padding-right: 26upx;
|
|
}
|
|
.detail_box_1 .detail_subtitle {
|
|
font-size: 24upx;
|
|
line-height: 30upx;
|
|
color: #767676;
|
|
}
|
|
.detail_box_2 {
|
|
width: 100%;
|
|
border-bottom: 1upx solid #edeaea;
|
|
padding: 30upx 0;
|
|
color: #6a6a6a;
|
|
font-size: 28upx;
|
|
}
|
|
.detail_box_2:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.detail_box_2 .phone_icon {
|
|
width: 29upx;
|
|
height: 29upx;
|
|
margin-right: 10upx;
|
|
}
|
|
.detail_box_2 .phone_txt {
|
|
font-size: 30upx;
|
|
color: #000000;
|
|
}
|
|
.detail_box_2 .phone_num {
|
|
margin-left: 16upx;
|
|
padding-left: 16upx;
|
|
border-left: 1upx solid #edeaea;
|
|
}
|
|
.cgd_box {
|
|
margin: 0 30upx;
|
|
}
|
|
.cgd1_box .i1_head {
|
|
padding-top: 20upx !important;
|
|
}
|
|
.cgd1_box .cgd1_content {
|
|
font-size: 28upx;
|
|
line-height: 38upx;
|
|
color: #000;
|
|
padding-top: 26upx;
|
|
padding-bottom: 20upx;
|
|
}
|
|
.cgd1_box .img {
|
|
width: 100%;
|
|
margin: 20upx 0 10upx 0;
|
|
}
|
|
.cgd1_box .cgd1_txt1 {
|
|
font-size: 30upx;
|
|
color: #777777;
|
|
line-height: 48upx;
|
|
}
|
|
.cgd1_box .cgd1_txt2 {
|
|
font-size: 30upx;
|
|
color: #000;
|
|
line-height: 48upx;
|
|
margin: 0 0 10upx 0;
|
|
}
|
|
.cgd1_box .cgd1_txt3 {
|
|
font-size: 24upx;
|
|
color: #777777;
|
|
line-height: 38upx;
|
|
}
|
|
.cgd1_box image {
|
|
display: block;
|
|
margin: auto;
|
|
max-width: 100%;
|
|
}
|
|
.cgd2_box .i1_head_right .txt {
|
|
color: #a0bdf7;
|
|
font-size: 30upx;
|
|
}
|
|
.cgd2_box .i1_head_right .more_arrow {
|
|
width: 13upx;
|
|
height: 21upx;
|
|
}
|
|
/*评论*/
|
|
.comment_list {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
.comment_nav:first-child {
|
|
padding-top: 26upx;
|
|
}
|
|
.comment_nav {
|
|
border-bottom: 1upx solid #edeaea;
|
|
padding-top: 56upx;
|
|
padding-bottom: 30upx;
|
|
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;
|
|
}
|
|
.gray_content_btn {
|
|
background: #bbb8b8;
|
|
}
|
|
.content_btn_con {
|
|
padding: 30upx;
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
z-index: 1002;
|
|
width: calc(100% - 60upx);
|
|
background: #fff;
|
|
}
|
|
</style>
|
|
|