创建购物车地址前端页面，src/views/Address.vue中
<template>
<div>
...
<div class="checkout-page">
<!-- address list 地址列表， 遍历地址-->
<div class="page-title-normal checkout-title">
<h2><span>Shipping address</span></h2>
</div>
<div class="addr-list-wrap">
<div class="addr-list">
<ul>
<li v-for="(item,index) in addressListFilter" v-bind:class="{'check':checkedIndex==index}" @click="checkedIndex=index,selectedAddrId=item.addressId">
<dl>
<dt>{{item.userName}}</dt>
<dd class="address">{{item.streetName}}</dd>
<dd class="tel">{{item.tel}}</dd>
</dl>
<div class="addr-opration addr-del">
<a href="javascript:;" class="addr-del-btn" @click="delAddressConfirm(item.addressId)">
<svg class="icon icon-del"><use xlink:href="#icon-del"></use></svg>
</a>
</div>
<div class="addr-opration addr-set-default">
<a href="javascript:;" class="addr-set-default-btn" @click="setDefault(item.addressId)" v-if="!item.isDefault"><i>Set default</i></a>
</div>
<div class="addr-opration addr-default" v-if="item.isDefault">Default address</div>
</li>
<li class="addr-new">
<div class="add-new-inner">
<i class="icon-add">
<svg class="icon icon-add"><use xlink:href="#icon-add"></use></svg>
</i>
<p>Add new address</p>
</div>
</li>
</ul>
</div>
<!--more列表显示更多地址-->
<div class="shipping-addr-more">
<a class="addr-more-btn up-down-btn" href="javascript:;" @click="expend" v-bind:class="{'open':limit>3}">
more
<i class="i-up-down">
<i class="i-up-down-l"></i>
<i class="i-up-down-r"></i>
</i>
</a>
</div>
</div>
<!-- shipping method 配送方式-->
<div class="page-title-normal checkout-title">
<h2><span>Shipping method</span></h2>
</div>
<div class="shipping-method-wrap">
<div class="shipping-method">
<ul>
<li class="check">
<div class="name">Standard shipping</div>
<div class="price">Free</div>
<div class="shipping-tips">
<p>Once shipped，Order should arrive in the destination in 1-7 business days</p>
</div>
</li>
</ul>
</div>
</div>
<div class="next-btn-wrap">
<!-- 添加跳转路由,动态传参需要绑定v-bind:to="{path:'orderConfirm',query:'addressId':selectAddress}"-->
<router-link class="btn btn--m btn--red" v-bind:to="{path:'orderConfirm',query:{'addressId':selectedAddrId}}">Next</router-link>
</div>
</div>
</div>
</div>
<modal v-bind:md-show="ismdShow" @close="closeModal">
<p slot="message">
您是否确认要删除地址？
</p>
<div slot="btnGroup">
<a class="btn btn--m" href="javascript:;" @click="delAddress">确认</a>
<a class="btn btn--m" href="javascript:;" @click="closeModal">取消</a>
</div>
</modal>
...
</div>
</template>
<script>
import NavFooter from '@/components/NavFooter.vue'
import NavHeader from '@/components/NavHeader.vue'
import NavBread from '@/components/NavBread'
import axios from '../../node_modules/axios/dist/axios.js'
import {currency} from '@/util/currency.js'
import Modal from "../components/Modal";
export default {
data(){
return{
addressList:[],
limit:3, // 地址列表中要展示的地址个数
checkedIndex:0, // 选中的地址索引
ismdShow:false, // 删除地址提示框
addressId:'', // 要删除的地址Id
selectedAddrId:'' // 选中的需要邮寄的地址，用于传递到订单确认界面
}
},
components:{
Modal,
NavHeader,
NavBread,
NavFooter
},
computed:{
addressListFilter(){
return this.addressList.slice(0,this.limit);
}
},
mounted() {
this.init();
},
methods:{
init(){
axios.get('/users/addressList').then((response)=>{
let res = response.data;
this.addressList = res.result;
})
},
// more展开
expend(){
if(this.limit==3){
this.limit = this.addressList.length;
}else{
this.limit = 3;
}
},
// 设置默认地址
setDefault(addressId){
axios.post('/users/setDefault',{
addressId:addressId
}).then((response)=>{
let res = response.data;
if(res.status == '0'){
console.log("setDefault success")
this.init();
}
})
},
// 关闭模块组件
closeModal(){
this.ismdShow = false;
},
// 删除确认弹框
delAddressConfirm(addressId){
this.ismdShow = true;
this.addressId = addressId
},
// 删除地址
delAddress(){
axios.post('/users/delAddress',{
addressId:this.addressId
}).then((response)=>{
let res = response.data;
if(res.status=='0'){
this.ismdShow = false;
console.log("del suc");
this.init();
}
})
}
}
}
</script>
src/router/index.js中添加address路由
import Vue from 'vue'
import Router from 'vue-router'
import GoodsList from '@/views/GoodsList.vue'
import Cart from "@/views/Cart";
import Address from "../views/Address";
Vue.use(Router)
export default new Router({
routes: [
{
path: '/goods',
name: 'GoodsList',
component: GoodsList
},
{
path: '/cart',
name: 'Cart',
component: Cart
},
{
path:'/address',
name:'Address',
component:Address
}
]
})
后端，server/models/users.js在user模型中修改地址列表addressList的格式
var moogoose = require('mongoose');
let userSchema = new moogoose.Schema({
"userId":String,
"userName":String,
"userPwd":String,
"orderList":Array,
"cartList":[
{
"productId":String,
"productName":String,
"salePrice":String,
"productImage":String,
"checked":String,
"productNum":String
}],
"addressList":[
{
"addressId": String,
"userName": String,
"streetName": String,
"postCode": Number,
"tel": Number,
"isDefault": Boolean
}
]
});
module.exports = moogoose.model("User",userSchema)
后端创建新接口， server/routes/users.js中添加：查询用户地址接口 、 设置默认地址接口 、 删除地址接口
// 查询用户地址接口
router.get('/addressList',function (req,res,next) {
var userId = req.cookies.userId
User.findOne({userId:userId},function (err,doc) {
if(err){
res.json({
status:'1',
msg:err.message,
result:''
})
}else{
res.json({
status:'0',
msg:'',
result:doc.addressList
})
}
})
})
// 设置默认地址
router.post("/setDefault",function (req,res,next) {
var userId = req.cookies.userId;
var addressId = req.body.addressId;
if(!addressId){
res.json({
status:'1003',
msg:'addressId is null',
result:''
})
}
User.findOne({userId:userId},function (err,doc) {
if(err){
res.json({
status:'1',
msg:err.message,
result:''
})
}else{
var addressList = doc.addressList;
addressList.forEach((item)=>{ // 遍历所有的地址
if(item.addressId == addressId){
item.isDefault = true;
}else{
item.isDefault = false;
}
})
// 参数修改完后需要保存
doc.save(function (err1,doc1) {
if(err1){
res.json({
status:'1',
msg:err.message,
result:''
})
}else{
res.json({
status:'0',
msg:'',
result:''
})
}
})
}
})
})
// 删除地址接口
router.post('/delAddress',function (req,res,next) {
var userId = req.cookies.userId,addressId = req.body.addressId;
User.update({
userId:userId
},{
$pull:{ // 指向我们要删除的元素
'addressList':{
'addressId':addressId
}
}
},function (err,doc) {
if(err){
res.json({
status:'1',
msg:err.message,
result:''
})
}else{
res.json({
status:'0',
msg:'',
result:'suc'
})
}
});
})
网友评论