realtorEasier-webSite/mobile/src/pages/purchasezhijia/index.vue

<template>
  <div class="purchase-layout">
    <div class="plate01">
      <div class="main-layout">
         <browse
          :idata='browdata'
          :floder="'zhijiabrowse'"
         />
        <div class="txt-con">
          <h1 class="goods-name">{{$t('mall.jiaojia')}}</h1>
          <!-- <img class="p-logo" :src="this.language==='en'?`${$cdn}images/zhijia-logo-en.png`:`${$cdn}images/zhijia-logo-black.png`" alt=""> -->
          <div class="p-label" v-html="langzhijia.dec"></div>
          <div class="p-price">{{langzhijia.price}}</div>
        </div>
        <div class="attr-con">
          <div class="attr">{{langzhijia.color.key}}</div>
          <div class="box color">
            <i class="iconfont icon-yuandian" style="margin-right:4px;"></i>{{$t('mall.zhijiaColor')}}
          </div>
          <div class="attr">{{langzhijia.peijian.key}}</div>
          <div class="box service">
            <ul>
              <li v-for="(item,i) in langzhijia.peijian.val" :key="i" v-html="item"></li>
            </ul>
          </div>
          <div v-if="language!=='en'" class="attr">{{langzhijia.count.key}}</div>
          <spinner v-if="language!=='en'" class="count" @count='handleNum' />
          <div class="dec" v-if="language === 'zh'"><h-icon class="gouwuche" type="gouwuche" />{{langzhijia.tiaokuan}}</div>
        </div>
      </div>
    </div>

   <div class="zhijia-params">
    <div class="mobile2">
      <div class="top">
        <h2 class="common-title" v-html="langzhijia.zhijia.name"></h2>
        <!-- <p class="b-text3" v-html="langzhijia.zhijia.sub"></p> -->
        <!-- <phone class="front-img"/> -->
        <img class="front-img" :src="`${$cdn}images/m-zhijia.png`" alt>
      </div>
      <div class="jiaojia">
        <span class="text">{{langzhijia.zhijia.detail}}</span>
        <div class="jiaojia-img">
          <div v-for="(item,i) in langzhijia.zhijia.detailArr" :key="i">
            <img :src="item.img" alt="">
            <div class="b-text1">{{item.name}}</div>
          </div>
        </div>
      </div>
      <div class="p2-pramas">
        <div class="p2-name">{{langzhijia.parmas.name}}</div>
        <div v-for="(item,i) in langzhijia.parmas.detail" :key="i+1">
          <p class="title">{{item.label}}</p>
          <div class="name">{{item.name}}</div>
          <div class="detail" >
            <span v-for="(sub,idx) in item.dec" :key="idx">
              <span v-html="sub"></span>
            </span>
          </div>
        </div>
        <div v-for="(sub,i) in langzhijia.parmas.sub" :key="i" class="sub">{{sub}}</div>
      </div>
    </div>
    <div class="mobile3">
      <h3 class="b-text2">{{langzhijia.hualun.name}}</h3>
      <div class="b-text3">{{langzhijia.hualun.sub}}</div>
      <img class="hualun-img" :src="this.language==='en'?`${$cdn}images/hualun1en.png`:`${$cdn}images/hualun1.png`" alt>
      <img class="hualun-img" :src="this.language==='en'?`${$cdn}images/hualun2en.png`:`${$cdn}images/hualun2.png`" alt>
      <div class="p2-pramas">
        <div class="p2-name">{{langzhijia.lunparmas.name}}</div>
        <div v-for="(item,i) in langzhijia.lunparmas.detail" :key="i">
          <p class="title">{{item.label}}</p>
          <div class="name">{{item.name}}</div>
          <div class="detail" >
            <span v-for="(sub,idx) in item.dec" :key="idx">
              <span v-html="sub"></span>
            </span>
          </div>
        </div>
        <p class="small-tip">{{$t('mall.smallTip')}}</p>
      </div>
    </div>
   </div>

    <div class="hover-btns">
      <div class="h-price">
       {{language!=='en'? `RMB ${count*899}`:''}}
      </div>
      <div class="h-btns">
        <span v-if="language!=='en'" @click="addcart">加入购物车</span>
        <span class="primary" @click="tobuy">{{langPurchase.buy}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

import spinner from '@/components/spinner'
import priceTable from '@/components/priceTable'
import browse from '@/components/browse'

export default {
  components: {
    spinner,
    priceTable,
    browse
  },
  computed: {
    ...mapState({
      token: state => state.user.token,
      langPurchase: state => state.language.home.purchase,
      language: state => state.language.current,
      langzhijia: state => state.language.home.purchasezhijia
    })
  },
  data () {
    let browdata = [
      {
        small: 'small-0',
        big: 'big-0',
        video: 'zhijia-post'
      }, {
        small: 'small-1',
        big: 'big-1'
      },
      {
        small: 'small-2',
        big: 'big-2'
      },
      {
        small: 'small-3',
        big: 'big-3'
      },
      {
        small: 'small-4',
        big: 'big-4'
      }]
    return {
      count: 1,
      browdata,
      selectParts: true
    }
  },
  methods: {
    handleNum (data) {
      this.count = data
    },
    async addcart () {
      if (!this.token) {
        return this.$router.push({path: '/login'})
      }
      let zhijia = {
        goodsId: 7,
        goodsCount: this.count,
        skuSn: 'U15604134406280073'
      }
      this.$store.dispatch('addCart', zhijia)
      this.$toast.showAddCart('success', '商品加入购物车成功', '前往购物车', () => {
        this.$router.push({path: '/cart'})
      })
    },
    async tobuy () {
      if (this.language === 'en') {
        window.location.href = 'https://www.alibaba.com/product-detail/4DKanKan-Pro-Tripod-Set_62431649408.html?spm=a2700.icbuShop.41413.11.339877f3TUXWiN'
        return
      }
      if (!this.token) {
        return this.$router.push({path: '/login'})
      }

      let zhijia = {
        goodsId: 7,
        goodsCount: this.count,
        price: 899,
        skuSn: 'U15604134406280073'
      }
      let tmpcart = []
      let temp = {}
      tmpcart.push(zhijia)
      temp['goods'] = tmpcart

      this.$store.commit('PAYINFO', temp)
      this.$router.push({path: '/vieworder'})
    }

  }
}
</script>

<style lang="scss" scoped>
@import './style.scss';
.small-tip {
  font-size: 12px;
  color: #666;
  line-height: 20px;
  margin-top: 20px;
}
.goods-name {
  font-size: 22px;
  font-weight: bold;
  color: #202020;
  margin-top: 15px;
}
</style>