Touchealth-ui NPM

touchealth-ui

项目说明

本项目是势成科技前端内部使用的ui组件库已使用postcss插件转换样式px单位为vw，自适应移动端

项目结构

examples文件夹为本地测试文件夹，可引入编写的组件，进行开发调试 packages文件夹为ui组件文件夹，每个组件单独一个文件夹 src文件夹包含一些公用文件，包括图片，公用方法等 lib为打包后的组件包

打包发布npm包流程

打包为npm包 npm run lib
发布npm包

登录(未登录需登录验证npm账号) npm login
更新版本号(xx.xx.xx)
npm version patch修改版本号最后一位，表示一些补丁和修复
npm version minor修改版本号第二位，表示一个小版本的更新
npm version major修改版本号第一位，表示一个大版本的更新
发布 npm publish

外部使用npm包步骤

npm install touchealth-ui -S

在main.js文件中引入

import TouchealthUI from "touchealth-ui"
import "touchealth-ui/lib/touchealth-ui.css"
// 全局注册组件，暂不支持按需引入
Vue.use(TouchealthUI)

注意问题
- 如果运行项目出现一系列core-js依赖错误，输入下面命令进行依赖的安装。
```
npm install --save core-js@2
```

包含组件

分享组件
- 组件说明
  该组件是用于各大移动浏览器分享，根据浏览器种类共有三种表现：
  1. 微信浏览器
    微信浏览器弹出蒙层，指示用户点击右上角微信自带分享功能。该功能需要调用微信的分享接口，需要后端配合传入一些接口调用参数。
  2. 支付宝浏览器
    支付宝浏览器弹出「复制链接」页面，点击复制当前页面URL
  3. 其他浏览器
    其他浏览器若能唤醒自带的分享组件，即通过浏览器自身分享组件进行分享。若不能唤醒，则表现和支付宝浏览器分享一样，弹出「复制链接」页面。
- 使用方法
```
 <to-share :shareConf="shareConf" :wxApiConf="wxApiConf">
    <img slot="icon" class="icon" src=""/>
    <div slot="text" class="text">分享</div>
 </to-share>
```
- 参数
  - shareConf
    shareConf参数是分享的配置参数对象，包括imgUrl、title、desc、from、link。
    - imgUrl
      分享文案中的右侧图片
    - title
      分享文案中的标题
    - desc
      分享文案中的描述
    - from
      分享文案中的来源
    - link
      分享文案中的点击链接URL
  - wxApiConf
    wxApiConf参数是微信浏览器内分享的接口调用参数对象，包括appId、timestamp、nonceStr和signature。
  - 插槽
    该分享组件中的分享按钮icon及文案，均以插槽的形式开放到外部，相关样式也由外部进行定义。
优惠券组件
- 组件说明
  该组件是用于不同页面中关于优惠券的部分。由于不同页面优惠券内容，大体相似，但存在不同的细节，故组件通过type属性区分使用场景从而做一些组件内部结构调整。此外，对于优惠券单个对象中的couponStatus字段值在此做一个统一定义与说明。
  couponStatus表示优惠券的状态，0表示可领取，1表示已领取，2表示去使用，3表示不可用，4表示已使用，5表示未选择，6表示已选择。
- 使用方法
```
<to-coupon :couponList="couponList" :type="4" @getCoupon="getCoupon" @useCoupon="useCoupon" @chooseCoupon="chooseCoupon"></to-coupon>
```
- 参数
  - couponList(优惠券列表)
    couponList属性是优惠券列表，外部获取数据后，直接通过这个属性传入数据。注意，在这一步之前需要对优惠券列表遍历，处理好每张优惠券的状态值couponStatus。
  - type 场景值
    type是场景值，值为1，2，3，4。由于优惠券组件用于多个页面，为了做到通用性，通过type属性进行不同页面细节的调整。
    以下为具体场景：
    1. type=1
      「医院详情」、「套餐详情」页面领取优惠券，右侧按钮文本为领取和已领取。
    2. type=2
      「我的优惠券」页面展示优惠券，右侧按钮文本为去使用
    3. type=3
      「领券中心」页面展示优惠券，右侧按钮文本为领取和去使用，并且点击领取后优惠券背景图片改变。
    4. type=4
      「选择优惠券」页面展示已领取的优惠券，右侧内容变为icon，并根据优惠券不同状态展示不同icon。
  - getCoupon 优惠券领取事件
    组件传到父组件的事件之一，在type=1和type=3场景中，点击领取按钮，触发getCoupon事件，传出两个参数couponId和index，其中couponId是优惠券id，index是该优惠券在优惠券列表中的索引。领取优惠券，需要调用后台接口，在领取成功后需要在外部手动改动该优惠券的状态couponStatus为2。
  - useCoupon 优惠券使用事件
    组件传到父组件的事件之一，在type=1和type=3场景中，点击去使用按钮，触发useCoupon事件，传出一个参数couponId，couponId是优惠券Id。
  - chooseCoupon 优惠券选择事件
    组件传到父组件的事件之一，在type=4场景中，点击未选择的优惠券icon，选中该优惠券。传出一个参数couponId，couponId是优惠券Id。
问答组件
- 组件说明
  该组件是用于「医院详情」和「套餐详情」页面的问答模块。通过传入type属性，确定组件使用场景。该组件已经内部包含问答为空的缺省内容。
- 使用方法
```
<to-qa :qaList="list" :type="2" :total='total' @seeMore='seeMore' @putQuestion='putQuestion'></to-qa>
```
- 参数
  - qaList(问答列表)
    qaList是问大家列表，包含当前医院/套餐下的所有问答列表。
  - type 场景值
    type是场景值，表明组件使用的场景。
    以下为具体值：
    1. type=1
      「医院详情」页面
    2. type=2
      「套餐详情」页面
  - seeMore 查看全部事件
    组件传到父组件的事件之一，在type=1和type=2场景中，点击问答列表模块查看全部的问答，此处可以添加跳转逻辑。
  - putQuestion 去提问事件
    组件传到父组件的事件之一，在type=1和type=2场景中，如果问答列表为空，点击「我要提问」按钮前往提问页面。
左滑+长按组件
- 组件说明
  该组件是用于「我的收藏」页面的列表，支持左滑操作和长按操作
- 使用方法
```
<left-slide :item="item"  :index="index" :id="id" @longTapEvent="longTapEvent">
    <template slot="info" slot-scope="props">
	</template>
	<template slot="action" slot-scope="props">
	</template>
</left-slide>
```
- 参数
  - item（列表单条内容）
    item是列表单条数据
  - index （列表单条数据下标）
    index是列表单条数据下标
  - id （列表唯一标识）
    id是列表唯一标识，常用id
  - longTapEvent （长按事件）
    longTapEvent 是自定义长按事件
  - info （列表内容插槽）
    用于列表展示内容
  - action （左滑以后操作插槽）
    用于组件左滑以后展示的内容

评论组件

组件说明组件为评论空间，作为评论详情的入口
使用方法

  <user-comment :list="list" :records="records"></user-comment>

参数

	- list（评论列表）

	  `list` 包含如下字段             

	  1. userId: "11",                              //用户id
	  2. userName: "用户昵称",            //用户昵称
	  3. star: 2,                                        //评价分数
	  4. reviewDate: "2019-10-01",      //评价时间
	  5. reviewContent: "11111111",   //评价内容
	  6. userFaceLink:"https://fg"       //用户头像
	  7. records(评论总数量)

倒计时组件
- 组件说明组件作为秒杀倒计时控件
- 使用方法
```
	```javascript
  		 <count-down :price="price" :linePrice="linePrice" :endTime="endTime"></count-down>
	```
```
- 参数
  price(商品价格)
  linePrice(划线价格)
  endTime(倒计时结束时间，输入格式 eg. 2019/12/10 00:00:00)
返回顶部组件
- 组件说明移动端返回顶部，支持自定义元素和样式，兼容默认window滚动、指定元素滚动（$ref）、在父组件监听滚动（兼容cube-ui无法添加滚动事件)
- 使用方法
```
	```javascript
  		 <scroll-to-top v-if="scroll" :scrollEle="scroll" :scrollTopValue="scrollTopValue" :distance="1" :styleObj="styleObj"></scroll-to-top>
	```
```
- 参数
  distance(显示icon的超出距离)
  styleObj(自定义样式)
  scrollTopValue(滚动监听超出高度。此属性是兼容cube-ui scroll组件无法原生添加scroll事件，所以在父组件监听滚动传给该组件)
  scrollEle(要监听滚动的元素，在父组件使用$ref获取该元素传给该组件)