uniapp实现一个订单下多个商品的评论

已于 2023-04-13 09:40:53 修改
阅读量975 收藏 8
点赞数
分类专栏： uniapp 文章标签： uni-app
于 2023-04-13 09:36:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_59068879/article/details/130122086
版权

1.先来看需求分析，一个订单下的多个商品的评论说明了在一个订单中点击评论按钮直接跳转到评论页面中，同时渲染订单下的三个商品，如下图所示：

 

 并且要实现在不同的商品评论下输入的评论内容互不影响，这就对第一次做该业务的人来说有点小困难，反正当时我是头都大了。但是别急，没你想象中的那么困难，在我实现了该功能之后其实也就在我原有代码的基础上做了一点点修改。下面来看一下思路：

1.对订单商品信息数据循环并且添加新新的字段，评论内容需要什么类型的字段就添加什么类型的字段。在我的需求中评论需要的是---文字内容和图片，所以就设置了一个字符串类型的字段和一个数组类型的字段用来存储输入的图片。

that.goodsData = res
	that.goodsData.forEach((item,index)=>{
	that.$set(item,'content','');
	that.$set(item,'imgs',[]);
	that.$set(item,'upimgs',[])
	that.$set(item,'rateValue','')
})

2.循环订单商品信息数据，并将新增的字段作为数据字段绑定给输入的内容和图片

<scroll-view scroll-y="true" >
			<view class="" v-for="(items,index) in goodsData" :key="index" @tap="Tap(index)">
				<view class="goods-content">
					<image class="store-image" :src="items.imgUrl" mode=""></image>
					<view class="goods-text">
						<text>{{items.goods_name}}</text>
						<uni-rate v-model="items.rateValue" @change="onChange" />
					</view>
				</view>
				<textarea name="" v-model="items.content" id="" cols="30" rows="10" class="review-content" placeholder="输入您的感受,可以帮助到其他小伙伴哦~"></textarea>
				<view class="uni-uploader-body">
					<view class="" style="color: #ccc; font-size: 26rpx;margin-left: 20rpx;">
						<text>最多上传3张图片</text>
					</view>
					<view class="uni-uploader__files">
						<block v-for="(image,id) in items.imgs" :key="id">
							<view class="uni-uploader__file" style="position: relative;">
								<!-- 删除的图标以及删除的 delimage方法传递的参数 -->
								<uni-icons @tap="delimage(index,id)" class="del" size="20" type="clear"></uni-icons>
								<image ref="files" class="uni-uploader__img" :src="image" :data-src="image" @tap="previewImage(index,id)"></image>
							</view>
						</block>
						<view v-show="imageList.length < 3" class="uni-uploader__input-box">
							<view class="uni-uploader__input" @tap="chooseImage(items,index)"></view>
						</view>
					</view>
				</view>
				<Lines/>
			</view>
		</scroll-view>

3.在上传请求上传后端时，循环商品信息数据并且将其内需要上传的数据赋值给一个新对象内的值，最后将这个对象作为数据传递到后端，待后端解析写入数据库

let that = this
				let goodsArr = []
				this.goodsData.forEach((item)=>{
					let good = {
						headImg:that.userInfo.imgUrl, //用户头像
						userName:that.userInfo.userName,//用户姓名
						comment:item.content,//评论内容
						goods_id:item.shopId,//商品id
						orderId:item.order_id,//订单号
						eval_img:JSON.stringify(item.upimgs),//评论图片数组
						type:item.type //商品类型
					}
					goodsArr.push(good)
				})

全体代码

<template>
	<view class="content">
		<scroll-view scroll-y="true" >
			<view class="" v-for="(items,index) in goodsData" :key="index" @tap="Tap(index)">
				<view class="goods-content">
					<image class="store-image" :src="items.imgUrl" mode=""></image>
					<view class="goods-text">
						<text>{{items.goods_name}}</text>
						<uni-rate v-model="items.rateValue" @change="onChange" />
					</view>
				</view>
				<textarea name="" v-model="items.content" id="" cols="30" rows="10" class="review-content" placeholder="输入您的感受,可以帮助到其他小伙伴哦~"></textarea>
				<view class="uni-uploader-body">
					<view class="" style="color: #ccc; font-size: 26rpx;margin-left: 20rpx;">
						<text>最多上传3张图片</text>
					</view>
					<view class="uni-uploader__files">
						<block v-for="(image,id) in items.imgs" :key="id">
							<view class="uni-uploader__file" style="position: relative;">
								<!-- 删除的图标以及删除的 delimage方法传递的参数 -->
								<uni-icons @tap="delimage(index,id)" class="del" size="20" type="clear"></uni-icons>
								<image ref="files" class="uni-uploader__img" :src="image" :data-src="image" @tap="previewImage(index,id)"></image>
							</view>
						</block>
						<view v-show="imageList.length < 3" class="uni-uploader__input-box">
							<view class="uni-uploader__input" @tap="chooseImage(items,index)"></view>
						</view>
					</view>
				</view>
				<Lines/>
			</view>
		</scroll-view>
		<button @tap="addContent">发布评价</button>
	</view>
</template>

<script>
	import Lines from '@/components/common/Lines.vue'
	import {pathToBase64,base64ToPath} from '../../js_sdk/mmmm-image-tools/index.js'
	import $http from '../../common/api/request.js'
	import {mapState} from 'vuex'
	import {v4 as uuidv4} from 'uuid'
	export default {
		data() {
			return {
				// 评论内容
				content:'',
				// 商品信息数据
				goodsData:[],
				// 订单页传递过来的数据--订单信息
				data:[],
				//存储图片路径用于图片展示
				imageList: [],
				//七牛云的外链
				qiniuBucketURLPrefix :'放上自己的云存储外链' ,
				//存储外链
				partImgUrl:[] ,
				// 评分
				
			}
				 
		},
		components:{
			Lines
		},
		computed:{
			...mapState({
				userInfo:state=>state.user.userInfo
			}),
		},
		onLoad(e) {
			this.data = JSON.parse(e.data)
			this.getOrderDetialData(this.data)
		},
		methods: {
			Tap(index){
				
			},
			onChange(e) {
				console.log('rate发生改变:' + JSON.stringify(e))
				// console.log(this.rateValue);
			},
			getOrderDetialData(data){
				let that = this
				$http.request({
					url:'/getOrderDetialData',
					method:'POST',
					header:{
						token:true
					},
					data:{
						orderId:data.order_id
					}
				}).then((res)=>{
					that.goodsData = res
					that.goodsData.forEach((item,index)=>{
						that.$set(item,'content','');
						that.$set(item,'imgs',[]);
						that.$set(item,'upimgs',[])
						that.$set(item,'rateValue','')
					})
				})
			},
			chooseImage(item,index){
				let newIndex = index
				var that = this
				that.goodsData[newIndex].upimgs = []
				uni.chooseImage({
					count:3,//最多可以选择的图片张数
					sizeType:['compressed'],//original原图 compressed压缩图
					sourceType:['album','camera'] ,//album 从相册选图，camera 使用相机
					// 成功则返回图片的本地文件路径列表 tempFilePaths
					success: (chooseImageRes) => {
						that.goodsData[index].imgs.push(...chooseImageRes.tempFilePaths)
						// this.imageList.push(...chooseImageRes.tempFilePaths)
						const tempFilePaths = chooseImageRes.tempFilePaths;
						that.goodsData[index].imgs.forEach((item,index)=>{
							$http.request({
								url:'/storeToken',
								method:'POST'
							}).then((res)=>{
								// 唯一码
								const uuid = uuidv4()
								let uploadMsg = res;
								let uniqueCode = uuid;
								let postUrl = 'http://upload-z2.qiniu.com'
								uni.uploadFile({
									url:postUrl,
									fileType: "image",
									filePath:item,
									name:'file',
									formData:{
										'key':uniqueCode.slice(0,10),
										'token':uploadMsg
									},
									// 经过escape()转转义之后的文件名和图片链接一部分一致
									success: (uploadFileRes) => {
										let key = JSON.parse(uploadFileRes.data).key
										let partImgUrl = escape(uniqueCode.slice(0,10));
										that.goodsData[newIndex].upimgs.push({
											imgUrl : 'http://'+this.qiniuBucketURLPrefix + partImgUrl
										});
									},
									fail: (err) => {
										console.log('fail',err);
									}
								})

							}).catch((err)=>{
								console.log(err);
							})
						})
					}
				})
			},
			// 删除图片
			delimage(index,id){
				this.goodsData[index].imgs.splice(id,1)
				this.goodsData[index].upimgs.splice(id,1)
			},
			// 预览图片
			previewImage(index,id){
				uni.previewImage({
					urls:this.goodsData[index].imgs,//需要预览的图片连接列表
					current:this.goodsData[index].imgs[id]//当前显示的图片连接
				})
			},
			addContent(){
				let that = this
				let goodsArr = []
				this.goodsData.forEach((item)=>{
					let good = {
						headImg:that.userInfo.imgUrl, //用户头像
						userName:that.userInfo.userName,//用户姓名
						comment:item.content,//评论内容
						goods_id:item.shopId,//商品id
						orderId:item.order_id,//订单号
						eval_img:JSON.stringify(item.upimgs),//评论图片数组
						type:item.type //商品类型
					}
					goodsArr.push(good)
				})
				$http.request({
					url:'/addContentData',
					method:'POST',
					header:{
						token:true
					},
					data:{
						goods:goodsArr
					}
				}).then((res)=>{
					uni.showToast({
						title:"评价提交成功,即将返回上一页",
						icon:'none'
					})
					let timer = setTimeout(()=>{
						uni.navigateBack({
							delta: 1
						});
						clearTimeout(timer)
					},2000)
				}).catch(()=>{
					uni.showToast({
						title:"请求失败",
						icon:'none'
					})
				})
			}
		}
	}
</script>

<style scoped>
.flex {
	display: flex;
	justify-content: center;
	align-items: center;
}
.content{
	padding: 20rpx;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	margin-top: 14rpx;
	margin-bottom: 80rpx;
}
.review-content{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 710rpx;
	height: 150rpx;
	background-color: #f8f8f8;
}
.imgSrc{
	width: 220rpx;
	height: 220rpx;
	border: 1rpx dashed #ccc;
	font-size: 20rpx;
	color: #ccc;
	margin-top: 20rpx;
	margin-right: 15rpx;
}
.select{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
}
button{
	position: fixed;
	bottom: 0rpx;
	left: 0rpx;
	width: 100%;
	height: 80rpx;
	background-color: #00aaff;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
}
.del{
	position: absolute;
	top: 0rpx;
	right: 0%;
	z-index: 999;
}
.goods-content{
	display: flex;
	justify-content:flex-start;
	align-items: center;
	margin-bottom: 20rpx;
}
.store-image{
	width: 140rpx;
	height: 120rpx;
	border-radius: 20rpx;
}
.goods-text{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin-left: 20rpx;
}
.uni-uploader-body {
	background-color: #f8f8f8;
}
</style>

遇见颜言
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
uni-app评论组件
weixin_45081480的博客
04-26 2185
<template> <view class="comContainer"> <h4>评论：</h4> <view class="readly" id="commentsBox"> <view class="readly-item" v-for="(item, index) in commentsList" :key="index"> &lt...
shop:一个商城项目 SpringBoot + uniapp
04-13
1. 数据库设计：商城项目通常涉及用户表、商品表、订单表等多个数据库表，需要合理设计表结构，考虑数据的一致性和安全性。 2. 安全性：如防止SQL注入、XSS攻击，以及使用HTTPS保证数据传输的安全。 3. 性能优化：...
订单列表暂无订单-VUE模板-UNIAPP模板
04-04
暂时没有订单哦 去点餐 订单列表暂无订单-VUE模板-UNIAPP模板 原切片设计文件下载后用UNIAPP切片软件生成导出就可以使用 VUE模板 UNIAPP模板 布局、样式、JS分离
uni-app实战社区交友类app开发
03-06
适用人群具备Html+Css+Javascript基础知识。课程概述本季度为uni-app实战项目第一季度，将实战开发社区交友类app，其中会包括发布到安卓端app，iOS端app、微信小程序和支付宝小程序。课程大纲见以下图！
uniapp——点赞、取消点赞
努力、拼搏、奋进
05-08 628
uniapp——点赞、取消点赞
uniapp封装一个文章评论输入组件，可发表情、图片评论，Vue3+Ts语法！可随意拓展写法！
annans的博客
01-31 1920
uniapp封装一个文章评论输入组件，可发表情、图片评论，Vue3+Ts语法！可随意拓展写法，实现了一个简单的评论框可发图片可发表情，用的是Vue3+Ts的语法，对于使用HBuilder的友友们也可以改造为Vue2的，可自行拓展！具体的业务逻辑可根据自己的需求去调整修改
uniapp 微信小程序仿抖音评论区功能，支持展开收起
柑橘乌云_
08-31 5173
最近需要写一个评论区功能，所以打算仿照抖音做一个评论功能，支持展开和收起，首先我们需要对功能做一个拆解，评论区功能，两个模块，一个是发表评论模块，一个是评论展示区。接下来对这两个模块进行详细描述。使用到的技术 uniapp uview2.0 文章最后我会贴上全部源码。
shop一个商城项目 SpringBoot + uniapp 学习自linjiashop.zip
最新发布
06-25
【uniapp】是HBuilderX开发的一款多端开发框架，支持编写一次代码，发布到iOS、Android、Web（H5、微信小程序、支付宝小程序、百度小程序、字节跳动小程序、QQ小程序等）等多个平台。uniapp使用Vue.js语法，具有丰富...
uniapp+unincloud实现完整商城系统
02-23
- uniapp基于Vue.js，提供了一套统一的API，开发者可以编写一次代码，然后在多个平台上运行，极大地提高了开发效率。 - uniapp包含丰富的组件库，如按钮、表单、轮播图等，满足商城系统常见的UI需求。 - 支持...
shop一个商城项目 SpringBoot + uniapp 学习自linjiashop2.zip
06-25
uniapp是一款多端开发框架，它允许开发者使用Vue.js语法编写代码，一次编写，多端运行，支持iOS、Android、H5以及小程序等多个平台。在电商项目中，uniapp的主要作用包括： 1. **跨平台开发**：uniapp的跨平台特性...
shop一个商城项目 SpringBoot + uniapp 学习自linjiashop1.zip
06-25
uniapp是一款多端开发框架，由HBuilderX编辑器支持，允许开发者编写一次代码，发布到iOS、Android、Web（H5、微信小程序、支付宝小程序、百度小程序等）等多个平台。在电商项目中，uniapp可以用来构建以下功能： 1....
uniapp---------订单多商品评价及图片上传、删除功能
baidu_35290582的博客
08-26 1356
效果图如下： 前端代码如下： <template> <view id="orderPj"> <view class="Box" v-for="(items,i) in info" :key="i" style="background-color: #fff;margin-bottom: 20rpx;"> <view class="goodsBox" > <image :src="items.pic" mode=.
uniapp仿淘宝--商品详情模板
weixin_45969142的博客
02-28 4064
界面演示 参考链接 https://blog.csdn.net/qq_40601005/article/details/108092783 修改地方 尽量将他用的框架给省略。重新编写一下啊。图片地址自己更换 总体代码 <template> <!-- https://blog.csdn.net/qq_40601005/article/details/108092783 --> <view class="container"> <!-- 商品轮播图 --&
uniapp回复评论展开以及收起
YY_WYG的博客
12-16 6445
这几天开发回复的功能以及点赞展示剩余评论，费劲脑汁的给弄出来了 样式 数据结构：只有两层 父评论和所有子评论 子评论代码 <template> <div> <view class="comment" v-for="info in commentChildren" :key="info.id"> <div class="c-left"> <image :src="info.avatar"><
SpringBoot + uniapp 实现App评论回复功能
qq_47007501的博客
07-30 2221
to_r_id: 默认为null 如果不为null 则表明这是一条回复的回复 为null 则为回复。此外，为了能够让评论显示的更加友好一些，这里按照发表时间的时间戳进行了降序排列。二、 后端接口 ( 这里没做分页，实现分页也非常简单 )上述代码有一个Bug 回复的回复始终会显示在回复的下方。comment_id: 评论ID 属于对应评论的回复。art_id： 文章ID 表示属于哪篇文章的评论。u_id: 评论人ID 用来查询评论人信息的。u_id: 回复人的ID。r_id: 回复ID。
uniapp实现一个评论区
在校前端菜菜大学僧
03-04 1213
所以我们需要画出大致的布局，先上组件代码Index.vue代码，再上comment.vue。无非就是写个评论区页面，将需要的参数通过props传入，将需要抛出的事件通过emit抛出。自己回复的评论可以进行crud, 对于他人的评论仅仅只能评论。分父级（主评论）和子级（子评论）还是话不多说，先上效果图。有问题可以一起沟通哦~
[uniapp] uni-ui+vue3.2小程序评论列表组件 回复评论 点赞和删除
前端一线搬运工的博客
01-09 4003
主要是插件市场没找到满意的, 诸多用着也不顺, 所以有了cc-comment, 如有Bug请留言或Email, 开源不易且用且珍惜, 感谢使用. 关于功能样式, 主打一个借鉴如下; 参考[*小红书*]App的评论回复功能: 点击评论内容展示回复弹窗, 二级评论默认显示一条, 点击展开查看更多, 无评论收起功能. 参考[*什么值得买*]App的多层级回复评论title显示效果
uniapp小程序订单页面UI
C站全栈优质创作者、阿里云受邀博主专家，喜欢结识新伙伴寻找志同道合的朋友，欢迎一起探讨学习
06-14 5449
之前用模板写了订单页面，由于需求改了导致这个页面做更新麻烦，弄了一下午，索性全部删除了自己写了，上面的tabs用的是b-ui框架写的，其他的都是原生写法。根据我的需求，通过订单号查一个群组的商品数据，然后将订单状态以及点击事件、创建时间，商品数量总计 显示出来，在开发时，需要先了解uniapp小程序的开发流程和基本UI组件，以及订单页面的设计原则和需求分析。
评论组件--uniapp textarea focus，string.replace
sdaulee的博客
08-13 2099
评论组件--uniapp textarea focus，string.replace
给我一个uniapp+springboot的小项目
08-20
好的，我可以为您提供一个基于uniapp和springboot的小项目，它是一个简单的在线商城应用，包括用户注册登录、商品浏览、购物车、订单管理等功能。您可以通过uniapp实现前端页面的开发，通过springboot实现后端数据的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值