repairForMiniProgram/pages/evaluation/index.vue

<template>
  <view class="page">
    <!-- 头部 -->
    <view class="head">
      <view class="location">
        评价信箱
        <image class="loc" src="../../static/letter.svg" mode=""></image>
      </view>
    </view>

    <!-- 订单 -->
    <view class="main u-flex-y">
      <view class="content-list" v-for="(item, index) in feedbackList" :key="index">
        <text class="num">订单号：{{ item.orderId }}</text>
        <view class="list">
          <view class="">故障类型：{{ item.repairsFault.faultName }}</view>
          <view class="p">来自 {{ item.repairsStudent.dormNumber }} 的评价:</view>
          <view class="text">
            {{ item.orderAdvice }}
          </view>
        </view>
      </view>

      <view class="isOver">----我是有底线的----</view>
      <!-- <view class="isOver" v-if="flag">
				----我是有底线的----
			</view> -->
      <!-- <view class="isOver" v-if="feedbackList.length==0">
				----暂无评价----
			</view> -->
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      feedbackList: [],
      pageNum: 1,
      pageSize: 4,
      total: '',
      flag: false,
    }
  },
  onLoad() {
    this.getfeedback()
  },
  methods: {
    // 获取评价列表数据
    async getfeedback() {
      let res = await this.$myRequest({
        method: 'post',
        url: `/order/queryAllOrderByUserAdvice?pageNum=${this.pageNum}&pageSize=${this.pageSize}`,
      })
      // console.log(res)
      if (res.status == 200) {
        this.total = res.data.total
        this.feedbackList = [...this.feedbackList, ...res.data.list]
        uni.hideLoading()
      } else {
        uni.hideLoading()
      }
    },

    // 下拉页面刷新函数
    onPullDownRefresh() {
      this.flag = false
      this.feedbackList = []
      this.pageNum = 1
      this.getfeedback()
      setTimeout(() => {
        uni.stopPullDownRefresh()
      }, 1000)
    },

    // 上拉触底加载更多数据
    onReachBottom() {
      if (this.feedbackList.length < this.total) {
        uni.showLoading({
          title: '数据加载中',
        })
        this.pageNum++
        this.getfeedback()
      } else {
        this.flag = true
      }
    },
  },
}
</script>

<style scoped>
template {
  position: relative;
}
.page {
  height: 100vh;
}
.main {
  position: fixed;
  top: 130rpx;
  left: 50%;
  align-items: center;
  width: 720rpx;
  height: 100vh;
  padding: 20rpx;
  background: #fff;
  transform: translateX(-360rpx);
  overflow: scroll;
}

.head {
  height: 300rpx;
  border-radius: 0rpx 0rpx 20rpx 20rpx;
  background-color: rgba(42, 130, 228, 1);
}

.head .location {
  padding-top: 36rpx;
  font-size: 30rpx;
  font-weight: bold;
  text-align: center;
  color: rgba(255, 255, 255, 1);
}

.loc {
  width: 40rpx;
  height: 40rpx;
  font-size: 42rpx;
  vertical-align: middle;
}

.num {
  float: left;
  margin-left: 20rpx;
  margin-top: 18rpx;
  font-size: 22rpx;
  font-weight: 700;
  color: rgba(42, 130, 228, 1);
}

.got {
  float: right;
  margin-top: 18rpx;
  margin-right: 18rpx;
  color: rgba(212, 48, 48, 1);
}

.list {
  float: left;
  margin-left: 42rpx;
  margin-top: 18rpx;
  font-size: 22rpx;
  color: rgba(80, 80, 80, 1);
}

.p {
  margin-top: 16rpx;
}

.list .text {
  width: 484rpx;
  height: 108rpx;
  margin-top: 30rpx;
  /* margin-left: 50rpx; */
  text-align: center;
  line-height: 108rpx;
  background-color: rgba(255, 255, 255, 1);
}

.content-list {
  width: 700rpx;
  height: 500rpx;
  /* float: left; */
  /* margin-left: 16rpx; */
  margin-top: 22rpx;
  border-radius: 28rpx 28rpx 0rpx 0rpx;
  background-color: rgba(229, 229, 229, 1);
}

.isOver {
  display: block;
  width: 100%;
  height: 120rpx;
  line-height: 120rpx;
  text-align: center;
  font-size: 28rpx;
  color: rgba(80, 80, 80, 0.27);
}
</style>