AI销管
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

learning.vue 16 KiB

2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
2年前
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674
  1. <template>
  2. <view class="main">
  3. <!-- 头部导航 -->
  4. <view class="tab-box">
  5. <u-tabs class="tab-box-utabs" bar-width="120" bar-height="4" :list="tablist" :is-scroll="false"
  6. :current="activeClass" @change="clocktab"></u-tabs>
  7. </view>
  8. <!-- 内容部分 :style="[otherHeight]" -->
  9. <view class="container">
  10. <template v-if="activeClass==0">
  11. <view class="cented">
  12. <block v-for="(item,index) in alllist" :key="index">
  13. <view class="ceninfo" @click="quclick(item)">
  14. <view class="infoview">
  15. <view class="infozuo">
  16. <view class="infozuochiud2">顾</view>
  17. <view class="infozuochiud1">{{item.jbaName}}</view>
  18. </view>
  19. <view class="infoyou">
  20. <view class="infoyouchiud2">{{ item.studyStatus }}</view>
  21. </view>
  22. </view>
  23. <view class="footerinfo">
  24. <view class="footerinfozuo">
  25. <image src="../../static/images/img/time.png" mode=""></image>
  26. {{item.assignedTime}}
  27. </view>
  28. <view class="footerinfozuo">
  29. <image src="../../static/images/img/voice.png" mode=""></image>
  30. {{ item.duration | formatTime }}min
  31. </view>
  32. <view class="footerinfozuo" style="color: #2671E2;">
  33. <image src="../../static/images/img/percent.png" mode=""></image>
  34. {{ item.fraction || 0 }}%
  35. </view>
  36. </view>
  37. <!-- 底部按钮组 -->
  38. <view class="footicon">
  39. <view class="icon">
  40. <image class="Piabodata-img1" src="../../static/images/img/view.png" mode="">
  41. </image>
  42. <!-- 浏览量 -->
  43. {{ item.pageviews || 0 }}
  44. </view>
  45. <view class="icon">
  46. <image class="Piabodata-img1" src="../../static/images/img/message.png" mode="">
  47. </image>
  48. <!-- 热度 -->
  49. {{ item.commentCount || 0 }}
  50. </view>
  51. <view class="icon">
  52. <image class="Piabodata-img1" src="../../static/images/img/hand.png" mode="">
  53. </image>
  54. <!-- 点赞数 -->
  55. {{ item.likeCount || 0 }}
  56. </view>
  57. </view>
  58. </view>
  59. </block>
  60. </view>
  61. </template>
  62. <template v-if="activeClass==1">
  63. <view class="biaoqianview">
  64. <scroll-view scroll-y="true" class="boxintention">
  65. <block v-for="(item,index) in equinoctial" :key="index">
  66. <view class="boxcenten" :class="{act: index == leftIndex}"
  67. @click="routerclick(item, index)">
  68. <view class="boxcenteninfotext">{{item.name}}</view>
  69. </view>
  70. </block>
  71. </scroll-view>
  72. <scroll-view scroll-y="true" class="rside-scroll">
  73. <view class="rside-box">
  74. <block v-for="(item,index) in alllists" :key="index">
  75. <view class="ceninfo" @click="quclicks(item)">
  76. <view class="infoview">
  77. <view class="infozuo">
  78. <view class="infozuochiud2">顾</view>
  79. <view class="infozuochiud1">{{item.jbaName}}</view>
  80. </view>
  81. <view class="infoyou">
  82. <view class="infoyouchiud2">{{item.studyStatus}}</view>
  83. </view>
  84. </view>
  85. <view class="footerinfo">
  86. <view class="footerinfozuo">
  87. <image src="../../static/images/img/time.png" mode=""></image>
  88. {{item.assignedTime}}
  89. </view>
  90. </view>
  91. <!-- 底部按钮组 -->
  92. <view class="footicon">
  93. <view class="icon">
  94. <image class="Piabodata-img1" src="../../static/images/img/view.png"
  95. mode=""></image>
  96. <!-- 浏览量 -->
  97. {{item.pageviews || 0 }}
  98. </view>
  99. <view class="icon">
  100. <image class="Piabodata-img1" src="../../static/images/img/message.png"
  101. mode=""></image>
  102. <!-- 热度 -->
  103. {{item.commentCount || 0 }}
  104. </view>
  105. <view class="icon">
  106. <image class="Piabodata-img1" src="../../static/images/img/hand.png"
  107. mode=""></image>
  108. <!-- 点赞数 -->
  109. {{item.likeCount || 0 }}
  110. </view>
  111. </view>
  112. </view>
  113. </block>
  114. </view>
  115. </scroll-view>
  116. </view>
  117. </template>
  118. </view>
  119. <!-- 底部导航栏 -->
  120. <!-- <u-tabbar :isBtnTop="false" class="tabbar" :mid-button="true" activeColor="#1296db" inactiveColor="#999999"
  121. v-model="current" :list="tabbarList"></u-tabbar> -->
  122. </view>
  123. </template>
  124. <script>
  125. var config = require("../../config");
  126. var util = require("@/utils/util.js");
  127. import tabbarList from '@/utils/tabbar.js'
  128. export default {
  129. data() {
  130. return {
  131. // tabbar配置项
  132. current: 3,
  133. tabbarList: tabbarList,
  134. //--- end --- tabbar配置项
  135. tablist: [{
  136. name: "优秀案例"
  137. },
  138. {
  139. name: "维度精选"
  140. }
  141. ],
  142. activeClass: 0,
  143. equinoctial: [],
  144. alllist: [], // 一级分类菜单
  145. buildingID: '',
  146. leftIndex: 0, // 左侧滚动区域选中下标
  147. alllists: [], // 二级分类菜单
  148. };
  149. },
  150. computed: {
  151. bgAudioMannager() {
  152. console.log(this.$store.state.bgAudioMannager)
  153. }
  154. },
  155. onPullDownRefresh() {
  156. var i = uni.getStorageSync('fendianindex')
  157. this.buildingID = uni.getStorageSync('buildingID').id;
  158. this.clocktab(i)
  159. this.leftIndex = 0
  160. this.infoinit()
  161. setTimeout(() => {
  162. uni.stopPullDownRefresh()
  163. }, 3000)
  164. },
  165. onShow() {
  166. try {
  167. this.$store.commit('stopAduio')
  168. } catch(e) {
  169. console.log(e)
  170. }
  171. var i = uni.getStorageSync('fendianindex')
  172. this.buildingID = uni.getStorageSync('buildingID').id;
  173. this.clocktab(i)
  174. // this.leftIndex = 0
  175. // this.infoinit()
  176. let left = uni.getStorageSync('left');
  177. if(left!=undefined){
  178. this.leftIndex = left.split(',')[0]
  179. this.getSecond(left.split(',')[1])
  180. this.infoinit(left.split(',')[1])
  181. }else{
  182. this.leftIndex = 0
  183. this.infoinit()
  184. }
  185. },
  186. // onLoad() {
  187. // this.infoinit()
  188. // },
  189. methods: {
  190. // 跳转部分学习
  191. quclicks(item) {
  192. uni.showLoading({
  193. title: '加载中',
  194. mask: true
  195. });
  196. const parames = {
  197. pageNum: 1,
  198. pageSize: 100,
  199. query: {
  200. whetherFinish: 1,
  201. customerId: item.carId,
  202. id: item.startFile
  203. }
  204. }
  205. var cet = {
  206. bg: 0,
  207. customerId: item.id,
  208. id: ''
  209. }
  210. this.$u.post("/corpus/fendianFindByPage", parames).then(res => {
  211. var newobj = res[0];
  212. setTimeout(function() {
  213. uni.hideLoading();
  214. }, 2000);
  215. console.log(res)
  216. if (!res[0]) {
  217. uni.showToast({
  218. title: '当前学习案例暂无数据',
  219. icon: 'none'
  220. })
  221. return
  222. }
  223. if (res[0].merge == 0) {
  224. uni.navigateTo({
  225. url: `/pages/learning/Equinoctial/index2?customerId=${newobj.customerId}&biaoqian=${this.equinoctial[this.leftIndex].name}&startTime=${item.startTime}&startFile=${item.startFile}`
  226. })
  227. } else {
  228. uni.navigateTo({
  229. url: `/pages/learning/Equinoctial/index?customerId=${newobj.customerId}&biaoqian=${this.equinoctial[this.leftIndex].name}&startTime=${item.startTime}&startFile=${item.startFile}`
  230. })
  231. }
  232. })
  233. },
  234. //全部学习跳转
  235. quclick(item) {
  236. uni.showLoading({
  237. title: '加载中',
  238. mask: true
  239. });
  240. const parames = {
  241. pageNum: 1,
  242. pageSize: 100,
  243. query: {
  244. customerId: item.carId,
  245. }
  246. }
  247. var cet = {
  248. bg: 0,
  249. customerId: item.id,
  250. id: ''
  251. }
  252. this.$u.post("/corpus/findByPage", parames).then(res => {
  253. setTimeout(function() {
  254. uni.hideLoading();
  255. }, 2000);
  256. var newobj = res[0];
  257. if (res[0].merge == 0) {
  258. uni.navigateTo({
  259. url: `/pages/learning/Thefulltext/index2?customerId=${newobj.customerId}&status=${newobj.status}&itemobj=${JSON.stringify(cet)}&stateisshow=${"2"}`
  260. })
  261. } else {
  262. uni.navigateTo({
  263. url: `/pages/learning/Thefulltext/index?customerId=${newobj.customerId}`
  264. })
  265. }
  266. })
  267. },
  268. //分点学习点击事件
  269. routerclick(item, index) {
  270. if (this.leftIndex === index) return
  271. this.leftIndex = index
  272. uni.setStorageSync("left", index+','+item.marketingId); //写入缓存
  273. let mid = uni.getStorageSync('left').split(',')[1]
  274. this.getSecond(mid)
  275. // // return
  276. // uni.navigateTo({
  277. // url: "/pages/learning/Equinoctiallearning?id=" + item.marketingId + "&biaoqian=" + item.name
  278. // })
  279. },
  280. // tab切换
  281. clocktab(index) {
  282. this.activeClass = index;
  283. if (this.activeClass == 0) {
  284. uni.setStorageSync("fendianindex", 0); //写入缓存
  285. this.ceninit()
  286. } else {
  287. uni.setStorageSync("fendianindex", 1); //写入缓存
  288. this.leftIndex = uni.getStorageSync('left').split(',')[0]
  289. let mid = uni.getStorageSync('left').split(',')[1]
  290. if(mid!=undefined){
  291. this.getSecond(mid)
  292. }else{
  293. this.infoinit()
  294. }
  295. }
  296. },
  297. ceninit() {
  298. let infoobj = {
  299. "pageNum": 1,
  300. "pageSize": 100,
  301. "query": {
  302. "status": 0,
  303. 'itemId': this.buildingID,
  304. }
  305. }
  306. uni.request({
  307. url: config.service.findAllZATD,
  308. method: "POST",
  309. header: {
  310. 'content-type': 'application/json',
  311. 'Authorization': 'Bearer ' + uni.getStorageSync('weapp_session_login_data').token
  312. },
  313. data: infoobj,
  314. success: (data) => {
  315. if (data.data.code == 10000) {
  316. this.alllist = data.data.data.results
  317. } else {
  318. uni.showToast({
  319. title: data.data.message,
  320. duration: 2000
  321. });
  322. }
  323. }
  324. })
  325. },
  326. // 获取改学习分类下的数据
  327. getSecond(id) {
  328. let infoobj = {
  329. "pageNum": 1,
  330. "pageSize": 100,
  331. "query": {
  332. "status": 1,
  333. "marketingId": id,
  334. "itemId": this.buildingID
  335. }
  336. }
  337. uni.request({
  338. url: config.service.findAllZATD,
  339. method: "POST",
  340. header: {
  341. 'content-type': 'application/json',
  342. 'Authorization': 'Bearer ' + uni.getStorageSync('weapp_session_login_data').token
  343. },
  344. data: infoobj,
  345. success: (data) => {
  346. console.log(data.data.data.results,
  347. "qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq");
  348. if (data.data.code == 10000) {
  349. this.alllists = data.data.data.results
  350. } else {
  351. uni.showToast({
  352. title: data.data.message,
  353. duration: 2000
  354. });
  355. }
  356. }
  357. })
  358. },
  359. infoinit(mid) {
  360. let obj = {
  361. itemId: this.buildingID
  362. }
  363. uni.request({
  364. url: config.service.findSelectedLabel,
  365. method: "POST",
  366. data: obj,
  367. header: {
  368. 'content-type': 'application/json',
  369. 'Authorization': 'Bearer ' + uni.getStorageSync('weapp_session_login_data').token
  370. },
  371. success: (data) => {
  372. if (data.data.code == 10000) {
  373. this.equinoctial = data.data.data
  374. if(mid!=undefined){
  375. this.getSecond(mid)
  376. }else{
  377. this.getSecond(data.data.data[0].marketingId)
  378. }
  379. } else {
  380. uni.showToast({
  381. title: data.data.message,
  382. duration: 2000
  383. });
  384. }
  385. }
  386. })
  387. }
  388. },
  389. filters: {
  390. //格式化时间
  391. formatTime(num) {
  392. if (!num) return 0
  393. num = parseInt(num);
  394. //格式化时间格式
  395. num = num.toFixed(0);
  396. let second = num % 60;
  397. if (second < 10) second = "0" + second;
  398. let min = Math.floor(num / 60);
  399. if (min < 10) min = "0" + min;
  400. return min + ":" + second;
  401. },
  402. }
  403. }
  404. </script>
  405. <style lang="scss" scoped>
  406. .main {
  407. background: #F8F8F8;
  408. display: flex;
  409. flex-direction: column;
  410. }
  411. .tab-box {
  412. position: sticky;
  413. top: var(--window-top);
  414. z-index: 999;
  415. background: #fff;
  416. width: 100%;
  417. height: 80rpx;
  418. }
  419. .container {
  420. min-height: calc(100vh - 80rpx - 50px);
  421. .cented {
  422. width: 100%;
  423. display: flex;
  424. flex-direction: column;
  425. .ceninfo {
  426. position: relative;
  427. margin-top: 20rpx;
  428. width: 100%;
  429. background: #FFFFFF;
  430. .infoview {
  431. padding: 0 30rpx;
  432. width: 100%;
  433. height: 92rpx;
  434. display: flex;
  435. justify-content: space-between;
  436. border-bottom: 1rpx solid #E0E0E0;
  437. .infozuo {
  438. display: flex;
  439. align-items: center;
  440. .infozuochiud1 {
  441. font-size: 30rpx;
  442. font-weight: 600;
  443. color: #0C0C0C;
  444. }
  445. .infozuochiud2 {
  446. margin: 0 10rpx 0 0;
  447. padding: 5rpx 11rpx;
  448. border-radius: 50%;
  449. border: 1px solid #2671E2;
  450. font-size: 30rpx;
  451. font-weight: 400;
  452. color: #2671E2;
  453. }
  454. }
  455. .infoyou {
  456. height: 100%;
  457. display: flex;
  458. align-items: center;
  459. .infoyouchiud2 {
  460. font-size: 30rpx;
  461. color: #333;
  462. }
  463. }
  464. }
  465. .footerinfo {
  466. padding: 0 30rpx;
  467. width: 100%;
  468. height: 88rpx;
  469. display: flex;
  470. align-items: center;
  471. justify-content: space-between;
  472. border-bottom: 1rpx solid #E0E0E0;
  473. .footerinfozuo {
  474. display: flex;
  475. align-items: center;
  476. font-size: 28rpx;
  477. color: #333;
  478. image {
  479. margin: 0 10rpx 0 0;
  480. width: 32rpx;
  481. height: 32rpx;
  482. }
  483. }
  484. }
  485. .footicon {
  486. padding: 0 80rpx;
  487. height: 88rpx;
  488. display: flex;
  489. align-items: center;
  490. justify-content: space-between;
  491. .icon {
  492. display: flex;
  493. align-items: center;
  494. }
  495. image {
  496. margin-right: 10rpx;
  497. width: 32rpx;
  498. height: 32rpx;
  499. }
  500. }
  501. }
  502. }
  503. .biaoqianview {
  504. width: 100%;
  505. display: flex;
  506. height: calc(100vh - 80rpx - 50px);
  507. .boxintention {
  508. flex-shrink: 0;
  509. width: 160rpx;
  510. height: 100%;
  511. background: #F0F1F5;
  512. .boxcenten {
  513. width: 100%;
  514. height: 100rpx;
  515. background: #F0F1F5;
  516. display: flex;
  517. .boxcenteninfotext {
  518. width: 100%;
  519. height: 100%;
  520. text-indent: 20rpx;
  521. line-height: 100rpx;
  522. font-size: 30rpx;
  523. color: #0C0C0C;
  524. overflow: hidden;
  525. text-overflow: ellipsis;
  526. white-space: nowrap;
  527. }
  528. &.act {
  529. background: #fff;
  530. }
  531. }
  532. }
  533. .rside-scroll {
  534. flex-grow: 1;
  535. padding: 0 0 0 10rpx;
  536. .rside-box {
  537. display: flex;
  538. flex-direction: column;
  539. .ceninfo {
  540. position: relative;
  541. margin-top: 20rpx;
  542. width: 100%;
  543. background: #FFFFFF;
  544. .infoview {
  545. padding: 0 30rpx;
  546. width: 100%;
  547. height: 92rpx;
  548. display: flex;
  549. justify-content: space-between;
  550. border-bottom: 1rpx solid #E0E0E0;
  551. .infozuo {
  552. display: flex;
  553. align-items: center;
  554. .infozuochiud1 {
  555. font-size: 30rpx;
  556. font-weight: 600;
  557. color: #0C0C0C;
  558. }
  559. .infozuochiud2 {
  560. margin: 0 10rpx 0 0;
  561. padding: 5rpx 11rpx;
  562. border-radius: 50%;
  563. border: 1px solid #2671E2;
  564. font-size: 30rpx;
  565. font-weight: 400;
  566. color: #2671E2;
  567. }
  568. }
  569. .infoyou {
  570. height: 100%;
  571. display: flex;
  572. align-items: center;
  573. .infoyouchiud2 {
  574. font-size: 30rpx;
  575. color: #333;
  576. }
  577. }
  578. }
  579. .footerinfo {
  580. padding: 0 30rpx;
  581. width: 100%;
  582. height: 88rpx;
  583. display: flex;
  584. align-items: center;
  585. justify-content: space-between;
  586. border-bottom: 1rpx solid #E0E0E0;
  587. .footerinfozuo {
  588. display: flex;
  589. align-items: center;
  590. font-size: 28rpx;
  591. color: #333;
  592. image {
  593. margin: 0 10rpx 0 0;
  594. width: 32rpx;
  595. height: 32rpx;
  596. }
  597. }
  598. }
  599. .footicon {
  600. padding: 0 80rpx;
  601. height: 88rpx;
  602. display: flex;
  603. align-items: center;
  604. justify-content: space-between;
  605. .icon {
  606. display: flex;
  607. align-items: center;
  608. }
  609. image {
  610. margin-right: 10rpx;
  611. width: 32rpx;
  612. height: 32rpx;
  613. }
  614. }
  615. }
  616. }
  617. }
  618. }
  619. }
  620. </style>