repairForMiniProgram/pages/repair-center/index.vue

<template>
  <view class="page">
    <view class="head u-flex-y">
      <view class="head_title">
        维修中心
        <image class="loc" src="../../static/rep.svg" mode=""></image>
      </view>
      <view class="nav">
        <navigator url="../evaluation/index" hover-class="navigator-hover" class="u-flex-y">
          <image src="../../static/sug.svg" mode=""></image>
          <span>评价建议</span>
        </navigator>
      </view>
      <!-- <view class="point"></view> -->
    </view>
    <!-- <view class="point"></view> -->
    <view class="content">
      <view class="point"></view>
      <view class="list-text" v-if="workerList.length !== 0">---- 报修订单 ----</view>
      <view
        v-if="item.orderStatus"
        class="content-list"
        v-for="(item, index) in workerList"
        :key="item.orderId"
        @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>
					<span class="orderId">订单号：{{ item.orderId }}</span>
					<span :class="orderStatusStyle(item.orderStatus)">{{ orderStatusText(item.orderStatus) }}}</span>.
				</view> -->
        <view class="list flex column">
          <span>故障类型：{{ item.repairsFault.faultName }}</span>
          <span>维修人员：{{ item.repairsWork.workName }}</span>
          <span>提交时间：{{ item.orderCommitTime }}</span>
          <span>预约时间：{{ item.orderExpectedTime }}</span>
          <!-- <view v-if="item.orderStatus == 1">派单时间：{{ item.orderCompleteTime }}</view> -->
          <span v-if="item.orderStatus == 2">维修时间：{{ item.orderCompleteTime }}</span>
          <span v-if="item.orderStatus == 3">完成时间：{{ item.orderCompleteTime }}</span>
        </view>
        <button class="agreeIt2" v-if="item.orderStatus == 1" @click.stop="open(item, 1)">接受</button>
        <button class="refuse" v-if="item.orderStatus == 1" @click.stop="open(item, 2)">拒绝</button>
        <button class="agreeIt" v-if="item.orderStatus == 2" @click.stop="handleFinish(item.orderId)">完成维修</button>
      </view>
      <view class="isOver" v-if="flag">----我是有底线的----</view>
      <view class="isOver" v-if="workerList.length == 0">----暂无订单----</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.orderExpectedTime }}</view>
        <view v-if="info.orderStatus == 1">派单时间：{{ info.orderCompleteTime }}</view>
        <view v-if="info.orderStatus == 2">维修时间：{{ info.orderCompleteTime }}</view>
        <view v-if="info.orderStatus == 3">完成时间：{{ info.orderCompleteTime }}</view>
        <view class="popup_item">联系电话：{{ info.repairsStudent.studentPhone }}</view>
        <view class="popup_item">备选电话：{{ info.repairsStudent.studentOtherPhone }}</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="dialogShows">
      <view id="dialog">
        <!-- <view class="replace">通知</view> -->
        <view class="uni-textarea">请填写拒绝理由</view>
        <u--textarea v-model="orderBack" placeholder="请输入退回理由"></u--textarea>
        <!-- <textarea v-modal="orderBack"></textarea> -->
        <view class="cancle" @click="dialogShows = false">取消</view>
        <view class="agree" @click="handleRefuse">确定</view>
      </view>
    </view>
    <!-- 是否接受单子 -->
    <view class="box" v-if="dialogShow">
      <view id="dialog">
        <view class="replace">选择维修时间</view>
        <view class="uni-textarea">
          <view @click="onShowDatePicker('datetime')" class="uni-list-cell-db-2">
            <text style="margin-left: 20rpx">{{ timeValue }}</text>
          </view>
          <mx-date-picker
            :show="showPicker"
            :type="type"
            :value="timeValue"
            :show-tips="true"
            :begin-text="'开始'"
            :end-text="'截至'"
            :show-seconds="true"
            @confirm="onSelected"
            @cancel="onSelected"
          />
        </view>
        <view class="cancle" @click="cancleclose">取消</view>
        <view class="agree" @click="agreeList">确定</view>
      </view>
    </view>
    <!-- 完成订单 -> 上传图片 -->
    <view class="box" v-if="uploadDialog">
      <view id="dialog">
        <view class="replace">请上传维修图片</view>
        <!-- 照片 -->
        <view class="photo">
          <view class="upload-image-view">
            <uni-file-picker
              limit="3"
              :value="imageValue"
              fileMediatype="image"
              :image-styles="imageStyles"
              mode="grid"
              @select="select"
              @delete="handleDelete"
            ></uni-file-picker>
          </view>
        </view>
        <view class="cancle" @click="uploadDialog = false">取消</view>
        <view class="agree" @click="onFinish">确定</view>
      </view>
    </view>
  </view>
</template>

<script>
import * as TranslateImage from '../../utils/imageZip.js'
import '../../static/upload-imgs.css'
import MxDatePicker from '@/components/mx-datepicker'
export default {
  components: {
    MxDatePicker,
  },
  data() {
    return {
      orderBack: '',
      dialogShow: false,
      dialogShows: false,
      uploadDialog: false,
      orderId: '',
      orderStatus: null,
      orderStatusStyle: {},
      orderStatusText: {},
      workerList: [],
      flag: false,
      pageNum: 1,
      pageSize: 6,
      total: '',
      title: 'picker-view',
      visible: true,
      showPicker: false,
      datetime: '',
      range: ['2022-03-27', '2022-03-27'],
      rangetime: '',
      type: 'rangetime',
      timeValue: '请点击选择时间',
      info: null,
      activeIndex: null,
      imageValue: [],
      ceshiData1: [],
      Timer: null,
      imgs: null,
      imageStyles: {
        width: 75,
        height: 75,
        border: {
          color: '#ccc',
          width: 1,
          style: 'dashed',
          radius: '5px',
        },
      },
      finishJsonPramas: null, // 完成维修
    }
  },
  onLoad() {
    this.getworkList()
    this.getTime()
  },
  // computed: {
  // 	orderStatusStyle: () => {

  // 	}
  // },
  methods: {
    // 初始化时间
    getTime() {
      let date = new Date(),
        year = date.getFullYear(),
        month = date.getMonth() + 1,
        day = date.getDate(),
        hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours(),
        minute = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes(),
        second = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      month >= 1 && month <= 9 ? (month = '0' + month) : ''
      day >= 0 && day <= 9 ? (day = '0' + day) : ''
      let timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
      this.datetime = timer
    },

    // 获取报修订单列表
    async getworkList() {
      let res = await this.$myRequest({
        method: 'post',
        url: `/order/queryAllOrderByWorkId?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.workerList = [...this.workerList, ...res.data.list]
      }
      uni.hideLoading()
    },

    // 接受订单
    async agreeList() {
      console.log(this.timeValue, ' agree')
      if (this.timeValue == '请点击选择时间') {
        uni.showToast({
          title: '请选择时间',
        })
      } else {
        this.dialogShow = false
        let res = await this.$myRequest({
          method: 'post',
          url: `/order/updateOrderAccept?orderId=${this.orderId}&completeTime=${this.timeValue}`,
        })
        // console.log(res)
        if (res.status == 200) {
          uni.showToast({
            title: '接单成功',
            icon: 'success',
          })
          this.workerList = []
          this.pageNum = 1
          uni.pageScrollTo({
            scrollTop: 0,
          })
          this.getworkList()
        }
        this.timeValue = '请点击选择时间'
      }
    },

    // 拒绝订单
    async handleRefuse() {
      this.dialogShows = false
      console.log(this.orderBack, 'orderBack')
      let res = await this.$myRequest({
        method: 'post',
        url: `/order/updateOrderRefused?orderId=${this.orderId}&orderBack=${this.orderBack}`,
      })
      // console.log(res)
      if (res.status == 200) {
        uni.showToast({
          title: '拒单成功',
          icon: 'success',
        })
        this.workerList = []
        this.pageNum = 1
        uni.pageScrollTo({
          scrollTop: 0,
        })
        this.getworkList()
      }
    },

    onShowDatePicker(type) {
      this.type = type
      this.showPicker = true
      this.timeValue = this[type]
    },

    onSelected(e) {
      this.showPicker = false
      if (e) {
        this[this.type] = e.value
        this.timeValue = e.value
      }
    },

    // 页面拉到底部触发事件
    onReachBottom() {
      if (this.workerList.length < this.total) {
        uni.showLoading({
          title: '数据加载中',
        })
        this.pageNum++
        this.getworkList()
      } else {
        this.flag = true
      }
    },

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

    // 控制 接受或者拒绝弹窗 打开
    open(item, num) {
      this.orderId = item.orderId
      this.orderStatus = item.orderStatus
      if (num == 1) {
        this.dialogShow = true
      } else {
        this.dialogShows = true
      }
    },

    cancleclose() {
      this.dialogShow = false
      this.timeValue = '请点击选择时间'
    },

    // 完成维修按钮回调
    handleFinish(orderId) {
      this.finishJsonPramas = orderId
      this.uploadDialog = true
    },
    onFinish() {
      // 处理图片参数数据
      this.imgs = this.ceshiData1.join(';')
      if (this.Timer != null) {
        clearTimeout(this.Timer)
      }

      console.log(this.imgs, 'this.imgs')
      if (this.imgs === '') {
        return uni.showToast({
          title: '请上传维修图片',
          icon: 'error',
        })
      }

      this.Timer = setTimeout(async () => {
        let res = await this.$myRequest({
          method: 'post',
          url: `/order/updateOrderFinish?orderId=${this.finishJsonPramas}&repairImage=${this.imgs}`,
          //   data: {
          //     repairImage: this.imgs,
          //     orderId: this.finishJsonPramas,
          //   },
        })
        // console.log(res)
        if (res.status == 200) {
          uni.showToast({
            title: res.message,
            icon: 'success',
          })
          this.workerList = []
          this.pageNum = 1
          uni.pageScrollTo({
            scrollTop: 0,
          })
          this.uploadDialog = false
          this.getworkList()
        } else {
          uni.showToast({
            title: res.message,
            icon: 'error',
          })
        }
      }, 1500)
    },
    // 选择图片压缩并上传
    select(e) {
      // console.log('选择文件：', e)
      e.tempFiles.forEach((item) => {
        TranslateImage.translate(item.path, (res) => {
          if (Number(res.size) > 1000000) {
            this.imageValue = []
            uni.showModal({
              content: `图片过大,请重新上传`,
              showCancel: false,
              success() {},
            })
            return
          }
          uni.showLoading({
            title: '上传中',
          })
          uni.uploadFile({
            url: `/baoxiu/repairApi/order/uploadImage`,
            filePath: res.url,
            name: 'orderImages',
            success: (uploadFileRes) => {
              this.ceshiData1.push(JSON.parse(uploadFileRes.data).data)
              const path = item.path
              this.imageValue.push({
                url: path,
                name: '',
              })
              uni.hideLoading()
            },
            fail: () => {
              uni.hideLoading()
            },
          })
        })
      })
    },

    // 删除图片回调
    handleDelete(e) {
      const num = this.imageValue.findIndex((v) => v.path === e.tempFilePath)
      this.imageValue.splice(num, 1)
      this.ceshiData1.splice(num, 1)
      this.uploadDialog = false
    },

    // 查看详情回调
    async handleLookInfo(item) {
      this.info = null
      this.$refs.popup.open()
      if (item.orderStatus == 0) {
        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()
    },
  },
}
</script>

<style lang="scss" scoped>
.page {
  height: 100hv;
}

.head {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  align-items: center;
  height: 350rpx;
  border-radius: 0rpx 0rpx 20rpx 20rpx;
  background-color: rgba(42, 130, 228, 1);
  text-align: center;
  padding-top: 38rpx;
  z-index: 2;
  &_title {
    font-size: 30rpx;
    font-weight: bold;
    color: rgba(255, 255, 255, 1);
  }

  .nav {
    width: 718rpx;
    height: 236rpx;
    margin-top: 78rpx;
    padding-top: 50rpx;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 28rpx 28rpx 0rpx 0rpx;

    navigator {
      width: 108rpx;
      height: 120rpx;
      margin: 0 auto;
    }

    image {
      display: block;
      width: 96rpx;
      height: 96rpx;
      margin-left: 18rpx;
    }

    span {
      font-size: 26rpx;
    }
  }
}
.point {
  width: 100%;
  height: 14rpx;
  border-radius: 14rpx;
  background-color: rgba(229, 229, 229, 0.62);
}
.content {
  margin-top: 400rpx;
  padding: 0 10rpx;
  // height: 1200rpx;
  background-color: rgba(255, 255, 255, 1);

  .point {
    width: 100%;
    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-left: 20rpx;
    height: 330rpx;
    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(212, 48, 48, 1);
    }

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

    .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: blue;
    }

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

    .list {
      float: left;
      width: 500rpx;
      //   margin-left: -280rpx;
      //   margin-top: 64rpx;
      span {
        width: 100%;
        text-align: left;
      }
    }
  }
}

// .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);
// }

.picker-view {
  width: 750rpx;
  height: 600rpx;
  margin-top: 20rpx;
}

.item {
  height: 100rpx;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.loc {
  font-size: 24rpx;
  width: 40rpx;
  height: 40rpx;
  vertical-align: baseline;
}

.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-left: 20rpx;
// 	height: 250rpx;
// 	border-radius: 28rpx 28rpx 0rpx 0rpx;
// 	font-size: 24rpx;
// 	background-color: rgba(229, 229, 229, 0.62);
// }

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

.content-list .agreeIt {
  position: absolute;
  bottom: 20rpx;
  right: 42rpx;
  line-height: 50rpx;
  width: 152rpx;
  height: 50rpx;
  background-color: rgba(42, 130, 228, 1);
  color: white;
  font-size: 24rpx;
  border-radius: 28rpx;
}

.agreeIt2 {
  position: absolute;
  bottom: 20rpx;
  right: 42rpx;
  line-height: 50rpx;
  width: 122rpx;
  height: 50rpx;
  background-color: rgba(42, 130, 228, 1);
  color: white;
  font-size: 24rpx;
  border-radius: 28rpx;
}

.content-list .refuse {
  position: absolute;
  bottom: 20rpx;
  right: 190rpx;
  line-height: 50rpx;
  width: 122rpx;
  height: 50rpx;
  background-color: rgba(42, 130, 228, 1);
  color: white;
  font-size: 24rpx;
  border-radius: 28rpx;
}

.isOver {
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  font-size: 24rpx;
  color: rgba(80, 80, 80, 0.27);
}

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

.uni-textarea {
  //   margin-top: 70rpx;
  color: rgba(80, 80, 80, 1);
}

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

.replace {
  margin-top: 4%;
  font-size: 28rpx;
  color: #4cd964;
}

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

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

// .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);
// }

.popup_view {
  box-sizing: border-box;
  width: 600rpx;
  height: 840rpx;
  padding: 50rpx;
  overflow: scroll;
  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;
    }
  }
}

.photo {
  padding: 10px;
}
</style>