21.确认订单

21.1 添加确认订单的页面

// src/views/order/index.vue

<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        title="确认订单"
        left-arrow
      />
    </header>
    <div class="content">
      订单列表
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { NavBar } from 'vant'
Vue.use(NavBar)
export default {
​
}
</script>
​

21.2 添加确认订单的路由

Src/router/index.js

{
    path: '/order/:time',
    name: 'order',
    component: () => import('../views/order/index.vue')
  },
  {
    path: '**',
    component: () => import('../views/home/index.vue')
  }

21.3 封装添加订单的接口

// src/api/order.js
import request from '../utils/request'
​
export function addOrder (params) {
  return request.post('/order/addOrder', params)
}
​

21.4 购物车点击确认订单按钮

// src/views/cart/index.vue

<template>
  <div class="box">
    ....
  </div>
</template>
​
<script>
...
import { addOrder } from '@/api/order'
....
export default {
  ....
  methods: {
    ...
    onSubmit () {
      console.log('确认订单')
      addOrder({
        userid: localStorage.getItem('userid')
      }).then(res => {
        console.log(res.data)
        this.$router.push('/order/' + res.data.time)
      })
    },
    ...
  },
  ...
}
</script>
...
​

21.5 确认订单页面的数据渲染

import request from '../utils/request'
​
export function addOrder (params) {
  return request.post('/order/addOrder', params)
}
​
export function confirmOrder (params) {
  return request.get('/order/confirmOrder', { params })
}
​

<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        title="确认订单"
        left-arrow
      />
    </header>
    <div class="content">
      <van-cell v-if="flag" title="吴勋勋 18813007814"  size="large" is-link label="北京昌平千锋教育" />
      <van-cell v-else title="请添加收获人信息"  size="large" is-link />
      <van-card
        v-for="item of orderlist"
        :key="item.orderid"
        :num="item.num"
        :price="item.originprice"
        :title="item.proname"
        :thumb="item.img1"
      />
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { NavBar, Card, Cell, CellGroup } from 'vant'
import { confirmOrder } from '@/api/order'
Vue.use(NavBar)
Vue.use(Card)
Vue.use(Cell)
Vue.use(CellGroup)
export default {
  data () {
    return {
      orderlist: [],
      flag: false // 判断有没有订单的地址信息
    }
  },
  mounted () {
    confirmOrder({
      userid: localStorage.getItem('userid'),
      time: this.$route.params.time // 动态获取参数
    }).then(res => {
      console.log(res.data)
      this.orderlist = res.data.data
      this.flag = res.data.flag
    })
  }
}
</script>
​

22.地址处理

22.1 创建地址列表页面以及配置路由

s r c/views/order/list.vue

<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        title="订单地址列表"
        left-arrow
      />
    </header>
    <div class="content">
      <van-address-list
        v-model="chosenAddressId"
        :list="addresslist"
        default-tag-text="默认"
        @add="onAdd"
        @edit="onEdit"
      />
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { NavBar, AddressList } from 'vant'
Vue.use(NavBar)
Vue.use(AddressList)
export default {
  data () {
    return {
      addresslist: [],
      chosenAddressId: ''
    }
  },
  methods: {
    onAdd () {},
    onEdit () {}
  },
  mounted () {
  }
}
</script>
​

 {
    // 因为订单地址列表页面，点击 某一个地址时先修改订单地址，然后返回上一页
    // 修改订单的地址 需要知道 哪一个用户在哪一个时间内下的订单（一个时间内可以下很多个订单）
    path: '/orderaddresslist/:time',
    name: 'orderaddresslist',
    component: () => import('../views/order/list.vue')
  },
  {
    path: '**',
    component: () => import('../views/home/index.vue')
  }

22.2 点击确认订单页的地址，可以跳转到地址列表页面

22.3 添加 添加地址页面以及配置路由

Src/views/order/add.vue

<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        title="添加订单地址"
        left-arrow
      />
    </header>
    <div class="content">
​
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { NavBar } from 'vant'
Vue.use(NavBar)
export default {
  data () {
    return {
    }
  },
  methods: {
  },
  mounted () {
  }
}
</script>
​

{
    // 因为添加订单地址页面，点击 保存并使用该地址，然后返回确认订单页面
    // 修改订单的地址 需要知道 哪一个用户在哪一个时间内下的订单（一个时间内可以下很多个订单）
    path: '/orderaddressadd/:time',
    name: 'orderaddressadd',
    component: () => import('../views/order/add.vue')
  },
  {
    path: '**',
    component: () => import('../views/home/index.vue')
  }

22.4 点击添加地址跳转到 添加地址页面

22.5 准备地址的数据

yarn add @vant/area-data -S
​
​

22.6 表单信息

<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        title="添加订单地址"
        left-arrow
      />
    </header>
    <div class="content">
      <van-address-edit
        :area-list="areaList"
        show-set-default
        save-button-text="保存并且使用该地址"
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="onSave"
      />
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { NavBar, AddressEdit } from 'vant'
import { areaList } from '@vant/area-data'
Vue.use(NavBar)
Vue.use(AddressEdit)
export default {
  data () {
    return {
      areaList: areaList
    }
  },
  methods: {
    onSave (content) {
      console.log(content)
    }
  },
  mounted () {
  }
}
</script>
​

22.7 添加地址并使用

// src/api/order.js
import request from '../utils/request'
​
export function addOrder (params) {
  return request.post('/order/addOrder', params)
}
​
export function confirmOrder (params) {
  return request.get('/order/confirmOrder', { params })
}
​
// 添加订单地址 ********************
export function addAddress (params) {
  return request.post('/address/add', params)
}
// 修改订单的地址
export function updateOrderAddress (params) {
  return request.post('/order/updateOrderAddress', params)
}
​

<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        title="添加订单地址"
        left-arrow
      />
    </header>
    <div class="content">
      <van-address-edit
        :area-list="areaList"
        show-set-default
        save-button-text="保存并且使用该地址"
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="onSave"
      />
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { NavBar, AddressEdit } from 'vant'
import { areaList } from '@/utils/area'
import { addAddress, updateOrderAddress } from '@/api/order'
Vue.use(NavBar)
Vue.use(AddressEdit)
export default {
  data () {
    return {
      areaList: areaList
    }
  },
  methods: {
    onSave (content) {
      console.log(content)
      // 添加地址
      content.userid = localStorage.getItem('userid')
      addAddress(content).then(res => {
        // 添加地址成功
        // 修改订单地址并且返回确认订单页面
        content.time = this.$route.params.time
        console.log('1111', content)
        updateOrderAddress(content).then((res1) => {
          // 修改成功返回确认订单页面
          this.$router.go(-2)
        })
      })
    }
  },
  mounted () {
  }
}
</script>
​

22.8 确认订单页面显示正确的地址

<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        title="确认订单"
        left-arrow
      />
    </header>
    <div class="content">
      <!--********************************-->
      <van-cell @click="toAdrsslist" v-if="flag" :title="name + ' ' + tel"  size="large" is-link :label="showAddress" />
      <van-cell @click="toAdrsslist" v-else title="请添加收获人信息"  size="large" is-link />
      <van-card
        v-for="item of orderlist"
        :key="item.orderid"
        :num="item.num"
        :price="item.originprice"
        :title="item.proname"
        :thumb="item.img1"
      />
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { NavBar, Card, Cell, CellGroup } from 'vant'
import { confirmOrder } from '@/api/order'
Vue.use(NavBar)
Vue.use(Card)
Vue.use(Cell)
Vue.use(CellGroup)
export default {
  data () {
    return {
      orderlist: [],
      flag: false, // 判断有没有订单的地址信息
      // ********************************
      name: '',
      tel: '',
      province: '',
      city: '',
      county: '',
      addressDetail: ''
    }
  },
  computed: { // ********************************
    showAddress () {
      let str = ''
      this.province === this.city
        ? str = this.province + this.county + this.addressDetail
        : str = this.province + this.city + this.county + this.addressDetail
      return str
    }
  },
  methods: {
    toAdrsslist () {
      this.$router.push('/orderaddresslist/' + this.$route.params.time)
    }
  },
  mounted () {
    confirmOrder({
      userid: localStorage.getItem('userid'),
      time: this.$route.params.time // 动态获取参数
    }).then(res => {
      console.log('000', res.data)
      this.orderlist = res.data.data
      this.flag = res.data.flag
      // ********************************
      // 收货人信息
      this.name = res.data.address.name
      this.tel = res.data.address.tel
      this.province = res.data.address.province
      this.city = res.data.address.city
      this.county = res.data.address.county
      this.addressDetail = res.data.address.addressDetail
    })
  }
}
</script>
​

22.8 地址列表选择更改订单的地址

// api/order.js 查询地址
export function addresslist (params) {
  return request.get('/address/list', { params })
}
​

<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        title="订单地址列表"
        left-arrow
      />
    </header>
    <div class="content">
      <van-address-list
        v-model="chosenAddressId"
        :list="addresslist"
        default-tag-text="默认"
        @click-item = "updateAddress"
        @add="onAdd"
        @edit="onEdit"
      />
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { NavBar, AddressList } from 'vant'
import { addresslist, updateOrderAddress } from '@/api/order'
Vue.use(NavBar)
Vue.use(AddressList)
export default {
  data () {
    return {
      addresslist: [],
      chosenAddressId: ''
    }
  },
  methods: {
    updateAddress (item) {
      console.log(item)
      item.time = this.$route.params.time
      updateOrderAddress(item).then(() => {
        this.$router.back()
      })
    },
    onAdd () {
      this.$router.push('/orderaddressadd/' + this.$route.params.time)
    },
    onEdit () {}
  },
  mounted () {
    addresslist({
      userid: localStorage.getItem('userid')
    }).then(res => {
      console.log(res.data)
      res.data.data.map((item, index) => {
        let str = ''
        item.province === item.city
          ? str = item.province + item.county + item.addressDetail
          : str = item.province + item.city + item.county + item.addressDetail
        item.address = str
        item.id = index + 1
      })
      this.addresslist = res.data.data
    })
  }
}
</script>
​