parentNew/src/pages/studentcenter/evaluate.vue

<template>
  <view class="page">
    <cu-custom :isBack="true" title="评价"></cu-custom>
    <view class="teacher flex bg-white padding">
      <image mode="scaleToFill" :src="teacher_avatar" class="avatar lg"></image>
      <view class="flex-sub margin-left">
        <view class="teacher-title">{{teacher.username||''}}老师授课</view>
        <view class="teacher-item">所属机构：{{teacher.agency_name||''}}</view>
        <view class="teacher-exp flex">
          <view class="exp-item">{{teacher.honor||''}}</view>
          <view class="exp-item">{{teacher.introduce||''}}</view>
        </view>
      </view>
    </view>
    <view class="comment bg-white margin-top padding-lr padding-tb-lg">
      <view>{{satisfaction.satisfaction?'已评价':'请评价'}}</view>
      <view class="flex text-center margin-top" style="padding-left:80rpx;">
        <view class="flex-sub">
          <img src="/static/imgs/class/satisfaction.png" mode="widthFix" style="width:70px;">
          <view>满意</view>
        </view>
        <view class="flex-sub">
          <img src="/static/imgs/class/unsatisfaction.png" mode="widthFix" style="width:70px;">
          <view>一般</view>
        </view>
      </view>
      <view class="flex margin-top-sm">
        <view style="width:80rpx;line-height:32px;">课程</view>
        <view class="flex-sub text-center">
          <button class="cu-btn" :class="params.agency_statisfaction===2?'bg-cyan':'line-cyan'"
            @tap="evaluate('agency_statisfaction',2)">满意</button>
        </view>
        <view class="flex-sub text-center">
          <button class="cu-btn" :class="params.agency_statisfaction===1?'bg-cyan':'line-cyan'"
            @tap="evaluate('agency_statisfaction',1)">一般</button>
        </view>
      </view>
      <view class="flex margin-top-sm">
        <view style="width:80rpx;line-height:32px;">老师</view>
        <view class="flex-sub text-center" @tap="params.statisfaction=2">
          <button class="cu-btn" :class="params.statisfaction===2?'bg-cyan':'line-cyan'"
            @tap="evaluate('statisfaction',2)">满意</button>
        </view>
        <view class="flex-sub text-center" @tap="params.statisfaction=1">
          <button class="cu-btn" :class="params.statisfaction===1?'bg-cyan':'line-cyan'"
            @tap="evaluate('statisfaction',1)">一般</button>
        </view>
      </view>
      <view class="margin-top-lg" v-if="!satisfaction.satisfaction">
        <button class="cu-btn bg-cyan lg" style="width:100%;" @tap="comment">提交评价</button>
      </view>
    </view>
  </view>
</template>

<script>
import { _commentDetail, _tocomment } from '@/api/course'
export default {
  data () {
    return {
      teacher: {},
      satisfaction: {},
      params: {
        agency_statisfaction: 2,
        statisfaction: 2,
        plan_id: '',
        teacher_id: ''
      },
      teacher_avatar: '/static/imgs/class/logo0.png'
    }
  },
  onLoad (options) {
    const id = decodeURIComponent(options.plan_id)
    if (!id) uni.navigateBack()
    this.params.plan_id = id
    this.init()
  },
  methods: {
    init () {
      _commentDetail({ plan_id: this.params.plan_id }).then(res => {
        this.teacher = res.data.teacher_data
        this.params.teacher_id = this.teacher.teacher_id
        this.satisfaction = res.data.satisfaction_data
        this.params.statisfaction = this.satisfaction.satisfaction
        this.params.agency_statisfaction = this.satisfaction.agency_satisfaction
      })
    },
    evaluate (type, value) { // 评价
      this.params[type] = value
    },
    comment () {
      _tocomment(this.params).then(res => {
        uni.showToast({ title: res.msg, icon: 'success' })
        setTimeout(() => {
          uni.navigateBack()
        }, 800)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/common/css/mixin.scss';
.page {
  height: 100vh;
}
.teacher {
  &-title {
    @include title(4px, 18px);
  }
}
</style>