productPricing.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
  1. <template>
  2. <view class="productPricing-content">
  3. <view class="checkbox-price">
  4. <u-checkbox-group placement="row" @change="checkboxChange">
  5. <u-checkbox v-model="item.checked" activeColor="rgb(4, 133, 246)" v-for="(item,index) in priceList" :key="index" :name="item.name" :label="item.name">{{item.name}}</u-checkbox>
  6. </u-checkbox-group>
  7. </view>
  8. <scroll-view class="product-list" scroll-y @scrolltolower="onreachBottom">
  9. <view class="st-detailList-main">
  10. <view class="st-detailList-main-item" v-for="(item, index) in listData" :key="item.id" @click="getDetail(item)">
  11. <view class="st-detailList-tit">
  12. <view class="u-line" :style="{backgroundColor: $config('primaryColor')}"></view>{{item.name}}
  13. </view>
  14. <view class="st-detailList-item-con flex align_center">
  15. <view class="pimgs">
  16. <u-image :src="item.product&&item.product.productMsg?item.product.productMsg:`../../static/${theme}/def_img@2x.png`" width="128" height="128" border-radius="10"></u-image>
  17. </view>
  18. <view class="flex_1">
  19. <view>产品编码:{{item.code}}</view>
  20. <view class="padding_3">原厂编码:{{item.origCode}}</view>
  21. <view class="flex align_center justify_between">
  22. <view class="font_13">
  23. 库存数量:
  24. <u-count-to :end-val="item.stockQty ? item.stockQty : 0" separator="," font-size="26"></u-count-to>个
  25. </view>
  26. <view class="font_13">
  27. 车主价:
  28. ¥<u-count-to :end-val="item.carOwnersPrice ? item.carOwnersPrice : 0" separator="," font-size="26" :decimals="2"></u-count-to>
  29. </view>
  30. </view>
  31. </view>
  32. </view>
  33. <view class="price-all flex justify_between">
  34. <view class="price-item">
  35. <u-count-to :end-val="item.offerCost ? item.offerCost : 0" separator="," font-size="26" :decimals="2"></u-count-to>
  36. <view>成本价</view>
  37. </view>
  38. <view class="price-item">
  39. <u-count-to :end-val="item.offerCost ? item.offerCost : 0" separator="," font-size="26" :decimals="2"></u-count-to>
  40. <view>成本价</view>
  41. </view>
  42. <view class="price-item">
  43. <u-count-to :end-val="item.offerCost ? item.offerCost : 0" separator="," font-size="26" :decimals="2"></u-count-to>
  44. <view>成本价</view>
  45. </view>
  46. <view class="price-item">
  47. <u-count-to :end-val="item.offerCost ? item.offerCost : 0" separator="," font-size="26" :decimals="2"></u-count-to>
  48. <view>成本价</view>
  49. </view>
  50. </view>
  51. </view>
  52. <view v-if="listData && listData.length == 0">
  53. <u-empty :text="noDataText" mode="list" :img-width="200" :margin-top="30"></u-empty>
  54. </view>
  55. </view>
  56. </scroll-view>
  57. </view>
  58. </template>
  59. <script>
  60. import { dealerProductList } from '@/api/sales'
  61. export default{
  62. data(){
  63. return{
  64. listData:[],
  65. totalNum:0,
  66. priceList:[{name:'成本价',checked:false},{name:'市级价',checked:false},{name:'特约价',checked:false},{name:'市级终端价',checked:false}],
  67. pageNo:1,
  68. pageSize:10,
  69. noDataText: '暂无数据',
  70. theme: ''
  71. }
  72. },
  73. onLoad() {
  74. this.theme = getApp().globalData.theme
  75. this.getList()
  76. },
  77. methods:{
  78. // 价格显示
  79. checkboxChange(e){
  80. console.log(e,'val ,change')
  81. // if(val&&val.length>0){
  82. // const a= val.find(item=>{item=='成本价'})
  83. // }
  84. },
  85. // 列表
  86. getList(pageNo){
  87. const _this = this
  88. if (pageNo) {
  89. this.pageNo = pageNo
  90. }
  91. let params = { pageNo: this.pageNo, pageSize: this.pageSize }
  92. dealerProductList(params).then(res => {
  93. if (res.status == 200) {
  94. if(this.pageNo>1){
  95. this.listData = this.listData.concat(res.data.list || [])
  96. }else{
  97. this.listData = res.data.list || []
  98. }
  99. this.totalNum = res.data.count || 0
  100. } else {
  101. this.listData = []
  102. this.totalNum = 0
  103. this.noDataText = res.message
  104. }
  105. })
  106. },
  107. // scroll-view到底部加载更多
  108. onreachBottom() {
  109. if(this.listData.length < this.totalNum){
  110. this.pageNo += 1
  111. this.getList()
  112. }
  113. },
  114. }
  115. }
  116. </script>
  117. <style lang="scss">
  118. .productPricing-content{
  119. width:100%;
  120. height: 100vh;
  121. .checkbox-price{
  122. background-color: #fff;
  123. display: flex;
  124. justify-content: space-around;
  125. padding: 20rpx 0;
  126. margin-bottom: 15rpx;
  127. color: #191919;
  128. }
  129. .product-list{
  130. height: calc(100vh - 94upx);
  131. .st-detailList-main{
  132. .st-detailList-main-item{
  133. background: #ffffff;
  134. padding: 20upx;
  135. margin-bottom: 25upx;
  136. border-radius: 25upx;
  137. box-shadow: 1px 1px 3px #EEEEEE;
  138. .st-detailList-tit{
  139. padding-bottom: 20upx;
  140. border-bottom: 1px solid #e4e7ed;
  141. white-space: nowrap;
  142. overflow: hidden;
  143. text-overflow: ellipsis;
  144. .u-line{
  145. display: inline-block;
  146. width: 6upx;
  147. height: 40upx;
  148. background-color: red;
  149. vertical-align: bottom;
  150. margin: 0 20upx 0 10upx;
  151. }
  152. }
  153. .st-detailList-item-con{
  154. padding: 20upx;
  155. font-size: 26upx;
  156. .pimgs{
  157. margin-right: 16upx;
  158. }
  159. .font_13{
  160. font-size: 26upx;
  161. }
  162. .padding_3{
  163. padding: 6upx 0;
  164. }
  165. }
  166. .price-all{
  167. border-top: 1px solid #e4e7ed;
  168. padding: 20upx 20upx 0;
  169. .price-item{
  170. width: 25%;
  171. border-right: 1px solid #e4e7ed;
  172. text-align: center;
  173. >view{
  174. color:#999;
  175. }
  176. }
  177. .price-item:last-child{
  178. border-right: none;
  179. }
  180. }
  181. }
  182. }
  183. }
  184. }
  185. </style>