浏览代码

feat: taro shortpassword

Drjingfubo 4 年之前
父节点
当前提交
b0f56a2361

+ 16 - 1
src/packages/__VUE/shortpassword/index.scss

@@ -12,6 +12,13 @@
   font-size: $font-size-1;
   color: $text-color;
 }
+.nut-shortpsdWx-subtitle {
+  display: block;
+  margin-top: 12px;
+  line-height: 1;
+  font-size: $font-size-1;
+  color: $text-color;
+}
 
 .nut-input-w {
   padding: 24px 0 10px 0;
@@ -27,7 +34,14 @@
   .nut-input-real {
     padding: 0 12px;
     opacity: 0;
-    z-index: 1;
+  }
+  .nut-inputWx-real {
+    width: 247px;
+    height: 41px;
+    padding: 0 12px;
+    opacity: 0;
+    position: relative;
+    z-index: 2;
   }
 }
 
@@ -84,6 +98,7 @@
     line-height: 1;
     font-size: $font-size-1;
     color: $shortpsd-forget;
+    display: flex;
   }
 }
 

+ 7 - 13
src/packages/__VUE/shortpassword/index.taro.vue

@@ -13,17 +13,17 @@
       @click-overlay="close"
     >
       <view class="nut-shortpsd-title">{{ title }}</view>
-      <view class="nut-shortpsd-subtitle">{{ desc }}</view>
+      <view class="nut-shortpsdWx-subtitle">{{ desc }}</view>
       <view class="nut-input-w">
         <input
           ref="realpwd"
-          class="nut-input-real"
+          class="nut-inputWx-real"
           type="number"
-          maxlength="6"
+          :maxlength="length"
           v-model="realInput"
           @input="changeValue"
         />
-        <view class="nut-shortpsd-fake" @click="focus">
+        <view class="nut-shortpsd-fake">
           <view
             class="nut-shortpsd-li"
             v-for="(sublen, index) in new Array(comLen)"
@@ -38,9 +38,9 @@
       </view>
       <view class="nut-shortpsd-message">
         <view class="nut-shortpsd-error">{{ errorMsg }}</view>
-        <view class="nut-shortpsd-forget" v-if="tips">
+        <view class="nut-shortpsd-forget" @click="onTips" v-if="tips">
           <nut-icon class="icon" size="11px" name="tips"></nut-icon>
-          <view @click="onTips">{{ tips }}</view>
+          <view>{{ tips }}</view>
         </view>
       </view>
       <view v-if="!noButton" class="nut-shortpsd-footer">
@@ -54,7 +54,7 @@
 import { ref, computed, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { create } = createComponent('shortpassword');
-// import Taro from '@tarojs/taro';
+import Taro from '@tarojs/taro';
 export default create({
   props: {
     title: {
@@ -113,11 +113,6 @@ export default create({
     function sureClick() {
       emit('ok', realInput.value);
     }
-    function focus() {
-      console.log('点击了', realpwd, realpwd.value);
-
-      // realpwd.value.focus();
-    }
     watch(
       () => props.visible,
       value => {
@@ -156,7 +151,6 @@ export default create({
       sureClick,
       realInput,
       realpwd,
-      focus,
       range,
       changeValue,
       close,

+ 2 - 1
src/sites/mobile-taro/vue/src/pages/shortpassword/index.vue

@@ -82,7 +82,7 @@ export default {
     });
     const methods = {
       onChange(val: string) {
-        console.log(123);
+        console.log(val);
 
         // val && proxy.$toast.text(val);
       },
@@ -90,6 +90,7 @@ export default {
         // val && proxy.$toast.text(val);
         state.visible = false;
       },
+
       onComplete() {},
       onTips() {
         // proxy.$toast.text('执行忘记密码逻辑');