safetyHome_wxapp/pages/onlineRpair/repairsEvaluate.vue

<!-- 报修评价 -->
<template>
	<view class="pageBg">
		<view class="content">
			<view class="topBack" :style="{marginTop:phoneHeight + 'px'}">
				<image src="../../static/icon_back@2x(1).png" style="width:48rpx ;height: 48rpx;margin-left: 36rpx;margin-top: 18rpx;"
				 @tap="back"></image>
			</view>
			<view class="topImg">
				<image src="../../static/guarantee_icon_guarantee@2x.png" style="width: 100%;height: 100%;"></image>
			</view>
			<view class="topTitle">
				报修评价
			</view>
			<view class="main">
				<image src="../../static/appraise_bgimage@2x.png" style="width: 100%;height: 100%;"></image>
				<image src="../../static/appraise_icon_appraise@2x.png" class="mainImg"></image>
				<view class="fa">发表评价</view>
				<view class="star">
					<uni-rate :value="starNum" style="margin-top: 10rpx;margin-left: 80rpx;" @change="changeRate()"></uni-rate>
				</view>
				<image src="../../static/guarantee_icon_content@2x.png" class="contentImg"></image>
				<view class="contentTitle">
					评价内容
				</view>
				<view class="textContent">
					<textarea placeholder="请填写评价" style="width: 95%;height: 96%;margin-left: 10rpx;margin-top: 10rpx;" v-model="textRea" cursor-spacing="120" maxlength="300"></textarea>
				</view>
			</view>
		</view>
		<button class="submit" :class="{active:starNum && textRea}" @tap="submit" >提交</button>
	</view>
</template>

<script>
	import uniRate from '@/components/uni-rate/uni-rate.vue'
	export default {
		data() {
			return {
				isLoading: false, //按钮加载
				textRea: '', //评价内容
				starNum: 0, //星星数量
				phoneHeight: 0, //手机状态栏的高度
				isShow: false,
				imgData: [],
				id: ''
			}
		},
		components: {
			uniRate
		},
		onLoad(option) {
			this.id = option.id
		},
		created() {
			// 获取状态栏的高度
			this.phoneHeight = uni.getSystemInfoSync().statusBarHeight
		},
		methods: {
			// 选择评分
			changeRate(e) {
				console.log(e)
				this.starNum = e.value.toFixed(1)
			},
			// 提交
			submit() {
				if (!this.starNum || !this.textRea) {
					return
				} else {
					uni.showLoading({
						mask:true,
						title:'加载中'
					})
					this.http.httpRequest('/wxapplet/ownerreprair/edit', 'post', {
						id: Number(this.id),
						score: this.starNum,
						ownerEvalu: this.textRea
					}).then((res) => {
						// 判断请求是否成功 0 成功 
						if (res.code == 0) {
							uni.setStorageSync('rateType',1)
							this.textRea=''
							this.starNum=0
							setTimeout(()=>{
								uni.redirectTo({
									url: './evalueSuccess'
								})
							},1000)
							uni.hideLoading()
						} else {
							uni.hideLoading()
							uni.showToast({
								title: res.msg,
								"icon": 'none'
							})
						}
					}).catch(()=>{
						uni.hideLoading()
					})
				}
			},
			// 返回上一层
			back() {
				uni.navigateBack({
					delta: 1
				})
			}
		},

	}
</script>

<style scoped>
	.submit {
		width: 702rpx;
		height: 90rpx;
		background: rgba(244, 244, 244, 1);
		opacity: 1;
		border-radius: 18rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(204, 204, 204, 1);
		position: absolute;
		bottom: 56rpx;
		left: 26rpx;
		text-align: center;
		line-height: 90rpx;
	}

	.textContent {
		width: 646rpx;
		height: 168rpx;
		background: rgba(246, 250, 255, 1);
		border: 2rpx solid rgba(197, 224, 255, 1);
		opacity: 1;
		border-radius: 6rpx;
		position: absolute;
		left: 24rpx;
		bottom: 180rpx;
	}

	.contentImg {
		width: 33rpx;
		height: 40rpx;
		position: absolute;
		bottom: 460rpx;
		left: 330rpx;
	}

	.contentTitle {
		width: 116rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(41, 138, 253, 1);
		position: absolute;
		bottom: 388rpx;
		left: 290rpx;
	}

	.star {
		width: 386rpx;
		height: 49rpx;
		display: flex;
		justify-content: space-between;
		position: absolute;
		left: 156rpx;
		top: 194rpx;

	}

	.starImg {
		width: 51rpx;
		height: 49rpx;
	}

	.fa {
		width: 116rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(41, 138, 253, 1);
		position: absolute;
		top: 114rpx;
		left: 288rpx;
	}

	.mainImg {
		width: 40rpx;
		height: 46rpx;
		position: absolute;
		top: 40rpx;
		left: 326rpx;
	}

	.main {
		width: 692rpx;
		height: 844rpx;
		margin: 0 auto;
		margin-top: 24rpx;
		position: relative;
	}

	.topTitle {
		width: 128rpx;
		height: 44rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		margin: 0 auto;
		margin-top: 26rpx;
	}

	.topImg {
		width: 122rpx;
		height: 122rpx;
		margin: 0 auto;
		margin-top: 4rpx;
	}

	.pageBg {
		width: 100%;
		height: 100vh;
		background: linear-gradient(180deg, rgba(205, 227, 255, 1) 0%, rgba(133, 188, 255, 1) 100%);
		opacity: 1;
	}

	.content {
		width: 100%;
		position: absolute;
		top: 0;
	}

	.active {
		color: rgba(255, 255, 255, 1);
		background: rgba(41, 138, 253, 1);
		opacity: 1;
	}
</style>