school_uni/package1/order/orderEvaluate.vue

<template>
	<!-- 发布订单评价 -->
	<view class="page1">
		<view class="title">
			<view class="title-sreach">
				<view class="back-btn" @tap="back" :style="{'padding-top': menuButtonInfo.top +'px'}">
					<uni-icons type="left" size="28"></uni-icons>
				</view>
				<view class="title-name" :style="{'padding-top': menuButtonInfo.top +'px'}">
					写评价
				</view>
			</view>
		</view>
		<view class="content">
			<view class="box1">
				<view style="width: 100%;line-height: 70rpx;font-size: 28rpx;font-weight: 700;">
					竹仔园牛仔农庄(第六分店)
				</view>
				<view style="display: flex;padding: 20rpx;background: rgba(247, 248, 248, 1);border-radius: 20rpx;">
					<view class="goods-img">
						<img src="/static/images/img/shangpintu.png" alt="">
					</view>
					<view class="goods-content">
						<view class="goods-name">
							牛仔农庄(医专店)
						</view>
						<view class="goods-content-center">
							<view class="goods-deal1">
								打分；不要啦
							</view>
						</view>
						<view class="goods-content-bottom">
							<view style="width: 50%;">
								X1
							</view>
							<view class="pintuan-left-price">
								￥90.00
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="box1" style="padding: 0;">
				<view class="eval-title">
					- 写下真实体验，帮助万千用户选店 -
				</view>
				<view class="eval-name">
					<view class="eval-name1">
						竹仔园牛仔农庄(第六分店)
					</view>
					<view class="eval-num">
						<view class="eval-num1">
							您对本次消费体验还满意吗？
						</view>
						<view style="display: flex;">
							<view v-for="(item,index) in evalNumList" :key="index" @tap="shopEvaluateNum = item.index" style="flex: 1;text-align: center;font-weight: 700;">
								<img v-if="shopEvaluateNum >=item.index" :src="item.checked" alt="" class="eval-img" />
								<img v-else :src="item.noChecked" alt="" class="eval-img" />
								<view>{{item.name}}</view>
							</view>
						</view>
					</view>
					<view class="eval-num">
						<view class="eval-num1">
							您对本次配送人员还满意吗？
						</view>
						<view style="display: flex;">
							<view v-for="(item,index) in evalNumList" :key="index" @tap="manEvaluateNum = item.index" style="flex: 1;text-align: center;font-weight: 700;">
								<img v-if="manEvaluateNum >=item.index" :src="item.checked" alt="" class="eval-img" />
								<img v-else :src="item.noChecked" alt="" class="eval-img" />
								<view>{{item.name}}</view>
							</view>
						</view>
					</view>
					<view class="eval-num" style="border: none;">
						<textarea name="" id="" cols="30" rows="10" placeholder="有什么想说的吗？可以写下来，提交给我们" style="width: 100%;font-size: 28rpx;padding: 30rpx;height: 200rpx;"></textarea>
					</view>
					<view class="eval-num" style="border: none;padding: 0 30rpx;display: flex;">
						<view class="upload-img" @tap="pictureAdd"
							style="background: #eee;text-align: center;line-height: 160rpx;">
							<uni-icons type="camera" size="28" color="#777"></uni-icons>
						</view>
						<view style="flex: 1;display: flex;">
							<view v-if="orderPicture !=''"
								:key="index" style="width: 160rpx;height: 160rpx;margin-left: 20rpx;">
								<img :src="orderPicture" alt="" class="upload-img">
							</view>
							<view style="height: 160rpx;line-height: 40rpx;padding: 40rpx 0 0 20rpx;color: #777;">
								发图/发视频能更有效地帮助他人哦~
							</view>
						</view>
					</view>
					<view style="border: none;padding: 0 30rpx;display: flex;height: 100rpx;line-height: 100rpx;">
						<view v-if="selected == 'niming'" @tap="checkVoucher('shiming')" class="radio-check">
							<uni-icons type="checkmarkempty" size="12"></uni-icons>
						</view>
						<view class="radio-no-check" @tap="checkVoucher('niming')" v-else></view>
						<view style="font-size: 28rpx;font-weight: 700;color: #777;padding-right: 20rpx;">
							匿名评价
						</view>
						<view style="font-weight: 700;color: #777;">
							对商家和其他用户隐藏头像和昵称
						</view>
					</view>
				</view>
			</view>
			<view class="bottom">
				<view class="bottom-btn">
					发布
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selected:'niming',
				orderPicture:'',
				menuButtonInfo: {},
				shopEvaluateNum:0,
				manEvaluateNum:0,
				evalNumList:[{
					name:'很糟糕',
					checked:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/aa045ef1faca4130a9483688054e5620.png',
					noChecked:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/f224a2ef2cf44280a1eeaa7ccd76bf2b.png',
					index:1
				},{
					name:'较差',
					checked:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/b0630e0ef7424214853ff4b1814e4607.png',
					noChecked:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/66c7a64c17574d74997bf86d1e8ddf60.png',
					index:2
				},{
					name:'一般',
					checked:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/4c815fc9ca7e417b9f60ac6583251c8d.png',
					noChecked:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/b27134c1ec174ad0910349692d08df7a.png',
					index:3
				},{
					name:'还可以',
					checked:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/8ab48411bf1a451097fdc4103b5ae44c.png',
					noChecked:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/8f705c0318e747e5b08c5099f04eb9ba.png',
					index:4
				},{
					name:'超预期',
					checked:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/90ef5af58d314c1bbabe8bd48aa49d22.png',
					noChecked:'https://jewel-shop.oss-cn-beijing.aliyuncs.com/c1cce0db39264c6ea9b533137153fc36.png',
					index:5
				}]
			}
		},
		onLoad(option) {
	
		},
		onShow() {
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		},
		methods: {
			checkVoucher(type) {
				this.selected = type;
			},
			pictureAdd(id, huan) {
				let that = this
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sourceType: ['album'],
					success(res) {
						uni.showLoading({
							title: '加载中...',
							mask: true
						})
						for (let i = 0; i < res.tempFiles.length; i++) {
							that.upLoadFile(res.tempFiles[i].tempFilePath)
						}
			
					}
				})
			},
			async upLoadFile(path) {
				let that = this;
				let hiver_token = uni.getStorageSync("hiver_token")
				await uni.uploadFile({
					url: that.tui.interfaceUrl() + '/upload/file',
					filePath: path,
					name: 'file',
					header: {
						"content-type": "multipart/form-data",
						'accessToken': hiver_token
					},
					formData: {},
					success: (uploadFileRes) => {
						let pathData = JSON.parse(uploadFileRes.data)
						this.orderPicture = pathData.result
						that.$forceUpdate()
					},
					fail: (err) => {
						uni.hideLoading();
						uni.showToast({
							title: JSON.stringify(err),
							icon: 'none'
						})
					}
				});
				await setTimeout(res => {
					uni.hideLoading();
				}, 1000)
			},
			back() {
				uni.navigateBack()
			}
		}
	
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		min-height: 100%;
		font-size: 24rpx;
		background: #F5F8F5;
		color: #00231C;
	}
	
	.page1 {
		width: 100%;
		min-height: 100vh;
		font-size: 24rpx;
		position: relative;
		display: flex;
		flex-direction: column;
	}
	
	.title {
		flex-shrink: 0;
		background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/9c27a07c0b5b40d9b5b97cb466d74c6b.png') no-repeat;
		background-size: 100%;
		width: 100%;
		height: 400rpx;
		padding-bottom: 20rpx;
	}
	
	.title-sreach{
		width: 100%;
		display: flex;
		height: 200rpx;
		position: relative;
	}
	
	.back-btn{
		position: absolute;
	}
	.title-name{
		padding-top: 110rpx;
		font-size: 36rpx;
		font-weight: 700;
		flex: 1;
		text-align: center;
	}
	.content {
		flex: 1;
		width: 95%;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		    position: absolute;
		    top: 200rpx;
		    left: 2.5%;
	}
	.box1 {
		width: 100%;
		margin: 0 auto 20rpx;
		background: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
	}
	.goods-img {
		width: 160rpx;
		height: 160rpx;
		position: relative;
	
		img {
			width: 100%;
			background-size: 100%;
			height: 100%;
		}
	}
	.goods-content {
		flex: 1;
		padding-left: 20rpx;
	}
	
	.goods-name {
		font-size: 32rpx;
		font-weight: 900;
	}
	
	.goods-content-center {
		display: flex;
		    margin: 16rpx 0;
		    color: #777;
	}
	.goods-deal1 {
		width: 60%;
	}
	.goods-content-bottom {
		    display: flex;
		    line-height: 56rpx;
		    color: #777;
	}
	.pintuan-left-price {
		    width: 50%;
		    text-align: right;
		    font-weight: 700;
		    color: #000;
	}
	.eval-img{
		width: 92rpx;
		height: 92rpx;
		background-size: 100%;
	}
	.eval-title{
		height: 108rpx;
		font-size: 28rpx;
		text-align: center;
		background: rgba(235, 255, 243, 1);
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		border-top: 1px solid rgba(178, 255, 208, 1);
		border-left: 1px solid rgba(178, 255, 208, 1);
		border-right: 1px solid rgba(178, 255, 208, 1);
		z-index: 77;
		line-height: 88rpx;
	}
	.eval-name{
		    margin-top: -20rpx;
		    border-top-left-radius: 20rpx;
		    border-top-right-radius: 20rpx;
		    z-index: 88;
		    display: block;
		    overflow: hidden;
		    background: #fff;
	}
	.eval-name1{
		height: 108rpx;
		    font-size: 40rpx;
		    font-weight: 700;
		    text-align: center;
		    border-bottom: 1px solid #eee;
		    border-top-left-radius: 20rpx;
		    border-top-right-radius: 20rpx;
		    line-height: 108rpx;
		    overflow: hidden;
		    display: block;
	}
	.eval-num{
		    padding-bottom: 30rpx;
		    border-bottom: 1px solid #eee;
	}
	.eval-num1{
		    height: 40rpx;
		    font-size: 28rpx;
		    margin: 30rpx;
		    font-weight: 700;
	}
	.upload-img {
		width: 160rpx;
		height: 160rpx;
	}
	.radio-check {
		background: linear-gradient(90deg, #e3ff96, #a6ffea);
		width: 40rpx;
		height: 40rpx;
		border-radius: 40rpx;
		text-align: center;
		line-height: 40rpx;
		margin: 30rpx 30rpx 0 0;
	}
	.radio-no-check {
		width: 40rpx;
		height: 40rpx;
		border-radius: 40rpx;
		border: 1px solid #eee;
		margin: 30rpx 20rpx 0 0;
	}
	.bottom-btn{
		width: 95%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		margin: 22rpx auto;
		border-radius: 100rpx;
		background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));
		font-size: 32rpx;
		font-weight: 700;
	}
	.bottom{
		overflow: hidden;
		height: 152rpx;
		background:#fff;
	}
</style>