From 6d3cf35c700b9df0d7bbbbf395c270eaef8b71db Mon Sep 17 00:00:00 2001 From: Fox-33 <1466778434@qq.com> Date: Wed, 13 Aug 2025 16:08:33 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4;?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- api/model/index.js | 21 + pages.json | 8 +- pages/index/case.vue | 61 ++- pages/index/center.vue | 21 +- pages/index/index.vue | 178 +++++--- pages/index/serve.vue | 25 +- pages_order/case/index.vue | 70 ++-- pages_order/case/poster.vue | 206 ++++++++++ pages_order/serve/index.vue | 22 +- pages_order/thesis/index.vue | 274 +++++++++---- pages_order/thesis/indexTwo.vue | 450 +++++++++++++++++++++ .../{poster/index.vue => thesis/poster.vue} | 80 +--- pages_order/thesis/search.vue | 88 +++- 13 files changed, 1214 insertions(+), 290 deletions(-) create mode 100644 pages_order/case/poster.vue create mode 100644 pages_order/thesis/indexTwo.vue rename pages_order/{poster/index.vue => thesis/poster.vue} (64%) diff --git a/api/model/index.js b/api/model/index.js index c92657f..3be07a2 100644 --- a/api/model/index.js +++ b/api/model/index.js @@ -29,6 +29,27 @@ const api = { url: '/index/queryThesisById', method: 'GET', }, + /** + * 获取论文分类列表二 + */ + queryCategoryThesisTwoList: { + url: '/config/queryCategoryThesisTwoList', + method: 'GET', + }, + /** + * 获取论文文章列表二 + */ + queryThesisTwoList: { + url: '/index/queryThesisTwoList', + method: 'GET', + }, + /** + * 获取论文文章详情二 + */ + queryThesisTwoById: { + url: '/index/queryThesisTwoById', + method: 'GET', + }, /** * 生成二维码 */ diff --git a/pages.json b/pages.json index d98687e..e1a5ea3 100644 --- a/pages.json +++ b/pages.json @@ -36,12 +36,16 @@ "path": "thesis/search" }, { "path": "thesis/index" + }, { + "path": "thesis/indexTwo" + }, { + "path": "thesis/poster" }, { "path": "case/index" }, { - "path": "serve/index" + "path": "case/poster" }, { - "path": "poster/index" + "path": "serve/index" } ] }], diff --git a/pages/index/case.vue b/pages/index/case.vue index 97431c0..b7fe436 100644 --- a/pages/index/case.vue +++ b/pages/index/case.vue @@ -4,6 +4,16 @@ + + + {{ configList.config_name }} + + + + {{ configList.config_name_en }} + + + @@ -15,7 +25,7 @@ - + @@ -77,9 +87,14 @@ categoryPeriodId: '', }, mixinsListApi: 'queryAriticleList', + swiperHeight: '239rpx', } }, onLoad() { + + const windowWidth = uni.getSystemInfoSync().windowWidth + this.swiperHeight = `${(windowWidth - 18) * 239 / 714}px` + this.fetchBanner() this.fetchOptions() this.getData() @@ -133,7 +148,8 @@ \ No newline at end of file diff --git a/pages_order/serve/index.vue b/pages_order/serve/index.vue index 5397516..364f7b8 100644 --- a/pages_order/serve/index.vue +++ b/pages_order/serve/index.vue @@ -4,10 +4,7 @@ - - {{ details.title }} - - + @@ -36,20 +33,9 @@ \ No newline at end of file diff --git a/pages_order/thesis/index.vue b/pages_order/thesis/index.vue index 8459cad..5e22171 100644 --- a/pages_order/thesis/index.vue +++ b/pages_order/thesis/index.vue @@ -1,77 +1,84 @@ {{ item.title }} - {{ `${getFileType(item.document)} ${item.size || '-'}MB` }} + @@ -147,7 +154,7 @@ - + @@ -161,10 +168,15 @@ data() { return { details: {}, + coverImageHeight: '848rpx', } }, onLoad({ thesisId }) { + const windowWidth = uni.getSystemInfoSync().windowWidth + this.coverImageHeight = `${(windowWidth) * 848 / 714}px` + this.getData(thesisId) + // this.getData('1949729528544800770') }, onShareAppMessage(res) { return { @@ -174,19 +186,20 @@ } }, computed: { - bannerList() { - const { image } = this.details || {} - return (image || '').split(',').map(url => ({ image: url })) - }, posterData() { - const { id, title, paperDesc, paperImage } = this.details || {} + const { id, title, image, paperDesc, paperImage } = this.details || {} return { paperDesc: paperDesc || title, - paperImage: paperImage || this.bannerList?.[0]?.image || '', + paperImage: paperImage || image || '', path: `pages_order/thesis/index?thesisId=${id}` } }, + hasPoster() { + const { paperImage } = this.details || {} + + return !!paperImage + } }, methods: { async getData(thesisId) { @@ -221,6 +234,7 @@ } }, fail: (err) => { + console.log('downloadFile fail', err) uni.showToast({ title: '网络异常', icon: 'none' }); } }); @@ -229,7 +243,7 @@ uni.setStorageSync('posterData', this.posterData) uni.navigateTo({ - url: `/pages_order/poster/index` + url: `/pages_order/thesis/poster` }) }, }, @@ -240,32 +254,93 @@ .page__view { background: #FFFFFF; - padding-bottom: calc(62rpx + 110rpx + env(safe-area-inset-bottom)); + padding-bottom: 62rpx; + + &.with-bottom { + padding-bottom: calc(62rpx + 110rpx + env(safe-area-inset-bottom)); + } } - .swiper { - margin: 20rpx 18rpx 32rpx 18rpx; - border-radius: 25rpx; - overflow: hidden; + .cover-image { + position: relative; + width: 100%; + background: #FFFFFF; - /deep/ .uv-swiper-indicator__wrapper__dot { - width: 15rpx; - height: 15rpx; + .img { + width: 100%; + height: 100%; + } + + .shadow { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + // background: linear-gradient(transparent, #FFFFFF); + background: linear-gradient(transparent, #FFFFFF 90%, #FFFFFF); } + } + + .page-title { + position: absolute; + padding: 0 36rpx; + transform: translateY(-100%); + font-size: 60rpx; + font-weight: 700; + color: #4783F9; + + &-line { + margin: 12rpx 0 24rpx 0; + width: 120rpx; + height: 8rpx; + background: #4783F9; + } + } + + .process { + position: relative; + width: 100%; + padding: 0 36rpx; + box-sizing: border-box; + + &-custom { + padding: 6rpx 18rpx; + background: #E6EEFD; + border-top-right-radius: 32rpx; + border-bottom-right-radius: 32rpx; + } + + &-item { + margin-top: 24rpx; + padding: 10rpx 18rpx; + background: #E6EEFD; + border-radius: 25rpx; + + &-title { + font-size: 30rpx; + font-weight: 600; + color: #3378EA; + } + + &-content { + font-size: 28rpx; + white-space: pre-wrap; + color: #000000; + } - /deep/ .uv-swiper-indicator__wrapper__dot--active { - width: 15rpx; } } .section { + margin-top: 40rpx; width: 100%; padding: 0 18rpx; box-sizing: border-box; - & + & { - margin-top: 40rpx; - } + // & + & { + // margin-top: 40rpx; + // } &-header { display: flex; @@ -324,6 +399,7 @@ font-family: PingFang SC; font-weight: 400; font-size: 28rpx; + white-space: pre-wrap; color: #080808; &:first-child { @@ -333,11 +409,13 @@ } - &.process { - margin-top: 24rpx; - - .difficulty { - justify-content: flex-start; + &.direction { + /deep/ .uv-read-more__toggle { + justify-content: flex-end; + } + /deep/ .uv-read-more__toggle__text .uv-text__value { + color: $uni-color !important; + font-size: 22rpx !important; } } @@ -353,7 +431,7 @@ .info { flex: 1; - padding: 19rpx 0 28rpx 17rpx; + padding: 19rpx 17rpx 28rpx 17rpx; .title { display: flex; @@ -369,22 +447,32 @@ .label { margin-left: 12rpx; position: relative; - height: 30rpx; + // height: 30rpx; &-line { - margin: 24rpx 0 0 25rpx; - width: 195rpx; + position: absolute; + left: 0; + bottom: 0; + transform: translate(30rpx, -2rpx); + // margin: 24rpx 0 0 25rpx; + // width: 195rpx; + width: calc(100% - 20rpx); height: 4rpx; background-image: linear-gradient(#4883F9, #FFFFFF); border-radius: 2rpx; } &-text { - position: absolute; - top: 0; - left: 0; font-size: 22rpx; font-weight: 400; + opacity: 0; + + &.display { + opacity: 1; + position: absolute; + left: 0; + top: 0; + } } } } @@ -407,21 +495,35 @@ } .desc { - padding: 12rpx 15rpx; + // padding: 12rpx 15rpx; font-size: 28rpx; font-weight: 500; + white-space: pre-wrap; color: #000000; background: #f8f8f8; - border-radius: 16rpx; + // border-radius: 16rpx; + + &-top { + padding: 12rpx 15rpx 0 15rpx; + border-top-left-radius: 16rpx; + border-top-right-radius: 16rpx; + } + &-bottom { + padding: 0 15rpx 12rpx 15rpx; + border-bottom-left-radius: 16rpx; + border-bottom-right-radius: 16rpx; + } } } .pic { - margin: 48rpx 9rpx 48rpx 0; + // margin: 48rpx 9rpx 48rpx 0; + margin: 44rpx 0 0 14rpx; width: 253rpx; height: 345rpx; border-radius: 127rpx; overflow: hidden; + float: right; .img { width: 100%; @@ -433,11 +535,13 @@ flex-direction: row-reverse; .info { - padding: 19rpx 17rpx 28rpx 0; + padding: 19rpx 17rpx 28rpx 17rpx; } .pic { - margin: 48rpx 0 48rpx 9rpx; + // margin: 48rpx 0 48rpx 9rpx; + margin: 44rpx 14rpx 0 0; + float: left; } } } @@ -475,7 +579,7 @@ } .info { - height: 181rpx; + // height: 181rpx; padding: 0 14rpx 0 266rpx; .name { @@ -487,14 +591,16 @@ .desc { margin-top: 24rpx; - font-size: 28rpx; + // font-size: 28rpx; + font-size: 24rpx; + white-space: pre-wrap; font-weight: 700; color: #707070; - overflow: hidden; - text-overflow: ellipsis; - display:-webkit-box; //作为弹性伸缩盒子模型显示。 - -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列 - -webkit-line-clamp:3; //显示的行 + // overflow: hidden; + // text-overflow: ellipsis; + // display:-webkit-box; //作为弹性伸缩盒子模型显示。 + // -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列 + // -webkit-line-clamp:3; //显示的行 } } @@ -504,6 +610,7 @@ margin-top: 18rpx; padding: 14rpx; font-size: 28rpx; + white-space: pre-wrap; color: #000000; background: #ebebeb; border-radius: 30rpx 0rpx 30rpx 0rpx; @@ -545,7 +652,8 @@ &-info { display: flex; - align-items: flex-end; + // align-items: flex-end; + align-items: center; } &-icon { diff --git a/pages_order/thesis/indexTwo.vue b/pages_order/thesis/indexTwo.vue new file mode 100644 index 0000000..ce4557e --- /dev/null +++ b/pages_order/thesis/indexTwo.vue @@ -0,0 +1,450 @@ + + + + + \ No newline at end of file diff --git a/pages_order/poster/index.vue b/pages_order/thesis/poster.vue similarity index 64% rename from pages_order/poster/index.vue rename to pages_order/thesis/poster.vue index 997fcb4..a1f40d0 100644 --- a/pages_order/poster/index.vue +++ b/pages_order/thesis/poster.vue @@ -4,7 +4,8 @@ - + + @@ -45,57 +46,6 @@ } }, - drawTextWithManualLineBreaks(ctx, text, x, y, maxWidth, lineHeight) { - let rows = 0 - let size = 0 - let lines = text.split('\n'); // 支持手动输入的换行符 - - for (let lIdx = 0; lIdx < lines.length; lIdx++) { - let line = lines[lIdx] - let row = '' - - for (let wIdx = 0; wIdx < line.length; wIdx++) { - let word = line[wIdx] - let metrics = ctx.measureText(row + word); - if (metrics.width > maxWidth) { - rows++ - size += row.length - console.log('--rows', rows, '--size', size) - if (rows === 4 && size < text.length) { - row = row.slice(0, -2) + '......' - } - ctx.fillText(row, x, y); - row = '' - y += lineHeight - if (rows === 4) { - break - } - } else { - row += word - } - } - - if (rows === 4) { - break - } - - if (row) { - rows++ - size += row.length - console.log('--rows', rows, '--size', size) - if (rows === 4 && size < text.length) { - row = row.slice(0, -2) + '......' - } - ctx.fillText(row, x, y); - y += lineHeight - - if (rows === 4) { - break - } - } - } - - }, draw() { uni.showLoading({ @@ -134,33 +84,23 @@ ctx.fillStyle = '#fff' ctx.fillRect(0, 0, canvas.width, canvas.height) - ctx.fillStyle = '#999999'; - const fontSize = 28 * Ratio / dpr - ctx.font = `${fontSize}px PingFangSC-regular`; - - const descX = 37 * Ratio / dpr - const descY = 751 * Ratio / dpr - const maxWidth = 677 * Ratio / dpr - const lineHeight = 45 * Ratio / dpr - const text = this.posterData.paperDesc - this.drawTextWithManualLineBreaks(ctx, text, descX, descY, maxWidth, lineHeight) - // 海报图片 const paperImage = canvas.createImage() paperImage.src = this.posterData.paperImage paperImage.onload = () => { - const x = 37 * Ratio / dpr - const y = 21 * Ratio / dpr - const w = 677 * Ratio / dpr - const h = 687 * Ratio / dpr - ctx.drawImage(paperImage, x, y, w, h) + const w = 750 * Ratio / dpr + // const h = 1184 * Ratio / dpr + const h = 890 * Ratio / dpr + ctx.drawImage(paperImage, 0, 0, w, h) //二维码图片 const coderImage = canvas.createImage() coderImage.src = this.wxCodeImage coderImage.onload = () => { - const x = 539 * Ratio / dpr - const y = 987 * Ratio / dpr + // const x = 539 * Ratio / dpr + const x = 560 * Ratio / dpr + // const y = 987 * Ratio / dpr + const y = 693 * Ratio / dpr const size = 162 * Ratio / dpr ctx.drawImage(coderImage, x, y, size, size) diff --git a/pages_order/thesis/search.vue b/pages_order/thesis/search.vue index be8f325..3e68dc5 100644 --- a/pages_order/thesis/search.vue +++ b/pages_order/thesis/search.vue @@ -20,11 +20,19 @@ @@ -55,7 +63,7 @@ mixinsListApi: 'queryThesisList', } }, - onLoad({ search, categoryOne, categoryTwo, title }) { + onLoad({ search, categoryOne, categoryTwo, title, api }) { if (search) { this.keyword = search this.queryParams.title = search @@ -67,6 +75,9 @@ if (title) { this.title = title } + if (api) { + this.mixinsListApi = api + } this.getData() }, @@ -78,8 +89,10 @@ this.getData() }, jumpToDetail(thesisId) { + let path = this.mixinsListApi == 'queryThesisList' ? '/pages_order/thesis/index' : '/pages_order/thesis/indexTwo' + uni.navigateTo({ - url: `/pages_order/thesis/index?thesisId=${thesisId}` + url: `${path}?thesisId=${thesisId}` }) }, }, @@ -136,24 +149,81 @@ .left { flex: 1; - padding: 13rpx 32rpx 35rpx 20rpx; + position: relative; + // padding: 13rpx 32rpx 35rpx 20rpx; + padding: 13rpx 70rpx 35rpx 20rpx; box-sizing: border-box; .title { font-size: 32rpx; font-weight: 700; - color: #000000; + color: $uni-color; + padding: 4rpx 16rpx; + background: #FFFFFF; + border-radius: 12rpx; + + &-box { + position: absolute; + top: 0; + z-index: 1; + display: inline-block; + padding: 4rpx; + background: linear-gradient(to right, $uni-color, #FFFFFF); + border-radius: 14rpx; + transform: translateY(50%); + } } .content { - font-size: 28rpx; + font-size: 24rpx; font-weight: 400; - color: #0F2248; + color: #000000; + white-space: pre-wrap; overflow: hidden; text-overflow: ellipsis; display:-webkit-box; //作为弹性伸缩盒子模型显示。 -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列 -webkit-line-clamp:7; //显示的行 + + &-box { + margin-top: 40rpx; + position: relative; + padding: 40rpx 16rpx; + border: 4rpx solid $uni-color; + border-radius: 20rpx; + + &:after { + content: ' '; + position: absolute; + bottom: 0; + right: 0; + width: 20rpx; + height: 40rpx; + background: #FFFFFF; + transform: translate(4rpx, 4rpx); + } + + .dot { + position: absolute; + z-index: 2; + width: 8rpx; + height: 8rpx; + background: $uni-color; + border-radius: 50%; + + &.bottom-left { + bottom: 0; + right: 16rpx; + transform: translateY(6rpx); + } + + &.top-right { + bottom: 36rpx; + right: 0; + transform: translateX(6rpx); + } + } + } } } -- 2.15.0