productPricing.vue 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
  1. <template>
  2. <view class="productPricing-content">
  3. <view class="checkbox-price">
  4. <u-checkbox-group placement="row">
  5. <u-checkbox v-model="item.checked" activeColor="rgb(4, 133, 246)" v-for="(item,index) in priceList" :key="index" :name="item.val">{{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.productMainPic&&item.productMainPic.imageUrl?item.productMainPic.imageUrl:`../../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. 总款数:<text>{{toThousands(item.stockQty|| 0)}}</text>
  24. </view>
  25. <view class="font_13">
  26. 车主价:¥<text>{{toThousands(item.carOwnersPrice|| 0,2)}} </text>
  27. </view>
  28. </view>
  29. </view>
  30. </view>
  31. <view class="price-all flex">
  32. <view class="price-item" v-if="priceList[0].checked">
  33. <text>{{toThousands(item.offerCost|| 0,2)}} </text>
  34. <view>成本价</view>
  35. </view>
  36. <view class="price-item" v-if="priceList[1].checked">
  37. <text>{{toThousands(item.cityPrice|| 0,2)}} </text>
  38. <view>市级价</view>
  39. </view>
  40. <view class="price-item" v-if="priceList[2].checked">
  41. <text>{{toThousands(item.specialPrice|| 0,2)}} </text>
  42. <view>特约价</view>
  43. </view>
  44. <view class="price-item" v-if="priceList[3].checked">
  45. <text>{{toThousands(item.terminalPrice|| 0,2)}} </text>
  46. <view>终端会员价</view>
  47. </view>
  48. </view>
  49. </view>
  50. <u-empty v-if="listData.length == 0 &&status!='loading'" :text="noDataText" mode="list" ></u-empty>
  51. <view style="padding-bottom: 20upx;">
  52. <u-loadmore v-if="totalNum>listData.length || status=='loading'" :status="status" />
  53. </view>
  54. </view>
  55. </scroll-view>
  56. <!-- 搜索弹窗 -->
  57. <search :showModal="showModal" @refresh="refreshList" @close="showModal=false"/>
  58. </view>
  59. </template>
  60. <script>
  61. import { toThousands } from '@/libs/tools'
  62. import { dealerProductList } from '@/api/sales'
  63. import search from './search.vue'
  64. export default{
  65. components:{search},
  66. data(){
  67. return{
  68. toThousands,
  69. listData:[],
  70. totalNum:0,
  71. priceList:[
  72. { name: '成本价', checked: false, val: 'offerCost' },
  73. { name: '市级价', checked: false, val: 'cityPrice' },
  74. { name: '特约价', checked: false, val: 'specialPrice' },
  75. { name: '终端会员价', checked: false, val: 'terminalPrice' },
  76. ],
  77. pageNo:1,
  78. pageSize:15,
  79. noDataText: '暂无数据',
  80. theme: '',
  81. status: 'loadmore',
  82. showModal:false,
  83. params:{}
  84. }
  85. },
  86. onNavigationBarButtonTap(e){
  87. this.showModal=true
  88. },
  89. onLoad(option) {
  90. this.theme = getApp().globalData.theme
  91. this.getList()
  92. },
  93. methods:{
  94. toPage(url){
  95. uni.switchTab({
  96. url:url
  97. })
  98. },
  99. // 刷新列表
  100. refreshList(val){
  101. this.params =val ? val : {},
  102. this.$nextTick(function(){
  103. this.getList(1)
  104. })
  105. },
  106. // 列表
  107. getList(pageNo){
  108. const _this = this
  109. if (pageNo) {
  110. this.pageNo = pageNo
  111. }
  112. let params = Object.assign(this.params, { pageNo: this.pageNo, pageSize: this.pageSize })
  113. this.status = "loading"
  114. dealerProductList(params).then(res => {
  115. if (res.status == 200) {
  116. if(this.pageNo>1){
  117. this.listData = this.listData.concat(res.data.list || [])
  118. }else{
  119. this.listData = res.data.list || []
  120. }
  121. this.totalNum = res.data.count || 0
  122. } else {
  123. this.listData = []
  124. this.totalNum = 0
  125. this.noDataText = res.message
  126. }
  127. this.status = "loadmore"
  128. })
  129. },
  130. // scroll-view到底部加载更多
  131. onreachBottom() {
  132. if(this.listData.length < this.totalNum){
  133. this.pageNo += 1
  134. this.getList()
  135. }
  136. },
  137. }
  138. }
  139. </script>
  140. <style lang="scss">
  141. .productPricing-content{
  142. width:100%;
  143. height: 100vh;
  144. .checkbox-price{
  145. background-color: #fff;
  146. display: flex;
  147. justify-content: space-around;
  148. padding: 20rpx 0;
  149. margin-bottom: 15rpx;
  150. color: #191919;
  151. }
  152. .product-list{
  153. height: calc(100vh - 94upx);
  154. .st-detailList-main{
  155. .st-detailList-main-item{
  156. background: #ffffff;
  157. padding: 20upx;
  158. margin-bottom: 25upx;
  159. border-radius: 25upx;
  160. box-shadow: 1px 1px 3px #EEEEEE;
  161. .st-detailList-tit{
  162. padding-bottom: 20upx;
  163. border-bottom: 1px solid #e4e7ed;
  164. white-space: nowrap;
  165. overflow: hidden;
  166. text-overflow: ellipsis;
  167. .u-line{
  168. display: inline-block;
  169. width: 6upx;
  170. height: 40upx;
  171. background-color: red;
  172. vertical-align: bottom;
  173. margin: 0 20upx 0 10upx;
  174. }
  175. }
  176. .st-detailList-item-con{
  177. padding: 20upx;
  178. font-size: 26upx;
  179. .pimgs{
  180. margin-right: 16upx;
  181. }
  182. .font_13{
  183. font-size: 26upx;
  184. }
  185. .padding_3{
  186. padding: 6upx 0;
  187. }
  188. }
  189. .price-all{
  190. border-top: 1px solid #e4e7ed;
  191. padding: 20upx 20upx 0;
  192. .price-item{
  193. width: 25%;
  194. border-right: 1px solid #e4e7ed;
  195. text-align: center;
  196. >view{
  197. color:#999;
  198. }
  199. }
  200. .price-item:last-child{
  201. border-right: none;
  202. }
  203. }
  204. }
  205. }
  206. }
  207. }
  208. </style>