lanan-repair/pages-order/orderDetail/evaluate.vue

<template>
	<view class="container">
		<v-navigation-bar background-color="#fff" title-color="#333" title="服务评价"></v-navigation-bar>
		<view class="body">
			<view style="padding: 0 32rpx;">
				<view class="shopInfo">
					<image class="shopImg" :src="info.image" mode="aspectFill"></image>
					<view class="shopInfo_content">
<!--						<view class="shopName">顺捷汽车维修搭电救援补胎中心</view>-->
						<view class="shopName">{{ info.tenantName }}</view>
<!--						<view class="shopAdress">济南市历下区福瑞达历下护理院东南门旁</view>-->
					</view>
				</view>
				<view class="rate">
					<text>服务评价</text>
					<uni-rate allow-half="true" v-model="formData.commentStar"></uni-rate>
				</view>
				<textarea class="message" v-model="formData.commentDesc" placeholder="请输入本次服务的评价或建议！" />
				<view class="submit" @click="submit">提交评价</view>
			</view>
		</view>
	</view>
</template>

<script>
	import VNavigationBar from '@/components/VNavigationBar.vue'
  import request from "../../utils/request";

	export default {
		components: {
			VNavigationBar
		},
		data() {
			return {
        info: {},
        formData:{
          id: null,
          commentDesc: null,
          commentStar: null,
        }
			};
		},
    onLoad(data){
      this.info = JSON.parse(decodeURIComponent(data.info))
      this.info['image'] = require("../static/inImage.jpg")
    },
		methods: {
			submit() {
			  if(null==this.formData.commentStar || ""==this.formData.commentStar){
          uni.showToast({
            title: '请对本次服务打分！',
            icon: 'none'
          })
        }else if(null==this.formData.commentDesc || ""==this.formData.commentDesc){
          uni.showToast({
            title: '请输入本次服务的评价或建议！',
            icon: 'none'
          })
        }else{
          this.formData['id'] = this.info.id
          request({
            url: "/userClient/repair/order/appraise",
            method: "post",
            data: this.formData
          }).then(res => {
            uni.showToast({
              title: '评价成功！',
              icon: 'none'
            })
            setTimeout(()=>{
              uni.navigateBack()
            },500)
          }).catch(()=>{
            uni.navigateBack()
          })
        }
			}
		}
	}
</script>

<style lang="less" scoped>
	.container {
		height: 100%;
		background-color: #fff;

		display: flex;
		flex-direction: column;

		.body {
			flex: 1;
			height: 0;
			overflow: auto;
		}
		.shopInfo {
			display: flex;
			align-items: stretch;
			column-gap: 20rpx;
			margin: 30rpx 0;

			.shopImg {
				width: 160rpx;
				height: 100rpx;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				background-color: #efefef;
			}
			.shopInfo_content {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding: 6rpx 0;
			}
			.shopName {
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
			}
			.shopAdress {
				font-weight: 500;
				font-size: 24rpx;
				color: #666666;
			}
		}
		.rate {
			padding: 30rpx 0;
			border-bottom: 1rpx solid #DDDDDD;

			display: flex;
			align-items: center;

			column-gap: 28rpx;
		}
		.message {
			padding: 30rpx 0;
			height: 400rpx;
      width: 100%;
		}
		.submit {
			width: 510rpx;
			height: 76rpx;

			margin: 0 auto;

			background: #0174F6;
			border-radius: 38rpx 38rpx 38rpx 38rpx;

			font-size: 32rpx;
			color: #FFFFFF;

			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>