about.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. <template>
  2. <view class="aboutUsBox">
  3. <view class="aboutUsContent">
  4. <view class="header text-center">
  5. <view class="">
  6. <image src="/static/index/logo.jpeg" mode="widthFix"></image>
  7. </view>
  8. <text style="font-size: 36rpx;margin-top: 15rpx;display: inline-block;">Version3.0</text>
  9. </view>
  10. <view class="">
  11. <view class="tab" @click="gotoinfo">
  12. <text>关于聚联诚集团</text>
  13. <text style="color: rgb(241,197,84);font-size: 40rpx;">></text>
  14. </view>
  15. <view v-if="user.id" class="tab" @click="modalName = 'WxHCModal' ">
  16. <text>退出登录</text>
  17. <text style="color: rgb(241,197,84);font-size: 40rpx;">></text>
  18. </view>
  19. </view>
  20. </view>
  21. <view class="aboutUsBottom">
  22. <view class="aboutUsNav">
  23. <navigator open-type="navigate" url="/pages/mine/aboutUsService" class="bottomNotice">服务协议</navigator>
  24. <text style="margin: 0 10rpx;">|</text>
  25. <navigator open-type="navigate" url="/pages/mine/aboutUsprivacy" class="bottomNotice">隐私政策</navigator>
  26. </view>
  27. <view class="aboutUsCopy">
  28. <view>Copyright @ 2011-2020 JULIANCHENG CREDIT</view>
  29. <view>ALL Rights Reserved</view>
  30. </view>
  31. </view>
  32. <!-- 清除微信缓存弹窗框 -->
  33. <view class="cu-modal" :class="modalName == 'WxHCModal' ? 'show' : ''">
  34. <view class="cu-dialog">
  35. <view class="cu-bar bg-white justify-end">
  36. <view class="content">温馨提示</view>
  37. <view class="action" @tap="modalName = ''">
  38. <text class="cuIcon-close yellow" />
  39. </view>
  40. </view>
  41. <view class="padding-xl">
  42. <view class="top-title" style="border-bottom: 1px solid #d8d8d8;padding:2vw;">
  43. <text class="margin-top-xs text-gray">退出登录后,您将无法第一时间查看聚联诚品牌中心为你提供的最新、最全的征信评估信息。</text>
  44. </view>
  45. <view class="flex justify-around" style="margin-top:5vw">
  46. <button type="primary" @tap="modalName = ''" class="cu-btn round greyBg">暂不退出</button>
  47. <button type="primary" @click="clearCache" class="cu-btn round yellowBg" hover-class="btn-hover">立刻退出</button>
  48. </view>
  49. </view>
  50. </view>
  51. </view>
  52. </view>
  53. </template>
  54. <script>
  55. import {
  56. mapState,
  57. mapMutations,
  58. mapGetters,
  59. mapActions
  60. } from 'vuex';
  61. export default {
  62. data() {
  63. return {
  64. modalName: null, //公告框状态
  65. }
  66. },
  67. computed: {
  68. ...mapState(['user']),
  69. },
  70. onShow() {
  71. this.getUser(true);
  72. },
  73. methods: {
  74. ...mapActions({
  75. getUser: 'getUser' // 将 `this.getUser()` 映射为 `this.$store.dispatch('getUser')`
  76. }),
  77. ...mapMutations(['logout', 'setUser']),
  78. // 清除缓存
  79. clearCache: function() {
  80. let that = this
  81. uni.showLoading({
  82. title: '清除中...'
  83. });
  84. setTimeout(function() {
  85. that.logout()
  86. uni.clearStorage()
  87. uni.hideLoading()
  88. uni.switchTab({
  89. url: "./mine"
  90. })
  91. }, 2000);
  92. },
  93. gotoinfo() {
  94. uni.navigateTo({
  95. url: "./aboutUs"
  96. })
  97. },
  98. }
  99. }
  100. </script>
  101. <style>
  102. .tab {
  103. border-bottom: 1px solid #eee;
  104. height: 130rpx;
  105. font-size: 32rpx;
  106. font-family: PingFangSC-Regular, sans-serif;
  107. color: #555864;
  108. padding-left: 60rpx;
  109. display: flex;
  110. justify-content: space-between;
  111. align-items: center;
  112. padding-right: 60rpx;
  113. }
  114. /* 头部 logo */
  115. .header {
  116. margin-top: 200rpx;
  117. margin-bottom: 72rpx;
  118. margin-left: auto;
  119. margin-right: auto;
  120. }
  121. .header image {
  122. width: 404rpx;
  123. height: 156rpx;
  124. }
  125. .aboutUsBox {
  126. padding: 10rpx 30rpx 0 30rpx;
  127. /* background-color: #f9f9f9; */
  128. width: 100vw;
  129. height: 100vh;
  130. color: #AAAAAA;
  131. }
  132. .aboutUsTitle {
  133. text-align: center;
  134. font-size: 30rpx;
  135. border-bottom: 1rpx solid #000;
  136. }
  137. .aboutUsContent {
  138. height: 90vh;
  139. overflow: auto;
  140. }
  141. .aboutUsBottom {
  142. width: 100%;
  143. position: fixed;
  144. bottom: 0;
  145. left: 0;
  146. }
  147. .aboutUsNav {
  148. display: flex;
  149. align-items: center;
  150. justify-content: center;
  151. }
  152. .aboutUsCopy {
  153. margin: 0 auto;
  154. padding-bottom: 30rpx;
  155. width: 500rpx;
  156. font-size: 20rpx;
  157. text-align: center;
  158. }
  159. .bottomNotice {
  160. color: #3180D5;
  161. }
  162. .yellowBg {
  163. background: #f5cc57 !important;
  164. }
  165. .greyBg {
  166. background: grey !important;
  167. }
  168. </style>