|
|
<template>
|
|
|
<view>
|
|
|
<view class="">
|
|
|
<view class="activityBox">
|
|
|
<view class="activityBox-top">
|
|
|
<!-- <image src="../../static/img/img_activity.jpg" style="width: 100%;height: 333rpx;"></image> -->
|
|
|
<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 class="tag tag_green activityBox_btn">
|
|
|
<text>{{isUnde(list.type_name)}}</text>
|
|
|
</view> -->
|
|
|
</view>
|
|
|
<!-- <view class="activityBox-row">
|
|
|
<text class="icon-huodongfangshi iconfont"></text>
|
|
|
<text>活动方式：{{isUnde(list.area_name)}}</text>
|
|
|
|
|
|
</view> -->
|
|
|
<view class="activityBox-row">
|
|
|
<text class="icon-huodong iconfont"></text>
|
|
|
<text>活动地址：{{isUnde(list.address)}}</text>
|
|
|
</view>
|
|
|
|
|
|
<!-- <view class="activityBox-row">
|
|
|
<text class="icon-renshu iconfont"></text>
|
|
|
<text>人数限制：{{isUnde(list.total)==0?'不限':isUnde(list.total)}}</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 class="colortext activityBox-row" v-if="list.status==1">
|
|
|
{{list.rate_name}} (已报名{{list.orders_total}}人)
|
|
|
</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">
|
|
|
<rich-text style="text-indent: 2em;font-size: 28rpx;" :nodes="list.content"></rich-text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="infofooter" v-if="list.isCanBook&&list.total!=list.orders_total">
|
|
|
<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="#EF9525" 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&&list.isCanBook">
|
|
|
<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>
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
id: "",
|
|
|
latitude: "",
|
|
|
longitude: "",
|
|
|
list: {},
|
|
|
topSwiperIndex: 0,
|
|
|
chooseNum: "",
|
|
|
numbers: [],
|
|
|
showNumbers: false,
|
|
|
teamType: "",
|
|
|
activity_number_id: ""
|
|
|
}
|
|
|
},
|
|
|
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: "/pages/activity/info?id=" + this.list.id,
|
|
|
imageUrl: this.list.cover_upload.url
|
|
|
}
|
|
|
},
|
|
|
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("您选择的场次不可预约！");
|
|
|
return;
|
|
|
};
|
|
|
var _numbers = this.numbers;
|
|
|
for (var mod of _numbers) {
|
|
|
mod.checked = false;
|
|
|
|
|
|
}
|
|
|
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);
|
|
|
console.log("res.isCanBook",res.isCanBook)
|
|
|
that.list = res;
|
|
|
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
|
|
|
console.log("1",m.disabled)
|
|
|
}
|
|
|
|
|
|
if (m.has_total == m.total && m.total != 0) {
|
|
|
m.disabled = true
|
|
|
console.log("2",m.disabled)
|
|
|
}
|
|
|
// 如果是主题党日活动只要有人报名就不可以再次报名了
|
|
|
if (res.form == 2 && m.has_total > 0) {
|
|
|
m.disabled = true
|
|
|
}
|
|
|
numberArr.push(m);
|
|
|
if (!m.disabled) {
|
|
|
m.checked = i == 0;
|
|
|
if (chkMod == null)
|
|
|
chkMod = m;
|
|
|
i++;
|
|
|
}
|
|
|
}
|
|
|
//console.log("numberArr[0].id", numberArr[0].id);
|
|
|
if (chkMod)
|
|
|
that.activity_number_id = chkMod.id
|
|
|
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;
|
|
|
}
|
|
|
|
|
|
.infoBox-title {
|
|
|
border-left: 3px solid #EF9525;
|
|
|
}
|
|
|
|
|
|
.infoBox-titletxt {
|
|
|
font-size: 30rpx;
|
|
|
color: #4E4E4E;
|
|
|
margin-left: 21rpx;
|
|
|
}
|
|
|
|
|
|
.infoBox-content {
|
|
|
padding: 37rpx 26rpx;
|
|
|
box-sizing: border-box;
|
|
|
font-size: 24rpx;
|
|
|
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: #EF9525;
|
|
|
border-top-right-radius: 5rpx;
|
|
|
border-bottom-left-radius: 5rpx;
|
|
|
font-size: 20rpx;
|
|
|
color: #828282;
|
|
|
padding: 7rpx;
|
|
|
}
|
|
|
</style> |
