hytc-customer/pages/evaluate/to_evaluate.vue

<template>
	<view>
		<view class="fllow_form">
			<view class="label key">{{i18n['是否解决问题']}}</view>
			<view class="form_right">
				<radio-group @change="radioChange" class="radiowarp">
					<view class="radiobox" v-for="(item, index) in type" :key="index">
						<radio :value="item.id" color="#0287FF" :checked="item.id === typeIndex" />
						<view>{{item.name}}</view>
					</view>
				</radio-group>
			</view>
		</view>
		<view class="fllow_form">
			<view class="label key">{{i18n['评分']}}</view>
			<view class="form_right">
				<uni-rate :value="comment_score"  @change="onChange" />
			</view>
		</view>
		<view class="inp_warp" style="margin-top:0;">
			<view class="inp_title">{{i18n['附件']}}:</view>
			<view class="form_right" @click="uploadFiles">
				<view class="righttext">{{i18n['上传图片']}}</view>
				<view class="iconfont icon-arrows_right"></view>
			</view>
		</view>
		<view class="imglist" v-if="imgList.length != 0">
			<view class="imgbox" v-for="(item,index) in imgList" :key="index">
				<image src="/static/img/close.png" class="delimg" @click="delImg(index)" mode=""></image>
				<image :src="item.url" class="selfimg" mode=""></image>
			</view>
		</view>
		<view class="fllow_area">
			<view class="area_head key">{{i18n['情况描述']}}</view>
			<textarea v-model="comment_content" class="textself" :placeholder="i18n['情况描述']" placeholder-style="color:#999" />
		</view>
		
		<view class="button" @click="$noMultipleClicks(toSubEvaluate)">{{i18n['确定']}}</view>
	</view>
</template>

<script>
	import { BASE_URL, SIGN_NO } from '@/api/http.js'
	import { netAddEvaluate, uploadUrl } from '@/api/api.js'
	
	export default{
		data() {
			return{
				noClick:true,    //防止  重复点击
				is_resolved:1,   //1是   2否
				comment_score:1,   //评分
				comment_content:'',   //评价内容
				comment_files:'',   //附件
				id:'',
				type:[],
				typeIndex:0,
				imgList:[],
			}
		},
		computed:{
			i18n() {
				return this.$t("evaluate")
			}
		},
		onShow() {
			this.type = this.i18n['type']
			uni.setNavigationBarTitle({
				title: this.i18n['去评价']
			})
		},
		onLoad(options) {
			this.id = options.id
		},
		methods:{
			//评分
			onChange(e) {
				console.log(e,'===')
				this.comment_score = e.value
			},
			radioChange(e) {
				console.log(e,'是否解决问题')
				this.is_resolved = e.detail.value
			},
			//上传图片
			uploadFiles() {
				uni.chooseImage({
					count: 9,
					success: (res) => {
						console.log(res)
						let file = res.tempFilePaths
						file.forEach(ele=>{
							this.toUpload(ele)
						})
					}
				})
			},
			toUpload(file) {
				uni.uploadFile({
					url:uploadUrl,
					name: 'file',
					header: {
						'token': uni.getStorageSync('token'),
						'sign-no': SIGN_NO
					},
					filePath: file,
					success: (res) => {
						let data = JSON.parse(res.data)
						if (data.code == 1) {
							this.imgList.push(data.data)
						} else {
							uni.showToast({
								title: '上传失败',
								icon: 'none'
							})
						}
					},
					fail: (err) => {
						console.log(err)
					}
				})
			},
			delImg(index) {
				this.imgList.splice(index, 1)
			},
			toSubEvaluate() {
				let arr = this.imgList
				let newArr = []
				arr.forEach(ele=>{
					newArr.push(ele.id)
				})
				let params = {
					id:this.id,
					is_resolved: this.is_resolved,
					comment_score: this.comment_score,
					comment_content: this.comment_content,
					comment_files: newArr.join(',')
				}
				netAddEvaluate(params).then(res=>{
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
					setTimeout(()=>{
						uni.navigateBack({
							delta:1
						})
					},2000)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.radiowarp{
		display: flex;
		justify-content: flex-end;
		align-items: center;
		.radiobox{
			display: flex;
			justify-content: center;
			align-items: center;
			radio{
				transform: scale(0.7);
			}
		}
	}
	.fllow_form {
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		border-bottom: 1rpx solid #EAEAEA;
		padding:24rpx 45rpx 24rpx 50rpx;
		.label{
			font-size:26rpx;
			text{
				color:red;
			}
		}
	}
	.form_right{
		display: flex;
		justify-content: flex-end;
		align-items: center;
		color: #999;
		min-width:450rpx;
		text-align: right;
		.righttext{
			font-size:26rpx;
		}
	}
	.fllow_area {
		background-color: #fff;
		padding:24rpx 45rpx 24rpx 50rpx;
		margin-bottom: 30rpx;
		.area_head {
			height: 100rpx;
			font-size:26rpx;
			line-height: 100rpx;
		}
		.textself {
			width:660rpx;
			height: 230rpx;
			background:rgba(202, 202, 202, 0.2);
			box-sizing: border-box;
			padding:24rpx;
			font-size:26rpx;
			margin: 0 auto;
			border-radius: 20rpx;
		}
	}
	.inp_warp {
		padding:24rpx 45rpx 24rpx 50rpx;
		background: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #f5f5f5;
		.inp_title {
			font-size: 26rpx;
			color: #000;
		}
		.add_in{
			display: flex;
			justify-content: flex-end;
			align-items: center;
			font-size:26rpx;
			color:#14C2C1;
			.icon-jiahaocu{
				font-size:28rpx;
				color:#14c2c1;
				margin-right:5rpx;
			}
		}
	}
	.imglist {
		padding: 24rpx 34rpx;
		background: #fff;
		border-bottom: 1rpx solid #EAEAEA;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
	
		.imgbox {
			width: 160rpx;
			height: 160rpx;
			margin-right: 14rpx;
			position: relative;
			margin-bottom: 24rpx;
			border: 1rpx solid #EAEAEA;
			&:nth-child(4n){
				margin-right:0;
			}
			.delimg {
				width: 32rpx;
				height: 32rpx;
				border-radius: 50%;
				position: absolute;
				right: -16rpx;
				top: -16rpx;
				background: rgba(0, 0, 0, 0.5);
				z-index: 2;
			}
	
			.selfimg {
				width: 160rpx;
				height: 160rpx;
			}
		}
	}
</style>