realtorEasier-webSite/pc/src/page/mall/kankanPro/index.vue

<template>
  <div class="purchase-layout ">
    <div class="plate01 container">
      <div class="main-detail">
        <browse
          :idata='browdata'
          :iactive='browactive'
          :floder="'probrowse'"
          class="product-img"
         />
        <div class="layout">
          <img class="pro-logo" :src="language==='en'?`${$cdn}images/pro-logo-en.png`:`${$cdn}images/pro-logo.png`" alt="">
          <p class="sub b-label" v-html="langPurchase.dec"></p>
          <p class="price">
             {{langPurchase.price}}
          </p>
          <template>
            <div class="intro-item">
              <h4 class="intro-title">{{langPurchase.color.key}}</h4>
              <span class="color"><i class=" iconfont icon-yuandian"></i>{{langPurchase.color.val}}</span>
            </div>
            <div class="intro-item">
              <h4 class="intro-title">{{langPurchase.service.key}}</h4>
              
              <ul>
                <!-- <li>{{langPurchase.service.type}} <a :href="`${pathname}#/mall/cloudCapacity`" target="_blank">{{ $t('mall.knowMore') }}</a></li> -->
                <span class="color"><i class=" iconfont icon-yuandian"></i>{{langPurchase.service.type}} <a :href="`${pathname}#/mall/cloudCapacity`" target="_blank">{{ $t('mall.knowMore') }}</a></span>
                <li>{{ langPurchase.service.val[0] }}</li>
                <li>{{ langPurchase.service.val[1] }}</li>
                <li>{{ langPurchase.service.val[2] }}</li>
              </ul>
            </div>
            <div class="intro-item">
              <h4 class="intro-title">{{langPurchase.gift.peijian}}</h4>
              <div class="detail-box zhijia" :class="{'no-active':!selectParts}" @click="changeSelectParts">
                <!-- <img :src="`${$cdn}images/tag-icon.png`" class="t-click" alt> -->
                <img :src="`${$cdn}images/zhijia.png`" alt>
                <div class="zhijia-info">
                  <h6>{{ $t('mall.jiaojia') }}<span class="zhijia-price">{{ purchasezhijia.price }}</span></h6>
                  <p>{{ $t('mall.jiaojiaDetail') }}</p>
                  <a :href="`${pathname}#/mall/zhijia`" target="_blank">{{ $t('mall.knowMore')}}</a>
                </div>
                <div class="zhijia-actions">
                </div>
              </div>
            </div>
            
            <div class="number-w" v-if="language==='zh'">{{ $t('mall.count') }} <number v-model="count" :max="99" style="margin-left:12px;" /></div>
          </template>
          <template v-if="language==='zh'">
            <div class="totalPrice">RMB {{ totalPrice }}</div>
          </template>
          <div>
            <div class="btns">
              <div v-if="language==='zh'" class="button add-cart" @click="addcart" style="margin-right:28px;">
                <vcenter>
                  <span>{{ $t('mall.cart') }}</span>
                </vcenter>
              </div>
              <div class="button"  @click="pay">
                <vcenter>
                  <span>{{langPurchase.buy}}</span>
                </vcenter>
              </div>
            </div>
            <div class="btn-dec" v-if="language==='zh'"><h-icon type="gouwuche" class="shop-cart-icon" />{{ langPurchase.tiaokuan }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="plate02" >
      <div class="tabs ">
        <ul class="container">
          <li class="tabs-item" :class="{'is-active': detailType === 'product'}" @click="detailType = 'product'">{{$t('mall.product')}}</li><li class="tabs-item" :class="{'is-active': detailType === 'tech'}"  @click="detailType = 'tech'">{{$t('mall.techDetail')}}</li>
        </ul>
        
      </div>
      <div class="product-detail container" v-show="detailType === 'product'" ref="homeLayout">
        <div class="plate item" v-for="(item,i) in sequenceArr" :key="i">
          <div class="container">
            <h2 class="common-title">{{item.name}}</h2>
            <sequence :runAnimation="item.runAnimation" :img="item.img.indexOf('http') > -1 ? item.img :`${$cdn}images/sequence/v${language === 'zh' ? item.img : item.enImg}.jpg`" />
          </div>
        </div>
      </div>
      <div class="tech-detail" v-show="detailType === 'tech'">
        <div class="params-body">
          <div class="container">
            <h1 class="common-title">{{$t('mall.techDetail')}}</h1>
            <div class="params-con">
              <div class="params-item" v-for="(item,index) in langPurchase.guige.arr" :key="index">
                <div class="p-l">{{item.name}}</div>
                <div class="p-r">
                  <div v-html="sub" v-for="(sub,i) in item.val" :key="i"></div>
                </div>
              </div>
            </div>
            <div class="sub">
              <p>{{langPurchase.guige.dec}}</p>
            </div>
          </div>
          
        </div>
        <div class="params-img-con container">
          <h1 class="common-title">{{ $t('mall.widthDetail')}}</h1>
          <img class="params-img" :src="`${$cdn}images/product_img_content_6_w.png`" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import spinner from '@/components/spinner'
import vcenter from '@/components/vcenter'
import browse from '@/components/browse'
import priceTable from '@/components/priceTable'
import { getPosition } from '@/util'
import number from '@/components/mall/number'
import mallConfig from '@/config/mall'
import sequence from '@/components/sequence'
import { saveConfirmGoods } from '@/util/storage'

export default {
  components: {
    spinner,
    vcenter,
    browse,
    priceTable,
    number,
    sequence
  },
  computed: {
    ...mapState({
      split: state => state.ui.navDivision,
      isLogin: state => state.user.name,
      langPurchase: state => state.language.home.purchase,
      purchasezhijia: state => state.language.home.purchasezhijia,
      language: state => state.language.current,
      langToast: state => state.language.home.toast,
      token: state => state.user.token,
      cart: state => JSON.parse(state.user.cart)
    }),
    totalPrice () {
      return mallConfig.formatNum(mallConfig.price * this.count + (this.selectParts ? mallConfig.zhijiaPrice * this.count : 0))
    }
  },
  data () {
    let detail = {
      left: [
        '数据永久存储',
        '高速上传计算队列',
        '场景分享、热点编辑、隐私加密'
      ],
      right: ['多种个性化功能', '附送30G终身容量']
    }
    let guige = [
      {
        name: '容量和内存',
        val: ['LPDDR4X双通道', '6G内存', 'UFS 2.1', '64GB 机身存储']
      },
      {
        name: '机身尺寸和重量',
        val: ['高度 = 153.3m', '宽度 = 74.5mm', '厚度 = 7.9mm', '重量 = 170g']
      },
      {
        name: '处理器平台',
        val: [
          'Qualcomm® 骁龙™ 845 处理器',
          '10nm 先进制程',
          '单核主频可达 2.8GHz',
          'Adreno™ 630 图形处理器，主频可达 700MHz',
          '配备人工智能引擎（AI Engine）'
        ]
      },
      {
        name: '网络',
        val: ['支持 VoLTE 高质量宽带', '支持三载波聚', '支持 LTE B41 4x4 MIMO']
      },
      {
        name: '屏幕',
        val: [
          '6.17 英寸 In-Cell 全高清显示屏',
          '2242 x 1080 分辨率，403 ppi',
          '康宁®第三代大猩猩®玻璃'
        ]
      }
    ]
    let browdata = [
      {
        small: 'small-0',
        big: 'big-0',
        video: true
      }, {
        small: 'small-1',
        big: 'big-1'
      },
      {
        small: 'small-2',
        big: 'big-2'
      },
      {
        small: 'small-3',
        big: 'big-3'
      }]
    let browactive = browdata[0]
    return {
      detail,
      guige,
      browactive,
      browdata,
      count: 1,
      selectParts: true,
      mallConfig,
      zhijiaCount: 1,
      detailType: 'product',
      pathname: window.location.pathname,
      sequenceArr: [
        {
          name: this.$t('conduct.coreProduct.itemTitle1'),
          img: '6',
          enImg: '1en',
          runAnimation: true
        },
        {
          name: this.$t('conduct.coreProduct.itemTitle2'),
          img: '7',
          enImg: '7',
          runAnimation: true
        },
        {
          name: this.$t('conduct.coreProduct.itemTitle4'),
          img: 'https://4dscene.oss-cn-shenzhen.aliyuncs.com/new4dkk/v2/video/qiumu.mp4',
          runAnimation: true
        },
        {
          name: this.$t('conduct.coreProduct.itemTitle5'),
          img: '8',
          enImg: '8en',
          runAnimation: true
        },
        {
          name: this.$t('conduct.coreProduct.itemTitle6'),
          img: '9',
          enImg: '9',
          runAnimation: true
        },
        {
          name: this.$t('conduct.coreProduct.itemTitle7'),
          img: '10',
          enImg: '10en',
          runAnimation: true
        }
      ]
    }
  },
  methods: {
    handleSpinner (data) {
      this.count = data
    },
    async addcart () {
      let zhijia = {
        goodsId: 7,
        goodsCount: this.count,
        skuSn: 'U15604134406280073'
      }
      let params = {
        goodsId: 4,
        goodsCount: this.count,
        skuSn: 'U15609161635760015'
      }
      if (!this.token) {
        this.$router.push('/login/login')
        return
      }
      await this.$store.dispatch('addCart', params)
      this.selectParts && await this.$store.dispatch('addCart', zhijia)
      this.$toast.show('success', this.langToast['39'])
    },
    pay () {
      if (this.language === 'en') {
        return window.open('https://www.alibaba.com/product-detail/4DKanKan-Pro-3D-camera-3D-space_62183626283.html?spm=a2700.icbuShop.74.1.66b35b10I4miJd')
      }
      if (!this.token) {
        this.$router.push('/login/login')
        return
      }
      let params = {
        type: 'detail',
        sku: [{
          goodsId: 4,
          goodsCount: this.count,
          price: 12800,
          skuSn: 'U15609161635760015'
        }],
        fromList: false
      }
      let zhijia = {
        goodsId: 7,
        goodsCount: this.count,
        price: mallConfig.zhijiaPrice,
        skuSn: 'U15604134406280073'
      }
      this.selectParts && params.sku.push(zhijia)
      saveConfirmGoods(params.sku)
      this.$router.push('/mall/confirm')
    },
    scrollTo (href) {
      this.interval = null
      let inter = 0
      let tag = getPosition(this.$refs[href]).y - 90
      let speed = Math.ceil(tag / 40)
      this.interval = setInterval(() => {
        window.scrollTo(0, inter)
        inter += speed
        if ((window.scrollY || window.pageYOffset) >= tag) {
          clearInterval(this.interval)
        }
      })
    },
    changeSelectParts () {
      this.selectParts=!this.selectParts
    }
  },
  mounted () {
    this.sizeHandle = () => {
      if (this.detailType !== 'product') {
        return
      }
      let height = getPosition(this.$refs.homeLayout).y

      let items = Array.from(this.$refs.homeLayout.querySelectorAll('.plate'))

      if (this.startNumCount && this.slideActive) {
        window.removeEventListener('scroll', this.sizeHandle)
      }

      items.forEach((item, index) => {
        let addHeight = item.offsetParent && (item.offsetParent.nodeName).toLowerCase() === 'body' ? (item.offsetTop + height) : (item.offsetTop + item.offsetParent.offsetTop + height)
        if (addHeight <= window.innerHeight + (window.scrollY || window.pageYOffset) + 500) {
          this.sequenceArr[index]['runAnimation'] = false
        } else {
          this.sequenceArr[index]['runAnimation'] = true
        }
      })
    }
    window.addEventListener('scroll', this.sizeHandle)
  },
  beforeDestroy () {
    clearInterval(this.interval)
    window.removeEventListener('scroll', this.sizeHandle)
  }
}
</script>

<style lang="scss" scoped>
@import "./style.scss";
.intro-title {
  font-size: 16px;
  font-weight: 600;
  color: #202020;
}
.color {
  display: inline-block;
  margin: 7px 0 13px;
  font-weight: bold;
  line-height: 33px;
  i {
    font-weight: normal;
    margin-right: 4px;
  }
  // font-weight: bold;
}
.intro-item {
  
  ul {
    margin: 15px 0 25px;
    padding-left: 23px;
    .color {
      margin: 0 0 0 -24px;
      a {
        font-size: 12px;
        color: #202020;
        font-weight: normal;
        text-decoration: underline;
      }
    }
  }
  li {
    list-style: disc;
    color: #909090;
    line-height: 33px;
    font-size: 16px;
  }
}
</style>