Index.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655
  1. <template>
  2. <view class="container" v-show="isShow">
  3. <image class="bgImg" :src="bgImg"></image>
  4. <view class="headerBox">
  5. <view class="osNavigationBar" :style="{height: statusBarHeight + 'px'}"></view>
  6. <view class="viewTopTitle" :style="{height: navBarHeight + 'px', 'line-height': navBarHeight + 'px'}">
  7. <view class="topTitleBackButton" @tap="onBackTo" :style="{top: (navBarHeight - 20) / 2 + 'px'}">
  8. <image class="topTitleBackButtonImg" src="/static/img/common/back_black.png"></image>
  9. </view>
  10. <text class="topTitleText">积分荣誉榜</text>
  11. </view>
  12. </view>
  13. <view class="contentBox" :style="{height: 'calc(100% - ' + (statusBarHeight + navBarHeight) + 'px)'}">
  14. <view class="numberBox">
  15. <view class="userNumber">{{userPoints}}</view>
  16. <view class="userNumberTips">
  17. <image class="userNumberTipsIcon" src="../static/img/pointsIndex/goldCoin.png"></image>
  18. <text class="userNumberTipsText">当前可用积分</text>
  19. </view>
  20. <view class="numberBtnBox">
  21. <view class="numberBtn" @tap="onDetailTo">积分详情</view>
  22. <view class="numberBtn" @tap="onDescribeTo">积分说明</view>
  23. </view>
  24. </view>
  25. <view class="moduleBox">
  26. <view class="pointShopBox">
  27. <image class="pointShopBG" :src="pointShopBG"></image>
  28. <view class="pointShopBtn" @tap="onTapPointShop">我要兑换</view>
  29. </view>
  30. <view class="noticeBox">
  31. <image class="noticeBG" :src="noticeBG"></image>
  32. <view class="noticeInfoBox">
  33. <view class="noticeInfo">
  34. <view class="noticeInfoTitle">宣传视频</view>
  35. <view class="noticeInfoText">{{noticeInfoText}}</view>
  36. <view class="noticeInfoBtn" @tap="onNoticeTo">点击学习</view>
  37. </view>
  38. <view class="noticeInfoVedioBox">
  39. <video class="noticeInfoVedio" :src="noticeVideoSrc"></video>
  40. </view>
  41. </view>
  42. <text class="unReadCountTips" v-if="noticeUnReadCount">{{noticeUnReadCount}}</text>
  43. </view>
  44. <view class="publicizeBox">
  45. <image class="publicizeBG" :src="publicizeBG"></image>
  46. <view class="publicizeInfoBox" @tap="onPublicizeTo">
  47. <view class="publicizeInfoTitle">通知公告</view>
  48. <view class="publicizeInfo" v-for="(item, index) in publicizeList" @tap.stop="onPublicizeViewTo(item.notificationId)">
  49. <image class="publicizeInfoIcon" src="../static/img/pointsIndex/noticeIcon.png"></image>
  50. <text class="publicizeInfoText">{{item.title}}</text>
  51. <text class="publicizeInfoRight"> > </text>
  52. </view>
  53. <!-- <view class="publicizeInfo">
  54. <image class="publicizeInfoIcon" src="../static/img/pointsIndex/noticeIcon.png"></image>
  55. <text class="publicizeInfoText">积分累计规则变动啦!</text>
  56. <text class="publicizeInfoRight"> > </text>
  57. </view> -->
  58. </view>
  59. <text class="unReadCountTips" v-if="publicizeUnReadCount">{{publicizeUnReadCount}}</text>
  60. </view>
  61. </view>
  62. <view class="pointsRankBox">
  63. <view class="pointsRankTitle">
  64. <image class="pointsRankTitleIcon" src="../static/img/pointsIndex/circle.png"></image>
  65. <text class="pointsRankTitleText">年度排名</text>
  66. <image class="pointsRankTitleIcon" src="../static/img/pointsIndex/circle.png"></image>
  67. </view>
  68. <view class="pointsRankBody">
  69. <view class="rankListHeader">
  70. <text class="rankList_rank">排名</text>
  71. <text class="rankList_tel">联系号码</text>
  72. <text class="rankList_point">累计积分</text>
  73. </view>
  74. <view class="rankList">
  75. <view class="rankListItem" v-if="listData.length > 0" v-for="(item, index) in listData" :class="index == 0 ? 'rankListItem_mine' : ''" >
  76. <image class="rankListItem_rankImg" :src="'../static/img/pointsIndex/rank' + item.rank + '.png'" v-if="[1,2,3].includes(item.rank)"></image>
  77. <text class="rankListItem_rank" v-else>{{item.rank}}</text>
  78. <view class="rankListItem_telBox">
  79. <image class="rankListItem_userImg" :src="item.headUrl" v-if="index == 0" @tap="onSecurityMaxImg(item.isSecurityMax)"></image>
  80. <image class="rankListItem_userImg" :src="item.headUrl" v-else></image>
  81. <text class="rankListItem_tel">{{item.phoneNumber}}</text>
  82. </view>
  83. <text class="rankListItem_point">{{item.points}}</text>
  84. </view>
  85. <view class="noneBox" v-else>
  86. <image class="noneImg" src="../../static/img/home/noneImg.png"></image>
  87. <view class="noneTips">暂无数据</view>
  88. </view>
  89. </view>
  90. </view>
  91. </view>
  92. </view>
  93. <!-- 安全卫士荣誉证书 -->
  94. <view class="popMask" v-if="isPopShow">
  95. <view class="popContent">
  96. <image class="popClose" src="../../static/img/common/close.png" @tap="onSecurityMaxImgCloseTo"></image>
  97. <image class="popImg" :src="certificateBG"></image>
  98. </view>
  99. </view>
  100. </view>
  101. </template>
  102. <script>
  103. var that;
  104. export default {
  105. data() {
  106. return {
  107. isShow: false,
  108. statusBarHeight: 0,
  109. navBarHeight: 0,
  110. bgImg: '../../static/img/home/noneImg.png',
  111. pointShopBG: '/static/logo.png',
  112. noticeBG: '/static/logo.png',
  113. noticeInfoText: '学习安全知识',
  114. noticeUnReadCount: 1,
  115. noticeVideoSrc: 'http://171.94.154.2:50105/hlfs//file/files_indefinitely?id=08dd7e3a-c12b-406a-8bbb-ab9db09f57f2&expires=1744958097&clientid=hotline&signature=BF5AD8DBEF553CDA6FD49AB9FEF1B6900177B1960682E722124EDFB8304556D64CC0040CC8DD796387EF704E8BD673ADE23E4D5CA32498CD',
  116. publicizeBG: '/static/logo.png',
  117. publicizeUnReadCount: 1,
  118. publicizeList: [],
  119. // pointShopBG: '../../static/img/home/noneImg.png',
  120. // noticeBG: '../../static/img/home/noneImg.png',
  121. // publicizeBG: '../../static/img/home/noneImg.png',
  122. userPoints: '0',
  123. listData: [],
  124. isPopShow: false,
  125. certificateBG :'../../static/img/home/noneImg.png'
  126. }
  127. },
  128. onLoad() {
  129. that = this;
  130. that.statusBarHeight = that.$systemInfo.statusBarHeight;
  131. that.navBarHeight = that.$systemInfo.navBarHeight;
  132. that.onGetData(function() {
  133. that.onGetPointData(function() {
  134. that.onGetListData(function() {
  135. that.isShow = true;
  136. });
  137. });
  138. });
  139. },
  140. methods: {
  141. onGetData(fun) {
  142. that.$admin.req({
  143. method: 'GET',
  144. url: '/api/v1/Snapshot/page/setting?PageType=1&Name=Points_Index'
  145. }).then(res => {
  146. if (res && res.length > 0) {
  147. res.forEach(item => {
  148. if (item.tagValue){
  149. that[item.tagName] = that.$admin.config.getfileurl + item.tagValue;
  150. }
  151. })
  152. }
  153. typeof fun === 'function' && fun();
  154. })
  155. },
  156. onGetPointData(fun) {
  157. that.$admin.req({
  158. method: 'GET',
  159. url: '/api/v1/Snapshot/points/total'
  160. }).then(res => {
  161. if (res) {
  162. that.userPoints = res;
  163. }
  164. typeof fun === 'function' && fun();
  165. })
  166. },
  167. onGetListData(fun) {
  168. that.$admin.req({
  169. method: 'GET',
  170. url: '/api/v1/Snapshot/points/rank'
  171. }).then(res => {
  172. that.listData = res.ranks || [];
  173. if (res.videoBulletin){
  174. that.noticeInfoText = res.videoBulletin.title || that.noticeInfoText;
  175. that.noticeUnReadCount = res.videoBulletin.unReadCount || 0;
  176. that.noticeVideoSrc = res.videoBulletin.videoPath ? (that.$admin.config.getfileurl + res.videoBulletin.videoPath) : that.noticeVideoSrc;
  177. console.log(that.noticeVideoSrc)
  178. }
  179. if (res.bulletins){
  180. that.publicizeUnReadCount = res.bulletins.unReadCount || 0;
  181. that.publicizeList = res.bulletins.items;
  182. }
  183. typeof fun === 'function' && fun();
  184. })
  185. },
  186. onDetailTo() {
  187. uni.navigateTo({
  188. url: '/pagesPointsBase/Points/Detail'
  189. })
  190. },
  191. onDescribeTo() {
  192. uni.navigateTo({
  193. url: '/pagesPointsBase/Points/Describe'
  194. })
  195. },
  196. onTapPointShop() {
  197. that.$util.msg("功能即将上线,敬请期待!");
  198. },
  199. onNoticeTo() {
  200. uni.navigateTo({
  201. url: '/pagesPointsBase/Publicize/Index?type=1'
  202. })
  203. },
  204. onPublicizeTo() {
  205. uni.navigateTo({
  206. url: '/pagesPointsBase/Publicize/Index?type=0'
  207. })
  208. },
  209. onPublicizeViewTo(id){
  210. uni.navigateTo({
  211. url: '/pagesPointsBase/Publicize/View?type=0&id=' + encodeURIComponent(id)
  212. })
  213. },
  214. onSecurityMaxImg(isSecurityMax){
  215. if (isSecurityMax){
  216. that.isPopShow = true;
  217. }
  218. },
  219. onSecurityMaxImgCloseTo() {
  220. that.isPopShow = false;
  221. },
  222. // 返回按钮点击事件
  223. onBackTo() {
  224. uni.navigateBack();
  225. },
  226. }
  227. }
  228. </script>
  229. <style lang="less">
  230. .container{
  231. background-color: #f5f5f5;
  232. }
  233. .bgImg {
  234. height: 520rpx;
  235. width: 100%;
  236. position: absolute;
  237. top: 0;
  238. left: 0;
  239. }
  240. .topTitleText {
  241. color: #000;
  242. font-size: 36rpx;
  243. font-weight: bold;
  244. }
  245. .contentBox {
  246. overflow-y: auto;
  247. position: relative;
  248. z-index: 9;
  249. }
  250. .numberBox {
  251. text-align: center;
  252. font-size: 32rpx;
  253. color: #fff;
  254. padding: 50rpx 0 40rpx;
  255. display: flex;
  256. justify-content: center;
  257. flex-wrap: wrap;
  258. }
  259. .userNumber {
  260. width: 100%;
  261. color: #000;
  262. font-size: 64rpx;
  263. font-weight: bold;
  264. vertical-align: text-bottom;
  265. margin-left: 4rpx;
  266. margin-bottom: 20rpx;
  267. }
  268. .userNumberTips {
  269. background-color: #e8ebfc;
  270. border-radius: 50rpx;
  271. text-align: center;
  272. padding: 10rpx 40rpx;
  273. display: flex;
  274. justify-content: space-between;
  275. align-items: center;
  276. }
  277. .userNumberTipsIcon {
  278. width: 40rpx;
  279. height: 40rpx;
  280. margin-right: 20rpx;
  281. }
  282. .userNumberTipsText{
  283. font-weight: bold;
  284. color: #555;
  285. }
  286. .numberBtnBox {
  287. position: absolute;
  288. right: 0;
  289. height: 150rpx;
  290. width: 160rpx;
  291. display: flex;
  292. flex-wrap: wrap;
  293. align-content: space-between;
  294. justify-content: right;
  295. }
  296. .numberBtn{
  297. width: 160rpx;
  298. height: 60rpx;
  299. line-height: 60rpx;
  300. text-align: center;
  301. border-radius: 60rpx 0 0 60rpx;
  302. background: linear-gradient(45deg, #0bbafb, #4285ec);
  303. color: #fff;
  304. }
  305. .moduleBox{
  306. display: flex;
  307. width: calc(100% - 40rpx);
  308. height: 420rpx;
  309. padding: 30rpx 20rpx;
  310. justify-content: space-between;
  311. flex-wrap: wrap;
  312. align-content: space-between;
  313. }
  314. .pointShopBox {
  315. width: 100%;
  316. height: 200rpx;
  317. position: relative;
  318. }
  319. .pointShopBG {
  320. height: 200rpx;
  321. width: 100%;
  322. border-radius: 20rpx;
  323. position: absolute;
  324. top: 0;
  325. left: 0;
  326. }
  327. .pointShopBtn {
  328. background: url(../static/img/pointsIndex/button2.png) no-repeat;
  329. background-size: 100% 100%;
  330. background-attachment: fixed;
  331. color: #fff;
  332. padding: 20rpx 40rpx;
  333. border-radius: 50rpx;
  334. position: absolute;
  335. bottom: 14rpx;
  336. left: 60rpx;
  337. }
  338. .noticeBox {
  339. width: calc(60% - 20rpx);
  340. height: 200rpx;
  341. position: relative;
  342. }
  343. .noticeBG {
  344. height: 200rpx;
  345. width: 100%;
  346. border-radius: 20rpx;
  347. position: absolute;
  348. top: 0;
  349. left: 0;
  350. z-index: -1;
  351. }
  352. .noticeInfoBox {
  353. display: flex;
  354. justify-content: space-evenly;
  355. align-items: center;
  356. width: 100%;
  357. height: 100%;
  358. }
  359. .noticeInfoTitle {
  360. width: 100%;
  361. color: #000;
  362. font-size: 36rpx;
  363. font-weight: bold;
  364. margin-bottom: 20rpx;
  365. text-align: center;
  366. }
  367. .noticeInfoText {
  368. width: 100%;
  369. max-width: 200rpx;
  370. color: #596bbd;
  371. margin-bottom: 20rpx;
  372. text-align: center;
  373. overflow: hidden;
  374. text-overflow: ellipsis;
  375. white-space: nowrap;
  376. }
  377. .noticeInfoBtn {
  378. background: url(../static/img/pointsIndex/button1.png) no-repeat;
  379. background-size: 100% 100%;
  380. background-attachment: fixed;
  381. color: #000;
  382. padding: 10rpx 0;
  383. border-radius: 50rpx;
  384. text-align: center;
  385. }
  386. .noticeInfoVedio {
  387. width: 160rpx;
  388. height: 160rpx;
  389. }
  390. .publicizeBox {
  391. width: 40%;
  392. height: 200rpx;
  393. position: relative;
  394. }
  395. .publicizeBG {
  396. height: 200rpx;
  397. width: 100%;
  398. border-radius: 20rpx;
  399. position: absolute;
  400. top: 0;
  401. left: 0;
  402. z-index: -1;
  403. }
  404. .publicizeInfoBox{
  405. width: calc(100% - 40rpx);
  406. height: 100%;
  407. padding: 0 20rpx;
  408. display: flex;
  409. flex-wrap: wrap;
  410. justify-content: left;
  411. align-content: space-evenly;
  412. }
  413. .publicizeInfoTitle {
  414. width: 100%;
  415. font-size: 36rpx;
  416. font-weight: bold;
  417. }
  418. .publicizeInfo {
  419. width: 100%;
  420. display: flex;
  421. justify-content: space-between;
  422. align-items: center;
  423. }
  424. .publicizeInfoIcon {
  425. width: 40rpx;
  426. height: 40rpx;
  427. margin-right: 10rpx;
  428. }
  429. .publicizeInfoText {
  430. width: calc(100% - 80rpx);
  431. overflow: hidden;
  432. white-space: nowrap;
  433. text-overflow: ellipsis;
  434. color: #333;
  435. }
  436. .publicizeInfoRight {
  437. width: 30rpx;
  438. height: 30rpx;
  439. line-height: 30rpx;
  440. text-align: center;
  441. font-size: 36rpx;
  442. font-weight: bold;
  443. }
  444. .unReadCountTips{
  445. position: absolute;
  446. text-align: center;
  447. top: -10rpx;
  448. right: -10rpx;
  449. width: 40rpx;
  450. height: 40rpx;
  451. line-height: 40rpx;
  452. border-radius: 50%;
  453. background-color: #d9001a;
  454. color: #fff;
  455. }
  456. .pointsRankBox {
  457. background-color: #fff;
  458. margin: 0 20rpx;
  459. border-radius: 30rpx;
  460. }
  461. .pointsRankTitle {
  462. display: flex;
  463. justify-content: center;
  464. align-items: center;
  465. height: 100rpx;
  466. }
  467. .pointsRankTitleIcon {
  468. width: 20rpx;
  469. height: 20rpx;
  470. }
  471. .pointsRankTitleText {
  472. padding: 0 20rpx;
  473. font-size: 40rpx;
  474. font-weight: bold;
  475. color: #478dff;
  476. }
  477. .pointsRankBody {
  478. padding: 0 30rpx 20rpx;
  479. margin-bottom: 20rpx;
  480. }
  481. .rankListHeader {
  482. display: flex;
  483. justify-content: space-between;
  484. font-size: 32rpx;
  485. color: #333;
  486. padding: 20rpx 0 30rpx;
  487. text-align: center;
  488. }
  489. .rankList_rank {
  490. width: 120rpx;
  491. }
  492. .rankList_tel {}
  493. .rankList_point {
  494. }
  495. .rankList {}
  496. .rankListItem {
  497. display: flex;
  498. justify-content: space-between;
  499. align-items: center;
  500. font-size: 32rpx;
  501. font-weight: bold;
  502. text-align: center;
  503. color: #000;
  504. height: 120rpx;
  505. border-bottom: 2rpx #e5ecff solid;
  506. }
  507. .rankListItem_mine {
  508. border-bottom: none;
  509. border: 2rpx #e5ecff solid;
  510. border-radius: 100rpx;
  511. position: relative;
  512. }
  513. .rankListItem_mine::after{
  514. content: "本人";
  515. padding: 10rpx 40rpx;
  516. position: absolute;
  517. top: -10rpx;
  518. right: 0;
  519. background-color: #639dff;
  520. border-radius: 50rpx;
  521. color: #fff;
  522. font-size: 24rpx;
  523. }
  524. .rankListItem_rankImg {
  525. width: 60rpx;
  526. height: 60rpx;
  527. padding: 0 20rpx;
  528. }
  529. .rankListItem_rank {
  530. width: 100rpx;
  531. }
  532. .rankListItem_telBox{
  533. display: flex;
  534. justify-content: center;
  535. align-items: center;
  536. }
  537. .rankListItem_userImg {
  538. width: 80rpx;
  539. height: 80rpx;
  540. margin-right: 20rpx;
  541. }
  542. .rankListItem_tel {}
  543. .rankListItem_point{
  544. width: 120rpx;
  545. color: #fe0000;
  546. }
  547. .noneBox {
  548. background-color: #fff;
  549. border-radius: 50rpx 50rpx 0 0;
  550. padding: 50rpx 20rpx;
  551. text-align: center;
  552. }
  553. .noneImg {
  554. width: 200rpx;
  555. height: 200rpx;
  556. }
  557. .noneTips {
  558. font-size: 26rpx;
  559. color: #aaaaaa;
  560. text-align: center;
  561. margin-top: 10rpx;
  562. }
  563. /* 自定提示弹窗 */
  564. .popMask {
  565. position: fixed;
  566. left: 0;
  567. top: 0;
  568. right: 0;
  569. bottom: 0;
  570. /* #ifndef APP-NVUE */
  571. display: flex;
  572. /* #endif */
  573. justify-content: center;
  574. align-items: center;
  575. background-color: rgba(0, 0, 0, 1);
  576. line-height: 1 !important;
  577. z-index: 99;
  578. }
  579. .popContent {
  580. width: 100%;
  581. height: 70%;
  582. line-height: 1 !important;
  583. position: relative;
  584. }
  585. .popImg {
  586. width: 100%;
  587. height: 100%;
  588. border-radius: 0 0 30rpx 30rpx;
  589. }
  590. .popClose {
  591. width: 40rpx;
  592. height: 40rpx;
  593. position: absolute;
  594. top: -80rpx;
  595. left: 20rpx;
  596. }
  597. </style>