whycq
2024-03-28 e17108966ccfcaee2bef8d981601c79c8716e304
components/z-input/z-input.vue
@@ -3,9 +3,25 @@
      <view class="main">
         <view class="inner1">{{desc}}</view>
         <view class="put inner2">
            <input class="p-input" type="text" :placeholder="placeholder" v-model="data" :focus="focusData">
            <uni-icons class="p-icon" type="closeempty" size="16" color="#707070"
               v-show="data.length" @click="clear">
            <uni-icons class="p-icon"
               type="scan"
               size="16"
               color="#a6a6a6"
               @click="scanCode"
               >
            </uni-icons>
            <input class="p-input"
               type="text"
               :placeholder="placeholder"
               v-model="data"
               :focus="focusData" @input="inputVal">
            <uni-icons class="p-icon"
               type="closeempty"
               size="16"
               color="#b9b9b9"
               v-show="data.length"
               @click="clear">
            </uni-icons>
         </view>
         <view class="inner3" v-show="btn">
@@ -25,7 +41,15 @@
         };
      },
      props: {
         index: {
            type: Number,
            default: 0
         },
         desc: {
            type: String,
            default: ''
         },
         name: {
            type: String,
            default: ''
         },
@@ -39,7 +63,7 @@
         },
         placeholder: {
            type: String,
            default: '请输入'
            default: '扫码 / 录入'
         },
         value: {
            type: [String,Number],
@@ -61,6 +85,7 @@
               return
            }
            if (val.length != this.lenCheck) {
               console.log(val);
               setTimeout(()=>{
                  this.data = ''
                  this.$emit('input','')
@@ -69,8 +94,10 @@
               this.$emit('input',val)
            }
         },
         value(val) {
            this.data = val
         },
         focus(f) {
            console.log(f);
            this.focusData = !f
            setTimeout(()=>{
               this.focusData = f
@@ -87,6 +114,19 @@
         },
         clickBtn() {
            this.$emit('clickBtn');
         },
         inputVal() {
            this.$emit('inputVal',{title:this.name,value:this.data});
         },
         scanCode() {
            let _this = this
            uni.scanCode({
               onlyFromCamera: true,
               success(res) {
                  _this.data = res.result
                  _this.$emit('inputVal',{title:_this.name,value:_this.data})
               }
            })
         }
      }
   }
@@ -96,9 +136,8 @@
   .main {
      display: flex;
      align-items: center;
      min-height: 70rpx;
      background-color: #FFF;
      /* border-bottom: 1px solid darkgray; */
      min-height: 50px;
      background-color: #fff;
   }
   .put {
      display: flex;
@@ -106,34 +145,38 @@
   }
   
   .inner1 {
      width: 120rpx;
      width: 55px;
      padding-left: 8px;
      font-weight: 700;
      color: #606164;
      font-weight: 900;
      font-family:'Helvetica Neue';
   }
   .inner2 {
      background-color: aliceblue;
      background-color: #f8f8f8;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 5px;
      margin-right: 32rpx;
      color: #606266;
   }
   .p-input {
      flex:1;
      padding-left: 8px;
      padding: 4px;
   }
   .p-icon {
      margin-left: 8px;
      margin-right: 8px;
      margin-left: 4px;
      margin-right: 4px;
   }
   .inner3 {
      width: 200rpx;
      width: 90px;
      display: flex;
      align-items: center;
      justify-content: center;
   }
   .m-btn {
      background-color: #3c9cff;
      background-color: #00aeec;
      color: #FFF;
   }
   .m-btn:active {