ganglonggou-components

众里优选移动端-组件集合

1,312

Install
`npm install ganglonggou-components`
Latest Version:	1.0.7 (Jul 18, 2022)
Vue:	2
Last Updated:	Jul 18, 2022
Links:	Gitee · npm

Maintainer: liwy666

众里优选-组件包

使用

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	卡密激活	-
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"/>

Version History

Version	Released	Vue
1.0.7	Jul 18, 2022	^2.6.11
1.0.6	Jul 7, 2022	^2.6.11
1.0.5	Jul 6, 2022	^2.6.11
1.0.4	Jul 5, 2022	^2.6.11
1.0.3	Jul 5, 2022	^2.6.11
1.0.2	Jul 4, 2022	^2.6.11
1.0.1	Jun 23, 2022	^2.6.11
1.0.0	Jun 23, 2022	^2.6.11
0.1.33	Jun 21, 2022	^2.6.11
0.1.32	Jun 14, 2022	^2.6.11
0.1.31	Jun 14, 2022	^2.6.11
0.1.30	Jun 14, 2022	^2.6.11
0.1.29	Jun 10, 2022	^2.6.11
0.1.28	Jun 10, 2022	^2.6.11
0.1.27	Jun 10, 2022	^2.6.11
0.1.26	Jun 10, 2022	^2.6.11
0.1.25	Jun 10, 2022	^2.6.11
0.1.24	Jun 10, 2022	^2.6.11
0.1.23	Jun 10, 2022	^2.6.11
0.1.22	Jun 10, 2022	^2.6.11
0.1.21	Jun 10, 2022	^2.6.11
0.1.20	May 20, 2022	^2.6.11
0.1.19	Nov 24, 2020	^2.6.11
0.1.18	Nov 23, 2020	^2.6.11
0.1.17	Nov 20, 2020	^2.6.11
0.1.16	Nov 20, 2020	^2.6.11
0.1.15	Nov 19, 2020	^2.6.11
0.1.14	Nov 19, 2020	^2.6.11
0.1.13	Nov 19, 2020	^2.6.11
0.1.12	Nov 7, 2020	^2.6.11