hjb_pc/pages/homeIndex/receivingorders.vue

<template>
  <div class="main">
    <div class="banner">
      <div class="order-information">
        <div class="header">接单中心</div>
        <div class="condition-scarch">
          <ul>
            <li>
              <div class="label">收货地址：</div>
              <el-select
                v-model="value"
                class="m-2"
                placeholder="请选择地址信息"
                style="width: 1.875rem; margin-right: 0.0781rem"
              >
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
              <el-input style="width: 1.4583rem" v-model="input" placeholder="详细地址街道..." />
              <div class="search-btn">收索</div>
            </li>
            <li>
              <div class="label">成交价：</div>
              <div class="price-whel">
                <div tabindex="1">不限</div>
                <div tabindex="2">100元以下</div>
                <div tabindex="3">100-200元</div>
                <div tabindex="4">200-300元</div>
                <div tabindex="5">300-400元</div>
                <div tabindex="6">400元以上</div>
              </div>
            </li>
            <li>
              <div class="label">收货时间：</div>
              <div class="price-whel">
                <div tabindex="1">不限</div>
                <div tabindex="2">今天</div>
                <div tabindex="3">1-3天</div>
                <div tabindex="4">4-7天</div>
                <div tabindex="6">1周以上</div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="tabs">
        <div :class="active === 0 ? 'standard active' : 'standard'" @click="active = 0">综合排序</div>
        <div :class="active === 1 ? 'standard active' : 'standard'" @click="active = 1">按配送时间</div>
        <div :class="active === 2 ? 'standard active' : 'standard'" @click="active = 2">按下单时间</div>
        <div :class="active === 3 ? 'standard active sort' : 'standard sort'" @click="active = 3">
          按订单金额
          <div v-if="active==3" class="sort-box">
            <div :class="activeSort == 0 ? 'ascending-orde active-sort' : 'ascending-orde'" @click="activeSort = 0">
              <el-icon><CaretTop /></el-icon>
            </div>
            <div @click="activeSort = 1" :class="activeSort == 1 ? 'descending active-sort' : 'descending'">
              <el-icon><CaretBottom /></el-icon>
            </div>
          </div>
          <div v-else class="sort-box">
            <div class="ascending-orde">
              <el-icon><CaretTop /></el-icon>
            </div>
            <div class="descending">
              <el-icon><CaretBottom /></el-icon>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
import { CaretTop, CaretBottom } from '@element-plus/icons-vue'

const value = ref('')
const active = ref(0)
const input = ref('')
const activeSort = ref(0)
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  .banner {
    width: 6.25rem;
    margin: 0 auto;
    .order-information {
      width: 100%;
      // height: 3.4896rem;
      margin-top: 0.026rem;
      background-color: #fff;
      .header {
        // background-color: #f3f4f8;
        height: 0.2083rem;
        color: #252b3a;
        font-size: 0.0833rem;
        line-height: 0.2083rem;
        padding: 0 0.2604rem;
        display: flex;
        align-items: center;
        font-weight: 700;
        border-bottom: 1px solid #e1e1e3;
      }
      .header::before {
        content: ' ';
        display: block;
        background-color: #ff4e8d;
        width: 0.0156rem;
        height: 0.0833rem;
        margin-right: 0.026rem;
      }
      .condition-scarch {
        padding: 0.1042rem 0.3542rem;
        ul {
          li {
            list-style: none;
            display: flex;
            align-items: center;
            color: #252b3a;
            font-size: 0.0729rem;
            margin:.1042rem 0;
            .label {
              width: 0.3646rem;
              text-align: right;
            }
            .search-btn {
              width: 0.4167rem;
              height: 0.1771rem;
              color: #fff;
              text-align: center;
              font-size: 0.0729rem;
              line-height: 0.1771rem;
              border-radius: 0.1042rem;
              background: linear-gradient(90deg, #ff94d4 0%, #ffddbe 100%);
              margin-left: 0.0521rem;
              cursor: pointer;
            }
            .price-whel {
              display: flex;
              align-items: center;
              div {
                margin-right: 0.2135rem;
                cursor: pointer;
              }
              div:focus,
              div:hover {
                color: #ff4e8d;
              }
            }
          }
        }
      }
    }
    .tabs {
      width: 100%;
      height: 0.2083rem;
      background-color: #fff;
      display: flex;
      margin-top: 0.2344rem;
      margin-bottom: 0.1302rem;
      .standard {
        width: 0.7292rem;
        height: 100%;
        color: #252b3a;
        font-size: 0.0729rem;
        text-align: center;
        line-height: 0.2083rem;
        border-radius: 0.0313rem;
        cursor: pointer;
      }
      .active {
        color: #fff;
        background: linear-gradient(90deg, #ff94d4 0%, #ffddbe 100%);
      }
      .sort {
        display: flex;
        justify-content: center;
        .sort-box {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          margin-left: 0.0365rem;
          color: #b1b6c1;
          div {
            line-height: 0;
            display: inline-block;
          }
          .active-sort {
            color: #fff;
          }
          .descending{
            margin-top: -5px;
          }
        }
      }
    }
  }
}
</style>