初学VUE的萌新写的项目中的收货地址功能

收货地址

收货地址主要包括收货地址页面、新增收货地址、修改收货地址、删除收货地址、保存收货地址和显示收货地址等功能，下面通过代码完成收货地址的功能。

5.2.1收货地址页面

收货地址页面展示了用户的收货地址信息，当用户单击底部Tab栏中的“我的”选项，此时，页面会跳转到“我的”页面，在我的页面中找到收货地址选项，此时，单击“收货地址”选项，页面会跳转到“收货地址”的页面，下面通过代码实现收货地址页面的效果。
（1）打开src\pages\User.vue文件，编写代码，具体代码如下。

<router-link :to="{ name: 'address' }" class="mui-navigate-right">
  <img class="mui-media-object mui-pull-left" src="../assets/images/avatar_default.png">
  <div class="mui-media-body">收货地址</div>
</router-link>

上述代码中，将页面中原来的类名为.mui-navigate-right的div元素改为router-link，并通过:to的方式设置目标地址为“{name:'address'}”表示当单击router-link标签时让页面跳转到路由名称为address的页面，img标签中的src属性的值为加载图片路径。

（2）打开src\router.js文件，首先导入组件，编写代码如下。

import Address from './pages/user/Address.vue'
import AddressEdit from './pages/user/AddressEdit.vue'

上述代码中，通过import…from…的方式，导入页面组件Address.vue和AddressEdit.vue组件，其中Address表示收货地址页面，AddressEdit表示编辑收货地址页面。

（3）在src\router.js文件中，配置路由，编写代码如下。

routes: [
  ……（原有代码）
  {
   
    path: '/user/address', component: Address, name: 'address', meta: {
   
    title: '收货地址' } },
  {
   
    path: '/user/address/add', component: AddressEdit, name: 'address_add', meta: {
   
    title: '新增收货地址' } },
],

上述代码中，在routes中，配置路由对象，每个对象表示一条路由，其中path表示路由地址，component的属性值为导入的页面组件名称，name表示路由名称，meta表示设置网页的标题为收货地址。

5.2.2新增收货地址

在实现了收货地址页面效果之后，当单击页面中的“新增收货地址”按钮，让页面跳转到“新增收货地址页面”，然后，填写收货地址信息，例如收件人、联系方式、所在地区和详细地址选项，填写完成之后单击“确认”按钮，完成收货地址的添加功能，下面通过代码实现新增收货地址功能。
（1）打开src\pages\user\AddressEdit.vue文件，编写HTML代码，具体代码如下。

<template>
  <div class="address_edit">
    <form class="mui-input-group">
      <div class="mui-input-row">
        <label>收件人</label>
        <input
          v-model="form.name"
          type="text"
          class="mui-input-clear"
          placeholder="请输入收件人姓名"
        />
      </div>
      <div class="mui-input-row">
        <label>联系方式</label>
        <input
          v-model="form.tel"
          type="text"
          class="mui-input-clear"
          placeholder="请输入手机号"
        />
      </div>
      <div class="mui-input-row">
        <label>所在地区</label>
        <input
          type="text"
          v-model="form.area"
          class="mui-input-clear"
          placeholder="所在地区"
          @click="choose"
        />
        <div class="divwrap">
          <div class="mask" @click="choose" v-show="show"></div>
          <v-distpicker
            v-show="show"
            type="mobile"
            @province="onChangeProvince"
            @city="onChangeCity"
            @area="onChangeArea"
            :province="newInfo.province"
            :city="newInfo.city"
            :area="newInfo.district"
          >
          </v-distpicker>
        </div>
      </div>
      <div class="mui-input-row">
        <label>详细地址</label>
        <input
          v-model="form.detail"
          type="text"
          class="mui-input-clear"
          placeholder="请输入详细地址"
        />
      </div>
      <div class="mui-button-row">
        <button
          size="small"
          @click="save