首页及消息页

components/ItemMessage.vue

@@ -0,0 +1,38 @@
+<template>
+	<view class="px-32 mt-24 flex-column" @click="changeReadStatus">
+		<text class="w-100p text-center font" style="line-height: 60rpx;color: #9EA5B7;">{{item.createTime}}</text>
+		<view class="flex-row mt-08">
+			<image :src="item.isRead === '0'?'/static/images/message-un-read.png':'/static/images/message-read.png'"
+				style="width: 64rpx;height: 64rpx;" mode="aspectFill"></image>
+			<view class="flex-1 ml-24 rounded-8 px-32 py-16"
+				style="background-color: white;border: 0.6px solid #FFFFFF;box-shadow: 0px 4px 8px 0px rgba(218, 235, 253, 0.21);">
+				<text class="font" style="color: #333333;line-height: 60rpx;">{{item.message}}</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	const emit = defineEmits(['modify'])
+	const props = defineProps({
+		item: {
+			type: Object,
+			default () {
+				return {}
+			}
+		},
+		index: {
+			type: Number,
+			default: 0
+		}
+	})
+
+	const changeReadStatus = () => {
+		if (props.item.isRead === '0') {
+			emit('modify', props.item.id)
+		}
+	}
+</script>
+
+<style>
+</style>

pages.json

@@ -12,7 +12,15 @@
 		{
 			"path": "pages/tabbar/application/application",
 			"style": {
-				"navigationBarTitleText": "申请"
+				"navigationStyle": "custom",
+				"navigationBarTextStyle": "black"
+			}
+		},
+		{
+			"path": "pages/tabbar/message/message",
+			"style": {
+				"navigationStyle": "custom",
+				"navigationBarTextStyle": "black"
 			}
 		},
 		{
@@ -56,6 +64,11 @@
 			"selectedIconPath": "static/tabbar/index-selected.png",
 			"pagePath": "pages/tabbar/application/application",
 			"text": "申请"
+		}, {
+			"iconPath": "static/tabbar/message.png",
+			"selectedIconPath": "static/tabbar/message-selected.png",
+			"pagePath": "pages/tabbar/message/message",
+			"text": "消息"
 		}, {
 			"iconPath": "static/tabbar/mine-new.png",
 			"selectedIconPath": "static/tabbar/mine-selected.png",

pages/subpack/pages/login/login.vue

@@ -1,7 +1,7 @@
 <template>
 	<view>
 		<view class="w-750 position-relative" style="height: 100vh;">
-			<image src="/pages/subpack/static/images/bg-login.png" style="width: 100%;height: 100%;" mode="aspectFill">
+			<image src="/pages/subpack/static/images/bg-login.jpg" style="width: 100%;height: 100%;" mode="aspectFill">
 			</image>
 		</view>
 		<view class="w-750 position-absolute top-0 left-0" style="height: 100vh;">

pages/tabbar/application/application.vue

@@ -1,10 +1,52 @@
 <template>
-	<view>
-
+	<view class="container" :style="{height:computeHeight}">
+		<up-navbar title="首页" placeholder bgColor="transparent" leftIcon='' :title-style="{fontWeight:'bold'}">
+		</up-navbar>
+		<!-- header -->
+		<view class="flex-row justify-between"
+			style="width: 676rpx; height: 342rpx;padding-left: 48rpx;padding-right: 26rpx;">
+			<view class="flex-column font-xxl" style="margin-top: 46rpx;">
+				<text class="text-black3 font-weight-bolder">特困户系统</text>
+				<view class="index-tag flex-row align-center justify-center">
+					<text class="font text-white font-weight-bolder" style="margin-right: 12rpx;">便民服务</text>
+				</view>
+			</view>
+			<view style="width: 284rpx;height: 342rpx;">
+				<image style="width: 100%;height: 100%;" src="@/static/images/index-computer.png" mode="aspectFill">
+				</image>
+			</view>
+		</view>
+		<!--入口  -->
+		<view class="px-32" style="margin-top: -60rpx;" @click="goReservation">
+			<view class="position-relative flex-row align-center justify-between"
+				style="width: 100%;height: 148rpx;border-radius: 20rpx;background-color: rgba(228, 240, 255, 0.8);">
+				<image style="width: 100%;height: 100%;" src="@/static/images/index-center-bg.png" mode="aspectFill">
+				</image>
+				<view class="position-absolute top-0 left-0 flex-row align-center justify-between"
+					style="height: 100%;width: 100%;">
+					<view class="flex-row align-center" style="margin-left: 28rpx;">
+						<image style="width: 66rpx;height: 66rpx;" src="@/static/images/index-enter-logo.png"
+							mode="aspectFill"></image>
+						<view class="flex-column ml-24">
+							<text class="font-md" style="color: #4A90C6;">护理申请</text>
+							<view class="bg-white flex-row align-center justify-center"
+								style="width: 208rpx;height: 40rpx;border-radius: 20rpx;margin-top: 18rpx;">
+								<text style="color: #4A90C6;font-size: 22rpx;">一键快速申请</text>
+							</view>
+						</view>
+					</view>
+					<image src="/static/images/index-enter-arrow.png"
+						style="width: 32rpx;height: 32rpx;margin-right: 52rpx;" mode="aspectFill"></image>
+				</view>
+			</view>
+		</view>
 	</view>
 </template>
 
 <script>
+	import {
+		getMsgCountUrl
+	} from '@/common/config/api.js'
 	export default {
 		data() {
 			return {
@@ -12,16 +54,66 @@
 			}
 		},
 		onLoad() {
-			uni.navigateTo({
-				url: '/pages/subpack/pages/login/login'
-			})
+
+		},
+		onShow() {
+			this.getMsgCount();
+		},
+		computed: {
+			computeHeight() {
+				return uni.$u.sys().windowHeight + 'px'
+			}
 		},
 		methods: {
-
+			// 获取未读消息数量
+			getMsgCount() {
+				console.log(this.vuex_user.id);
+				getMsgCountUrl({
+						params: {
+							userId: this.vuex_user.id
+						}
+					})
+					.then(res => {
+						console.log('未读消息数', res);
+						const count = parseInt(res);
+						if (count > 0) {
+							uni.setTabBarBadge({
+								index: 1,
+								text: count > 99 ? '99+' : res
+							})
+						} else {
+							uni.removeTabBarBadge({
+								index: 1
+							})
+						}
+					})
+					.catch(err => {
+						console.log(err);
+					})
+			},
+			// 点击预约
+			goReservation() {
+				uni.navigateTo({
+					url: '/pages/subpack/pages/cat-choose/cat-choose'
+				})
+			}
 		}
 	}
 </script>
 
-<style>
+<style lang="scss" scoped>
+	.container {
+		// background-image: url('@/static/images/index-bg.png');
+		background-size: cover;
+		background-position: center;
 
+		.index-tag {
+			width: 164rpx;
+			height: 58rpx;
+			margin-top: 38rpx;
+			background-image: url('@/static/images/index-tag-bg.png');
+			background-size: cover;
+			background-position: center;
+		}
+	}
 </style>

pages/tabbar/message/message.vue

@@ -0,0 +1,110 @@
+<template>
+	<z-paging ref="msgpPging" v-model="dataList" @query="queryList" loading-more-no-more-text="没有更多消息了">
+		<template v-slot:top>
+			<up-navbar title=" 消息" bgColor="transparent" leftIcon='' :title-style="{fontWeight:'bold'}">
+			</up-navbar>
+			<div class="nav-header" :style="{height:computeNavHeight}"></div>
+		</template>
+		<ItemMessage v-for="(item,index) in dataList" :item="item" :index="index" @modify="handleModify">
+		</ItemMessage>
+	</z-paging>
+</template>
+
+<script>
+	import {
+		getMsgCountUrl,
+		getMessageListUrl,
+		modifyMsgUrl
+	} from '@/common/config/api.js'
+	import ItemMessage from '@/components/ItemMessage.vue'
+	export default {
+		components: {
+			ItemMessage
+		},
+		data() {
+			return {
+				dataList: []
+			}
+		},
+		onShow() {
+			this.getMsgCount();
+		},
+		computed: {
+			computeNavHeight() {
+				console.log(uni.$u.sys());
+				return uni.$u.sys().statusBarHeight + 44 + 'px'
+			}
+		},
+		methods: {
+			handleModify(id) {
+				modifyMsgUrl({
+						params: {
+							id
+						}
+					})
+					.then(res => {
+						console.log('阅读消息', res);
+						this.$refs.msgpPging.reload();
+						this.getMsgCount()
+					})
+					.catch(err => {
+						console.log(err);
+					})
+			},
+			// 获取未读消息数量
+			getMsgCount() {
+				getMsgCountUrl({
+						params: {
+							userId: this.vuex_user.id
+						}
+					})
+					.then(res => {
+						console.log('未读消息数', res);
+						this.$refs.msgpPging.reload();
+						const count = parseInt(res);
+						if (count > 0) {
+							uni.setTabBarBadge({
+								index: 1,
+								text: count > 99 ? '99+' : res
+							})
+						} else {
+							uni.removeTabBarBadge({
+								index: 1
+							})
+						}
+					})
+					.catch(err => {
+						console.log(err);
+					})
+			},
+			queryList(pageNo, pageSize) {
+				// this.$refs.msgpPging.complete([1, 2, 3, 4, 5]);
+				getMessageListUrl({
+						pageNum: pageNo,
+						pageSize: pageSize,
+						userId: this.vuex_user.id
+					})
+					.then(res => {
+						console.log('消息列表: ', res);
+						this.$refs.msgpPging.complete(res.records);
+					})
+					.catch(err => {
+						console.log('err: ', err);
+						this.$refs.msgpPging.complete(false);
+					})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	page {
+		background-color: #F6F8FD;
+	}
+
+	.nav-header {
+		background-image: url('@/static/images/nav-bg.png');
+		background-size: cover;
+		background-position: center;
+	}
+</style>