由于是上线的项目且已经按照数据逻辑去渲染了能看懂的看逻辑吧。有点多
效果如图
<template>
<div class="lottery-management-wrapper">
<ul>
<li class="lottery-management-list-wrapper">
<div class="lottery-management-list" v-for="(item , index) in activityListData">
<div class="lottery-management-list-left" @click="detailOfTheActivity(item)">
<dl>
<dd>
<h3>{{item.activityName}}</h3>
<p>活动时间：{{item.beginTime}}至{{item.endTime}}</p>
</dd>
<dt :class="item.status == 3 ? 'txt-red': item.status == 0 ? 'txt-blue' : ''">{{item.status == 3 ? '进行中': item.status == 1 ? '已结束': item.status == 0 ? '待启用' : ''}}</dt>
</dl>
</div>
<div class="lottery-management-list-right">
<a @click="startActivityAlert = true;currentItem = item;currentIndex = index" v-if="item.status == 0">启用活动</a>
<span @click="delActivityAlert = true;currentItem = item;currentIndex = index" v-if="item.status == 1">删除活动</span>
<span @click="stopActivityAlert = true;currentItem = item;currentIndex = index" v-if="item.status == 3 || item.status == 0">结束活动</span>
</div>
</div>
</li>
</ul>
<div class="add-wrapper" @click="addAwardActivity">
<span class="iconfont icon-tianjia1"></span>
<span class="text">新增活动</span>
</div>
<h4>商户员工账号只有活动查看权限，没有活动操作权限</h4>
<transition name="fade">
<div class="mask-wrapper"
v-show="delActivityAlert"
@touchmove.prevent>
<tipsBox title="操作提示"
text1="是否删除当前活动"
button1="取消"
button2="确定"
@confirm="delActivity"
@cancel="delActivityAlert = false">
</tipsBox>
</div>
</transition>
<transition name="fade2">
<div class="mask-wrapper"
v-show="stopActivityAlert"
@touchmove.prevent>
<tipsBox title="操作提示"
text1="是否停止当前活动"
button1="取消"
button2="确定"
@confirm="stopActivity"
@cancel="stopActivityAlert = false">
</tipsBox>
</div>
</transition>
<transition name="fade3">
<div class="mask-wrapper"
v-show="startActivityAlert"
@touchmove.prevent>
<tipsBox title="操作提示"
