orderDetail.vue 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. <template>
  2. <view class="shelfOrderDetail-wrap">
  3. <view class="shelfOrderDetail-info">
  4. <view class="list-item-tit flex align_center">
  5. <view class="u-line" :style="{background: $config('primaryColor')}"></view>
  6. <view class="buyer">基础信息</view>
  7. </view>
  8. <view class="info-item flex align_center">
  9. <view class="info-name">订单编号</view>
  10. <view>{{ detailData&&detailData.orderBillNo || '--' }}</view>
  11. </view>
  12. <view class="info-item flex align_center">
  13. <view class="info-name">货架名称</view>
  14. <view>{{ detailData&&detailData.shelfName || '--' }}</view>
  15. </view>
  16. <view class="info-item flex align_center">
  17. <view class="info-name">下单时间</view>
  18. <view>{{ detailData&&detailData.orderDate || '--' }}</view>
  19. </view>
  20. <view class="info-item flex align_center">
  21. <view class="info-name">下单人员</view>
  22. <view>{{ detailData&&detailData.orderPersonName || '--' }}</view>
  23. </view>
  24. <view class="info-item flex align_center">
  25. <view class="info-name">订单状态</view>
  26. <view>{{ detailData&&detailData.billStateDictValue || '--' }}</view>
  27. </view>
  28. <view class="info-item flex align_center" v-if="detailData&&detailData.vin">
  29. <view class="info-name">VIN</view>
  30. <view>{{ detailData&&detailData.vin || '--' }}</view>
  31. </view>
  32. <view class="info-item flex align_center" v-if="detailData&&detailData.vehicleModel">
  33. <view class="info-name">车型</view>
  34. <view>{{ detailData&&detailData.vehicleModel || '--' }}</view>
  35. </view>
  36. </view>
  37. <view class="shelfOrderDetail-info">
  38. <view class="list-item-tit flex align_center">
  39. <view class="u-line" :style="{background: $config('primaryColor')}"></view>
  40. <view class="buyer">产品列表</view>
  41. </view>
  42. <view class="countData flex align_center" v-if="countDetail">
  43. <view>总款数:<text>{{countDetail.productCategory}}</text>;</view>
  44. <view>总数量:<text>{{countDetail.totalQty}}</text>;</view>
  45. <view>总结算金额:<text>¥{{countDetail.settleAmount}}</text>;</view>
  46. </view>
  47. <view
  48. class="panel-box flex justify_between"
  49. v-for="item in detailList" :key="item.id">
  50. <view class="pimgs">
  51. <u-image :src="item.images||`../../static/${$config('themePath')}/def_img@2x.png`" width="120" height="120" border-radius="10"></u-image>
  52. </view>
  53. <view class="info-con flex_1">
  54. <view><text class="pcode">{{item.shelfPlaceCode}}</text>{{item.productCode || '--'}}</view>
  55. <view class="padding_7">{{item.productName || '--'}}</view>
  56. <view class="prices flex align_center justify_between">
  57. <view><text class="p1">¥{{item.settlePrice}}</text><text class="p2">X</text>{{item.totalQty}}{{item.unit}}</view>
  58. <view>¥{{item.settleAmount}}</view>
  59. </view>
  60. </view>
  61. </view>
  62. </view>
  63. </view>
  64. </template>
  65. <script>
  66. import { orderBillQueryPage, orderBillDetailCount } from '@/api/shelf'
  67. export default{
  68. data(){
  69. return {
  70. detailData:null,
  71. detailList: [],
  72. orderBillSn: null,
  73. countDetail: null
  74. }
  75. },
  76. onLoad(opts) {
  77. this.orderBillSn = opts.orderBillSn
  78. this.getDetail()
  79. },
  80. methods: {
  81. getDetail () {
  82. orderBillQueryPage({ pageNo: 1, pageSize: 1, orderBillSn: this.orderBillSn}).then(res => {
  83. this.detailData = res.data.list && res.data.list[0]
  84. this.detailList = this.detailData.orderBillDetailApiEntityList
  85. })
  86. orderBillDetailCount({ orderBillSn: this.orderBillSn}).then(res => {
  87. this.countDetail = res.data || null
  88. })
  89. },
  90. },
  91. }
  92. </script>
  93. <style lang="scss">
  94. .shelfOrderDetail-wrap{
  95. width: 100%;
  96. .panel-box {
  97. padding: 20upx 20upx;
  98. display: flex;
  99. justify-content: space-between;
  100. .info-con{
  101. margin-left: 20upx;
  102. .padding_7{
  103. padding: 14upx 0 0;
  104. font-size: 28upx;
  105. }
  106. .pcode{
  107. font-weight: normal;
  108. margin-right: 10rpx;
  109. padding: 0 10rpx;
  110. background: rgba(3, 54, 146, 0.15);
  111. border-radius: 30rpx;
  112. color: #033692;
  113. font-size: 24rpx;
  114. }
  115. .prices{
  116. padding-top: 15rpx;
  117. .p1{
  118. color:#ff0000;
  119. margin-right: 30rpx;
  120. }
  121. .p2{
  122. color: #999;
  123. font-size: 20rpx;
  124. margin-right: 10rpx;
  125. }
  126. }
  127. }
  128. border-bottom: 1px solid #e4e7ed;
  129. &:last-child{
  130. border: 0;
  131. }
  132. }
  133. .list-item-tit{
  134. padding-bottom: 18upx;
  135. padding-top: 10upx;
  136. border-bottom: 1px solid #e4e7ed;
  137. .u-line{
  138. display: inline-block;
  139. width: 6upx;
  140. height: 28upx;
  141. vertical-align: bottom;
  142. margin: 0 10upx;
  143. border-radius: 5upx;
  144. }
  145. .buyer{
  146. flex-grow: 1;
  147. font-size: 28upx;
  148. font-weight: bold;
  149. }
  150. }
  151. .shelfOrderDetail-info{
  152. background-color: #ffffff;
  153. padding: 10upx 20upx 20upx;
  154. border-radius: 20upx;
  155. box-shadow: 3upx 2upx 6upx #eee;
  156. margin: 20upx;
  157. .info-item{
  158. border-bottom: 1px solid #e4e7ed;
  159. padding: 20upx 0;
  160. .info-name{
  161. color: #999;
  162. padding-right: 20rpx;
  163. width: 150rpx;
  164. }
  165. &:last-child{
  166. border: 0;
  167. }
  168. }
  169. .countData{
  170. background: #fff;
  171. display: flex;
  172. padding: 15upx;
  173. border-radius: 15rpx;
  174. text{
  175. color: #ff5500;
  176. }
  177. font-size: 24rpx;
  178. border-bottom: 1px solid #e4e7ed;
  179. padding: 20upx 0;
  180. }
  181. }
  182. }
  183. </style>