10-30

api/index.js

@@ -216,3 +216,19 @@ export function add_company(data) {
 	});
 }
 
+//获取文章列表
+export function getArticleList(data,cid) {
+	return request({
+		url: '/api/article/list/'+ cid,
+		method: 'get',
+		data
+	});
+}
+//获取文章详情
+export function getDetail(data,id) {
+	return request({
+		url: '/api/article/details/' + id,
+		method: 'get',
+		data
+	})
+}

pages.json

@@ -73,6 +73,42 @@
 				"navigationBarTextStyle": "white",
 				"navigationBarTitleText": "捐赠成功"
 			}
+		},
+		{
+			"path":"pages/article/list",
+			"style": {
+				// #ifndef MP
+				"app-plus": {
+					"titleNView": false
+				},
+				// #endif
+				"navigationBarTitleText": ""
+			
+			}
+		},
+		{
+			"path":"pages/article/lists",
+			"style": {
+				// #ifndef MP
+				"app-plus": {
+					"titleNView": false
+				},
+				// #endif
+				"navigationBarTitleText": ""
+			
+			}
+		},
+		{
+			"path":"pages/article/detail",
+			"style": {
+				// #ifndef MP
+				"app-plus": {
+					"titleNView": false
+				},
+				// #endif
+				"navigationBarTitleText": "详情"
+			
+			}
 		},
 		{
 			"path": "pages/form/certificates",

pages/article/detail.vue

@@ -0,0 +1,74 @@
+<template>
+	<view class="detail">
+		<view class="article-tit">
+			{{article.title}}
+		</view>
+		<view class="article-time">
+			{{article.release_time}} | <text style="color: #c7455a;" @click="navTo(article.cid)">{{ ' ' + article.cart_name}}</text>
+		</view>
+		<view class="article-content" v-html="article.content">
+			
+		</view>
+	</view>
+</template>
+
+<script>
+	import { getDetail } from '../../api/index.js'
+	export default {
+		data() {
+			return {
+				articleId: '',
+				article: {}
+			}
+		},
+		onLoad(opt) {
+			console.log(opt)
+			if(opt.id) {
+				this.articleId = opt.id
+			}
+			this.getDetail()
+		},
+		methods: {
+			navTo(cid) {
+				let url = ''
+				if(cid !=6 ) {
+					url = '/pages/article/list?cid=' + cid
+				}else {
+					url = '/pages/article/lists?cid=' + cid
+				}
+				uni.navigateTo({
+					url: url
+				})
+			},
+			getDetail() {
+				let obj = this
+				getDetail({},obj.articleId).then( ({data}) => {
+					obj.article = data
+					obj.article.content = obj.article.content.replace(/\<img/gi, '<img class="rich-img"');
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.detail {
+		padding:0 20rpx;
+	}
+	/deep/ .rich-img {
+		max-width: 100% !important;
+		height: auto;
+	}
+	.article-tit {
+		font-size: 32rpx;
+		line-height: 1.5;
+		padding: 40rpx 0 20rpx;
+	}
+	.article-time {
+		padding-bottom: 35rpx;
+		color: #b6b6b6;
+	}
+	.article-content {
+		letter-spacing: 2rpx;
+	}
+</style>

pages/article/list.vue

@@ -0,0 +1,153 @@
+<template>
+	<view class="list">
+		<template v-if="cid == 11">
+			<view class="order-item" @click="ToDetail(1)">
+				<view class="list-cell">
+					<image class="image" src="../../static/img/personal.jpg"></image>
+					<view class="list-tpl">个人会员报名</view>
+				</view>
+			</view>
+			<view class="order-item" @click="ToDetail(2)">
+				<view class="list-cell">
+					<image class="image" src="../../static/img/group.jpg"></image>
+					<view class="list-tpl">团队会员报名</view>
+				</view>
+			</view>
+		</template>
+		<template v-if="cid == 12">
+			<view class="order-item" @click="ToDetail(3)">
+				<view class="list-cell">
+					<image class="image" src="../../static/img/zffw.jpg"></image>
+					<view class="list-tpl">志愿服务报名</view>
+				</view>
+			</view>
+		</template>
+		<template v-if="cid != 11 && cid != 12">
+			<empty v-if="loaded && list.length==0"></empty>
+		</template>
+		<view class="list-item" v-for="item in list" @click="navTo('/pages/article/detail?id=' + item.id)">
+			<view class="article-tit">{{item.title}}</view>
+			<view class="article-time">{{item.release_time}}</view>
+		</view>
+		<uni-load-more :status="loadingType"></uni-load-more>
+	</view>
+	
+</template>
+
+<script>
+	import empty from '../../components/empty.vue'
+	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
+	import { getArticleList } from '../../api/index.js'
+	export default {
+		components: {
+			uniLoadMore,
+			empty
+		},
+		data() {
+			return {
+				cid: '',
+				list: [],
+				page: 1,
+				limit: 10,
+				loadingType: 'more',
+				loaded: false
+			}
+		},
+		onLoad(opt) {
+			if(opt.cid) {
+				this.cid = opt.cid
+			}
+			this.getList()
+		},
+		methods: {
+			navTo(url) {
+				uni.navigateTo({
+					url: url
+				})
+			},
+			getList() {
+				let obj =this
+				if(obj.loadingType == 'loading' || obj.loadingType == 'noMore') {
+					return 
+				}
+				obj.loadingType = 'loading'
+				getArticleList({
+					page: obj.page,
+					limit: obj.limit
+				},obj.cid).then( ({data}) => {
+					console.log(data)
+					obj.list = obj.list.concat(data.list)
+					obj.page++
+					if(data.length == obj.limit) {
+						obj.loadingType = 'more'
+					}else {
+						obj.loadingType = 'noMore'
+					}
+					obj.$set(obj,'loaded',true)
+				})
+			},
+			//跳转到详情
+			ToDetail(index) {
+				if(index == 1) {
+					uni.navigateTo({
+						url: '/pages/cart/personal'
+					})
+				}
+				if(index == 2) {
+					uni.navigateTo({
+						url: '/pages/cart/group'
+					})
+				}
+				if(index == 3) {
+					uni.navigateTo({
+						url: '/pages/form/tovolApply'
+					})
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.list-item {
+		border-bottom: 1px solid #ccc;
+		border-top: 1px solid #ccc;
+		padding:20rpx 35rpx;
+		line-height: 1.5;
+		.article-tit {
+			font-size: 34rpx;
+			color: #000000;
+			font-weight: 500;
+			letter-spacing: 3rpx;
+		}
+		.article-time {
+			font-size: 28rpx;
+			color: #888;
+			font-weight: 500;
+		}
+	}
+	.order-item {
+		width: 100%;
+		padding: 0rpx 25rpx;
+		padding-top: 25rpx !important;
+		.list-cell {
+			background-color: #ffffff;
+			border-radius: 20rpx;
+			width: 100%;
+			box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.06);
+			.image {
+				width: 100%;
+				height: 300rpx;
+				border-top-left-radius: 25rpx;
+				border-top-right-radius: 25rpx;
+			}
+			.list-tpl {
+				padding: 25rpx 25rpx;
+				padding-bottom: 35rpx !important;
+				font-size: 34rpx;
+				color: #222222;
+				font-weight:500;
+			}
+		}
+	}
+</style>

pages/article/lists.vue

@@ -0,0 +1,221 @@
+<template>
+	<view class="list">
+		<view class="nav">
+			<view class="nav-item" v-for="(nav , index) in navList" :class="{'action': currentIndex == index}" @click="navClick(index)">{{nav.tit}}</view>
+		</view>
+		<swiper :autoplay="false" :interval="3000" :duration="500" circular class="swiper-box" :style="{'height': height}" :current="currentIndex">
+			<swiper-item v-for="navItem in navList" :style="{'height': height}">
+				<scroll-view scroll-y="true">
+					<empty v-if="navItem.loaded && navItem.list.length==0"></empty>
+					<view class="list-item" v-for="item in navItem.list" @click="navTo('/pages/article/detail?id=' + item.id)">
+						<view class="article-tit">{{item.title}}</view>
+						<view class="article-time">{{item.release_time}}</view>
+					</view>
+					<uni-load-more :status="navItem.loadingType"></uni-load-more>
+				</scroll-view>
+			</swiper-item>
+		</swiper>
+	</view>
+</template>
+
+<script>
+	import empty from '../../components/empty.vue'
+	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
+	import {
+		getArticleList
+	} from '../../api/index.js'
+	export default {
+		components: {
+			uniLoadMore,
+			empty
+		},
+		data() {
+			return {
+				height: '',
+				currentIndex: 0,
+				navList: [{
+						tit: '活动开展',
+						list: [],
+						page: 1,
+						limit: 10,
+						loadingType: 'more',
+						loaded: false,
+						cid: 14,
+					},
+					{
+						tit: '应急救护名师工作室',
+						list: [],
+						page: 1,
+						limit: 10,
+						loadingType: 'more',
+						loaded: false,
+						cid: 15,
+					},
+					{
+						tit: '最美红十字救护员',
+						list: [],
+						page: 1,
+						limit: 10,
+						loadingType: 'more',
+						loaded: false,
+						cid: 16,
+					}
+				],
+				cid: ''
+			}
+		},
+		onLoad(opt) {
+			if (opt.cid) {
+				this.cid = opt.cid
+				if(this.cid == 6) {
+					this.currentIndex = 0
+				}else {
+					this.currentIndex = this.cid*1 - 14
+				}
+				
+			}
+			this.getList('tab')
+		},
+		onReady(res) {
+			var _this = this;
+			uni.getSystemInfo({
+				success: resu => {
+					const query = uni.createSelectorQuery();
+					query.select('.swiper-box').boundingClientRect();
+					query.exec(function(res) {
+						console.log(res, 'ddddddddddddd');
+						_this.height = resu.windowHeight - res[0].top + 'px';
+						console.log('打印页面的剩余高度', _this.height);
+					});
+				},
+				fail: res => {}
+			});
+		},
+		methods: {
+			navClick(index) {
+				this.currentIndex = index
+				this.getList('tab')
+			},
+			navTo(url) {
+				uni.navigateTo({
+					url: url
+				})
+			},
+			getList(opt) {
+				let obj = this
+				let index = obj.currentIndex
+				let navItem = obj.navList[index]
+				console.log(index,navItem)
+				if(opt == 'tab' && navItem.loaded) {
+					return
+				}
+				if (navItem.loadingType == 'loading' || navItem.loadingType == 'noMore') {
+					return
+				}
+				navItem.loadingType = 'loading'
+				getArticleList({
+					page: navItem.page,
+					limit: navItem.limit
+				}, navItem.cid).then(({
+					data
+				}) => {
+					console.log(data)
+					navItem.list = navItem.list.concat(data.list)
+					navItem.page++
+					if (data.length == navItem.limit) {
+						navItem.loadingType = 'more'
+						return
+					} else {
+						navItem.loadingType = 'noMore'
+					}
+					obj.$set(navItem, 'loaded', true)
+				})
+			},
+			//跳转到详情
+			ToDetail(index) {
+				if (index == 1) {
+					uni.navigateTo({
+						url: '/pages/cart/personal'
+					})
+				}
+				if (index == 2) {
+					uni.navigateTo({
+						url: '/pages/cart/group'
+					})
+				}
+				if (index == 3) {
+					uni.navigateTo({
+						url: '/pages/form/tovolApply'
+					})
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.nav {
+		display: flex;
+		flex-wrap: wrap;
+		background-color: #df001b;
+		font-size: 32rpx;
+		color: #fff;
+		font-weight: 500;
+		.action {
+			font-size: 36rpx;
+			font-weight: bold;
+		}
+		.nav-item {
+			width: 50%;
+			line-height: 70rpx;
+			text-align: center;
+		}
+	}
+	.list-item {
+		border-bottom: 1px solid #ccc;
+		border-top: 1px solid #ccc;
+		padding: 20rpx 35rpx;
+		line-height: 1.5;
+
+		.article-tit {
+			font-size: 34rpx;
+			color: #000000;
+			font-weight: 500;
+			letter-spacing: 3rpx;
+		}
+
+		.article-time {
+			font-size: 28rpx;
+			color: #888;
+			font-weight: 500;
+		}
+	}
+
+	.order-item {
+		width: 100%;
+		padding: 0rpx 25rpx;
+		padding-top: 25rpx !important;
+
+		.list-cell {
+			background-color: #ffffff;
+			border-radius: 20rpx;
+			width: 100%;
+			box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.06);
+
+			.image {
+				width: 100%;
+				height: 300rpx;
+				border-top-left-radius: 25rpx;
+				border-top-right-radius: 25rpx;
+			}
+
+			.list-tpl {
+				padding: 25rpx 25rpx;
+				padding-bottom: 35rpx !important;
+				font-size: 34rpx;
+				color: #222222;
+				font-weight: 500;
+			}
+		}
+	}
+</style>

pages/cart/personal.vue

@@ -70,6 +70,14 @@
 </template>
 
 <script>
+	import {
+		mapState,
+		mapMutations
+	} from 'vuex';
+	import {
+		saveUrl,
+		interceptor
+	} from '@/utils/loginUtils.js';
 import { joinSec } from '@/api/index.js';
 import { upload } from '@/api/ask.js';
 export default {
@@ -99,6 +107,7 @@ export default {
 		};
 	},
 	computed: {
+		...mapState('user', ['hasLogin', 'userInfo']),
 		startDate() {
 			return this.getDate('start');
 		},
@@ -106,6 +115,25 @@ export default {
 			return this.getDate('end');
 		}
 	},
+	onShow() {
+		if (this.hasLogin) {
+			// this.loadBaseData();
+		} else {
+			saveUrl();
+			uni.showModal({
+				title: '登录',
+				content: '您未登录，是否马上登陆?',
+				success: e => {
+					if (e.confirm) {
+						interceptor();
+					}
+				},
+				fail: e => {
+					console.log(e);
+				}
+			});
+		}
+	},
 	methods: {
 		async join() {
 			let obj = this;

pages/index/index.vue

@@ -6,9 +6,18 @@
 				<swiper-item v-for="item in carouselList" :key="item.id"><image :src="item.pic"></image></swiper-item>
 			</swiper>
 		</view>
-
+		<view class="bk-box">
+			<view class="box-item" v-for="item in navList" @click="navItemTo(item.cid)">
+				<view class="item-logo">
+					<image :src="item.logo" mode=""></image>
+				</view>
+				<view class="item-tit">
+					{{item.name}}
+				</view>
+			</view>
+		</view>
 		<!-- 分类 -->
-		<view class="cate-section flex">
+		<!-- <view class="cate-section flex">
 			<view class="cate-item flex"  @click="navTo('/pages/applic/love')">
 				<view class="img-wrapper flex">
 					<image src="../../static/icon/icon1.png" mode="" class="img1"></image>
@@ -33,21 +42,6 @@
 				</view>
 				<view class="item-title">志愿者登记</view>
 			</view>
-		</view>
-
-		<!-- 爱心红会 -->
-		<!-- <view class="red-box">
-			<top-title :title="'爱心红会'"></top-title>
-			<view class="red-nav flex">
-				<view class="left-nav" @click="navTo('/pages/donate/donate')"></view>
-				<view class="right-nav flex">
-					<view class="right-top-nav" @click="navTo('/pages/donate/idonate?type=1')"></view>
-					<view class="right-bottom-nav flex">
-						<view class="left-item" @click="navTo('/pages/applic/love')"></view>
-						<view class="right-item" @click="navTo('/pages/applic/science')"></view>
-					</view>
-				</view>
-			</view>
 		</view> -->
 		<!-- 红会科普 -->
 		<view class="science"  @click="navTo('/pages/applic/science')">
@@ -160,7 +154,7 @@
 </template>
 
 <script>
-import { loadIndexs, bannerlist, getListAED, getDistance ,getListMechanism} from '@/api/index.js';
+import { loadIndexs, bannerlist, getListAED, getDistance ,getListMechanism ,getArticleCateList} from '@/api/index.js';
 import { saveUrl, interceptor } from '@/utils/loginUtils.js';
 import { mapState, mapMutations } from 'vuex';
 import { userinfo } from '@/api/user.js';
@@ -177,6 +171,68 @@ export default {
 	},
 	data() {
 		return {
+			navList: [
+				{
+					logo: '../../static/icon/index1.png',
+					name: '党建引领',
+					cid: 3,
+				},
+				{
+					logo: '../../static/icon/index2.png',
+					name: '认识红会',
+					cid: 4,
+				},
+				{
+					logo: '../../static/icon/index3.png',
+					name: '应急救援',
+					cid: 5,
+				},
+				{
+					logo: '../../static/icon/index4.png',
+					name: '应急救护',
+					cid: 6,
+				},
+				{
+					logo: '../../static/icon/index5.png',
+					name: '人道救助',
+					cid: 7,
+				},
+				{
+					logo: '../../static/icon/index6.png',
+					name: '器官捐献',
+					cid: 8,
+				},
+				{
+					logo: '../../static/icon/index7.png',
+					name: '造血干细胞捐献',
+					cid: 9,
+				},
+				{
+					logo: '../../static/icon/index8.png',
+					name: '无偿献血',
+					cid: 10,
+				},
+				{
+					logo: '../../static/icon/index9.png',
+					name: '红十字会员',
+					cid: 11,
+				},
+				{
+					logo: '../../static/icon/index10.png',
+					name: '志愿服务',
+					cid: 12,
+				},
+				{
+					logo: '../../static/icon/index11.png',
+					name: '博爱家园',
+					cid: 13,
+				},
+				{
+					logo: '',
+					name: '',
+					cid: 0,
+				}
+			],
 			carouselList: [], //轮播
 			science: [], //文章列表
 			page: 1,
@@ -239,16 +295,9 @@ export default {
 		}
 	},
 	onLoad() {
-		// uni.showModal({
-		// 	content: '请选择您当前位置',
-		// 	success: res => {
-		// 		if (res.confirm) {
-		// 			this.chooseAddress()
-		// 		}
-		// 	}
-		// })
 		saveUrl();
 		let obj = this;
+		// obj.getNavList()
 		try {
 			let locationAddress;
 			// #ifdef H5
@@ -364,6 +413,21 @@ export default {
 	},
 	methods: {
 		...mapMutations('user', ['setUserInfo']),
+		//获取导航列表
+		navItemTo(cid) {
+			let url = ''
+			if(cid == 0) {
+				return
+			}else if(cid !== 6) {
+				url = '/pages/article/list?cid=' + cid
+			}else {
+				url = '/pages/article/lists?cid=' + cid
+			}
+			uni.navigateTo({
+				url: url
+			})
+			
+		},
 		tocontribution() {
 			uni.navigateTo({
 				// url: "/pages/applic/contribution"
@@ -455,16 +519,6 @@ export default {
 					obj.latitude2 = obj.marker[i].latitude;
 					obj.longitude2 = obj.marker[i].longitude;
 					obj.address = obj.marker[i].address;
-					// uni.showModal({
-					// 	title: '坐标',
-					// 	content: JSON.stringify(obj.marker[i]),
-					// 	success() {
-					// 		uni.showModal({
-					// 			title: '成功',
-					// 			content: obj.marker[i].latitude
-					// 		})
-					// 	}
-					// })
 				}
 			}
 		},
@@ -993,4 +1047,40 @@ a {
 		height: 192rpx;
 	}
 }
+.bk-box {
+	width: 750rpx;
+	height: 779rpx;
+	background-color: #eee;
+	margin-top: 10rpx;
+	// background-color: red;
+	display: flex;
+	justify-content: flex-start;
+	flex-wrap: wrap;
+	.box-item {
+		width: 33%;
+		height: 194rpx;
+		margin: 1rpx;
+		display: flex;
+		background-color: #fff;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		.item-logo {
+			width: 93rpx;
+			height: 93rpx;
+			
+			margin-bottom: 8rpx;
+			image {
+				
+				width: 100%;
+				height: 100%;
+				background-color: #fff;
+				
+			}
+		}
+		.item-tit {
+			font-size: 30rpx;
+		}
+	}
+}
 </style>