EpicSoul/xqk/chapter6/index.vue

<template>
	<view style="width: 100vw;">
		<swiper class="swiper" :current="currentIndex" :vertical="true" @change="handleSwiperChange">
			<swiper-item v-for="(image, index) in swiperImages" :key="index">
				<view class="swiper-item" :style="{ backgroundImage: `url(${image})` }">
					<template v-if="index === 0">
						<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/img7-1.png" mode="widthFix"
							class="img7-1" @click="$refs.customPopup.open()"></image>
						<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/img7-2.png" mode="widthFix"
							class="img7-2" style="top: 620rpx;" @click="$refs.customPopups.open()"></image>
							
						<view class="bgm-box flex-between">
							<view :class="{'bgm-active': index == bgmIndex}" v-for="(item,index) in bgmList" :key="index" @click="bgmIndex = index">{{item}}</view>
						</view>
						
						<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/img7-btn.png" mode="widthFix"
						 class="img7-btn" @click="confirm"></image>
					</template>
				</view>
			</swiper-item>
		</swiper>
		
		<!-- 输入弹框 -->
		<uni-popup ref="customPopup" type="center">
			<view class="popup-content">
				<textarea v-model="inputValue" class="input-area" placeholder="我的星槎"
					maxlength="20"></textarea>
		
				<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/confirm-btn.png" mode="widthFix" @click="submit" class="confirm-btn"></image>
			</view>
		</uni-popup>
		
		<!-- 输入弹框 -->
		<uni-popup ref="customPopups" type="center">
			<view class="popup-content">
				<textarea v-model="inputValues" class="input-area" placeholder="我的目的地"
					maxlength="20"></textarea>
		
				<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/confirm-btn.png" mode="widthFix" @click="submit" class="confirm-btn"></image>
			</view>
		</uni-popup>

		<NavMenu :nav-index="navIndex" @jump-to-page="handleJumpToPage" />

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

<script>
	import MusicControl from '@/components/MusicControl.vue';
	import NavMenu from '../components/NavMenu.vue';
	export default {
		components: {
			MusicControl,
			NavMenu
		},
		data() {
			return {
				currentIndex: 0,
				navIndex: 5,
				swiperImages: [
					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/img7.png',
				],
				inputValue: '',
				inputValues: '',
				bgmList: [
					'古典',
					'民谣',
					'电子',
					'自然白噪音'
				],
				bgmIndex: null
			}
		},
		methods: {
			handleJumpToPage(idx) {
				this.navIndex = idx
				if(idx == this.swiperImages.length - 1) this.navIndex = idx + 1
			},
			handleSwiperChange(e) {
			    this.currentIndex = e.detail.current;
			},
			submit() {
				this.$refs.customPopup.close()
				this.$refs.customPopups.close()
			},
			getImageUrl(path) {
				if (typeof path === 'object') {
					path = path.url;
				}
				return `https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter6/${path}`;
			},
			confirm() {
				if (!this.inputValue.trim() || !this.inputValues.trim() || this.bgmIndex == null) {
					uni.showToast({
					    title: '请先填写或选择您的日志信息',
					    icon: 'none'
					});
				}else {
					let data = {
						text1: this.inputValue.trim(),
						text2: this.inputValues.trim(),
						imgSrc: this.getImageUrl(`img${this.bgmIndex + 1}s.png`),
						imgTitle: this.bgmList[this.bgmIndex]
					}
					this.gotoPath('/xrcc/chapter7/index?data=' + JSON.stringify(data))
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.swiper {
		width: 100vw;
		height: 100vh;
	}

	.swiper-item {
		width: 100vw;
		height: 100vh;
		background-size: 100% 100%;
		background-color: #000;
		background-repeat: no-repeat;
		position: relative;
		
		.btn-img {
			position: absolute;
			width: 149.8rpx;
			bottom: 290rpx;
			left: 84rpx;
		}
		
		.img7-1, .img7-2 {
			width: 437.67rpx;
			position: absolute;
			left: 0;
			right: 0;
			margin: 0 auto;
			top: 365rpx;
		}
		
		.bgm-box {
			width: 437.67rpx;
			position: absolute;
			left: 0;
			right: 0;
			bottom: 650rpx;
			margin: 0 auto;
			flex-wrap: wrap;
			
			view {
				width: 207.89rpx;
				line-height: 42.77rpx;
				border-radius: 2rpx;
				text-align: center;
				color: #fff;
				font-size: 20rpx;
				border: 1rpx solid #fff;
			}
			view:nth-child(n+3) {
				margin-top: 17rpx;
			}
			
			.bgm-active {
				border-color: #00C48C;
				color: #00C48C;
			}
		}
		
		.img7-btn {
			width: 439.66rpx;
			position: absolute;
			left: 0;
			right: 0;
			bottom: 244rpx;
			margin: 0 auto;
		}
	}

	.swiper-img {
		width: 100vw;
		height: 100vh;
	}
	
	.popup-content {
		width: 85vw;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 40rpx 30rpx;
		box-sizing: border-box;
	
		.input-area {
			width: 100%;
			min-height: 180rpx;
			padding: 20rpx;
			border: 2rpx solid #747c8e;
			border-radius: 8rpx;
			font-size: 28rpx;
			resize: none;
			box-sizing: border-box;
			margin-bottom: 15rpx;
		}
	
		.word-count {
			text-align: right;
			font-size: 24rpx;
			color: #999;
			margin-bottom: 35rpx;
		}
	
		.confirm-btn {
			width: 100%;
		}
	}
</style>