zoukankan      html  css  js  c++  java
  • input 自定义指令 智能输入数字

    <template>
        <div class="chose-brand">
            <Headers @seachIcon="selectType" @searchContent="getSearchContent" @goBack="$router.go(-1)"  @editEv='editHandle'></Headers>
            <Popup :select ="select" @selectType="selectType" @applicant='getApplicant' @brandType='getBrandType' :registrants="registrants"></Popup>
            <div>
                <div class="section-title">
                    <span class="brandname">商标名称</span>
                    <span class="type">类别</span>
                    <span class="price">价格</span>
                </div>
                <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>
            </div>
            <div class="bottom" v-show="totalCount > 0">
                <div class="left">
                    <span>
                        <input type="checkbox" v-model="ischeckAll" id="all" >
                        <label for="all"></label>
                    </span>
                    <span class="all">全选</span>
                    <span><span class="fc">{{totalCount}}</span>个商品</span>
                </div>
                <button v-if="showSetPrice" @click="openDialog(2)">设定价格</button>
                <span v-if="!showSetPrice" class="right" @click="publish">发布</span>
            </div>
            <!-- tip about no set price -->
            <div class="toast" v-show='toast'>
                您还没有设定价格哦
            </div>
            <!-- setPrice dialog -->
            <div class="dialog" v-show="hidMask">
                <div class="input-box">
                    <input type="text"  maxlength="8"  v-model="inputPrice" v-number-only placeholder="请输入商标价格"/>
                    <b class="price">(元)</b>
                </div>
                <span class="cancel" @click="hidMask=false">取消</span>
                <span class="confirm" @click="confirm">确定</span>
            </div>
            <div class="dialog-mask" v-show="hidMask"></div>
            <!-- publish dialog -->
            <div class="publish-dialog" v-show="publishMask">
                <div class="content">
                    <h1>您的商标信息已成功提交</h1>
                    <p>本次发布商标
                        <span>{{total}}</span>
                        个 ,我们将尽快帮您审核
                    </p>
                    <span  @click="goBack" class="rebackMyBrand">返回我的商标</span>
                    <router-link to="/trademarkToaudit" class="watchPublishBrand">查看发布商标</router-link>
                </div>
            </div>
            <div class="dialog-mask" v-show="publishMask"></div>
        </div>
    </template>
    
    <script>
    import '@/style/select-brand.scss'
    import '@/style/trademark-registant.scss'
    import Headers from '@/components/Header'
    import Popup from '@/components/Popup'
    import {registrantsGet,released} from '@/api/registrants'
    import { setTimeout } from 'timers';
    export default {
        data(){
            return{
                certifyType:'certifyType',
                certifyTypeNo:'certifyTypeNo',
                // 认领商标列表
                list:[],
                // 申请人列表
                registrants:[],
                // 控制设定价格的遮罩的show hide
                hidMask:false,
                //控制底部设定价格的show hide
                showSetPrice:false,
                // 设定价格是由那个事件调起来 1是定价,2是设定价格
                dialogType:'',
                // 存放定价调起弹框存放的item
                dialogItem:"",
                inputPrice:"",
                // 没有设定价格的toast
                toast:false,
                // 发布弹框遮罩
                publishMask:false,
                // 上个页面穿来的hash 和type值
                formData:{
                    page:1,
                    pagesize:'20',
                    registrant_hash:this.$route.params.registrant_hash,
                    trademark_type:"",
                    keyword:""
                }, 
                // 初始化申请人,只执行一次
                initRegistrants:true,
                initScroll:false,//防止触发下拉加载函数,执行两遍alax
                emptyData:false, //主要用来判断数据为空 拉倒顶部又拉到底部 重新触发infinite事件不显示没有更多数据的问题
                select:0,  
                total:""  //发布成功后后台返回的total
            }
        },
        components:{
           Headers ,
           Popup
        },
        created(){
            // this.formData.registrant_hash = this.$route.params.registrant_hash
            this.getData()
        },
        directives: {
            numberOnly: {
                bind: function(el) {
                    el.handler = function() {
                        el.value = el.value.replace(/D+/, '')
                    }
                    el.addEventListener('input', el.handler)
                },
                unbind: function(el) {
                    el.removeEventListener('input', el.handler)
                }
            }
        },
        computed:{
            totalCount(){
                let totalArr = this.list.filter(item=>item.checked)
                return totalArr.length
            },
            ischeckAll:{
                    get(){
                        var list = this.list.filter((item)=>{
                            return item.price
                        })
                        return list.every(item=>item.checked)
                    },
                    set(newValue){
                        this.list.forEach(item=>{
                            item.checked=newValue
                        })
                    }
                }
        },
        methods:{
            getData(){
                let form = this.formData
                registrantsGet(form).then((res)=>{
                    if(this.initRegistrants){
                        this.registrants = res.subData
                        this.registrants.unshift({registrant_hash:'0',company_name:'全部申请人'})
                        this.initRegistrants = false
                    }
                    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]
                    }
                })
            },
            // 初始化搜索字段
            initSearch(){
                this.initScroll = false
                this.emptyData = false
                this.formData.page = 1
                this.$refs.scroller.scrollTo(0,0,true)
            },
            // 接受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
                })
                released(publishList).then((res)=>{
                    this.publishMask = true
                    this.total = res.total
                })
            },
            infinite: function (done) {
                if(this.emptyData){ 
                    this.$refs.scroller.finishInfinite(true)
                    return;
                }
                if(!this.initScroll){
                    return
                }
                this.formData.page++;
                this.getData()
            },
            selectType(val){
               this.select = val
            },
            dialogTip(item){
                // 不在编辑模式下并且价格为空
                if(!item.price&&!this.showSetPrice){
                    this.toast = true
                    setTimeout(()=>{
                        this.toast = false
                    },1500)
                }
            }
        }
    }
    </script>
  • 相关阅读:
    宿主机( win 7 系统) ping 虚拟机VMware( cent os 6.6 ) 出现“请求超时”或者“无法访问目标主机”的解决方法
    Java实现 LeetCode 23 合并K个排序链表
    Java实现 LeetCode 23 合并K个排序链表
    Java实现 LeetCode 23 合并K个排序链表
    Java实现 LeetCode 22 括号生成
    Java实现 LeetCode 22 括号生成
    Java实现 LeetCode 22 括号生成
    Java实现 LeetCode 21 合并两个有序链表
    Java实现 LeetCode 21 合并两个有序链表
    Java实现 LeetCode 21 合并两个有序链表
  • 原文地址:https://www.cnblogs.com/MR-cui/p/10565047.html
Copyright © 2011-2022 走看看