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. console.log(opts)
  94. // 查询列表
  95. this.getList()
  96. },
  97. onUnload(){
  98. this.list = null
  99. },
  100. methods: {
  101. goBack() {
  102. uni.navigateBack();
  103. },
  104. toDetail(item){
  105. uni.navigateTo({
  106. url:'/pagesB/shopiing/productDetail?sn='+item.shopProductSn
  107. })
  108. },
  109. // 滚动到底部
  110. reachBottom() {
  111. if(!this.loading && !this.loadEnd){
  112. this.pageNo++
  113. this.getList()
  114. }
  115. },
  116. // 搜索
  117. searchList(event){
  118. this.loadEnd = false
  119. this.loadText = '加载中...'
  120. this.queryWord = event.value
  121. this.list = []
  122. this.pageNo = 1
  123. this.getList()
  124. },
  125. // 列表查询
  126. getList(){
  127. this.loading = true
  128. const dealerSn = this.hasLogin && this.userInfo && this.userInfo.sysUserFlag == '1'&&this.storeShelf ? this.storeShelf.dealerSn : ''
  129. getShopProductList({
  130. pageNo: this.pageNo,
  131. pageSize: this.pageSize,
  132. productCode: this.queryWord,
  133. promoSn: this.promoSn,
  134. status: 1,
  135. dealerSn: dealerSn
  136. }).then(res => {
  137. this.loading = false
  138. if(res.status == 200){
  139. this.total = res.data.count
  140. if(this.total){
  141. const list = res.data.list || []
  142. const ret = []
  143. // 更新已选状态
  144. list.forEach(k => {
  145. const a = k.shopPromoProduct
  146. if(a){
  147. k.promoType = a.promoType
  148. k.resultValue = a.resultValue
  149. k.conditionValue = a.conditionValue
  150. k.discountType = a.discountType
  151. k.promoProductSn = a.promoProductSn
  152. k.promoSn = a.promoSn
  153. k.orginPrice = k.price
  154. // 特价
  155. if(k.promoType=='PROMO_PROD'){
  156. k.price = k.conditionValue
  157. }
  158. }
  159. // 如果筛选或分页后,更新页面列表产品数量
  160. ret.push({
  161. id: k.id,
  162. checked: false,
  163. qty: 0,
  164. price: k.price,
  165. orginPrice: k.orginPrice,
  166. priceStr: Number(k.price).toFixed(2).toString().split('.'),
  167. productCode: k.productCode,
  168. productSn: k.productSn,
  169. productImage: k.productMsg,
  170. productName: k.productName,
  171. productOrigCode: k.productOrigCode,
  172. categorySn: k.categorySn,
  173. hotFlag: k.hotFlag,
  174. productSn: k.productSn,
  175. priceType: k.priceType,
  176. shopProductSn: k.shopProductSn,
  177. status: k.status,
  178. statusDictValue: k.statusDictValue,
  179. dealerScopeFlag: k.dealerScopeFlag,
  180. promoType: k.promoType,
  181. resultValue: k.resultValue,
  182. conditionValue: k.conditionValue,
  183. discountType: k.discountType,
  184. promoProductSn: k.promoProductSn,
  185. promoSn: k.promoSn
  186. })
  187. })
  188. // 追加数据
  189. this.list.push(ret)
  190. // 判断是否最后一页
  191. const maxPages = Math.ceil(this.total / this.pageSize)
  192. if(this.pageNo >= maxPages){
  193. this.loadEnd = true
  194. this.loadText = '没有更多了'
  195. }
  196. }else{
  197. this.loadEnd = false
  198. this.loadText = '暂无产品'
  199. }
  200. }
  201. }).catch(err => {
  202. this.loading = false
  203. })
  204. },
  205. }
  206. }
  207. </script>
  208. <style lang="less">
  209. .scrollPage{
  210. height: 100vh;
  211. display: flex;
  212. flex-direction: column;
  213. .loading-bar{
  214. text-align: center;
  215. padding: 10px 0;
  216. color: #999999;
  217. }
  218. .empty-bar{
  219. display: flex;
  220. flex-direction: column;
  221. align-items: center;
  222. justify-content: center;
  223. padding: 20px 0;
  224. image{
  225. width: 100px;
  226. height: 100px;
  227. }
  228. view{
  229. font-size: 14px;
  230. color: #999999;
  231. margin-top: 10px;
  232. }
  233. }
  234. .scrollPage-body{
  235. height: 100%;
  236. .search-head{
  237. background: #fff;
  238. }
  239. }
  240. }
  241. </style>