main.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. <template>
  2. <view class="container bg-main pos-r">
  3. <view class="padding-xl dflex-c dflex-flow-c">
  4. <!-- Logo -->
  5. <view class="headimg-box margin-top margin-bottom-xl" style="width: 120px; height: 120px;">
  6. <image class="headimg border-radius-c" :src="logo"
  7. style="width: 100%; height: 100%; object-fit: cover;" />
  8. </view>
  9. <!-- 标题 -->
  10. <view class="fs-xl fw-bold margin-bottom-sm">{{name}}</view>
  11. <!-- 简介 -->
  12. <view class="ft-dark margin-bottom-xxl tac">
  13. {{info}}
  14. </view>
  15. <!-- 加载中 -->
  16. <view v-if="loading" class="dflex-c dflex-flow-c margin-top-xl">
  17. <text class="fs ft-dark margin-bottom-sm">亲爱的~欢迎您回来...</text>
  18. <view class="loading-spinner"></view>
  19. </view>
  20. <view v-else class="w-full" style="margin-top:40rpx;">
  21. <view class="dflex margin-bottom">
  22. <view class="iconfont iconmima margin-right"></view>
  23. <view class="dflex flex1 border-line">
  24. <input class="padding-sm flex1" type="text" v-model="code" :focus="true"
  25. placeholder="请输入访问码进入系统" @focus="inputType = 'password'" autocomplete="new-password"
  26. autocorrect="off" spellcheck="false" />
  27. <view class="pos-r" @click="show">
  28. <view class="vertical-line" style="right: calc(100% + 9px);"></view>
  29. <view class="padding-tb-sm ft-dark">不知道?</view>
  30. </view>
  31. </view>
  32. </view>
  33. <!-- 登录按钮 -->
  34. <view class="w-full margin-top-xxl">
  35. <view class="dflex-b border-radius-lg">
  36. <u-button text="进入" type="error" :disabled="loading" :loading="loading" @tap="entry"></u-button>
  37. </view>
  38. </view>
  39. </view>
  40. </view>
  41. </view>
  42. </template>
  43. <script>
  44. import config from '@/lib/dever/config.js'
  45. export default {
  46. data() {
  47. return {
  48. name: '',
  49. place: '',
  50. info: '',
  51. logo: '',
  52. code: '',
  53. jump: '',
  54. loading: false
  55. }
  56. },
  57. onLoad(query) {
  58. if (query.scene) {
  59. let scene = decodeURIComponent(query.scene)
  60. query.code = scene
  61. }
  62. if (query.jump) {
  63. this.jump = query.jump;
  64. }
  65. if (query.code) {
  66. this.code = query.code;
  67. }
  68. this.place = query.p;
  69. },
  70. onShow() {
  71. if (this.code) {
  72. return this.entry()
  73. }
  74. this.init(this.place)
  75. },
  76. methods: {
  77. init(place) {
  78. if (place) {
  79. this.DeverApi.setCode(place);
  80. }
  81. place = this.DeverApi.getCode();
  82. if (place) {
  83. this.loading = true;
  84. this.loadData()
  85. } else {
  86. this.loading = false;
  87. this.DeverApi.get(this, 'version', {}, res => {
  88. this.logo = res.logo
  89. this.name = res.name
  90. this.info = res.info
  91. if (res.code) {
  92. this.code = res.code;
  93. this.entry()
  94. } else if(!this.place && !this.code && config.base.code) {
  95. this.code = config.base.code
  96. this.entry()
  97. }
  98. });
  99. }
  100. },
  101. async loadData() {
  102. this.$config = this.Dever.upConfig(true);
  103. this.$config.then(config => {
  104. this.logo = config.l
  105. this.name = config.n
  106. this.info = config.i
  107. uni.setNavigationBarTitle({
  108. title: this.name
  109. });
  110. if (this.jump) {
  111. this.Dever.data('jump', this.jump);
  112. }
  113. this.Dever.goTabbar(config.m, 0)
  114. });
  115. },
  116. show() {
  117. this.Dever.alert('这个访问码是私密的哦,请先联系您的主理人吧');
  118. },
  119. entry() {
  120. if (!this.code) {
  121. return this.Dever.alert('请输入正确访问码');
  122. }
  123. this.DeverApi.post('code', {
  124. code: this.code
  125. }, res => {
  126. if (res.jump) {
  127. this.jump = res.jump;
  128. }
  129. this.init(res.code)
  130. });
  131. }
  132. }
  133. }
  134. </script>
  135. <style lang="scss">
  136. page {
  137. background: #f4f4f4;
  138. }
  139. .container {
  140. padding-top: 15vh;
  141. width: 100vw;
  142. min-height: 100vh;
  143. overflow: hidden;
  144. }
  145. .headimg-box {
  146. image {
  147. width: 130rpx;
  148. height: 130rpx;
  149. border: 5rpx solid #fff;
  150. }
  151. }
  152. /* 简单 Loading 动画 */
  153. .loading-spinner {
  154. width: 40rpx;
  155. height: 40rpx;
  156. border: 4rpx solid #ccc;
  157. border-top-color: #409eff;
  158. border-radius: 50%;
  159. animation: spin 1s linear infinite;
  160. }
  161. @keyframes spin {
  162. 0% {
  163. transform: rotate(0deg);
  164. }
  165. 100% {
  166. transform: rotate(360deg);
  167. }
  168. }
  169. </style>