|
|
|
@ -1,19 +1,19 @@ |
|
|
|
<template> |
|
|
|
<div class='container m-bot50'> |
|
|
|
<div class="card"> |
|
|
|
<img :src="info.coverPic" alt="" style="width: 100%;"> |
|
|
|
<img :src="info.coverPic" alt="" style="width: 100%;"> |
|
|
|
<div class="m-top15 p0"> |
|
|
|
<h2 style="margin: 0; font-size: 21px;">{{ info.activityName }}</h2> |
|
|
|
<van-cell class="m-top15" :border="false" :title-style="{ 'max-width': '80px' }" title="活动时间：" |
|
|
|
:value="`${info.startTime} 至 ${info.endTime}`"></van-cell> |
|
|
|
<van-cell :border="false" :title-style="{ 'max-width': '115px' }" title="报名开始时间：" |
|
|
|
:value=" info.startTime "></van-cell> |
|
|
|
:value="info.startTime"></van-cell> |
|
|
|
<van-cell :border="false" :title-style="{ 'max-width': '115px' }" title="报名截止时间：" |
|
|
|
:value="info.cutOffTime || '--'"></van-cell> |
|
|
|
<van-cell :border="false" :title-style="{ 'max-width': '80px' }" title="活动地点：" |
|
|
|
:value="info.address"></van-cell> |
|
|
|
<van-cell :border="false" :title-style="{ 'max-width': '65px' }" title="举办方：" |
|
|
|
:value="info.assistingParty"></van-cell> |
|
|
|
:value="info.assistingParty"></van-cell> |
|
|
|
<van-divider /> |
|
|
|
<div v-html="info.content"></div> |
|
|
|
</div> |
|
|
|
@ -23,85 +23,103 @@ |
|
|
|
<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" label="备注" placeholder="请输入" rows="3" autosize |
|
|
|
<van-field v-model="signUp[index].remark" label="备注" placeholder="请输入" rows="3" autosize |
|
|
|
type="textarea" /> |
|
|
|
<div class="flex flex-center1 m-top12"> |
|
|
|
<div class="flex flex-center2 flex-center1 flex1" @click="handelAddResi" |
|
|
|
v-if="index + 1 === signUp.length"> <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(item)"> |
|
|
|
<img src="@/assets/images/icons/del.png" alt="" class="img_20 m-right7">删除 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</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">{{info.currentParticipants || 0}}</span> / {{info.participants}}人</div> |
|
|
|
<div class="flex1 flex flex-center1 flex-center2"> <van-button size="small" class="m-right7" round> |
|
|
|
<div class="flex1 flex flex-center1 flex-center2">报名人数：<span class="orange font-size18">{{ |
|
|
|
info.currentParticipants || 0 }}</span> / {{ info.participants }}人</div> |
|
|
|
<div class="flex1 flex flex-center1 flex-center2"> |
|
|
|
<van-button size="small" class="m-right7" round @click="showShare = true"> |
|
|
|
<template #icon> |
|
|
|
<img src="@/assets/images/icons/share.png" alt="" class="img_20"> |
|
|
|
</template> 转发</van-button> <van-button type="info" size="small" round @click="save" v-if="info.online === 1" :disabled="new Date(this.info.cutOffTime.replace(/-/g, '/')).getTime()<Date.now() || this.info.currentParticipants >= this.info.participants">立即报名</van-button></div> |
|
|
|
</template> 转发</van-button> |
|
|
|
<van-button type="info" size="small" round @click="save" v-if="info.online === 1" |
|
|
|
:disabled="new Date(this.info.cutOffTime.replace(/-/g, '/')).getTime() < Date.now() || this.info.currentParticipants >= this.info.participants">立即报名</van-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<Share :show="showShare" @closeShare="showShare = false" /> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import {addActivityRecord,detail} from "@/api/activity" |
|
|
|
import { addActivityRecord, detail, communityActivityApplicationRecordDelete } from "@/api/activity" |
|
|
|
import Share from "@/components/Share" |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
activityList:[], |
|
|
|
activityList: [], |
|
|
|
signUp: [ |
|
|
|
{ name: "", mobile: "", remark: "" }, |
|
|
|
], |
|
|
|
info:{}, |
|
|
|
isPast:false |
|
|
|
info: {}, |
|
|
|
isPast: false, |
|
|
|
showShare: false |
|
|
|
}; |
|
|
|
}, |
|
|
|
created() { |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
mounted(){ |
|
|
|
if(this.$route.query.id){ |
|
|
|
this.detail( this.$route.query.id) |
|
|
|
mounted() { |
|
|
|
if (this.$route.query.id) { |
|
|
|
this.detail(this.$route.query.id) |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
|
|
|
|
checkIfPast() { |
|
|
|
const currentTimestamp = Date.now(); |
|
|
|
const specifiedTimestamp = new Date(this.info.cutOffTime.replace(/-/g, '/')).getTime(); |
|
|
|
this.isPast = specifiedTimestamp < currentTimestamp; |
|
|
|
const currentTimestamp = Date.now(); |
|
|
|
const specifiedTimestamp = new Date(this.info.cutOffTime.replace(/-/g, '/')).getTime(); |
|
|
|
this.isPast = specifiedTimestamp < currentTimestamp; |
|
|
|
}, |
|
|
|
async detail(id){ |
|
|
|
async detail(id) { |
|
|
|
let res = await detail(id) |
|
|
|
if(res){ |
|
|
|
if (res) { |
|
|
|
this.info = res; |
|
|
|
if(res.cutOffTime){ |
|
|
|
this.checkIfPast() |
|
|
|
if (res.recordList) { |
|
|
|
this.signUp = res.recordList; |
|
|
|
} |
|
|
|
if (res.cutOffTime) { |
|
|
|
this.checkIfPast() |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
handelAddResi() { |
|
|
|
this.signUp.push({ name: "", mobile: "", remark: "",}) |
|
|
|
this.signUp.push({ name: "", mobile: "", remark: "", }) |
|
|
|
}, |
|
|
|
handelDelResi() { |
|
|
|
this.signUp.pop() |
|
|
|
async handelDelResi(item) { |
|
|
|
let res = await communityActivityApplicationRecordDelete([item.id]) |
|
|
|
this.detail(this.$route.query.id) |
|
|
|
}, |
|
|
|
async save(){ |
|
|
|
this.signUp.forEach((item)=>{ |
|
|
|
async save() { |
|
|
|
this.signUp.forEach((item) => { |
|
|
|
item.activityId = this.info.id; |
|
|
|
item.applicationId = this.$store.state.app.userInfo.id; |
|
|
|
item.customerId = this.$store.state.app.userInfo.customerId; |
|
|
|
}) |
|
|
|
let parm = { |
|
|
|
formDTOList:this.signUp |
|
|
|
formDTOList: this.signUp |
|
|
|
} |
|
|
|
let res = await addActivityRecord(parm) |
|
|
|
if(res){ |
|
|
|
if (res) { |
|
|
|
this.$toast.success(res) |
|
|
|
this.signUp= [{ name: "", mobile: "", remark: "" }] |
|
|
|
this.signUp = [{ name: "", mobile: "", remark: "" }] |
|
|
|
this.detail(this.$route.query.id) |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
components: {}, |
|
|
|
components: { Share }, |
|
|
|
computed: {}, |
|
|
|
watch: {}, |
|
|
|
} |
|
|
|
@ -111,12 +129,15 @@ export default { |
|
|
|
:deep(.p0>.van-cell) { |
|
|
|
padding: 0; |
|
|
|
} |
|
|
|
|
|
|
|
:deep(.van-cell) { |
|
|
|
padding: 16px 8px; |
|
|
|
} |
|
|
|
|
|
|
|
:deep(.van-cell__title) { |
|
|
|
color: #666666; |
|
|
|
display: flex; |
|
|
|
|
|
|
|
&>span { |
|
|
|
flex: 1; |
|
|
|
} |
|
|
|
|
