|
|
@@ -0,0 +1,296 @@
|
|
|
+<!--
|
|
|
+ * @title 消息通知
|
|
|
+ * @author Rockery(1113269755@qq.com)
|
|
|
+-->
|
|
|
+
|
|
|
+<template>
|
|
|
+ <view class="notification">
|
|
|
+ <view class="wrap">
|
|
|
+ <view class="u-tabs-box notice-tabsswiper">
|
|
|
+ <u-tabs-swiper bg-color="transparent" ref="noticeTabsSwiper" :list="tabsSwiperList" :current="current" @change="tabsSwiperChange" :is-scroll="false"></u-tabs-swiper>
|
|
|
+ </view>
|
|
|
+ <view class="notice-search">
|
|
|
+ <u-search placeholder="请输入您关键词" v-model="noticeKeyword" bg-color="#FFFFFF" input-align="center" :show-action="false" class="notice-search-btn"></u-search>
|
|
|
+ </view>
|
|
|
+ <swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
|
|
|
+ <swiper-item class="swiper-item">
|
|
|
+ <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
|
|
|
+ <view class="page-box">
|
|
|
+ <view class="notice-container" v-for="(consultItem, index) in dataList[0]" :key="index + 'consultitem'">
|
|
|
+ <view class="title">{{consultItem.title}}</view>
|
|
|
+ <view class="content">{{consultItem.content}}</view>
|
|
|
+ <view class="footer">
|
|
|
+ <view class="left">{{consultItem.dateTime}}</view>
|
|
|
+ <view :class="consultItem.status == 0 ?'unread':'haveread'" class="right">{{consultItem.statusLabel}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <u-loadmore :status="loadStatus[0]" bgColor="#f2f2f2"></u-loadmore>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </swiper-item>
|
|
|
+ <swiper-item class="swiper-item">
|
|
|
+ <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
|
|
|
+ <view class="page-box">
|
|
|
+ <view class="notice-container" v-for="(systemInfoItem, index) in dataList[1]" :key="index + 'systeminfo'">
|
|
|
+ <view class="title">{{systemInfoItem.title}}</view>
|
|
|
+ <view class="content">{{systemInfoItem.content}}</view>
|
|
|
+ <view class="footer">
|
|
|
+ <view class="left">{{systemInfoItem.dateTime}}</view>
|
|
|
+ <view class="right">{{systemInfoItem.status}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <u-loadmore :status="loadStatus[2]" bgColor="#f2f2f2"></u-loadmore>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ noticeKeyword: '',
|
|
|
+ tabsSwiperList: [
|
|
|
+ {
|
|
|
+ name: '问题咨询'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '系统消息'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ dataList: [
|
|
|
+ [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ title: '请问针对退役军人就业有哪些什么政策',
|
|
|
+ content: '退役军人就业政策，每个地方的规定不一样，但都会按照相关规定实行阳光安置，根据退役军人相关条件和考试成绩进行选择安置。',
|
|
|
+ dateTime: '发布于2021.09.23 12:31',
|
|
|
+ status: 1,
|
|
|
+ statusLabel: '已读'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ title: '请问针对退役军人就业有哪些什么政策',
|
|
|
+ content: '退役军人就业政策，每个地方的规定不一样，但都会按照相关规定实行阳光安置，根据退役军人相关条件和考试成绩进行选择安置。',
|
|
|
+ dateTime: '发布于2021.09.23 12:31',
|
|
|
+ status: 0,
|
|
|
+ statusLabel: '未读'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ title: '请问针对退役军人就业有哪些什么政策',
|
|
|
+ content: '退役军人就业政策，每个地方的规定不一样，但都会按照相关规定实行阳光安置，根据退役军人相关条件和考试成绩进行选择安置。',
|
|
|
+ dateTime: '发布于2021.09.23 12:31',
|
|
|
+ status: 1,
|
|
|
+ statusLabel: '已读'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ title: '请问针对退役军人就业有哪些什么政策',
|
|
|
+ content: '退役军人就业政策，每个地方的规定不一样，但都会按照相关规定实行阳光安置，根据退役军人相关条件和考试成绩进行选择安置。',
|
|
|
+ dateTime: '发布于2021.09.23 12:31',
|
|
|
+ status: 0,
|
|
|
+ statusLabel: '未读'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ ],
|
|
|
+ current: 0,
|
|
|
+ swiperCurrent: 0,
|
|
|
+ dx: 0,
|
|
|
+ loadStatus: ['loadmore','loadmore'],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ this.getDataList(0);
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ // 价格小数
|
|
|
+ priceDecimal() {
|
|
|
+ return val => {
|
|
|
+ if (val !== parseInt(val)) return val.slice(-2);
|
|
|
+ else return '00';
|
|
|
+ };
|
|
|
+ },
|
|
|
+ // 价格整数
|
|
|
+ priceInt() {
|
|
|
+ return val => {
|
|
|
+ if (val !== parseInt(val)) return val.split('.')[0];
|
|
|
+ else return val;
|
|
|
+ };
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ reachBottom() {
|
|
|
+ this.loadStatus.splice(this.current,1,"loading");
|
|
|
+ setTimeout(() => {
|
|
|
+ this.getDataList(this.current);
|
|
|
+ }, 1200);
|
|
|
+ },
|
|
|
+ // 页面数据
|
|
|
+ getDataList(idx) {
|
|
|
+ this.loadStatus.splice(this.current,1,"nomore")
|
|
|
+ },
|
|
|
+ // 总价
|
|
|
+ totalPrice(item) {
|
|
|
+ let price = 0;
|
|
|
+ item.map(val => {
|
|
|
+ price += parseFloat(val.price);
|
|
|
+ });
|
|
|
+ return price.toFixed(2);
|
|
|
+ },
|
|
|
+ // 总件数
|
|
|
+ totalNum(item) {
|
|
|
+ let num = 0;
|
|
|
+ item.map(val => {
|
|
|
+ num += val.number;
|
|
|
+ });
|
|
|
+ return num;
|
|
|
+ },
|
|
|
+ // tab栏切换
|
|
|
+ tabsSwiperChange(index) {
|
|
|
+ this.swiperCurrent = index;
|
|
|
+ this.getDataList(index);
|
|
|
+ },
|
|
|
+ transition({ detail: { dx } }) {
|
|
|
+ this.$refs.noticeTabsSwiper.setDx(dx);
|
|
|
+ },
|
|
|
+ animationfinish({ detail: { current } }) {
|
|
|
+ this.$refs.noticeTabsSwiper.setFinishCurrent(current);
|
|
|
+ this.swiperCurrent = current;
|
|
|
+ this.current = current;
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.order {
|
|
|
+ width: 710rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ margin: 20rpx auto;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 20rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ .top {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .store {
|
|
|
+ margin: 0 10rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ color: $u-type-warning-dark;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ margin: 20rpx 0 0;
|
|
|
+ .left {
|
|
|
+ margin-right: 20rpx;
|
|
|
+ image {
|
|
|
+ width: 200rpx;
|
|
|
+ height: 200rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ .title {
|
|
|
+ font-size: 28rpx;
|
|
|
+ line-height: 50rpx;
|
|
|
+ }
|
|
|
+ .type {
|
|
|
+ margin: 10rpx 0;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: $u-tips-color;
|
|
|
+ }
|
|
|
+ .delivery-time {
|
|
|
+ color: #e5d001;
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ margin-left: 10rpx;
|
|
|
+ padding-top: 20rpx;
|
|
|
+ text-align: right;
|
|
|
+ .decimal {
|
|
|
+ font-size: 24rpx;
|
|
|
+ margin-top: 4rpx;
|
|
|
+ }
|
|
|
+ .number {
|
|
|
+ color: $u-tips-color;
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .total {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ text-align: right;
|
|
|
+ font-size: 24rpx;
|
|
|
+ .total-price {
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bottom {
|
|
|
+ display: flex;
|
|
|
+ margin-top: 40rpx;
|
|
|
+ padding: 0 10rpx;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .btn {
|
|
|
+ line-height: 52rpx;
|
|
|
+ width: 160rpx;
|
|
|
+ border-radius: 26rpx;
|
|
|
+ border: 2rpx solid $u-border-color;
|
|
|
+ font-size: 26rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: $u-type-info-dark;
|
|
|
+ }
|
|
|
+ .evaluate {
|
|
|
+ color: $u-type-warning-dark;
|
|
|
+ border-color: $u-type-warning-dark;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.centre {
|
|
|
+ text-align: center;
|
|
|
+ margin: 200rpx auto;
|
|
|
+ font-size: 32rpx;
|
|
|
+ image {
|
|
|
+ width: 164rpx;
|
|
|
+ height: 164rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ }
|
|
|
+ .tips {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999999;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ margin: 80rpx auto;
|
|
|
+ width: 200rpx;
|
|
|
+ border-radius: 32rpx;
|
|
|
+ line-height: 64rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 26rpx;
|
|
|
+ background: linear-gradient(270deg, rgba(249, 116, 90, 1) 0%, rgba(255, 158, 1, 1) 100%);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|
|
|
+
|
|
|
+<style lang="scss"
|
|
|
+ scoped>
|
|
|
+ @import './scss/notification.scss'
|
|
|
+</style>
|
