ganglonggou-components
v1.0.7
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：广告位信息 | | classify-button-click | 顶部导航条分类按钮点击 | - | | search-click | 搜索栏点击触发 | - | | goods-card-click | 商品位点击触发 | {goodsId:100,goodsImg:"url",goodsName:"name"} | | more-classify-click | 分类左侧更多点击触发 | parentClassifyId:分类id | | every-day-box-click | 每日特价区域点击 | — | | news-click | 消息按钮点击 | — | | sys-camera-click | 扫一扫相机点击 | — | | sys-photo-click | 扫一扫相册点击 | — | | coupon-click | 会员有礼区域-优惠券点击 | — | | integral-click | 会员有礼区域-优惠券点击 | — |
Example
<li-first-page v-if="true"
:api-base-url="apiBaseUrl"
:head-open="true"
:show-sys="true"
@ad-location-click="adLocationClick"
@classify-button-click="defaultClick"
@search-click="searchBoxClick"
@goods-card-click="goodsCardClick"
@more-classify-click="moreClassifyClick"
@every-day-box-click="everyDayBoxClick"
@news-click="defaultClick"
@sys-camera-click="cameraClick"
@sys-photo-click="photoClick"
@coupon-click="defaultClick"
@integral-click="defaultClick"/>分类广告页
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"/>包邮页面
Props
| 参数 | 说明 | 类型 | 默认值 | 必须 | |------------|---------------------------------|---------|------|-------| | apiBaseUrl | api接口基础头,example:http://xx/api/ | string | - | true | | headOpen | 是否需要头部撑开 | boolean | true | false |
Events
| 事件名 | 说明 | 回调参数 | |------------------|---------|-----------| | goods-card-click | 商品位点击触发 | goodsInfo | | back-click | 点击返回按钮 | - |
Example
<li-by-goods :api-base-url="apiBaseUrl"
:head-open="true"
@goods-card-click="goodsCardClick"
@back-click="backClick"
/>卡密激活组件
Props
| 参数 | 说明 | 类型 | 默认值 | 必须 | |------------|----------------------------------------------|--------|-----|------| | base_url | api接口基础头，例如：http://192.168.0.37:8008/api/v1/ | String | - | true | | user_token | 用户token | String | - | true |
Events
| 事件名 | 说明 | 回调参数 | |----------------|------------|---------------| | activationCase | 确认激活后的响应事件 | msg:true是激活成功 |
Example
<li-card-activation :user_token="user_token"
:base_url="base_url"
@activationCase="activationCase"/>如何使用余额组件
Example
<li-how-use-integral/>余额中心组件
Props
| 参数 | 说明 | 类型 | 默认值 | 必须 | |------------|-----------------------------------------------|----------|-----|------| | base_url | api接口基础头 ，例如：http://192.168.0.37:8008/api/v1/ | String | - | true | | user_token | 用户token | String | - | true | | buyCard | 购礼品卡 （跳转到余额卡商品页面） | function | - | true | | exchange | 激活礼品卡 （跳转到礼品卡页面） | function | - | true | | loginAdd | 每日签到 （跳转到每日签到页面） | function | - | true | | morePath | 赚余额 | function | - | true | | howUse | 余额如何使用 | function | - | true |
Example
<li-integral-center :user_token="userToken"
:buyCard="defaultClick"
:exchange="defaultClick"
:loginAdd="defaultClick"
:morePath="defaultClick"
:howUse="defaultClick"
:base_url="apiBaseUrl"/>签到领取余额
Props
| 参数 | 说明 | 类型 | 默认值 | 必须 | |--------------|----------------------------------------------|----------|-----|------| | base_url | api接口基础头，例如：http://192.168.0.37:8008/api/v1/ | String | - | true | | user_token | 用户token | String | - | true | | getAwardsLog | 查看奖品点击触发（用户查看获奖组件） | Function | - | true |
Example
<li-sign-in-get-integral
:base_url="apiBaseUrl"
:user_token="userToken"
:getAwardsLog="defaultClick"/>手机号绑定
Props
| 参数 | 说明 | 类型 | 默认值 | 必须 | |------------|---------------------------------|--------|-----|------| | apiBaseUrl | api接口基础头,example:http://xx/api/ | string | - | true | | userToken | 用户token | string | - | true |
Events
| 事件名 | 说明 | 回调参数 | |------------------|----------|------| | success-callback | 验证验证成功回调 | — |
Example
<li-mobile-number-binding :api-base-url="apiBaseUrl"
:user-token="userToken"/>手机号登录或注册
Props
| 参数 | 说明 | 类型 | 默认值 | 必须 | |---------------------|---------------------------------|--------|-----|-------| | api-base-url | api接口基础头,example:http://xx/api/ | string | - | true | | son-into-type | 子入口名称 | string | - | true | | wx-user-cache-name | wx用户缓存名称 | string | '' | false | | ali-user-cache-name | ali用户缓存名称 | string | '' | false |
Events
| 事件名 | 说明 | 回调参数 | |------------------|----------|-----------------| | success-callback | 验证验证成功回调 | userToken(用户令牌) |
Example
<li-mobile-number-sign-in-login :api-base-url="apiBaseUrl"
son-into-type="ios"
@success-callback="defaultClick"
:wx-user-cache-name="wxUserCacheName"
:ali-user-cache-name="aliUserCacheName"/>如何获取更多余额
Example
<li-more-get-integral/>现货专区
Props
| 参数 | 说明 | 类型 | 默认值 | 必须 | |------------|---------------------------------|---------|------|-------| | apiBaseUrl | api接口基础头,example:http://xx/api/ | string | - | true | | headOpen | 是否需要头部撑开 | boolean | true | false |
Events
| 事件名 | 说明 | 回调参数 | |------------------|---------|-----------| | goods-card-click | 商品位点击触发 | goodsInfo | | @back-click | 返回按钮 | - |
Example
<li-prompt-goods :api-base-url="apiBaseUrl"
:head-open="true"
@goods-card-click="goodsCardClick"
@back-click="backClick"/>好物推荐
Props
| 参数 | 说明 | 类型 | 默认值 | 必须 | |------------|---------------------------------|---------|------|-------| | apiBaseUrl | api接口基础头,example:http://xx/api/ | string | - | true | | headOpen | 是否需要头部撑开 | boolean | true | false |
Events
| 事件名 | 说明 | 回调参数 | |-------------------|---------|------------------| | ad-location-click | 广告位点击触发 | adItemData：广告位信息 | | goods-card-click | 商品位点击触发 | goodsInfo | | back-click | 返回按钮触发 | - |
Example
<li-recommend-goods :api-base-url="apiBaseUrl"
:head-open="true"
@ad-location-click="adLocationClick"
@goods-card-click="goodsCardClick"
@back-click="backClick"/>每日推荐
Props
| 参数 | 说明 | 类型 | 默认值 | 必须 | |------------|---------------------------------|---------|------|-------| | apiBaseUrl | api接口基础头,example:http://xx/api/ | string | - | true | | headOpen | 是否需要头部撑开 | boolean | true | false | |
Events
| 事件名 | 说明 | 回调参数 | |-------------------|---------|------------------| | ad-location-click | 广告位点击触发 | adItemData：广告位信息 | | goods-card-click | 商品位点击触发 | goodsInfo | | back-click | 返回按钮 | - |
Example
<li-everyday-goods :api-base-url="apiBaseUrl"
:head-open="false"
@ad-location-click="adLocationClick"
@goods-card-click="goodsCardClick"
@back-click="backClick"/>购物车
Props
| 参数 | 说明 | 类型 | 默认值 | 必须 | |----------------|----------------------------------------------------------------------------------------|---------|------|-------| | apiBaseUrl | api接口基础头,example:http://xx/api/ | string | - | true | | headOpen | 是否需要头部撑开 | boolean | true | false | | showBackButton | 是否显示返回按钮 | boolean | true | false | | cartsPreview | 购物车预览数组 cartsPreview: [{ goodsId: 384, goodsNumber: 2, skuId: 31128, selected: true,}] | Array | - | false |
Events
| 事件名 | 说明 | 回调参数 | |--------------------------|-----------|---------------------------------------------------------| | add-cart | 添加购物车 | cartInfo | | delete-cart | 删除购物车 | {goodsId: 384, skuId: 31128} | | update-cart-number | 切换购物车数量 | {previewCart: {goodsId: 384, skuId: 31128},number:2} | | switch-cart-choice-state | 切换购物车选中状态 | {previewCart: {goodsId: 384, skuId: 31128},state: true} | | goods-click | 商品点击 | goodsId | | back-button-click | 返回按钮点击 | - | | settle | 结算 | - | | buy-goods | 选购商品按钮点击 | - |
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-shop-carts :api-base-url="apiBaseUrl"
:head-open="headOpen"
:show-back-button="showBackButton"
:carts-preview="cartsPreview"
@add-cart="addCart"
@delete-cart="deleteCart"
@update-cart-number="updateCartNumber"
@switch-cart-choice-state="switchCartChoiceState"
@goods-click="goodsClick"
@buy-goods="buGoods"
@back-button-click="backButtonClick"
@settle="settle"/>余额签到奖项
Props
| 参数 | 说明 | 类型 | 默认值 | 必须 | |------------|----------------------------------------------|--------|-----|------| | base_url | api接口基础头，例如：http://192.168.0.37:8008/api/v1/ | String | - | true | | user_token | 用户token | String | - | true |
Events
| 事件名 | 说明 | 回调参数 | |-------------------|---------|------------------| | ad-location-click | 广告位点击触发 | adItemData：广告位信息 | | goods-card-click | 商品位点击触发 | goodsInfo | | back-click | 返回按钮触发 | - |
Example
<li-integral-sign-in-award :base_url="apiBaseUrl"
:user_token="userToken"/>个人中心
Props
| 参数 | 说明 | 类型 | 默认值 | 必须 | |-------------------|----------------------------------------------|---------|------|-------| | base_url | api接口基础头，例如：http://192.168.0.37:8008/api/v1/ | String | - | true | | user_token | 用户token | String | - | true | | login_or_out_show | 登录退出按钮是否展示 | Boolean | true | false |
Events
| 事件名 | 说明 | 回调参数 | |-----------------------|----------|-------------------------------------| | user_login_out | 退出登录 | - | | user_login | 登录 / 注册 | - | | user_setting | 设置 | - | | update_logo_img | 修改logo图片 | - | | edit_user_information | 修改用户信息 | - | | see_integral | 查看积分 | - | | see_coupon | 查看优惠券 | - | | see_order | 查看订单 | code:0是全部，1是待支付，2是待收货，3是待评价，4是退货/售后 | | see_address | 查看收货地址 | - |
Example
<li-personal-center :user_token="userToken"
:base_url="apiBaseUrl"
:login_or_out_show="false"
@user_login_out="defaultClick"
@user_login="defaultClick"
@user_setting="defaultClick"
@update_logo_img="defaultClick"
@edit_user_information="defaultClick"
@see_integral="defaultClick"
@see_coupon="defaultClick"
@see_order="defaultClick"
@see_address="defaultClick"/>激活礼品卡
Events
| 事件名 | 说明 | 回调参数 | |---------------|------------|------| | exchange_gift | 跳转到积分换好礼界面 | - | | scan_code | 扫码激活 | - | | card_code | 卡密激活 | - |待支付，2是待收货，3是待评价，4是退货/售后 | | see_address | 查看收货地址 | - |
Example
<li-activate-gift-card @exchange_gift="defaultClick"
@scan_code="defaultClick"
@card_code="defaultClick"/>app-登陆之前组件
Props
| 参数 | 说明 | 类型 | 默认值 | 必须 | |-----------------|---------------------------------|---------|------|-------| | show-ali-button | 是否显示支付宝登陆 | Boolean | true | false | | show-wx-button | 是否显示微信登陆 | Boolean | true | false | | show-np-button | 是否显示账户密码登陆 | Boolean | true | false | | api-base-url | api接口基础头,example:http://xx/api/ | string | - | true |
Events
| 事件名 | 说明 | 回调参数 | |---------------------|------------|------| | wechat-button-click | 微信按钮点击触发 | - | | alipay-button-click | 支付宝按钮点击触发 | - | | phone-button-click | 手机登陆按钮点击触发 | - |
Example
<li-before-login @wechat-button-click="defaultClick"
@alipay-button-click="defaultClick"
@phone-button-click="defaultClick"
:api-base-url="apiBaseUrl"
:show-ali-button="true"
:show-wx-button="true"/>手机号密码登陆组建
Props
| 参数 | 说明 | 类型 | 默认值 | 必须 | |--------------|---------------------------------|--------|-----|------| | api-base-url | api接口基础头,example:http://xx/api/ | string | - | true |
Events
| 事件名 | 说明 | 回调参数 | | ---- | ---- |--| | success-callback | 登陆成功回调 | 用户token |
Example
<li-name-pwd-login v-if="true"
:api-base-url="apiBaseUrl"
@success-callback="defaultClick"/>