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

<template>
  <div class="scene-layout">
    <div class="d-header">
        <ul class="tab-list">
          <li @click="tabActive = item.id" :class="{active:tabActive === item.id}" v-for="(item,i) in langScenes.tabList" :key="i">
            {{item.name}}
          </li>
        </ul>
      <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>
    </div>

    <ul v-if="total" ref="ulMenu">
      <template>
        <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="cooperation" v-if="item.cooperationUserName"><i class="iconfont icon-case_teamwork"></i><span>{{langScenes.user}}: {{item.cooperationUserName}}</span></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">
              <template v-if="tabActive===1">
                <div @click="handleMenu(index)">
                  <span class="spot"></span>
                </div>
                <ul :style="{minWidth: language==='en'?'150px': '90px'}">
                  <li v-if="item.status === 1||item.status===-2" @click="gotoEdit(item)">{{langScenes.edit}}</li>
                  <li  @click="handleCooperation(item)" v-if="item.status === 1||item.status===-2">{{item.cooperationUserId?langScenes.qxfp:langScenes.fenpei}}</li>
                  <li v-if="item.status !== 0" @click="del(item)">{{langScenes.delete}}</li>
                </ul>
              </template>

              <template v-if="tabActive===2">
                <div
                  class="b_default"
                  v-if="item.status === 1||item.status===-2"
                  @click="gotoEdit(item)">
                  <span>{{langScenes.edit}}</span>
                </div>
              </template>
            </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>
      </template>
    </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>allowfullscreen="true" 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://www.4dkankan.com/showProPC.html?m=KcMeJlOr8',
      item: '',
      ulActive: '',
      tabActive: 1
    }
  },
  watch: {
    currentPage () {
      this.getList()
    },
    '$route.query.cameraid': {
      immediate: true,
      handler: function (newVal) {
        if (newVal) {
          this.searchKey = newVal
          this.getList(newVal)
        }
      }
    },
    tabActive (newVal) {
      this.currentPage === 1 ? this.getList() : this.currentPage = 1
    }
  },
  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}" allowfullscreen="true" frameborder="0"></iframe>`
    }
  },
  mounted () {
    document.addEventListener('click', (e) => {
      if (this.$refs.ulMenu) {
        if (!this.$refs.ulMenu.contains(e.target)) {
          this.ulActive = ''
        }
      }
    })
    if (this.deviceLogin) {
      this.$bus.$off('mycid')
      this.$bus.$on('mycid', item => {
        setTimeout(() => {
          this.getList()
        })
      })
    } else {
      this.getList()
    }
  },
  methods: {
    async handleCooperation (item) {
      if (item.cooperationUserId) {
        let result = await this.$http({
          method: 'post',
          data: {
            sceneNum: item.num
          },
          headers: {
            token: this.token
          },
          url: '/user/scene/cooperation/delete'
        })
        let data = result.data
        if (data.code === 0) {
          this.$toast.show('success', this.langToast['45'], () => {
            this.getList()
          })
        } else {
          return this.$toast.show('warn', this.langToast[data.code], () => {})
        }
      } else {
        this.$toast.showCooperation(item.num, () => {
          this.getList()
        })
      }
    },
    handleMenu (index) {
      this.ulActive = index === this.ulActive ? '' : index
    },
    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(''))
    },
    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')
      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 page = url.substring(url.lastIndexOf('/') + 1, url.lastIndexOf('.html'))
      let pStr = 'edit'
      if (item.buildType) {
        switch (item.buildType.toLowerCase()) {
          case 'v1':
            pStr = 'edit'
            break
          case 'v2':
            pStr = 'editProPC'
            break
          case 'v3':
            pStr = 'epc'
            break
          default:
            pStr = 'edit'
            break
        }
      }

      url = pStr ? url.replace(page, pStr) : url

      window.open(url.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
      }
      if (this.tabActive === 2) {
        await this.$store.dispatch('getCooperationScene', params)
      } else {
        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>
$theme-color: #1fe4dc;
$font-color: #2d2d2d;

.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%;
  margin-top: 30px;
  .d-header{
    margin-left: 40px;
    height: 30px;
    .tab-list{
      display: inline-block;
      li{
        display: inline-block;
        margin-right: 40px;
        cursor: pointer;
        font-size: 14px;
        line-height: 1.5;
      }
      .active{
        color: $theme-color;
        border-bottom: 1px solid $theme-color;
      }
    }
    .tab-search{
      float: right;
      position: relative;
      width: 230px;
      padding-left: 10px;
      margin-right: 120px;
      border: 1px solid #ccc;
      display: flex;
      .iconfont{
        width: 28px;
        height: 28px;
        padding: 6px;
        cursor: pointer;
        background: #e4e4e4;
      }
      input{
        width: 100%;
        font-size: 14px;
        appearance: none;
        line-height: 28px;
        height: 28px;
        border: 0;
      }
    }
  }
  > 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%;
      }
      .cooperation{
        background:rgba(0,0,0,0.5);
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 30px;
        text-align: center;
        line-height: 30px;
        color: #FFFFFF;
        >span{
          display: inline-block;
          margin-left: 6px;
        }
      }
      .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;
          cursor: pointer;
          position: relative;
          &:hover{
            >ul{
              display: block;
            }
          }
          >div {
            display: inline-block;
            width: 20%;
            .spot{
              width: 4px;
              height: 4px;
              display: inline-block;
              background-color: #202020;
              border-radius: 50%;
              position: relative;
              margin-right: 10px;
              &::after,&::before{
                content: '';
                position: absolute;
                width: 4px;
                height: 4px;
                display: inline-block;
                background-color: #202020;
                border-radius: 50%;
                left: -8px;
                top: 50%;
                transform: translateY(-50%);
              }
              &::before{
                right: -8px;
                left: unset;
              }
            }
          }

          >ul{
            display: none;
            position: absolute;
            top: 22px;
            z-index: 9;
            left: 58%;
            background: #F7F7F7;
            min-width: 90px;
            box-shadow:0px 1px 6px rgba(0,0,0,0.16);
            >li{
              text-align: left;
              width: 100%;
              line-height: 2.5;
              padding: 0 10px;
              color: #202020;
              &:hover{
                background-color: #EBEBEB;
              }
            }
          }
          .b_default{
              display: inline-block;
              background: #fff;
              color: #000;
              border: 1px solid #777;
              border-radius: 2px;
              font-size: 12px;
              width: 52px;
              height: 22px;
              line-height: 22px;
              text-align: center;
              vertical-align: middle;
              margin-left: 4px;
              -webkit-box-sizing: border-box;
              box-sizing: border-box;
              cursor: pointer;
              position: relative;
              >span{
                position: absolute;
                top: 50%;
                left: 50%;
                -webkit-transform: translate(-50%,-50%);
                transform: translate(-50%,-50%);
                width: 100%;
              }
          }
        }
      }
    }
  }
  // .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>