Smart-Farm/uniapp/uni-app/mine/pages/notice.vue

<template>
	<view class="mine-notice">
		<fixed>
			<tab @change="handerTabChange" :list="tabList" :activeIndex="activeIndex" :activeColor="primaryColor"
				:width="100/tabList.length + '%'" height="100rpx" msgRight="100rpx"></tab>
			<view class="b-1px-b"></view>
		</fixed>


		<block v-for="(item,index) in list.data" :key="index">
			<view class="item-day text-center f-icontext c-base radius-4" :class="[{'md':item.day.includes('-')}]"
				v-if="index==0 || (index>0&&item.day!=list.data[index-1].day)">{{item.day}}</view>
			<view @tap.stop="goDetail(index)" class="item-notice fill-base pd-lg mt-md ml-md mr-md radius-16">
				<view class="flex-between">
					<view class="f-title text-bold">{{item.title}}</view>
					<view class="f-caption c-caption">{{item.hours}}</view>
				</view>
				<view class="flex-center mt-lg" v-if="activeIndex==0&&item.goods_cover">
					<image class="cover radius-16" :src="item.goods_cover"></image>
					<view class="flex-1 ml-md">
						<!-- 您的订单已退款成功 -->
						<view class="f-desc c-black text-bold">{{item.msg}}</view>
						<view class="f-caption mt-md">
							<view class="flex-y-center f-caption" :style="{color:primaryColor}" v-if="item.type==6">
								点击查看详情<i class="iconfont icon-right"></i></view>
							<view class="flex-y-center" v-if="item.order_code && item.type != 6">
								<view class="c-caption">订单号：</view>
								<view :style="{color:primaryColor}"> {{item.order_code}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="f-paragraph c-title mt-lg" v-if="activeIndex==0&&!item.goods_cover || activeIndex==1">
					{{activeIndex==0?item.msg:item.sub_title}}
				</view>
			</view>
		</block>

		<load-more :noMore="list.current_page>=list.last_page&&list.data.length>0" :loading="loading" v-if="loading">
		</load-more>
		<abnor v-if="!loading&&list.data.length<=0&&list.current_page==1"></abnor>

		<view class="space-footer"></view>
	</view>
</template>

<script>
	import {
		mapState,
	} from "vuex"
	// #ifdef APP-PLUS
	import skJGPush from "@/utils/jpush.js"
	// #endif
	export default {
		components: {},
		data() {
			return {
				options: {},
				today: '',
				cur_time: '',
				activeIndex: 0,
				tabList: [{
					id: 0,
					title: '系统公告',
					number: 0
				}, {
					id: 2,
					title: '服务通知',
					number: 0
				}],
				param: {
					page: 1,
				},
				list: {
					data: []
				},
				loading: true,
				popupInfo: {},
				lockTap: false
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			userInfo: state => state.user.userInfo,
		}),
		onLoad(options) {
			this.$util.showLoading()
			this.options = options
			this.initIndex()
		},
		onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			this.initRefresh()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.list.current_page >= this.list.last_page || this.loading) return
			this.param.page = this.param.page + 1
			this.loading = true
			this.getList()
		},
		methods: {
			initIndex() {
				let cur_time = new Date(Math.ceil(new Date().getTime()))
				this.today = this.$util.formatTime(cur_time, 'YY-M-D')
				this.cur_time = this.$util.DateToUnix(this.today)
				this.getList()
			},
			initRefresh() {
				this.param.page = 1
				this.initIndex()
			},
			handerTabChange(index) {
				this.activeIndex = index
				this.$util.showLoading()
				this.param.page = 1
				this.list.data = []
				this.getList()
			},
			async getList() {
				let {
					list: oldList,
					tabList,
					activeIndex,
					today,
					cur_time
				} = this
				let param = this.$util.deepCopy(this.param)
				let methodModel = activeIndex == 0 ? 'systemInfoList' : 'operateInfoList'
				let newList = await this.$api.mine[methodModel](param);

				if (this.param.page == 1) {
					this.list = newList
				} else {
					newList.data = oldList.data.concat(newList.data)
					this.list = newList
				}
				this.loading = false
				let {
					no_read_count,
					operate_no_read_count
				} = newList
				this.tabList[0].number = no_read_count
				this.tabList[1].number = operate_no_read_count
				this.$util.hideAll()
				// skJGPush.setBadge({
				// 	badge: no_read_count
				// })
			},
			// 详情
			goDetail(index) {
				let {
					id,
					type = 0,
					obj_id = 0
				} = this.list.data[index]
				let {
					activeIndex
				} = this
				let url = ''
				if (activeIndex == 0) {
					// 1提现成功；2提现失败；3商城下单；4商场发货；5土地下单；6商城订单退款；7认养到期可配送；8认养下单；9土地到期
					// 10积分；11兑换商品消耗积分；12抽奖消耗积分；13签到消耗积分；14签到；15秒杀提醒；16储值
					switch (type) {
						case 3:
						case 4:
							url = `/shop/pages/order/detail?id=${obj_id}`
							break;
						case 5:
						case 9:
							url = `/land/pages/order/detail?id=${obj_id}`
							break;
						case 6:
							url = `/shop/pages/refund/detail?id=${obj_id}`
							break;
						case 7:
							url = `/claim/pages/order/detail?id=${obj_id}&tab=1`
							break;
						case 8:
							url = `/claim/pages/order/detail?id=${obj_id}`
							break;
						case 15:
							url = `/shop/pages/detail?id=${obj_id}`
							break;
					}
				} else {
					url = `/home/pages/article?id=${id}&type=3`
				}
				if (!url) return
				this.$util.goUrl({
					url
				})
			}
		}
	}
</script>


<style lang="scss">
	.mine-notice {
		.item-day {
			width: 100rpx;
			height: 44rpx;
			line-height: 44rpx;
			background: #D9D9D9;
			margin: 20rpx auto;
		}

		.item-day.md {
			width: 150rpx;
		}

		.item-notice {
			.cover {
				width: 150rpx;
				height: 150rpx;
			}

			.ellipsis {
				max-width: 480rpx;
			}

			.icon-right {
				font-size: 24rpx;
			}
		}
	}
</style>