123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244 |
- <template>
- <view class="scrollPage">
- <!-- head -->
- <sklineHeader :title="title"></sklineHeader>
- <!-- body -->
- <scroll-view
- class="scrollPage-body"
- :style="{height: bodyHeight + 'px'}"
- scroll-y="true"
- type="custom"
- :bounces="false"
- @scrolltolower="reachBottom">
- <!-- 搜索,吸顶 -->
- <sticky-header>
- <view class="search-head">
- <uni-search-bar radius="100" placeholder="请输入产品名称/轮胎规格" clearButton="auto" cancelButton="none" @confirm="searchList" @clear="searchList" />
- </view>
- </sticky-header>
- <!-- 产品列表 -->
- <productItem
- v-for="(item,index) in list"
- :key="index"
- :list="item"
- :index="index"
- :itemWidth="(screenWidth*0.96-screenWidth*0.02)*0.5"
- :gap="screenWidth*0.02"
- @detail="toDetail"
- ></productItem>
- <!-- loading -->
- <view class="loading-bar" v-if="total>0 && (loading||loadEnd)">{{loadText}}</view>
- <view class="empty-bar" v-if="total==0&&!loading">
- <image mode="aspectFit" :src="empty.imgUrl"></image>
- <view>{{empty.tip}}</view>
- </view>
- </scroll-view>
- </view>
- </template>
- <script>
- import {
- mapState,
- mapMutations,
- } from 'vuex'
- import { getShopProductList } from '@/api/shop.js'
- import productItem from '@/pagesB/components/productItemSkline.vue'
- import sklineHeader from '@/components/skline/sklineHeader.vue'
- export default {
- components:{
- productItem,
- sklineHeader
- },
- data() {
- return {
- title: '促销产品列表',
- pageNo:1,
- pageSize:8,
- total:0,
- list:[],
- loading:false,
- loadEnd: false,
- loadText: '加载中...',
- empty: {
- tip: '暂无产品',
- imgUrl: '/static/nodata.png'
- },
- queryWord:'',
- promoSn:'',
- screenWidth: 750,
- screenHeight: 0,
- statusBarHeight: 44,
- safeAreaBottom: 0,
- bodyHeight: 0
- };
- },
- computed: {
- ...mapState(['hasLogin']),
- userInfo(){
- return this.$store.state.vuex_userInfo
- },
- storeShelf(){
- return this.$store.state.vuex_storeShelf
- }
- },
- onLoad(opts) {
- this.title = opts.title||'促销产品列表'
- this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
- this.screenWidth = uni.getSystemInfoSync().windowWidth
- this.screenHeight = uni.getSystemInfoSync().windowHeight
- this.safeAreaBottom = uni.getSystemInfoSync().safeAreaInsets.bottom
- this.bodyHeight = this.screenHeight - this.statusBarHeight - this.safeAreaBottom - 44
-
- // 清空临时数据
- this.$store.state.vuex_tempData = null
- this.promoSn = opts.promoSn
- console.log(opts)
- // 查询列表
- this.getList()
- },
- onUnload(){
- this.list = null
- },
- methods: {
- goBack() {
- uni.navigateBack();
- },
- toDetail(item){
- uni.navigateTo({
- url:'/pagesB/shopiing/productDetail?sn='+item.shopProductSn
- })
- },
- // 滚动到底部
- reachBottom() {
- if(!this.loading && !this.loadEnd){
- this.pageNo++
- this.getList()
- }
- },
- // 搜索
- searchList(event){
- this.loadEnd = false
- this.loadText = '加载中...'
- this.queryWord = event.value
- this.list = []
- this.pageNo = 1
- this.getList()
- },
- // 列表查询
- getList(){
- this.loading = true
- const dealerSn = this.hasLogin && this.userInfo && this.userInfo.sysUserFlag == '1'&&this.storeShelf ? this.storeShelf.dealerSn : ''
- getShopProductList({
- pageNo: this.pageNo,
- pageSize: this.pageSize,
- productCode: this.queryWord,
- promoSn: this.promoSn,
- status: 1,
- dealerSn: dealerSn
- }).then(res => {
- this.loading = false
- if(res.status == 200){
- this.total = res.data.count
- if(this.total){
- const list = res.data.list || []
- const ret = []
- // 更新已选状态
- list.forEach(k => {
- const a = k.shopPromoProduct
- if(a){
- k.promoType = a.promoType
- k.resultValue = a.resultValue
- k.conditionValue = a.conditionValue
- k.discountType = a.discountType
- k.promoProductSn = a.promoProductSn
- k.promoSn = a.promoSn
- k.orginPrice = k.price
- // 特价
- if(k.promoType=='PROMO_PROD'){
- k.price = k.conditionValue
- }
- }
- // 如果筛选或分页后,更新页面列表产品数量
- ret.push({
- id: k.id,
- checked: false,
- qty: 0,
- price: k.price,
- orginPrice: k.orginPrice,
- priceStr: Number(k.price).toFixed(2).toString().split('.'),
- productCode: k.productCode,
- productSn: k.productSn,
- productImage: k.productMsg,
- productName: k.productName,
- productOrigCode: k.productOrigCode,
- categorySn: k.categorySn,
- hotFlag: k.hotFlag,
- productSn: k.productSn,
- priceType: k.priceType,
- shopProductSn: k.shopProductSn,
- status: k.status,
- statusDictValue: k.statusDictValue,
- dealerScopeFlag: k.dealerScopeFlag,
- promoType: k.promoType,
- resultValue: k.resultValue,
- conditionValue: k.conditionValue,
- discountType: k.discountType,
- promoProductSn: k.promoProductSn,
- promoSn: k.promoSn
- })
- })
- // 追加数据
- this.list.push(ret)
- // 判断是否最后一页
- const maxPages = Math.ceil(this.total / this.pageSize)
- if(this.pageNo >= maxPages){
- this.loadEnd = true
- this.loadText = '没有更多了'
- }
- }else{
- this.loadEnd = false
- this.loadText = '暂无产品'
- }
- }
- }).catch(err => {
- this.loading = false
- })
- },
- }
- }
- </script>
- <style lang="less">
- .scrollPage{
- height: 100vh;
- display: flex;
- flex-direction: column;
- .loading-bar{
- text-align: center;
- padding: 10px 0;
- color: #999999;
- }
- .empty-bar{
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- padding: 20px 0;
- image{
- width: 100px;
- height: 100px;
- }
- view{
- font-size: 14px;
- color: #999999;
- margin-top: 10px;
- }
- }
- .scrollPage-body{
- height: 100%;
- .search-head{
- background: #fff;
- }
- }
- }
- </style>
|