wardrobe/tm-vuetify/components/tm-verificationImg/tm-verificationImg.vue

<template>
	<view class="tm-verificationImg flex-center flex-col">
		<view class="flex-shrink rounded overflow relative" 
		:style="{
			width:`${size}rpx`,
			height:`${size}rpx`,
			
		}"
		>	
			<view v-if="success" class="tm-verificationImg-success fulled fulled-height rounded absolute flex-center opacity-8" >
					<tm-icons name="icon-check" color="white" :size="100"></tm-icons>
				</view>
			<view :style="{transform: `rotate(${default_value_num}deg)`}">
				<tm-images model="aspectFit" :width="size" :height="size" round="rounded" :src="src"></tm-images>
			</view>
		</view>
		<view :style="{width:`${size}rpx`}" class="py-32">
			<tm-slider :disabled="disabled" :fllowTheme="fllowTheme" :color="color_tmeme" v-model="default_value_num" :max="360"></tm-slider>
		</view>
	</view>
</template>

<script>
	//https://jx2d.cn/yuwuimages/test.png
	//测试图片角度为正120
	/**
	 * 图片安全验证
	 * @property {String} model = [normal|rotate] 默认：normal，rotate表示图片本身有角度的模式。normal是随机一张正常的图片（图片本身是没有角度的）
	 * @property {Number} rotate = [] 默认：0，当前model=normal时，应承打乱图片 的角度。当model=rotate，是特指图片本身的角度。
	 * @property {Number} size = [] 默认：200，大小。
	 * @property {String} color = [] 默认：primary，主题色。
	 * @property {String} src = [] 默认：''随机一张图片，图片地址。
	 * @property {Boolean} disabled = [] 默认：false,是否禁用
	 * @property {Function} change 旋转的时候触发，返回参数为当前的检验，正确是为true,失败为false
	 */
	import tmIcons from "@/tm-vuetify/components/tm-icons/tm-icons.vue"
	import tmImages from "@/tm-vuetify/components/tm-images/tm-images.vue"
	import tmSlider from "@/tm-vuetify/components/tm-slider/tm-slider.vue"
	export default {
		components:{tmSlider,tmIcons,tmImages},
		name:"tm-verificationImg",
		props:{
			//rotate表示图片本身有角度的模式。normal是随机一张正常的图片（图片本身是没有角度的）
			model:{
				type:String,
				default:'normal' ,//normal|rotate ，
			},
			//当前model=normal时，应承打乱图片 的角度。当model=rotate，是特指图片本身的角度。
			rotate:{
				type:Number,
				default:0
			},
			size:{
				type:Number|String,
				default:200
			},
			color:{
				type:String,
				default:'primary'
			},
			src:{
				type:String,
				default:'https://picsum.photos/300'
			},
			// 跟随主题色的改变而改变。
			fllowTheme:{
				type:Boolean|String,
				default:true
			},
			disabled:Boolean
		},
		data() {
			return {
				default_value_num:0,
				imgrotate:0,
				wucha:5,
				success:false
			};
		},
		computed:{
			color_tmeme:function(){
				if(this.$tm.vx.state().tmVuetify.color!==null&&this.$tm.vx.state().tmVuetify.color && this.fllowTheme){
					return this.$tm.vx.state().tmVuetify.color;
				}
				return this.color;
			},
		},
		mounted() {
			if(this.model=='normal'){
				this.default_value_num = this.rotate
				this.imgrotate = 0
			}else{
				this.default_value_num = 0
				this.imgrotate = this.rotate
			}
		},
		watch:{
			default_value_num:function(val){
				let zque = Math.abs(360-this.imgrotate);
				if(this.model=='normal'){
					if(val>=360){
						this.success=true
						
					}else{
						this.success=false
					}
				}else{
					if(val>=zque-5 && val <=zque+5){
						this.success=true
					}else{
						this.success=false
					}
				}
				this.$emit('change',this.success)
			}
		},
		methods: {
			name() {
				
			}
		},
	}
</script>

<style lang="scss">
.tm-verificationImg{
	.tm-verificationImg-success{
		top: 0;
		left: 0;
		z-index: 9;
		background-color: rgba(0,0,0,0.2);
		backdrop-filter: blur(2px);
		-webkit-backdrop-filter: blur(2px);
		
	}
}
</style>