topnuomi
/
xx-worker-applets
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

完成消息页面

This commit is contained in:
TOP糯米 2023-02-28 20:47:32 +08:00
parent b8fbb6207e
commit 6c9cf8cd2f
2 changed files with 121 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
src/pages/message/detail.vue Normal file
View File

@ -0,0 +1,61 @@
<template>
<app-layout title="详情">
<div class="message-container">
<view class="head">
<text class="title limit-line clamp-1">{{ title }}</text>
<text class="date">{{ date }}</text>
</view>
<view class="body">
<rich-text :nodes="content"></rich-text>
</view>
</div>
</app-layout>
</template>
<script>
import AppLayout from "@/components/layout/layout";
export default {
name: "message-detail",
data() {
return {
title: "接单后要求多久与客户预约安装时间？",
date: "2022-11-01 18:14",
content: "哈哈哈",
};
},
components: {
AppLayout,
},
onLoad() {},
onShow() {},
onReady() {},
onReachBottom() {},
onPullDownRefresh() {},
methods: {},
};
</script>
<style lang="less" scoped>
.message-container {
width: 100%;
box-sizing: border-box;
padding: 40rpx;
.head {
width: 100%;
font-size: 30rpx;
font-weight: bold;
line-height: 30rpx;
.title {
color: #333333;
}
.date {
display: inline-block;
color: #999999;
margin-top: 24rpx;
}
}
.body {
margin-top: 40rpx;
}
}
</style>

106
src/pages/message/message.vue
View File

@ -1,42 +1,28 @@
<template> <template>
<app-layout v-model="bodyPt" title="消息" btnType="unset"> <app-layout v-model="bodyPt" title="消息" btnType="unset">
<scroll-view class="tab-cate-group" :style="{ top: bodyPt + 'px' }" scroll-x> <scroll-view class="tab-cate-group" :style="{ top: bodyPt + 'px' }" scroll-x>
<view class="cate-item" :class="{ active: tabIndex == 0 }" @click="tabIndex = 0">公告</view> <view
<view class="cate-item" :class="{ active: tabIndex == 1 }" @click="tabIndex = 1">平台规则</view> class="cate-item"
<view class="cate-item" :class="{ active: tabIndex == 2 }" @click="tabIndex = 2">帮助中心</view> v-for="(item, index) in tabList"
<view class="cate-item" :class="{ active: tabIndex == 3 }" @click="tabIndex = 3">平台消息</view> :key="index"
:class="{ active: tabIndex == index }"
@click="tabIndex = index"
>
{{ item.name }}
</view>
</scroll-view> </scroll-view>
<view class="message-container"> <view class="message-container">
<swiper :current="tabIndex" :style="{ height: tabHeight + 'px' }" @change="changeTab"> <swiper :current="tabIndex" :style="{ height: tabHeight + 'px' }" @change="changeTab">
<swiper-item> <swiper-item v-for="(item, index) in tabList" :key="index">
<view class="tab0"> <view :class="['tab' + index]">
<view class="message-item" v-for="(item, index) in list" :key="index"> <view
<text class="title limit-line clamp-1" :class="{ active: !item.read }">{{ item.title }}</text> class="message-item"
<text class="date">{{ item.date }}</text> v-for="(v, k) in item.list"
</view> :key="k"
</view> @click="utils.toPage('/pages/message/detail?id=' + v.id)"
</swiper-item> >
<swiper-item> <text class="title limit-line clamp-1" :class="{ active: !v.read }">{{ v.title }}</text>
<view class="tab1"> <text class="date">{{ v.date }}</text>
<view class="message-item" v-for="(item, index) in list" :key="index">
<text class="title limit-line clamp-1" :class="{ active: !item.read }">{{ item.title }}</text>
<text class="date">{{ item.date }}</text>
</view>
</view>
</swiper-item>
<swiper-item>
<view class="tab2">
<view class="message-item" v-for="(item, index) in list" :key="index">
<text class="title limit-line clamp-1" :class="{ active: !item.read }">{{ item.title }}</text>
<text class="date">{{ item.date }}</text>
</view>
</view>
</swiper-item>
<swiper-item>
<view class="tab3">
<view class="message-item" v-for="(item, index) in list" :key="index">
<text class="title limit-line clamp-1" :class="{ active: !item.read }">{{ item.title }}</text>
<text class="date">{{ item.date }}</text>
</view> </view>
</view> </view>
</swiper-item> </swiper-item>
@ -55,30 +41,58 @@ export default {
bodyPt: 0, bodyPt: 0,
tabIndex: 0, tabIndex: 0,
tabHeight: 0, tabHeight: 0,
list: [ tabList: [
{ {
id: 1, id: 1,
title: "接单后要求多久与客户预约安装时间？", name: "公告",
date: "2022-11-01 18:14", list: [
read: false, {
id: 1,
title: "接单后要求多久与客户预约安装时间？",
date: "2022-11-01 18:14",
read: false,
},
{
id: 2,
title: "接单后要求多久与客户预约安装时间？",
date: "2022-11-01 18:14",
read: true,
},
{
id: 3,
title: "接单后要求多久与客户预约安装时间？",
date: "2022-11-01 18:14",
read: true,
},
{
id: 4,
title: "接单后要求多久与客户预约安装时间？",
date: "2022-11-01 18:14",
read: true,
},
],
}, },
{ {
id: 2, id: 2,
title: "接单后要求多久与客户预约安装时间？", name: "平台规则",
date: "2022-11-01 18:14", list: [
read: true, {
id: 5,
title: "接单后要求多久与客户预约安装时间？",
date: "2022-11-01 18:14",
read: false,
},
],
}, },
{ {
id: 3, id: 3,
title: "接单后要求多久与客户预约安装时间？", name: "帮助中心",
date: "2022-11-01 18:14", list: [],
read: true,
}, },
{ {
id: 4, id: 4,
title: "接单后要求多久与客户预约安装时间？", name: "平台消息",
date: "2022-11-01 18:14", list: [],
read: true,
}, },
], ],
}; };