gs-ganglonggou-components
v0.1.5
Published
-组件集合
Readme
岗隆购-组件包
使用
import glComponents from 'ganglonggou-components/dist/ganglonggou-components.common'
import 'ganglonggou-components/dist/ganglonggou-components.css'
Vue.use(glComponents);商品搜索页
Props
| 参数 | 说明 | 类型 | 默认值 | 必须 | | ---- | ---- | ---- | ---- | ---- | | api-base-url | api接口基础头,example:http://xx/api/ | string | - | true | | son-into-type | 子入口类型 | string | - | true | | keyword-logs | 本地搜索记录 | string | [] | false | | head-open | 是否撑开头部 | Boolean | true | false |
Events
| 事件名 | 说明 | 回调参数 | | ---- | ---- | ---- | | back-click | 广告位点击触发 | adItemData：广告位信息 | | clean-keyword-log | 清除搜索历史触发 | - | | go-search | 商品位点击触发 | keyword:搜索关键词 | | service-click | 客服点击 | - |
Example
<li-search-goods :api-base-url="apiBaseUrl"
son-into-type="wx"
:keyword-logs="keywordLogs"
:head-open="true"
@back-click="backClick"
@clean-keyword-log="cleanKeywordLog"
@go-search="goSearch"
@service-click="serviceClick"/>所有分类页
Props
| 参数 | 说明 | 类型 | 默认值 | 必须 | | ---- | ---- | ---- | ---- | ---- | | api-base-url | api接口基础头,example:http://xx/api/ | string | - | true | | head-open | 是否撑开头部 | Boolean | true | false | | ori-classify-data | 原始分类数组 | Array | - | true |
Events
| 事件名 | 说明 | 回调参数 | | ---- | ---- | ---- | | classify-click | 分类条目点击 | classifyName：分类名称 | | bar-click | 推广图点击 | goodsId | | search-box-click | 搜索框点击 | - | | service-click | 客服点击 | - |
Example
<li-all-classify :api-base-url="apiBaseUrl"
:head-open="false"
:ori-classify-data="testData"
@classify-click="classifyItemClick"
@bar-click="barClick"
@search-box-click="searchBoxClick"
@service-click="serviceClick"/>搜索完成页
Props
| 参数 | 说明 | 类型 | 默认值 | 必须 | | ---- | ---- | ---- | ---- | ---- | | api-base-url | api接口基础头,example:http://xx/api/ | string | - | true | | head-open | 是否撑开头部 | Boolean | true | false | | keyword | 搜索关键词 | String | - | true | | show-keyword | 是否显示搜索关键词 | Boolean | false | false |
Events
| 事件名 | 说明 | 回调参数 | | ---- | ---- | ---- | | back-click | 广告位点击触发 | adItemData：广告位信息 | | search-box-click | 搜索框点击 | - | | service-click | 客服点击 | - | | goods-card-click | 商品点击 | goodsInfo |
Example
<li-search-goods-complete :api-base-url="apiBaseUrl"
keyword="苹果"
:head-open="true"
:show-keyword="false"
@back-click="backClick"
@search-box-click="searchBoxClick"
@goods-card-click="goodsCardClick"
@service-click="serviceClick"/>首页
Props
| 参数 | 说明 | 类型 | 默认值 | 必须 | | ---- | ---- | ---- | ---- | ---- | | apiBaseUrl | api接口基础头,example:http://xx/api/ | string | - | true | | headOpen | 是否需要头部撑开 | boolean | true | false | | showSys | 是否显示扫一扫图标 | boolean | true | false |
Events
| 事件名 | 说明 | 回调参数 | | ---- | ---- | ---- | | ad-location-click | 广告位点击触发 | adItemData：广告位信息 | | search-click | 搜索栏点击触发 | - | | goods-card-click | 商品位点击触发 | {goodsId:100,goodsImg:"url",goodsName:"name"} | | more-classify-click | 分类左侧更多点击触发 | parentClassifyId:分类id | | every-day-box-click | 每日特价区域点击 | — | | sys-camera-click | 扫一扫相机点击 | — | | sys-photo-click | 扫一扫相册点击 | — |
Example
<li-first-page :api-base-url="apiBaseUrl"
:head-open="true"
:show-sys="true"
@ad-location-click="adLocationClick"
@search-click="searchBoxClick"
@goods-card-click="goodsCardClick"
@more-classify-click="moreClassifyClick"
@every-day-box-click="everyDayBoxClick"
@sys-camera-click="cameraClick"
@sys-photo-click="photoClick"/>分类广告页
Props
| 参数 | 说明 | 类型 | 默认值 | 必须 | | ---- | ---- | ---- | ---- | ---- | | apiBaseUrl | api接口基础头,example:http://xx/api/ | string | - | true | | parentClassifyId | 父分类ID | number | - | true | | headOpen | 是否需要头部撑开 | boolean | true | false |
Events
| 事件名 | 说明 | 回调参数 | | ---- | ---- | ---- | | goods-card-click | 商品位点击触发 | goodsName | | left-icon-click | 点击头部左侧返回触发 | - |
Example
<li-classify-ad v-if="false"
:apiBaseUrl="apiBaseUrl"
:parent-classify-id="819"
:head-open="true"
@left-icon-click="backClick"
@goods-card-click="goodsCardClick"/>分类广告页
Props
| 参数 | 说明 | 类型 | 默认值 | 必须 | | ---- | ---- | ---- | ---- | ---- | | apiBaseUrl | api接口基础头,example:http://xx/api/ | string | - | true | | parentClassifyId | 父分类ID | number | - | true | | headOpen | 是否需要头部撑开 | boolean | true | false |
Events
| 事件名 | 说明 | 回调参数 | | ---- | ---- | ---- | | goods-card-click | 商品位点击触发 | goodsName | | left-icon-click | 点击头部左侧返回触发 | - |
Example
<li-classify-ad :apiBaseUrl="apiBaseUrl"
:parent-classify-id="819"
:head-open="true"
@left-icon-click="backClick"
@goods-card-click="goodsCardClick"/>商品详情
Props
| 参数 | 说明 | 类型 | 默认值 | 必须 | | ---- | ---- | ---- | ---- | ---- | | apiBaseUrl | api接口基础头,example:http://xx/api/ | string | - | true | | goodsName | 商品名称 | string | "" | false | | goodsMainImg | 商品主图 | string | "" | false | | goodsId | 商品id | string | - | true | | skuId | skuId | boolean | 0 | false | | showRightButton | 是否显示分享按钮 | boolean | true | false | | isOpen | 是否需要安全边距 | boolean | true | false | | integralName | 积分名称 | string | - | true | | cartNumber | 购物车数量 | number | 0 | false |
Events
| 事件名 | 说明 | 回调参数 | | ---- | ---- | ---- | | coupon-click | 广告位点击触发 | adItemData：广告位信息 | | get-more-evaluate | 更多评价 | {goodsId: 100,evaluateCount: 200} | | goods-card-click | 点击商品卡片触发 | goodsInfo | | online-customer-service | 在线客服 | - | | phone-service | 电话客服 | - | | shop-car-click | 购物车 | - | | add-shop-cart | 加入购物车 | cartInfo | | immediate-buy | 立即购买 | cartInfo | | page-complete | 页面准备完成回调 | cartInfo | | back-button-click | 点击返回按钮 | - | | share-button-click | 点击分享按钮 | shareInfo | | image-preview | 预览图片 | imgSrc | | page-load-fail | 页面加载失败回调 | - | | sku-switched | sku切换 | cartInfo |
CartInfo
| 键名 | 备注 | | ---- | ---- | | goods_number | 商品数量 | | goods_sn | | | goods_name | | | goods_id | | | cat_id | | | goods_head_name | | | goods_price | 商品价格 | | one_goods_price | 商品单价 | | market_price | 划线价 | | goods_stock | 商品库存 | | goods_sales_volume | 销量 | | goods_attribute_img | 当前属性图片 | | sku_id | 所选属性id | | attr_desc | 所选属性详情 | | is_promote | 是否秒杀商品 | | promote_number | | | promote_start_date | | | promote_end_date | | | give_integral | 返积分 | | integral | 用积分 | | one_give_integral | 返积分 | | one_integral | 用积分 | | integral_desc | 积分描述 |
Example
<li-goods-page :api-base-url="apiBaseUrl"
:show-right-button="true"
:goods-name="goodsName"
:goods-main-img="goodsMainImg"
:sku-id="29511"
:is-open="true"
:cart-number="1"
integral-name="积分"
:goods-id="goodsId"
@coupon-click="couponClick"
@get-more-evaluate="getMoreEvaluate"
@goods-card-click="goodsCardClick"
@online-customer-service="serviceClick"
@phone-service="phoneService"
@shop-car-click="shopCarClick"
@add-shop-cart="addShopCart"
@immediate-buy="immediateBuy"
@page-complete="pageComplete"
@back-button-click="backClick"
@share-button-click="shareButtonClick"
@image-preview="imagePreview"
@page-load-fail="pageLoadFail"
@sku-switched="skuSwitched"
/>填写订单
Props
| 参数 | 说明 | 类型 | 默认值 | 必须 | | ---- | ---- | ---- | ---- | ---- | | api-base-url | api接口基础头,example:http://xx/api/ | string | - | true | | carts-preview | 商品列表 [{goodsId: 757,skuId: 44606,goodsNumber: 1,},] | array | - | true | | user-token | 用户token | boolean | - | true | | integral-name | 积分名称 | boolean | - | true |
Events
| 事件名 | 说明 | 回调参数 | | ---- | ---- | ---- | | page-load-fail | 页面加载失败 | errorMsg | | write-order-success | 订单提交成功 | orderSn | | write-order-fail | 订单提交失败 | errorMsg | | add-address | 添加收货地址 | - | | switch-address | 切换收货地址 | - |
Example
<li-write-order :api-base-url="apiBaseUrl"
:carts-preview="cartsPreview"
:user-token="userToken"
:integral-name="integralName"
@page-load-fail="pageLoadFail"
@write-order-success="writeOrderSuccess"
@write-order-fail="writeOrderFail"
@add-address="addAddress"
@switch-address="switchAddress"/>