backlogDetail.vue 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. <template>
  2. <view class="back-content">
  3. <!-- 轮播图 -->
  4. <swiper class="top-ad-swiper" :indicator-dots="false" :autoplay="true" :interval="5000" :duration="600" :circular="true">
  5. <swiper-item v-if="infoData.backlogPhotoList && infoData.backlogPhotoList.length" v-for="(item,index) in infoData.backlogPhotoList" :key="index">
  6. <div class="swiper-item uni-bg-red">
  7. <!-- <image class="swiper-item-imgse" :fade-show='true' :src="item.photo"></image> -->
  8. <u-image mode="scaleToFill" width="750upx" height="400upx" :src="item.photo"></u-image>
  9. </div>
  10. </swiper-item>
  11. <u-image v-else mode="scaleToFill" width="750upx" height="400upx" src="/static/noPic.jpg"></u-image>
  12. </swiper>
  13. <view class="back-text">
  14. <!-- 门店 -->
  15. <view class="text-item">
  16. {{infoData.storeName}}
  17. </view>
  18. <!-- 处理人 -->
  19. <view class="text-item">
  20. <view>
  21. <text>处理人</text>
  22. <text class="margin-left ellipsis-one">张三丰</text>
  23. </view>
  24. <view class="time ">
  25. {{infoData.effectiveEndTime}} 到期
  26. </view>
  27. </view>
  28. <!-- 创建人 -->
  29. <view class="text-item">
  30. <view>
  31. <text>创建人</text>
  32. <text class="margin-left ellipsis-one">张三丰</text>
  33. </view>
  34. <view class="time">
  35. {{infoData.createTime}} 创建
  36. </view>
  37. </view>
  38. <!-- 指标 -->
  39. <view class="text-item">
  40. <view>
  41. 考评指标
  42. </view>
  43. <view class="margin-left">
  44. {{infoData.clsName}}
  45. </view>
  46. </view>
  47. <!-- 描述 -->
  48. <view class="text-item">
  49. <view>
  50. 描述
  51. </view>
  52. <view class="margin-left">
  53. {{infoData.problemDesc}}
  54. </view>
  55. </view>
  56. </view>
  57. </view>
  58. </template>
  59. <script>
  60. import { getBackLogDetail } from '@/api/backLog.js'
  61. export default {
  62. components: {
  63. },
  64. data() {
  65. return {
  66. infoData:{}, // 详情数据
  67. }
  68. },
  69. onLoad(option) {
  70. console.log(option.id)
  71. this.getData(option.id)
  72. },
  73. methods: {
  74. // 获取详情数据
  75. getData (id) {
  76. getBackLogDetail({id:id}).then(res=>{
  77. if(res.status==200){
  78. this.infoData = res.data
  79. } else {
  80. this.toashMsg(res.message)
  81. this.infoData = {}
  82. }
  83. })
  84. }
  85. }
  86. }
  87. </script>
  88. <style lang="scss" scoped>
  89. .back-content {
  90. .top-ad-swiper{
  91. height: 340upx;
  92. }
  93. .swiper-item-imgse{
  94. width: 750upx;
  95. height: 340upx;
  96. }
  97. .back-text{
  98. background: #ffffff;
  99. padding: 10upx 20upx;
  100. margin: 20upx;
  101. border-radius: 6upx;
  102. box-shadow: 1px 1px 3px #EEEEEE;
  103. .text-item{
  104. display: flex;
  105. align-items: center;
  106. padding: 20upx 10upx;
  107. font-size: 28upx;
  108. justify-content: space-between;
  109. .margin-left{
  110. margin-left: 30upx;
  111. }
  112. .time{
  113. color: #888;
  114. font-size: 26upx;
  115. margin-left: 10upx;
  116. }
  117. > view{
  118. &:first-child{
  119. flex: 1;
  120. }
  121. }
  122. }
  123. }
  124. }
  125. </style>