From 2f66b264fed5d3b9d0132281b63c7037c886e040 Mon Sep 17 00:00:00 2001
From: liukangdong <898885815@qq.com>
Date: 星期三, 09 十月 2024 13:43:41 +0800
Subject: [PATCH] ll
---
h5_meeting/pages/index/index.vue | 248 ++++++++++++++++++++++++++++---------------------
1 files changed, 140 insertions(+), 108 deletions(-)
diff --git a/h5_meeting/pages/index/index.vue b/h5_meeting/pages/index/index.vue
index 6682e3c..6f01181 100644
--- a/h5_meeting/pages/index/index.vue
+++ b/h5_meeting/pages/index/index.vue
@@ -8,13 +8,18 @@
<view class="date">{{date}}</view>
</view>
</view>
- <view class="home_status">
- <text v-if="!info.meetingListResponseList || info.meetingListResponseList.length == 0">绌洪棽涓�</text>
- <text v-if="info.meetingListResponseList && info.meetingListResponseList.length > 0 && info.meetingListResponseList[0].meetingStatus == 4">鍗冲皢寮�濮�</text>
- <text class="orange" v-if="info.meetingListResponseList && info.meetingListResponseList.length > 0 && info.meetingListResponseList[0].meetingStatus == 2">浼氳涓�</text>
- <text v-if="info.meetingListResponseList && info.meetingListResponseList.length > 0 && info.meetingListResponseList[0].meetingStatus == 1">鏈紑濮�</text>
- <text v-if="info.meetingListResponseList && info.meetingListResponseList.length > 0 && info.meetingListResponseList[0].meetingStatus == 3">宸茬粨鏉�</text>
- <text v-if="info.meetingListResponseList && info.meetingListResponseList.length > 0 && info.meetingListResponseList[0].meetingStatus == 5">宸叉挙閿�</text>
+ <view class="home_status">
+ <text v-if="!info.meetingListResponseList || info.meetingListResponseList.length == 0">绌洪棽涓�</text>
+ <text
+ v-if="info.meetingListResponseList && info.meetingListResponseList.length > 0 && info.meetingListResponseList[0].meetingStatus == 4">鍗冲皢寮�濮�</text>
+ <text class="orange"
+ v-if="info.meetingListResponseList && info.meetingListResponseList.length > 0 && info.meetingListResponseList[0].meetingStatus == 2">浼氳涓�</text>
+ <text
+ v-if="info.meetingListResponseList && info.meetingListResponseList.length > 0 && info.meetingListResponseList[0].meetingStatus == 1">鏈紑濮�</text>
+ <text
+ v-if="info.meetingListResponseList && info.meetingListResponseList.length > 0 && info.meetingListResponseList[0].meetingStatus == 3">宸茬粨鏉�</text>
+ <text
+ v-if="info.meetingListResponseList && info.meetingListResponseList.length > 0 && info.meetingListResponseList[0].meetingStatus == 5">宸叉挙閿�</text>
</view>
<view v-if="meetingInfo.meetingName" class="meeting_name">{{meetingInfo.meetingName}}</view>
<view v-if="meetingInfo.meetingTime && meetingInfo.bookingUser" class="meeting_con">
@@ -27,13 +32,15 @@
<image src="@/static/ic_people@2x.png"></image>
<text>棰勭害浜猴細{{meetingInfo.bookingUser }}</text>
</view>
- </view>
- <view v-if="meetingInfo.meetingTime" class="qrcode_wrap">
- <canvas id="qrcode" canvas-id="qrcode" class="qrcode"></canvas>
+ </view>
+ <view v-if="showQrbg" class="qrcode_wrap">
+ <canvas id="qrcode" canvas-id="qrcode" class="qrcode"></canvas>
</view>
</view>
<view class="meeting_wrap">
- <view class="title">浠婃棩浼氳锛坽{ info.meetingListResponseList && info.meetingListResponseList.length > 0 ? info.meetingListResponseList.length : 0 }}锛�</view>
+ <view class="title">
+ 浠婃棩浼氳锛坽{ info.meetingListResponseList && info.meetingListResponseList.length > 0 ? info.meetingListResponseList.length : 0 }}锛�
+ </view>
<view class="list">
<view class="item" v-for="item in info.meetingListResponseList">
<view class="name">{{item.meetingName}}</view>
@@ -51,42 +58,46 @@
</view>
<!-- -->
- <swiper v-if="info.fileType == 0 && (info.meetingListResponseList == null || info.meetingListResponseList.length == 0)" class="swiper" circular autoplay indicator-dots>
+ <swiper
+ v-if="info.fileType == 0 && (info.meetingListResponseList == null || info.meetingListResponseList.length == 0)"
+ class="swiper" circular autoplay indicator-dots>
<swiper-item v-for="item in info.multifileList">
<image class="swiper_item" :src="item.fileurlFull" mode="aspectFill"></image>
</swiper-item>
- </swiper>
- <!-- -->
- <template v-if="info.fileType == 1 && info.multifileList && info.multifileList.length > 0 && (info.meetingListResponseList == null || info.meetingListResponseList.length == 0)">
- <video :src="info.multifileList[0].fileurlFull" class="app_video" :autoplay="true" loop :controls="false"></video>
+ </swiper>
+ <!-- -->
+ <template
+ v-if="info.fileType == 1 && info.multifileList && info.multifileList.length > 0 && (info.meetingListResponseList == null || info.meetingListResponseList.length == 0)">
+ <video :src="info.multifileList[0].fileurlFull" class="app_video" :autoplay="true" loop :controls="false"></video>
</template>
</view>
</template>
<script>
- import dayjs from 'dayjs'
- // import vueQr from 'vue-qr/src/packages/vue-qr.vue'
+ import dayjs from 'dayjs'
+ // import vueQr from 'vue-qr/src/packages/vue-qr.vue'
import UQRCode from 'uqrcodejs'
import {
meetScreenData
} from '@/api/index.js'
- export default {
+ export default {
// components: {vueQr},
data() {
return {
time: '',
date: '',
+ showQrbg: false,
timer: null,
touchNum: 0,
- param: {},
- info: {},
- statusMap: {
- 1: '鏈紑濮�',
- 2: '杩涜涓�',
- 3: '宸茬粨鏉�',
- 4: '鍗冲皢寮�濮�',
- 5: '宸叉挙閿�',
- },
+ param: {},
+ info: {},
+ statusMap: {
+ 1: '鏈紑濮�',
+ 2: '杩涜涓�',
+ 3: '宸茬粨鏉�',
+ 4: '鍗冲皢寮�濮�',
+ 5: '宸叉挙閿�',
+ },
meetingInfo: {}
}
},
@@ -99,40 +110,47 @@
})
}
this.getData()
- },
- onReady() {
},
+ onReady() {},
methods: {
getData() {
+ this.showQrbg = false
meetScreenData({
roomId: this.param.code
- }).then(res => {
- this.info = res.data
- if(this.info.meetingListResponseList && this.info.meetingListResponseList.length > 0){
- this.meetingInfo = this.info.meetingListResponseList[0]
- this.$nextTick(() => {
- this.qrcodeCreate()
- this.$forceUpdate()
- })
- }
+ }).then(res => {
+ this.info = res.data
+ if (this.info.meetingListResponseList && this.info.meetingListResponseList.length > 0) {
+ this.meetingInfo = this.info.meetingListResponseList[0]
+ this.$nextTick(() => {
+ this.qrcodeCreate()
+ this.$forceUpdate()
+ })
+ } else {
+ this.showQrbg = false
+ this.meetingInfo = {}
+ }
})
- },
- qrcodeCreate(){
- // 鑾峰彇uQRCode瀹炰緥
- var qr = new UQRCode();
- // 璁剧疆浜岀淮鐮佸唴瀹�
- // qr.data = "https://uqrcode.cn/doc";
- qr.data = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxac2a80c2144c4ee0&redirect_uri=http://192.168.0.109:8080/redirect.html&response_type=code&scope=snsapi_base&state=1#wechat_redirect";
- // 璁剧疆浜岀淮鐮佸ぇ灏忥紝蹇呴』涓巆anvas璁剧疆鐨勫楂樹竴鑷�
- qr.size = 83;
- // 璋冪敤鍒朵綔浜岀淮鐮佹柟娉�
- qr.make();
- // 鑾峰彇canvas涓婁笅鏂�
- var canvasContext = uni.createCanvasContext('qrcode', this); // 濡傛灉鏄粍浠讹紝this蹇呴』浼犲叆
- // 璁剧疆uQRCode瀹炰緥鐨刢anvas涓婁笅鏂�
- qr.canvasContext = canvasContext;
- // 璋冪敤缁樺埗鏂规硶灏嗕簩缁寸爜鍥炬缁樺埗鍒癱anvas涓�
- qr.drawCanvas();
+ },
+ qrcodeCreate() {
+ this.showQrbg = true
+ this.$nextTick(() => {
+ // 鑾峰彇uQRCode瀹炰緥
+ var qr = new UQRCode();
+ // 璁剧疆浜岀淮鐮佸唴瀹�
+ // qr.data = "https://uqrcode.cn/doc";
+ qr.data =
+ "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxac2a80c2144c4ee0&redirect_uri=http://192.168.0.109:8080/redirect.html&response_type=code&scope=snsapi_base&state=1#wechat_redirect";
+ // 璁剧疆浜岀淮鐮佸ぇ灏忥紝蹇呴』涓巆anvas璁剧疆鐨勫楂樹竴鑷�
+ qr.size = 83;
+ // 璋冪敤鍒朵綔浜岀淮鐮佹柟娉�
+ qr.make();
+ // 鑾峰彇canvas涓婁笅鏂�
+ var canvasContext = uni.createCanvasContext('qrcode', this); // 濡傛灉鏄粍浠讹紝this蹇呴』浼犲叆
+ // 璁剧疆uQRCode瀹炰緥鐨刢anvas涓婁笅鏂�
+ qr.canvasContext = canvasContext;
+ // 璋冪敤缁樺埗鏂规硶灏嗕簩缁寸爜鍥炬缁樺埗鍒癱anvas涓�
+ qr.drawCanvas();
+ })
},
touchend() {
this.touchNum++
@@ -155,44 +173,53 @@
this.timer = setInterval(() => {
this.time = dayjs().format('HH:mm')
this.date = dayjs().format('YYYY-MM-DD') + ' ' + weeks[new Date().getDay()]
- }, 1000)
- setInterval(() => {
- this.getData()
- },this.param.time ? this.param.time * 1000 : 60 * 1000)
+ }, 1000)
+ setInterval(() => {
+ this.getData()
+ }, this.param.time ? this.param.time * 1000 : 60 * 1000)
}
}
}
</script>
-<style lang="scss" scoped>
- page,body{
- overflow: hidden;
- }
- .swiper{
- position: fixed;
- top: 0;
- left: 0;
- z-index: 999;
- width: 100%;
- height: 100vh;
- .swiper_item{
- background-color: #0095AC;
- width: 100%;
- height: 100vh;
- }
- }
- .app_video{
- width: 100%;
- height: 100vh;
- position: fixed;
- top: 0;
- left: 0;
- z-index: 999;
+<style lang="scss" scoped>
+ page,
+ body {
+ overflow: hidden;
}
+
+ .swiper {
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: 999;
+ width: 100%;
+ height: 100vh;
+
+ .swiper_item {
+ background-color: #0095AC;
+ width: 100%;
+ height: 100vh;
+ }
+ }
+
+ .app_video {
+ width: 100%;
+ height: 100vh;
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: 999;
+ }
+
.main_app {
width: 100%;
height: 100vh;
- position: relative;
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
font-size: 28rpx;
display: flex;
flex-direction: column;
@@ -230,14 +257,16 @@
flex-shrink: 0;
flex-direction: column;
width: 403rpx;
- height: 315rpx;
- background: linear-gradient( 90deg, #0080FF 0%, #00B0FF 100%);
+ height: 315rpx;
+ background: linear-gradient(90deg, #0080FF 0%, #00B0FF 100%);
border-radius: 7rpx;
margin-right: 28rpx;
position: relative;
- &:nth-of-type(1){
- background: linear-gradient(90deg, #0095AC 0%, #00B5D1 100%);
+
+ &:nth-of-type(1) {
+ background: linear-gradient(90deg, #0095AC 0%, #00B5D1 100%);
}
+
.item_bg {
position: absolute;
width: 178rpx;
@@ -250,13 +279,14 @@
.name {
flex: 1;
font-weight: bold;
- font-size: 39rpx;
- width: 100%;
- word-break: break-all;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 3; /* 瓒呭嚭鍑犺鐪佺暐 */
+ font-size: 39rpx;
+ width: 100%;
+ word-break: break-all;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 3;
+ /* 瓒呭嚭鍑犺鐪佺暐 */
}
.line {
@@ -292,19 +322,21 @@
}
}
}
- .qrcode_wrap{
- width: 92px;
- height: 92px;
- display: flex;
- align-items: center;
- justify-content: center;
- background-color: #fff;
- .qrcode {
- width: 84px;
- height: 84px;
- }
+
+ .qrcode_wrap {
+ width: 92px;
+ height: 92px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: #fff;
+
+ .qrcode {
+ width: 84px;
+ height: 84px;
+ }
}
-
+
}
.meeting_name {
--
Gitblit v1.9.3