先看一下整体效果:
在网上看了一下,不是界面功能风格不符合要求,就是代码搞得太复杂, 还不如自己写一个
WXML代码
<view>
<view class='head-main'>
<view class='head'>
<view>发表评价</view>
<view class='release' bindtap='onSubmit'>发布</view>
</view>
</view>
<view class='score'>
<view class='score-left'>
<image src='{{goods_img}}' />
<view>
<text>描述相符</text>
</view>
</view>
<view class='score-right'>
<view wx:for-items="{{score_img_arr}}" wx:for-item="img" wx:key="index">
<image bindtap='onScore' data-score='{{index+1}}' src="{{img}}" />
</view>
<view class='score_text'>
<text>{{score_text}}</text>
</view>
</view>
</view>
<view class='textarea'>
<textarea placeholder-class='textarea-text' placeholder='宝贝满足你的期待吗？说说你的使用心得，分享给想买的他们吧'></textarea>
<view class='picture'>
<view class='picture' wx:if="{{!is_upload}}">
<view class='picture_item' bindtap="chooseImage">
<image src='{{camera_pic}}' />
</view>
</view>
<view wx:else class='picture'>
<view class='picture_upload' bindtap="" wx:for-items="{{upload_pic}}" wx:for-item="pic" wx:key="index" >
<image src='{{pic}}' />
<view class='picture_delete' bindtap='deletePic' data-pic_index='{{index}}'>
<image src='{{delete_ico}}' />
</view>
</view>
<view class='picture_item' bindtap="chooseImage" hidden="{{pic_length}}">
<image src='{{camera_pic}}' />
</view>
</view>
</view>
</view>
</view>
JS代码
// pages/evaluate/index.js
Page({
/**
* 页面的初始数据
*/
data: {
default_score: 5,
score_text_arr: ['非常差','差','一般','好','非常好'],
score_text: "",
score_img_arr: [],
upload_pic: [],
upload_pic_name: [],
upload_succ: true,
pic_length: false,
is_upload: false,
delete_ico: "https://api.gzshisu.com/data/xcx/images/delete_ico.png",
camera_pic: "http://pnga.mypng.cn/1324/98-Camera.png",
goods_img:"https://img.alicdn.com/imgextra/i2/2585780740/O1CN011HKxYBjGug0VPwX_!!2585780740-0-beehive-scenes.jpg_180x180xzq90.jpg_.webp",
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log(options)
this.setData({
order_id: options.order_id,
goods_id: options.goods_id,
goods_ext_id: options.goods_ext_id
});
this.get_goods( options.goods_id, options.goods_ext_id)
this._default_score(this.data.default_score);
},
get_goods:function(goods_id, goods_ext_id){
var that= this;
wx.request({
url: 'https://xxx.com/home/goods/goodsEvaluate',
method: 'POST',
data: {
token: wx.getStorageSync('token'),
goods_id: that.data.goods_id,
goods_ext_id: that.data.goods_ext_id
},
success: function (res) {
that.setData({
goods_img: res.data.goods_ext_image,
});
}
})
},
_default_score: function (tauch_score = 0){
var score_img= [];
var score= 0;
for (let i = 0; i < 5; i++) {
if (i < tauch_score) {
score_img[i] = "img/star_on.png"
score= i;
} else {
score_img[i] = "img/star_off.png"
}
}
this.setData({
score_img_arr: score_img,
score_text: this.data.score_text_arr[score]
});
},
onScore:function(e){
var score = e.currentTarget.dataset.score;
this._default_score(score);
},
chooseImage(e) {
var that= this;
wx.chooseImage({
count: 3,
sizeType: ['original', 'compressed'], //可选择原图或压缩后的图片
sourceType: ['album', 'camera'], //可选择性开放访问相册、相机
success: res => {
var addImg = res.tempFilePaths;
var pic_length= false;
if (addImg.length<3){
pic_length= false;
}else{
pic_length = true;
}
that.setData({
upload_pic: addImg,
pic_length: pic_length,
is_upload: true
})
}
})
},
//上传评论
onSubmit:function(){
var that= this;
var is= false;
var upload_picture_list = that.data.upload_pic
var upload_img =[]
for (var i in upload_picture_list) {
that.upload_file_server(that, upload_picture_list, i)
}
setTimeout(function () {
if (that.data.upload_succ) {
var ddd = [];
for (var i in that.data.upload_pic_name) {
console.log(that.data.upload_pic_name[i]);
ddd.push(that.data.upload_pic_name[i])
}
console.log(that.data.upload_pic_name);
wx.request({
url: 'https://xxx.com/home/order/addEvaluate',
method: 'POST',
data: {
token: wx.getStorageSync('token'),
order_evaluate: {
"order_id": that.data.order_id,
"goods_id": that.data.goods_id,
"goods_ext_id": that.data.goods_ext_id,
"img_name": that.data.upload_pic_name
},
},
success: function (res) {
}
})
}
}, 800);
},
upload_file_server: function (that, upload_picture_list, i){
var upload_task = wx.uploadFile({
header: { "Content-Type": "multipart/form-data" },
url: "https://xxx.com/home/goods/goodsEvaluatePic",
filePath: upload_picture_list[i],
name: 'img_file',
formData: {
token: wx.getStorageSync('token'),
},
success: function (res) {
let json_data= JSON.parse(res.data);
if (json_data.code==200){
let img_name= json_data.img_name;
that.data.upload_pic_name[i]= img_name;
that.setData({
upload_pic_name: that.data.upload_pic_name
})
}else{
that.data.upload_succ= false;
wx.showToast({
title: json_data.msg,
icon: 'loading',
duration: 2000
})
}
}
});
},
deletePic:function(e){
var pic_index = e.currentTarget.dataset.pic_index;
var upload_pic = [];
for (let i in this.data.upload_pic){
if (i != pic_index){
upload_pic.push(this.data.upload_pic[i])
}
}
console.log(upload_pic)
this.setData({
upload_pic: upload_pic,
pic_length: false,
is_upload: true
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
})WCSS代码
.head-main{
height: 100rpx;
display: flex;
flex-direction: row;
justify-content: center;
background: #f8f8f8;
}
.head{
display: flex;
width: 90%;
flex-direction: row;
align-items: center;
justify-content: space-between;
font-size: 38rpx;
font-weight: bold;
}
.release{
color: #f95807;
}
.score{
height: 150rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
border-bottom: 1rpx #e6e6e6 solid;
/* background: cornflowerblue; */
}
.score-left{
width: 33%;
display: flex;
flex-direction: row;
align-items: center;
font-size: 37rpx;
font-weight: bold;
justify-content: space-between;
}
.score-left image{
height: 100rpx;
width: 100rpx;
}
.score-right{
height: 150rpx;
display: flex;
flex-direction: row;
align-items: center;
width: 65%;
/* background: red; */
}
.score-right image{
width: 60rpx;
height: 60rpx;
margin-right: 12rpx;
}
.score_text{
width: 150rpx;
text-align: center;
color: #b0b0b0;
}
.textarea{
position: relative;
margin-top: 20rpx;
height: 600rpx;
width: 100%;
border-bottom: 1rpx #e6e6e6 solid;
}
.textarea textarea{
height: 400rpx;
width: 100%;
}
.textarea-text{
color: #b0b0b0;
}
.picture{
position: absolute;
z-index: 99;
bottom: 30rpx;
height: 200rpx;
display: flex;
flex-direction: row;
justify-content: space-around;
width: 100%;
}
.picture_item{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
height: 200rpx;
width: 200rpx;
border: 1rpx #e6e6e6 dashed;
}
.picture_item image{
width: 100rpx;
height: 100rpx;
}
.picture_upload{
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
height: 200rpx;
width: 200rpx;
}
.picture_upload image{
height: 200rpx;
width: 200rpx;
}
.picture_delete{
width: 200rpx;
height: 50rpx;
position: absolute;
display: flex;
box-sizing: border-box;
justify-content: center;
bottom:-50rpx;
right:0rpx;
border: 1rpx #e6e6e6 solid;
border-top: none;
}
.picture_delete image{
width: 50rpx;
height: 50rpx;
}