|
@@ -0,0 +1,280 @@
|
|
|
+<template>
|
|
|
+ <div class="home">
|
|
|
+ <div class="home-content">
|
|
|
+ <div class="ongoing" v-if="home.state===1">
|
|
|
+ <template v-if="home.homeLoading || home.dataList.length">
|
|
|
+ <van-pull-refresh v-model="homeRefreshing" @refresh="homeRefresh">
|
|
|
+ <van-list
|
|
|
+ v-model="home.homeLoading"
|
|
|
+ :finished="home.homeFinished"
|
|
|
+ finished-text="没有更多了"
|
|
|
+ @load="queryCompleteRepairOrder(home.state)"
|
|
|
+ >
|
|
|
+ <div v-for="(item,index) in home.dataList" class="ongoing-item" :key="item.id">
|
|
|
+ <div class="ongoing-item-top">
|
|
|
+ <div class="flex">
|
|
|
+ <img src="../common/img/home/date.png" alt="">
|
|
|
+ <div class="pl-10">
|
|
|
+ {{['您的报修正在分配','您的报修已被响应','您的报修已被延迟','您的报修负责人已更改',''][item.repairStatus]}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <img src="../common/img/home/replay.png" @click="replay(item.id,index)" :class="item.replayState&&'rotating'" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="ongoing-item-content">
|
|
|
+ <img class="avatr" :src="item.processorAvatar||headImg" alt="">
|
|
|
+ <div class="fg">
|
|
|
+ <div class="flex a-i-c">
|
|
|
+ <div class="nickname">负责IT:{{item.repairStatus?item.processorName:''}}</div>
|
|
|
+ <div class="ongoing-item-loading" v-show="!item.repairStatus">正在分配…(5分钟内确定)</div>
|
|
|
+ </div>
|
|
|
+ <div style="height:10px"></div>
|
|
|
+ <div class="ongoing-item-date" v-if="item.repairStatus!==2">报修时间:{{item.repairTime|format}}</div>
|
|
|
+ <div class="ongoing-item-date" v-else-if="item.repairStatus===2">延迟理由:{{item.extensionReason}}</div>
|
|
|
+ <div class="ongoing-item-date" v-if="item.repairStatus">当前正在处理订单数:<span style="color:#F5571E;font-size: 16px;">{{item.dealOrderNum}}</span></div>
|
|
|
+ <div class="ongoing-item-warning" v-if="!item.repairStatus">
|
|
|
+ <img src="../common/img/home/warning.png" alt="">
|
|
|
+ 等确认IT后就可以发起微信聊天
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <img src="../common/img/home/chat.png" v-if="!item.repairStatus" class="chat" alt="">
|
|
|
+ <img src="../common/img/home/chat-active.png" @click="contactOther(item.repairWxUserId)" v-else class="chat" alt="">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-list>
|
|
|
+ </van-pull-refresh>
|
|
|
+ </template>
|
|
|
+ <div v-else>
|
|
|
+ <div class="empty">
|
|
|
+ <img src="../common/img/home/empty.png" alt="">
|
|
|
+ <div class="emply-message">如要提交故障报修,点击“+”</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- <img src="./common/img/home/emergency.png" alt=""> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="complete" v-else>
|
|
|
+ <template v-if="home.homeLoading || home.dataList.length">
|
|
|
+ <van-pull-refresh v-model="homeRefreshing" @refresh="homeRefresh">
|
|
|
+ <van-list
|
|
|
+ v-model="home.homeLoading"
|
|
|
+ :finished="home.homeFinished"
|
|
|
+ finished-text="没有更多了"
|
|
|
+ @load="queryCompleteRepairOrder(home.state)"
|
|
|
+ >
|
|
|
+ <div v-for="item in home.dataList" @click="$router.push(`/detail/${item.id}`)" :key="item.id" class="complete-item">
|
|
|
+ <div class="complete-item-top">
|
|
|
+ <div class="title">负责IT</div>
|
|
|
+ <div class="button-group">
|
|
|
+ <div class="rate" :class="item.assessScore&&'not-rate'" @click.stop="homeEvaluation(item)">评价</div>
|
|
|
+ <div class="more" @click.stop="homeMoreWarranty">再次报修</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex">
|
|
|
+ <img class="avatr" :src="item.processorAvatar" alt="">
|
|
|
+ <div class="">
|
|
|
+ <div class="nickname">{{item.processorName}}</div>
|
|
|
+ <div style="height: 11px;" v-if="!item.assessScore"></div>
|
|
|
+ <div class="rate-group flex a-i-c" v-else>
|
|
|
+ <div class="rate-num">{{item.assessScore}}.0</div>
|
|
|
+ <van-rate :value="item.assessScore" readonly color="#ffd21e" :size="12"/>
|
|
|
+ </div>
|
|
|
+ <div class="item-detail-list">
|
|
|
+ <div class="">报修时间:{{item.repairTime|format}}</div>
|
|
|
+ <div class="">完成时间:{{item.processingTime|format}}</div>
|
|
|
+ <div class="">处理内容:{{item.processingContent}}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-list>
|
|
|
+ </van-pull-refresh>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <div v-else>
|
|
|
+ <div class="empty">
|
|
|
+ <img src="../common/img/home/empty.png" alt="">
|
|
|
+ <div class="emply-message">如要提交故障报修,点击“+”</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="emergency" @click="$router.push('/people')">
|
|
|
+ <div>
|
|
|
+ 紧
|
|
|
+ 急
|
|
|
+ 呼
|
|
|
+ 叫
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="home-nav">
|
|
|
+ <img src="../common/img/home/nav-bg.png" alt="">
|
|
|
+ <div class="nav-item" @click="queryCompleteRepairOrder(1)">
|
|
|
+ <img src="../common/img/home/icon-read-active.png" v-if="home.state===1" alt="">
|
|
|
+ <img src="../common/img/home/icon-read.png" v-else alt="">
|
|
|
+ <div class="nav-title">进行中</div>
|
|
|
+ </div>
|
|
|
+ <div class="nav-add"><van-icon name="plus" :size="20" @click="$router.push('/info')"/></div>
|
|
|
+ <div class="nav-item" @click="queryCompleteRepairOrder(2)">
|
|
|
+ <img src="../common/img/home/icon-my-active.png" v-if="home.state===2" alt="">
|
|
|
+ <img src="../common/img/home/icon-my.png" v-else alt="">
|
|
|
+ <div class="nav-title">已完成</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <van-popup :value="home.show===2" class="main-popup" :close-on-click-overlay="false">
|
|
|
+ <div class="icon"><van-icon name="success" /></div>
|
|
|
+ <div class="message">评论成功</div>
|
|
|
+ <div class="button-detail" @click="closeHomeDia">确定</div>
|
|
|
+ </van-popup>
|
|
|
+
|
|
|
+ <van-popup :value="home.show===1" class="home-popup" :close-on-click-overlay="false">
|
|
|
+ <div class="home-popup-top">
|
|
|
+ <div>
|
|
|
+ <van-rate
|
|
|
+ v-model="home.obj.assessScore"
|
|
|
+ :size="27"
|
|
|
+ :gutter="15"
|
|
|
+ color="#ffd21e"
|
|
|
+ void-icon="star"
|
|
|
+ void-color="#CDCDCD"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="popup-top-text">您对此次服务还满意吗?</div>
|
|
|
+ </div>
|
|
|
+ <div class="home-popup-input">
|
|
|
+ <van-field
|
|
|
+ v-model.trim="home.obj.assessSupplement"
|
|
|
+ rows="4"
|
|
|
+ label=""
|
|
|
+ type="textarea"
|
|
|
+ maxlength="100"
|
|
|
+ placeholder="请输入评价内容(非必填)"
|
|
|
+ show-word-limit
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="home-popup-submit" @click="homeSubmit">提交评价</div>
|
|
|
+ <div class="home-popup-close" >
|
|
|
+ <img src="../common/img/close.png" @click="$set(home,'show',0)" alt="">
|
|
|
+ </div>
|
|
|
+ </van-popup>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ home: {
|
|
|
+ dataList: [],
|
|
|
+ state: 1,
|
|
|
+ show: 0,
|
|
|
+ id: null,
|
|
|
+ obj: {},
|
|
|
+ homeLoading: true,
|
|
|
+ homeFinished: false,
|
|
|
+ page: 0
|
|
|
+ },
|
|
|
+ homeRefreshing: false,
|
|
|
+ headImg: require('../common/img/head.png')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /**
|
|
|
+ * 查询数据列表
|
|
|
+ * @param val 1:进行中 2:已完成
|
|
|
+ */
|
|
|
+ async queryCompleteRepairOrder (val = 1) {
|
|
|
+ this.$set(this.home, 'homeFinished', false)
|
|
|
+ if (val === this.home.state) {
|
|
|
+ this.home.page += 1
|
|
|
+ } else {
|
|
|
+ this.home.page = 0
|
|
|
+ this.$set(this.home, 'state', val)
|
|
|
+ this.$set(this.home, 'dataList', [])
|
|
|
+ }
|
|
|
+ let reqdata = {
|
|
|
+ queryType: this.home.state,
|
|
|
+ userId: this.globalUserId
|
|
|
+ }
|
|
|
+ this.$set(this.home, 'homeLoading', true)
|
|
|
+ // let {list,totalpages} = await this.postHttps('manage/repair/queryCompleteRepairOrder',{page:this.home.page,reqdata})
|
|
|
+ // this.$set(this.home,'dataList',[...this.home.dataList,...list])
|
|
|
+ // this.$set(this.home,'homeLoading',false)
|
|
|
+ // this.homeRefreshing = false
|
|
|
+ // totalpages<10&&this.$set(this.home,'homeFinished',true)
|
|
|
+ this.postHttps('manage/repair/queryCompleteRepairOrder', { page: this.home.page, reqdata }).then(r => {
|
|
|
+ let { list, totalpages } = r
|
|
|
+ this.$set(this.home, 'dataList', [...this.home.dataList, ...list])
|
|
|
+ this.$set(this.home, 'homeLoading', false)
|
|
|
+ this.homeRefreshing = false
|
|
|
+ totalpages < 10 && this.$set(this.home, 'homeFinished', true)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 点击评价
|
|
|
+ * @param item 评论的订单对象
|
|
|
+ */
|
|
|
+ homeEvaluation ({ id, assessScore }) {
|
|
|
+ if (assessScore) return
|
|
|
+ this.home.id = id
|
|
|
+ this.$set(this.home, 'show', 1)
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 再次报修
|
|
|
+ */
|
|
|
+ homeMoreWarranty () {
|
|
|
+ this.$router.push('/info')
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 提交评价
|
|
|
+ */
|
|
|
+ async homeSubmit () {
|
|
|
+ let { assessScore, assessSupplement } = this.home.obj
|
|
|
+ let { id: repairId } = this.home
|
|
|
+ let reqdata = {
|
|
|
+ assessScore,
|
|
|
+ assessSupplement,
|
|
|
+ repairId
|
|
|
+ }
|
|
|
+ this.postHttps('manage/repair/assessRepairOrder', { reqdata }).then(() => {
|
|
|
+ this.$set(this.home, 'show', 2)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 下拉刷新
|
|
|
+ */
|
|
|
+ homeRefresh () {
|
|
|
+ this.homeRefreshing = true
|
|
|
+ this.$set(this.home, 'dataList', [])
|
|
|
+ this.home.page = 0
|
|
|
+ this.queryCompleteRepairOrder(this.home.state)
|
|
|
+ },
|
|
|
+ closeHomeDia () {
|
|
|
+ this.$set(this.home, 'show', 0)
|
|
|
+ this.homeRefresh()
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 指定刷新
|
|
|
+ * @param id 订单id
|
|
|
+ * @param index 数组下标index
|
|
|
+ */
|
|
|
+ async replay (id, index) {
|
|
|
+ this.$set(this.home.dataList[index], 'replayState', true)
|
|
|
+ setTimeout(() => {
|
|
|
+ this.$set(this.home.dataList[index], 'replayState', false)
|
|
|
+ }, 1000)
|
|
|
+ // let {object} = await this.postHttps('/manage/repair/refreshOrderById',{reqdata:{id}})
|
|
|
+
|
|
|
+ this.postHttps('/manage/repair/refreshOrderById', { reqdata: { id } }).then(r => {
|
|
|
+ let { object } = r
|
|
|
+ this.home.dataList.splice(index, 1, object)
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ this.homeRefresh()
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|