老师帮忙看一下,为啥会报错呢

来源:12-5 新增地址交互实现

小杨同学呀

2021-01-13

图片描述
我只要在姓名栏一输入就报错

写回答

4回答

河畔一角

2021-01-13

你的checkItem对象里面没有定义receiveName和手机号等信息,在data里面加一下

0
1
小杨同学呀
视频里也没提到要➕吧
2021-01-13
共1条回复

小杨同学呀

提问者

2021-01-13

<script>

import Modal from './../components/Modal'

export default {

  name: 'order-confirm',

  components: {

    Modal,

  },

  data() {

    return {

      list: [],

      cartList:[],

      cartTotalPrice: 0,

      count: 0,

      checkedItem:{},

      userAction: '',

      showDelModal: false,

      showEditModal:false,

    }

  },

  mounted() {

    this.getAddressList()

    this.getCartList()

  },

  methods: {

    getAddressList() {

      this.axios.get('/shippings').then((res) => {

        this.list = res.list

      })

    },

    openAddressModal(){

      this.userAction = 0;

      this.checkedItem = '';

      this.showEditModal = true;

    },

    delAddress(item) {

      this.checkedItem = item

      this.userAction = 2

      this.showDelModal = true

    },

    //地址删除编辑新增功能

    submitAddress() {

      let { checkedItem, userAction } = this

      let method,url,params={};

      if (userAction == 0) {

        method = 'post';

        url = '/shippings';

      } else if (userAction == 1) {

        method = 'put';

        url = `/shippings/${checkedItem.id}`;

      } else {

        method = 'delete'; 

        url = `/shippings/${checkedItem.id}`;

      }

      if(userAction == 0 || userAction == 1){

        let { receiverName, receiverMobile, receiverProvince, receiverCity, receiverDistrict, receiverAddress, receiverZip } = checkedItem;

        let errMsg = '';

        if(!receiverName){

           errMsg = '请输入收货人名称'

        }else if(!receiverMobile || !/\d{11}/.test(receiverMobile)){

           errMsg = '请输入手机号'

        }else if(!receiverProvince){

          errMsg ='请选择对应的省份'

        }else if(!receiverCity){

         errMsg ='请选择对应的城市'

        }else if(!receiverDistrict || !receiverAddress){

          errMsg ='请选择对应的街道'

        }else if(!receiverZip || !/\d{6}/.test(receiverZip)){

          errMsg ='请选择对应御品哦'

        }

        if(errMsg){

          this.$message.error(errMsg)

          return;

        }

         params = {

          receiverName,

          receiverMobile,

          receiverProvince,

          receiverCity,

          receiverDistrict,

          receiverAddress,

          receiverZip

        }

      }

      this.axios[method](url,params).then(() => {

        this.closeModal()

        this.getAddressList()

        this.$message.success('操作成功')

      })

    },

    closeModal() {

      this.checkedItem = {}

      this.userAction = ''

      this.showDelModal = false

    },

    getCartList() {

      this.axios.get('/carts').then((res) => {

        let list = res.cartProductVoList

        this.cartTotalPrice = res.cartTotalPrice

        this.cartList = list.filter((item) => item.productSelected)

        this.cartList.map((item) => {

          this.count += item.quantity

        })

      })

    },

  },

}

</script>


0
0

小杨同学呀

提问者

2021-01-13

 <modal title="新增确认" btnType="1" :showModal="showEditModal" @cancel="showEditModal=false" @submit="submitAddress">

      <template v-slot:body>

        <div class="edit-wrap">

          <div class="item">

            <input type="text" class="input" placeholder="姓名"   v-model="checkedItem.receiverName">

            <input type="text" class="input" placeholder="手机号" v-model="checkedItem.receiverMobile">

          </div>

          <div class="item">

               <select name="provice" v-model="checkedItem.receiverProvince">

                  <option value="北京">北京市</option>

                  <option value="田间">天津</option>

                  <option value="黑背">河北省</option>

               </select>

               <select name="city" v-model="checkedItem.receiverCity">

                  <option value="北京">北京市</option>

                  <option value="田间">天津</option>

                  <option value="张家口">张家口</option>

               </select>

               <select name="district" v-model="checkedItem.receiverDistrict">

                  <option value="朝阳区">朝阳区</option>

                  <option value="海淀区">海淀区</option>

                  <option value="东城区">东城区</option>

               </select>

          </div>

          <div class="item">

            <textarea name="street" v-model="checkedItem.receiverAddress"></textarea>

          </div>

          <div class="item">

            <input type="text" class="input" placeholder="邮编" v-model="checkedItem.receiverZip">

          </div>

        </div>

      </template>

    </modal>


0
0

河畔一角

2021-01-13

贴一下orderConfirm组件的代码

0
1
小杨同学呀
粘贴好了老师 style部分 跟svg部门没粘贴 太大了
2021-01-13
共1条回复

Vue全家桶实战 从零独立开发企业级电商系统

Vue全家桶构建企业级电商系统,真实服务端数据对接,高实用性

2560 学习 · 1307 问题

查看课程