微信小程序购物整体总结

337 阅读7分钟

app.js

我们在app.js里面写一些全局作用的东西,

 
 baseUrl: "https://api.it120.cc/gxx/"   //所有接口公共的地方以便后期修改
 
 
 我们通过
 
 url: 'https://api.it120.cc/gxx/user/wxapp/login'
 参数  data: { code: res.code }
 
 我们可以请求登陆
 
 当状态值为10000的时候代表我们没有注册所以我们应该注册
 
  url: 'https://api.it120.cc/gxx/user/wxapp/register/complex',
  data: { code: code, encryptedData: encryptedData, iv: iv }
  
  这样就可以注册成功,成功之后判断code是否为0,如果为0代表我们登陆成功
  
  然后我们可以获取当中的token 存入我们data中做之后的操作
  
  //下面我们开始写首页
  //注意事项  key值不加会提出警告  "checkSiteMap": false 值为true的话会提示索引
  index.js
  
  const app = getApp()
  
  //轮播请求地址
   url: app.globalData.baseUrl+"banner/list"
   
       
       <swiper indicator-dots="true"
         autoplay="true"
          interval="3000" 
          circular="true"        
          >
  <block wx:for="{{imgUrls}}" wx:key="{{id}}">  
    <swiper-item>
      <image src="{{item.picUrl}}" class="slide-image" width="355" height="150"/>
    </swiper-item>
  </block>
</swiper>
  
  
  //公告列表 
  
   url: app.globalData.baseUrl + "notice/list"
   
   
   //商品列表渲染 
   
   url: app.globalData.baseUrl + "shop/goods/list"
   
   //导航列表
   
    url: app.globalData.baseUrl + "shop/goods/list?categoryId="+id
    
    导航需要一个横向滚动
    
    //父级
      display: flex;
      overflow-x: scroll;
      overflow-y: hidden;
      white-space: nowrap;
      
      
   //子级
      display:none;
      
  //我们商品的详情界面
  //需要我们传入id进行跳转
          indextoteai(e) {
        let id = e.currentTarget.dataset.id;
        
        vx:wx.navigateTo({
          url: '/pages/home/home?id='+id
        })
      }
      
//渲染我们的详情界面

home.js

url: app.globalData.baseUrl + "shop/goods/detail?id=" + options.id
通过拼接我们的id 获取详细的数据

数据当中如果存在  html 标签内容我们需要下载一个wxParse文件
var WxParse = require("../../wxParse/wxParse.js");
      
    html页面需要引入<import src="../../wxParse/wxParse.wxml"/>   
    
//  接下来渲染我们的评价的数据

app.globalData.baseUrl + "shop/goods/reputation?goodsId=" + options.id

 //  点击购物车然后渲染出规格数据
 
   url: app.globalData.baseUrl + "shop/goods/price"
   
   data: { goodsId: this.options.id, propertyChildIds: str }
   
   //规格需要我们传入我们的参数
   
    //获取到我们的每一行
       let ss = "curentIndex[" + e.currentTarget.dataset.id+"]";
    this.setData({
      [ss]: e.currentTarget.dataset.index
    })
    
     var s=0;
for (var i = 0; i < this.data.curentIndex.length;i++){
  if (this.data.curentIndex[i]!=null){
      s++  //每次点击的话我们进行累积
  }
 }
         var str=""
         //我们得累积相等的话我们可以让其点击
         //这样我们可以允许点击
         //这样我们便可以获得我们需要的参数
        if (s == this.data.curentIndex.length){
      
      for (var i = 0; i < this.data.curentIndex.length; i++) {
        str += this.data.homelist.properties[i].id  + ':' + this.data.curentIndex[i]
        if (i!= this.data.curentIndex.length){
          str+=","
        }
      }
      
  //我们点击加入购物车的时候
  //获取我们要传输的信息
   let shopInfo={};
    shopInfo.basicInfo = this.data.homelist;
    shopInfo.price=this.data.homemyprice;
    shopInfo.count = this.data.homecount;
    shopInfo.selectProperties=this.data.arr;
    shopInfo.ischeck=false;


  wx.getStorage({
  key: 'shopInfo',
  success: function(res) {
    res.data.push(shopInfo)
    // console.log(res)
    wx.setStorage({
      key: 'shopInfo',
      data: res.data
    })
    wx.showToast({        //加入成功的提示
      title: '加入成功',
      icon: 'success',
      duration: 2000   //提示内容显示的时间
    })
  },
  fail(error){
  //我们第一次存入会是空的所以我们要放入失败中的选项
    console.log(error)
    let temp=[];//声明一个空的数组
    temp.push(shopInfo)  //让我们存入我们的数据
    wx.setStorage({
      key: 'shopInfo',//我们的名称
      data: temp  //后面属于我们的数据
    })
  }
})
//这是我们加入的购物车所以我们不需要跳转

//我们购物车的内容  
//shopping.js

    //我们接受我们刚刚加入购物车的数据
    //可以从本地种的Storage中查看
    //我们为了避免我们加入购物车之后刷新 才会显示所以我们要放入onshow中
     onShow: function () {
    let that = this;  //获取当前 this
    wx.getStorage({
      key: 'shopInfo',//我们的存入数据的名称进行接受
      success(res) {
        // console.log(res.data)
        that.setData({
          shoppingList: res.data//渲染数据
        })
      }
    })
        
        //接下来就是一些购物车的基本功能
          
        //全选 让其跟着进行变化
        //前提让我们所有的数据在传过来之前加入ischeck方便后面的操作
        
         this.setData({
  quan: !this.data.quan,
  dan:[]
})

        var arr = this.data.shoppingList;//我们需要获取我们的数据
        
        for(let i=0;i<arr.length;i++){//进行循环
            
            if(this.data.quan==true){
            //当我们的全选为true的时候
              arr[i].ischeck = true    我们循环让其他所有的单选框为true
              this.setData({
                shoppingList:arr  //数据更新
              })           
            }else{
              arr[i].ischeck=false  //否则都为false
              this.setData({  
                shoppingList: arr //数据 更新
              })  
            }
        }
        
            //我们单选按钮
            
   let i = e.currentTarget.dataset.index; //需要我们的当前点击的下标
    let arr = this.data.shoppingList;
    // console.log(arr) 
    //让我们的按钮可以正常获取true 和false
    if(arr[i].ischeck){
      arr[i].ischeck=false
    }else{
      arr[i].ischeck = true
    }
    //使用ES6的新方法判断我们数据里面的ischeck都为true 那么我们的booleans都为ture否则为false
    var booleans=arr.every((v,i)=>{  
     
      return v.ischeck == true;
    })
  
    // console.log(booleans)
    this.setData({  //数据更新
      quan: booleans,
      shoppingList:arr
    })
        
        
//加减按钮   代码一致   增加是注意不要超过库存 减时不要小于1

  let i = e.currentTarget.dataset.index //获取当前下标
var arr = this.data.shoppingList;


if (arr[i].count>1){
  arr[i].count--
  this.setData({
    shoppingList: arr//数据更新
  })
  this.sum()
 }


//需要我们的sum进行合计
     let sum=0 //声明一个空的数
    let arr = this.data.shoppingList;  //获取我们数据
    for(let i=0;i<arr.length;i++){
      if(arr[i].ischeck==true){
      sum+=  arr[i].price*arr[i].count
        //判断我们选中的时候需要将所有的单价和我们当前点击的数量结算在一起
      }
    }
    this.setData({
      shoppingList: arr,//数据更新
      shoppingSum: sum
    })
    
    
//我们需要将我们选中的数据和数量进行传入到结算的界面

 let arr = this.data.shoppingList; //获取我们所有的数据
 
 //使用ES6的方法some 判断里面是否有一个选中
 //我们结算的时候必须要有一个商品是选中
var bool = arr.some((v, i) => {

  return v.ischeck == true; 
})
//我们如果有一个商品选中的话我们进行后面的操作
if(bool==true){
  let str = [];
  for (let i = 0; i < arr.length; i++) {
    if (arr[i].ischeck == true) {
    //循环判断出我们选中的数据
      str.push(arr[i])
    }
  }
  console.log(str)
  JSON.stringify(str)//转成字符串
  
  wx.setStorage({
    key: 'shopingInfo',
    data: str
  })
  //跳转到我们的结算界面
   wx.navigateTo({
    url: '/pages/closes/closes'
  })
}else{
//提示信息
  wx.showToast({
    title: '至少选择一个',
    icon: 'error',
    duration: 2000
  })
}

//我们的结算页面 
//closes.js    
 wx.request({
  url: app.globalData.baseUrl + 'user/shipping-address/default/v2',
  data: { token: app.globalData.token },  //我们登陆获取的token值
  success: (res => {
   let that=this
      wx.getStorage({
      key: 'shopingInfo',
      success(res){
        let sum=0;
        for(let i=0;i<res.data.length;i++){
          sum += res.data[i].price*res.data[i].count
        }
        /
        that.setData({
          closeesList:res.data,  //我们商品的数据
          closesprice:sum
        })
      }
       if (res.data.code == 700) {
      this.setData({
        havaAddress: false

      })
    }
    if (res.data.code == 0) {
    //获取我们的地址信息
      this.setData({
        havaAddress: true,
        add: res.data.data.info
      })
    }

    })
   
  //我们点击去付款的时候
      let list = this.data.closeesList
    console.log(app.globalData.token)
   //根据后台需要的参数我们进行我们的数据匹对
    let goodsJsonStr=[];
      
    for (let i = 0; i < list.length;i++){
      let temp ={}
      temp.goodsId = list[i].basicInfo.basicInfo.id;
      temp.number=list[i].price;
      temp.propertyChildIds = list[i].selectProperties.propertyChildIds
      temp.logisticsType = 0
      goodsJsonStr.push(temp)
    }
let add=this.data.add
    let data={
    //我们需要的参数
      token: app.globalData.token,
      goodsJsonStr: JSON.stringify(goodsJsonStr),
      provinceId: add.provinceId,
      cityId: add.cityId,
      address: add.address,
      linkMan: add.linkMan,
      mobile: add.mobile,
      code: add.code
    }
    wx.request({
      url: app.globalData.baseUrl + 'order/create',
      data: data,
      method: 'POST',
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      success: (res) => {
        console.log(res.data)
        if (res.data.code == 0) {
          wx.navigateTo({
            url: '/pages/order/order'
          })
        }
      }
    })
//添加新的收获地址
//我们要加入一个三级联动的城市文件
          var CityData = require('../../utils/city.js')
Page({

 
  data: {
    addressData:{
      linkMan:"guoxiao",
      mobile:"",
      address:"",
      code:"",
     
},
region: ['北京市', '北京市', '东城区']
  },
  bindSave(e){
      
let addressData = this.data.addressData;
 addressData.linkMan = e.detail.value.linkMan;
addressData.address = e.detail.value.address;
addressData.mobile = e.detail.value.mobile;
addressData.code = e.detail.value.code;

console.log(addressData)
let p = this.data.region[0];
let s = this.data.region[1];
let x = this.data.region[2];
let provinceId="";
let cityId=""
for(let i=0;i<CityData.length;i++){
  if(CityData[i].name==p){
    provinceId = CityData[i].id
    for (let j = 0; j < CityData[i].cityList.length;j++){
      if (CityData[i].cityList[j].name == s) {
        cityId = CityData[i].cityList[j].id;
      }        
    }
  }
}
console.log(provinceId, cityId)
if (cityId==""){
  cityId = provinceId;
}
let data={
  token: app.globalData.token,
  provinceId: provinceId,
  cityId: cityId,
  linkMan: addressData.linkMan,
  address: addressData.address,
  mobile: addressData.mobile,
  isDefault:true
}
wx.request({
  url: app.globalData.baseUrl + 'user/shipping-address/add' ,
  method: "get",
  data:data,
  success: (res => {
    console.log(res.data)
    if(res.data.code==0){
      wx.showToast({
        title: '保存成功',
        icon:"success",
        duration:1000,
        success:function(){
          wx.navigateBack()

        }
      })
    }
  })
})

},
  bindRegionChange: function (e) {
    console.log('picker发送选择改变,携带值为', e.detail.value)
    this.setData({
      region: e.detail.value
    })
  }
  
 //我们获取数据
//   订单状态
//-1 已关闭 0 待支付 1 已支付待发货 2 已发货待确认 3 确认收货待评价 4 已评价
    var that = this
    wx.request({
      url: app.globalData.baseUrl + 'order/list',
      method: 'post',
      data: { token: app.globalData.token, status: e.currentTarget.dataset.idx },
      header: { 
        'content-type': 'application/x-www-form-urlencoded'
      },
      success: (res) => {
        // console.log(app.globalData.token)
        // console.log(res.data.data,2)
          if(res.data.code==0){
             let arr = res.data.data.orderList;
            let str = res.data.data
            that.setData({
              orderList: arr,
              orderStr:str
             
            })
          }
          this.setData({
            currentTab: e.currentTarget.dataset.idx
          })
      }
    })
    
    //我们要等到后台返回到确认收货我们在做之后的操作
    
         let i = e.currentTarget.dataset.index
    let id = e.currentTarget.dataset.id;
    
    // console.log(app.globalData.token,333)
   
  //获取我们data里面需要的参数
  
     wx.request({
       url: app.globalData.baseUrl + '/order/delivery',
       method:'post',
       data: { token: app.globalData.token,orderId: id},
       header: {
         'content-type': 'application/x-www-form-urlencoded'
       },
       success:(res)=>{
          console.log(res.data)
          //成功收货的提示
       }
     })
     
     //对收货的商品进行评价
     //由于参数过多我们一般可以使用ApiPost 进行测试
     // { token: "e4bc97e7-4639-4349-b69a-0967eeb88c31", orderId: "327822", reputations: [{ id: "375690", reputation: "2", remark: "[{1123456}]" }] }
     //然后对应去获取我们相应的数据
        let data = this.data.orderStr.goodsMap

let str = Array.from(data[328268])
// console.log(str)
// console.log(str[0].orderId)
let my ={}
my = this.data.orderSearch
let ppf = {my}

     let qqq=[]
     qqq.push(ppf.my)
    JSON.stringify(qqq)
    //这部分json 提交会有问题暂时没有修改成功 后期进行调整
   let temps={}
    temps.id = str[0].id
    temps.reputation = this.data.pingOrder,
   temps.remark =qqq
    
  let arr=[]
    arr.push(temps)
    console.log(JSON.stringify(arr))
    console.log(arr, str[0].orderId, app.globalData.token, str[0].id)
     wx.request({
       url: app.globalData.baseUrl + '/order/reputation',
       method:'post',
       data: {

         postJsonString: { token: app.globalData.token, orderId: str[0].orderId, id: str[0].id, reputations:[JSON.stringify(arr)]}
       },
       header: {
         'content-type': 'application/x-www-form-urlencoded'
       },
       success:(res)=>{
         console.log(res.data)
         //评价成功返回的成功的提示提示用户
       }
     })
     
     //这就是个人做的一个微信小程序的一个电商的小demo  如有不足 
     //请留言提示