touchealth-ui

项目说明

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

项目结构

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

打包发布npm包流程

1. 打包为npm包 npm run lib
2. 发布npm包

• 登录(未登录需登录验证npm账号) npm login

• 更新版本号(xx.xx.xx)

npm version patch修改版本号最后一位，表示一些补丁和修复

npm version minor修改版本号第二位，表示一个小版本的更新

npm version major修改版本号第一位，表示一个大版本的更新

• 发布 npm publish

外部使用npm包步骤

1. npm install touchealth-ui -S

2. 在main.js文件中引入

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

3. 注意问题

   • 如果运行项目出现一系列core-js依赖错误，输入下面命令进行依赖的安装。

     npm install --save core-js@2

包含组件

1. 分享组件

   • 组件说明

     该组件是用于各大移动浏览器分享，根据浏览器种类共有三种表现：

     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及文案，均以插槽的形式开放到外部，相关样式也由外部进行定义。

2. 优惠券组件

   • 组件说明

     该组件是用于不同页面中关于优惠券的部分。由于不同页面优惠券内容，大体相似，但存在不同的细节，故组件通过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。

3. 问答组件

   • 组件说明

     该组件是用于「医院详情」和「套餐详情」页面的问答模块。通过传入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场景中，如果问答列表为空，点击「我要提问」按钮前往提问页面。

4. 左滑+长按组件

   • 组件说明

     该组件是用于「我的收藏」页面的列表，支持左滑操作和长按操作

   • 使用方法

     <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 （左滑以后操作插槽）

       用于组件左滑以后展示的内容

5. 评论组件

   • 组件说明 组件为评论空间，作为评论详情的入口

   • 使用方法

     <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(评论总数量)

6. 倒计时组件

   • 组件说明 组件作为秒杀倒计时控件

   • 使用方法

          <count-down :price="price" :linePrice="linePrice" :endTime="endTime"></count-down>

   • 参数

     price(商品价格)

     linePrice(划线价格)

     endTime(倒计时结束时间，输入格式 eg. 2019/12/10 00:00:00)

7. 返回顶部组件

   • 组件说明 移动端返回顶部，支持自定义元素和样式，兼容默认window滚动、指定元素滚动（$ref）、在父组件监听滚动（兼容cube-ui无法添加滚动事件)

   • 使用方法

          <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获取该元素传给该组件)