vue-reverse/examples/actions/product/getProduct.js

import Vue from 'vue'
import store from '@/store'

export default function getPattern (payload = {}) {
  const role = store.state.user.role
  return new Promise(async (resolve, reject) => {
    const id = payload.id
    // 城市
    const cityComponentData = {
      nodeType: 'item',
      required: true,
      label: `可售卖城市`,
      nodeList: [
        {
          nodeType: 'select',
          keyword: 'city_ids',
          hub: 'product-detail',
          props: {
            placeholder: `请选择可售卖城市`,
            multiple: true,
          },
        },
      ],
    }

    // 对应商品
    const codeComponentData = {
      nodeType: 'item',
      required: false,
      label: `对应商品`,
      nodeList: [
        {
          nodeType: 'input',
          keyword: 'other_code',
          hub: 'product-detail',
          props: {
            placeholder: `请选择对应商品`,
          },
        },
      ],
    }

    // 商品名称
    const nameComponentData = {
      nodeType: 'item',
      required: true,
      label: '商品名称',
      nodeList: [
        {
          nodeType: 'input',
          keyword: 'name',
          hub: 'product-detail',
          props: {
            placeholder: `请输入商品名称`,
          },
        },
      ],
    }

    // 上架名称
    const saleComponentData = {
      nodeType: 'item',
      required: true,
      label: '上架名称',
      nodeList: [
        {
          nodeType: 'input',
          keyword: 'sale_name',
          hub: 'product-detail',
          props: {
            placeholder: `请输入上架名称`,
          },
        },
      ],
    }

    // 子标题
    const subtitleComponentData = {
      nodeType: 'item',
      required: false,
      label: '子标题',
      nodeList: [
        {
          nodeType: 'input',
          keyword: 'subtitle',
          hub: 'product-detail',
          props: {
            placeholder: `请选输入子标题`,
          },
        },
      ],
    }

    // 分类
    const levelComponentData = {
      nodeType: 'item',
      required: true,
      label: '商品分类',
      nodeList: [
        {
          nodeType: 'select',
          keyword: 'category_id1',
          hub: 'product-detail',
          props: {
            placeholder: '选择一级分类',
            filterable: true,
            clearable: true,
          },
        },
        {
          nodeType: 'select',
          keyword: 'category_id2',
          hub: 'product-detail',
          props: {
            placeholder: '选择二级分类',
            filterable: true,
            clearable: true,
          },
          dependency: {
            type: 'hide',
            keyword: 'category_id1',
          },
        },
        {
          nodeType: 'select',
          keyword: 'category_id3',
          hub: 'product-detail',
          props: {
            placeholder: '选择三级分类',
            filterable: true,
            clearable: true,
          },
          dependency: {
            type: 'hide',
            keyword: 'category_id2',
          },
        },
      ],
    }

    // 商品主图
    const imgComponentData = {
      nodeType: 'item',
      required: true,
      label: '商品主图',
      tip: '图片建议尺寸：240*240像素',
      nodeList: [
        {
          nodeType: 'uploader',
          keyword: 'img',
          hub: 'product-detail',
          props: {},
        },
      ],
    }

    // 通栏大图
    const bigImgComponentData = {
      nodeType: 'item',
      required: false,
      label: '通栏大图',
      tip: '图片建议尺寸：750*300像素，用于通栏模式下的商品列表页展示',
      nodeList: [
        {
          nodeType: 'uploader',
          keyword: 'big_img',
          hub: 'product-detail',
          props: {},
        },
      ],
    }

    // 商品视频
    const videoComponentData = {
      nodeType: 'item',
      required: false,
      label: '商品视频',
      tip: '视频建议时长9-30秒，建议视频宽高比16：9',
      nodeList: [
        {
          nodeType: 'uploader',
          keyword: 'video',
          hub: 'product-detail',
          props: {
            type: 'video',
          },
        },
      ],
    }

    // 商品图集
    const imgsComponentData = {
      nodeType: 'item',
      required: true,
      label: '商品图集',
      size: 'flow',
      tip: '建议尺寸：340*340像素，比例为1：1，最多上传15张',
      nodeList: [
        {
          nodeType: 'uploader',
          keyword: 'imgs',
          hub: 'product-detail',
          props: {
            max: 15,
          },
        },
      ],
    }

    // 储藏方式
    const storeTypeComponentData = {
      nodeType: 'item',
      required: true,
      label: '储藏方式',
      nodeList: [
        {
          nodeType: 'checkboxGroup',
          keyword: 'store_type_ids',
          hub: 'product-detail',
          props: {},
        },
      ],
    }

    // 储藏方式
    const tagComponentData = {
      nodeType: 'item',
      required: true,
      label: '检测标签',
      nodeList: [
        {
          nodeType: 'tag',
          keyword: 'label',
          hub: 'product-detail',
          props: {},
        },
      ],
    }

    // 检测报告
    const reportComponentData = {
      nodeType: 'item',
      required: false,
      label: '检测报告',
      nodeList: [
        {
          nodeType: 'uploader',
          keyword: 'report',
          hub: 'product-detail',
          props: {
            max: 9,
          },
        },
      ],
    }

    const attributeComponentData = {
      nodeType: 'item',
      required: true,
      label: '规格属性分类',
      nodeList: [
        {
          nodeType: 'attribute',
          keyword: 'attribute_category_id',
          hub: 'product-detail',
          props: {},
        },
      ],
    }

    const patternComponentData = {
      nodeType: 'item',
      required: true,
      label: '规格属性',
      size: 'flow',
      nodeList: [
        {
          nodeType: 'pattern',
          keyword: 'sku',
          hub: 'product-detail',
          props: {},
        },
      ],
    }

    const parameterComponentData = {
      nodeType: 'item',
      required: true,
      label: '商品参数',
      size: 'flow',
      nodeList: [
        {
          nodeType: 'parameter',
          keyword: 'parameter',
          hub: 'product-detail',
          props: {},
        },
      ],
    }

    const deliverTypeComponentData = {
      nodeType: 'item',
      required: true,
      label: '配送方式',
      nodeList: [
        {
          nodeType: 'radioGroup',
          keyword: 'deliver_type',
          hub: 'product-detail',
          props: {},
        },
      ],
    }

    const confirmSaleComponentData = {
      nodeType: 'item',
      required: true,
      label: '审核后立即上架',
      nodeList: [
        {
          nodeType: 'radioGroup',
          keyword: 'is_confirm_sale',
          hub: 'product-detail',
          props: {},
        },
      ],
    }

    const receiveComponentData = {
      nodeType: 'item',
      required: true,
      label: '预计配送时间',
      nodeList: [
        {
          nodeType: 'receive',
          keyword: 'receive_type',
          hub: 'product-detail',
          props: {},
        },
      ],
    }

    const limitNumComponentData = {
      nodeType: 'item',
      required: true,
      label: '限购数量',
      tip: '数量为0则不限购',
      nodeList: [
        {
          nodeType: 'inputNumber',
          keyword: 'limit_number',
          hub: 'product-detail',
          props: {
            min: 0,
          },
        },
      ],
    }

    const limitTypeComponentData = {
      nodeType: 'item',
      required: true,
      label: '限购类型',
      nodeList: [
        {
          nodeType: 'radioGroup',
          keyword: 'limit_type',
          hub: 'product-detail',
          props: {},
        },
      ],
    }

    const descComponentData = {
      nodeType: 'item',
      required: false,
      label: '商品详情',
      size: 'flow',
      nodeList: [
        {
          nodeType: 'editor',
          keyword: 'desc',
          hub: 'product-detail',
          props: {},
        },
      ],
    }

    // 整体组件数据
    const componentData = [
      {
        nodeType: 'note',
        text: '',
      },
      {
        nodeType: 'block',
        nodeList: [
          {
            nodeType: 'note',
            text: '基本信息',
          },
          cityComponentData,
          codeComponentData,
          nameComponentData,
          saleComponentData,
          subtitleComponentData,
          levelComponentData,
          imgComponentData,
          bigImgComponentData,
          videoComponentData,
          imgsComponentData,
          storeTypeComponentData,
          tagComponentData,
          reportComponentData,
        ],
      },
      {
        nodeType: 'block',
        nodeList: [
          {
            nodeType: 'note',
            text: '价格库存',
          },
          attributeComponentData,
          patternComponentData,
          parameterComponentData,
        ],
      },
      {
        nodeType: 'block',
        nodeList: [
          {
            nodeType: 'note',
            text: '物流信息',
          },
          deliverTypeComponentData,
        ],
      },
      {
        nodeType: 'block',
        nodeList: [
          {
            nodeType: 'note',
            text: '其他信息',
          },
          confirmSaleComponentData,
          receiveComponentData,
          limitNumComponentData,
          limitTypeComponentData,
          descComponentData,
        ],
      },
    ]

    const value = {
      city_ids: [],
      other_code: null,
      name: null,
      sale_name: null,
      subtitle: null,
      category_id1: null,
      category_id2: null,
      category_id3: null,
      img: null,
      big_img: null,
      video: null,
      imgs: [],
      store_type_ids: [],
      label: [],
      report: [],
      attribute_category_id: null,
      sku: [],
      parameter: [],
      deliver_type: null,
      is_confirm_sale: null,
      receive_type: 0,
      receive_time: '',
      limit_number: 0,
      limit_type: 0,
      desc: '',
      // 组件使用数据：规格、参数
      patternData: [],
      parameterData: [],
    }

    const option = {
      city_ids: {
        list: [],
      },
      category_id1: {
        type: 'async',
        refresh: true,
        list: [],
      },
      category_id2: {
        type: 'async',
        refresh: true,
        dependency: {
          keyword: 'category_id1',
        },
        list: [],
      },
      category_id3: {
        type: 'async',
        refresh: true,
        dependency: {
          keyword: 'category_id2',
        },
        list: [],
      },
      attribute_category_id: {
        type: 'async',
        list: [],
      },
      label: {
        list: [],
      },
      store_type_ids: {
        list: [],
      },
      deliver_type: {
        list: [],
      },
      is_confirm_sale: {
        list: [],
      },
      limit_type: {
        list: [],
      },
    }

    const patternDetailData = {
      componentData,
      value,
      error: {},
      option,
    }

    if (id) {
      try {
        const { data } = await Vue.http.get(`/product/product/detail?id=${id}`)
        data.store_type_ids = data.store_type_ids.split(',').map(Number)
        data.limit_type = Number(data.limit_type)
        data.city_ids = data.city_ids.map(Number)
        value.parameterData = data.parameter.map(i => {
          return {
            name: i.name,
            list: [i.value],
            selected: i.value,
          }
        })

        value.patternData = data.spec.map(i => {
          return {
            name: i.name,
            list: i.value,
            selected: i.value,
          }
        })

        Object.assign(value, data)
        option.category_id1.list.push({ label: data.category_name1, value: data.category_id1 })
        option.category_id2.list.push({ label: data.category_name2, value: data.category_id2 })
        option.category_id3.list.push({ label: data.category_name3, value: data.category_id3 })

        resolve({
          componentData,
          value,
          error: {},
          option,
          preview: role === 'admin',
        })
      } catch (e) {
        console.log(e)
      }
    }
    resolve(patternDetailData)
  })
}