吉光研途前端代码仓库
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.

558 lines
14 KiB

  1. <template>
  2. <view class="page__view">
  3. <!-- 导航栏 -->
  4. <navbar :title="details.title" leftClick @leftClick="$utils.navigateBack" bgColor="#4883F9" color="#FFFFFF" />
  5. <!-- 轮播图 -->
  6. <view class="swiper">
  7. <uv-swiper :list="bannerList" keyName="image" :autoplay="bannerList.length > 1" :indicator="bannerList.length > 1" indicatorMode="dot" indicatorActiveColor="#4883F9" indicatorInactiveColor="#FFFFFF" height="424rpx"></uv-swiper>
  8. </view>
  9. <!-- 发表全流程辅导 -->
  10. <view class="section">
  11. <view class="section-header">发表全流程辅导</view>
  12. <view class="section-content paragraph process">
  13. <view class="paragraph">
  14. <uv-parse :content="details.process"></uv-parse>
  15. </view>
  16. </view>
  17. </view>
  18. <!-- 可发表方向 -->
  19. <view class="section">
  20. <view class="section-header">
  21. <view class="section-header-line"></view>
  22. <view>可发表方向</view>
  23. </view>
  24. <view class="section-content direction">
  25. <view class="table">
  26. <view class="table-row" v-for="row in details.educationTargetList" :key="row.id">
  27. <view class="table-cell">{{ row.title }}</view>
  28. <view class="table-cell">{{ row.description }}</view>
  29. </view>
  30. </view>
  31. </view>
  32. </view>
  33. <!-- 师资介绍 -->
  34. <view class="section">
  35. <view class="section-header">
  36. <view class="section-header-line"></view>
  37. <view>师资介绍</view>
  38. </view>
  39. <view class="section-content teachers">
  40. <view class="card" v-for="item in details.educationTeacherList" :key="item.id">
  41. <view class="info">
  42. <view class="title">
  43. <view class="name">{{ item.title }}</view>
  44. <view class="label">
  45. <view class="label-text">{{ item.career }}</view>
  46. <view class="label-line"></view>
  47. </view>
  48. </view>
  49. <view class="tag">
  50. <image class="tag-icon" src="@/static/image/icon-degree.png" mode="widthFix"></image>
  51. <vie>{{ item.qualification }}</vie>
  52. </view>
  53. <view class="desc">
  54. <view>专业经历</view>
  55. <view>{{ item.experience }}</view>
  56. </view>
  57. </view>
  58. <view class="pic">
  59. <image class="img" :src="item.image" mode="aspectFill"></image>
  60. </view>
  61. </view>
  62. </view>
  63. </view>
  64. <!-- 课程安排 -->
  65. <view class="section">
  66. <view class="section-header">
  67. <view class="section-header-line"></view>
  68. <view>课程安排</view>
  69. </view>
  70. <view class="section-content">
  71. <view class="table">
  72. <view class="table-row" v-for="row in details.educationCourseList" :key="row.id">
  73. <view class="table-cell">{{ row.title }}</view>
  74. <view class="table-cell">{{ row.description }}</view>
  75. </view>
  76. </view>
  77. </view>
  78. </view>
  79. <!-- 适用人群 -->
  80. <view class="section">
  81. <view class="section-header">
  82. <view class="section-header-line"></view>
  83. <view>适用人群</view>
  84. </view>
  85. <view class="section-content target-audience">
  86. <view class="paragraph">
  87. <uv-parse :content="details.suit"></uv-parse>
  88. </view>
  89. </view>
  90. </view>
  91. <!-- 期刊推荐 -->
  92. <view class="section">
  93. <view class="section-header">
  94. <view class="section-header-line"></view>
  95. <view>期刊推荐</view>
  96. </view>
  97. <view class="section-content journal">
  98. <view class="box" v-for="item in details.educationPeriodicalList" :key="item.id">
  99. <view class="card">
  100. <view class="top">
  101. <view class="pic">
  102. <image class="img" :src="item.image" mode="aspectFill"></image>
  103. </view>
  104. <view class="info">
  105. <view class="name">{{ item.title }}</view>
  106. <view class="desc">{{ item.shortTitle }}</view>
  107. </view>
  108. </view>
  109. <view class="main">
  110. {{ item.description }}
  111. </view>
  112. </view>
  113. </view>
  114. </view>
  115. </view>
  116. <!-- 附加材料 -->
  117. <view class="section">
  118. <view class="section-header">
  119. <view class="section-header-line"></view>
  120. <view>附加材料</view>
  121. </view>
  122. <view class="section-content attachment">
  123. <view class="flex file" v-for="item in details.educationDocumentList" :key="item.id">
  124. <view class="file-info">
  125. <template v-if="item.type == 'pdf'">
  126. <image class="file-icon" src="@/static/image/icon-pdf.png" mode="widthFix"></image>
  127. </template>
  128. <template v-else>
  129. <image class="file-icon" src="@/static/image/icon-word.png" mode="widthFix"></image>
  130. </template>
  131. <view class="file-detail">
  132. <view class="title">{{ item.title }}</view>
  133. <view class="desc">{{ `${getFileType(item.document)} ${item.size || '-'}MB` }}</view>
  134. </view>
  135. </view>
  136. <button class="btn" @click="downloadFile(item.document)">下载</button>
  137. </view>
  138. </view>
  139. </view>
  140. </view>
  141. </template>
  142. <script>
  143. export default {
  144. data() {
  145. return {
  146. details: {},
  147. }
  148. },
  149. onLoad({ thesisId }) {
  150. this.getData(thesisId)
  151. },
  152. computed: {
  153. bannerList() {
  154. const { image } = this.details || {}
  155. return (image || '').split(',').map(url => ({ image: url }))
  156. }
  157. },
  158. methods: {
  159. async getData(thesisId) {
  160. try {
  161. this.details = await this.$fetch('queryThesisById', { thesisId })
  162. } catch (err) {
  163. }
  164. },
  165. getFileType(fileName) {
  166. const pdfReg = /(.pdf)$/g
  167. // const officeReg = /(doc|docx|ppt|pptx|xls|xlsx)$/g
  168. return pdfReg.test(fileName) ? 'pdf' : ''
  169. },
  170. downloadFile(url) {
  171. console.log('downloadFile', url)
  172. uni.downloadFile({
  173. url, // 文件地址
  174. success: (downloadRes) => {
  175. console.log('downloadRes', downloadRes)
  176. if (downloadRes.statusCode === 200) {
  177. uni.openDocument({
  178. showMenu: true,
  179. filePath: downloadRes.tempFilePath,
  180. success: () => console.log('打开成功')
  181. });
  182. } else {
  183. uni.showToast({ title: '下载失败', icon: 'none' });
  184. }
  185. },
  186. fail: (err) => {
  187. uni.showToast({ title: '网络异常', icon: 'none' });
  188. }
  189. });
  190. },
  191. },
  192. }
  193. </script>
  194. <style scoped lang="scss">
  195. .page__view {
  196. padding-bottom: 62rpx;
  197. background: #FFFFFF;
  198. }
  199. .swiper {
  200. margin: 20rpx 18rpx 32rpx 18rpx;
  201. border-radius: 25rpx;
  202. overflow: hidden;
  203. /deep/ .uv-swiper-indicator__wrapper__dot {
  204. width: 15rpx;
  205. height: 15rpx;
  206. }
  207. /deep/ .uv-swiper-indicator__wrapper__dot--active {
  208. width: 15rpx;
  209. }
  210. }
  211. .section {
  212. width: 100%;
  213. padding: 0 18rpx;
  214. box-sizing: border-box;
  215. & + & {
  216. margin-top: 40rpx;
  217. }
  218. &-header {
  219. display: flex;
  220. align-items: center;
  221. justify-content: flex-start;
  222. column-gap: 15rpx;
  223. padding-left: 18rpx;
  224. font-size: 32rpx;
  225. font-weight: 700;
  226. color: #000000;
  227. &-line {
  228. width: 11rpx;
  229. height: 45rpx;
  230. border-radius: 6rpx;
  231. background-image: linear-gradient(#FFFFFF, #4883F9);
  232. }
  233. }
  234. &-content {
  235. margin-top: 37rpx;
  236. .paragraph {
  237. width: 100%;
  238. padding: 22rpx;
  239. box-sizing: border-box;
  240. white-space: pre-line;
  241. font-size: 28rpx;
  242. color: #000000;
  243. background: #F8F8F8;
  244. border-radius: 15rpx;
  245. }
  246. .table {
  247. width: 100%;
  248. border-radius: 15rpx;
  249. overflow: hidden;
  250. &-row {
  251. display: grid;
  252. grid-template-columns: 218rpx auto;
  253. background: #EEEEEE;
  254. &:nth-child(2n) {
  255. background: #DEDEDE;
  256. }
  257. }
  258. &-cell {
  259. display: inline-flex;
  260. flex-direction: column;
  261. align-items: flex-start;
  262. justify-content: center;
  263. padding: 17rpx;
  264. box-sizing: border-box;
  265. font-family: PingFang SC;
  266. font-weight: 400;
  267. font-size: 28rpx;
  268. color: #080808;
  269. &:first-child {
  270. border-right: 1rpx solid #E5E5E5;
  271. }
  272. }
  273. }
  274. &.process {
  275. margin-top: 24rpx;
  276. .difficulty {
  277. justify-content: flex-start;
  278. }
  279. }
  280. &.teachers {
  281. .card {
  282. display: flex;
  283. align-items: center;
  284. column-gap: 12rpx;
  285. background: #ffffff;
  286. border-radius: 15rpx;
  287. box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0,0,0,0.16);
  288. .info {
  289. flex: 1;
  290. padding: 19rpx 0 28rpx 17rpx;
  291. .title {
  292. display: flex;
  293. align-items: center;
  294. padding-left: 11rpx;
  295. color: #000000;
  296. .name {
  297. font-size: 32rpx;
  298. font-weight: 700;
  299. }
  300. .label {
  301. margin-left: 12rpx;
  302. position: relative;
  303. height: 30rpx;
  304. &-line {
  305. margin: 24rpx 0 0 25rpx;
  306. width: 195rpx;
  307. height: 4rpx;
  308. background-image: linear-gradient(#4883F9, #FFFFFF);
  309. border-radius: 2rpx;
  310. }
  311. &-text {
  312. position: absolute;
  313. top: 0;
  314. left: 0;
  315. font-size: 22rpx;
  316. font-weight: 400;
  317. }
  318. }
  319. }
  320. .tag {
  321. margin: 5rpx 0 18rpx 0;
  322. display: inline-flex;
  323. align-items: center;
  324. padding: 5rpx 43rpx 5rpx 16rpx;
  325. column-gap: 16rpx;
  326. font-size: 28rpx;
  327. color: #FFFFFF;
  328. background: rgba(72,131,249,0.58);
  329. border-radius: 30rpx 0rpx 30rpx 0rpx;
  330. &-icon {
  331. width: 38rpx;
  332. height: auto;
  333. }
  334. }
  335. .desc {
  336. padding: 12rpx 15rpx;
  337. font-size: 28rpx;
  338. font-weight: 500;
  339. color: #000000;
  340. background: #f8f8f8;
  341. border-radius: 16rpx;
  342. }
  343. }
  344. .pic {
  345. margin: 48rpx 9rpx 48rpx 0;
  346. width: 253rpx;
  347. height: 345rpx;
  348. border-radius: 127rpx;
  349. overflow: hidden;
  350. .img {
  351. width: 100%;
  352. height: 100%;
  353. }
  354. }
  355. &:nth-child(2n) {
  356. flex-direction: row-reverse;
  357. .info {
  358. padding: 19rpx 17rpx 28rpx 0;
  359. }
  360. .pic {
  361. margin: 48rpx 0 48rpx 9rpx;
  362. }
  363. }
  364. }
  365. .card + .card {
  366. margin-top: 24rpx;
  367. }
  368. }
  369. &.journal {
  370. .box {
  371. padding-top: 73rpx;
  372. .card {
  373. padding: 29rpx 12rpx 19rpx 12rpx;
  374. background: #f6f6f6;
  375. border-radius: 15rpx;
  376. box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0,0,0,0.16);
  377. .top {
  378. position: relative;
  379. .pic {
  380. position: absolute;
  381. left: 42rpx;
  382. bottom: 0;
  383. width: 213rpx;
  384. height: 285rpx;
  385. .img {
  386. width: 100%;
  387. height: 100%;
  388. }
  389. }
  390. .info {
  391. height: 181rpx;
  392. padding: 0 14rpx 0 266rpx;
  393. .name {
  394. padding-left: 6rpx;
  395. font-size: 32rpx;
  396. font-weight: 700;
  397. color: #000000;
  398. }
  399. .desc {
  400. margin-top: 24rpx;
  401. font-size: 28rpx;
  402. font-weight: 700;
  403. color: #707070;
  404. overflow: hidden;
  405. text-overflow: ellipsis;
  406. display:-webkit-box; //作为弹性伸缩盒子模型显示。
  407. -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
  408. -webkit-line-clamp:3; //显示的行
  409. }
  410. }
  411. }
  412. .main {
  413. margin-top: 18rpx;
  414. padding: 14rpx;
  415. font-size: 28rpx;
  416. color: #000000;
  417. background: #ebebeb;
  418. border-radius: 30rpx 0rpx 30rpx 0rpx;
  419. }
  420. }
  421. &:nth-child(2n) {
  422. .card {
  423. .top {
  424. .info {
  425. padding: 0 258rpx 0 14rpx;
  426. }
  427. .pic {
  428. left: unset;
  429. right: 29rpx;
  430. }
  431. }
  432. }
  433. }
  434. }
  435. .box + .box {
  436. margin-top: 28rpx;
  437. }
  438. }
  439. &.attachment {
  440. .file {
  441. justify-content: space-between;
  442. padding: 32rpx 15rpx 32rpx 26rpx;
  443. background: #f8f8f8;
  444. border-radius: 15rpx;
  445. &-info {
  446. display: flex;
  447. align-items: flex-end;
  448. }
  449. &-icon {
  450. width: 64rpx;
  451. height: auto;
  452. }
  453. &-detail {
  454. margin-left: 14rpx;
  455. .title {
  456. font-size: 30rpx;
  457. color: #000000;
  458. }
  459. .desc {
  460. font-size: 28rpx;
  461. color: #999999;
  462. }
  463. }
  464. .btn {
  465. padding: 7rpx 30rpx;
  466. font-size: 28rpx;
  467. color: #FFFFFF;
  468. background: #4883f9;
  469. border-radius: 27rpx;
  470. }
  471. }
  472. .file + .file {
  473. margin-top: 21rpx;
  474. }
  475. }
  476. }
  477. }
  478. </style>