You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

learning.vue 12 KiB

3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584
  1. <template>
  2. <view class="main">
  3. <view class="tab-box">
  4. <view class="tab-item-wrap">
  5. <view v-for="(item, index) in tablist" :key="index"
  6. :class="activeClass == index ? 'bottom' : ''" @tap="clocktab(index, item.id)">
  7. {{ item.name }}
  8. <view class="bottomLine" v-if="activeClass == index"></view>
  9. </view>
  10. </view>
  11. </view>
  12. <view class="cented" v-if="activeClass==0">
  13. <view class="ceninfo" v-for="(item,index) in alllist" :key="index">
  14. <view class="infoview">
  15. <view class="infozuo">
  16. <view class="infozuochiud1">{{item.jbaName}}</view>
  17. <view class="infozuochiud2">置业顾问</view>
  18. </view>
  19. <view class="infoyou">
  20. <view class="infoyouchiud2" @click="quclick(item)">去学习</view>
  21. </view>
  22. </view>
  23. <view class="footerinfo">
  24. <view class="footerinfozuo">{{item.assignedTime}}</view>
  25. <view class="footerinfoyou"></view>
  26. </view>
  27. <view class="footicon">
  28. <view class="icon">
  29. <image class="Piabodata-img1" src="../../static/images/studyhot.png" mode=""></image>
  30. <!-- 浏览量 -->
  31. {{item.pageviews}}
  32. </view>
  33. <view class="icon">
  34. <image class="Piabodata-img1" src="../../static/images/viewstudy.png" mode=""></image>
  35. <!-- 热度 -->
  36. {{item.heat}}
  37. </view>
  38. </view>
  39. </view>
  40. </view>
  41. <view class="biaoqianview" v-if="activeClass==1">
  42. <view class="boxintention">
  43. <view class="title">分点标签列表</view>
  44. <view class="boxcenten" v-for="(item,index) in equinoctial" :key="index" @click="routerclick(item)">
  45. <view class="boxcenteninfotext">{{item.name}}</view>
  46. <view class="boxcenteninfoimg"><u-icon size="20px" name="arrow-right"></u-icon></view>
  47. </view>
  48. </view>
  49. </view>
  50. </view>
  51. </template>
  52. <script>
  53. var config = require("../../config");
  54. var util = require("@/utils/util.js");
  55. export default {
  56. data() {
  57. return {
  58. tablist:[
  59. {name:"全文"},
  60. {name:"分点"}
  61. ],
  62. activeClass:0,
  63. equinoctial:[],
  64. alllist:[],
  65. buildingID:''
  66. };
  67. },
  68. onShow(){
  69. var i=uni.getStorageSync('fendianindex')
  70. this.buildingID=uni.getStorageSync('buildingID').id;
  71. this.clocktab(i)
  72. },
  73. methods: {
  74. //全部学习跳转
  75. quclick(item){
  76. const parames = {
  77. pageNum: 1,
  78. pageSize: 100,
  79. query: {
  80. customerId: item.carId,
  81. }
  82. }
  83. var cet={
  84. bg:0,
  85. customerId:item.id,
  86. id:''
  87. }
  88. this.$u.post("/corpus/findByPage", parames).then(res => {
  89. var newobj = res[0];
  90. if(res[0].recordDuration>360){
  91. uni.navigateTo({
  92. url: `/pages/learning/Thefulltext/index2?customerId=${newobj.customerId}&status=${newobj.status}&itemobj=${JSON.stringify(cet)}&stateisshow=${"2"}`
  93. })
  94. }else{
  95. uni.navigateTo({
  96. url: `/pages/learning/Thefulltext/index?customerId=${newobj.customerId}`
  97. })
  98. }
  99. })
  100. },
  101. //分点学习跳转
  102. routerclick(item){
  103. uni.navigateTo({
  104. url: "/pages/learning/Equinoctiallearning?id="+item.marketingId+"&biaoqian="+item.name
  105. })
  106. },
  107. // tab切换
  108. clocktab(index) {
  109. this.activeClass = index;
  110. if(this.activeClass==0){
  111. uni.setStorageSync("fendianindex", 0); //写入缓存
  112. this.ceninit()
  113. }else{
  114. uni.setStorageSync("fendianindex", 1); //写入缓存
  115. this.infoinit()
  116. }
  117. },
  118. ceninit(){
  119. let infoobj={
  120. "pageNum":1,
  121. "pageSize":100,
  122. "query":{
  123. "status":0,
  124. 'itemId':this.buildingID,
  125. }
  126. }
  127. uni.request({
  128. url: config.service.findAllZATD,
  129. method:"POST",
  130. header: {
  131. 'content-type': 'application/json',
  132. 'Access-Token': uni.getStorageSync('weapp_session_login_data').token
  133. },
  134. data:infoobj,
  135. success: (data) => {
  136. if(data.data.code==10000){
  137. this.alllist=data.data.data.results
  138. }else{
  139. uni.showToast({
  140. title: data.data.message,
  141. duration: 2000
  142. });
  143. }
  144. }
  145. })
  146. },
  147. infoinit(){
  148. let obj={
  149. itemId:this.buildingID
  150. }
  151. uni.request({
  152. url: config.service.findSelectedLabel,
  153. method:"POST",
  154. data:obj,
  155. header: {
  156. 'content-type': 'application/json',
  157. 'Access-Token': uni.getStorageSync('weapp_session_login_data').token
  158. },
  159. success: (data) => {
  160. if(data.data.code==10000){
  161. this.equinoctial=data.data.data
  162. }else{
  163. uni.showToast({
  164. title: data.data.message,
  165. duration: 2000
  166. });
  167. }
  168. }
  169. })
  170. }
  171. },
  172. }
  173. </script>
  174. <style lang="scss" scoped>
  175. .main {
  176. background: #F1F1F1;;
  177. min-height: 100vh;
  178. }
  179. .tab-box {
  180. height: auto;
  181. overflow: auto;
  182. width: 100%;
  183. .tab-item-wrap {
  184. height: 100rpx;
  185. width: 80%;
  186. margin: 0 auto;
  187. line-height: 100rpx;
  188. display: flex;
  189. justify-content: space-around;
  190. font-size: 36rpx;
  191. color: #959dad;
  192. }
  193. }
  194. .bottom {
  195. color: #008EF2;
  196. position: relative;
  197. }
  198. .bottomLine {
  199. position: absolute;
  200. width: 96rpx;
  201. height: 6rpx;
  202. top: 80rpx;
  203. background-color: #298dff;
  204. border-radius: 8rpx 8rpx 0rpx 0rpx;
  205. left: -13rpx;
  206. }
  207. .cented{
  208. width: 100%;
  209. padding-top: 14rpx;
  210. .ceninfo{
  211. width: 690rpx;
  212. // height: 160rpx;
  213. background: #FFFFFF;
  214. border-radius: 8rpx;
  215. margin: 0 auto;
  216. margin-top: 20rpx;
  217. padding-top: 23rpx;
  218. position: relative;
  219. .infoview{
  220. width: 100%;
  221. height: 64rpx;
  222. display: flex;
  223. .infozuo{
  224. width: 454rpx;
  225. height: 100%;
  226. display: flex;
  227. align-items: center;
  228. .infozuochiud1{
  229. font-size: 36rpx;
  230. font-weight: 600;
  231. color: #0C0C0C;
  232. text-indent: 28rpx;
  233. }
  234. .infozuochiud2{
  235. width: 113rpx;
  236. height: 42rpx;
  237. border-radius: 5rpx;
  238. margin-left: 19rpx;
  239. border: 1px solid #008EF2;
  240. font-size: 24rpx;
  241. font-weight: 400;
  242. color: #008EF2;
  243. line-height: 42rpx;
  244. text-align: center;
  245. }
  246. }
  247. .infoyou{
  248. width:236rpx;
  249. height: 100%;
  250. display: flex;
  251. align-items: center;
  252. .infoyouchiud1{
  253. display: block;
  254. width: 64rpx;
  255. height: 64rpx;
  256. border-radius: 50%;
  257. }
  258. .infoyouchiud2{
  259. width: 133rpx;
  260. height: 56rpx;
  261. background: #008EF2;
  262. border-radius: 8rpx;
  263. text-align: center;
  264. color: #FFFFFF;
  265. font-size: 30rpx;
  266. line-height: 56rpx;
  267. margin-left: 80rpx;
  268. }
  269. }
  270. }
  271. .footerinfo{
  272. width: 100%;
  273. height: 42rpx;
  274. display: flex;
  275. margin-top: 14rpx;
  276. .footerinfozuo{
  277. width: 454rpx;
  278. font-size: 30rpx;
  279. color: #0C0C0C;
  280. line-height: 42rpx;
  281. margin-left: 26rpx;
  282. }
  283. .footerinfoyou{
  284. width: 236rpx;
  285. font-size: 24rpx;
  286. color: #999999;
  287. line-height: 42rpx;
  288. text-indent: 42rpx;
  289. }
  290. }
  291. .dingwei{
  292. width: 100%;
  293. height: 60rpx;
  294. border: 1px solid red;
  295. position: absolute;
  296. top: 160rpx;
  297. left: 0rpx;
  298. }
  299. }
  300. }
  301. .biaoqianview{
  302. width: 100%;
  303. .boxintention {
  304. width: 690rpx;
  305. margin: 0 auto;
  306. .title {
  307. font-size: 36upx;
  308. color: #333333;
  309. position: relative;
  310. display: flex;
  311. align-items: center;
  312. padding-left: 19upx;
  313. &:before {
  314. content: '';
  315. position: absolute;
  316. left: 0;
  317. height: 30upx;
  318. width: 9upx;
  319. background: #008ef2;
  320. border-radius: 5rpx;
  321. }
  322. }
  323. .boxcenten{
  324. width: 100%;
  325. height: 100rpx;
  326. background: #FFFFFF;
  327. border-radius: 8rpx;
  328. margin-top: 22rpx;
  329. display: flex;
  330. .boxcenteninfotext{
  331. width: 90%;
  332. height: 100%;
  333. text-indent: 20rpx;
  334. line-height: 100rpx;
  335. font-size: 30rpx;
  336. color: #0C0C0C;
  337. }
  338. .boxcenteninfoimg{
  339. width: 10%;
  340. height: 100%;
  341. line-height: 100rpx;
  342. }
  343. }
  344. }
  345. }
  346. .footicon{
  347. display: flex;
  348. align-items: center;
  349. margin-top: 30rpx;
  350. padding:20rpx;
  351. flex-direction: row-reverse;
  352. .icon{
  353. margin-left: 20rpx;
  354. }
  355. image{
  356. width: 36rpx;
  357. height: 36rpx;
  358. margin-right: 20rpx;
  359. vertical-align: -7rpx;
  360. }
  361. }
  362. </style>
  363. <!-- <template>
  364. <view class="cented-box">
  365. <view class="search-box">
  366. <view class="search">
  367. <view class="search-img">
  368. <image class="search-img1" src="../../static/images/search.png" mode=""></image>
  369. </view>
  370. <view class="search-text">输入话术关键字</view>
  371. </view>
  372. </view>
  373. <view class="caseid-box">
  374. <view class="caseid">
  375. <image class="caseid-img1" src="../../static/images/good.png" mode=""></image>
  376. <view class="caseid-text">优秀案例</view>
  377. </view>
  378. <view class="caseid">
  379. <image class="caseid-img1" src="../../static/images/problem.png" mode=""></image>
  380. <view class="caseid-text">问题库</view>
  381. </view>
  382. <view class="caseid">
  383. <image class="caseid-img1" src="../../static/images/reverse.png" mode=""></image>
  384. <view class="caseid-text">反面案例</view>
  385. </view>
  386. </view>
  387. <view class="Pinspeak">销讲话术</view>
  388. <view class="chented">
  389. <view class="title">
  390. <view class="title1"></view>
  391. <view class="titletext">逼单话术</view>
  392. <view class="titleimg">
  393. <image class="titleimg1" src="../../static/images/arrow.png" mode=""></image>
  394. </view>
  395. </view>
  396. </view>
  397. <view class="chented">
  398. <view class="title" style="border: none;">
  399. <view class="title1"></view>
  400. <view class="titletext">品牌介绍</view>
  401. </view>
  402. <view class="chented-for">
  403. <view class="chented-che">2021销售额</view>
  404. <view class="chented-che">2021销售额</view>
  405. <view class="chented-che">2021销售额</view>
  406. <view class="chented-che">2021销售额</view>
  407. </view>
  408. </view>
  409. <view class="chented">
  410. <view class="title" style="border: none;">
  411. <view class="title1"></view>
  412. <view class="titletext">品牌介绍</view>
  413. </view>
  414. <view class="chented-for">
  415. <view class="chented-che">2021销售额</view>
  416. <view class="chented-che">2021销售额</view>
  417. <view class="chented-che">2021销售额</view>
  418. <view class="chented-che">2021销售额</view>
  419. </view>
  420. </view>
  421. </view>
  422. </template>
  423. <script>
  424. export default {
  425. data() {
  426. return {};
  427. },
  428. components: {},
  429. onLoad() {},
  430. onShow() {},
  431. methods: {
  432. },
  433. };
  434. </script>
  435. <style lang="scss" scoped>
  436. .cented-box{
  437. background: #F8F8F8;
  438. width: 100%;
  439. height: 100%;
  440. }
  441. .search-box{
  442. width: 100%;
  443. height: 102rpx;
  444. background: #FFFFFF;
  445. display: flex;
  446. align-items: center;
  447. justify-content: center;
  448. .search{
  449. width: 690rpx;
  450. height: 70rpx;
  451. display: flex;
  452. align-items: center;
  453. background: #F8F8F8;
  454. border-radius: 33rpx;
  455. .search-img{
  456. width: 26rpx;
  457. height: 30rpx;
  458. margin-left: 20rpx;
  459. .search-img1{
  460. width: 100%;
  461. height: 100%;
  462. margin-top: 2rpx;
  463. }
  464. }
  465. .search-text{
  466. font-size: 28rpx;
  467. font-weight: 400;
  468. color: #999999;
  469. margin-left:10rpx;
  470. }
  471. }
  472. }
  473. .caseid-box{
  474. width: 100%;
  475. height: 204rpx;
  476. margin-top: 10rpx;
  477. background: #FFFFFF;
  478. display: flex;
  479. .caseid{
  480. flex: 1;
  481. height: 100%;
  482. text-align: center;
  483. margin-top: 13rpx;
  484. .caseid-img1{
  485. width: 134rpx;
  486. height: 134rpx;
  487. }
  488. .caseid-text{
  489. width: 100%;
  490. text-align: center;
  491. font-size: 24rpx;
  492. font-weight: 400;
  493. color: #333333;
  494. }
  495. }
  496. }
  497. .Pinspeak{
  498. width: 100%;
  499. height: 92rpx;
  500. border-bottom: 1rpx solid #E0E0E0;
  501. font-size: 32rpx;
  502. font-weight: 600;
  503. color: #333333;
  504. text-indent: 30rpx;
  505. line-height: 92rpx;
  506. background: #FFFFFF;
  507. margin-top: 20rpx;
  508. }
  509. .chented{
  510. width: 100%;
  511. padding-left: 30rpx;
  512. padding-right: 30rpx;
  513. background-color: #FFFFFF;
  514. .title{
  515. width: 100%;
  516. height: 90rpx;
  517. border-bottom: 1rpx solid #E0E0E0;
  518. display: flex;
  519. align-items: center;
  520. .title1{
  521. width: 6rpx;
  522. height: 30rpx;
  523. background: #2671E2;
  524. }
  525. .titletext{
  526. width: 90%;
  527. height: 30rpx;
  528. font-size: 30rpx;
  529. font-weight: 600;
  530. color: #333333;
  531. line-height: 30rpx;
  532. text-indent: 10rpx;
  533. }
  534. .titleimg{
  535. width: 8%;
  536. text-align: right;
  537. .titleimg1{
  538. width: 14rpx;
  539. height: 30rpx;
  540. }
  541. }
  542. }
  543. .chented-for{
  544. width: 100%;
  545. display: flex;
  546. flex-wrap: wrap;
  547. margin-top: -20rpx;
  548. border-bottom: 1rpx solid #E0E0E0;
  549. padding-bottom: 30rpx;
  550. .chented-che{
  551. width: 210rpx;
  552. height: 60rpx;
  553. background: #FFFFFF;
  554. border-radius: 4rpx;
  555. border: 1px solid #C9C9C9;
  556. text-align: center;
  557. line-height: 60rpx;
  558. font-size: 30rpx;
  559. font-weight: 400;
  560. color: #333333;
  561. margin-right: 20rpx;
  562. margin-top: 20rpx;
  563. }
  564. }
  565. }
  566. </style>
  567. -->