UNIAPP实战项目笔记64 当前用户修改收货地址的前端和后端

思路

默认地址的修改，先清空当前id下的所有默认地址，再将新地址设为默认
前端 将新值传给后端
后端接受值后更新处理

实例截图

代码

后端 index.js

var express = require('express');
var router = express.Router();
var connection = require('../db/sql.js');
var user = require('../db/UserSql.js');
const jwt = require('jsonwebtoken');// 生成token秘钥

// 验证码
let code = '';
// 接入短信的sdk
// var QcloudSms = require('qcloudsms_js');

//设置跨域访问（设置在所有的请求前面即可）
router.all("*", function (req, res, next) {
	//设置允许跨域的域名，*代表允许任意域名跨域
	res.header("Access-Control-Allow-Origin", "*");
	//允许的header类型,X-Requested-With
	res.header("Access-Control-Allow-Headers", "Appid,Secret,Access-Token,token,Content-Type,Origin,User-Agent,DNT,Cache-Control,X-Requested-With");
    //跨域允许的请求方式 
	res.header("Access-Control-Allow-Methods", "DELETE,PUT,POST,GET,OPTIONS");
	// res.header("Access-Control-Allow-Methods", "*");
	res.header("Content-Type", "application/json;chartset=utf-8");
	// if (req.method == 'OPTIONS')
	// 	res.sendStatus(200); //让options尝试请求快速结束
	// else
		next();
});

/* GET home page. */
router.get('/', function(req, res, next) {
  res.send({
        data:{
            aaa:'1111'
        }
    });
  // res.render('index', { title: 'Express' });
});


/* 测试token数据. */
router.post('/api/ceshi', function(req, res, next) {
    console.log(111);
    res.send({
        data:{
            aaa:'1111'
        }
    });
});

/* 当前用户修改收货地址 */
router.post('/api/updateAddress', function(req, res, next) {
    let token = req.headers.token;
    let phone = jwt.decode(token);
    let name = req.body.name;
    let tel = req.body.tel;
    let province = req.body.province;
    let city = req.body.city;
    let district = req.body.district;
    let address = req.body.address;
    let isDefault = req.body.isDefault;
    let id = req.body.id;
    connection.query( `select * from user where phone = ${phone.name}`,function(error,results, fields){
        let userId = results[0].id;
        // 默认地址处理,当前用户只能有一个默认地址
        connection.query(`select * from address where userid=${userId} and isDefault = ${isDefault}`,function(err2,res2,fields2){
            let childId = results[0].id;
            connection.query(`update address set isDefault = replace(isDefault,"1","0") where userid=${childId}`,function(err3,res3){
                // console.log(err3,res3);
                // 
                let sqlupdate = "update address set name=?,tel=?,province=?,city=?,district=?,address=?,isDefault=?,userid=? where id = '"+id+"'";
                connection.query(sqlupdate,[name,tel,province,city,district,address,isDefault,userId],function(err1,res1,field1){
                    // console.log(err1,res1,field1);
                    res.send({
                        data:{
                            success:"成功"
                        }
                    })
                });
            });
        });
        
    });
    
});

/* 当前用户新增收货地址 */
router.post('/api/addAddress', function(req, res, next) {
    let token = req.headers.token;
    let phone = jwt.decode(token);
    let name = req.body.name;
    let tel = req.body.tel;
    let province = req.body.province;
    let city = req.body.city;
    let district = req.body.district;
    let address = req.body.address;
    let isDefault = req.body.isDefault;
    connection.query( `select * from user where phone = ${phone.name}`,function(error,results, fields){
        let id = results[0].id;
        let sqlInsert = "insert into address (name,tel,province,city,district,address,isDefault,userId) values ('"+name+"','"+tel+"','"+province+"','"+city+"','"+district+"','"+address+"','"+isDefault+"','"+id+"')";
        connection.query(sqlInsert,function(err1,res1,field1){
            res.send({
                data:{
                    success:"成功"
                }
            })
        });
    });
});

/* 当前用户查询收货地址 */
router.post('/api/selectAddress', function(req, res, next) {
    let token = req.headers.token;
    let phone = jwt.decode(token);
    console.log( token );
    console.log( phone );
    connection.query( `select * from user where phone = ${phone.name}`,function(error,results, fields){
        let id = results[0].id;
        connection.query( `select * from address where userId = ${id}`,function(error2,results2, fields2){
            // console.log( results2 );
            res.send({
                data:results2
            })
        });
    });
});


/* 第三方登录 */
router.post('/api/loginother', function(req, res, next) {
    // 前端给后端的数据
    let params = {
        provider:req.body.provider,//登录方式
        openid:req.body.openid,//用户身份id
        nickName:req.body.nickName,//用户昵称
        avataUrl:req.body.avataUrl//用户头像
    };
    console.log(params);
    // 查询数据库中用户是否存在
    connection.query(user.queryUserName(params),function(error,results,fields){
        if(results.length > 0){
            // 数据库中存在 直接读取
            connection.query( user.queryUserName( params ), function(err2, res2) {
                res.send({
                    data:res2[0]
                });
            });
        }else{
            // 数据库中不存在  存储 -> 读取
            connection.query( user.insertData( params ), function(err1,res1) {
                connection.query( user.queryUserName( params ), function(err2, res2) {
                    res.send({
                        data:res2[0]
                    });
                });
            });
        }
    })
});

/* 注册->增加一条数据. */
router.post('/api/addUser', function(req, res, next) {
    // 前端给后端的数据
    let params = {
        userName:req.body.userName,
        userCode:req.body.code
    };
    if( params.userCode == code ){
        connection.query( user.insertData( params ),function(error,results, fields){
            // 再去查询手机号是否存在,用于注册成功后直接登录
            connection.query(user.queryUserName(params),function(er,result){
                if(results.length > 0){
                    res.send({
                        data:{
                            success:true,
                            msg:'注册成功',
                            data:result[0]
                        }
                    });
                    
                }
            });
            
            // res.send({
            //     data:{
            //         success:true,
            //         msg:'注册成功'
            //     }
            // });
        });
    }
});


/* 发送验证码 */
router.post('/api/code', function(req, res, next) {
    // 前端给后端的数据
    let params = {
        userName : req.body.userName
    }
    // 短信SDK 可以使用阿里云或腾讯云的,具体接入方式以官方NodeJS代码案例
    // ....
    // 阿里云 官方代码 https://help.aliyun.com/document_detail/112185.html
    // 腾讯云 官方代码 https://cloud.tencent.com/developer/article/1987501
    // ....
    // ....
    var paramss = [ Math.floor( Math.random()*(9999-1000)+1000 ) ] // 要发送的验证码
    // 模拟以获取到验证码
    code = paramss[0];
    console.log(code);
    
    // 模拟成功返回验证码
    res.send({
        data:{
            success:true,
            code : paramss[0]
        }
    })
})


/* 注册验证手机号是否存在 */
router.post('/api/registered', function(req, res, next) {
    // 前端给后端的数据
    let params = {
        userName : req.body.phone
    }
    // 查询手机号是否存在
    connection.query(user.queryUserName(params),function(error,results,fields){
        if(results.length > 0){
            res.send({
                data:{
                    success:false,
                    msg:"手机号已经存在!"
                }
            });
        }else{
            res.send({
                data:{
                    success:true
                }
            });
        }
    })
  
});


/* 用户登录 */
router.post('/api/login', function(req, res, next) {
    // 前端给后端的数据
    let params = {
        userName : req.body.userName,
        userPwd : req.body.userPwd
    }
    // 查询用户名或手机号是否存在
    connection.query(user.queryUserName(params),function(error,results,fields){
        if(results.length > 0){
            connection.query(user.queryUserPwd(params),function(erro,result){
                if(result.length > 0){
                    res.send({
                        data:{
                            success:true,
                            msg:"登录成功!",
                            data:result[0]
                        }
                    });
                    
                }else{
                    res.send({
                        data:{
                            success:false,
                            msg:"密码不正确!"
                        }
                    });
                }
            })
            
        }else{
            res.send({
                data:{
                    success:false,
                    msg:"用户名或手机号不存在!"
                }
            });
        }
    })
  
});


/* GET databases goods Detail. */
router.get('/api/goods/id', function(req, res, next) {
    let id = req.query.id;
    connection.query("select * from goods_search where id='"+id+"'",function(error,result,fields){
        if(error) throw error;
        res.send({
            code:"0",
            data:result
        })
    })
});

/* GET List Page */
router.get('/api/goods/list', function(req, res, next) {
  res.send({
      code:0,
      name:"家居家纺",
      data:[
          {
              id:1,
              name:"家纺",
              data:[
                {
                  name:"家纺",
                  list:[
                      {
                          id:1,
                          name:"毛巾/浴巾",
                          imgUrl:"/static/logo.png"
                      },
                      {
                          id:2,
                          name:"枕头",
                          imgUrl:"/static/logo.png"
                      }
                  ]
                },
                {
                  name:"生活用品",
                  list:[
                      {
                          id:1,
                          name:"浴室用品",
                          imgUrl:"/static/logo.png"
                      },
                      {
                          id:2,
                          name:"洗晒",
                          imgUrl:"/static/logo.png"
                      }
                  ]
              }
            ]

          },
          {
              id:2,
              name:"女装",
              data:[
                {
                  name:"裙装",
                  list:[
                      {
                          id:1,
                          name:"连衣裙",
                          imgUrl:"/static/logo.png"
                      },
                      {
                          id:2,
                          name:"半身裙",
                          imgUrl:"/static/logo.png"
                      }
                  ]
                },
                {
                  name:"上衣",
                  list:[
                      {
                          id:1,
                          name:"T恤",
                          imgUrl:"/static/logo.png"
                      },
                      {
                          id:2,
                          name:"衬衫",
                          imgUrl:"/static/logo.png"
                      }
                  ]
              }
            ]
          
          }
          
      ]
  });
});

/* GET databases goods. */
router.get('/api/goods/search', function(req, res, next) {
    /* 
        desc 降序 asc 升序    
    */
    // 获取对象的key
    let [goodsName,orderName] = Object.keys(req.query);
    // name参数的值
    let name = req.query.name;
    // orderName的key值
    let order = req.query[orderName];
    
    let sql = "select * from goods_search";
    if(!(name == undefined || orderName == undefined || order == undefined)){
        sql = "select * from goods_search where name like '%"+name+"%' order by "+orderName+" "+order;
    }
    
    connection.query(sql,function(error,results,fields){
        res.send({
            code:"0",
            data:results
        });
    })
});

/* 首页第一次触底的数据 */
router.get('/api/index_list/1/data/2', function(req, res, next) {
  res.send({
      code:"0",
      data:[          
          {
              type:"commodityList",
              data:[
                  {
                      id:1,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
                  {
                      id:2,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },{
                      id:3,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
                  {
                      id:4,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
              ]
          },
          
      ]
  });
});

/* 运动户外第二次触底的数据 */
router.get('/api/index_list/2/data/3', function(req, res, next) {
  res.send({
      code:"0",
      data:[          
          {
              type:"commodityList",
              data:[
                  {
                      id:1,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
                  {
                      id:2,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },{
                      id:3,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
                  {
                      id:4,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
              ]
          },
          
      ]
  });
});

/* 运动户外第一次触底的数据 */
router.get('/api/index_list/2/data/2', function(req, res, next) {
  res.send({
      code:"0",
      data:[          
          {
              type:"commodityList",
              data:[
                  {
                      id:1,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
                  {
                      id:2,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },{
                      id:3,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
                  {
                      id:4,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
              ]
          },
          
      ]
  });
});


/* 运动户外第一次加载的数据 */
router.get('/api/index_list/2/data/1', function(req, res, next) {
  res.send({
      code:"0",
      data:[          
          {
            type:"bannerList",
            imgUrl:"../../static/img/b3.jpg",
          },
          {
              type:"iconsList",
              data:[
                  {imgUrl:"../../static/logo.png",name:"运动户外"},
                  {imgUrl:"../../static/logo.png",name:"运动户外"},
                  {imgUrl:"../../static/logo.png",name:"运动户外"},
                  {imgUrl:"../../static/logo.png",name:"运动户外"},
                  {imgUrl:"../../static/logo.png",name:"运动户外"},
                  {imgUrl:"../../static/logo.png",name:"运动户外"},
                  {imgUrl:"../../static/logo.png",name:"运动户外"},
                  {imgUrl:"../../static/logo.png",name:"运动户外"}
              ]
          },
          {
              type:"hotList",
              data:[
                  {
                      id:1,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
                  {
                      id:2,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },{
                      id:3,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  }
              ]
          },
          {
              type:"shopList",
              data:[
                  {
                      bigUrl:"../../static/img/b3.jpg",
                      data:[
                          {
                              id:1,
                              imgUrl:"../../static/logo.png",
                              name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                              pprice:"299",
                              oprice:"659",
                              discount:"5.2"
                          },
                          {
                              id:2,
                              imgUrl:"../../static/logo.png",
                              name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                              pprice:"299",
                              oprice:"659",
                              discount:"5.2"
                          },{
                              id:3,
                              imgUrl:"../../static/logo.png",
                              name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                              pprice:"299",
                              oprice:"659",
                              discount:"5.2"
                          },
                          {
                              id:4,
                              imgUrl:"../../static/logo.png",
                              name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                              pprice:"299",
                              oprice:"659",
                              discount:"5.2"
                          }
                      ]
                  }
              ],
          },
          {
              type:"commodityList",
              data:[
                  {
                      id:1,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
                  {
                      id:2,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },{
                      id:3,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
                  {
                      id:4,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
              ]
          },
          
      ]
  });
});

/* 服饰内衣第一次加载的数据 */
router.get('/api/index_list/3/data/1', function(req, res, next) {
  res.send({
      code:"0",
      data:[          
          {
            type:"bannerList",
            imgUrl:"../../static/img/b3.jpg",
          },
          {
              type:"iconsList",
              data:[
                  {imgUrl:"../../static/logo.png",name:"服饰内衣"},
                  {imgUrl:"../../static/logo.png",name:"服饰内衣"},
                  {imgUrl:"../../static/logo.png",name:"服饰内衣"},
                  {imgUrl:"../../static/logo.png",name:"服饰内衣"},
                  {imgUrl:"../../static/logo.png",name:"服饰内衣"},
                  {imgUrl:"../../static/logo.png",name:"服饰内衣"},
                  {imgUrl:"../../static/logo.png",name:"服饰内衣"},
                  {imgUrl:"../../static/logo.png",name:"服饰内衣"}
              ]
          },
          {
              type:"hotList",
              data:[
                  {
                      id:1,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
                  {
                      id:2,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },{
                      id:3,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  }
              ]
          },
          {
              type:"shopList",
              data:[
                  {
                      bigUrl:"../../static/img/b3.jpg",
                      data:[
                          {
                              id:1,
                              imgUrl:"../../static/logo.png",
                              name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                              pprice:"299",
                              oprice:"659",
                              discount:"5.2"
                          },
                          {
                              id:2,
                              imgUrl:"../../static/logo.png",
                              name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                              pprice:"299",
                              oprice:"659",
                              discount:"5.2"
                          },{
                              id:3,
                              imgUrl:"../../static/logo.png",
                              name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                              pprice:"299",
                              oprice:"659",
                              discount:"5.2"
                          },
                          {
                              id:4,
                              imgUrl:"../../static/logo.png",
                              name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                              pprice:"299",
                              oprice:"659",
                              discount:"5.2"
                          }
                      ]
                  }
              ],
          },
          {
              type:"commodityList",
              data:[
                  {
                      id:1,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
                  {
                      id:2,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },{
                      id:3,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
                  {
                      id:4,
                      imgUrl:"../../static/logo.png",
                      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
                      pprice:"299",
                      oprice:"659",
                      discount:"5.2"
                  },
              ]
          },
          
      ]
  });
});

/* 首页推荐数据 */
router.get('/api/index_list/data', function(req, res, next) {
  res.send({
	  "code":0,
	  "data":{
		  topBar:[
			  {id:1,name:'推荐'},
			  {id:2,name:'运动户外'},
			  {id:3,name:'服饰内衣'},
			  {id:4,name:'鞋靴箱包'},
			  {id:5,name:'美妆个护'},
			  {id:6,name:'家居数码'},
			  {id:7,name:'食品母婴'}
		  ],
		  data:[
			  {
				  type:"swiperList",
				  data:[
					  {imgUrl:'/static/img/b3.jpg'},
					  {imgUrl:'/static/img/b3.jpg'},
					  {imgUrl:'/static/img/b3.jpg'}
				  ]
			  },{
				  type:"recommendList",
				  data:[
					  {
						  bigUrl:"../../static/img/b3.jpg",
						  data:[
							  {imgUrl:'../../static/logo.png'},
							  {imgUrl:'../../static/logo.png'},
							  {imgUrl:'../../static/logo.png'}
						  ]
					  },{
						  bigUrl:"../../static/img/b3.jpg",
						  data:[
							  {imgUrl:'../../static/logo.png'},
							  {imgUrl:'../../static/logo.png'},
							  {imgUrl:'../../static/logo.png'}
						  ]
					  }
				  ]
			  },{
				  type:"commodityList",
				  data:[
					  {
					      id:1,
					      imgUrl:"../../static/logo.png",
					      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
					      pprice:"299",
					      oprice:"659",
					      discount:"5.2"
					  },
					  {
					      id:2,
					      imgUrl:"../../static/logo.png",
					      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
					      pprice:"299",
					      oprice:"659",
					      discount:"5.2"
					  },{
					      id:3,
					      imgUrl:"../../static/logo.png",
					      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
					      pprice:"299",
					      oprice:"659",
					      discount:"5.2"
					  },
					  {
					      id:4,
					      imgUrl:"../../static/logo.png",
					      name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
					      pprice:"299",
					      oprice:"659",
					      discount:"5.2"
					  },
				  ]
			  },
		  ]
	  }
  })
});



module.exports = router;

前端文件 my-path-list.vue

<template>
    <view class="my-path-list">
        <view class="path-list">
            <view  
                v-for="(item,index) in list" 
                :key="index"
                @tap="toAddPath(index)"
            >
            
                <view class="path-item" @tap="goConfirmOrder(item)" >
                    <view class="item-main">
                        <view class="item-name">
                            {{item.name}}
                        </view>
                        <view class="">
                            {{item.tel}}
                        </view>
                    </view>
                    <view class="item-main">
                        <view class="active" v-show="item.isDefault == 1">
                            默认
                        </view>
                        <view class="">
                            {{item.province}} {{item.city}} {{item.district}} {{item.address}}
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="add-path">
            <view class="add-path-btn" @tap="goAddPath">
                新增地址
            </view>
        </view>
    </view>
</template>

<script>
    import $http from '@/common/api/request.js'
    import {mapState,mapMutations} from 'vuex'
    export default {
        data() {
            return {
                isSelectedPath:false
            };
        },
        computed:{
            ...mapState({
                list:state=>state.path.list
            })
        },
        onLoad(e) {
            if (e.type === 'selectedPath') {
                this.isSelectedPath = true;
            }
            // 初始化拿到收货地址数据
            this.__initAddress();
        },
        methods:{
            ...mapMutations(['__initAddressList']),
            // 初始化 (请求收货地址接口)
            __initAddress(){
                
                $http.request({
                    url:'/selectAddress',
                    method:"POST",
                    header:{
                        token: true
                    }
                }).then((res)=>{
                   console.log(res);
                   if(res){
                       this.__initAddressList(res);
                   }else{
                       uni.showToast({
                        title:res.msg,
                        icon:"none"
                       })
                   }
                    
                }).catch(()=>{
                    uni.showToast({
                        title:'请求失败',
                        icon:'none'
                    })
                })
            },
            // 修改
            toAddPath(index){
                let pathObj = JSON.stringify({
                    index:index,
                    item:this.list[index]
                });
                uni.navigateTo({
                    url:'../my-add-path/my-add-path?data='+pathObj
                })
            },
            // 新增
            goAddPath(){
                uni.navigateTo({
                    url:'../my-add-path/my-add-path'
                })
            },
            // 返回确认订单
            goConfirmOrder(item){
                // 如果是从确认订单过来的执行
                if(this.isSelectedPath){
                    // 自定义事件:页面通信
                    uni.$emit('selectPathItem',item);
                    // 返回上一页
                    uni.navigateBack();
                }
            }
        }
    }
</script>

<style lang="scss">
.add-path{
    padding: 20rpx 0;
    width: 100%;
    display: flex;
    justify-content: center;
}
.add-path-btn{
    border: 2rpx solid #49bdfb;
    color: #49bdfb;
    border-radius: 30rpx;
    padding: 6rpx 60rpx;
}
.path-list{
    padding: 0 20rpx;
}
.path-item{
    padding: 10rpx;
    border-bottom: 2rpx solid #ccc;
}
.item-main{
    padding: 8rpx 0;
    display: flex;
    align-items: center;
}
.item-name{
    padding-right: 10rpx;
}
.active{
    padding: 6rpx;
    background-color: #49bdfb;
    columns: #fff;
    border-radius: 20rpx;
    font-size: 24rpx;
    text-align: center;
}
</style>

前端文件 my-add-path.vue

<template>
    <view class="my-add-path">
        <view class="path-item">
            <view class="">收件人</view>
            <input type="text" value="" placeholder="收件人姓名" v-model="pathObj.name"/>
        </view>
        <view class="path-item">
            <view class="">手机号</view>
            <input type="text" value="" placeholder="11位手机号" v-model="pathObj.tel"/>
        </view>
        <view class="path-item">
            <view class="">所在地址</view>
            <view class="" @tap="showCityPicker">{{pathCity}} </view>
            <mpvue-city-picker ref="mpvueCityPicker" :pickerValueDefault="pickerValueDefault" @onConfirm="onConfirm"/>
        </view>
        <view class="path-item">
            <view class="">详细地址</view>
            <input type="text" value="" placeholder="5到60个字符" v-model="pathObj.address"/>
        </view>
        <view class="path-item">
            <view class="">设为默认地址</view>
            <radio-group name="" @change="radioChange">
                <label class="radio">
                    <radio :checked="pathObj.isDefault == 1 ? true : false" color="#FF3333" /><text></text>
                </label>
            </radio-group>
        </view>
    </view>
</template>

<script>
    import $http from '@/common/api/request.js'
    import mpvueCityPicker from '../../components/uni/mpvue-citypicker/mpvueCityPicker.vue'
    import {mapActions} from 'vuex'
    export default {
        data() {
            return {
                pickerValueDefault:[0,0,1],//默认城市
                pathObj:{
                    name:"",
                    tel:"",
                    city:"请选择 >",
                    details:"",
                    isDefault:false
                },
                i:-1,
                // 是否修改的状态
                isStatus:false
                
            };
        },
        computed:{
            pathCity(){
                if( this.pathObj.province ){
                    return `${this.pathObj.province}-${this.pathObj.city}-${this.pathObj.district}`
                }else{
                    return '请选择';
                }
            }
        },
        onLoad(e) {
            if(e.data){
                uni.setNavigationBarTitle({
                    title:"修改地址"
                })
                let result = JSON.parse(e.data);
                this.pathObj = result.item;
                this.i = result.index;
                this.isStatus = true;
            }
        },
        components:{
            mpvueCityPicker
        },
        // 页面生命周期
        onNavigationBarButtonTap() {
            
            if( this.isStatus ){
                
                $http.request({
                    url:"/updateAddress",
                    method:"POST",
                    header:{
                        token:true
                    },
                    data:{
                        ...this.pathObj
                    }
                }).then((res)=>{
                    this.createPathFn( this.pathObj ); //提交数据对象到state.list
                    // 后退一页
                    uni.navigateBack({
                        delta:1
                    })
                    
                }).catch(()=>{
                    uni.showToast({
                        title:"请求失败",
                        icon:'none'
                    })
                })
                
                
                
            }else{
                // 新增
                $http.request({
                    url:"/addAddress",
                    method:"POST",
                    header:{
                        token:true
                    },
                    data:{
                        ...this.pathObj
                    }
                }).then((res)=>{
                    // 修改
                    this.pathObj.isDefault = this.pathObj.isDefault == true ? 1 : 0;
                    this.updatePathFn({
                        index:this.i,
                        item:this.pathObj
                    })
                    uni.showToast({
                        title:'修改成功',
                        icon:'none'
                    })
                    // 后退一页
                    uni.navigateBack({
                        delta:1
                    })
                    
                }).catch(()=>{
                    uni.showToast({
                        title:"请求失败",
                        icon:'none'
                    })
                })
            }
        },
        methods:{
            ...mapActions(['createPathFn','updatePathFn']), // 引入
            // 城市选择
            showCityPicker(){
                this.$refs.mpvueCityPicker.show()
            },
            onConfirm(e){
                let lb = e.label.split('-');
                this.pathObj.province = lb[0];
                this.pathObj.city = lb[1];
                this.pathObj.district = lb[2];
                console.log(e);
            },
            radioChange(){
                this.pathObj.isDefault = this.pathObj.isDefault == 1 ? true : false;
                this.pathObj.isDefault = !this.pathObj.isDefault;
            }
        }
    }
</script>

<style lang="scss">
.my-add-path{
    padding-left: 20rpx;
}
.path-item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16rpx 0;
    width: 100%;
    border-bottom: 2rpx solid #ccc ;
}
.path-item input{
    flex: 1;
    text-align: left;
    padding: 0 10rpx;
}
</style>

目录结构

前端目录结构

• manifest.json 配置文件： appid、logo…

• pages.json 配置文件： 导航、 tabbar、 路由

• main.js vue初始化入口文件

• App.vue 全局配置：样式、全局监视

• static 静态资源：图片、字体图标

• page 页面

  • index
    • index.vue
  • list
    • list.vue
  • my
    • my.vue
  • my-config
    • my-config.vue
  • my-config
    • my-config.vue
  • my-add-path
    • my-add-path.vue
  • my-path-list
    • my-path-list.vue
  • search
    • search.vue
  • search-list
    • search-list.vue
  • shopcart
    • shopcart.vue
  • details
    • details.vue
  • my-order
    • my-order.vue
  • confirm-order
    • confirm-order.vue
  • payment
    • payment.vue
  • payment-success
    • payment-success.vue
  • login
    • login.vue
  • login-tel
    • login-tel.vue
  • login-code
    • login-code.vue

• components 组件

  • index
    • Banner.vue
    • Hot.vue
    • Icons.vue
    • indexSwiper.vue
    • Recommend.vue
    • Shop.vue
    • Tabbar.vue
  • common
    • Card.vue
    • Commondity.vue
    • CommondityList.vue
    • Line.vue
    • ShopList.vue
  • order
    • order-list.vue
  • uni
    • uni-number-box
      • uni-number-box.vue
    • uni-icons
      • uni-icons.vue
    • uni-nav-bar
      • uni-nav-bar.vue
    • mpvue-citypicker
      • mpvueCityPicker.vue

• common 公共文件：全局css文件 || 全局js文件

  • api
    • request.js
  • common.css
  • uni.css

• store vuex状态机文件

  • modules
    • cart.js
    • path.js
    • user.js
  • index.js