前端的页面以及路由配置
1.创建views文件夹存放vue文件
1)addressEdit.vue文件
<template> <van-address-edit :area-list="areaList" show-delete :address-info="addressInfo" save-button-text="修改" @save="onSave" @delete="onDelete" /> </template> <script> import AreaList from '../api/area'; import { Toast } from 'vant'; export default { name: "AddressEdit", created(){ let data = JSON.parse(this.$route.query.item) this.addressInfo = data let index = data.address.indexOf('区') if(index < 0) index = data.address.indexOf('县') this.addressInfo.addressDetail = data.address.substring(index+1) }, data() { return { areaList: AreaList, addressInfo: null } }, methods: { onSave(item) { let instance = Toast('修改成功'); setTimeout(() => { instance.close() _this.$router.push('/addressList') }, 1000) const _this = this axios.put('http://localhost:8181/address/update',item).then(function (resp) { if(resp.data.code == 0){ let instance = Toast('修改成功'); setTimeout(() => { instance.close() _this.$router.push('/addressList') }, 1000) } }) }, onDelete() { history.go(-1) } } } </script> <style scoped> </style>
2)AddressList.vue文
<template> <div> <van-address-list v-model="chosenAddressId" :list="list" default-tag-text="默认" @add="onAdd" @edit="onEdit" @select="onselect" /> </div> </template> <script> import { Toast } from 'vant'; export default { data() { return { chosenAddressId: 0, list:'',
//没有连接后端的时候可以使用下面的假数据进行测试
// list: [ // { // id: '1', // name: '张三', // tel: '13000000000', // address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室', // isDefault: true, // areaCode:130105, // }, // { // id: '2', // name: '李四', // tel: '1310000000', // address: '浙江省杭州市拱墅区莫干山路 50 号', // areaCode:130105, // }, // ], disabledList: [ { id: '3', name: '王五', tel: '1320000000', address: '浙江省杭州市滨江区江南大道 15 号', areaCode:130105, }, ], } }, created(){ const _this = this axios.get('http://localhost:8181/address/list').then(function (resp) { _this.list = resp.data.data }) }, methods: { onAdd() { this.$router.push('/addressNew') }, onEdit(item) { let data = JSON.stringify(item) this.$router.push({path:'/addressEdit',query:{item:data}}) }, onselect(item){ let instance = Toast('下单成功'); setTimeout(() => { instance.close(); this.$router.push('detail') }, 1000) let orderForm = { name: item.name, tel: item.tel, address: item.address, specsId: this.$store.state.specsId, quantity: this.$store.state.quantity } const _this = this axios.post('http://localhost:8181/order/create',orderForm).then(function (resp) { if(resp.data.code == 0){ let instance = Toast('下单成功'); setTimeout(() => { instance.close(); _this.$router.push('/detail?orderId='+resp.data.data.orderId) }, 1000) } }) } } } </script>
3)AddressNew.vue地址新增页面
<template> <van-address-edit :area-list="areaList" show-delete @save="onSave" @delete="onDelete" /> </template> <script> import AreaList from '../api/area'; impor