universal-wechat-uniapp-241007/pages_order/components/list/comment/commentList.vue

<template>
	<view class="commemt">
		<view class="comment-list">
			<commentItem 
			v-for="(item,index) in list" 
			:key="index"
			:parentId="item.id"
			:sourceType="params.type"
			:sourceId="params.orderId"
			:item="item" />
		</view>

		<view class="submit-box">
			<view class="top">
				<button 
				class="share"
				open-type="share">
					<uv-icon
					color="#00cf05"
					size="50rpx"
					name="weixin-fill"></uv-icon>
				</button>
				
				<input type="text"
				disabled
				@click="$refs.popup.open('bottom')"
				:placeholder="'评论给' + params.name"
				v-model="form.userValue"/>
				
				<!-- <view class="submit"
				@click="submit">
					发布
				</view> -->
			</view>
		</view>
		
		<uv-popup ref="popup" :round="30">
			<view class="popup">
				<view class="content-input">
					<uv-textarea 
					v-model="form.userValue" 
					:maxlength="200" 
					autoHeight
					count
					focus
					:placeholder="'评论给' + params.name"></uv-textarea>
				</view>
				
				
				<view class="images box">
					<uv-upload 
					:fileList="fileList" 
					:maxCount="imageMax" 
					multiple 
					width="150rpx" 
					height="150rpx"
					@delete="deleteImage"
					@afterRead="afterRead"
					:previewFullImage="true"></uv-upload>
				</view>
				
				<view class="uni-color-btn"
				@click="submit">
					发布
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script>
	import commentItem from './commentItem.vue'
	export default {
		components: {
			commentItem,
		},
		props: ['list', 'params'],
		data() {
			return {
				form : {},
				imageMax : 9,
				fileList : [],
			}
		},
		methods: {
			submit(){
				
				let data = {
					...this.form,
					...this.params,
				}
				
				if (this.$utils.verificationAll(data, {
						userValue: '说点什么吧',
						type: '缺少type',
						orderId: '缺少orderId',
					})) {
					return
				}
				
				data.userImage = this.fileList.map((item) => item.url).join(",")
				
				
				this.$api('addComment', data, res => {
					if(res.code == 200){
						this.$refs.popup.close()
						this.form.userValue = ''
						uni.showToast({
							title: '发布成功!',
							icon: 'none'
						})
						this.$emit('getData')
					}
				})
			},
			
			deleteImage(e){
				this.fileList.splice(e.index, 1)
			},
			afterRead(e){
				let self = this
				e.file.forEach(file => {
					self.$Oss.ossUpload(file.url).then(url => {
						self.fileList.push({
							url
						})
					})
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.commemt{
		padding-bottom: env(safe-area-inset-bottom);
	}
	.comment-list {
		margin-top: 20rpx;
		padding-bottom: 150rpx;
	}

	.submit-box {
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
		width: 100%;
		box-shadow: 0 0 6rpx 6rpx #00000011;
		padding-bottom: env(safe-area-inset-bottom);

		.top {
			align-items: center;
			display: flex;
			justify-content: center;

			input {
				background-color: #f3f3f3;
				width: 460rpx;
				height: 40rpx;
				border-radius: 40rpx;
				margin: 20rpx;
				padding: 20rpx 30rpx;
				font-size: 28rpx;
			}

			.submit {}
		}
	}
	.popup{
		.content-input{
			min-height: 400rpx;
		}
		
		.box{
			padding: 0 20rpx;
		}
		.images{
			display: flex;
			flex-wrap: wrap;
			padding: 20rpx;
		}
	}
</style>