WenWuGuanJia/index_fenbao/XuanJiangYuan/ck_page.vue

<template>
  <view class="box">
    <u-navbar title="添加乘客" autoBack :placeholder="true" bgColor="#fee1b9"></u-navbar>
    <view class="ban">
      <view class="form-group" v-for="(item, index) in passengers" :key="index">
        <text>成员 {{ index + 1 }}</text>
        <u-input placeholder="请输入姓名" v-model="item.name" border="surround" />
        <u-input placeholder="请输入手机号" v-model="item.mobile" border="surround" />
        <u-input placeholder="请输入年龄" v-model="item.age" border="surround" />
        <button type="default" @click="removePassenger(index)" v-if="passengers.length > 0">删除乘客</button>
      </view>
      <view @click="addPassenger" class="tjbm_btn">添加乘客</view>
      <view @click="submit" class="tjbm_btn">提交</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      passengers: [
        { name: '', mobile: '', age: '' }
      ]
    };
  },
  onLoad() {
    // 从本地存储中获取乘客信息
    const storedPassengers = uni.getStorageSync('passengers');
    if (storedPassengers) {
      this.passengers = storedPassengers;
    } else {
      // 如果没有存储的乘客信息，则初始化一个空的乘客对象
      this.passengers = [{ name: '', mobile: '', age: '' }];
    }
  },
  methods: {
    addPassenger() {
      this.passengers.push({ name: '', mobile: '', age: '' });
    },
    removePassenger(index) {
      this.passengers.splice(index, 1);
      // 更新本地存储
      uni.setStorageSync('passengers', this.passengers);
    },
    submit() {
      console.log('提交的乘客信息:', this.passengers);
      // 将乘客信息保存到本地存储中
      uni.setStorageSync('passengers', this.passengers);

      // 返回上一个页面
      uni.navigateBack({
        delta: 1
      });
    }
  }
};
</script>

<style scoped>
.box {
  min-height: 100%;
  height: auto;
  width: 100%;
  padding-bottom: 50rpx;
  background-image: url('https://huli-app.wenlvti.net/app_static/minnanhun/image/gj_bg.png');
  background-repeat: repeat-y;
  background-size: 100%;
}

.ban {
  width: 92%;
  margin: auto;
}

.form-group {
  margin-bottom: 20px;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
}

button {
  margin-top: 10px;
}

.u-input.data-v-113bc24f {
  background-color: #fee1b9 !important;
  margin-top: 20rpx;
}

.tjbm_btn {
  width: 100%;
  height: 80rpx;
  font-size: 30rpx;
  line-height: 80rpx;
  text-align: center;
  color: #ffffff;
  border-radius: 10rpx;
  background-color: #fb5a02;
  margin-top: 50rpx;
}
</style>