vue-scroller

Posted 2021-02-12 mr-cui

           <scroller
            class="scroller" 
            :on-infinite="infinite"
            ref="scroller"
            >
            <div v-for="(item,index) in list" :key="index"  class="list">
                    <span>
                        <!-- 价格为空并且不是在编辑模式下 绑定上disabled -->
                        <input type="checkbox" :disabled="!showSetPrice&&!item.price" :id="‘a‘+index" v-model="item.checked">
                        <label :for="‘a‘+index" @click="dialogTip(item)"></label>
                    </span>
                    <span class="company">
                        {{item.trademark_name}}
                    </span>
                    <span class="type">
                        {{item.trademark_type}}
                    </span>
                    <span v-if="item.price" class="price">
                        {{item.price}}
                    </span>
                    <span v-else class="pricing" @click="openDialog(1,item)">
                        定价
                    </span>
            </div>
            <div style="height:200px">
            </div>
            </scroller>

    methods:{
        getData(){
            let form = this.formData
            registrantsGet(form).then((res)=>{
                if(form.page == ‘1‘){
                    this.list = res.data
                    this.list.forEach(item=>{
                        this.$set(item,"checked",false)
                    })
                    this.initScroll = true
                    this.$refs.scroller.finishInfinite()
                    if(this.list.length< 20){
                       this.emptyData = true
                        return 
                    }
                }else{
                    this.$refs.scroller.finishInfinite()
                    let resArr = res.data
                    if(resArr.length == 0){
                        this.emptyData = true
                        return
                    }
                    resArr.forEach(item=>{
                        this.$set(item,"checked",false)
                    })
                    this.list = [...this.list,...resArr]
                }
                if(this.initRegistrants){
                    this.registrants = res.registrants
                    this.registrants.unshift({registrant_hash:‘0‘,company_name:‘全部申请人‘})
                    this.initRegistrants = false
                }
            })
        },
        // 初始化搜索字段
        initSearch(){
            this.initScroll = false
            this.emptyData = false
            this.formData.page = 1
            // this.list=[]
            this.$refs.scroller.scrollTo(0,0,true) //滚动到scrooler这个模块内容的顶部
        },
        // 接受popup组件 emit的申请人
        getApplicant(item){
            this.initSearch()
            this.formData.registrant_hash=item.registrant_hash
            this.getData()
        },
        // 接受popup组件 emit的商标类别
        getBrandType(item){
            this.initSearch()
            this.formData.trademark_type=item.id
            this.getData()
        },  
        // 接受Header组件搜索emit 的内容
        getSearchContent(val){
            this.initSearch()
            this.formData.keyword=val
            this.getData()
        },
        // 接受Header组件 点击编辑emit 的内容
        editHandle(bol){
            if(bol){
               this.list.forEach((item)=>{
                   item.checked=true
               })
            }else{
                  this.list.forEach((item)=>{
                   if(!item.price){
                       item.checked=false
                   }
               })
            }
            this.showSetPrice= bol
        },
        // 调起设定价格弹框
        openDialog(id,item){
            this.dialogItem = item
            console.log(item,"item")
            this.dialogType = id
            this.hidMask = true
        },
        confirm(){
            if(this.dialogType == ‘1‘){
                this.dialogItem.price = this.inputPrice
            }else{
                this.list.forEach(item=>{
                    if(item.checked){
                        item.price = this.inputPrice
                    }
                })
            }
            this.inputPrice= ‘‘
            this.hidMask = false
        },
        // 发布商标
        publish(){
            var publishList = this.list.filter(item=>{
                return item.checked
            })
            // this.publishMask = true
            console.log(publishList)
            released(publishList).then((res)=>{
                console.log(res,"res")
            })
        },
        infinite: function (done) {
            if(this.emptyData){ 
                this.$refs.scroller.finishInfinite(true)
                return;
            }
            if(!this.initScroll){
                return
            }
            this.formData.page++;
            this.getData()
        },
        // 返回我的商标
        rebackMyBrand(){

        },
        // 查看发布商标
        watchPublishBrand(){

        },
        dialogTip(item){
            // 不在编辑模式下并且价格为空
            if(!item.price&&!this.showSetPrice){
                this.toast = true
                setTimeout(()=>{
                    this.toast = false
                },1500)
            }
        }
    }