query.vue 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. <template>
  2. <view id="myApp">
  3. <view class="header">
  4. <img src="@/static/img/index-bg.png" >
  5. </view>
  6. <view class="information" v-if="type == 1">
  7. <form name="myform">
  8. <view class="input">
  9. <view class="img">
  10. <img src="@/static/img/icon-2.png" >
  11. </view>
  12. <input type="text" v-model="name" placeholder="请输入会员姓名" />
  13. </view>
  14. <view class="input">
  15. <view class="img">
  16. <img src="@/static/img/icon-1.png" >
  17. </view>
  18. <input type="text" v-model="idcard" placeholder="请输入会员身份证号" />
  19. </view>
  20. <view class="button" @click="submit">
  21. 立即查询
  22. </view>
  23. </form>
  24. </view>
  25. <view class="information" v-else>
  26. <form name="myform">
  27. <view class="input">
  28. <view class="img">
  29. <img src="@/static/img/icon-2.png" >
  30. </view>
  31. <input type="text" v-model="name" placeholder="请输入企业名称" />
  32. </view>
  33. <view class="button" @click="submit">
  34. 立即查询
  35. </view>
  36. </form>
  37. </view>
  38. </view>
  39. </template>
  40. <script>
  41. import { query } from '../../api/apply.js'
  42. export default {
  43. data() {
  44. return {
  45. name: '',
  46. idcard: '',
  47. type: ''
  48. }
  49. },
  50. onLoad(options) {
  51. this.type = options.type
  52. },
  53. methods: {
  54. submit() {
  55. const data = this.type ==1 ? { name: this.name, idcard: this.idcard }: { name: this.name }
  56. query(data,this.type).then(res => {
  57. console.log(res)
  58. }).catch(res => {
  59. console.log(res)
  60. })
  61. }
  62. }
  63. }
  64. </script>
  65. <style>
  66. body {
  67. margin: 0;
  68. background-color: #f3f3f3;
  69. }
  70. .header img{
  71. width: 100%;
  72. }
  73. .information {
  74. padding: 10px 0;
  75. background-color: #fff;
  76. width: 95%;
  77. margin: 15px auto;
  78. border-radius: 10px;
  79. }
  80. .information .input{
  81. padding: 10px;
  82. padding-bottom: 10px;
  83. padding-top: 30px;
  84. margin: auto auto;
  85. text-align: center;
  86. width: 90%;
  87. border-bottom: solid 1px #d8d8d8;
  88. display: flex;
  89. }
  90. .information .input .img{
  91. width: 30px;
  92. margin: auto 0;
  93. margin-right: 5px;
  94. }
  95. .information .input .img img{
  96. height: 20px;
  97. margin: auto 0;
  98. }
  99. .information .input input{
  100. text-align: left;
  101. font-size: 15px;
  102. width: 90%;
  103. border: 0;
  104. height: 20px;
  105. padding-bottom: 0;
  106. }
  107. .button {
  108. margin: 30px auto;
  109. text-align: center;
  110. font-size: 15px;
  111. color: #fff;
  112. background-color: #3b66f5;
  113. border-radius: 30px;
  114. padding: 10px;
  115. width: 70%;
  116. }
  117. </style>