初始化

import { GoodsSelector } from '@xiaoe/sense'
import '@xiaoe/sense/static/index.css'
Vue.use(GoodsSelector)

参数说明

参数	说明	类型	默认	其他
title	弹窗标题	String	选择商品	--
goodsDialog	商品选择器的开关	Boolean	false	必传
goodsTypeList	左侧商品列表配置	Array	[]	必传
goodsDetailsList	右侧商品详情数据	Array	[]	必传
selectType	单选false/多选true	Boolean	true	--
multipleChoice	单选的商品类型id 传入商品id 该类型id只能单选	Array	[]	--
selectType	单选false/多选true	Boolean	true	--
total	总条数	number	0	必传
isLoading	加载状态	number	10	必传
maxSelectionCount	最大可以选择多少条 0代表无限制	Number	0	--
defaultOptFor	默认选中	Array	[]	--

methods

方法名	说明	参数
clickComfire	商品选择成功后回调函数	data：选择的商品数据内容
beforeClose	关闭弹窗回调函数	无
getGoodsDetails	获取商品数据的方法，外部调用	商品类型ID 当前页和当前选择条数

参数的格式详细描述

简要描述：

• 左侧的商品类型配置表

goodsTypeList 参数说明 以下都是必传参数

键	值类型	说明
label	string	商品类型名称
type	number	类型ID
quantity	number	当前选中的条数存放的容器
newGoodsUrl	string	新建路由跳转地址
goodsList	Array	选中的商品数据

示例

[
 {
	label:'图文',
	type:1,
	quantity:0,
	newGoodsUrl:"/create_resource_page?type=1&upload_channel_type=1", 
	goodsList:[] ,
 },
	{
	label:"音频",
	type:2,
	quantity:0,
	newGoodsUrl:"/create_resource_page?type=2&upload_channel_type=1",
	goodsList:[] ,
 },
]

goodsDetailsList 参数说明

键	值类型	说明
resource_id	string	商品id
resource_type	number	类型ID
img_url	string	商品图片
title	string	商品名称
price	number	商品价格

goodsDetailsList以上参数都是必填参数, 选择商品后，选中的商品数据格式和goodsDetailsList传递进组件内的数据相同

示例

[
	{
		resource_id:"i_61c42c6360b2d29ee804e137",
		resource_type:1,
		price:1,
		img_url:"https://wechatapppro-1252524126.file.myqcloud.com/apppcHqlTPT3482/image/b_u_5b73e35149a67_ypMtbWtO/kx2yfrf90uyh.jpg",
		title:'精品图文课程',
 	},
	{
		resource_id:"i_61c42c6360b2d29ee804e137",
		resource_type:2,
		price:23,
		img_url:"https://wechatapppro-1252524126.file.myqcloud.com/apppcHqlTPT3482/image/b_u_5b73e35149a67_ypMtbWtO/kx2yfrf90uyh.jpg",
		title:'精品视频课程',
 	},
]

demo

<template>
<div>
	<GoodsSelector
			:goodsTypeList="goodsTypeList"
			:goodsDialog="goodsDialog"
			:goodsDetailsList="goodsDetailsList"
			@beforeClose="beforeClose"
			@getGoodsDetails="getGoodsDetails"
			:total="total"
			:isLoading="isLoading"
			:defaultOptFor="defaultOptFor"
			@confirm="confirm" 
		></GoodsSelector>
	<ss-button>选择商品</ss-button>
</div>
</template>

<script>
//导入组件
export default {
	data(){
	 return {
	   		goodsDetailsHeight:'420px',
            goodsDialog:false,
            // 左侧商品列表
            goodsTypeList:[
                  {
                      label:'图文',
                      type:1,
                      quantity:0, 
                      newGoodsUrl:"/create_resource_page?type=1&upload_channel_type=1", 
                      goodsList:[] ,
                  },
                  {
                      label:"音频",
                      type:2,
                      quantity:0, 
                      newGoodsUrl:"/create_resource_page?type=2&upload_channel_type=1",
                      goodsList:[] ,
                  },
                  {
                      label:'视频',
                      type:3,
                      quantity:0,
                      newGoodsUrl:"/create_resource_page?type=3&upload_channel_type=1",
                      goodsList:[] ,
                  },
                  {
                      label:"直播",
                      type:4,
                      quantity:0,
                      newGoodsUrl:"/course/alive#/manage/new?upload_channel_type=1",
                      goodsList:[] ,
                  },
                  {
                      label:'班课',
                      type:35,
                      quantity:0,
                      newGoodsUrl:"/big_class/#/courseManage/add/",
                      goodsList:[] ,
                  },
            ],
            // 右侧商品详情
            goodsDetailsList:[],   
            total:0,
            lastId:0,
            isLoading:false,
            defaultOptFor:[],
            configList:{
                maxSelectionCount:100,
            }
	 }
	},
	methods (){

	 beforeClose(){
		 this.showGoodsSelector = fales;
	 }
	 clickComfire(data){
	 // data:选择的商品参数
		 console.log(data)
	 }
	}
}
</script>