856 lines
		
	
	
		
			21 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			856 lines
		
	
	
		
			21 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
| <template>
 | |
|   <view class="container">
 | |
|     <!--<VNavigationBar style="position: relative;z-index: 99;" leftTitle="true" backgroundColor="rgba(0,0,0,0)" title-color="#fff" title=" "></VNavigationBar>-->
 | |
|     <view class="bodyTopBg"></view>
 | |
|     <view class="body">
 | |
|       <view class="userInfoBox">
 | |
|         <image @click="showUserDetail" v-if="''==userInfo.avatar || null == userInfo.avatar"
 | |
|                :src="defaultAvatar" mode="scaleToFill" style="width: 104rpx;height: 104rpx;border-radius: 50%;"
 | |
|                @error="avatarErr"></image>
 | |
|         <image @click="showUserDetail" v-else :src="imgUrlPrex+userInfo.avatar" mode="scaleToFill"
 | |
|                style="width: 104rpx;height: 104rpx;border-radius: 50%;" @error="avatarErr"></image>
 | |
|         <view @click="showUserDetail" class="userInfo">
 | |
|           <text class="userName">{{ userInfo.nickname }}</text>
 | |
|           <text class="userType">{{ userInfo.roleNames }}</text>
 | |
|         </view>
 | |
|         <view class="msg-box" @click="gotoMsg">
 | |
|           <image mode="aspectFita" src="@/pages-home/static/msg.png" style="width: 48rpx;height: 48rpx"></image>
 | |
|           <view class="msg-num" v-if="noReadNum>0">{{ noReadNum }}</view>
 | |
|         </view>
 | |
|         <image @click="showUserDetail" mode="aspectFita" src="/static/icons/more.png"
 | |
|                style="width: 48rpx;height: 48rpx"></image>
 | |
|       </view>
 | |
|       <!-- 通知公告 -->
 | |
|       <view class="notice-dom" v-if="noticeNum>0" @click="gotoNotice">
 | |
|         <view class="notice-box">
 | |
|           <image class="left-img" src="@/pages-home/static/notice.png"></image>
 | |
|           <view class="center-text">你有{{ noticeNum }}条来自平台的通知公告</view>
 | |
|           <u-icon style="width: 20rpx" color="#999" name="arrow-right" size="12"></u-icon>
 | |
|         </view>
 | |
|       </view>
 | |
| 
 | |
|       <view class="body-top">
 | |
|         <view class="body-top-search">
 | |
|           <input class="body-top-search-input" v-model="queryParams.query" placeholder="工单号、车牌号、联系电话"
 | |
|                  placeholder-style="font-size: 28rpx"
 | |
|                  type="text">
 | |
|           <text @click="onRefresherrefresh">搜索</text>
 | |
|         </view>
 | |
|         <view class="body-top-tab">
 | |
|           <view v-for="(item, index) in tabList" @click="activeTab(index)" :key="index"
 | |
|                 :class="{ active: active === index }"
 | |
|                 class="body-top-tab-item">
 | |
|             {{ item.name }}
 | |
|             <view v-if="index === active" class="activeLine"></view>
 | |
|           </view>
 | |
|         </view>
 | |
|       </view>
 | |
| 
 | |
| 
 | |
|       <view class="todoListBox">
 | |
|         <scroll-view :refresher-triggered="isTriggered" @scrolltolower="onReachBottomCus" class="itemContent"
 | |
|                      refresher-enabled
 | |
|                      scroll-y="true" style="height: 100%" @refresherrefresh="onRefresherrefresh">
 | |
|           <view v-if="active!=3" v-for="(item, index) in ticketWares" :key="index" class="orderItem">
 | |
|             <view class="order-top">
 | |
|               <view class="order-top-left">
 | |
|                 <text class="order-top-name">{{ item.repairName }}{{ '配件申请单' }}</text>
 | |
|                 <text class="order-top-date">{{ item.createTimeStr }}</text>
 | |
|               </view>
 | |
|               <text class="order-status">{{ item.statusStr }}</text>
 | |
|             </view>
 | |
|             <view class="order-content">
 | |
|               <view>
 | |
|                 车牌号:{{ item.licenseNumber }}
 | |
|               </view>
 | |
|               <view>
 | |
|                 服务顾问:{{ item.adviserName }}
 | |
|               </view>
 | |
|             </view>
 | |
| 
 | |
|             <view class="order-footer">
 | |
|               <template v-if="!queryParams.isBack && typeof queryParams.isBack === 'boolean'">
 | |
|                 <view @click="inOutWareHouse(item,true)" class="order-btn yes">通知领料</view>
 | |
|                 <!--                <view class="order-btn yes">采购</view>-->
 | |
|               </template>
 | |
|               <template v-else-if="!queryParams.isBack && typeof queryParams.isBack === 'undefined'">
 | |
|                 <view @click="inOutWareHouse(item,true)" class="order-btn yes">查看申请</view>
 | |
|                 <!--                <view class="order-btn yes">采购</view>-->
 | |
|               </template>
 | |
|               <template v-else-if="queryParams.isBack">
 | |
|                 <view @click="inOutWareHouse(item,false)" class="order-btn yes">通知退料</view>
 | |
|               </template>
 | |
|             </view>
 | |
|           </view>
 | |
|           <view v-if="ticketWares.length==0 && active!=3" style="text-align: center">
 | |
|             <image class="" src="@/static/images/nothing.png"></image>
 | |
|           </view>
 | |
|           <order-card :userInfo="userInfo" v-if="active==3" v-for="(item, index) in orderList" :key="index" :order="item" @childEvent="onRefresherrefresh" @doVoid="doVoidReq" @getOrder="openFile" @startWork="startWork" @addProj="addProj"></order-card>
 | |
|           <view style="text-align: center" v-if="orderList.length==0 && active==3">
 | |
|             <image class=""  src="@/static/images/nothing.png" ></image>
 | |
|           </view>
 | |
|         </scroll-view>
 | |
|       </view>
 | |
|     </view>
 | |
|     <tabBarVue msg="1" ref="tarBar" title="采购单" @socketSuccess="socketSuccess"></tabBarVue>
 | |
|   </view>
 | |
| </template>
 | |
| 
 | |
| <script>
 | |
| import tabBarVue from '@/components/tabBar/tabBar.vue'
 | |
| import VNavigationBar from '@/components/VNavigationBar.vue'
 | |
| import OrderCard from "@/components/orderCard.vue";
 | |
| import config from '@/config'
 | |
| import request from '@/utils/request';
 | |
| import {
 | |
|   getToken,
 | |
|   getUserInfo,
 | |
|   getStrData,
 | |
|   getTenantId,
 | |
|   setJSONData
 | |
| } from '@/utils/auth'
 | |
| import {getDictTextByCodeAndValue, formatDate,builderOrder, formatTimestamp} from "@/utils/utils";
 | |
| 
 | |
| export default {
 | |
|   components: {
 | |
|     OrderCard,
 | |
|     tabBarVue,
 | |
|     VNavigationBar
 | |
|   },
 | |
|   data() {
 | |
|     return {
 | |
|       tabList: [
 | |
|         {
 | |
|           name: '领配件'
 | |
|         },
 | |
|         {
 | |
|           name: '退配件'
 | |
|         },
 | |
|         {
 | |
|           name: '配件单'
 | |
|         },
 | |
|         {
 | |
|           name: '进行中工单'
 | |
|         },
 | |
|       ],
 | |
|       //配件单查询条件
 | |
|       queryParams: {
 | |
|         pageNo: 1,
 | |
|         pageSize: 10,
 | |
|         query: null,
 | |
|         type: "01",
 | |
|         isBack: false,
 | |
|       },
 | |
|       //配件单列表
 | |
|       ticketWares: [],
 | |
|       //工单列表
 | |
|       orderList:[],
 | |
|       //数量
 | |
|       total: 0,
 | |
|       //下拉刷新状态
 | |
|       isTriggered: false,
 | |
|       imgUrlPrex: config.baseImageUrl,
 | |
|       userInfo: {
 | |
|         avatar: undefined,
 | |
|         nickname: ''
 | |
|       },
 | |
|       isShow: true,
 | |
|       active: 0,
 | |
|       defaultAvatar: require('@/static/icons/avatar.png'),
 | |
|       //未读消息数量
 | |
|       noReadNum: 0,
 | |
|       //通知公告数量
 | |
|       noticeNum: 0,
 | |
|       //是否首次打开页面
 | |
|       ifFirstLogin: true,
 | |
|     }
 | |
|   },
 | |
|   onLoad() {
 | |
|     if (!getToken()) {
 | |
|       uni.reLaunch({
 | |
|         url: '/pages/login/login'
 | |
|       })
 | |
|     } else {
 | |
|       //直接取缓存中的用户信息
 | |
|       this.userInfo = getUserInfo()
 | |
|       if (!this.$msgSocket) {
 | |
|         this.$startMsgSocket(getTenantId(), getStrData("userId"))
 | |
|       }
 | |
|     }
 | |
|   },
 | |
|   onShow() {
 | |
|     if (!getToken()) {
 | |
|       uni.reLaunch({
 | |
|         url: '/pages/login/login'
 | |
|       })
 | |
|     } else {
 | |
|       this.onRefresherrefresh()
 | |
|       this.getNoReadNum()
 | |
|       this.getNoticeList()
 | |
|     }
 | |
|   },
 | |
|   methods: {
 | |
|     gotoMsg() {
 | |
|       //去消息中心
 | |
|       uni.navigateTo({
 | |
|         url: '/pages-home/msg/message'
 | |
|       })
 | |
|     },
 | |
|     socketSuccess() {
 | |
|       this.getNoReadNum()
 | |
|       this.onRefresherrefresh()
 | |
|       console.log('通知并刷新成功')
 | |
|     },
 | |
|     /**
 | |
|      * 领配件、退配件Tab页
 | |
|      */
 | |
|     activeTab(index) {
 | |
|       this.active = index
 | |
|       if (index === 0) {
 | |
|         this.queryParams.isBack = false
 | |
|         this.queryParams.isToBeReviewed = undefined
 | |
|         this.isShow = true
 | |
|       } else if (index === 1) {
 | |
|         this.queryParams.isBack = true
 | |
|         this.queryParams.isToBeReviewed = undefined
 | |
|         this.isShow = true
 | |
|       } else if (index === 2) {
 | |
|         this.isShow = false
 | |
|         this.queryParams.isToBeReviewed = true
 | |
|         this.queryParams.isBack = undefined
 | |
|       }
 | |
|       // this.active = index
 | |
|       // if (index == 1) {
 | |
|       //   this.queryParams.isBack = false
 | |
|       //   this.queryParams.isToBeReviewed = undefined
 | |
|       //   this.isShow = true
 | |
|       // } else if (index == 2) {
 | |
|       //   this.isShow = true
 | |
|       //   this.queryParams.isToBeReviewed = true
 | |
|       //   this.queryParams.isBack = undefined
 | |
|       // } else {
 | |
|       //   this.isShow = true
 | |
|       //   this.queryParams.isBack = undefined
 | |
|       //   this.queryParams.isToBeReviewed = undefined
 | |
|       // }
 | |
|       this.onRefresherrefresh()
 | |
|     },
 | |
| 
 | |
|     /**
 | |
|      * 下拉刷新数据
 | |
|      */
 | |
|     onRefresherrefresh() {
 | |
|       this.isTriggered = true
 | |
|       this.queryParams.pageNo = 1
 | |
|       this.total = 0
 | |
|       this.ticketWares = []
 | |
|       this.orderList = []
 | |
|       if(this.active==3){
 | |
|         this.getOrderList()
 | |
|       }else{
 | |
|         this.getTicketWares()
 | |
|       }
 | |
|     },
 | |
|     /**
 | |
|      * 配件单查询
 | |
|      */
 | |
|     async getTicketWares() {
 | |
|       request({
 | |
|         url: '/admin-api/repair/tw/page',
 | |
|         method: 'get',
 | |
|         params: this.queryParams
 | |
|       }).then((res) => {
 | |
|         if (res.code == 200) {
 | |
|           res.rows.map((item) => {
 | |
|             getDictTextByCodeAndValue("ticket_wares_status", item.status).then(value => {
 | |
|               item.statusStr = value
 | |
|             }).catch(error => {
 | |
|               item.statusStr = "未知"
 | |
|               console.error(error);
 | |
|             });
 | |
|             item.createTimeStr = formatTimestamp(item.createTime)
 | |
|           })
 | |
|           this.total = res.total
 | |
|           if (this.queryParams.pageNo != 1) {
 | |
|             this.ticketWares = this.ticketWares.concat(res.rows)
 | |
|           } else {
 | |
|             this.ticketWares = res.rows
 | |
|           }
 | |
|           this.isTriggered = false
 | |
|         }
 | |
|       })
 | |
|     },
 | |
|     /**
 | |
|      * 查本人待处理工单
 | |
|      */
 | |
|     getOrderList(){
 | |
|       let paramsObj = {pageNo: this.queryParams.pageNo, pageSize: this.queryParams.pageSize ,ticketNo:this.queryParams.query}
 | |
|       request({
 | |
|         url: '/admin-api/repair/tickets/pageType',
 | |
|         method: 'get',
 | |
|         params:paramsObj
 | |
|       }).then((res) => {
 | |
|         console.log(res)
 | |
|         if (res.code == 200) {
 | |
|           let thisPageRecords = []
 | |
|           if(res.data && res.data.hasOwnProperty("records")){
 | |
|             for (let i = 0; i < res.data.records.length; i++) {
 | |
|               let order = res.data.records[i]
 | |
|               let viewOrder = builderOrder(order)
 | |
|               if(order.booking){
 | |
|                 viewOrder['appointDate'] = formatTimestamp(order.createTime)
 | |
|               }
 | |
|               let projectList = []
 | |
|               if(order.itemList){
 | |
|                 for (let j = 0; j < order.itemList.length; j++) {
 | |
|                   let itemObj = order.itemList[j]
 | |
|                   if("01"==itemObj.itemType){
 | |
|                     projectList.push({
 | |
|                       id:itemObj.id,
 | |
|                       name:itemObj.itemName
 | |
|                     })
 | |
|                   }
 | |
|                 }
 | |
|               }
 | |
|               viewOrder['projectList'] = projectList
 | |
|               thisPageRecords.push(viewOrder)
 | |
|             }
 | |
|           }
 | |
|           //判断 如果获取的数据的页码不是第一页,就让之前赋值获取过的数组数据 concat连接 刚获取的第n页数据
 | |
|           if (this.pageNo != 1) {
 | |
|             this.orderList = this.orderList.concat(thisPageRecords)
 | |
|           } else {
 | |
|             this.orderList = thisPageRecords
 | |
|           }
 | |
|           //将获取的总条数赋值
 | |
|           this.total = res.data.total
 | |
|           this.isTriggered = false
 | |
|         }
 | |
|       })
 | |
|     },
 | |
| 
 | |
|     /**
 | |
|      * 上滑加载数据
 | |
|      */
 | |
|     onReachBottomCus() {
 | |
|       //判断 如果页码*页容量大于等于总条数,提示该页数据加载完毕
 | |
|       if (this.queryParams.pageNo * this.queryParams.pageSize >= this.total) {
 | |
|         uni.$u.toast('没有更多数据了')
 | |
|         return
 | |
|       }
 | |
|       //页码+1,调用获取数据的方法获取第二页数据
 | |
|       this.queryParams.pageNo++
 | |
|       //此处调用自己获取数据列表的方法
 | |
|       if(this.active==3){
 | |
|         this.getOrderList()
 | |
|       }else{
 | |
|         this.getTicketWares()
 | |
|       }
 | |
|     },
 | |
| 
 | |
|     /**
 | |
|      * 配件出库
 | |
|      */
 | |
|     inOutWareHouse(formData, isReceive) {
 | |
|       formData.isReceive = isReceive
 | |
|       setJSONData("applyWaresForm", formData)
 | |
|       uni.navigateTo({
 | |
|         url: '/pages-warehouse/inOutWarehouse/inOutWarehouse?isToBeReviewed=' + this.isShow
 | |
|       })
 | |
|     },
 | |
| 
 | |
|     /**
 | |
|      * 配件出库操作
 | |
|      */
 | |
|     handlePass(row) {
 | |
|       //组装提交参数
 | |
|       const formData = {...row}
 | |
| 
 | |
|     },
 | |
| 
 | |
|     gotoPage(menu) {
 | |
|       uni.navigateTo({
 | |
|         url: menu.path
 | |
|       })
 | |
|     },
 | |
|     avatarErr(err) {
 | |
|       console.log('err', err)
 | |
|       this.userInfo.avatar = this.defaultAvatar
 | |
|     },
 | |
|     showUserDetail() {
 | |
|       uni.navigateTo({
 | |
|         url: '/pages/my/myInfo'
 | |
|       })
 | |
|     },
 | |
|     /**
 | |
|      * 获取未读消息数量
 | |
|      * @returns {Promise<void>}
 | |
|      */
 | |
|     async getNoReadNum() {
 | |
|       await request({
 | |
|         url: "/admin-api/system/notify-message/get-unread-count",
 | |
|         method: "GET"
 | |
|       }).then((res) => {
 | |
|         if (res.code == 200) {
 | |
|           this.noReadNum = res.data > 99 ? 99 : res.data
 | |
|         }
 | |
|         if (this.ifFirstLogin && this.noReadNum > 0) {
 | |
|           console.log("播放")
 | |
|           this.$refs.tarBar.dianyidain()
 | |
|           this.ifFirstLogin = false
 | |
|         }
 | |
|       })
 | |
|     },
 | |
|     /**
 | |
|      * 跳转通知公告列表页
 | |
|      */
 | |
|     gotoNotice() {
 | |
|       uni.navigateTo({
 | |
|         url: '/pages-home/notice/notice'
 | |
|       })
 | |
|     },
 | |
|     /**
 | |
|      * 查通知公告--查数量
 | |
|      */
 | |
|     async getNoticeList() {
 | |
|       const res = await request({
 | |
|         url: "/admin-api/base/notice/page",
 | |
|         method: "get",
 | |
|         params: {
 | |
|           pageNo: 1,
 | |
|           pageSize: 1,
 | |
|           type: 1,
 | |
|           parentServer: "weixiu",
 | |
|           server: "app"
 | |
|         },
 | |
|         tenantIdFlag: false
 | |
|       })
 | |
|       if (res.code == 200) {
 | |
|         this.noticeNum = res.data.total
 | |
|       }
 | |
|     },
 | |
|   }
 | |
| }
 | |
| </script>
 | |
| 
 | |
| <style lang="less" scoped>
 | |
| * {
 | |
|   box-sizing: border-box;
 | |
| }
 | |
| 
 | |
| .container {
 | |
|   height: 100%;
 | |
|   //background: linear-gradient(180deg, #0174F6 0%, rgba(1, 116, 246, 0) 100%);
 | |
|   display: flex;
 | |
|   flex-direction: column;
 | |
|   position: relative;
 | |
|   padding-top: 60rpx;
 | |
|   background-color: #F3F5F7;
 | |
| 
 | |
| 
 | |
|   .bodyTopBg {
 | |
|     position: absolute;
 | |
|     top: 0;
 | |
|     left: 0;
 | |
|     width: 100%;
 | |
|     height: 500rpx;
 | |
|     background-image: url("@/static/bg.png");
 | |
|     background-size: 100% 100%;
 | |
|     background-repeat: no-repeat;
 | |
|   }
 | |
| 
 | |
|   .body {
 | |
|     position: relative;
 | |
|     z-index: 10;
 | |
|     flex: 1;
 | |
|     height: 0;
 | |
|     overflow: auto;
 | |
|     padding-bottom: 30rpx;
 | |
|     display: flex;
 | |
|     flex-direction: column;
 | |
|   }
 | |
| 
 | |
|   .notice-dom {
 | |
|     margin: 40rpx 32rpx;
 | |
|     background: #FFFFFF;
 | |
|     border-radius: 8rpx 8rpx 8rpx 8rpx;
 | |
|     padding: 20rpx;
 | |
|     display: flex;
 | |
|     align-items: center;
 | |
| 
 | |
|     .notice-box {
 | |
|       display: flex;
 | |
| 
 | |
|       .left-img {
 | |
|         width: 48rpx;
 | |
|         height: 48rpx;
 | |
|       }
 | |
| 
 | |
|       .center-text {
 | |
|         width: calc(100% - 130rpx);
 | |
|         overflow: hidden;
 | |
|         white-space: nowrap;
 | |
|         text-overflow: ellipsis;
 | |
|         padding: 0 20rpx;
 | |
|       }
 | |
|     }
 | |
|   }
 | |
| 
 | |
|   .userInfoBox {
 | |
|     margin: 0 32rpx 40rpx;
 | |
| 
 | |
|     display: flex;
 | |
|     column-gap: 20rpx;
 | |
|     align-items: center;
 | |
| 
 | |
|     .userInfo {
 | |
|       flex: 1;
 | |
|       width: 0;
 | |
| 
 | |
|       .userName {
 | |
|         font-weight: bold;
 | |
|         font-size: 36rpx;
 | |
|         color: #333333;
 | |
|         display: block;
 | |
|         margin-bottom: 16rpx;
 | |
|       }
 | |
| 
 | |
|       .userType {
 | |
|         font-size: 24rpx;
 | |
|         color: #0174F6;
 | |
|         display: inline-block;
 | |
|         border-radius: 24rpx 24rpx 24rpx 24rpx;
 | |
|         border: 1rpx solid #0174F6;
 | |
|         padding: 8rpx 16rpx;
 | |
|       }
 | |
|     }
 | |
| 
 | |
|     .msg-box {
 | |
|       position: relative;
 | |
|       margin-right: 40rpx;
 | |
| 
 | |
|       .msg-num {
 | |
|         position: absolute;
 | |
|         right: -15rpx;
 | |
|         color: white;
 | |
|         background: #d74a43;
 | |
|         width: 35rpx;
 | |
|         height: 35rpx;
 | |
|         line-height: 35rpx;
 | |
|         text-align: center;
 | |
|         font-weight: 800;
 | |
|         font-size: 11px;
 | |
|         border-radius: 50%;
 | |
|         top: -15rpx;
 | |
|       }
 | |
|     }
 | |
|   }
 | |
| 
 | |
|   .body-top {
 | |
|     //width: 686rpx;
 | |
|     background: #FFFFFF;
 | |
|     border-radius: 8rpx 8rpx 8rpx 8rpx;
 | |
|     margin: 30rpx 30rpx 0;
 | |
| 
 | |
|     .body-top-search {
 | |
|       height: 84rpx;
 | |
|       background: #F3F5F7;
 | |
|       border-radius: 12rpx 12rpx 12rpx 12rpx;
 | |
|       margin: 0 auto;
 | |
|       padding: 0 30rpx;
 | |
|       font-size: 28rpx;
 | |
| 
 | |
|       display: flex;
 | |
|       align-items: center;
 | |
|       column-gap: 10rpx;
 | |
| 
 | |
|       .body-top-search-input {
 | |
|         flex: 1;
 | |
|         width: 0;
 | |
|       }
 | |
|     }
 | |
| 
 | |
|     .body-top-tab {
 | |
|       display: flex;
 | |
|       font-size: 28rpx;
 | |
| 
 | |
|       .body-top-tab-item {
 | |
|         flex: 1;
 | |
|         width: 0;
 | |
|         text-align: center;
 | |
|         padding: 28rpx 0;
 | |
|         position: relative;
 | |
| 
 | |
|         &.active {
 | |
|           color: #0174F6;
 | |
|         }
 | |
| 
 | |
|         .activeLine {
 | |
|           position: absolute;
 | |
|           bottom: 0;
 | |
|           left: 50%;
 | |
|           transform: translateX(-50%);
 | |
|           width: 96rpx;
 | |
|           height: 6rpx;
 | |
|           background: #0174F6;
 | |
|           border-radius: 4rpx 4rpx 0rpx 0rpx;
 | |
|         }
 | |
|       }
 | |
|     }
 | |
| 
 | |
|   }
 | |
| 
 | |
|   .todoListBox {
 | |
|     flex: 1;
 | |
|     height: 0;
 | |
|     margin: 40rpx 32rpx;
 | |
|   }
 | |
| 
 | |
|   .body-top-banner {
 | |
|     text-align: center;
 | |
|   }
 | |
| 
 | |
|   .banner {
 | |
|     margin: 24rpx 0 0;
 | |
|     width: 686rpx;
 | |
|     height: 100%;
 | |
|     border-radius: 12rpx 12rpx 12rpx 12rpx;
 | |
|     background-color: #0174F6;
 | |
|   }
 | |
| 
 | |
|   .menus {
 | |
|     margin: 30rpx auto 0;
 | |
|     box-sizing: border-box;
 | |
|     width: 686rpx;
 | |
|     padding: 40rpx 38rpx;
 | |
|     background: #FFFFFF;
 | |
|     box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(10, 54, 104, 0.1);
 | |
|     border-radius: 12rpx 12rpx 12rpx 12rpx;
 | |
|     display: flex;
 | |
|     align-items: center;
 | |
|     justify-content: space-between;
 | |
|   }
 | |
| 
 | |
|   .menu-item {
 | |
|     display: flex;
 | |
|     align-items: center;
 | |
|     justify-content: center;
 | |
|     flex-direction: column;
 | |
|     row-gap: 22rpx;
 | |
|     font-size: 24rpx;
 | |
| 
 | |
|     .menu-icon {
 | |
|       width: 48rpx;
 | |
|       height: 48rpx;
 | |
|     }
 | |
|   }
 | |
| 
 | |
|   .info {
 | |
|     width: 686rpx;
 | |
|     margin: 38rpx auto 0;
 | |
|     display: flex;
 | |
|     align-items: center;
 | |
|     column-gap: 20rpx;
 | |
| 
 | |
|     .info-icon {
 | |
|       width: 80rpx;
 | |
|       height: 80rpx;
 | |
|     }
 | |
| 
 | |
|     .infoList {
 | |
|       flex: 1;
 | |
|       width: 0;
 | |
| 
 | |
|       .infoItem {
 | |
|         display: flex;
 | |
|         align-items: center;
 | |
|         justify-content: space-between;
 | |
|         column-gap: 10rpx;
 | |
|       }
 | |
| 
 | |
|       .infoIndex {
 | |
|         width: 12rpx;
 | |
|         height: 12rpx;
 | |
|         border-radius: 50%;
 | |
|         background-color: #333;
 | |
|       }
 | |
| 
 | |
|       .infoText {
 | |
|         flex: 1;
 | |
|         width: 0;
 | |
|         overflow: hidden;
 | |
|         text-overflow: ellipsis;
 | |
|         white-space: nowrap;
 | |
|         font-size: 24rpx;
 | |
|       }
 | |
|     }
 | |
| 
 | |
|     .more-icon {
 | |
|       width: 24rpx;
 | |
|       height: 24rpx;
 | |
|     }
 | |
|   }
 | |
| 
 | |
|   .repairShop {
 | |
|     width: 686rpx;
 | |
|     margin: 38rpx auto 0;
 | |
| 
 | |
|     .title {
 | |
|       font-weight: bold;
 | |
|       font-size: 32rpx;
 | |
|       color: #333333;
 | |
|     }
 | |
| 
 | |
|     .shopList {
 | |
|       .shopItem {
 | |
|         padding: 30rpx 0;
 | |
|         border-bottom: 1rpx solid #DDDDDD;
 | |
|         display: flex;
 | |
|         align-items: center;
 | |
|         column-gap: 20rpx;
 | |
|       }
 | |
| 
 | |
|       .shopImg {
 | |
|         width: 160rpx;
 | |
|         height: 100rpx;
 | |
|         border-radius: 8rpx 8rpx 8rpx 8rpx;
 | |
|         background-color: #999;
 | |
|       }
 | |
| 
 | |
|       .shopInfo {
 | |
|         flex: 1;
 | |
|         width: 0;
 | |
|       }
 | |
| 
 | |
|       .shopTitle {
 | |
|         font-weight: 500;
 | |
|         font-size: 28rpx;
 | |
|         color: #333333;
 | |
|         margin-bottom: 20rpx;
 | |
|       }
 | |
| 
 | |
|       .shopDetail {
 | |
|         display: flex;
 | |
|         align-items: center;
 | |
|         font-size: 24rpx;
 | |
|         color: #666666;
 | |
|         column-gap: 10rpx;
 | |
|       }
 | |
| 
 | |
|       .shopAddress {
 | |
|         flex: 1;
 | |
|         width: 0;
 | |
|         white-space: nowrap;
 | |
|         overflow: hidden;
 | |
|         text-overflow: ellipsis;
 | |
|       }
 | |
| 
 | |
|       .line {
 | |
|         width: 2rpx;
 | |
|         height: 24rpx;
 | |
|         background-color: #858BA0;
 | |
|       }
 | |
| 
 | |
|       .shopDistance {
 | |
|         flex-shrink: 0;
 | |
|       }
 | |
|     }
 | |
|   }
 | |
| 
 | |
|   .orderItem {
 | |
|     background: #FFFFFF;
 | |
|     border-radius: 8rpx 8rpx 8rpx 8rpx;
 | |
|     padding: 0 30rpx 30rpx;
 | |
|     margin-bottom: 20rpx;
 | |
| 
 | |
|     .order-top {
 | |
|       padding: 30rpx 0;
 | |
|       display: flex;
 | |
|       align-items: center;
 | |
|       column-gap: 10rpx;
 | |
|       border-bottom: 1rpx solid #DDDDDD;
 | |
| 
 | |
|       .order-top-left {
 | |
|         flex: 1;
 | |
|         width: 0;
 | |
|         display: flex;
 | |
|         flex-direction: column;
 | |
|         row-gap: 16rpx;
 | |
| 
 | |
|         .order-top-name {
 | |
|           font-weight: bold;
 | |
|           font-size: 32rpx;
 | |
|           color: #333333;
 | |
|         }
 | |
| 
 | |
|         .order-top-date {
 | |
|           font-size: 24rpx;
 | |
|           color: #858BA0;
 | |
|         }
 | |
|       }
 | |
| 
 | |
|       .order-status {
 | |
|         font-size: 24rpx;
 | |
|         color: #E8A321;
 | |
|       }
 | |
|     }
 | |
| 
 | |
|     .order-content {
 | |
|       font-size: 28rpx;
 | |
|       color: #858BA0;
 | |
| 
 | |
| 
 | |
|       & > view {
 | |
|         margin-top: 30rpx;
 | |
|       }
 | |
| 
 | |
|       .todoListBox {
 | |
| 
 | |
|       }
 | |
|     }
 | |
| 
 | |
|     .order-footer {
 | |
|       display: flex;
 | |
|       flex-wrap: wrap;
 | |
|       align-items: center;
 | |
|       justify-content: flex-end;
 | |
|       column-gap: 30rpx;
 | |
|       padding: 30rpx 0 0;
 | |
| 
 | |
|       .order-btn {
 | |
|         width: 172rpx;
 | |
|         height: 60rpx;
 | |
|         border-radius: 30rpx 30rpx 30rpx 30rpx;
 | |
| 
 | |
|         display: flex;
 | |
|         align-items: center;
 | |
|         justify-content: center;
 | |
|         font-size: 28rpx;
 | |
|         border: 2rpx solid #0174F6;
 | |
|         color: #0174F6;
 | |
| 
 | |
|         &.no {
 | |
|           color: #333;
 | |
|           border: 2rpx solid #858BA0;
 | |
|         }
 | |
| 
 | |
|         &.yes {
 | |
|           background: #0174F6;
 | |
|           border-radius: 30rpx 30rpx 30rpx 30rpx;
 | |
|           color: #FFFFFF;
 | |
|         }
 | |
|       }
 | |
|     }
 | |
| 
 | |
|     .order-remark {
 | |
|       margin-top: 30rpx;
 | |
|       background: #FFEFEF;
 | |
|       border-radius: 4rpx 4rpx 4rpx 4rpx;
 | |
|       font-size: 28rpx;
 | |
|       color: #F92C2C;
 | |
|       padding: 20rpx;
 | |
|     }
 | |
|   }
 | |
| }
 | |
| </style>
 | 
