index.vue 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274
  1. <template>
  2. <view class="container New-container">
  3. <view class="top-content-box">
  4. <view class="nav-bar-wrap" :style="{ height: navBarStyle.height, paddingTop: navBarStyle.paddingTop, paddingBottom: navBarStyle.paddingBottom }">
  5. <view class="box-img" @click="goMyInfo">
  6. <image v-if="info.Headimgurl" :src="info.Headimgurl" alt=""></image>
  7. <image v-else src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/logo.png" class="avatar"></image>
  8. </view>
  9. <view class="content" @click="goSearch">
  10. <icon type="search" size="15" class="search_ico" />
  11. <text class="sea_ipt">{{ searchPlaceholderList.SummarySearch || "" }}</text>
  12. </view>
  13. </view>
  14. </view>
  15. <view class="content-ul">
  16. <view class="item-ul">
  17. <block v-for="(item, index) in newDataList" :key="index">
  18. <view v-if="index % 2 == 0">
  19. <block v-if="item.Source === 'article'"> <ReportItem :list="item.Article" /></block>
  20. <block v-if="item.Source === 'newchart'">
  21. <ChartItem :list="item.Newchart" :isMyChartCollection="isMyChartCollection" @myChartIsTop="myChartIsTop" @myChartCollect="myChartCollect" />
  22. </block>
  23. <block v-if="item.Source === 'roadshow' || item.Source === 'activityvideo' || item.Source === 'activityvoice'">
  24. <RoadshowItem :list="item.Roadshow" @isCollectionHandeler="isCollectionHandeler" />
  25. </block>
  26. <block v-if="item.Source === 'activity' || item.Source === 'activityspecial'">
  27. <ActivityItem :list="item.Activity" />
  28. </block>
  29. </view>
  30. </block>
  31. </view>
  32. <view class="item-ul">
  33. <block v-for="(item, index) in newDataList" :key="index">
  34. <view v-if="index % 2 !== 0">
  35. <block v-if="item.Source === 'article'"> <ReportItem :list="item.Article" /></block>
  36. <block v-if="item.Source === 'newchart'">
  37. <ChartItem :list="item.Newchart" :isMyChartCollection="isMyChartCollection" @myChartIsTop="myChartIsTop" @myChartCollect="myChartCollect" />
  38. </block>
  39. <block v-if="item.Source === 'roadshow' || item.Source === 'activityvideo' || item.Source === 'activityvoice'">
  40. <RoadshowItem :list="item.Roadshow" @isCollectionHandeler="isCollectionHandeler" />
  41. </block>
  42. <block v-if="item.Source === 'activity' || item.Source === 'activityspecial'">
  43. <ActivityItem :list="item.Activity" />
  44. </block>
  45. </view>
  46. </block>
  47. </view>
  48. </view>
  49. <u-loadmore :status="status" icon-type="flower" :load-text="loadText" margin-top="20" v-if="page_no > 1" />
  50. <view v-if="newDataList.length === 4" class="bind-btn" @click="goLogin">绑定联系方式后查看更多内容>></view>
  51. </view>
  52. </template>
  53. <script>
  54. import { Home, Mine } from "@/config/api";
  55. import ChartItem from "@/components/ItemComponent/chartItem.vue";
  56. import ReportItem from "@/components/ItemComponent/reportItem.vue";
  57. import RoadshowItem from "@/components/ItemComponent/roadshowItem.vue";
  58. import ActivityItem from "@/components/ItemComponent/activityItem.vue";
  59. export default {
  60. data() {
  61. return {
  62. newDataList: [],
  63. page_no: 1,
  64. pageSize: 10,
  65. status: "loadmore",
  66. refresh: false, //正在下拉
  67. loadText: {
  68. loadmore: "上拉加载更多",
  69. loading: "加载中",
  70. nomore: "已经到底了",
  71. },
  72. info: {},
  73. };
  74. },
  75. components: {
  76. ChartItem,
  77. ReportItem,
  78. RoadshowItem,
  79. ActivityItem,
  80. },
  81. methods: {
  82. //获取胶囊位置
  83. initNavBar() {
  84. let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
  85. this.navBarStyle = {
  86. height: menuButtonInfo.height + menuButtonInfo.top + 8 + "px",
  87. paddingTop: menuButtonInfo.top - 4 + "px",
  88. paddingBottom: "4px",
  89. };
  90. },
  91. // 获取最先数据
  92. async getNewList() {
  93. const res = await Home.getNewList({
  94. PageSize: this.pageSize,
  95. CurrentIndex: this.page_no,
  96. });
  97. if (res.Ret === 200) {
  98. this.status = !res.Data.Paging.IsEnd ? "loadmore" : "nomore";
  99. let listArr = [];
  100. res.Data.List &&
  101. res.Data.List.forEach((item) => {
  102. listArr.push({
  103. Source: item.Source,
  104. Article: item.Article,
  105. Newchart: item.Newchart,
  106. Activity: item.Activity || item.Activityspecial,
  107. Roadshow: item.Roadshow || item.Activityvideo || item.Activityvoice,
  108. });
  109. });
  110. this.newDataList = this.page_no === 1 ? listArr : [...this.newDataList, ...listArr];
  111. if (this.refresh) {
  112. uni.stopPullDownRefresh();
  113. this.refresh = false;
  114. }
  115. }
  116. },
  117. // 微路演收藏
  118. async isCollectionHandeler(item) {
  119. const res = await Home.microRoadshowCollect({
  120. Id: item.Id,
  121. SourceType: item.Type,
  122. });
  123. if (res.Ret === 200) {
  124. let index = this.newDataList.findIndex((key) => key.Roadshow && key.Roadshow.Id == item.Id);
  125. res.Data.Status == 1 ? (this.newDataList[index].Roadshow.IsCollect = true) : (this.newDataList[index].Roadshow.IsCollect = false);
  126. uni.showToast({
  127. title: res.Msg,
  128. duration: 2000,
  129. });
  130. }
  131. },
  132. // 跳转到我的页面
  133. goMyInfo() {
  134. uni.navigateTo({
  135. url: "/pageMy/myPage/myPage",
  136. });
  137. },
  138. // 跳转绑定页面
  139. goLogin() {
  140. uni.navigateTo({
  141. url: "/pageMy/login/login",
  142. });
  143. },
  144. /* 搜索 */
  145. goSearch() {
  146. this.$store.dispatch("checkHandle", "/pages-search/indedxSearch/indedxSearch?isType=" + this.topTabsActive);
  147. },
  148. async getUserInfo() {
  149. const res = await Mine.getInfo();
  150. if (res.Ret === 200) {
  151. this.info = res.Data;
  152. }
  153. },
  154. },
  155. mounted() {
  156. uni.$on("updateNewList", (data) => {
  157. this.getNewList();
  158. });
  159. },
  160. onLoad() {
  161. this.$store.commit("setRouterActivity", "首页");
  162. this.$store.commit("setRouterReport", "首页");
  163. this.getUserInfo();
  164. this.initNavBar();
  165. this.getNewList();
  166. },
  167. // 加载数据
  168. onReachBottom() {
  169. if (this.status === "nomore" || this.newDataList.length < 8) return;
  170. this.status = "loading";
  171. this.page_no++;
  172. this.getNewList();
  173. },
  174. // 下拉刷新
  175. onPullDownRefresh() {
  176. this.page_no = 1;
  177. this.refresh = true;
  178. this.getNewList();
  179. },
  180. /** 用户点击分享*/
  181. onShareAppMessage: function ({ from, target }) {
  182. if (from === "button") {
  183. let item = target.dataset.item;
  184. let audio_id = item.Type == 1 || item.AudioType == 1 ? item.Id : "";
  185. // type=2 -- 活动视频 type=3 -- 产业视频
  186. let video_id = item.Type == 2 || item.Type == 3 ? item.Id : "";
  187. let activity_id = item.Type == 2 && item.ActivityId > 0 ? item.ActivityId : "";
  188. let title_share = item.AudioTitle || item.Title;
  189. return {
  190. title: this.isHorzMobile ? "好友向您推荐此内容,上传名片享查研观向免费月卡!" : title_share,
  191. path: "/pages/material/material?topTabsActive=4" + "&audioShareId=" + audio_id + "&videoShareId=" + video_id + "&activityId=" + activity_id,
  192. imageUrl: item.AudioShareImg || item.ShareImg,
  193. };
  194. } else {
  195. return {
  196. title: this.isHorzMobile ? "好友向您推荐此内容,上传名片享查研观向免费月卡!" : "您手边的弘则研究素材检索库",
  197. path: "/pages/index/index",
  198. imageUrl: "https://hzstatic.hzinsights.com/cygx/czbk/home_share.png",
  199. success: (res) => {},
  200. fail: (err) => {},
  201. };
  202. }
  203. },
  204. };
  205. </script>
  206. <style lang="scss" scoped>
  207. .New-container {
  208. background-color: #f5f6fa;
  209. .top-content-box {
  210. position: sticky;
  211. top: 0;
  212. left: 0;
  213. width: 100%;
  214. z-index: 9;
  215. }
  216. .nav-bar-wrap {
  217. background-color: #fff;
  218. width: 100%;
  219. padding-left: 35rpx;
  220. display: flex;
  221. align-items: center;
  222. .content {
  223. position: relative;
  224. display: flex;
  225. align-items: center;
  226. width: 55%;
  227. height: 63rpx;
  228. font-size: 30rpx;
  229. color: #8d8d8d;
  230. background-color: #f3f3f3;
  231. padding-left: 33rpx;
  232. border-radius: 70rpx;
  233. .sea_ipt {
  234. padding-left: 15rpx;
  235. }
  236. }
  237. .box-img {
  238. display: flex;
  239. align-items: center;
  240. justify-content: center;
  241. width: 64rpx;
  242. height: 64rpx;
  243. margin-right: 20rpx;
  244. border-radius: 50%;
  245. overflow: hidden;
  246. image {
  247. width: 100%;
  248. height: 100%;
  249. }
  250. }
  251. }
  252. .content-ul {
  253. padding: 30rpx 10rpx;
  254. display: flex;
  255. justify-content: space-between;
  256. .item-ul {
  257. width: 49%;
  258. &:first-child {
  259. margin-right: 10rpx;
  260. }
  261. }
  262. }
  263. .bind-btn {
  264. padding-top: 110rpx;
  265. text-align: center;
  266. font-size: 24rpx;
  267. color: #3385ff;
  268. line-height: 23rpx;
  269. padding-bottom: 100rpx;
  270. }
  271. }
  272. </style>