|
|
@@ -0,0 +1,274 @@
|
|
|
+<template>
|
|
|
+ <div class="purchase-layout" v-show="split">
|
|
|
+ <div class="plate01">
|
|
|
+ <div class="main-detail">
|
|
|
+ <browse
|
|
|
+ :idata='browdata'
|
|
|
+ :iactive='browactive'
|
|
|
+ :floder="'probrowse'"
|
|
|
+ class="product-img"
|
|
|
+ :style="{marginLeft:(split - 350)+ 'px'}"
|
|
|
+ />
|
|
|
+ <!-- <img
|
|
|
+ class="product-img"
|
|
|
+ :style="{marginLeft:(split - 170)+ 'px'}"
|
|
|
+ :src="`${$cdn}images/banner_pro-white.png`"
|
|
|
+ alt
|
|
|
+ > -->
|
|
|
+ <div class="layout">
|
|
|
+ <img class="pro-logo" :src="language==='en'?`${$cdn}images/pro-logo-en.png`:`${$cdn}images/pro-logo.png`" alt="">
|
|
|
+ <p class="sub b-label" v-html="langPurchase.dec"></p>
|
|
|
+ <p class="price">
|
|
|
+ {{langPurchase.price}}
|
|
|
+ <span>{{langPurchase.yushou}}</span>
|
|
|
+ </p>
|
|
|
+ <template>
|
|
|
+ <p class="title first-title">{{langPurchase.color.key}}</p>
|
|
|
+ <div class="detail-box">
|
|
|
+ <i class="iconfont icon-yuandian">{{langPurchase.color.val}}</i>
|
|
|
+ </div>
|
|
|
+ <p class="title">{{langPurchase.service.key}}</p>
|
|
|
+ <div class="detail-box sceond-box">
|
|
|
+ <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">{{item}}</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <p class="title ">{{langPurchase.gift.peijian}}</p>
|
|
|
+ <div class="detail-box zhijia" :style="{padding:language==='en'?'10px 2.5% 10px 3.5%':'10px 3.5%'}" :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">
|
|
|
+ <img :src="`${$cdn}images/perjian-warn.png`" alt="">
|
|
|
+ <span @click="$router.push({name:'purchasezhijia'})">{{langPurchase.gift.key}}</span>
|
|
|
+ </p>
|
|
|
+ </template>
|
|
|
+ <template v-if="language!=='en'">
|
|
|
+ <p class="title" style="margin-top:20px;">{{langPurchase.count.key}}</p>
|
|
|
+ <spinner class="spinner" @count="handleSpinner"/>
|
|
|
+ </template>
|
|
|
+ <div>
|
|
|
+ <div class="btns">
|
|
|
+ <div v-if="language!=='en'" class="button add-cart" @click="addcart">
|
|
|
+ <vcenter>
|
|
|
+ <span>加入购物车</span>
|
|
|
+ </vcenter>
|
|
|
+ </div>
|
|
|
+ <div class="button" @click="pay">
|
|
|
+ <vcenter>
|
|
|
+ <span>{{langPurchase.buy}}</span>
|
|
|
+ </vcenter>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="btn-dec" >{{langPurchase.tiaokuan}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="plate02" >
|
|
|
+ <div class="b-title">{{langPurchase.guige.name}}</div>
|
|
|
+ <div class="params-img-con">
|
|
|
+ <img class="params-img" :src="`${$cdn}images/product_img_content_6_w.png`" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="params-body">
|
|
|
+ <div class="params-con">
|
|
|
+ <div class="params-item" v-for="(item,index) in langPurchase.guige.arr" :key="index">
|
|
|
+ <div class="p-l">{{item.name}}</div>
|
|
|
+ <div class="p-r">
|
|
|
+ <div v-html="sub" v-for="(sub,i) in item.val" :key="i"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="sub">
|
|
|
+ <p>{{langPurchase.guige.dec}}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="plate03" ref="rlgz">
|
|
|
+ <div class="p03">
|
|
|
+ <div class="b-title">{{langPurchase.pricename}}</div>
|
|
|
+ <priceTable/>
|
|
|
+ <ul class="qa-con">
|
|
|
+ <li v-for="(item,i) in langPurchase.pricetxt" :key="i">
|
|
|
+ <p>{{item.q}}</p>
|
|
|
+ <p v-html="item.a"></p>
|
|
|
+ </li>
|
|
|
+ <p class="promise">{{langPurchase.notice}}</p>
|
|
|
+ </ul>
|
|
|
+ <p class="peijian" @click="$router.push({name:'pricedetail'})">
|
|
|
+ <img :src="`${$cdn}images/perjian-warn.png`" alt="">
|
|
|
+ <span>{{langPurchase.view}}</span>
|
|
|
+ </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 { getPosition } from '@/util'
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ spinner,
|
|
|
+ vcenter,
|
|
|
+ browse,
|
|
|
+ priceTable
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState({
|
|
|
+ split: state => state.ui.navDivision,
|
|
|
+ isLogin: state => state.user.name,
|
|
|
+ langPurchase: state => state.language.home.purchase,
|
|
|
+ language: state => state.language.current,
|
|
|
+ langToast: state => state.language.home.toast,
|
|
|
+ token: state => state.user.token,
|
|
|
+ cart: state => JSON.parse(state.user.cart)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ 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'
|
|
|
+ }]
|
|
|
+ let browactive = browdata[0]
|
|
|
+ return {
|
|
|
+ detail,
|
|
|
+ guige,
|
|
|
+ browactive,
|
|
|
+ browdata,
|
|
|
+ count: 1,
|
|
|
+ selectParts: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleSpinner (data) {
|
|
|
+ this.count = data
|
|
|
+ },
|
|
|
+ async addcart () {
|
|
|
+ if (!this.token) {
|
|
|
+ return this.$bus.$emit('showAside')
|
|
|
+ }
|
|
|
+ let zhijia = {
|
|
|
+ goodsId: 7,
|
|
|
+ goodsCount: this.count,
|
|
|
+ skuSn: 'U15604134406280073'
|
|
|
+ }
|
|
|
+ let params = {
|
|
|
+ goodsId: 4,
|
|
|
+ goodsCount: this.count,
|
|
|
+ skuSn: 'U15609161635760015'
|
|
|
+ }
|
|
|
+ await this.$store.dispatch('addCart', params)
|
|
|
+ this.selectParts && await this.$store.dispatch('addCart', zhijia)
|
|
|
+ this.$toast.show('success', this.langToast['39'])
|
|
|
+ },
|
|
|
+ pay () {
|
|
|
+ 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 = {
|
|
|
+ type: 'detail',
|
|
|
+ sku: [{
|
|
|
+ goodsId: 4,
|
|
|
+ goodsCount: this.count,
|
|
|
+ price: 12800,
|
|
|
+ skuSn: 'U15609161635760015'
|
|
|
+ }],
|
|
|
+ fromList: false
|
|
|
+ }
|
|
|
+ let zhijia = {
|
|
|
+ goodsId: 7,
|
|
|
+ goodsCount: this.count,
|
|
|
+ price: 899,
|
|
|
+ skuSn: 'U15604134406280073'
|
|
|
+ }
|
|
|
+ this.selectParts && params.sku.push(zhijia)
|
|
|
+ this.$bus.$emit('showAside', params)
|
|
|
+ },
|
|
|
+ scrollTo (href) {
|
|
|
+ this.interval = null
|
|
|
+ let inter = 0
|
|
|
+ let tag = getPosition(this.$refs[href]).y - 90
|
|
|
+ let speed = Math.ceil(tag / 40)
|
|
|
+ this.interval = setInterval(() => {
|
|
|
+ window.scrollTo(0, inter)
|
|
|
+ inter += speed
|
|
|
+ if ((window.scrollY || window.pageYOffset) >= tag) {
|
|
|
+ clearInterval(this.interval)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ beforeDestroy () {
|
|
|
+ clearInterval(this.interval)
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+@import "./style.scss";
|
|
|
+</style>
|