PixelAI-mobile/pages/pc_web/index/index.vue

<template>
	<view>
		<el-container class="pc-container">
		 <view class="pc-header">
			<Header ref="header" :currentPage="refs[current]" :isLogin="isLogin" @changePlat="changePlat" />
		  </view>
		  <view style="width: 100%;height: 100rpx;"></view>
		  <view class="pc-main">
		  	<component ref="pageRef" @toast="showToast" @changeService="changeService" :sid="serviceId" :is="refs[current]" />
		  </view>
		</el-container>
		<Movable textColor="#94d500" @toast="showToast" v-if="isLogin !== ''"/>
		<Loading :show="loading" />
		<u-back-top class="back-top" :scrollTop="scrollTop" zIndex="100" :iconStyle="{ color: '#fff', fontSize: '50rpx' }"
		:customStyle="{background: 'linear-gradient(180deg, #96fe11 0%, #f0fdbf 100%)',
		filter: 'opacity(0.96)', width: '120rpx', height: '120rpx'}" />
		<!-- <view class="all-diabled" :style="{backgroundImage: `url(${fileUrl+pcBackground})`}">
			<image class="all-sleep" :src="fileUrl+sleep"></image>
			<view class="all-content">
				PC端开发中，请移步移动端复制并打开以下网址
			</view>
			<text @click="copyUrl">{{ ip }}pixel/#/pages/mobile_web/index/index</text>
		</view> -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import Header from './components/header.vue';
import Home from '@/pages/pc_web/home/home.vue';
import Workshops from '@/pages/pc_web/workshops/workshops.vue';
import Work from '@/pages/pc_web/work/work.vue';
import Movable from './components/movable.vue';
import configService from '@/common/config.service.js';
import { tools } from '@/utils/utils.js';
export default {
	components:{
		Header, Home, Workshops, Work, Movable
	},
	data(){
		return{
			// 基础路径
			ip: configService.ip,
			fileUrl: configService.fileUrl + 'pixel/pc/',
			// 当前页码下标
			current: uni.getStorageSync('pc_current')||0,
			// refs组件列表
			refs: ['home','workshops','work'],
			// 加载
			loading: false,
			// 滚动顶部
			scrollTop: 0,
			// 禁用pc端的背景图片
			pcBackground: 'pc-background.png',
			// 禁用pc端的缺省图
			sleep: 'sleep.png',
			// 服务id
			serviceId: '',
		}
	},
	computed: {
		// 登录状态
		isLogin(){
			return this.$store.state.vuex_token;
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	onLoad() {
		let that = this;
		// 页面通信——换页工作台
		uni.$on('workshopPage',(fileUrl)=>{
			that.changePlat(1);
			setTimeout(()=>{
				if(that.isLogin){
					that.$refs.pageRef.formData.uploadFile = fileUrl;
					that.$refs.pageRef.formData.fileList = [{url: fileUrl}];
					that.$refs.pageRef.uploadDisabled = true;
				}
			},500);
		});
	},
	methods:{
		// 复制地址
		copyUrl(){
			let that = this;
			tools.methods.uniCopy({
				content: that.ip+'pixel/#/pages/mobile_web/index/index',
				success: (result)=>{
					that.$refs.uToast.show({type: 'success', title: result});
				},
				error: (result)=>{
					that.$refs.uToast.show({type: 'error', title: result});
				}
			});
		},
		// 服务更换
		changeService(id){
			this.serviceId = id;
			this.changePlat(1);
		},
		// 切换主体
		changePlat(current){
			if(this.current === current) return;
			if(current !== 0 && !this.isLogin){
				this.$refs.header.showLogin = true;
				this.$refs.uToast.show({type: 'warning', title: '请先登录！'});
				return;
			}
			uni.setStorageSync('pc_current', current);
			this.current = current;
		},
		// 提示语弹窗
		showToast({type,title,duration = 2000}){
			this.$refs.uToast.show({type: type, title: title,duration: duration});
		}
	}
}
</script>

<style scoped lang="scss">
.pc-container{
	display: flex;
	flex-direction: column;
}
.pc-header{
	width: 100%;
	height: 120rpx;
	z-index: 90;
	box-shadow: 0 5rpx 10rpx 0 #dcdae4;
	position: fixed;
}
.pc-main{
	background-color: #edecf1;
}
.back-top{
	cursor: pointer;
	&:hover{
		box-shadow: 0 0 20rpx #d8fc92;
	}
}
.all-diabled{
	top: 0;
	left: 0;
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background-color: rgba(0,0,0,0.5);
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	font-size: 50rpx;
	.all-sleep{
		margin-top: -300rpx;
		width: 1000rpx;
		height: 1000rpx;
	}
	.all-content{
		margin-bottom: 30rpx;
		color: #efcb89;
	}
	text{
		cursor: pointer;
		background-image: linear-gradient(to right, #f9f1cb 0%, #efcb89 100%);
		background-clip: text;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		&:hover{
			opacity: 0.8;
		}
		&:active{
			opacity: 0.6;
		}
	}
}
</style>