repairForMiniProgram/pages/home/index.vue

<template>
  <view>
    <view>
      <!-- 头部 -->
      <header>
        <view class="head">
          <image src="../../static/list-img.png" mode="aspectFit"></image>
          <!-- 公告 -->
          <view class="notice">
            <view class="notice-content" style="margin-top: 16rpx">
              <view class="notice-first">
                <image src="../../static/喇叭.png"></image>
                <text style="line-height: 66rpx; margin-left: -22rpx">公告:</text>
                <uni-notice-bar
                  :single="true"
                  background-color="white"
                  color="blue"
                  :scrollable="true"
                  :text="notices"
                  :speed="30"
                />
              </view>
            </view>
          </view>
        </view>
        <!-- 跳转导航 -->
        <view class="nav">
          <navigator url="../repair-form/index" class="nav1">
            <image src="../../static/put.png"></image>
            <view>前往报修</view>
          </navigator>
          <navigator url="../personal-information/index" class="nav2">
            <image src="../../static/information.png"></image>
            <view>修改信息</view>
          </navigator>
        </view>
      </header>

      <!-- 报修订单 -->
      <view class="content">
        <!-- 导航与报修单间的灰色背景 -->
        <view class="point"></view>
        <view class="list-text">----报修订单----</view>
        <!-- <view class="list-text" v-if="Studentlist.length!==0">
					----报修订单----
				</view> -->
        <!-- <view class="list-text" v-else>
					----暂无数据----
				</view> -->
        <!-- 订单 -->
        <view class="content-list" v-for="(item, index) in Studentlist" :key="index" @click="handleLookInfo(item)">
          <text class="num">订单：{{ item.orderId }}</text>
          <text class="newList">{{ item.orderStatus == 0 ? '等待后台分配' : '' }}</text>
          <!-- 新订单 -->
          <text class="waitList">{{ item.orderStatus == 1 ? '等待维修工接单' : '' }}</text>
          <!-- 待接单 -->
          <text class="readyList">{{ item.orderStatus == 2 ? '维修工已接单' : '' }}</text>
          <!-- 已接单 -->
          <text class="finishList">{{ item.orderStatus == 3 ? '维修完成' : '' }}</text>
          <!-- 维修完成 -->
          <text class="refuseList">{{ item.orderStatus == 4 ? '已退单' : '' }}</text>
          <!-- 已退单 -->
          <view class="list">
            <view>故障原因：{{ item.repairsFault.faultName }}</view>
            <view>维修人员：{{ item.repairsWork.workName == null ? '等待分配' : item.repairsWork.workName }}</view>
            <view>宿舍楼栋：{{ item.repairsStudent.dormNumber }}</view>
            <view>提交时间：{{ item.orderCommitTime }}</view>
            <view>预约时间：{{ item.orderExpectedTime }}</view>
            <view v-if="item.orderStatus == 2">维修时间：{{ item.orderRepairTime }}</view>
            <view v-if="item.orderStatus == 3">完成时间：{{ item.orderCompleteTime }}</view>
            <!-- <view>
              {{ item.orderStatus == 3 ? "完成时间：" : "预约时间："
              }}{{
                item.orderStatus == 3
                  ? item.orderCompleteTime
                  : item.orderExpectedTime
              }}
            </view> -->
          </view>
          <button
            @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 class="sug_left" v-if="item.orderStatus == 0" @click.stop="handleDelete(item)">撤回订单</button>
        </view>
        <!-- xiaxia -->
        <view class="content-list" @click="handleLookInfo(item)">
          <text class="num">订单：{{ 'DZ165437348' }}</text>
          <text class="finishList">{{ '维修完成' }}</text>
          <view class="list">
            <view>故障原因：{{ '水龙头破裂' }}</view>
            <view>维修人员：{{ '李海聪' }}</view>
            <view>宿舍楼栋：{{ '19栋1单元203' }}</view>
            <view>提交时间：{{ '2023-12-13 14:00' }}</view>
            <view>
              {{ '完成时间：2022-12-13 18:11' }}
            </view>
          </view>
          <button
            @click.stop="appraise(item)"
            style="
              width: 185rpx;
              height: 36rpx;
              background-color: rgba(42, 130, 228, 1);
              color: white;
              font-size: 24rpx;
              border-radius: 32rpx;
            "
          >
            维修后评价
          </button>
        </view>
        <view class="content-list" @click="handleLookInfo(item)">
          <text class="num">订单：{{ 'DZ165437348' }}</text>
          <text class="readyList">{{ '维修工已接单' }}</text>
          <view class="list">
            <view>故障原因：{{ '设备不在线' }}</view>
            <view>维修人员：{{ '赵一' }}</view>
            <view>宿舍楼栋：{{ '19栋1单元203' }}</view>
            <view>提交时间：{{ '2023-12-17 14:00' }}</view>
            <view>
              {{ '预约时间：2022-12-17 18:11' }}
            </view>
          </view>
        </view>
        <view class="content-list" @click="handleLookInfo(item)">
          <text class="num">订单：{{ 'DZ165437348' }}</text>
          <text class="readyList">{{ '维修工已接单' }}</text>
          <view class="list">
            <view>故障原因：{{ '设备不在线' }}</view>
            <view>维修人员：{{ '李四' }}</view>
            <view>宿舍楼栋：{{ '19栋1单元203' }}</view>
            <view>提交时间：{{ '2023-12-17 14:00' }}</view>
            <view>
              {{ '预约时间：2022-12-17 18:11' }}
            </view>
          </view>
          <button class="sug_left" @click.stop="handleDelete()">撤回订单</button>
        </view>
        <view class="isOver">----我是有底线的----</view>
        <!-- <view class="isOver" v-if="flag">
					----我是有底线的----
				</view> -->
      </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>
export default {
  data() {
    return {
      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`,
        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: 0;
  //   right: 0;
  //   left: 0;
  //   background-color: ;
  //   z-index: 99;
  .head {
    position: relative;
    height: 420rpx;
    background-size: 100%;
    margin-left: 36rpx;
    margin-right: 36rpx;
    margin-top: -96rpx;
    image {
      width: 100%;
    }
    .notice {
      position: relative;
      margin-top: -96rpx;
      width: 100%;
      height: 68rpx;
      font-size: 30rpx;
      font-weight: 700;
      -moz-box-shadow: 0 0 10rpx #d3d3d3;
      -webkit-box-shadow: 0 0 10rpx #d3d3d3;
      box-shadow: 0 0 10rpx #d3d3d3;
      // .uni-noticebar {
      //   position: absolute;
      //   width: 77%;
      //   height: 20%;
      //   top: 14rpx;
      //   right: 26rpx;
      //   display: flex;
      //   box-sizing: border-box;
      //   flex-direction: row;
      //   align-items: center;
      //   padding: 20rpx 2rpx;
      //   margin-bottom: 20rpx;
      // }
      image {
        width: 24rpx;
        height: 24rpx;
        left: -30rpx;
      }
      .notice-first {
        margin-left: 60rpx;
        color: black;
      }
      .notice-second {
        float: right;
        margin-right: 68rpx;
        margin-bottom: 16rpx;
        color: black;
        width: 76%;
        height: 86rpx;
      }
    }
  }
  .nav {
    position: absolute;
    width: 100%;
    height: 236rpx;
    margin-left: -48rpx;
    margin-top: 28rpx;
  }
  .nav1 image {
    position: absolute;
    left: 114rpx;
    top: 60rpx;
    width: 123rpx;
    height: 123rpx;
    font-size: 48rpx;
    border-radius: 80rpx;
    box-shadow: 0 0 10px #06c;
  }

  .nav1 view {
    position: absolute;
    left: 254rpx;
    // top: 70rpx;
    line-height: 156rpx;
    font-size: 30rpx;
    font-weight: 700;
  }

  .nav2 image {
    position: absolute;
    right: 165rpx;
    width: 123rpx;
    height: 123rpx;
    font-size: 48rpx;
    top: 60rpx;
    border-radius: 80rpx;
    box-shadow: 0 0 10px #06c;
  }

  .nav2 view {
    position: absolute;
    right: 26rpx;
    // top: 70rpx;
    line-height: 126rpx;
    font-size: 24rpx;
    font-size: 30rpx;
    font-weight: 700;
  }

  .nav .nav1 {
    width: 272rpx;
    height: 156rpx;
    margin-top: 40rpx;
    margin-left: 106rpx;
  }

  .nav .nav2 {
    width: 272rpx;
    height: 130rpx;
    margin-top: -140rpx;
    margin-left: 468rpx;
  }
}

.content {
  // margin-top: 550rpx;
  padding-top: 550rpx;
  height: 1200rpx;
  background-color: rgba(255, 255, 255, 1);
}

.point {
  height: 14rpx;
  // font-weight: 700;
  // margin-left: 40rpx;
}

.list-text {
  margin-top: 30rpx;
  font-size: 24rpx;
  text-align: center;
  color: rgba(80, 80, 80, 0.27);
}

.content-list {
  position: relative;
  width: 95%;
  height: 290rpx;
  margin: 0 auto;
  margin-top: 22rpx;
  padding-left: 20rpx;
  font-size: 24rpx;
  border-radius: 28rpx 28rpx 0rpx 0rpx;
  // border: 2rpx solid rgba(229, 229, 229, 0.62);
  background-color: rgba(229, 229, 229, 0.62);
}

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

.newList {
  float: right;
  margin-top: 20rpx;
  margin-right: 32rpx;
  color: rgba(255, 141, 26, 1);
}

.readyList {
  float: right;
  margin-top: 20rpx;
  margin-right: 4rpx;
  color: rgba(212, 48, 48, 1);
}

.waitList {
  float: right;
  margin-top: 20rpx;
  margin-right: 4rpx;
  color: rgba(212, 48, 48, 1);
}

.finishList {
  float: right;
  margin-top: 20rpx;
  margin-right: 4rpx;
  color: yellowgreen;
}

.refuseList {
  float: right;
  margin-top: 20rpx;
  margin-right: 4rpx;
  color: rgba(212, 48, 48, 1);
}

.list {
  float: left;
  margin-left: -328rpx;
  margin-top: 72rpx;
  font-size: 28rpx;
}

.content-list button {
  position: absolute;
  bottom: 20rpx;
  right: 42rpx;
  line-height: 36rpx;
}

.content-list .sug {
  position: absolute;
  bottom: 30rpx;
  right: 42rpx;
  color: #333333;
}

.content-list .sug_left {
  position: absolute;
  bottom: 16rpx;
  // left: -640rpx;
  width: 160rpx;
  height: 36rpx;
  font-size: 24rpx;
  border-radius: 32rpx;
  // background-color: orange;
}

.isOver {
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  font-size: 24rpx;
  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;
    }
  }
}

.content {
  margin-top: 230rpx;
  padding: 0 10rpx;
  // height: 1200rpx;
  background-color: rgba(255, 255, 255, 1);

  .point {
    height: 14rpx;
    background-color: rgba(229, 229, 229, 0.62);
  }

  .list-text {
    margin-top: 30rpx;
    font-size: 24rpx;
    text-align: center;
    color: rgba(80, 80, 80, 0.27);
  }

  .content-list {
    position: relative;
    margin-top: 22rpx;
    padding: 20rpx;
    height: 280rpx;
    border-radius: 28rpx 28rpx 28rpx 28rpx;
    font-size: 24rpx;
    background-color: rgba(229, 229, 229, 0.62);

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

    .newList {
      float: right;
      margin-top: 20rpx;
      margin-right: 32rpx;
      color: rgba(255, 141, 26, 1);
    }

    .readyList {
      float: right;
      margin-top: 20rpx;
      margin-right: 4rpx;
      color: rgba(212, 48, 48, 1);
    }

    .waitList {
      float: right;
      margin-top: 20rpx;
      margin-right: 4rpx;
      color: orange;
    }

    .finishList {
      float: right;
      margin-top: 20rpx;
      margin-right: 4rpx;
      color: blue;
    }

    .refuseList {
      float: right;
      margin-top: 20rpx;
      margin-right: 4rpx;
      color: rgba(212, 48, 48, 1);
    }

    .list {
      float: left;
      margin-left: -280rpx;
      margin-top: 64rpx;
    }
  }
}

#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>