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

<template>
  <div class="purchase-layout">
    <div class="plate01">
      <div class="main-layout">
        <!-- <img class="pro" :src="`${$cdn}images/banner_pro.png`" alt=""> -->
        <browse
          :idata='browdata'
          :floder="'probrowse'"
         />
        <div class="txt-con">
          <img class="p-logo" :src="language==='en'?`${$cdn}images/pro-logo-m-en.png`:`${$cdn}images/pro-logo-m.png`" alt="">
          <div class="p-label" v-html="langPurchase.dec"></div>
          <div class="p-price">{{langPurchase.price}}<span class="zdj">{{langPurchase.yushou}}</span></div>
        </div>
        <div class="attr-con">
          <div class="attr">{{langPurchase.color.key}}</div>
          <div class="box color">
            <i class="iconfont icon-yuandian">{{langPurchase.color.val}}</i>
          </div>
          <div class="attr">{{langPurchase.service.key}}</div>
          <div class="box service">
            <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" v-html="item"></li>
            </ul>
          </div>
          <div class="attr">{{langPurchase.gift.key}}</div>
          <div class="box zhijia" :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" @click="$router.push({name:'purchasezhijia'})">
            <img :src="`${$cdn}images/perjian-warn.png`" alt="">
            <span>{{langPurchase.gift.peijian}}</span>
          </p>
          <div v-if="language!=='en'" class="attr">{{langPurchase.count.key}}</div>
          <spinner v-if="language!=='en'" class="count" @count='handleNum' />
          <div class="dec">{{langPurchase.tiaokuan}}</div>
        </div>
      </div>
    </div>
    <div class="plate02" ref="jsgg">
      <div class="p2-name">{{langPurchase.parmas.name}}</div>
      <div class="p2-imgc">
        <img :src="`${$cdn}images/m-paramspro.png`" alt="">
      </div>
      <div class="p2-pramas">
        <div v-for="(item,i) in langPurchase.parmas.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">* 付款成功后5个工作日内发货，默认顺丰快递包邮</span>
            </span>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="plate03" ref="rlgz">
      <div class="p03">
        <div class="b-title">{{langPurchase.pricename}}</div>
        <priceTable/>
        <ul class="price-txt">
          <li v-for="(item,i) in langPurchase.pricetxt" :key="i">
            <p>{{item.q}}</p>
            <p v-html="item.a"></p>
          </li>
        </ul>
        <p class="peijian" @click="$router.push({name:'pricedetail'})">
          <img :src="`${$cdn}images/perjian-warn.png`" alt="">
          <span style="width:calc(100% - 24px);margin-left:1%;">{{langPurchase.view}}</span>
        </p>
      </div>
    </div> -->
    <div class="hover-btns">
      <div class="h-price">
       {{language!=='en'? `RMB ${selectParts?count*(9800 + 899):count*9800}`:'USD 1799'}}
      </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'
import { getPosition } from '@/util'

export default {
  components: {
    spinner,
    browse,
    priceTable
  },
  computed: {
    ...mapState({
      token: state => state.user.token,
      language: state => state.language.current,
      langPurchase: state => state.language.home.purchase
    })
  },
  data () {
    let browdata = [
      {
        small: 'small-0',
        big: 'big-0',
        video: 'pro-post'
      }, {
        small: 'small-1',
        big: 'big-1'
      },
      {
        small: 'small-2',
        big: 'big-2'
      },
      {
        small: 'small-3',
        big: 'big-3'
      }]
    return {
      count: 1,
      browdata,
      selectParts: true
    }
  },
  methods: {
    handleNum (data) {
      this.count = data
    },
    async addcart () {
      if (!this.token) {
        return this.$router.push({path: '/login'})
      }
      let params = {
        goodsId: 4,
        goodsCount: this.count,
        skuSn: 'U15609161635760015'
      }
      let zhijia = {
        goodsId: 7,
        goodsCount: this.count,
        skuSn: 'U15604134406280073'
      }
      await this.$store.dispatch('addCart', params)
      this.selectParts && await this.$store.dispatch('addCart', zhijia)
      this.$toast.showAddCart('success', '商品加入购物车成功', '前往购物车', () => {
        this.$router.push({path: '/cart'})
      })
    },
    async tobuy () {
      if (!this.token) {
        return this.$router.push({path: '/login'})
      }
      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 = {
        goodsId: 4,
        price: 9800,
        goodsCount: this.count,
        skuSn: 'U15609161635760015'
      }
      let zhijia = {
        goodsId: 7,
        goodsCount: this.count,
        price: 899,
        skuSn: 'U15604134406280073'
      }
      let tmpcart = []
      let temp = {}

      tmpcart.push(params)
      this.selectParts && tmpcart.push(zhijia)
      temp['goods'] = tmpcart

      this.$store.commit('PAYINFO', temp)
      this.$router.push({path: '/vieworder'})
    },
    scrollTo (href) {
      this.interval = null
      let inter = 0
      let tag = getPosition(this.$refs[href]).y - 80
      let speed = Math.ceil(tag / 40)
      this.interval = setInterval(() => {
        window.scrollTo(0, inter)
        inter += speed
        if ((window.scrollY || window.pageYOffset) >= tag) {
          clearInterval(this.interval)
        }
      })
    }
  }
}
</script>

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