minnan-tv/pages/index/index.vue

<template>
	<view class="box">
		<!-- 绑定按钮 -->
		 <view class="bindBtn" @click="bindBtn"></view>
		<!-- tab切换 -->
		<view class="tabBox" v-if="isBind">
			<view class="tabItem" :class="{'activeTab' : activeTab == 0}" @click="tabClick('0')" style="margin-right: 20px;" tabindex="0">
				{{ fyname }}
			</view>
			<view class="tabItem" :class="{'activeTab' : activeTab == 1}" @click="tabClick('1')" tabindex="0">
				闽南文化
			</view>
		</view>

				
		<view class="" style="height: 100%; position: relative">
			<!-- 具体非遗项目 -->
			<u-swiper @change="change" radius="0" :circular="true" :list="swiperList" showTitle keyName="image" interval="5000" height="100%" v-show="activeTab == 0"></u-swiper>
			<!-- 闽南文化 -->
			<u-swiper @change="change" radius="0" :circular="true" :list="swiperList1" keyName="image" interval="5000" height="100%" v-show="activeTab == 1"></u-swiper>


		</view>

		<!-- <view class="tilte img_logo"> -->
			<image
				src="../../static/img/web_title.png"
				mode="aspectFit"
				class="img_logo"
			/>
		<!-- </view> -->
		<!-- 菜单 -->
		 <!-- 具体非遗项目菜单 -->
		<view class="fy_box_menu" v-if="activeTab == 0">
			<!-- @click="bgBtn" -->
			<!-- <view class="menu_poimg">
				<image class="img" src="https://huli-app.wenlvti.net/app_static/minnanhun/image/img_@2x.png"></image>
			</view> -->

			<view @click="fyMenuBtn(item.page)" class="menu_item" v-for="(item, index) in list" :key="item.name" :style="{'backgroundImage':`url(${item.logo})`}" tabindex="0">
				<!-- <view class="menu_img">
					<image class="img" :src="item.img"></image>
				</view> -->
				<view class="menu_tit">
					{{ item.title }}
				</view>
				<!-- <view class="" style="color: #de807b; font-size: 10px; position: absolute; top: 58%; left: 5%">
					{{ item.name }}
				</view> -->
			</view>
		</view>

		 <!-- 闽南文化菜单 -->
		<view class="box_menu" v-if="activeTab == 1">
			<!-- @click="bgBtn" -->
			<!-- <view class="menu_poimg">
				<image class="img" src="https://huli-app.wenlvti.net/app_static/minnanhun/image/img_@2x.png"></image>
			</view> -->

			<view @click="menuBtn(index)" class="menu_item" v-for="(item, index) in list1" :key="item.name" :style="{'backgroundImage':`url(${item.logo})`}" tabindex="0">
				<!-- <view class="menu_img">
					<image class="img" :src="item.img"></image>
				</view> -->
				<view class="menu_tit">
					{{ item.title }}
				</view>
				<!-- <view class="" style="color: #de807b; font-size: 10px; position: absolute; top: 58%; left: 5%">
					{{ item.name }}
				</view> -->
			</view>
		</view>

		<!-- 弹出输入框，有用户名和机器码两个输入框 -->
		<uni-popup ref="inputPopup" type="dialog">
      <view class="popup-content">
				<view class="popup-container">
					<view class="popup-title">绑定机器码</view>

					<input class="popup-input" v-model="username" placeholder="请输入用户名" />
					<input class="popup-input" v-model="device_code" placeholder="请输入机器码" />

					<view class="popup-actions">
						<view class="action-btn cancel" @click="closePopup" tabindex="0">取消</view>
						<view class="action-btn confirm" @click="confirmInput" tabindex="0">确定</view>
					</view>
				</view>
      </view>
    </uni-popup>

		<view class="logout" @click="logout"></view>
	</view>
</template>

<script>

let that;
export default {
	data() {
		return {
			isBind: false, // 是否绑定
			fyname:'非遗项目',
			username:'',
			device_code:'',
			swiperId: 0,
			music: true,
			// 创建音频上下文
			scrollHeight: '',
			innerAudioContext: uni.createInnerAudioContext(),
			cityList: [],
			// 非遗项目轮播图
			swiperList: [
				{
					image: '/static/img/swiper1.jpg',
					title: ''
				},
			
			],
			// 闽南文化轮播图
			swiperList1: [
				{
					image: '/static/img/swiper1.jpg',
					title: ''
				},
				{
					image: '/static/img/swiper2.jpg',
					title: ''
				},
				
			],
			// swiperList:[
			// 	{
			// 		image: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/tv44.jpg',
			// 		title: '陈元光(657—711年)，字廷炬，号龙湖。唐朝光州固始县人（今河南省固始县人）。漳州首任刺史。他是闽台地区重要的民间信仰之一，被奉为开漳圣王。号称“蛮荒”之地的闽南，经济文化得到了迅速发展。 陈元光成为促进中原文化与闽越文化融合的奠基者。'
			// 	},
			// ],
			list: [
				
			],
			// #ifdef H5
			list1:[
				{
					title: '保护概况',
					logo: 'static/img/index/1.png',
				},
				{
					title: '闽南精神',
					logo: 'static/img/index/2.png',
				},
				{
					title: '古早话仙',
					logo: 'static/img/index/3.png',
				},

				{
					title: '民俗风情',
					logo: 'static/img/index/4.png',
				},
				{
					title: '保护传承',
					logo: 'static/img/index/5.png',
				},
				{
					title: '闽南时尚',
					logo: 'static/img/index/6.png',
				},
				{
					title: '文化之旅',
					logo: 'static/img/index/7.png',
				},
				{
					title: '厝边记忆',
					logo: 'static/img/index/8.png',
				}
			],
			// #endif
			// #ifdef APP
			list1:[
				{
					title: '保护概况',
					logo: '/static/img/index/1.png',
				},
				{
					title: '闽南精神',
					logo: '/static/img/index/2.png',
				},
				{
					title: '古早话仙',
					logo: '/static/img/index/3.png',
				},

				{
					title: '民俗风情',
					logo: '/static/img/index/4.png',
				},
				{
					title: '保护传承',
					logo: '/static/img/index/5.png',
				},
				{
					title: '闽南时尚',
					logo: '/static/img/index/6.png',
				},
				{
					title: '文化之旅',
					logo: '/static/img/index/7.png',
				},
				{
					title: '厝边记忆',
					logo: '/static/img/index/8.png',
				}
			],
			// #endif
			
			activeTab: 1

		};
	},
	onLoad(o) {
		// this.music = o.music;
		that = this;
		this.playMusic();
		if(uni.getStorageSync('device_code')){
			this.isBind = true;
			this.device_code = uni.getStorageSync('device_code')
			this.getTerminalConfig()
		}else{
			this.isBind = false;
		}
	},

	methods: {
		bindBtn() {
			console.log('触发点击');
			
			// 弹出绑定框
			this.$refs.inputPopup.open()
		},
		// 确认机器码
		confirmInput(){
			this.$api.bindMachineCode({
				username:this.username,
				device_code:this.device_code
			},
			function(res){
				console.log(res);
				that.$u.toast(res.msg)
				setTimeout(()=>{
					if(res.code === 0){
						that.isBind = false;
					}else{
						that.isBind = true;
						uni.setStorageSync('device_code',that.device_code)
						that.getTerminalConfig()
					}
					that.closePopup()

				},1000)
				
			})
		},
		closePopup() {
      this.$refs.inputPopup.close();
			this.username = ''
			this.device_code = ''
    },
		// 获取终端按钮配置
		getTerminalConfig() {
			this.$api.getTerminalConfig({
				device_code: this.device_code
			}, function(res) {
				console.log(res);
				that.fyname = res.data.name || '非遗项目';
				that.swiperList = res.data.images;
				that.list = res.data.page_json
			});
		},

		tabClick(index) {
			this.activeTab = index;
			this.swiperId = 0
			// this.$refs.mySwiper.scrollTo(0, 0, 0);
		},
		menuBtn(i) {
			uni.redirectTo({
				url: '/pages/index2/index2?id=' + i
			});
			this.innerAudioContext.pause();
		},
		fyMenuBtn(page){
			uni.navigateTo({
				url: page
			})
		},
		change(i) {
			this.swiperId = i.current;
		},
		// 了解详情
		lianjieBtn() {
			uni.redirectTo({
				url: '/pages/index/index_xq?id=' + this.swiperId
			});
			this.innerAudioContext.pause();
		},
		// 退出
		logout(){
			uni.removeStorageSync('device_code')
			// 刷新页面
			this.isBind = false
			this.activeTab = 1
			// window.location.reload();
		},
		// myBtn() {
		// 	uni.redirectTo({
		// 		url: '/pages/index/guanYu'
		// 	});
		// 	this.innerAudioContext.pause();
		// },
		playMusic() {
			if (this.music) {
				// 设置音频源
				this.innerAudioContext.src = 'https://huli-app.wenlvti.net/app_static/minnanhun/image/audio2.mp3';
				// 设置为自动播放
				this.innerAudioContext.autoplay = true;
				// 其他属性设置（可选）
				this.innerAudioContext.loop = true; // 是否循环播放，默认为false
			} else {
				// this.innerAudioContext.pause();
			}
		}
	}
};
</script>

<style>
/* @keyframes switch-bg {
	30% {
		background-image: url('https://huli-app.wenlvti.net/app_static/minnanhun/image/bg1.jpg');
	}

	70% {
		background-image: url('https://huli-app.wenlvti.net/app_static/minnanhun/image/bg3.jpg');
	}
	90% {
		background-image: url('https://huli-app.wenlvti.net/app_static/minnanhun/image/bg4.jpg');
	}
	100% {
		background-image: url('https://huli-app.wenlvti.net/app_static/minnanhun/image/ind.png');
	}
} */

.box {
	width: 100%;
	height: 100vh;
	/* 	animation-name: switch-bg;
	animation-duration: 20s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-delay: 5s; */
	/* background-image: url('https://huli-app.wenlvti.net/app_static/minnanhun/image/ind.png'); */
	box-sizing: border-box;
	/* background-size: 100% 100%; */
	/* background-attachment: fixed; */

	margin: 0;
}

:deep(.u-swiper__wrapper__item__wrapper__title) {
	width: 30% !important;
	height: 20% !important;
	position: absolute;
	bottom: 42% !important;
	left: 0 !important;
	font-size: 10px !important;
	font-family: MiSans, MiSans;
	color: #dcd9d7;
	letter-spacing: 0.1em;
	background-color: transparent !important;
}
.animate-box {
	width: 100%;
	height: 65%;
	overflow: hidden;
}

.jieshao {
	animation: 40s wordsLoop linear infinite normal;
}
@keyframes wordsLoop {
	0% {
		transform: translateY(0);
		-webkit-transform: translateY(0);
	}

	100% {
		transform: translateY(-100%);
		-webkit-transform: translateY(-100%);
	}
}

@-webkit-keyframes wordsLoop {
	0% {
		transform: translateY(0);
		-webkit-transform: translateY(0);
	}

	100% {
		transform: translateY(-100%);
		-webkit-transform: translateY(-100%);
	}
}

.img {
	width: 100%;
	height: 100%;
}
.img_logo {
	/* display: flex; */
	/* background: url('/static/img/img_logo.png') no-repeat; */
	/* background-size: 100% 100%; */
	position: relative;
	z-index: 999;
	text-shadow: 1px 1px 2px black;
	width: 35%;
	aspect-ratio: 14/5;
	position: absolute;
	top: 0;
	left: 5%;
	/* left: 90%; */
}
.mn_tit {
	width: 80%;
	height: 10%;

	font-size: 14px;
}
.boc_tit {
	position: relative;
	z-index: 999;
	width: 25%;
	height: 8%;
	margin: -46% 0 0 3%;
}
.boc_tit1 {
	position: absolute;
	left: -11%;
	width: 80%;
	height: 100%;
}
.boc_tit2 {
	font-size: 12px;
	font-family: MiSans, MiSans;
	color: #dcd9d7;
	margin-top: 3%;
	letter-spacing: 0.1em;
}
.box_menu {
	position: absolute;
	z-index: 999;
	display: flex;
	flex-wrap: wrap;
	width: 90%;
	height: 34%;
	bottom: 10%;
	left: 9%;
}
.fy_box_menu{
	position: absolute;
	z-index: 999;
	display: flex;
	flex-wrap: wrap;
	width: 90%;
	height: 34%;
	bottom: 0%;
	left: 9%;
}
.menu_item {
	position: relative;
	width: 22%;
	height: 45%;
	margin: 0 0 0 1%;
	cursor: pointer;
	border-radius: 10rpx;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.menu_img {
	width: 100%;
	height: 100%;
}
.menu_tit {
	/* font-size: 88rpx; */
	font-family: nzgrRuyinZouZhangKai, nzgrRuyinZouZhangKai;
	font-weight: 500;
	font-size: clamp(8px, 1.6vw, 50px);
	line-height: 76px;
	background: linear-gradient(180deg, #d1392d 0%, rgba(209, 57, 45, 0.89) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-left: 14%;

}
/* .menu_poimg {
	position: absolute;
	top: -8%;
	left: 8%;
	width: 13%;
	height: 53%;
	z-index: 1;
} */
.liaoJie {
	position: absolute;
	bottom: -245%;

	left: 1%;
	width: 25%;
	height: 45%;
	border-radius: 40rpx;
	text-align: center;
	line-height: 20px;
	color: #ffffff;
	background: rgba(255, 255, 255, 0.2);
	font-size: 12px;
}
.mn_js {
	width: 25%;
	height: 44%;
	border-radius: 2%;
	font-size: 10px;
	line-height: 18px;
	border: 1px #ffffff solid;
	color: #dcd9d7;
	position: absolute;
	top: 15%;
	left: 67%;
	padding: 1%;
	background-color: rgba(0, 0, 0, 0.2);
	box-sizing: border-box;
	overflow: hidden;
}
.guanyu {
	width: 80%;
	height: 10%;
	position: absolute;
	top: 75%;
	left: 10%;
	line-height: 16px;
	padding-top: 1%;
	box-sizing: border-box;
	text-align: center;
	letter-spacing: 0.2em;
	border-radius: 15px;
	background-color: rgba(0, 0, 0, 0.5);
}

.tabBox {
	display: flex;	
	justify-content: space-around;
	align-items: center;
	position: absolute;
	top: 10%;
	z-index: 99999;
	color: #aa734d;
	left: 50%;
	transform: translateX(-50%); 
}
.tabItem {
	text-align: center;	
	padding: 10px 20px;
	background-color: #cdc0b6;
	border-radius: 25px;
	/* 阴影立体 */
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.activeTab {
	color: #fff;
	background-color: #aa734d;
}
.bindBtn{
	top: 0;
	right: 0;
	position: absolute;
	z-index: 99999;
	width: 5%;
	height: 5%;
}

/* 弹窗 */
/* 打开按钮 */
.open-btn {
  padding: 10px 16px;
  background-color: #007aff;
  color: white;
  text-align: center;
  border-radius: 10px;
  width: 120px;
  margin: 20px auto;
}

/* 弹窗容器 */
.popup-container {
  width: 280px;
  padding: 20px 18px;
  background-color: #ffffff;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/* 标题 */
.popup-title {
  font-size: 17px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
  text-align: center;
}

/* 输入框 */
.popup-input {
  width: 80%;
  margin-bottom: 12px;
  padding: 10px 20px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  outline: none;
  transition: border-color 0.3s;
}
.popup-input:focus {
  border-color: #007aff;
}

/* 自定义按钮容器 */
.popup-actions {
  display: flex;
  justify-content: space-around;
  margin-top: 16px;
	width: 90%;
}

/* 自定义按钮样式 */
.action-btn {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.3s;
  user-select: none;
}

/* 取消按钮 */
.action-btn.cancel {
  background-color: #f1f1f1;
  color: #555;
  margin-right: 10px;
}
.action-btn.cancel:active {
  background-color: #e2e2e2;
}

/* 确定按钮 */
.action-btn.confirm {
  background-color: #007aff;
  color: white;
}
.action-btn.confirm:active {
  background-color: #005ec6;
}

/* 退出按钮 */
.logout{
	width: 5%;
	height: 10%;
	position: absolute;
	bottom: 0;
	right: 0;
}
</style>