delivery-depot-uniapp/pages/daixjgk/daixjgk.vue

<template>
  <view class="page">
	  <view class="filter-icon-container">
		  <image @click="toggle('top')" src="../../static/icons/shaix-ico.png"></image>
	  </view>
    <view class="warehouse-list">
      <view v-for="(warehouse, index) in warehouses" :key="index" class="warehouse-item">
        <view class="warehouse-header">
          <view class="info-container">
            <view class="warehouse-name">
              <image src="../../static/icons/warehouse-ico.png" mode="widthFix"></image>
              <text>库区名称：{{ warehouse.name }}</text>
            </view>
            <view class="warehouse-address">
              <image src="../../static/icons/location-ico.png" mode="widthFix"></image>
              <text>库区地址：{{ warehouse.address }}</text>
            </view>
          </view>
          <view class="select-button">
            <checkbox :checked="warehouse.selected" @change="toggleSelection(index)"></checkbox>
          </view>
        </view>
        <view class="warehouse-details">
          <view class="detail-row">
            <text>库区空仓仓容: {{ warehouse.capacity }}</text>
            <text>仓房数量: {{ warehouse.rooms }}</text>
          </view>
          <view class="detail-row">
            <text>空仓数量: {{ warehouse.emptyRooms }}</text>
            <text>已选仓房数量: {{ warehouse.selected ? '1个' : '0个' }}</text>
          </view>
        </view>
      </view>
    </view>

    <view class="button-container">
		<view class="button-pad">
			<button class="select-all" @click="selectAll">全选</button>
			<button class="confirm" @click="confirmSelection">确 认</button>
		</view>
    </view>
	<view>
		<!-- 普通弹窗 -->
		<uni-popup ref="popup" background-color="#fff" @change="change" border-radius="10px 10px 0 0">
			<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }"><text
					class="text">popup 内容1</text></view>
		</uni-popup>
	</view>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue';

const warehouses = ref([
  { name: 'XXXXX', address: 'XXXXXXXXXX', capacity: '1500吨', rooms: '10个', emptyRooms: '5个', selected: false },
  { name: 'XXXXX', address: 'XXXXXXXXXX', capacity: '1500吨', rooms: '10个', emptyRooms: '5个', selected: false },
  { name: 'XXXXX', address: 'XXXXXXXXXX', capacity: '1500吨', rooms: '10个', emptyRooms: '5个', selected: false }
]);

const toggleSelection = (index) => {
  warehouses.value[index].selected = !warehouses.value[index].selected;
};

const selectAll = () => {
  warehouses.value.forEach(warehouse => {
    warehouse.selected = true;
  });
};

const confirmSelection = () => {
  // Implement confirmation logic here
};
// 定义响应式数据
const state = reactive({
  type: 'center',
  msgType: 'success',
  messageText: '这是一条成功提示',
  showClose: true,
});
const popup = ref(null);
const toggle = (type) => {
  state.type = type;
  // open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
  popup.value.open(type);
};
</script>

<style lang="scss" scoped>
.page {
  position: relative; // 确保伪元素相对于 .page 定位
}

.page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200rpx; // 设置渐变的高度
  background: linear-gradient(180deg, #cfddfc, #eff2f5);
  z-index: -1; // 确保它在内容之下
}

.filter-icon-container {
	position: relative;
	float: right;
  top: 20rpx;
  right: 40rpx;

  image {
    width: 40rpx;
    height: 40rpx;
  }
}
.warehouse-list {
	  padding: 80rpx 40rpx 20rpx;
  .warehouse-item {
    background: linear-gradient(180deg, #ffffff, #F5F8FF);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    .warehouse-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start; // 对齐到顶部
      padding-bottom: 30rpx;
	  border-bottom: 1px solid #E7E8EA;
	  font-size: 35rpx;
	  color: #00122F;

      .info-container {
        flex-grow: 1;
        .warehouse-name,
        .warehouse-address {
          display: flex;
          align-items: center;
          margin-bottom: 5px;

          &:last-child {
            margin-bottom: 0;
          }

          image {
            width: 20px;
            height: 20px;
            margin-right: 10px;
          }
        }
      }

      .select-button {
        display: flex;
        align-items: flex-start;
        margin-left: 10px;
      }
    }

    .warehouse-details {
		padding-top: 30rpx;
		font-size: 30rpx;
		color: #747476;
      .detail-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
      }
    }
  }
}

.button-container {
	position: fixed;
	bottom: 0;
	background-color: #ffffff;
	width: 100vw;
	padding: 40rpx 0;
	.button-pad{
		padding: 0 40rpx;
		display: flex;
		justify-content: space-between;
	}
  

  .select-all,
  .confirm {
    width: 44%;
    height: 70rpx;
	line-height: 70rpx;
    border-radius: 10rpx;
    background-color: #1E5FDF;
    color: #fff;
    font-size: 28rpx;
    text-align: center;
  }
}
</style>