details.js 4.36 KB
import urlAlias from '../url'
import request from '../request'

const {
  read,
  cartList,
  makePost,
} = urlAlias

const state = {
  // 为配合参数选择框
  goodInfo: {},
  // 轮播图
  carousel: [
    '/static/img/detail/d9.png',
  ],
  // 商品基本信息
  goodsInfo: {
    name: '暂无名称',
    price: '暂无价格',
    discountPrice: undefined,
    tradeNumber: undefined,
  },
  // 商品介绍
  tag: {
    prod_tag_style: [{
      label: '青春学子风',
      value: '54',
    }],
  },
  // 规格参数
  specification: [
    { key: 'frame_width', img: '/static/img/detail/d2.png', standard: '框架宽', slength: '139mm' },
    { key: 'glass_width', img: '/static/img/detail/d3.png', standard: '镜片宽', slength: '51mm' },
    { key: 'glass_height', img: '/static/img/detail/d4.png', standard: '镜片高', slength: '45mm' },
    { key: 'nose_width', img: '/static/img/detail/d5.png', standard: '鼻架宽', slength: '19mm' },
    { key: 'leg_long', img: '/static/img/detail/d6.png', standard: '框架耳长', slength: '138mm' },
    { key: 'weight', img: '/static/img/detail/d7.png', standard: '框架重', slength: '19克(grams)' },
  ],
  // 评价
  evaluate: {
    rate: '100%',
    star: 5,
    tag: [{ name: '价格实惠' }],
  },
  // 商品详情
  more: '',
  // 购物车数目
  cartNumber: 0,
  // skuList
  skuList: [],
  postUrl: 'https://api.glass.xiuyetang.com/adv_pic/428_0_7.png',
}

const mutations = {
  INIT: (state, { goodInfo, carousel, goodsInfo, tag, specification, evaluate, more, skuList }) => {
    state.goodInfo = goodInfo
    state.carousel = carousel
    state.goodsInfo = goodsInfo
    state.tag = tag
    state.specification = specification
    state.evaluate = evaluate
    state.more = more
    state.skuList = skuList
  },
  CART: (state, number) => {
    state.cartNumber = number
  },
  POST: (state, url) => {
    state.postUrl = url
  },
}

const actions = {
  // 获取详情
  details({ commit, rootState }, param) {
    return new Promise((resolve, reject) => request({
      url: read,
      data: param,
      success: ({ data: { data } }) => {
        console.log('data.tag', data.tag)
        // 规格参数设置
        const specification = rootState.details.specification
        const parameter = {
          frame_width: data.frame_width,
          glass_width: data.glass_width,
          glass_height: data.glass_height,
          nose_width: data.nose_width,
          leg_long: data.leg_long,
          weight: data.weight,
        }
        for (let index = 0; index < specification.length; index++) {
          if (specification[index].key !== 'weight') {
            specification[index].slength = `${parameter[specification[index].key]}mm`
          } else {
            specification[index].slength = `${parameter[specification[index].key]}克(grams)`
          }
        }

        commit('INIT', {
          goodInfo: data,
          skuList: data.skuList,
          carousel: data.pics,
          goodsInfo: {
            name: data.p_name,
            price: data.priceArea.Min_Price,
            discountPrice: parseInt(data.priceArea.Min_Price * (1 + Number(data.priceArea.discount) / 100)),
            tradeNumber: data.trade_num,
          },
          tag: data.tag,
          specification,
          evaluate: {
            rate: data.judgeInfo.good,
            tag: data.judge_tag,
            star: parseInt(5 * Number(data.judgeInfo.good.slice(0, -1)) / 100),
          },
          // eslint-disable-next-line
          more: data.prodIntro1.replace(/\<img/gi, '<img style="max-width:100%;height:auto"'),
        })
        resolve(data)
      },
      fail: (res) => {
        console.log('fail status ===>', res)
      },
    }))
  },
  // 获取购物车列表
  getCartNumber({ commit }, param) {
    return new Promise((resolve) => request({
      url: cartList,
      data: param,
      success: ({ data: { data } }) => {
        let number = 0
        for (let index = 0; index < data.length; index++) {
          number += Number(data[index].num)
        }
        commit('CART', number)
      },
    }))
  },
  // 生成分享海报
  post({ commit }, param) {
    return new Promise((resolve) => request({
      url: makePost,
      data: param,
      success: ({ data }) => {
        commit('POST', data.data)
        resolve()
      },
    }))
  },
}

export default {
  namespaced: true,
  state,
  mutations,
  actions,
}