orderDetail.vue 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221
  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><text>产品名称:</text>{{detail.productName}}</view>
  9. <view style="margin-top: 0.2rem;"><text>产品编码:</text>{{detail.productCode}}</view>
  10. </view>
  11. <view v-if="detail.productMsg" class="uuid-img" @click="viewPic(detail.productMsg)">
  12. <image :src="detail.productMsg"></image>
  13. </view>
  14. </view>
  15. <view class="uuid-info" style="width: 100%;">
  16. <view class="uuid" style="margin-top: 0.2rem;"><text>唯一码:</text>{{detail.traceCode}}</view>
  17. <view class="uuid"><view style="display: inline-block;color: #000;" @click.stop="showTip">质保时间<u-icon size="30" color="#ff8100" name="question-circle-fill"></u-icon></view>{{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. showTip(){
  95. uni.showModal({
  96. title: "提示",
  97. content: "使用超过3年或者行驶超过5万公里则不在质保期内。",
  98. showCancel: false,
  99. confirmText: "知道了"
  100. })
  101. },
  102. getDetail(){
  103. uni.showLoading({
  104. mask:true,
  105. title: "正在查询..."
  106. })
  107. getWarrantyDetail({id: this.id}).then(res => {
  108. this.detail = res.data
  109. uni.hideLoading()
  110. })
  111. },
  112. shareCode(){
  113. sharePic()
  114. }
  115. }
  116. }
  117. </script>
  118. <style lang="less">
  119. .pages{
  120. height: 100vh;
  121. background: #f8f8f8;
  122. padding-bottom: 7rem;
  123. overflow: auto;
  124. .uuid-list{
  125. background: #fff;
  126. text-indent: 0;
  127. line-height: normal;
  128. font-size: 28rpx;
  129. > view{
  130. justify-content: space-between;
  131. border-bottom: 1px solid #eee;
  132. padding: 0.6rem 1rem;
  133. position: relative;
  134. }
  135. .state{
  136. background-repeat: no-repeat;
  137. background-size: 100%;
  138. background-position: center center;
  139. position: absolute;
  140. width: 4.5rem;
  141. height: 4.5rem;
  142. z-index: 1000;
  143. bottom: 0.5rem;
  144. right: 1rem;
  145. }
  146. .RUN{
  147. background-image: url(/pagesA/static/inhand.png);
  148. }
  149. .END{
  150. background-image: url(/pagesA/static/outof.png);
  151. }
  152. color: #666;
  153. .uuid-info{
  154. flex-grow: 1;
  155. line-height: 1.5rem;
  156. width: 50%;
  157. > view{
  158. color: #666;
  159. > text{
  160. color: #000;
  161. width: 70px;
  162. float: left;
  163. }
  164. }
  165. }
  166. .uuid-img{
  167. width: 6rem;
  168. height: 6rem;
  169. border: 1px solid #eee;
  170. overflow: hidden;
  171. display: flex;
  172. align-items: center;
  173. margin-left: 0.5rem;
  174. image {
  175. max-width: 100%;
  176. max-height: 100%;
  177. background: #eaeaea;
  178. }
  179. }
  180. }
  181. .buttons{
  182. padding: 1rem 2rem 2rem;
  183. position: fixed;
  184. width: 100%;
  185. bottom: 0;
  186. left: 0;
  187. background: #fff;
  188. z-index: 10000;
  189. border-top: 1px solid #eee;
  190. justify-content: space-around;
  191. /deep/ .u-btn{
  192. width: 15rem;
  193. }
  194. }
  195. }
  196. .forms{
  197. background: #fff;
  198. margin-top: 0.5rem;
  199. .forms-tits{
  200. font-weight: bold;
  201. color: #333;
  202. }
  203. > view{
  204. border-bottom: 1px solid #eee;
  205. padding: 0.6rem 1rem;
  206. }
  207. .labes{
  208. width: 6rem;
  209. padding-right: 0.6rem;
  210. text{
  211. color: red;
  212. margin-right: 5px;
  213. }
  214. }
  215. .inputs{
  216. flex-grow: 1;
  217. }
  218. }
  219. </style>