newjzpc/src/views/mourn/Details.vue

<template>
	<div class="bg">
		<div class="base-bg">
			<div class="list-wrap">
				<div class="list">
					<div class="list-tit moren">{{ peo.name }}简介</div>
					<div class="serch-wrapper">
						<div class="search-left">
							<img src="../../assets/img/flower-black.png" alt="" style="width: 26px;height: 18px;" />
							<div class="moren">悼念数： {{mournNum || 0}}</div>
						</div>
					</div>
					<div class="user-info">
						<div class="user-img">
							<img :src="peo.image" alt="" />
						</div>
						<div class="user-base">
							<div class="base-item">
								<div class="base-item-name">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</div>
								<div class="base-val">&nbsp;&nbsp;{{peo.name || ''}}</div>
							</div>
							<div class="base-item">
								<div class="base-item-name">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别</div>
								<div class="base-val">&nbsp;&nbsp;{{peo.gender}}</div>
							</div>
							<div class="base-item">
								<div class="base-item-name">籍&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;贯</div>
								<div class="base-val">&nbsp;&nbsp;{{peo.book}}</div>
							</div>
							<div class="base-item">
								<div class="base-item-name">捐献项目</div>
								<div class="base-val">&nbsp;&nbsp;{{peo.project}}</div>
							</div>
							<div class="base-item" v-if="!peo.fatal">
								<div class="base-item-name">享&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年</div>
								<div class="base-val">&nbsp;&nbsp;{{peo.age}}</div>
							</div>
							<div class="base-item" v-if="peo.fatal">
								<div class="base-item-name">出生日期</div>
								<div class="base-val">&nbsp;&nbsp;{{peo.fatal}}</div>
							</div>
							<div class="base-item">
								<div class="base-item-name">捐献日期</div>
								<div class="base-val">&nbsp;&nbsp;{{peo.time_text | showTime}}</div>
							</div>
						</div>
					</div>
					<div class="online">
						<div class="online-tit">
							<img src="../../assets/img/online-tit.png" alt="" />
							<div class="tit-tit moren">在线悼念</div>
						</div>
						<div class="online-tb">
							<div class="tb-item">
								<img src="../../assets/img/online00.png" alt="" class="tb-item-logo" />
								<div class="tb-item-tit hand" @click="mournGive(1)">献花：{{ peo.flower }}</div>
							</div>
							<div class="tb-item">
								<img src="../../assets/img/online01.png" alt="" class="tb-item-logo" />
								<div class="tb-item-tit hand" @click="mournGive(2)">点烛：{{ peo.candle }}</div>
							</div>
							<div class="tb-item">
								<img src="../../assets/img/online02.png" alt="" class="tb-item-logo" />
								<div class="tb-item-tit hand" @click="mournGive(3)">上香：{{ peo.scented }}</div>
							</div>
							<div class="tb-item">
								<img src="../../assets/img/online03.png" alt="" class="tb-item-logo" />
								<div class="tb-item-tit hand" @click="mournGive(4)">祈祷：{{ peo.pray }}</div>
							</div>
						</div>
					</div>
					<div style="display: flex;justify-content: center;align-items: center;height: 200px;width: 100%;">
						<img src="../../assets/img/blackk.png" alt="" style="width: 137px;height: 36px;" class="hand" @click="goBlack"/>
					</div>
				</div>
			</div>
		</div>

		<!-- <page-bottom :backgroundBg="'#fff'" :textcolor="'#031A2A'"></page-bottom> -->
	</div>
</template>
<script>
	import {
		Message
	} from 'element-ui'
	import PageBottom from "../../components/pageBottom/PageBottom.vue";
	import {
		getMournList,
		getMournDetail,
		mournGive,
		getPeoNum
	} from "../../request/api.js";
	export default {
		data() {
			return {
				list: 10,
				page: 1,
				limit: 20,
				total: 100,
				keyword: "",
				loaded: false,
				peo: {
					name: "",
					hua: 0,
					lazhu: 0,
					xioang: 0,
					qi: 0,

				},
				mournNum: '',
			};
		},
		filters: {
			showTime(val) {
				let str = ''
				if (val) {
					str = val.split(' ')[0]
				}
				return str
			}
		},
		components: {
			PageBottom,
		},
		mounted() {
			this.getMournDetail()
			// this.getPeoNum()
		},
		methods: {
			goBlack() {
				this.$router.back();
			},
			// 获取个人掉念数
			getPeoNum() {
				getPeoNum({
					id: this.$route.query.id
				}).then(res => {
					console.log(res)
					this.mournNum = res.data
				})
			},
			//个人祭拜
			mournGive(id) {
				let obj = this
				if (obj.loaded) {
					return Message.error('请勿频繁操作')
				}
				obj.loaded = true
				mournGive({
					id: this.$route.query.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() {
				// console.log(this.$route.query.id)
				let obj = this
				getMournDetail({
					id: this.$route.query.id,
				}).then((res) => {
					console.log(res);
					obj.peo = res.data.data
					obj.mournNum = res.data.count
				});
			},
			goHome() {
				this.$router.push("/home");
			},
			// 页码改变触发
			currentChange(e) {
				this.page = e;
				// console.log()
				this.list = e;
				this.getList();
			},
			// 获取捐献列表
			getList() {},
			// 在线悼念
			goDaonian() {
				this.$router.push("/mourn/detail?id=10");
			},
		},
		computed: {
			boxHeight() {
				console.log(Math.round(this.list / 4), "Math.round(this.list/4)");
				return Math.round(this.list / 4);
			},
		},
	};
</script>
<style lang="scss" scoped>
	div {
		box-sizing: border-box;
	}

	.bg {
		background: #dbe2ee;
		width: 100%;
		overflow: hidden;
	}

	.base-bg {
		width: 100%;
		height: 100%;
		min-width: 1920px;
		background-image: url('../../assets/img/mourn-bg.png');
		// position: ;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		margin: auto;
	}

	.list-wrap {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		height: 975px;

		width: 1082px;
		// min-height: 1845px;
		// height: auto;
		background: #ffffff;
		margin: auto;
		// margin-top: -508px;
		padding: 18px 13px;

		.list {
			width: 100%;
			// min-height: 1845px;
			padding-bottom: 100px;
			// height: 100%;
			// min-height: 100%;
			height: 937px;
			border: 8px solid #006061;
			position: relative;
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			align-content: flex-start;
			padding-top: 62px;

			.list-tit {
				width: 258px;
				height: 52px;
				line-height: 52px;
				background: #006061;
				text-align: center;
				font-size: 19px;
				font-family: PingFang SC;
				font-weight: bold;
				color: #ffffff;
				position: absolute;
				top: -8px;
				left: -8px;
			}

			.list-item {
				text-align: center;
				width: 203px;
				height: 278px;
				//   margin-bottom: 40px;
				margin: 40px 20px;

				.item-logo {
					width: 203px;
					height: 203px;
					position: relative;

					.logo-pepo {
						width: 160px;
						height: 160px;
						border-radius: 50%;
						position: absolute;
						top: 0;
						left: 0;
						bottom: 0;
						right: 0;
						margin: auto;
					}

					.logo-hq {
						width: 203px;
						height: 203px;
						position: absolute;
						top: 0;
						left: 0;
					}

					// background-image: url(../../assets/img/hq.png);
				}

				.item-name {
					padding: 13px 0;
					font-size: 21px;
					font-family: PingFang SC;
					font-weight: 500;
					color: #071b2a;
				}

				.item-btn {
					width: 97px;
					line-height: 29px;
					background: #006061;
					border-radius: 5px;
					font-size: 15px;
					font-family: PingFang SC;
					font-weight: bold;
					color: #ffffff;
					margin: auto;
				}
			}
		}

		.user-info {
			padding: 101px 0 96px 205px;
			width: 100%;
			display: flex;

			.user-img {
				width: 163px;
				height: 163px;

				img {
					width: 163px;
					height: 163px;
				}
			}

			.user-base {
				margin-left: 40px;
				width: 546px;
				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: 32px;
					height: 32px;
					font-size: 19px;
					font-family: PingFang SC;
					font-weight: 500;
					color: #0b1c29;
					line-height: 31px;

					.base-item-name {
						&::after {
							content: ":";
						}
					}
				}
			}
		}

		.online {
			width: 100%;

			.online-tit {
				position: relative;
				width: 566px;
				height: 70px;
				margin: auto;

				img {
					widows: 566px;
					height: 70px;
				}

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

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

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

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

					.tb-item-tit {
						font-size: 16px;
						font-family: PingFang SC;
						font-weight: 500;
						color: #ffffff;
						line-height: 27px;
						line-height: 40px;
						position: absolute;
						bottom: 0;
						text-align: center;
						width: 132px;
					}
				}
			}
		}
	}

	.serch-wrapper {
		position: absolute;
		top: 0;
		right: 0;
		display: flex;
		height: 33px;
		position: absolute;
		top: 5px;
		right: 10px;

		.search-left {
			display: flex;
			align-items: center;
			height: 33px;
			font-size: 15px;
			font-family: PingFang SC;
			font-weight: bold;
			color: #031a2a;
			margin-right: 10px;
		}
	}

	.page-wrap {
		position: absolute;
		bottom: 30px;
		display: flex;
		width: 100%;
		justify-content: center;
	}

	.top-btn {
		width: 100%;
		min-width: 1800px;
		height: 40px;
		background: rgba($color: #ffff, $alpha: 0.85);
		position: absolute;
		// opacity: 0.85;
		display: flex;
		// justify-content: ;
		align-items: center;
		text-align: center;
		font-size: 13px;
		font-family: PingFang SC;
		font-weight: bold;
		color: #031a2a;

		.top-item {
			width: 50%;

			img {
				width: 15px;
				height: 15px;
				// margin-left: 6px;
			}
		}
	}
</style>