首页

src/components/product/NewsRecord.vue

@@ -9,8 +9,9 @@
         class="news-record"
         :class="{ isLight: type === 'light' }"
     >
-        <van-image :src="getImg(info.pic)" :radius="8" width="46" height="46" fit="cover" />
-
+        <van-badge :dot="isNew" :offset="[-2, 2]">
+            <van-image :src="getImg(info.pic)" :radius="8" width="46" height="46" fit="cover" />
+        </van-badge>
         <div class="content">
             <div class="name van-ellipsis">{{ info.title }}</div>
             <!-- <div class="sales-list">
@@ -20,7 +21,7 @@
             </div> -->
             <div class="bottom">
                 <div class="miner">
-                    <span style="margin-left: 0">{{ info.createdAt }}</span>
+                    <span style="margin-left: 0">{{ time }}</span>
                 </div>
             </div>
         </div>
@@ -46,13 +47,19 @@ export default {
     },
     computed: {
         time() {
-            if (this.info.startTime) {
-                if (this.dayjs().isSameOrBefore(this.info.startTime, 'YYYY-MM-DD HH:mm:ss')) {
-                    return this.dayjs(this.info.startTime).format('MM月DD日');
-                }
+            if (this.info.createdAt) {
+                return this.dayjs(this.info.createdAt).format('YYYY-MM-DD HH:mm');
             }
 
             return '';
+        },
+        isNew() {
+            if (this.info.createdAt) {
+                let time = this.dayjs(this.info.createdAt).add(1, 'day');
+                return this.dayjs().isBefore(time);
+            } else {
+                return false;
+            }
         }
     },
     mounted() {
@@ -93,6 +100,9 @@ export default {
 </script>
 
 <style lang="less" scoped>
+/deep/.van-badge {
+    z-index: 20;
+}
 .news-record {
     position: relative;
     background-color: var(--bg2);

src/components/product/productLarge.vue

@@ -69,12 +69,14 @@
             </div>
         </div>
 
-        <img class="bg" src="@assets/png-diwen.png" alt="" />
+        <img class="bg" v-if="darkTheme" src="@assets/png-diwen-hei.png" alt="" />
+        <img class="bg" v-else src="@assets/png-diwen.png" alt="" />
         <!-- <img class="top-bg" v-if="time" src="@assets/collecbg.png" alt="" /> -->
     </router-link>
 </template>
 
 <script>
+import { mapState } from 'vuex';
 import product from '../../mixins/product';
 export default {
     mixins: [product],
@@ -91,6 +93,7 @@ export default {
         }
     },
     computed: {
+        ...mapState(['darkTheme']),
         time() {
             if (this.info.startTime) {
                 if (this.dayjs().isSameOrBefore(this.info.startTime, 'YYYY-MM-DD HH:mm:ss')) {

src/views/Home.vue

@@ -133,6 +133,7 @@
             >
             </product-large>
         </div>
+        <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">
         <div class="risk-box">
@@ -176,7 +177,7 @@ import RankInfo from '../components/creator/RankInfo.vue';
 
 export default {
     name: 'home',
-    inject: ['bar', 'setKeeps', 'scrollWrapper', 'changeScroll'],
+    inject: ['bar', 'setKeeps', 'scrollWrapper', 'changeScroll', 'bodyScroll'],
     mixins: [banner, product],
     components: {
         Swiper,
@@ -338,30 +339,29 @@ export default {
                 message: '加载中...',
                 forbidClick: true
             });
-            return Promise.all([
-                this.getBanner(),
-                this.getProduct().then(res => {
-                    this.products = res.filter(item => {
-                        return item.type === 'collection';
-                    });
-                    this.news = res
-                        .filter(item => {
-                            return item.type === 'news';
-                        })
-                        .slice(0, 5);
-                }),
-                this.$http.get('/user/topTen').then(res => {
-                    this.hotUsers = res.slice(0, 5);
-                })
-            ]).then(() => {
+            return Promise.all([this.getBanner(), this.getProduct(), this.getHot()]).then(() => {
                 this.$toast.clear();
                 return Promise.resolve();
             });
             // this.getNews();
         },
+        getHot() {
+            return this.$http.get('/user/topTen').then(res => {
+                this.hotUsers = res.slice(0, 5);
+                return Promise.resolve();
+            });
+        },
         getProduct() {
             return this.$http.get('/collection/recommend').then(res => {
-                return Promise.resolve(res);
+                this.products = res.filter(item => {
+                    return item.type === 'collection';
+                });
+                this.news = res
+                    .filter(item => {
+                        return item.type === 'news';
+                    })
+                    .slice(0, 5);
+                return Promise.resolve();
             });
         },
         getBanner() {
@@ -390,6 +390,9 @@ export default {
                     return Promise.resolve();
                 });
         },
+        goTop() {
+            this.changeScroll(0, true);
+        },
         getList() {
             if (this.page === 0) {
                 this.list = [];
@@ -488,6 +491,8 @@ export default {
     },
     activated() {
         this.$nextTick(() => {
+            this.getProduct();
+            this.getHot();
             if (window.cordova && StatusBar && StatusBar.isVisible) {
                 StatusBar.styleDefault();
             }
@@ -758,7 +763,7 @@ export default {
     margin: 16px 16px 0;
     overflow: hidden;
     &.news {
-        padding-bottom: 18px;
+        padding-bottom: 24px;
     }
 }
 
@@ -909,4 +914,14 @@ export default {
         position: relative;
     }
 }
+.goTop {
+    position: fixed;
+    right: 16px;
+    bottom: 100px;
+    bottom: calc(env(safe-area-inset-bottom) + 100px);
+    width: 40px;
+    height: 40px;
+    display: block;
+    z-index: 20;
+}
 </style>

src/views/product/NewsList.vue

@@ -15,11 +15,14 @@ import list from '../../mixins/list';
 import NewsSmall from '../../components/product/NewsSmall.vue';
 
 export default {
+    name: 'newsList',
     mixins: [list],
+    inject: ['bar', 'setKeeps', 'scrollWrapper', 'changeScroll'],
     data() {
         return {
             list: [],
-            url: '/news/all'
+            url: '/news/all',
+            scrollTop: 0
         };
     },
     components: { NewsSmall },
@@ -33,6 +36,21 @@ export default {
                 }
             };
         }
+    },
+    activated() {
+        this.$nextTick(() => {
+            this.changeScroll(this.scrollTop || 0);
+        });
+    },
+    beforeRouteLeave(to, from, next) {
+        if (to.path === '/newsDetail') {
+            this.scrollTop = this.scrollWrapper.scrollTop;
+            this.setKeeps(['newsList']);
+        } else {
+            this.scrollTop = 0;
+            this.setKeeps(['newsList'], false);
+        }
+        next();
     }
 };
 </script>