1.Tab卡添加商品

實現(xiàn)整體布局

/src/pages/goods/Index.vue

實現(xiàn)Tab卡布局

/src/pages/goods/components/Form.vue

驗證表單數(shù)據(jù)

validate/goods.js

export default {
  first_cateid (value) {
    value = parseInt(value)
    if (value === 0) {
      return '請選擇一級分類'
    }
    return true
  },
  second_cateid (value) {
    value = parseInt(value)
    if (value === 0) {
      return '請選擇二級分類'
    }
    return true
  },
  goodsname (value) {
    return value === '' ? '請輸入商品名稱' : true
  },
  price (value) {
    if (!value) return '請輸入價格'
    if (isNaN(value)) return '價格必須為數(shù)字'
    if (value < 0) return '價格必須為正數(shù)'
    return true
  },
  market_price (value) {
    if (!value) return '請輸入市場價格'
    if (isNaN(value)) return '市場價格必須為數(shù)字'
    if (value < 0) return '市場價格必須為正數(shù)'
    return true
  },
  specsid (value) {
    value = parseInt(value)
    if (value === 0) {
      return '請選擇商品規(guī)格'
    }
    return true
  },
  specsattr (value) {
    return value === '' ? '請選擇規(guī)格屬性' : true
  },
  img (value) {
    if (!value) return '請上傳商品圖片'
    return true
  },
  description (value) {
    return value === '' ? '請輸入商品詳情' : true
  }
}

添加接口文件

/src/api/goods.js

import http from './http'

// 添加商品
export const addGoods = (data) => {
  // 有數(shù)據(jù)上傳, 需要設(shè)置headers
  return http.post('/goodsadd', data, {
    headers: {
      'Content-type': 'multipart/form-data'
    }
  })
}

// 修改規(guī)格
export const updateGoods = (data) => {
// 判斷data中是否包含id屬性且大于0
  if (!data.get('id')) {
    return Promise.reject(new Error('缺少ID參數(shù)或id參數(shù)錯誤'))
  }
  // 有數(shù)據(jù)上傳, 需要設(shè)置headers
  return http.post('/goodsedit', data, {
    headers: {
      'Content-type': 'multipart/form-data'
    }
  })
}

// 分頁獲取商品數(shù)據(jù)
export const getPageGoods = (page = 1, size = 4) => {
  return http.get('/goodslist', {
    params: {
      page,
      size
    }
  })
}

// 獲取商品總數(shù)量
export const getGoodsTotal = () => {
  return http.get('/goodscount')
}

// 刪除商品
export const deleteGoods = (id) => {
  return http.post('/goodsdelete', { id })
}

vuex中處理商品數(shù)據(jù)

// 導(dǎo)入接口文件
import { getPageGoods, getGoodsTotal } from '@/api/goods'

export default {
  namespaced: true,
  state: {
    allList: [], // 所有的規(guī)格
    list: [],
    page: 1, // 當(dāng)前的頁碼
    size: 4, // 每頁顯示的條數(shù)
    total: 0 // 管理員用戶總數(shù)
  },
  mutations: {
    SET_LIST (state, list) {
      state.list = list
    },
    SET_TOTAL (state, total) {
      state.total = total
    },
    SET_PAGE (state, page) {
      state.page = page
    },
    SET_ALLLIST (state, list) {
      state.allList = list
    }
  },
  actions: {
    getGoodsList ({commit, state}) {
      getPageGoods(state.page, state.size).then(res => {
        // console.log(res)
        commit('SET_LIST', res)
      })
    },
    getGoodsTotal ({commit}) {
      getGoodsTotal().then(res => {
        // console.log(res)
        commit('SET_TOTAL', res[0].total || 0)
      })
    },
    // 獲取所有商品
    async getAllGoods ({commit}) {
      const total = await getGoodsTotal().then(res => res[0].total || 0)
      // console.log(total)
      if (total > 0) {
        const list = await getPageGoods(1, total)
        // console.log(list)
        commit('SET_ALLLIST', list)
      }
    }
  }
}

展示數(shù)據(jù)

/src/pages/goods/components/list.vue