123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207 |
- <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"
- @chooseProduct="chooseProduct"
- ></productItem>
- <!-- loading -->
- <view class="loading-bar" v-if="list.length && (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 { queryPromoProductByPage } from '@/api/video.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:16,
- total:0,
- list:[],
- loading:false,
- loadEnd: false,
- loadText: '加载中...',
- empty: {
- tip: '暂无产品',
- imgUrl: '/static/nodata.png'
- },
- queryWord:'',
- promoActiveSn:'',
- screenWidth: 750,
- screenHeight: 0,
- statusBarHeight: 44,
- safeAreaBottom: 0,
- bodyHeight: 0
- };
- },
- computed: {
- ...mapState(['hasLogin']),
- userInfo(){
- return this.$store.state.vuex_userInfo
- },
- },
- 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.promoActiveSn = opts.promoActiveSn
-
- // 查询列表
- this.getList()
- },
- onUnload(){
- this.list = null
- },
- methods: {
- goBack() {
- uni.navigateBack();
- },
- // 滚动到底部
- 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
- queryPromoProductByPage({
- pageNo: this.pageNo,
- pageSize: this.pageSize,
- queryWord: this.queryWord,
- promoActiveSn: this.promoActiveSn
- }).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 => {
- // 如果筛选或分页后,更新页面列表产品数量
- ret.push({
- id: k.id,
- cost: k.cost,
- checked: false,
- qty: 0,
- productCode: k.productCode,
- productSn: k.productSn,
- productImage: k.productImage,
- productName: k.productName,
- productOrigCode: k.productOrigCode,
- promoActiveSn: k.promoActiveSn,
- promoRuleSn: k.promoRuleSn,
- promoRuleValue: k.promoRuleValue,
- promoRuleType: k.promoRuleType,
- })
- })
- // 追加数据
- 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>
|