freight-web/src/pages/index/payReview.vue

<template>
  <view class="search">
    <view v-if="!isShowSearch" @click="isShowSearch = true">
      <u-icon color="#C1C1C1" name="search"></u-icon
      ><text>请输入供应商名称</text>
    </view>
    <u-search
      v-else
      placeholder="请输入供应商名称"
      v-model="keyword"
      :focus="true"
      bgColor="#fff"
      :clearabled="true"
      :showAction="false"
      placeholderColor="#C1C1C1"
    ></u-search>
  </view>

  <view class="card-box">
    <view class="c-tab">
      <text
        v-for="(item, index) in tabList"
        :key="index"
        :class="{ active: currentTab === item.name }"
        @click="handleTab(item)"
      >
        {{ item.name }}
      </text>
    </view>

    <block v-for="item in 10" :key="item">
      <view class="inner-box">
        <view class="top-flex-box">
          <view>
            <view>
              <text class="number">收货单号：SHD20230901132333</text>
            </view>
            <view>
              <text class="name">陡其成</text>
            </view>
          </view>
        </view>
        <view class="bottom-flex-box">
          <view>
            <view>
              <text class="desc">过磅总净重：1870.00KG</text>
            </view>
            <view class="flex-box">
              <text>贷款金额：2510.00元</text>
            </view>
          </view>
          <view>
            <text class="btn">
              <text v-if="currentTab === '等待审核'">去审核</text>
              <text v-if="currentTab === '已审未付'">去支付</text>
              <text v-if="currentTab === '已审已付'">查看</text>
            </text>
          </view>
        </view>
      </view>

      <view class="line" v-show="item !== 10"> </view>
    </block>
  </view>
  <view class="btn-box">
    <u-button
      text="全选/取消"
      color="#fff"
      :customStyle="{ color: '#00DCEE', border: '1px solid #00DCEE' }"
    ></u-button>
    <u-button type="primary" text="批量审核"></u-button>
  </view>
</template>
<script setup lang="ts">
const keyword = ref();
const isShowSearch = ref(false);
const tabList = reactive([
  {
    name: "等待审核",
  },
  {
    name: "已审未付",
  },
  {
    name: "已审已付",
  },
]);
const currentTab = ref("等待审核");
const handleTab = (item: any) => {
  currentTab.value = item.name;
};
</script>
<style lang="scss" scoped>
.search {
  box-shadow: 0rpx 3rpx 16rpx 5rpx rgba(0, 0, 0, 0.2);
  border-radius: 28rpx;
  background: rgba(255, 255, 255, 0.86);
  width: 80%;
  margin: 0px auto;
  margin-top: 30rpx;
  font-weight: 400;
  font-size: 27rpx;
  color: #c1c1c1;
  > view {
    line-height: 60rpx;
    text-align: center;
    display: flex;
    justify-content: center;
  }
  text {
    margin-left: 15rpx;
  }
}
.card-box {
  .c-tab {
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 27rpx;
    color: #999999;
    line-height: 41rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-bottom: 1rpx solid rgba(233, 233, 233, 0.76);
    text {
      padding: 16rpx;
    }
    .active {
      color: $u-primary;
      border-bottom: 5rpx solid $u-primary;
      border-radius: 5rpx;
    }
  }
  .inner-box {
    padding: 40rpx 40rpx;
    .bottom-flex-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .btn {
        border-radius: 24rpx;
        border: 1px solid #00dcee;
        padding: 10rpx 30rpx;
        font-weight: 500;
        font-size: 24rpx;
        color: #00dcee;
        line-height: 41rpx;
      }
    }
  }

  .line {
    height: 18rpx;
    background: #f8f8f8;
  }
  box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12);
  border-radius: 13rpx;
  margin: 0rpx 25rpx;
  margin-top: 35rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 24rpx;
  color: #000000;
  line-height: 41rpx;

  .address {
    margin-right: 30rpx;
  }
  .type,
  .desc {
    font-size: 21rpx;
    color: #999999;
  }
  .desc {
    margin-top: 30rpx;
    display: inline-block;
  }
  .name {
    font-size: 32rpx;
    color: #000000;
  }
  .flex-box {
    font-weight: 400;
    font-size: 32rpx;
    color: #000000;
    line-height: 41rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.btn-box {
  margin-top: 60rpx;
  display: flex;
  background: #ffffff;
  box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 56, 93, 0.12);
  border-radius: 13rpx 13rpx 0rpx 0rpx;
  padding: 25rpx 50rpx;
  position: sticky;
  bottom: 0rpx;
  width: calc(100vw - 100rpx);
  ::v-deep button {
    border-radius: 43rpx;
  }
  ::v-deep button + button {
    margin-left: 50rpx;
  }
}
</style>