devbox
秋刀鱼在做梦
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

UNIAPP实战项目笔记67 加入购物车的前端和后端交互_uniapp怎么和后端交互

作者：秋刀鱼在做梦 | 2024-07-09 03:50:09

赞

踩

uniapp怎么和后端交互

UNIAPP实战项目笔记67 加入购物车的前端和后端交互

思路

前端商品详情页adCart加入购物车时直接发送数据到后端
后端创建接口直接接受前端发过来的数据，更新数据库中该用户的购物车数据

案例截图

在这里插入图片描述

代码

后端代码 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/addCart', function(req, res, next) {
    let token = req.headers.token;
    let phone = jwt.decode(token);
    let goodsId = req.body.goods_id;//商品id
    let num = req.body.num;//前端传过来用户输入的产品数量
    connection.query( `select * from user where phone = ${phone.name}`,function(error,results, fields){
        let userId = results[0].id;
        connection.query( `select * from goods_search where id = ${goodsId}`,function(error1,results1, fields1){
            console.log(error1,results1);
            let name = results1[0].name;
            let imgUrl = results1[0].imgUrl;
            let pprice = results1[0].pprice;
            // 查询当前用户之前是否添加过这个商品
            connection.query( `select * from goods_cart where uid = ${userId} and goods_id = ${goodsId}`,function(error2,results2, fields12){
                console.log(error2,results2);
                if(results2.length > 0){
                    // 如果当前用户之前加入过本商品,就直接增加数量
                    connection.query(`update goods_cart set num = replace(num,${results2[0].num},${ parseInt(num) + parseInt(results2[0].num)}) where id = ${results2[0].id}`,function(error4,results4){
                        console.log(error4,results4);
                        res.json({
                            data:{
                                success:"加入成功"
                            }
                        })
                    })
                }else{
                    // 如果当前用户之前没有加入过本商品需要添加进入
                    connection.query(
                    `insert into goods_cart (uid,goods_id,name,imgUrl,pprice,num) values ("${userId}","${goodsId}","${name}","${imgUrl}","${pprice}","${num}")`,
                    function(error3,results3){
                        res.json({
                            data:{
                                success:"加入成功"
                            }
                        })
                    });
                }
            });
        });
    });
});

/* 修改当前用户购物车商品数量 */
router.post('/api/updateCart', function(req, res, next) {
    let token = req.headers.token;
    let phone = jwt.decode(token);
    let goodsId = req.body.goodsId;//商品id
    let num = req.body.num;//前端传过来用户输入的产品数量
    connection.query( `select * from user where phone = ${phone.name}`,function(error,results, fields){
        let userId = results[0].id;
        connection.query( `select * from goods_cart where uid = ${userId} and goods_id = ${goodsId}`,function(error1,results1, fields1){
            // console.log(results1);
            let goods_num = results1[0].num;//数据库中当前的数量
            let id = results1[0].id;//当前id号
            // 修改替换
            connection.query(`update goods_cart set num = replace(num,${goods_num},${num}) where id = ${id}`,function(error2,results2){
                res.json({
                    data:{
                        success:true
                    }
                })
            })
        });
    });
});

/* 获取当前用户购物车列表 */
router.post('/api/selectCart', function(req, res, next) {
    let token = req.headers.token;
    let phone = jwt.decode(token);
    connection.query( `select * from user where phone = ${phone.name}`,function(error,results, fields){
        let userId = results[0].id;
        connection.query( `select * from goods_cart where uid = ${userId}`,function(error1,results1, fields1){
            res.json({
                data:results1
            });
        });
    });
});


/* 当前用户修改收货地址 */
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;


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239
  • 240
  • 241
  • 242
  • 243
  • 244
  • 245
  • 246
  • 247
  • 248
  • 249
  • 250
  • 251
  • 252
  • 253
  • 254
  • 255
  • 256
  • 257
  • 258
  • 259
  • 260
  • 261
  • 262
  • 263
  • 264
  • 265
  • 266
  • 267
  • 268
  • 269
  • 270
  • 271
  • 272
  • 273
  • 274
  • 275
  • 276
  • 277
  • 278
  • 279
  • 280
  • 281
  • 282
  • 283
  • 284
  • 285
  • 286
  • 287
  • 288
  • 289
  • 290
  • 291
  • 292
  • 293
  • 294
  • 295
  • 296
  • 297
  • 298
  • 299
  • 300
  • 301
  • 302
  • 303
  • 304
  • 305
  • 306
  • 307
  • 308
  • 309
  • 310
  • 311
  • 312
  • 313
  • 314
  • 315
  • 316
  • 317
  • 318
  • 319
  • 320
  • 321
  • 322
  • 323
  • 324
  • 325
  • 326
  • 327
  • 328
  • 329
  • 330
  • 331
  • 332
  • 333
  • 334
  • 335
  • 336
  • 337
  • 338
  • 339
  • 340
  • 341
  • 342
  • 343
  • 344
  • 345
  • 346
  • 347
  • 348
  • 349
  • 350
  • 351
  • 352
  • 353
  • 354
  • 355
  • 356
  • 357
  • 358
  • 359
  • 360
  • 361
  • 362
  • 363
  • 364
  • 365
  • 366
  • 367
  • 368
  • 369
  • 370
  • 371
  • 372
  • 373
  • 374
  • 375
  • 376
  • 377
  • 378
  • 379
  • 380
  • 381
  • 382
  • 383
  • 384
  • 385
  • 386
  • 387
  • 388
  • 389
  • 390
  • 391
  • 392
  • 393
  • 394
  • 395
  • 396
  • 397
  • 398
  • 399
  • 400
  • 401
  • 402
  • 403
  • 404
  • 405
  • 406
  • 407
  • 408
  • 409
  • 410
  • 411
  • 412
  • 413
  • 414
  • 415
  • 416
  • 417
  • 418
  • 419
  • 420
  • 421
  • 422
  • 423
  • 424
  • 425
  • 426
  • 427
  • 428
  • 429
  • 430
  • 431
  • 432
  • 433
  • 434
  • 435
  • 436
  • 437
  • 438
  • 439
  • 440
  • 441
  • 442
  • 443
  • 444
  • 445
  • 446
  • 447
  • 448
  • 449
  • 450
  • 451
  • 452
  • 453
  • 454
  • 455
  • 456
  • 457
  • 458
  • 459
  • 460
  • 461
  • 462
  • 463
  • 464
  • 465
  • 466
  • 467
  • 468
  • 469
  • 470
  • 471
  • 472
  • 473
  • 474
  • 475
  • 476
  • 477
  • 478
  • 479
  • 480
  • 481
  • 482
  • 483
  • 484
  • 485
  • 486
  • 487
  • 488
  • 489
  • 490
  • 491
  • 492
  • 493
  • 494
  • 495
  • 496
  • 497
  • 498
  • 499
  • 500
  • 501
  • 502
  • 503
  • 504
  • 505
  • 506
  • 507
  • 508
  • 509
  • 510
  • 511
  • 512
  • 513
  • 514
  • 515
  • 516
  • 517
  • 518
  • 519
  • 520
  • 521
  • 522
  • 523
  • 524
  • 525
  • 526
  • 527
  • 528
  • 529
  • 530
  • 531
  • 532
  • 533
  • 534
  • 535
  • 536
  • 537
  • 538
  • 539
  • 540
  • 541
  • 542
  • 543
  • 544
  • 545
  • 546
  • 547
  • 548
  • 549
  • 550
  • 551
  • 552
  • 553
  • 554
  • 555
  • 556
  • 557
  • 558
  • 559
  • 560
  • 561
  • 562
  • 563
  • 564
  • 565
  • 566
  • 567
  • 568
  • 569
  • 570
  • 571
  • 572
  • 573
  • 574
  • 575
  • 576
  • 577
  • 578
  • 579
  • 580
  • 581
  • 582
  • 583
  • 584
  • 585
  • 586
  • 587
  • 588
  • 589
  • 590
  • 591
  • 592
  • 593
  • 594
  • 595
  • 596
  • 597
  • 598
  • 599
  • 600
  • 601
  • 602
  • 603
  • 604
  • 605
  • 606
  • 607
  • 608
  • 609
  • 610
  • 611
  • 612
  • 613
  • 614
  • 615
  • 616
  • 617
  • 618
  • 619
  • 620
  • 621
  • 622
  • 623
  • 624
  • 625
  • 626
  • 627
  • 628
  • 629
  • 630
  • 631
  • 632
  • 633
  • 634
  • 635
  • 636
  • 637
  • 638
  • 639
  • 640
  • 641
  • 642
  • 643
  • 644
  • 645
  • 646
  • 647
  • 648
  • 649
  • 650
  • 651
  • 652
  • 653
  • 654
  • 655
  • 656
  • 657
  • 658
  • 659
  • 660
  • 661
  • 662
  • 663
  • 664
  • 665
  • 666
  • 667
  • 668
  • 669
  • 670
  • 671
  • 672
  • 673
  • 674
  • 675
  • 676
  • 677
  • 678
  • 679
  • 680
  • 681
  • 682
  • 683
  • 684
  • 685
  • 686
  • 687
  • 688
  • 689
  • 690
  • 691
  • 692
  • 693
  • 694
  • 695
  • 696
  • 697
  • 698
  • 699
  • 700
  • 701
  • 702
  • 703
  • 704
  • 705
  • 706
  • 707
  • 708
  • 709
  • 710
  • 711
  • 712
  • 713
  • 714
  • 715
  • 716
  • 717
  • 718
  • 719
  • 720
  • 721
  • 722
  • 723
  • 724
  • 725
  • 726
  • 727
  • 728
  • 729
  • 730
  • 731
  • 732
  • 733
  • 734
  • 735
  • 736
  • 737
  • 738
  • 739
  • 740
  • 741
  • 742
  • 743
  • 744
  • 745
  • 746
  • 747
  • 748
  • 749
  • 750
  • 751
  • 752
  • 753
  • 754
  • 755
  • 756
  • 757
  • 758
  • 759
  • 760
  • 761
  • 762
  • 763
  • 764
  • 765
  • 766
  • 767
  • 768
  • 769
  • 770
  • 771
  • 772
  • 773
  • 774
  • 775
  • 776
  • 777
  • 778
  • 779
  • 780
  • 781
  • 782
  • 783
  • 784
  • 785
  • 786
  • 787
  • 788
  • 789
  • 790
  • 791
  • 792
  • 793
  • 794
  • 795
  • 796
  • 797
  • 798
  • 799
  • 800
  • 801
  • 802
  • 803
  • 804
  • 805
  • 806
  • 807
  • 808
  • 809
  • 810
  • 811
  • 812
  • 813
  • 814
  • 815
  • 816
  • 817
  • 818
  • 819
  • 820
  • 821
  • 822
  • 823
  • 824
  • 825
  • 826
  • 827
  • 828
  • 829
  • 830
  • 831
  • 832
  • 833
  • 834
  • 835
  • 836
  • 837
  • 838
  • 839
  • 840
  • 841
  • 842
  • 843
  • 844
  • 845
  • 846
  • 847
  • 848
  • 849
  • 850
  • 851
  • 852
  • 853
  • 854
  • 855
  • 856
  • 857
  • 858
  • 859
  • 860
  • 861
  • 862
  • 863
  • 864
  • 865
  • 866
  • 867
  • 868
  • 869
  • 870
  • 871
  • 872
  • 873
  • 874
  • 875
  • 876
  • 877
  • 878
  • 879
  • 880
  • 881
  • 882
  • 883
  • 884
  • 885
  • 886
  • 887
  • 888
  • 889
  • 890
  • 891
  • 892
  • 893
  • 894
  • 895
  • 896
  • 897
  • 898
  • 899
  • 900
  • 901
  • 902
  • 903
  • 904
  • 905
  • 906
  • 907
  • 908
  • 909
  • 910
  • 911
  • 912
  • 913
  • 914
  • 915
  • 916
  • 917
  • 918
  • 919
  • 920
  • 921
  • 922
  • 923
  • 924
  • 925
  • 926
  • 927
  • 928
  • 929
  • 930
  • 931
  • 932
  • 933
  • 934
  • 935
  • 936
  • 937
  • 938
  • 939
  • 940
  • 941
  • 942
  • 943
  • 944
  • 945
  • 946
  • 947
  • 948
  • 949
  • 950
  • 951
  • 952
  • 953
  • 954
  • 955
  • 956
  • 957
  • 958
  • 959
  • 960
  • 961
  • 962
  • 963
  • 964
  • 965
  • 966
  • 967
  • 968
  • 969
  • 970
  • 971
  • 972
  • 973
  • 974
  • 975
  • 976
  • 977
  • 978
  • 979
  • 980
  • 981
  • 982

前端代码 shopcart.js

    <template>
        <view class="shop-cart">
            <template v-if=" list.length > 0 ">
                    
                <!-- 自定义导航栏 -->
                <uniNavBar
                    title="购物车"
                    :rightText=" isNavBar ? '完成' : '编辑'"
                    fixed="true"
                    statusBar="true"
                    @clickRight=" isNavBar = !isNavBar"
                ></uniNavBar>
                
                <!-- 商品内容 -->
                <view class="shop-item" v-for="(item,index) in list" :key="index">
                    <label for="" class="radio" @tap="selectedItem(index)">
                        <radio value="" color="#FF3333" :checked="item.checked" /> <text></text>
                    </label>
                    <image class="shop-img" :src="item.imgUrl" mode=""></image>
                    <view class="shop-text">
                        <view class="shop-name">
                            {{item.name}}
                        </view>
                        <view class="shop-color f-color">
                            {{item.color}}
                        </view>
                        <view class="shop-price">
                            <view class="">
                                ￥{{item.pprice}}
                            </view>
                            <template v-if="!isNavBar">
                                <view>x {{item.num}}</view>
                            </template>
                            <template v-else>
                                <uniNumberBox
                                    :value="item.num"
                                    :min=1
                                    @change="changeNumber($event,index,item)"
                                ></uniNumberBox>
                            </template>
                        </view>
                    </view>
                </view>
                <!-- 底部 -->
                <view class="shop-foot">
                    <label for="" class="radio foot-radio" @tap='checkedAllFn'>
                        <radio value="" color="#FF3333" :checked="checkedAll"></radio><text>全选</text>
                    </label>
                    <template v-if="!isNavBar">
                        <view class="foot-total">
                            <view class="foot-count">
                                合计：
                                <text class="f-active-color">
                                    ￥{{totalCount.pprice}}
                                </text>
                            </view>
                            <view class="foot-num" @tap="goConfirmOrder">
                                结算({{totalCount.num}})
                            </view>
                        </view>
                    </template>
                    <template v-else>
                        <view class="foot-total">
                            <view class="foot-num" style="background-color: black;">
                                移入收藏夹
                            </view>
                            <view class="foot-num" @tap="delGoodsFn">
                                删除
                            </view>
                        </view>
                    </template>
                </view>
                
            </template>
            <template v-else>
                <uniNavBar 
                    title="购物车"
                    fixed="true"
                    statusBar="true"
                ></uniNavBar>
                <view class="shop-else-list">
                    <text>囧~ 购物车还是空的~</text>
                </view>
            </template>
            <Tabbar currentPage='shopcart'></Tabbar>
        </view>
    </template>

    <script>
        import $http from '@/common/api/request.js'
        import uniNavBar from '@/components/uni/uni-nav-bar/uni-nav-bar.vue'
        import uniNumberBox from '@/components/uni/uni-number-box/uni-number-box.vue'
        import Tabbar from '@/components/common/Tabbar.vue';//引入
        
        // 状态机引入
        import {mapState,mapActions,mapGetters,mapMutations} from 'vuex'
        export default {
            data() {
                return {
                    isNavBar:false,
                }
            },
            computed:{
                // 状态机数据处理
                ...mapState({
                    list:state=>state.cart.list
                }),
                ...mapGetters(['checkedAll','totalCount'])
            },
            components:{
                uniNavBar,uniNumberBox,Tabbar
            },
            onShow() {
              this.getData();  
            },
            methods: {
                ...mapActions(['checkedAllFn','delGoodsFn']),
                ...mapMutations(['selectedItem','initGetData']),
                getData(){
                    $http.request({
                        url:'/selectCart',
                        method:"POST",
                        header:{
                            token:true
                        }
                    }).then((res)=>{
                        this.initGetData(res)
                    }).catch(()=>{
                        uni.showToast({
                        title:'请求失败',
                        icon:'none'
                        })
                    })
                },
                changeNumber(value,index,item){
                    if ( value == item.num ) return;
                    $http.request({
                        url:'/updateCart',
                        method:"POST",
                        header:{
                            token:true
                        },
                        data:{
                            goodsId:item.goods_id,
                            num:value
                        }
                    }).then((res)=>{
                        this.list[index].num = value;
                    }).catch(()=>{
                        uni.showToast({
                        title:'请求失败',
                        icon:'none'
                        })
                    })
                },
                // 进入确认订单
                goConfirmOrder(){
                    uni.navigateTo({
                        url:'/pages/confirm-order/confirm-order'
                    })
                }
            }
        }
    </script>

    <style lang="scss">

    .shop-list{
        padding-bottom: 100rpx;
    }
    .shop-else-list{
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background-color: #f7f7f7;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .shop-item{
        display: flex;
        padding: 20rpx;
        align-items: center;
        background-color: #f7f7f7;
        margin-bottom: 10rpx;
    }
    .shop-img{
        width: 200rpx;
        height: 200rpx;
    }
    .shop-text{
        flex: 1;
        padding-left: 20rpx;
    }
    .shop-color{
        font-size: 24rpx;
    }
    .shop-price{
        display: flex;
        justify-content: space-between;
    }

    .shop-foot{
        border-top: 2rpx solid #f7f7f7;
        background-color: #FFFFFF;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 120rpx;
    }
    .foot-radio{
        padding-left: 20rpx;
    }
    .foot-total{
        display: flex;
    }
    .foot-count{
        line-height: 100rpx;
        padding: 0 20rpx;
        font-size: 32rpx;
    }
    .foot-num{
        background-color: #49bdfb;
        color: #FFFFFF;
        padding: 0 60rpx;
        line-height: 100rpx;
    }
    </style>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236

details.vue

    <template>
        <view class="details">
            <!-- 商品图 -->
            <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
                <swiper-item>
                    <view class="swiper-item">
                        <image class="swiper-img" :src="goodsContent.imgUrl" mode=""></image>
                    </view>
                </swiper-item>
            </swiper>
            <!-- 价格和名称 -->
            <view class="details-goods">
                <view class="goods-pprice">¥{{goodsContent.pprice}} </view>
                <view class="goods-oprice">¥{{goodsContent.oprice}} </view>
                <view class="goods-name">{{goodsContent.name}} </view>
            </view>
            <!-- 商品详情图 -->
            <view class="">
                <view class=""><image class="details-img" src="../../static/img/b3.jpg" mode=""></image></view>
                <view class=""><image class="details-img" src="../../static/img/b3.jpg" mode=""></image></view>
                <view class=""><image class="details-img" src="../../static/img/b3.jpg" mode=""></image></view>
                <view class=""><image class="details-img" src="../../static/img/b3.jpg" mode=""></image></view>
                <view class=""><image class="details-img" src="../../static/img/b3.jpg" mode=""></image></view>
                <view class=""><image class="details-img" src="../../static/img/b3.jpg" mode=""></image></view>
            </view>
            
            <!-- 商品列表 -->
            <Card cardTitle="看了又看"></Card>
            <CommodityList :dataList="dataList"></CommodityList>
            
            <!-- 底部 -->
            <view class="details-foot">
                <view class="iconfont icon-xiaoxi"></view>
                <view class="iconfont icon-31gouwuche" @tap="goShopCart"></view>
                <view class="add-shopcart" @tap="showPop">加入购物车</view>
                <view class="purchase" @tap="showPop">立刻购买</view>
            </view>
            
            <!-- 底部弹出层 -->
            <view class="pop" v-show="isShow" @touchmove.stop.prevent="">
                <!-- 蒙层 -->
                <view class="pop-mask" @tap="hidePop"> </view>
                <!-- 内容块 -->
                <view class="pop-box" :animation="animationData">
                    <view class="">
                        <image class="pop-img" :src="goodsContent.imgUrl" mode=""></image>
                    </view>
                    <view class="pop-num">
                        <view class="">购买数量</view>
                        <UniNumberBox
                            :min=1 
                            :value="num"
                            @change="changeNumber"
                        ></UniNumberBox>
                    </view>
                    <view class="pop-sub" @tap="addCart">确定</view>
                </view>
            </view>
        </view>
    </template>

    <script>
        import $http from '@/common/api/request.js'
        import Card from '@/components/common/Card.vue';
        import CommodityList from '@/components/common/CommodityList.vue';
        import UniNumberBox from '@/components/uni/uni-number-box/uni-number-box.vue';
        import {mapMutations} from 'vuex'
        export default {
            data() {
                return {
                    isShow:false,
                    goodsContent:{},
                    animationData:{},
                    num:1,
                    swiperList:[
                        {imgUrl:"../../static/img/b3.jpg"},
                        {imgUrl:"../../static/img/b3.jpg"},
                        {imgUrl:"../../static/img/b3.jpg"}
                    ],
                    dataList:[{
                          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"
                      }]
                };
            },
            components:{
                Card,
                CommodityList,
                UniNumberBox
            },
            onLoad(e) {
                // console.log(e.id);
                // 设置默认id=1
                if(!e.id)
                    e.id = 1;
                this.getData(e.id);
            },
            // 修改返回默认行为
            onBackPress(){
                if (this.isShow) {
                    this.hidePop();
                    return true;  
                }
                
            },
            // 点击分享
            onNavigationBarButtonTap(e) {
                if(e.type==='share'){
                    uni.share({
                        provider:"weixin",
                        type:0,
                        scene:"WXSceneSession",
                        title:this.goodsContent.name,
                        href:"http://127.0.0.1:8080/#/pages/details/details?id="+this.goodsContent.id,
                        imageUrl:this.goodsContent.imageUrl,
                        success:function(res){
                            uni.showTabBar({
                                title:"分享成功"
                            })
                        },
                        fail: (err) => {
                            console.log("fail:"+ JSON.stringify(err));
                        }
                    })
                }
            },
            methods:{
                ...mapMutations(['addShopCart']),
                // 改变商品数量
                changeNumber(value){
                    // this.num[index] = value;
                    console.log(value);
                    this.num = value;
                },
                // 请求商品
                getData(id){
                    $http.request({
                        url:"/goods/id",
                        data:{
                            id:id
                        }
                    }).then((res)=>{
                        this.goodsContent = res[0];
                    }).catch(()=>{
                        uni.showToast({
                            title:'请求失败',
                            icon:'none'
                        })
                    })
                },
                showPop(){
                    // 初始化一个动画
                    var animation = uni.createAnimation({
                        duration:200 // 动画时间
                    });
                    // 定义动画内容
                    animation.translateY(600).step();
                    // 导出动画数据传递给data层
                    this.animationData = animation.export();
                    setTimeout(()=>{
                        this.isShow = true;
                        animation.translateY(0).step();
                        this.animationData = animation.export();
                    },200)
                },
                hidePop(){
                    var animation = uni.createAnimation({
                        duration:200
                    });
                    animation.translateY(600).step();
                    this.animationData = animation.export();
                    this.isShow = true;
                    setTimeout(()=>{
                        animation.translateY(0).step();
                        this.animationData = animation.export();
                        this.isShow = false;
                    },200)
                },
                // 跳转到购物车页面
                goShopCart(){
                    uni.navigateTo({
                        url:'../shopcart/shopcart'
                    })
                },
                // 加入购物车
                addCart(){
                    let goods = this.goodsContent;
                    console.log(goods);
                    
                    $http.request({
                        url:"/addCart",
                        method:"POST",
                        header:{
                            token:true //需要验证token
                        },
                        data:{
                            goods_id:goods.id,
                            num:this.num
                        }
                    }).then((res)=>{
                        console.log(res);
                        // this.goodsContent = res[0];
                        // 隐藏弹出框
                        this.hidePop();
                        // 提示信息
                        uni.showToast({
                            title:"成功加入购物车",
                            icon:"none"
                        })
                    }).catch(()=>{
                        uni.showToast({
                            title:'请求失败',
                            icon:'none'
                        })
                    })
                    /* 
                    let goods = this.goodsContent;
                    this.goodsContent['checked'] = false;
                    this.goodsContent['num'] = this.num;
                    // 加入购物车
                    this.addShopCart(goods);
                    // 隐藏弹出框
                    this.hidePop();
                    // 提示信息
                    uni.showToast({
                        title:"成功加入购物车",
                        icon:"none"
                    }) 
                    */
                    
                },
            }
        }
    </script>

    <style lang="scss">
    swiper{
        width: 100%;
        height: 700rpx;
    }
    .swiper-img{
        width: 100%;
        height: 700rpx;
    }
    .details{
        padding-bottom: 90rpx;
    }
    .details-goods{
        text-align: center;
        font-weight: bold;
        font-size: 36rpx;
        padding: 10rpx 0;
    }
    .details-img{
        width: 100%;
    }
    .details-foot{
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 90rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #FFFFFF;
    }
    .details-foot .iconfont{
        width: 60rpx;
        height: 60rpx;
        border-radius: 100%;
        background-color: #000000;
        color: #FFFFFF;
        text-align: center;
        margin: 0 10rpx;
        line-height: 60rpx;
    }
    .add-shopcart{
        margin: 0 40rpx;
        padding: 6rpx 30rpx;
        background-color: #000000;
        color: #FFFFFF;
        border-radius: 40rpx;
        
    }
    .purchase{
        margin: 0 40rpx;
        padding: 6rpx 30rpx;
        background-color: #49BDFB;
        color: #FFFFFF;
        border-radius: 40rpx;
    }
    .pop{
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 9999;
    }
    .pop-mask{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
    }
    .pop-box{
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        background-color: #FFFFFF;
    }
    .pop-img{
        width: 260rpx;
        height: 260rpx;
        top:-130rpx;
        border-radius:20rpx 20rpx 0 0;
        margin: 30rpx;
    }
    .pop-sub{
        line-height: 80rpx;
        background-color: #49BDFB;
        color: #FFFFFF;
        text-align: center;
    }
    .pop-num{
        padding: 20rpx;
        display: flex;
        justify-content: space-between;
    }

    </style>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239
  • 240
  • 241
  • 242
  • 243
  • 244
  • 245
  • 246
  • 247
  • 248
  • 249
  • 250
  • 251
  • 252
  • 253
  • 254
  • 255
  • 256
  • 257
  • 258
  • 259
  • 260
  • 261
  • 262
  • 263
  • 264
  • 265
  • 266
  • 267
  • 268
  • 269
  • 270
  • 271
  • 272
  • 273
  • 274
  • 275
  • 276
  • 277
  • 278
  • 279
  • 280
  • 281
  • 282
  • 283
  • 284
  • 285
  • 286
  • 287
  • 288
  • 289
  • 290
  • 291
  • 292
  • 293
  • 294
  • 295
  • 296
  • 297
  • 298
  • 299
  • 300
  • 301
  • 302
  • 303
  • 304
  • 305
  • 306
  • 307
  • 308
  • 309
  • 310
  • 311
  • 312
  • 313
  • 314
  • 315
  • 316
  • 317
  • 318
  • 319
  • 320
  • 321
  • 322
  • 323
  • 324
  • 325
  • 326
  • 327
  • 328
  • 329
  • 330
  • 331
  • 332
  • 333
  • 334
  • 335
  • 336
  • 337
  • 338
  • 339
  • 340
  • 341
  • 342
  • 343
  • 344
  • 345
  • 346
  • 347
  • 348
  • 349
  • 350
  • 351
  • 352
  • 353
  • 354
  • 355

目录结构

前端目录结构

  • 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
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/秋刀鱼在做梦/article/detail/801333
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号