thzxcx/FirstUI-vue
1
0
Fork 0
Code Pull Requests Packages Releases Activity

feat: 首次提交

Browse Source
This commit is contained in:
peerless_hero
2023-08-17 21:28:49 +08:00
parent 36f80fb971
commit ec1e5e16cd
571 changed files with 95322 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

382
components/firstui/fui-slide-verify/fui-slide-verify.vue Normal file
View File

@ -0,0 +1,382 @@
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 8614 0725 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
<view class="fui-slideverify__wrap" :style="{width:totalWidth+'px',height:height+'rpx',background:background}">
<text class="fui-sv__text-tip" :style="{fontSize:size+'rpx',background:getBackground,color:color}"
:class="{'fui-sv__opacity':isPass}">拖动滑块至虚线框内</text>
<!-- #ifdef APP-PLUS || MP-WEIXIN || H5-->
<view class="fui-sv__foreground" ref="foreground" :class="{'fui-sv__background':!getActiveBgColor}"
:style="{background:getActiveBgColor}">
<!-- #endif -->
<!-- #ifndef APP-PLUS || MP-WEIXIN || H5-->
<view class="fui-sv__foreground" :class="{'fui-sv__background':!getActiveBgColor,'fui-sv__reset-ani':resetAni}"
:style="{background:getActiveBgColor,width:fwidth+'px'}">
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<text :class="{'fui-sv__opacity':!isPass}" class="fui-sv__text-res"
:style="{fontSize:size+'rpx',color:activeColor,lineHeight:height+'rpx',width:passWidth+'px'}">验证通过</text>
<!-- #endif -->
<!-- #ifndef APP-NVUE -->
<text :class="{'fui-sv__opacity':!isPass}" class="fui-sv__text-res"
:style="{fontSize:size+'rpx',color:activeColor}">验证通过</text>
<!-- #endif -->
<text :class="{'fui-sv__opacity':isPass}" class="fui-sv__text-cover"
:style="{width:totalWidth+'px',fontSize:size+'rpx',height:height+'rpx',lineHeight:height+'rpx',color:activeColor}">拖动滑块至虚线框内</text>
</view>
<!-- #ifdef APP-VUE || MP-WEIXIN || H5-->
<view class="fui-sv__slider" :class="{'fui-sv__border-color':!getPassColor && isPass}"
:style="{width:sliderW+'px',borderColor:isPass?getPassColor: borderColor}" :change:prop="parse.slidereset"
:prop="resetNum" :data-width="totalWidth" :data-tleft="targetWidth" :data-swidth="sliderW"
:data-pass="isPass?1:0" :data-range="range" @touchstart="parse.touchstart" @touchmove="parse.touchmove"
@touchend="parse.touchend" @mousedown="parse.mousedown">
<fui-icon name="right" :color="arrowColor" :size="iconSize" v-if="!isPass"></fui-icon>
<fui-icon name="checkbox-fill" :color="getPassColor" primary :size="iconSize" v-else></fui-icon>
</view>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<view class="fui-sv__slider" @touchstart="touchstart" @horizontalpan="touchmove" @touchend="touchend"
ref="slider" :style="{width:sliderW+'px',borderColor:isPass?getPassColor: borderColor}">
<fui-icon name="right" :color="arrowColor" :size="iconSize" v-if="!isPass"></fui-icon>
<fui-icon name="checkbox-fill" :color="getPassColor" :size="iconSize" v-else></fui-icon>
</view>
<!-- #endif -->
<!-- #ifndef APP-PLUS || MP-WEIXIN || H5-->
<view class="fui-sv__slider"
:class="{'fui-sv__border-color':!getPassColor && isPass,'fui-sv__reset-ani':resetAni}"
:style="{width:sliderW+'px',borderColor:isPass?getPassColor: borderColor,transform:transform}"
@touchstart="touchstart" @touchmove.stop.prevent="touchmove" @touchend="touchend">
<fui-icon name="right" :color="arrowColor" :size="iconSize" v-if="!isPass"></fui-icon>
<fui-icon name="checkbox-fill" :color="getPassColor" primary :size="iconSize" v-else></fui-icon>
</view>
<!-- #endif -->
<view class="fui-sv__dotted-box"
:style="{'border-color':lineColor,'border-width':isPass?0:'1px',width:sliderW+'px',left:(targetWidth-sliderW)+'px'}">
</view>
</view>
</template>
<!-- #ifdef APP-VUE || MP-WEIXIN || H5-->
<script src="./index.wxs" module="parse" lang="wxs"></script>
<!-- #endif -->
<script>
import weex from './weex.js'
import mpjs from './mpjs.js'
//非easycom模式取消注释引入字体组件，按实际路径进行调整
// import fuiIcon from "@/components/firstui/fui-icon/fui-icon.vue"
export default {
name: "fui-slide-verify",
mixins: [mpjs, weex],
emits: ['success', 'fail'],
// components:{
// fuiIcon
// },
props: {
range: {
type: [Number, String],
default: 3
},
error: {
type: [Number, String],
default: 3
},
width: {
type: [Number, String],
default: 640
},
height: {
type: [Number, String],
default: 80
},
background: {
type: String,
default: "#EEEEEE"
},
activeBgColor: {
type: String,
default: ""
},
sliderWidth: {
type: [Number, String],
default: 80
},
sliderBgColor: {
type: String,
default: "#FFFFFF"
},
borderColor: {
type: String,
default: '#EEEEEE'
},
passColor: {
type: String,
default: ''
},
size: {
type: [Number, String],
default: 28
},
color: {
type: String,
default: "#333333"
},
activeColor: {
type: String,
default: "#FFFFFF"
},
iconSize: {
type: [Number, String],
default: 48
},
arrowColor: {
type: String,
default: "#B2B2B2"
},
lineColor: {
type: String,
default: "#B2B2B2"
}
},
computed: {
getBackground() {
// #ifndef APP-NVUE
return `-webkit-gradient(linear, left top, right top, color-stop(0, ${this.color}), color-stop(.4, ${this.color}), color-stop(.5, white), color-stop(.6, ${this.color}), color-stop(1, ${this.color}))`
// #endif
// #ifdef APP-NVUE
return 'transparent'
// #endif
},
getActiveBgColor() {
let color = this.activeBgColor;
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.primary) || '#465CFF';
}
// #endif
return color;
},
getPassColor(){
let color = this.passColor;
// #ifdef APP-NVUE
if (!color || color === true) {
const app = uni && uni.$fui && uni.$fui.color;
color = (app && app.primary) || '#465CFF';
}
// #endif
return color;
}
},
watch: {
width(val) {
this.totalWidth = this.getPx(val)
},
sliderWidth(val) {
this.sliderW = this.getPx(val)
}
},
data() {
return {
totalWidth: 0,
targetWidth: 0,
sliderW: 0,
isPass: false,
resetNum: 0,
times: 0
};
},
created() {
this.totalWidth = this.getPx(this.width)
this.sliderW = this.getPx(this.sliderWidth)
this.changeTargetPosi()
},
methods: {
getPx(value) {
let val = parseInt(uni.upx2px(Number(value)))
return val % 2 === 0 ? val : val + 1
},
changeTargetPosi() {
let range = Array.from(new Array(100 + 1).keys()).slice(50);
let index = Math.floor((Math.random() * range.length));
let width = uni.upx2px(parseInt((this.width * (range[index] || 100)) / 100))
width = width <= this.sliderW ? this.sliderW + 20 : width
this.targetWidth = parseInt(width)
},
reset() {
this.resetNum += 1
this.isPass = false;
this.times = 0
this.changeTargetPosi()
},
success() {
this.isPass = true;
this.$emit('success', {})
},
fail() {
this.times++;
if (this.times >= Number(this.error)) {
this.changeTargetPosi()
this.times = 0
}
this.$emit('fail', {})
}
}
}
</script>
<style scoped>
.fui-slideverify__wrap {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.fui-sv__text-tip {
font-weight: normal;
width: 338rpx;
text-align: center;
opacity: 1;
/* #ifndef APP-NVUE */
white-space: nowrap;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
-webkit-animation: ani_sv 2s infinite;
/* #endif */
}
/* #ifndef APP-NVUE */
@-webkit-keyframes ani_sv {
from {
background-position: -160rpx;
}
to {
background-position: 160rpx;
}
}
@keyframes ani_sv {
from {
background-position: -160rpx;
}
to {
background-position: 160rpx;
}
}
.fui-sv__background {
background: var(--fui-color-primary, #465CFF) !important;
}
.fui-sv__border-color {
border-color: var(--fui-color-primary, #465CFF) !important;
}
/* #endif */
.fui-sv__foreground {
width: 0;
position: absolute;
left: 0;
top: 0;
bottom: 0;
z-index: 1;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: center;
overflow: hidden;
}
.fui-sv__text-res {
opacity: 1;
/* #ifndef APP-NVUE */
white-space: nowrap;
/* #endif */
text-align: center;
font-weight: normal;
/* #ifdef APP-NVUE */
position: absolute;
left: 0;
top: 0;
/* #endif */
}
.fui-sv__slider {
/* #ifndef APP-NVUE */
display: flex;
z-index: 3;
box-sizing: border-box;
/* #endif */
align-items: center;
justify-content: center;
border-width: 1rpx;
border-style: solid;
background: #FFFFFF;
position: absolute;
left: 0;
top: 0;
bottom: 0;
transition-property: border-color;
transition-duration: 0.08s;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.fui-sv__dotted-box {
position: absolute;
top: 0;
bottom: 0;
z-index: 5;
border-style: dashed;
/* #ifndef APP-NVUE */
box-sizing: border-box;
/* #endif */
transition-property: left;
transition-duration: 0.2s;
}
.fui-sv__opacity {
opacity: 0 !important;
}
.fui-sv__text-cover {
/* #ifndef APP-NVUE */
display: flex;
white-space: nowrap;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: center;
text-align: center;
position: absolute;
left: 0;
top: 0;
font-weight: normal;
opacity: 1;
}
/* #ifndef APP-NVUE */
.fui-sv__reset-ani {
transition: transform 0.2s;
}
/* #endif */
/* fix：vue3下动画问题，app端直接移除class效果未消失，导致卡顿 */
/* #ifdef VUE3 */
.fui-sv__un-ani {
transition: transform 0s;
}
/* #endif */
</style>

149
components/firstui/fui-slide-verify/index.wxs Normal file
View File

@ -0,0 +1,149 @@
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 8 614 0 72549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
var twidth = 300
var swidth = 32
var range = 3
var tleft = 300
function isPC() {
if (typeof navigator !== 'object') return false;
var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
var flag = true;
for (var v = 0; v < Agents.length - 1; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false;
break;
}
}
return flag;
}
var isH5 = false
if (typeof window === 'object') isH5 = true
function bool(str) {
return str === 'true' || str == true ? true : false
}
function touchstart(e, ins) {
var state = e.instance.getState()
var touch = e.touches[0] || e.changedTouches[0]
if (isH5 && isPC()) {
touch = e;
}
var dataset = e.instance.getDataset()
state.startX = touch.pageX
swidth = +dataset.swidth
range = +dataset.range
twidth = +dataset.width
tleft = +dataset.tleft
//H5获取bool值为undefined
state.pass = (+dataset.pass) == 1 ? true : false
}
function styleChange(left, ins) {
if (!ins) return;
var slider = ins.selectComponent('.fui-sv__slider')
var foreground = ins.selectComponent('.fui-sv__foreground')
if (!slider || !foreground) return;
if (left == 0) {
slider.removeClass('fui-sv__un-ani')
foreground.removeClass('fui-sv__un-ani')
slider.addClass('fui-sv__reset-ani')
foreground.addClass('fui-sv__reset-ani')
} else {
slider.removeClass('fui-sv__reset-ani')
foreground.removeClass('fui-sv__reset-ani')
slider.addClass('fui-sv__un-ani')
foreground.addClass('fui-sv__un-ani')
}
slider.setStyle({
transform: 'translate3d(' + left + 'px,0,0)'
})
foreground.setStyle({
width: left + 'px'
})
}
function touchmove(e, ins, event) {
if (e.preventDefault) {
// 阻止页面滚动
e.preventDefault()
}
var state = {}
var touch = {}
if (isH5 && isPC()) {
touch = e;
state = event.instance.getState()
} else {
state = e.instance.getState()
touch = e.touches[0] || e.changedTouches[0]
}
if (state.pass) return;
var pageX = touch.pageX;
var left = pageX - state.startX + (state.lastLeft || 0);
left = left < 0 ? 0 : left;
var width = twidth - swidth;
left = left >= width ? width : left;
state.startX = pageX
state.lastLeft = left
styleChange(left, ins)
}
function touchend(e, ins, event) {
var state = {}
if (isH5 && isPC()) {
state = event.instance.getState()
} else {
state = e.instance.getState()
}
if (state.pass) return;
var left = tleft - swidth
if (Math.abs(left - state.lastLeft) <= range) {
// styleChange(left, ins)
state.pass = true
ins.callMethod('success')
} else {
state.startX = 0;
state.lastLeft = 0;
state.pass = false;
styleChange(0, ins)
ins.callMethod('fail')
}
}
function slidereset(reset, oldreset, owner, ins) {
var state = ins.getState()
if (reset > 0) {
state.startX = 0;
state.lastLeft = 0;
state.pass = false;
styleChange(0, owner)
}
}
var movable = false;
function mousedown(e, ins) {
if (!isH5 || !isPC()) return
touchstart(e, ins)
movable = true
window.onmousemove = function(event) {
if (!isH5 || !isPC() || !movable) return
touchmove(event, ins, e)
}
window.onmouseup = function(event) {
if (!isH5 || !isPC() || !movable) return
touchend(event, ins, e)
movable = false
}
}
module.exports = {
touchstart: touchstart,
touchmove: touchmove,
touchend: touchend,
mousedown: mousedown,
slidereset: slidereset
}

66
components/firstui/fui-slide-verify/mpjs.js Normal file
View File

@ -0,0 +1,66 @@
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 8 6 14 07 2549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
// #ifndef APP-PLUS || MP-WEIXIN || H5
export default {
data() {
return {
transform: '',
fwidth: 0,
startX: 0,
lastLeft: 0,
resetAni: false
}
},
watch: {
resetNum(val) {
this.startX = 0;
this.lastLeft = 0;
this.styleChange(0)
}
},
methods: {
styleChange(left) {
if (left == 0) {
this.resetAni = true
} else {
this.resetAni = false
}
this.fwidth = left
this.transform = 'translate3d(' + left + 'px,0,0)'
},
touchstart(e) {
let touch = e.touches[0] || e.changedTouches[0];
this.startX = touch.clientX
},
touchmove(e) {
if (this.isPass) return;
let touch = e.touches[0] || e.changedTouches[0]
let pageX = touch.clientX;
let left = pageX - this.startX + this.lastLeft;
left = left < 0 ? 0 : left;
let width = this.totalWidth - this.sliderW;
left = left >= width ? width : left;
this.startX = pageX
this.lastLeft = left
this.styleChange(left)
},
touchend(e) {
if (this.isPass) return;
let left = this.targetWidth - this.sliderW
if (Math.abs(left - this.lastLeft) <= Number(this.range)) {
// this.styleChange(left)
this.success()
} else {
this.startX = 0;
this.lastLeft = 0;
this.styleChange(0)
this.fail()
}
}
}
}
// #endif
// #ifdef APP-PLUS|| MP-WEIXIN || H5
export default {}
// #endif

89
components/firstui/fui-slide-verify/weex.js Normal file
View File

@ -0,0 +1,89 @@
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 186 14 07 2 5 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
// #ifdef APP-NVUE
const animation = uni.requireNativePlugin('animation');
export default {
data() {
return {
passWidth: 0
};
},
watch: {
resetNum(val) {
this.startX = 0;
this.lastLeft = 0;
this._animation(0)
}
},
created() {
this.startX = 0
this.lastLeft = 0
},
mounted() {
this.foreground = this.getEl(this.$refs['foreground'])
this.slider = this.getEl(this.$refs['slider']);
},
methods: {
getEl(el) {
return el.ref;
},
_animation(left) {
if (!this.foreground || !this.slider) return;
animation.transition(this.foreground, {
styles: {
width: left + 'px'
},
duration: left == 0 ? 200 : 0,
timingFunction: 'linear',
needLayout: false,
delay: 0
});
animation.transition(this.slider, {
styles: {
transform: 'translate(' + left + 'px,0)'
},
duration: left == 0 ? 200 : 0,
timingFunction: 'linear',
needLayout: false,
delay: 0
});
},
touchstart(e) {
if (this.isPass) return;
let touch = e.touches[0] || e.changedTouches[0];
this.startX = touch.screenX
},
touchmove(e) {
if (this.isPass) return;
let touch = e.changedTouches[0];
let pageX = touch.screenX;
let left = pageX - this.startX + this.lastLeft;
left = left < 0 ? 0 : left;
let width = this.totalWidth - this.sliderW;
left = left >= width ? width : left;
this.startX = pageX
this.lastLeft = left
this._animation(left)
},
touchend(e) {
if (this.isPass) return;
let left = this.targetWidth - this.sliderW
if (Math.abs(left - this.lastLeft) <= Number(this.range)) {
this.passWidth = this.lastLeft;
this.success()
} else {
setTimeout(() => {
this.startX = 0;
this.lastLeft = 0;
this._animation(0)
this.fail()
}, 20)
}
}
}
}
// #endif
// #ifndef APP-NVUE
export default {}
// #endif