Merge branch 'master' of http://150.158.33.144:3000/lalalashen/MoeNovaClient

components/CommentSection/CommentSection.vue

@@ -1,19 +1,35 @@
 <template>
 	<view class="comment-section">
 		<view class="section-header">
-			<text class="fa fa-comments"></text>
-			<text class="section-title">评论区</text>
-			<text class="comment-count">({{ tableTotal }})</text>
+			<!-- <text class="fa fa-comments"></text> -->
+			<!-- <text class="section-title">评论区</text> -->
+			<text class="comment-count">共 {{ tableTotal }} 条评论</text>
 		</view>
 
-		<CComment ref="ccRef" :myInfo="myInfo" :userInfo="userInfo" :tableData="tableData"
-			:tableTotal.sync="tableTotal" :deleteMode="deleteMode" @likeFun="likeFun" @replyFun="replyFun"
-			@deleteFun="deleteFun"></CComment>
+		<CComment ref="ccRef" :myInfo="myInfo" :userInfo="userInfo" :tableData="tableData" :tableTotal.sync="tableTotal"
+			:deleteMode="deleteMode" @likeFun="likeFun" @replyFun="replyFun" @deleteFun="deleteFun"></CComment>
 
 		<view class="comment-button" @tap="openComment">
 			<text class="fa fa-pencil"></text>
 			<text>发表新评论</text>
 		</view>
+		<view class="bottomFixed"  @tap="openComment">
+			<view class="inbutBox">
+				<view class="left-box">
+					<image src="@/static/icon/cz_icon_xiugaifengmian.png"></image>
+					<text>发表你的想法...</text>
+				</view>
+				<view class="emoji-trigger" >
+					<text class="fa fa-smile-o"></text>
+				</view>
+			</view>
+			<view class="giveTheThumbsUpBox">
+				<image v-if="true" src="@/static/icon/icon-19.png"></image>
+				<image v-else src="@/static/icon/icon-18.png"></image>
+				<!-- {{}} -->
+				0
+			</view>
+		</view>
 	</view>
 </template>
 
@@ -71,8 +87,11 @@ export default {
 				success: (res) => {
 					console.log("评论列表:", res.data);
 					if (res.data.success == "yes") {
+
 						this.$set(this, 'tableData', res.data.list);
 						this.tableTotal = res.data.total;
+						let newData = res.data.total
+						this.$emit('totalNumberOfComments', newData);
 						console.log("tabddd", this.tableData)
 					} else {
 						uni.showToast({
@@ -90,7 +109,7 @@ export default {
 			let ccRef = this.$refs["ccRef"];
 			ccRef.newCommentFun();
 		},
-		likeFun({params}, callback) {
+		likeFun({ params }, callback) {
 			console.log("likeFun", params);
 			uni.request({
 				url: this.$apiHost + '/Article/zanComment',
@@ -114,7 +133,7 @@ export default {
 				}
 			});
 		},
-		replyFun({params}, callback) {
+		replyFun({ params }, callback) {
 			console.log("replyFun", {
 				uuid: getApp().globalData.uuid,
 				type: this.type,
@@ -155,8 +174,8 @@ export default {
 				}
 			});
 		},
-		deleteFun({params, mode}, callback) {
-			console.log("deleteFun", {params, mode});
+		deleteFun({ params, mode }, callback) {
+			console.log("deleteFun", { params, mode });
 			const idsString = Array.isArray(params) ? params.join(',') : params.toString();
 
 			console.log("删除评论", idsString, mode)
@@ -186,7 +205,8 @@ export default {
 					});
 				}
 			});
-		}
+		},
+
 	}
 }
 </script>
@@ -216,9 +236,11 @@ export default {
 		}
 
 		.comment-count {
-			font-size: 28rpx;
-			color: #999;
+			font-size: 28rpx; 
 			margin-left: 10rpx;
+			font-family: 'PingFang SC-Medium';
+			font-weight: 400;
+			color: #1F1F1F;
 		}
 	}
 
@@ -247,5 +269,53 @@ export default {
 			background-color: #f0f0f0;
 		}
 	}
+
+	.bottomFixed {
+		width: 100vw;
+		height: 104rpx;
+		padding: 20rpx 32rpx 16rpx 32rpx;
+		background-color: #fff;
+		// position: fixed;
+		left: 0;
+		bottom: var(--window-bottom);
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		.inbutBox {
+			background: #F6F6F6;
+			border-radius: 34rpx;
+			width: 576rpx;
+			height: 68rpx;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding: 24rpx 18rpx;
+			.left-box{
+				display: flex;
+				align-items: center;
+				
+			}
+			image{
+				width: 32rpx;
+				height: 32rpx;
+				margin-right: 12rpx;
+			}
+			.emoji-trigger{
+				font-size: 48rpx;
+			}
+		}
+		.giveTheThumbsUpBox{
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			 
+			image{
+				width: 40rpx;
+				height: 40rpx;
+				margin-right: 10rpx;
+			}
+		}
+	}
+
 }
 </style>

components/cc-comment/cc-comment.vue

@@ -1,5 +1,5 @@
 <template>
-	<view>
+	<view> 
 		<view class="c_total">评论 {{ tableTotal }}</view>
 		<template v-if="dataList && dataList.length">
 			<view class="c_comment" v-for="(item1, index1) in dataList" :key="item1.id">
@@ -30,9 +30,10 @@
 		</template>
 		<!-- 空盒子 -->
 		<view class="empty_box" v-else>
-			<uni-icons type="chatboxes" size="36" color="#c0c0c0"></uni-icons>
+			<!-- <uni-icons type="chatboxes" size="36" color="#c0c0c0"></uni-icons> -->
+			 <image src="@/static/icon/quexing_01.png" style="width: 380rpx; height: 308rpx;"></image>
 			<view>
-				<span class="txt"> 这里是一片荒草地, </span>
+				<span class="txt"> 来鼓励一下作者吧~ </span>
 				<span class="txt click" @click="() => newCommentFun()">说点什么...</span>
 			</view>
 		</view>
@@ -58,10 +59,28 @@
 							:focus="focus"
 							maxlength="300"
 							auto-height
+							@focus="onTextareaFocus"
+							@keydown="handleKeydown"  
 						></textarea>
+						<view class="emoji-trigger" @tap="toggleEmojiPanel">
+							<text class="fa fa-smile-o"></text>
+						</view>
 					</view>
 					<view class="send_btn" @tap="() => sendClick()">发送</view>
 				</view>
+				<!-- 表情面板 -->
+				<view class="emoji-panel" v-if="showEmojiPanel">
+					<view class="emoji-grid">
+						<view 
+							class="emoji-item" 
+							v-for="(emoji, index) in emojiList" 
+							:key="index"
+							@tap="selectEmoji(emoji)"
+						>
+							{{ emoji }}
+						</view>
+					</view>
+				</view>
 			</view>
 		</uni-popup>
 		<!-- 删除弹窗 -->
@@ -128,16 +147,25 @@
 			},
 		},
 		data() {
-			return {
-				dataList: [], // 渲染数据(前端的格式)
-				replyTemp: {}, // 回复临时数据
-				isNewComment: false, // 是否为新评论
-				focus: false, // 评论弹窗
-				commentValue: "", // 输入框值
-				commentPlaceholder: "说点什么...", // 输入框占位符
-				delTemp: {}, // 删除临时数据
-			};
-		},
+		return {
+			dataList: [], // 渲染数据(前端的格式)
+			replyTemp: {}, // 回复临时数据
+			isNewComment: false, // 是否为新评论
+			focus: false, // 评论弹窗
+			commentValue: "", // 输入框值
+			commentPlaceholder: "说点什么...", // 输入框占位符
+			delTemp: {}, // 删除临时数据
+			showEmojiPanel: false, // 是否显示表情面板
+			// emojiList: [
+			// 	'😊', '😂', '🤣', '❤️', '😍', '🥰', '😘', '😭', 
+			// 	'😅', '😉', '🤔', '😤', '😡', '🥺', '😴', '😷',
+			// 	'👍', '👎', '👏', '🙌', '🤝', '🙏', '💪', '🎉',
+			// 	'✨', '💫', '⭐', '🌟', '💥', '💯', '♥️', '💕'
+			// ], // 表情列表
+			emojiList: ['😀', '😃', '😄', '😁', '😆', '😅', '😂', '🤣', '🥲', '😊', '😇', '🙂', '🙃', '😉', '😌', '😍', '🥰', '😘', '😗', '😙', '😚', '😋', '😛', '😝', '😜', '🤪', '🤨', '🧐', '🤓', '😎', '🥸', '🤩', '🥳', '😏', '😒', '😞', '😔', '😟', '😕', '🙁', '☹️', '😣', '😖', '😫', '😩', '🥺', '😢', '😭', '😤', '😠', '😡', '🤬', '🤯', '😳', '🥵', '🥶', '😱', '😨', '😰', '😥', '😓', '🤗', '🤔', '🤭', '🤫', '🤥', '😶', '😐', '😑', '😬', '🙄', '😯', '😦', '😧', '😮', '😲', '🥱', '😴', '🤤', '😪', '😵', '🤐', '🥴', '🤢', '🤮', '🤧', '😷', '🤒', '🤕', '🤑', '🤠'
+			]
+		};
+	},
 		watch: {
 			tableData: {
 				handler(newVal) {
@@ -216,15 +244,29 @@
 				this.$refs["cPopupRef"].open();
 			},
 			// 评论弹窗
-			popChange(e) {
-				// 关闭弹窗
-				if (!e.show) {
-					this.commentValue = ""; // 清空输入框值
-					this.replyTemp = {}; // 清空被回复人信息
-					this.isNewComment = false; // 恢复是否为新评论默认值
-				}
-				this.focus = e.show;
-			},
+	popChange(e) {
+		// 关闭弹窗
+		if (!e.show) {
+			this.commentValue = ""; // 清空输入框值
+			this.replyTemp = {}; // 清空被回复人信息
+			this.isNewComment = false; // 恢复是否为新评论默认值
+			this.showEmojiPanel = false; // 隐藏表情面板
+		}
+		this.focus = e.show;
+	},
+	// 切换表情面板显示状态
+	toggleEmojiPanel() {
+		this.showEmojiPanel = !this.showEmojiPanel;
+	},
+	// 选择表情
+	selectEmoji(emoji) {
+		this.commentValue += emoji;
+	},
+	// 输入框获取焦点时
+	onTextareaFocus() {
+		// 可以选择不关闭表情面板，让用户同时使用键盘和表情
+		// this.showEmojiPanel = false;
+	},
 			// 发送评论
 			sendClick({
 				item1,
@@ -435,11 +477,35 @@
 					...this.dataList[index1].children.slice(0, 1) // 截取1条评论
 				);
 			},
+			handleKeydown(event) { // 新增方法
+				console.log(event.key, event.shiftKey);
+				
+				if (event.key === 'Enter' && !event.shiftKey) {
+					event.preventDefault();
+					this.sendClick();
+				}
+			},
 		},
 	};
 </script>
 
 <style lang="scss" scoped>
+@font-face {
+	font-family: 'FontAwesome';
+	src: url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/fonts/fontawesome-webfont.woff2') format('woff2');
+	font-weight: normal;
+	font-style: normal;
+}
+.fa {
+	display: inline-block;
+	font: normal normal normal 14px/1 FontAwesome;
+	font-size: inherit;
+	text-rendering: auto;
+	-webkit-font-smoothing: antialiased;
+}
+.fa-smile-o:before {
+	content: "\f118";
+}
 	////////////////////////
 	.center {
 		display: flex;
@@ -493,60 +559,103 @@
 	}
 
 	.c_popup_box {
-		background-color: #fff;
-		margin-bottom: 0rpx;
-
-		.reply_text {
-			@extend .center;
-			padding: 20rpx 20rpx 0 20rpx;
-			font-size: 26rpx;
+	background-color: #fff;
+	margin-bottom: 0rpx;
 
-			.text_aid {
-				color: $uni-text-color-grey;
-				margin-right: 5rpx;
-			}
+	.reply_text {
+		@extend .center;
+		padding: 20rpx 20rpx 0 20rpx;
+		font-size: 26rpx;
 
-			.user_avatar {
-				width: 48rpx;
-				height: 48rpx;
-				border-radius: 50%;
-				margin-right: 6rpx;
-				margin-left: 12rpx;
-			}
+		.text_aid {
+			color: $uni-text-color-grey;
+			margin-right: 5rpx;
+		}
 
+		.user_avatar {
+			width: 48rpx;
+			height: 48rpx;
+			border-radius: 50%;
+			margin-right: 6rpx;
+			margin-left: 12rpx;
 		}
+	}
 
-		.content {
-			@extend .center;
+	.content {
+		@extend .center;
 
-			.text_area {
-				flex: 1;
-				padding: 20rpx;
+		.text_area {
+			flex: 1;
+			padding: 20rpx;
+			position: relative;
+			
+			.textarea {
+				width: 100%;
+				min-height: 80rpx;
+				font-size: 28rpx;
+				color: #333;
+				background: #f8f8f8;
+				border: 2rpx solid #eee;
+				border-radius: 8rpx;
+				padding: 16rpx 50rpx 16rpx 16rpx;
+			}
+			
+			.emoji-trigger {
+				position: absolute;
+				right: 30rpx;
+				bottom: 30rpx;
+				width: 60rpx;
+				height: 60rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				color: #666;
+				font-size: 40rpx;
 				
-				.textarea {
-					width: 100%;
-					min-height: 80rpx;
-					font-size: 28rpx;
-					color: #ff0000;
-					background: transparent;
-					border: 2rpx solid rgba(255,255,255,0.1);
-					border-radius: 8rpx;
-					padding: 16rpx;
+				&:active {
+					opacity: 0.7;
 				}
 			}
+		}
 
-			.send_btn {
-				@extend .center;
+		.send_btn {
+			@extend .center;
+			justify-content: center;
+			width: 120rpx;
+			height: 60rpx;
+			border-radius: 20rpx;
+			font-size: 28rpx;
+			color: #fff;
+			background-color: $uni-color-primary;
+			margin-right: 20rpx;
+			margin-left: 5rpx;
+		}
+	}
+	
+	.emoji-panel {
+		padding: 20rpx;
+		background-color: #f8f8f8;
+		border-top: 2rpx solid #eee;
+		max-height: 40vh;
+		overflow-y: scroll;
+		.emoji-grid {
+			display: flex;
+			flex-wrap: wrap;
+			// overflow-y: scroll;
+			.emoji-item {
+				width: 12.5%;
+				height: 80rpx;
+				display: flex;
+				align-items: center;
 				justify-content: center;
-				width: 120rpx;
-				height: 60rpx;
-				border-radius: 20rpx;
-				font-size: 28rpx;
-				color: #fff;
-				background-color: $uni-color-primary;
-				margin-right: 20rpx;
-				margin-left: 5rpx;
+				font-size: 40rpx;
+				
+				&:active {
+					background-color: rgba(0, 0, 0, 0.1);
+					border-radius: 8rpx;
+				}
 			}
 		}
 	}
+}
 </style>

components/cc-comment/componets/common.vue

@@ -9,7 +9,7 @@
       </view>
       <view class="top_right" @click="likeClick(data)">
         <span :class="[data.is_like ? 'active' : '', 'like_count']">{{ cLikeCount }}</span>
-        <uni-icons v-show="data.is_like" type="hand-up-filled" size="24" color="#007aff"></uni-icons>
+        <uni-icons v-show="data.is_like" type="hand-up-filled" size="24" color="#8de10b"></uni-icons>
         <uni-icons v-show="!data.is_like" type="hand-up" size="24" color="#999"></uni-icons>
       </view>
     </view>
@@ -151,7 +151,7 @@ export default {
       .like_count {
         color: #8c8c8c;
         &.active {
-          color: #007aff;
+          color: #8de10b;
         }
       }
     }

pages.json

@@ -96,7 +96,8 @@
 			"path": "pages/index/workDetail",
 			"style": {
 				"navigationBarTitleText": "详情",
-				"navigationBarBackgroundColor": "#ffffff"
+				"navigationBarBackgroundColor": "#ffffff",
+				"navigationStyle": "custom"
 			}
 		}, {
 			"path": "pages/index/ai_pp",

pages/index/articleDetail.vue

@@ -15,8 +15,8 @@
 			</view>
 			<!-- 缩略图列表 -->
 			<view class="list">
-				<view class="img" :class="selImg==index?'active':''" v-for="(item,index) in image_list" :key="index"
-					@click="selPhoto(item,index)">
+				<view class="img" :class="selImg == index ? 'active' : ''" v-for="(item, index) in image_list" :key="index"
+					@click="selPhoto(item, index)">
 					<image :src="item" mode="aspectFill"></image>
 				</view>
 			</view>
@@ -93,22 +93,8 @@
 		<previewImage ref="previewImage" :opacity="0.8" :circular="true" :imgs="imgs" :descs="descs"></previewImage>
 
 		<!-- 评论区域 -->
-		<view class="comment-section">
-			<view class="section-header">
-				<text class="fa fa-comments"></text>
-				<text class="section-title">评论区</text>
-				<text class="comment-count">({{ tableTotal }})</text>
-			</view>
-
-			<CComment ref="ccRef" :myInfo="myInfo" :userInfo="userInfo" :tableData="tableData"
-				:tableTotal.sync="tableTotal" :deleteMode="deleteMode" @likeFun="likeFun" @replyFun="replyFun"
-				@deleteFun="deleteFun"></CComment>
-
-			<view class="comment-button" @tap="openComment">
-				<text class="fa fa-pencil"></text>
-				<text>发表新评论</text>
-			</view>
-		</view>
+		<CommentSection ref="commentSection" @totalNumberOfComments="totalNumberOfComments" :myInfo="myInfo" :userInfo="userInfo" :articleId="arcID" :type="'article'">
+		</CommentSection>
 
 		<view class="thread2"></view>
 
@@ -116,418 +102,357 @@
 </template>
 
 <script>
-	import htmlParser from '../../common/html-parser'
-	import CComment from "@/components/cc-comment/cc-comment.vue";
-	import previewImage from '@/components/kxj-previewImage/kxj-previewImage.vue'; //引用插件
-	function parseImgs(nodes) {
-		nodes.forEach(node => {
-			if (
-				node.name === 'img' &&
-				node.attrs &&
-				node.attrs['data-img-size-val']
-			) {
-				const sizes = node.attrs['data-img-size-val'].split(',')
-				const width = uni.upx2px(720 * 0.9)
-				const height = parseInt(width * (sizes[1] / sizes[0]))
-				node.attrs.style = `width:${width};height:${height};`
-			}
-			if (Array.isArray(node.children)) {
-				parseImgs(node.children)
-			}
-		})
-		return nodes
-	}
-	export default {
-		components: {
-			previewImage,
-			CComment
-		},
-		data() {
-			return {
+import htmlParser from '../../common/html-parser'
+import CommentSection from "@/components/CommentSection/CommentSection.vue";
+import previewImage from '@/components/kxj-previewImage/kxj-previewImage.vue'; //引用插件
+function parseImgs(nodes) {
+	nodes.forEach(node => {
+		if (
+			node.name === 'img' &&
+			node.attrs &&
+			node.attrs['data-img-size-val']
+		) {
+			const sizes = node.attrs['data-img-size-val'].split(',')
+			const width = uni.upx2px(720 * 0.9)
+			const height = parseInt(width * (sizes[1] / sizes[0]))
+			node.attrs.style = `width:${width};height:${height};`
+		}
+		if (Array.isArray(node.children)) {
+			parseImgs(node.children)
+		}
+	})
+	return nodes
+}
+export default {
+	components: {
+		previewImage,
+		CommentSection
+	},
+	data() {
+		return {
+			title: '',
+			arcID: 0,
+			selImg: 0,
+			home_image: '',
+			myinfo: {},
+			tag_list: [],
+			image_list: [],
+			imgs: [],
+			descs: [],
+			list_wish: [],
+			content: '',
+			tableTotal: 0,
+			// 添加文章信息字段
+			articleInfo: {
 				title: '',
-				arcID: 0,
-				selImg: 0,
-				home_image: '',
-				myinfo: {},
-				tag_list: [],
-				image_list: [],
-				imgs: [],
-				descs: [],
-				list_wish: [],
 				content: '',
+				create_time: '',
+				images: '',
+				view_count: 0,
+				author: '',
+				like_count: 0,
+				is_like: false
+			},
 
-				// 添加文章信息字段
-				articleInfo: {
-					title: '',
-					content: '',
-					create_time: '',
-					images: '',
-					view_count: 0,
-					author: '',
-					like_count: 0,
-					is_like: false
-				},
-
-				myInfo: {
-					user_id: 1, // 用户id
-					user_name: "", // 用户名
-					user_avatar: "", // 用户头像地址
-				},
-				// 文章作者信息(提示: 一般来自localstorage, 如果是实时获取的话, 那么获取到数据后再v-if显示评论组件)
-				userInfo: {
-					user_id: 2, // 用户id
-					user_name: "", // 用户名
-					user_avatar: "", // 用户头像地址
-				},
-				deleteMode: "all", //删除模式
-				// 评论总数
-				tableTotal: 4,
-				// 评论表
-				tableData: [],
-
-
+			myInfo: {
+				user_id: 1, // 用户id
+				user_name: "", // 用户名
+				user_avatar: "", // 用户头像地址
+			},
+			// 文章作者信息(提示: 一般来自localstorage, 如果是实时获取的话, 那么获取到数据后再v-if显示评论组件)
+			userInfo: {
+				user_id: 2, // 用户id
+				user_name: "", // 用户名
+				user_avatar: "", // 用户头像地址
+			},
+		}
+	},
+	onLoad(parms) {
+		let self = this;
+		this.arcID = parms.id || 133;
+	},
+	onShow() {
+		uni.$emit('check_update');
+		this.$nextTick(() => {
+			if (this.$refs.commentSection) {
+				this.$refs.commentSection.loadCommentData();
 			}
+		});
+		this.loadData(); 
+	},
+	methods: {
+		totalNumberOfComments(tableTotal) { 
+		 this.tableTotal = tableTotal;
 		},
-		onLoad(parms) {
-			let self = this;
-			this.arcID = parms.id || 133;
+		onLinqu(item) {
+			uni.navigateTo({
+				url: '/pages/my/wishHelp?id=' + item.myid,
+			})
 		},
-		onShow() {
-			uni.$emit('check_update');
-			this.loadData();
-			this.loadCommentData();
+		selPhoto(item, sel) {
+			this.selImg = sel;
+			this.home_image = this.image_list[sel];
 		},
-		methods: {
-			onLinqu(item) {
-				uni.navigateTo({
-					url: '/pages/my/wishHelp?id=' + item.myid,
-				})
-			},
-			selPhoto(item, sel) {
-				this.selImg = sel;
-				this.home_image = this.image_list[sel];
-			},
-			toArr(imgs) {
-				let arr = imgs.split("|");
-				return arr;
-			},
-			previewOpen(imgs1, index) {
-				this.imgs = imgs1.split("|");
-				setTimeout(() => this.$refs.previewImage.open(index), 0)
-				return; //如需测试和uni原生预览差别可注释这两行
-			},
-			loadData() {
-				uni.request({
-					url: this.$apiHost + '/Article/getinfo',
-					data: {
-						uuid: getApp().globalData.uuid,
-						id: this.arcID
-					},
-					header: {
-						"content-type": "application/json",
-						'sign': getApp().globalData.headerSign
-					},
-					success: (res) => {
-						console.log("文章信息:", res.data);
-						if (res.data.success === "yes") {
-							// 更新文章信息
-							this.articleInfo = res.data.article;
-							const nodes = htmlParser(res.data.article.content);
-							// #ifdef APP-PLUS-NVUE
-							parseImgs(nodes)
-							// #endif
-							this.content = nodes
-
-							// 更新图片列表
-							if (res.data.article.images && res.data.article.images !== "") {
-								this.image_list = res.data.article.images.split(",");
-								this.home_image = this.image_list[0];
-							} else {
-								this.home_image = "../../static/home/avator.png";
-							}
-							console.log("img", this.home_image);
+		toArr(imgs) {
+			let arr = imgs.split("|");
+			return arr;
+		},
+		previewOpen(imgs1, index) {
+			this.imgs = imgs1.split("|");
+			setTimeout(() => this.$refs.previewImage.open(index), 0)
+			return; //如需测试和uni原生预览差别可注释这两行
+		},
+		loadData() {
+			uni.request({
+				url: this.$apiHost + '/Article/getinfo',
+				data: {
+					uuid: getApp().globalData.uuid,
+					id: this.arcID
+				},
+				header: {
+					"content-type": "application/json",
+					'sign': getApp().globalData.headerSign
+				},
+				success: (res) => {
+					console.log("文章信息:", res.data);
+					if (res.data.success === "yes") {
+						// 更新文章信息
+						this.articleInfo = res.data.article;
+						const nodes = htmlParser(res.data.article.content);
+						// #ifdef APP-PLUS-NVUE
+						parseImgs(nodes)
+						// #endif
+						this.content = nodes
 
-							// 更新标签列表
-							// if (res.data.data.tags && res.data.data.tags !== "") {
-							// 	this.tag_list = res.data.data.tags.split(",");
-							// }
+						// 更新图片列表
+						if (res.data.article.images && res.data.article.images !== "") {
+							this.image_list = res.data.article.images.split(",");
+							this.home_image = this.image_list[0];
 						} else {
-							uni.showToast({
-								title: '获取文章信息失败',
-								icon: 'none'
-							});
+							this.home_image = "../../static/home/avator.png";
 						}
-					},
-					complete: (com) => {
-						// uni.hideLoading();
-					},
-					fail: (e) => {
-						console.log("请求失败:", e);
+						console.log("img", this.home_image);
+
+						// 更新标签列表
+						// if (res.data.data.tags && res.data.data.tags !== "") {
+						// 	this.tag_list = res.data.data.tags.split(",");
+						// }
+					} else {
 						uni.showToast({
-							title: '网络请求失败',
+							title: '获取文章信息失败',
 							icon: 'none'
 						});
 					}
-				});
-			},
-			loadCommentData() {
-				uni.request({
-					url: this.$apiHost + '/Article/getcomments',
-					data: {
-						uuid: getApp().globalData.uuid,
-						type: 'article',
-						id: this.arcID,
-						page: 1,
-						limit: 10
-					},
-					header: {
-						"content-type": "application/json",
-						'sign': getApp().globalData.headerSign
-					},
-					success: (res) => {
-						console.log("评论列表:", res.data);
-						if (res.data.success == "yes") {
-							this.$set(this, 'tableData', res.data.list);
-							this.tableTotal = res.data.total;
-							console.log("tabddd", this.tableData)
-						} else {
+				},
+				complete: (com) => {
+					// uni.hideLoading();
+				},
+				fail: (e) => {
+					console.log("请求失败:", e);
+					uni.showToast({
+						title: '网络请求失败',
+						icon: 'none'
+					});
+				}
+			});
+		},
+		// 评论相关方法已移至CommentSection组件
+
+		// 唤起新评论弹框
+		openComment() {
+			if (this.$refs.commentSection) {
+				this.$refs.commentSection.openComment();
+			}
+		},
+		// 文章点赞
+		likeArticle() {
+			uni.request({
+				url: this.$apiHost + '/Article/like',
+				data: {
+					uuid: getApp().globalData.uuid,
+					id: this.arcID
+				},
+				header: {
+					"content-type": "application/json",
+					'sign': getApp().globalData.headerSign
+				},
+				success: (res) => {
+					console.log("点赞结果:", res.data);
+					if (res.data.success === "yes") {
+						// 更新点赞状态
+						if (!this.articleInfo.is_like) {
+							this.articleInfo.like_count = (this.articleInfo.like_count || 0) + 1;
+							this.articleInfo.is_like = true;
 							uni.showToast({
-								title: '获取评论列表失败',
+								title: '点赞成功',
 								icon: 'none'
 							});
-						}
-					},
-					complete: (com) => {
-						// uni.hideLoading();
-					},
-					fail: (e) => {
-						console.log("----e:", e);
-					}
-				});
-			},
-
-
-			// 唤起新评论弹框
-			openComment() {
-				let ccRef = this.$refs["ccRef"];
-				ccRef.newCommentFun();
-			},
-			// 点赞回调事件
-			likeFun({
-				params
-			}, callback) {
-				console.log("likeFun", params);
-				uni.request({
-					url: this.$apiHost + '/Article/zanComment',
-					data: {
-						uuid: getApp().globalData.uuid,
-						id: params.id
-					},
-					header: {
-						"content-type": "application/json",
-						'sign': getApp().globalData.headerSign
-					},
-					success: (res) => {
-						console.log("点赞结果:", res.data);
-						if (res.data.success !== "yes") {
-							callback(res); // 请求失败时重置点赞效果
-						}
-					},
-					fail: (e) => {
-						console.log("点赞失败:", e);
-						callback(e); // 请求失败时重置点赞效果
-					}
-				});
-			},
-			// 文章点赞
-			likeArticle() {
-				uni.request({
-					url: this.$apiHost + '/Article/like',
-					data: {
-						uuid: getApp().globalData.uuid,
-						id: this.arcID
-					},
-					header: {
-						"content-type": "application/json",
-						'sign': getApp().globalData.headerSign
-					},
-					success: (res) => {
-						console.log("点赞结果:", res.data);
-						if (res.data.success === "yes") {
-							// 更新点赞状态
-							if (!this.articleInfo.is_like) {
-								this.articleInfo.like_count = (this.articleInfo.like_count || 0) + 1;
-								this.articleInfo.is_like = true;
-								uni.showToast({
-									title: '点赞成功',
-									icon: 'none'
-								});
-							} else {
-								this.articleInfo.like_count = (this.articleInfo.like_count || 0) - 1;
-								this.articleInfo.is_like = false;
-								uni.showToast({
-									title: '取消点赞',
-									icon: 'none'
-								});
-							}
 						} else {
+							this.articleInfo.like_count = (this.articleInfo.like_count || 0) - 1;
+							this.articleInfo.is_like = false;
 							uni.showToast({
-								title: '点赞失败',
+								title: '取消点赞',
 								icon: 'none'
 							});
 						}
-					},
-					fail: (e) => {
-						console.log("点赞失败:", e);
+					} else {
 						uni.showToast({
-							title: '网络请求失败',
+							title: '点赞失败',
 							icon: 'none'
 						});
 					}
-				});
-			},
-
-			// 分享文章
-			shareArticle() {
-				// 如果在微信小程序环境
-				if (uni.getSystemInfoSync().platform === 'mp-weixin') {
-					uni.showShareMenu({
-						withShareTicket: true,
-						menus: ['shareAppMessage', 'shareTimeline']
-					});
-				} else {
-					// 其他环境，如APP
-					uni.share({
-						provider: "weixin",
-						scene: "WXSceneSession",
-						type: 0,
-						title: this.articleInfo.title,
-						summary: this.articleInfo.content.substring(0, 40) + "...",
-						imageUrl: this.home_image,
-						success: function(res) {
-							console.log("分享成功：" + JSON.stringify(res));
-						},
-						fail: function(err) {
-							console.log("分享失败：" + JSON.stringify(err));
-						}
+				},
+				fail: (e) => {
+					console.log("点赞失败:", e);
+					uni.showToast({
+						title: '网络请求失败',
+						icon: 'none'
 					});
 				}
-			},
-			// 评论回调事件
-			replyFun({
-				params
-			}, callback) {
-				// params = {
-				// 	...params,
-				// 	user_id: this.myInfo.user_id, // 用户id
-				// 	user_name: this.myInfo.user_name, // 用户名
-				// 	user_avatar: this.myInfo.user_avatar, // 用户头像地址
-				// 	user_content: this.commentValue, // 用户评论内容
-				// 	is_like: false, // 是否点赞
-				// 	like_count: 0, // 点赞数统计
-				// 	create_time: "刚刚", // 创建时间
-				// 	owner: true, // 是否为所有者 所有者可以进行删除 管理员默认true
-				// };
-				console.log("replyFun", {
+			});
+		},
+
+		// 分享文章
+		shareArticle() {
+			// 如果在微信小程序环境
+			if (uni.getSystemInfoSync().platform === 'mp-weixin') {
+				uni.showShareMenu({
+					withShareTicket: true,
+					menus: ['shareAppMessage', 'shareTimeline']
+				});
+			} else {
+				// 其他环境，如APP
+				uni.share({
+					provider: "weixin",
+					scene: "WXSceneSession",
+					type: 0,
+					title: this.articleInfo.title,
+					summary: this.articleInfo.content.substring(0, 40) + "...",
+					imageUrl: this.home_image,
+					success: function (res) {
+						console.log("分享成功：" + JSON.stringify(res));
+					},
+					fail: function (err) {
+						console.log("分享失败：" + JSON.stringify(err));
+					}
+				});
+			}
+		},
+		// 评论回调事件
+		replyFun({
+			params
+		}, callback) {
+			// params = {
+			// 	...params,
+			// 	user_id: this.myInfo.user_id, // 用户id
+			// 	user_name: this.myInfo.user_name, // 用户名
+			// 	user_avatar: this.myInfo.user_avatar, // 用户头像地址
+			// 	user_content: this.commentValue, // 用户评论内容
+			// 	is_like: false, // 是否点赞
+			// 	like_count: 0, // 点赞数统计
+			// 	create_time: "刚刚", // 创建时间
+			// 	owner: true, // 是否为所有者 所有者可以进行删除 管理员默认true
+			// };
+			console.log("replyFun", {
+				uuid: getApp().globalData.uuid,
+				article_id: this.arcID, // 文章ID
+				content: params.user_content, // 评论内容
+				parent_id: params.parent_id || 0, // 父评论ID
+				reply_id: params.reply_id || 0, // 回复的评论ID
+				reply_name: params.reply_name || '' // 被回复人名称
+			});
+			uni.request({
+				url: this.$apiHost + '/Article/newComment',
+				data: {
 					uuid: getApp().globalData.uuid,
+					type: 'article',
 					article_id: this.arcID, // 文章ID
 					content: params.user_content, // 评论内容
 					parent_id: params.parent_id || 0, // 父评论ID
 					reply_id: params.reply_id || 0, // 回复的评论ID
 					reply_name: params.reply_name || '' // 被回复人名称
-				});
-				uni.request({
-					url: this.$apiHost + '/Article/newComment',
-					data: {
-						uuid: getApp().globalData.uuid,
-						type: 'article',
-						article_id: this.arcID, // 文章ID
-						content: params.user_content, // 评论内容
-						parent_id: params.parent_id || 0, // 父评论ID
-						reply_id: params.reply_id || 0, // 回复的评论ID
-						reply_name: params.reply_name || '' // 被回复人名称
-					},
-					header: {
-						"content-type": "application/json",
-						'sign': getApp().globalData.headerSign
-					},
-					success: (res) => {
-						console.log("评论结果:", res.data);
-						if (res.data.success === "yes") {
-							callback(res.data); // 评论成功，传入后端返回的数据
-						}
-					},
-					fail: (e) => {
-						console.log("评论失败:", e);
-						uni.showToast({
-							title: '评论失败，请重试',
-							icon: 'none'
-						});
+				},
+				header: {
+					"content-type": "application/json",
+					'sign': getApp().globalData.headerSign
+				},
+				success: (res) => {
+					console.log("评论结果:", res.data);
+					if (res.data.success === "yes") {
+						callback(res.data); // 评论成功，传入后端返回的数据
 					}
-				});
-			},
-			/** 删除回调事件
-			 * mode 删除模式
-			 * -- bind: 当被删除的一级评论存在回复评论, 那么该评论内容变更显示为[当前评论内容已被移除]
-			 * -- only: 仅删除当前评论(后端删除相关联的回复评论, 否则总数显示不对)
-			 * -- all : 删除所有评论包括回复评论 前端遍历子评论上报
-			 */
+				},
+				fail: (e) => {
+					console.log("评论失败:", e);
+					uni.showToast({
+						title: '评论失败，请重试',
+						icon: 'none'
+					});
+				}
+			});
+		},
+		/** 删除回调事件
+		 * mode 删除模式
+		 * -- bind: 当被删除的一级评论存在回复评论, 那么该评论内容变更显示为[当前评论内容已被移除]
+		 * -- only: 仅删除当前评论(后端删除相关联的回复评论, 否则总数显示不对)
+		 * -- all : 删除所有评论包括回复评论 前端遍历子评论上报
+		 */
 
-			deleteFun({
+		deleteFun({
+			params,
+			mode
+		}, callback) {
+			console.log("deleteFun", {
 				params,
 				mode
-			}, callback) {
-				console.log("deleteFun", {
-					params,
-					mode
-				});
-				// 将params转换为逗号分隔的字符串
-				const idsString = Array.isArray(params) ? params.join(',') : params.toString();
+			});
+			// 将params转换为逗号分隔的字符串
+			const idsString = Array.isArray(params) ? params.join(',') : params.toString();
 
-				console.log("删除评论", idsString, mode)
-				uni.request({
-					url: this.$apiHost + '/Article/delComment',
-					data: {
-						uuid: getApp().globalData.uuid,
-						ids: idsString, // 将params转换为逗号分隔的字符串传递给ids
-						mode: mode
-					},
-					header: {
-						"content-type": "application/json",
-						'sign': getApp().globalData.headerSign
-					},
-					success: (res) => {
-						console.log("删除结果:", res.data);
-						if (res.data.success === "yes") {
-							callback(res);
-						}
-					},
-					fail: (e) => {}
-				});
-				// switch (mode) {
-				// 	case "bind":
-				// 		// 逻辑: 调用接口进行评论内容修改 update
-				// 		setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
-				// 		break;
-				// 	case "only":
-				// 		// 逻辑: 调用接口删除一个评论 delete
-				// 		setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
-				// 		break;
-				// 	default:
-				// 		// all
-				// 		// 逻辑: 调用接口删除多个评论 [delete]
-				// 		setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
-				// 		break;
-				// }
-			},
+			console.log("删除评论", idsString, mode)
+			uni.request({
+				url: this.$apiHost + '/Article/delComment',
+				data: {
+					uuid: getApp().globalData.uuid,
+					ids: idsString, // 将params转换为逗号分隔的字符串传递给ids
+					mode: mode
+				},
+				header: {
+					"content-type": "application/json",
+					'sign': getApp().globalData.headerSign
+				},
+				success: (res) => {
+					console.log("删除结果:", res.data);
+					if (res.data.success === "yes") {
+						callback(res);
+					}
+				},
+				fail: (e) => { }
+			});
+			// switch (mode) {
+			// 	case "bind":
+			// 		// 逻辑: 调用接口进行评论内容修改 update
+			// 		setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
+			// 		break;
+			// 	case "only":
+			// 		// 逻辑: 调用接口删除一个评论 delete
+			// 		setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
+			// 		break;
+			// 	default:
+			// 		// all
+			// 		// 逻辑: 调用接口删除多个评论 [delete]
+			// 		setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
+			// 		break;
+			// }
+		},
 
 
 
 
-		}
 	}
+}
 </script>
 
 <style scoped lang="scss">
-	@import 'articleDetail.scss';
+@import 'articleDetail.scss';
 </style>

pages/index/index.vue

@@ -61,7 +61,7 @@
 						<view class="classModel">
 							<image src="@/static/home/benner-iconBom.png" class="benner-iconBom" mode=""></image>
 							<image src="@/static/home/benner-icontop.png" class="benner-icontop" mode=""></image>
-							<view class="benner-box benner-left-box">
+							<view class="benner-box benner-left-box" @click="goPage('/pages/my/job')">
 								<view class="text1">
 									获取奖励
 								</view>
@@ -70,7 +70,7 @@
 								</view>
 							</view>
 							<view class="benner-box benner-right-box" ref="classModel1"
-								@click="goPage('/pages/my/job')">
+								>
 								<view class="guard">
 									<view class="text">
 										潮玩IP
@@ -970,7 +970,9 @@ export default {
 			console.log("skeylogin", "xxx2");
 			uni.$emit("check_login", () => {
 				uni.navigateTo({
-					url: "/pages/make/make",
+					// 生成个人形象
+					// url: "/pages/make/make",
+					url: "/pages/make/fabuArticle?id=-1",
 				});
 			});
 		},

pages/index/workDetail.scss

@@ -1,513 +1,419 @@
 // 导入FontAwesome
-@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
+@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
 
 page {
-	background-color: #ffffff;
-	width: 100%;
-	color: #333;
-	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  background: #f2f6f2;
+  width: 100%;
+  color: #333;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+    Arial, sans-serif;
 }
 .page {
-	background-color: #ffffff;
-	width: 100%;
+  background: #f2f6f2;
+  width: 100%;
 }
-.header {
-	display: flex;
-	flex-direction: row;
-	justify-content: flex-start;
-	align-items: center;
-	width: 750rpx;height: 320rpx;
-	padding-top: calc(var(--status-bar-height) + 0rpx);
-	.left {
-		display: flex;flex-direction: row;width:200rpx;height:120rpx;
-		justify-content: center;
-		padding-left:50rpx;
-		image {
-			width:124rpx;height:40rpx;
-		}
-	}
+
+/* 自定义导航栏样式 */
+.custom-navbar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 90rpx;
+  padding: 0 20rpx;
+  padding-top: var(--status-bar-height);
+  background-color: #ffffff;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+
+  .navbar-left {
+    width: 80rpx;
+    height: 80rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .fa-angle-left {
+      font-size: 48rpx;
+      color: #333;
+    }
+  }
+
+  .navbar-center {
+    flex: 1;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    margin-left: 10rpx;
+
+    .navbar-title {
+      display: flex;
+      align-items: center;
+
+      .navbar-avatar {
+        width: 50rpx;
+        height: 50rpx;
+        border-radius: 25rpx;
+        margin-right: 10rpx;
+      }
+
+      .navbar-text {
+        font-size: 32rpx;
+        font-weight: bold;
+        color: #333;
+        margin-right: 10rpx;
+      }
+
+      .navbar-badge {
+        font-size: 22rpx;
+        color: #f0ad4e;
+        background-color: rgba(240, 173, 78, 0.1);
+        padding: 2rpx 10rpx;
+        border-radius: 10rpx;
+        border: 1rpx solid #f0ad4e;
+      }
+    }
+  }
+
+  .navbar-right {
+    min-width: 80rpx;
+    height: 80rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .fa-ellipsis-h {
+      font-size: 36rpx;
+      color: #333;
+    }
+    image {
+      width: 64rpx;
+      height: 64rpx;
+    }
+    .followTheAuthor {
+      padding: 6rpx 20rpx 8rpx 15rpx;
+      border-radius: 26rpx;
+      margin-right: 16rpx;
+      transition: all 0.6s;
+      border: 2rpx solid transparent;
+      &.followTheAuthor1 {
+        color: #acf934;
+        background: #1f1f1f;
+      }
+      &.followTheAuthor0 {
+        border: 2rpx solid #1f1f1f;
+        background: #fff;
+      }
+    }
+  }
 }
-.thread {
-	height: 20rpx;
+
+// 评论区域样式
+.comment-section {
+  background-color: #f8f8f8;
+  padding: 30rpx 0;
+  margin-top: 20rpx;
+  border-radius: 30rpx 30rpx 0 0;
+
+  .section-header {
+    display: flex;
+    align-items: center;
+    padding: 0 30rpx 20rpx;
+    border-bottom: 1rpx solid #eee;
+    margin-bottom: 20rpx;
+
+    .fa {
+      font-size: 36rpx;
+      color: #2979ff;
+    }
+
+    .section-title {
+      font-size: 32rpx;
+      font-weight: bold;
+      margin: 0 10rpx;
+      color: #333;
+    }
+
+    .comment-count {
+      font-size: 28rpx;
+      color: #999;
+    }
+  }
+
+  .comment-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 650rpx;
+    height: 90rpx;
+    background-color: #2979ff;
+    color: #fff;
+    border-radius: 45rpx;
+    margin: 40rpx auto 20rpx;
+    font-size: 30rpx;
+    box-shadow: 0 4rpx 12rpx rgba(41, 121, 255, 0.3);
+    transition: all 0.3s ease;
+
+    .fa {
+      margin-right: 10rpx;
+    }
+
+    &:active {
+      transform: scale(0.97);
+      background-color: #2567db;
+    }
+  }
 }
-.thread2 {
-	height: 60rpx;
+/* 确保评论按钮样式 */
+.comment-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 650rpx;
+  height: 90rpx;
+  background-color: #2979ff;
+  color: #fff;
+  border-radius: 45rpx;
+  margin: 40rpx auto 20rpx;
+  font-size: 30rpx;
+  box-shadow: 0 4rpx 12rpx rgba(41, 121, 255, 0.3);
 }
-.topUser {
-	width:750rpx;
-	height:750rpx;
-	position: relative;
-	overflow: hidden;
-	.home_image{
-		width: 100%;
-		height: 100%;
-		transition: transform 0.3s ease;
-		
-		&:active {
-			transform: scale(1.05);
-		}
-	}
-	.image-indicator {
-		position: absolute;
-		top: 30rpx;
-		right: 30rpx;
-		background-color: rgba(0, 0, 0, 0.5);
-		color: #fff;
-		padding: 8rpx 16rpx;
-		border-radius: 20rpx;
-		font-size: 24rpx;
-	}
-	/* 添加歌词显示样式 */
-	.lyrics-overlay {
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		background-color: rgba(0, 0, 0, 0.4);
-		padding: 30rpx;
-		
-		.lyrics-text {
-			color: #fff;
-			font-size: 36rpx;
-			text-align: center;
-			text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
-			font-weight: 500;
-			line-height: 1.6;
-		}
-	}
-	/* 添加播放按钮样式 */
-	.play-button {
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-		width: 120rpx;
-		height: 120rpx;
-		background-color: rgba(0, 0, 0, 0.6);
-		border-radius: 60rpx;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		z-index: 10;
-		
-		.fa {
-			color: #fff;
-			font-size: 60rpx;
-		}
-		
-		&:active {
-			background-color: rgba(0, 0, 0, 0.8);
-			transform: translate(-50%, -50%) scale(0.95);
-		}
-	}
-	.list {
-		position: absolute;
-		bottom: 20rpx;
-		width:100%;
-		display: flex;
-		flex-direction: row;
-		justify-content: center;
-		align-items: flex-end;
-		padding: 0 20rpx;
-		overflow-x: auto;
-		
-		&::-webkit-scrollbar {
-			display: none;
-		}
-		
-		.img {
-			width:84rpx;height:84rpx;margin: 0 10rpx;
-			transition: all 0.3s ease;
-			image {
-				width:84rpx;height:84rpx;border-radius: 16rpx;border: solid 4rpx #fff;
-				box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
-			}
-		}
-		.active {
-			width:136rpx;height:136rpx;
-			image {
-				width:136rpx;height:136rpx;border-radius: 24rpx;border: solid 4rpx #fff;
-				box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
-			}
-		}
-	}
+
+.inspiration-content {
+  width: 700rpx;
+  min-height: 1000rpx;
+  padding: 0;
+  margin: 0 auto;
+  // background: url("../../static/makedetail/cz_img_zhanshi.png") top center/100%  no-repeat;
+  box-sizing: border-box;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+
+  image {
+    width: 100%;
+    height: auto;
+    margin: 0;
+  }
+  .inspirationPictures {
+    border-radius: 0px 0px 32rpx 32rpx;
+    border: 2rpx solid #000000;
+  }
 }
-.body {
-	width:750rpx;margin-top:-60rpx;
-	border-radius: 40rpx 40rpx 0 0;padding-top:30rpx;
-	display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;
-	box-shadow: 0 -10rpx 20rpx rgba(0, 0, 0, 0.05);
-	position: relative;
-	z-index: 10;
-	.article-header {
-		display: flex;
-		flex-direction: column;
-		justify-content: flex-start;
-		align-items: flex-start;
-		padding: 40rpx 50rpx 20rpx;
-		width: 100%;
-		box-sizing: border-box;
-		
-		.title {
-			font-size: 40rpx;
-			font-weight: bold;
-			color: #222;
-			margin-bottom: 20rpx;
-			line-height: 1.4;
-		}
-		
-		.meta-info {
-			display: flex;
-			flex-direction: row;
-			flex-wrap: wrap;
-			color: #999;
-			font-size: 26rpx;
-			
-			.meta-item {
-				display: flex;
-				align-items: center;
-				margin-right: 30rpx;
-				margin-bottom: 10rpx;
-				
-				.meta-text {
-					margin-left: 8rpx;
-				}
-			}
-		}
-	}
-	.divider {
-		height: 1rpx;
-		background-color: #eee;
-		width: 650rpx;
-		margin: 10rpx auto 30rpx;
-	}
-	.article-content {
-		padding: 0 50rpx 40rpx;
-		width: 100%;
-		box-sizing: border-box;
-		
-		.content {
-			font-size: 32rpx;
-			color: #333;
-			line-height: 1.8;
-			text-align: justify;
-		}
-	}
-	.article-footer {
-		width: 100%;
-		padding: 20rpx 0;
-		border-top: 1rpx solid #f0f0f0;
-		
-		.action-bar {
-			display: flex;
-			justify-content: space-around;
-			align-items: center;
-			
-			.action-item {
-				display: flex;
-				flex-direction: column;
-				align-items: center;
-				padding: 20rpx 0;
-				
-				.fa {
-					font-size: 40rpx;
-					color: #666;
-					margin-bottom: 10rpx;
-					
-					&.liked {
-						color: #ff5151;
-					}
-				}
-				
-				.action-text {
-					font-size: 24rpx;
-					color: #666;
-				}
-				
-				&:active {
-					opacity: 0.7;
-				}
-			}
-		}
-	}
+// 音乐模式样式
+.musicContentBox {
+  padding-top: 20rpx;
+  .headCard {
+    background: #fff;
+    width: 694rpx;
+    height: 172rpx;
+    border-radius: 20rpx;
+    box-sizing: border-box;
+    padding: 20rpx 24rpx 28rpx 20rpx;
+    margin: 0rpx auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .songCover {
+      width: 124rpx;
+      height: 124rpx;
+      border-radius: 16rpx;
+    }
+    .songInfo {
+      width: 400rpx;
+      .songTitle {
+        font-family: PingFang SC;
+        font-weight: 400;
+        font-size: 34rpx;
+        color: #1f1f1f;
+        padding-bottom: 4rpx;
+      }
+      .songTag {
+        display: flex;
+        flex-wrap: wrap;
+        max-height: 88rpx;
+        overflow: hidden;
+        .tag {
+          padding: 2rpx 6rpx;
+          font-family: PingFang SC;
+          font-weight: 400;
+          font-size: 20rpx;
+          color: #1f1f1f;
+          border-radius: 8rpx;
+          border: 2rpx solid #e6e6e6;
+          margin-right: 8rpx;
+          margin-bottom: 5rpx;
+        }
+      }
+    }
+    .playerButton {
+      width: 76rpx;
+      height: 76rpx;
+    }
+  }
+  .contentHeader {
+    position: relative;
+    left: 0;
+    top: 0;
+    padding-bottom: 40rpx;
+    .musicContent {
+      width: calc(100% - 76rpx);
+      height: 620rpx;
+      margin: 38rpx auto;
+      margin-right: 0;
+      overflow: hidden;
+      overflow-y: auto;
+      background: url("../../static/makedetail/cz_img_cd.png") center right/auto
+        100% no-repeat;
+      background-position-x: 530%;
+      box-sizing: border-box;
+      padding: 200rpx 0;
+      .roll {
+        position: absolute;
+        left: 28rpx;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 26rpx;
+        height: 120rpx;
+      }
+    }
+    .maskLayer {
+      width: 60%;
+      height: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      background: linear-gradient(
+        to bottom,
+        rgba(242, 246, 242, 0.8) 0,
+        rgba(242, 246, 242, 0) 45%,
+        rgba(242, 246, 242, 0) 55%,
+        rgba(242, 246, 242, 0.8) 100%
+      );
+      pointer-events: none;
+    }
+  }
 }
-.list_wish {
-	display: flex;flex-direction: column;justify-content: flex-start;align-items: center;color:#fff;
-	width:750rpx;
-	
-	.item {
-		margin-top: 20rpx;color:#fff;font-size: 28rpx;
-		display: flex;flex-direction: row;justify-content: center;align-items: center;
-		width: 690rpx;height: 156rpx;
-		background: #28292D;
-		border-radius: 28rpx;
-		.avator {
-			width: 116rpx;height: 116rpx;margin-left:14rpx;
-			background: #161616;
-			border-radius: 28rpx;
-			display: flex;flex-direction: row;justify-content: center;align-items: center;
-			.icon {
-				width:100rpx;height:100rpx;border-radius: 20rpx;
-			}
-		}
-		.left {
-			width:370rpx;display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;
-			margin-left:20rpx;
-			.name {
-				font-size: 32rpx;margin-bottom:20rpx;
-			}
-			.jindu {
-				display: flex;flex-direction: row;justify-content: flex-start;align-items: center;
-				.bord {
-					width: 216rpx;height: 20rpx;margin-left:0rpx;
-					background: #0F0F0F;
-					border-radius: 24rpx;
-					.active {
-						width: 0%;height: 20rpx;
-						background: linear-gradient( 142deg, #FF5967 0%, #FF2A95 100%);
-						border-radius: 24rpx;
-					}
-				}
-				.tips {
-					margin-left:20rpx;font-weight: 400;font-size: 24rpx;color: #FF3D83;
-				}
-			}
-		}
-		.right {
-			width:190rpx;
-			.btn_submit {
-				width: 168rpx;height: 72rpx;
-				background: linear-gradient( 142deg, #FF5967 0%, #FF2A95 100%);
-				border-radius: 28rpx 28rpx 28rpx 28rpx;
-				display: flex;flex-direction: column;justify-content: center;align-items: center;
-			}
-			.state {
-				width:168rpx;height: 72rpx;text-align: center;line-height: 72rpx;
-			}
-		}
-	}
+
+// 作品描述
+.workDescription {
+  margin: 20rpx 28rpx 30rpx 28rpx;
+  background: #fff;
+  border-radius: 20rpx;
+  padding: 22rpx 28rpx 32rpx 28rpx;
+  .workDescription-title {
+    font-weight: 400;
+    font-family: "PingFang SC-Bold";
+    font-size: 36rpx;
+    display: flex;
+    align-content: center;
+    padding-bottom: 24rpx;
+    .pen {
+      width: 36rpx;
+      height: 36rpx;
+      margin-top: 10rpx;
+      margin-left: 5rpx;
+    }
+  }
+  .workDescription-content {
+    font-size: 28rpx;
+    color: #1f1f1f;
+  }
 }
-.list_info {
-	display: flex;flex-direction: column;justify-content: flex-start;align-items: center;color:#fff;
-	width:750rpx;
-	
-	.item {
-		width: 690rpx;margin: 0rpx 0;color:#fff;font-size: 28rpx;padding:20rpx 0 0rpx;
-		display: flex;flex-direction: row;justify-content: flex-start;align-items: center;
-		.avator {
-			width:88rpx;
-			.icon {
-				width:72rpx;height:72rpx;border-radius: 36rpx;
-			}
-		}
-		.tit {
-			width:470rpx;
-			.list1 {
-				display: flex;flex-direction: row;justify-content: flex-start;align-items: center;
-				.name {
-					font-size: 32rpx;padding-right: 10rpx;height:40rpx;line-height: 40rpx;
-				}
-				.sex1 {
-					width: 76rpx;
-					height: 40rpx;
-					background: #423339;
-					border-radius: 16rpx 16rpx 16rpx 16rpx;
-					border: 2rpx solid #36D6FF;color:#36D6FF;
-					display: flex;flex-direction: row;justify-content: flex-start;align-items: center;
-					image {
-						width:24rpx;height:24rpx;margin-left:4rpx;margin-right: 4rpx;
-					}
-				}
-				.sex2 {
-					width: 76rpx;
-					height: 40rpx;
-					background: #423339;
-					border-radius: 16rpx 16rpx 16rpx 16rpx;
-					border: 2rpx solid #FF7D88;color:#FF7D88;
-					display: flex;flex-direction: row;justify-content: flex-start;align-items: center;
-					image {
-						width:24rpx;height:24rpx;margin-left:4rpx;margin-right: 4rpx;
-					}
-				}
-				.xinzuo {
-					width: 92rpx;height: 44rpx;margin-left:10rpx;line-height: 44rpx;
-					border-radius: 16rpx 16rpx 16rpx 16rpx;
-					border: 2rpx solid #404040;font-size: 20rpx;color: #D0D0D0;
-					display: flex;flex-direction: row;justify-content: center;align-items: center;
-				}
-			}
-			.time {
-				color:#D0D0D0;font-size: 24rpx;
-			}
-		}
-		.state {
-			width:130rpx;font-size: 28rpx;font-weight: normal;text-align: right;
-			.status_1 {
-				color:#999;
-			}
-			.status_9 {
-				color:#36D6FF;
-			}
-			.status_2 {
-				color:#FE2D56;
-			}
-		}
-	}
-	.content {
-		width: 690rpx;font-weight: 400;font-size: 28rpx;color: #FFFFFF;text-align: left;font-style: normal;
-		text-transform: none;padding:20rpx 0;
-		padding-left:88rpx;
-	}
-	.photo_list {
-		width: 690rpx;margin-bottom:0rpx;padding-left:88rpx;
-		border-radius: 28rpx;font-size: 28rpx;
-		display: flex;flex-direction: row;align-items: center;
-		flex-wrap: wrap;
-		.img {
-			width:186rpx;height:186rpx;margin-bottom: 24rpx;margin-right: 12rpx;
-			image {
-				width:186rpx;height:186rpx;border-radius: 28rpx;border:solid 1px rgba(255, 255, 255, 0.2);
-			}
-		}
-		.right {
-			color:#fff;
-		}
-	}
-	.desc {
-		width: 690rpx;padding:0rpx 0 0rpx;padding-left:88rpx;
-		font-weight: 400;
-		font-size: 24rpx;
-		color: #999999;
-		line-height: 0rpx;
-		text-align: left;
-		font-style: normal;
-		text-transform: none;
-		display: flex;flex-direction: row;justify-content: space-between;align-items: center;
-		image {
-			width:40rpx;height:40rpx;
-		}
-		.addr {
-			width:200rpx;
-		}
-		.img {
-			display: flex;flex-direction: row;justify-content: center;align-items: center;
-			padding:0 0rpx 0 30rpx;font-size: 28rpx;color:#fff;
-			image {
-				margin-top:-8rpx;
-			}
-		}
-	}
+// 去创作
+.goCreate {
+  width: 694rpx;
+  height: 70rpx;
+  background: #1f1f1f;
+  border-radius: 58rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32rpx;
+  font-family: 'PingFang SC-Bold';
+  color: #fff;
+  margin: 0 auto;
+//   margin-bottom: 20rpx;
 }
-.btn_submit {
-	width: 336rpx;height: 100rpx;margin:50rpx auto;
-	background: linear-gradient( 90deg, #FF536D 0%, #FF3B84 100%);
-	border-radius: 50rpx 50rpx 50rpx 50rpx;
-	display: flex;flex-direction: row;justify-content: center;align-items: center;
-	font-weight: bold;
-	font-size: 32rpx;
-	color: #FFFFFF;
-	image {
-		width:44rpx;height:44rpx;margin-right: 8rpx;margin-top:4rpx;
-	}
+.floating-bar {
+  background: #ffffff;
+  border-radius: 20rpx;
+  color: #1f1f1f;
 }
-.btn {
-	text-align: center;
-	color: #fff;
-	padding: 20rpx;
-	margin: 50rpx;
-	border-radius: 20rpx;
-	background-color: #2979ff;
-  }
+/* 底部漂浮栏样式 */
+.floating-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: #fff;
+  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
+  padding: 20rpx 30rpx;
+  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+  z-index: 100;
 
-.font-awesome-import {
-	display: none;
-}
+  .floating-bar-content {
+    display: flex;
+    align-items: center;
 
-.fa {
-	font-family: 'FontAwesome';
-	margin-right: 6rpx;
-}
+    .add-note-btn {
+      border-radius: 58rpx;
+      border: 4rpx solid #000000;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 220rpx;
+      height: 80rpx;
 
-// 评论区域样式
-.comment-section {
-	background-color: #f8f8f8;
-	padding: 30rpx 0;
-	margin-top: 20rpx;
-	border-radius: 30rpx 30rpx 0 0;
-	
-	.section-header {
-		display: flex;
-		align-items: center;
-		padding: 0 30rpx 20rpx;
-		border-bottom: 1rpx solid #eee;
-		margin-bottom: 20rpx;
-		
-		.fa {
-			font-size: 36rpx;
-			color: #2979ff;
-		}
-		
-		.section-title {
-			font-size: 32rpx;
-			font-weight: bold;
-			margin: 0 10rpx;
-			color: #333;
-		}
-		
-		.comment-count {
-			font-size: 28rpx;
-			color: #999;
-		}
-	}
-	
-	.comment-button {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 650rpx;
-		height: 90rpx;
-		background-color: #2979ff;
-		color: #fff;
-		border-radius: 45rpx;
-		margin: 40rpx auto 20rpx;
-		font-size: 30rpx;
-		box-shadow: 0 4rpx 12rpx rgba(41, 121, 255, 0.3);
-		transition: all 0.3s ease;
-		
-		.fa {
-			margin-right: 10rpx;
-		}
-		
-		&:active {
-			transform: scale(0.97);
-			background-color: #2567db;
-		}
-	}
+      &:active {
+        background-color: #e5e5e5;
+      }
+    }
+    text {
+      font-family: PingFang SC, PingFang SC;
+      font-weight: 400;
+      font-size: 16px;
+      color: #1f1f1f;
+    }
+    .publish-btn {
+      flex: 3;
+      height: 80rpx;
+      background: #1f1f1f;
+      margin-left: 20rpx;
+      border-radius: 40rpx;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      text {
+        color: #fff;
+      }
+
+      &:active {
+        opacity: 0.9;
+      }
+    }
+  }
 }
-	/* 确保评论按钮样式 */
-	.comment-button {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 650rpx;
-		height: 90rpx;
-		background-color: #2979ff;
-		color: #fff;
-		border-radius: 45rpx;
-		margin: 40rpx auto 20rpx;
-		font-size: 30rpx;
-		box-shadow: 0 4rpx 12rpx rgba(41, 121, 255, 0.3);
-	}
 
-	.comment-button .fa {
-		margin-right: 10rpx;
-	}
+/* 弹窗样式 */
+.popup-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 998;
+}
+.comment-button .fa {
+  margin-right: 10rpx;
+}
 
-	.comment-button:active {
-		opacity: 0.9;
-		transform: scale(0.98);
-	}
+.comment-button:active {
+  opacity: 0.9;
+  transform: scale(0.98);
+}

pages/index/workDetail.vue

@@ -6,8 +6,95 @@
 				href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 		</view>
 
+
+
+		<!-- 顶部导航栏 -->
+		<view class="custom-navbar">
+			<view class="navbar-left" @click="goBack">
+				<text class="fa fa-angle-left"></text>
+			</view>
+			<view class="navbar-center">
+				<view class="navbar-title">
+					<image class="navbar-avatar" :src="author.avator" mode="aspectFill"></image>
+					<text class="navbar-text">{{ author.nickname }}</text>
+					<!-- <text class="navbar-badge" v-if="author.is_vip > 0">VIP</text> -->
+				</view>
+			</view>
+			<view class="navbar-right">
+				<text class="followTheAuthor followTheAuthor1" v-if="author.is_attention == 0"
+					@click="followTheAuthor(1)">+关注</text>
+				<text class="followTheAuthor followTheAuthor0" v-if="author.is_attention == 1"
+					@click="followTheAuthor(0)">已关注</text>
+				<image @click="showActionSheet" src="../../static/icon/sy_icon_fenxiang.png" mode="widthFix"></image>
+			</view>
+		</view>
+
+
+		<!-- 灵感 -->
+		<template v-if="articleInfo.task_type == 1">
+			<view class="inspiration-content" v-if="home_image">
+				<image v-if="home_image" src="../../static/makedetail/cz_img_zhanshi.png" mode="widthFix"></image>
+				<image :src="home_image" class="inspirationPictures" mode="widthFix"></image>
+			</view>
+
+		</template>
+		<!-- 音乐 -->
+		<template v-else-if="articleInfo.task_type == 2">
+			<view class="musicContentBox">
+				<view class="headCard">
+					<image :src="home_image" class="songCover"></image>
+					<view class="songInfo">
+						<view class="songTitle">{{ addBrackets(articleInfo.title) }}</view>
+						<view class="songTag">
+							<view class="tag" v-for="(item, index) in commaToArray(articleInfo.style)"
+								:key="index + item">{{ item }}</view>
+						</view>
+					</view>
+					<template v-if="articleInfo.task_type == 2">
+
+						<image @click="toggleAudio" v-if="isPlaying" src="@/static/makedetail/cz_icon_zanting.png"
+							class="playerButton"></image>
+						<image @click="toggleAudio" v-else src="@/static/makedetail/cz_icon_bofang.png"
+							class="playerButton"></image>
+					</template>
+				</view>
+				<view class="contentHeader">
+					<view class="musicContent">
+						<text> {{ articleInfo.lyrics }}</text>
+						<image class="roll" src="@/static/icon/roll.png"></image>
+					</view>
+					<view class="maskLayer"></view>
+				</view>
+
+			</view>
+
+		</template>
+
+		<!-- 作品描述 -->
+		<view class="workDescription">
+			<view class="workDescription-title">
+				<view>创作说明 </view>
+				<!-- <image class="pen" src="@/static/icon/wd_icon_bianji.png"></image> -->
+			</view>
+			<view class="workDescription-content">
+				{{ content || '暂无内容' }}
+			</view>
+		</view>
+
+		<view class="goCreate" @click="goCreate()">去创作</view>
+		<DialogBox ref="customConfirm"></DialogBox>
+
+
+
+
+
+
+
+
+
+
 		<!-- 文章头图区域 -->
-		<view class="topUser">
+		<view class="topUser" v-if="false">
 			<image :src="home_image" class="home_image" mode="aspectFill"></image>
 			<!-- 图片指示器 -->
 			<view class="image-indicator" v-if="image_list.length > 1">
@@ -18,23 +105,24 @@
 				<text class="lyrics-text">{{ articleInfo.lyrics }}</text>
 			</view>
 			<!-- 音乐类型时显示播放按钮 -->
-			<view class="play-button" v-if="articleInfo.task_type == 2 && articleInfo.result_audio" @click="toggleAudio">
+			<view class="play-button" v-if="articleInfo.task_type == 2 && articleInfo.result_audio"
+				@click="toggleAudio">
 				<text class="fa" :class="isPlaying ? 'fa-pause' : 'fa-play'"></text>
 			</view>
 			<!-- 缩略图列表 -->
 			<view class="list">
-				<view class="img" :class="selImg==index?'active':''" v-for="(item,index) in image_list" :key="index"
-					@click="selPhoto(item,index)">
+				<view class="img" :class="selImg == index ? 'active' : ''" v-for="(item, index) in image_list"
+					:key="index" @click="selPhoto(item, index)">
 					<image :src="item" mode="aspectFill"></image>
 				</view>
 			</view>
 		</view>
 
 		<!-- 音频元素 -->
-		<audio id="audioPlayer" :src="articleInfo.result_audio" style="display:none;"></audio>
+		<audio id="audioPlayer" :src="articleInfo.result_audio" style="display:none;" v-if="false"></audio>
 
 		<!-- 文章内容区域 -->
-		<view class="body">
+		<view class="body" v-if="false">
 			<!-- 文章标题与元信息 -->
 			<view class="article-header">
 				<view class="title">
@@ -104,92 +192,99 @@
 		<previewImage ref="previewImage" :opacity="0.8" :circular="true" :imgs="imgs" :descs="descs"></previewImage>
 
 		<!-- 评论区域 -->
-	<CommentSection ref="commentSection" :myInfo="myInfo" :userInfo="userInfo" :articleId="arcID"></CommentSection>
-		
+		<CommentSection ref="commentSection" :myInfo="myInfo" :userInfo="userInfo" :articleId="arcID"
+			@totalNumberOfComments="totalNumberOfComments"></CommentSection>
+
+		<!-- 自定义 ActionSheet -->
+		<ActionSheet ref="actionSheet" :items="[
+			{ text: '分享作品', icon: '../../static/icon/cz_icon_fenxiangzuopin.png' },
 
+		]" @select="handleActionSelect" @cancel="handleActionCancel" />
 		<view class="thread2"></view>
 
 	</view>
 </template>
 
 <script>
-	import htmlParser from '../../common/html-parser'
-	import previewImage from '@/components/kxj-previewImage/kxj-previewImage.vue'; //引用插件
+import htmlParser from '../../common/html-parser'
+import previewImage from '@/components/kxj-previewImage/kxj-previewImage.vue'; //引用插件
 import CommentSection from '@/components/CommentSection/CommentSection.vue';
-	function parseImgs(nodes) {
-		nodes.forEach(node => {
-			if (
-				node.name === 'img' &&
-				node.attrs &&
-				node.attrs['data-img-size-val']
-			) {
-				const sizes = node.attrs['data-img-size-val'].split(',')
-				const width = uni.upx2px(720 * 0.9)
-				const height = parseInt(width * (sizes[1] / sizes[0]))
-				node.attrs.style = `width:${width};height:${height};`
-			}
-			if (Array.isArray(node.children)) {
-				parseImgs(node.children)
-			}
-		})
-		return nodes
-	}
-	export default {
-		components: {
+import ActionSheet from '@/components/ActionSheet/ActionSheet.vue';
+function parseImgs(nodes) {
+	nodes.forEach(node => {
+		if (
+			node.name === 'img' &&
+			node.attrs &&
+			node.attrs['data-img-size-val']
+		) {
+			const sizes = node.attrs['data-img-size-val'].split(',')
+			const width = uni.upx2px(720 * 0.9)
+			const height = parseInt(width * (sizes[1] / sizes[0]))
+			node.attrs.style = `width:${width};height:${height};`
+		}
+		if (Array.isArray(node.children)) {
+			parseImgs(node.children)
+		}
+	})
+	return nodes
+}
+export default {
+	components: {
 		previewImage,
 		CommentSection,
+		ActionSheet
 	},
-		data() {
-			return {
+	data() {
+		return {
+			title: '',
+			arcID: 0,
+			selImg: 0,
+			home_image: '',
+			articleInfo: {},
+			tag_list: [],
+			image_list: [],
+			imgs: [],
+			descs: [],
+			list_wish: [],
+			content: '',
+			author: {},
+			// 添加文章信息字段
+			articleInfo: {
 				title: '',
-				arcID: 0,
-				selImg: 0,
-				home_image: '',
-				myinfo: {},
-				tag_list: [],
-				image_list: [],
-				imgs: [],
-				descs: [],
-				list_wish: [],
 				content: '',
+				create_time: '',
+				images: '',
+				view_count: 0,
+				author: '',
+				like_count: 0,
+				is_like: false
+			},
 
-				// 添加文章信息字段
-				articleInfo: {
-					title: '',
-					content: '',
-					create_time: '',
-					images: '',
-					view_count: 0,
-					author: '',
-					like_count: 0,
-					is_like: false
-				},
-
-				myInfo: {
-					user_id: 1, // 用户id
-					user_name: "cc", // 用户名
-					user_avatar: "https://img0.baidu.com/it/u=2836960144,3650263035&fm=253&fmt=auto&app=138&f=JPEG?w=474&h=474", // 用户头像地址
-				},
-				// 文章作者信息(提示: 一般来自localstorage, 如果是实时获取的话, 那么获取到数据后再v-if显示评论组件)
-				userInfo: {
-					user_id: 2, // 用户id
-					user_name: "ikun", // 用户名
-					user_avatar: "https://pic1.zhimg.com/80/v2-a79071a705f55c5d88f6c74e6111fe84_720w.webp", // 用户头像地址
-				},
-				deleteMode: "all", //删除模式
-				// 评论总数
-				tableTotal: 4,
-				// 评论表
-				tableData: [],
-				isPlaying: false, // 添加播放状态
-				audioPlayer: null, // 添加音频播放器实例
-			}
-		},
-		onLoad(parms) {
-			let self = this;
-			this.arcID = parms.id || 393;
-		},
-		onShow() {
+			myInfo: {
+				user_id: 1, // 用户id
+				user_name: "cc", // 用户名
+				user_avatar: "https://img0.baidu.com/it/u=2836960144,3650263035&fm=253&fmt=auto&app=138&f=JPEG?w=474&h=474", // 用户头像地址
+			},
+			// 文章作者信息(提示: 一般来自localstorage, 如果是实时获取的话, 那么获取到数据后再v-if显示评论组件)
+			userInfo: {
+				user_id: 2, // 用户id
+				user_name: "ikun", // 用户名
+				user_avatar: "https://pic1.zhimg.com/80/v2-a79071a705f55c5d88f6c74e6111fe84_720w.webp", // 用户头像地址
+			},
+			deleteMode: "all", //删除模式
+			// 评论总数
+			tableTotal: 4,
+			// 评论表
+			tableData: [],
+			isPlaying: false, // 添加播放状态
+			audioPlayer: null, // 添加音频播放器实例
+		}
+	},
+	onLoad(parms) {
+		let self = this;
+		this.arcID = parms.id || 393;
+	},
+	onShow() {
 		uni.$emit('check_update');
 		this.loadData();
 		this.$nextTick(() => {
@@ -198,175 +293,262 @@ import CommentSection from '@/components/CommentSection/CommentSection.vue';
 			}
 		});
 	},
-		onReady() {
-			// 初始化音频播放器
-			this.audioPlayer = uni.createInnerAudioContext();
-			this.audioPlayer.onEnded(() => {
-				this.isPlaying = false;
+	onReady() {
+		// 初始化音频播放器
+		this.audioPlayer = uni.createInnerAudioContext();
+		this.audioPlayer.onEnded(() => {
+			this.isPlaying = false;
+		});
+	},
+	onUnload() {
+		// 页面卸载时停止音频播放
+		if (this.audioPlayer) {
+			this.audioPlayer.stop();
+			this.audioPlayer.destroy();
+		}
+	},
+	methods: {
+		// 返回上一页
+		goBack() {
+			uni.navigateBack({
+				delta: 1
 			});
 		},
-		onUnload() {
-			// 页面卸载时停止音频播放
-			if (this.audioPlayer) {
-				this.audioPlayer.stop();
-				this.audioPlayer.destroy();
-			}
+		totalNumberOfComments(tableTotal) {
+			this.tableTotal = tableTotal;
 		},
-		methods: {
-			onLinqu(item) {
-				uni.navigateTo({
-					url: '/pages/my/wishHelp?id=' + item.myid,
-				})
-			},
-			selPhoto(item, sel) {
-				this.selImg = sel;
-				this.home_image = this.image_list[sel];
-			},
-			toArr(imgs) {
-				let arr = imgs.split("|");
-				return arr;
-			},
-			previewOpen(imgs1, index) {
-				this.imgs = imgs1.split("|");
-				setTimeout(() => this.$refs.previewImage.open(index), 0)
-				// 传入当前选中的图片地址或序号
-				return; //如需测试和uni原生预览差别可注释这两行
-			},
-			loadData() {
-				uni.request({
-					url: this.$apiHost + '/Work/getinfo',
-					data: {
-						uuid: getApp().globalData.uuid,
-						id: this.arcID
-					},
-					header: {
-						"content-type": "application/json",
-						'sign': getApp().globalData.headerSign
-					},
-					success: (res) => {
-						console.log("文章信息:", res.data);
-						if (res.data.success === "yes") {
-							// 更新文章信息
-							this.articleInfo = res.data.data;
-							this.content = res.data.data.content;
-							this.home_image = res.data.data.images;
+		onLinqu(item) {
+			uni.navigateTo({
+				url: '/pages/my/wishHelp?id=' + item.myid,
+			})
+		},
+		selPhoto(item, sel) {
+			this.selImg = sel;
+			this.home_image = this.image_list[sel];
+		},
+		toArr(imgs) {
+			let arr = imgs.split("|");
+			return arr;
+		},
+		previewOpen(imgs1, index) {
+			this.imgs = imgs1.split("|");
+			setTimeout(() => this.$refs.previewImage.open(index), 0)
+			// 传入当前选中的图片地址或序号
+			return; //如需测试和uni原生预览差别可注释这两行
+		},
+		loadData() {
+			uni.request({
+				url: this.$apiHost + '/Work/getinfo',
+				data: {
+					uuid: getApp().globalData.uuid,
+					id: this.arcID
+				},
+				header: {
+					"content-type": "application/json",
+					'sign': getApp().globalData.headerSign
+				},
+				success: (res) => {
+					console.log("文章信息:", res.data);
+					if (res.data.success === "yes") {
+						console.log("文章信息:", res.data.data);
 
-						} else {
-							uni.showToast({
-								title: '获取信息失败',
-								icon: 'none'
-							});
-						}
-					},
-					complete: (com) => {
-						// uni.hideLoading();
-					},
-					fail: (e) => {
-						console.log("请求失败:", e);
+						// 更新文章信息
+						this.articleInfo = res.data.data;
+						this.content = res.data.data.content;
+						this.home_image = res.data.data.images;
+						this.author = res.data.author;
+					} else {
 						uni.showToast({
-							title: '网络请求失败',
+							title: '获取信息失败',
 							icon: 'none'
 						});
 					}
-				});
-			},
-			// 唤起新评论弹框
-	openComment() {
-		if (this.$refs.commentSection) {
-			this.$refs.commentSection.openComment();
-		}
-	},
-			// 文章点赞
-			likeArticle() {
-				uni.request({
-					url: this.$apiHost + '/Work/zanTA',
-					data: {
-						uuid: getApp().globalData.uuid,
-						id: this.arcID
-					},
-					header: {
-						"content-type": "application/json",
-						'sign': getApp().globalData.headerSign
-					},
-					success: (res) => {
-						console.log("点赞结果:", res.data);
-						if (res.data.success === "yes") {
-							// 更新点赞状态
-							if (!this.articleInfo.is_like) {
-								this.articleInfo.like_count = (this.articleInfo.like_count || 0) + 1;
-								this.articleInfo.is_like = true;
-								uni.showToast({
-									title: '点赞成功',
-									icon: 'none'
-								});
-							} else {
-								this.articleInfo.like_count = (this.articleInfo.like_count || 0) - 1;
-								this.articleInfo.is_like = false;
-								uni.showToast({
-									title: res.data.str,
-									icon: 'none'
-								});
-							}
+				},
+				complete: (com) => {
+					// uni.hideLoading();
+				},
+				fail: (e) => {
+					console.log("请求失败:", e);
+					uni.showToast({
+						title: '网络请求失败',
+						icon: 'none'
+					});
+				}
+			});
+		},
+		// 唤起新评论弹框
+		openComment() {
+			if (this.$refs.commentSection) {
+				this.$refs.commentSection.openComment();
+			}
+		},
+		// 文章点赞
+		likeArticle() {
+			uni.request({
+				url: this.$apiHost + '/Work/zanTA',
+				data: {
+					uuid: getApp().globalData.uuid,
+					id: this.arcID
+				},
+				header: {
+					"content-type": "application/json",
+					'sign': getApp().globalData.headerSign
+				},
+				success: (res) => {
+					console.log("点赞结果:", res.data);
+					if (res.data.success === "yes") {
+						// 更新点赞状态
+						if (!this.articleInfo.is_like) {
+							this.articleInfo.like_count = (this.articleInfo.like_count || 0) + 1;
+							this.articleInfo.is_like = true;
+							uni.showToast({
+								title: '点赞成功',
+								icon: 'none'
+							});
 						} else {
+							this.articleInfo.like_count = (this.articleInfo.like_count || 0) - 1;
+							this.articleInfo.is_like = false;
 							uni.showToast({
 								title: res.data.str,
 								icon: 'none'
 							});
 						}
-					},
-					fail: (e) => {
-						console.log("点赞失败:", e);
+					} else {
 						uni.showToast({
-							title: '网络请求失败',
+							title: res.data.str,
 							icon: 'none'
 						});
 					}
-				});
-			},
-
-			// 分享文章
-			shareArticle() {
-				// 如果在微信小程序环境
-				if (uni.getSystemInfoSync().platform === 'mp-weixin') {
-					uni.showShareMenu({
-						withShareTicket: true,
-						menus: ['shareAppMessage', 'shareTimeline']
+				},
+				fail: (e) => {
+					console.log("点赞失败:", e);
+					uni.showToast({
+						title: '网络请求失败',
+						icon: 'none'
 					});
-				} else {
-					// 其他环境，如APP
-					uni.share({
-						provider: "weixin",
-						scene: "WXSceneSession",
-						type: 0,
-						title: this.articleInfo.title,
-						summary: this.articleInfo.content.substring(0, 40) + "...",
-						imageUrl: this.home_image,
-						success: function(res) {
-							console.log("分享成功：" + JSON.stringify(res));
-						},
-						fail: function(err) {
-							console.log("分享失败：" + JSON.stringify(err));
-						}
+				}
+			});
+		},
+		// 关注作者
+		followTheAuthor(n) {
+			uni.request({
+				url: this.$apiHost + '/Member/attention',
+				data: {
+					uuid: getApp().globalData.uuid,
+					id: this.author.id
+				},
+				header: {
+					"content-type": "application/json",
+					'sign': getApp().globalData.headerSign
+				},
+				success: (res) => {
+					console.log("点赞结果:", res.data);
+					uni.showToast({
+						title: res.data.str,
+						icon: 'none'
+					});
+					if (res.data.success === "yes") {
+						console.log("关注结果:", res.data, n);
+
+						this.author.is_attention = n
+					}
+				},
+				fail: (e) => {
+					console.log("关注失败:", e);
+					uni.showToast({
+						title: '网络请求失败',
+						icon: 'none'
 					});
 				}
-			},
-			// 切换音频播放状态
-			toggleAudio() {
-				if (!this.articleInfo.result_audio) return;
-
-				if (this.isPlaying) {
-					this.audioPlayer.pause();
-					this.isPlaying = false;
-				} else {
-					this.audioPlayer.src = this.articleInfo.result_audio;
-					this.audioPlayer.play();
-					this.isPlaying = true;
+			});
+		},
+		// 分享文章
+		shareArticle() {
+			// 如果在微信小程序环境
+			if (uni.getSystemInfoSync().platform === 'mp-weixin') {
+				uni.showShareMenu({
+					withShareTicket: true,
+					menus: ['shareAppMessage', 'shareTimeline']
+				});
+			} else {
+				// 其他环境，如APP
+				uni.share({
+					provider: "weixin",
+					scene: "WXSceneSession",
+					type: 0,
+					title: this.articleInfo.title,
+					summary: this.articleInfo.content.substring(0, 40) + "...",
+					imageUrl: this.home_image,
+					success: function (res) {
+						console.log("分享成功：" + JSON.stringify(res));
+					},
+					fail: function (err) {
+						console.log("分享失败：" + JSON.stringify(err));
+					}
+				});
+			}
+		},
+		// 切换音频播放状态
+		toggleAudio() {
+			if (!this.articleInfo.result_audio) return;
+
+			if (this.isPlaying) {
+				this.audioPlayer.pause();
+				this.isPlaying = false;
+			} else {
+				this.audioPlayer.src = this.articleInfo.result_audio;
+				this.audioPlayer.play();
+				this.isPlaying = true;
+			}
+		},
+		// 新增过滤器方法
+		commaToArray(str) {
+			if (!str) return '';
+			return str.split(',');
+		},
+
+		// 新增过滤器方法
+		addBrackets(str) {
+			if (!str) return '';
+			if (!str.startsWith('《')) {
+				str = '《' + str;
+			}
+			if (!str.endsWith('》')) {
+				str = str + '》';
+			}
+			return str;
+		},
+		getInfoData() {
+			uni.request({
+				url: this.$apiHost + '/Member/getinfoData',
+				data: {
+					uuid: getApp().globalData.uuid
+				},
+				header: {
+					'content-type': 'application/json'
+				},
+				success: (res) => {
+					console.log('用户信息', res.data);
+
 				}
-			},
-		}
+			});
+		},
+		showActionSheet() {
+			this.$refs.actionSheet.show();
+		},
+		handleActionCancel() {
+			console.log('ActionSheet cancelled');
+		},
+		
+		goCreate() {
+			uni.switchTab({
+				url: '/pages/make/index'
+			});
+		},
 	}
+}
 </script>
 
 <style scoped lang="scss">
-	@import 'workDetail.scss';
+@import 'workDetail.scss';
 </style>

pages/make/fabuArticle.scss

@@ -4,253 +4,632 @@ page {
   top: 0;
   width: 100%;
   display: flex;
-  background-color: #f8f8f8;
+  background-color: #f2f6f2;
+  min-height: 100vh;
 }
 
 .status_bar {
   height: 44rpx;
   width: 100%;
 }
+
 .page {
-  background-color: #f8f8f8;
+  background-color: #f2f6f2;
   display: flex;
   flex-direction: column;
-	width:750rpx;
+  width: 750rpx;
+  min-height: 100vh;
 }
 
+// .nav-bar {
+//   width: 750rpx;
+//   height: 88rpx;
+//   background-color: #fff;
+//   display: flex;
+//   flex-direction: row;
+//   align-items: center;
+//   justify-content: space-between;
+//   padding: 0 10rpx;
+//   box-sizing: border-box;
+//   border-bottom: 0rpx solid #f0f0f0;
+
+//   .left {
+//     width: 120rpx;
+//     .uni-btn-icon {
+//       font-size: 50rpx;
+//       color: #000;
+//     }
+//   }
+
+//   .center {
+//     flex: 1;
+//     text-align: center;
+//     font-size: 32rpx;
+//     font-weight: bold;
+//     color: #333;
+//   }
+
+//   .right {
+//     display: flex;
+//     align-items: center;
+
+//     .btn {
+//       font-size: 28rpx;
+//       color: #333;
+//       margin-left: 30rpx;
+
+//       &:active {
+//         opacity: 0.7;
+//       }
+//     }
+//   }
+// }
+
 .nav-bar {
-  width: 750rpx;
-  height: 88rpx;
-  background-color: #fff;
+  width: calc(100ve - 73rpx);
+  height: calc(96rpx + var(--status-bar-height));
   display: flex;
-  flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  padding: 0 10rpx;
+  padding: 0;
+  padding-right: 40rpx;
+  padding-left: 33rpx;
   box-sizing: border-box;
-  border-bottom: 0rpx solid #f0f0f0;
 
   .left {
-    width: 120rpx;
+    display: flex;
+    align-items: center;
+    font-family: PingFang SC-Bold;
+    font-weight: 400;
+    font-size: 32rpx;
+    color: #1f1f1f;
+
     .uni-btn-icon {
-      font-size: 50rpx;
-      color: #000;
-    }
-  }
+      font-size: 45rpx;
+      font-weight: bold;
+      color: #1f1f1f;
+      transition: color 0.2s;
+      margin-right: 20rpx;
 
-  .center {
-    flex: 1;
-    text-align: center;
-    font-size: 32rpx;
-    font-weight: bold;
-    color: #333;
+      &:active {
+        color: #2b85e4;
+      }
+    }
   }
 
   .right {
     display: flex;
     align-items: center;
-    
+    font-size: 28rpx;
+    font-family: "PingFang SC-Bold";
+    font-weight: 400;
+
     .btn {
+      border-radius: 26rpx;
+      background: #1f1f1f;
+      padding: 6rpx 32rpx;
+      color: #acf934;
       font-size: 28rpx;
-      color: #333;
-      margin-left: 30rpx;
-      
-      &:active {
-        opacity: 0.7;
-      }
     }
   }
 }
 
-/* 用户信息列表 */
-.user-list{
-	width:710rpx;
-	border-radius: 20rpx;
-	margin: 20rpx auto;
-	.agree {
-		width:100%;text-align: center;color:#959595;font-size: 22rpx;padding:20rpx 0;margin-top: 0rpx;padding-right: 50rpx;
-		display: flex;flex-direction: row;justify-content: flex-end;align-items: center;
-		.xy {
-			color:darkred;padding:0rpx 20rpx;
-		}
-		image {
-			width:32rpx;margin-right: 8rpx;
-		}
-	}
-	.tips {
-		display: flex;flex-direction: row;justify-content: space-between;
-		height: 90rpx;
-		.title {
-			display: flex;flex-direction: row;justify-content: center;height: 80rpx;line-height: 80rpx;font-weight: bold;font-size: 30rpx;
-			.line {
-				width:10rpx;height:24rpx;background-color: $base;line-height: 80rpx;margin: 28rpx 20rpx;
-			}
-		}
-		.more-content{
-			display: flex;flex-direction: row;height:100%;
-			align-items: center;
-			.item1 {
-				display: flex;justify-content: center;height:100%;flex-direction: row;line-height: 100%;align-items: center;align-self: center;
-				.switch {
-				}
-				.status {
-					color:#E54D42;
-				}
-				.btn {
-					width:160rpx;height:50rpx;margin: 0 20rpx;text-align: center;margin-left: 40rpx;
-					background-color: #39B54A;border-radius: 25rpx;color:#fff;font-size: 24rpx;line-height: 50rpx;
-				}
-			}
-		}
-		.beizu {
-			padding:10rpx 30rpx;color:#959595;
-		}
-	}
-	.content {
-		padding:10rpx 30rpx;
-		display: flex;flex-direction: column;justify-content: space-between;
-		.edit {
-			border:solid 1px #f0f0f0;border-radius: 10rpx;width:670rpx;height:80rpx;font-size: 30rpx;padding:10rpx;background-color: #fff;
-		}
-		.edit2 {
-			border:solid 1px #f0f0f0;background-color: #fff;
-			border-radius: 10rpx;
-			width:670rpx;
-			height:340rpx;
-			font-size: 30rpx;
-			padding: 10rpx;
-			box-sizing: border-box;
-		}
-		.item {
-			display: flex;flex-direction: row;justify-content: space-between;
-			border:solid 1px #f0f0f0;border-radius: 10rpx;width:730rpx;height:80rpx;align-items: center;
-			.left {
-				padding-left: 10rpx;width:168rpx;font-size: 28rpx;
-			}
-			.input {
-				width:570rpx;font-size: 28rpx;
-			}
-			.picker {
-				padding-left: 10rpx;width:120rpx;display: flex;flex-direction: row;justify-content: space-between;
-				.selimg {
-					width:24rpx;height:24rpx;margin-top: 4rpx;margin-left: 12rpx;
-				}
-			}
-			.edit3 {
-				border:solid 0px #f0f0f0;border-radius: 10rpx;width:730rpx;height:140rpx;font-size: 28rpx;padding:8rpx;
-			}
-		}
-		.item2 {
-			display: flex;flex-direction: row;justify-content: space-between;margin-top: 10rpx;
-			.item21 {
-				display: flex;flex-direction: row;justify-content: space-between;
-				border:solid 1px #f0f0f0;border-radius: 10rpx;width:360rpx;height:80rpx;align-items: center;
-				.left {
-					padding-left: 10rpx;width:120rpx;line-height: 60rpx;font-size: 28rpx;
-				}
-				.input {
-					width:360rpx;font-size: 28rpx;line-height: 60rpx;
-				}
-			}
-		}
-	}
-	.img {
-		width:100%;padding-left: 20rpx;
-		image {
-			width:710rpx;
-		}
-	}
-	.img_list {
-		display: flex;
-		width:100%;
-		padding:20rpx 40rpx;
-		flex-wrap: wrap;
-		.image {
-			display: flex;
-			width:200rpx;
-			height:200rpx;
-			position: relative;
-			margin: 10rpx;
-			box-sizing: border-box;
-			justify-content: center;
-			align-items: center;
-			background: rgba(120, 120, 120, 0.2);border-radius: 8rpx;
-			
-			.txt {
-				font-size: 120rpx;
-				color: #999;
-			}
-			
-			.upimg {
-				position: absolute;left:0;top:0;
-				width:100%;
-				height:100%;
-				border-radius: 8rpx;
-			}
-			
-			.del {
-				width:40rpx;
-				height:40rpx;
-				position: absolute;
-				right:-10rpx;
-				top:-10rpx;
-			}
-		}
-	}
-	.btn_list {
-		display: flex;flex-direction: row;align-items: center;justify-content: center;
-		.btn_sq {
-			width:300rpx;height:80rpx;background-color: #BF8669;border-radius: 4rpx;text-align: center;color:#fff;line-height: 80rpx;
-			font-size: 32rpx;margin:20rpx;
-		}
-		
-	}
-	.telbg {
-		width:750rpx;height:350rpx;display: flex;flex-direction: column;padding-left: 40rpx;padding-top: 120rpx;color:#fff;
-		background-color: #517456;font-size: 30rpx;
-		.tel {
-			font-size: 80rpx;color:#BF8669;
-		}
-	}
-	.img2 {
-		width:100%;padding-left: 0rpx;
-		image {
-			width:750rpx;
-		}
-	}
+.enterContentDetails {
+  width: calc(100% - 40rpx);
+  min-height: 726rpx;
+  background: #ffffff;
+  border-radius: 20rpx;
+  margin: 0 20rpx;
+  padding: 0rpx 24rpx 24rpx 24rpx;
+  box-sizing: border-box;
 
+  .edit {
+    height: 92rpx;
+    border-bottom: 2rpx solid #f2f6f2;
+  }
+  .edit2 {
+    min-height: 350rpx;
+	width: 100%;
+    // border-bottom: 2rpx solid #f2f6f2;
+  }
+
+  .content-textarea {
+    padding-top: 24rpx;
+  }
+
+  ::v-deep.input-placeholder,
+  ::v-deep.textarea-placeholder {
+    font-family: PingFang SC;
+    font-weight: 400;
+    font-size: 32rpx;
+    color: #999999;
+  }
+
+  .agree {
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 400;
+    font-size: 24rpx;
+    color: #999999;
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	
+  }
+
+  .img {
+    width: 100%;
+    padding-left: 20rpx;
+
+    image {
+      width: 710rpx;
+    }
+  }
+
+  .img_list {
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    row-gap: 20rpx;
+    flex-wrap: wrap;
+
+    .image {
+      display: flex;
+      width: 208rpx;
+      height: 208rpx;
+      position: relative;
+      box-sizing: border-box;
+      justify-content: center;
+      align-items: center;
+      background: #f2f6f2;
+      border-radius: 16rpx;
+
+      .txt {
+        font-size: 120rpx;
+        color: #999;
+		width: 40rpx;
+		height: 40rpx;
+      }
+
+      .upimg {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: 8rpx;
+      }
+
+      .del {
+        width: 40rpx;
+        height: 40rpx;
+        position: absolute;
+        right: 0rpx;
+        top: 0rpx;
+      }
+    }
+  }
+
+  .btn_list {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+
+    .btn_sq {
+      width: 300rpx;
+      height: 80rpx;
+      background-color: #bf8669;
+      border-radius: 4rpx;
+      text-align: center;
+      color: #fff;
+      line-height: 80rpx;
+      font-size: 32rpx;
+      margin: 20rpx;
+    }
+  }
+
+  .telbg {
+    width: 750rpx;
+    height: 350rpx;
+    display: flex;
+    flex-direction: column;
+    padding-left: 40rpx;
+    padding-top: 120rpx;
+    color: #fff;
+    background-color: #517456;
+    font-size: 30rpx;
+
+    .tel {
+      font-size: 80rpx;
+      color: #bf8669;
+    }
+  }
 }
-.footer {
-	position: fixed;bottom:0rpx;width:750rpx;height:120rpx;display: flex;flex-direction: row;justify-content: center;
-	background: #fff;
-	.btn {
-		width:690rpx;height:80rpx;background-color: #39B54A;border-radius: 40rpx;text-align: center;color:#fff;line-height: 80rpx;
-		font-size: 32rpx;
-	}
-}
-.foot-btn {
-	height: 80rpx;padding:60rpx;
-	button {
-		height: 80rpx;line-height: 80rpx;font-size: 28rpx;
-	}
+
+.optionalWorks {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0 24rpx;
+  background: #fff;
+  padding: 24rpx;
+  height: 88rpx;
+  border-radius: 20rpx;
+  margin-top: 20rpx;
+  .title {
+    font-family: "PingFang SC-Bold";
+    font-weight: bold;
+    font-size: 28rpx;
+
+    text {
+      color: #bbb;
+      font-size: 24rpx;
+      padding-left: 10rpx;
+    }
+  }
+  .selectLeft {
+    display: flex;
+    align-items: center;
+    font-family: "PingFang SC-Bold";
+    .prompt {
+      margin-right: 8rpx;
+    }
+    .rightArrow {
+      width: 28rpx;
+      height: 28rpx;
+    }
+  }
 }
-.uni-textarea-placeholder {
+/* 用户信息列表 */
+.user-list {
+  width: 710rpx;
+  border-radius: 20rpx;
+  margin: 20rpx auto;
+
+  .agree {
+    width: 100%;
+    text-align: center;
     color: #959595;
-    overflow: hidden;
-}
-.num_txt {
+    font-size: 22rpx;
+    padding: 20rpx 0;
+    margin-top: 0rpx;
+    padding-right: 50rpx;
     display: flex;
     flex-direction: row;
+    justify-content: flex-end;
     align-items: center;
-    padding: 20rpx 30rpx;
-    
-    .num_input {
+
+    .xy {
+      color: darkred;
+      padding: 0rpx 20rpx;
+    }
+
+    image {
+      width: 32rpx;
+      margin-right: 8rpx;
+    }
+  }
+
+  .tips {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    height: 90rpx;
+
+    .title {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      height: 80rpx;
+      line-height: 80rpx;
+      font-weight: bold;
+      font-size: 30rpx;
+
+      .line {
+        width: 10rpx;
+        height: 24rpx;
+        background-color: $base;
+        line-height: 80rpx;
+        margin: 28rpx 20rpx;
+      }
+    }
+
+    .more-content {
+      display: flex;
+      flex-direction: row;
+      height: 100%;
+      align-items: center;
+
+      .item1 {
+        display: flex;
+        justify-content: center;
+        height: 100%;
+        flex-direction: row;
+        line-height: 100%;
+        align-items: center;
+        align-self: center;
+
+        .switch {
+        }
+
+        .status {
+          color: #e54d42;
+        }
+
+        .btn {
+          width: 160rpx;
+          height: 50rpx;
+          margin: 0 20rpx;
+          text-align: center;
+          margin-left: 40rpx;
+          background-color: #39b54a;
+          border-radius: 25rpx;
+          color: #fff;
+          font-size: 24rpx;
+          line-height: 50rpx;
+        }
+      }
+    }
+
+    .beizu {
+      padding: 10rpx 30rpx;
+      color: #959595;
+    }
+  }
+
+  .content {
+    padding: 10rpx 0rpx;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    .edit {
+      border: solid 1px #f0f0f0;
+      border-radius: 10rpx;
+      width: 670rpx;
+      height: 80rpx;
+      font-size: 30rpx;
+      padding: 10rpx;
+      background-color: #fff;
+    }
+
+    .edit2 {
+      border: solid 1px #f0f0f0;
+      background-color: #fff;
+      border-radius: 10rpx;
+      width: 670rpx;
+      height: 340rpx;
+      font-size: 30rpx;
+      padding: 10rpx;
+      box-sizing: border-box;
+    }
+
+    .item {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      border: solid 1px #f0f0f0;
+      border-radius: 10rpx;
+      width: 730rpx;
+      height: 80rpx;
+      align-items: center;
+
+      .left {
+        padding-left: 10rpx;
+        width: 168rpx;
+        font-size: 28rpx;
+      }
+
+      .input {
+        width: 570rpx;
+        font-size: 28rpx;
+      }
+
+      .picker {
+        padding-left: 10rpx;
         width: 120rpx;
-        height: 60rpx;
-        border: 1px solid $base;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+
+        .selimg {
+          width: 24rpx;
+          height: 24rpx;
+          margin-top: 4rpx;
+          margin-left: 12rpx;
+        }
+      }
+
+      .edit3 {
+        border: solid 0px #f0f0f0;
         border-radius: 10rpx;
-        margin: 0 20rpx;
-        text-align: center;
+        width: 730rpx;
+        height: 140rpx;
         font-size: 28rpx;
+        padding: 8rpx;
+      }
+    }
+
+    .item2 {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      margin-top: 10rpx;
+
+      .item21 {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        border: solid 1px #f0f0f0;
+        border-radius: 10rpx;
+        width: 360rpx;
+        height: 80rpx;
+        align-items: center;
+
+        .left {
+          padding-left: 10rpx;
+          width: 120rpx;
+          line-height: 60rpx;
+          font-size: 28rpx;
+        }
+
+        .input {
+          width: 360rpx;
+          font-size: 28rpx;
+          line-height: 60rpx;
+        }
+      }
     }
+  }
+
+  .img {
+    width: 100%;
+    padding-left: 20rpx;
+
+    image {
+      width: 710rpx;
+    }
+  }
+
+  .img_list {
+    display: flex;
+    width: 100%;
+    padding: 20rpx 40rpx;
+    flex-wrap: wrap;
+
+    .image {
+      display: flex;
+      width: 200rpx;
+      height: 200rpx;
+      position: relative;
+      margin: 10rpx;
+      box-sizing: border-box;
+      justify-content: center;
+      align-items: center;
+      background: rgba(120, 120, 120, 0.2);
+      border-radius: 8rpx;
+
+      .txt {
+        font-size: 120rpx;
+        color: #999;
+      }
+
+      .upimg {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: 8rpx;
+      }
+
+      .del {
+        width: 40rpx;
+        height: 40rpx;
+        position: absolute;
+        right: -10rpx;
+        top: -10rpx;
+      }
+    }
+  }
+
+  .btn_list {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+
+    .btn_sq {
+      width: 300rpx;
+      height: 80rpx;
+      background-color: #bf8669;
+      border-radius: 4rpx;
+      text-align: center;
+      color: #fff;
+      line-height: 80rpx;
+      font-size: 32rpx;
+      margin: 20rpx;
+    }
+  }
+
+  .telbg {
+    width: 750rpx;
+    height: 350rpx;
+    display: flex;
+    flex-direction: column;
+    padding-left: 40rpx;
+    padding-top: 120rpx;
+    color: #fff;
+    background-color: #517456;
+    font-size: 30rpx;
+
+    .tel {
+      font-size: 80rpx;
+      color: #bf8669;
+    }
+  }
+
+  .img2 {
+    width: 100%;
+    padding-left: 0rpx;
+
+    image {
+      width: 750rpx;
+    }
+  }
+}
+
+.footer {
+  position: fixed;
+  bottom: 0rpx;
+  width: 750rpx;
+  height: 120rpx;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  background: #fff;
+
+  .btn {
+    width: 690rpx;
+    height: 80rpx;
+    background-color: #39b54a;
+    border-radius: 40rpx;
+    text-align: center;
+    color: #fff;
+    line-height: 80rpx;
+    font-size: 32rpx;
+  }
+}
+
+.foot-btn {
+  height: 80rpx;
+  padding: 60rpx;
+
+  button {
+    height: 80rpx;
+    line-height: 80rpx;
+    font-size: 28rpx;
+  }
+}
+
+.uni-textarea-placeholder {
+  color: #959595;
+  overflow: hidden;
+}
+
+.num_txt {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 20rpx 30rpx;
+
+  .num_input {
+    width: 120rpx;
+    height: 60rpx;
+    border: 1px solid $base;
+    border-radius: 10rpx;
+    margin: 0 20rpx;
+    text-align: center;
+    font-size: 28rpx;
+  }
 }

pages/make/fabuArticle.vue

@@ -1,6 +1,59 @@
 <template>
 	<view class="page">
+
+
 		<view class="nav-bar">
+			<view class="left">
+				<view class="uni-btn-icon" @click="goBack">&#xe601;</view>
+				<view class="center">发表想法</view>
+			</view>
+			<view class="right">
+				<!-- <view class="btn" @click="onManage">管理</view> -->
+				<view class="btn" @click="onSubmit" v-if="id < 1">发布</view>
+				<view class="btn" @click="onSubmit" v-else>更新</view>
+			</view>
+		</view>
+		<view class="enterContentDetails">
+			<view class="content-title">
+				<input class="edit" v-model="ainfo.title" maxlength="20" placeholder="标题(必填)" />
+			</view>
+			<view class="content-textarea">
+				<textarea class="edit2" auto-height v-model="ainfo.content" :maxlength="1000"
+					placeholder="添加描述"></textarea>
+			</view>
+
+			<view class="agree">
+				<text class="xy">{{   ainfo.content.length }}/1000</text>
+			</view>
+				<!-- 上限五张图片 -->
+			<view class="img_list"> 
+				<view class="image" v-for="(item, index) in img_list" :key="index">
+					<image class="upimg" :src="item" mode="aspectFill"></image>
+					<image class="del" src="@/static/icon/img-del.png" @click="delIt(index)"></image>
+				</view>
+				<view class="image" @click="upload('list')" v-if="img_list.length < 9">
+					<!-- <text class="txt">+</text> -->
+					<image class="txt" src="../../static/icon/sy_icon_jiahao02.png" ></image>
+				</view>
+			</view>
+			 
+		</view>
+
+		<view class="optionalWorks" @click="onManage">
+			<view class="title">
+				可选作品
+				<text  v-if="id < 1">(图片或作品必选一个发布)</text>
+			</view>
+			<view class="selectLeft">
+				<text class="prompt"  v-if="id > 1">已选择一个作品</text>
+				<image class="rightArrow" src="../../static/me/wd_icon_jiantou2.png" ></image>
+			</view>
+		</view>
+
+
+		
+
+		<view class="nav-bar" v-if="false">
 			<view class="left">
 				<view class="uni-btn-icon" @click="goBack">&#xe601;</view>
 			</view>
@@ -11,7 +64,10 @@
 				<view class="btn" @click="onSubmit" v-else>更新</view>
 			</view>
 		</view>
-		<view class="user-list">
+ 
+
+
+		<view class="user-list" v-if="false"> 
 			<view class="content">
 				<input class="edit" v-model="ainfo.title" maxlength="20" placeholder="填写标题会有更多赞哦~" />
 			</view>
@@ -20,12 +76,12 @@
 					placeholder="美好的一天，写点什么吧..."></textarea>
 			</view>
 			<view class="agree">
-				<text>还可以输入<text class="xy">{{1000 - ainfo.content.length}}</text>字</text>
+				<text>还可以输入<text class="xy">{{ 1000 - ainfo.content.length }}</text>字</text>
 			</view>
 
 			<view class="img_list">
 
-				<view class="image" v-for="(item,index) in img_list" :key="index">
+				<view class="image" v-for="(item, index) in img_list" :key="index">
 					<image class="upimg" :src="item" mode="aspectFill"></image>
 					<image class="del" src="../../static/del.svg" @click="delIt(index)"></image>
 				</view>
@@ -42,328 +98,328 @@
 </template>
 
 <script>
-	export default {
-		components: {},
-		data() {
-			return {
-				skey: '',
-				uinfo: {},
-				is_first: 0,
-				pid: 0,
-				sel: 0,
-				pop_sel: false,
-				cate: '',
-				cid: 0,
-				catename: '',
-				img2: '',
-				cateNames: [],
-				cate_list: [],
-				CateIndex: 0,
-				nameList1: [],
-				nameList2: [],
+export default {
+	components: {},
+	data() {
+		return {
+			skey: '',
+			uinfo: {},
+			is_first: 0,
+			pid: 0,
+			sel: 0,
+			pop_sel: false,
+			cate: '',
+			cid: 0,
+			catename: '',
+			img2: '',
+			cateNames: [],
+			cate_list: [],
+			CateIndex: 0,
+			nameList1: [],
+			nameList2: [],
+			content: '',
+			cate: '',
+			ainfo: {
+				id: 0,
+				title: '',
 				content: '',
-				cate: '',
-				ainfo: {
-					id: 0,
-					title: '',
-					content: '',
-					name: '',
-					telphone: '',
-					address: '',
-					contact: '',
-					num: '',
-				},
-				TypeArray: ['请选择', '线下服务', '电话咨询', '远程服务', '视频咨询', '其他服务'],
-				TypeIndex: 0,
-				TypeArray2: ['请选择', '次', '天', '小时', '分钟', '周', '月', '年', '单', '份'],
-				TypeIndex2: 0,
-				img_list: [],
-				img_list2: [],
-				img_list1: [],
-				visible: false,
-				maskCloseAble: true,
-				str: '',
-				defaultValue: '',
-				listData: [],
-				cateTag: [],
-				money: '',
-				item_gz: -1,
-				item_time: [],
-				item_dx: [],
-				is_top: false,
-				is_agree: 0,
+				name: '',
+				telphone: '',
+				address: '',
+				contact: '',
+				num: '',
+			},
+			TypeArray: ['请选择', '线下服务', '电话咨询', '远程服务', '视频咨询', '其他服务'],
+			TypeIndex: 0,
+			TypeArray2: ['请选择', '次', '天', '小时', '分钟', '周', '月', '年', '单', '份'],
+			TypeIndex2: 0,
+			img_list: [],
+			img_list2: [],
+			img_list1: [],
+			visible: false,
+			maskCloseAble: true,
+			str: '',
+			defaultValue: '',
+			listData: [],
+			cateTag: [],
+			money: '',
+			item_gz: -1,
+			item_time: [],
+			item_dx: [],
+			is_top: false,
+			is_agree: 0,
+		}
+	},
+	onLoad(params) {
+		if (getApp().globalData.skey != "") {
+			this.skey = getApp().globalData.skey;
+		} else {
+			this.skey = params.skey || ''; //1234567xef
+		}
+		this.id = params.id || '117';
+		let that = this;
+		// this.getCate();
+		that.getInfo();
+		// this.getData();
+	},
+	onShow() {
+		let that = this;
+	},
+	methods: {
+		goBack() {
+			uni.navigateBack();
+		},
+		onManage() {
+			// 处理管理按钮点击
+			uni.redirectTo({
+				url: '/pages/make/manageArticle'
+			})
+		},
+		onPublish() {
+			this.onSubmit();
+		},
+		copyKd(item_data) {
+			if (item_data != "") {
+				uni.setClipboardData({
+					data: item_data, // e是需要设置的内容
+					success: function () {
+						uni.showToast({
+							title: '网址已复制',
+							icon: 'none'
+						})
+					}
+				})
 			}
 		},
-		onLoad(params) {
-			if (getApp().globalData.skey != "") {
-				this.skey = getApp().globalData.skey;
+		agreeChk() {
+			if (this.is_agree == 0) {
+				this.is_agree = 1;
 			} else {
-				this.skey = params.skey || ''; //1234567xef
+				this.is_agree = 0;
 			}
-			this.id = params.id || '117';
-			let that = this;
-			// this.getCate();
-			that.getInfo();
-			// this.getData();
 		},
-		onShow() {
-			let that = this;
+		showPicker() {
+			this.pop_sel = true;
 		},
-		methods: {
-			goBack() {
-				uni.navigateBack();
-			},
-			onManage() {
-				// 处理管理按钮点击
-				uni.redirectTo({
-					url: '/pages/make/manageArticle'
-				})
-			},
-			onPublish() {
-				this.onSubmit();
-			},
-			copyKd(item_data) {
-				if (item_data != "") {
-					uni.setClipboardData({
-						data: item_data, // e是需要设置的内容
-						success: function() {
-							uni.showToast({
-								title: '网址已复制',
-								icon: 'none'
-							})
-						}
-					})
-				}
-			},
-			agreeChk() {
-				if (this.is_agree == 0) {
-					this.is_agree = 1;
-				} else {
-					this.is_agree = 0;
-				}
-			},
-			showPicker() {
-				this.pop_sel = true;
-			},
-			open() {
-				this.visible = true
-			},
-			confirm(val) {
-				console.log(val)
-				this.defaultValue = val.code
-				this.ainfo.city = val.desc
-				this.visible = false
-			},
-			cancel() {
-				this.visible = false
-			},
-			delIt(ind) {
-				let arr = [];
-				if (this.img_list.length > 0) {
-					for (let i = 0; i < this.img_list.length; i++) {
-						if (i == ind) {} else {
-							arr.push(this.img_list[i]);
-						}
+		open() {
+			this.visible = true
+		},
+		confirm(val) {
+			console.log(val)
+			this.defaultValue = val.code
+			this.ainfo.city = val.desc
+			this.visible = false
+		},
+		cancel() {
+			this.visible = false
+		},
+		delIt(ind) {
+			let arr = [];
+			if (this.img_list.length > 0) {
+				for (let i = 0; i < this.img_list.length; i++) {
+					if (i == ind) { } else {
+						arr.push(this.img_list[i]);
 					}
-					this.img_list = arr;
 				}
-			},
-			getInfo() {
-				var that = this;
-
-				uni.request({
-					url: this.$apiHost + '/Article/getinfo', //仅为示例，并非真实接口地址。
-					data: {
-						uuid: getApp().globalData.uuid,
-						id: this.id
-					},
-					header: {
-						'content-type': 'application/json' //自定义请求头信息
-					},
-					success: (res) => {
-						console.log("====", res.data);
-						this.ainfo = res.data.article;
-						that.img_list1 = [];
-						that.img_list = [];
-						that.img_list2 = [];
-						if (res.data.article.images.length > 1) {
-							let arr = res.data.article.images.split("|");
-							if (arr.length > 0) {
-								for (let i = 0; i < arr.length; i++) {
-									if (arr[i].length > 10) {
-										that.img_list.push(arr[i]);
-									}
+				this.img_list = arr;
+			}
+		},
+		getInfo() {
+			var that = this;
+
+			uni.request({
+				url: this.$apiHost + '/Article/getinfo', //仅为示例，并非真实接口地址。
+				data: {
+					uuid: getApp().globalData.uuid,
+					id: this.id
+				},
+				header: {
+					'content-type': 'application/json' //自定义请求头信息
+				},
+				success: (res) => {
+					console.log("====", res.data);
+					this.ainfo = res.data.article;
+					that.img_list1 = [];
+					that.img_list = [];
+					that.img_list2 = [];
+					if (res.data.article.images.length > 1) {
+						let arr = res.data.article.images.split("|");
+						if (arr.length > 0) {
+							for (let i = 0; i < arr.length; i++) {
+								if (arr[i].length > 10) {
+									that.img_list.push(arr[i]);
 								}
 							}
 						}
-
 					}
+
+				}
+			});
+
+
+		},
+		checkField(str, tips) {
+			if (str.length < 2) {
+				uni.showToast({
+					title: tips,
+					icon: 'none'
 				});
+				return false;
+			}
+			return true;
+		},
+		onSubmit() {
+			console.log("skey", this.skey);
+			if (this.checkField(this.ainfo.title, "请输入名称") == false) {
+				return;
+			}
+			if (this.checkField(this.ainfo.content, "请输入具体内容") == false) {
+				return;
+			}
+			if (this.is_submit > 0) {
+				return;
+			}
 
+			let img_str = '';
+			if (this.img_list.length > 0) {
+				for (let i = 0; i < this.img_list.length; i++) {
+					img_str += this.img_list[i] + "|";
+				}
+			}
+			if (this.checkField(img_str, "请上传至少一张图片") == false) {
+				return;
+			}
+			let that = this;
+			this.is_submit = 1;
+			uni.request({
+				url: this.$apiHost + '/Article/add',
+				data: {
+					uuid: getApp().globalData.uuid,
+					id: this.ainfo.id,
+					title: this.ainfo.title,
+					content: this.ainfo.content,
+					img_list: img_str,
 
-			},
-			checkField(str, tips) {
-				if (str.length < 2) {
+				},
+				//data: formdata,   // 这里传入你的参数(json格式)
+				method: 'POST',
+				header: {
+					'Content-Type': 'application/x-www-form-urlencoded',
+					'sign': getApp().globalData.headerSign
+				},
+				dataType: 'json',
+				success: (res) => {
+					console.log("---", res.data);
 					uni.showToast({
-						title: tips,
+						title: res.data.str,
 						icon: 'none'
 					});
-					return false;
-				}
-				return true;
-			},
-			onSubmit() {
-				console.log("skey", this.skey);
-				if (this.checkField(this.ainfo.title, "请输入名称") == false) {
-					return;
-				}
-				if (this.checkField(this.ainfo.content, "请输入具体内容") == false) {
-					return;
-				}
-				if (this.is_submit > 0) {
-					return;
-				}
+					if (res.data.success == "yes") {
+						if (that.ainfo.id > 0) {
+							setTimeout(function () {
+								uni.navigateBack()
+							}, 500);
+						} else {
+							that.ainfo.title = '';
+							that.ainfo.content = '';
+							that.ainfo.num = '';
+							that.img_list = [];
+						}
+					} else { }
+					this.is_submit = 0;
 
-				let img_str = '';
-				if (this.img_list.length > 0) {
-					for (let i = 0; i < this.img_list.length; i++) {
-						img_str += this.img_list[i] + "|";
-					}
-				}
-				if (this.checkField(img_str, "请上传至少一张图片") == false) {
-					return;
-				}
-				let that = this;
-				this.is_submit = 1;
-				uni.request({
-					url: this.$apiHost + '/Article/add',
-					data: {
-						uuid: getApp().globalData.uuid,
-						id: this.ainfo.id,
-						title: this.ainfo.title,
-						content: this.ainfo.content,
-						img_list: img_str,
-
-					},
-					//data: formdata,   // 这里传入你的参数(json格式)
-					method: 'POST',
-					header: {
-						'Content-Type': 'application/x-www-form-urlencoded',
-						'sign': getApp().globalData.headerSign
-					},
-					dataType: 'json',
-					success: (res) => {
-						console.log("---", res.data);
-						uni.showToast({
-							title: res.data.str,
-							icon: 'none'
-						});
-						if (res.data.success == "yes") {
-							if (that.ainfo.id > 0) {
-								setTimeout(function() {
-									uni.navigateBack()
-								}, 500);
-							} else {
-								that.ainfo.title = '';
-								that.ainfo.content = '';
-								that.ainfo.num = '';
-								that.img_list = [];
+				},
+				fail: (err) => {
+					console.log('登录失败：', err);
+					this.is_submit = 0;
+				},
+				complete: (com) => { }
+			})
+		},
+		select(e) {
+			console.log('选择文件：', e)
+		},
+		upload(type) {
+			this.upload2(type)
+		},
+		upload2(type) {
+			console.log("----upload");
+			// this.$refs.files.upload();
+			// 图片选择上传upload() {
+
+			var _self = this;
+
+			// 图片选择，只支持一次选择一张图片
+
+			uni.chooseImage({
+				count: 1,
+				sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
+				sourceType: ['album', 'camera'], //从相册、相机选择
+				success: function (res) {
+					console.log('res:', res)
+					let filepath = "";
+					// #ifdef H5
+					filepath = res.tempFiles[0].path;
+					// #endif
+
+					// #ifdef APP-PLUS
+					filepath = res.tempFilePaths[0];
+					// #endif
+
+					_self.imglocal = filepath; //res.tempFilePaths[0]
+					const uploadTask = uni.uploadFile({
+						url: _self.$apiHost + '/Xweb/upload_img?skey=' + _self.skey, // post请求地址
+						filePath: filepath,
+						name: 'file', // 待确认
+						success: function (uploadFileRes) {
+							let resdata = JSON.parse(uploadFileRes.data)
+							console.log('Success1:', uploadFileRes);
+							if (resdata.success == 'no') {
+								uni.showToast({
+									title: resdata.str,
+									icon: 'none'
+								});
+								return;
 							}
-						} else {}
-						this.is_submit = 0;
-
-					},
-					fail: (err) => {
-						console.log('登录失败：', err);
-						this.is_submit = 0;
-					},
-					complete: (com) => {}
-				})
-			},
-			select(e) {
-				console.log('选择文件：', e)
-			},
-			upload(type) {
-				this.upload2(type)
-			},
-			upload2(type) {
-				console.log("----upload");
-				// this.$refs.files.upload();
-				// 图片选择上传upload() {
-
-				var _self = this;
-
-				// 图片选择，只支持一次选择一张图片
-
-				uni.chooseImage({
-					count: 1,
-					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
-					sourceType: ['album', 'camera'], //从相册、相机选择
-					success: function(res) {
-						console.log('res:', res)
-						let filepath = "";
-						// #ifdef H5
-						filepath = res.tempFiles[0].path;
-						// #endif
-
-						// #ifdef APP-PLUS
-						filepath = res.tempFilePaths[0];
-						// #endif
-
-						_self.imglocal = filepath; //res.tempFilePaths[0]
-						const uploadTask = uni.uploadFile({
-							url: _self.$apiHost + '/Xweb/upload_img?skey=' + _self.skey, // post请求地址
-							filePath: filepath,
-							name: 'file', // 待确认
-							success: function(uploadFileRes) {
-								let resdata = JSON.parse(uploadFileRes.data)
-								console.log('Success1:', uploadFileRes);
-								if (resdata.success == 'no') {
-									uni.showToast({
-										title: resdata.str,
-										icon: 'none'
-									});
-									return;
+							if (resdata.code == 0) {
+								console.log('Success2:', resdata.data.path);
+								if (type == 'avatar') {
+									_self.img2 = resdata.data.path;
+								} else if (type == 'list') {
+									_self.img_list.push(resdata.data.path)
+									console.log('_self.img_list:', _self.img_list);
+								} else if (type == 'list2') {
+									_self.img_list2.push(resdata.data.path)
+								} else if (type == 'list1') {
+									_self.img_list1.push(resdata.data.path)
 								}
-								if (resdata.code == 0) {
-									console.log('Success2:', resdata.data.path);
-									if (type == 'avatar') {
-										_self.img2 = resdata.data.path;
-									} else if (type == 'list') {
-										_self.img_list.push(resdata.data.path)
-										console.log('_self.img_list:', _self.img_list);
-									} else if (type == 'list2') {
-										_self.img_list2.push(resdata.data.path)
-									} else if (type == 'list1') {
-										_self.img_list1.push(resdata.data.path)
-									}
-								}
-							},
-							fail: function(uploadFileFail) {
-								console.log('Error:', uploadFileFail.data);
-							},
-							complete: () => {
-								console.log('Complete:');
 							}
-						});
+						},
+						fail: function (uploadFileFail) {
+							console.log('Error:', uploadFileFail.data);
+						},
+						complete: () => {
+							console.log('Complete:');
+						}
+					});
 
-					},
+				},
 
-					error: function(e) {
+				error: function (e) {
 
-						console.log(e);
+					console.log(e);
 
-					}
+				}
 
-				});
+			});
 
 
-			},
+		},
 
-		}
 	}
+}
 </script>
 
 <style scoped lang="scss">
-	@import 'fabuArticle.scss';
+@import 'fabuArticle.scss';
 </style>

pages/makedetail/makeDetail.scss

@@ -385,7 +385,7 @@ page {
     top: 0;
     padding-bottom: 40rpx;
     .musicContent {
-      width: calc(100% - 38rpx);
+      width: calc(100% - 76rpx);
       height: 620rpx;
       margin: 38rpx auto;
       margin-right: 0;
@@ -393,9 +393,17 @@ page {
       overflow-y: auto;
       background: url("../../static/makedetail/cz_img_cd.png") center right/auto
         100% no-repeat;
-      background-position-x: 370%;
+      background-position-x: 530%;
       box-sizing: border-box;
       padding: 200rpx 0;
+      .roll {
+        position: absolute;
+        left: 28rpx;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 26rpx;
+        height: 120rpx;
+      }
     }
     .maskLayer {
       width: 60%;

pages/makedetail/makeDetail.vue

@@ -56,10 +56,11 @@
 						<image @click="toggleAudio" v-else src="@/static/makedetail/cz_icon_bofang.png"
 							class="playerButton"></image>
 					</template>
-				</view>
+				</view> 
 				<view class="contentHeader">
 					<view class="musicContent">
 						<text> {{ queueDetail.description }}</text>
+						<image class="roll" src="@/static/icon/roll.png"></image>
 					</view>
 					<view class="maskLayer"></view>
 				</view>

pages/makedetail/makeImgDetail.scss

@@ -11,7 +11,7 @@
   }
   .nav-bar {
     width: 100vw;
-    height: 96rpx;
+    height: calc(96rpx + var(--status-bar-height));
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -20,7 +20,7 @@
     background: url("../../static/makedetail/cz_bg_top.png") center top / 100%
         auto no-repeat,
       #f2f6f2;
-    background-position-y: var(--status-bar-height);
+    // background-position-y: var(--status-bar-height);
     @keyframes rotate360 {
       from {
         transform: rotate(0deg);

pages/makedetail/makeMusicDetail.scss

@@ -11,7 +11,7 @@
   }
   .nav-bar {
     width: 100vw;
-    height: 96rpx;
+    height: calc(96rpx + var(--status-bar-height));
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -20,7 +20,7 @@
     background: url("../../static/makedetail/cz_bg_top.png") center top / 100%
         auto no-repeat,
       #f2f6f2;
-    background-position-y: var(--status-bar-height);
+    // background-position-y: var(--status-bar-height);
     @keyframes rotate360 {
       from {
         transform: rotate(0deg);
@@ -264,11 +264,11 @@
         right: 40rpx;
 
         .ai-btn {
-       image{
-        width: 134rpx;
-        height: 52rpx;
-        margin-left: 20rpx;
-       }
+          image {
+            width: 134rpx;
+            height: 52rpx;
+            margin-left: 20rpx;
+          }
         }
       }
 
@@ -276,9 +276,9 @@
         font-size: 24rpx;
         color: #999;
       }
-      .lyricCount{
+      .lyricCount {
         position: absolute;
-        bottom:50rpx;
+        bottom: 50rpx;
         right: 40rpx;
       }
     }

pages/my/DelMemConfirm.vue

@@ -45,8 +45,7 @@ export default {
     };
   },
   methods: {
-    goPage() {
-      console.log(66666);
+    goPage() { 
       uni.navigateTo({
         url: '/pages/AboutUs/UserLogoutAgreement'
       })

pages/my/my.vue

@@ -258,6 +258,7 @@
 	import meCard from "@/components/meCard/meCard.vue";
 	import WorkItem from "@/components/WorkItem/WorkItem.vue";
 	export default {
+		
 		components: {
 			tabbarView,
 			CustomConfirm,