This commit is contained in:
zoujiandong
2025-06-09 08:38:59 +08:00
parent 6684bf1e29
commit db955ff4f3
15 changed files with 1565 additions and 550 deletions
+351 -236
View File
@@ -116,22 +116,49 @@
</view>
<view class="toolbox">
<view class="cell">
<up--image
:src="photoImg"
class="headImg"
<u-upload
:fileList="imgList"
@afterRead="afterRead"
@delete="deletePic"
name="imgupload"
multiple
:maxCount="1"
width="32rpx"
height="32rpx"
></up--image>
<view class="name">添加图片</view>
>
<view class="cell">
<up--image
:src="photoImg"
class="headImg"
width="32rpx"
height="32rpx"
></up--image>
<view class="name">添加图片</view>
</view>
</u-upload>
</view>
<view class="cell">
<up--image
:src="videoImg"
class="headImg"
<u-upload
:fileList="videoList"
@afterRead="afterRead"
accept="video"
name="videoupload"
multiple
maxDuration="3600"
:maxCount="1"
width="32rpx"
height="32rpx"
></up--image>
<view class="name">添加视频</view>
>
<view class="cell">
<up--image
:src="videoImg"
class="headImg"
width="32rpx"
height="32rpx"
></up--image>
<view class="name">添加视频</view>
</view>
</u-upload>
</view>
<view class="cell">
<up--image
@@ -143,6 +170,51 @@
<view class="name">添加小标题</view>
</view>
</view>
<view class="imgbox">
<view class="imgunit">
<up--image
src="https://cdn.uviewui.com/uview/album/1.jpg"
radius="6"
width="150rpx"
height="150rpx"
@click="previewImg"
></up--image>
<view class="close">
<up-icon name="close-circle" color="#666" size="18"></up-icon>
</view>
</view>
</view>
<view class="imgbox">
<view class="close">
<up-icon name="close-circle" color="red" size="30"></up-icon>
</view>
<video
class="myVideo"
src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
@error="videoErrorCallback"
controls
></video>
</view>
<view class="textcell" v-if="showMinTitle">
<view class="titlebox">
<view class="title">小标题</view>
<up-icon name="trash" color="#3CC7C0" size="24" @click="delTitle"></up-icon>
</view>
<view class="iptbox">
<up--textarea
maxlength="-1"
autoHeight
v-model="form.title"
placeholder="请输入小标题"
></up--textarea>
</view>
</view>
<!-- <view class="imgbox">
<view class="imgcell">
<up--image src="https://cdn.uviewui.com/uview/album/1.jpg" mode="widthFix"></up--image>
</view>
</view> -->
</view>
</view>
<view class="bottom">
@@ -161,9 +233,6 @@
<view class="right">发布</view>
</view>
<up-popup
:round="10"
:show="showVote"
@@ -186,87 +255,95 @@
placeholder="请输入投票标题"
border="surround"
v-model="value"
clearable
clearable
></up-input>
</view>
<view class="row">
<view class="row">
<up-input
placeholder="输入选项,建议少于16个字"
border="surround"
v-model="value"
clearable
clearable
></up-input>
</view>
<view class="row">
<view class="row">
<up-input
placeholder="输入选项,建议少于16个字"
border="surround"
v-model="value"
clearable
clearable
></up-input>
</view>
<view class="row">
<view class="row">
<up-input
placeholder="输入选项,建议少于16个字"
border="surround"
v-model="value"
clearable
clearable
></up-input>
</view>
<view class="add">
<up-icon name="plus" color="#4B5563" size="18"></up-icon>
<view class="desc">添加选项</view>
</view>
<view class="expire">
<view class="name">有效期</view>
<view class="right">
<view class="minus">-</view>
<view class="day">7</view>
<view class="plus">+</view>
</view>
</view>
<view class="tips">友情提醒为保证投票结果准确性帖子发布后投票无法修改</view>
<view class="add">
<up-icon name="plus" color="#4B5563" size="18"></up-icon>
<view class="desc">添加选项</view>
</view>
<view class="expire">
<view class="name">有效期</view>
<view class="right">
<view class="minus">-</view>
<view class="day">7</view>
<view class="plus">+</view>
</view>
</view>
<view class="tips"
>友情提醒为保证投票结果准确性帖子发布后投票无法修改</view
>
</view>
<view class="confirm">确认</view>
<view class="del">删除投票</view>
<view class="confirm">确认</view>
<view class="del">删除投票</view>
</view>
</up-popup>
<up-popup
:round="10"
zIndex="999999"
:show="showDraft"
mode="bottom"
@close="closeDraft"
@open="openDraft"
<up-popup
:round="10"
zIndex="999999"
:show="showDraft"
mode="bottom"
@close="closeDraft"
@open="openDraft"
>
<view class="draftpop">
<view class="titlebox">草稿箱
<view class="close" @click="closeDraft"><up-icon name="close" color="#4B5563" size="20"></up-icon></view>
</view>
<view class="draftlist">
<view class="cell">
<view class="title">2025: 肝硬化门静脉高压症食管胃底静脉曲张破裂出血诊治专家共识</view>
<view class="smalltitle">版2025 APASL临床实践指南</view>
<view class="deal">
<view class="time">编辑于03-11</view>
<view class="right">
<view class="del"><up-icon name="trash" color="#4B5563" size="16"></up-icon>删除</view>
<view class="edit"><up-icon name="edit-pen" color="#fff" size="17"></up-icon>编辑</view>
</view>
</view>
</view>
</view>
</view>
</up-popup>
<view class="draftpop">
<view class="titlebox"
>草稿箱
<view class="close" @click="closeDraft"
><up-icon name="close" color="#4B5563" size="20"></up-icon
></view>
</view>
<view class="draftlist">
<view class="cell">
<view class="title"
>2025:
肝硬化门静脉高压症食管胃底静脉曲张破裂出血诊治专家共识</view
>
<view class="smalltitle">版2025 APASL临床实践指南</view>
<view class="deal">
<view class="time">编辑于03-11</view>
<view class="right">
<view class="del"
><up-icon name="trash" color="#4B5563" size="16"></up-icon
>删除</view
>
<view class="edit"
><up-icon name="edit-pen" color="#fff" size="17"></up-icon
>编辑</view
>
</view>
</view>
</view>
</view>
</view>
</up-popup>
</div>
</template>
<script setup>
@@ -283,6 +360,7 @@ const value = ref("");
const showVote = ref(false);
const showDraft = ref(true);
const showMinTitle = ref(false);
const closeVote = () => {
showVote.value = false;
};
@@ -292,186 +370,218 @@ const openVote = () => {
const closeDraft = () => {
showDraft.value = false;
};
const delTitle = () => {
showMinTitle.value = false;
};
const openDraft = () => {
showDraft.value = true;
};
const afterRead=(file) => {
}
const previewImg = () => {
uni.previewImage({
current: "https://example.com/image1.jpg",
urls: ["https://example.com/image1.jpg", "https://example.com/image2.jpg"],
});
};
</script>
<style lang='scss' scoped>
.draftpop{
.titlebox{
text-align: center;
padding: 30rpx;
font-size: 31rpx;
color: #111827;
position: relative;
.close{
position: absolute;
top:20rpx;
right:30rpx;
}
}
.draftlist{
height:calc(100vh - 500rpx);
overflow-y: scroll;
.cell{
padding-bottom: 34rpx;
border-bottom:2rpx solid #E5E7EB;
.title{
margin:15rpx 30rpx 0;
font-size: 36rpx;
color: #111827;
line-height: 46rpx;
}
.smalltitle{
margin:4px 30rpx 0;
font-size: 30rpx;
color: #666666;
line-height: 38rpx;
}
.deal{
margin:36rpx 30rpx 0;
display: flex;
justify-content: space-between;
align-items: center;
.time{
font-size: 26rpx;
color: #9CA3AF;
}
.right{
display: flex;
align-items: center;
}
.del{
width: 138rpx;
height: 62rpx;
background: #F3F4F6;
display: flex;
border-radius: 20rpx;
align-items: center;
font-size: 27rpx;
color: #4B5563;
justify-content: center;
}
.edit{
margin-left: 23rpx;
display: flex;
align-items: center;
justify-content: center;
width: 192rpx;
height: 62rpx;
font-size: 27rpx;
color: #FFFFFF;
background: #3CC7C0;
border-radius: 20rpx;
}
}
}
.myVideo {
width: 100%;
border-radius: 15rpx;
}
.imgbox {
margin: 0 30rpx 30rpx;
position: relative;
.close {
position: absolute;
top: 0rpx;
right: 0;
z-index: 9999;
}
.imgunit {
width: 150rpx;
height: 150rpx;
position: relative;
.close {
position: absolute;
top: 0rpx;
right: 0;
}
}
}
.expire{
margin-top: 46rpx;
padding: 0 30rpx;
display: flex;
align-items: center;
justify-content: space-between;
.name{
font-size: 31rpx;
color: #111827;
}
.right{
display: flex;
align-items: center;
.day{
min-width:50rpx;
text-align: center;
}
.minus{
width: 62rpx;
height: 62rpx;
display: flex;
align-items: center;
justify-content: center;
background: #F5F5F5;
border-radius: 50%;
font-size: 50rpx;
}
.plus{
display: flex;
align-items: center;
font-size:50rpx;
justify-content: center;
width: 62rpx;
height: 62rpx;
background: #F5F5F5;
border-radius: 50%;
}
}
.draftpop {
.titlebox {
text-align: center;
padding: 30rpx;
font-size: 31rpx;
color: #111827;
position: relative;
.close {
position: absolute;
top: 20rpx;
right: 30rpx;
}
}
.draftlist {
height: calc(100vh - 500rpx);
overflow-y: scroll;
.cell {
padding-bottom: 34rpx;
border-bottom: 2rpx solid #e5e7eb;
.title {
margin: 15rpx 30rpx 0;
font-size: 36rpx;
color: #111827;
line-height: 46rpx;
}
.smalltitle {
margin: 4px 30rpx 0;
font-size: 30rpx;
color: #666666;
line-height: 38rpx;
}
.deal {
margin: 36rpx 30rpx 0;
display: flex;
justify-content: space-between;
align-items: center;
.time {
font-size: 26rpx;
color: #9ca3af;
}
.right {
display: flex;
align-items: center;
}
.del {
width: 138rpx;
height: 62rpx;
background: #f3f4f6;
display: flex;
border-radius: 20rpx;
align-items: center;
font-size: 27rpx;
color: #4b5563;
justify-content: center;
}
.edit {
margin-left: 23rpx;
display: flex;
align-items: center;
justify-content: center;
width: 192rpx;
height: 62rpx;
font-size: 27rpx;
color: #ffffff;
background: #3cc7c0;
border-radius: 20rpx;
}
}
}
}
}
.row{
padding: 0 30rpx;
margin-bottom: 23rpx;
.expire {
margin-top: 46rpx;
padding: 0 30rpx;
display: flex;
align-items: center;
justify-content: space-between;
.name {
font-size: 31rpx;
color: #111827;
}
.right {
display: flex;
align-items: center;
.day {
min-width: 50rpx;
text-align: center;
}
.minus {
width: 62rpx;
height: 62rpx;
display: flex;
align-items: center;
justify-content: center;
background: #f5f5f5;
border-radius: 50%;
font-size: 50rpx;
}
.plus {
display: flex;
align-items: center;
font-size: 50rpx;
justify-content: center;
width: 62rpx;
height: 62rpx;
background: #f5f5f5;
border-radius: 50%;
}
}
}
.row {
padding: 0 30rpx;
margin-bottom: 23rpx;
:deep(.u-input){
background: #F5F5F5;
}
:deep(.u-input--radius){
border-radius: 15rpx;
}
:deep(.u-input__content__field-wrapper__field){
height:92rpx;
}
:deep(.u-input) {
background: #f5f5f5;
}
:deep(.u-input--radius) {
border-radius: 15rpx;
}
:deep(.u-input__content__field-wrapper__field) {
height: 92rpx;
}
}
.first{
margin-bottom: 47rpx;
.first {
margin-bottom: 47rpx;
}
.votepop {
.confirm{
margin:39rpx 30rpx 0;
height: 92rpx;
background: #3CC7C0;
border-radius: 15rpx;
display: flex;
align-items: center;
font-size: 31rpx;
color: #FFFFFF;
justify-content: center;
}
.del{
margin:30rpx 30rpx 30rpx;
height: 92rpx;
background: #fff;
border-radius: 15rpx;
font-size: 31rpx;
color: #666666;
display: flex;
align-items: center;
justify-content: center;
}
.tips{
margin-top: 30rpx;
font-size: 27rpx;
color: #9CA3AF;
line-height: 38rpx;
padding:0 30rpx;
}
.add{
margin:0 30rpx;
display: flex;
align-items: center;
height: 92rpx;
justify-content: center;
background: #F5F5F5;
border-radius: 15rpx;
font-size: 31rpx;
color: #4B5563;
.desc{
margin-left: 10rpx;
}
}
.confirm {
margin: 39rpx 30rpx 0;
height: 92rpx;
background: #3cc7c0;
border-radius: 15rpx;
display: flex;
align-items: center;
font-size: 31rpx;
color: #ffffff;
justify-content: center;
}
.del {
margin: 30rpx 30rpx 30rpx;
height: 92rpx;
background: #fff;
border-radius: 15rpx;
font-size: 31rpx;
color: #666666;
display: flex;
align-items: center;
justify-content: center;
}
.tips {
margin-top: 30rpx;
font-size: 27rpx;
color: #9ca3af;
line-height: 38rpx;
padding: 0 30rpx;
}
.add {
margin: 0 30rpx;
display: flex;
align-items: center;
height: 92rpx;
justify-content: center;
background: #f5f5f5;
border-radius: 15rpx;
font-size: 31rpx;
color: #4b5563;
.desc {
margin-left: 10rpx;
}
}
.titlebox {
padding: 0 30rpx;
height: 86rpx;
@@ -489,8 +599,8 @@ const openDraft = () => {
}
}
.votecon {
max-height:calc(100vh - 530rpx);
overflow-y: scroll;
max-height: calc(100vh - 530rpx);
overflow-y: scroll;
.titlebox {
border: none;
margin: 30rpx 0 20rpx;
@@ -626,6 +736,11 @@ const openDraft = () => {
.textcell {
padding: 0 30rpx;
margin-top: 25rpx;
.titlebox {
display: flex;
align-items: center;
justify-content: space-between;
}
}
.row {