微信小程序缓存车架号到本地代码

wxml页面

<!-- pages/vin-history/vin-history.wxml -->
<view class="container">
  <view class="vin-list">
    <block wx:for="{{vinList}}" wx:key="vin">
      <view class="vin-item">
        <text>{{item}}</text>
        <button bindtap="onRemoveVin" data-vin="{{item}}">删除</button>
      </view>
    </block>
  </view>
  <button bindtap="onAddVin">新增</button>
  <button bindtap="onClearVins">清空</button>
</view>

<!-- 弹窗 -->
<view wx:if="{{showModal}}" class="modal">
  <view class="modal-content">
    <view class="modal-header">
      <text>请输入车架号</text>
    </view>
    <input class="modal-input" placeholder="请输入车架号" bindinput="onInputVin" />
    <view class="modal-footer">
      <button bindtap="onCancelModal">取消</button>
      <button bindtap="onSaveVin">保存</button>
    </view>
  </view>
</view>

js页面

// pages/vin-history/vin-history.js
Page({
  data: {
    vinList: [], // 历史车架号列表
    showModal: false, // 控制弹窗显示
    inputVin: '' // 输入的车架号
  },
  
  // 新增车架号
  onAddVin: function() {
    this.setData({ showModal: true });
  },
  
  // 输入车架号
  onInputVin: function(e) {
    this.setData({ inputVin: e.detail.value });
  },
  
  // 保存车架号
  onSaveVin: function() {
    const vin = this.data.inputVin;
    if (vin) {
      const vinList = this.data.vinList;
      if (!vinList.includes(vin)) {
        vinList.push(vin);
        this.setData({ vinList, showModal: false, inputVin: '' });
      } else {
        wx.showToast({ title: '车架号已存在', icon: 'none' });
      }
    } else {
      wx.showToast({ title: '请输入车架号', icon: 'none' });
    }
  },
  
  // 取消弹窗
  onCancelModal: function() {
    this.setData({ showModal: false, inputVin: '' });
  },
  
  // 删除车架号
  onRemoveVin: function(e) {
    const vin = e.currentTarget.dataset.vin;
    const vinList = this.data.vinList.filter(item => item !== vin);
    this.setData({ vinList });
  },
  
  // 清空车架号列表
  onClearVins: function() {
    this.setData({ vinList: [] });
  }
});

wcss页面

/* pages/vin-history/vin-history.wxss */
.container {
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.vin-list {
  margin-bottom: 20px;
}

.vin-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

button {
  margin-right: 10px;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
}

.modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
}

.modal-header {
  margin-bottom: 20px;
}

.modal-input {
  margin-bottom: 20px;
}

.modal-footer {
  display: flex;
  justify-content: space-between;
}