|
|
@@ -1,11 +1,106 @@
|
|
|
-<route lang="json5">
|
|
|
-{ layout: 'tabbar', style: { navigationBarTitleText: '消息' } }
|
|
|
+<route lang="yaml">
|
|
|
+layout: tabbar
|
|
|
+style:
|
|
|
+ navigationBarTitleText: 消息
|
|
|
+ navigationBarBackgroundColor: '#fff'
|
|
|
</route>
|
|
|
|
|
|
-<script setup lang="ts"></script>
|
|
|
+<script setup lang="ts">
|
|
|
+import Card from '@/components/card.vue'
|
|
|
+import { integral, interact, system } from '@/core/libs/svgs'
|
|
|
+import { beforeNow } from '@/utils/date-util'
|
|
|
+import dayjs from 'dayjs'
|
|
|
+
|
|
|
+const tab = ref('integral')
|
|
|
+const tabs = ref([
|
|
|
+ { label: '积分消息', value: 'integral' },
|
|
|
+ { label: '系统消息', value: 'system' },
|
|
|
+ { label: '互动消息', value: 'interact' },
|
|
|
+])
|
|
|
+const msgs = ref({
|
|
|
+ integral: [
|
|
|
+ { title: '积分变动通知', createdAt: Date.now() },
|
|
|
+ { title: '请确认积分', createdAt: '2023-05-05' },
|
|
|
+ ],
|
|
|
+ system: [
|
|
|
+ {
|
|
|
+ title: '新豪轩门窗入驻筑巢荟',
|
|
|
+ createdAt: Date.now(),
|
|
|
+ content: '新豪轩材料商加入筑巢荟，为筑巢荟设计师提供更好的材料和服务！',
|
|
|
+ img: 'https://via.placeholder.com/279x164',
|
|
|
+ },
|
|
|
+ { title: '平台通知', createdAt: Date.now(), content: '有新的材料商入驻平台，点击查看!' },
|
|
|
+ ],
|
|
|
+ interact: [
|
|
|
+ {
|
|
|
+ title: '王磊回复了你',
|
|
|
+ createdAt: Date.now(),
|
|
|
+ content: '设计师李家豪刚刚点赞了你的设计圈点击前往查看',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '李琳赞了你的设计圈',
|
|
|
+ createdAt: Date.now(),
|
|
|
+ content: '设计师李家豪刚刚点赞了你的设计圈点击前往查看',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+})
|
|
|
+</script>
|
|
|
|
|
|
<template>
|
|
|
- <view></view>
|
|
|
+ <view class="flex-grow">
|
|
|
+ <wd-tabs v-model="tab">
|
|
|
+ <block v-for="({ label, value }, i) in tabs" :key="i">
|
|
|
+ <wd-tab :title="`${label}`" :name="value"></wd-tab>
|
|
|
+ </block>
|
|
|
+ </wd-tabs>
|
|
|
+ <div class="p-3.5 gap-3.5 flex flex-col">
|
|
|
+ <template v-for="({ title, createdAt, content, img }, i) in msgs[tab]" :key="i">
|
|
|
+ <Card>
|
|
|
+ <div class="grid items-center grid-cols-[38px_auto_100px]">
|
|
|
+ <div class="row-start-1 col-start-1">
|
|
|
+ <div
|
|
|
+ class="w-[30px] h-[30px] bg-neutral-100 rounded-full mr-2 flex items-center justify-center"
|
|
|
+ >
|
|
|
+ <wd-img
|
|
|
+ width="18"
|
|
|
+ height="18"
|
|
|
+ :src="{ integral: integral, system: system, interact: interact }[tab]"
|
|
|
+ ></wd-img>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row-start-1 col-start-2 text-start">
|
|
|
+ <div class="text-black/90 text-base font-normal font-['PingFang SC'] leading-[30px]">
|
|
|
+ {{ title }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row-start-1 col-start-3 text-end">
|
|
|
+ <div class="text-black/30 text-sm font-normal font-['PingFang SC'] leading-[10.18px]">
|
|
|
+ {{ beforeNow(dayjs(createdAt).toDate()) }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row-start-2 col-start-2 col-end-4">
|
|
|
+ <div
|
|
|
+ class="my-3 text-black/40 text-sm font-normal font-['PingFang SC'] leading-[25px]"
|
|
|
+ >
|
|
|
+ {{ content }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="img" class="row-start-3 col-start-2 col-end-4">
|
|
|
+ <img class="w-[279px] h-[164px] rounded-md" :src="img" />
|
|
|
+ </div>
|
|
|
+ <div class="row-start-4 col-start-1 col-end-4 my-2">
|
|
|
+ <div v-if="!img" class="bg-[#dadada] w-full h-[1px]"></div>
|
|
|
+ </div>
|
|
|
+ <div class="row-start-5 col-start-2 col-end-4">
|
|
|
+ <div class="text-black/90 text-xs font-normal font-['PingFang SC'] leading-[25px]">
|
|
|
+ 查看详情
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </Card>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<style scoped lang="scss"></style>
|
