微信小程序商品评价，五星评价，多图上传

一.效果图

二. 五星评价以服务态度评价为例

1.页面效果

<view class='startbox'>

    <text>服务态度</text>

    <block wx:for="{{stars}}" wx:key='this'>

        <image class="star-image" style="left: {{item*10}}rpx" src="{{key > item ?selectedSrc:     normalSrc}}">

            <view class="item" data-key="{{item+1}}" bindtap="selectServer"></view>

        </image>

    </block>

</view>

2.js逻辑内容

/**

* 页面的初始数据

*/

data: {

    stars: [0, 1, 2, 3, 4],

    normalSrc: '../../icon/start01.png',//未选中状态

    selectedSrc: '../../icon/start02.png',//选中状态

    key: 0,//评分

    pics: [],

    pimgBox:[],

},

selectServer: function (e) {//服务态度评分

    var key = e.currentTarget.dataset.key

    if (this.data.key == 1 && e.currentTarget.dataset.key == 1) {//当有一颗星的时候再次点击取消选中

        key = 0;

    }

    console.log("得" + key + "分")

    this.setData({

        key: key

    })

},

三、多图上传

1.页面布局效果

<view class="evaluateBox">

    <textarea placeholder="说点什么吧~" maxlength="-1" bindblur="blure"></textarea>

    <view class='imgbox' >

        <view class='img' wx:for="{{pics}}" wx:key='this'>

            <image bindtap='delimg' data-index="{{index}}" class='delimg' data-src="{{item}}" src='../../icon/delimgbtn.png'></image>

            <image src="{{item}}" mode="aspecFill"/>

        </view>

        <image wx:if="{{upimgbtn==true}}" class="upimg" bindtap="upShopLogo" src="../../icon/upimg.png"></image>

    </view>

</view>

限制最多上传9张当upimgbtn的值为true时显示上传按钮反之隐藏

2.js逻辑处理

// 点击上传图片

upShopLogo: function() {
		var that = this;
		wx.showActionSheet({
			itemList: ['从相册中选择', '拍照'],
			itemColor: "#f7982a",
			success: function(res) {
				if (!res.cancel) {
					if (res.tapIndex == 0) {
						that.chooseWxImageShop('album')
					} else if (res.tapIndex == 1) {
						that.chooseWxImageShop('camera')
					}
				}
			}
		})
	},

	chooseWxImageShop: function(type) {
		var that = this;
		wx.chooseImage({
			sizeType: ['original', 'compressed'],
			sourceType: [type],
			success: function(res) {
				/*上传单张
				that.data.orderDetail.shopImage = res.tempFilePaths[0],
				that.upload_file(API_URL + 'shop/shopIcon', res.tempFilePaths[0])
				*/
				/*上传多张（遍历数组，一次传一张）*/
				var pics = that.data.pics;
				if (pics.length >= 9) {
					that.showMessage('最多上传九张');
					return false
				}
				if (res.tempFilePaths.length <= 9) {
					for (var index in res.tempFilePaths) {
						that.upload_file(url, res.tempFilePaths[index])
					}
				} else {
					that.showMessage('最多上传九张');
				}
			}
		})
	},
	upload_file: function(url, filePath) {
		var that = this;
		var formData = {};
		wx.uploadFile({
			url: url,
			filePath: filePath,
			name: 'file',
			header: {
				'content-type': 'multipart/form-data'

			}, // 设置请求的 header

			formData: formData, // HTTP 请求中其他额外的 form data
			success: function(res) {
				if (res.statusCode == 200) {
					var res = JSON.parse(res.data);
					if (res.status == 1) {
						var pics = that.data.pics;
						if (pics.length < 9) {
							pics = pics.concat(res.data.url);
						}

						if (pics.length >= 9) {
							that.setData({
								upimgbtn: false
							})
						}

						that.setData({
							pics: pics
						})
					} else {
						that.showMessage('上传失败');
					}
				} else {
					that.showMessage('上传失败');
				}
			},
			fail: function(res) {}
		})
	},