|
|
<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-shijian iconfont"></text>
|
|
|
<text>活动时间：{{timeFormat(list.start_time,"yyyy年MM月DD日")}}
|
|
|
{{getHm(list.start_time)}}-{{getHm(list.end_time)}}</text>
|
|
|
|
|
|
</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">
|
|
|
<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">
|
|
|
<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;
|
|
|
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(val) {
|
|
|
console.log(val)
|
|
|
this.activity_number_id = val
|
|
|
console.log("book?type=" + this.teamType + "&activity_id=" + this.id + "&activity_number_id="+this.activity_number_id)
|
|
|
uni.navigateTo({
|
|
|
url: "book?type=" + this.teamType + "&activity_id=" + this.id + "&activity_number_id="+this.activity_number_id
|
|
|
})
|
|
|
},
|
|
|
tobook(type) {
|
|
|
this.showNumbers = true
|
|
|
this.teamType = type
|
|
|
},
|
|
|
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;
|
|
|
let numberArr = []
|
|
|
let nowTime = that.getNowTime()
|
|
|
for(var m of res.numbers){
|
|
|
m.label = m.name + "(" + that.timeFormat(m.start_time,"yyyy年MM月DD日") + " " + that.getHm(m.start_time)+"-"+that.getHm(m.end_time) + ")"
|
|
|
if(m.has_total==m.total&&m.total!=0 || that.compareDate(nowTime,m.end_plan)){
|
|
|
m.disabled = true
|
|
|
}
|
|
|
|
|
|
|
|
|
numberArr.push(m)
|
|
|
}
|
|
|
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: 60rpx 40rpx;
|
|
|
}
|
|
|
|
|
|
.numbers .u-radio {
|
|
|
margin-bottom: 40rpx
|
|
|
}
|
|
|
|
|
|
swiper {
|
|
|
height: 333rpx
|
|
|
}
|
|
|
|
|
|
swiper image {
|
|
|
width: 100%;
|
|
|
height: 333rpx;
|
|
|
}
|
|
|
|
|
|
.colortext {
|
|
|
color: #D98012
|
|
|
}
|
|
|
</style>
|
