首页入口

src/components/RiceDoor.vue

@@ -0,0 +1,79 @@
+<template>
+    <div
+        class="rice-door"
+        :style="{ right: right, bottom: bottom }"
+        @touchstart="onTouchStart"
+        @touchmove="onTouchMove"
+        @touchend="onTouchend"
+    >
+        <img src="@assets/rice-door.png" @click.stop="$router.push('/rice')" alt="" />
+    </div>
+</template>
+
+<script setup>
+import { ref, computed, inject, getCurrentInstance } from 'vue';
+
+const {
+    appContext: {
+        config: { globalProperties: global }
+    }
+} = getCurrentInstance();
+
+function onTouchStart(e) {
+    global.emitter.emit('startRefreash', false);
+}
+
+function onTouchend(e) {
+    global.emitter.emit('startRefreash', true);
+}
+const pageX = ref(0);
+const pageY = ref(0);
+const safeBootom = inject('safeBottom');
+const right = computed(() => {
+    if (pageX.value) {
+        if (window.innerWidth - pageX.value < 38) {
+            return '38px';
+        }
+        if (pageX.value < 38) {
+            return window.innerWidth - pageX.value - 38;
+        }
+        return window.innerWidth - pageX.value + 'px';
+    } else {
+        return '38px';
+    }
+});
+const bottom = computed(() => {
+    let _safeBootom = Number(safeBootom.value.replace(/px/, '') || 0);
+    if (pageY.value) {
+        if (window.innerHeight - pageY.value < _safeBootom + 90) {
+            return _safeBootom + 90 + 'px';
+        }
+        if (pageY.value < 50) {
+            return window.innerHeight - 40;
+        }
+        return window.innerHeight - pageY.value + 'px';
+    } else {
+        return _safeBootom + 190 + 'px';
+    }
+});
+function onTouchMove(e) {
+    pageX.value = e.touches[0].pageX;
+    pageY.value = e.touches[0].pageY;
+}
+</script>
+
+<style lang="less" scoped>
+.rice-door {
+    position: fixed;
+    right: 38px;
+    bottom: calc(env(safe-area-inset-bottom) + 190px);
+    width: 70px;
+    height: 80px;
+    transform: translate(50%, 50%);
+    img {
+        width: 70px;
+        height: 80px;
+    }
+    z-index: 30;
+}
+</style>

src/router/index.js

@@ -704,6 +704,17 @@ const routes = [
             // tabColor: '#181818'
         }
     },
+    {
+        path: '/activityList1',
+        name: 'activityList1',
+        component: () => import('../views/activity/List.vue'),
+        meta: {
+            pageType: Page.Every,
+            menuPage: true
+            // title: '铸造中心',
+            // tabColor: '#181818'
+        }
+    },
     {
         path: '/activityDetail',
         name: 'activityDetail',

src/views/Home.vue

@@ -7,6 +7,7 @@
         :head-height="80"
         @refresh="onRefresh"
         pageType="light"
+        :disabled="!canRefreash"
     >
         <div class="filter-bg" :style="{ backgroundImage: `url(${bgImg})` }"></div>
         <div class="welcom">
@@ -272,6 +273,9 @@
                 </a>
             </div>
         </div>
+
+        <rice-door></rice-door>
+
         <img src="../assets/png-zhiding.png" @click="goTop" class="goTop" v-if="bodyScroll > 200" alt="" />
     </van-pull-refresh>
     <van-dialog v-model:show="riskShow" theme="round-button" className="risk">
@@ -316,6 +320,7 @@ import ActivityRecord from '../components/product/ActivityRecord.vue';
 import HotCollect from '../components/product/HotCollect.vue';
 import dayjs from 'dayjs';
 import { number } from 'mathjs';
+import RiceDoor from '@/components/RiceDoor.vue';
 
 export default {
     name: 'home',
@@ -328,7 +333,8 @@ export default {
         ProductSmall,
         NewsRecord,
         HotCollect,
-        ActivityRecord
+        ActivityRecord,
+        RiceDoor
     },
     computed: {
         ...mapState(['userInfo', 'darkTheme']),
@@ -380,7 +386,8 @@ export default {
             announcementBlack: require('@assets/icon-gonggaohei@3x.png'),
             acitivities: [],
             fuActivity: false,
-            domainSwitch: false
+            domainSwitch: false,
+            canRefreash: true
         };
     },
     mounted() {
@@ -415,6 +422,10 @@ export default {
             });
             this.domainList = res;
         });
+        this.emitter.on('startRefreash', start => {
+            console.log(start);
+            this.canRefreash = start;
+        });
     },
     methods: {
         download() {
@@ -1237,8 +1248,7 @@ export default {
 .goTop {
     position: fixed;
     right: 16px;
-    bottom: 100px;
-    bottom: calc(env(safe-area-inset-bottom) + 100px);
+    bottom: calc(env(safe-area-inset-bottom) + 90px);
     width: 40px;
     height: 40px;
     display: block;

src/views/activity/List.vue

@@ -1,68 +1,237 @@
 <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-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
         };
     },
+    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 {
     .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>