repairForMiniProgram/pages/home/home.vue

<template>
  <view>
    <header class="flex column items-center">
      <image src="../../static/list-img.png" mode="aspectFit"></image>
      <view class="notice flex items-center justify-start">
        <image src="../../static/喇叭.png"></image>
        <span class="f16 bold">公告：</span>
        <uni-notice-bar
          :single="true"
          background-color="white"
          color="blue"
          :scrollable="true"
          :text="notices"
          :speed="30"
        />
      </view>
      <view class="nav flex row items-center justify-around">
        <navigator url="../repair-form/index" class="nav1 flex row items-center justify-start">
          <image src="../../static/put.png"></image>
          <view>前往报修</view>
        </navigator>
        <navigator url="../personal-information/index" class="nav2 flex row items-center justify-start">
          <image src="../../static/information.png"></image>
          <view>修改信息</view>
        </navigator>
      </view>
      <view class="line"></view>
      <!-- <input v-modal="token" /> -->
    </header>

    <view class="content">
      <view class="list-text" v-if="Studentlist.length !== 0">----报修订单----</view>
      <view class="list-text" v-else>----暂无数据----</view>

      <view v-for="(item, index) in Studentlist" :key="index" @click="handleLookInfo(item)" class="content_item">
        <view class="flex justify-between items-center">
          <span class="blue-text bold">订单：{{ item.orderId }}</span>
          <span :style="{ color: statusObj[item.orderStatus].color }">{{ statusObj[item.orderStatus].text }}</span>
        </view>
        <view class="list flex column items-start">
          <span>故障原因：{{ item.repairsFault.faultName }}</span>
          <span>维修人员：{{ item.repairsWork.workName == null ? '等待分配' : item.repairsWork.workName }}</span>
          <span>宿舍楼栋：{{ item.repairsStudent.dormNumber }}</span>
          <span>提交时间：{{ item.orderCommitTime }}</span>
          <span>预约时间：{{ item.orderExpectedTime }}</span>
          <span v-if="item.orderStatus == 2">维修时间：{{ item.orderCompleteTime }}</span>
          <span v-if="item.orderStatus == 3">完成时间：{{ item.orderCompleteTime }}</span>
        </view>
        <button
          class="btn flex items-center justify-center"
          @click.stop="appraise(item)"
          v-if="item.orderStatus == 3 && item.orderAdvice == null"
          style="
            width: 185rpx;
            height: 36rpx;
            background-color: rgba(42, 130, 228, 1);
            color: white;
            font-size: 24rpx;
            border-radius: 32rpx;
          "
        >
          维修后评价
        </button>
        <view class="sug">{{ item.orderStatus == 3 && item.orderAdvice !== null ? '已评价' : '' }}</view>
        <button
          v-if="item.orderStatus == 0"
          class="btn flex items-center justify-center"
          @click.stop="handleDelete(item)"
        >
          撤回订单
        </button>
      </view>
      <view class="isOver" v-if="flag">----我是有底线的----</view>
    </view>

    <!-- 查看详情弹窗 -->
    <uni-popup ref="popup" background-color="#fff">
      <view class="popup_view" v-if="info">
        <view class="popup_title">订单信息</view>
        <view class="popup_item">订单号：{{ info.orderId }}</view>
        <view class="popup_item">报修类型：{{ info.repairsFault.faultName }}</view>
        <view class="popup_item">宿舍楼栋：{{ info.repairsStudent.dormNumber }}</view>
        <view class="popup_item">提交时间：{{ info.orderCommitTime }}</view>
        <view class="popup_item">预约时间：{{ info.orderExpectedTime }}</view>
        <view class="popup_item">联系电话：{{ info.repairsStudent.studentPhone }}</view>
        <view class="popup_item">备选电话：{{ info.repairsStudent.studentOtherPhone }}</view>
        <view class="popup_item" v-if="info.orderBack">退回原因：{{ info.orderBack }}</view>
        <view class="popup_item" v-if="info.orderAdvice">修后评价：{{ info.orderAdvice }}</view>
        <view class="popup_img">
          <text>故障图片：</text>
          <image
            v-for="(item, index) in info.orderImages"
            :key="index"
            :src="item ? item : '../../static/no-image.gif'"
            mode="aspectFit"
            @click="handleBig(index)"
          ></image>
        </view>
      </view>
    </uni-popup>

    <!-- 图片放大弹窗 -->
    <uni-popup ref="popup2">
      <view class="popup_view" v-if="info" style="padding: 0px">
        <image
          v-for="(item, index) in info.orderImages"
          :key="index"
          :src="item ? item : '../../static/no-image.gif'"
          v-if="index == activeIndex"
        ></image>
      </view>
    </uni-popup>

    <!-- 修改评价遮罩层 -->
    <view class="box" v-if="dialogShow">
      <view id="dialog">
        <view class="replace">修后评价</view>
        <view class="uni-textarea">
          <textarea
            v-model="inputcontent"
            placeholder-style="color:rgba(229, 229, 229, 0.7)"
            cols="20"
            row="2"
            placeholder="请输入内容"
          />
        </view>
        <view class="cancle" @click="cancle">取消</view>
        <view class="agree" @click="agree">确定</view>
      </view>
    </view>
  </view>
</template>

<script>
const statusObj = {
  0: { color: 'red', text: '等待后台分配' },
  1: { color: 'red', text: '等待维修工接单' },
  2: { color: 'orange', text: '维修工已接单' },
  3: { color: 'green', text: '维修完成' },
  4: { color: 'purple', text: '已退单' },
}
export default {
  data() {
    return {
      // token: uni.getStorageSync('token'),
      statusObj,
      pageNum: 1,
      pageSize: 6,
      total: '',
      dialogShow: false,
      flag: false,
      notices: '',
      Studentlist: [],
      value: [],
      inputcontent: '',
      orderId: null,
      info: null,
      activeIndex: null,
      studentCampus: null,
    }
  },
  onLoad() {
    let res = uni.getStorageSync('student')
    if (res.studentCampus == 0) {
      this.studentCampus = '黄家湖校区'
    } else if (res.studentCampus == 1) {
      this.studentCampus = '墨轩湖校区'
    }
    this.getNotice()
    this.getStudentlist()
  },

  methods: {
    // 获取最新公告数据
    async getNotice() {
      let res = await this.$myRequest({
        method: 'post',
        url: `/notice/releaseNotice`,
      })
      // console.log(res)
      if (res.status == 200) {
        this.notices = res.data.noticeContent
      } else {
        console.log('获取最新公告数据失败')
      }
    },

    // 获取学生订单
    async getStudentlist() {
      let res = await this.$myRequest({
        method: 'post',
        url: `/order/queryAllOrderByStudentId?pageNum=${this.pageNum}&pageSize=${this.pageSize}`,
        // data: {
        //   pageNum: this.pageNum,
        //   pageSize: this.pageSize,
        // },
      })
      // console.log(res)
      if (res.status == 200) {
        this.total = res.data.total
        this.Studentlist = [...this.Studentlist, ...res.data.list]
        uni.hideLoading()
      } else {
        console.log('获取订单数据失败')
      }
    },

    // 下拉刷新
    onPullDownRefresh() {
      this.flag = false
      this.Studentlist = []
      this.pageNum = 1
      this.getStudentlist()
      this.getNotice()
      setTimeout(() => {
        uni.stopPullDownRefresh()
      }, 1000)
    },
    // 上拉加载+结尾语句显示
    onReachBottom() {
      if (this.Studentlist.length < this.total) {
        uni.showLoading({
          title: '数据加载中',
        })
        this.pageNum++
        this.getStudentlist()
      } else {
        this.flag = true
      }
    },
    // 点击维修后评价按钮回调
    appraise(item) {
      this.dialogShow = true
      this.inputcontent = ''
      this.orderId = item.orderId
    },
    // 弹窗确定按钮回调
    agree() {
      if (this.inputcontent == '') {
        uni.showToast({
          title: '请输入内容',
          icon: 'none',
          duration: 2000,
        })
      } else {
        this.dialogShow = false
        this.getsuggest()
      }
    },

    // 弹窗取消按钮回调
    cancle() {
      this.dialogShow = false
      this.inputcontent = ''
      uni.showToast({
        title: '已取消评价',
        icon: 'none',
        duration: 2000,
      })
    },

    // 修后评价请求
    async getsuggest() {
      let res = await this.$myRequest({
        method: 'post',
        url: `/order/updateOrderAdvice?orderAdvice=${this.inputcontent}&orderId=${this.orderId}`,
      })
      // console.log(res)
      if (res.status == 200) {
        uni.showToast({
          title: '评价成功',
          icon: 'success',
        })
        this.Studentlist = []
        this.pageNum = 1
        uni.pageScrollTo({
          scrollTop: 0,
        })
        this.getStudentlist()
      } else {
        console.log('修后评价请求失败')
      }
    },

    // 查看详情回调
    async handleLookInfo(item) {
      this.info = null
      this.$refs.popup.open()
      if (item.orderStatus == 0 || item.orderStatus == 4) {
        let res = await this.$myRequest({
          method: 'post',
          url: `/order/queryByOrderIdNotWork?orderId=${item.orderId}`,
        })
        // console.log(res)
        this.$nextTick(() => {
          this.info = res.data
          this.info.orderImages = this.info.orderImages.split(';')
        })
      } else {
        let res = await this.$myRequest({
          method: 'post',
          url: `/order/queryByOrderId?orderId=${item.orderId}`,
        })
        // console.log(res)
        this.$nextTick(() => {
          this.info = res.data
          this.info.orderImages = this.info.orderImages.split(';')
        })
      }
    },

    // 点击图片放大
    handleBig(index) {
      this.activeIndex = index
      this.$refs.popup2.open()
    },

    // 撤回订单请求
    handleDelete(item) {
      uni.showModal({
        title: '提示',
        content: '确定撤回订单吗？',
        success: async (res) => {
          if (res.confirm) {
            let res = await this.$myRequest({
              url: `/order/deleteOrderById?orderId=${item.orderId}`,
              method: 'post',
            })
            // console.log(res)
            if (res.status == 200) {
              uni.showToast({
                title: '撤回成功',
                icon: 'success',
              })
              this.Studentlist = []
              this.pageNum = 1
              uni.pageScrollTo({
                scrollTop: 0,
              })
              this.getStudentlist()
            } else {
              uni.showToast({
                title: '撤回失败',
                icon: 'error',
              })
            }
          } else if (res.cancel) {
            // console.log('用户点击取消');
          }
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
header {
  position: fixed;
  top: -70rpx;
  left: 0;
  right: 0;
  padding: 20rpx;
  background-color: #fff;
  z-index: 2;
  image {
    width: 100%;
  }
  .notice {
    width: 100%;
    padding-left: 20rpx;
    -moz-box-shadow: 0 0 10rpx #d3d3d3;
    -webkit-box-shadow: 0 0 10rpx #d3d3d3;
    box-shadow: 0 0 10rpx #d3d3d3;
    image {
      margin-right: 8rpx;
      max-width: 24rpx;
      max-height: 24rpx;
    }
    .uni-noticebar {
      flex: 1;
      margin-bottom: 0px;
    }
  }
  .nav {
    width: 100%;
    margin: 32rpx 0;
    font-size: 32rpx;
    font-weight: 700;
    .nav1,
    .nav2 {
      width: 300rpx;
    }
    image {
      max-width: 123rpx;
      max-height: 123rpx;
      margin-right: 16rpx;
      border-radius: 80rpx;
      box-shadow: 0 0 10px #06c;
    }
  }
  .line {
    width: 100%;
    height: 16rpx;
    background-color: rgba(229, 229, 229, 0.62);
    border-radius: 16rpx;
  }
}
.content {
  width: 100%;
  padding: 710rpx 20rpx 20rpx;

  .list-text {
    margin: auto 0;
    font-size: 28rpx;
    text-align: center;
    color: rgba(80, 80, 80, 0.27);
  }
  &_item {
    position: relative;
    width: 100%;
    padding: 20rpx;
    margin-bottom: 32rpx;
    border-radius: 28rpx 28rpx 0rpx 0rpx;
    background-color: rgba(229, 229, 229, 0.62);
    .list {
      span {
        margin-top: 16rpx;
      }
    }
    .btn {
      position: absolute;
      bottom: 16rpx;
      right: 16rpx;
      width: 160rpx;
      height: 52rpx;
      font-size: 28rpx;
      border-radius: 32rpx;
    }
    .sug {
      position: absolute;
      bottom: 16rpx;
      right: 16rpx;
      color: #333333;
    }
  }
  .isOver {
    width: 100%;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    font-size: 28rpx;
    color: rgba(80, 80, 80, 0.27);
  }
}

.popup_view {
  box-sizing: border-box;
  width: 600rpx;
  height: 860rpx;
  padding: 50rpx;
  overflow-y: auto;

  image {
    width: 100%;
    height: 100%;
  }

  .popup_title {
    font-size: 20px;
  }

  .popup_item {
    margin: 20rpx 0;
  }

  .popup_img {
    display: flex;

    image {
      margin: 0 6rpx;
      width: 100rpx;
      height: 200rpx;
      background-color: #eee;
    }
  }
}

#dialog {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 80%;
  height: 180px;
  text-align: center;
  margin: auto;
  background-color: white;
  border-radius: 10px;
}

textarea {
  height: 100px;
  width: 90%;
  margin-top: 5px;
  margin-left: 5%;
  text-align: left;
  border: 1px solid rgba(229, 229, 229, 0.62);
  font-size: 14px;
}

.box {
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}

.replace {
  width: 100%;
  height: 16%;
  margin-top: 4%;
  font-size: 28rpx;
  color: rgba(80, 80, 80, 1);
}

.cancle {
  position: absolute;
  top: 78%;
  width: 50%;
  height: 22%;
  line-height: 2;
  background-color: white;
  border-radius: 0 0 0 16rpx;
  border-top: 1px solid rgba(229, 229, 229, 0.62);
  border-right: 1px solid rgba(229, 229, 229, 0.62);
}

.agree {
  position: absolute;
  top: 78%;
  width: 50%;
  height: 22%;
  right: 0;
  line-height: 2;
  background-color: white;
  border-top: 1px solid rgba(229, 229, 229, 0.62);
  border-left: 1px solid rgba(229, 229, 229, 0.62);
  border-radius: 0 0 16rpx 0;
}
</style>