From 1ef7d4d8f04fdfa8a930936f85e8be0fae22eb96 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=94=B0=E5=B2=A9?= <tybb88x@gmail.com>
Date: Wed, 25 Jun 2025 21:08:48 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AF=BE=E7=A8=8B=E8=AF=A6=E6=83=85=E5=BC=80?=
 =?UTF-8?q?=E5=8F=91=E5=AE=8C=EF=BC=8C=E5=9B=BE=E7=89=87=E4=B8=8A=E4=BC=A0?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=BC=80=E5=8F=91=E5=AE=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../picture-upload/picture-upload.vue         | 243 ++++++++++++++----
 src/pages/courseDetail/components/comment.vue |  30 ++-
 src/pages/courseDetail/index.vue              |   2 +-
 src/pages/courseDetail/submit.vue             |  55 ++--
 src/vite.config.js                            |   1 -
 5 files changed, 241 insertions(+), 90 deletions(-)

diff --git a/src/components/picture-upload/picture-upload.vue b/src/components/picture-upload/picture-upload.vue
index 2e226b39..ee23a749 100644
--- a/src/components/picture-upload/picture-upload.vue
+++ b/src/components/picture-upload/picture-upload.vue
@@ -1,67 +1,196 @@
 <template>
-  <view class="components_custom_file_upload_div pic-cell">
-	  <view v-for="(item,index) in fileList">
-	    <image-preview :imgId="item.fileId"></image-preview>
-	  </view>
-    <view @tap="upload">
-      <view class="img-width-height add_icon wh_100">+</view>
-    </view>
-  </view>
+	<view class="components_custom_file_upload_div pic-cell">
+		<view v-for="(item,index) in fileList" class="img_div pic-item">
+			<image-preview :imgId="item.fileId" class="img"></image-preview>
+		</view>
+		<view @tap="upload" v-show="show_upload_button">
+			<view class="  add_icon"></view>
+		</view>
+	</view>
 </template>
 
 <script setup>
-import { ref, defineProps, defineEmits, onMounted } from 'vue'
-import common from '@/common/common'
+	import {
+		ref,
+		reactive,
+		defineProps,
+		defineEmits,
+		onMounted,
+		computed,
+		watch,
+		
+	} from 'vue'
+	import common from '@/common/common'
 
-import { uploadFile } from '@/api/common'
+	import {
+		uploadFile
+	} from '@/api/common'
+	const show_upload_button = computed(() => {
+		return !props.readonly && props.limit > fileList.length
+	})
+	// 定义props
+	const props = defineProps({
+		modelValue: {
+			type: Array,
+			default: function() {
+				return []
+			}
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		limit: {
+			type: Number,
+			default: 9
+		},
+		mark: {
+			type: [String, Number],
+			default: ''
+		}
+	})
+	// 状态管理
+	const fileList = reactive([])
+	
+	watch(() => props.modelValue, (newVal) => {
+		fileList.length = 0
+		if (Array.isArray(newVal)) {
+			fileList.push(...newVal.map(res => ({
+				fileId: res
+			})))
+		} 
+		// else if ((typeof newVal === "String") && newVal !== '') {
+		// 	fileList.push({
+		// 		fileId: newVal
+		// 	})
+		// }
+	}, {
+		deep: true,
+		immediate: true
+	})
+	// 定义emits
+	const emits = defineEmits(['update:modelValue'])
 
-// 定义props
-const props = defineProps({
-  modelValue: {
-    type: String,
-    default: ''
-  },
-  limit: {
-    type: Number,
-    default: 9
-  },
-  mark: {
-    type: [String, Number],
-    default: ''
-  }
-})
 
-// 定义emits
-const emits = defineEmits(['upload_success'])
+	onMounted(() => {
 
-// 状态管理
-const fileList = ref([])
+	})
+	const showPicture = (urls, current) => {
+		// const urlsList = urls.map((url) => imgPrefix(url));
 
-// 生命周期钩子
-onMounted(() => {
-  // 初始化逻辑
-})
+		// uni.previewImage({
+		// 	current: current || 0,
+		// 	urls: urlsList,
+		// 	longPressActions: {
+		// 		// itemList: ['发送给朋友', '保存图片', '收藏'],
+		// 		itemList: ['保存图片'],
+		// 		success: function(data) {
+		// 			uni.saveImageToPhotosAlbum({
+		// 				filePath: urlsList[data.index],
+		// 				success: function() {
+		// 					// that.$common.msg('下载成功')
+		// 				}
+		// 			});
+		// 		},
+		// 		fail: function(err) {}
+		// 	}
+		// });
+	}
 
-// 方法
-const upload = () => {
-  uni.chooseImage({
-    count: props.limit,
-    sizeType: ['original', 'compressed'],
-    sourceType: ['camera', 'album'],
-    success: async ({ tempFilePaths }) => {
-      for (const file of tempFilePaths) {
-        try {
-          // 修正：data变量未定义问题
-          const data = { bizScen: 'S3005' }
-          const res = await uploadFile(file, data)
-		  console.log('res', res);
-          fileList.value.push(res)
-        } catch (error) {
-          console.error('文件上传失败', error)
-        }
-      }
-      // emits('upload_success', fileList.value)
-    }
-  })
-}
-</script>    
\ No newline at end of file
+	// 方法
+	const upload = () => {
+		uni.chooseImage({
+			count: props.limit,
+			sizeType: ['original', 'compressed'],
+			sourceType: ['camera', 'album'],
+			success: async ({
+				tempFilePaths
+			}) => {
+				const data = {
+					bizScen: 'S3005'
+				}
+				const upload_map = tempFilePaths.map((file) => uploadFile(file, data))
+				Promise.all(upload_map).then(res => {
+					fileList.push(...res)
+					emits('update:modelValue', fileList.map(res => res.fileId))
+					console.log('res, res', res);
+				}).catch(() => {
+
+				})
+
+				// for (file of tempFilePaths) {
+				// 	try {
+				// 		const res = await uploadFile(file, data)
+				// 		console.log('res', res);
+				// 		fileList.push(res)
+				// 	} catch (error) {
+				// 		console.error('文件上传失败', error)
+				// 	}
+				// }
+				// emits('upload_success', fileList.value)
+			}
+		})
+	}
+</script>
+<style scoped lang="scss">
+	.components_custom_file_upload_div {
+		display: flex;
+
+		.img_div {
+			overflow: hidden;
+			border: 2rpx solid #C0C0C0;
+			border-radius: 8rpx;
+
+			.img {
+				width: 100%;
+				height: 100%;
+			}
+		}
+	}
+
+	.pic-cell {
+		width: 100%;
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: flex-start;
+	}
+
+	.pic-item {
+		margin-right: 30rpx;
+		width: 170rpx;
+		height: 170rpx;
+		border-radius: 8rpx;
+		// background-color: red;
+		margin-bottom: 24rpx;
+	}
+
+	.add_icon {
+		position: relative;
+		width: 170rpx;
+		height: 170rpx;
+		border: 2rpx dashed #C0C0C0;
+		border-radius: 8rpx;
+
+		&::before {
+			content: "";
+			position: absolute;
+			background-color: #333;
+			top: calc(50% - 15rpx);
+			left: 50%;
+			width: 2rpx;
+			height: 30rpx;
+			transform: translateX(-50%);
+		}
+
+		&::after {
+			content: "";
+			position: absolute;
+			background-color: #333;
+			top: 50%;
+			left: calc(50% - 15rpx);
+			width: 30rpx;
+			height: 2rpx;
+			transform: translateY(50%);
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/pages/courseDetail/components/comment.vue b/src/pages/courseDetail/components/comment.vue
index bf4a901e..ff16c150 100644
--- a/src/pages/courseDetail/components/comment.vue
+++ b/src/pages/courseDetail/components/comment.vue
@@ -15,8 +15,9 @@
 					</view>
 					<view class="title">
 						{{item.bbsContent}}
-					</view>
-					<view class="img_div">
+					</view>azf 
+					<view class="img_div pic-cell">
+						<image-preview v-for="img in item.imgIdList" :imgId="img" class="pic-item"></image-preview>
 					</view>
 					<view class="time_and_reply">
 						<view class="time">{{item.bbsTm.substr(0,16)}}</view>
@@ -74,7 +75,7 @@
 		</scroll-view>
 		<view class="send_evaluate_div">
 			<uv-button type="primary" class="send_evaluate"
-				@click="common.navigateTo('/pages/courseDetail/submit?crsNum='+crsNum)">发布评价</uv-button>
+				@click="common.navigateTo('/pages/courseDetail/submit?crsNum='+props.crsNum+'&imgId='+props.imgId)">发布评价</uv-button>
 		</view>
 
 		<uni-popup ref="popup" background-color="red">
@@ -124,7 +125,8 @@
 	})
 
 	const props = defineProps({
-		crsNum: String
+		crsNum: String,
+		imgId: String
 	})
 	const click_reply = ({
 		userName,
@@ -171,6 +173,24 @@
 </script>
 
 <style lang="scss" scoped>
+	
+	
+	.pic-cell {
+		width: 100%;
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: flex-start;
+	}
+	
+	.pic-item {
+		margin-right: 16rpx;
+		width: 170rpx;
+		height: 170rpx;
+		border-radius: 8rpx;
+		// background-color: red;
+		margin-bottom: 24rpx;
+	}
+	
 	.send_evaluate_div_height {
 		height: 170rpx;
 	}
@@ -378,7 +398,7 @@
 	}
 
 	.comment_div {
-		padding: 20rpx 40rpx;
+		padding: 20rpx 20rpx 20rpx 40rpx;
 		background-color: #ffffff;
 		border-radius: 24rpx;
 		position: relative;
diff --git a/src/pages/courseDetail/index.vue b/src/pages/courseDetail/index.vue
index 4c5d938c..914a9633 100644
--- a/src/pages/courseDetail/index.vue
+++ b/src/pages/courseDetail/index.vue
@@ -34,7 +34,7 @@
 					<knowledge v-model="form"></knowledge>
 				</view>
 				<view class="evaluate" v-if="tabAct == 2">
-					<comment :crsNum="crsNum"></comment>
+					<comment :crsNum="form.crsNum" :imgId="form.imgId"></comment>
 				</view>
 
 			</view>
diff --git a/src/pages/courseDetail/submit.vue b/src/pages/courseDetail/submit.vue
index f197a2b4..6e8ca049 100644
--- a/src/pages/courseDetail/submit.vue
+++ b/src/pages/courseDetail/submit.vue
@@ -10,26 +10,28 @@
 			<view class="title font_pf">发表评价</view>
 			<view class="body-content">
 				<view class="picture">
-					<view class="pic-item" v-for="item in 4" :key="item">
-						<!-- <image class="w_100" src="/src/static/images/test/touxiang.png" mode="widthFix"></image> -->
-						<picture-upload></picture-upload>
-					</view>
+					<!-- <view class="pic-item" v-for="item in 4" :key="item"> -->
+					<!-- <image class="w_100" src="/src/static/images/test/touxiang.png" mode="widthFix"></image> -->
+					<picture-upload :limit="4" v-model="formData.imgIdList"></picture-upload>
+					<!-- </view> -->
 				</view>
 				<view class="tips font_pf">最多可添加4张图片</view>
 				<view class="num">
 					<view class="num-pic">
-						<img class="w_100" src="/src/static/images/test/touxiang.png" mode="widthFix" />
+						<image-preview class="img_100" :imgId="imgId" :isCache="true"></image-preview>
+						<!-- <img class="w_100" src="/src/static/images/test/touxiang.png" mode="widthFix" /> -->
 					</view>
 					<view class="num-box">
-						<view class="font_pf fz-28 c-666">综合评分</view>
+						<view class="font_pf fz-28 c-666">综合评分(1-11)</view>
 						<view class="slider-box">
-							<uv-slider step="1" activeColor="#0066FF" :blockSize="14" v-model="formData.bbsGrade"
-								:min="0" :max="10"></uv-slider>
+							<!-- <uv-slider step="1" activeColor="#0066FF" :blockSize="14" v-model="formData.bbsGrade"
+								:min="0" :max="10"></uv-slider> -->
+							<slider :min="0" :max="10" :value="formData.bbsGrade" :step="0.1" :show-value="true" :blockSize="14"></slider>
 						</view>
-						<view class="flex-jcsb">
+						<!-- <view class="flex-jcsb">
 							<view class="font_pf fz-30 c-000">0</view>
 							<view class="font_pf fz-30 c-000 tar">10</view>
-						</view>
+						</view> -->
 					</view>
 				</view>
 				<view class="tab">
@@ -70,6 +72,7 @@
 		"bbsTag": 'SUG', // 评价标签 （SUG 建议 ASK 提问 ）
 		"bbsContent": '', // 评价内容
 	})
+	const imgId = ref('')
 	const submit = () => {
 		if (formData.bbsContent === '') {
 			if (formData.bbsTag == 'SUG') {
@@ -85,7 +88,7 @@
 	}
 	onLoad((params) => {
 		formData.crsNum = params.crsNum;
-
+		imgId.value = params.imgId;
 	});
 </script>
 
@@ -118,24 +121,14 @@
 		padding: 36rpx;
 	}
 
-	.picture {
-		width: 100%;
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: space-between;
-	}
 
-	.pic-item {
-		width: 170rpx;
-		height: 170rpx;
-		border-radius: 8rpx;
-		background-color: red;
-		margin-bottom: 24rpx;
-	}
+
+
 
 	.tips {
 		color: #666666;
 		font-size: 24rpx;
+		margin-top: 24rpx;
 		margin-bottom: 28rpx;
 	}
 
@@ -150,8 +143,10 @@
 	.num-pic {
 		width: 92rpx;
 		height: 92rpx;
-		padding-top: 20rpx;
+		// margin-top: 20rpx;
 		margin-right: 20rpx;
+		border-radius: 8rpx;
+		overflow: hidden;
 	}
 
 	.num-box {
@@ -170,7 +165,7 @@
 		}
 
 		:deep(uni-slider) {
-			margin: 0 16rpx 10rpx 0;
+			margin: 0 0rpx 10rpx 0;
 		}
 
 		:deep(.uni-slider-tap-area) {
@@ -180,6 +175,14 @@
 		:deep(.uni-slider-thumb) {
 			border: 2px solid #0066ff;
 		}
+
+		:deep(.uni-slider-value) {
+			color: #0066FF;
+			font-size: 15px;
+			margin-left: 1em;
+			font-weight: 600;
+			font-family: Arial;
+		}
 	}
 
 	.tab {
diff --git a/src/vite.config.js b/src/vite.config.js
index 11410494..c530e13a 100644
--- a/src/vite.config.js
+++ b/src/vite.config.js
@@ -6,7 +6,6 @@ export default defineConfig({
   plugins: [
     uni(),
   ],
-  
   // 服务器配置（解决网络驱动器监视问题）
   server: {
     watch: {