product

www/vue/src/components/homeList.vue

@@ -45,7 +45,7 @@
             color: '#fabf4c'
           },
           {
-            name: '新居开慌',
+            name: '新居开荒',
             url: 'http://oduj3utzz.bkt.clouddn.com/home-new-home.png',
             color: '#5adde9'
           },
@@ -66,16 +66,16 @@
       pro: function (productName) {
         console.log(productName)
         let products = this.$store.state.product.products
-        let id = ''
+        let productBox = {}
         for (let i in products) {
+          console.log(products[i].name)
           if (products[i].name === productName) {
-            id = products[i].id
+            productBox = products[i]
           }
         }
-        console.log(this.$store.state.user.userInfo.id)
-        console.log(this.$store.state.product.products)
+        console.log(productBox)
         // 带查询参数，变成 /register?plan=private
-        this.$router.push({path: 'product', query: {productId: id}})
+        this.$router.push({path: 'product', query: {productBox: productBox}})
       }
     }
   }

www/vue/src/components/product.vue

@@ -1,21 +1,158 @@
 <template>
   <div class="product">
-    <h1>这里是product</h1>
+    <!--extra-->
+    <div class="extra">
+      <div v-if="extraB != 0" v-for="(itemExtra,index) in productBox.extra">
+        <div class="extra-text" v-bind:class="{active: index == isActive}" v-on:click="btnAction(index, $event)">
+          {{itemExtra.type}}
+        </div>
+      </div>
+    </div>
+    <!--pics-->
+    <div class="pics">
+      <img v-for="itemImg in productBox.pics" v-bind:src="itemImg.url" alt="">
+    </div>
+    <!--下单-->
+    <div class="btn">
+      <div class="btn-order" v-on:click="btnOrder">立即下单</div>
+    </div>
   </div>
 </template>
 
 <script>
-export default {
-  name: 'product',
-  data () {
-    return {
-      msg: 'Welcome to Your Vue.js App'
+  import axios from 'axios'
+  import config from '../config/config'
+  export default {
+    name: 'product',
+    data () {
+      return {
+        productBox: this.$route.query.productBox,
+        extraB: this.$route.query.productBox.extra.length,
+        isActive: -1
+      }
+    },
+    computed: {
+      classObject: function () {
+        return {
+          active: this.isActive && !this.error,
+          'text-danger': this.error && this.error.type === 'on'
+        }
+      }
+    },
+    methods: {
+      getId: function () {
+        console.log(this.$route.query.productBox)
+      },
+      btnOrder: function (cb) {
+        const balance = 588
+        console.log(balance)
+        let productParamJson = ''
+        productParamJson = JSON.stringify([{
+          product_id: '57e3a5a49f5160c9048b457c', // 产品ID
+          count: '1' // 产品数量
+        }])
+        console.log(productParamJson)
+        let extraJson = ''
+        extraJson = JSON.stringify([{type: '整间日常清洁', price: '388'}])
+        console.log(extraJson)
+        const channel = 'wx_pub'
+        console.log(channel)
+        console.log(config)
+        config.formData.append('balance', balance)
+        config.formData.append('products', productParamJson)
+        config.formData.append('precedence', 0)
+        const time = '周日6月25日  11:00'
+        console.log(time)
+        axios.post('o2o/order/add', config.formData).then(function (res) {
+          cb(res.data)
+        }).catch(function (error) {
+          console.log(error)
+        })
+        /*
+         *
+         *             balance: this.balance,
+         products: JSON.stringify(productParam),
+         memo: this.memo,
+         precedence: '0',
+         booking_time: this.bookingDate + ' ' + this.bookingTime + ':00',
+         address_id: this.address.address_id,
+         coupons: JSON.stringify(coupons),
+         station: this.stationID,
+         type: this.productType,
+         counts: this.productCount,
+         extra: extraJson,
+         tech_id: this.beautician.id,
+         user_id: userID,
+         order_channel: channel
+         *
+         * */
+      },
+      btnAction: function (index) {
+        this.isActive = index
+      }
     }
   }
-}
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
+  /*商品详情图*/
+  .pics {
+    padding-bottom: 12%;
+    background-color: #FFFFFF;
+  }
+
+  .pics img {
+    display: block;
+    width: 100%;
+  }
+
+  /*类目*/
+  .extra {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0 15px;
+    background-color: #fff;
+  }
+
+  .extra > div {
+    width: 50%;
+  }
 
+  .extra-text {
+    border: 1px solid #000;
+    font-size: 0.8rem;
+    transition-duration: 95ms;
+    margin: 10px;
+    padding: 5px;
+    color: #929292;
+  }
+
+  .active {
+    border-color: rgb(13, 12, 8);
+    color: #fff;
+    background: #000;
+  }
+
+  /*下单样式*/
+  .btn {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    left: 0%;
+
+  }
+
+  .btn .btn-order {
+    padding: 3%;
+    width: 85%;
+    margin: 0 auto;
+    background-color: #927603;
+    border: 1px solid #a78b03;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+    color: #ffffff;
+    font-size: 15px;
+  }
 </style>

www/vue/src/components/swiper.vue

@@ -46,7 +46,6 @@ export default {
         // swiper callbacks
         // swiper的各种回调函数也可以出现在这个对象中，和swiper官方一样
         // onTransitionStart(swiper){
-        //   console.log(swiper)
         // },
         // more Swiper configs and callbacks...
         // ...

www/vue/src/config/api.js

@@ -1,12 +1,11 @@
 import axios from 'axios'
 import config from './config'
 // let apiPath = 'http://commontest.yiguanjia.me/index.php?r='
-
+console.log(config.formData)
 export default ({
   // 获取用户信息
   getO2oUserInfo: function (cb) {
     axios.post('o2o/user/info', config.formData).then(function (res) {
-      console.log(res.data)
       cb(res.data)
     })
   },