product_wx/pages/subPackages/serviceEvaluation/index.vue

<template>
    <div class="serviceEvaluation">
       <div class="serviceBody">
         <div class="serviceTitle">请给出您能园区服务水平的评价，您的建议是我们前进的最大动力!</div>
         <div class="evaluationBox" >
           <span class="evaName">园区保洁</span>
           <van-rate
               :value="cleaningService"
               :size="24"
               gutter="32rpx"
               void-color="#eee"
               bind:change="onChange"
               color="#fd9a63"
           />
         </div>
         <div class="evaluationBox" >
           <span class="evaName">园区绿化</span>
           <van-rate
               :value="greeningService"
               :size="24"
               gutter="32rpx"
               void-color="#eee"
               bind:change="onChange"
               color="#fd9a63"
           />
         </div>
         <div class="evaluationBox" >
           <span class="evaName">维修服务</span>
           <van-rate
               :value="maintenanceService"
               :size="24"
               gutter="32rpx"
               void-color="#eee"
               bind:change="onChange"
               color="#fd9a63"
           />
         </div>
         <div class="evaluationBox" >
           <span class="evaName">停车服务</span>
           <van-rate
               :value="parkingService"
               :size="24"
               gutter="32rpx"
               void-color="#eee"
               bind:change="onChange"
               color="#fd9a63"
           />
         </div>
         <div class="evaluationBox" >
           <span class="evaName">园区配套</span>
           <van-rate
               :value="supportingService"
               :size="24"
               gutter="32rpx"
               void-color="#eee"
               bind:change="onChange"
               color="#fd9a63"
           />
         </div>
         <div class="evaluationBox" >
           <span class="evaName">服务态度</span>
           <van-rate
               :value="attitudeService"
               :size="24"
               gutter="32rpx"
               void-color="#eee"
               bind:change="onChange"
               color="#fd9a63"
           />
         </div>
       </div>
      <div class="serviceBody">
        <van-field
            :value="commentsOrSuggestions"
            autosize
            type="textarea"
            placeholder="请输入文字进行报事报修描述"
            class="myField"
            maxlength="2000"
            show-word-limit
            @change="changeMsg"
        />
      </div>
      <button class="submitBtn" @click="confirm">提交</button>
    </div>
</template>

<script>
import { parkServiceEvaluationAdd, getUserLocalStorageInfo } from "@/js_sdk/http";

export default {
  name: "index",
  data(){
    return{
      value: "5",
      cleaningService: 0,
      greeningService: 0,
      maintenanceService: 0,
      parkingService: 0,
      supportingService: 0,
      attitudeService: 0,
      commentsOrSuggestions: '',
      form:{

      }
    }
  },
  methods: {
    changeMsg(e){
      console.log(e)
      this.commentsOrSuggestions = e.detail
    },
    confirm() {
      const _this = this
      parkServiceEvaluationAdd({
        cleaningService: this.cleaningService,
        greeningService: this.greeningService,
        maintenanceService: this.maintenanceService,
        parkingService: this.parkingService,
        supportingService: this.supportingService,
        attitudeService: this.attitudeService,
        userId: getUserLocalStorageInfo().userId,
        commentsOrSuggestions: this.commentsOrSuggestions
      }).then((res) => {
        uni.showToast({
          title: res.msg,
          icon: 'success',
          mask: true,
          duration: 1000
        });
        uni.navigateBack({});
      })
    },
  }
}
</script>

<style lang="scss">
    .serviceEvaluation{
      .serviceBody{
        background: white;
        padding: 24rpx 32rpx;
        margin: 24rpx 0;
        .serviceTitle{
          color: rgba(51, 51, 51, 1);
          font-size: 28rpx;
        }
      }
      .evaluationBox {
        width: 686rpx;
        height: 100rpx;
        padding: 0 24rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #f5f7fa;
        border-radius: 8rpx;
        box-sizing: border-box;
        margin-top: 24rpx;
        .evaName{
          font-size: 32rpx;
          color: rgba(51, 51, 51, 1);
        }
      }
      .van-cell {
        background: #F5F7FA !important;
        border-radius: 8rpx;
        font-size: 28rpx;
      }
      .submitBtn{
        width: 654rpx;
        height: 96rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 35rpx;
        background: rgba(3, 101, 249, 1);
        margin: 64rpx auto;
      }
    }
</style>