173 lines
4.1 KiB
Vue
173 lines
4.1 KiB
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" @changeService="changeService" :sid="serviceId" :is="refs[current]" />
|
||
</view>
|
||
</el-container>
|
||
<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 configService from '@/common/config.service.js';
|
||
import { tools } from '@/utils/utils.js';
|
||
export default {
|
||
components:{
|
||
Header, Home, Workshops
|
||
},
|
||
data(){
|
||
return{
|
||
// 基础路径
|
||
ip: configService.ip,
|
||
fileUrl: configService.fileUrl + 'pixel/pc/',
|
||
// 当前页码下标
|
||
current: uni.getStorageSync('pc_current')||0,
|
||
// refs组件列表
|
||
refs: ['home','workshops'],
|
||
// 加载
|
||
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 === 1 && !this.isLogin){
|
||
this.$refs.header.showLogin = true;
|
||
this.$refs.uToast.show({type: 'warning', title: '请先登录！'});
|
||
return;
|
||
}
|
||
uni.setStorageSync('pc_current', current);
|
||
this.current = current;
|
||
}
|
||
}
|
||
}
|
||
</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> |