promoProduct.vue 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207
  1. <template>
  2. <view class="scrollPage">
  3. <!-- head -->
  4. <sklineHeader :title="title"></sklineHeader>
  5. <!-- body -->
  6. <scroll-view
  7. class="scrollPage-body"
  8. :style="{height: bodyHeight + 'px'}"
  9. scroll-y="true"
  10. type="custom"
  11. :bounces="false"
  12. @scrolltolower="reachBottom">
  13. <!-- 搜索,吸顶 -->
  14. <sticky-header>
  15. <view class="search-head">
  16. <uni-search-bar radius="100" placeholder="请输入产品名称/轮胎规格" clearButton="auto" cancelButton="none" @confirm="searchList" @clear="searchList" />
  17. </view>
  18. </sticky-header>
  19. <!-- 产品列表 -->
  20. <productItem
  21. v-for="(item,index) in list"
  22. :key="index"
  23. :list="item"
  24. :index="index"
  25. :itemWidth="(screenWidth*0.96-screenWidth*0.02)*0.5"
  26. :gap="screenWidth*0.02"
  27. @chooseProduct="chooseProduct"
  28. ></productItem>
  29. <!-- loading -->
  30. <view class="loading-bar" v-if="list.length && (loading||loadEnd)">{{loadText}}</view>
  31. <view class="empty-bar" v-if="total==0&&!loading">
  32. <image mode="aspectFit" :src="empty.imgUrl"></image>
  33. <view>{{empty.tip}}</view>
  34. </view>
  35. </scroll-view>
  36. </view>
  37. </template>
  38. <script>
  39. import {
  40. mapState,
  41. mapMutations,
  42. } from 'vuex'
  43. import { queryPromoProductByPage } from '@/api/video.js'
  44. import productItem from '@/pagesB/components/productItemSkline.vue'
  45. import sklineHeader from '@/components/skline/sklineHeader.vue'
  46. export default {
  47. components:{
  48. productItem,
  49. sklineHeader
  50. },
  51. data() {
  52. return {
  53. title: '促销产品列表',
  54. pageNo:1,
  55. pageSize:16,
  56. total:0,
  57. list:[],
  58. loading:false,
  59. loadEnd: false,
  60. loadText: '加载中...',
  61. empty: {
  62. tip: '暂无产品',
  63. imgUrl: '/static/nodata.png'
  64. },
  65. queryWord:'',
  66. promoActiveSn:'',
  67. screenWidth: 750,
  68. screenHeight: 0,
  69. statusBarHeight: 44,
  70. safeAreaBottom: 0,
  71. bodyHeight: 0
  72. };
  73. },
  74. computed: {
  75. ...mapState(['hasLogin']),
  76. userInfo(){
  77. return this.$store.state.vuex_userInfo
  78. },
  79. },
  80. onLoad(opts) {
  81. this.title = opts.title||'促销产品列表'
  82. this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
  83. this.screenWidth = uni.getSystemInfoSync().windowWidth
  84. this.screenHeight = uni.getSystemInfoSync().windowHeight
  85. this.safeAreaBottom = uni.getSystemInfoSync().safeAreaInsets.bottom
  86. this.bodyHeight = this.screenHeight - this.statusBarHeight - this.safeAreaBottom - 44
  87. // 清空临时数据
  88. this.$store.state.vuex_tempData = null
  89. this.promoActiveSn = opts.promoActiveSn
  90. // 查询列表
  91. this.getList()
  92. },
  93. onUnload(){
  94. this.list = null
  95. },
  96. methods: {
  97. goBack() {
  98. uni.navigateBack();
  99. },
  100. // 滚动到底部
  101. reachBottom() {
  102. if(!this.loading && !this.loadEnd){
  103. this.pageNo++
  104. this.getList()
  105. }
  106. },
  107. // 搜索
  108. searchList(event){
  109. this.loadEnd = false
  110. this.loadText = '加载中...'
  111. this.queryWord = event.value
  112. this.list = []
  113. this.pageNo = 1
  114. this.getList()
  115. },
  116. // 列表查询
  117. getList(){
  118. this.loading = true
  119. queryPromoProductByPage({
  120. pageNo: this.pageNo,
  121. pageSize: this.pageSize,
  122. queryWord: this.queryWord,
  123. promoActiveSn: this.promoActiveSn
  124. }).then(res => {
  125. this.loading = false
  126. if(res.status == 200){
  127. this.total = res.data.count
  128. if(this.total){
  129. const list = res.data.list || []
  130. const ret = []
  131. // 更新已选状态
  132. list.forEach(k => {
  133. // 如果筛选或分页后,更新页面列表产品数量
  134. ret.push({
  135. id: k.id,
  136. cost: k.cost,
  137. checked: false,
  138. qty: 0,
  139. productCode: k.productCode,
  140. productSn: k.productSn,
  141. productImage: k.productImage,
  142. productName: k.productName,
  143. productOrigCode: k.productOrigCode,
  144. promoActiveSn: k.promoActiveSn,
  145. promoRuleSn: k.promoRuleSn,
  146. promoRuleValue: k.promoRuleValue,
  147. promoRuleType: k.promoRuleType,
  148. })
  149. })
  150. // 追加数据
  151. this.list.push(ret)
  152. // 判断是否最后一页
  153. const maxPages = Math.ceil(this.total / this.pageSize)
  154. if(this.pageNo >= maxPages){
  155. this.loadEnd = true
  156. this.loadText = '没有更多了'
  157. }
  158. }else{
  159. this.loadEnd = false
  160. this.loadText = '暂无产品'
  161. }
  162. }
  163. }).catch(err => {
  164. this.loading = false
  165. })
  166. },
  167. }
  168. }
  169. </script>
  170. <style lang="less">
  171. .scrollPage{
  172. height: 100vh;
  173. display: flex;
  174. flex-direction: column;
  175. .loading-bar{
  176. text-align: center;
  177. padding: 10px 0;
  178. color: #999999;
  179. }
  180. .empty-bar{
  181. display: flex;
  182. flex-direction: column;
  183. align-items: center;
  184. justify-content: center;
  185. padding: 20px 0;
  186. image{
  187. width: 100px;
  188. height: 100px;
  189. }
  190. view{
  191. font-size: 14px;
  192. color: #999999;
  193. margin-top: 10px;
  194. }
  195. }
  196. .scrollPage-body{
  197. height: 100%;
  198. .search-head{
  199. background: #fff;
  200. }
  201. }
  202. }
  203. </style>