index.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
  1. <template>
  2. <view class="container">
  3. <!-- 动画 -->
  4. <uni-transition ref="ani" class="dhbox" custom-class="transition" :mode-class="modeClass" v-if="dhshow" :show="dhshow" :styles="styles">
  5. <img src="https://fuyu.scapp.cn/static/wxa/dh.jpg" class="dhimg">
  6. <view class="to" @click="show">
  7. 跳过
  8. </view>
  9. </uni-transition>
  10. <view v-show="!dhshow">
  11. <view class="page-section page-section-spacing swiper">
  12. <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
  13. <swiper-item v-for="(item, index) in bannerList" :key="index">
  14. <image style="width: 100%; height: 100%;" :src="item"></image>
  15. </swiper-item>
  16. </swiper>
  17. </view>
  18. <uni-notice-bar moreColor="#000" scrollable show-get-more show-icon :text="notice" more-text="更多>>" @getmore="getMore" />
  19. <!-- 党建 -->
  20. <uni-section titleFontSize="16px" class="mb-10 sectionBox" title="党建引领" type="line">
  21. <view class="card" v-for="(item, index) in construct" :key="index" :border="false" @click="illnessBtn(item)">
  22. <image style="width: 50%; height: 55px; margin: 0 auto; display: block;" :src="item.url"></image>
  23. <text class="title">{{ item.title }}</text>
  24. </view>
  25. </uni-section>
  26. <!-- 治理 -->
  27. <uni-section titleFontSize="16px" class="mb-10 sectionBox" title="精细治理" type="line">
  28. <view class="card" v-for="(item, index) in govern" :key="index" :border="false" @click="illnessBtn(item)">
  29. <image style="width: 50%; height: 55px; margin: 0 auto; display: block;" :src="item.url"></image>
  30. <text class="title">{{ item.title }}</text>
  31. </view>
  32. </uni-section>
  33. <!-- 疫情 -->
  34. <uni-section titleFontSize="16px" class="mb-10 sectionBox" title="疫情防控" type="line">
  35. <view class="card" v-for="(item, index) in list" :key="index" :border="false" @click="illnessBtn(item)">
  36. <image style="width: 50%; height: 55px; margin: 0 auto; display: block;" :src="item.url"></image>
  37. <text class="title">{{ item.title }}</text>
  38. </view>
  39. </uni-section>
  40. </view>
  41. </view>
  42. </template>
  43. <script>
  44. import request from '../../api/system.js';
  45. import requestLogin from '../../api/login.js';
  46. const appid = uni.getAccountInfoSync().miniProgram.appId;
  47. export default {
  48. data() {
  49. return {
  50. styles: {
  51. width: '100vw',
  52. height: '100vh',
  53. },
  54. modeClass: ['fade', 'zoom-in'],
  55. dhshow: true,
  56. list: [],
  57. policyList: [],
  58. notice: '通知公告',
  59. autoplay: true,
  60. interval: 3000,
  61. duration: 500,
  62. indicatorDots: false,
  63. bannerList: [],
  64. govern: [],
  65. construct: [],
  66. timeout: null
  67. }
  68. },
  69. async mounted() {
  70. wx.hideTabBar();
  71. this.timeout = setTimeout(() => {
  72. this.show();
  73. }, 3000)
  74. const config = await requestLogin.getJson();
  75. const { list, bannerList, governList, construct } = config.data;
  76. this.list = list;
  77. this.bannerList = bannerList;
  78. this.govern = governList;
  79. this.construct = construct;
  80. const _this = this;
  81. wx.login({
  82. success: async ({ code }) => {
  83. const res = await requestLogin.login({ code, appId: appid });
  84. if (res && res.code == 200) {
  85. uni.setStorageSync('token', res.data.token);
  86. uni.setStorageSync('userinfo', res.data.user);
  87. uni.setStorageSync('role', res.data.role);
  88. const notice = await request.getSystemNoticeNew();
  89. _this.notice = notice.data?.noticeTitle;
  90. }
  91. }
  92. })
  93. },
  94. methods: {
  95. show() {
  96. clearTimeout(this.timeout);
  97. this.dhshow = !this.dhshow;
  98. wx.showTabBar();
  99. },
  100. morBtn() {
  101. uni.switchTab({ url: '/pages/policy/index' });
  102. },
  103. illnessBtn(e) {
  104. const role = uni.getStorageSync('role');
  105. console.log(role, 'role')
  106. if (e.isUser && role && role == 'guest') {
  107. uni.navigateTo({
  108. url: `/pages/register/index?path=${e.path}`
  109. })
  110. return;
  111. }
  112. if (!e.path) {
  113. uni.showToast({
  114. title: '敬请期待',
  115. icon: 'error',
  116. duration: 2000,
  117. });
  118. return;
  119. }
  120. uni.navigateTo({ url: e.path });
  121. },
  122. policyBtn(e) {
  123. uni.navigateTo({ url: e.path });
  124. },
  125. // 查看更多
  126. getMore() {
  127. uni.navigateTo({ url: `/pages/notice/index` });
  128. }
  129. },
  130. onShow:function(){
  131. uni.removeStorageSync('policyItem')
  132. }
  133. }
  134. </script>
  135. <style>
  136. .container {
  137. background: #fff;
  138. }
  139. .swiper {
  140. height: 45vw;
  141. overflow: hidden;
  142. }
  143. .uni-section-content {
  144. display: flex;
  145. flex-wrap: wrap;
  146. }
  147. .card {
  148. margin: 10px;
  149. width: 29%;
  150. margin-right: 1%;
  151. }
  152. .card2 {
  153. width: 29%;
  154. margin-right: 1%;
  155. }
  156. .cover {
  157. display: block;
  158. width: 40px;
  159. height: 40px;
  160. margin: 5px auto;
  161. }
  162. .sectionBox {
  163. margin-bottom: 10px;
  164. display: block;
  165. }
  166. .sectionBox .uni-section-content {
  167. display: flex;
  168. }
  169. .uni-section__content-title {
  170. font-weight: 600;
  171. }
  172. .uni-card {
  173. padding: 0 !important;
  174. margin: 0 !important;
  175. }
  176. .uni-card__content {
  177. /* padding: 0 !important; */
  178. }
  179. h2 {
  180. font-weight: 700;
  181. width: 100%;
  182. text-align: center;
  183. font-size: 16px;
  184. }
  185. .title {
  186. display: block;
  187. margin: 0 auto;
  188. width: 100%;
  189. text-align: center;
  190. font-size: 14px;
  191. }
  192. .cardText {
  193. display: block;
  194. width: 100%;
  195. text-align: center;
  196. font-size: 12px;
  197. margin-bottom: 5px;
  198. color: #999;
  199. }
  200. .dhbox {
  201. position: fixed;
  202. z-index: 999;
  203. width: 100vw;
  204. height: 100vh;
  205. }
  206. .dhimg {
  207. width: 100%;
  208. height: 100%;
  209. display: block;
  210. }
  211. .to {
  212. width: 60px;
  213. height: 20px;
  214. opacity: 0.8;
  215. background-color: #000;
  216. color: #fff;
  217. position: absolute;
  218. top: 10px;
  219. right: 10px;
  220. text-align: center;
  221. border-radius: 12px;
  222. font-size: 12px;
  223. }
  224. </style>