shopTourCompleted.vue 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. <template>
  2. <view class="shopTourCompleted-wrap" v-if="detail">
  3. <view class="info-con">
  4. <view class="inspection-info">
  5. <view class="info-main">
  6. <text class="info-tit">门店:</text>
  7. <text class="info-val">{{detail.storeName}}</text>
  8. </view>
  9. <view class="info-main">
  10. <text class="info-tit">巡店人:</text>
  11. <text class="info-val">{{detail.userName}}</text>
  12. </view>
  13. <view class="info-main">
  14. <text class="info-tit">创建时间:</text>
  15. <text class="info-val">{{detail.createDate}}</text>
  16. </view>
  17. <view class="info-main">
  18. <text class="info-tit">完成时间:</text>
  19. <text class="info-val">{{detail.endTime}}</text>
  20. </view>
  21. <view class="info-main">
  22. <text class="info-tit">耗时:</text>
  23. <text class="info-val">{{detail.spendTime|formatTime}}</text>
  24. </view>
  25. </view>
  26. <view class="inspection-items">
  27. <u-grid :col="4" hover-class="none">
  28. <u-grid-item>
  29. <text class="grid-num text-blue">{{detail.totalTargetCount}}</text>
  30. <text class="grid-text">检查项</text>
  31. </u-grid-item>
  32. <u-grid-item>
  33. <text class="grid-num text-green">{{detail.passTargetCount}}</text>
  34. <text class="grid-text">合格</text>
  35. </u-grid-item>
  36. <u-grid-item>
  37. <text class="grid-num text-red">{{detail.notPassTargetCount}}</text>
  38. <text class="grid-text">不合格</text>
  39. </u-grid-item>
  40. <u-grid-item>
  41. <text class="grid-num text-yellow">{{detail.notWorkTargetCount}}</text>
  42. <text class="grid-text">不适用</text>
  43. </u-grid-item>
  44. </u-grid>
  45. </view>
  46. </view>
  47. <view class="btn-con">
  48. <u-button type="primary" :style="{background: $config('buttonColors')}" shape="circle" class="btn" @click="goShopTourDetails">查看明细</u-button>
  49. <u-button shape="circle" class="btn" @click="goMyShopTour">我的巡店记录</u-button>
  50. </view>
  51. </view>
  52. </template>
  53. <script>
  54. import moment from "moment"
  55. import { getTaskDetail } from '@/api/task.js'
  56. export default{
  57. data(){
  58. return{
  59. taskId: '',
  60. detail: null
  61. }
  62. },
  63. onLoad(opts) {
  64. this.taskId = opts.taskId
  65. this.getTaskDetail()
  66. },
  67. filters:{
  68. formatTime(s){
  69. let time = ''
  70. if(moment.duration(s*1000).hours()){
  71. time += moment.duration(s*1000).hours() + '时'
  72. }
  73. if(moment.duration(s*1000).minutes()){
  74. time += moment.duration(s*1000).minutes() + '分'
  75. }
  76. if(moment.duration(s*1000).seconds()){
  77. time += moment.duration(s*1000).seconds() + '秒'
  78. }
  79. return time
  80. }
  81. },
  82. methods: {
  83. // 查询任务明细
  84. getTaskDetail(){
  85. getTaskDetail({id:this.taskId}).then(res => {
  86. if(res.status == 200){
  87. this.detail = res.data
  88. }
  89. })
  90. },
  91. // 我的巡店记录
  92. goMyShopTour(){
  93. uni.navigateTo({
  94. url: '/pages/myShopTour/myShopTour'
  95. })
  96. },
  97. // 查看明细
  98. goShopTourDetails(){
  99. uni.navigateTo({
  100. url: '/pages/shopTourDetails/shopTourDetails?taskId='+this.taskId
  101. })
  102. }
  103. }
  104. }
  105. </script>
  106. <style lang="scss">
  107. page{
  108. background-color: #f8f8f8;
  109. height: calc(100vh - 44px);
  110. }
  111. .shopTourCompleted-wrap{
  112. height: 100%;
  113. padding: 20upx 30upx 0;
  114. box-sizing: border-box;
  115. .info-con{
  116. .inspection-info{
  117. background-color: #fff;
  118. padding: 20upx 30upx;
  119. .info-main{
  120. font-size: 28upx;
  121. line-height: 48upx;
  122. padding: 10upx 0;
  123. position: relative;
  124. .info-tit{
  125. display: inline-block;
  126. position: absolute;
  127. left: 0;
  128. top: 10upx;
  129. }
  130. .info-val{
  131. display: inline-block;
  132. padding-left: 150upx;
  133. }
  134. }
  135. }
  136. .inspection-items{
  137. .text-blue{
  138. color: #2979ff;
  139. }
  140. .text-green{
  141. color: #19be6b;
  142. }
  143. .text-red{
  144. color: #fa3534;
  145. }
  146. .text-yellow{
  147. color: #ff9900;
  148. }
  149. .grid-num{
  150. font-weight: bold;
  151. }
  152. .grid-text{
  153. font-size: 26upx;
  154. padding-top: 10upx;
  155. color: #666;
  156. }
  157. }
  158. }
  159. .btn-con{
  160. margin-top: 90upx;
  161. .btn{
  162. width: 60%;
  163. margin-top: 40upx;
  164. }
  165. }
  166. }
  167. </style>