feat: 首次提交
This commit is contained in:
peerless_hero
411
components/firstui/fui-rotate-verify/fui-rotate-verify.vue
Normal file
411
components/firstui/fui-rotate-verify/fui-rotate-verify.vue
Normal file
@ -0,0 +1,411 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：18 614 0 7 2 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-rotate__verify-wrap" :class="{'fui-rv__wrap-show':isShow}"
|
||||
:style="{background:maskBgColor,zIndex:zIndex}" @tap="maskClose" @touchmove.stop.prevent="stop"
|
||||
v-if="isShow || !isNvue" ref="fui_rv_ani">
|
||||
<view class="fui-rotate__verify" :style="{width:width+'rpx',background:background}" @tap.stop="stop">
|
||||
<view class="fui-rv__close" @tap.stop="closeVerify">
|
||||
<fui-icon name="close" :color="closeColor"></fui-icon>
|
||||
</view>
|
||||
<text class="fui-rv__title" :style="{ color: color, fontSize: size + 'rpx' }">{{ title }}</text>
|
||||
<text class="fui-rv__descr" :style="{ color: descrColor, fontSize: descrSize + 'rpx' }">拖动滑块，使图片角度为正</text>
|
||||
<view class="fui-rv__image-box"
|
||||
:style="{ width: imgW + 'px', height: imgW + 'px',borderRadius:isNvue?(imgW+'px'):'50%' }">
|
||||
<!-- #ifdef APP-PLUS || MP-WEIXIN || H5 -->
|
||||
<image class="fui-rv__image" :src="src"
|
||||
:style="{ width: imgW + 'px', height: imgW + 'px',borderRadius:isNvue?(imgW+'px'):'50%' }"
|
||||
ref="imgRef">
|
||||
</image>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifndef APP-PLUS || MP-WEIXIN || H5 -->
|
||||
<image class="fui-rv__image" :class="{'fui-rv__rest-ani':resetAni}" :src="src"
|
||||
:style="{ width: imgW + 'px', height: imgW + 'px',borderRadius:isNvue?(imgW+'px'):'50%',transform:'rotate('+angle+'deg)' }">
|
||||
</image>
|
||||
<!-- #endif -->
|
||||
<view class="fui-rv__result" v-if="showRes || isPass"
|
||||
:style="{ width: imgW + 'px', height:imgW + 'px',borderRadius:isNvue?(imgW+'px'):'50%' }">
|
||||
<fui-icon :name="isPass?'check':'close'" :size="96" :color="getColor"></fui-icon>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #ifdef APP-VUE || MP-WEIXIN || H5 -->
|
||||
<view class="fui-rv__slidebar"
|
||||
:style="{width: sliderWidth+'px',height: sliderHeight + 'px', borderColor: borderColor,borderRadius:sliderHeight+'px'}">
|
||||
<view class="fui-rv__slider"
|
||||
:style="{ width: sliderHeight + 'px', height: (sliderHeight-2) + 'px', background: sliderBgColor,borderColor: borderColor,borderRadius:isNvue?sliderHeight+'px':'50%'}"
|
||||
:change:prop="parse.slidereset" :prop="resetNum" :data-width="sliderWidth"
|
||||
:data-swidth="sliderHeight" :data-disabled="isPass || disabled || !isShow?1:0"
|
||||
@touchstart="parse.touchstart" @touchmove="parse.touchmove" @touchend="parse.touchend"
|
||||
@mousedown="parse.mousedown">
|
||||
<fui-icon name="slide" :size="60" :color="slideColor"></fui-icon>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<view class="fui-rv__slidebar"
|
||||
:style="{width: sliderWidth+'px',height: sliderHeight + 'px', borderColor: borderColor,borderRadius:sliderHeight+'px'}">
|
||||
<view class="fui-rv__slider"
|
||||
:style="{ width: sliderHeight + 'px', height: (sliderHeight-2) + 'px', background: sliderBgColor,borderColor: borderColor,borderRadius:isNvue?sliderHeight+'px':'50%'}"
|
||||
@touchstart="touchstart" @horizontalpan="touchmove" @touchend="touchend" ref="sliderRef">
|
||||
<fui-icon name="slide" :size="60" :color="slideColor"></fui-icon>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifndef APP-PLUS || MP-WEIXIN || H5-->
|
||||
<view class="fui-rv__slidebar"
|
||||
:style="{width: sliderWidth+'px',height: sliderHeight + 'px', borderColor: borderColor,borderRadius:sliderHeight+'px'}">
|
||||
<view class="fui-rv__slider" :class="{'fui-rv__rest-ani':resetAni}"
|
||||
:style="{ width: sliderHeight + 'px', height: (sliderHeight-2) + 'px', background: sliderBgColor,borderColor: borderColor,borderRadius:isNvue?sliderHeight+'px':'50%',transform:transform}"
|
||||
@touchstart="touchstart" @touchmove.stop.prevent="touchmove" @touchend="touchend">
|
||||
<fui-icon name="slide" :size="60" :color="slideColor"></fui-icon>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</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-rotate-verify",
|
||||
mixins: [mpjs, weex],
|
||||
emits: ['verify'],
|
||||
// components:{
|
||||
// fuiIcon
|
||||
// },
|
||||
props: {
|
||||
//验证弹层外层盒子宽度 rpx
|
||||
width: {
|
||||
type: [Number, String],
|
||||
default: 600
|
||||
},
|
||||
background: {
|
||||
type: String,
|
||||
default: '#FFFFFF'
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '安全验证'
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#B2B2B2'
|
||||
},
|
||||
size: {
|
||||
type: [Number, String],
|
||||
default: 28
|
||||
},
|
||||
descrColor: {
|
||||
type: String,
|
||||
default: '#333333'
|
||||
},
|
||||
descrSize: {
|
||||
type: [Number, String],
|
||||
default: 32
|
||||
},
|
||||
//图片地址（旋转了初始角度后的图片），必传
|
||||
//旋转角度建议区间为 -330deg<angle <-30deg 或 30deg<angle<330deg
|
||||
src: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
//图片宽度，单位rpx。默认为正方形图片
|
||||
imgWidth: {
|
||||
type: [Number, String],
|
||||
default: 240
|
||||
},
|
||||
//滑动条和滑块边框颜色
|
||||
borderColor: {
|
||||
type: String,
|
||||
default: '#EEEEEE'
|
||||
},
|
||||
sliderBgColor: {
|
||||
type: String,
|
||||
default: '#FFFFFF'
|
||||
},
|
||||
closeColor: {
|
||||
type: String,
|
||||
default: '#B2B2B2'
|
||||
},
|
||||
slideColor: {
|
||||
type: String,
|
||||
default: '#333333'
|
||||
},
|
||||
passColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
failColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
zIndex: {
|
||||
type: [Number, String],
|
||||
default: 996
|
||||
},
|
||||
maskBgColor: {
|
||||
type: String,
|
||||
default: 'rgba(0,0,0,.6)'
|
||||
},
|
||||
//点击遮罩 是否可关闭
|
||||
maskClosable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
imgWidth(val) {
|
||||
this.imgW = this.getPx(val)
|
||||
},
|
||||
width(val) {
|
||||
this.sliderWidth = this.getPx((Number(val) - 64))
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getColor() {
|
||||
const app = uni && uni.$fui && uni.$fui.color;
|
||||
let passColor = this.passColor || (app && app.success) || '#09BE4F'
|
||||
let failColor = this.failColor || (app && app.danger) || '#FF2B2B'
|
||||
return this.isPass ? passColor : failColor
|
||||
}
|
||||
},
|
||||
data() {
|
||||
let isNvue = false
|
||||
// #ifdef APP-NVUE
|
||||
isNvue = true
|
||||
// #endif
|
||||
return {
|
||||
isNvue: isNvue,
|
||||
isShow: false,
|
||||
isPass: false,
|
||||
disabled: false,
|
||||
showRes: false,
|
||||
sliderHeight: 0,
|
||||
imgW: 0,
|
||||
sliderWidth: 0,
|
||||
resetNum: 0
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.sliderWidth = this.getPx((Number(this.width) - 64))
|
||||
this.sliderHeight = this.getPx(92)
|
||||
this.imgW = this.getPx(this.imgWidth)
|
||||
},
|
||||
methods: {
|
||||
getPx(value) {
|
||||
let val = parseInt(uni.upx2px(Number(value)))
|
||||
return val % 2 === 0 ? val : val + 1
|
||||
},
|
||||
success() {
|
||||
this.isPass = true;
|
||||
},
|
||||
fail() {
|
||||
this.showRes = true;
|
||||
this.isPass = false;
|
||||
setTimeout(() => {
|
||||
this.reset()
|
||||
}, 300)
|
||||
},
|
||||
verify(e) {
|
||||
//Math.abs(angle + initAngle - 360) <= range || Math.abs(angle + initAngle) <= range
|
||||
//验证中禁止操作
|
||||
this.disabled = true
|
||||
this.$emit('verify', e)
|
||||
},
|
||||
/*
|
||||
验证结果，前端验证时使用
|
||||
@param {Number} angle 旋转角度
|
||||
@param {Number} initAngle 初始化时旋转角度
|
||||
@param {Number} range 可误差角度范围
|
||||
@param {function} callback 回调函数 返回参数=>是否通过验证(bool)
|
||||
*/
|
||||
verifyRes(angle, initAngle, range, callback) {
|
||||
let res = false
|
||||
if (Math.abs(angle + initAngle - 360) <= range || Math.abs(angle + initAngle) <= range) {
|
||||
res = true
|
||||
}
|
||||
callback && callback(res)
|
||||
},
|
||||
maskClose() {
|
||||
if (!this.maskClosable) return;
|
||||
this.closeVerify()
|
||||
},
|
||||
closeVerify() {
|
||||
this.reset();
|
||||
// #ifndef APP-NVUE
|
||||
this.isShow = false;
|
||||
// #endif
|
||||
|
||||
// #ifdef APP-NVUE
|
||||
this.closeAni()
|
||||
// #endif
|
||||
},
|
||||
show() {
|
||||
// #ifndef APP-NVUE
|
||||
this.isShow = true;
|
||||
// #endif
|
||||
|
||||
// #ifdef APP-NVUE
|
||||
this.openAni()
|
||||
// #endif
|
||||
},
|
||||
reset() {
|
||||
this.resetNum += 1
|
||||
this.isPass = false;
|
||||
this.disabled = false;
|
||||
this.showRes = false
|
||||
},
|
||||
stop() {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fui-rotate__verify-wrap {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
/* #ifndef APP-NVUE */
|
||||
transition-property: all;
|
||||
transition-timing-function: ease-in;
|
||||
transition-duration: 0.2s;
|
||||
display: flex;
|
||||
transform: scale3d(1, 1, 0);
|
||||
visibility: hidden;
|
||||
/* #endif */
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
.fui-rv__wrap-show {
|
||||
opacity: 1;
|
||||
transform: scale3d(1, 1, 1);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
.fui-rotate__verify {
|
||||
padding: 60rpx 32rpx;
|
||||
text-align: center;
|
||||
border-radius: 24rpx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.fui-rv__close {
|
||||
position: absolute;
|
||||
padding: 16rpx 16rpx 0 0;
|
||||
right: 12rpx;
|
||||
top: 12rpx;
|
||||
/* #ifdef H5 */
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-rv__title {
|
||||
text-align: center;
|
||||
padding-top: 30rpx;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.fui-rv__descr {
|
||||
text-align: center;
|
||||
padding-top: 20rpx;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.fui-rv__image-box {
|
||||
position: relative;
|
||||
margin-top: 48rpx;
|
||||
margin-bottom: 64rpx;
|
||||
background: #F1F4FA;
|
||||
}
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
.fui-rv__image {
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
/* #ifndef APP-PLUS || MP-WEIXIN || H5 */
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
.fui-rv__rest-ani {
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
/* fix：vue3下动画问题，app端直接移除class效果未消失，导致卡顿 */
|
||||
|
||||
/* #ifdef VUE3 */
|
||||
.fui-rv__un-ani {
|
||||
transition: transform 0s;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
.fui-rv__result {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
left: 0;
|
||||
top: 0;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.fui-rv__slidebar {
|
||||
/* #ifndef APP-NVUE */
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
position: relative;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.fui-rv__slider {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
/* #ifdef H5 */
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
}
|
||||
</style>
|
||||
137
components/firstui/fui-rotate-verify/index.wxs
Normal file
137
components/firstui/fui-rotate-verify/index.wxs
Normal file
@ -0,0 +1,137 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：18 61 4 0 72 5 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
var twidth = 0
|
||||
var swidth = 0
|
||||
|
||||
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
|
||||
twidth = +dataset.width
|
||||
swidth = +dataset.swidth
|
||||
state.disabled = (+dataset.disabled) == 1 ? true : false
|
||||
}
|
||||
|
||||
function styleChange(left, deg, ins) {
|
||||
if (!ins) return;
|
||||
var block = ins.selectComponent('.fui-rv__slider');
|
||||
var image = ins.selectComponent('.fui-rv__image')
|
||||
if (!image || !block) return;
|
||||
if (left == 0 && deg == 0) {
|
||||
block.removeClass('fui-rv__un-ani')
|
||||
image.removeClass('fui-rv__un-ani')
|
||||
block.addClass('fui-rv__rest-ani')
|
||||
image.addClass('fui-rv__rest-ani')
|
||||
} else {
|
||||
block.removeClass('fui-rv__rest-ani')
|
||||
image.removeClass('fui-rv__rest-ani')
|
||||
block.addClass('fui-rv__un-ani')
|
||||
image.addClass('fui-rv__un-ani')
|
||||
}
|
||||
block.setStyle({
|
||||
transform: 'translate3d(' + left + 'px,0,0)'
|
||||
})
|
||||
image.setStyle({
|
||||
transform: 'rotate(' + deg + 'deg)'
|
||||
})
|
||||
}
|
||||
|
||||
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.disabled) 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
|
||||
var deg = 360 / width * left
|
||||
styleChange(left, deg, ins)
|
||||
}
|
||||
|
||||
function touchend(e, ins, event) {
|
||||
var state = {}
|
||||
if (isH5 && isPC()) {
|
||||
state = event.instance.getState()
|
||||
} else {
|
||||
state = e.instance.getState()
|
||||
}
|
||||
if (state.disabled) return;
|
||||
var left = twidth - swidth
|
||||
var deg = 360 / left * state.lastLeft
|
||||
ins.callMethod('verify', {
|
||||
angle: deg
|
||||
})
|
||||
}
|
||||
|
||||
function slidereset(reset, oldreset, owner, ins) {
|
||||
var state = ins.getState()
|
||||
if (reset > 0) {
|
||||
state.startX = 0;
|
||||
state.lastLeft = 0;
|
||||
state.disabled = false;
|
||||
styleChange(0, 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
|
||||
}
|
||||
62
components/firstui/fui-rotate-verify/mpjs.js
Normal file
62
components/firstui/fui-rotate-verify/mpjs.js
Normal file
@ -0,0 +1,62 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 186 1 4 07 2 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
// #ifndef APP-PLUS || MP-WEIXIN || H5
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
angle: 0,
|
||||
transform: '',
|
||||
startX: 0,
|
||||
lastLeft: 0,
|
||||
resetAni: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
resetNum(val) {
|
||||
this.startX = 0;
|
||||
this.lastLeft = 0;
|
||||
this.styleChange(0, 0)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
styleChange(left, deg) {
|
||||
if (left == 0 && deg == 0) {
|
||||
this.resetAni = true
|
||||
} else {
|
||||
this.resetAni = false
|
||||
}
|
||||
this.transform = 'translate3d(' + left + 'px,0,0)'
|
||||
this.angle = deg
|
||||
},
|
||||
touchstart(e) {
|
||||
let touch = e.touches[0] || e.changedTouches[0];
|
||||
this.startX = touch.clientX
|
||||
},
|
||||
touchmove(e) {
|
||||
if (this.isPass || this.disabled || !this.isShow) 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.sliderWidth - this.sliderHeight;
|
||||
left = left >= width ? width : left;
|
||||
this.startX = pageX
|
||||
this.lastLeft = left
|
||||
let deg = 360 / width * left
|
||||
this.styleChange(left, deg)
|
||||
},
|
||||
touchend(e) {
|
||||
if (this.isPass || this.disabled || !this.isShow) return;
|
||||
let left = this.sliderWidth - this.sliderHeight;
|
||||
let deg = 360 / left * this.lastLeft
|
||||
this.verify({
|
||||
angle: deg
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// #endif
|
||||
|
||||
// #ifdef APP-PLUS|| MP-WEIXIN || H5
|
||||
export default {}
|
||||
// #endif
|
||||
111
components/firstui/fui-rotate-verify/weex.js
Normal file
111
components/firstui/fui-rotate-verify/weex.js
Normal file
@ -0,0 +1,111 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：1 8 61407 2 5 4 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
// #ifdef APP-NVUE
|
||||
const animation = uni.requireNativePlugin('animation');
|
||||
export default {
|
||||
watch: {
|
||||
resetNum(val) {
|
||||
this.startX = 0;
|
||||
this.lastLeft = 0;
|
||||
this._animation(0, 0)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.startX = 0
|
||||
this.lastLeft = 0
|
||||
this.imgRef = null
|
||||
this.sliderRef = null
|
||||
},
|
||||
methods: {
|
||||
openAni() {
|
||||
this.isShow = true;
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.getEl()
|
||||
this._ani(true);
|
||||
}, 50);
|
||||
});
|
||||
},
|
||||
closeAni(type) {
|
||||
this._ani(false);
|
||||
},
|
||||
_ani(type) {
|
||||
let styles = {
|
||||
opacity: type ? 1 : 0
|
||||
};
|
||||
if (!this.$refs['fui_rv_ani']) return;
|
||||
animation.transition(
|
||||
this.$refs['fui_rv_ani'].ref, {
|
||||
styles,
|
||||
duration: 200, //ms
|
||||
timingFunction: 'ease-in',
|
||||
needLayout: false,
|
||||
delay: 0 //ms
|
||||
},
|
||||
() => {
|
||||
if (!type) {
|
||||
this.isShow = false;
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
getEl() {
|
||||
this.imgRef = this.$refs['imgRef'].ref
|
||||
this.sliderRef = this.$refs['sliderRef'].ref;
|
||||
},
|
||||
_animation(left, deg) {
|
||||
left = Number(left.toFixed(2))
|
||||
deg = Number(deg.toFixed(2))
|
||||
if (!this.imgRef || !this.sliderRef) return;
|
||||
animation.transition(this.imgRef, {
|
||||
styles: {
|
||||
transform: 'rotate(' + deg + 'deg)'
|
||||
},
|
||||
duration: deg == 0 ? 200 : 0,
|
||||
timingFunction: 'linear',
|
||||
needLayout: false,
|
||||
delay: 0
|
||||
});
|
||||
animation.transition(this.sliderRef, {
|
||||
styles: {
|
||||
transform: 'translate(' + left + 'px,0)'
|
||||
},
|
||||
duration: left == 0 ? 200 : 0,
|
||||
timingFunction: 'linear',
|
||||
needLayout: false,
|
||||
delay: 0
|
||||
});
|
||||
},
|
||||
touchstart(e) {
|
||||
if (this.isPass || this.disabled || !this.isShow) return;
|
||||
let touch = e.touches[0] || e.changedTouches[0];
|
||||
this.startX = touch.screenX
|
||||
},
|
||||
touchmove(e) {
|
||||
if (this.isPass || this.disabled || !this.isShow) 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.sliderWidth - this.sliderHeight;
|
||||
left = left >= width ? width : left;
|
||||
this.startX = pageX
|
||||
this.lastLeft = left
|
||||
let deg = 360 / width * left
|
||||
this._animation(left, deg)
|
||||
},
|
||||
touchend(e) {
|
||||
if (this.isPass || this.disabled || !this.isShow) return;
|
||||
let left = this.sliderWidth - this.sliderHeight;
|
||||
let deg = 360 / left * this.lastLeft
|
||||
this.verify({
|
||||
angle: deg
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// #endif
|
||||
|
||||
// #ifndef APP-NVUE
|
||||
export default {}
|
||||
// #endif
|
||||
Reference in New Issue
Block a user