sliderDialog.vue 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. <template>
  2. <view class="slider-check-dialog">
  3. <view class="slider-check-content">
  4. <view>请通过滑块验证</view>
  5. <view id="yzm-slider"></view>
  6. <view @click="AWSC.emitData">关闭1111</view>
  7. </view>
  8. </view>
  9. </template>
  10. <script>
  11. export default {
  12. mounted() {
  13. },
  14. data() {
  15. return {
  16. sliderObj: {
  17. sessionId: '',
  18. sig: '',
  19. token: '',
  20. }
  21. }
  22. },
  23. methods: {
  24. receiveRenderData(data) {
  25. console.log("获得接受")
  26. console.log(data)
  27. this.$emit('emitFun', data)
  28. // this.$emit('success');
  29. // this.sliderClose()
  30. },
  31. sliderShow() {
  32. this.$refs.sliderPopup.open()
  33. },
  34. sliderClose() {
  35. this.$refs.sliderPopup.close()
  36. }
  37. }
  38. }
  39. </script>
  40. <script module="AWSC" lang="renderjs">
  41. export default {
  42. mounted() {
  43. const script = document.createElement('script');
  44. script.src = 'https://g.alicdn.com/AWSC/AWSC/awsc.js';
  45. document.body.appendChild(script);
  46. script.onload = () => {
  47. this.init()
  48. }
  49. },
  50. data() {
  51. return {
  52. sessionId: '',
  53. sig: '',
  54. token: '',
  55. }
  56. },
  57. methods: {
  58. init() {
  59. let that =this
  60. AWSC.use("nc", function(state, module) {
  61. nc = module.init({
  62. // 应用类型标识。它和使用场景标识(scene字段)一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的appkey字段值,请务必正确填写。
  63. appkey: "FFFF0N00000000007EC0",
  64. //使用场景标识。它和应用类型标识(appkey字段)一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的scene值,请务必正确填写。
  65. scene: "nc_message_h5",
  66. // 声明滑动验证需要渲染的目标ID。
  67. renderTo: "yzm-slider",
  68. //前端滑动验证通过时会触发该回调参数。您可以在该回调参数中将会话ID(sessionId)、签名串(sig)、请求唯一标识(token)字段记录下来,随业务请求一同发送至您的服务端调用验签。
  69. success: function(data) {
  70. window.console && console.log(data.sessionId, "111")
  71. window.console && console.log(data.sig, "222")
  72. window.console && console.log(data.token, "3333")
  73. that.getData(data)
  74. },
  75. // 滑动验证失败时触发该回调参数。
  76. fail: function(failCode) {
  77. console.log('失败:' + failCode)
  78. },
  79. // 验证码加载出现异常时触发该回调参数。
  80. error: function(errorCode) {
  81. console.log('异常:' + errorCode)
  82. }
  83. });
  84. })
  85. },
  86. getData(data){
  87. console.log(data)
  88. this.sessionId =data.sessionId
  89. this.sig =data.sig
  90. this.token =data.token
  91. AWSC.emitData;
  92. },
  93. emitData(e, ownerInstance) {
  94. console.log(ownerInstance)
  95. console.log(this.sessionId)
  96. console.log(this)
  97. ownerInstance.callMethod('receiveRenderData', {
  98. sessionId: this.sessionId,
  99. sig: this.sig,
  100. token: this.token
  101. })
  102. }
  103. }
  104. }
  105. </script>