orderDetail.vue 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  1. <template>
  2. <view class="pages flex flex_column" v-if="detail">
  3. <u-read-more toggle close-text="展开全部">
  4. <view class="uuid-list">
  5. <view>
  6. <view class="flex align_center">
  7. <view class="uuid-info">
  8. <view>产品名称:{{detail.productName}}</view>
  9. <view style="margin-top: 0.2rem;">产品编码:{{detail.productCode}}</view>
  10. </view>
  11. <view v-if="detail.productMsg" class="uuid-img" @click="viewPic(detail.productMsg)">
  12. <image style="width: 100%;height: 80px;background: #eaeaea;" :src="detail.productMsg"></image>
  13. </view>
  14. </view>
  15. <view class="uuid-info">
  16. <view class="uuid">唯一码:{{detail.traceCode}}</view>
  17. <view class="uuid">质保时间:{{detail.warrantyStartDate.split(' ')[0]}}至{{detail.warrantyEndDate.split(' ')[0]}}</view>
  18. </view>
  19. <view class="state" :class="detail.state"></view>
  20. </view>
  21. </view>
  22. </u-read-more>
  23. <view class="forms">
  24. <view class="forms-tits">门店信息</view>
  25. <view class="flex align_center">
  26. <view class="labes">门店名称:</view>
  27. <view class="inputs">{{detail.storeName||'--'}}</view>
  28. </view>
  29. <view class="flex align_center">
  30. <view class="labes">姓名:</view>
  31. <view class="inputs">{{detail.storeManager||'--'}}</view>
  32. </view>
  33. <view class="flex align_center">
  34. <view class="labes">电话:</view>
  35. <view class="inputs">{{detail.storeTele?detail.storeTele+'/':''}}{{detail.storeMobile||"--"}}</view>
  36. </view>
  37. <view class="flex align_center">
  38. <view class="labes">汽配经销商:</view>
  39. <view class="inputs">{{detail.dealerName||'--'}}</view>
  40. </view>
  41. </view>
  42. <view class="forms">
  43. <view class="forms-tits">车辆信息</view>
  44. <view class="flex align_center">
  45. <view class="labes">车辆品牌:</view>
  46. <view class="inputs">{{detail.carBrand||'--'}}</view>
  47. </view>
  48. <view class="flex align_center">
  49. <view class="labes">车型:</view>
  50. <view class="inputs">{{detail.carModel||'--'}}</view>
  51. </view>
  52. <view class="flex align_center">
  53. <view class="labes">里程数:</view>
  54. <view class="inputs">{{detail.mileage}}KM</view>
  55. </view>
  56. <view class="flex align_center">
  57. <view class="labes">车牌号:</view>
  58. <view class="inputs">{{detail.vehicleNumber||'--'}}</view>
  59. </view>
  60. <view class="flex align_center">
  61. <view class="labes">客户姓名:</view>
  62. <view class="inputs">{{detail.customName||'--'}}</view>
  63. </view>
  64. <view class="flex align_center">
  65. <view class="labes">手机号码:</view>
  66. <view class="inputs">{{detail.customMobile||'--'}}</view>
  67. </view>
  68. </view>
  69. <view class="buttons flex align_center">
  70. <u-button type="primary" @click="shareCode">保存二维码分享给客户</u-button>
  71. </view>
  72. </view>
  73. </template>
  74. <script>
  75. import { getWarrantyDetail } from "@/api/trace"
  76. import { sharePic } from "@/libs/tools.js"
  77. export default {
  78. data() {
  79. return {
  80. detail: null,
  81. id: ''
  82. }
  83. },
  84. onLoad(opts) {
  85. this.id = opts.id
  86. this.getDetail()
  87. },
  88. methods: {
  89. viewPic(img){
  90. uni.previewImage({
  91. urls: [img]
  92. })
  93. },
  94. getDetail(){
  95. uni.showLoading({
  96. mask:true,
  97. title: "正在查询..."
  98. })
  99. getWarrantyDetail({id: this.id}).then(res => {
  100. this.detail = res.data
  101. uni.hideLoading()
  102. })
  103. },
  104. shareCode(){
  105. sharePic()
  106. }
  107. }
  108. }
  109. </script>
  110. <style lang="less">
  111. .pages{
  112. height: 100vh;
  113. background: #f8f8f8;
  114. padding-bottom: 7rem;
  115. overflow: auto;
  116. .uuid-list{
  117. background: #fff;
  118. text-indent: 0;
  119. line-height: normal;
  120. font-size: 28rpx;
  121. > view{
  122. justify-content: space-between;
  123. border-bottom: 1px solid #eee;
  124. padding: 0.6rem 1rem;
  125. position: relative;
  126. }
  127. .state{
  128. background-repeat: no-repeat;
  129. background-size: 100%;
  130. background-position: center center;
  131. position: absolute;
  132. width: 4.5rem;
  133. height: 4.5rem;
  134. z-index: 1000;
  135. bottom: 0.5rem;
  136. right: 1rem;
  137. }
  138. .RUN{
  139. background-image: url(/pagesA/static/inhand.png);
  140. }
  141. .END{
  142. background-image: url(/pagesA/static/outof.png);
  143. }
  144. color: #666;
  145. .uuid-info{
  146. flex-grow: 1;
  147. padding-right: 0.5rem;
  148. line-height: 1.5rem;
  149. }
  150. .uuid{
  151. color: #000;
  152. }
  153. .uuid-img{
  154. width: 7rem;
  155. border: 1px solid #eee;
  156. }
  157. }
  158. .buttons{
  159. padding: 1rem 2rem 2rem;
  160. position: fixed;
  161. width: 100%;
  162. bottom: 0;
  163. left: 0;
  164. background: #fff;
  165. z-index: 10000;
  166. border-top: 1px solid #eee;
  167. justify-content: space-around;
  168. /deep/ .u-btn{
  169. width: 15rem;
  170. }
  171. }
  172. }
  173. .forms{
  174. background: #fff;
  175. margin-top: 0.5rem;
  176. .forms-tits{
  177. font-weight: bold;
  178. color: #333;
  179. }
  180. > view{
  181. border-bottom: 1px solid #eee;
  182. padding: 0.6rem 1rem;
  183. }
  184. .labes{
  185. width: 6rem;
  186. padding-right: 0.6rem;
  187. text{
  188. color: red;
  189. margin-right: 5px;
  190. }
  191. }
  192. .inputs{
  193. flex-grow: 1;
  194. }
  195. }
  196. </style>