[更新发现]

2022-01-13 13:56:32 +08:00
parent 9af54bc24a
commit c82f40ee09
27 changed files with 1274 additions and 295 deletions
--- a/pages/notice/index.vue
+++ b/pages/notice/index.vue
@@ -0,0 +1,102 @@
+<template>
+    <view class="content">
+        <view class="noticeList" v-for="(item, index) in tabArr" :key="index" @click="$Router.push({ name: 'noticeList', params: {type: item.type }})" >
+            <view class="noticeImg" :class="{active : item.count != 0}">
+                <block v-if="item.type == 'SystemNotification'">
+                    <u-icon name="bell-fill" color="#77e79f" size="22" bold style="padding: 14rpx"></u-icon>
+                </block>
+                <block v-else>
+                    <u-icon name="calendar-fill" color="#f1a166" size="22" bold style="padding: 14rpx"></u-icon>
+                </block>
+            </view>
+            <view class="noticeCont">
+                <view class="name">
+                    {{ item.name }}
+                </view>
+                <view class="nowrap text">
+                    {{ item.type == 'SystemNotification' ? 'APP特色功能介绍、官方推进、活动通知' : '商品订单购买成功、发货成功、退货' }}
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+    import { categories } from '@/apis/interfaces/notice'
+    export default {
+        data() {
+            return {
+                tabArr    : []
+            };
+        },
+        mounted() {
+            // 获取分类
+            this.getNotice()
+        },
+        methods: {
+            // 分类
+            getNotice(){
+            	categories().then(res => {
+                    this.tabArr = res
+            	})
+            }
+        }
+    };
+</script>
+
+<style lang="scss" scoped>
+    page {
+        padding: $padding;
+        box-sizing: border-box;
+        background-color: $window-color;
+    }
+    
+    .noticeList {
+        padding: $padding;
+        box-sizing: border-box;
+        position: relative;
+        background-color: white;
+        margin-bottom: $margin;
+        border-radius: $radius;
+        height: 146rpx;
+        &:first-child {
+            .noticeImg {
+                background-color: #e7f8f0;
+            }
+        }
+        .noticeImg {
+            width: 68rpx;
+            height: 68rpx;
+            text-align: center;
+            border-radius: 50%;
+            margin-top: $margin - 20;
+            background-color: #ffefe2;
+            position: relative;
+            &.active::after {
+                position: absolute;
+                content: '';
+                top: $margin - 25;
+                right: 0;
+                width: 12rpx;
+                height: 12rpx;
+                border-radius: 50%;
+                background-color: $text-price;
+            }
+        }
+        .noticeCont {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            padding: $padding $padding 0 $padding + 100rpx;
+            .name {
+                font-weight: bold;
+                font-size: $title-size-lg;
+            }
+            .text {
+                margin-top: $margin - 20;
+                font-size: $title-size-sm;
+            }
+        }
+    }
+</style>