|
|
@@ -1,68 +1,247 @@
|
|
|
<template>
|
|
|
- <div class="search">
|
|
|
- <van-list v-model:loading="loading" :finished="finished" finished-text="" @load="getData">
|
|
|
- <template v-for="(item, index) in list" :key="index">
|
|
|
- <router-link
|
|
|
- :to="{
|
|
|
- path: '/activityDetail',
|
|
|
- query: {
|
|
|
- id: item.id
|
|
|
- }
|
|
|
- }"
|
|
|
- class="activity"
|
|
|
- >
|
|
|
- <div class="text1">{{ item.name }}</div>
|
|
|
- <van-image
|
|
|
- width="calc(100vw - 32px)"
|
|
|
- height=" calc(40vw - 12.8px)"
|
|
|
- radius="4"
|
|
|
- :src="getImg(item.cover)"
|
|
|
- fit="cover"
|
|
|
- />
|
|
|
- </router-link>
|
|
|
- </template>
|
|
|
+ <div class="page" :style="{ backgroundImage: `url(${require('@assets/png-zhuzao-bg.png')})` }">
|
|
|
+ <div class="page_top">
|
|
|
+ <div class="page_top_return" @click="$router.go(-1)">
|
|
|
+ <img src="@assets/easy_shoot_top_return@3x.png" alt="" class="page_top_return_img" />
|
|
|
+ </div>
|
|
|
+ <div class="page-title">
|
|
|
+ <div class="text1">铸造中心</div>
|
|
|
+ <div class="text2">虚实结合,探索未知,让你的数字藏品更有价值</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <van-tabs v-model="active">
|
|
|
+ <van-tab title="标签1">内容 1</van-tab>
|
|
|
+ <van-tab title="标签2">内容 2</van-tab>
|
|
|
+ <van-tab title="标签3">内容 3</van-tab>
|
|
|
+ <van-tab title="标签4">内容 4</van-tab>
|
|
|
+ </van-tabs>
|
|
|
+ <van-pull-refresh
|
|
|
+ success-text="加载成功"
|
|
|
+ success-duration="500"
|
|
|
+ class="search"
|
|
|
+ v-model="isLoading"
|
|
|
+ :head-height="80"
|
|
|
+ @refresh="onRefresh"
|
|
|
+ >
|
|
|
+ <!-- <div class="filter-bg" :style="{ backgroundImage: `url(${filterBg})` }"></div> -->
|
|
|
+ <!-- <div class="header">铸造中心</div> -->
|
|
|
+ <van-list v-model:loading="loading" :finished="finished" finished-text="" @load="getData">
|
|
|
+ <template v-for="(item, index) in list" :key="index">
|
|
|
+ <router-link
|
|
|
+ :to="{
|
|
|
+ path: '/activityDetail',
|
|
|
+ query: {
|
|
|
+ id: item.id
|
|
|
+ }
|
|
|
+ }"
|
|
|
+ class="activity"
|
|
|
+ >
|
|
|
+ <van-image
|
|
|
+ width="calc(100vw - 32px)"
|
|
|
+ height=" calc(40vw - 12.8px)"
|
|
|
+ radius="4"
|
|
|
+ :src="getImg(item.cover)"
|
|
|
+ fit="cover"
|
|
|
+ />
|
|
|
+ <div class="content">
|
|
|
+ <div class="text1">{{ item.name }}</div>
|
|
|
+ <div class="btn">
|
|
|
+ <span>立即兑换</span>
|
|
|
+ <img src="../../assets/icon-jiantou.png" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <img src="../../assets/png-diwen1.png" alt="" class="img1" />
|
|
|
+ </router-link>
|
|
|
+ </template>
|
|
|
|
|
|
- <van-empty v-if="empty" description="暂无活动哦~" :image="require('@assets/kong_png_wusousuo.png')" />
|
|
|
- </van-list>
|
|
|
+ <van-empty v-if="empty" description="暂无活动哦~" :image="require('@assets/kong_png_wusousuo.png')" />
|
|
|
+ </van-list>
|
|
|
+ </van-pull-refresh>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import list from '../../mixins/list';
|
|
|
+import { Swiper, SwiperSlide } from 'swiper/vue';
|
|
|
+
|
|
|
+import 'swiper/swiper.min.css';
|
|
|
+import 'swiper/swiper-bundle.min.css';
|
|
|
+
|
|
|
+import SwiperCore, { Pagination, Autoplay } from 'swiper';
|
|
|
+
|
|
|
+// install Swiper modules
|
|
|
+SwiperCore.use([Pagination, Autoplay]);
|
|
|
+import banner from '../../mixins/banner';
|
|
|
export default {
|
|
|
- name: 'Search',
|
|
|
- mixins: [list],
|
|
|
+ name: 'activityList',
|
|
|
+ mixins: [list, banner],
|
|
|
+ inject: ['setKeeps', 'scrollWrapper', 'changeScroll'],
|
|
|
data() {
|
|
|
return {
|
|
|
list: [],
|
|
|
empty: false,
|
|
|
- url: '/activity/all'
|
|
|
+ url: '/mintActivity/all',
|
|
|
+ banners: [],
|
|
|
+ scrollTop: 0,
|
|
|
+ active: 0
|
|
|
};
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ filterBg() {
|
|
|
+ if (this.list.length > 0) {
|
|
|
+ return this.list[0].cover;
|
|
|
+ } else {
|
|
|
+ return '';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
methods: {
|
|
|
beforeData() {
|
|
|
return {
|
|
|
query: {
|
|
|
- del: false
|
|
|
+ del: false,
|
|
|
+ companyId: 1
|
|
|
}
|
|
|
};
|
|
|
+ },
|
|
|
+ onRefresh() {
|
|
|
+ this.getData(true).then(() => {
|
|
|
+ this.isLoading = false;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ activated() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.changeScroll(this.scrollTop);
|
|
|
+ });
|
|
|
+ if (window.cordova && StatusBar && StatusBar.isVisible) {
|
|
|
+ StatusBar.styleLightContent();
|
|
|
}
|
|
|
+ },
|
|
|
+ beforeRouteLeave(to, from, next) {
|
|
|
+ if (to.path === '/activityDetail') {
|
|
|
+ this.scrollTop = this.scrollWrapper.scrollTop;
|
|
|
+ this.setKeeps(['activityList']);
|
|
|
+ } else {
|
|
|
+ this.scrollTop = 0;
|
|
|
+ this.setKeeps(['activityList'], false);
|
|
|
+ }
|
|
|
+ next();
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
+.page {
|
|
|
+ background-color: #0f1014;
|
|
|
+ padding-top: var(--safe-top);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: top center;
|
|
|
+ background-size: contain;
|
|
|
+}
|
|
|
+.page_top {
|
|
|
+ position: relative;
|
|
|
+ min-height: calc(var(--safe-top) + 139px);
|
|
|
+ .page_top_return {
|
|
|
+ position: fixed;
|
|
|
+ z-index: 1;
|
|
|
+ top: calc(var(--safe-top) + 16px);
|
|
|
+ left: 16px;
|
|
|
+ width: 34px;
|
|
|
+ height: 34px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: rgba(0, 0, 0, 0.2);
|
|
|
+ backdrop-filter: blur(1px);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ z-index: 20;
|
|
|
+ .page_top_return_img {
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
.search {
|
|
|
padding-bottom: 50px;
|
|
|
+ margin-top: 4px;
|
|
|
+ z-index: 1;
|
|
|
+ position: relative;
|
|
|
+ .filter-bg {
|
|
|
+ background-position: top;
|
|
|
+ background-size: cover;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ top: 50px;
|
|
|
+ }
|
|
|
}
|
|
|
.activity {
|
|
|
- padding: 16px;
|
|
|
+ margin: 16px;
|
|
|
display: block;
|
|
|
+ background-color: #1c1e25;
|
|
|
+ border-radius: 12px;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ .van-image {
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+}
|
|
|
+.img1 {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ width: 92px;
|
|
|
+ height: auto;
|
|
|
+ z-index: 1;
|
|
|
+}
|
|
|
+.content {
|
|
|
+ padding: 5px 16px;
|
|
|
+ position: relative;
|
|
|
+ .text1 {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .text2 {
|
|
|
+ color: @text3;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ color: @prim;
|
|
|
+ position: absolute;
|
|
|
+ right: 14px;
|
|
|
+ bottom: 5px;
|
|
|
+ .flex();
|
|
|
+ img {
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.header {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 24px;
|
|
|
+ padding: 13px 0;
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
+ background-color: #181818;
|
|
|
+}
|
|
|
+
|
|
|
+.page-title {
|
|
|
+ position: absolute;
|
|
|
+ top: calc(var(--safe-top) + 60px);
|
|
|
+ left: 20px;
|
|
|
.text1 {
|
|
|
- font-size: 16px;
|
|
|
- color: @text0;
|
|
|
+ font-size: 24px;
|
|
|
+ font-family: AlimamaShuHeiTi;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 34px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text2 {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #ffffff;
|
|
|
line-height: 24px;
|
|
|
- margin-bottom: 12px;
|
|
|
}
|
|
|
}
|
|
|
</style>
|