9 changed files with 238 additions and 32 deletions
|
After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
@ -0,0 +1,92 @@ |
|||
<template> |
|||
<div class='container m-bot50'> |
|||
<div class="card"> |
|||
<img src="@/assets/images/zhishu.png" alt="" style="width: 100%;"> |
|||
<div class="m-top15 p0"> |
|||
<h2 style="margin: 0; font-size: 21px;">春天植树节邀您行</h2> |
|||
<van-cell class="m-top15" :border="false" :title-style="{ 'max-width': '80px' }" title="活动时间：" |
|||
value="2024-03-12 09:00 至 2024-03-12 17:00"></van-cell> |
|||
<van-cell :border="false" :title-style="{ 'max-width': '115px' }" title="报名开始时间：" |
|||
value="2024-03-12 09:00"></van-cell> |
|||
<van-cell :border="false" :title-style="{ 'max-width': '115px' }" title="报名截止时间：" |
|||
value="2024-03-12 09:00"></van-cell> |
|||
<van-cell :border="false" :title-style="{ 'max-width': '80px' }" title="活动地点：" |
|||
value="重庆南路90号嘉定山森林公园南门"></van-cell> |
|||
<van-cell :border="false" :title-style="{ 'max-width': '65px' }" title="举办方：" |
|||
value="嘉定山社区 重庆路小学"></van-cell> |
|||
<van-divider /> |
|||
<div |
|||
v-html="`<p> 春风催心律，正是指数是。为积极响应茂名市全民义务旅意，我是将于近期开展2021“绿名贸易”好心林工艺素知书货哦你的</p><p> 刺死活动以再深入贯彻党的二十大精神和习近平生态文明思想，认真贯彻落实习近平总书记是擦广东的重要指示精神。</p><p> 持续性增强全民志绿护绿关铝的自觉性</p>`"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="card m-top10"> |
|||
<div class="title"><span>活动报名</span></div> |
|||
<van-cell-group v-for="(item,index) in signUp" :border="false"> |
|||
<van-field v-model="signUp[index].name" required :label="`姓名${index+1}`" placeholder="请输入用户名" /> |
|||
<van-field v-model="signUp[index].mobile" required label="联系电话" placeholder="请输入您的电话号码" /> |
|||
<van-field v-model="signUp[index].remark" required label="备注" placeholder="请输入" rows="3" autosize type="textarea" /> |
|||
</van-cell-group> |
|||
<div class="flex flex-center1 m-top12"> |
|||
<div class="flex flex-center2 flex-center1 flex1" @click="handelAddResi"> <img src="@/assets/images/icons/add.png" alt="" class="img_20 m-right7">添加</div> |
|||
<div class="flex flex-center2 flex-center1 flex1" v-show="signUp.length>1" @click="handelDelResi"> <img src="@/assets/images/icons/del.png" alt="" class="img_20 m-right7">删除</div> |
|||
</div> |
|||
</div> |
|||
<div class="bot_btn flex flex-center2" style="height: 50px;"> |
|||
<div class="flex1 flex flex-center1 flex-center2">报名人数：<span class="orange font-size18">30</span> /35人</div> |
|||
<div class="flex1 flex flex-center1 flex-center2"> <van-button size="small" class="m-right7" round> |
|||
<template #icon> |
|||
<img src="@/assets/images/icons/share.png" alt="" class="img_20"> |
|||
</template> 转发</van-button> <van-button type="info" size="small" round>立即报名</van-button></div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
signUp:[ |
|||
{name:"",mobile:"",remark:""}, |
|||
] |
|||
}; |
|||
}, |
|||
created() { |
|||
|
|||
}, |
|||
methods: { |
|||
handelAddResi(){ |
|||
this.signUp.push({name:"",mobile:"",remark:""}) |
|||
}, |
|||
handelDelResi(){ |
|||
this.signUp.pop() |
|||
} |
|||
}, |
|||
components: {}, |
|||
computed: {}, |
|||
watch: {}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='less' scoped> |
|||
:deep(.p0>.van-cell) { |
|||
padding: 0; |
|||
} |
|||
:deep(.van-cell) { |
|||
padding: 16px 8px; |
|||
} |
|||
|
|||
:deep(.van-cell__title) { |
|||
color: #666666; |
|||
} |
|||
|
|||
:deep(.van-cell__value) { |
|||
text-align: left; |
|||
} |
|||
:deep(.van-cell--required){ |
|||
&::before{ |
|||
left: -5px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,105 @@ |
|||
<template> |
|||
<div class='container'> |
|||
<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="communityActivity" class="card" |
|||
:offset="50"> |
|||
<div class="activity_content flex" v-for="(item, index) in activityList" :key="index"@click="$router.push({ path: `/activityDetail` })"> |
|||
<img :src="item.coverPic" alt="" class="mr10 img_round" style="width: 75px;height: 95px;"> |
|||
<div class="flex flex-y flex1 flex-end" style="overflow: hidden;"> |
|||
<div class="van-ellipsis">{{ item.activityName }}</div> |
|||
<div class="address font-size14 van-ellipsis gray">地点：{{ item.address }}</div> |
|||
<div class="time gray font-size14">时间：{{ item.startTime }}</div> |
|||
<div class="flex flex-end"> |
|||
<div> |
|||
<span>报名人数：</span> <span class="font-size18 orange">{{ item.participants }}</span>/<span |
|||
class="font-size14">{{ item.participants }}人</span> |
|||
</div> |
|||
<van-button type="info" size="small" round @click="handelClickJump('activityDetail')" |
|||
:disabled="item.online !== 1">报名</van-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</van-list> |
|||
<register-dialog v-if="showRegister" @close="showRegister = false"></register-dialog> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { communityActivity } from '@/api/home'; |
|||
import registerDialog from '@/components/registerDialog'; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
activityList: [], |
|||
pageSize: 5, |
|||
pageNo: 1, |
|||
agencyId: null, |
|||
finished: false, |
|||
loading: true, |
|||
showRegister: false, |
|||
}; |
|||
}, |
|||
created() { |
|||
this.agencyId = this.$store.state.app.agencyId; |
|||
this.communityActivity(); |
|||
}, |
|||
methods: { |
|||
async communityActivity() { |
|||
let parm = { |
|||
pageSize: this.pageSize, |
|||
pageNo: this.pageNo++, |
|||
agencyId: this.agencyId, |
|||
activityName: "", |
|||
status: "", |
|||
typeId: "", |
|||
startTime: "", |
|||
endTime: "", |
|||
address: "", |
|||
assistingParty: "" |
|||
} |
|||
let res = await communityActivity(parm) |
|||
if (res) { |
|||
this.loading = false; |
|||
if (res.list.length < this.pageSize) { |
|||
this.finished = true; |
|||
} |
|||
this.activityList = this.activityList.concat(res.list); |
|||
} |
|||
}, |
|||
handelClickJump(path) { |
|||
if(path === 'activityDetail'){ |
|||
if (this.$store.state.app.userInfo.mobile) { |
|||
this.$router.push({ path: `/${path}` }); |
|||
} else { |
|||
this.showRegister = true; |
|||
} |
|||
} |
|||
|
|||
} |
|||
}, |
|||
components: { registerDialog }, |
|||
computed: {}, |
|||
watch: {}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='less' scoped> |
|||
.activity_content { |
|||
padding-bottom: 15px; |
|||
box-sizing: border-box; |
|||
width: 100%; |
|||
border-bottom: 1px solid #EAEAEA; |
|||
margin-top: 14px; |
|||
min-height: 110px; |
|||
|
|||
.img { |
|||
width: 231px; |
|||
height: 33px; |
|||
} |
|||
|
|||
&:last-child { |
|||
border-bottom: none; |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue