|
|
<template>
|
|
|
<view>
|
|
|
<view class="">
|
|
|
<view class="activityBox">
|
|
|
<view class="activityBox-top">
|
|
|
<swiper autoplay="true" :interval="4000" :duration="1000" :indicator-dots="true"
|
|
|
indicator-active-color="rgba(255, 255, 255, 0.7)" indicator-color="rgba(239, 149, 37, 1)"
|
|
|
:current="topSwiperIndex" @change="topSwiperTab">
|
|
|
<swiper-item v-for="(item,index) in list.banners" :key="index">
|
|
|
<view class="swiper-item">
|
|
|
<image :src="item.upload.url" mode="aspectFill"></image>
|
|
|
</view>
|
|
|
</swiper-item>
|
|
|
</swiper>
|
|
|
</view>
|
|
|
<view class="activityBox-content flex-col">
|
|
|
<view class="activityBox-row flex-row justify-between">
|
|
|
<text class="activityBox-title">{{isUnde(list.name)}}</text>
|
|
|
</view>
|
|
|
<view class="activityBox-row">
|
|
|
<text class="icon-huodong iconfont"></text>
|
|
|
<text>活动地址：{{isUnde(list.address)}}</text>
|
|
|
</view>
|
|
|
<view class="activityBox-row flex-row align-center" @click="tothere">
|
|
|
<text class="icon-ditu-dibiao iconfont"></text>
|
|
|
<text>距离：{{isUnde(list.distance)}}km</text>
|
|
|
<view class="tomap">
|
|
|
<text class="icon-daohang1 iconfont" style="margin-right: 0;"></text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="infoBox" style="padding-bottom:0;margin-bottom: 26rpx;">
|
|
|
<view class="activityBox-row">
|
|
|
<view class="infoBox-title">
|
|
|
<text class="infoBox-titletxt">活动场次</text>
|
|
|
</view>
|
|
|
<view class="numbers">
|
|
|
<view v-for="(item, index) in numbers" :key="index" @click="numChange(item)" class="numbersBox"
|
|
|
:class="{numbersBoxActive:item.checked}">
|
|
|
<view style="padding-left:50rpx;margin-bottom:10rpx">
|
|
|
<text style="margin-right:20rpx;font-size: 28rpx;font-weight: bold;">
|
|
|
{{item.label}}
|
|
|
</text>
|
|
|
</view>
|
|
|
<view style="padding-left:50rpx;margin-bottom:10rpx">
|
|
|
<text style="margin-right:20rpx">
|
|
|
活动时间：{{item.time}}
|
|
|
</text>
|
|
|
</view>
|
|
|
<view style="padding-left:50rpx;margin-bottom:10rpx">
|
|
|
<text v-if="list.form!=2">
|
|
|
限制人数：{{item.total==0?'不限':item.total}}
|
|
|
</text>
|
|
|
<text v-else>
|
|
|
{{item.has_total>0?"预约已满":""}}
|
|
|
</text>
|
|
|
<text style="margin-left:20rpx">
|
|
|
已报名数：{{item.has_total}}
|
|
|
</text>
|
|
|
|
|
|
</view>
|
|
|
<view class="book-box-row-timeitem-status" v-if="item.checked">
|
|
|
<u-icon name="checkmark" color="#fff" size="20rpx"></u-icon>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="infoBox">
|
|
|
<view class="infoBox-title">
|
|
|
<text class="infoBox-titletxt">活动详情</text>
|
|
|
</view>
|
|
|
<view class="infoBox-content">
|
|
|
<u-parse v-if='showContent' :content="list.content?list.content:' '"/>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="infofooter" v-if="list.orders_total==0||(list.orders_total>0&&list.total!=list.orders_total)&&isCanBook">
|
|
|
<u-popup :show="showNumbers" mode="bottom" @close="closeNum" :round="10" closeable>
|
|
|
<view class="mpopup">
|
|
|
<view class="mpopup-title">
|
|
|
场次选择
|
|
|
</view>
|
|
|
<view class="mpopup-content">
|
|
|
<view class="numbers">
|
|
|
<u-radio-group placement="column" v-model="chooseNum" @change="numChange">
|
|
|
<u-radio activeColor="#cf995a" v-for="(item, index) in numbers" :key="index"
|
|
|
:label="item.label" :disabled="item.disabled" :name="item.id">
|
|
|
</u-radio>
|
|
|
</u-radio-group>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</u-popup>
|
|
|
<view class="flex-row" v-if="list.status==1">
|
|
|
<view style="margin-right: 14rpx;flex: 1;" v-if="list.join_type==1||list.join_type==0">
|
|
|
<u-button type="primary" @click="tobook('team')">团体预约</u-button>
|
|
|
</view>
|
|
|
<view style="margin-left: 14rpx;flex: 1;" v-if="list.join_type==2||list.join_type==0">
|
|
|
<u-button type="primary" @click="tobook('user')">个人预约</u-button>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import uParse from '@/components/gaoyia-parse/parse.vue'
|
|
|
export default {
|
|
|
components: {
|
|
|
uParse
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
id: "",
|
|
|
latitude: "",
|
|
|
longitude: "",
|
|
|
list: {},
|
|
|
topSwiperIndex: 0,
|
|
|
chooseNum: "",
|
|
|
numbers: [],
|
|
|
showNumbers: false,
|
|
|
teamType: "",
|
|
|
activity_number_id: "",
|
|
|
isCanBook:false,
|
|
|
showContent:false
|
|
|
}
|
|
|
},
|
|
|
onLoad(options) {
|
|
|
var that = this;
|
|
|
that.id = options.id;
|
|
|
|
|
|
|
|
|
},
|
|
|
onShow(){
|
|
|
var that = this;
|
|
|
that.numbers=[];
|
|
|
wx.getLocation({
|
|
|
success(res) {
|
|
|
console.log(res)
|
|
|
that.latitude = res.latitude;
|
|
|
that.longitude = res.longitude;
|
|
|
that.loadActiveInfo()
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
// onShareAppMessage() {
|
|
|
// return {
|
|
|
// title: this.list.name,
|
|
|
// path: "/packages/activity/info?id=" + this.list.id,
|
|
|
// imageUrl: this.list.cover_upload.url
|
|
|
// }
|
|
|
// },
|
|
|
onShareAppMessage() {
|
|
|
return this.util.shareInfo
|
|
|
},
|
|
|
|
|
|
onShareTimeline(){
|
|
|
return this.util.shareInfo
|
|
|
},
|
|
|
methods: {
|
|
|
timeFormat(val, format) {
|
|
|
return this.$moment(val).format(format)
|
|
|
},
|
|
|
tothere() {
|
|
|
uni.openLocation({
|
|
|
latitude: parseFloat(this.list.latitude),
|
|
|
longitude: parseFloat(this.list.longitude),
|
|
|
name: this.list.name,
|
|
|
address: this.list.address
|
|
|
})
|
|
|
},
|
|
|
closeNum() {
|
|
|
this.showNumbers = false
|
|
|
this.chooseNum = ""
|
|
|
},
|
|
|
numChange(item) {
|
|
|
if (item.disabled) {
|
|
|
this.util.alert("您选择的场次不可预约！");
|
|
|
// this.isCanBook = false
|
|
|
return;
|
|
|
};
|
|
|
var _numbers = this.numbers;
|
|
|
for (var mod of _numbers) {
|
|
|
mod.checked = false;
|
|
|
|
|
|
}
|
|
|
this.isCanBook = true
|
|
|
item.checked = true;
|
|
|
this.activity_number_id = item.id;
|
|
|
this.numbers = _numbers;
|
|
|
this.$forceUpdate()
|
|
|
},
|
|
|
tobook(type) {
|
|
|
// this.showNumbers = true
|
|
|
this.teamType = type;
|
|
|
|
|
|
if (this.util.isNull(this.activity_number_id)) {
|
|
|
uni.showToast({
|
|
|
icon: "none",
|
|
|
title: "请选择活动场次"
|
|
|
})
|
|
|
return false;
|
|
|
}
|
|
|
uni.navigateTo({
|
|
|
url: "book?type=" + this.teamType + "&activity_id=" + this.id + "&activity_number_id=" + this
|
|
|
.activity_number_id
|
|
|
})
|
|
|
},
|
|
|
loadActiveInfo() {
|
|
|
var that = this;
|
|
|
var nt = new Date();
|
|
|
this.util.request({
|
|
|
api: '/api/mobile/activity/show',
|
|
|
data: {
|
|
|
id: that.id,
|
|
|
latitude: that.latitude,
|
|
|
longitude: that.longitude
|
|
|
},
|
|
|
utilSuccess: function(res) {
|
|
|
// res.isCanBook = that.$moment(nt).isBefore(res.end_plan);
|
|
|
that.list = res;
|
|
|
that.showContent = true
|
|
|
let numberArr = []
|
|
|
let nowTime = that.getNowTime();
|
|
|
var i = 0;
|
|
|
var chkMod=null
|
|
|
for (var m of res.numbers) {
|
|
|
m.label = m.name;
|
|
|
m.time = that.timeFormat(m.start_time, "yyyy年MM月DD日") + " " + that
|
|
|
.getHm(m.start_time) + "-" + that.getHm(m.end_time);
|
|
|
if (that.compareDate(nowTime, m
|
|
|
.end_plan)) {
|
|
|
m.disabled = true
|
|
|
}
|
|
|
|
|
|
if (m.has_total == m.total && m.total != 0) {
|
|
|
m.disabled = true
|
|
|
|
|
|
}
|
|
|
if(res.form==2&&parseInt(m.has_total)>0){
|
|
|
m.disabled = true
|
|
|
}
|
|
|
numberArr.push(m);
|
|
|
if (!m.disabled) {
|
|
|
m.checked = i == 0;
|
|
|
if(chkMod===null){chkMod=m;}
|
|
|
|
|
|
i++;
|
|
|
}
|
|
|
}
|
|
|
if (chkMod){
|
|
|
that.activity_number_id = chkMod.id
|
|
|
that.isCanBook = true
|
|
|
}
|
|
|
|
|
|
|
|
|
that.numbers = numberArr
|
|
|
wx.setStorage({
|
|
|
key: 'activityinfo',
|
|
|
data: res,
|
|
|
success: () => {
|
|
|
console.log('存储成功');
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
utilFail: function(res) {
|
|
|
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
// 比较时间
|
|
|
getNowTime() {
|
|
|
const date = new Date();
|
|
|
let year = date.getFullYear();
|
|
|
let month = date.getMonth() + 1;
|
|
|
let day = date.getDate();
|
|
|
let hours = date.getHours()
|
|
|
let minutes = date.getMinutes()
|
|
|
let seconds = date.getSeconds()
|
|
|
month = month > 9 ? month : '0' + month;
|
|
|
day = day > 9 ? day : '0' + day;
|
|
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
|
|
},
|
|
|
compareDate(d1, d2) {
|
|
|
let reg = new RegExp('-', 'g')
|
|
|
return ((new Date(d1.replace(reg, '/'))) > (new Date(d2.replace(reg, '/'))))
|
|
|
},
|
|
|
topSwiperTab(e) {
|
|
|
var that = this;
|
|
|
this.topSwiperIndex = Number(e.target.current);
|
|
|
},
|
|
|
isUnde(val) {
|
|
|
if (val) {
|
|
|
return val
|
|
|
} else {
|
|
|
return ""
|
|
|
}
|
|
|
},
|
|
|
getHm(val) {
|
|
|
if (val) {
|
|
|
return this.$moment(val).format("HH:mm")
|
|
|
} else return "";
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
@import url("@/static/css/activitybox.css");
|
|
|
|
|
|
page {
|
|
|
background-color: #f7f6f4;
|
|
|
}
|
|
|
.infoBox {
|
|
|
box-sizing: border-box;
|
|
|
padding: 40rpx 0rpx;
|
|
|
background: #FFFFFF;
|
|
|
margin-bottom: 40rpx;
|
|
|
}
|
|
|
.activityBox-title{
|
|
|
font-size: 32rpx;
|
|
|
font-weight:bold;
|
|
|
}
|
|
|
.activityBox-row{
|
|
|
font-size: 28rpx;
|
|
|
}
|
|
|
.infoBox-title {
|
|
|
border-left: 3px solid #cf995a;
|
|
|
font-size: 32rpx;
|
|
|
}
|
|
|
|
|
|
.infoBox-titletxt {
|
|
|
font-size: 30rpx;
|
|
|
color: #4E4E4E;
|
|
|
margin-left: 21rpx;
|
|
|
}
|
|
|
|
|
|
/* .infoBox-content {
|
|
|
padding: 37rpx 26rpx;
|
|
|
box-sizing: border-box;
|
|
|
font-size: 30rpx;
|
|
|
color: #828282;
|
|
|
margin-bottom: 100rpx;
|
|
|
} */
|
|
|
|
|
|
.infofooter {
|
|
|
position: fixed;
|
|
|
width: 100%;
|
|
|
left: 0;
|
|
|
bottom: 0;
|
|
|
background: #FFFFFF;
|
|
|
box-shadow: 2px 3px 10px 0px rgba(107, 94, 77, 0.3);
|
|
|
padding: 22rpx 25rpx;
|
|
|
box-sizing: border-box;
|
|
|
/* background: linear-gradient(0deg, #ffffff 85%, #E4C8A2); */
|
|
|
}
|
|
|
|
|
|
.mpopup {
|
|
|
margin-top: 0rpx;
|
|
|
min-height: 200rpx
|
|
|
}
|
|
|
|
|
|
.mpopup-title {
|
|
|
padding: 20rpx 0
|
|
|
}
|
|
|
|
|
|
.numbers {
|
|
|
/* min-height: 300rpx; */
|
|
|
padding: 31rpx 24rpx;
|
|
|
padding-bottom: 13rpx;
|
|
|
}
|
|
|
|
|
|
.numbers .u-radio {
|
|
|
margin-bottom: 10rpx
|
|
|
}
|
|
|
|
|
|
swiper {
|
|
|
height: 333rpx
|
|
|
}
|
|
|
|
|
|
swiper image {
|
|
|
width: 100%;
|
|
|
height: 333rpx;
|
|
|
}
|
|
|
|
|
|
.colortext {
|
|
|
color: #D98012
|
|
|
}
|
|
|
|
|
|
.numbersBox {
|
|
|
border: #F7F6F4 1px solid;
|
|
|
border-radius: 5px;
|
|
|
background-color: #F7F6F4;
|
|
|
padding: 10px;
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
|
|
|
.numbersBoxActive {
|
|
|
border: #D98012 1px solid;
|
|
|
background-color: #FCF6E3;
|
|
|
position: relative;
|
|
|
|
|
|
}
|
|
|
|
|
|
.book-box-row-timeitem-status {
|
|
|
position: absolute;
|
|
|
right: 0;
|
|
|
top: 0;
|
|
|
background: #cf995a;
|
|
|
border-top-right-radius: 5rpx;
|
|
|
border-bottom-left-radius: 5rpx;
|
|
|
font-size: 20rpx;
|
|
|
color: #828282;
|
|
|
padding: 7rpx;
|
|
|
}
|
|
|
.infoBox-content{
|
|
|
font-size: 28rpx;
|
|
|
padding:0 60rpx;
|
|
|
background: #fff;
|
|
|
padding-top: 30rpx;
|
|
|
/* border-radius: 30rpx 30rpx 0 0; */
|
|
|
padding-bottom:180rpx;
|
|
|
}
|
|
|
.infoBox-content img{
|
|
|
width:100%;
|
|
|
margin:10rpx 0;
|
|
|
|
|
|
}
|
|
|
.wxParse{
|
|
|
line-height: 2.3;
|
|
|
}
|
|
|
</style> |
