zm/taimed
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tijiao

Browse Source
This commit is contained in:
始于初见
2025-08-11 16:18:40 +08:00
parent 37657fa7d2
commit 54e657f53d
12 changed files with 1966 additions and 859 deletions
Download Patch File Download Diff File Expand all files Collapse all files

245
pages/articleList/PrecisionImageGrid.vue Normal file
View File

@@ -0,0 +1,245 @@
<template>
<view class="penBoxListImages com_Img_box">
<!-- tupian我设置的是数字暂无后端数据做循环啊，可替换为数组的长度 -->
<block v-for="(item, index) in imageList" wx:key="index">
<image :class="`img_list
${imageList.length == 1 ? 'com_Img_box_images1':''}
${imageList.length == 2 ? 'com_Img_box_images2':''}
${imageList.length == 3 ? 'com_Img_box_images3':''}
${imageList.length == 4 ? 'com_Img_box_images4':''}
${imageList.length == 5 ? 'com_Img_box_images5':''}
${imageList.length == 6 ? 'com_Img_box_images6':''}
${imageList.length == 7 ? 'com_Img_box_images7':''}
${imageList.length == 8 ? 'com_Img_box_images8':''}
${imageList.length == 9 ? 'com_Img_box_images9':''}`"
:src="item" mode="aspectFill" />
</block>
</view>
</template>
<script>
export default {
props: {
// 图片地址列表
imageList: {
type: Array,
required: true,
default: () => []
},
// 网格间距（rpx）
gap: {
type: Number,
default: 10
},
// 容器宽度占父元素比例
containerRatio: {
type: Number,
default: 1 // 100%宽度
}
},
methods: {
// 根据索引和总数计算每个图片的样式
getItemStyle(index, total) {
// 计算基础尺寸和间隙
const containerWidth = `calc(100% * ${this.containerRatio})`;
let width, height, gridTemplateColumns;
// 根据图片数量设置不同排列规则
switch(total) {
case 1:
// 1张图：占满容器
width = '100%';
height = '400rpx';
break;
case 2:
// 2张图：并排
width = `calc(50% - ${this.gap/2}rpx)`;
height = '250rpx';
break;
case 3:
// 3张图：1行2张，1行1张
if (index === 0) {
width = '100%';
height = '250rpx';
} else {
width = `calc(50% - ${this.gap/2}rpx)`;
height = '150rpx';
}
break;
case 4:
// 4张图：2x2网格
width = `calc(50% - ${this.gap/2}rpx)`;
height = '200rpx';
break;
default:
// 5张及以上：3列网格
width = `calc(33.333% - ${this.gap*2/3}rpx)`;
height = '180rpx';
}
return {
width,
height,
// 处理右边距（最后一列不加右边距）
marginRight: this.shouldAddMarginRight(index, total) ? `${this.gap}rpx` : '0',
// 处理下边距（最后一行不加下边距）
marginBottom: this.shouldAddMarginBottom(index, total) ? `${this.gap}rpx` : '0'
};
},
// 判断是否需要添加右边距
shouldAddMarginRight(index, total) {
if (total <= 2) return index === 0;
if (total === 3) return index === 1;
if (total === 4) return index % 2 === 0;
return (index + 1) % 3 !== 0; // 3列布局最后一列不加右边距
},
// 判断是否需要添加下边距
shouldAddMarginBottom(index, total) {
if (total <= 3) return index < total - 2;
if (total === 4) return index < 2;
// 3列布局最后一行不加下边距
const rows = Math.ceil(total / 3);
const currentRow = Math.floor(index / 3) + 1;
return currentRow < rows;
},
// 预览图片
previewImage(index) {
uni.previewImage({
current: index,
urls: this.imageList,
loop: true
});
}
}
}
</script>
<style scoped>
.com_Img_box {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
position: relative;
}
.com_Img_box_images1:nth-child(1) {
width: 100%;
height: 100%;
}
.com_Img_box_images2 {
width: 49%;
height: 100%;
}
.com_Img_box_images2:nth-child(n) {
width: 49%;
height: 100%;
}
.com_Img_box_images3 {
width: 49%;
height: 100%;
}
.com_Img_box_images3:nth-child(2){
width: 49%;
height: 49%;
}
.com_Img_box_images3:nth-child(3) {
width: 49%;
height: 49%;
position: absolute;
bottom: 0;
right: 0;
}
.com_Img_box_images4 {
width: 49%;
height: 49%;
}
.com_Img_box_images5 {
width: 69%;
height: 69%;
}
.com_Img_box_images5:nth-child(2) {
width: 28%;
height: 69%;
}
.com_Img_box_images5:nth-child(n+3):nth-child(-n+5) {
width: 32%;
height: 29%;
}
.com_Img_box_images6 {
width: 69%;
height: 69%;
}
.com_Img_box_images6:nth-child(2) {
width: 29%;
height: 34%;
}
.com_Img_box_images6:nth-child(3) {
width: 29%;
height: 34%;
position: absolute;
bottom: 29%;
right: 0;
}
.com_Img_box_images6:nth-child(n+4):nth-child(-n+5) {
width: 34%;
height: 29%;
}
.com_Img_box_images6:nth-child(6) {
width: 29%;
height: 29%;
}
.com_Img_box_images7 {
width: 32%;
height: 69%;
}
.com_Img_box_images7:nth-child(3) {
width: 32%;
height: 34%;
}
.com_Img_box_images7:nth-child(4) {
width: 32%;
height: 34%;
position: absolute;
bottom: 29%;
right: 0;
}
.com_Img_box_images7:nth-child(n+5):nth-child(-n+7) {
width: 32%;
height: 29%;
}
.com_Img_box_images8 {
width: 32%;
height: 69%;
}
.com_Img_box_images8:nth-child(n+2):nth-child(-n+3) {
width: 32%;
height: 34%;
}
.com_Img_box_images8:nth-child(4) {
width: 32%;
height: 34%;
position: absolute;
right:33%;
bottom: 29%;
}
.com_Img_box_images8:nth-child(5) {
width: 32%;
height: 34%;
position: absolute;
right:0;
bottom: 29%;
}
.com_Img_box_images8:nth-child(n+6):nth-child(-n+8) {
width: 32%;
height: 29%;
}
.com_Img_box_images9 {
width: 32%;
height: 32%;
}
</style>

1161
pages/articleList/article.vue
View File

File diff suppressed because it is too large Load Diff

3
pages/articleList/common-editor.vue
View File

@@ -1,5 +1,6 @@
<template>
<view class="richtext" style="height: 100%;">
<piaoyiEditor :height="height" :placeholder="placeholder" :values="values" @changes="saveContens" :readOnly="readOnly" :photoUrl="photoUrl" :api="api" :name="name"/>
@@ -43,6 +44,8 @@
methods: {
saveContens(e) {
this.txt = e.html
this.$emit('saveContens', this.txt)
}
},
onShareAppMessage(res) {

269
pages/articleList/index.vue
View File

@@ -4,18 +4,28 @@
<template v-slot:right>
<view class="top_right" @tap="createFolder">
<uni-icons type="folder-add" size="17" color="#fff"></uni-icons>
<text>新建文章</text>
<text>发布文章</text>
</view>
</template>
</z-nav-bar>
<view class="doctors_module" :style="`top: ${42 + statusBarHeight}px;`">
<view class="cateList flexbox" style="background-color: #f8f7fc">
<common-sticky
itemStyle="width:50%; height: 38px;font-size:24rpx;"
:list="tabsList"
label="title"
:currentCateIndex="currentCateIndex"
@handleselectCate="ordersTabCLi"
></common-sticky>
</view>
</view>
<scroll-view
scroll-y="true"
:scroll-top="scrollTop"
@scrolltolower="loadMore"
style="
height: calc(100vh - 220rpx);
margin-top: 100rpx;
height: calc(100vh - 180rpx);
margin-top: 65rpx;
padding-bottom: 120rpx;
"
v-if="show == true"
@@ -43,41 +53,58 @@
></image> -->
<view class="item_right">
<view style="display: flex; align-items: center">
<text class="card_label" v-if="statusTitle" :style="`background-color:${statusColor} ;`">{{ statusTitle }}</text>
<text class="item_time">{{ item.createTime }}</text></view
>
<view class="item_top">
<view class="item_name">{{ item.title }}</view>
<rich-text
class="item_content"
:nodes="item.information"
></rich-text>
<!-- <rich-text
class="item_content"
:nodes="item.chiefComplaint"
></rich-text> -->
</view>
<view style="margin-top: 20rpx" v-if="item.img">
<u-upload
:fileList="item.fileList1"
multiple
width="50"
height="50"
:disabled="true"
:previewFullImage="true"
@click.stop="handleClick"
<view class="item_top"
>
</u-upload>
<PrecisionImageGrid
:imageList="item.fileList1"
style="
width: 170rpx;
height: 170rpx;
/* position: absolute;
top: 0;
left: 0; */
"
/>
<view class="right">
<view class="item_name hidden2">{{ item.title }}</view>
<view class="item_time"
><text style="margin-right: 30rpx; color: #e38d54"
>医案</text
>{{
item.createTime ? item.createTime.split(" ")[0] : ""
}}</view
>
<view class="item_time item_bottom">
<view class="left">
<view><text>{{ item.readCount?item.readCount:0 }}</text>阅读</view
><text class="drop">·</text>
<view><text>{{ item.likeCount?item.likeCount:0 }}</text>点赞</view
><text class="drop">·</text>
<view><text>{{ item.commentCount?item.commentCount:0 }}</text>评论</view></view
>
<view style="color: #5188e5"
><uni-icons
type="redo-filled"
size="18"
color="#5188e5"
></uni-icons
>分享</view
>
</view>
</view>
</view>
<view class="list_item_bt">
<!-- <view class="list_item_bt">
<text class="list_item_study" v-if="taihumedId == 0"
>编辑文章</text
>
<text class="list_item_study" v-else>文章详情</text>
</view>
</view> -->
<!-- <text class="item_con">{{ item.taihuTalent.map(talent => talent.name).join(' ') }}</text> -->
</view>
</view>
@@ -96,7 +123,9 @@
<script>
import $http from "@/config/requestConfig.js";
import PrecisionImageGrid from "./PrecisionImageGrid.vue";
export default {
components: { PrecisionImageGrid },
data() {
return {
tabsList: [],
@@ -108,8 +137,8 @@ export default {
limit: 10,
courseName: "",
taihumedId: null,
statusTitle: '',
statusColor: '',
statusTitle: "",
statusColor: "",
timer: null,
showText: false,
@@ -140,9 +169,24 @@ export default {
this.getTabData();
},
onShow() {
this.getListData(this.taihumedId);
// this.getListData(this.taihumedId);
},
methods: {
getGridColumns(length) {
if (length === 1) return "1fr"; // 1 张图 → 1 列
if (length === 2) return "repeat(2, 1fr)"; // 2 张图 → 2 列
if (length === 3) return "repeat(3, 1fr)"; // 3 张图 → 3 列
if (length === 4) return "repeat(2, 1fr)"; // 4 张图 → 2 列（类似朋友圈）
return "repeat(3, 1fr)"; // 其他数量 → 3 列
},
// 预览图片
previewImage(idx) {
uni.previewImage({
current: idx,
urls: this.imgList,
});
},
createFolder() {
uni.navigateTo({
url: `/pages/articleList/article?navTitle=创建文章&title=创建文章&type=add`,
@@ -174,15 +218,12 @@ export default {
// .then(res=> {
// if (res.list&&res.list.length>0) {
this.tabsList = [
{ id: 0, title: "草稿箱", statusTitle: '' },
{ id: 1, title: "待审核",statusTitle: '待审核',color:'#f59442' },
{ id: 3, title: "质量检测中",statusTitle: '检测中' ,color:'#22be98' },
{ id: 4, title: "已通过",statusTitle: '已通过' ,color:'#22be98' },
{ id: 2, title: "未通过",statusTitle: '未通过',color:"#e78084" },
{ id: 1, title: "已发布", statusTitle: "" },
{ id: 0, title: "发布失败", statusTitle: "发布失败", color: "#f59442" },
];
this.taihumedId = this.tabsList[0].id;
this.statusTitle = '';
this.statusColor = '';
this.statusTitle = "";
this.statusColor = "";
this.getListData(this.taihumedId);
// }
// });
@@ -202,10 +243,12 @@ export default {
});
this.$http
.request({
url: "common/articleList/articleRecordsList",
url: "common/taihuTalentArticle/myArticleList",
method: "POST",
data: {
state: taihumedId,
current: this.current,
limit: this.limit,
showFlag: taihumedId,
},
header: {
"Content-Type": "application/json",
@@ -213,39 +256,38 @@ export default {
})
.then((res) => {
uni.hideLoading();
this.list=[...res.medicalRecordsList].filter(e=>e.data)
this.list = [...this.list].map((e) => {
return {
...e,
fileList1: e.img
? e.img.split(",").map((image, i) => ({
uid: i, // 假设 id 是唯一标识符
name: i, // 文件名
status: "done", // 状态
url: image, // 文件 URL
}))
: [],
};
});
this.count = this.list.length; //总数
let length = this.list.length;
if (res.medicalRecordsList && length > 0) {
this.show = true;
// //如果返回的数据少于每页数量，表示没有更多数据
// if(this.count==length || length < this.limit ||this.count/this.current==this.limit){
// this.noMore = true;
// }
// this.list = [...this.list, ...res.pageRes.records];
// this.current += 1; //更新页码
// //显示提示语
// this.showText = true;
// if(this.current==2||type){
// this.scrollTop = 0
// this.$nextTick(() => {
// this.scrollTop = 0.1; // 确保触发滚动
// })
// }
this.count = res.page.total; //总数
let length = res.page.records.length;
if (res.page.records && length > 0) {
this.show = true;
//如果返回的数据少于每页数量，表示没有更多数据
if (
this.count == length ||
length < this.limit ||
this.count / this.current == this.limit
) {
this.noMore = true;
}
this.list = [
...this.list,
...res.page.records.map((e) => {
return {
...e,
fileList1: e.img ? e.img.split(",") : [],
};
}),
];
this.current += 1; //更新页码
//显示提示语
this.showText = true;
if (this.current == 2 || type) {
this.scrollTop = 0;
this.$nextTick(() => {
this.scrollTop = 0.1; // 确保触发滚动
});
}
} else {
this.show = false;
this.null_text = "暂无数据";
@@ -308,21 +350,25 @@ export default {
.content {
height: 100%;
overflow: auto;
background-color: #fff;
background-color: #fff !important;
}
.doctors_list {
margin: 0 20rpx 20rpx;
margin: 0 30rpx 30rpx;
}
.doctors_item {
// border: 1rpx solid $themeColor;
border-radius: 15rpx;
margin-bottom: 20rpx;
padding: 12rpx 30rpx 60rpx;
// border-radius: 15rpx;
// margin-bottom: 20rpx;
padding: 30rpx 0;
box-sizing: border-box;
display: flex;
align-items: center;
position: relative;
background-color: #fff;
box-shadow: 0 1px 8px #e3e1e1;
border-top: 2rpx solid #eee;
border-bottom: 2rpx solid #eee;
// background-color: #fff;
// box-shadow: 0 1px 8px #e3e1e1;
}
.item_image {
display: block;
@@ -336,20 +382,29 @@ export default {
// margin-left: 30rpx;
// padding-bottom: 20rpx;
}
.item_time {
color: #8e8d93;
margin-top: 14rpx;
line-height: 30rpx;
}
.item_top {
// display: flex;
// align-items: center;
display: flex;
align-items: center;
justify-content: space-between;
// line-height: 30rpx;
margin-top: 8rpx;
// margin-top: 8rpx;
}
.right{
width: calc(100% - 186rpx);
}
.item_name {
font-size: 34rpx;
font-size: 32rpx;line-height: 26rpx;
white-space: pre-wrap;
word-wrap: break-word; /* 避免长单词造成溢出 */
color: #333;
color: #1b1b1d;
font-weight: bold;
margin-bottom: 8rpx;
margin-bottom: 12rpx;
}
.item_content {
h1 {
@@ -509,4 +564,40 @@ export default {
// transform: rotate(45deg); /* 旋转45度，形成斜角 */
// z-index: -1;
// }
.item_bottom {
display: flex;
align-items: center;
justify-content: space-between;
}
.item_bottom {
.left {
display: flex;
align-items: center;
}
.drop {
margin: 0 10rpx;
}
text {
margin-right: 10rpx;
}
}
.demo-section {
background-color: #fff;
padding: 20rpx;
border-radius: 10rpx;
margin-bottom: 20rpx;
}
.demo-title {
font-size: 28rpx;
margin-bottom: 15rpx;
display: block;
color: #333;
}
.hidden2{
line-height: 24px;
max-height: 48px;
height: auto;
}
</style>

16
pages/doctors/index.vue
View File

@@ -7,7 +7,7 @@
:backState="2000"
></z-nav-bar>
<view class="doctors_module" :style="`top: ${42 + statusBarHeight}px;`">
<!-- <view class="tab-bar">
<view class="tab-bar">
<view
class="tab-item left-tab"
:class="{ active: activeTab === 0 }"
@@ -22,7 +22,7 @@
>
名医天地
</view>
</view> -->
</view>
<template v-if="activeTab == 0">
<view class="cateList flexbox" >
<common-sticky
@@ -58,15 +58,14 @@
</view>
</template>
</view>
<!-- height: calc(100vh - ${activeTab==0?320:280}rpx);
margin-top: ${activeTab==0?280:180}rpx; -->
<scroll-view
scroll-y="true"
:scroll-top="scrollTop"
@scrolltolower="loadMore"
:style="`
height: calc(100vh - ${activeTab==0?280:280}rpx);
margin-top: ${activeTab==0?180:180}rpx;
height: calc(100vh - ${activeTab==0?320:280}rpx);
margin-top: ${activeTab==0?260:180}rpx;
padding-bottom: 140rpx;`
"
v-if="show == true"
@@ -230,7 +229,10 @@ export default {
changeActiveTab(e){
this.activeTab=e
if(e==0){
this.taihumedId = this.tabsList[0].id;
if(!this.taihumedId){
this.taihumedId = this.tabsList[0].id;
}
this.getListData(this.taihumedId);
}
else{

5
pages/my/index.vue
View File

@@ -270,6 +270,11 @@ export default {
url: "/pages/curriculum/index/index",
type: "pageJump",
},
{
name: "我的文章",
url: "/pages/articleList/index",
type: "pageJump",
},
{
name: "个人资料",
url: "/pages/my/persData",