邓平艺
5 years ago
6 changed files with 206 additions and 4 deletions
-
2common/js/mixin.js
-
2components/index-nav/index-nav.vue
-
16pages.json
-
84pages/index/activity/confirm.vue
-
104pages/index/activity/detail.vue
-
2pages/index/activity/hot.vue
@ -0,0 +1,84 @@ |
|||
<template> |
|||
<view> |
|||
<lf-nav title="确认报名" :showIcon="true"></lf-nav> |
|||
<view class="content"> |
|||
<view class="title">联系人信息</view> |
|||
<view class="list"> |
|||
<view class="label">姓名</view> |
|||
<input v-model="name" class="input" placeholder="请输入您的姓名" /> |
|||
</view> |
|||
<view class="list"> |
|||
<view class="label">手机号</view> |
|||
<input v-model="phone" class="input" placeholder="请输入您的手机号" maxlength="11" /> |
|||
</view> |
|||
</view> |
|||
<view class="fixed-btn" hover-class="lf-opacity" @click="confirm">确认报名（免费）</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data(){ |
|||
return { |
|||
name: '', |
|||
phone: '' |
|||
} |
|||
}, |
|||
onLoad(){ |
|||
|
|||
}, |
|||
methods: { |
|||
confirm(){ |
|||
if(!this.name || !this.phone) return this.$msg('请将信息补充完整'); |
|||
this.$msg('报名成功').then(() => { |
|||
this.$toBack(); |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped="scoped"> |
|||
.content{ |
|||
width: 750rpx; |
|||
height: max-content; |
|||
padding: 40rpx 32rpx; |
|||
box-sizing: border-box; |
|||
.title{ |
|||
font-size: 32rpx; |
|||
color: #222222; |
|||
font-weight: bold; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
.list{ |
|||
width: 100%; |
|||
height: 100rpx; |
|||
border-bottom: 1rpx solid #e5e5e5; |
|||
display: flex; |
|||
align-items: center; |
|||
margin-top: 10rpx; |
|||
.label{ |
|||
width: 130rpx; |
|||
font-size: 28rpx; |
|||
color: #777777; |
|||
} |
|||
.input{ |
|||
width: 554rpx; |
|||
font-size: 28rpx; |
|||
} |
|||
} |
|||
} |
|||
.fixed-btn{ |
|||
position: fixed; |
|||
bottom: 10vh; |
|||
left: calc(50% - 275rpx); |
|||
width: 550rpx; |
|||
height: 100rpx; |
|||
background-color: #15716E; |
|||
color: #FFFFFF; |
|||
text-align: center; |
|||
line-height: 100rpx; |
|||
font-size: 32rpx; |
|||
border-radius: 50rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,104 @@ |
|||
<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> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue