更新

Lou

2024-03-04 fb8db39ccdca6ca638b3e133d186cb3fe6a558bc

 subPackage/article/signature.vue

@@ -7,6 +7,30 @@
            <image :src="imgUrl" mode="" style="width: 100%;"></image>
         </view>
      </view> -->



      <u-popup :show="isShowPopup" @close="isShowPopup = false" mode="center" :round="10" :closeable="true">
         <view class='login-mode'>
            <view class="f-30 fw">
               安全验证
            </view>
            <view class="f-30 mt-30">
               {{phone}}
            </view>
            <view class='flex a-i-c login-input'>
               <input class='f-30 c-33' type='number' placeholder='请输入验证码' v-model="validationCode"
                  placeholder-class='c-aa f-28'></input>
               <button class='login-input-btn f-24 bgc-ff c-33' @click='getValidationCode'>{{text}}</button>
            </view>
            <!--    <button class='login-btn c-ff f-30' :class='validationCode?"bgc-main":""'
               :disabled="validationCode?false:true">确定</button> -->
            <button class='login-btn c-ff f-30 bgc-main' @click="confirmValidationCode()">确定</button>
         </view>
      </u-popup>



   </view>
</template>

@@ -35,12 +59,21 @@
               url: prodUrl + "/blade-resource/oss/endpoint/put-file",
               header: {},
            },
            isShowPopup: false,
            validationCode: "",
            phone: "",
            text: "获取验证码",
            imgSrc: ""
         }
      },

      onLoad(option) {
         this.type = option.type;
         this.getHeader()
         let {
            phone
         } = uni.getStorageSync("userInfo")
         this.phone = `${phone.substr(0,4)}****${phone.substr(8)}`
      },

      methods: {
@@ -83,12 +116,45 @@
            if (this.type == 1) {
               prePage.$vm.applyRequest(src);
            } else {
               prePage.$vm.voteRequest(src);
               this.isShowPopup = true;
               this.imgSrc = src;

               // prePage.$vm.voteRequest(src);
            }
            uni.navigateBack({
               delta: 2
            })
         }
         },

         confirmValidationCode() {
            let pages = getCurrentPages();
            let prePage = pages[pages.length - 2];
            prePage.$vm.voteRequest(this.imgUrl);
            this.isShowPopup = false;
         },



         getValidationCode() {
            // let phone_reg = /^1(3|4|5|6|7|8|9)\d{9}$/;
            // if (!phone_reg.test(this.phone)) {
            //    this.$showTips("手机号码有误~");
            //    return false;
            // }
            // this.sendValidationCode();
            let second = 60;
            let time = setInterval(() => {
               second--
               this.text = `${second}秒后获取`
               if (second == 0 || this.data.isLogin) {
                  clearInterval(time);
                  this.text = "获取验证码";
               }
            }, 1000)
         },



      }
   }
</script>
@@ -104,4 +170,78 @@
      margin: 20rpx;
      color: #aaaaaa;
   }

   .login-mode {
      padding: 20rpx;
   }

   .login-input {
      height: 90rpx;
      border-radius: 45rpx;
      background-color: #f0f0f0;
      padding: 0 30rpx 0 40rpx;
      margin-top: 20rpx;
      width: 550rpx;
      box-sizing: border-box;
   }

   .login-input text {
      flex: 1;
   }

   .login-input input {
      height: 90rpx;
      width: 100%;
      // flex: 3
   }

   .login-input-btn {
      width: 200rpx;
      height: 60rpx;
      line-height: 60rpx;
      border-radius: 30rpx;
      padding: 0;
      margin: 0;
      transition: all ease-out .3s;
      border: none;
   }

   .login-input-btn::after {
      border: none;
   }

   .login-input-btn[disabled] {
      background-color: #fff !important;
      color: #aaa !important;
   }

   .login-explain {
      margin-top: 10rpx;
   }

   .login-btn {
      width: 550rpx;
      height: 90rpx;
      line-height: 90rpx;
      border-radius: 45rpx;
      margin-top: 50rpx;
      transition: all ease-out .3s;
   }

   .login-btn[disabled] {
      background-color: #9DB9F7 !important;
      color: #fff !important;
   }

   .c-aa {
      color: #aaa;
   }

   .c-33 {
      color: #333;
   }

   .mt-30 {
      margin-top: 30rpx;
   }
</style>