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.
104 lines
2.5 KiB
104 lines
2.5 KiB
<template>
|
|
<view>
|
|
<lf-nav title="活动详情" :showIcon="true"></lf-nav>
|
|
<view class="content">
|
|
<view class="title">海蓝之谜美颜会 9月15日场10:30场</view>
|
|
<view class="level2-title">会员尊享美颜会</view>
|
|
<view class="level3-title">
|
|
<text>活动时间：</text>
|
|
<text class="color1">2021年9月15日 10:30-12:00场</text>
|
|
</view>
|
|
<view class="level3-title">
|
|
<text>报名时间：</text>
|
|
<text class="color2">即日起-9月12日24:00</text>
|
|
</view>
|
|
<view class="level3-title">
|
|
<text>活动内容：</text>
|
|
<text class="color2">美白课堂+现场DIY甜橙茶</text>
|
|
</view>
|
|
<view class="level3-title">
|
|
<text>活动人数：</text>
|
|
<text class="color2">5人</text>
|
|
</view>
|
|
<view class="level3-title">
|
|
<text>活动报名：</text>
|
|
<text class="color1">免费</text>
|
|
</view>
|
|
<view class="level3-title">
|
|
<view>活动规则：</view>
|
|
<view class="color2">
|
|
<view>1、金卡及以上会员可免费报名参加，每个ID仅可报名一场活动（以每个第一次报名场次为准，超出报名次数不予审核通过）；</view>
|
|
<view>2、报名成功后，店铺会在活动前一天联系您报名的手机号；</view>
|
|
<view>3、如有疑问，请致电海蓝之谜店铺联系电话：0315-743843474</view>
|
|
</view>
|
|
</view>
|
|
<button class="btn"
|
|
hover-class="lf-opacity"
|
|
:disabled="is_end"
|
|
:class="{'lf-opacity': is_end}"
|
|
@click="submit">{{ is_end ? '名额已满' : '立即报名' }}
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data(){
|
|
return {
|
|
is_end: false // 是否可报名，false为活动为结束可报名，否则不可报名
|
|
}
|
|
},
|
|
onLoad(){
|
|
|
|
},
|
|
methods: {
|
|
submit(){
|
|
if(this.is_end) return;
|
|
this.$url('/pages/index/activity/confirm');
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped="scoped">
|
|
.content{
|
|
width: 750rpx;
|
|
height: max-content;
|
|
padding: 30rpx 32rpx;
|
|
box-sizing: border-box;
|
|
.title{
|
|
font-size: 36rpx;
|
|
color: #222222;
|
|
font-weight: bold;
|
|
min-height: 100rpx;
|
|
}
|
|
.level2-title{
|
|
font-size: 28rpx;
|
|
color: #222222;
|
|
font-weight: bold;
|
|
margin-top: 20rpx;
|
|
}
|
|
.level3-title{
|
|
margin-top: 30rpx;
|
|
font-size: 28rpx;
|
|
color: #777777;
|
|
}
|
|
.btn{
|
|
width: 550rpx;
|
|
height: 100rpx;
|
|
line-height: 100rpx;
|
|
background-color: #15716E;
|
|
border-radius: 50rpx;
|
|
color: #FFFFFF;
|
|
font-size: 32rpx;
|
|
margin-top: 60rpx;
|
|
}
|
|
}
|
|
.color1{
|
|
color: #F63434;
|
|
}
|
|
.color2{
|
|
color: #222222;
|
|
}
|
|
</style>
|