4dkankan_mobile/src/pages/purchase/index.vue

<template>
  <div class="purchase-layout">
    <div class="plate01">
      <div class="top">
        <span @click="$router.push({name:'eight'})">{{langPurchase.top1}}</span>
        <span @click="scrollTo('jsgg')">{{langPurchase.top2}}</span>
      </div>
      <div class="main-layout">
        <img class="pro" :src="`${$cdn}images/banner_pro.png`" alt="">
        <div class="txt-con">
          <img class="p-logo" :src="`${$cdn}images/pro-logo-m.png`" alt="">
          <div class="p-label" v-html="langPurchase.dec"></div>
          <div class="p-price">{{langPurchase.price}}</div>
        </div>
        <div class="attr-con">
          <div class="attr">{{langPurchase.color.key}}</div>
          <div class="box color">
            <i class="iconfont icon-yuandian"></i>
            {{langPurchase.color.val}}</div>
          <div class="attr">{{langPurchase.service.key}}</div>
          <div class="box service">
            <ul>
              <li v-for="(item,i) in langPurchase.service.val1" :key="i" v-html="item"></li>
            </ul>
            <span class="line"></span>
            <ul>
              <li v-for="(item,i) in langPurchase.service.val2" :key="i" v-html="item"></li>
            </ul>
          </div>
          <div class="attr">{{langPurchase.gift.key}}</div>
          <div class="box zhijia">
            <img :src="`${$cdn}images/zhijia.png`" alt>
            <span>{{langPurchase.gift.val}}</span>
          </div>
          <div class="attr">{{langPurchase.count.key}}</div>
          <spinner class="count" @count='handleNum' />
          <div class="btn" @click="addcart">{{langPurchase.buy}}</div>
          <div class="dec">* 付款成功后5个工作日内发货，默认顺丰快递包邮</div>
        </div>
      </div>
    </div>
    <div class="plate02" ref="jsgg">
      <div class="p2-name">{{langPurchase.parmas.name}}</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"></span>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

import spinner from '@/components/spinner'
import { getPosition } from '@/util'

export default {
  components: {
    spinner
  },
  computed: {
    ...mapState({
      token: state => state.user.token,
      langPurchase: state => state.language.home.purchase
    })
  },
  data () {
    return {
      count: 1
    }
  },
  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'
      }
      await this.$store.dispatch('addCart', params)
      this.$router.push({path: '/cart'})
    },
    scrollTo (href) {
      this.interval = null
      let inter = 0
      let tag = getPosition(this.$refs[href]).y - 48
      let speed = Math.ceil(tag / 40)
      this.interval = setInterval(() => {
        inter += speed
        document.querySelector('#app').scrollTo(0, Math.min(inter, tag))
        if ((document.querySelector('#app').scrollTop) >= tag) {
          clearInterval(this.interval)
        }
      })
    }
  }
}
</script>

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