promoProduct.vue 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243
  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: (screenHeight - statusBarHeight - safeAreaBottom - 94) + '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. };
  80. },
  81. computed: {
  82. ...mapState(['hasLogin']),
  83. userInfo(){
  84. return this.$store.state.vuex_userInfo
  85. },
  86. },
  87. onLoad(opts) {
  88. this.title = opts.title||'促销产品列表'
  89. this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
  90. this.screenWidth = uni.getSystemInfoSync().windowWidth
  91. this.screenHeight = uni.getSystemInfoSync().windowHeight
  92. this.safeAreaBottom = uni.getSystemInfoSync().safeAreaInsets.bottom
  93. // 清空临时数据
  94. this.$store.state.vuex_tempData = null
  95. this.promoActiveSn = opts.promoActiveSn
  96. // 查询列表
  97. this.getList()
  98. },
  99. onUnload(){
  100. this.list = null
  101. },
  102. methods: {
  103. goBack() {
  104. uni.navigateBack();
  105. },
  106. // 滚动到底部
  107. reachBottom() {
  108. if(!this.loading && !this.loadEnd){
  109. this.pageNo++
  110. this.getList()
  111. }
  112. },
  113. // 搜索
  114. searchList(event){
  115. this.loadEnd = false
  116. this.loadText = '加载中...'
  117. this.queryWord = event.value
  118. this.list = []
  119. this.pageNo = 1
  120. this.getList()
  121. },
  122. // 列表查询
  123. getList(){
  124. this.loading = true
  125. queryPromoProductByPage({
  126. pageNo: this.pageNo,
  127. pageSize: this.pageSize,
  128. queryWord: this.queryWord,
  129. promoActiveSn: this.promoActiveSn
  130. }).then(res => {
  131. this.loading = false
  132. if(res.status == 200){
  133. this.total = res.data.count
  134. if(this.total){
  135. const list = res.data.list || []
  136. const ret = []
  137. // 更新已选状态
  138. list.forEach(k => {
  139. // 如果筛选或分页后,更新页面列表产品数量
  140. ret.push({
  141. id: k.id,
  142. cost: k.cost,
  143. checked: false,
  144. qty: 0,
  145. productCode: k.productCode,
  146. productSn: k.productSn,
  147. productImage: k.productImage,
  148. productName: k.productName,
  149. productOrigCode: k.productOrigCode,
  150. promoActiveSn: k.promoActiveSn,
  151. promoRuleSn: k.promoRuleSn,
  152. promoRuleValue: k.promoRuleValue,
  153. promoRuleType: k.promoRuleType,
  154. })
  155. })
  156. // 追加数据
  157. this.list.push(ret)
  158. // 判断是否最后一页
  159. const maxPages = Math.ceil(this.total / this.pageSize)
  160. if(this.pageNo >= maxPages){
  161. this.loadEnd = true
  162. this.loadText = '没有更多了'
  163. }
  164. }else{
  165. this.loadEnd = false
  166. this.loadText = '暂无产品'
  167. }
  168. }
  169. }).catch(err => {
  170. this.loading = false
  171. })
  172. },
  173. }
  174. }
  175. </script>
  176. <style lang="less">
  177. .scrollPage{
  178. height: 100vh;
  179. display: flex;
  180. flex-direction: column;
  181. .loading-bar{
  182. text-align: center;
  183. padding: 10px 0;
  184. color: #999999;
  185. }
  186. .empty-bar{
  187. display: flex;
  188. flex-direction: column;
  189. align-items: center;
  190. justify-content: center;
  191. padding: 20px 0;
  192. image{
  193. width: 100px;
  194. height: 100px;
  195. }
  196. view{
  197. font-size: 14px;
  198. color: #999999;
  199. margin-top: 10px;
  200. }
  201. }
  202. .scrollPage-header{
  203. z-index: 1;
  204. .header-title{
  205. display: flex;
  206. align-items: center;
  207. justify-content: space-between;
  208. padding: 0 10px;
  209. height: 44px;
  210. background-color: #FFFFFF;
  211. box-shadow: 0px 1px 0px 0px #E6E6E6;
  212. .header-title{
  213. font-size: 16px;
  214. color: #333333;
  215. max-width: 70%;
  216. }
  217. .header-left{
  218. display: flex;
  219. align-items: center;
  220. text{
  221. font-size: 14px;
  222. color: #333333;
  223. margin-left: 5px;
  224. }
  225. }
  226. .header-right{
  227. width: 50px;
  228. }
  229. }
  230. }
  231. .scrollPage-body{
  232. flex-grow: 1;
  233. height: 100%;
  234. .search-head{
  235. background: #fff;
  236. }
  237. }
  238. }
  239. </style>