input lable 事件

        <input type="checkbox" id="checkbox" disabled=true v-model="checked">

        <label for="checkbox" @click="change">{{ checked }}    </label>    

change 事件能夠點擊，由於input disabled, 因此點擊不會勾選

 

 

<template>
    <div class="chose-brand">
        <Headers @searchContent="getSearchContent" @editEv='editHandle'></Headers>
        <Popup @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">
            <input type="text" v-model="inputPrice" placeholder="請輸入商標價格"/>
            <b class="price">(元)</b>
            <span class="cancel" @click="hidMask=false">取消</span>
            <span class="confirm" @click="confirm">肯定</span>
        </div>
        <div class="mask" v-show="hidMask"></div>
        <!-- publish dialog -->
        <div class="publish-dialog" v-show="publishMask">
            <div class="content">
                <h1>您的商標信息已成功提交</h1>
                <p>本次發佈商標
                    <span>{{totalCount}}</span>
                    個 ，咱們將盡快幫您審覈
                </p>
                <span  @click="rebackMyBrand" class="rebackMyBrand">返回個人商標</span>
                <span  @click="watchPublishBrand" class="watchPublishBrand">查看發佈商標</span>
            </div>
        </div>
        <div class="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} from '@/api/registrantsGet'
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',
                type:"",
                registrant_hash:'',
                trademark_type:"",
                keyword:""
            }
        }
    },
    components:{
       Headers ,
       Popup
    },
    created(){
      
        this.formData.registrant_hash = this.$route.params.registrant_hash
        this.formData.type = this.$route.params.type
        this.getData()
    },
    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.filter((item)=>{
                        return item.price
                    }).forEach(item=>{
                        item.checked=newValue
                    })
                }
            }
    },
    methods:{
        getData(){
            let form = this.formData
            let res ={
                "data":[
                    {
                        "trademark_name":"來往扎堆",
                        "trademark_type":"41",
                        "register_number":1452,
                        "registrant_hash":3687928580,
                        "price":0,
                        "mark_img":"http://sb-bigdata-pic.oss-cn-shanghai.aliyuncs.com/86a5003b658ff259dc548f3f6eab0894.jpg"
                    },
                    {
                        "trademark_name":"TMALL.COM",
                        "trademark_type":"9",
                        "register_number":1356,
                        "registrant_hash":3687928580,
                        "price":0,
                        "mark_img":"http://sb-bigdata-pic.oss-cn-shanghai.aliyuncs.com/d4bd845ad4aaddd378498ce2014315f3.jpg"
                    },
                    {
                        "trademark_name":"鑫起點",
                        "trademark_type":"35",
                        "register_number":1557,
                        "registrant_hash":3687928580,
                        "price":0,
                        "mark_img":"http://sb-bigdata-pic.oss-cn-shanghai.aliyuncs.com/464ef43b3315d33e1c91d6ff588e0321.jpg"
                    },
                    {
                        "trademark_name":"源生鮮",
                        "trademark_type":"16",
                        "register_number":1507,
                        "registrant_hash":3687928580,
                        "price":0,
                        "mark_img":"http://sb-bigdata-pic.oss-cn-shanghai.aliyuncs.com/faee9eab9141092983d76c7e0423947b.jpg"
                    },
                    {
                        "trademark_name":"寶令",
                        "trademark_type":"41",
                        "register_number":1271,
                        "registrant_hash":3687928580,
                        "price":0,
                        "mark_img":"http://sb-bigdata-pic.oss-cn-shanghai.aliyuncs.com/a3d82e5ce426fa133b70bd5a8189bef0.jpg"
                    },
                    {
                        "trademark_name":"百業匯",
                        "trademark_type":"38",
                        "register_number":1208,
                        "registrant_hash":3687928580,
                        "price":0,
                        "mark_img":"http://sb-bigdata-pic.oss-cn-shanghai.aliyuncs.com/59eb2834087be5ac2ee13bccc1d5f626.jpg"
                    },
                    {
                        "trademark_name":"無名良品",
                        "trademark_type":"42",
                        "register_number":0,
                        "registrant_hash":3687928580,
                        "price":0,
                        "mark_img":"http://sb-bigdata-pic.oss-cn-shanghai.aliyuncs.com/fe2f3f6bb33de3600744288d17583fab.jpg"
                    },
                    {
                        "trademark_name":"圖形",
                        "trademark_type":"16",
                        "register_number":1537,
                        "registrant_hash":3687928580,
                        "price":0,
                        "mark_img":"http://sb-bigdata-pic.oss-cn-shanghai.aliyuncs.com/be787427641b06b338955a6ca71230e5.jpg"
                    },
                    {
                        "trademark_name":"聊",
                        "trademark_type":"42",
                        "register_number":1361,
                        "registrant_hash":3687928580,
                        "price":0,
                        "mark_img":"http://sb-bigdata-pic.oss-cn-shanghai.aliyuncs.com/9882280eba8bc074a8ecf7a3058dde53.jpg"
                    },
                    {
                        "trademark_name":"安特",
                        "trademark_type":"9",
                        "register_number":1534,
                        "registrant_hash":3687928580,
                        "price":0,
                        "mark_img":"http://sb-bigdata-pic.oss-cn-shanghai.aliyuncs.com/4503a3f1903e35b5753ca195ea7fa16a.jpg"
                    },
                    {
                        "trademark_name":"支付寶 ALIPAY",
                        "trademark_type":"35",
                        "register_number":1586,
                        "registrant_hash":3687928580,
                        "price":0,
                        "mark_img":"http://sb-bigdata-pic.oss-cn-shanghai.aliyuncs.com/e22756b31385e8de894673bac77be714.jpg"
                    },
                    {
                        "trademark_name":"圖形",
                        "trademark_type":"26",
                        "register_number":1592,
                        "registrant_hash":3687928580,
                        "price":0,
                        "mark_img":"http://sb-bigdata-pic.oss-cn-shanghai.aliyuncs.com/8e715080b2736ca2ad5ef052ff182728.jpg"
                    },
                    {
                        "trademark_name":"圖形",
                        "trademark_type":"3",
                        "register_number":1592,
                        "registrant_hash":3687928580,
                        "price":0,
                        "mark_img":"http://sb-bigdata-pic.oss-cn-shanghai.aliyuncs.com/76e62f634ad38568e2b6bcbf5ea0613e.jpg"
                    },
                    {
                        "trademark_name":"圖形",
                        "trademark_type":"31",
                        "register_number":1592,
                        "registrant_hash":3687928580,
                        "price":0,
                        "mark_img":"http://sb-bigdata-pic.oss-cn-shanghai.aliyuncs.com/a453e95a3aff77e0627ffdebd13ff00b.jpg"
                    },
                    {
                        "trademark_name":"圖形",
                        "trademark_type":"30",
                        "register_number":1592,
                        "registrant_hash":3687928580,
                        "price":0,
                        "mark_img":"http://sb-bigdata-pic.oss-cn-shanghai.aliyuncs.com/06665af16abdf3b20a2920fa65076d5e.jpg"
                    },
                    {
                        "trademark_name":"螞可",
                        "trademark_type":"42",
                        "register_number":1563,
                        "registrant_hash":3687928580,
                        "price":0,
                        "mark_img":"http://sb-bigdata-pic.oss-cn-shanghai.aliyuncs.com/b66dd17eab79d40e4919fdee6f37ff16.jpg"
                    },
                    {
                        "trademark_name":"ANT CAMPUS",
                        "trademark_type":"9",
                        "register_number":1572,
                        "registrant_hash":3687928580,
                        "price":0,
                        "mark_img":"http://sb-bigdata-pic.oss-cn-shanghai.aliyuncs.com/4b837bbad8f5cffc1e7a9744fdc7c4a7.jpg"
                    },
                    {
                        "trademark_name":"EBUCKLER",
                        "trademark_type":"9",
                        "register_number":1539,
                        "registrant_hash":3687928580,
                        "price":0,
                        "mark_img":"http://sb-bigdata-pic.oss-cn-shanghai.aliyuncs.com/ad2e893c6c0816fb9cd1739fec850d7d.jpg"
                    },
                    {
                        "trademark_name":"YUNOS",
                        "trademark_type":"16",
                        "register_number":1498,
                        "registrant_hash":3687928580,
                        "price":0,
                        "mark_img":"http://sb-bigdata-pic.oss-cn-shanghai.aliyuncs.com/4d56e3db4fb3701d8f4a3a3fa2fd53ae.jpg"
                    },
                    {
                        "trademark_name":"借唄",
                        "trademark_type":"38",
                        "register_number":0,
                        "registrant_hash":3687928580,
                        "price":0,
                        "mark_img":"http://sb-bigdata-pic.oss-cn-shanghai.aliyuncs.com/b88e59f6a3702b58d53e4c705852ea23.jpg"
                    }
                ],
                "total":2297,
                "message":"",
                "errorCode":200,
                "registrants":[

                ]
            }
            this.list =res.data
            this.list.forEach(item=>{
                this.$set(item,"checked",false)
            })
            return
            registrantsGet(form).then((res)=>{
                this.registrants = res.registrants
                this.registrants.unshift({registrant_hash:'0',company_name:'所有申請人'})
            })
        },
        // 接受popup組件 emit的申請人
        getApplicant(item){
            console.log(item)
        },
        // 接受popup組件 emit的尚標狀態
        getBrandType(item){
            console.log(item)
        },  
        // 接受Header組件搜索emit 的內容
        getSearchContent(val){
            console.log(val,"search val")
        },
        // 接受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)
        },
        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) } }
    }
}
</script>