orderDetail.vue 4.6 KB

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