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-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"><span>{{langPurchase.color.val}}</span></i>
          </div>
          <div class="attr">{{langPurchase.service.key}}</div>
          <div class="box service">
            <i class="iconfont icon-yuandian">
              <div class="flex-content">
                <span>{{langPurchase.service.type}}</span>
                <a class="title peijian" @click="$router.push({name:'pricedetail'})">
                  <img :src="`${$cdn}images/perjian-warn.png`" alt="">
                  {{$t('mall.knowMore')}}
                </a>
              </div>
            </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 class="title1">{{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>{{$t('mall.knowMore')}}</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" v-if="language === 'zh'"><h-icon class="gouwuche" type="gouwuche" />{{langPurchase.tiaokuan}}</div>
        </div>

      </div>
    </div>
    <div class="plate02" ref="jsgg">
      <ul class="plate02-type-list">
        <li :class="{'is-active': plate02ShowType === 'product'}" @click="plate02ShowType='product'">{{$t('mall.product')}}</li>
        <li :class="{'is-active': plate02ShowType === 'tech'}" @click="plate02ShowType='tech'">{{$t('mall.techDetail')}}</li>
      </ul>
      <div v-show="plate02ShowType === 'product'">
        <ul class="desc-video">
          <li v-for="item in videoArr" :key="item.name">
            <h1 class="common-title" v-html="item.name"></h1>
            <div class="player">
              <video class="video" controls="controls" playsinline="playsinline" muted="muted" :poster="`${$cdn}images/postv${item.post}.png`">
                <source :src="`${$cdn}video/homevideo/v${item.img}.mp4`" type="video/mp4">
              </video>
            </div>
          </li>
        </ul>
      </div>
      <div v-show="plate02ShowType === 'tech'">
        <div class="common-title">{{ $t('mall.techDetail') }}</div>
        <div class="p2-pramas">
          <div v-for="(item,i) in langPurchase.guige.arr" :key="i">
            <p class="title">{{item.name}}</p>
            <div class="detail" >
              <div v-for="(sub,idx) in item.val" v-html="sub" :key="idx">
                <!-- <span v-html="sub">* 付款成功后5个工作日内发货，默认顺丰快递包邮</span> -->
              </div>
            </div>
          </div>
        </div>
        <div class="plate02-white">
          <div class="common-title">{{ $t('mall.widthDetail') }}</div>
          <div class="p2-imgc">
            <img :src="`${$cdn}images/m-paramspro.png`" alt="">
          </div>
          <p class="small-tip">*{{ $t('mall.smallTip') }}</p>
        </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 ${totalPrice}`:'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'
import mallConfig from '@/../../common/mall/mall'
import { i18n } from '@/lang'

export default {
  components: {
    spinner,
    browse,
    priceTable
  },
  computed: {
    ...mapState({
      token: state => state.user.token,
      language: state => state.language.current,
      langPurchase: state => state.language.home.purchase
    }),
    totalPrice () {
      return mallConfig.price * this.count + (this.selectParts ? mallConfig.zhijiaPrice * this.count : 0)
    }
  },
  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 {
      plate02ShowType: 'product',
      mallConfig,
      count: 1,
      browdata,
      selectParts: true,
      techData: [
        {
          label: '机身尺寸',
          desc: [`高度：220.7mm / 宽度：78.2mm / 厚度：78.2mm`]
        },
        {
          label: '分辨率',
          desc: [`4608*3456像素（每个）；8192*4096像素（合计）`]
        },
        {
          label: '存储内存',
          desc: ['16GB']
        },
        {
          label: 'WiFi',
          desc: ['802.11a/b/g/n网络协议 / ', '支持2.4/5GHz通信']
        },
        {
          label: '镜头',
          desc: [`类型：200°鱼眼镜头     孔径：f/2.0     数量：8个`]
        },
        {
          label: '传感器',
          desc: [`范围：1/2.3英寸     数量：8个`]
        },
        {
          label: '电池',
          desc: ['7.4V 4200mAh /  可通过USB快速充电']
        },
        {
          label: '设备接口',
          desc: ['TYPE-C']
        }
      ],
      videoArr: [
        {
          name: i18n.t('conduct.coreProduct.itemTitle1'),
          img: 1,
          post: 1,
          runAnimation: true
        },
        {
          name: i18n.t('conduct.coreProduct.itemTitle2'),
          img: 2,
          post: 2,
          runAnimation: true
        },
        {
          name: i18n.t('conduct.coreProduct.itemTitle4'),
          img: 6,
          post: 6,
          runAnimation: true
        },
        {
          name: i18n.t('conduct.coreProduct.itemTitle5'),
          img: 3,
          post: 3,
          runAnimation: true
        },
        {
          name: i18n.t('conduct.coreProduct.itemTitle6'),
          img: 4,
          post: 4,
          runAnimation: true
        },
        {
          name: i18n.t('conduct.coreProduct.itemTitle7'),
          img: 5,
          post: 5,
          runAnimation: 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: mallConfig.goodsMap[4].skuSn
      }
      let zhijia = {
        goodsId: 7,
        goodsCount: this.count,
        skuSn: mallConfig.goodsMap[7].skuSn
      }
      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.language === 'en') {
        window.location.href = 'https://www.alibaba.com/product-detail/4DKanKan-Pro-3D-camera-3D-space_62183626283.html?spm=a2700.icbuShop.74.1.66b35b10I4miJd'
        return
      }
      if (!this.token) {
        return this.$router.push({path: '/login'})
      }

      let params = {
        goodsId: 4,
        price: mallConfig.price,
        goodsCount: this.count,
        skuSn: mallConfig.goodsMap[4].skuSn
      }
      let zhijia = {
        goodsId: 7,
        goodsCount: this.count,
        price: mallConfig.zhijiaPrice,
        skuSn: mallConfig.goodsMap[7].skuSn
      }
      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';
.plate01{
    .top{
      height: 60px;
      padding-top: 20px;
      text-align: right;
      span{
        padding-right: 5%;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.7);
        line-height: 18px;
        font-weight: bold;
      }
    }
    .main-layout{
      width: 100%;
      text-align: center;
      .pro{
        width: 20%;
        margin: 40px auto;
      }
      .txt-con{
        width: 90%;
        margin: 0 auto;
        text-align: left;
        padding: 16px 0 !important;
        .p-title{
          font-size: 20px;
          color: #202020;
          line-height: 24px;
          font-weight: 700;
        }
        .p-logo{
          width: 165px;
          margin-bottom: 8px;
        }
        .p-label{
          font-size: 12px;
          color: #202020;
          line-height: 16px;
        }
        .p-price{
          margin-top: 10px;
          font-size: 20px;
          line-height: 1;
          color: #202020;
          font-weight: 700;
          .zdj{
            font-size: 16px;
            color: #1fe4dc;
          }
        }
      }
      .attr-con{
        text-align: left;
        width: 90%;
        margin: 0 auto;
        padding: 0 0 40px;
        .icon-yuandian{
          font-size: 12px !important;
          span {
            margin-left: 8px;
            color: #202020 !important;
          }
        }
        .attr{
          font-size: 12px;
          color: #202020;
          line-height: 18px;
          font-weight: bold;
          margin: 12px 0 8px;
        }
        .box{
          display: inline-block;
          color: rgba(0,0,0,.45);
          padding: 0 63px;
          box-sizing: border-box;
          position: relative;
          text-align: left;
          .t-click{
            position: absolute;
            right: 0;
            bottom: 0;
            margin: 0;
            width: 16px;
            height: 16px;
            padding: 0;
          }
        }
        .color{
          width: 100%;
          padding: 0;
          font-size: 14px;
          color: #202020;
          font-weight: bold;
        }
        .service{
          width: 100%;
          display: inline-block;
          padding: 0;
          .icon-yuandian{
            font-size: 14px;
            color: rgba(0, 0, 0, 0.7);
            font-weight: bold;
            display: flex;
            a {
              color: #486ACE !important;
              line-height: 18px;
              margin-top: 0;
              img {
                vertical-align: middle;
                margin-top: -2px;
              }
            }
          }
          .flex-content {
            display: flex;
            justify-content: space-between;
            min-width: 271px;
          }
          ul{
            padding: 6px 10px 0 15px;
            display: inline-block;
            width: 100%;
            vertical-align: top;
            li{
              font-size: 12px;
              line-height: 18px;
              position: relative;
              color: #909090;
              &::before{
                content: '';
                width: 3px;
                height: 3px;
                border-radius: 50%;
                display: inline-block;
                position: absolute;
                left: -10px;
                top: 8px;
                background-color: rgba(0,0,0,.45);
              }
            }
          }
          span{
            color: #1fe4dc;
            font-weight: bold;
            cursor: pointer;
            margin-left: 2%;
          }
        }
        .zhijia{
          padding: 0;
          text-align: left;
          width: 100%;
          border: 1px solid #70eee9;
          padding-left: 22px;
          >div{
            display: inline-block;
            vertical-align: middle;
          }
          p{
            line-height: 18px;
            text-align: left;
            color: #202020;
          }
        }
        .peijian{
          vertical-align: middle;
          margin-top: 10px;
          color: #486ace;
          font-size: 12px;
          cursor: pointer;
          font-weight: normal;
          img{
            vertical-align: middle;
            width: 14px;
            height: 14px;
          }
          span{
            display: inline-block;
            vertical-align: middle;
          }
        }
        .count{
          margin: 0;
        }
        .no-active{
          border: 1px solid #e3e3e3;
          background-color: #fff;
          .t-click{
            display: none;
          }
        }
        .btn{
          cursor: pointer;
          width: 100%;
          height: 50px;
          margin-top: 35px;
          line-height: 50px;
          color: #414141;
          font-size: 14px;
          background-color: #1fe4dc;
          display: inline-block;
          text-align: center;
        }
        .dec{
          color: #909090;
          font-size: 12px;
          display: flex;
          align-items: center;
          text-align: left;
          margin-top: 12px;
          .gouwuche {
            font-size: 18px;
            margin-right: 5px;
          }
        }
      }
    }
  }
</style>