php/www/vue/src/components/product.vue

<template>
  <div class="product">
    <router-link to="/order">返回</router-link>
    <!--extra-->
    <div class="extra">
      <div v-if="extraB" 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>
  import config from '../config/config'
  import {mapState, mapActions} from 'vuex'
  export default {
    name: 'product',
    data () {
      return {
        productBox: config.productInfo,
        extraB: config.productInfo.extra,
        isActive: -1
      }
    },
    beforeCreate () {},
    computed: {
      ...mapState({
        order: state => state.order,
        orderChange: state => state.orderChange
      })
    },
    methods: {
      ...mapActions([
        'PAYCHANGE'
      ]),
      btnOrder: function (cb) {
        config.formData = new FormData()
        const balance = 0
        let productParamJson = ''
        productParamJson = JSON.stringify([{
          product_id: '57e3a5a49f5160c9048b457c', // 产品ID
          count: '1' // 产品数量
        }])
        //  let coupons = qs.stringify({0: '5836a1979f5160a7048b5a51'})
        //  let coupons = JSON.stringify({0: ''})
        let extraJson = ''
        extraJson = JSON.stringify([{type: '整间日常清洁', price: '388'}])
        const channel = 'wx_pub'
        const addressId = this.$store.state.user.userInfo.shop_address[0].address_id
        const time = '2017-06-21 11:00'
        config.orderInfo = ''
//        config.formData.append('balance', balance)
//        config.formData.append('products', productParamJson)
//        config.formData.append('precedence', 0)
//        config.formData.append('booking_time', time)
//        config.formData.append('order_channel', channel)
//        config.formData.append('user_id', config.userId)
//        config.formData.append('address_id', addressId)
//        config.formData.append('station', '57db39709f5160bb048b456a')
//        config.formData.append('counts', '1')
//        config.formData.append('extra', extraJson)
//        config.formData.append('order_channel', 'wx_pub')
        let tmp = {
          balance: balance,
          products: productParamJson,
          precedence: 0,
          booking_time: time,
          order_channel: channel,
          user_id: config.userId,
          address_id: addressId,
          station: '57db39709f5160bb048b456a',
          //  coupons: coupons,
          counts: 1,
          extra: extraJson
        }
        config.orderInfo = tmp
        this.PAYCHANGE()
      },
      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>