hlm_pl_mall_h5/pages/member/vrorder/OrderEvaluate.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
	<member-base :show="false"><view class="div container">
		<!-- header -->
		<view class="div common-header-wrap">
			<view :style="'height:'+navHeight+'px'"></view>
			<view class="common-header-holder"></view>
			<view class="common-header-fixed">
			<title-header />
			<uni-nav-bar title="评价订单" class="common-header" left-icon="back" @clickLeft="goBack()">
			</uni-nav-bar>
		</view>
		</view>

		<!-- body -->
		<view class="div body">
			<view
				class="div order-comment-body"
			>
				<view class="div body-list">
					<view class="div image">
						<image mode="aspectFit" class="img"
							v-bind:src="orderItem.goods_image_url"
						/>

					</view>
					<view class="div comment">
						<text class="span">{{ orderItem.goods_name }}</text>
            <uni-rate v-if="result.goods[orderItem.goods_id]" :size="18" v-model="result.goods[orderItem.goods_id].score"/>
					</view>
				</view>
				<view class="div enter">
					<textarea
						placeholder="请在此输入评价"
						v-model="comment"
					></textarea>
				</view>
				<view class="div common-btn ds-button-large" @click="submit(orderItem.goods_id,comment)">提交</view>
			</view>
		</view>

	</view></member-base>
</template>

<script>
import {getFontSize} from '@/util/common'
import TitleHeader from '../../TitleHeader'
import MemberBase from '../MemberBase'
import { getOrderEvaluateInfo, saveOrderEvaluate } from '../../../api/memberVrOrder'

export default {
  mounted(){
  // #ifdef  MP-WEIXIN
  this.navHeight = uni.getMenuButtonBoundingClientRect().top
  // #endif
  },
  computed:{
  fontSize(){
    return getFontSize()
  },
  },
  data(){
    return {
    navHeight: 0,
    order_id:0,
      orderItem: {},
      result: { goods: {} },
	  comment: '',
      score: 5
    }
  },
  components:{
    TitleHeader,
    MemberBase,
  },
  onLoad: function (option) {
  this.order_id=option.order_id
    if (this.order_id) {
      getOrderEvaluateInfo(this.order_id).then(res => {
        this.orderItem = res.result.order_info
          this.result.goods[this.orderItem.goods_id] = { comment: '', score: 5 }
      }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
    }
  },
  methods:{
    goBack(){uni.navigateBack({delta:1})},
    submit (goods_id,comment) {
	  this.result.goods[goods_id].comment = comment
      saveOrderEvaluate(this.order_id, this.result).then(res => {
        uni.navigateBack({delta:1})
      }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
    },
  }
}
</script>

<style lang="scss" scoped>
	.common-score-wrapper .back{display: block}
.container {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;

	.body {
		top:2.2rem;
		width: 100%;
		.order-comment-body {
			background: rgba(255, 255, 255, 1);
			padding:0.75rem;
			.body-list {
				display: flex;
				justify-content: left;
				align-content: center;
				align-items: center;
			}
			.image {
				width:2.7rem;
				height:2.7rem;
				flex-shrink: 0;
				.img {
					width: 100%;
					height: 100%;
				}
			}
			.comment {
				flex-basis: 100%;
				padding-left:0.75rem;
				.span {
					font-size:$h2;
					color: #7c7f88;
					text-align: left;
					display: block;
				}
				.ul {
					display: flex;
					justify-content: space-between;
					align-content: center;
					align-items: center;
					margin-top: 1.2rem;
					.li {
						.img {
							width:1rem;
							height:1rem;
							flex-shrink: 0;
						}
						label {
							font-size:$subFontSize;
							color: rgba(78, 84, 93, 1);
							font-weight: normal;
						}
					}
				}
			}
			.enter {
				padding-top:0.75rem;
				textarea {
					width: 100%;
					height:6rem;
					background: rgba(247, 249, 250, 1);
					border: 1px solid #f7f9fa;
					box-sizing: border-box;
					padding:0.5rem 0 0 0.5rem;
					font-size:$subFontSize;
					-webkit-appearance: none;
					outline: none;
				}
			}
		}
	}
}
</style>