pointsMall/src/views/HomeView/FestiveEvents.vue

<template>
    <div class="right-wrap">
        <div class="tab-header">
            <span class="tab-title">活动列表</span>
        </div>
        <div class="list-content">
            <div class="list-container">
                <el-empty v-if="goodsList.length==0" :image-size="200"></el-empty>
                <div v-else class="prize-list">
                    <div v-for="(item, index) in goodsList" :key="index" class="prize-card prize-item">
                        <div class="img-container">
                            <img :src="item.imgUrl" alt="图片" class="prize-img">
                        </div>
                        <div class="content">
                            <h3 :title="item.title" class="title">{{ item.title }}</h3>
                            <p class="desc" v-if="item.startTime">
                                <span :title="item.startTime+'~'+item.endTime">{{ item.startTime }} ~ {{ item.endTime }}</span>
                            </p>
                            <p class="desc" v-else></p>
                        </div>
                        <div class="btn-container">
                            <button v-if="item.status==1" class="ui-btn default medium btn">活动未开始</button>
                            <button v-else-if="item.status==3" class="ui-btn default medium btn">活动已结束</button>
                            <button v-else @click="handleClickReceive(item)"
                                class="ui-btn primary medium btn">
                                立即参与
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog :visible.sync="dialogMsgVisible" width="400px">
            <div class="wrapper">
                <svg width="291" height="93" viewBox="0 0 291 93" fill="none" xmlns="http://www.w3.org/2000/svg" src="./success.svg" class="success-icon"><g filter="url(#filter0_f_6844:108643)"><circle cx="143" cy="56.5723" r="3" fill="#51F1E8"></circle></g><path d="M195.768 48.1699L195.768 39.5097L203.268 43.8398L195.768 48.1699Z" fill="#FF5E54"></path><path d="M232.39 10.953L230.149 2.58781L238.514 4.82925L232.39 10.953Z" fill="#9F54FF"></path><path d="M7.519 27.6623L1.39528 21.5385L9.76044 19.2971L7.519 27.6623Z" fill="#FF834E"></path><path d="M106.774 8.99609L96.2168 11.168C94.5498 27.4571 102.885 34.5158 107.886 36.6877C113.999 37.7736 120.031 35.8701 124 32.8869C111.22 33.4298 104.552 19.3126 106.774 8.99609Z" fill="#51F1E8"></path><path d="M283.89 68.9961L290.383 70.4176C292.692 77.5253 288.076 83.9223 283.89 84.9096C280.384 85.3438 277.597 84.0817 275 82.5007C284.452 83.364 285.768 73.9715 283.89 68.9961Z" fill="#FF5E54"></path><g filter="url(#filter1_f_6844:108643)"><path d="M50 82.4171L55.3529 77.9961C57.902 79.4698 63 83.3014 63 86.8382C59.8213 88.1508 58.6931 89.8153 58.427 90.9879C58.4503 91.3588 58.4426 91.6987 58.4118 91.9961C58.3461 91.7429 58.3346 91.395 58.427 90.9879C58.2575 88.2958 56.4523 83.9714 50 82.4171Z" fill="#FFCF8B"></path></g><defs data-v-50d84ad4=""><filter id="filter0_f_6844:108643" x="139" y="52.5723" width="8" height="8" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_6844:108643"></feGaussianBlur></filter><filter id="filter1_f_6844:108643" x="49" y="76.9961" width="15" height="16" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_6844:108643"></feGaussianBlur></filter></defs></svg> 
                <h2 class="header">恭喜你，领取成功！</h2> 
                <img :src="imgUrl" class="icon"> 
                <div class="desc">
                    <span data-v-50d84ad4="">恭喜你成功领取{{ title }}，随后你可在</span> 
                    <a href="/home/festiveEvents" class="link">个人中心</a>中查看领取的福利
                </div> 
            </div>
            <div slot="footer" class="dialog-footer" style="text-align: center;">
                <router-link to="/home/festiveEvents">
                    <el-button class="addButton-address" type="primary">
                    查看福利
                </el-button>
                </router-link>
                
            </div>
        </el-dialog>

    </div>
</template>
<script>
import { actList } from "@/api/allApi";
export default {
    data() {
        return {
            imgUrl: '',
            title:'',
            dialogMsgVisible:false,
            goodsList: []
        };
    },
    created() {
        this.getList();
    },
    methods: {
        getList() {
            actList().then(response => {
                this.goodsList = response.data.data;
            }).catch(() => {
               
            })
        },
        handleClickReceive(val){
            console.log(val);
            //节日游戏
            if(val.type=='1'){
                //中秋节签到
                if(val.actId==33){
                    this.$router.push({
                        path: '/home/festiveEvents/zhongQiuQianDao',
                        query: {
                            actId:val.actId
                        }
                    });
                    return;
                }
                 //元宵节答题
                else if(val.actId==13){
                    this.$router.push({
                        path: '/home/festiveEvents/lanternFestival',
                        query: {
                            actId:val.actId
                        }
                    });
                    return;
                }
                //七夕节答题
                else if(val.actId==20){
                    this.$router.push({
                        path: '/home/festiveEvents/qiXiGame',
                        query: {
                            actId:val.actId
                        }
                    });
                    return;
                }
                //每周竞技
                else{
                    this.$router.push({
                        path: '/home/festiveEvents/game',
                        query: {
                            url: val.activityUrl,
                            actId:val.actId
                        }
                    });
                    return;
                }
            }
            //答题
            if(val.type=='2'){
                //每日答题
                this.$router.push({
                    path: '/home/festiveEvents/answerGame',
                    query: {
                        actId:val.actId
                    }
                });
                return;
            }
            //抽奖
            if(val.type=='3'){
                //春节抽签
                if(val.actId==12){
                    this.$router.push({
                        path: '/home/festiveEvents/game',
                        query: {
                            url: val.activityUrl,
                            actId:val.actId
                        }
                    });
                    return;
                }
                //每月抽奖
                else{
                    this.$router.push({
                        path: '/home/festiveEvents/drawCarouselGame',
                        query: {
                            actId:val.actId
                        }
                    });
                    return;
                }
                
            }
            //开奖
            if(val.type=='5'){
                 //中秋节开奖
                 if(val.actId==35){
                    this.$router.push({
                        path: '/home/festiveEvents/kaijiang',
                        query: {
                            actId:val.actId
                        }
                    });
                    return;
                }
            }
        }
    }
};
</script>
<style scoped>
.right-wrap {
    background-color: #fff;
}

.tab-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 16px;
    border-bottom: 1px solid #e5e6eb;
    overflow: hidden;
}

.tab-header .tab-title {
    white-space: nowrap;
    font-size: 18px;
    font-weight: 500;
    color: #1d2129;
}
.list-content{
    padding: 0px 20px 40px;
}
.list-container .prize-item:nth-child(4n) {
    margin-right: 0;
}

.list-container {
    border-radius: 2px;
    background-color: transparent;
}

.list-container .prize-list {
    padding: 20px 0;
    background: #fff;
    display: flex;
    flex-flow: row wrap;
    box-sizing: border-box;
}

.list-container .prize-item {
    width: calc(25% - 15px);
    margin-right: 20px;
    margin-bottom: 20px;
    border-radius: 2px;
}

.prize-card {
    background: #fff;
    border: 1px solid #e4e6eb;
    box-sizing: border-box;
    border-radius: 2px;
}

.prize-card .img-container {
    height: 159px;
    background: #f7f8fa;
    border-radius: 2px 2px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.prize-card .img-container .prize-img {
    width: 100%;
    height: 100%;
    /* max-height: 120px;
    max-width: 120px; */
}

.prize-card .content {
    padding: 0 16px;
}

.prize-card .content .desc,
.prize-card .content .title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.prize-card .content .title {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    margin-top: 12px;
    color: #1d2129;
    margin-bottom: 0;
}

.prize-card .content .desc {
    margin: 10px 0;
    display: inline-block;
    font-size: 12px;
    line-height: 18px;
    height: 18px;
    width: 100%;
}

.prize-card .content .desc span {
    color: #ff7d00;
    background: #fff7e8;
    padding: 2px 4px;
}

.prize-card .content .redeem-info {
    margin-top: 0;
    margin-bottom: 0;
    display: flex;
    justify-content: space-between;
    white-space: nowrap;
    align-items: center;
}

.prize-card .content .price {
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    color: #1e80ff;
    flex: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: flex-start;
}

.prize-card .content .price .icon {
    height: 16px;
    width: 16px;
    position: relative;
    margin-right: 4px;
}

.prize-card .content .count {
    font-size: 12px;
    line-height: 20px;
    margin-left: 12px;
    color: #8a919f;
}

.prize-card .btn {
    border-radius: 16px;
}

.ui-btn.medium {
    padding: 5px 16px;
}

.ui-btn.primary {
    background-color: #1d7dfa;
}
.ui-btn.default {
    color:#8a919f;
    /* background-color: #1d7dfa; */
}

.ui-btn {
    box-sizing: border-box;
    font-size: 14px;
    line-height: 22px;
    padding: 5px 16px;
    color: #fff;
    border: none;
    white-space: nowrap;
    cursor: pointer;
}

.prize-card .btn-container {
    border-top: 1px solid #e4e6eb;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
<style>
.text-overflow {
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
</style>