增加单选框

pages/register/register.js

@@ -1,4 +1,5 @@
 // pages/register/register.js
+import Toast from '../../vant/toast/toast';
 Page({
 
   /**
@@ -25,7 +26,8 @@ Page({
     vcode_button_text:'获取验证码',
     servicetel: '4009608068',
     showMsg: false,
-    timeing: true
+    timeing: true,
+    checked:false
   },
 
   /**
@@ -82,6 +84,10 @@ Page({
   getUserProfile(e) {
     // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
     // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
+    if(!this.data.checked){
+        Toast('请先阅读并同意用户使用协议');
+        return;
+    }
     this.checkAll();
     this.setData({
       showMsg:true
@@ -569,5 +575,10 @@ Page({
    */
   onShareAppMessage: function() {
 
-  }
+  },
+  onCheckBoxChange(event) {
+    this.setData({
+      checked: event.detail,
+    });
+  },
 })

pages/register/register.json

@@ -1,4 +1,8 @@
 {
-  "usingComponents": {},
+  "usingComponents": {
+    "van-checkbox": "/vant/checkbox/index",
+    "van-checkbox-group": "/vant/checkbox-group/index",
+    "van-toast": "/vant/toast/index"
+  },
   "navigationBarTitleText": "注册"
 }

pages/register/register.wxml

@@ -48,9 +48,11 @@
     <!--<button class='{{checkPass?"login_button":"login_button_disable"}}' bindtap="{{checkPass?'getUserProfile':''}}">-->
       <button class='login_button' bindtap="getUserProfile">
       注册
-    </button>
-    <view style="width: 100%;text-align: center;padding:20rpx 0">
-      <text>点击注册即表示同意<text style="color:#00a8dc" bindtap="userAgreement">用户使用协议</text></text>
+    </button>  
+  
+    <view style="width: 100%;text-align: center;padding:20rpx 0;display: flex;flex-direction: row;align-items:center;justify-content:center;">
+        <van-checkbox value="{{ checked }}" icon-size="28rpx" bind:change="onCheckBoxChange" custom-class="vanCheckBox"></van-checkbox>
+        <text style="display: inline;font-size:28rpx">已阅读并同意<text style="color:#00a8dc" bindtap="userAgreement">用户使用协议</text></text>
     </view>
     <view class='phone_call_class' bindtap="phoneCall">
           <span>联系客服:  {{servicetel}}</span>
@@ -59,4 +61,5 @@
       <ad unit-id="adunit-8eb13875bcf592b0" ad-intervals="30"></ad>
     </view> -->
   </view>
+  <van-toast id="van-toast" />
 </view>

pages/register/register.wxss

@@ -212,4 +212,8 @@
 
 .context_input input.vcode_input{
   width:  calc(100% - 322rpx);
+}
+
+.vanCheckBox{
+    display: inline-block;
 }

vant/checkbox-group/index.d.ts

@@ -0,0 +1 @@
+export {};

vant/checkbox-group/index.js

@@ -0,0 +1,36 @@
+import { useChildren } from '../common/relation';
+import { VantComponent } from '../common/component';
+VantComponent({
+    field: true,
+    relation: useChildren('checkbox', function (target) {
+        this.updateChild(target);
+    }),
+    props: {
+        max: Number,
+        value: {
+            type: Array,
+            observer: 'updateChildren',
+        },
+        disabled: {
+            type: Boolean,
+            observer: 'updateChildren',
+        },
+        direction: {
+            type: String,
+            value: 'vertical',
+        },
+    },
+    methods: {
+        updateChildren() {
+            this.children.forEach((child) => this.updateChild(child));
+        },
+        updateChild(child) {
+            const { value, disabled, direction } = this.data;
+            child.setData({
+                value: value.indexOf(child.data.name) !== -1,
+                parentDisabled: disabled,
+                direction,
+            });
+        },
+    },
+});

vant/checkbox-group/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

vant/checkbox-group/index.wxml

@@ -0,0 +1,5 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
+<view class="{{ utils.bem('checkbox-group', [{ horizontal: direction === 'horizontal' }]) }}">
+  <slot />
+</view>

vant/checkbox-group/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';.van-checkbox-group--horizontal{display:flex;flex-wrap:wrap}

vant/checkbox/index.d.ts

@@ -0,0 +1 @@
+export {};

vant/checkbox/index.js

@@ -0,0 +1,77 @@
+import { useParent } from '../common/relation';
+import { VantComponent } from '../common/component';
+function emit(target, value) {
+    target.$emit('input', value);
+    target.$emit('change', value);
+}
+VantComponent({
+    field: true,
+    relation: useParent('checkbox-group'),
+    classes: ['icon-class', 'label-class'],
+    props: {
+        value: Boolean,
+        disabled: Boolean,
+        useIconSlot: Boolean,
+        checkedColor: String,
+        labelPosition: {
+            type: String,
+            value: 'right',
+        },
+        labelDisabled: Boolean,
+        shape: {
+            type: String,
+            value: 'round',
+        },
+        iconSize: {
+            type: null,
+            value: 20,
+        },
+    },
+    data: {
+        parentDisabled: false,
+        direction: 'vertical',
+    },
+    methods: {
+        emitChange(value) {
+            if (this.parent) {
+                this.setParentValue(this.parent, value);
+            }
+            else {
+                emit(this, value);
+            }
+        },
+        toggle() {
+            const { parentDisabled, disabled, value } = this.data;
+            if (!disabled && !parentDisabled) {
+                this.emitChange(!value);
+            }
+        },
+        onClickLabel() {
+            const { labelDisabled, parentDisabled, disabled, value } = this.data;
+            if (!disabled && !labelDisabled && !parentDisabled) {
+                this.emitChange(!value);
+            }
+        },
+        setParentValue(parent, value) {
+            const parentValue = parent.data.value.slice();
+            const { name } = this.data;
+            const { max } = parent.data;
+            if (value) {
+                if (max && parentValue.length >= max) {
+                    return;
+                }
+                if (parentValue.indexOf(name) === -1) {
+                    parentValue.push(name);
+                    emit(parent, parentValue);
+                }
+            }
+            else {
+                const index = parentValue.indexOf(name);
+                if (index !== -1) {
+                    parentValue.splice(index, 1);
+                    emit(parent, parentValue);
+                }
+            }
+        },
+    },
+});

vant/checkbox/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-icon": "../icon/index"
+  }
+}

vant/checkbox/index.wxml

@@ -0,0 +1,31 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
+
+<view class="{{ utils.bem('checkbox', [{ horizontal: direction === 'horizontal' }]) }} custom-class">
+  <view
+    wx:if="{{ labelPosition === 'left' }}"
+    class="label-class {{ utils.bem('checkbox__label', [labelPosition, { disabled: disabled || parentDisabled }]) }}"
+    bindtap="onClickLabel"
+  >
+    <slot />
+  </view>
+  <view class="van-checkbox__icon-wrap" bindtap="toggle">
+    <slot wx:if="{{ useIconSlot }}" name="icon" />
+    <van-icon
+      wx:else
+      name="success"
+      size="0.8em"
+      class="{{ utils.bem('checkbox__icon', [shape, { disabled: disabled || parentDisabled, checked: value }]) }}"
+      style="{{ computed.iconStyle(checkedColor, value, disabled, parentDisabled, iconSize) }}"
+      custom-class="icon-class"
+      custom-style="line-height: 1.25em;"
+    />
+  </view>
+  <view
+    wx:if="{{ labelPosition === 'right' }}"
+    class="label-class {{ utils.bem('checkbox__label', [labelPosition, { disabled: disabled || parentDisabled }]) }}"
+    bindtap="onClickLabel"
+  >
+    <slot />
+  </view>
+</view>

vant/checkbox/index.wxs

@@ -0,0 +1,20 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function iconStyle(checkedColor, value, disabled, parentDisabled, iconSize) {
+  var styles = {
+    'font-size': addUnit(iconSize),
+  };
+
+  if (checkedColor && value && !disabled && !parentDisabled) {
+    styles['border-color'] = checkedColor;
+    styles['background-color'] = checkedColor;
+  }
+
+  return style(styles);
+}
+
+module.exports = {
+  iconStyle: iconStyle,
+};

vant/checkbox/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';.van-checkbox{align-items:center;display:flex;overflow:hidden;-webkit-user-select:none;user-select:none}.van-checkbox--horizontal{margin-right:12px}.van-checkbox__icon-wrap,.van-checkbox__label{line-height:var(--checkbox-size,20px)}.van-checkbox__icon-wrap{flex:none}.van-checkbox__icon{align-items:center;border:1px solid var(--checkbox-border-color,#c8c9cc);box-sizing:border-box;color:transparent;display:flex;font-size:var(--checkbox-size,20px);height:1em;justify-content:center;text-align:center;transition-duration:var(--checkbox-transition-duration,.2s);transition-property:color,border-color,background-color;width:1em}.van-checkbox__icon--round{border-radius:100%}.van-checkbox__icon--checked{background-color:var(--checkbox-checked-icon-color,#1989fa);border-color:var(--checkbox-checked-icon-color,#1989fa);color:#fff}.van-checkbox__icon--disabled{background-color:var(--checkbox-disabled-background-color,#ebedf0);border-color:var(--checkbox-disabled-icon-color,#c8c9cc)}.van-checkbox__icon--disabled.van-checkbox__icon--checked{color:var(--checkbox-disabled-icon-color,#c8c9cc)}.van-checkbox__label{word-wrap:break-word;color:var(--checkbox-label-color,#323233);padding-left:var(--checkbox-label-margin,10px)}.van-checkbox__label--left{float:left;margin:0 var(--checkbox-label-margin,10px) 0 0}.van-checkbox__label--disabled{color:var(--checkbox-disabled-label-color,#c8c9cc)}.van-checkbox__label:empty{margin:0}

vant/radio-group/index.d.ts

@@ -0,0 +1 @@
+export {};

vant/radio-group/index.js

@@ -0,0 +1,22 @@
+import { VantComponent } from '../common/component';
+import { useChildren } from '../common/relation';
+VantComponent({
+    field: true,
+    relation: useChildren('radio'),
+    props: {
+        value: {
+            type: null,
+            observer: 'updateChildren',
+        },
+        direction: String,
+        disabled: {
+            type: Boolean,
+            observer: 'updateChildren',
+        },
+    },
+    methods: {
+        updateChildren() {
+            this.children.forEach((child) => child.updateFromParent());
+        },
+    },
+});

vant/radio-group/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

vant/radio-group/index.wxml

@@ -0,0 +1,5 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
+<view class="{{ utils.bem('radio-group', [direction]) }}">
+  <slot></slot>
+</view>

vant/radio-group/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';.van-radio-group--horizontal{display:flex;flex-wrap:wrap}

vant/radio/index.d.ts

@@ -0,0 +1 @@
+export {};

vant/radio/index.js

@@ -0,0 +1,66 @@
+import { canIUseModel } from '../common/version';
+import { VantComponent } from '../common/component';
+import { useParent } from '../common/relation';
+VantComponent({
+    field: true,
+    relation: useParent('radio-group', function () {
+        this.updateFromParent();
+    }),
+    classes: ['icon-class', 'label-class'],
+    props: {
+        name: null,
+        value: null,
+        disabled: Boolean,
+        useIconSlot: Boolean,
+        checkedColor: String,
+        labelPosition: {
+            type: String,
+            value: 'right',
+        },
+        labelDisabled: Boolean,
+        shape: {
+            type: String,
+            value: 'round',
+        },
+        iconSize: {
+            type: null,
+            value: 20,
+        },
+    },
+    data: {
+        direction: '',
+        parentDisabled: false,
+    },
+    methods: {
+        updateFromParent() {
+            if (!this.parent) {
+                return;
+            }
+            const { value, disabled: parentDisabled, direction } = this.parent.data;
+            this.setData({
+                value,
+                direction,
+                parentDisabled,
+            });
+        },
+        emitChange(value) {
+            const instance = this.parent || this;
+            instance.$emit('input', value);
+            instance.$emit('change', value);
+            if (canIUseModel()) {
+                instance.setData({ value });
+            }
+        },
+        onChange() {
+            if (!this.data.disabled && !this.data.parentDisabled) {
+                this.emitChange(this.data.name);
+            }
+        },
+        onClickLabel() {
+            const { disabled, parentDisabled, labelDisabled, name } = this.data;
+            if (!(disabled || parentDisabled) && !labelDisabled) {
+                this.emitChange(name);
+            }
+        },
+    },
+});

vant/radio/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-icon": "../icon/index"
+  }
+}

vant/radio/index.wxml

@@ -0,0 +1,30 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
+
+<view class="{{ utils.bem('radio', [direction]) }} custom-class">
+  <view
+    wx:if="{{ labelPosition === 'left' }}"
+    class="{{ utils.bem('radio__label', [labelPosition, { disabled: disabled || parentDisabled }]) }} label-class"
+    bindtap="onClickLabel"
+  >
+    <slot />
+  </view>
+  <view class="van-radio__icon-wrap" style="font-size: {{ utils.addUnit(iconSize) }}" bindtap="onChange">
+    <slot wx:if="{{ useIconSlot }}" name="icon" />
+    <van-icon
+      wx:else
+      name="success"
+      class="{{ utils.bem('radio__icon', [shape, { disabled: disabled || parentDisabled, checked: value === name }]) }}"
+      style="{{ computed.iconStyle({ iconSize, checkedColor, disabled, parentDisabled, value, name }) }}"
+      custom-class="icon-class"
+      custom-style="{{ computed.iconCustomStyle({ iconSize }) }}"
+    />
+  </view>
+  <view
+    wx:if="{{ labelPosition === 'right' }}"
+    class="label-class {{ utils.bem('radio__label', [labelPosition, { disabled: disabled || parentDisabled }]) }}"
+    bindtap="onClickLabel"
+  >
+    <slot />
+  </view>
+</view>

vant/radio/index.wxs

@@ -0,0 +1,33 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function iconStyle(data) {
+  var styles = {
+    'font-size': addUnit(data.iconSize),
+  };
+
+  if (
+    data.checkedColor &&
+    !(data.disabled || data.parentDisabled) &&
+    data.value === data.name
+  ) {
+    styles['border-color'] = data.checkedColor;
+    styles['background-color'] = data.checkedColor;
+  }
+
+  return style(styles);
+}
+
+function iconCustomStyle(data) {
+  return style({
+    'line-height': addUnit(data.iconSize),
+    'font-size': '.8em',
+    display: 'block',
+  });
+}
+
+module.exports = {
+  iconStyle: iconStyle,
+  iconCustomStyle: iconCustomStyle,
+};

vant/radio/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';.van-radio{align-items:center;display:flex;overflow:hidden;-webkit-user-select:none;user-select:none}.van-radio__icon-wrap{flex:none}.van-radio--horizontal{margin-right:var(--padding-sm,12px)}.van-radio__icon{align-items:center;border:1px solid var(--radio-border-color,#c8c9cc);box-sizing:border-box;color:transparent;display:flex;font-size:var(--radio-size,20px);height:1em;justify-content:center;text-align:center;transition-duration:var(--radio-transition-duration,.2s);transition-property:color,border-color,background-color;width:1em}.van-radio__icon--round{border-radius:100%}.van-radio__icon--checked{background-color:var(--radio-checked-icon-color,#1989fa);border-color:var(--radio-checked-icon-color,#1989fa);color:#fff}.van-radio__icon--disabled{background-color:var(--radio-disabled-background-color,#ebedf0);border-color:var(--radio-disabled-icon-color,#c8c9cc)}.van-radio__icon--disabled.van-radio__icon--checked{color:var(--radio-disabled-icon-color,#c8c9cc)}.van-radio__label{word-wrap:break-word;color:var(--radio-label-color,#323233);line-height:var(--radio-size,20px);padding-left:var(--radio-label-margin,10px)}.van-radio__label--left{float:left;margin:0 var(--radio-label-margin,10px) 0 0}.van-radio__label--disabled{color:var(--radio-disabled-label-color,#c8c9cc)}.van-radio__label:empty{margin:0}

vant/toast/index.d.ts

@@ -0,0 +1 @@
+export {};

vant/toast/index.js

@@ -0,0 +1,29 @@
+import { VantComponent } from '../common/component';
+VantComponent({
+    props: {
+        show: Boolean,
+        mask: Boolean,
+        message: String,
+        forbidClick: Boolean,
+        zIndex: {
+            type: Number,
+            value: 1000,
+        },
+        type: {
+            type: String,
+            value: 'text',
+        },
+        loadingType: {
+            type: String,
+            value: 'circular',
+        },
+        position: {
+            type: String,
+            value: 'middle',
+        },
+    },
+    methods: {
+        // for prevent touchmove
+        noop() { },
+    },
+});

vant/toast/index.json

@@ -0,0 +1,9 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-icon": "../icon/index",
+    "van-loading": "../loading/index",
+    "van-overlay": "../overlay/index",
+    "van-transition": "../transition/index"
+  }
+}

vant/toast/index.wxml

@@ -0,0 +1,36 @@
+<van-overlay
+  wx:if="{{ mask || forbidClick }}"
+  show="{{ show }}"
+  z-index="{{ zIndex }}"
+  custom-style="{{ mask ? '' : 'background-color: transparent;' }}"
+/>
+<van-transition
+  show="{{ show }}"
+  custom-style="z-index: {{ zIndex }}"
+  custom-class="van-toast__container"
+>
+  <view
+    class="van-toast van-toast--{{ (type === 'text' || type === 'html') ? 'text' : 'icon' }} van-toast--{{ position }}"
+    catch:touchmove="noop"
+  >
+    <!-- text only -->
+    <text wx:if="{{ type === 'text' }}">{{ message }}</text>
+
+    <!-- html only -->
+    <rich-text wx:elif="{{ type === 'html' }}" nodes="{{ message }}"></rich-text>
+
+    <!-- with icon -->
+    <block wx:else>
+      <van-loading
+        wx:if="{{ type === 'loading' }}"
+        color="white"
+        type="{{ loadingType }}"
+        custom-class="van-toast__loading"
+      />
+      <van-icon wx:else class="van-toast__icon" name="{{ type }}" />
+      <text wx:if="{{ message }}" class="van-toast__text">{{ message }}</text>
+    </block>
+
+    <slot />
+  </view>
+</van-transition>

vant/toast/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';.van-toast{word-wrap:break-word;align-items:center;background-color:var(--toast-background-color,rgba(0,0,0,.7));border-radius:var(--toast-border-radius,8px);box-sizing:initial;color:var(--toast-text-color,#fff);display:flex;flex-direction:column;font-size:var(--toast-font-size,14px);justify-content:center;line-height:var(--toast-line-height,20px);white-space:pre-wrap}.van-toast__container{left:50%;max-width:var(--toast-max-width,70%);position:fixed;top:50%;transform:translate(-50%,-50%);width:-webkit-fit-content;width:fit-content}.van-toast--text{min-width:var(--toast-text-min-width,96px);padding:var(--toast-text-padding,8px 12px)}.van-toast--icon{min-height:var(--toast-default-min-height,88px);padding:var(--toast-default-padding,16px);width:var(--toast-default-width,88px)}.van-toast--icon .van-toast__icon{font-size:var(--toast-icon-size,36px)}.van-toast--icon .van-toast__text{padding-top:8px}.van-toast__loading{margin:10px 0}.van-toast--top{transform:translateY(-30vh)}.van-toast--bottom{transform:translateY(30vh)}

vant/toast/toast.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="miniprogram-api-typings" />
+/// <reference types="miniprogram-api-typings" />
+type ToastMessage = string | number;
+type ToastContext = WechatMiniprogram.Component.TrivialInstance | WechatMiniprogram.Page.TrivialInstance;
+interface ToastOptions {
+    show?: boolean;
+    type?: string;
+    mask?: boolean;
+    zIndex?: number;
+    context?: (() => ToastContext) | ToastContext;
+    position?: string;
+    duration?: number;
+    selector?: string;
+    forbidClick?: boolean;
+    loadingType?: string;
+    message?: ToastMessage;
+    onClose?: () => void;
+}
+declare function Toast(toastOptions: ToastOptions | ToastMessage): WechatMiniprogram.Component.TrivialInstance | undefined;
+declare namespace Toast {
+    var loading: (options: ToastMessage | ToastOptions) => WechatMiniprogram.Component.TrivialInstance | undefined;
+    var success: (options: ToastMessage | ToastOptions) => WechatMiniprogram.Component.TrivialInstance | undefined;
+    var fail: (options: ToastMessage | ToastOptions) => WechatMiniprogram.Component.TrivialInstance | undefined;
+    var clear: () => void;
+    var setDefaultOptions: (options: ToastOptions) => void;
+    var resetDefaultOptions: () => void;
+}
+export default Toast;

vant/toast/toast.js

@@ -0,0 +1,68 @@
+import { isObj } from '../common/validator';
+const defaultOptions = {
+    type: 'text',
+    mask: false,
+    message: '',
+    show: true,
+    zIndex: 1000,
+    duration: 2000,
+    position: 'middle',
+    forbidClick: false,
+    loadingType: 'circular',
+    selector: '#van-toast',
+};
+let queue = [];
+let currentOptions = Object.assign({}, defaultOptions);
+function parseOptions(message) {
+    return isObj(message) ? message : { message };
+}
+function getContext() {
+    const pages = getCurrentPages();
+    return pages[pages.length - 1];
+}
+function Toast(toastOptions) {
+    const options = Object.assign(Object.assign({}, currentOptions), parseOptions(toastOptions));
+    const context = (typeof options.context === 'function'
+        ? options.context()
+        : options.context) || getContext();
+    const toast = context.selectComponent(options.selector);
+    if (!toast) {
+        console.warn('未找到 van-toast 节点，请确认 selector 及 context 是否正确');
+        return;
+    }
+    delete options.context;
+    delete options.selector;
+    toast.clear = () => {
+        toast.setData({ show: false });
+        if (options.onClose) {
+            options.onClose();
+        }
+    };
+    queue.push(toast);
+    toast.setData(options);
+    clearTimeout(toast.timer);
+    if (options.duration != null && options.duration > 0) {
+        toast.timer = setTimeout(() => {
+            toast.clear();
+            queue = queue.filter((item) => item !== toast);
+        }, options.duration);
+    }
+    return toast;
+}
+const createMethod = (type) => (options) => Toast(Object.assign({ type }, parseOptions(options)));
+Toast.loading = createMethod('loading');
+Toast.success = createMethod('success');
+Toast.fail = createMethod('fail');
+Toast.clear = () => {
+    queue.forEach((toast) => {
+        toast.clear();
+    });
+    queue = [];
+};
+Toast.setDefaultOptions = (options) => {
+    Object.assign(currentOptions, options);
+};
+Toast.resetDefaultOptions = () => {
+    currentOptions = Object.assign({}, defaultOptions);
+};
+export default Toast;