hlm_pl_mall_h5/pages/member/order/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 main-content pb-10">
			<view
				class="div order-comment-body"
				v-for="(item, index) in orderItem"
				v-if="orderItem.length > 0"
        :key="index"
			>
				<view class="div body-list">
					<view class="div image">
						<image mode="aspectFit" class="img"
							v-bind:src="item.goods_image_url"
						/>

					</view>
					<view class="div comment">
						<text class="span">{{ item.goods_name }}</text>
            <uni-rate :size="18" v-model="result.goods[item.goods_id].score"/>
					</view>
				</view>
				<view class="div enter">
					<textarea
						placeholder="请在此输入评价"
						v-model="result.goods[item.goods_id].comment"
					></textarea>
				</view>
			</view>

			<view v-if="!store_info.is_platform_store" class="div store-evaluate">
				<view class="div title">店铺评价</view>
				<view class="div comment">
					<text class="span">描述相符</text>
          <uni-rate :size="18" v-model="store_desccredit"/>
				</view>
				<view class="div comment">
					<text class="span">服务态度</text>
          <uni-rate :size="18" v-model="store_servicecredit"/>
				</view>
				<view class="div comment">
					<text class="span">发货速度</text>
          <uni-rate :size="18" v-model="store_deliverycredit"/>
				</view>
			</view>
			<view class="div common-btn ds-button-large" @click="submit">提交</view>
		</view>

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

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

export default {
  mounted(){
  // #ifdef  MP-WEIXIN
  this.navHeight = uni.getMenuButtonBoundingClientRect().top
  // #endif
  },
  computed:{
  fontSize(){
    return getFontSize()
  },
  },
  data(){
    return {
    navHeight: 0,
    order_id:0,
		store_info:{},
      orderItem: {},
      result: { goods: {} },
      score: [],
      store_desccredit: 5,
      store_servicecredit: 5,
      store_deliverycredit: 5
    }
  },
  components:{
    TitleHeader,
    MemberBase,
  },
  onLoad: function (option) {
    this.order_id=option.order_id
    if (this.order_id) {
      getOrderEvaluateInfo(option.order_id).then(res => {
        this.orderItem = res.result.order_goods
		  this.store_info=res.result.store_info
        for (var i in this.orderItem) {
          this.result.goods[this.orderItem[i].goods_id] = { comment: '', score: 5 }
          this.score[i] = 5
        }
      }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
    }
  },
  methods:{
    goBack(){uni.navigateBack({delta:1})},
    submit () {
		this.result['store_desccredit']=this.store_desccredit
		this.result['store_servicecredit']=this.store_servicecredit
		this.result['store_deliverycredit']=this.store_deliverycredit
      saveOrderEvaluate(this.order_id, this.result).then(res => {
        uni.navigateTo({ url: '/pages/member/order/OrderList'+'?'+urlencode( { state: 'state_noeval' } )})
        }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
    },
  }
}
</script>

<style lang="scss" scoped>
	.common-score-wrapper .back{display: block}
	.main-content{padding: 0 $pageSpace;background: #fff;box-sizing: border-box;}
.container {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;

	.body {
		top: 2.2rem;
		width: 100%;
		.store-evaluate{padding:.5rem 0;background: #fff;font-size:$subFontSize;
			.title{line-height: 2rem;border-top:1px solid #e1e1e1;font-size:$h2;}
			.common-score-wrapper{margin-left:.5rem;}
		}
		.order-comment-body {
			background: rgba(255, 255, 255, 1);
			padding: 0.75rem 0;
			.body-list {
				display: flex;
				justify-content: left;
				align-content: center;
				align-items: center;
			}
			.image {
				width: 3.75rem;
				height: 3.75rem;
				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: 0.95rem;
							height: 0.95rem;
							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>