新增消息列表页面
This commit is contained in:
parent
50516eb812
commit
b8fbb6207e
|
|
@ -1,5 +1,48 @@
|
||||||
<template>
|
<template>
|
||||||
<app-layout title="消息" btnType="unset"></app-layout>
|
<app-layout v-model="bodyPt" title="消息" btnType="unset">
|
||||||
|
<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 class="cate-item" :class="{ active: tabIndex == 1 }" @click="tabIndex = 1">平台规则</view>
|
||||||
|
<view class="cate-item" :class="{ active: tabIndex == 2 }" @click="tabIndex = 2">帮助中心</view>
|
||||||
|
<view class="cate-item" :class="{ active: tabIndex == 3 }" @click="tabIndex = 3">平台消息</view>
|
||||||
|
</scroll-view>
|
||||||
|
<view class="message-container">
|
||||||
|
<swiper :current="tabIndex" :style="{ height: tabHeight + 'px' }" @change="changeTab">
|
||||||
|
<swiper-item>
|
||||||
|
<view class="tab0">
|
||||||
|
<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="tab1">
|
||||||
|
<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>
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
|
</view>
|
||||||
|
</app-layout>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -7,18 +50,131 @@ import AppLayout from "@/components/layout/layout";
|
||||||
export default {
|
export default {
|
||||||
name: "message",
|
name: "message",
|
||||||
data() {
|
data() {
|
||||||
return {};
|
return {
|
||||||
|
utils: this.$utils,
|
||||||
|
bodyPt: 0,
|
||||||
|
tabIndex: 0,
|
||||||
|
tabHeight: 0,
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
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,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
AppLayout,
|
AppLayout,
|
||||||
},
|
},
|
||||||
onLoad() {},
|
computed: {},
|
||||||
|
onLoad() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.setTabHeight();
|
||||||
|
});
|
||||||
|
},
|
||||||
onShow() {},
|
onShow() {},
|
||||||
onReady() {},
|
onReady() {},
|
||||||
onReachBottom() {},
|
onReachBottom() {},
|
||||||
onPullDownRefresh() {},
|
onPullDownRefresh() {},
|
||||||
methods: {},
|
methods: {
|
||||||
|
switchTab(index) {
|
||||||
|
this.tabIndex = index;
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.setTabHeight();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
changeTab(e) {
|
||||||
|
this.switchTab(e.detail.current);
|
||||||
|
},
|
||||||
|
setTabHeight() {
|
||||||
|
let element = ".tab" + this.tabIndex;
|
||||||
|
let query = uni.createSelectorQuery().in(this);
|
||||||
|
query.select(element).boundingClientRect();
|
||||||
|
query.exec((res) => {
|
||||||
|
if (res && res[0]) {
|
||||||
|
this.tabHeight = res[0].height;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped></style>
|
<style lang="less" scoped>
|
||||||
|
.tab-cate-group {
|
||||||
|
z-index: 15;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
white-space: nowrap;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 40rpx;
|
||||||
|
background-color: #ffffff;
|
||||||
|
.cate-item {
|
||||||
|
display: inline-block;
|
||||||
|
width: 167rpx;
|
||||||
|
height: 100rpx;
|
||||||
|
line-height: 100rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #999999;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.cate-item.active {
|
||||||
|
color: #8b9aeb;
|
||||||
|
border-bottom: 7rpx solid #8b9aeb;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.message-container {
|
||||||
|
z-index: 10;
|
||||||
|
position: relative;
|
||||||
|
top: 100rpx;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
.message-item:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
.message-item {
|
||||||
|
width: 670rpx;
|
||||||
|
margin: 20rpx auto 0 auto;
|
||||||
|
background-color: #ffffff;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 30rpx;
|
||||||
|
line-height: 30rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 30rpx;
|
||||||
|
.title {
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
.title.active {
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
.date {
|
||||||
|
display: block;
|
||||||
|
color: #999999;
|
||||||
|
margin-top: 24rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue