<template name='sunui-mverify'>
|
<view class="sunui-slider">
|
<text style="color: #FFFFFF;">{{ hint }}</text>
|
<view class='sunui-slider-bg' :style="{left:-(w + 5)+'px',transform:cssAnimation}">
|
<text>{{ succeedMsg }}</text>
|
<view class='sunui-slider-box' @touchmove='moveStart' @touchend='moveEnd'>
|
<image src="/static/icon/ic_huakuai@2x.png" mode="widthFix"></image>
|
<!-- <text class="iconfont" :class="[isVerify?'icon-wancheng':'icon-youjiantou']"></text> -->
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
hint: {
|
type: String,
|
default: ()=> '抢单'
|
}
|
},
|
data() {
|
return {
|
// hint: '抢单',
|
sysW: uni.getSystemInfoSync().windowWidth,
|
xAxial: 0,
|
x: 0,
|
w: (uni.getSystemInfoSync().windowWidth * 0.8) - 60,
|
cssAnimation: 'translate3d(0, 0, 0)',
|
succeedMsg: '',
|
pullStatus: true,
|
isVerify: false
|
}
|
},
|
name: 'sunui-mverify',
|
methods: {
|
moveStart(e) {
|
if (this.pullStatus) {
|
this.x = e.changedTouches[0].clientX - ((this.sysW * 0.1) + 25);
|
this.x >= this.w ? this.xAxial = this.w : this.xAxial = this.x;
|
if (this.x < 25) this.xAxial = 0;
|
this.cssAnimation = 'translate3d(' + this.xAxial + 'px, 0, 0)';
|
this.cssAnimation = this.cssAnimation
|
this.succeedMsg = '验证中...';
|
}
|
},
|
moveEnd() {
|
let tag;
|
if (this.x >= this.w) {
|
this.xAxial = this.w;
|
this.succeedMsg = '验证成功';
|
tag = true;
|
this.pullStatus = false;
|
this.isVerify = true;
|
} else {
|
this.xAxial = 0;
|
this.succeedMsg = '';
|
tag = false;
|
this.isVerify = false;
|
}
|
this.$emit('change', {
|
msg: tag
|
});
|
this.cssAnimation = 'translate3d(' + this.xAxial + 'px, 0, 0)';
|
this.succeedMsg = this.succeedMsg;
|
this.cssAnimation = this.cssAnimation;
|
}
|
}
|
}
|
</script>
|
|
<style>
|
@import url("iconfont");
|
|
.sunui-slider {
|
position: relative;
|
overflow: hidden;
|
width: 630rpx;
|
height: 100rpx;
|
line-height: 100rpx;
|
/* display: flex;
|
align-items: center; */
|
margin: 0 auto;
|
font-size: 36rpx;
|
text-align: center;
|
background-color: #00BC12;
|
border-radius: 50rpx;
|
}
|
|
.sunui-slider-bg {
|
position: absolute;
|
overflow: hidden;
|
top: 5rpx;
|
left: 6rpx;
|
text-align: center;
|
width: 99%;
|
height: 88rpx;
|
line-height: 88rpx;
|
border-radius: 50rpx;
|
background-color: #00BC12;
|
color: #fff;
|
}
|
|
.sunui-slider-box {
|
position: absolute;
|
right: 0;
|
top: 2px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
height: 88rpx;
|
width: 120rpx;
|
border-radius: 50rpx;
|
background-color: #EBEBEB;
|
}
|
|
.sunui-slider-box image {
|
width: 100%;
|
height: 100%;
|
}
|
</style>
|
