realtorEasier-webSite/pc/src/page/manage/temp/scene.vue

<template>
  <div class="scene-layout">
    <div class="tab-search">
      <input
        v-model="searchKey"
        @keyup.enter="gotoSearch(searchKey)"
        type="text"
        :placeholder="langScenes.placeholder.searchID"
      />
      <i class="iconfont icon-sousuo" @click="gotoSearch(searchKey)"></i>
    </div>
    <ul v-if="total">
      <li v-for="(item,index) in myscene.list" :key="index">
        <div @click="((item.status === 1||item.status===-2)&&item.payStatus !== -2) && goto(item.webSite)" class="a-tap">
          <div class="share-btn" v-if="((item.status === 1||item.status===-2)&&item.payStatus !== -2)" @click.stop="handleShare(item)"></div>
          <div class="card-img" :style="{backgroundImage: `url(${getSceneImg(item)})`}"></div>
          <div class="loading-hover" v-if="item.status === 0">
            <div class="loading-icon">
              <span class="refreshing-loader"></span>
              <p>{{langScenes.share.calcule}}</p>
            </div>
          </div>
          <div @click.stop class="loading-hover" v-if="item.payStatus === -2">
            <div class="loading-icon" style="width:100%">
              <p style="font-weight:bold;" v-html="langScenes.limit.insufficient"></p>
            </div>
            <p class="huifu" @click.stop="rechargeTip(item)">{{langScenes.limit.recharge}}</p>
          </div>
        </div>
        <div class="name">
          <div class="title">{{item.sceneName}}</div>
          <div class="oper">
            <div v-if="item.status !== 0" @click="del(item)">
              <span >{{langScenes.delete}}</span>
            </div>
            <div
              v-if="item.status === 1||item.status===-2"
              class="primary"
              @click="gotoEdit(item)"
            ><span>{{langScenes.edit}}</span></div>
          </div>
        </div>
        <div>
          <span>{{langScenes.shooting}}</span>
          <span>{{item.createTime}}</span>
        </div>
        <div>
          <span>{{langScenes.id}}</span>
          <span>{{!deviceLogin?(item.snCode||item.childName):(cameradetail.snCode||cameradetail.childName)}}</span>
        </div>
      </li>
    </ul>
    <div class="scene-nothing" v-else>
      <img :src="`${$cdn}images/nothing.png`" />
      <div>{{langScenes.noScenes}}</div>
    </div>
    <div class="paging" v-if="total">
      <Paging @clickHandle="pageChange" :current="currentPage" :total="total" :equable="pageSize" />
    </div>

    <div class="share-hover" v-show="showShare">
      <div class="share-con">
        <div class="t-header">
          <span>{{langScenes.share.share}}</span>
          <i @click="showShare = false" class="iconfont icon-cuowu"></i>
        </div>
        <div class="t-con">
          <p class="t-label">{{langScenes.share.website}}</p>
          <input type="text" v-model="url">
          <div class="btn-copy" @click="copyTextToClipboard(url)" >{{langScenes.share.copy}}</div>
          <div class="t-label">{{langScenes.share.shareto}}</div>
          <div class="img-share" v-for="(item,i) in imgs" :key="i">
            <div v-if="item.id === 0" class="trangle"></div>
            <img v-if="item.id === 0 && num" class="qrcode" :src="`/sceneQRcode/${num}.png?rnd=${rnd}`" alt="">
            <img class="share-logo" :src="item.img" @click="toShare(item)" :alt="langScenes.share.share">
          </div>
          <p class="t-label">{{langScenes.share.qianru}}</p>
          <p class="sub-title">{{langScenes.share.size}}</p>
          <div class="window-con">
            {{langScenes.share.width}}<input type="text" style="margin-right:10px;" v-model="lwidth" oninput="value=Math.max(Math.min(Number(value.replace(/[^\d]/g,'')),10000),1)">
            {{langScenes.share.height}}<input type="text" v-model="lheight" oninput="value=Math.max(Math.min(Number(value.replace(/[^\d]/g,'')),10000),1)">
          </div>
          <p class="p-sub">{{langScenes.share.defaultSize}}</p>
          <!-- <div class="produce-btn">{{`&lt;/&gt; 生成嵌入式代码`}}</div> -->
          <div class="code-con" >
            <div>{{'&lt;iframe'}}</div>
            <p>width=</p>
            <div>"{{lwidth}}"</div>
            <p>height=</p>
            <div>"{{lheight}}"</div>
            <p>src=</p>
            <div>"{{url}}"</div>
            <p>frameborder=</p>
            <div>"0"</div>
            <div>{{'&gt;&lt;/iframe>'}}</div>
          </div>
          <div class="btn-copy" @click="copyTextToClipboard(htmlCode)" style="margin-bottom:6px;">{{langScenes.share.copy}}</div>
          <div class="btm-dec">{{langScenes.share.sub}}<br/>{{langScenes.share.sub2}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Paging from '@/components/Paging'
export default {
  components: { Paging },
  data () {
    let imgs = [
      {
        img: this.$cdn + 'images/s-wechat.png',
        id: 0
      },
      {
        img: this.$cdn + 'images/s-weibo.png',
        id: 1
      },
      {
        img: this.$cdn + 'images/s-qq.png',
        id: 2
      }
    ]
    return {
      pageSize: 12,
      currentPage: 1,
      searchKey: '',
      total: 0,
      showShare: false,
      imgs,
      num: '',
      rnd: Math.random(),
      lwidth: 853,
      lheight: 480,
      url: 'https://pro.4dkankan.com/showProPC.html?m=KcMeJlOr8',
      item: ''
    }
  },
  watch: {
    currentPage () {
      this.getList()
    },
    '$route.query.cameraid': {
      immediate: true,
      handler: function (newVal) {
        if (newVal) {
          this.searchKey = newVal
          this.getList(newVal)
        }
      }
    }
  },
  computed: {
    ...mapState({
      token: state => state.user.token,
      language: state => state.language.current,
      langScenes: state => state.language.home.manage.myScenes,
      langToast: state => state.language.home.toast,
      deviceLogin: state => state.user.deviceLogin,
      cameradetail: state => {
        let type = Object.prototype.toString.call(state.user.cameradetail)
        if (type === '[object Object]') {
          return state.user.cameradetail
        }
        let condition =
          state.user.cameradetail &&
          state.user.cameradetail !== 'null' &&
          type !== '[object Array]'
        return condition ? JSON.parse(state.user.cameradetail) : ''
      },
      myscene: state => {
        let type = Object.prototype.toString.call(state.user.myscene)
        if (type === '[object Object]') {
          return state.user.myscene
        }
        let condition =
          state.user.myscene &&
          state.user.myscene !== 'null' &&
          type !== '[object Array]'
        return condition ? JSON.parse(state.user.myscene) : {}
      }
    }),
    htmlCode () {
      return `<iframe src="${this.url}" width="${this.lwidth}" height="${this.lheight}" frameborder="0"></iframe>`
    }
  },
  mounted () {
    if (this.deviceLogin) {
      this.$bus.$off('mycid')
      this.$bus.$on('mycid', item => {
        setTimeout(() => {
          this.getList()
        })
      })
    } else {
      this.getList()
    }
  },
  methods: {
    rechargeTip (item) {
      this.$toast.showConfirm('warn', this.langToast['28'], () => {
        let routeData = this.$router.resolve({name: 'introduce', params: {id: item.childName}})
        window.open(routeData.href, '_blank')
      }, '', this.langScenes.limit.expand)
    },
    recharge (item) {

    },
    toShare (item) {
      var n, t, i, r, u, f, sceneName
      n = screen
      t = document
      i = encodeURIComponent
      u = t.location.href
      sceneName = `${this.item.sceneName} 三维场景漫游 #由四维看看Pro拍摄#`
      if (item.id === 1) {
        r = 'http://v.t.sina.com.cn/share/share.php?'
        f = ['url=', i(this.url), '&title=', i(sceneName)].join('')
      } else if (item.id === 2) {
        // http:// connect.qq.com/widget/shareqq/index.html?url=;title=
        r = 'http://connect.qq.com/widget/shareqq/index.html?'

        f = ['url=',
          i(this.url),
          '&title=',
          i(sceneName)
        ].join('')
      } else {
        return
      }

      window.open([r, f].join(''), '', ['toolbar=0,status=0,resizable=1,width=620,height=450,left=', ((n.width) / 2) - 310, ',top=', ((n.height) / 2) - 225].join('')) || (u.href = [r, f].join(''))
      // window.open('http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=http://m.goczx.com/&title=【东莞厂房租售网|东莞厂房招租信息|东莞厂房网】-东莞i厂房网&desc=东莞i厂房网&summary=东莞i厂房网&site={{100*100}}&pics=http://img6.zcf8.com/black_logo1.png?imageView/3/w/67/h/27')
    },
    handleShare (item) {
      this.url = item.webSite.replace('http://', 'https://')
      this.num = item.num
      this.rnd = Math.random()
      this.item = item
      this.showShare = true
    },
    goto (url) {
      let temp = url.replace('show.html', 'showPC.html')
      // let temp1 = temp.replace('//www', '//test')
      // window.open(temp.replace('//www', '//test'), '_blank')
      window.open(temp.replace('http://', 'https://') + (this.language === 'en' ? '&lang=en' : ''), '_blank')
    },
    getSceneImg (item) {
      switch (item.status) {
        case -1:
          let to = this.language === 'en' ? this.$cdn + 'images/scene_error-en.png' : this.$cdn + 'images/scene_error.png'
          return to
        default:
          return item.thumb + '?v=' + item.version + '?rnd=' + this.rnd
      }
    },
    gotoEdit (item) {
      let url = item.webSite
      let temp = ''
      if (item.sceneScheme < 4) {
        temp = url.replace('show', 'editPC')
      } else {
        temp = url.replace('show', 'edit')
      }
      window.open(temp.replace('http://', 'https://') + (this.language === 'en' ? '&lang=en' : ''), '_blank')
    },
    async del (item) {
      this.$toast.showConfirm('warn', this.langScenes.delwarn, async () => {
        let params = {
          sceneNum: item.num
        }
        let res = await this.$http({
          method: 'post',
          data: params,
          headers: {
            token: this.token
          },
          url: '/user/scene/delete'
        })
        let data = res.data
        if (data.code === 0) {
          return this.$toast.show('warn', this.langScenes.share.delsuccess, () => {
            this.getList()
          })
        }

        return this.$toast.show('error', `${this.langScenes.share.delfail}${this.langToast[data.code]}`)
      })
    },
    pageChange (data) {
      this.currentPage = data
    },
    gotoSearch (searchKey) {
      if (this.currentPage > 1) {
        this.currentPage = 1
      } else {
        this.getList(searchKey)
      }
    },
    async getList (searchKey = null) {
      this.searchKey = searchKey || this.searchKey
      let { id: cameraId = null, type: cameraType = null } = this.cameradetail
      window.scrollTo(0, 0)
      let params = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        cameraId,
        searchKey: this.searchKey,
        cameraType
      }
      cameraId
        ? await this.$store.dispatch('getScanScene', params)
        : await this.$store.dispatch('getUserScene', params)
      this.pageSize = this.myscene.pageSize
      this.total = this.myscene.total || 0
    },
    copyTextToClipboard (text) {
      var textArea = document.createElement('textarea')

      textArea.style.position = 'fixed'
      textArea.style.top = 0
      textArea.style.left = 0
      textArea.style.width = '2em'
      textArea.style.height = '2em'
      textArea.style.padding = 0
      textArea.style.border = 'none'
      textArea.style.outline = 'none'
      textArea.style.boxShadow = 'none'
      textArea.style.background = 'transparent'
      textArea.value = text

      document.body.appendChild(textArea)

      textArea.select()

      try {
        document.execCommand('copy') ? this.$toast.show('success', this.langScenes.share.copysuccess) : this.$toast.show('warn', this.langScenes.share.copyfail)
      } catch (err) {
        this.$toast.show('error', this.langScenes.share.copyfail)
      }

      document.body.removeChild(textArea)
    }
  }
}
</script>

<style lang="scss" scoped>
.huifu{
  position: absolute;
  bottom: 10px;
  right: 10px;
  color: #1fe4dc;
  display: inline-block;
  border-bottom: 1px solid #1fe4dc;
  padding-bottom: 2px;
  cursor: pointer;
}
.scene-layout {
  width: 100%;
  ul {
    padding: 30px 0 0 40px;
    li {
      width: 270px;
      display: inline-block;
      position: relative;
      margin-right: 25px;
      margin-bottom: 35px;
      color: #a0a0a0;
      max-width: 330px;
      font-size: 14px;
      .a-tap {
        cursor: pointer;
        width: 100%;
        height: 160px;
        display: inline-block;
        position: relative;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .card-img {
        width: 100%;
        height: 100%;
        cursor: pointer;
        background-position: center;
        background-size: auto 100%;
        background-repeat: no-repeat;
      }
      .share-btn {
        position: absolute;
        right: 10px;
        top: 10px;
        width: 35px;
        height: 35px;
        background-image: url(https://4dscene.4dage.com/new4dkk/images/share-btn.png);
        background-color: rgba(0, 0, 0, 0.3);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 50%;
        //  :src="`${$cdn}images/share-btn.png`"
      }
      .name {
        display: flex;
        justify-content: space-between;
        align-items: center;
        line-height: 22px;
        margin-top: 8px;
        .title {
          font-weight: bold;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          color: #000;
          flex: 1;
        }
        .oper {
          flex: 1;
          text-align: right;
          div {
            display: inline-block;
            background: #fff;
            color: #000;
            border: 1px solid #777777;
            border-radius: 2px;
            font-size: 12px;
            width: 52px;
            height: 22px;
            line-height: 22px;
            text-align: center;
            vertical-align: middle;
            margin-left: 4px;
            box-sizing: border-box;
            cursor: pointer;
            position: relative;
            span{
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%,-50%);
            }
          }
          .primary{
            background: #1fe4dc;
            border: 1px solid #1fe4dc;
          }
        }
      }
    }
  }
  .tab-search {
    float: right;
    position: relative;
    width: 230px;
    padding-left: 10px;
    border: 1px solid #ccc;
    top: -30px;
    right: 6vw;
    display: flex;
    .iconfont {
      width: 28px;
      height: 28px;
      padding: 6px;
      background: #e4e4e4;
      cursor: pointer;
    }
    input {
      width: 100%;
      font-size: 14px;
      appearance: none;
      line-height: 28px;
      height: 28px;
      border: 0;
    }
  }
  .scene-nothing {
    width: 75%;
    padding: 42px 0 210px 0;
    text-align: center;
    img {
      padding-bottom: 22px;
    }
    div {
      font-size: 16px;
      color: #969696;
    }
  }
  .paging {
    // border-left: #e5e5e5 1px solid;
    height: 100%;
    margin-bottom: 40px;
    & /deep/ .layout {
      text-align: left;
      margin-top: 0;
      margin-left: 15px;
    }
    & /deep/ .layout a:not(:last-child) {
      margin: 10px 8px;
      font-size: 16px;
      display: inline-block;
      font-weight: 500;
      cursor: pointer;
      user-select: none;
      color: #999;
      position: relative;
      transition: color 0.3s;
    }
    & /deep/ .layout a:last-child {
      position: relative;
      top: -5px;
      display: -ms-inline-flexbox;
      display: inline-flex;
      -ms-flex-align: center;
      align-items: center;
      height: 22px;
      padding: 0 9.6px;
      padding: 0 0.6rem;
    }
    & /deep/ .layout a:last-child::before,
    & /deep/ .layout a:last-child::after {
      content: "";
      display: inline-block;
      will-change: transform;
      transition: transform 0.3s;
    }

    & /deep/ .layout a:not(:last-child).active::after,
    & /deep/ .layout a:not(:last-child).active,
    & /deep/ .layout a:not(:last-child):hover,
    & /deep/ .layout a:not(:last-child):hover::after {
      color: #111111;
      transform: scaleX(1);
    }

    & /deep/ .layout a:not(:last-child)::after {
      content: "";
      height: 3px;
      width: 140%;
      background-color: #111;
      display: block;
      margin-left: -20%;
      margin-top: 3px;
      transform-origin: 50% 50%;
      transform: scaleX(0);
      will-change: transform;
      transition: transform 0.3s;
    }
  }

  .share-hover {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    z-index: 88888888;
    transition: all 0.2s linear;
    background: rgba(0, 0, 0, 0.3);
    .share-con {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 515px;
      transform: translate(-50%, -50%);
      background: #fff;
      border-radius: 6px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
      overflow: hidden;
      line-height: 1;
      .t-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #969696;
        height: 54px;
        padding: 0 30px;
        .iconfont{
          cursor: pointer;
        }
      }
      .t-con{
        padding: 30px;
        background: #e7e7e7;
        .t-label{
          font-size: 16px;
          color: #2d2d2d;
          font-weight: bold;
        }
        .img-share{
          display: inline-block;
          margin: 14px 16px 24px 4px;
          position: relative;
          .trangle{
            position: absolute;
            display: none;
            top: 44px;
            left: 14px;
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-bottom-color: #fff;
            z-index: 99;
          }
          .qrcode{
            position: absolute;
            display: none;
            top: 63px;
            left: -36px;
            width: 120px;
            box-shadow: 0 8px 10px rgba(0, 0, 0, 0.3);
          }
          &:hover{
            .qrcode,.trangle{
              display: inline-block;
            }
          }
        }
        .share-logo{
          cursor: pointer;
        }
        input{
          width: 100%;
          border: 0;
          line-height: 48px;
          height: 48px;
          padding: 0 20px;
          margin: 14px 0 10px;
        }
        .window-con{
          display: inline-block;
          input{
            width: 60px;
            border-radius: 4px;
            padding: 0;
            margin: 0;
            text-align: center;
            line-height: 32px;
            height: 32px;
          }
        }
        .btn-copy{
          text-align: center;
          background: #ddd;
          font-size: 14px;
          color: #2d2d2d;
          line-height: 26px;
          height: 26px;
          margin-bottom: 24px;
          cursor: pointer;
          font-weight: bold;
          &:hover{
            background: #c8c8c8;
          }
        }
        .sub-title{
          color: #2d2d2d;
          font-size: 16px;
          margin: 14px 0 10px;
        }
        .p-sub{
          font-size: 14px;
          margin: 14px 0 10px;
        }
        .produce-btn{
          text-align: center;
          height: 48px;
          line-height: 48px;
          background: #5e5e5e;
          border-radius: 4px;
          color: #fff;
        }
        .code-con{
          height: 50px;
          width: 100%;
          line-height: 1.5;
          overflow: auto;
          word-break: break-all;
          margin: 10px 0;
          cursor: pointer;
          position: relative;
          div,p{
            word-break: break-all;
            display: inline-block;
          }
          div{
            color: #b35e14;
          }
        }
        .btm-dec{
          font-size: 14px;
          line-height: 1.5;
          letter-spacing: -0.5px;
        }
      }
    }
  }
}

@media screen and (min-width: 2000px) {
  .scene-layout {
    width: 75%;
  }
}

@media screen and (max-width: 1400px){
  .scene-layout {
    width: 100%;
    ul {
      li {
        width: 265px;
        margin-right: 35px;
        .a-tap {
          height: 142px;
        }
      }
    }
  }
}

@media screen and (max-width: 1300px) {
  .scene-layout {
    width: 100%;
    ul {
      li {
        width: 240px;
        margin-right: 10px;
        .a-tap {
          height: 142px;
        }
      }
    }
  }
}
</style>