增加单选 和一个验证码的样式 (#30)

* 增加单选 和一个验证码的样式

* 移除一个不存在的页面链接

* 移除业务中的样式

* 统一风格

dist/cell/index.wxss

@@ -25,6 +25,19 @@
   color: #666;
 }
 
+.zan-cell__no-pading{
+  padding: 0;
+}
+.zan-cell__no-pading .zan-cell__bd_padding {
+  padding: 12px 0 12px 15px;
+}
+.zan-cell__no-pading .zan-cell__bd_padding .zan-form__input{
+  height: 26px;
+}
+.zan-cell__no-pading .zan-cell__ft_padding {
+  padding: 12px 15px 12px 0;
+}
+
 .zan-cell--last-child::after,
 .zan-cell:last-child::after {
   display: none;

dist/form/check_label.js

@@ -0,0 +1,26 @@
+function handle(e) {
+  var dataset = e.currentTarget.dataset;
+  var componentId = dataset.componentId;
+  var value = e.detail.value;
+
+  callback.call(this, componentId, value);
+}
+
+function callback(componentId, value) {
+  var e = { componentId, value };
+  console.info('[zan:CheckLabel:select]', e);
+
+  if (this.handleZanCheckLabelSelect) {
+    this.handleZanCheckLabelSelect(e);
+  } else {
+    console.warn('页面缺少 handleZanCheckLabelSelect 回调函数');
+  }
+}
+
+var CheckLabel = {
+  _handleZanCheckLabelSelect(e) {
+    handle.call(this, e);
+  },
+};
+
+module.exports = CheckLabel;

dist/form/check_label.wxml

@@ -0,0 +1,23 @@
+<template name="zan-check-label">
+  <radio-group class="zan-check-label__list" bindchange="_handleZanCheckLabelSelect">
+    <label wx:for="{{ items }}" wx:key="value">
+      <view class="zan-cell" wx:if="{{ item.value === checkedValue }}">
+        <radio class="zan-check-label__radio" value="{{ item.value }}" checked="{{ item.value === checkedValue }}"/>
+        <view class="zan-cell__bd zan-check-label__selected" style="padding-left:{{ item.padding * 10 }}px">{{ item.name }}</view>
+        <view class="zan-cell__ft">
+          <icon type="success_no_circle" color="#ff4444" size="14"></icon>
+        </view>
+      </view>
+      <view class="zan-cell" wx:else>
+        <radio class="zan-check-label__radio" value="{{ item.value }}" checked="{{ item.value === checkedValue }}"/>
+        <view
+          class="zan-cell__bd"
+          style="padding-left:{{ item.padding * 10 }}px"
+        >{{ item.name }}</view>
+      </view>
+    </label>
+    <label wx:if="{{ !ignoreDefault }}" class="hidden">
+      <radio class="zan-check-label__radio" value="-1" checked="{{ checkedValue === '-1' }}"/>
+    </label>
+  </radio-group>
+</template>

dist/form/check_label.wxss

@@ -0,0 +1,6 @@
+.zan-check-label__list .zan-check-label__radio{
+  display: none;
+}
+.zan-check-label__selected{
+  color: #ff4444;
+}

dist/index.js

@@ -3,3 +3,4 @@ exports.Quantity = require('./quantity/index');
 exports.TopTips = require('./toptips/index');
 exports.Toast = require('./toast/index');
 exports.Switch = require('./switch/index');
+exports.CheckLabel = require('./form/check_label');

dist/index.wxss

@@ -8,6 +8,7 @@
 @import "badge/index.wxss";
 @import "dialog/index.wxss";
 @import "form/index.wxss";
+@import "form/check_label.wxss";
 @import "tab/index.wxss";
 @import "label/index.wxss";
 @import "quantity/index.wxss";
@@ -15,4 +16,4 @@
 @import "toast/index.wxss";
 @import "toptips/index.wxss";
 @import "icon/index.wxss";
-@import "switch/index.wxss";
+@import "switch/index.wxss";

example/form/index.js

@@ -1,8 +1,22 @@
+var Zan = require('../../dist/index');
 
-Page({
+Page(Object.assign({}, Zan.CheckLabel, {
   data: {
     area: ['省份', '北京市', '天津市', '河北省', '山西省', '内蒙古自治区', '辽宁省', '吉林省', '黑龙江省', '上海市', '江苏省', '浙江省', '安徽省', '福建省', '江西省', '山东省', '河南省', '湖北省', '湖南省', '广东省', '广西壮族自治区', '海南省', '重庆市', '四川省', '贵州省', '云南省', '西藏自治区', '陕西省', '甘肃省', '青海省', '宁夏回族自治区', '新疆维吾尔自治区', '台湾省', '香港特别行政区', '澳门特别行政区'],
-    areaIndex: 0
+    areaIndex: 0,
+    items: [
+      {
+        padding: 0,
+        value: '1',
+        name: '选项一',
+      },
+      {
+        padding: 0,
+        value: '2',
+        name: '选项二',
+      },
+    ],
+    checkedValue: -1,
   },
 
   onLoad: function () {
@@ -16,5 +30,11 @@ Page({
     this.setData({
       areaIndex: e.detail.value
     });
+  },
+
+  handleZanCheckLabelSelect: function (e) {
+    this.setData({
+      checkedValue: e.value
+    });
   }
-});
+}));

example/form/index.wxml

@@ -1,3 +1,5 @@
+<import src="/dist/form/check_label.wxml" />
+
 <view class="container">
 
   <view class="doc-title">FORM</view>
@@ -34,4 +36,40 @@
     </view>
   </view>
 
+  <view class="zan-form" style="margin-top: 20px">
+    <view class="zan-cell zan-cell__no-pading zan-form__item">
+      <view class="zan-cell__bd zan-cell__bd_padding">
+        <text class="zan-form__title">验证码</text>
+        <input
+          class="zan-form__input"
+          type="text"
+          maxlength="7"
+          placeholder="请输入短信验证码"
+        />
+      </view>
+      <view class="zan-cell__ft">
+        <button class="zan-btn zan-btn--large zan-btn--primary">获取验证码</button>
+      </view>
+    </view>
+    <view class="zan-cell zan-form__item">
+      <view class="zan-cell__bd">
+        <text class="zan-form__title">验证码</text>
+        <input
+          class="zan-form__input"
+          type="text"
+          maxlength="7"
+          placeholder="请输入短信验证码"
+        />
+      </view>
+      <view class="zan-cell__ft">
+        <button class="zan-btn zan-btn--mini zan-btn--primary sms-btn">获取验证码</button>
+      </view>
+    </view>
+  </view>
+
+  <view class="zan-panel">
+    <view>
+      <template is="zan-check-label" data="{{items, checkedValue}}" />
+    </view>
+  </view>
 </view>