#
whycq
2022-10-15 34ef963b2f84b1101b020e389e4af0011c328e65
pages/basics/matSelect.vue
@@ -4,7 +4,7 @@
         <view class="search-box">
            <view class="search-area">
               <view class="search-icon"><uni-icons type="search" size="25" color="#a5a5a5"></uni-icons></view>
               <input type="text" v-model="condition" placeholder="请输入商品编码 / 名称"/>
               <input type="text" @focus="searchFoucs" @blur="serchBlur" v-model="condition" placeholder="请输入商品编码 / 名称"/>
               <view class="close-icon" @click="reset()"><uni-icons type="closeempty" size="25" color="#a5a5a5"></uni-icons></view>
            </view>
            <view class="search-btn"><button @click="search(condition)" class="cu-btn bg-blue">搜索</button></view>
@@ -35,7 +35,13 @@
            </label>
         </checkbox-group>
      </scroll-view>
      <view class="record">
      <view class="record" v-if="recordShow">
         <view class="record-data" v-for="(item,index) in reList" :key="index" >
            <text style="margin-right: 10rpx;" @click="choseMatnr(item)">{{item}}</text>
            <view style="height: 50rpx;display: inline-block;" @click="removeRecord(index)">
               <uni-icons type="closeempty" size="15" color="#a5a5a5"></uni-icons>
            </view>
         </view>
         
      </view>
      </view>
@@ -49,6 +55,8 @@
            condition:null,
            tag: [],
            data: [],
            reList: [],
            recordShow: false,
         }
      },
      onLoad() {
@@ -59,10 +67,28 @@
         // 监听acceptDataFromOpenerPage事件,获取上一页面通过eventChannel传送到当前页面的数据
         eventChannel.on('commonUrl', function(data) {
            that.commonUrl = data.commonUrl
            that.showTag(1)
         })
      },
      methods: {
         removeRecord(index) {
            this.reList.splice(index,1)
         },
         choseMatnr(matnr) {
            this.condition = matnr
         },
         searchFoucs() {
            var reL = uni.getStorageSync('recordList')
            if (reL.length == 0) {
               reL = []
            }
            this.reList = reL
            this.recordShow = true
         },
         serchBlur() {
            // this.recordShow = false
         },
         checkbox() {
            
         },
@@ -71,7 +97,10 @@
            uni.vibrateShort();
         },
         search(condition) {
            this.recordShow = false
            let that = this
            // that.reList.push(that.condition)
            // uni.setStorageSync('recordList',that.reList)
            that.tag = null
            that.data = null
            uni.vibrateShort();
@@ -93,6 +122,18 @@
                  var res = result.data
                  if (res.code === 200 ) {
                     that.data = res.data
                     if (that.reList.length == 0) {
                        that.reList.push(that.condition)
                        uni.setStorageSync('recordList',that.reList)
                        return
                     }
                     for(var i = 0;i < that.reList.length;i++) {
                        if (that.reList[i] == that.condition) {
                           that.reList.splice(i,1)
                        }
                     }
                     that.reList.unshift(that.condition)
                     uni.setStorageSync('recordList',that.reList)
                  } else if (res.code == 403) {
                     uni.showToast({title: res.msg, icon: "none", position: 'top'})
                     setTimeout(() => {
@@ -199,12 +240,29 @@
</script>
<style>
   .record-data {
      min-width: 50rpx;
      height: 70rpx;
      background-color: aliceblue;
      line-height: 70rpx;
      padding-left: 20rpx;
      padding-right: 20rpx;
      margin-left: 20rpx;
      margin-top: 10rpx;
      display: flex;
      border-radius: 15rpx;
   }
   .record {
      z-index: 1;
      z-index: 11;
      display: flex;
      flex-wrap: wrap;
      position: fixed;
      top: 188rpx;
      /* #ifdef APP-PLUS */
      top: 94rpx;
      /* #endif */
      width: 100%;
      min-height: 50rpx;
      min-height: 90rpx;
      background-color: #6f6f6f;
   }
   .matnr {