renshou/card/evaluate/evaluate.vue

<template>
	<view>
		<view class="scores">
			<view class="li ddflex">
				<view class="label">专业评分</view>
				<view class="item ddflex fflex">
					<view class="star ddflex">
						<image v-for="(it, idx) in [2, 4, 6, 8, 10]" :key="idx" :src="recordScore >= it ? '../static/images/pf_star_h.png' : '../static/images/pf_star.png'" @tap="addRecordScores(idx)"></image>
					</view>
					<view>{{recordScore}}分</view>
				</view>
			</view>
			<view class="li ddflex">
				<view class="label">服务评分</view>
				<view class="item ddflex fflex">
					<view class="star ddflex">
						<image v-for="(it, idx) in [2, 4, 6, 8, 10]" :key="idx" :src="musicScore >= it ? '../static/images/pf_star_h.png' : '../static/images/pf_star.png'" @tap="addMusicScores(idx)"></image>
					</view>
					<view>{{musicScore}}分</view>
				</view>
			</view>
		</view>
		<view class="det">
			<view class="tits ddflex">我的评价<text>{{evaluateText.length}}/300</text></view>
			<textarea v-model="evaluateText" maxlength="300" placeholder="评价描述" placeholder-class="placeholder" class="texts"></textarea>
			<view class="imgbox dflex">
				<view class="imgs" v-for="(item,index) in picList" :key="index">
					<image :src="item" mode="aspectFill" class="img" @click="preview(picList,index)"></image>
					<image src="../../static/pages/images/close3.png" class="clear" @click="delPic(index)"></image>
				</view>
				<view class="upload ddflex" @click="uploadProductImg()" v-if="picList.length < 9">
					<image src="../static/images/upload.png" mode="aspectFill"></image>
					<view>上传图片</view>
				</view>
			</view>
		</view>
		<view style="height: 140rpx;"></view>
		<view class="bot">
			<view class="btn" @click="updateScore">发表评价</view>
		</view>
	</view>
</template>

<script>
const app = getApp();
const req = require('../../utils/request.js');
const api = require('../../utils/api.js');
const util = require('../../utils/util.js');
export default {
	data() {
		return {
			picUrlss: req.public.picUrls,
			id: '',
			params: '',
			recordScore: 0,
			musicScore: 0,
			evaluateText: '',
			picList: [],
			bindType: ''
		};
	},

	onLoad(options) {
		this.id = options.id;
	},

	methods: {
		addRecordScores(index) {
			this.recordScore = (parseInt(index) + 1)*2;
		},
		addMusicScores(index) {
			this.musicScore = (parseInt(index) + 1)*2;
		},
		uploadProductImg() {
			let that = this;
			uni.chooseImage({
				count: this.picList.length-9,
				sizeType: ['original', 'compressed'],
				sourceType: ['album', 'camera'],
				success: function({ tempFilePaths }) {
					uni.showLoading({
						title: '上传中'
					});
					var promise = Promise.all(
						tempFilePaths.map(tempFilePath => {
							return new Promise(function(resolve, reject) {
								req.uploadFile('/api/nocheck/upload', tempFilePath, res => {
									that.picList = that.picList.concat(res.src);
									console.log('that.picList==',that.picList)
									uni.hideLoading();
								});
							});
						})
					);
					promise
						.then(function(results) {
							console.log(results);
						})
						.catch(function(err) {
							console.log(err);
						});
				}
			});
		},
		delPic(index) {
			let arr = this.picList;
			arr.splice(index, 1);
			this.picList = arr;
		},
		//预览图片
		previewImgss(list, index) {
			var src = list[index].file;
			let imgs = list.map(it => {
				if (it.file) {
					return it.file;
				}
			});
			uni.previewImage({
				current: src, // 当前显示图片的http链接
				urls: imgs
			});
		},
		updateScore() {
			let form = {
				bindId:this.id,
				type:2
			};
			form.specialityScore = this.recordScore
			form.serveScore = this.musicScore
			form.content = this.evaluateText
			form.evaluateImg = this.picList&&this.picList.length>0 ? this.picList.join(',') : ''
			
			if(!form.bindId) return req.msg('id不能为空')
			if(!form.specialityScore) return req.msg('请进行专业评分')
			if(!form.serveScore) return req.msg('请进行服务评分')
			if(!form.content) return req.msg('请填写评价描述')
			
			req.postRequest('/api/evaluate/save', form, () => {
				req.msg('评价成功', () => {
					uni.navigateBack();
				});
			});
		}
	}
};
</script>

<style>
	@import "./evaluate.css";
</style>