NurseStationApp/pages/goodsorderRate/goodsorderRate.vue

<template>
	<view class='app'>
		<view class="rate">
			<view class="images">
				<view class="itemimgs" v-for="(item,index) in file">
					<image class="delimg" src="../../static/gb2.png" mode="" style="color: red;" @tap='delimg(item)'>
					</image>
					<image class="itemimg" :src="item" mode=""></image>
				</view>
				<view class="shot item" @tap='updataImage'>
					<image src="../../static/paishe.png" mode=""></image>
					<view class="title">
						拍摄
					</view>
				</view>
				<!-- <view class="videotape item">
					<image src="../../static/video.png" mode=""></image>
					<view class="title">
						录像
					</view>
				</view> -->
			</view>
		</view>
		<view class="score">
			<view class="title">
				综合评分
			</view>
			<u-rate :count="count" v-model="countvalue" size='46'></u-rate>
			<view class="text">
				<u-input v-model="text" type="textarea" :clearable='false' />
			</view>
		</view>
		<view class="updata" @tap='updata'>
			提交评价
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import baseurl from '@/api/baseurl.js'
	import {
		insertGoodsEvaluate,
		uploadEvaluatePictureUrl
	} from '@/api/goodsorderRate/index.js'
	export default {
		data() {
			return {
				orderlist: {},
				count: 5,
				countvalue: 0,
				text: '',
				baseurl: null,
				file: [],
				imgs: [],
				patientId: null,
				timer: null,
				delta: null,
			};
		},
		methods: {
			delimg(item) {
				this.file = this.file.filter(e => e != item)
			},
			updata() {
				let that = this
				if (this.file.length > 0) {
					this.file.forEach(e => {
						uni.uploadFile({
							url: baseurl + '/nurseApp/orderEvaluate/uploadEvaluatePictureUrl',
							filePath: e,
							name: 'file',
							formData: {
								'orderNo': that.orderlist.goOrderNo
							},
							timeout: 5000,
							success(res) {
								var img = {
									evaluatePictureUrl: JSON.parse(res.data).imgUrl
								}
								that.imgs.push(img)
								if (that.imgs.length == that.file.length) {
									that.info();
								}
							}
						})
					})
				} else {
					that.info();
				}
			},
			info() {
				var that = this
				var obj = {
					"patientId": that.patientId,
					"orderNo": that.orderlist.goOrderNo,
					"evaluateChannel": "PHONE_APP",
					"evaluateContent": that.text,
					"compositeScore": that.countvalue,
					"orderEvaluatePictureInfoList": that.imgs
				}
				insertGoodsEvaluate(obj).then(res => {
					if (res.code == 200) {
						that.$refs.uToast.show({
							title: '评价成功',
							type: 'success',
							duration: '1500'
						})
						if (that.timer) {
							clearTimeout(that.timer)
						}
						that.timer = setTimeout(e => {
							that.imgs = []
							uni.navigateTo({
								url: `/pages/ratesuccess/ratesuccess?delta=${that.delta}`
							})
						}, 1500)
					} else {
						that.imgs = []
					}
				})
			},
			updataImage() {
				var that = this;
				uni.chooseImage({
					count: 9,
					success(res) {
						res.tempFilePaths.forEach(e => {
							that.file.push(e)
						})
					}
				})
			},
		},
		onLoad(options) {
			this.orderlist = JSON.parse(options.item)
			this.delta = options.delta
		},
		onShow() {
			this.baseurl = baseurl
			var that = this
			try {
				const value = uni.getStorageSync('patientId');
				if (value) {
					that.patientId = value
				} else {}
			} catch (e) {}
		},
	}
</script>

<style lang="scss">
	.app {
		.updata {
			width: 70%;
			margin: 80rpx 0 0 15%;
			height: 71rpx;
			background: #4C7BC9;
			border-radius: 26rpx;
			line-height: 71rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: 32rpx;
		}

		.score {
			background-color: #FFFFFF;
			width: 93%;
			margin: 0 auto;
			padding-top: 50rpx;
			position: relative;
			height: 500rpx;
			border-radius: 0 0 20rpx 20rpx;

			::v-deep .u-rate {
				position: absolute;
				top: 52rpx;
				left: 200rpx;
			}

			.text {
				margin-top: 20rpx;

				::v-deep .uni-textarea-textarea {
					width: 93%;
					display: block;
					margin: 0 20rpx;
				}

				::v-deep .u-input__textarea {
					margin-left: 20rpx;
				}
			}

			.title {
				margin: 0 20rpx;
				font-size: 36rpx;
				color: #000000;
				padding-bottom: 50rpx;
				border-bottom: 1rpx solid #D8D4D4;
			}
		}

		.rate {
			width: 93%;
			margin: 0 auto;
			height: 100%;
			background: #FFFFFF;
			box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
			border-radius: 20rpx 20rpx 0 0;
			padding-bottom: 20rpx;

			.images {
				padding-top: 20rpx;

				.itemimgs {
					display: inline-block;
					width: 30.5%;
					height: 212rpx;
					margin: 0 0 20rpx 2%;
					position: relative;

					.delimg {
						position: absolute;
						top: 10rpx;
						right: 10rpx;
						width: 40rpx;
						z-index: 999;
						height: 40rpx;
					}

					.itemimg {
						width: 100%;
						height: 100%;
					}
				}

				.item {
					display: inline-block;
					margin-bottom: 20rpx;
					width: 30.5%;
					margin: 0 0 0 2%;
					height: 212rpx;
					border: 1rpx dashed #818181;
					border-radius: 5rpx;
					position: relative;

					.title {
						font-size: 35rpx;
						color: #969394;
						line-height: 70rpx;
						position: absolute;
						left: 50%;
						top: 58%;
						transform: translateX(-50%);
					}

					image {
						position: absolute;
						left: 50%;
						top: 20%;
						transform: translateX(-50%);
						width: 89rpx;
						height: 68rpx;
					}
				}
			}
		}
	}
</style>