actFissionList.html 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  6. <meta name="description" content="活动">
  7. <title></title>
  8. <link rel="icon" href="../static/img/favicon2.ico" type="img/x-ico">
  9. <link rel="stylesheet" href="../static/css/index.css?v=1.0.0.6">
  10. <link rel="stylesheet" href="../static/css/vant.css" />
  11. <script src="../static/js/vender/vue/vue.min.js"></script>
  12. <script src="../static/js/vender/vue/vant.min.js"></script>
  13. <script src="../static/js/vender/config.js"></script>
  14. <style>
  15. .header{
  16. display: flex;
  17. height: 0.88rem;
  18. align-items: center;
  19. box-shadow: 0 0.01rem 0.14rem 0 rgba(184, 184, 184, 0.47);
  20. }
  21. .page-title{
  22. flex: 1;
  23. text-align: center;
  24. font-size: 0.36rem;
  25. color: #333333;
  26. }
  27. .back{
  28. width: 0.2rem;
  29. height: 0.34rem;
  30. margin-left: 0.2rem;
  31. }
  32. .item{
  33. display: flex;
  34. align-items: center;
  35. margin: 0.32rem 0 0 0.58rem;
  36. }
  37. .right{
  38. flex: 1;
  39. margin-left: 0.43rem;
  40. }
  41. .icon{
  42. width: 1.8rem;
  43. height: 1.36rem;
  44. }
  45. .titles{
  46. font-size: 0.3rem;
  47. color: #333333;
  48. }
  49. .contents{
  50. margin-top: 0.2rem;
  51. font-size: 0.24rem;
  52. color: #999999;
  53. text-overflow: -o-ellipsis-lastline;
  54. overflow: hidden;
  55. text-overflow: ellipsis;
  56. display: -webkit-box;
  57. -webkit-line-clamp: 2;
  58. line-clamp: 2;
  59. -webkit-box-orient: vertical;
  60. }
  61. .no-content{
  62. width: 3.74rem;
  63. height: 3.14rem;
  64. position: fixed;
  65. top: 50%;
  66. left: 50%;
  67. transform: translate(-50%,-50%);
  68. }
  69. </style>
  70. </head>
  71. <body>
  72. <div id="app" v-cloak class="app container">
  73. <div v-for="(item,index) in tagList" :key="index" class="item" @click="toDetail(item)">
  74. <img :src="fileCenterApi + `/file-center/fileOperate/getImage?id=${item.fileId}`" class="icon" alt="">
  75. <div class="right">
  76. <div class="titles">{{item.strategyTitle}}</div>
  77. <div class="contents">{{getContent(index,item.content)}}</div>
  78. </div>
  79. </div>
  80. <img v-if="noData" src="../static/offImg/no-content.png" class="no-content" alt="" />
  81. </div>
  82. <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
  83. <script src="../static/js/vender/vue/axios.min.js"></script>
  84. <script src="../static/js/vender/vue/config.js"></script>
  85. <script src="../static/js/vender/vue/api.js"></script>
  86. <script type="text/javascript">
  87. var u = navigator.userAgent,
  88. app = navigator.appVersion;
  89. var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
  90. var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
  91. new Vue({
  92. el: '#app',
  93. data: {
  94. noData: true,
  95. title: '',
  96. tagList: []
  97. },
  98. mounted() {
  99. let dom = document.getElementsByTagName('title')[0];
  100. this.title = decodeURIComponent(GetRequest().title);
  101. dom.innerText = this.title;
  102. setTimeout(() => {
  103. this.getQueryByTag();//获取标签列表
  104. })
  105. },
  106. methods: {
  107. getQueryByTag(){
  108. this.$toast.loading({
  109. duration: 0,
  110. message: '加载中...',
  111. forbidClick: true,
  112. loadingType: 'spinner',
  113. });
  114. // 获取标签列表
  115. getQueryByTag(GetRequest().token, {
  116. tagId: +GetRequest().id,
  117. pageNum: 1,
  118. pageSize: 10
  119. }).then(res => {
  120. this.$toast.clear();
  121. if (res.status === 0) {
  122. this.noData = false;
  123. this.tagList = res.data.actFissionStrategyList;
  124. } else {
  125. this.noData = true;
  126. // this.$toast(res.msg);
  127. }
  128. })
  129. },
  130. getContent(index, content){
  131. this.$nextTick(() => {
  132. let dom = document.getElementsByClassName('contents')[index];
  133. console.log(dom)
  134. if(dom){
  135. dom.innerHTML = content;
  136. }
  137. })
  138. },
  139. back(){
  140. location.href = `./actFission.html?token=${GetRequest().token}`;
  141. },
  142. toDetail(item){
  143. location.href = `./actFissionShare.html?strategyId=${item.id}&type=1&token=${GetRequest().token}`;
  144. },
  145. stopManyClick(fn) { //防抖
  146. if (this.flag) {
  147. fn();
  148. }
  149. this.flag = false;
  150. if (this.timer) {
  151. clearTimeout(this.timer);
  152. }
  153. this.timer = setTimeout(() => {
  154. this.flag = true
  155. }, 1500);
  156. },
  157. }
  158. })
  159. </script>
  160. </body>
  161. </html>