promoProduct.vue 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
  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. @detail="toDetail"
  28. ></productItem>
  29. <!-- loading -->
  30. <view class="loading-bar" v-if="total>0 && (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 { getShopProductList } from '@/api/shop.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:8,
  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. promoSn:'',
  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. storeShelf(){
  80. return this.$store.state.vuex_storeShelf
  81. }
  82. },
  83. onLoad(opts) {
  84. this.title = opts.title||'促销产品列表'
  85. this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
  86. this.screenWidth = uni.getSystemInfoSync().windowWidth
  87. this.screenHeight = uni.getSystemInfoSync().windowHeight
  88. this.safeAreaBottom = uni.getSystemInfoSync().safeAreaInsets.bottom
  89. this.bodyHeight = this.screenHeight - this.statusBarHeight - this.safeAreaBottom - 44
  90. // 清空临时数据
  91. this.$store.state.vuex_tempData = null
  92. this.promoSn = opts.promoSn
  93. // 查询列表
  94. this.getList()
  95. },
  96. onUnload(){
  97. this.list = null
  98. },
  99. methods: {
  100. goBack() {
  101. uni.navigateBack();
  102. },
  103. toDetail(item){
  104. uni.navigateTo({
  105. url:'/pagesB/shopiing/productDetail?sn='+item.shopProductSn
  106. })
  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. const dealerSn = this.hasLogin && this.userInfo && this.userInfo.sysUserFlag == '1'&&this.storeShelf ? this.storeShelf.dealerSn : ''
  128. getShopProductList({
  129. pageNo: this.pageNo,
  130. pageSize: this.pageSize,
  131. productCode: this.queryWord,
  132. promoSn: this.promoSn,
  133. status: 1,
  134. dealerSn: dealerSn
  135. }).then(res => {
  136. this.loading = false
  137. if(res.status == 200){
  138. this.total = res.data.count
  139. if(this.total){
  140. const list = res.data.list || []
  141. const ret = []
  142. // 更新已选状态
  143. list.forEach(k => {
  144. const a = k.shopPromoProduct
  145. if(a){
  146. k.promoType = a.promoType
  147. k.resultValue = a.resultValue
  148. k.conditionValue = a.conditionValue
  149. k.discountType = a.discountType
  150. k.promoProductSn = a.promoProductSn
  151. k.promoSn = a.promoSn
  152. k.orginPrice = k.price
  153. // 特价
  154. if(k.promoType=='PROMO_PROD'){
  155. k.price = k.conditionValue
  156. }
  157. }
  158. // 如果筛选或分页后,更新页面列表产品数量
  159. ret.push({
  160. id: k.id,
  161. checked: false,
  162. qty: 0,
  163. price: k.price,
  164. orginPrice: k.orginPrice,
  165. priceStr: Number(k.price).toFixed(2).toString().split('.'),
  166. productCode: k.productCode,
  167. productSn: k.productSn,
  168. productImage: k.productMsg,
  169. productName: k.productName,
  170. productOrigCode: k.productOrigCode,
  171. categorySn: k.categorySn,
  172. hotFlag: k.hotFlag,
  173. productSn: k.productSn,
  174. priceType: k.priceType,
  175. shopProductSn: k.shopProductSn,
  176. status: k.status,
  177. statusDictValue: k.statusDictValue,
  178. dealerScopeFlag: k.dealerScopeFlag,
  179. promoType: k.promoType,
  180. resultValue: k.resultValue,
  181. conditionValue: k.conditionValue,
  182. discountType: k.discountType,
  183. promoProductSn: k.promoProductSn,
  184. promoSn: k.promoSn
  185. })
  186. })
  187. // 追加数据
  188. this.list.push(ret)
  189. // 判断是否最后一页
  190. const maxPages = Math.ceil(this.total / this.pageSize)
  191. if(this.pageNo >= maxPages){
  192. this.loadEnd = true
  193. this.loadText = '没有更多了'
  194. }
  195. }else{
  196. this.loadEnd = false
  197. this.loadText = '暂无产品'
  198. }
  199. }
  200. }).catch(err => {
  201. this.loading = false
  202. })
  203. },
  204. }
  205. }
  206. </script>
  207. <style lang="less">
  208. .scrollPage{
  209. height: 100vh;
  210. display: flex;
  211. flex-direction: column;
  212. .loading-bar{
  213. text-align: center;
  214. padding: 10px 0;
  215. color: #999999;
  216. }
  217. .empty-bar{
  218. display: flex;
  219. flex-direction: column;
  220. align-items: center;
  221. justify-content: center;
  222. padding: 20px 0;
  223. image{
  224. width: 100px;
  225. height: 100px;
  226. }
  227. view{
  228. font-size: 14px;
  229. color: #999999;
  230. margin-top: 10px;
  231. }
  232. }
  233. .scrollPage-body{
  234. height: 100%;
  235. .search-head{
  236. background: #fff;
  237. }
  238. }
  239. }
  240. </style>