Zjjk-bianque NPM

咱家健康移动端扁鹊UI组件

Section 区域

<ZjSection title="左侧竖线" leftBar color="#527866" leftBarColor="#c60">
  <div>这是左侧竖线布局可通过leftBarColor自定义竖线颜色，color定义字体颜色</div>
  <div>这是左侧竖线布局可通过leftBarColor自定义竖线颜色，color定义字体颜色</div>
  <div>这是左侧竖线布局可通过leftBarColor自定义竖线颜色，color定义字体颜色</div>
  <div>这是左侧竖线布局可通过leftBarColor自定义竖线颜色，color定义字体颜色</div>
  <div>这是左侧竖线布局可通过leftBarColor自定义竖线颜色，color定义字体颜色</div>
</ZjSection>

Dialog 弹窗

type: info展示信息用 confirm带取消按钮，异步关闭两种类型

<ZjDialog v-model="dialog" type="confirm" @onButtonClick="onButtonClick">
  我带取消按钮
</ZjDialog>

// 按钮点击回调 action分别为 cancel、confirm
// done是关闭弹窗的方法，done()则关闭弹窗，done(false)阻止关闭弹窗
onButtonClick(action, done) {
  if (action == 'cancel') {
    done()
  } else {
    setTimeout(done, 1000)
  }
}

微信、微信H5、支付宝H5支付组件 ZjPayButton和ZjPaySuccess

text 按钮文字，默认 '立即支付'
pricePrefix 价格前缀，默认 '¥'
autoPay 点击按钮后是否马上执行支付逻辑，默认 true
price 支付金额
fillZero 价格是整数时是否补零，默认 true
debug 微信环境是否开启debug模式，默认 false
wxConfigUrl 获取微信JSSDK配置接口，类型函数

wxConfigParams 获取微信JSSDK配置接口参数，类型函数，默认返回

  return {
    parameter: JSON.stringify({
      url: location.href.split('#')[0]
    })
  }

wxConfigData 从微信JSSDK配置接口结果中的哪个字段取值，默认 'data'
unifiedorderUrl 统一下单接口，类型函数
unifiedorderParams 统一下单参数，类型函数
unifiedorderData 从统一下单接口结果中的哪个字段取值，默认 'data'
click 单击事件
cancel 微信环境取消支付事件
success 微信环境支付成功事件
fail 微信环境支付失败事件
h5success H5环境支付成功事件
h5fail H5环境支付失败事件

<!-- 支付按钮 -->
<ZjPayButton
  class="do-charge-btn"
  ref="payButton"
  text="立即充值"
  :autoPay="false"
  :price="10.25"
  :wxConfigUrl="$api.public.wechat"
  wxConfigData="data"
  :unifiedorderUrl="$api.public.payOrderGoPay"
  :unifiedorderParams="unifiedorderParams"
  unifiedorderData="data"
  @click="goPay"
  @cancel="wxCancel"
  @success="wxSuccess"
  @fail="wxFail"
  @h5success="wxSuccess"
  @h5fail="wxFail"
></ZjPayButton>

isSuccess 是否支付成功 yes成功 no失败 loading支付中
homeName 首页的路由名称，默认 'home'
hideButton 是否隐藏所有按钮（返回首页、继续支付），默认 false
hideGoHome 是否隐藏返回首页按钮，默认 false
hideContinue 是否隐藏继续支付按钮，默认 false

<!-- 支付成功页 -->
<ZjPaySuccess
  :isSuccess="isSuccess"
  hideContinue
>
  <template #info>
    <p>这里是额外的附加信息</p>
  </template>
</ZjPaySuccess>

咱家健康移动端 扁鹊UI组件

Section 区域

Dialog 弹窗

微信、微信H5、支付宝H5支付组件 ZjPayButton和ZjPaySuccess

ZjPayButton 支付按钮

ZjPaySuccess 支付成功、失败页面

咱家健康移动端扁鹊UI组件