cnq/pages/mourn/detail.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">
					{{peo.name}}简介
				</view>
				<!-- 				<view class="search-wrap">
					<input type="text" value="" placeholder="请输入捐赠者" placeholder-class="search-placeholder" />
					<image src="../../static/icon/search.png" mode=""></image>
				</view> -->
				<view class="mourn-mun">
					<image src="../../static/icon/blackf.png" mode="widthFix"></image>
					悼念总数：{{mournNum}}
				</view>
				<!-- 捐赠人信息 start -->
				<view class="user-info">
					<view class="user-img">
						<image :src="'https://cnqadmin.igxys.com' + peo.image" mode=""></image>
						<image src="../../static/img/huak.png" alt="" />
					</view>
					<view class="user-base">
						<view class="base-item">
							<view class="base-item-name">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</view>
							<view class="base-val">&nbsp;&nbsp;{{peo.name || ''}}</view>
						</view>
						<view class="base-item">
							<view class="base-item-name">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别</view>
							<view class="base-val">&nbsp;&nbsp;{{peo.gender_text}}</view>
						</view>
						<view class="base-item">
							<view class="base-item-name">享&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年</view>
							<view class="base-val">&nbsp;&nbsp;{{peo.age == 0 ? '暂无': peo.age}}</view>
						</view>
						<view class="base-item">
							<view class="base-item-name">籍&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;贯</view>
							<view class="base-val">&nbsp;&nbsp;{{peo.book}}</view>
						</view>
						<view class="base-item">
							<view class="base-item-name">捐献项目</view>
							<view class="base-val">&nbsp;&nbsp;{{peo.project}}</view>
						</view>
						<view class="base-item">
							<view class="base-item-name">捐献日期</view>
							<view class="base-val">&nbsp;&nbsp;{{peo.time_text.split(' ')[0] }}</view>
						</view>
					</view>
				</view>
				<!-- 捐赠人信息 end -->
				<!-- 悼念行为 start -->
				<view class="online">
					<view class="" style="height: 50rpx;">

					</view>
					<view class="online-tit">
						<image src="../../static/img/online-tit.png" alt="" />
						<view class="tit-tit">在线悼念</view>
					</view>
					<view class="online-tb">
						<view class="tb-item">
							<image src="../../static/img/online00.png" alt="" class="tb-item-logo"  @click="mournGive(1)"/>
							<view class="tb-item-tit hand" @click="mournGive(1)">献花：{{ peo.flower }}</view>
						</view>
						<view class="tb-item">
							<image src="../../static/img/online01.png" alt="" class="tb-item-logo" @click="mournGive(2)"/>
							<view class="tb-item-tit hand" @click="mournGive(2)">点烛：{{ peo.candle }}</view>
						</view>
						<view class="tb-item">
							<image src="../../static/img/online02.png" alt="" class="tb-item-logo" @click="mournGive(3)"/>
							<view class="tb-item-tit hand" @click="mournGive(3)">上香：{{ peo.scented }}</view>
						</view>
						<view class="tb-item">
							<image src="../../static/img/online03.png" alt="" class="tb-item-logo"  @click="mournGive(4)"/>
							<view class="tb-item-tit hand" @click="mournGive(4)">祈祷：{{ peo.pray }}</view>
						</view>
					</view>
					<view class="btm-img">
						<image src="../../static/img/mourn-btm.png" mode=""></image>
					</view>
				</view>
				<!-- 悼念行为 end -->
			</view>

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

<script>
	import { weixindata } from '@/utils/wxAuthorized.js';
	import {
		getMournDetail,
		mournGive
	} from '@/api/mourn.js'
	export default {
		data() {
			return {
				mournNum: 0,
				peo: {},
				id: 0,
				loaded: false
			}
		},
		filters: {
			showTime(val) {
				let str = ''
				if (val) {
					str = val.split(' ')[0]
				}
				return str
			}
		},
		onShow() {
			this.getMournDetail()
		},
		onLoad(opt) {
			let obj = this
			obj.id = opt.id
			if (this.$store.state.isPlay) {} else {
				if (this.$store.state.isAllow) {
					uni.showModal({
						title: '温馨提醒',
						cancelText: '否',
						confirmText: '是',
						content: '是否播放背景音乐？',
						success: function(res) {
							if (res.confirm) {
								obj.$api.playMusic(true)
							} else if (res.cancel) {
								obj.$store.state.isAllow = false
							}
						}
					})
				}
			}
			this.IndexShare()
		},
		methods: {
			navto(url) {
				//判断是否播放音乐
				// 
				uni.navigateTo({
					url: url
				})
			},
			//个人祭拜
			mournGive(id) {
				let obj = this
				if (obj.loaded) {
					obj.$api.msg('请勿频繁操作')
				}
				obj.loaded = true
				mournGive({
					id: obj.id,
					type: id
				}).then(res => {
					if (id == 1) {
						obj.peo.flower++
					} else if (id == 2) {
						obj.peo.candle++
					} else if (id == 3) {
						obj.peo.scented++
					} else if (id == 4) {
						obj.peo.pray++
					}
					obj.mournNum++
					obj.loaded = false
				})
			},
			// 获取个人悼念情况
			getMournDetail() {
				let obj = this
				getMournDetail({
					id: obj.id,
				}).then((res) => {
					obj.peo = res.data.data
					obj.mournNum = res.data.count
				});
			},
			IndexShare() {
				let obj = this;
				let item = {
					link: obj.$store.state.baseURL + '/index/#/pages/mourn/detail?id=' + obj.id, // 分享链接
					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: #e0e3ea;
	}

	.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%;
			height: 752rpx;
			border: 5rpx solid #006061;
			position: relative;
			padding-top: 124rpx;
			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: 10rpx;
				text-align: right;
				display: inline-block;
				flex-wrap: nowrap;
				align-items: center;
				right: 10rpx;
				font-weight: bold;

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

			.list-item {
				height: 245rpx;
				width: 25%;

				// 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;
				}
			}
		}

	}

	.user-info {
		// padding: 101rpx 0 96rpx 205rpx;
		padding: 0 22rpx 0 25rpx;
		width: 100%;
		display: flex;

		.user-img {
			width: 121rpx;
			height: 145rpx;
			position: relative;

			image {
				width: 121rpx;
				height: 145rpx;
				position: absolute;
			}

			// position;
		}

		.user-base {
			margin-left: 40rpx;
			width: 546rpx;
			display: flex;
			//   flex-direction: ;
			flex-wrap: wrap;
			align-content: center;

			.base-item {
				width: 50%;
				flex-shrink: 0;
				// flex-grow: 0;
				border-bottom: 1px dashed rgba(23, 18, 21, 0.21);
				display: flex;
				line-height: 50rpx;
				height: 50rpx;
				font-size: 19rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #0b1c29;

				// line-height: 31rpx;
				.base-item-name {
					&::after {
						content: ":";
					}
				}
				.base-val {
					padding-left: 10rpx;
				}
			}
		}
	}

	.online {
		width: 100%;

		.online-tit {
			position: relative;
			width: 640rpx;
			height: 70rpx;
			margin: auto;

			image {
				width: 640rpx;
				height: 70rpx;
			}

			.tit-tit {
				width: 640rpx;
				height: 70rpx;
				line-height: 65rpx;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				text-align: center;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #ffffff;
			}
		}

		.online-tb {
			width: 645rpx;
			height: 180rpx;
			// margin: auto;
			margin: 47rpx auto 0;
			display: flex;
			justify-content: space-between;

			.tb-item {
				width: 132rpx;
				height: 180rpx;
				position: relative;

				.tb-item-logo {
					width: 132rpx;
					height: 180rpx;
				}

				.tb-item-tit {
					font-size: 16rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #ffffff;
					line-height: 27rpx;
					line-height: 40rpx;
					position: absolute;
					bottom: 0;
					text-align: center;
					width: 132rpx;
				}
			}
		}
	}
	.btm-img {
		width: 589rpx;
		height: 30rpx;
		margin: auto;
		margin-top: 45rpx;
		image {
			width: 589rpx;
			height: 30rpx;
		}
	}
</style>