使用lucky-canvas插件 添加阿里无痕验证
npm install @lucky-canvas/vue@latest
大转盘类型抽奖：
<LuckyWheel
ref="LuckyWheel"
class="LuckyWheel"
width="650px"
height="650px"
:prizes="prizes"
:buttons="buttons"
:blocks="blocks"
@start="startCallBack"
@end="endCallBack"
/>
buttons: 转盘指针样式
prizes: 奖品列表图片以及样式
blocks：转盘背景图设置
start: 开始抽奖前执行
end: 结束抽奖后执行
import { LuckyWheel } from '@lucky-canvas/vue'
export default {
components: {
LuckyWheel,
},
data() {
return {
prizes: [],
blocks: [
{
padding: '28px',
background: '#2189ff',
imgs: [
{
src: require('./img/di.png'),
top: '-30px',
width: '710px',
height: '710px',
rotate: true,
},
],
},
],
buttons: [
{
radius: '90px',
background: '#fff',
imgs: [{ src: require('./img/choujiang.png'), top: '-112px' }],
},
],
}
},
methods: {
// 奖品列表
async MemberRaffleMember() {
const res = await 你的接口
const prizesArray = []
res.data.lotteryPrizes.map((item, index) => {
const obj = {
fonts: [
{ text: '', top: '30px', fontSize: '28px' }
],
imgs: [{ src: item.img, width: '140px', height: '140px', top: '30px' }],
background: index % 2 === 0 ? '#cce4ff' : '#fff'
}
prizesArray.push(obj)
})
// prizesArray.push({ fonts: [{ text: '0' }], background: '#e9e8fe' },
// { fonts: [{ text: '1' }], background: '#b8c5f2' },)
this.prizes = prizesArray
},
// 获取当前中奖奖品
async MemberRafflelottery() {
const res = await 你的接口
if (res.code === 'E_VALIDATE_REBOT_400') {
var ncoption = {
// 声明滑动验证需要渲染的目标ID。
renderTo: 'nc'
}
// 唤醒二次验证（滑动验证码）
window.nvc.getNC(ncoption)
this.StateClickShow = false
} else if (res.code === 'E_VALIDATE_REBOT_800') {
// 800 直接抽奖失败
that.$refs.LuckyWheel.stop(0)
} else if (res.code === 'E_VALIDATE_REBOT_900') {
// 900 直接抽奖失败
that.$refs.LuckyWheel.stop(0)
} else {
if (res.success) {
// 遍历奖品列表 判断拿到当前res奖品 设置转盘指针停到哪里
that.$refs.LuckyWheel.stop(index)
this.initDrag(this.selectvalue)
} else {
that.$refs.LuckyWheel.stop(0)
}
}
},
// 初始化滑块验证
initDrag(val) {
const that = this
// 实例化nvc
AWSC.use('nvc', function(state, module) { //eslint-disable-line
// 初始化 自己调试各种状态 需要跟服务端联调时使用
// let test = module.TEST_PASS
// if (val === 'TEST_PASS') {
// // 无痕成功
// test = module.TEST_PASS
// } else if (val === 'TEST_BLOCK') {
// // 无痕失败
// test = module.TEST_BLOCK
// } else if (val === 'TEST_NC_PASS') {
// // 二次成功
// test = module.TEST_NC_PASS
// } else {
// // 二次失败
// test = module.TEST_NC_BLOCK
// }
console.log(module)
window.nvc = module.init({
// 应用类型标识。它和使用场景标识（scene字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。
appkey: 'CF_APP_1', // CF_APP_1
// 使用场景标识。它和应用类型标识（appkey字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的scene值，请务必正确填写。
scene: 'register', // register
// test: test,
success: function(data) {
// data 跟随业务请求，发送至您的服务端调用验签
},
nvcCallback: function(data) {
console.log(data, '***********')
},
// 滑动验证失败时触发该回调参数。
fail: function(failCode) {
},
// 验证码加载出现异常时触发该回调参数。
error: function(errorCode) {
window.console && console.log(errorCode, 'errorCode')
}
})
})
},
startCallBack() {
window.nvc.getNVCValAsync(function(nvcVal) {
// nvcVal 人机信息串
// 点击抽奖时 获取人机信息串 发送到服务端
this.MemberRafflelottery()
})
},
endCallBack(prize) {
}
}
}
</script>
\
转盘官网:
阿里无痕验证:
\
