material.vue 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796
  1. <template>
  2. <view class="container Index-container">
  3. <view class="top-content-box">
  4. <search-bar @goSearch="goSearch" :searchTitle="searchPlaceholderList.SummarySearch" :width="70" />
  5. <view class="top-tabs">
  6. <block v-for="item in topTabBars" :key="item.Id">
  7. <view v-if="item.IsShow" :class="['item', item.Id == topTabsActive && 'tabs-active']" @click="topTabsChange(item)">
  8. {{ item.Name }}
  9. <block v-if="(item.Id === 3 || item.Name == '图表') && wholeShowListData.IsShowChart">
  10. <image class="limit-img tabs-img" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/limit_icon.png" mode=""></image>
  11. </block>
  12. <view class="active" v-if="item.Id == topTabsActive"></view>
  13. </view>
  14. </block>
  15. </view>
  16. <view class="tabs-content">
  17. <view class="global_two_tabs" v-if="topTabsActive == '2' || topTabsActive == '3'">
  18. <view :class="['item', item.ChartPermissionId == secondActive && 'tabs-active']" v-for="(item, index) in secondBars" :key="item.ChartPermissionId" @click="handleClickTopSub(item)">
  19. {{ item.PermissionName }}
  20. <block v-if="wholeShowListData.IsShowResearch && index === secondBars.length - 1 && topTabsActive == '2'">
  21. <image class="limit-img tabs-img" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/limit_icon.png" mode=""></image>
  22. </block>
  23. <view class="active" v-if="item.ChartPermissionId == secondActive"></view>
  24. </view>
  25. </view>
  26. <block v-if="topTabsActive == '3'">
  27. <view class="children-ul" v-if="chartChildren.length">
  28. <view :class="['chart-children', chartChildrenActive == item.CtagId ? 'children-active' : '']" v-for="item in chartChildren" :key="item.CtagId" @click="handleChartChildren(item)">{{
  29. item.Name
  30. }}</view>
  31. </view>
  32. </block>
  33. <view v-if="topTabsActive == '4'" class="medium-ul">
  34. <view class="global_two_tabs">
  35. <view @click="mediumClickHandler(item)" :class="['item', item.isSelect && 'tabs-active']" v-for="item in mediumSelect" :key="item.value">
  36. {{ item.name }}
  37. </view>
  38. <!-- 各种状态选择 -->
  39. <view class="select-conyent" ref="select-conyent" style="margin-left: 20rpx">
  40. <van-dropdown-menu active-color="#333333">
  41. <van-dropdown-item id="industry" :title="chartPermissionName">
  42. <view class="menu-items">
  43. <view class="menu-items-box" v-for="item in listChartPermission" :key="item.ChartPermissionId" @click="overallClick(item)">
  44. <view class="items-box">
  45. <u-icon v-if="item.IsChoose" name="checkbox-mark" :color="'#376cbb'" size="24"></u-icon>
  46. </view>
  47. <text>{{ item.PermissionName }}</text>
  48. </view>
  49. </view>
  50. <view class="replacement">
  51. <text @click="replacementBtn" class="replacement-box">重置</text>
  52. <text @click="replacementConfirm">确定</text>
  53. </view>
  54. </van-dropdown-item>
  55. </van-dropdown-menu>
  56. </view>
  57. </view>
  58. </view>
  59. </view>
  60. </view>
  61. <block v-if="haveData">
  62. <view class="content-ul">
  63. <block v-if="topTabsActive == 4">
  64. <view style="width: 49%" v-for="item in roadshowPageList" :key="item.Id">
  65. <RoadshowItem :list="item" @isCollectionHandeler="isCollectionHandeler" />
  66. </view>
  67. </block>
  68. <block v-else>
  69. <view class="report-ul" style="width: 49%">
  70. <block v-for="(item, index) in dataList" :key="index">
  71. <view v-if="index % 2 == 0">
  72. <ChartItem v-if="topTabsActive == 3" :list="item" :isMyChartCollection="isMyChartCollection" @myChartIsTop="myChartIsTop" @myChartCollect="myChartCollect" />
  73. <ReportItem v-if="topTabsActive == 2" :list="item" />
  74. </view>
  75. </block>
  76. </view>
  77. <view class="report-ul" style="width: 49%">
  78. <block v-for="(item, index) in dataList" :key="index">
  79. <view v-if="index % 2 !== 0">
  80. <ChartItem v-if="topTabsActive == 3" :list="item" :isMyChartCollection="isMyChartCollection" @myChartIsTop="myChartIsTop" @myChartCollect="myChartCollect" />
  81. <ReportItem v-if="topTabsActive == 2" :list="item" />
  82. </view>
  83. </block>
  84. </view>
  85. </block>
  86. </view>
  87. <u-loadmore :status="status" icon-type="flower" :load-text="loadText" margin-top="20" v-if="pageNum > 1" />
  88. </block>
  89. <view class="nodata" v-else-if="haveData === false" style="padding-top: 400rpx">
  90. <block class="nodata" v-if="!isBindingMobile && secondActive == 0">
  91. <text>请先绑定联系方式</text>
  92. <view class="bind-mobile" @click="bindingMobile">绑定联系方式</view>
  93. </block>
  94. <block v-else>
  95. <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/act_search.png" mode="" class="nodata_ico"></image>
  96. <text>{{ topTabsActive == 3 && secondActive == 0 ? "暂无收藏的图表" : "暂时没有数据" }}</text>
  97. </block>
  98. </view>
  99. <freeCharge class="free-charge" :isShowFreeBtn="isShowFree" />
  100. <view v-if="showAudioBox">
  101. <audioModule :showAudioPop.sync="showAudioPop" />
  102. </view>
  103. <view class="paly-list-image" v-if="topTabsActive == 4 && playlistData.length > 0" @click="showAudioBoxPlayList">
  104. <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/Joined_play_list.png"></image>
  105. </view>
  106. <Loading />
  107. </view>
  108. </template>
  109. <script>
  110. import { Home, Reports, Chart, activity } from "@/config/api.js";
  111. import { Throttle, deepCopy } from "@/config/util.js";
  112. import freeCharge from "@/components/freeCharge";
  113. import SearchBar from "@/components/search-bar/searchBar.vue";
  114. import audioModule from "@/components/audioModule/index";
  115. import ChartItem from "@/components/ItemComponent/chartItem.vue";
  116. import ReportItem from "@/components/ItemComponent/reportItem.vue";
  117. import RoadshowItem from "@/components/ItemComponent/roadshowItem.vue";
  118. let app = getApp();
  119. export default {
  120. data() {
  121. return {
  122. topTabBars: [],
  123. topTabsActive: 2, //一级top的tabs
  124. secondActive: "", //二级的tabs
  125. secondBars: [], //二级的tabs数组
  126. chartChildren: [], //二级的tabs下的标签
  127. chartChildrenActive: 0,
  128. refresh: false,
  129. pageSize: 10, //条数
  130. pageNum: 1, //页码
  131. haveMore: true, //是否有更多数据
  132. haveData: null, //是否有数据
  133. //数据列表
  134. dataList: [],
  135. status: "loadmore",
  136. loadText: {
  137. loadmore: "上拉加载更多",
  138. loading: "加载中",
  139. nomore: "已经到底了",
  140. },
  141. showTransition: false, //点击绝密后的隐现
  142. isBindingMobile: true, //图表我的收藏是否绑定手机号
  143. videoContext: null,
  144. shareSourceType: "", //通过分享单个音频点进页面时使用
  145. shareSourceId: "", //通过分享单个视频点进页面时使用
  146. roadshowPageList: [], //音频 视频 list
  147. showAudioPop: false,
  148. mediumActive: "",
  149. mediumSelect: [
  150. { name: "路演回放", value: 1, IsChoose: false },
  151. { name: "问答系列", value: 2, IsChoose: false },
  152. { name: "调研反馈", value: 3, IsChoose: false },
  153. ],
  154. listChartPermission: [], // 行业
  155. chartPermissionName: "全行业",
  156. chartPermissionIds: "",
  157. };
  158. },
  159. components: {
  160. freeCharge,
  161. ChartItem,
  162. ReportItem,
  163. RoadshowItem,
  164. SearchBar,
  165. audioModule,
  166. },
  167. watch: {},
  168. onLoad(optios) {
  169. this.getUserSearchContent();
  170. this.getHeaderTab();
  171. if (optios.topTabsActive) {
  172. this.topTabsActive = optios.topTabsActive;
  173. this.secondActive = optios.secondActive;
  174. this.chartChildrenActive = optios.childrenActive;
  175. this.shareSourceType = optios.SourceType;
  176. this.shareSourceId = optios.SourceId;
  177. }
  178. this.getTabs();
  179. this.getReportList();
  180. },
  181. onShow() {
  182. this.getRecordTracking("纪要库");
  183. this.$store.commit("setRouterActivity", "纪要库");
  184. this.$store.commit("setRouterReport", "纪要库");
  185. //进入页面的记录
  186. this.$store.dispatch("statistics", { PageType: "Activit" });
  187. // #ifdef MP-WEIXIN
  188. uni.hideHomeButton();
  189. // #endif
  190. this.$store.commit("audioBg/parseIntAudio", true);
  191. },
  192. computed: {
  193. curVoiceId() {
  194. //当前正在播放的音频id
  195. return this.$store.state.audioBg.indexId;
  196. },
  197. curAudioPaused() {
  198. //当前音频是否暂停状态
  199. return this.$store.state.audioBg.paused;
  200. },
  201. showAudioBox() {
  202. return this.$store.state.audioBg.parseIntShow;
  203. },
  204. isMyChartCollection() {
  205. return this.topTabsActive == "3" && this.secondActive == 0;
  206. },
  207. // 播放列表数据
  208. playlistData() {
  209. return this.$store.state.audioJoinPlaylist.playlist;
  210. },
  211. },
  212. methods: {
  213. //点击顶部一级分类
  214. topTabsChange(item) {
  215. this.topTabsActive = item.Id;
  216. this.chartChildren = [];
  217. this.chartChildrenActive = 0;
  218. this.secondActive = "";
  219. this.pageNum = 1;
  220. this.dataList = [];
  221. this.shareSourceId = "";
  222. this.shareSourceType = "";
  223. uni.pageScrollTo({
  224. scrollTop: 0,
  225. duration: 0,
  226. });
  227. if (this.topTabsActive == "2" || this.topTabsActive == "3") {
  228. this.getTabs();
  229. } else {
  230. this.initData();
  231. }
  232. this.$store.commit("setRouterReport", item.Id === 3 ? "我的收藏" : "纪要库");
  233. },
  234. //点击顶部二级分类
  235. handleClickTopSub(item) {
  236. this.$store.commit("setRouterReport", item.PermissionName === "我的收藏" ? "我的收藏" : "纪要库");
  237. this.secondActive = item.ChartPermissionId;
  238. this.chartChildren = [];
  239. this.chartChildrenActive = 0;
  240. this.childrenChartData();
  241. this.initData();
  242. },
  243. //点击图标的二级分类 处理数据
  244. childrenChartData() {
  245. if (this.topTabsActive == 3 && this.secondActive != 0) {
  246. let arr = [];
  247. this.secondBars &&
  248. this.secondBars.forEach((item) => {
  249. if (this.secondActive == item.ChartPermissionId) {
  250. deepCopy(arr, item.List);
  251. arr.unshift({
  252. CtagId: 0,
  253. Name: "全部",
  254. });
  255. this.chartChildren = arr;
  256. }
  257. });
  258. this.chartChildrenActive > 0 ? "" : (this.chartChildrenActive = 0);
  259. }
  260. },
  261. //点击图标的三级分类
  262. handleChartChildren(item) {
  263. this.chartChildrenActive = item.CtagId;
  264. this.initData();
  265. },
  266. // 点击为路演的筛选
  267. mediumClickHandler(item) {
  268. this.shareSourceType = "";
  269. this.shareSourceId = "";
  270. item.isSelect = !item.isSelect;
  271. let arr = [];
  272. this.mediumSelect.forEach((key) => {
  273. if (key.isSelect) {
  274. arr.push(key.value);
  275. }
  276. });
  277. this.mediumActive = arr.join(",");
  278. this.initData();
  279. },
  280. //点击
  281. initData() {
  282. this.pageNum = 1;
  283. this.dataList = [];
  284. uni.pageScrollTo({
  285. scrollTop: 0,
  286. duration: 0,
  287. });
  288. this.getReportList();
  289. },
  290. /* 获取tab分类 */
  291. getTabs() {
  292. this.secondBars = [];
  293. this.topTabsActive == "2"
  294. ? Home.Tab().then((res) => {
  295. if (res.Ret === 200) {
  296. this.secondBars = res.Data.List;
  297. this.secondActive > 0 ? "" : (this.secondActive = this.secondBars[0].ChartPermissionId);
  298. this.getReportList();
  299. }
  300. })
  301. : this.topTabsActive == "3"
  302. ? Chart.getChartPatg().then((res) => {
  303. if (res.Ret === 200) {
  304. let arr = res.Data;
  305. arr.unshift({
  306. ChartPermissionId: 0,
  307. PermissionName: "我的收藏",
  308. });
  309. this.secondBars = arr;
  310. this.secondActive ? "" : (this.secondActive = 0);
  311. this.secondActive > 0 && this.childrenChartData();
  312. this.getReportList();
  313. }
  314. })
  315. : "";
  316. },
  317. /* 获取列表 */
  318. async getReportList() {
  319. if (this.topTabsActive == "3" && this.secondActive == 0) {
  320. const res = await Chart.getChartcollection({
  321. PageSize: this.pageSize,
  322. CurrentIndex: this.pageNum,
  323. });
  324. if (res.Ret === 200) {
  325. this.status = this.pageNum < res.Data.Paging.Pages ? "loadmore" : "nomore";
  326. this.isBindingMobile = res.Data.IsBindingMobile;
  327. if (this.pageNum === 1) {
  328. this.dataList = res.Data.List || [];
  329. this.haveData = this.dataList.length > 0 ? true : false;
  330. } else {
  331. this.dataList = this.dataList.concat(res.Data.List);
  332. }
  333. }
  334. } else if (this.topTabsActive == 4) {
  335. const res = await Home.microRoadshowList({
  336. PageSize: this.pageSize,
  337. CurrentIndex: this.pageNum,
  338. SourceId: this.shareSourceId,
  339. SourceType: this.shareSourceType,
  340. ChartPermissionIds: this.chartPermissionIds,
  341. SearchType: this.mediumActive,
  342. });
  343. if (res.Ret === 200) {
  344. this.status = this.pageNum < res.Data.Paging.Pages ? "loadmore" : "nomore";
  345. if (this.pageNum == 1) {
  346. this.roadshowPageList = res.Data.List || [];
  347. this.haveData = this.roadshowPageList.length > 0 ? true : false;
  348. if (this.refresh) {
  349. uni.stopPullDownRefresh();
  350. this.refresh = false;
  351. }
  352. } else {
  353. this.roadshowPageList = this.roadshowPageList.concat(res.Data.List);
  354. }
  355. }
  356. } else {
  357. const res = await Home.getList({
  358. PageSize: this.pageSize,
  359. CurrentIndex: this.pageNum,
  360. ChartPermissionId: this.secondActive,
  361. CtagId: this.chartChildrenActive,
  362. ListType: this.topTabsActive,
  363. });
  364. if (res.Ret === 200) {
  365. this.processingData(res);
  366. }
  367. }
  368. },
  369. //处理数据
  370. processingData(res) {
  371. if (!res.Data.HaveResearch) {
  372. this.$util.modalShow("", "您暂无查看买方研选权限", "", () => {
  373. uni.reLaunch({
  374. url: "/pages/index/index",
  375. });
  376. });
  377. }
  378. this.status = this.pageNum < res.Data.Paging.Pages ? "loadmore" : "nomore";
  379. res.Data.List &&
  380. res.Data.List.forEach((item) => {
  381. if (item.BodyHtml) {
  382. item.BodyHtml = item.BodyHtml.replace(/'\'/g, "");
  383. }
  384. });
  385. if (this.topTabsActive == "2") {
  386. if (this.pageNum === 1) {
  387. this.dataList = res.Data.List || [];
  388. this.haveData = this.dataList.length ? true : false;
  389. } else {
  390. this.dataList = this.dataList.concat(res.Data.List);
  391. }
  392. } else {
  393. if (this.pageNum === 1) {
  394. this.haveData = res.Data.List ? true : res.Data.ChartList ? true : false;
  395. }
  396. if (!res.Data.List) {
  397. this.dataList = this.dataList.concat(res.Data.ChartList);
  398. } else if (!res.Data.ChartList) {
  399. this.dataList = this.dataList.concat(res.Data.List);
  400. } else {
  401. this.dataList.push(res.Data.List.shift());
  402. let newArr = [];
  403. let newArrTwo = [];
  404. for (let i = 0; i < res.Data.List.length; i += 2) {
  405. newArr.push(res.Data.List.slice(i, i + 2));
  406. }
  407. for (let i = 0; i < res.Data.ChartList.length; i += 2) {
  408. newArrTwo.push(res.Data.ChartList.slice(i, i + 2));
  409. }
  410. let arr = [];
  411. newArr.forEach((item, index) => {
  412. if (newArrTwo[index]) {
  413. arr.push(newArrTwo[index], item);
  414. } else {
  415. arr.push(item);
  416. }
  417. });
  418. this.dataList = this.dataList.concat(arr.flat(Infinity));
  419. }
  420. }
  421. if (this.refresh) {
  422. uni.stopPullDownRefresh();
  423. this.refresh = false;
  424. }
  425. },
  426. //我的收藏的删除
  427. myChartCollect(id) {
  428. uni.showModal({
  429. content: "确认要将该图表移除我的收藏吗?",
  430. confirmColor: "#376cbb",
  431. cancelColor: "#606266",
  432. success: async (res) => {
  433. if (res.confirm) {
  434. const res = await Chart.myChartCollect({
  435. ChartId: id,
  436. });
  437. if (res.Ret === 200) {
  438. this.initData();
  439. this.$util.toast("已取消收藏");
  440. }
  441. }
  442. },
  443. });
  444. },
  445. //我的收藏 置顶
  446. async myChartIsTop(id) {
  447. const res = await Chart.myChartTop({
  448. ChartId: id,
  449. });
  450. if (res.Ret === 200) {
  451. this.initData();
  452. this.$util.toast(res.Msg);
  453. }
  454. },
  455. /* 搜索 */
  456. goSearch() {
  457. uni.navigateTo({ url: "/pages-search/indedxSearch/indedxSearch?isType=" + this.topTabsActive + "&source=纪要库页面" });
  458. },
  459. /* 绑定联系方式 */
  460. bindingMobile() {
  461. uni.showModal({
  462. title: "即将前往登录页面,请确认是否继续",
  463. content: "为了给您提供更好的使用体验,请登录后再进行查看或操作",
  464. confirmColor: "#376cbb",
  465. cancelColor: "#606266",
  466. success: function (res) {
  467. if (res.confirm) {
  468. //已授权未绑定
  469. uni.navigateTo({
  470. url: "/pageMy/login/login",
  471. });
  472. }
  473. },
  474. });
  475. },
  476. //获取顶部导航
  477. async getHeaderTab() {
  478. const res = await Home.headerTab();
  479. if (res.Ret === 200) {
  480. this.topTabBars = res.Data || [];
  481. }
  482. },
  483. // 微路演收藏
  484. async isCollectionHandeler(item) {
  485. await this.$store.dispatch("showLoginModal");
  486. const res = await Home.microRoadshowCollect({
  487. SourceId: item.SourceId,
  488. SourceType: item.Type,
  489. PageRouter: this.$store.state.pageRouterReport,
  490. });
  491. if (res.Ret === 200) {
  492. let index = this.roadshowPageList.findIndex((key) => key.SourceId == item.SourceId && key.Type == item.Type);
  493. res.Data.Status == 1 ? this.$set(this.roadshowPageList[index], "IsCollect", true) : this.$set(this.roadshowPageList[index], "IsCollect", false);
  494. uni.showToast({
  495. title: res.Msg,
  496. duration: 2000,
  497. });
  498. }
  499. },
  500. // 选择的选中事件
  501. overallClick(item) {
  502. item.IsChoose = !item.IsChoose;
  503. },
  504. // 下拉的选择的重置事件
  505. replacementBtn() {
  506. this.page_no = 1;
  507. this.chartPermissionIds = "";
  508. this.listChartPermission.map((item) => (item.IsChoose = false));
  509. this.chartPermissionName = "全行业";
  510. this.initData();
  511. },
  512. // 下拉选择的确定事件
  513. replacementConfirm() {
  514. this.page_no = 1;
  515. const arr = [];
  516. const str = [];
  517. this.listChartPermission.forEach((key) => {
  518. if (key.IsChoose) {
  519. arr.push(key.ChartPermissionId);
  520. str.push(key.PermissionName);
  521. }
  522. });
  523. if (str.length == this.listChartPermission.length || str.length <= 0) {
  524. this.chartPermissionName = "全行业";
  525. } else {
  526. this.chartPermissionName = str.join(",");
  527. }
  528. this.chartPermissionIds = arr.join(",");
  529. this.initData();
  530. this.selectComponent("#industry").toggle(false);
  531. },
  532. // 获取权限、所有的行业
  533. async getUserSearchContent() {
  534. const res = await Reports.permissionNoyx({});
  535. if (res.Ret === 200) {
  536. this.listChartPermission =
  537. res.Data.List.map((item) => {
  538. return {
  539. ...item,
  540. IsChoose: false,
  541. };
  542. }) || [];
  543. }
  544. },
  545. showAudioBoxPlayList() {
  546. this.$store.commit("audioBg/parseIntAudio", true);
  547. this.showAudioPop = true;
  548. uni.$emit("play-list-emit", {});
  549. },
  550. },
  551. onHide() {
  552. this.$store.commit("audioBg/parseIntAudio", false);
  553. },
  554. mounted() {
  555. uni.$on("updateAudioVideo", (data) => {
  556. this.$store.dispatch("checkHandle", "noGO");
  557. this.getReportList();
  558. });
  559. },
  560. /* 下拉刷新 */
  561. onPullDownRefresh: Throttle(function () {
  562. this.shareSourceId = "";
  563. this.shareSourceType = "";
  564. this.status = "loadmore";
  565. this.refresh = true;
  566. this.dataList = [];
  567. this.pageNum = 1;
  568. this.getReportList();
  569. }),
  570. // 上拉加载
  571. onReachBottom: Throttle(function () {
  572. if (this.status === "nomore") return;
  573. this.status = "loading";
  574. this.pageNum++;
  575. this.getReportList();
  576. }),
  577. /** 用户点击分享*/
  578. onShareAppMessage: function ({ from, target }) {
  579. if (from === "button") {
  580. let item = target.dataset.item;
  581. let title_share = item.AudioTitle || item.Title;
  582. this.getRecordTracking("微路演转发", { SourceId: item.SourceId, SourceType: item.SourceType });
  583. return {
  584. title: title_share,
  585. path: "/pages/material/material?topTabsActive=4" + "&SourceId=" + item.SourceId + "&SourceType=" + item.Type,
  586. imageUrl: item.AudioShareImg || item.ShareImg,
  587. };
  588. } else {
  589. return {
  590. title: this.isHorzMobile ? "好友向您推荐此内容,上传名片享查研观向免费月卡!" : "素材库",
  591. path: "/pages/material/material?topTabsActive=" + this.topTabsActive + "&secondActive=" + this.secondActive + "&childrenActive=" + this.chartChildrenActive,
  592. success: (res) => {},
  593. fail: (err) => {},
  594. };
  595. }
  596. },
  597. };
  598. </script>
  599. <style lang="scss">
  600. .Index-container {
  601. background-color: $uni-bg-color;
  602. font-size: 30rpx;
  603. /deep/ .search-box {
  604. margin-left: 30rpx !important;
  605. }
  606. .content-ul {
  607. display: flex;
  608. flex-wrap: wrap;
  609. justify-content: space-between;
  610. padding: 20rpx 15rpx;
  611. }
  612. .top-content-box {
  613. position: sticky;
  614. top: 0;
  615. left: 0;
  616. width: 100%;
  617. z-index: 9;
  618. .top-tabs {
  619. width: 100%;
  620. display: flex;
  621. align-items: center;
  622. justify-content: space-between;
  623. font-size: 28rpx;
  624. background-color: #fff;
  625. padding: 35rpx 0 10rpx;
  626. &::-webkit-scrollbar {
  627. width: 0;
  628. height: 0;
  629. display: none;
  630. }
  631. .item {
  632. position: relative;
  633. display: flex;
  634. justify-content: center;
  635. padding-bottom: 8rpx;
  636. flex: 1;
  637. flex-shrink: 0;
  638. .limit-img {
  639. position: absolute;
  640. top: -15rpx;
  641. right: 50rpx;
  642. z-index: 99;
  643. }
  644. .active {
  645. position: absolute;
  646. left: 50%;
  647. bottom: 0;
  648. transform: translateX(-50%);
  649. width: 32rpx;
  650. height: 6rpx;
  651. border-radius: 2rpx;
  652. background: $uni-color-new;
  653. }
  654. }
  655. .tabs-active {
  656. color: $uni-color-new;
  657. font-weight: 500;
  658. }
  659. }
  660. }
  661. .tabs-content {
  662. .children-ul {
  663. padding: 20rpx 20rpx 0;
  664. display: flex;
  665. flex-wrap: wrap;
  666. background-color: #fff;
  667. .children-active {
  668. background-color: $uni-color-new;
  669. color: #fff;
  670. }
  671. }
  672. .chart-children {
  673. display: flex;
  674. align-items: center;
  675. height: 52rpx;
  676. padding: 0 30rpx;
  677. margin: 0rpx 20rpx 20rpx 0;
  678. background-color: #f8f8fa;
  679. color: #666666;
  680. font-size: 24rpx;
  681. border-radius: 100rpx;
  682. }
  683. }
  684. .tabs-img {
  685. width: 46rpx;
  686. height: 26rpx;
  687. }
  688. .nodata {
  689. font-size: 40rpx;
  690. .bind-mobile {
  691. width: 244rpx;
  692. height: 58rpx;
  693. background: #376cbb;
  694. border-radius: 8rpx;
  695. font-size: 28rpx;
  696. line-height: 58rpx;
  697. text-align: center;
  698. color: #fff;
  699. margin: 50rpx auto;
  700. }
  701. }
  702. .select-conyent {
  703. .items-box {
  704. width: 40rpx;
  705. }
  706. .menu-items {
  707. background-color: #f8f8fa;
  708. width: 100%;
  709. display: flex;
  710. flex-wrap: wrap;
  711. padding: 30rpx 30rpx 0;
  712. .menu-items-box {
  713. display: flex;
  714. width: 50%;
  715. font-size: 28rpx;
  716. font-weight: 400;
  717. margin-bottom: 40rpx;
  718. }
  719. }
  720. .replacement {
  721. margin: 0rpx 30rpx 20rpx;
  722. display: flex;
  723. background-color: $uni-color-new;
  724. height: 60rpx;
  725. line-height: 58rpx;
  726. font-size: 28rpx;
  727. font-weight: 400;
  728. color: #ffffff;
  729. border-radius: 30rpx;
  730. text {
  731. flex: 1;
  732. text-align: center;
  733. line-height: 60rpx;
  734. }
  735. .replacement-box {
  736. border: 1rpx solid $uni-color-new;
  737. line-height: 58rpx;
  738. color: $uni-color-new;
  739. background: #ffffff;
  740. border-radius: 28rpx 0rpx 28rpx 28rpx;
  741. }
  742. }
  743. }
  744. .paly-list-image {
  745. position: fixed;
  746. right: 50rpx;
  747. bottom: 150rpx;
  748. z-index: 99;
  749. width: 100rpx;
  750. height: 100rpx;
  751. image {
  752. width: 100rpx;
  753. height: 100rpx;
  754. }
  755. }
  756. /deep/.van-dropdown-menu {
  757. background-color: #fff;
  758. box-shadow: none !important;
  759. display: flex;
  760. align-items: center;
  761. }
  762. /deep/.van-dropdown-menu__item {
  763. box-sizing: border-box;
  764. width: 160rpx;
  765. // margin-right: 20rpx;
  766. padding-right: 20rpx;
  767. height: 51rpx;
  768. border-radius: 26rpx;
  769. background: #f8f8fa;
  770. }
  771. /deep/.van-dropdown-item {
  772. margin-top: -10rpx;
  773. }
  774. /deep/[data-index="2"] {
  775. margin-right: 0rpx;
  776. }
  777. /deep/ .van-ellipsis {
  778. font-size: 24rpx;
  779. }
  780. }
  781. </style>