tianyan/tra-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

课程详情开发完，图片上传组件开发完

Browse Source
This commit is contained in:
田岩
2025-06-25 21:08:48 +08:00
parent c3cfdb3145
commit 1ef7d4d8f0
5 changed files with 241 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/picture-upload/picture-upload.vue
+186 -57
View File
@@ -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>
// 方法
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>
src/pages/courseDetail/components/comment.vue
+25 -5
View File
@@ -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;
src/pages/courseDetail/index.vue
+1 -1
View File
@@ -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>
src/pages/courseDetail/submit.vue
+29 -26
View File
@@ -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 {
src/vite.config.js
-1
View File
@@ -6,7 +6,6 @@ export default defineConfig({
plugins: [
uni(),
],
// 服务器配置（解决网络驱动器监视问题）
server: {
watch: {