orderDetail.vue 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
  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="countData flex align_center" v-if="countDetail">
  38. <view>总款数:<text>{{countDetail.productCategory}}</text></view>
  39. <view>总数量:<text>{{countDetail.totalQty}}</text></view>
  40. <view>总结算金额:<text>¥{{countDetail.settleAmount}}</text></view>
  41. </view>
  42. <view class="shelfOrderDetail-info">
  43. <view class="list-item-tit flex align_center">
  44. <view class="u-line" :style="{background: $config('primaryColor')}"></view>
  45. <view class="buyer">产品列表</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>¥{{item.settlePrice}}</text><text class="p2">X</text>{{item.totalQty}} {{item.unit}}</view>
  58. <view class="p1">¥{{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. padding-bottom: 50rpx;
  97. .panel-box {
  98. padding: 20upx 20upx;
  99. display: flex;
  100. justify-content: space-between;
  101. .info-con{
  102. margin-left: 20upx;
  103. .padding_7{
  104. padding: 14upx 0 0;
  105. font-size: 28upx;
  106. }
  107. .pcode{
  108. font-weight: normal;
  109. margin-right: 10rpx;
  110. padding: 0 10rpx;
  111. background: rgba(3, 54, 146, 0.15);
  112. border-radius: 30rpx;
  113. color: #033692;
  114. font-size: 24rpx;
  115. }
  116. .prices{
  117. padding-top: 15rpx;
  118. .p1{
  119. color:#ff0000;
  120. }
  121. .p2{
  122. color: #999;
  123. font-size: 20rpx;
  124. margin-right: 10rpx;
  125. margin-left: 30rpx;
  126. }
  127. }
  128. }
  129. border-bottom: 1px solid #eee;
  130. &:last-child{
  131. border: 0;
  132. }
  133. }
  134. .list-item-tit{
  135. padding-bottom: 15upx;
  136. padding-top: 10upx;
  137. border-bottom: 1px solid #e4e7ed;
  138. margin-bottom: 10rpx;
  139. .u-line{
  140. display: inline-block;
  141. width: 6upx;
  142. height: 28upx;
  143. vertical-align: bottom;
  144. margin: 0 10upx;
  145. border-radius: 5upx;
  146. }
  147. .buyer{
  148. flex-grow: 1;
  149. font-size: 28upx;
  150. font-weight: bold;
  151. }
  152. }
  153. .shelfOrderDetail-info{
  154. background-color: #ffffff;
  155. padding: 10upx 20upx 20upx;
  156. border-radius: 20upx;
  157. box-shadow: 3upx 2upx 6upx #eee;
  158. margin: 20upx;
  159. .info-item{
  160. padding: 10upx 0;
  161. .info-name{
  162. color: #666;
  163. padding-right: 30rpx;
  164. width: 160rpx;
  165. text-align: right;
  166. }
  167. > view{
  168. &:last-child{
  169. flex-grow: 1;
  170. width: 80%;
  171. }
  172. }
  173. }
  174. }
  175. .countData{
  176. display: flex;
  177. background: #fff;
  178. flex-wrap: wrap;
  179. font-size: 26rpx;
  180. margin: 0 20rpx;
  181. padding: 10px;
  182. border-radius: 20upx;
  183. box-shadow: 3upx 2upx 6upx #eee;
  184. > view{
  185. width: 100%;
  186. display: flex;
  187. justify-content: space-between;
  188. color: #666;
  189. padding: 2px 0;
  190. text{
  191. color: #333;
  192. }
  193. &:last-child{
  194. text{color: #ff5500;}
  195. }
  196. }
  197. }
  198. }
  199. </style>