xiaoshi-wx/myComponents/myInput/myInput.js

// myComponents/myInput/myInput.js
const api = require('../../api/index')
Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  /**
    * 组件的属性列表
    */
  properties: {
    value:{
      type:String,
      value:'',
      observer:function(val){
        this.changeContent(val)
      }
    },
    // placeholder:{
    //   type:String,
    //   value:'请输入'
    // },
    showEdit:{
      type:Boolean,
      value:true
    },
    ownner:{
      type:Boolean,
      value:true
    }
  },
  // 监听传入的变量,当传入的值发生变化时,触发方法
  observers: {
    'value': function (val) {
      // console.log(val);
    }
  },
  /**
   * 页面的初始数据
   */
  data: {
    searchType:[
      {
        label:'按产品查',
        value:'key',
        placeholder:'请输入产品相关关键词'
      },
      {
        label:'按公司查',
        value:'companyName',
        placeholder:'请输入公司名称'
      }
    ],
    field:'key',
    lastField:'',
    placeholder:'请输入产品相关关键词',
    content:'',
    show:false,
    fileList:[]
  },
methods:{
  changeSearchType(e){
    // var field = e.detail
    var lastField = this.data.field
    var {field} = e.currentTarget.dataset
    var obj = this.data.searchType.find(item=>{
      return item.value == field
    })
    this.setData(
      {
        field:field,
        lastField:lastField,
        placeholder:obj.placeholder
      }
    )
    this.triggerEvent('changeSearchType',field)
  },
  changeInput(e){
    const value = e.detail.value;
    this.changeContent(value)
    this.triggerEvent("input", value,this.data.field);
  },
  inputBlur(e){
    const value = e.detail.value;
    if(value == this.data.content){
      return false
    }
    this.changeContent(value)
    this.triggerEvent("change", value,this.data.field);
  },
  changeContent(value){
    this.setData(
      {
        content:value
      }
    )
  },
  clickInnerIcon(e){
    if(this.properties.showEdit){
      // this.data.show = !this.data.show
      this.setData(
        {
          show:!this.data.show
        }
      )
    }
    console.log(this.properties.showEdit,this.data.show)
    this.triggerEvent('clickInnerIcon',1)
  },
  buttonClick(e){
    if(this.properties.ownner){
      var isLogin = api.isLogin()
      if(!isLogin){
        return false
      }
      var params = {
        // key:this.data.content
      }
      params[this.data.field] = this.data.content
      if(this.data.fileList && this.data.fileList.length>0){
        params.filePath = this.data.fileList[0].url
      }
      var product = JSON.stringify(params)
      console.log(product)
      wx.navigateTo({
        url: '/pages/searchResults/searchResults?type=0&product='+encodeURIComponent(product),
      })
    }
    // console.log(e,this.properties.value)
    var data = {
      value:this.data.content,
      field:this.data.field,
      lastField:this.data.lastField,
    }
    if(this.data.fileList && this.data.fileList.length>0){
      data.filePath = this.data.fileList[0].url
    }
    this.triggerEvent('search',data)
  },
  //图片上传
  beforeUpload(e){
    console.log(e.detail)
    if(e.detail.errMsg=="chooseMedia:ok"){
      var data = [{
        status: 'done',
        url: e.detail.tempFiles[0].tempFilePath,
      }]
      this.setData({ fileList:data })
    }
  },
  onChange(e) {
    console.log('1', e)
    const { file, fileList } = e.detail
    if (file.status === 'uploading') {
      this.setData({
        progress: 0,
      })
      wx.showLoading()
    } else if (file.status === 'done') {
      this.setData({
        imageUrl: file.url,
      })
    }

    // Controlled state should set fileList
    this.setData({ fileList })
  },
  //预览
  onPreview(e) {
    console.log('onPreview', e)
    const { file, fileList } = e.detail
    wx.previewImage({
      current: file.url,
      urls: fileList.map((n) => n.url),
    })
  },
},
  /**  
   * 组件的生命周期函数列表  
   */  
  lifetimes: {  
    // 在组件实例进入页面节点树时执行  
    attached: function () {  
      // 初始化操作  
      // console.log('组件初始化');  
      this.changeContent(this.properties.value)
      // ...  
    },  
    // 在组件实例被移除出页面节点树时执行  
    detached: function () {  
      // 清理工作  
      console.log('组件销毁');  
      // ...  
    },  
    // ...  
  },  
  
  /**  
   * 组件所在页面的生命周期函数可以在 pageLifetimes 中定义  
   *  
   * 页面生命周期函数：  
   * show：页面显示  
   * hide：页面隐藏  
   * resize：页面尺寸变化  
   */  
  pageLifetimes: {  
    // ...  
  }  


})