1.Active.vue
代码语言：javascript复制<template>
<view class="Active-box_wrapper">
<view class="item" v-for="(v, idx) in data" :key="idx" @click="subActive(v, true)">
<image :src="localImg.activity.war" class="img-arr" v-if="v.status == '未开始'"></image>
<image :src="localImg.activity.ing" class="img-arr" v-if="v.status == '进行中'"></image>
<image :src="localImg.activity.end" class="img-arr" v-if="v.status == '已结束'"></image>
<view class="left">
<image :src="v.imageUrl" class="img"></image>
</view>
<view class="right">
<view class="title">{{v.title}}</view>
<view class="sub"><u-icon name="map"></u-icon>{{v.address}}</view>
<view class="time"><u-icon name="clock"></u-icon>{{dateFormat(new Date(v.beginTime))}}</view>
<button type="primary" size="mini" class="btn" @click.stop="subActive(v, false)">报名</button>
<button type="primary" size="mini" class="btn end" v-if="v.status == '已结束'" @click.stop>报名</button>
</view>
</view>
</view>
</template>代码讲解：
- @click=“subActive(v, true)” 点击跳到活动详情页
- @click.stop=“subActive(v, false)” 点击跳到活动报名页，运用.stop的目的是阻止冒泡事件的发生
- v-if=“v.status == ‘未开始’” 表示三种不同的状态
<view class="time"><u-icon name="clock"></u-icon>{{dateFormat(new Date(v.beginTime))}}</view>此处后台传的时间字段是Date类型，前台拿到的是String类型，因此前端可以用dateFormat日期格式化函数，可以穿时间戳或者new date()。
<button type="primary" size="mini" class="btn" @click.stop="subActive(v, false)">报名</button>
<button type="primary" size="mini" class="btn end" v-if="v.status == '已结束'" @click.stop>报名</button>
这段的逻辑就是：写了两个button，刚开始以为会出来两个，但是要注意它加了v-if这个条件，条件满足了才回显示出来。
