wms_pda/pages/sample/settings.vue

<template>
  <view class="settings">
    <view class="title">服务器配置</view>

    <view class="form-item">
      <text class="label">服务器 IP</text>
      <input
        class="input"
        v-model="ip"
        placeholder="请输入服务器 IP，如 192.168.111.200"
      />
    </view>

    <view class="form-item">
      <text class="label">端口</text>
      <input
        class="input"
        v-model="port"
        placeholder="请输入端口，如 8800"
        type="number"
      />
    </view>

    <button class="btn-save" @click="save">保存</button>
    <button class="btn-reset" @click="reset">恢复默认</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      ip: '',
      port: '',
      DEFAULT_IP: '192.168.111.200',
      DEFAULT_PORT: '8800',
    };
  },
  onLoad() {
    // #ifdef APP-PLUS
    this.ip = plus.storage.getItem('ip') || this.DEFAULT_IP;
    this.port = plus.storage.getItem('port') || this.DEFAULT_PORT;
    // #endif
  },
  methods: {
    save() {
      if (!this.ip) {
        uni.showToast({ title: '请输入 IP', icon: 'none' });
        return;
      }
      if (!this.port) {
        uni.showToast({ title: '请输入端口', icon: 'none' });
        return;
      }
      // #ifdef APP-PLUS
      plus.storage.setItem('ip', this.ip);
      plus.storage.setItem('port', this.port);
      // #endif
      uni.showToast({ title: '保存成功', icon: 'success' });
      setTimeout(() => {
        uni.reLaunch({ url: '/pages/sample/webView' });
      }, 800);
    },
    reset() {
      this.ip = this.DEFAULT_IP;
      this.port = this.DEFAULT_PORT;
      // #ifdef APP-PLUS
      plus.storage.setItem('ip', this.DEFAULT_IP);
      plus.storage.setItem('port', this.DEFAULT_PORT);
      // #endif
      uni.showToast({ title: '已恢复默认', icon: 'none' });
    },
  },
};
</script>

<style scoped>
.settings {
  padding: 40rpx 30rpx;
}
.title {
  font-size: 40rpx;
  font-weight: bold;
  margin-bottom: 50rpx;
  color: #333;
}
.form-item {
  margin-bottom: 30rpx;
}
.label {
  display: block;
  font-size: 28rpx;
  color: #666;
  margin-bottom: 12rpx;
}
.input {
  border: 1px solid #ddd;
  border-radius: 8rpx;
  padding: 20rpx;
  font-size: 30rpx;
  background: #fff;
}
.btn-save {
  margin-top: 40rpx;
  background: #0039a6;
  color: #fff;
  border-radius: 8rpx;
}
.btn-reset {
  margin-top: 20rpx;
  background: #f5f5f5;
  color: #666;
  border-radius: 8rpx;
}
</style>