EP15 评分弹出窗

文件路径： E:/homework/uniappv3tswallpaper/pages/preview/preview.vue

<template>
	<view class="preview" @click="changeMask">
		<swiper circular="true">
			<swiper-item v-for="item in 5">
				<view class="swiper-item">
					<image src="../../common/images/preview1.jpg" mode="aspectFill"></image>
				</view>
			</swiper-item>
		</swiper>
	</view>
	<view class="mask" v-show="maskState">
		<view class="goback">
		</view>
		<view class="num">
			3 / 5
		</view>
		<view class="time">
			<uni-dateformat :date="new Date()" format="hh:mm" />
		</view>
		<view class="date">
			<uni-dateformat :date="new Date()" format="MM月dd日" />
		</view>
		<view class="footer">
			<view class="box" @click="open">
				<uni-icons type="info" size="28"></uni-icons>
				<view class="text">
					信息
				</view>
			</view>
			<view class="box" @click="clickScore">
				<uni-icons type="star" size="28"></uni-icons>
				<view class="text">
					评分
				</view>
			</view>
			<view class="box">
				<uni-icons type="download" size="28"></uni-icons>
				<view class="text">
					下载
				</view>
			</view>
		</view>
		<uni-popup ref="infoPopup" type="bottom">
			<view class="infoPopup">
				<view class="popHead">
					<view class="twoSide"> </view>
					<view class="title">
						壁纸信息
					</view>
					<view class="close twoSide" @click="clickInfoClose">
						<uni-icons type="closeempty" size="18" color="#999"></uni-icons>
					</view>
				</view>
				<view class="popContent">
					<scroll-view scroll-y show-scrollbar="false">
						<view class="content">
							<view class="row">
								<view class="label">
									壁纸ID：
								</view>
								<view class="labelContent">
									<text selectable="" class="value">165498642</text>
								</view>
							</view>
							<view class="row">
								<view class="label">
									分类：
								</view>
								<view class="labelContent">
									<text class="value">明星美女</text>
								</view>
							</view>
							<view class="row">
								<view class="label">
									发布者：
								</view>
								<view class="labelContent">
									<text class="value">呱呱呱</text>
								</view>
							</view>
							<view class="row">
								<view class="label">
									评分：
								</view>
								<view class="labelContent rateBox">
									<uni-rate readonly="true" touchable="true" value="3.6" size="16" />
									<text class="value">5分</text>
								</view>
							</view>
							<view class="row">
								<view class="label">
									摘要：
								</view>
								<view class="labelContent">
									<text
										class="value">摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要摘要</text>
								</view>
							</view>
							<view class="row">
								<view class="label">
									标签：
								</view>
								<view class="labelContent tabs" v-for="item in 3">
									<text class="value tab">标签名</text>
								</view>
							</view>
							<view class="copyright">
								建军事基地附件四哦那个佛哦放假哦计算机的佛i就哦i放到i杰佛i明尼苏达解耦i九年级哦i就欧锦好的话念佛哦你发的时间了哦ijoin的方式哦i
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="scorePopup" type="center" :is-mask-click="ture">
			<view class="scorePopup">
				<view class="popHead">
					<view class="title_out">
						<view class="title">
							壁纸信息
						</view>
					</view>
					<view class="close" @click="clickScoreClose">
						<uni-icons type="closeempty" size="18" color="#999"></uni-icons>
					</view>
				</view>
				<view class="popContent">
					<view class="scoreStars">
						<uni-rate v-model="value" @change="scoreStarsChange" :value="scoreNumVal" allow-half="true" />
					</view>
					<view class="scoreNum">
						{{scoreNumVal}} 分
					</view>
				</view>
				<view class="scoreButton">
					<button class="subScore" @click="subScore" :disabled="!scoreNumVal">确认评分</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const maskState = ref(true);
	const infoPopup = ref(null);
	const scorePopup = ref(null);
	const scoreNumVal = ref(0);
	// 打开遮罩层
	const changeMask = () => {
		maskState.value = !maskState.value
	};
	// 打开信息层
	const open = () => {
		infoPopup.value.open()
	}
	// 关闭信息层
	const clickInfoClose = () => {
		infoPopup.value.close()
	}
	// 打开评分
	const clickScore = () => {
		scorePopup.value.open()
	}
	// 关闭评分
	const clickScoreClose = () => {
		scorePopup.value.close()
	}
	// score评分
	const scoreStarsChange = (e) => {
		scoreNumVal.value = e.value
	}
	// 点击确认提交
	const subScore = () => {
		console.log(scoreNumVal.value)
	}
</script>

<style lang="scss" scoped>
	.preview {
		width: 100%;
		height: 100vh;

		swiper {
			width: 100%;
			height: 100%;

			.swiper-item {
				height: 100%;
				width: 100%;

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

	.mask {
		&>view {
			position: absolute;
			left: 0%;
			right: 0%;
			margin: auto;
			width: fit-content;
			color: #fff;
		}

		// position: relative; // 需要的是相对于整个屏幕的绝对位置，所以在这里不设置这个属性
		.num {
			top: 10vh;
			background: rgba(0, 0, 0, 0.3);
			backdrop-filter: blur(10rpx);
			padding: 8rpx 18rpx;
			border-radius: 40rpx;
			font-size: 28rpx;
		}

		.time {
			top: calc(10vh + 160rpx);
			font-size: 140rpx;
			font-weight: 100;
			line-height: 1rem;
			text-shadow: 0 4rpx rgba(0, 0, 0, 0.3);
		}

		.date {
			top: calc(10vh + 280rpx);
			font-size: 34rpx;
			text-shadow: 0 4rpx rgba(0, 0, 0, 0.3);
		}

		.footer {
			bottom: 10vh;
			background: rgba(255, 255, 255, 0.8);
			width: 65vw;
			height: 120rpx;
			border-radius: 120rpx;
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			align-content: center;
			justify-content: space-evenly;
			align-items: center;

			.box {
				display: flex;
				flex-direction: column;
				flex-wrap: nowrap;
				align-content: center;
				justify-content: center;
				align-items: center;
				padding: 2rpx 12rpx;

				.text {
					color: $text-font-color-2;
					font-size: 26rpx;
				}
			}
		}

		.infoPopup {
			background: #fff;
			padding: 30rpx;
			border-radius: 30rpx 30rpx 0 0;
			overflow: hidden;
			color: black;

			.popHead {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				align-content: center;
				justify-content: space-between;
				align-items: center;


				.title {
					color: $text-font-color-2;
					font-size: 26rpx;
				}

				.close {
					// padding: 6rpx;
				}
			}

			.popContent {
				height: 60vh;

				scroll-view {
					height: 100%;

					.content {
						.row {
							display: flex;
							flex-direction: row;
							flex-wrap: nowrap;
							align-content: center;
							align-items: center;
							justify-content: center;
							padding: 16rpx 0;
							font-size: 32rpx;
							line-height: 1.7rem;

							.label {
								width: 25%;
								text-align: right;
								color: $text-font-color-3;
								font-size: 30rpx;
							}

							.labelContent {
								flex: 1;
								width: 0;
							}

							.rateBox {
								display: flex;
								flex-direction: row;
								flex-wrap: nowrap;
								align-content: center;
								justify-content: flex-start;
								align-items: center;

								.value {
									font-size: 26rpx;
									color: $text-font-color-3 ;
									padding-left: 25rpx;
								}
							}

							.tabs {
								display: flex;
								flex-wrap: wrap;

								.tab {
									border: 1px solid $brand-theme-color;
									color: $brand-theme-color;
									font-size: 22rpx;
									padding: 10rpx 30rpx;
									border-radius: 40rpx;
									line-height: 1rem;
									margin: 0 10rpx 10rpx 0;
									width: fit-content;
								}
							}
						}

						.copyright {
							font-size: 22rpx;
							padding: 20rpx;
							background: #f6f6f6;
							color: #666;
							border-radius: 10rpx;
							margin: 20rpx 0;
							line-height: 1.6rem;
							width: 100%;
						}
					}
				}
			}
		}

		.scorePopup {
			width: 70vw;
			height: 25vh;
			background-color: #fff;
			padding: 30rpx;
			border-radius: 30rpx;

			.popHead {
				display: flex;
				flex-wrap: wrap;
				flex-direction: row-reverse;

				.title_out {
					width: 100%;
					height: 0;

					.title {
						color: $text-font-color-2;
						font-size: 26rpx;
						text-align: center;
					}
				}

				.close {
					padding: 0 6rpx;
				}
			}

			.popContent {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				align-content: center;
				justify-content: space-evenly;
				align-items: center;
				padding-top: 70rpx;

				.scoreNum {
					text-align: right;
					width: 100rpx;
					color: #feca43;
				}
			}

			.scoreButton {
				padding: 80rpx 70rpx 0 70rpx;
			}
		}
	}
</style>

注意：
在标签内用布尔值判断条件时，如果直接用 true 和 flase ，需要用 v-bind 或者添加 :(冒号) ，否则会将其判断为字符串。

上一篇中不完美的居中居右同时实现，在这里有了更好的办法。

<view class="popHead">
	<view class="title_out">
		<view class="title">
			壁纸信息
		</view>
	</view>
	<view class="close" @click="clickScoreClose">
		<uni-icons type="closeempty" size="18" color="#999"></uni-icons>
	</view>
</view>

.popHead {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row-reverse;

	.title_out {
		width: 100%;
		height: 0;

		.title {
			color: $text-font-color-2;
			font-size: 26rpx;
			text-align: center;
		}
	}

	.close {
		padding: 0 6rpx;
	}
}