cnq/pages/mourn/index.vue

<template>
	<view class="content">
		<view class="top-bg">
			<image src="../../static/img/mourn-bg.png" mode="widthFix"></image>
		</view>
		<view class="list-wrap">
			<view class="list flex">
				<view class="list-tit">
					器官（遗体、器官）捐献网上缅怀
				</view>
				<view class="search-wrap">
					<input type="text" v-model="keyword" placeholder="请输入捐赠者" placeholder-class="search-placeholder" />
					<image src="../../static/icon/search.png" mode="" @click="search()"></image>
					<!-- <image src="../../static/icon/blackf.png" mode=""></image> -->
				</view>
				<view class="mourn-mun">
					<image src="../../static/icon/blackf.png" mode="widthFix"></image>
					悼念总数：{{mournAll}}
				</view>
				<scroll-view scroll-y="true" class="scroll-wrap flex" :style="{'height': height}" @scrolltolower="getMournList">
					<view class="list-item" v-for="item in list">
						<view class="item-img">
							<image :src="'https://cnqadmin.igxys.com' + item.image" mode=""></image>
							<image src="../../static/img/huak.png" mode=""></image>
						</view>
						<view class="item-name clamp">
							{{item.name}}
						</view>
						<view class="item-btn" @click="navto('/pages/mourn/detail?id=' + item.id)">
							在线悼念
						</view>
					</view>
					<uni-load-more :status="loadingType"></uni-load-more>
				</scroll-view>

			</view>

		</view>
	</view>
</template>

<script>
	import { weixindata } from '@/utils/wxAuthorized.js';
	import {
		getMournList,
		getMournNum
	} from '@/api/mourn.js'
	export default {
		data() {
			return {
				height: '',
				mournAll: 0,
				list: [],
				keyword: '',
				page: 1,
				limit: 20,
				loadingType: 'more'
			}
		},
		onShow() {
			// this.playMusic()
			this.getMournList()
			this.getAllNum()
		},
		onLoad() {
			let obj = this
			if (this.$store.state.isPlay) {} else {
				if (this.$store.state.isAllow) {
					uni.showModal({
						title: '温馨提醒',
						content:'是否播放背景音乐？',
						cancelText:'否',
						confirmText:'是',
						success: function(res) {
							if (res.confirm) {
								obj.$api.playMusic(true)
							} else if (res.cancel) {
								obj.$store.state.isAllow = false
							}
						}
					})
				}
			}
			this.IndexShare()
		},
		onReady(res) {
			var obj = this;
			uni.getSystemInfo({
				success: resu => {
					const query = uni.createSelectorQuery();
					query.select('.scroll-wrap').boundingClientRect();
					query.exec(function(res) {
						obj.height = resu.windowHeight - res[0].top - 210 + 'px';
					});
				},
				fail: res => {}
			});
		},
		methods: {
			// 页面跳转
			navto(url) {
				console.log(this.$store.state.isPlay,'this.$store.state.isPlay')
				if(!this.$store.state.isPlay) {
					console.log('ddd')
					this.$api.playMusic(true)
				}
				uni.navigateTo({
					url: url
				})
			},
			// 关键字查询
			search() {
				let obj = this
				obj.list = []
				obj.page = 1
				obj.loadingType = 'more'
				console.log(obj.keyword)
				obj.getMournList()
			},
			// 获取捐赠人列表
			getMournList() {
				let obj = this
				if(obj.loadingType == 'loading' || obj.loadingType == 'noMore') {
					return
				}
				obj.loadingType = 'loading'
				getMournList({
					page: obj.page,
					search: obj.keyword,
					rows: obj.limit
				}).then(res => {
					console.log(res)
					obj.list = obj.list.concat(res.data.data)
					// obj.total = res.data.total
					obj.page++
					if(res.data.data.length == obj.limit) {
						obj.loadingType = 'more'
					}else {
						obj.loadingType = 'noMore'
					}
				})
			},
			// 获取全部数据
			getAllNum() {
				getMournNum().then(res => {
					console.log(res)
					this.mournAll = res.data
				})
			},
			IndexShare() {
				let obj = this;
				let item = {
					link: obj.$store.state.baseURL + '/index/#/pages/mourn/index', // 分享链接
					imgUrl: obj.$store.state.baseURL +'/index/static/img/002.png',
					desc: '生命有限/大爱无限/器官(遗体、组织)捐献/让生命在爱中传递......',
					title: '在线悼念捐献者',
					success: console.log('分享加载成功')
				};
				console.log('分享加', item);
				weixindata(item);
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		min-height: 100%;
		background-color:#d4e2f4;
	}

	.top-bg {
		width: 750rpx;

		image {
			width: 750rpx;
		}
	}

	.list-wrap {
		position: relative;
		width: 710rpx;
		margin: auto;
		margin-top: -300rpx;
		padding: 5rpx;
		background-color: #fff;

		.list {
			width: 100%;
			// min-height: 850rpx;
			border: 5rpx solid #006061;
			position: relative;
			padding-top: 124rpx;
			
			.scroll-wrap {
				flex-wrap: wrap;
				// align-items: flex-start;
				align-content: flex-start;
			}
			.list-tit {
				// width: 314rpx;
				position: absolute;
				top: 0;
				display: inline-block;
				padding: 0 15rpx;
				height: 54rpx;
				line-height: 54rpx;
				font-size: 20rpx;
				background-color: #006061;
				color: #fff;
			}

			.search-wrap {
				width: 200rpx;
				height: 32rpx;
				// background-color: red;
				position: absolute;
				right: 10rpx;
				top: 16rpx;
				font-size: 20rpx;

				.search-placeholder {
					font-size: 20rpx;
				}

				input {
					display: inline-block;
					border-radius: 10rpx;
					width: 200rpx;
					height: 32rpx;
					border: 1rpx solid #999;
					padding: 0 10rpx;
				}

				image {
					display: block;
					position: absolute;
					width: 25rpx;
					height: 25rpx;
					right: 10rpx;
					top: 10rpx;
				}
			}

			.mourn-mun {
				position: absolute;
				top: 70rpx;
				text-align: right;
				display: inline-block;
				flex-wrap: nowrap;
				align-items: center;
				right: 10rpx;

				image {
					width: 26rpx;
					margin-right: 5rpx;
				}
			}

			.list-item {
				height: 245rpx;
				width: 25%;
				display: inline-block;
				// text-align: center;
				.item-img {
					width: 121rpx;
					height: 145rpx;
					margin: auto;
					position: relative;

					image {
						width: 100%;
						height: 100%;
						position: absolute;
					}
				}

				.item-name {
					text-align: center;
					color: #000;
					font-size: 22rpx;
					font-weight: bold;
					padding-top: 20rpx;
					padding-bottom: 10rpx;
				}

				.item-btn {
					width: 92rpx;
					height: 30rpx;
					background-color: #006061;
					margin: auto;
					text-align: center;
					color: #fff;
					border-radius: 10rpx;
					font-size: 17rpx;
					line-height: 30rpx;
				}
			}
		}

	}
</style>