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 class="line-items">
        <div class="item">
          <div class="header">
            <div class="address">河南省驻马店市上蔡县</div>
            <div class="time">下单时间：2024-01-01 21:31:25</div>
          </div>
          <div class="order-info">
            <div class="image">
              <div class="tag">普通订单</div>
            </div>
            <div class="iine-info">
              <div class="receipt-time">
                <div class="label">
                  收货时间：<span class="time">2024-01-08 不限时段</span>
                  <span class="timeout">离接单结束还剩：6小时</span>
                </div>
              </div>
              <div class="goods-type"><div class="label">商品类型：<span class="type">鲜花</span></div></div>
              <div class="content">
                <div class="label">商品总数：<span class="number">1</span></div>
              </div>
              <div class="audit-information">
                <div class="label">审核信息：<span class="information">需要完成下单方审核鲜花实拍图</span></div>
              </div>
              <div class="order-description">
                <div class="label">订单描述：<span class="description">这里是一段订单的描述~</span></div>
              </div>
            </div>
            <div class="submit-box">
              <div class="submit">立即报价</div>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="header">
            <div class="address">河南省驻马店市上蔡县</div>
            <div class="time">下单时间：2024-01-01 21:31:25</div>
          </div>
          <div class="order-info">
            <div class="image">
              <div class="tag">普通订单</div>
            </div>
            <div class="iine-info">
              <div class="receipt-time">
                <div class="label">
                  收货时间：<span class="time">2024-01-08 不限时段</span>
                  <span class="timeout">离接单结束还剩：6小时</span>
                </div>
              </div>
              <div class="goods-type"><div class="label">商品类型：<span class="type">鲜花</span></div></div>
              <div class="content">
                <div class="label">商品总数：<span class="number">1</span></div>
              </div>
              <div class="audit-information">
                <div class="label">审核信息：<span class="information">需要完成下单方审核鲜花实拍图</span></div>
              </div>
              <div class="order-description">
                <div class="label">订单描述：<span class="description">这里是一段订单的描述~</span></div>
              </div>
            </div>
            <div class="submit-box">
              <div class="submit">立即报价</div>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="header">
            <div class="address">河南省驻马店市上蔡县</div>
            <div class="time">下单时间：2024-01-01 21:31:25</div>
          </div>
          <div class="order-info">
            <div class="image">
              <div class="tag">普通订单</div>
            </div>
            <div class="iine-info">
              <div class="receipt-time">
                <div class="label">
                  收货时间：<span class="time">2024-01-08 不限时段</span>
                  <span class="timeout">离接单结束还剩：6小时</span>
                </div>
              </div>
              <div class="goods-type"><div class="label">商品类型：<span class="type">鲜花</span></div></div>
              <div class="content">
                <div class="label">商品总数：<span class="number">1</span></div>
              </div>
              <div class="audit-information">
                <div class="label">审核信息：<span class="information">需要完成下单方审核鲜花实拍图</span></div>
              </div>
              <div class="order-description">
                <div class="label">订单描述：<span class="description">这里是一段订单的描述~</span></div>
              </div>
            </div>
            <div class="submit-box">
              <div class="submit">立即报价</div>
            </div>
          </div>
        </div>
      </div>
      <div class="page">
         <div style="display: flex;justify-content: center;"> <el-pagination background layout="prev, pager, next" :total="1000" /></div>
          <div class="txt">为了提高查询效率，仅显示近期订单</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: 0.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;
          }
        }
      }
    }
    .line-items {
      margin-top: 0.1719rem;
      .item {
        padding: 0.1198rem 0.1771rem;
        background-color: #fff;
        margin: .0521rem 0;
        .header {
          display: flex;
          .address {
            width: 2.8125rem;
            color: #252b3a;
            font-size: 0.0833rem;
            font-weight: 600;
          }
          .time {
            color: #8a8e99;
            font-size: 0.0625rem;
          }
        }
        .order-info {
          display: flex;
          width: 100%;
          padding: .0781rem 0 0 .0521rem;
          .image {
            width: 0.7292rem;
            height: 0.7292rem;
            background-color: #d9d9d9;
            position: relative;
            .tag{
              position: absolute;
              bottom: 0;
              width: 100%;
              height: .125rem;
              color: #fff;
            text-align: center;
            line-height: .125rem;
            background: linear-gradient(90deg, #ff94d4 0%, #ffddbe 100%);
            }
          }
          .iine-info {
            width: 4.1667rem;
            margin-left: 0.0521rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .label {
              color: #8a8e99;
              font-size: 0.0625rem;
            }
            .receipt-time{
              .time{
                color: #FF4E8D;
                font-size: .0729rem;
                font-weight: 600;
                margin-right: .1042rem;
              }
            }
            .goods-type{
              .type{
                color: #252b3a;
              }
            }
            .content{
              .number{
                color: #FF4E8D;
                font-size: .0729rem;
                font-weight: 600;
              }
            }
            .audit-information{
              .information{
                color: #252b3a;
              }
            }
            .order-description{
              .description{
                color: #252b3a;
              }
            }
          }
          .submit-box{
            // height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: end;
            margin-left: .2604rem;
            .submit{

            width: .5833rem;
            height: .1667rem;
            color: #fff;
            text-align: center;
            line-height: .1667rem;
            background: linear-gradient(90deg, #ff94d4 0%, #ffddbe 100%);
          }
          }
         
        }
      }
    }
    .page{
      height: 1.0417rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-content: center;
      .txt{
        text-align: center;
        color: #252B3A;
        margin-top: .1563rem;
      }
    }
  }
}
</style>