ll

liukangdong

2024-10-09 2f66b264fed5d3b9d0132281b63c7037c886e040

ll

 h5_meeting/pages/index/config.vue

@@ -11,7 +11,7 @@
            <view class="item">
                <view class="title">接口地址</view>
                <view class="line">
                    <input type="text" placeholder="http://10.50.250.178:8088/gateway_interface/" v-model="param.baseUrl" />
                    <input type="text" v-model="param.baseUrl" />
                    <image src="../../static/icon/right.svg" class="icon"></image>
                </view>
            </view>
@@ -31,11 +31,15 @@
    export default {
        data() {
            return {
                param: {}
                param: {
                    baseUrl: 'http://192.168.5.13/gateway_interface/'
                }
            };
        },
        onLoad(){
            const param = uni.getStorageSync('param') || {}
            const param = uni.getStorageSync('param') || {
                baseUrl: 'http://192.168.5.13/gateway_interface/'
            }
            this.param = { ...param }
        },
        methods: {

 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";
                  // 设置二维码大小，必须与canvas设置的宽高一致
                  qr.size = 83;
                  // 调用制作二维码方法
                  qr.make();
                  // 获取canvas上下文
                  var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
                  // 设置uQRCode实例的canvas上下文
                  qr.canvasContext = canvasContext;
                  // 调用绘制方法将二维码图案绘制到canvas上
                  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";

                    // 设置二维码大小，必须与canvas设置的宽高一致

                    qr.size = 83;

                    // 调用制作二维码方法

                    qr.make();

                    // 获取canvas上下文

                    var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入

                    // 设置uQRCode实例的canvas上下文

                    qr.canvasContext = canvasContext;

                    // 调用绘制方法将二维码图案绘制到canvas上

                    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 {