material.vue 24 KB

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