flying-monkey/pagesB/i-want-evaluate/i-want-evaluate.vue

<template>
	<view>
		<status-nav navBarTitle="我要评价" returnColor="#c2c2c2"></status-nav>
		<container-subgroup>
			<view slot="content" style="margin: -6rpx -30rpx 0 -30rpx;">
				<view class="bacf fon28 pad-sx30 pad-zy40">
					<view class=" bold disjbac fw line-h50">
						<!-- 项目名称 -->
						<view class="mar-y20">{{orderObj.project_name || '项目名称'}}</view>
						<!-- 项目编号 -->
						<view>{{orderObj.order_number || '项目编号'}}</view>
					</view>
					<view class="mar-s10 mar-x30" style="color: #6b6a6a;">服务时间：{{orderObj.order_time}}</view>
					<view class="radius20 pad30 dis" style="border: 2rpx solid #dcdcdc;">
						<image src="/static/public/icon-evaluate-pen.png" mode="widthFix" lazy-load style="width: 25rpx;height: 30rpx;"></image>
						<textarea v-model="serviceExperience" maxlength="-1" class="fon24 mar-z20 width100" style="height: 200rpx;" placeholder="写下您的服务体验，帮助我们更好的管理提升" placeholder-style="font-size:24rpx;color: #aaaaaa;" />
					</view>
					<view class="fon30 bold mar-sx30">上传图片</view>
					<view class="disac">
						<view @tap="chooseImg(index)" class="mar-y20" v-for="(item,index) in imgList" :key="index" style="background-color: #dcdcdc;">
							<view v-if="item.imgsrc==''" class="evaluate-addimg" style="width: 142rpx;height: 142rpx;"></view>
							<image v-else :src="item.imgsrc" mode="aspectFill" lazy-load style="width: 142rpx;height: 142rpx;vertical-align: middle;"></image>
						</view>
					</view>
				</view>
				<view class="bacf fon28 pad-sx30 pad-zy40 mar-s20">
					<view class="fon30 bold mar-sx30">您的评价</view>
					<view class="mar-s40 mar-x50" style="color: #545454;">
						<view class="mar-x40 disac"><text class="mar-y40">技术服务</text><rate :size="42" :gutter="40" :curentClick="0" v-model="rateNum" @change="chooseRate"></rate></view>
						<view class="disac"><text class="mar-y40">客服态度</text><rate :size="42" :gutter="40" :curentClick="1" v-model="attitudeNum" @change="chooseRate"></rate></view>
					</view>
				</view>
				<!-- 提交保存 -->
				<view class="person-btn" @tap="submitData" style="margin-top: 50rpx;">提交保存</view>
			</view>
		</container-subgroup>
	</view>
</template>

<script>
	import { uploadImg } from '@/jsFile/public-api.js';
	import rate from '@/components/rate.vue';
	export default {
	    components:{
	        rate
	    },
		data() {
			return {
				imgList:[//上传图片数组
					{imgsrc:''},
					{imgsrc:''},
					{imgsrc:''}
				],
				tempImgId:[],
				rateNum:5,//技术服务评分
				attitudeNum:5,//客服态度评分
				serviceExperience:'',//服务体验
				flag:true,
				orderId:'',//工单id
				orderObj: {
					order_id:28,
					order_number:"",
					order_time:"",
					project_name:""
				}
			}
		},
		onLoad(op) {
			this.orderId = op.orderId;
			// 调用查询订单信息
			this.getOrderInfo();
		},
		methods: {
			// 查询订单信息
			getOrderInfo(){
				this.$requst.get('/universal/api.order/evaluate_order',{order_id:this.orderId}).then(res=>{
					if(res.code) {
						this.orderObj = res.data;
					} else {
						this.$toolAll.tools.showToast(res.msg);
					}
				})
			},
			// 提交保存事件
			submitData(){
				if(this.flag) {
					// this.flag = false;
					let idArr = [];
					idArr = this.tempImgId.filter(item => {return item!=''; });
					let params = {
						order_id:this.orderId,
						evaluate_content:this.serviceExperience,
						evaluate_images:idArr.join(','),
						technology_score:this.rateNum,
						customer_service_attitude_score:this.attitudeNum
					}
					console.log(params,74);
					this.$requst.post('/universal/api.order/evaluate_order',params).then(res=>{
						if(res.code) {
							uni.navigateBack({delta:1})
						} else {
							this.$toolAll.tools.showToast(res.msg);
						}
					})
				}
			},
			// 选择图片
			chooseImg(index){
				uni.chooseImage({
					count:1,
					sourceType:['album','camera'],
					sizeType:['compressed'],
					success: (res) => {
						uploadImg({path:res.tempFilePaths[0]}).then(resImg=>{
							this.imgList[index].imgsrc = res.tempFilePaths[0];
							this.tempImgId[index] = resImg.data.id;
						})
					},fail:(err)=> {
						this.$toolAll.tools.checkQx(err.code);
                    }
				})
			},
			chooseRate(arr){
				switch (arr[1]){
					case 0:
					 this.rateNum = arr[0];
						break;
					case 1:
					 this.attitudeNum = arr[0];
						break;
				}
			   
			},
		}
	}
</script>

<style>

</style>