realtorEasier-webSite/pc/src/page/purchase/index.vue

<template>
  <div class="purchase-layout" v-show="split">
    <div class="plate01">
      <div class="main-detail">
        <browse
          :idata='browdata'
          :iactive='browactive'
          :floder="'probrowse'"
          class="product-img"
          :style="{marginLeft:(split - 350)+ 'px'}"
         />
        <!-- <img
          class="product-img"
          :style="{marginLeft:(split - 170)+ 'px'}"
          :src="`${$cdn}images/banner_pro-white.png`"
          alt
        > -->
        <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}}
            <span>{{langPurchase.yushou}}</span>
          </p>
          <template>
            <p class="title first-title">{{langPurchase.color.key}}</p>
            <div class="detail-box">
              <i class="iconfont icon-yuandian">{{langPurchase.color.val}}</i>
            </div>
            <p class="title">{{langPurchase.service.key}}</p>
            <div class="detail-box sceond-box">
              <i class="iconfont icon-yuandian">{{langPurchase.service.type}}</i>
              <!-- <span @click="scrollTo('rlgz')">{{langPurchase.why}}</span> -->
              <ul>
                <li v-for="(item, i) in langPurchase.service.val" :key="i">{{item}}</li>
              </ul>
            </div>
            <p class="title ">{{langPurchase.gift.peijian}}</p>
            <div class="detail-box zhijia" :style="{padding:language==='en'?'10px 2.5% 10px 3.5%':'10px 3.5%'}" :class="{'no-active':!selectParts}" @click="selectParts=!selectParts">
              <img :src="`${$cdn}images/tag-icon.png`" class="t-click" alt>
              <img :src="`${$cdn}images/zhijia.png`" alt>
              <div>
                <p>{{langPurchase.gift.val}}</p>
                <p>{{langPurchase.gift.price}}</p>
              </div>
            </div>
            <p class="title peijian">
              <img :src="`${$cdn}images/perjian-warn.png`" alt="">
              <span @click="$router.push({name:'purchasezhijia'})">{{langPurchase.gift.key}}</span>
            </p>
          </template>
          <template v-if="language!=='en'">
            <p class="title" style="margin-top:20px;">{{langPurchase.count.key}}</p>
            <spinner class="spinner" @count="handleSpinner"/>
          </template>
          <div>
            <div class="btns">
              <div v-if="language!=='en'" class="button add-cart" @click="addcart">
                <vcenter>
                  <span>加入购物车</span>
                </vcenter>
              </div>
              <div class="button"  @click="pay">
                <vcenter>
                  <span>{{langPurchase.buy}}</span>
                </vcenter>
              </div>
            </div>
            <div class="btn-dec" >{{langPurchase.tiaokuan}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="plate02" >
      <div class="b-title">{{langPurchase.guige.name}}</div>
      <div class="params-img-con">
        <img class="params-img" :src="`${$cdn}images/product_img_content_6_w.png`" alt="">
      </div>
      <div class="params-body">
        <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="plate03" ref="rlgz">
      <div class="p03">
        <div class="b-title">{{langPurchase.pricename}}</div>
        <priceTable/>
        <ul class="qa-con">
          <li v-for="(item,i) in langPurchase.pricetxt" :key="i">
            <p>{{item.q}}</p>
            <p v-html="item.a"></p>
          </li>
          <p class="promise">{{langPurchase.notice}}</p>
        </ul>
        <p class="peijian" @click="$router.push({name:'pricedetail'})">
          <img :src="`${$cdn}images/perjian-warn.png`" alt="">
          <span>{{langPurchase.view}}</span>
        </p>
      </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'

export default {
  components: {
    spinner,
    vcenter,
    browse,
    priceTable
  },
  computed: {
    ...mapState({
      split: state => state.ui.navDivision,
      isLogin: state => state.user.name,
      langPurchase: state => state.language.home.purchase,
      language: state => state.language.current,
      langToast: state => state.language.home.toast,
      token: state => state.user.token,
      cart: state => JSON.parse(state.user.cart)
    })
  },
  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
    }
  },
  methods: {
    handleSpinner (data) {
      this.count = data
    },
    async addcart () {
      if (!this.token) {
        return this.$bus.$emit('showAside')
      }
      let zhijia = {
        goodsId: 7,
        goodsCount: this.count,
        skuSn: 'U15604134406280073'
      }
      let params = {
        goodsId: 4,
        goodsCount: this.count,
        skuSn: 'U15609161635760015'
      }
      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')
      }
      let params = {
        type: 'detail',
        sku: [{
          goodsId: 4,
          goodsCount: this.count,
          price: 9800,
          skuSn: 'U15609161635760015'
        }],
        fromList: false
      }
      let zhijia = {
        goodsId: 7,
        goodsCount: this.count,
        price: 899,
        skuSn: 'U15604134406280073'
      }
      this.selectParts && params.sku.push(zhijia)
      this.$bus.$emit('showAside', params)
    },
    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)
        }
      })
    }
  },
  beforeDestroy () {
    clearInterval(this.interval)
  }
}
</script>

<style lang="scss" scoped>
@import "./style.scss";
</style>