对接后台接口

build/webpack.dev.conf.js

@@ -10,7 +10,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin')
 const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
 const portfinder = require('portfinder')
 
-const HOST = '192.168.0.16'
+const HOST = '192.168.0.133'
 const PORT = process.env.PORT && Number(process.env.PORT)
 
 const devWebpackConfig = merge(baseWebpackConfig, {

src/App.vue

@@ -34,6 +34,24 @@ export default {
       showLogin: false
     }
   },
+  watch: {
+    '$store.state.user.token': function (newVal, oldVal) {
+      if (newVal && (newVal !== oldVal)) {
+        // this.$store.dispatch('getInfo', {url: '/user/getUserInfo', name: 'info'})
+        // this.$store.dispatch('getInfo', {url: '/user/cart/list', name: 'cart'})
+      }
+    },
+    '$store.state.user.cart': function (newVal, oldVal) {
+      if (newVal && (newVal !== oldVal)) {
+        let count = 0
+        newVal.forEach(item => {
+          count += item.goodsCount
+        })
+        this.$bus.$emit('updateCart', count)
+      }
+    }
+
+  },
   components: {
     iheader: header,
     ifooter: footer,

src/assets/font/iconfont.css

@@ -1,11 +1,11 @@
 @font-face {
   font-family: 'iconfont';  /* project id 941679 */
-  src: url('//at.alicdn.com/t/font_941679_qxvtny8x88.eot');
-  src: url('//at.alicdn.com/t/font_941679_qxvtny8x88.eot?#iefix') format('embedded-opentype'),
-  url('//at.alicdn.com/t/font_941679_qxvtny8x88.woff2') format('woff2'),
-  url('//at.alicdn.com/t/font_941679_qxvtny8x88.woff') format('woff'),
-  url('//at.alicdn.com/t/font_941679_qxvtny8x88.ttf') format('truetype'),
-  url('//at.alicdn.com/t/font_941679_qxvtny8x88.svg#iconfont') format('svg');
+  src: url('//at.alicdn.com/t/font_941679_x4ma7ymicp.eot');
+  src: url('//at.alicdn.com/t/font_941679_x4ma7ymicp.eot?#iefix') format('embedded-opentype'),
+  url('//at.alicdn.com/t/font_941679_x4ma7ymicp.woff2') format('woff2'),
+  url('//at.alicdn.com/t/font_941679_x4ma7ymicp.woff') format('woff'),
+  url('//at.alicdn.com/t/font_941679_x4ma7ymicp.ttf') format('truetype'),
+  url('//at.alicdn.com/t/font_941679_x4ma7ymicp.svg#iconfont') format('svg');
 }
 .iconfont {
   font-family: "iconfont" !important;
@@ -265,4 +265,12 @@
 
 .icon-plus:before {
   content: "\e668";
+}
+
+.icon-vip_true:before {
+  content: "\e66d";
+}
+
+.icon-vip_false:before {
+  content: "\e66b";
 }

src/components/card/index.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="card-con">
   <!-- <img :src="data.homepic||'https://scene3d.4dage.com/loading/thumb.jpg'"> -->
-  <div class="card-img" :style="{backgroundImage: `url(${data.homepic||'https://scene3d.4dage.com/loading/thumb.jpg'})`}"></div>
+  <div class="card-img" :style="{backgroundImage: `url(${data.homepic||`${cdn}images/default.png`})`}"></div>
   <div class="item-info" @click="goto(data.webSite)">
     <div class="text-info">
       <div>

src/components/citySelect/index.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="select-layout">
+    <select class="prov" v-model="currentPID" @change="handleChange">
+      <option :value="i" v-for="(item,i) in citylist" :key="i">{{item.p}}</option>
+    </select>
+    <select class="city" v-model="currentCID" @change="handleChange">
+      <option :value="i" v-for="(item,i) in currentProv" :key="i">{{item.n}}</option>
+    </select>
+    <select class="dist" v-model="currentSID" @change="handleChange">
+      <option :value="i" v-for="(item,i) in currentCity" :key="i">{{item.s}}</option>
+    </select>
+</div>
+</template>
+
+<script>
+import {citylist} from './city'
+export default {
+  props: ['areaPath'],
+  data () {
+    let idArr = ['', '', '']
+    if (this.areaPath) {
+      let tempArr = this.areaPath.split(',')
+      let [p, c, d] = tempArr
+      idArr = (() => {
+        let tmp = []
+        citylist.forEach((item, index) => {
+          if (item.p === p) {
+            tmp.push(index)
+            item.c.forEach((t2, i2) => {
+              if (t2.n === c) {
+                tmp.push(i2)
+                t2.a.forEach((t3, i3) => {
+                  if (t3.s === d) {
+                    tmp.push(i3)
+                  }
+                })
+              }
+            })
+          }
+        })
+        return tmp
+      })()
+    }
+
+    return {
+      citylist,
+      currentPID: idArr[0] || 18,
+      currentCID: idArr[1] || 3,
+      currentSID: idArr[2] || 2
+    }
+  },
+  computed: {
+    currentProv: function () {
+      let tmp = this.citylist[this.currentPID]
+      return tmp.c
+    },
+    currentCity: function () {
+      let cprov = this.citylist[this.currentPID]
+      let tmp = cprov.c[this.currentCID]
+      return tmp.a
+    }
+  },
+  watch: {
+    currentProv () {
+      this.currentCID = 0
+      this.currentSID = 0
+    }
+  },
+  methods: {
+    handleChange () {
+      let prov = this.citylist[this.currentPID]
+      let city = prov.c[this.currentCID]
+      let dist = city.a[this.currentSID]
+      this.$emit('currentVal', [
+        prov.p, city.n, dist.s
+      ])
+    }
+  },
+  mounted () {
+    this.handleChange()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.select-layout{
+  .prov,.city,.dist{
+    outline: none;
+    appearance: none;
+    border: solid 1px #e7e7e7;
+    background: url('//4dscene.4dage.com/new4dkk/images/myAccount_selectOpen.png') no-repeat white;
+    background-size: 6%;
+    background-position: 95% 50%;
+    width: 200px;
+    line-height: 36px;
+    padding-left: 10px;
+    height: 36px;
+    margin: 10px 25px 10px 0;
+  }
+  .dist{
+    margin: 10px 0 10px 0;
+  }
+}
+</style>

src/components/phone/index.vue

@@ -5,7 +5,8 @@
     <img src="./images/phone_3.png">
     <img src="./images/phone_4.png">
     <div class="iframe">
-      <iframe :src="this.src" />
+      <!-- <iframe :src="this.src" /> -->
+      <video :src="this.src" autoplay muted loop></video>
     </div>
   </div>
 </template>
@@ -114,7 +115,7 @@ export default {
   overflow: hidden;
 }
 
-.phone .iframe iframe {
+.phone .iframe iframe,.phone .iframe video{
   width: 100%;
   height: 100%;
 }

src/components/wave/operators-particles.js

@@ -33,7 +33,7 @@ function init(dom) {
     var PI2 = Math.PI * 2;
     var material = new THREE.SpriteCanvasMaterial({
 
-      color: 0x000000,
+      color: 0x696969,
       program: function (context) {
 
         context.beginPath();

src/main.js

@@ -1,14 +1,17 @@
 import 'babel-polyfill'
 import Vue from 'vue'
 import App from './App'
-import router from './router'
 import vuex from 'vuex'
-import axios from './util/http.js'
+// import axios from './util/http.js'
+// import router from './router'
 
-Vue.prototype.$http = axios
 Vue.prototype.$cdn = 'https://4dscene.4dage.com/new4dkk/'
 
 Vue.use(vuex)
+let axios = require('./util/http.js').default
+let router = require('./router').default
+
+Vue.prototype.$http = axios
 
 Vue.prototype.$bus = new Vue()
 Vue.config.productionTip = false

src/page/about/index.vue

@@ -33,12 +33,12 @@
             <ul>
               <li v-for="(item,idx) in langAbout.events.nodes" :key="idx">
                 <h3>{{item.year}}</h3>
-                <p v-for="(sub, i) in item.txt" :key="i">{{sub}}</p>
+                <p v-for="(sub, i) in item.txt" :key="i" v-html="sub"></p>
               </li>
             </ul>
           </div>
         </div>
-        <div class="contact plate">
+        <!-- <div class="contact plate">
           <img :src="`${$cdn}images/company.png`" alt>
           <div class="e-node">
             <ul>
@@ -48,7 +48,7 @@
               </li>
             </ul>
           </div>
-        </div>
+        </div> -->
       </div>
       <ifooter/>
     </div>

src/page/binocular/index.vue

@@ -56,8 +56,10 @@
       <div class="info">
         <h2 class="b-title">{{langBinocular.guide[0].title[0]}}</h2>
         <p class="b-label">{{langBinocular.guide[0].title[1]}}</p>
-        <!-- <img :src="`${$cdn}images/product_img_content_4.png`" alt=""> -->
-        <phone class="p3-phone" src="https://www.4dkankan.com/showPC.html?m=5cQcvVwp"/>
+        <div class="f-img">
+          <iframe src="https://www.4dkankan.com/showPC.html?m=5cQcvVwp" frameborder="0"/>
+          <!-- <video src="@/assets/video/fenbianlv.mp4" autoplay muted loop></video> -->
+        </div>
       </div>
       <div class="fkkj-layout plate">
         <div class="fkkj-imgcon">
@@ -80,7 +82,7 @@
           <p class="b-label">{{langBinocular.guide[1].title[1]}}</p>
         </div>
       </div>
-      <div class="mxsc-layout plate">
+      <!-- <div class="mxsc-layout plate">
         <div class="mxsc-left">
           <h2 class="b-title">{{langBinocular.guide[2].title[0]}}</h2>
           <p class="b-label">{{langBinocular.guide[2].title[1]}}</p>
@@ -89,7 +91,7 @@
           <img class="mx_house" :src="`${$cdn}images/mx_house.png`" alt>
           <img class="mx_platform" :src="`${$cdn}images/mx_platform.png`" alt>
         </div>
-      </div>
+      </div> -->
       <div class="hdsp-layout plate">
         <div class="hdsp-imgcon">
           <img class="hdsp_1" :src="`${$cdn}images/hdsp_1.png`" alt>
@@ -156,7 +158,6 @@
 import { mapState } from 'vuex'
 import vcenter from '@/components/vcenter'
 import { getPosition } from '@/util'
-import phone from '@/components/phone'
 import browser from '@/util/browser'
 
 export default {
@@ -280,7 +281,7 @@ export default {
     clearTimeout(this.timeout)
     window.removeEventListener('scroll', this.scrollHandle)
   },
-  components: { vcenter, phone }
+  components: { vcenter }
 }
 </script>
 

src/page/binocular/style.scss

@@ -259,14 +259,17 @@ $txt_delay: 0.2s;
     margin: 0 auto;
     color: #fff;
     text-align: center;
-    .p3-phone{
-      width: 1000px;
-      margin-top: 140px;
-    }
-    > img {
-      width: 84%;
-      position: relative;
-      left: -4px;
+    .f-img{
+      width: 888px;
+      height: 509px;
+      margin: 68px auto 80px;
+      border-radius: 4px;
+      overflow: hidden;
+      video,iframe{
+        width: 100%;
+        height: 100%;
+        border-radius: 4px;
+      }
     }
   }
 
@@ -706,18 +709,18 @@ $txt_delay: 0.2s;
   }
 }
 
-.hide6 {
-  .mx_platform {
-    top: -0.2vw !important;
-    opacity: 0 !important;
-  }
-  .b-title,
-  .b-label {
-    animation: fadeDown 0.5s ease-out 1 both !important;
-  }
-}
+// .hide6 {
+//   .mx_platform {
+//     top: -0.2vw !important;
+//     opacity: 0 !important;
+//   }
+//   .b-title,
+//   .b-label {
+//     animation: fadeDown 0.5s ease-out 1 both !important;
+//   }
+// }
 
-.hide7 {
+.hide6 {
   .hdsp_2 {
     top: -3% !important;
     right: 0 !important;
@@ -734,7 +737,7 @@ $txt_delay: 0.2s;
   }
 }
 
-.hide8 {
+.hide7 {
   .boom {
     animation: boom-close 0.6s steps(37) forwards !important;
   }

src/page/cases/index.vue

@@ -6,20 +6,24 @@
       <div class="case-nav">
         <div class="nav-con">
           <vcenter>
-            <div class="list-txt b-title">{{caseType}}</div>
+            <div class="list-nav" :style="{width:language==='en'?'680px':'605px'}">
+              <div class="list-txt b-title">{{caseType}}</div>
+              <router-link class="sub-list b-title" :to="item.to" v-for="(item,i) in navs" :key="i">{{item.name}}</router-link>
+            </div>
             <div class="lists">
               <ul class="list-navs">
-              <li :class="{active:sortActive===item.id}" v-for="(item,index) in langCases.sort.items" :key="index" @click="sortActive = item.id">
-                <span class="b-label">{{item.name}}</span>
-              </li>
-            </ul>
-            <div class="select">
-              <span @click="selectActive=!selectActive" :class="{active:selectActive}">筛选设备</span>
-              <ul :style="{maxHeight:selectActive?'200px':'0',padding:selectActive?'15px 0':'0'}">
-                <li>四维看看 Lite</li>
-                <li>四维看看 Pro</li>
+                <li :class="{active:sortActive===item.id}" v-for="(item,index) in langCases.sort.items" :key="index" @click="sortActive = item.id">
+                  <span class="b-label">{{item.name}}</span>
+                </li>
               </ul>
-            </div>
+              <div class="select">
+                <span @click="selectActive=!selectActive" :class="{active:selectActive}">{{selected}}</span>
+                <ul :style="{maxHeight:selectActive?'200px':'0',padding:selectActive?'15px 0':'0'}">
+                  <li @click="selected= '全部'">全部</li>
+                  <li @click="selected= '四维看看 Lite'">四维看看 Lite</li>
+                  <li @click="selected= '四维看看 Pro'">四维看看 Pro</li>
+                </ul>
+              </div>
             </div>
           </vcenter>
         </div>
@@ -63,6 +67,31 @@ let typeTotal = {
   '其他': 150
 }
 
+let nav = [
+  {
+    name: '其他',
+    to: {name: 'cases', params: {id: '其他'}}
+  },
+  {
+    name: '餐饮',
+    to: {name: 'cases', params: {id: '餐饮'}}
+  },
+  {
+    name: '家居',
+    to: {name: 'cases', params: {id: '家居'}}
+  },
+  {
+    name: '博物馆',
+    to: {name: 'cases', params: {id: '博物馆'}}
+  },
+
+  {
+    name: '房地产',
+    to: {name: 'cases', params: {id: '房地产'}}
+  }
+
+]
+
 let wh = {
   width: window.innerWidth,
   height: window.innerHeight
@@ -86,6 +115,7 @@ export default {
       sortActive: 1,
       scene: [],
       isWide,
+      selected: '筛选设备',
       caseType: null
     }
   },
@@ -93,11 +123,18 @@ export default {
   computed: {
     ...mapState({
       langCases: state => state.language.home.cases,
+      language: state => state.language.current,
       split: state => state.ui.navDivision
-    })
-    // caseType () {
-    //   return this.$route.params.id
-    // }
+    }),
+    navs () {
+      let temp = []
+      nav.map(item => {
+        if (item.name !== this.$route.params.id) {
+          temp.push(item)
+        }
+      })
+      return temp
+    }
   },
   // 监控data中的数据变化
   watch: {
@@ -106,6 +143,7 @@ export default {
     },
     sortActive () {
       this.currentPage = 1
+      this.selectActive = false
       this.getData()
     },
     langCases (newVal) {
@@ -118,6 +156,7 @@ export default {
         this.currentPage = 1
         this.caseType = this.langCases.typeName[newVal]
         this.total = typeTotal[newVal]
+        this.selectActive = false
         this.getData()
       }
     }
@@ -131,7 +170,7 @@ export default {
       window.scrollTo(0, 0)
       let params = {
         sceneType: typeArr[this.caseType],
-        sceneInterest: this.sortActive < 3 ? this.sortActive : this.sortActive - 2,
+        sceneInterest: this.sortActive,
         page: this.currentPage
       }
       let result = await this.$http({

src/page/cases/style.scss

@@ -20,10 +20,25 @@
       padding-bottom: 44px;
       .nav-con {
         font-size: 48px;
-        .list-txt {
-          padding-left: 30px;
-          font-weight: bold;
+        .list-nav{
+          width: 605px;
+          .list-txt {
+            padding-left: 30px;
+            display: inline-block;
+            font-weight: bold;
+            min-width: 100px;
+          }
+          .sub-list{
+            float: right;
+            padding-top: 10px;
+            font-size: 28px;
+            color: #969696;
+            margin-left: 38px;
+            cursor: pointer;
+            text-align: center;
+          }
         }
+        
         .lists{
           display: flex;
           align-items: center;
@@ -61,6 +76,7 @@
             width: 164px;
             text-align: center;
             span{
+              color: #2d2d2d;
               font-size: 16px;
               display: inline-block;
               vertical-align: middle;
@@ -92,7 +108,7 @@
               overflow: hidden;
               max-height: 150px;
               padding: 15px 0;
-              transition:max-height 0.3s ease;
+              transition:all 0.3s ease;
               width: 184px;
               position: absolute;
               background: #fff;
@@ -106,6 +122,11 @@
                 height: 38px;
                 line-height: 38px;
                 color: #a1a1a1;
+                &:hover{
+                  background: #1fe4dc;
+                  color: #2d2d2d;
+
+                }
               }
             }
           }

src/page/eight/index.vue

@@ -7,7 +7,7 @@
         <div class="info">
           <img class="txt-logo" :src="language==='en'?`${$cdn}images/pro-en.png`:`${$cdn}images/pro.png`" alt>
           <div class="logo-dec" v-if="language==='en'">{{langEight.introduce.title}}</div>
-          <h2 class="b-title">RMB 9,999</h2>
+          <h2 class="b-title">{{langEight.introduce.price}}</h2>
           <div class="lite-line"></div>
           <p class="b-label" v-html="langEight.introduce.dec"></p>
           <div class="btns" @click="$router.push({name:'purchase'})">
@@ -46,36 +46,23 @@
 
     <div class="plate03 plate">
       <div class="front">
-        <img class="front-img" :src="`${$cdn}images/camera1.png`" alt="">
-        <div class="f-right">
+        <div class="f-top">
           <h2 class="b-title" v-if="language==='en'">{{langEight.definition.title}}</h2>
           <img class="txt-img" v-else :src="`${$cdn}images/10K.png`" alt="">
           <p class="b-label" v-for="(item,i) in langEight.definition.top.dec" :key="i">{{item}}</p>
-          <!-- <div class="f-params">
-            <span v-for="(item,i) in langEight.definition.top.params" :key="i">
-              {{item}}
-            </span>
-          </div> -->
-          <!-- <img class="f-img" :src="`${$cdn}images/xingkong.png`" alt=""> -->
-          <div class="f-img">
-            <video src="@/assets/video/fenbianlv.mp4" autoplay muted loop></video>
-            <!-- <iframe src="https://www.4dage.com/overview/webvr/tour.html" frameborder="0"></iframe> -->
-          </div>
-          <p class="f-dec b-label">{{langEight.definition.top.intro}}</p>
         </div>
+        <div class="f-img">
+          <video class="p3-video" src="@/assets/video/fenbianlv.mp4" autoplay muted loop></video>
+        </div>
+        <!-- <phone class="p3-phone" :src="require('@/assets/video/fenbianlv.mp4')"/> -->
+        <p class="f-dec b-label">{{langEight.definition.top.intro}}</p>
       </div>
-
     </div>
 
     <div class="plate04 plate">
-      <!-- <div class="info">
-        <h2 class="b-title">{{langEight.hardware[0].title[0]}}</h2>
-        <p class="b-label">{{langEight.hardware[0].title[1]}}</p>
-      </div> -->
       <div class="hsxp-layout">
         <div class="hsxp-imgcon">
           <video class="hsxp-video" src="@/assets/video/xinpian.mp4" autoplay muted loop></video>
-          <!-- <div></div> -->
         </div>
         <div class="hsxp-right">
             <div class="b-title">{{langEight.hardware[1].title[0]}}</div>
@@ -100,7 +87,7 @@
             <div class="b-title">{{langEight.hardware[3].title[0]}}</div>
         </div>
       </div> -->
-      <div class="jzxj-layout plate">
+      <!-- <div class="jzxj-layout plate">
         <div class="jzxj-left">
             <div class="b-title">{{langEight.hardware[4].title[0]}}</div>
             <div class="b-label">{{langEight.hardware[4].title[1]}}</div>
@@ -108,7 +95,7 @@
         <div class="jzxj-imgcon">
           <img :src="`${$cdn}images/jzxj.png`" alt="">
         </div>
-      </div>
+      </div> -->
     </div>
 
     <div class="plate05" >
@@ -131,6 +118,14 @@
             <img @click="runLineCanvas=!runLineCanvas" :src="runLineCanvas?`${$cdn}images/canvas-right.png`:`${$cdn}images/canvas-left.png`" alt="">
         </div>
       </div>
+      <div class="qingxidu" >
+        <div class="b-title">{{langEight.feature.manyou.title[0]}}</div>
+        <div class="mxsc plate">
+          <img class="mx-bg" :src="`${$cdn}images/liti1.png`" alt="">
+          <img class="mx-1" :src="language==='en'?`${$cdn}images/liti2-en.png`:`${$cdn}images/liti2.png`" alt="">
+          <img class="mx-2" :src="`${$cdn}images/liti3.png`" alt="">
+        </div>
+      </div>
       <div class="qingxidu last-item">
         <div class="b-title">{{langEight.feature.model.title[0]}}</div>
         <compare class="c-qxd" :content="langEight.feature.model.case2.content"
@@ -138,6 +133,7 @@
         :ltxt="langEight.feature.model.case2.lTxt"
         :rtxt="langEight.feature.model.case2.rTxt" />
       </div>
+
     </div>
 
     <div class="plate06">

src/page/eight/style.scss

@@ -264,70 +264,47 @@ $num_time: 0.6s;
   }
 
   .front{
-    display: flex;
-    justify-content: space-around;
-    align-items: flex-start;
-    margin: 0 0 0 175px;
+    width: 100%;
     .front-img{
       width: 593px;
       margin-top: 70px;
       flex-shrink: 0;
       animation: fadeUp 0.5s ease-out 1 both $txt_delay;
     }
-    .f-right{
-      flex: 3;
-      margin-left: 52px;
+    .f-top{
+      width: 100%;
+      text-align: center;
       .txt-img{
         margin-bottom: 21px;
       }
       .b-title{
-        margin-bottom: 21px;
         max-width: 800px;
+        margin: 0 auto 21px;
       }
       p{
-        max-width: 800px;
         animation: fadeUp 0.5s ease-out 1 both $txt_delay;
       }
-      .f-params{
-        display: flex;
-        flex-wrap: wrap;
-        margin-top: 70px;
-        span{
-          display: inline-block;
-          width: 50%;
-          color: #fff;
-          line-height: 34px;
-          position: relative;
-          padding-left: 20px;
-          animation: fadeUp 0.5s ease-out 1 both $txt_delay*2;
-          &:before{
-            content: '';
-            display: inline-block;
-            background: url("~@/assets/images/circle_before.png") center no-repeat;
-            background-size: cover;
-            position: absolute;
-            top: 9px;
-            left: 0;
-            width: 16px;
-            height: 16px;
-          }
-        }
-      }
-      .f-img{
-        margin-top: 56px;
-        animation: fadeUp 0.5s ease-out 1 both $txt_delay*3;
-        width: 520px;
-        overflow: hidden;
-        video{
-          width: 100%;
-          border-radius: 4px;
-        }
-      }
-      .f-dec{
-        margin-top: 21px;
-        animation: fadeUp 0.5s ease-out 1 both $txt_delay*4;
+     
+    }
+    .f-img{
+      width: 888px;
+      height: 509px;
+      margin: 68px auto 80px;
+      border-radius: 4px;
+      overflow: hidden;
+      video,iframe{
+        width: 100%;
+        height: 100%;
+        object-fit: fill;
+        border-radius: 4px;
       }
     }
+    .f-dec{
+      text-align: center;
+      width: 100%;
+      margin-top: -64px;
+      animation: fadeUp 0.5s ease-out 1 both $txt_delay*4;
+    }
   }
 }
 
@@ -427,7 +404,7 @@ $num_time: 0.6s;
 
 .plate05{
   padding: 155px 0 0;
-  background: url('~@/assets/images/lin-bg.png') top center no-repeat;
+  background: url('~@/assets/images/lin-bg.png') #060606 top center no-repeat;
   background-size: 100% auto;
   // .num-lighting{
   //   height: 0;
@@ -506,6 +483,28 @@ $num_time: 0.6s;
       }
     }
     
+    .mxsc{
+      width: 1090px;
+      margin: 0 auto;
+      position: relative;
+      .mx-bg{
+        width: 100%;
+      }
+      .mx-1,.mx-2{
+        position: absolute;
+        top: 60%;
+        left: 55%;
+        transform: translate(-50%,-50%);
+      }
+      .mx-1{
+        z-index: 99;
+        top: 47%;
+        left: 50%;
+        opacity: 1;
+        transition: all 0.4s cubic-bezier(.59, .01, .28, 1),
+      }
+      
+    }
     .qxd-4{
       margin-top: 40px;
       padding: 144px 0 172px;
@@ -786,6 +785,10 @@ $num_time: 0.6s;
   .b-title,.b-label,.qmjt-imgcon,.qmjt-imgcon,.cgq-imgcon,.jzxj-imgcon{
     animation: fadeDown 0.5s ease-out 1 both!important;
   }
+  .mx-1{
+    top: 60%!important;
+    opacity: 0!important;
+  }
   .cgq-imgcon div{
     animation: xinpian-close 0.2s steps(5) forwards $ani_delay!important;
   }

src/page/home2/index.vue

@@ -32,7 +32,7 @@
         <div>
           <div class="img-pro">
             <img class="img-banner" :src="`${$cdn}images/banner_pro.png`" >
-            <img class="img-tag" :src="language==='en'?`${$cdn}images/booking-tag-en.png`:`${$cdn}images/booking-tag.png`" alt="">
+            <!-- <img class="img-tag" :src="language==='en'?`${$cdn}images/booking-tag-en.png`:`${$cdn}images/booking-tag.png`" alt=""> -->
           </div>
           <div class="info">
             <img :src="language==='en'?`${$cdn}images/booking-txt-en.png`:`${$cdn}images/booking-txt.png`" alt="">

src/page/home2/style.scss

@@ -296,7 +296,6 @@
     margin: 0 15%;
     .content {
       margin-left: 5%;
-      margin-right: 5%;
     }
   }
 
@@ -639,7 +638,7 @@
         }
       }
       .item-3{
-        margin-right:10%;
+        margin-right:8%;
         .content{
           h2{
             max-width: 600px;

src/page/layout/aside/index.vue

@@ -13,7 +13,7 @@ import cart from './temp/cart'
 export default {
   computed: {
     ...mapState({
-      login: state => state.user.name
+      login: state => state.user.token
     })
   },
   props: ['active'],

src/page/layout/aside/temp/cart.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="cart-con" :style="{maxHeight:active?'100%':'0'}">
-    <component :is="cp" @backList="cp='list'" @toPay="cp='detail'"></component>
+    <component :is="cp" :sku="sku" @backList="cp='list'" @toPay="handlePay"></component>
   </div>
 </template>
 
@@ -12,7 +12,14 @@ export default {
   props: ['active'],
   data () {
     return {
-      cp: 'list'
+      cp: 'list',
+      sku: ''
+    }
+  },
+  methods: {
+    handlePay (data) {
+      this.sku = data
+      this.cp = 'detail'
     }
   },
   components: {

src/page/layout/aside/temp/ctemp/detail.scss

@@ -0,0 +1,352 @@
+
+$theme-color: #1fe4dc;
+$border-color: #e7e7e7;
+input {
+  appearance: none;
+  line-height: 36px;
+  height: 36px;
+  border: solid 1px $border-color;
+  padding-left: 10px;
+  &:focus {
+    border: solid 1px $theme-color;
+  }
+}
+.btn {
+  text-align: center;
+  cursor: pointer;
+}
+.parmary {
+  background-color: $theme-color;
+  width: 126px;
+  height: 36px;
+  line-height: 36px;
+  margin: 10px 25px 0 0;
+}
+.c-button {
+  height: 50px;
+  padding-top: 0;
+  padding-bottom: 0;
+  vertical-align: middle;
+  margin-top: 10px;
+  display: inline-block;
+  background-color: #1fe4dc;
+  text-align: center;
+  cursor: pointer;
+  &:first-child {
+    width: 50px;
+    box-sizing: border-box;
+  }
+
+  &:last-child {
+    width: 150px;
+    line-height: 50px;
+    color: #000;
+    font-size: 14px;
+  }
+}
+
+.detail-layout {
+  overflow: auto;
+  height: 100vh;
+  padding-bottom: 40px;
+  .detail-header {
+    color: #000;
+    font-size: 16px;
+    position: relative;
+    .c-title {
+      height: 70px;
+      line-height: 70px;
+      text-align: center;
+      padding: 0 30px;
+      border-bottom: 1px solid #e7e7e7;
+    }
+    i {
+      position: absolute;
+      color: #999;
+      top: 50%;
+      left: 30px;
+      font-size: 24px;
+      cursor: pointer;
+      transform: translateY(-50%) rotate(-90deg);
+    }
+  }
+  .edit-item {
+    width: 100%;
+    border-bottom: 0;
+    padding: 30px;
+    .info,
+    .address,
+    .invoice {
+      margin-top: 20px;
+      p {
+        line-height: 36px;
+        span {
+          padding-right: 10px;
+        }
+      }
+      .p-desc {
+        color: #a0a0a0;
+        line-height: 24px;
+      }
+      .avatar {
+        width: 68px;
+        height: 68px;
+        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
+        margin: 5px 0;
+      }
+      .nickname {
+        width: 126px;
+      }
+    }
+    .show-address{
+      border: 1px solid $theme-color;
+      background: #f6f9ff;
+      padding: 10px;
+      img{
+        width: 25px;
+        margin: 4px 10px 0 0;
+        display: inline-block;
+        vertical-align: top;
+      }
+      >div{
+        display: inline-block;
+        width: 85%;
+        p{
+          line-height: 26px;
+          color: 16px;
+        }
+      }
+    }
+    .invoice-address{
+      .select-con {
+        div {
+          position: relative;
+          cursor: pointer;
+          width: 200px;
+          line-height: 36px;
+          height: 36px;
+          margin: 10px 26px 10px 0;
+          border: solid 1px $border-color;
+          color: #a0a0a0;
+          padding: 0 10px;
+          display: inline-block;
+          img {
+            display: none;
+            position: absolute;
+            bottom: 0;
+            right: 0;
+          }
+          &:last-of-type {
+            margin-right: 0;
+          }
+        }
+        .tag-active {
+          border: solid 1px $theme-color;
+          color: #000;
+          img {
+            display: inline-block;
+          }
+        }
+      }
+      .invoice-detail{
+        border: 1px solid $theme-color;
+        background: #f6f9ff;
+        padding: 10px;
+      }
+    }
+    .edit-address {
+      .input-con {
+        input {
+          width: 200px;
+          line-height: 36px;
+          height: 36px;
+          margin: 10px 25px 10px 0;
+          &:last-of-type {
+            margin-right: 0;
+          }
+        }
+      }
+      .address-input {
+        input {
+          width: 660px;
+        }
+      }
+    }
+    .edit-invoice {
+      .select-con {
+        div {
+          position: relative;
+          cursor: pointer;
+          width: 200px;
+          line-height: 36px;
+          height: 36px;
+          margin: 10px 26px 10px 0;
+          border: solid 1px $border-color;
+          color: #a0a0a0;
+          padding: 0 10px;
+          display: inline-block;
+          img {
+            display: none;
+            position: absolute;
+            bottom: 0;
+            right: 0;
+          }
+          &:last-of-type {
+            margin-right: 0;
+          }
+        }
+        .tag-active {
+          border: solid 1px $theme-color;
+          color: #000;
+          img {
+            display: inline-block;
+          }
+        }
+      }
+      .input-con {
+        input {
+          width: 316px;
+          line-height: 36px;
+          height: 36px;
+          margin: 10px 25px 10px 0;
+          &:last-of-type {
+            margin-right: 0;
+          }
+        }
+      }
+    }
+  }
+  .pay-type,
+  .express-type,
+  .product-type {
+    .title {
+      padding: 0 30px;
+      font-size: 16px;
+    }
+    .body {
+      padding: 0 30px;
+      .pay-tag {
+        cursor: pointer;
+        border: 1px solid $border-color;
+        width: 200px;
+        line-height: 36px;
+        height: 36px;
+        margin-top: 20px;
+        position: relative;
+        span {
+          margin-left: 36px;
+          display: inline-block;
+          text-align: center;
+          padding-left: 60px;
+        }
+        img {
+          position: absolute;
+        }
+        .t-icon {
+          width: 36px;
+          height: 36px;
+          padding: 6px;
+          left: 0;
+          border-right: 1px solid $border-color;
+        }
+        .t-click {
+          right: 0;
+          bottom: 0;
+          display: none;
+        }
+      }
+      .tag-active {
+        border: 1px solid $theme-color;
+        span {
+          color: #000;
+        }
+        .t-icon {
+          border-right: 1px solid $theme-color;
+        }
+        .t-click {
+          display: inline-block;
+        }
+      }
+    }
+    .express-img {
+      padding: 30px;
+    }
+    .p-info {
+      border-bottom: 1px solid $border-color;
+      padding: 20px 30px;
+      min-height: 80px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      position: relative;
+      img {
+        width: 30px;
+        flex-shrink: 0;
+      }
+      .p-params {
+        padding-left: 30px;
+        vertical-align: middle;
+        position: absolute;
+        top: 50%;
+        left: 50px;
+        transform: translateY(-50%);
+        h3 {
+          font-weight: normal;
+        }
+        p {
+          color: #ddd;
+          margin-top: 5px;
+        }
+      }
+      .p-price{
+        width: 80px;
+        display: inline-block;
+        text-align: left;
+      }
+    }
+    .p-detail {
+      padding: 30px;
+      & > div {
+        display: flex;
+        height: 30px;
+        line-height: 30px;
+        font-size: 16px;
+        justify-content: space-between;
+        span {
+          &:last-child {
+            display: inline-block;
+            width: 80px;
+          }
+        }
+      }
+    }
+    .p-pay{
+      padding: 0 30px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .agree{
+        cursor: pointer;
+        span{
+          color: #a0a0a0;
+          vertical-align: middle;
+          &:first-child{
+            border: solid 1px $border-color;
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            position: relative;
+            top:2px;
+            img{
+              pointer-events: none;
+              position: absolute;
+              top: -6px;
+              left: -4px;
+              width: 24px;
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/page/layout/aside/temp/ctemp/detail.vue

@@ -8,46 +8,49 @@
       <edit
         :name="'收货信息'"
         @clickOper="handleOper('addressStatus')"
-        :oper="addressStatus?'编辑':'保存'"
+        :oper="addressStatus?'编辑':'收起'"
         :isActive="addressStatus"
         class="edit-item"
       >
-        <div class="address" slot="show">
-          <p>
-            <span>陈志广</span>
-            <span>13211064273</span>
-          </p>
-          <p class="p-desc">广东省珠海市唐家高新区港湾1号港11四维时代科技</p>
+        <div class="address show-address" slot="show">
+          <img src="@/assets/images/address-icon.png" alt>
+          <div>
+            <p>{{address.shipName}}</p>
+            <p class="p-desc">{{`${address.shipAreaPath}${address.shipAddress}`}}</p>
+          </div>
         </div>
         <div class="address edit-address" slot="edit">
           <div class="input-con">
-            <input type="text" placeholder="姓名">
-            <input type="text" placeholder="电话">
+            <input type="text" v-model="address.shipName" :placeholder="address.shipName||'姓名'">
+            <input type="text" v-model="address.shipMobile" :placeholder="address.shipMobile||'电话'">
           </div>
           <div class="input-con">
-            <input type="text" placeholder="广东省">
-            <input type="text" placeholder="珠海市">
-            <input type="text" placeholder="唐家湾镇">
+            <citySelect :areaPath="address.shipAreaPath" @currentVal="getCurrentSelect"/>
           </div>
           <div class="input-con address-input">
-            <input type="text" placeholder="港湾1号">
+            <input
+              type="text"
+              v-model="address.shipAddress"
+              :placeholder="address.shipAddress||'详细地址'"
+            >
           </div>
+          <div class="btn parmary">保存</div>
         </div>
       </edit>
       <div class="pay-type">
         <div class="title">支付方式</div>
         <div class="body">
-          <div class="pay-tag" :class="{'tag-active':paytype==='alipay'}" @click="paytype='alipay'">
+          <div class="pay-tag" :class="{'tag-active':paytype===1}" @click="paytype=1">
             <img src="@/assets/images/ali-pay.png" class="t-icon" alt>
             <span>支付宝</span>
             <img src="@/assets/images/tag-icon.png" class="t-click" alt>
           </div>
-          <div class="pay-tag" :class="{'tag-active':paytype==='wechat'}" @click="paytype='wechat'">
+          <div class="pay-tag" :class="{'tag-active':paytype===0}" @click="paytype=0">
             <img src="@/assets/images/wechat-pay.png" class="t-icon" alt>
             <span>微信支付</span>
             <img src="@/assets/images/tag-icon.png" class="t-click" alt>
           </div>
-          <div class="pay-tag" :class="{'tag-active':paytype==='paypal'}" @click="paytype='paypal'">
+          <div class="pay-tag" :class="{'tag-active':paytype===2}" @click="paytype=2">
             <img src="@/assets/images/paypal.png" class="t-icon" alt>
             <span>paypal</span>
             <img src="@/assets/images/tag-icon.png" class="t-click" alt>
@@ -57,12 +60,38 @@
       <edit
         :name="'我的发票抬头'"
         @clickOper="handleOper('invoiceStatus')"
-        :oper="invoiceStatus?'编辑':'保存'"
+        :oper="invoiceStatus?'编辑':'收起'"
         :isActive="invoiceStatus"
         class="edit-item"
       >
-        <div class="invoice" slot="show">
-          <p class="p-desc">暂无信息</p>
+        <div class="invoice invoice-address" slot="show">
+          <div class="select-con">
+            <div :class="{'tag-active':invoice==='noinvoice'}" @click="invoice='noinvoice'">
+              <span>不需要发票</span>
+              <img src="@/assets/images/tag-icon.png" alt>
+            </div>
+            <div :class="{'tag-active':invoice==='normal'}" @click="invoice='normal'">
+              <span>增值税普通发票</span>
+              <img src="@/assets/images/tag-icon.png" alt>
+            </div>
+            <div :class="{'tag-active':invoice==='zengzhi'}" @click="invoice='zengzhi'">
+              <span>增值税专用发票</span>
+              <i></i>
+              <img src="@/assets/images/tag-icon.png" alt>
+            </div>
+          </div>
+          <div class="invoice-detail" v-if="invoice==='normal'">
+            <p>{{invoice2.title}}</p>
+            <p class="p-desc">{{invoice2.code}}</p>
+          </div>
+          <div class="invoice-detail" v-if="invoice==='zengzhi'">
+            <p>{{invoice3.title}}</p>
+            <p class="p-desc">{{invoice3.code}}</p>
+            <p class="p-desc">{{invoice3.organizedAddress}}</p>
+            <p class="p-desc">{{invoice3.registerPhone}}</p>
+            <p class="p-desc">{{invoice3.bankName}}</p>
+            <p class="p-desc">{{invoice3.bankAccount}}</p>
+          </div>
         </div>
         <div class="invoice edit-invoice" slot="edit">
           <div class="select-con">
@@ -80,18 +109,28 @@
               <img src="@/assets/images/tag-icon.png" alt>
             </div>
           </div>
-          <div class="input-con">
-            <input type="text" placeholder="请输入发票抬头">
-            <input type="text" placeholder="18位的统一社会信用代码 / 税务登记号">
-          </div>
-          <div class="input-con">
-            <input type="text" placeholder="注册地址">
-            <input type="text" placeholder="注册电话">
+          <div class="invoice-input" v-if="invoice==='normal'">
+            <div class="input-con">
+              <input type="text" placeholder="请输入发票抬头" v-model="invoice2.title">
+              <input type="text" placeholder="请输入税务登记号（个人用户可不填）" v-model="invoice2.code">
+            </div>
           </div>
-          <div class="input-con">
-            <input type="text" placeholder="开户银行">
-            <input type="text" placeholder="银行账户">
+          <div class="invoice-input" v-if="invoice==='zengzhi'">
+            <div class="input-con">
+              <input type="text" v-model="invoice3.title" placeholder="请输入发票抬头">
+              <input type="text" v-model="invoice3.code" placeholder="请输入税务登记号（个人用户可不填）">
+            </div>
+            <div class="input-con">
+              <input type="text" v-model="invoice3.organizedAddress" placeholder="注册地址">
+              <input type="text" v-model="invoice3.registerPhone" placeholder="注册电话">
+            </div>
+            <div class="input-con">
+              <input type="text" v-model="invoice3.bankName" placeholder="开户银行">
+              <input type="text" v-model="invoice3.bankAccount" placeholder="银行账户">
+            </div>
           </div>
+            <div @click="saveInvoice(invoice)" class="btn parmary">保存</div>
+
         </div>
       </edit>
       <div class="express-type">
@@ -100,18 +139,18 @@
       </div>
       <div class="product-type">
         <div class="title">商品信息</div>
-        <div class="p-info">
+        <div class="p-info" v-for="(item,i) in sku" :key="i">
           <img src="@/assets/images/banner_pro.png" alt>
           <div class="p-params">
             <h3>四维看看 Pro</h3>
-            <p>本机主体 x 1, 拍摄支架 x 1</p>
+            <p>本机主体 x {{item.goodsCount}}, 拍摄支架 x {{item.goodsCount}}</p>
           </div>
-          <div class="p-price">￥ 8,458</div>
+          <div class="p-price">￥ {{item.price}}</div>
         </div>
         <div class="p-detail">
           <div>
             <span>商品总价：</span>
-            <span>￥8,458</span>
+            <span>￥{{getSum()[1]}}</span>
           </div>
           <div>
             <span>税费及其他费用：</span>
@@ -123,15 +162,17 @@
           </div>
           <div>
             <span>合计：</span>
-            <span>￥8,458</span>
+            <span>￥{{getSum()[1]}}</span>
           </div>
         </div>
         <div class="p-pay">
-          <div class="agree">
-            <span></span>
+          <div class="agree"  @click="agree=~agree">
+            <span>
+              <img v-if="agree"  src="@/assets/images/icon-click.png" alt="">
+            </span>
             <span>同意商城销售协议</span>
           </div>
-          <div class="c-button purchase">付款</div>
+          <div class="c-button purchase" @click="pay">付款</div>
         </div>
       </div>
     </div>
@@ -141,21 +182,39 @@
 <script>
 import vcenter from '@/components/vcenter'
 import edit from '@/components/edit'
+import citySelect from '@/components/citySelect'
+import { mapState } from 'vuex'
 
 export default {
+  props: ['sku'],
   data () {
-    let products = ['asd', 'dwdwd']
     return {
-      products,
-      addressStatus: false,
-      invoiceStatus: false,
+      agree: -1,
+      addressStatus: true,
+      invoiceStatus: true,
       invoice: 'noinvoice',
-      paytype: 'wechat'
+      paytype: 0
     }
   },
   components: {
     vcenter,
-    edit
+    edit,
+    citySelect
+  },
+  computed: {
+    ...mapState({
+      invoice2: state => state.user.invoice2 || {},
+      invoice3: state => state.user.invoice3 || {},
+      address: state =>
+        state.user.address || {
+          shipAddress: '',
+          shipAreaPath: '',
+          province: '',
+          city: '',
+          shipMobile: '',
+          shipName: ''
+        }
+    })
   },
   methods: {
     backHandle () {
@@ -163,280 +222,74 @@ export default {
     },
     handleOper (type) {
       this[type] = !this[type]
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-$theme-color: #1fe4dc;
-$border-color: #e7e7e7;
-input {
-  appearance: none;
-  line-height: 36px;
-  height: 36px;
-  border: solid 1px $border-color;
-  padding-left: 10px;
-  &:focus {
-    border: solid 1px $theme-color;
-  }
-}
-.c-button {
-  height: 50px;
-  padding-top: 0;
-  padding-bottom: 0;
-  vertical-align: middle;
-  margin-top: 10px;
-  display: inline-block;
-  background-color: #1fe4dc;
-  text-align: center;
-  cursor: pointer;
-  &:first-child {
-    width: 50px;
-    box-sizing: border-box;
-  }
-
-  &:last-child {
-    width: 150px;
-    line-height: 50px;
-    color: #000;
-    font-size: 14px;
-  }
-}
+    },
+    getCurrentSelect (data) {
+      this.tempSelect = data
+    },
+    getSum () {
+      let sum = 0
+      let count = 0
+      this.sku.forEach(item => {
+        sum += item.goodsCount * item.price
+        count += item.goodsCount
+      })
+      return [count, sum]
+    },
+    pay () {
+      if (!this.agree) { return alert('请同意协议') }
+      let params = {
 
-.detail-layout {
-  overflow: auto;
-  height: 100vh;
-  padding-bottom: 40px;
-  .detail-header {
-    color: #000;
-    font-size: 16px;
-    position: relative;
-    .c-title {
-      height: 70px;
-      line-height: 70px;
-      text-align: center;
-      padding: 0 30px;
-      border-bottom: 1px solid #e7e7e7;
-    }
-    i {
-      position: absolute;
-      color: #999;
-      top: 50%;
-      left: 30px;
-      font-size: 24px;
-      cursor: pointer;
-      transform: translateY(-50%) rotate(-90deg);
-    }
-  }
-  .edit-item {
-    width: 100%;
-    border-bottom: 0;
-    padding: 30px;
-    .info,
-    .address,
-    .invoice {
-      margin-top: 20px;
-      p {
-        line-height: 36px;
-        span {
-          padding-right: 10px;
-        }
-      }
-      .p-desc {
-        color: #a0a0a0;
-        line-height: 24px;
-      }
-      .avatar {
-        width: 68px;
-        height: 68px;
-        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
-        margin: 5px 0;
-      }
-      .nickname {
-        width: 126px;
-      }
-    }
-    .edit-address {
-      .input-con {
-        input {
-          width: 200px;
-          line-height: 36px;
-          height: 36px;
-          margin: 10px 25px 10px 0;
-          &:last-of-type {
-            margin-right: 0;
-          }
-        }
-      }
-      .address-input {
-        input {
-          width: 660px;
-        }
-      }
-    }
-    .edit-invoice {
-      .select-con {
-        div {
-          position: relative;
-          cursor: pointer;
-          width: 200px;
-          line-height: 36px;
-          height: 36px;
-          margin: 10px 25px 10px 0;
-          border: solid 1px $border-color;
-          color: #a0a0a0;
-          padding: 0 10px;
-          display: inline-block;
-          img {
-            display: none;
-            position: absolute;
-            bottom: 0;
-            right: 0;
-          }
-          &:last-of-type {
-            margin-right: 0;
-          }
-        }
-        .tag-active {
-          border: solid 1px $theme-color;
-          color: #000;
-          img {
-            display: inline-block;
-          }
-        }
       }
-      .input-con {
-        input {
-          width: 316px;
-          line-height: 36px;
-          height: 36px;
-          margin: 10px 25px 10px 0;
-          &:last-of-type {
-            margin-right: 0;
+      this.$http
+        .post('user/order/placeOrder', params, {
+          headers: {
+            token: this.token
           }
+        })
+        .then(data => {
+          // let res = data.data
+        })
+    },
+    saveInvoice (cInvoice) {
+      let params = {}
+      if (cInvoice === 'normal') {
+        params = {
+          invoiceType: 2,
+          title: this.invoice2.title,
+          code: this.invoice2.code
         }
-      }
-    }
-  }
-  .pay-type,
-  .express-type,
-  .product-type {
-    .title {
-      padding: 0 30px;
-      font-size: 16px;
-    }
-    .body {
-      padding: 0 30px;
-      .pay-tag {
-        cursor: pointer;
-        border: 1px solid $border-color;
-        width: 200px;
-        line-height: 36px;
-        height: 36px;
-        margin-top: 20px;
-        position: relative;
-        span {
-          margin-left: 36px;
-          display: inline-block;
-          text-align: center;
-          padding-left: 60px;
-        }
-        img {
-          position: absolute;
-        }
-        .t-icon {
-          width: 36px;
-          height: 36px;
-          padding: 6px;
-          left: 0;
-          border-right: 1px solid $border-color;
-        }
-        .t-click {
-          right: 0;
-          bottom: 0;
-          display: none;
-        }
-      }
-      .tag-active {
-        border: 1px solid $theme-color;
-        span {
-          color: #000;
-        }
-        .t-icon {
-          border-right: 1px solid $theme-color;
-        }
-        .t-click {
-          display: inline-block;
-        }
-      }
-    }
-    .express-img {
-      padding: 30px;
-    }
-    .p-info {
-      border-bottom: 1px solid $border-color;
-      padding: 20px 30px;
-      min-height: 80px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      position: relative;
-      img {
-        width: 30px;
-        flex-shrink: 0;
-      }
-      .p-params {
-        padding-left: 30px;
-        vertical-align: middle;
-        position: absolute;
-        top: 50%;
-        left: 50px;
-        transform: translateY(-50%);
-        h3 {
-          font-weight: normal;
-        }
-        p {
-          color: #ddd;
-          margin-top: 5px;
+      } else {
+        let {title, code, organizedAddress, registerPhone, bankName, bankAccount} = this.invoice3
+        params = {
+          invoiceType: 3,
+          title,
+          code,
+          organizedAddress,
+          registerPhone,
+          bankName,
+          bankAccount
         }
       }
-    }
-    .p-detail {
-      padding: 30px;
-      & > div {
-        display: flex;
-        height: 30px;
-        line-height: 30px;
-        font-size: 16px;
-        justify-content: space-between;
-        span {
-          &:last-child {
-            display: inline-block;
-            width: 80px;
+
+      this.$http
+        .post('user/invoice/save', params, {
+          headers: {
+            token: this.token
           }
-        }
-      }
-    }
-    .p-pay{
-      padding: 0 30px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      .agree{
-        cursor: pointer;
-        span{
-          color: #a0a0a0;
-          vertical-align: middle;
-          &:first-child{
-            border: solid 1px $border-color;
-            display: inline-block;
-            width: 16px;
-            height: 16px;
-          }
-        }
-      }
+        })
+        .then(data => {
+          let res = data.data
+          this.invoiceStatus = true
+          localStorage.setItem('invoice', JSON.stringify(res.data))
+        })
     }
+  },
+  mounted () {
+    console.log(this.sku)
   }
 }
+</script>
+
+<style lang="scss" scoped>
+@import "./detail.scss";
 </style>

src/page/layout/aside/temp/ctemp/list.vue

@@ -5,7 +5,7 @@
       <i @click="cartHandle" class="iconfont icon-cuowu"></i>
     </div>
     <div class="items">
-      <div class="item" v-for="(item, index) in products" :key="index">
+      <div class="item" v-for="(item, index) in cart" :key="index">
         <div>
           <img class="product-img" :src="`${$cdn}images/t_product.png`" alt>
           <i @click="cartHandle" class="iconfont icon-plus"></i>
@@ -14,27 +14,27 @@
         <div class="taocan">
           <div>标准套装</div>
           <div class="numAP">
-            <i>-</i>
-            <span>2</span>
-            <i>+</i>
+            <i @click="reduce(item)">-</i>
+            <span>{{item.goodsCount}}</span>
+            <i @click="add(item)">+</i>
           </div>
         </div>
         <div class="jiage">
-          <div>￥3399</div>
+          <div>￥{{item.price}}</div>
           <div class="oper">
-            <span @click="rmItem(item.id)">移除</span>
+            <span @click="rmItem(item)">移除</span>
           </div>
         </div>
       </div>
-      <div v-if="products.length<=0" class="no-cart">
+      <div v-if="cart.length<=0" class="no-cart">
         <img src="@/assets/images/no-cart.png" alt="">
         <p>您的购物车空空如也</p>
         <p>赶紧行动吧</p>
       </div>
     </div>
-    <div v-if="products.length>0" class="jiesuan">
-      <p>共计2件套装</p>
-      <div class="price">￥6,839</div>
+    <div v-if="cart.length>0" class="jiesuan">
+      <p>共计{{getSum()[0]}}件套装</p>
+      <div class="price">￥{{getSum()[1]}}</div>
       <div class="btns">
         <div class="c-button">
           <vcenter>
@@ -49,37 +49,70 @@
 
 <script>
 import vcenter from '@/components/vcenter'
+import { mapState } from 'vuex'
 
 export default {
+  computed: {
+    ...mapState({
+      token: state => state.user.token,
+      cart: state => {
+        if (Object.prototype.toString.call(state.user.cart) === '[object Array]') {
+          return state.user.cart
+        }
+        return (state.user.cart ? JSON.parse(state.user.cart) : [])
+      }
+    })
+  },
   data () {
-    let products = [{
-      id: 0
-    }]
     return {
-      products
+      sum: 0
     }
   },
   components: {
     vcenter
   },
+  mounted () {
+  },
   methods: {
-    rmItem (id) {
-      console.log(id)
-      let arr = []
-      this.products.forEach(item => {
-        if (item.id !== id) {
-          arr.push(item)
+    reduce (item) {
+      if (item.goodsCount > 1) {
+        item.goodsCount--
+        let params = {
+          goodsId: item.goodsId,
+          goodsCount: item.goodsCount
         }
-      })
-      console.log(arr)
-
-      this.products = arr
+        this.$store.dispatch('reduceCart', params)
+      }
+    },
+    add (item) {
+      let params = {
+        goodsId: item.goodsId,
+        goodsCount: 1
+      }
+      this.$store.dispatch('addCart', params)
+    },
+    rmItem (item) {
+      let params = {
+        goodsId: item.goodsId,
+        goodsCount: 0
+      }
+      this.$store.dispatch('reduceCart', params)
     },
     toPay () {
-      this.$emit('toPay')
+      let skus = this.cart
+      this.$emit('toPay', skus)
     },
     cartHandle () {
       this.$bus.$emit('hideAside')
+    },
+    getSum () {
+      let sum = 0
+      let count = 0
+      this.cart.forEach(item => {
+        sum += item.goodsCount * item.price
+        count += item.goodsCount
+      })
+      return [count, sum]
     }
   }
 }

src/page/layout/aside/temp/ltemp/forget.vue

@@ -1,15 +1,65 @@
 <template>
   <div class="iforget-layout">
-    <div class="input"><input placeholder="输入手机号码" type="text"></div>
+    <div class="input"><input placeholder="输入手机号码" v-model="phone" type="text"></div>
     <div class="verification input">
-      <input placeholder="验证码" type="text">
-      <span>获取验证码</span>
+      <input placeholder="验证码" v-model="authCode" type="text">
+      <span @click="getAuthCode">获取验证码</span>
     </div>
-    <div class="input"><input placeholder="新密码" type="text"></div>
-    <div class="input"><input placeholder="再次输入新密码" type="text"></div>
-    <div class="temp-btn submit">提交</div>
+    <div class="input"><input v-model="password" placeholder="新密码" type="password"></div>
+    <div class="input"><input v-model="confirmpass" placeholder="再次输入新密码" type="password"></div>
+    <div class="temp-btn submit" @click="submit">提交</div>
   </div>
 </template>
+<script>
+import {mapState} from 'vuex'
+
+export default {
+  computed: {
+    ...mapState({
+      token: state => state.user.token
+    })
+  },
+  data () {
+    return {
+      phone: '',
+      authCode: '',
+      password: '',
+      confirmpass: ''
+    }
+  },
+  methods: {
+    getAuthCode () {
+      this.$store.dispatch('getAuthCode', this.phone)
+    },
+    submit () {
+      if (!this.password) {
+        return alert('密码格式不正确')
+      }
+      let params = {
+        password: this.password,
+        phoneNum: this.phone,
+        confirmPwd: this.confirmpass,
+        msgAuthCode: this.authCode
+      }
+      this.$http({
+        method: 'post',
+        headers: {
+          token: this.token
+        },
+        data: params,
+        url: 'sso/user/changePassword'
+      }, res => {
+        console.log(res)
+        if (res.data.code === 0) {
+          alert('修改密码成功')
+        } else {
+          alert(res.data.msg)
+        }
+      })
+    }
+  }
+}
+</script>
 
 <style lang="scss" scoped>
   @import './style.scss';

src/page/layout/aside/temp/ltemp/login.vue

@@ -1,10 +1,12 @@
 <template>
   <div class="ilogin-layout">
     <div class="input-con">
-    <div class="input"><input placeholder="请输入手机号码" type="text"></div>
-    <div class="input"><input placeholder="输入密码" type="text"></div>
-      <div class="remember">
-        <span></span>
+    <div class="input"><input v-model="phone" placeholder="请输入手机号码" type="text"></div>
+    <div class="input"><input v-model="password" placeholder="输入密码" type="password"></div>
+      <div class="remember" @click="rememberMe=~rememberMe">
+        <span>
+          <img v-if="rememberMe"  src="@/assets/images/icon-click.png" alt="">
+        </span>
         <span>记住密码</span>
       </div>
       <div class="temp-btn" @click="login">登录</div>
@@ -19,10 +21,38 @@
 </template>
 <script>
 export default {
+  data () {
+    let remember = localStorage.getItem('remember') || ''
+    let username = localStorage.getItem('username')
+    let password = localStorage.getItem('password')
+
+    return {
+      phone: username,
+      password: password,
+      rememberMe: remember
+    }
+  },
+  mounted () {
+
+  },
   methods: {
     login () {
+      localStorage.setItem('remember', this.rememberMe)
+      if (this.rememberMe) {
+        localStorage.setItem('username', this.phone)
+        localStorage.setItem('password', this.password)
+      } else {
+        localStorage.setItem('username', '')
+        localStorage.setItem('password', '')
+      }
+      let params = {
+        phoneNum: this.phone,
+        password: this.password,
+        randomcode: '1234',
+        rememberMe: Boolean(this.rememberMe)
+      }
+      this.$store.dispatch('login', params)
       this.$bus.$emit('hideAside')
-      this.$store.commit('login')
     }
   }
 }

src/page/layout/aside/temp/ltemp/register.vue

@@ -1,18 +1,55 @@
 <template>
   <div class="iregister-layout">
-    <div class="input"><input placeholder="昵称" type="text"></div>
-    <div class="input"><input placeholder="输入手机号码" type="text"></div>
+    <div class="input"><input v-model="nickname" placeholder="昵称" type="text"></div>
+    <div class="input"><input v-model="phone" placeholder="输入手机号码" type="text"></div>
     <div class="verification input">
-      <input placeholder="输入验证码" type="text">
-      <span>获取验证码</span>
+      <input v-model="authCode" placeholder="输入验证码" type="text">
+      <span @click="getAuthCode">获取验证码</span>
     </div>
-    <div class="input"><input placeholder="输入手机号码" type="text"></div>
-    <div class="input"><input placeholder="密码" type="text"></div>
-    <div class="input"><input placeholder="再次输入密码" type="text"></div>
-    <div class="temp-btn submit">提交</div>
+    <div class="input"><input v-model="password" type="password" placeholder="密码" ></div>
+    <div class="input"><input v-model="confirmPass" type="password" placeholder="再次输入密码" ></div>
+    <div class="temp-btn submit" @click="submit">提交</div>
   </div>
 </template>
 
+<script>
+export default {
+  data () {
+    return {
+      nickname: '',
+      phone: '',
+      authCode: '',
+      password: '',
+      confirmPass: ''
+    }
+  },
+  methods: {
+    getAuthCode () {
+      this.$store.dispatch('getAuthCode', this.phone)
+    },
+    submit () {
+      let params = {
+        password: this.password,
+        phoneNum: this.phone,
+        msgAuthCode: this.authCode,
+        nickName: this.nickname,
+        country: '中国',
+        confirmPwd: this.confirmPass
+      }
+      this.$http({
+        method: 'post',
+        data: params,
+        url: '/sso/user/register'
+      }, res => {
+        if (res.code !== 200) {
+          alert(res.msg)
+        }
+      })
+    }
+  }
+}
+</script>
+
 <style lang="scss" scoped>
   @import './style.scss';
 </style>