promoProduct.vue 5.7 KB

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