backlogDetail.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
  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 class="step-content">
  58. <u-steps :list="numList" direction ="column" :current="0"></u-steps>
  59. </view>
  60. <view class="footer">
  61. <u-button v-if="infoData.status=='待整改'" type="primary">整改完成</u-button>
  62. <view v-else-if="infoData.status=='待审核'" class="check-pending">
  63. <u-button class="act-btn" type="error">整改不通过</u-button>
  64. <u-button class="act-btn" type="success">整改通过</u-button>
  65. </view>
  66. <view v-else class="comment-input">
  67. <input type="text" v-model="comment" @confirm="sendComment" placeholder="请输入评论..."/>
  68. <view>整改状态:{{infoData.status}}</view>
  69. </view>
  70. </view>
  71. </view>
  72. </template>
  73. <script>
  74. import { getBackLogDetail } from '@/api/backLog.js'
  75. export default {
  76. components: {
  77. },
  78. data() {
  79. return {
  80. infoData:{}, // 详情数据
  81. numList: [
  82. {
  83. name: '2020-08-09 \xa0\xa0\xa0\xa0\审核问题 \xa0\xa0\xa0\xa0\审核通过',
  84. }, {
  85. name: '2020-08-09 审核问题 审核不通过'
  86. }, {
  87. name: '2020-08-09 \xa0\xa0\xa0\xa0\创建问题 \xa0\xa0\xa0\xa0\ 抄送 \xa0\xa0\xa0\xa0\所有人'
  88. },
  89. ],
  90. comment: '' // 评论
  91. }
  92. },
  93. onLoad(option) {
  94. console.log(option.id)
  95. this.getData(option.id)
  96. },
  97. methods: {
  98. // 获取详情数据
  99. getData (id) {
  100. getBackLogDetail({id:id}).then(res=>{
  101. if(res.status==200){
  102. this.infoData = res.data
  103. } else {
  104. this.toashMsg(res.message)
  105. this.infoData = {}
  106. }
  107. })
  108. },
  109. sendComment (v) {
  110. }
  111. }
  112. }
  113. </script>
  114. <style lang="scss" scoped>
  115. .back-content {
  116. background-color: #eee;
  117. height: 100%;
  118. display: flex;
  119. flex-direction: column;
  120. // 轮播图
  121. .top-ad-swiper{
  122. height: 340upx;
  123. }
  124. .swiper-item-imgse{
  125. width: 750upx;
  126. height: 340upx;
  127. }
  128. // 详情内容
  129. .back-text{
  130. background: #ffffff;
  131. padding: 10upx 20upx;
  132. margin: 20upx 0;
  133. border-radius: 6upx;
  134. box-shadow: 1px 1px 3px #EEEEEE;
  135. .text-item{
  136. display: flex;
  137. align-items: center;
  138. padding: 10upx 10upx;
  139. font-size: 28upx;
  140. justify-content: space-between;
  141. .margin-left{
  142. margin-left: 30upx;
  143. }
  144. .time{
  145. color: #888;
  146. font-size: 26upx;
  147. margin-left: 10upx;
  148. }
  149. > view{
  150. &:first-child{
  151. flex: 1;
  152. }
  153. }
  154. }
  155. }
  156. // 步骤条
  157. .step-content {
  158. padding: 0 20upx;
  159. background-color: #fff;
  160. flex: 1;
  161. overflow-y: scroll;
  162. }
  163. // 底部按钮
  164. .footer {
  165. background-color: #fff;
  166. margin-top: 20upx;
  167. .check-pending{
  168. display: flex;
  169. .act-btn {
  170. width: 50%;
  171. }
  172. }
  173. .comment-input{
  174. width: 100%;
  175. padding: 20upx;
  176. input{
  177. background-color: #f4f4f4;
  178. padding: 20upx;
  179. border-radius: 10upx;
  180. }
  181. view{
  182. margin-top: 20upx;
  183. }
  184. }
  185. }
  186. }
  187. </style>