request.vue 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. <template>
  2. <view class="container">
  3. <u-navbar :is-fixed="false" :border-bottom="false" :is-back="true" back-icon-name="arrow-leftward"
  4. back-icon-color="#fff" back-icon-size="35" :background="{ background: 'linear-gradient(90deg, #69b0ff, #5f88ff)' }" title="API 请求"
  5. title-color="#fff">
  6. </u-navbar>
  7. <view class="u-demo">
  8. <view class="u-demo-wrap">
  9. <view class="u-demo-title">演示效果</view>
  10. <view class="u-demo-area u-flex u-row-center">
  11. <u-image width="300rpx" height="100rpx" :src="url"></u-image>
  12. </view>
  13. </view>
  14. <view class="u-config-wßrap">
  15. <view class="u-config-title u-border-bottom">参数操作</view>
  16. <view class="u-config-item">
  17. <view class="u-item-title">按钮点击</view>
  18. <u-button @click="doRequest">刷新验证码</u-button>
  19. </view>
  20. </view>
  21. </view>
  22. </view>
  23. </template>
  24. <script>
  25. export default {
  26. data() {
  27. return {
  28. url: ''
  29. };
  30. },
  31. methods: {
  32. doRequest() {
  33. let keyword = "";
  34. // 自动挂载至this.$u.api,无需引入
  35. // captcha 在 /api/demo.js 内定义
  36. this.$u.api.captcha().then(data => {
  37. this.url = data.image;
  38. this.$u.func.showToast({
  39. title: '数据获取成功',
  40. })
  41. }).catch(() => {
  42. })
  43. }
  44. },
  45. }
  46. </script>