discounts-minapp/study/tourList/list.vue

<template>
  <view class="list">

    <view @click="add" class="adBbtn">
      <view class="label">+添加出游人</view>
    </view>

    <view v-for="item in userList" @click="check(item)" class="user-card">
      <view class="user-info">
        <view class="user-name">
          <view class="icon">
            <image class="img" src="/static/user-edit.png" mode="aspectFit" />
          </view>
          <view class="name">
            {{ item.userName }}
          </view>
        </view>
        <view class="id-number">
          <text class="label">身份证</text>{{ item.idCard }}
        </view>
      </view>
      <view class="check">
        <image v-if="!item.check" class="check-img" src="/static/check.png"></image>
        <image v-else class="check-img" src="/static/eglass-check.png"></image>
      </view>
    </view>


    <view class="btn-box">
      <view class="total-price">
        <view class="label">
          已选择:{{ userList.filter(e => e.check).length }}人
        </view>
      </view>

      <button class="btn" type="default" :loading="loading" @click="submit">确认</button>
    </view>
  </view>
</template>

<script>
import { getAllTravelers } from "@/api/study";
export default {
  data() {
    return {
      userList: [],
    };
  },
  methods: {
    add() {
      uni.navigateTo({
        url: '/study/tourList/add'
      });
    },
    check(user) {
      if (user.check) {
        user.check = false
      } else {
        user.check = true
      }
    },
    submit() {
      const selected = this.userList.filter(e => e.check)
      if (selected.length === 0) {
        uni.showToast({
          title: '请选择出游人',
          icon: 'none'
        })
        return
      }
      uni.$emit('updateData', selected)
      uni.navigateBack()
    }
  },
  onShow() {
    getAllTravelers().then(({ content }) => {
      this.userList = content.map(e => {
        return {
          ...e,
          check: false
        }
      })
    })
  },

};
</script>

<style lang="scss" scoped>
.list {
  background: #F9F9F9;
  min-height: 100vh;
  padding: 20rpx;

  .adBbtn {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #FFFFFF;

    .label {
      color: #3B83FF;
      font-size: 28rpx;
      font-weight: Bold;
      padding: 24rpx 0;
    }

    margin: 0 0 20rpx 0;
  }

  .user-card {
    padding: 24rpx;
    background-color: #FFFFFF;
    border-radius: 16rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;


    .user-info {
      .user-name {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;

        .icon {
          width: 36rpx;
          height: 36rpx;
          margin-right: 8rpx;

          .img {
            width: 100%;
            height: 100%;
          }
        }

        .name {
          font-size: 28rpx;
          color: #222222;
          font-weight: bold;
        }
      }

      .id-number {
        padding-left: 44rpx;
        font-size: 24rpx;
        color: #222222;

        .label {
          margin-right: 20rpx;
        }
      }
    }

    .check {
      width: 40rpx;
      height: 40rpx;

      .check-img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .btn-box {
    position: fixed;
    bottom: 0%;
    left: 0%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 10rpx 30rpx env(safe-area-inset-bottom);
    border-top: 1rpx solid #EEEEEE;

    .total-price {
      .label {
        color: #AAAAAA;
        font-size: 28rpx;
      }
    }


    .btn {
      width: 280rpx;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      background: #3B83FF;
      box-shadow: inset 0rpx 6rpx 12rpx 2rpx rgba(255, 255, 255, 0.16);
      border-radius: 46rpx 46rpx 46rpx 46rpx;
      font-weight: 800;
      color: #FFFFFF;
      font-size: 28rpx;
      margin: 0;
    }
  }
}
</style>