em-fe / footer

C 端统一底部

底部弹框组件

Vue.js 2.x C端的业务组件。

安装

$ yarn add emfooter

底部弹框(wap)

基于Vue.js 的 前端业务组件。

投诉

0.5.0 新增。添加属性 complaint 即可。

浏览器手机模式在线预览

<w-footer-wap
  mode="none"
  logoColor="white"
  complaint
  complaintLink="https://www.evente.cn"
/>

没有主办图片的

浏览器手机模式在线预览

<w-footer-wap
  centerLink="https://www.baidu.com"
  orderLink="https://www.qq.com"
  orgid="100015"
  :loginAction="loginAction"
  :countrycodeAction="countrycodeAction"
  :sendAction="sendAction"
/>

主办图片

浏览器手机模式在线预览

<w-footer-wap
  centerLink="https://www.baidu.com"
  orderLink="https://www.qq.com"
  orgid="100015"
  orgImg="https://2img.evente.cn/7b/7b/81/a9b42253e54228e580d3b898be.jpg"
  :loginAction="loginAction"
  :countrycodeAction="countrycodeAction"
  :sendAction="sendAction"
/>

只有底部图片

浏览器手机模式在线预览

只需添加 mode="none" 即可。

<w-footer-wap mode="none" />

API

参数	说明	类型	是否必填	默认值
centerText	个人中心文案	String	否	个人中心
centerLink	个人中心链接	String|Number	否	wap/personal
orderText	我的订单文案	String	是	我的订单
orderLink	我的订单链接	String|Number	否	wap/orderlist
exitText	退出账号文案	String	是	退出账号
logoutAction	退出账号的接口	String	是	无
domain	退出账号清除cookie的主域	String	是	根据 env 的 NODE_ENV ，对不同环境进行判断
env	环境(process.env)用于连接跳转	Object	是	无
zIndexModal	确认弹框的层级	Number	是	99
zIndexLogin	登录弹框的层级	Number	是	99
orgid	主办 id	String|Number	是	无
orgImg	主办 定制白标	String	是	无
useRouter	是否用 vue-router 跳转	Boolean	否	无
loginClose	登录弹框关闭	Function	否	() => {}
loginSuccess	登录成功	Function	否	() => {}
mode	底部的模式，可选: all, none 。 all展示主办图片和快捷入口，none只展示。 0.3.0 新增。	String	否	all
logoColor	活动易提供技术支持的颜色设置，可选值： white | gray 。0.4.0 新增。	String	否	gray
complaint	是否显示投诉入口 0.5.0 新增 。	Boolean	否	无
complaintLink	投诉链接定义 0.5.0 新增 。	String	否	无
productId	产品 ID 0.6.0 新增 。	String | Number	否	无
productType	产品类型 0.6.0 新增 。	String	否	无
userId	用户 ID 0.7.0 新增 。	String	否	无
modalTitle	退出文案提示 1.0.0 新增 。	String	否	提示
modalContent	退出内容文案提示 1.0.0 新增 。	String	否	确定退出当前账号吗？

方法

参数	说明	返回值
logout	退出成功的回调	无
login	点击登录	无

需要的环境

• node.js >= 9.0.0
• npm >= 5.0.0

说明

本仓库是用脚手架 fecli，结合 component-template 模板生成的。