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

<template>
  <div class="purchase-layout">
    <div class="plate01 container">
      <div class="main-detail">
        <browse
          :idata='browdata'
          :iactive='browactive'
          :floder="'zhijiabrowse'"
          class="product-img"
         />
        <!-- <video class="product-img" :style="{marginLeft:(split - 500)+ 'px'}" :src="`${$cdn}video/zhijia-video.mp4`" autoplay muted loop></video> -->
        <div class="layout">
          <!-- <img class="pro-logo" :src="this.language==='en'?`${$cdn}images/zhijia-logo-en.png`:`${$cdn}images/zhijia-logo-black.png`" alt=""> -->
          <h1 class="pro-title">四维看看Pro三脚架套装</h1>
          <p class="sub b-label" v-html="langPurchase.dec"></p>
          <p class="price">
             ￥{{mallConfig.zhijiaPrice}}
            <!-- <span>{{langPurchase.yushou}}</span> -->
          </p>
          <p class="postage">运费：顺丰包邮</p>
          <template>
            <div class="taozhuang">
              <p class="taozhuang-title">套装内容</p>
              <div class="detail-box sceond-box">
                <ul>
                  <li v-for="(item, i) in langPurchase.service.val" :key="i">{{item}}</li>
                </ul>
              </div>
            </div>
          </template>
          <template v-if="language!=='en'">
            <span class="num-title" >{{langPurchase.count.key}}</span>
            <!-- <spinner class="spinner" @count="handleSpinner"/> -->
            <number v-model="count" :max="99" />
          </template>
          <div>
            <div class="btns">
              <div v-if="language!=='en'" class="button add-cart" @click="addcart">
                <vcenter>
                  <span>{{langPurchase.cart}}</span>
                </vcenter>
              </div>
              <div class="button" @click="pay">
                <vcenter>
                  <span>{{langPurchase.buy}}</span>
                </vcenter>
              </div>
            </div>
            <div class="btn-dec"><h-icon type="gouwuche" class="shop-cart-icon" />{{ $t('mall.fahuo')}}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="plate02">
      <div class="container">
        <h1 class="common-title">{{langPurchase.zhijia.name}}</h1>
        <div class="b-label">{{langPurchase.zhijia.sub}}</div>
      </div>
      
      <!-- <div class="b-title">{{langPurchase.zhijia.name}}</div> -->
      
      <div class="p2-con">
        <img class="p2c-img" :src="`${$cdn}images/zhijia-left.png`" alt="">
        <div class="b-info">
          <div class="right-title">{{langPurchase.zhijia.detail}}</div>
          <div class="right-line"></div>
          <div class="right-con">
            <div v-for="(item,i) in langPurchase.zhijia.detailArr" :key="i">
              <img :src="item.img" alt="">
              <div class="low-title">{{item.name}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="plate03 container" >
      <div class="b-title">{{langPurchase.guige.name}}</div>
      <h-row class="params-con" :gutter="95">
        <h-col class="params-item" :span="12"  v-for="(item,index) in langPurchase.guige.arr" :key="index">
          <div>
            <div class="p-l" :style="{width:language==='en'?'300px':'100px'}">{{item.name}}</div>
            <div class="p-r" :style="{width:getRWidth(index)}">
              <div v-html="sub" v-for="(sub,i) in item.val" :key="i"></div>
            </div>
          </div>
        </h-col>
      </h-row>
      <div class="sub">
        <p v-for="(ites,i) in langPurchase.guige.dec" :key="i">{{ites}}</p>
      </div>
    </div>

    <div class="plate04">
      <div class="container">
        <h1 class="common-title">{{langPurchase.hualun.name}}</h1>
        <div class="b-label">{{langPurchase.hualun.sub}}</div>
      </div>
      <div class="p4-img">
        <img :src=" language==='en'?`${$cdn}images/p4zhijia-len.png`:`${$cdn}images/p4zhijia-l.png`"  alt="">
        <img :src=" language==='en'?`${$cdn}images/p4zhijia-ren.png`:`${$cdn}images/p4zhijia-r.png`"  alt="">
      </div>
    </div>

    <div class="plate03 container" >
      <div class="b-title">{{langPurchase.lunguige.name}}</div>
      <h-row class="params-con" :gutter="95">
        <h-col class="params-item" :span="12"  v-for="(item,index) in langPurchase.lunguige.arr" :key="index">
          <div>
            <div class="p-l" :style="{width:language==='en'?'300px':'100px'}">{{item.name}}</div>
            <div class="p-r" :style="{width:getRWidth(index)}">
              <div v-html="sub" v-for="(sub,i) in item.val" :key="i"></div>
            </div>
          </div>
        </h-col>
      </h-row>

      <div class="sub">
        <p>{{langPurchase.lunguige.dec}}</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 mallConfig from '@/config/mall'
import { saveConfirmGoods } from '@/util/storage'
import number from '@/components/mall/number'

export default {
  components: {
    spinner,
    vcenter,
    browse,
    priceTable,
    number
  },
  computed: {
    ...mapState({
      split: state => state.ui.navDivision,
      isLogin: state => state.user.name,
      langPurchase: state => state.language.home.purchasezhijia,
      langPurchasekankan: state => state.language.home.purchase,
      langToast: state => state.language.home.toast,
      language: state => state.language.current,
      token: state => state.user.token,
      cart: state => JSON.parse(state.user.cart)
    })
  },
  data () {
    let zhijiadetail = [
      {
        name: '专业球形云台',
        img: `${this.$cdn}images/zhijia-detail01.png`
      },
      {
        name: '脚管三段角度调节按钮',
        img: `${this.$cdn}images/zhijia-detail02.png`
      },
      {
        name: '安全的中轴升降锁紧按钮',
        img: `${this.$cdn}images/zhijia-detail03.png`
      },
      {
        name: '防滑保暖致密海绵护手',
        img: `${this.$cdn}images/zhijia-detail04.png`
      },
      {
        name: '可伸缩中轴挂钩稳定脚架',
        img: `${this.$cdn}images/zhijia-detail05.png`
      },
      {
        name: '方便快捷的版扣脚管',
        img: `${this.$cdn}images/zhijia-detail06.png`
      }
    ]
    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'
      },
      {
        small: 'small-4',
        big: 'big-4'
      }]
    let browactive = browdata[0]
    return {
      mallConfig,
      detail,
      zhijiadetail,
      guige,
      browactive,
      browdata,
      count: 1,
      selectParts: true
    }
  },
  methods: {
    getWidth (index) {
      let zhW = index > this.langPurchase.lunguige.arr.length - 5 ? '100%' : index % 2 === 0 ? 'calc(100% - 36.1%)' : '36.1%'
      return this.language === 'en' ? '100%' : zhW
    },
    getRWidth (index) {
      let zhW = index > this.langPurchase.lunguige.arr.length - 5 ? 'calc(100% - 110px)' : '200px'
      return this.language === 'en' ? 'calc(100% - 320px)' : zhW
    },
    handleSpinner (data) {
      this.count = data
    },
    gobuy () {
    },
    async addcart () {
      if (!this.token) {
        return this.$bus.$emit('showAside')
      }
      let params = {
        goodsId: 7,
        goodsCount: this.count,
        skuSn: 'U15604134406280073'
      }
      await this.$store.dispatch('addCart', params)
      this.$toast.show('success', this.langToast['39'])
    },
    pay () {
      if (this.language === 'en') {
        return window.open('https://www.alibaba.com/product-detail/4DKanKan-Pro-Tripod-Set_62431649408.html?spm=a2700.icbuShop.41413.11.339877f3TUXWiN')
      }
      let params = {
        type: 'detail',
        sku: [{
          goodsId: 7,
          goodsCount: this.count,
          price: 899,
          skuSn: 'U15604134406280073'
        }],
        fromList: false
      }
      saveConfirmGoods(params.sku)
      this.$router.push('/mall/confirm')
    }
  },
  beforeDestroy () {
    clearInterval(this.interval)
  }
}
</script>

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