warrantydetail.vue 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258
  1. <template>
  2. <view class="warrbox" :style="'padding-top:'+nvaHeight+'px;'">
  3. <view class="navbox">
  4. <uni-nav-bar title="报修详情" left-icon="left" @clickLeft="getBackFn" color="#FFFFFF" :background-color="backgroundColor" :border="false" statusBar='true' fixed="true">
  5. </uni-nav-bar>
  6. </view>
  7. <!-- <image :src="mbg" class="navbg"></image> -->
  8. <view class="wymain">
  9. <view class="wytop flexc">
  10. <image :src="typeimg" class="flex0"></image>
  11. <view class="flex1" v-if="repairStatus==1">
  12. <view class="tit">未派工</view>
  13. <view class="txt">请尽快指派人员进行处理</view>
  14. </view>
  15. <view class="flex1" v-if="repairStatus>1&&repairStatus<4">
  16. <view class="tit">已派工</view>
  17. <view class="txt">已指派人员进行处理</view>
  18. </view>
  19. <view class="flex1" v-if="repairStatus==4">
  20. <view class="tit">已完成</view>
  21. <view class="txt">报修订单已完成</view>
  22. </view>
  23. </view>
  24. <view class="wabox peobox" v-if="repairStatus>1">
  25. <image :src="head" class="head"></image>
  26. <view class="flex1">
  27. <view class="peotit mb6">{{datainfo.staffName}}</view>
  28. <view class="peotxt">{{datainfo.staffPhone}}</view>
  29. </view>
  30. <image :src="phone" class="phone" @click="getPhoneFn"></image>
  31. </view>
  32. <view class="wabox">
  33. <view class="chtop flexc">
  34. <view class="line"></view>
  35. <view>报修信息</view>
  36. <view class="flex1"></view>
  37. </view>
  38. <view class="walist">
  39. <view class="tit">{{datainfo.repairTitle}}</view>
  40. <view class="txt">{{datainfo.repairDetails}}</view>
  41. <view class="imgs" v-if="phofile&&phofile.length">
  42. <image :src="baseUrl+ite" class="img" v-for="(ite,idx) in phofile" :key="idx" @click="getPreviewImage(idx,phofile)"></image>
  43. </view>
  44. </view>
  45. </view>
  46. <view class="wabox">
  47. <view class="chtop flexc">
  48. <view class="line"></view>
  49. <view>基础信息</view>
  50. <view class="flex1"></view>
  51. </view>
  52. <!-- <view class="walist watxt"><view class="wtit">小区名称</view><view class="wtxt">{{datainfo.communityName}}</view></view> -->
  53. <view class="walist watxt"><view class="wtit">项目</view><view class="wtxt">{{kaType(datainfo.maintenanceCategory,bxlbList)}}</view></view>
  54. <view class="walist watxt"><view class="wtit">报修门户</view><view class="wtxt">{{datainfo.houseAddress}}</view></view>
  55. <view class="walist watxt"><view class="wtit">报修时间</view><view class="wtxt">{{datainfo.repairTime}}</view></view>
  56. <view class="walist watxt"><view class="wtit">联系方式</view><view class="wtxt">{{datainfo.phoneNumber}}</view></view>
  57. </view>
  58. <!-- <view class="wabox" v-if="finshtype>1">
  59. <view class="chtop flexc">
  60. <view class="line"></view>
  61. <view>上门信息</view>
  62. <view class="flex1"></view>
  63. </view>
  64. <view class="walist watxt"><view class="wtit">上门时间</view><view class="wtxt">2024-11-12 14:54:21</view></view>
  65. <view class="walist watxt flexc"><view class="wtit">上门拍照</view>
  66. <view class="waimgs"><image :src="head" @click="getPreviewImage"></image></view>
  67. </view>
  68. <block v-if="finshtype>2">
  69. <view class="walist watxt"><view class="wtit">结束时间</view><view class="wtxt">2024-11-12 13:27:36</view></view>
  70. <view class="walist watxt"><view class="wtit">结束拍照</view><view class="waimgs"><image :src="head" @click="getPreviewImage"></image></view></view>
  71. </block>
  72. </view> -->
  73. </view>
  74. <!-- <view class="rfbtn" @click="getAssignFn" v-if="finshtype==0">去指派</view>
  75. <view class="rfbtn rfbga" @click="getCheckFn(1)" v-if="finshtype==1">我已上门</view>
  76. <view class="rfbtn rfbga" @click="getCheckFn(2)" v-if="finshtype==2">我已完成</view> -->
  77. <pop-up :type="type" @getClose='getClose' :finshtype='finshtype' @getSure="getSure"></pop-up>
  78. <loading></loading>
  79. </view>
  80. </template>
  81. <script>
  82. import config from '@/config'
  83. const baseUrl = config.baseUrl
  84. import popUp from "@/work/components/popup/popup.vue"
  85. import {repairDet,repairPut,repairAssign} from "@/api/work/service.js"
  86. import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
  87. import {getDictionaryFn} from "@/api/system/user.js"
  88. import {selectDictValue} from "@/utils/common.js"
  89. export default{
  90. components:{popUp},
  91. data(){
  92. return{
  93. // mbg:require('@/work/static/service/bxbg.png'),
  94. typeimg:require('@/work/static/service/type.png'),
  95. head:require('@/work/static/service/head.png'),
  96. phone:require('@/work/static/service/phone.png'),
  97. nvaHeight:44,
  98. backgroundColor: "transparent",
  99. baseUrl:config.baseUrl,
  100. type:'',
  101. finshtype:3,
  102. datainfo:{},
  103. phofile:[],
  104. bxlbList:[],
  105. repairStatus:'',
  106. }
  107. },
  108. onLoad: function(e) {
  109. uni.getSystemInfo({
  110. success: (e) => {
  111. this.nvaHeight = Number(e.statusBarHeight)+44;
  112. }
  113. })
  114. if(e.id){
  115. this.id=e.id;
  116. this.ptype='edit';
  117. this.isdisabled=true;
  118. this.getDetailFn()
  119. }
  120. this.init()
  121. },
  122. onPageScroll(e) {
  123. var scrollTop = Number(e.scrollTop);
  124. if (scrollTop > 0) {
  125. this.backgroundColor = '#0256FD'
  126. } else {
  127. this.backgroundColor = 'transparent'
  128. }
  129. },
  130. methods:{
  131. checkPermi, checkRole,
  132. kaType(data, list) {
  133. return selectDictValue(list, data);
  134. },
  135. init(){
  136. //报修类别
  137. getDictionaryFn('baoxiutype').then(res=>{
  138. if(res.code==200){
  139. this.bxlbList = res.data.map(v => {
  140. return {
  141. dictLabel: v.dictLabel,
  142. dictValue: v.dictValue
  143. }
  144. })
  145. }
  146. })
  147. },
  148. getAssignFn(){
  149. this.type='assign'
  150. },
  151. getCheckFn(){
  152. this.type='assigncheck'
  153. },
  154. getOpenFn(){
  155. },
  156. getBackFn(){
  157. uni.navigateBack({
  158. delta:1
  159. })
  160. },
  161. getClose(){
  162. this.type='';
  163. },
  164. getSure(){
  165. this.type='';
  166. },
  167. getPhoneFn(){
  168. uni.makePhoneCall({
  169. phoneNumber: this.datainfo.staffPhone //仅为示例
  170. });
  171. },
  172. getPreviewImage(idx,arr){
  173. var newArr=[];
  174. arr.forEach(ite=>{
  175. var ds=this.baseUrl+ite
  176. newArr.push(ds)
  177. })
  178. uni.previewImage({
  179. urls: newArr,
  180. current:idx,
  181. success: function(data) {
  182. },
  183. fail: function(err) {
  184. }
  185. });
  186. },
  187. getDetailFn(){
  188. var that=this;
  189. repairDet(this.id).then(res=>{
  190. if(res.code==200){
  191. this.datainfo=res.data;
  192. this.repairStatus=res.data.repairStatus;
  193. if(res.data.repairImages){
  194. this.phofile=res.data.repairImages.split(',')
  195. }
  196. if(res.data.visitPhoto){
  197. this.visitPhoto=res.data.visitPhoto.split(',')
  198. }
  199. if(res.data.completionPhoto){
  200. this.completionPhoto=res.data.completionPhoto.split(',')
  201. }
  202. }
  203. })
  204. },
  205. }
  206. }
  207. </script>
  208. <style>
  209. page{background: #F3F3F0;}
  210. </style>
  211. <style lang="scss" scoped>
  212. .warrbox{min-height: 100vh;background: linear-gradient(180deg, #0256FD 0%,#528AF9 60%, rgba(255,255,255,0) 100%) no-repeat;background-size: 100% 722rpx;}
  213. .rfbga{background: #2ACA8E !important;}
  214. .navbg{width: 100%;height: 722rpx;z-index: 0;}
  215. .wymain{z-index: 2;position: relative;padding: 28rpx 18rpx 110rpx;}
  216. .navbox{position: fixed;left: 0;right: 0;top: 0;z-index: 4; }
  217. .wytop{padding: 0 38rpx;margin-bottom: 40rpx;
  218. image{width: 88rpx;height: 88rpx;margin-right: 22rpx;}
  219. .tit{font-size: 28rpx;color: #FFFFFF;font-weight: bold;margin-bottom: 10rpx;}
  220. .txt{font-size: 24rpx;color: #FFFFFF;font-weight: 500;}
  221. }
  222. .line{width: 14rpx;height: 48rpx;background: #0256FD;border-radius:0 12rpx 12rpx 0;margin-right: 18rpx;}
  223. .wabox{background: #FFFFFF;border-radius: 20rpx;margin-bottom: 24rpx;padding-top:32rpx;padding-bottom: 4rpx;
  224. .walist{padding: 0 36rpx;
  225. .tit{font-weight: bold;font-size: 30rpx;color: #272727;margin-bottom: 18rpx;}
  226. .txt{font-weight: 500;font-size: 26rpx;line-height: 36rpx;color: #666666;margin-bottom: 28rpx;}
  227. .waimgs{display: flex;flex-wrap: wrap;justify-content: flex-end;flex: 1;
  228. image{width: 142rpx;height: 142rpx;border-radius: 20rpx;margin-left: 20rpx;margin-bottom: 10rpx;}
  229. }
  230. }
  231. .watxt{display: flex;margin-bottom: 22rpx;
  232. .wtit{font-weight: 500;font-size: 26rpx;color: #272727;flex: 0 0 auto;margin-right: 12rpx;}
  233. .wtxt{font-weight: 500;font-size: 26rpx;color: #666666;flex: 1;text-align: right;}
  234. }
  235. .imgs{display: flex;flex-wrap: wrap;
  236. .img{width: 142rpx;height: 142rpx;margin: 0 24rpx 24rpx 0;display: block;
  237. &:nth-of-type(4n){margin-right: 0;}
  238. }
  239. }
  240. }
  241. .peobox{padding: 30rpx 36rpx 24rpx;display: flex;align-items: center;
  242. .head{width: 88rpx;height: 88rpx;margin-right: 24rpx;flex: 0 0 auto;}
  243. .peotit{font-weight: bold;font-size: 26rpx;color: #272727;}
  244. .peotxt{font-weight: 500;font-size: 26rpx;color: #AAAAAA;}
  245. .phone{width: 60rpx;height: 60rpx;flex: 0 0 auto;margin-left: 12rpx;}
  246. }
  247. .chtop{margin-bottom: 24rpx;padding-right: 48rpx;
  248. image{width: 14rpx;height: 48rpx;margin-right: 20rpx;}
  249. view{font-weight: bold;font-size: 28rpx;color: #272727;}
  250. .num{font-weight: 500;font-size: 24rpx;color: #AAAAAA;}
  251. }
  252. </style>