liuyg
2021-12-15 8409c653e725ad975b589419ddb9177f3be1e9fb
src/components/map/index.vue
@@ -40,25 +40,24 @@
             id="map_content_content">
            <div id="mapChildContent">
                <div class="arc-bcg">
                    <img src="/img/job/one.jpg"
                         alt=""
                         @click="alert(1)">
                    <img :src="popupBgUrl"
                         alt="">
                </div>
                <div class="popup-nav">
                    <ul>
                        <li>
                        <li class="come-here-fun">
                            <i class="popup-icon come-nav deblurring"></i>
                            到这
                        </li>
                        <li>
                        <li class="get-to-fun">
                            <i class="popup-icon start-nav deblurring"></i>
                            出发
                        </li>
                        <li>
                        <li class="qr-code-fun">
                            <i class="popup-icon qr-code-nav deblurring"></i>
                            二维码
                        </li>
                        <li>
                        <li class="imgs-fun">
                            <i class="popup-icon atlas-nav deblurring"></i>
                            图集
                        </li>
@@ -104,7 +103,39 @@
            </div>
        </div>
        <!-- 二维码弹框相关 -->
        <el-dialog title="场景二维码"
                   :visible.sync="QRCodeFlag"
                   width='44%'
                   :before-close="handleClose">
            <div style="margin: 0; position: relative; width: 100%; height: 352px;">
                <img width="260"
                     :src="pupupQRUrl"
                     alt=""
                     style="position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    margin: auto">
                <div style="position: absolute; bottom: 0; width: 100%; line-height: 36px; text-align: center;">
                    (右键另存为图片)
                </div>
            </div>
        </el-dialog>
        <left-nav ref="leftNav"></left-nav>
        <campusNav :comeName="comeName"
                   :getToName="getToName"
                   v-show="campusNavFlag" />
        <el-image v-show="false"
                  style="width: 100px; height: 100px"
                  :src="url"
                  :preview-src-list="srcList"
                  ref="popupImgs">
        </el-image>
    </div>
</template>
@@ -118,15 +149,28 @@
    name: 'mapBox',
    data () {
        return {
            popupFlag: false
            popupFlag: false,
            campusNavFlag: false,
            comeName: '',
            getToName: '',
            QRCodeFlag: false,
            url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            srcList: [
                'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
                'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
            ]
        }
    },
    computed: {
        ...mapGetters([
            'viewer'
            'viewer',
            'popupBgUrl',
            'pupupQRUrl'
        ])
    },
    mounted () {
        var that = this
        this.$nextTick(() => {
            // 动态添加dom元素,并绑定VUE事件(打开pdf)(.pdf-item为动态添加的元素,放置在父元素.pdf-body下)
            $('#map_popup_content').on('click', '.arc-bcg', function () {
@@ -138,11 +182,28 @@
                $(this).parent().siblings().children(`div:eq(${$(this).index()})`).addClass('on').siblings().removeClass('on')
            })
            $('#map_popup_content').on('click', '.popup-nav .come-here-fun', function (e) {
                that.comeName = '成交楼'
                if (that.campusNavFlag == false) that.campusNavFlag = true
            })
            $('#map_popup_content').on('click', '.popup-nav .get-to-fun', function (e) {
                that.getToName = '活动中心'
                if (that.campusNavFlag == false) that.campusNavFlag = true
            })
            $('#map_popup_content').on('click', '.popup-nav .qr-code-fun', function (e) {
                that.QRCodeFlag = true
            })
            $('#map_popup_content').on('click', '.popup-nav .imgs-fun', function (e) {
                console.log(that.$refs.popupImgs)
                that.$refs.popupImgs.clickHandler()
            })
        })
        var DC = global.DC
        var that = this
        let viewer
@@ -322,7 +383,9 @@
        DC.ready(initViewer)
    },
    methods: {
        closeCampusNav () {
            this.campusNavFlag = false
        }
    }
}
</script>