修改这个页面使得再按下综合排序后可以出现抽屉里面有销量最高距离最近，好评优先，起送价最低，配送费最低等

要实现按下“综合排序”按钮后显示一个包含多个选项（如“销量最高”、“距离最近”、“好评优先”、“起送价最低”和“配送费最低”）的抽屉效果，你需要进行如下修改：

### 1. 修改模板部分

在 `ul` 标签中添加一个点击事件处理函数 `openSortDrawer()`：

<ul class="showtype">
  <li @click="openSortDrawer">综合排序<i class="fa fa-caret-down" aria-hidden="true" /></li>
  <li>距离最近</li>
  <li>销量最高</li>
  <li>筛选<i class="fa fa-filter" aria-hidden="true" /></li>
</ul>

<!-- 添加抽屉组件 -->
<el-drawer v-model="sortDrawerVisible" title="排序选项" size="30%" direction="rtl">
  <div class="sort-options">
    <div @click="sort Businesses('sales')">销量最高</div>
    <div @click="sort Businesses('distance')">距离最近</div>
    <div @click="sort Businesses('rating')">好评优先</div>
    <div @click="sort Businesses('min_price')">起送价最低</div>
    <div @click="sort Businesses('delivery_fee')">配送费最低</div>
  </div>
</el-drawer>

### 2. 修改样式

为新的抽屉样式添加一些基本的 CSS：

.sort-options {
  display: flex;
  flex-direction: column;
  gap: 1.5vw;
  margin: 2vw;
}

.sort-options div {
  padding: 1.2vw;
  border-radius: 1vw;
  background-color: #F5F5F5;
  color: #393939;
  font-size: 3.5vw;
  text-align: center;
}

.sort-options div:hover {
  background-color: #E0E0E0;
}

### 3. 修改脚本部分

在 `script` 部分定义一个新的变量 `sortDrawerVisible` 来控制抽屉的显示与隐藏，并定义相应的点击处理函数：

<script setup>
import Footer from '../components/Footer.vue';
import { getSessionStorage } from '../common.js';
import { ref, onMounted } from "vue";
import { get, post } from '../api';
import { useRouter } from 'vue-router';
import { ElDrawer, ElMessage, ElMessageBox, ElCarousel, ElCarouselItem } from 'element-plus';

// 其他现有逻辑...

const sortDrawerVisible = ref(false);

const openSortDrawer = () => {
  sortDrawerVisible.value = true;
};

const sortBusinesses = (sortBy) => {
  switch (sortBy) {
    case 'sales':
      accountBusiness.value.sort((a, b) => b.salesVolume - a.salesVolume);
      break;
    case 'distance':
      accountBusiness.value.sort((a, b) => a.distance - b.distance);
      break;
    case 'rating':
      accountBusiness.value.sort((a, b) => b.rating - a.rating);
      break;
    case 'min_price':
      accountBusiness.value.sort((a, b) => a.minOrderPrice - b.minOrderPrice);
      break;
    case 'delivery_fee':
      accountBusiness.value.sort((a, b) => a.deliveryFee - b.deliveryFee);
      break;
    default:
      // 默认排序逻辑
      accountBusiness.value.sort((a, b) => a.id - b.id); // 假设 id 是唯一的且可比较的
  }
  sortDrawerVisible.value = false; // 关闭抽屉
};
</script>

### 4. 更新业务数据模型

假设你已经有了相关的数据属性（例如 `salesVolume`, `distance`, `rating`, `minOrderPrice`, `deliveryFee`），这些属性需要存在于 `accountBusiness` 数组中的每个对象里。

const accountBusiness = ref([
  {
    businessId: 1,
    businessName: '餐厅A',
    salesVolume: 500,
    distance: 1.5,
    rating: 4.5,
    minOrderPrice: 20,
    deliveryFee: 3,
    // 其他属性...
  },
  // 其他业务数据...
]);

这样，在用户点击“综合排序”按钮后，将会弹出一个抽屉，展示多种排序选项。用户选择后，业务列表将按照选定的排序方式进行排序，并关闭抽屉。