scrm-vue/src/scrm_pages/site/index.vue

<template>
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs="crumbs"></bread-crumb>
    </div>
    <div class="app-container">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="success">
            <h1 class="name">欢迎来到微官网主页</h1>
            <div class="tips">您可以手机扫码访问或在右侧预览</div>
            <div id="qrcode" class="qrcode"></div>
            <router-link to="/site/preview">
              <el-button type="primary">进入微官网后台</el-button>
            </router-link>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="phone">
            <div class="phonetwo">9:42</div>
            <div class="phonethree">
              <img src="static/images/u189.png" style="width:100%;height:100%" />
            </div>
            <div class="phonefour">
              <img src="static/images/u187.png" style="width:100%;height:100%" />
            </div>
            <div class="phonefive">
              <img src="static/images/u188.png" style="width:100%;height:100%" />
            </div>
            <div class="phoneone">
              <iframe
                class="myIframe"
                :src="this.url"
                width="100%"
                height="100%"
                marginwidth="0"
                frameborder="no"
                scrolling="no"
              ></iframe>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import BreadCrumb from "../components/bread-crumb";
import QRCode from "qrcodejs2";
// import {GetDefaultData,GetUserOrgid} from '@/api/site/site';
import Vue from "vue";
export default {
  name: "site",
  components: {
    BreadCrumb
  },
  data() {
    return {
      crumbs: [{ path: false, name: "微网站" }],
      codeImg: require("../../assets/home/wei.jpg"),
      usreOrgID: "",
     // url:"http://microweb.kuyicloud.com/#/microHome?orgid="+this.$store.getters.xt_user.org_id,
      url: "http://jk.test.sgjyun.com/#/microHome?orgid=" +  this.$store.getters.xt_user.org_id
    };
  },
  methods: {
    qrcode() {
      let qrcode = new QRCode("qrcode", {
        width: 100,
        height: 100, // 高度
       //  text: 'http://microweb.kuyicloud.com/#/microHome?orgid='+this.$store.getters.xt_user.org_id // 二维码内容
         text:"http://jk.test.sgjyun.com/#/microHome?orgid=" + this.$store.getters.xt_user.org_id // 二维码内容
        // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        // background: '#f0f'
        // foreground: '#ff0'
      });
      console.log(qrcode);
    },
    GetDefaultData() {
      GetDefaultData().then(response => {
        if (response.data.state == 1) {
          var model = response.data.data.model;
        }
      });
    },
    GetUserOrgid() {
      GetUserOrgid().then(response => {
        if (response.data.state == 1) {
          var usreOrgID = response.data.data.usreOrgID;
          this.usreOrgID = response.data.data.usreOrgID;
          console.log("我的世界我做主", usreOrgID);
        }
      });
    }
  },
  mounted() {
    this.qrcode();
  },
  created() {
    // this.GetUserOrgid();
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.myIframe {
  border-radius: 15px;
}
.success {
  text-align: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  .name {
    font-size: 30px;
    font-weight: bold;
    color: #333;
    margin: 0;
    padding-bottom: 10px;
  }
  .tips {
    line-height: 30px;
    padding-bottom: 10px;
  }
  .site-code {
    width: 200px;
    padding-bottom: 10px;
    img {
      width: 100%;
    }
  }
  .qrcode {
    margin-bottom: 10px;
    width: 100px;
    height: 100px;
  }
}

.phone {
  width: 380px;
  height: 750px;
  background: url(../../assets/img/phone.png) 50% no-repeat;
}

.phoneone {
  position: absolute;
  width: 320px;
  height: 660px;
  // border: solid 1px red;
  margin-top: 60px;
  margin-left: 30px;
  text-align: center;
}

.phonetwo {
  position: absolute;
  width: 50px;
  height: 20px;
  // border:solid 1px blue;
  margin-left: 55px;
  margin-top: 40px;
}

.phonethree {
  position: absolute;
  width: 20px;
  height: 20px;
  margin-left: 280px;
  margin-top: 40px;
}

.phonefour {
  position: absolute;
  width: 20px;
  height: 20px;
  margin-left: 300px;
  margin-top: 40px;
}
.phonefive {
  position: absolute;
  width: 20px;
  height: 20px;
  margin-left: 325px;
  margin-top: 40px;
}
</style>