小程序实现订单评价和商家评价

网友投稿 655 2023-11-11 12:24:45

小程序做线上商城就离不开交互，包括最重要的支付和订单评价系统。订单评价简单的只有商品评价，比较齐全的是商品和商家一起评价。

本文介绍的目录包含，商品评价，商家评价，星级评分，上传照片，以及评论字数限制。

目录：

（一）星级评分的写法

（二）评论区的字数显示和限制

（三）图片张数限制和上传到服务器

（四）完整代码

看看开发工具中的样品图：

在评论页中展示商品和商家两栏的评价内容，并且提交评价的时候也要区分开，将商品和商家的评论内容用数组的形式提交。

注意array和[object,object]的数据格式。

先说逻辑，因为两块其实是同一个功能，只不过是把方法名字区分为A和B，A和B的函数内容一样的，只有数据内容不一样。

所以这里是只讲A方法。

（一）先说星级评分方法；

?
1
2
3
4
5
6
7
8
9
10
<view class=stars>
<view class=text>评分</view>
<view class=star_list>
<block wx:for="{{stars}}" wx:key>
<image class="star-image" name="defen" value="{{key}}" style="left: {{item*30}}rpx" src="{{key > item ?(key-item == 0?normalSrc:selectedSrc) : normalSrc}}">
<view class="item" style="left:0rpx" data-key="{{item+1}}" bindtap="selectRight"></view>
</image>
</block>
</view>
</view>

用数组来存储图片，wx:for来循环图片列表，五星，列表长度就是0-4总共5，10星则是0-9。两张图片。一张是带颜色的作为点亮状态，一张是默认的作为默认状态。设置选中函数selectRight。点星星一次则将星星图片的位置从left位移多少个单位到点击的对应位置。反之则取消对应的星星选中。

函数：

?
1
2
3
4
5
6
7
8
9
10
11
//点击右边递增,否则递减，评分，商品+商家B
selectRight (e) {
var key = e.currentTarget.dataset.key;  //评分
if (this.data.key == 1 && e.currentTarget.dataset.key == 1) {
//只有一颗星的时候,再次点击,变为0颗
key = 0;
}
this.setData({
key: key
})
},

（二）评论区的字数显示和限制。

方法，给textarea一个最大的length.max-length =300.然后给输入域一个获取输入的事件，bindInput。通过获取bindInput的value长度，来限制。

JS中通过最大长度与输入长度的减法来动态改变fontNum剩余字数。

?
1
2
3
4
5
6
7
8
9
10
//字数限制 商品+商家B 
inputs (e) {
var value = e.detail.value,
len = parseInt(value.length);
//最多字数限制
if (len > this.data.max) return;
this.setData({
fontNum: 300-len //当前字数  
});
},

（三）上传多张图片并发送到服务器

默认的API即可，但是图片地址需要转化。wx.chooseImage所给出的图片地址是本地，并没有存到服务器上

，还需要保存到服务器上。

使用wx.request的方法。在回调的结果中，取出地址链接，存为数组或者单个url信息。与其他内容一起进行表单提交。
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$uploadFile({
filePath: tempFilePaths[0],
formData: {
evaluateType: store
},
name: evaluteImage,
url: v4/shop/file/uploadBySmall
}).then((res) => {
if (res.isSuccess) {
let url = res.resultData
that.setData({
imgboxB: [url],
imgboxB: imgboxB,
})
//$toast(图片上传成功)
} else {
//$toast(res.message)
}
})

（四）完整代码

wxml:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!--pages/addProComment/addProComment.wxml-->
<form bindsubmit="hrSubmit">
<view class=content>
<view class=form>
<view class=stores>
<image src={{goodsImg}}></image>
<view class=stor_t>{{gooodsName}}</view>
</view>
<view class=stars>
<view class=text>评分</view>
<view class=star_list>
<block wx:for="{{stars}}" wx:key>
<image class="star-image" name="defen" value="{{key}}" style="left: {{item*30}}rpx" src="{{key > item ?(key-item == 0?normalSrc:selectedSrc) : normalSrc}}">
<view class="item" style="left:0rpx" data-key="{{item+1}}" bindtap="selectRight"></view>
</image>
</block>
</view>
</view>
<view class=textarea>
<textarea id=advice name="advice" type="text" maxlength="{{max}}" bindinput="inputs" value="{{advice}}" placeholder="请输入评价内容..." placeholder-class=p_s></textarea>
<view class=fontNum>{{fontNum}}</view>
</view>
<view class=up-pic>
<view class=flex pic-box>
<block wx:key="imgbox" wx:for="{{imgbox}}">
<view class=ap-box>
<view class=add-pic name="Pics" value="{{item}}">
<image class=add-pic src={{item}}></image>
<view class=img-de bindtap="clearPic" data-deindex={{index}}>
<image class=img src=/images/error.png></image>
</view>
</view>
</view>
</block>
<view class=add-pic add-photo bindtap="uploadPic" wx:if="{{imgbox.length<4}}">
<image src=../../images/add.png />
</view>
</view>
</view>
</view>
</view>
<!-- 商家信息 -->
<view class=content wx:if="{{isTrue}}">
<view class=form>
<view class=stores>
<image src={{goodsImg}}></image>
<view class=stor_t>{{storeName}}</view>
</view>
<view class=stars>
<view class=text>评分</view>
<view class=star_list>
<block wx:for="{{starsB}}" wx:key>
<image class="star-image" style="left: {{item*30}}rpx" src="{{keyB > item ?(keyB-item == 0?normalSrc:selectedSrc) : normalSrc}}">
<view class="item" style="left:0rpx" data-key="{{item+1}}" bindtap="selectRightB"></view>
</image>
</block>
</view>
</view>
<view class=textarea>
<textarea id=advice name="adviceB" type="text" maxlength="{{max}}" bindinput="inputsB" value="{{adviceB}}" placeholder="请输入评价内容..." placeholder-class=p_s></textarea>
<view class=fontNum>{{fontNumB}}</view>
</view>
<view class=up-pic>
<view class=flex pic-box>
<block wx:key="imgboxB" wx:for="{{imgboxB}}">
<view class=ap-box>
<view class=add-pic>
<image class=add-pic src={{item}}></image>
<view class=img-de bindtap="clearPicB" data-deindex={{index}}>
<image class=img src=/images/error.png></image>
</view>
</view>
</view>
</block>
<view class=add-pic add-photo bindtap="uploadPicB" wx:if="{{imgbox.length<4}}">
<image src=../../images/add.png />
</view>
</view>
</view>
</view>
</view>
<button class=submit formType="submit"> 发布 </button>
</form>

WXSS:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
/* pages/addProComment/addProComment.wxss */
page{
background:#F5F5F2;
}
button::after{
border:none;
}
.content{
width:100%;
margin:20rpx 0 0 0;
background:#ffffff;
}
.form{
width:95%;
margin:0 auto;
padding:0 20rpx 0 20rpx;
}
.stores{
width:100%;
display:flex;
align-items: center;
padding-top:30rpx;
padding-bottom:30rpx;
}
.stores image{
width:45px;
height:45px;
border:1px solid #EBEBEB;
}
.stores .stor_t{
font-size:28rpx;
color:#000;
margin-left:30rpx;
}
.stars{
width:100%;
height:40px;
display:flex;
align-items: center;
border-top:1px solid #EBEBEB;
border-bottom:1px solid #EBEBEB;
}
.stars .text{
font-size:30rpx;
flex:1;
}
.stars .star_list{
flex:1;
position:relative;
margin-left:100rpx;
}
.textarea{
width: 100%;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
padding-top:20rpx;
}
.textarea .fontNum{
font-size:30rpx;
line-height:40rpx;
color:#333;
}
.textarea textarea{
-webkit-flex: 1;
flex: 1;
height:240rpx;
font-size:26rpx;
line-height: 42rpx;
text-align: left;
}
.p_s{
font-size:30rpx;
line-height:40rpx;
color:#CCCCCC;
}
.submit {
width: 100%;
height:45px;
margin:0 auto;
margin-top: 25rpx;
background:#00DF8C;
color:#fff;
font-size:32rpx;
line-height:45px;
border-radius:0;
}
.star-image {
position: relative;
width: 30rpx;
height: 30rpx;
}
.item {
position: absolute;
top:0;
width: 30rpx;
height: 30rpx;
}
/* 上传图片 */
.flex{
display: flex;
}
.up-pic{
width: 100%;
justify-content: center;
}
.pic-box{
flex-flow:wrap;
width:100%; 
}
.ap-box{
position: relative;
width: 150rpx;
height: 150rpx;
margin:0 15rpx 20rpx 10rpx;
}
.add-pic{
width: 150rpx;
height: 150rpx;
position: relative;
display: flex;
align-items: center;
justify-content: center;
border-radius: 5rpx;
}
.add-photo{  margin-bottom:20rpx;border: 1px solid #DDDDDD;}
.add-photo image{
width:100rpx;
height:100rpx;
}
/* 删除图片 */
.img-de{
width:45rpx;
height:45rpx;
border-radius:50%;
position:absolute;
right:-30rpx;
top:-15rpx;
z-index:999;
}
.img-de .img {
width:30rpx;
height:30rpx;
}

JS:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
// pages/addProComment/addProComment.js
const app = getApp()
const $http = app.$http
const $toast = app.$toast
const $getLocation = app.$getLocation
const setStorage = app.setStorage
const getStorage = app.getStorage
const cdnPath = app.cdnPath
const makePhoneCall = app.makePhoneCall
const $uploadFile = app.$uploadFile
import wxx from ../../utils/wx.js
import { parseParam } from ../../utils/index.js
const baseUrl = app.baseUrl
Page({
data: {
cdnPath: cdnPath,
goodsId: ,
gooodsName: ,
storeName: ,
goodsImg: ,
orderSn:,
openId: ,
memberId: ,
fontNum:300,
fontNumB: 300,
stars: [0, 1, 2, 3, 4],
starsB: [0, 1, 2, 3, 4],
normalSrc: cdnPath+img/addProcoment/nostar.png,
selectedSrc: cdnPath +img/addProcoment/star.png,
key: 0,//评分
keyB: 0,//评分
isTrue:true, //是否多个商家
imgbox: ,
imgboxB:
},
onLoad (opt) {
if (opt.length == 2){
that.setData({
isTrue: true,
})
}
this.setData({ 
src: ,
gooodsName: opt.gooodsName,
storeName: opt.storeName,
goodsImg: opt.goodsImage,
goodsId: opt.goodsId,
orderSn: opt.orderSn,
openId: wx.getStorageSync(openId) || ,
memberId: 1000000000243316 //wx.getStorageSync(memberId) ||
})
},
//点击右边递增,否则递减，评分，商品+商家B
selectRight (e) {
var key = e.currentTarget.dataset.key;  //评分
if (this.data.key == 1 && e.currentTarget.dataset.key == 1) {
//只有一颗星的时候,再次点击,变为0颗
key = 0;
}
this.setData({
key: key
})
},
selectRightB (e) {
var keyB = e.currentTarget.dataset.key;
if (this.data.keyB == 1 && e.currentTarget.dataset.keyB == 1) {
keyB = 0;
}
this.setData({
keyB: keyB
})
},
//字数限制 商品+商家B 
inputs (e) {
var value = e.detail.value,
len = parseInt(value.length);
//最多字数限制
if (len > this.data.max) return;
this.setData({
fontNum: 300-len //当前字数  
});
},
inputsB (e) {
var value = e.detail.value,
len = parseInt(value.length);
if (len > this.data.max) return;
this.setData({
fontNumB: 300 - len 
});
},
//发布评论不验证图片
hrSubmit (t) { //提交发布,商品+商家
var d = t.detail.value,
orderSn = this.data.orderSn,
memberId = this.data.memberId,
evaG = JSON.stringify({ evaGoodsInfo: [{ goodsId: this.data.goodsId, evaGoodsGrade: this.data.key, evaGoodsContent: d.advice, evaGoodsImage: this.data.imgbox }]}),
evaS = JSON.stringify({ evaStoreInfo: { evaServiceGrade: this.data.keyB, evaServiceContent: d.adviceB, evaStoreImage: this.data.imgboxB }});
$http({
url: `v4/shop/evaluate/goodsOrStore/${orderSn}/${memberId}`,  //{orderSn}/{memberId}
method: POST,
data: {
evaGoodsInfo:evaG,  //商品评价
evaStoreInfo: evaS,  //商家评价
inway:2
}
}).then(response => {
if (response.isSuccess === true) {
$toast(评价成功！)
setTimeout(() => {
wx.navigateTo({ url: /pages/myOrder/myOrder})
}, 1000)
}
}).catch((error) => {
console.log(error)
})
},
//上传图片，商品+商家B
uploadPic: function (e) {
var that = this;
var imgbox = this.data.imgbox;
var picid = e.currentTarget.dataset.pic;
var n = 4;
if (4 > imgbox.length > 0) {
n = 4 - imgbox.length;
} else if (imgbox.length == 4) {
n = 1;
}
wx.chooseImage({
count: n, // 默认数量
sizeType: [original, compressed], // 可以指定是原图还是压缩图，默认二者都有
sourceType: [album, camera], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
var tempFilePaths = res.tempFilePaths;
if (imgbox.length == 0) {
imgbox = tempFilePaths
} else if (4 > imgbox.length) {
imgbox = imgbox.concat(tempFilePaths);
} else {
imgbox[picid] = tempFilePaths[0];
}
$uploadFile({
filePath: tempFilePaths[0],
formData: {
evaluateType: store
},
name: evaluteImage,
url: v4/shop/file/uploadBySmall
}).then((res) => {
if (res.isSuccess) {
let url = res.resultData
that.setData({
imgbox: [url],
imgbox: imgbox,
})
//$toast(图片上传成功)
} else {
//$toast(res.message)
}
})
}
})
},
uploadPicB: function (e) {
var that = this;
var imgboxB = this.data.imgboxB;
var picid = e.currentTarget.dataset.pic;
var n = 4;
if (4 > imgboxB.length > 0) {
n = 4 - imgboxB.length;
} else if (imgboxB.length == 4) {
n = 1;
}
wx.chooseImage({
count: n, // 默认图片数量
sizeType: [original, compressed], 
sourceType: [album, camera], 
success: function (res) {
var tempFilePaths = res.tempFilePaths;
if (imgboxB.length == 0) {
imgboxB = tempFilePaths;
} else if (4 > imgboxB.length) {
imgboxB = imgboxB.concat(tempFilePaths);
} else {
imgboxB[picid] = tempFilePaths[0];
}
$uploadFile({
filePath: tempFilePaths[0],
formData: {
evaluateType: store
},
name: evaluteImage,
url: v4/shop/file/uploadBySmall
}).then((res) => {
if (res.isSuccess) {
let url = res.resultData
that.setData({
imgboxB: [url],
imgboxB: imgboxB,
})
//$toast(图片上传成功)
} else {
//$toast(res.message)
}
})
}
})
},
// 上传图片
uploadImgSuccess(res, file, fileList) {
if (res.isSuccess) {
let arr = res.resultData.split(/)
this.data.imageListHD.push(arr[arr.length - 1])
} else {
fileList.splice(-1, 1)
$toast(res.message)
return
}
},
//删除图片
clearPic: function (e) {//删除图片
let that = this;
let index = e.currentTarget.dataset.deindex;
let imgbox = this.data.imgbox;
imgbox.splice(index, 1)
that.setData({
imgbox: imgbox
});
},
clearPicB: function (e) {//删除图片
let that = this;
let index = e.currentTarget.dataset.deindex;
let imgboxB = this.data.imgboxB;
imgboxB.splice(index, 1)
that.setData({
imgboxB: imgboxB
});
},
onShareAppMessage: function () {
}
})

以上就是

您可能感兴趣的文章:微信小程序实现星级评价微信小程序如何实现五星评价功能微信小程序实现的五星评价功能示例微信小程序实现星级评价效果微信小程序实现星星评价效果微信小程序 五星评价功能的实现

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 小程序 数据 示例
上一篇:微信小程序实现云开发上传文件、图片功能
下一篇:微信小程序的动画效果详解
相关文章