vue应用（一） 实现购物车添加商品弹窗

用到了vant组件库中的步进器

<template>
  <div class="widgets-cover show"  style="height:100%" v-show="show">
    <div class="cover-bg" aria-label="关闭弹层"></div>
    <div class="cover-content" role="dialog">
      <div class="sku-wrap">
        <div class="header">
          <div class="img-wrap">
            <img
              :src="this.detail_content.pic"
              class="j-summary-img"
              aria-label="选中的商品图"
            />
          </div>
          <div class="main">
            <div class="price-wrap">
              <span class="price">¥{
     {
     this.detail_content.jiage}}</span>
            </div>
            <div class="stock">库存 10件</div>
            <div class="sku-info">
              已选择:
              <span>{
     {
     this.detail_content.dtitle}}</span>
            </div>
          </div>
          <a class="sku-close" aria-label="关闭" data-spm-anchor-id="a222m.7628550.0.0">
              <i class="yo-ico" style="font-size:18px" @click="handleClose()">&#xf063;</i>
          </a>
        </div>
        <div class="body">
          <div class="body-item">
            <div class="pre-mods-wrap"></div>
            <div class="address-wrap">
              <h2>
                配送区域
                <span>(配送地可能会影响库存)</span>
              </h2>
              <div class="deliveryContent">
                <div role="button" class="deliveryTo">
                  <i class="hd"></i>
                  <i class="ft"></i>
                  <span>北京市 昌平区 沙河镇</span>
                </div>
                <div></div>
              </div>
            </div>
            <div class="buy-type-wrap"></div>
            <div class="sku-type-pre-wrap"></div>
            <ul class="sku-list-wrap">
              <li>
                <h2 id="prop_title_0">净含量</h2>
                <div class="items" role="radiogroup" aria-labelledby="prop_title_0">
                  <a
                    role="radio"
                    href="javascript:void(0)"
                    data-value="33993:2543016774"
                    class="checked"
                    aria-checked="true"
                    data-spm-anchor-id="a222m.7628550.0.0"
                  >
                    <span data-spm-anchor-id="a222m.7628550.0.i3">{
     {
     this.detail_content.dtitle}}</span>
                  </a>

                </div>
              </li>
            </ul>
            <div class="sku-type-wrap"></div>
            <ul class="bundle-sku-wrap"></ul>
            <div class="mods-wrap"></div>
            <div class="pickup-wrap">
              <section id="s-pickup"></section>
            </div>
            <div class="bundle-wrap"></div>
            <div class="services-wrap"></div>
            <div class="number-wrap">
              <div class="number-line">
                <label for="number">购买数量</label>
                <span class="J_limitTxt limit-txt"></span>
                <div  class="number">
                  <van-stepper v-model="value" input-width="40px" button-size="32px" 
                  style="display:flex" :show-plus="true" show-minus max="100"/>
                </div>
              </div>
            </div>
            <div class="installment-wrap"></div>
          </div>
        </div>
        <div class="footer trade" @click="handleConfirmClick">
          <a class="ok" role="button">
            <p>确定</p>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import {
      Sku,Stepper,Button } from 'vant';
import 'vant/lib/index.less';
Vue.use(Sku).use(Stepper).use(Button);

import {
      LOADCART } from '../../store/modules/action-types' 

export default {
     
  props:{
     
    detail_content:null

  },
  watch:{
     
    detail_content(value){
     
      // console.log(value,'111111111111111');
    }
  },
  data() {
     
    return {
     
      value:1,
      show: true,
      sku:{
     

      },
      goods:{
     

      },
      messageConfig:{
     

      }
    }
  },
  mounted(){
     
    let old = JSON.parse(localStorage.getItem('cart'))
    this.$store.state.cart.all = old
  },
  methods:{
     
    
    handleClose(){
     
      this.show = !this.show
    },
    handleConfirmClick(){
     
      this.$router.push({
     
          path:"/cart"
      })
    let detail_data = this.detail_content
   
    detail_data.count = this.value

    
    // if( localStorage.getItem('cart') )
    // {
     
    //     let old = JSON.parse(localStorage.getItem('cart'))
    //     this.$store.state.all.concat(old)
    //     console.log(old,'before');
    // }
    this.$store.dispatch('cart/' + LOADCART,detail_data)


    }
  },
};
</script>