shopTourCompleted.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  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.inspectorName}}</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" 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'
  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. return moment.duration(s*1000).hours() + '时' + moment.duration(s*1000).minutes() + '分';
  70. }
  71. },
  72. methods: {
  73. // 查询任务明细
  74. getTaskDetail(){
  75. getTaskDetail({id:this.taskId}).then(res => {
  76. if(res.status == 200){
  77. this.detail = res.data
  78. }
  79. })
  80. },
  81. // 我的巡店记录
  82. goMyShopTour(){
  83. uni.navigateTo({
  84. url: '/pages/myShopTour/myShopTour'
  85. })
  86. },
  87. // 查看明细
  88. goShopTourDetails(){
  89. uni.navigateTo({
  90. url: '/pages/shopTourDetails/shopTourDetails?taskId='+this.taskId
  91. })
  92. }
  93. }
  94. }
  95. </script>
  96. <style lang="scss" scoped>
  97. page{
  98. background-color: #f8f8f8;
  99. height: calc(100vh - 44px);
  100. }
  101. .shopTourCompleted-wrap{
  102. height: 100%;
  103. padding: 20upx 30upx 0;
  104. box-sizing: border-box;
  105. .info-con{
  106. .inspection-info{
  107. background-color: #fff;
  108. padding: 20upx 30upx;
  109. .info-main{
  110. font-size: 28upx;
  111. line-height: 48upx;
  112. padding: 10upx 0;
  113. position: relative;
  114. .info-tit{
  115. display: inline-block;
  116. position: absolute;
  117. left: 0;
  118. top: 10upx;
  119. }
  120. .info-val{
  121. display: inline-block;
  122. padding-left: 150upx;
  123. }
  124. }
  125. }
  126. .inspection-items{
  127. .text-blue{
  128. color: #2979ff;
  129. }
  130. .text-green{
  131. color: #19be6b;
  132. }
  133. .text-red{
  134. color: #fa3534;
  135. }
  136. .text-yellow{
  137. color: #ff9900;
  138. }
  139. .grid-num{
  140. font-weight: bold;
  141. }
  142. .grid-text{
  143. font-size: 26upx;
  144. padding-top: 10upx;
  145. color: #666;
  146. }
  147. }
  148. }
  149. .btn-con{
  150. margin-top: 90upx;
  151. .btn{
  152. width: 60%;
  153. margin-top: 40upx;
  154. }
  155. }
  156. }
  157. </style>