首次提交
This commit is contained in:
duan
184
components/colorui/animation.css
Normal file
184
components/colorui/animation.css
Normal file
@@ -0,0 +1,184 @@
|
||||
/*
|
||||
Animation 微动画
|
||||
基于ColorUI组建库的动画模块 by 文晓港 2019年3月26日19:52:28
|
||||
*/
|
||||
|
||||
/* css 滤镜 控制黑白底色gif的 */
|
||||
.gif-black{
|
||||
mix-blend-mode: screen;
|
||||
}
|
||||
.gif-white{
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
|
||||
|
||||
/* Animation css */
|
||||
[class*=animation-] {
|
||||
animation-duration: .5s;
|
||||
animation-timing-function: ease-out;
|
||||
animation-fill-mode: both
|
||||
}
|
||||
|
||||
.animation-fade {
|
||||
animation-name: fade;
|
||||
animation-duration: .8s;
|
||||
animation-timing-function: linear
|
||||
}
|
||||
|
||||
.animation-scale-up {
|
||||
animation-name: scale-up
|
||||
}
|
||||
|
||||
.animation-scale-down {
|
||||
animation-name: scale-down
|
||||
}
|
||||
|
||||
.animation-slide-top {
|
||||
animation-name: slide-top
|
||||
}
|
||||
|
||||
.animation-slide-bottom {
|
||||
animation-name: slide-bottom
|
||||
}
|
||||
|
||||
.animation-slide-left {
|
||||
animation-name: slide-left
|
||||
}
|
||||
|
||||
.animation-slide-right {
|
||||
animation-name: slide-right
|
||||
}
|
||||
|
||||
.animation-shake {
|
||||
animation-name: shake
|
||||
}
|
||||
|
||||
.animation-reverse {
|
||||
animation-direction: reverse
|
||||
}
|
||||
|
||||
@keyframes fade {
|
||||
0% {
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scale-up {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(.2)
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scale-down {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(1.8)
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-top {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-100%)
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-bottom {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(100%)
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: translateX(0)
|
||||
}
|
||||
|
||||
10% {
|
||||
transform: translateX(-9px)
|
||||
}
|
||||
|
||||
20% {
|
||||
transform: translateX(8px)
|
||||
}
|
||||
|
||||
30% {
|
||||
transform: translateX(-7px)
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: translateX(6px)
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateX(-5px)
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: translateX(4px)
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: translateX(-3px)
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: translateX(2px)
|
||||
}
|
||||
|
||||
90% {
|
||||
transform: translateX(-1px)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-left {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-100%)
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-right {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(100%)
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0)
|
||||
}
|
||||
}
|
||||
65
components/colorui/components/cu-custom.vue
Normal file
65
components/colorui/components/cu-custom.vue
Normal file
@@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="cu-custom" :style="[{height:CustomBar + 'px'}]">
|
||||
<view class="cu-bar fixed" :style="style" :class="[bgImage!=''?'none-bg text-white bg-img':'',bgColor]">
|
||||
<view class="action" @tap="BackPage" v-if="isBack">
|
||||
<text class="cuIcon-back"></text>
|
||||
<slot name="backText"></slot>
|
||||
</view>
|
||||
<view class="content" :style="[{top:StatusBar + 'px'}]">
|
||||
<slot name="content"></slot>
|
||||
</view>
|
||||
<slot name="right"></slot>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
StatusBar: this.StatusBar,
|
||||
CustomBar: this.CustomBar
|
||||
};
|
||||
},
|
||||
name: 'cu-custom',
|
||||
computed: {
|
||||
style() {
|
||||
var StatusBar= this.StatusBar;
|
||||
var CustomBar= this.CustomBar;
|
||||
var bgImage = this.bgImage;
|
||||
var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
|
||||
if (this.bgImage) {
|
||||
style = `${style}background-image:url(${bgImage});`;
|
||||
}
|
||||
return style
|
||||
}
|
||||
},
|
||||
props: {
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
isBack: {
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
bgImage: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
BackPage() {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
1226
components/colorui/icon.css
Normal file
1226
components/colorui/icon.css
Normal file
File diff suppressed because one or more lines are too long
3912
components/colorui/main.css
Normal file
3912
components/colorui/main.css
Normal file
File diff suppressed because it is too large
Load Diff
312
components/com-input.vue
Normal file
312
components/com-input.vue
Normal file
@@ -0,0 +1,312 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="mix-list-cell" :class="border" hover-class="cell-hover" :hover-stay-time="50">
|
||||
<text class="cell-tit">{{title}}</text>
|
||||
<input class="main-input" :value="value" :type="_type" placeholder-class="placeholder-class"
|
||||
:maxlength="maxlength" :placeholder="placeholder" :password="type==='password'&&!showPassword"
|
||||
@input="onInput" :disabled="readOnly" />
|
||||
|
||||
<!-- 是否可见密码 -->
|
||||
<image v-if="_isShowPass&&type==='password'&&!_isShowCode" class="img cuIcon"
|
||||
:class="showPassword?'cuIcon-attention':'cuIcon-attentionforbid'" @tap="showPass"></image>
|
||||
<!-- 倒计时 -->
|
||||
<view v-if="_isShowCode&&!_isShowPass" :class="['vercode',{'vercode-run': second>0}]" @click="setCode">
|
||||
{{ getVerCodeSecond }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var _this, countDown;
|
||||
/**
|
||||
* 简单封装了下， 应用范围比较狭窄，可以在此基础上进行扩展使用
|
||||
* 比如加入image， iconSize可控等
|
||||
*/
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showPassword: false, //是否显示明文
|
||||
second: 0, //倒计时
|
||||
isRunCode: false, //是否开始倒计时
|
||||
typeList: {
|
||||
left: 'icon-zuo',
|
||||
right: 'icon-you',
|
||||
up: 'icon-shang',
|
||||
down: 'icon-xia'
|
||||
},
|
||||
}
|
||||
},
|
||||
props: {
|
||||
readOnly: {
|
||||
//是否显示获取验证码（二选一）
|
||||
type: [Boolean, String],
|
||||
default: false,
|
||||
},
|
||||
type: String, //类型
|
||||
logo: String, //类型
|
||||
value: String, //值
|
||||
placeholder: String, //框内提示
|
||||
isShowCode: {
|
||||
//是否显示获取验证码（二选一）
|
||||
type: [Boolean, String],
|
||||
default: false,
|
||||
},
|
||||
codeText: {
|
||||
type: String,
|
||||
default: "获取验证码",
|
||||
},
|
||||
setTime: {
|
||||
//倒计时时间设置
|
||||
type: [Number, String],
|
||||
default: 60,
|
||||
},
|
||||
maxlength: {
|
||||
//最大长度
|
||||
type: [Number, String],
|
||||
default: 30,
|
||||
},
|
||||
isShowPass: {
|
||||
//是否显示密码图标（二选一）
|
||||
type: [Boolean, String],
|
||||
default: false,
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '标题'
|
||||
},
|
||||
tips: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
navigateType: {
|
||||
type: String,
|
||||
default: 'right'
|
||||
},
|
||||
border: {
|
||||
type: String,
|
||||
default: 'b-b'
|
||||
},
|
||||
hoverClass: {
|
||||
type: String,
|
||||
default: 'cell-hover'
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
default: '#333'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
_this = this
|
||||
//准备触发
|
||||
this.$on('runCodes', (val) => {
|
||||
this.runCodes(val);
|
||||
});
|
||||
clearInterval(countDown); //先清理一次循环，避免缓存
|
||||
},
|
||||
methods: {
|
||||
showPass() {
|
||||
//是否显示密码
|
||||
this.showPassword = !this.showPassword
|
||||
},
|
||||
onInput(e) {
|
||||
//传出值
|
||||
this.$emit('input', e.target.value)
|
||||
},
|
||||
setCode() {
|
||||
//设置获取验证码的事件
|
||||
if (this.isRunCode) {
|
||||
//判断是否开始倒计时，避免重复点击
|
||||
return false;
|
||||
}
|
||||
this.$emit('setCode')
|
||||
},
|
||||
runCodes(val) {
|
||||
console.error("runCodes")
|
||||
//开始倒计时
|
||||
if (String(val) == "0") {
|
||||
|
||||
//判断是否需要终止循环
|
||||
this.second = 0; //初始倒计时
|
||||
clearInterval(countDown); //清理循环
|
||||
this.isRunCode = false; //关闭循环状态
|
||||
return false;
|
||||
}
|
||||
if (this.isRunCode) {
|
||||
//判断是否开始倒计时，避免重复点击
|
||||
return false;
|
||||
}
|
||||
this.isRunCode = true
|
||||
this.second = this._setTime //倒数秒数
|
||||
|
||||
let _this = this;
|
||||
countDown = setInterval(function() {
|
||||
_this.second--
|
||||
if (_this.second == 0) {
|
||||
_this.isRunCode = false
|
||||
clearInterval(countDown)
|
||||
}
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
computed: {
|
||||
_type() {
|
||||
//处理值
|
||||
const type = this.type
|
||||
return type == 'password' ? 'text' : type
|
||||
},
|
||||
_isShowPass() {
|
||||
//处理值
|
||||
return String(this.isShowPass) !== 'false'
|
||||
},
|
||||
_isShowCode() {
|
||||
//处理值
|
||||
return String(this.isShowCode) !== 'false'
|
||||
},
|
||||
_setTime() {
|
||||
//处理值
|
||||
const setTime = Number(this.setTime)
|
||||
return setTime > 0 ? setTime : 60
|
||||
},
|
||||
getVerCodeSecond() {
|
||||
//验证码倒计时计算
|
||||
if (this.second <= 0) {
|
||||
return this.codeText;
|
||||
} else {
|
||||
if (this.second < 10) {
|
||||
return '0' + this.second + "s";
|
||||
} else {
|
||||
return this.second + "s";
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss'>
|
||||
.main-input {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
/* color: white; */
|
||||
font-size: 16px;
|
||||
padding-right: 6px;
|
||||
margin-left: 10px;
|
||||
border: 1rpx solid #d9d9d9;
|
||||
height: 90rpx;
|
||||
border-radius: 10rpx;
|
||||
padding: 0px 10px;
|
||||
}
|
||||
|
||||
.icon .mix-list-cell.b-b:after {
|
||||
left: 45px;
|
||||
}
|
||||
|
||||
.placeholder-class {
|
||||
color: white;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.mix-list-cell {
|
||||
border-radius: 32upx;
|
||||
margin-top: 1px;
|
||||
font-size: 32upx;
|
||||
background: #ffffff;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
margin: 32upx;
|
||||
/* padding: 24upx 32upx; */
|
||||
position: relative;
|
||||
|
||||
&.cell-hover {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&.b-b:after {
|
||||
left: 16px;
|
||||
}
|
||||
|
||||
.cell-icon {
|
||||
align-self: center;
|
||||
width: 28px;
|
||||
max-height: 30px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.cell-more {
|
||||
align-self: center;
|
||||
font-size: 16px;
|
||||
color: #606266;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.cell-tit {
|
||||
width: 80px;
|
||||
font-size: 16px;
|
||||
/* color: white; */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cell-tip {
|
||||
font-size: 14px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.items {
|
||||
position: absolute;
|
||||
height: 48px;
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
/*opacity:0.05;*/
|
||||
}
|
||||
|
||||
.main-list {
|
||||
opacity: 0.8;
|
||||
z-index: 88;
|
||||
background: white;
|
||||
border: 1px solid white;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 18px;
|
||||
/* Input 高度 */
|
||||
color: #333333;
|
||||
padding: 16px;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.vercode {
|
||||
color: #e10a07;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.vercode-run {
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
.oBorder {
|
||||
|
||||
border-radius: 2.5rem;
|
||||
-webkit-box-shadow: 0 0 30px 0 rgba(43, 86, 112, .1);
|
||||
box-shadow: 0 0 30px 0 rgba(43, 86, 112, .1);
|
||||
}
|
||||
</style>
|
||||
71
components/empty.vue
Normal file
71
components/empty.vue
Normal file
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<view class="page-box">
|
||||
<view class="centre">
|
||||
<image src="../static/images/img/empty.png" mode=""></image>
|
||||
<view class="tips">
|
||||
{{content}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
content: {
|
||||
type: String,
|
||||
default: '暂无内容'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-box {
|
||||
position: relative;
|
||||
// left: 0;
|
||||
// height: 90vh;
|
||||
z-index: 0;
|
||||
top: 0px;
|
||||
background: #ffffff;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.centre {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
height: 400rpx;
|
||||
text-align: center;
|
||||
// padding: 200rpx auto;
|
||||
font-size: 32rpx;
|
||||
|
||||
image {
|
||||
width: 387rpx;
|
||||
height: 341rpx;
|
||||
// margin-bottom: 20rpx;
|
||||
margin: 0 auto 20rpx;
|
||||
// border: 1px dotted #000000;
|
||||
}
|
||||
|
||||
.tips {
|
||||
font-size: 32rpx;
|
||||
color: #2F3044;
|
||||
margin-top: 20rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin: 80rpx auto;
|
||||
width: 600rpx;
|
||||
border-radius: 32rpx;
|
||||
line-height: 90rpx;
|
||||
color: #ffffff;
|
||||
font-size: 34rpx;
|
||||
background: #5074FF;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
1226
components/watch-login/css/icon.css
Normal file
1226
components/watch-login/css/icon.css
Normal file
File diff suppressed because one or more lines are too long
109
components/watch-login/watch-button.vue
Normal file
109
components/watch-login/watch-button.vue
Normal file
@@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 按钮 -->
|
||||
<button :class="['buttonBorder',!_rotate?'dlbutton':'dlbutton_loading']" :style="{'background':bgColor, 'color': fontColor}">
|
||||
<view :class="_rotate?'rotate_loop':''">
|
||||
<text v-if="_rotate" class="cuIcon cuIcon-loading1 "></text>
|
||||
<text v-if="!_rotate">{{ text }}</text>
|
||||
</view>
|
||||
</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
props:{
|
||||
text: String, //显示文本
|
||||
rotate:{
|
||||
//是否启动加载
|
||||
type: [Boolean,String],
|
||||
default: false,
|
||||
},
|
||||
bgColor:{
|
||||
//按钮背景颜色
|
||||
type: String,
|
||||
// default: "linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.6))",
|
||||
},
|
||||
fontColor:{
|
||||
//按钮字体颜色
|
||||
type: String,
|
||||
default: "#000000",
|
||||
},
|
||||
},
|
||||
computed:{
|
||||
_rotate() {
|
||||
//处理值
|
||||
return String(this.rotate) !== 'false'
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url("./css/icon.css");
|
||||
|
||||
.dlbutton {
|
||||
/* color: #FFFFFF; */
|
||||
font-size: 30upx;
|
||||
width:601upx;
|
||||
height:90upx;
|
||||
/* background: #352680; */
|
||||
background: #FCD202;
|
||||
box-shadow:0upx 0upx 13upx 0upx rgba(164,217,228,0.4);
|
||||
border-radius:2.5rem;
|
||||
line-height: 90upx;
|
||||
text-align: center;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 96upx;
|
||||
}
|
||||
.dlbutton_loading {
|
||||
color: #FFFFFF;
|
||||
font-size: 30upx;
|
||||
width:100upx;
|
||||
height:100upx;
|
||||
background: #5E81F9;
|
||||
box-shadow:0upx 0upx 13upx 0upx rgba(164,217,228,0.4);
|
||||
border-radius:2.5rem;
|
||||
line-height: 100upx;
|
||||
text-align: center;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 96upx;
|
||||
}
|
||||
.buttonBorder{
|
||||
border: none ;
|
||||
border-radius: 2.5rem ;
|
||||
-webkit-box-shadow: 0 0 60upx 0 rgba(0,0,0,.2) ;
|
||||
box-shadow: 0 0 60upx 0 rgba(0,0,0,.2) ;
|
||||
-webkit-transition: all 0.4s cubic-bezier(.57,.19,.51,.95);
|
||||
-moz-transition: all 0.4s cubic-bezier(.57,.19,.51,.95);
|
||||
-ms-transition: all 0.4s cubic-bezier(.57,.19,.51,.95);
|
||||
-o-transition: all 0.4s cubic-bezier(.57,.19,.51,.95);
|
||||
transition: all 0.4s cubic-bezier(.57,.19,.51,.95);
|
||||
}
|
||||
|
||||
/* 旋转动画 */
|
||||
.rotate_loop{
|
||||
-webkit-transition-property: -webkit-transform;
|
||||
-webkit-transition-duration: 1s;
|
||||
-moz-transition-property: -moz-transform;
|
||||
-moz-transition-duration: 1s;
|
||||
-webkit-animation: rotate 1s linear infinite;
|
||||
-moz-animation: rotate 1s linear infinite;
|
||||
-o-animation: rotate 1s linear infinite;
|
||||
animation: rotate 1s linear infinite;
|
||||
}
|
||||
@-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}
|
||||
to{-webkit-transform: rotate(360deg)}
|
||||
}
|
||||
@-moz-keyframes rotate{from{-moz-transform: rotate(0deg)}
|
||||
to{-moz-transform: rotate(359deg)}
|
||||
}
|
||||
@-o-keyframes rotate{from{-o-transform: rotate(0deg)}
|
||||
to{-o-transform: rotate(359deg)}
|
||||
}
|
||||
@keyframes rotate{from{transform: rotate(0deg)}
|
||||
to{transform: rotate(359deg)}
|
||||
}
|
||||
</style>
|
||||
223
components/watch-login/watch-input.vue
Normal file
223
components/watch-login/watch-input.vue
Normal file
@@ -0,0 +1,223 @@
|
||||
<template>
|
||||
<view class="main-list oBorder">
|
||||
<!-- 文本框 -->
|
||||
<input
|
||||
class="main-input"
|
||||
:value="value"
|
||||
:type="_type"
|
||||
:maxlength="maxlength"
|
||||
:placeholder="placeholder"
|
||||
:password="type==='password'&&!showPassword"
|
||||
@input="onInput"
|
||||
/>
|
||||
<!-- 是否可见密码 -->
|
||||
<image
|
||||
v-if="_isShowPass&&type==='password'&&!_isShowCode"
|
||||
class="img cuIcon"
|
||||
:class="showPassword?'cuIcon-attention':'cuIcon-attentionforbid'"
|
||||
@tap="showPass"
|
||||
></image>
|
||||
<!-- 倒计时 -->
|
||||
<view
|
||||
v-if="_isShowCode&&!_isShowPass"
|
||||
:class="['vercode',{'vercode-run': second>0}]"
|
||||
@click="setCode"
|
||||
>{{ getVerCodeSecond }}</view>
|
||||
|
||||
|
||||
<view
|
||||
v-if="_isShowGet"
|
||||
class="vercode"
|
||||
@click="setNumberCode"
|
||||
>官方邀请码</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var _this, countDown;
|
||||
export default{
|
||||
data(){
|
||||
return{
|
||||
showPassword: false, //是否显示明文
|
||||
second: 0, //倒计时
|
||||
isRunCode: false, //是否开始倒计时
|
||||
}
|
||||
},
|
||||
props:{
|
||||
type: String, //类型
|
||||
value: String, //值
|
||||
placeholder: String, //框内提示
|
||||
maxlength: {
|
||||
//最大长度
|
||||
type: [Number,String],
|
||||
default: 20,
|
||||
},
|
||||
isShowPass:{
|
||||
//是否显示密码图标（二选一）
|
||||
type: [Boolean,String],
|
||||
default: false,
|
||||
},
|
||||
isShowCode:{
|
||||
//是否显示获取验证码（二选一）
|
||||
type: [Boolean,String],
|
||||
default: false,
|
||||
},
|
||||
isShowGet:{
|
||||
//是否显示获取验证码（二选一）
|
||||
type: [Boolean,String],
|
||||
default: false,
|
||||
},
|
||||
codeText:{
|
||||
type: String,
|
||||
default: "获取验证码",
|
||||
},
|
||||
setTime:{
|
||||
//倒计时时间设置
|
||||
type: [Number,String],
|
||||
default: 60,
|
||||
}
|
||||
},
|
||||
model: {
|
||||
prop: 'value',
|
||||
event: 'input'
|
||||
},
|
||||
mounted() {
|
||||
_this=this
|
||||
//准备触发
|
||||
this.$on('runCode',(val)=>{
|
||||
this.runCode(val);
|
||||
});
|
||||
clearInterval(countDown);//先清理一次循环，避免缓存
|
||||
},
|
||||
methods:{
|
||||
showPass(){
|
||||
//是否显示密码
|
||||
this.showPassword = !this.showPassword
|
||||
},
|
||||
onInput(e) {
|
||||
//传出值
|
||||
this.$emit('input', e.target.value)
|
||||
},
|
||||
setCode(){
|
||||
//设置获取验证码的事件
|
||||
if(this.isRunCode){
|
||||
//判断是否开始倒计时，避免重复点击
|
||||
return false;
|
||||
}
|
||||
this.$emit('setCode')
|
||||
},
|
||||
setNumberCode(){
|
||||
this.$emit('setNumberCode')
|
||||
},
|
||||
runCode(val){
|
||||
//开始倒计时
|
||||
if(String(val)=="0"){
|
||||
|
||||
//判断是否需要终止循环
|
||||
this.second = 0; //初始倒计时
|
||||
clearInterval(countDown);//清理循环
|
||||
this.isRunCode= false; //关闭循环状态
|
||||
return false;
|
||||
}
|
||||
if(this.isRunCode){
|
||||
//判断是否开始倒计时，避免重复点击
|
||||
return false;
|
||||
}
|
||||
this.isRunCode= true
|
||||
this.second = this._setTime //倒数秒数
|
||||
|
||||
let _this=this;
|
||||
countDown = setInterval(function(){
|
||||
_this.second--
|
||||
if(_this.second==0){
|
||||
_this.isRunCode= false
|
||||
clearInterval(countDown)
|
||||
}
|
||||
},1000)
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
computed:{
|
||||
_type(){
|
||||
//处理值
|
||||
const type = this.type
|
||||
return type == 'password' ? 'text' : type
|
||||
},
|
||||
_isShowPass() {
|
||||
//处理值
|
||||
return String(this.isShowPass) !== 'false'
|
||||
},
|
||||
_isShowCode() {
|
||||
//处理值
|
||||
return String(this.isShowCode) !== 'false'
|
||||
},
|
||||
_isShowGet() {
|
||||
//处理值
|
||||
return String(this.isShowGet) !== 'false'
|
||||
},
|
||||
_setTime() {
|
||||
//处理值
|
||||
const setTime = Number(this.setTime)
|
||||
return setTime>0 ? setTime : 60
|
||||
},
|
||||
getVerCodeSecond(){
|
||||
//验证码倒计时计算
|
||||
if(this.second<=0){
|
||||
return this.codeText;
|
||||
}else{
|
||||
if(this.second<10){
|
||||
return '0'+this.second;
|
||||
}else{
|
||||
return this.second;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url("./css/icon.css");
|
||||
|
||||
.main-list{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 90upx; /* Input 高度 */
|
||||
color: #333333;
|
||||
padding: 32upx;
|
||||
margin-top:18upx;
|
||||
margin-bottom: 18upx;
|
||||
}
|
||||
.img{
|
||||
width: 32upx;
|
||||
height: 32upx;
|
||||
font-size: 32upx;
|
||||
}
|
||||
.main-input{
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
font-size: 28upx;
|
||||
/* line-height: 100upx; */
|
||||
padding-right: 10upx;
|
||||
margin-left: 20upx;
|
||||
}
|
||||
.vercode {
|
||||
color: rgba(0,0,0,0.7);
|
||||
font-size: 24upx;
|
||||
line-height: 100upx;
|
||||
}
|
||||
.vercode-run {
|
||||
color: rgba(0,0,0,0.4) !important;
|
||||
}
|
||||
.oBorder{
|
||||
border: none;
|
||||
border-radius: 2.5rem ;
|
||||
-webkit-box-shadow: 0 0 60upx 0 rgba(43,86,112,.1) ;
|
||||
box-shadow: 0 0 60upx 0 rgba(43,86,112,.1) ;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user