|
|
<!-- +---------------------------------------------------------------------- -->
|
|
|
<!-- | 天诚科技 [ 刘海东 17600099397赋能开发者，助力企业发展 ] -->
|
|
|
<!-- +---------------------------------------------------------------------- -->
|
|
|
<!-- | Copyright (c) 2016～2022 https://www.crmeb.com All rights reserved. -->
|
|
|
<!-- +---------------------------------------------------------------------- -->
|
|
|
<!-- | Licensed 该系统并不是自由软件，未经许可不能去掉相关版权 -->
|
|
|
<!-- +---------------------------------------------------------------------- -->
|
|
|
<!-- | Author:甘肃天诚志信电子商务有限公司 刘海东 联系电话维系17600099397 -->
|
|
|
<!-- +---------------------------------------------------------------------- -->
|
|
|
{extend name="public/container"}
|
|
|
{block name="title"}活动列表{/block}
|
|
|
{block name="app"}
|
|
|
<div v-cloak id="app">
|
|
|
<base-header :public-data="publicData" :user-info="userInfo"></base-header>
|
|
|
<div class="layout">
|
|
|
<el-breadcrumb separator-class="el-icon-arrow-right">
|
|
|
<el-breadcrumb-item><a :href="$router.home">首页</a></el-breadcrumb-item>
|
|
|
<el-breadcrumb-item>活动报名</el-breadcrumb-item>
|
|
|
</el-breadcrumb>
|
|
|
<div class="filter">
|
|
|
<div class="filter-name">活动类型：</div>
|
|
|
<ul class="filter-content">
|
|
|
<li :class="{ on: statu === '' }" class="filter-item" @click="onClickStatus('')">全部</li>
|
|
|
<li :class="{ on: statu === 0 }" class="filter-item" @click="onClickStatus(0)">未开始</li>
|
|
|
<li :class="{ on: statu === 1 }" class="filter-item" @click="onClickStatus(1)">报名中</li>
|
|
|
<li :class="{ on: statu === 2 }" class="filter-item" @click="onClickStatus(2)">报名结束</li>
|
|
|
<li :class="{ on: statu === 3 }" class="filter-item" @click="onClickStatus(3)">活动中</li>
|
|
|
<li :class="{ on: statu === 4 }" class="filter-item" @click="onClickStatus(4)">已结束</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<el-row v-if="list.length" :gutter="21">
|
|
|
<el-col v-for="item in list" :key="item.id" :span="6">
|
|
|
<a :href="$router.activity_detail + '?id=' + item.id">
|
|
|
<el-image :src="item.image" fit="cover"></el-image>
|
|
|
<div>
|
|
|
<div class="title">{{ item.title }}</div>
|
|
|
<div class="time"><i class="iconfont iconhuodongshijian"></i>{{ item.time }}</div>
|
|
|
<div class="wrap">
|
|
|
<div class="money">￥<span>{{ item.price }}</span></div>
|
|
|
<div>{{ item.count }}人已报名</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</a>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
<el-empty v-else-if="finished" :image-size="200"></el-empty>
|
|
|
<el-pagination :page-size="limit" :total="total" :current-page.sync="page" layout="prev, pager, next" prev-text="上一页" next-text="下一页" hide-on-single-page @current-change="activityList"></el-pagination>
|
|
|
</div>
|
|
|
<base-footer :user-info="userInfo" :public-data="publicData"></base-footer>
|
|
|
<base-login :public-data="publicData" :agree-content="agreeContent"></base-login>
|
|
|
<base-agree :agree-content="agreeContent"></base-agree>
|
|
|
</div>
|
|
|
{/block}
|
|
|
{block name="vm"}
|
|
|
<script>
|
|
|
require([
|
|
|
'vue',
|
|
|
'ELEMENT',
|
|
|
'components/base-header/index',
|
|
|
'components/base-footer/index',
|
|
|
'components/base-login/index',
|
|
|
'components/base-agree/index',
|
|
|
'mixins/base',
|
|
|
'api/activity',
|
|
|
'router/index',
|
|
|
'css!../wap/first/zsff/iconfont/iconfont.css',
|
|
|
'css!styles/activity-list.css'
|
|
|
], function (Vue, ELEMENT, BaseHeader, BaseFooter, BaseLogin, BaseAgree, baseMixin, activityApi, router) {
|
|
|
Vue.use(ELEMENT);
|
|
|
Vue.use(router);
|
|
|
new Vue({
|
|
|
el: '#app',
|
|
|
components: {
|
|
|
'base-header': BaseHeader,
|
|
|
'base-footer': BaseFooter,
|
|
|
'base-login': BaseLogin,
|
|
|
'base-agree': BaseAgree
|
|
|
},
|
|
|
mixins: [baseMixin],
|
|
|
data: {
|
|
|
page: 1,
|
|
|
limit: 20,
|
|
|
total: 0,
|
|
|
list: [],
|
|
|
finished: false,
|
|
|
statu: ''
|
|
|
},
|
|
|
created: function () {
|
|
|
this.activityList();
|
|
|
},
|
|
|
methods: {
|
|
|
activityList: function () {
|
|
|
var vm = this;
|
|
|
activityApi.activityList({
|
|
|
page: this.page,
|
|
|
limit: this.limit,
|
|
|
statu: this.statu
|
|
|
}).then(function (res) {
|
|
|
var data = res.data;
|
|
|
vm.list = data.list;
|
|
|
vm.total = data.count;
|
|
|
vm.finished = !data.count;
|
|
|
});
|
|
|
},
|
|
|
onClickStatus: function (status) {
|
|
|
this.statu = status;
|
|
|
this.page = 1;
|
|
|
this.list = [];
|
|
|
this.total = 0;
|
|
|
this.finished = false;
|
|
|
this.activityList();
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
</script>
|
|
|
{/block} |
