uniapp-黑马优选学习02

filters:{
     tofixed(num){
       return Number(num).toFixed(2)
     }
   }

{
      "path": "goods_list/goods_list",
      "style": {
        "onReachBottomDistance": 150
　　　　}
}

    onReachBottom() {
      if(this.queryObj.pagenum*this.queryObj.pagesize>=this.total)
        return uni.showMsg('数据加载完成.')
      // 配置要加载的新的页面序号
      this.queryObj.pagenum+=1
      // 加载新的页面数据
      this.getGoodsList()
    }

 onReachBottom() {
      // 节流控制
      if (this.isLoading) return
      this.isLoading = true
      try {
        if (this.queryObj.pagenum * this.queryObj.pagesize >= this.total)
          return uni.showMsg('数据加载完成.')
        // 配置要加载的新的页面序号
        this.queryObj.pagenum += 1
        // 加载新的页面数据
        this.getGoodsList()
      } finally {
        this.isLoading = false
      }
    },

 {
      "path": "goods_list/goods_list",
      "style": {
        "onReachBottomDistance": 150,
        "enablePullDownRefresh": true,
        "backgroundColor": "#F8F8F8"
      }
}

    onPullDownRefresh() {
      // 重新数据加载参数
      this.queryObj.pagenum=1
      this.total=0
      this.isLoading = false
      this.goodsList = []
      //开始加载 传入回调函数
      this.getGoodsList(()=>uni.stopPullDownRefresh())
    },

async getGoodsList(cb) {
        const {
          data: res
        } = await uni.$http.get('/api/public/v1/goods/search', this.queryObj)
        // 只要数据请求完毕了，就立即调用回调函数
        cb&&cb()
        if (res.meta.status !== 200) {
          return uni.$showMsg()
        }
        this.goodsList = [...this.goodsList, ...res.message.goods]
        this.total = res.message.total
      },

　　gotoDetail(item){
        uni.navigateTo({
          url:'/subpkg/goods_detail/goods_detail?goods_id='+item.goods_id
        })
      }

 　　async getGoodsDetail(goods_id) {
        const { data: res } = await uni.$http.get('/api/public/v1/goods/detail',{goods_id})
        if (res.meta.status !== 200) {
          return uni.$showMsg()
        }
        this.goods_info = res.message
      },

  // 预览图片
        uni.previewImage({
          // 默认的预览序号
          current:idx,
          // 所有图片的地址
          urls:this.goods_info.pics.map(x=>x.pics_sma)          
        })

//导入 Vue 和 Vuex
import Vue form 'vue'
import Vuex from 'vuex'

// 将 uvex 挂载到Vue上，做一个插件
Vue.use(Vuex)

// 创建 Store 实例对象
const store = new Vuex.Store({
  modules:{}
})

// 导出
export default store

export default {
  // 为当前模块开启命名空间
  namespaced:true,
  // 模块的 state 数据
  state:()=>({
    // 购物车的数组，用于存储购物车中每个商品的信息对象
    // 每个商品的信息对象，都包含如下6个属性
    // {goods_id,goods_name,goods_price,goods_count,goods_small_logo,goods_state}
    cart:[]
  })
  // 模块的 mutations 方法
  mutations:{},
  // 模块的 getter 属性
  getters:{}  
}

　　// 导入购物车的 vuex 模块
　　import moduleCart from './cart.js'

...

// 创建 Store 实例对象
const store = new Vuex.Store({
  // 挂载 store 模块
  modules:{
    // 挂载购物车的 vuex 模块，模块内成员的访问路径被调整为 m_cart 
    // 如：购物车中 cart 数组的访问路径为： m_cart/cart
    m_cart:moduleCart,
  }
})

// 模块的 mutations 方法
  mutations:{
    // 添加商品
    addToCart(state,goods){
      // 识别是否已经存在
      const findResult = state.cart.fin((x)=>x.goods_id===goods.goods_id)
      if(!findResult){
        state.cart.push(goods)
      }else{
        findResult.goods_count++
      }
    }
  },

  // 导入vuex 模块
  import {mapState,mapMutations} from 'vuex'

  // 模块的 getter 属性
  getters:{
    total(state){
      let c=0
      state.cart.forEach(goods=>c+=goods.goods_count)
      return c
    }
  }

    computed:{
      // 将 m_cart 模块中的 cart 数组，映射到当前模块
      ...mapState('m_cart',[]),
      ...mapGetters('m_cart',['total'])
    },

watch:{
      // 监听total值的变化
      total(newVal){
         // 遍历数组，查找 购物车
         const findResult = this.options.find((x)=>x.text==='购物车')
         if(findResult){
           // 修正购物车按钮的 info 属性
           findResult.info = newVal
         }
      }
    },

// 映射购物车数量
  import {mapGetters} from 'vuex'
  export default {
    computed:{
      ...mapGetters('m_cart',['total'])
    },
    onShow(){
      // 初始化后展示时，直接设备 tabBar 页面的购物车商品数量 
      this.setBadge()
    },
    methods:{
      setBadge(){
        uni.setTabBarBadge({
          index:2,
          text:this.total+'' //text只能为字符串，不能为数字
        })
      }
    }
  }