detail.vue 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <template>
  2. <view class="detail-page">
  3. <navigation title="报修详情"></navigation>
  4. <view class="list-item">
  5. <view class="item-text">工单编号:{{ detailInfo.num || '-' }}</view>
  6. <view class="item-text">设备名称:{{ detailInfo.equipmentName || '-' }}</view>
  7. <view class="item-text">工单描述:{{ detailInfo.orderMsg || '-' }}</view>
  8. <view class="item-text">提交人:{{ detailInfo.createUserName || '-' }}</view>
  9. <view class="item-text">发生时间:{{ detailInfo.happenTime || '-' }}</view>
  10. <view class="item-text">故障图片:</view>
  11. <image :src="detailInfo.orderImg" class="orderImg"></image>
  12. </view>
  13. </view>
  14. </template>
  15. <script>
  16. export default {
  17. data() {
  18. return {
  19. detailInfo: {},
  20. id: ''
  21. }
  22. },
  23. onLoad(option) {
  24. this.getDetail(option.id)
  25. },
  26. methods: {
  27. getDetail(id) {
  28. this.$api.workOrderDetail(id).then(res => {
  29. this.detailInfo = res.data
  30. }).catch(err => {})
  31. },
  32. }
  33. }
  34. </script>
  35. <style lang="scss" scoped>
  36. .detail-page {
  37. .list-item {
  38. background-color: $uni-bg-color;
  39. padding: 20rpx;
  40. border-radius: 20rpx;
  41. margin-top: 28rpx;
  42. .item-text {
  43. margin-top: 10rpx;
  44. }
  45. .orderImg {
  46. width: 400rpx;
  47. height: 400rpx;
  48. }
  49. }
  50. }
  51. </style>