QS-input.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. <template>
  2. <view>
  3. <QSInput :name="formName" variableName="tapClear" title="一键清除" required v-model="values.tapClear" :itemDisabled="itemDisabled"></QSInput>
  4. <QSInput layout="column" :name="formName" variableName="password" password title="密码" v-model="values.password" :itemDisabled="itemDisabled"></QSInput>
  5. <QSInput :name="formName" variableName="leftIcon" title="左边自定义图标" leftIcon="chat" v-model="values.leftIcon" :itemDisabled="itemDisabled"></QSInput>
  6. <QSInput :name="formName" variableName="customTapIcon" title="右边点击图标" customTapIcon="scan" v-model="values.customTapIcon" :itemDisabled="itemDisabled"></QSInput>
  7. <QSInput :name="formName" variableName="rightButtonTex" title="右边点击按钮" rightButtonTex="扫码" v-model="values.rightButtonTex"></QSInput>
  8. <QSInput :name="formName" variableName="phoneNum" title="手机号" leftIcon="phone" verifyType="Tel" v-model="values.phoneNum" :itemDisabled="itemDisabled"></QSInput>
  9. <QSInput ref="code" :name="formName" variableName="code" title="验证码" ifCode v-model="values.code" :phoneNum="values.phoneNum" checkPhoneNum @getCode="getCode"></QSInput>
  10. <QSInput :name="formName" variableName="filter" title="限制一位小数" v-model="values.filter" filterType="twoDecimalPlaces" :itemDisabled="itemDisabled"
  11. :phoneNum="values.phoneNum"></QSInput>
  12. <button type="primary" style="margin-top: 50rpx;" @tap="getData">获取输入</button>
  13. <button type="primary" style="margin-top: 50rpx;" @tap="setItemDisabled">禁用input</button>
  14. </view>
  15. </template>
  16. <script>
  17. import QSApp from '@/components/QS-inputs-split/js/app.js';
  18. export default {
  19. data() {
  20. return {
  21. title: 'Hello',
  22. formName: 'input',
  23. values: {
  24. tapClear: '撒浪嘿呦~',
  25. password: '',
  26. leftIcon: '',
  27. customTapIcon: '',
  28. rightButtonTex: '',
  29. phoneNum: '',
  30. code: '',
  31. filter: ''
  32. },
  33. itemDisabled: false,
  34. nCode: ''
  35. }
  36. },
  37. methods: {
  38. getCode() {
  39. this.nCode = QSApp.sendSMS(this.values.phoneNum);
  40. console.log('nCode-Type:' + (typeof this.nCode));
  41. this.$refs.code.startCode();
  42. },
  43. getData() {
  44. if(!this.nCode) {
  45. QSApp.showToast('请先获取验证码');
  46. return;
  47. }
  48. QSApp.getForm(this.formName).then(res => {
  49. console.log('获取输入:' + JSON.stringify(res));
  50. console.log('nCode:' + this.nCode);
  51. console.log('nCode-Type:' + (typeof this.nCode));
  52. console.log('code-Type:' + (typeof res.data.code));
  53. console.log('对比验证码:' + (res.data.code === this.nCode));
  54. if(res.data.code !== this.nCode) {
  55. QSApp.showToast('验证码错误');
  56. return;
  57. }
  58. console.log('获取FORM数据成功: ' + JSON.stringify(res));
  59. QSApp.showToast('获取数据成功', 'success');
  60. this.reSet();
  61. }).catch(err => {
  62. console.log('获取FORM数据失败: ' + JSON.stringify(err));
  63. QSApp.showToast('获取数据异常');
  64. });
  65. },
  66. reSet() {
  67. this.values = {
  68. tapClear: '',
  69. password: '',
  70. leftIcon: '',
  71. customTapIcon: '',
  72. rightButtonTex: '',
  73. phoneNum: '',
  74. code: '',
  75. filter: ''
  76. }
  77. },
  78. go() {
  79. uni.navigateTo({
  80. url: '../test/test'
  81. })
  82. },
  83. setItemDisabled(){
  84. this.itemDisabled = !this.itemDisabled;
  85. }
  86. }
  87. }
  88. </script>
  89. <style>
  90. </style>