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.
163 lines
3.5 KiB
163 lines
3.5 KiB
<template> |
|
<view class="activity-detail"> |
|
<view class="head_box"> |
|
<cu-custom :isBack="true" :bgColor="'transparent'"></cu-custom> |
|
</view> |
|
<view class="activity-banner"> |
|
<image :src="detail.images"></image> |
|
</view> |
|
<view class="title-box"> |
|
<view class="title">{{detail.name}}</view> |
|
<view class="price">¥{{detail.price || 0}}</view> |
|
</view> |
|
<view class="activity-info"> |
|
<view class="title">活动介绍</view> |
|
<view class="address acea-row"> |
|
<image src="../../../static/images/address.png"></image> |
|
<view class="label line1" @click="openMap()">活动地点：{{detail.address || ''}}</view> |
|
</view> |
|
<view class="address acea-row"> |
|
<image src="../../../static/images/time.png"></image> |
|
<view class="label line1">活动时间：{{detail.activityStartTime || ''}}</view> |
|
</view> |
|
<view class="address acea-row"> |
|
<image src="../../../static/images/price.png"></image> |
|
<view class="label line1">活动费用：{{detail.price || ''}}</view> |
|
</view> |
|
<view class="info-content"> |
|
<rich-text :nodes="detail.content"></rich-text> |
|
</view> |
|
<view class="sign-btn" v-if="detail.status == 1" @click="toSignPage">立即报名</view> |
|
<view class="cancel-btn" v-if="detail.status == 2">报名截止</view> |
|
<view class="cancel-btn" v-if="detail.status == 3">活动结束</view> |
|
<view class="cancel-btn" v-if="detail.status == 0">等待报名</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import { getActivityInfo } from '@/api/home.js' |
|
import { formatRichText } from '@/utils/util.js' |
|
export default{ |
|
data(){ |
|
return { |
|
id: '', |
|
detail: {} |
|
} |
|
}, |
|
mounted() { |
|
this.id = this.$yroute.query.id |
|
this.getDetail() |
|
}, |
|
methods:{ |
|
getDetail(){ |
|
getActivityInfo(this.id).then((res)=>{ |
|
if(res.success){ |
|
res.data.content = formatRichText(res.data.content) |
|
this.detail = res.data |
|
} else{ |
|
uni.showToast({ |
|
title: '服务器错误', |
|
icon: 'none' |
|
}) |
|
} |
|
}) |
|
}, |
|
openMap(){ |
|
uni.openLocation({ |
|
latitude: this.detail.latitude, |
|
longitude: this.detail.longitude, |
|
success: function () { |
|
console.log('success'); |
|
} |
|
}); |
|
}, |
|
toSignPage() { |
|
uni.navigateTo({ |
|
url: '/pages/activity/signIn/index?id=' + this.detail.id |
|
}); |
|
}, |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="less"> |
|
.cuIcon-back{ |
|
color: #fff; |
|
} |
|
.activity-detail{ |
|
width: 100%; |
|
position: relative; |
|
.activity-banner{ |
|
width: 100%; |
|
height: 750rpx; |
|
position: absolute; |
|
top: 0; |
|
image{ |
|
width: 100%; |
|
height: 100%; |
|
} |
|
} |
|
.title-box{ |
|
width: 100%; |
|
padding: 60rpx 40rpx 12rpx; |
|
border-radius: 34rpx 34rpx 0px 0px; |
|
background: #fff; |
|
border-bottom: 26rpx solid #F7F7F7; |
|
position: relative; |
|
top: 536rpx; |
|
left: 0; |
|
.title{ |
|
color: #212121; |
|
font-size: 38rpx; |
|
margin-bottom: 34rpx; |
|
} |
|
.price{ |
|
color: #E70012; |
|
font-size: 44rpx; |
|
line-height: 58rpx; |
|
} |
|
} |
|
.activity-info{ |
|
width: 100%; |
|
padding: 52rpx 40rpx 32rpx; |
|
background: #fff; |
|
position: absolute; |
|
top: 894rpx; |
|
left: 0; |
|
.title{ |
|
font-size: 40rpx; |
|
color: #000; |
|
margin-bottom: 34rpx; |
|
} |
|
.address{ |
|
font-size: 28rpx; |
|
color: #707070; |
|
margin-bottom: 20rpx; |
|
.label{ |
|
width: calc(100% - 70rpx); |
|
} |
|
image{ |
|
width: 30rpx; |
|
height: 30rpx; |
|
margin-right: 22rpx; |
|
} |
|
} |
|
.sign-btn{ |
|
width: 100%; |
|
height: 92rpx; |
|
font-size: 40rpx; |
|
color: #fff; |
|
line-height: 92rpx; |
|
text-align: center; |
|
background: #212121; |
|
margin-top: 52rpx; |
|
} |
|
.cancel-btn{ |
|
background: #F4F4F4; |
|
color: #868686; |
|
} |
|
} |
|
} |
|
|
|
</style>
|
|
|