|
@@ -1,266 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="purchase-layout container">
|
|
|
- <div class="plate01">
|
|
|
- <div class="main-detail">
|
|
|
- <browse
|
|
|
- :idata='browdata'
|
|
|
- :iactive='browactive'
|
|
|
- :floder="'probrowse'"
|
|
|
- class="product-img"
|
|
|
- />
|
|
|
- <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({
|
|
|
- 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>
|