sso-ssr/components/mobile/reset/stepSecurity .vue

<template>
  <div class="f-main">
    <div class="content-top">
      <p>密码重置</p>
    </div>
    <div class="f-form">
      <div class="page-part">
        <p class="security">请选择密码问题一</p>
        <mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
      </div>
      <div class="page-part">
        <mt-field placeholder="请填写答案一"></mt-field>
      </div>
      <div class="page-part">
        <p class="security">请选择密码问题二</p>
        <mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
      </div>
      <div class="page-part">
        <mt-field placeholder="请填写答案二"></mt-field>
      </div>

      <div class="page-part">
        <mt-button size="large" type="primary" @click="sureAccount('last')">下一步</mt-button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'step-security',
    data () {
      return {
        valid: {
          mobile: '',
          captcha: ''
        },
        slots: [
          {
            flex: 1,
            values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
            className: 'slot1',
            textAlign: 'right'
          }, {
            divider: true,
            content: '-',
            className: 'slot2'
          }, {
            flex: 1,
            values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
            className: 'slot3',
            textAlign: 'left'
          }
        ]
      }
    },
    methods: {
      onValuesChange (picker, values) {
        if (values[0] > values[1]) {
          picker.setSlotValue(1, values[0])
        }
      },
      sureAccount (type) {
        this.$emit('stepEvent', type)
      }
    }
  }
</script>

<style scoped type="text/scss" lang="scss">

</style>