MoeNovaClient/pages/crowdFunding/searchOrder.vue

<template>
  <view class="search-container">
    <!-- 搜索框 -->
    <view class="search-header">
      <view class="cancel-btn" @click="goBack">
        <uni-icons type="left" size="22" color="#1F1F1F"></uni-icons>
      </view>
      <view class="search-box">
        <!-- <uni-icons type="search" size="16" color="#999"></uni-icons> -->
        <input type="text" v-model="searchKeyword" placeholder="请输入关键词" confirm-type="search" @confirm="onSearch"
          @input="handleInput" />
        <uni-icons v-if="searchKeyword" type="clear" size="16" color="#999" @click="clearKeyword"></uni-icons>
        <view class="searchImgBox" @click="onSearch">
          <image class="image" src="@/static/home/sy_icon_sousuo.png"></image>
        </view>
      </view>
    </view>
    <view class="reserveASeat" :style="{ height: reserveASeatHeight + 'px' }"></view>
    <!-- 搜索历史 -->
    <view class="search-history" v-if="searchStatus && historyList.length > 0">
      <view class="history-header">
        <text class="title">搜索历史</text>
        <image @click="clearHistory" style="width: 32rpx;height: 32rpx;" class="deleteAll"
          src="@/static/home/sy_icon_shanchu.png"></image>
      </view>
      <view class="history-list">
        <view class="history-item" v-for="(item, index) in displayedHistoryList" :key="index"
          @click="useHistoryKeyword(item)">
          <view>
            <uni-icons type="clock" size="14" color="#999"></uni-icons>
            <view class="history-text">
              <image src="@/static/home/sy_icon_lishijilu.png"></image> {{ item }}
            </view>
          </view>
          <image class="deleteBtn" @click.stop="deleteHistoryItem(item)" src="@/static/icon/close.png"></image>
        </view>
        <view class="expandBtn" @click="toggleHistory">
          <view v-if="!isExpanded">
            <template v-if="historyList.length > 5">
              查看全部
              <image src="@/static/home/sy_icon_chakanquanbu.png"></image>
            </template>
          </view>
          <view v-else class="fold">
            折叠历史记录
            <image src="@/static/home/sy_icon_chakanquanbu.png"></image>
          </view>
        </view>
      </view>
    </view>

    <!-- 搜索结果 -->
    <view class="search-result" v-if="!searchStatus">

         <!-- Tab导航  -->
    <view class="tabs-section" :style="{ height: tabsSectionHeight + 'px' }">
      <scroll-view
        scroll-x
        class="tabs-scroll-view"
        :show-scrollbar="false"
        :scroll-into-view="'tab-' + (currentTab - 1)"
        scroll-with-animation
      >
        <view class="tabs-wrapper">
          <view
            v-for="(tab, index) in tabs"
            :key="index"
            :id="'tab-' + index"
            :class="['tab-item', currentTab === index ? 'active' : '']"
            @click="switchTab(index)"
          >
            <view class="tab" :class="{ active: currentTab === index }">
              <text class="left">{{ tab.name }}</text>
              <view class="line"></view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <!-- <view class="tabs-reserveaseat"></view> -->

      <block v-if="searchResult.length > 0">
        <swiper
      :current="currentTab"
      @change="onSwiperChange"
      class="order-swiper"
      :style="'height:' + swiperHeight + 'px'"
    >
      <swiper-item v-for="tab in tabs" :key="tab.type">
        <view class="order-list">
          <view
            class="order-card"
            v-for="order in getOrdersByTab(tab.type)"
            :key="order.id"
          >
            <view class="order-header">
              <text class="project-title one-omit">{{ order.projectTitle }}</text>
              <text class="tag-initiator" v-if="order.isInitiator">发起人</text>
              <text
                class="order-status"
                :class="'status-' + order.statusType"
                >{{ order.statusText }}</text
              >
            </view>
            <view class="order-main" @click="goToOrderDetail(order)">
              <image class="order-img" :src="order.img" />
              <view class="order-info">
                <view class="order-title">{{ order.title }}</view>
                <view class="order-spec">{{ order.spec }}</view>
              </view>
              <view class="order-price">
                <view>￥{{ order.price }}</view>
                <view class="order-count">x{{ order.count }}</view>
              </view>
            </view>
            <view class="order-actions">
              <!-- 1. 支付失败 -->
              <template v-if="order.statusType === 'payFail'">
                <view class="btn btn-delete" @click="deleteOrder(order)"
                  >删除订单</view
                >
              </template>
              <!-- 2. 待支付 -->
              <template v-else-if="order.statusType === 'waitPay'">
                <view class="btn btn-pay" @click="pay(order)">立即支付</view>
                <view class="btn btn-cancel" @click="cancelOrder(order)"
                  >取消订单</view
                >
              </template>
              <!-- 3. 已付款待发货 -->
              <template v-else-if="order.statusType === 'paid'">
                <view class="btn btn-cancel" @click="cancelOrder(order)"
                  >取消订单</view
                >
              </template>
              <!-- 4. 商品已发货 -->
              <template v-else-if="order.statusType === 'waitReceive'">
                <view class="btn btn-confirm" @click="confirmReceive(order)"
                  >确认收货</view
                >
              </template>
              <!-- 5. 交易完成 -->
              <template v-else-if="order.statusType === 'finish'">
                <!-- <view class="btn btn-comment" @click="commentOrder(order)">去评价</view> -->
                <view class="btn btn-delete" @click="deleteOrder(order)"
                  >删除订单</view
                >
              </template>
              <!-- 6. 已退款 -->
              <template v-else-if="order.statusType === 'refund'">
                <view class="btn btn-delete" @click="deleteOrder(order)"
                  >删除订单</view
                >
              </template>
            </view>
          </view>
        </view>
      </swiper-item>
    </swiper>
      </block>
      <view class="no-data" v-else-if="!isLoading">
        <text>暂无数据</text>
      </view>
    </view>
    <DialogBox ref="DialogBox"></DialogBox>
  </view>
</template>

<script>
import CrowdFundingItem from './components/CrowdFundingItem/CrowdFundingItem.vue';
const HISTORY_KEY = 'search_history';
const MAX_HISTORY = 20;

export default {
  components: { CrowdFundingItem },
  data() {
    return {
      searchKeyword: '', // 搜索关键词
      historyList: [], // 搜索历史
      searchResult: [],
      page: 1,
      pageSize: 20,
      hasMore: true,
      isLoading: false,
      isExpanded: false, // 添加展开/折叠状态变量
      searchStatus: true,//显示搜索历史  false显示搜索结果

      currentTab: 0,
      tabs: [
        { name: "全部", type: "all" },
        { name: "待支付", type: "waitPay" },
        // { name: "已付款", type: "paid" },
        { name: "待发货", type: "waitSend" },
        { name: "待收货", type: "waitReceive" },
        { name: "交易完成", type: "finish" },
        { name: "退款中", type: "refund" },
        { name: "已关闭", type: "payFail" },
      ],
      searchResult: [],
      swiperHeight: 600, // 默认高度，后续可动态调整
      reserveASeatHeight: 0, // 预留空间高度
      tabsSectionHeight: 0, // 标签栏高度
    }
  },
  onLoad() {
    // 加载历史记录
    this.loadHistory();
  },
  onPullDownRefresh() {
    this.onSearch(true);
    uni.stopPullDownRefresh();
  },
  onReachBottom() {
    this.onSearch(false);
  },
  computed: {
    // 添加计算属性以控制显示的历史记录数量
    displayedHistoryList() {
      return this.isExpanded ? this.historyList : this.historyList.slice(0, 5);
    }
  },
  methods: {
    // 加载历史记录
    loadHistory() {
      try {
        const history = uni.getStorageSync(HISTORY_KEY);
        this.historyList = history ? JSON.parse(history) : [];
      } catch (e) {
        console.error('Failed to load search history:', e);
        this.historyList = [];
      }
    },

    // 保存历史记录
    saveHistory() {
      try {
        // 将当前搜索词添加到历史记录开头
        if (this.searchKeyword && !this.historyList.includes(this.searchKeyword)) {
          console.log(this.historyList, 11111);
          this.historyList.unshift(this.searchKeyword);
          console.log(this.historyList, 11111);

          // 限制历史记录数量
          if (this.historyList.length > MAX_HISTORY) {
            this.historyList = this.historyList.slice(0, MAX_HISTORY);
          }
          uni.setStorageSync(HISTORY_KEY, JSON.stringify(this.historyList));
        }
      } catch (e) {
        console.error('Failed to save search history:', e);
      }
    },

    // 清空历史记录
    clearHistory() {

      this.$refs['DialogBox'].confirm({
        title: '提示',
        content: '确定要清空搜索历史吗？',
        DialogType: 'inquiry',
        btn1: '否',
        btn2: '是',
        animation: 0
      }).then((res) => {
        if (res.isConfirm) {
          this.historyList = [];
          uni.setStorageSync(HISTORY_KEY, '[]');
        }
      })


    },
    // 清空单个历史记录
    deleteHistoryItem(item) {
      console.log(item, '删除历史记录');

      this.$refs['DialogBox'].confirm({
        title: '提示',
        content: '确定要删除搜索历史吗？',
        DialogType: 'inquiry',
        btn1: '否',
        btn2: '是',
        animation: 0
      }).then((res) => {
        if (res.isConfirm) {
          const index = this.historyList.indexOf(item);
          if (index !== -1) {
            this.historyList.splice(index, 1);
          }
          uni.setStorageSync(HISTORY_KEY, JSON.stringify(this.historyList));
        }
      })


    },

    // 使用历史记录中的关键词
    useHistoryKeyword(keyword) {
      this.searchKeyword = keyword;
      this.onSearch();
    },

    // 处理搜索
    async onSearch(isRefresh = true) {
      if (!this.searchKeyword.trim()) return;
      if (isRefresh) {
        this.page = 1;
        this.hasMore = true;
        this.searchResult = [];
      }
      if (!this.hasMore || this.isLoading) return;
      this.isLoading = true;
   
      try {
        const [err, res] = await uni.request({
          url: this.$apiHost + '/Order/getlist?type=buyCrowdfund',
          method: 'GET',
          data: {
            offset: this.page,
            keyword: this.searchKeyword,
            uuid: getApp().globalData.uuid,
          skey: getApp().globalData.skey,
          }
        });
        
        if (!err && res && res.data && res.data.list) {
          var list = res.data.list;  
          list = res.data.list.map(order => {
            let statusType = '';
            let statusText = ''; 
            switch (order.status) {
              case 0:
                statusType = 'waitPay';
                statusText = '待支付';
                break;
              case 1:
                statusType = 'waitSend';
                statusText = '待发货';
                break;
              case 2:
                statusType = 'waitReceive';
                statusText = '商品已发货';
                break;
              case 3:
                statusType = 'finish';
                statusText = '已收货';
                break;
              case 5:
                statusType = 'finish';
                statusText = '交易完成';
                break;
              case 6:
                statusType = 'refund';
                statusText = '退款中';
                break;
              case 8:
                statusType = 'payFail';
                statusText = '已关闭';
                break;
              case 9:
                statusType = 'finish';
                statusText = '已完成';
                break;
              default:
                statusType = 'waitPay';
                statusText = '待支付';
            }
            return {
              ...order,
              statusType,
              statusText,
              projectTitle: order.name,
              title: order.name,
              spec: order.name2,
              img: order.image,
              price: order.money,
              count: order.num,
              isInitiator: false
            };
          });
          
          console.log(list, "搜索结果2");
          if (isRefresh) {
            this.searchResult = list;
          } else {
            this.searchResult = [...this.searchResult, ...list];
          }
          this.hasMore = this.searchResult.length < (res.data.data.total || 0);
          this.page++;
        } else {
          this.hasMore = false;
        }
      } catch (e) {
        this.hasMore = false;
      }
      this.isLoading = false;
      // 保存历史记录
      this.saveHistory();
      this.searchStatus = false;
    },

    // 清空搜索框
    clearKeyword() {
      this.searchKeyword = '';
    },

    // 处理输入
    handleInput(e) {
      this.searchKeyword = e.detail.value;
      if (this.searchKeyword.trim() == '') {
        this.searchStatus = true;
      }
      console.log(this.historyList, e.detail.value);

    },

    // 返回上一页
    goBack() {
      uni.navigateBack();
    },

    // 添加展开/折叠方法
    toggleHistory() {
      this.isExpanded = !this.isExpanded;
    },
    goToDetail(id) {
      uni.navigateTo({ url: '/pages/crowdFunding/crowdfundingDetails?id=' + id });
    },
    handleSearch() {
      if (!this.searchKeyword.trim()) return;
      // 保存到历史记录
      this.saveHistory();
      this.searchStatus = false;
      // 加载搜索结果
      this.queryList();
    },

    goPages(url) {
      uni.navigateTo({
        url: url,
      });
    },
    goBack() {
      uni.navigateBack();
    },
    switchTab(index) {
      this.currentTab = index;
      // 切换标签时刷新数据
      this.onSearch();
    },
    onSwiperChange(e) {
      this.currentTab = e.detail.current;
      this.$nextTick(() => {
        this.updateSwiperHeight();
      });
    },
    getOrdersByTab(type) {
      if (type === "all") return this.searchResult; 
      return this.searchResult.filter((o) => o.statusType === type);
    },
    updateSwiperHeight() {
      // 动态获取当前swiper-item内容高度
      this.$nextTick(() => {
        const query = uni.createSelectorQuery().in(this);
        query
          .selectAll(".reserveASeat, .tabs-section")
          .boundingClientRect((rects) => {
            if (rects && rects.length >= 2) {
              this.reserveASeatHeight = rects[0].height || 0;
              this.tabsSectionHeight = rects[1].height || 0;
              
              // 计算swiper高度 = 视窗高度 - 预留空间高度 - 标签栏高度 - 状态栏高度
              const windowHeight = uni.getSystemInfoSync().windowHeight;
              this.swiperHeight = windowHeight - this.reserveASeatHeight - this.tabsSectionHeight;
            }
          })
          .exec();
      });
    },
    goToOrderDetail(order) {
      uni.navigateTo({
        url: "/pages/crowdFunding/orderDetail?orderId=" + order.id,
      });
    },
    pay(order) {
      uni.navigateTo({
        url: "/pages/crowdFunding/orderDetail?orderId=" + order.id,
      });
      /* 支付逻辑 */
    },
    deleteOrder(order) {
      /* 删除逻辑 */
       uni.navigateTo({
        url: "/pages/crowdFunding/orderDetail?orderId=" + order.id,
      });
    },
    cancelOrder(order) {
      /* 取消/退款逻辑 */
       uni.navigateTo({
        url: "/pages/crowdFunding/orderDetail?orderId=" + order.id,
      });
    },
    confirmReceive(order) {
      /* 确认收货逻辑 */
       uni.navigateTo({
        url: "/pages/crowdFunding/orderDetail?orderId=" + order.id,
      });
    },
    commentOrder(order) {
      /* 评价逻辑 */
       uni.navigateTo({
        url: "/pages/crowdFunding/orderDetail?orderId=" + order.id,
      });
    },
   
  },
  mounted() {
    this.updateSwiperHeight();
  },
  watch: {
    currentTab() {
      this.$nextTick(() => {
        this.updateSwiperHeight();
      });
    },
  },
}
</script>

<style lang="scss">
.search-container {
  background-color: #f2f6f2;
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
  position: relative;

  .search-header {
    background-color: #ffffff;
    padding: 16rpx 30rpx;
    display: flex;
    align-items: center;
    padding-top: calc(16rpx + var(--status-bar-height));
    padding-left: 40rpx;
    padding-right: 28rpx;
    padding-bottom: 16rpx;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9;
    width: 100%;
    box-sizing: border-box;

    .search-box {
      flex: 1;
      height: 72rpx;
      background-color: #f1f1f1;
      border-radius: 36rpx;
      display: flex;
      align-items: center;
      padding: 0 24rpx;
      padding-left: 14rpx;
      width: 622rpx;
      height: 72rpx;
      background: #FFFFFF;
      border-radius: 36rpx;
      border: 6rpx solid #000000;
      position: relative;
      left: 0;
      top: 0;
      box-sizing: border-box;
      max-width: calc(100% - 60rpx);

      input {
        flex: 1;
        height: 100%;
        margin: 0 16rpx;
        font-size: 24rpx;
        font-family: 'PingFang SC-Medium';
        width: auto;
        min-width: 0;
      }

      .searchImgBox {
        width: 88rpx;
        height: 56rpx;
        background: #1F1F1F;
        border-radius: 32rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        right: 6rpx;
        transform: translateY(-50%);
        flex-shrink: 0;

        .image {
          width: 36rpx;
          height: 36rpx;
        }
      }
    }

    .cancel-btn {
      color: #1f1f1f;
      width: 36rpx;
      height: 100%;
      margin-right: 24rpx;
      font-weight: 700;
      flex-shrink: 0;
    }
  }

  .reserveASeat {
    width: 100%;
    min-height: calc(108rpx + var(--status-bar-height));
  }

  .search-history {
    background-color: #ffffff;
    padding: 30rpx;
    padding-top: 15rpx;
    width: 100%;
    box-sizing: border-box;

    .history-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15rpx;
      width: 100%;
      box-sizing: border-box;

      .title {
        font-size: 30rpx;
        color: #333;
        font-weight: bold;
      }
    }

    .history-list {
      transition: all 1s;
      overflow: hidden;
      width: 100%;
      box-sizing: border-box;

      .history-item {
        display: flex;
        align-items: center;
        padding: 18rpx 0;
        justify-content: space-between;
        width: 100%;
        box-sizing: border-box;

        .history-text {
          font-size: 28rpx;
          color: #666;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          font-weight: 400;
          color: #1F1F1F;
          margin-left: 6rpx;
          font-family: 'PingFang SC-Bold';
          flex: 1;
          overflow: hidden;
          min-width: 0;

          image {
            width: 32rpx;
            height: 32rpx;
            margin-right: 16rpx;
            flex-shrink: 0;
          }
        }

        .deleteBtn {
          width: 30rpx;
          height: 30rpx;
          flex-shrink: 0;
        }
      }
    }
  }

  .search-result {
    background-color: #f6faf6;
    height: calc(100vh - 108rpx - var(--status-bar-height) );  
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
  }

  .no-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60rpx 0;
    // background-color: #fff;
    width: 100%;
    box-sizing: border-box;

    text {
      color: #808080;
      font-size: 28rpx;
    }
  }
}

.expandBtn {
  view {
    font-family: 'PingFang SC-Bold';
    color: #999999;
    display: flex;
    align-items: center;
    justify-content: center;

    &.fold {
      image {
        transform: rotate(180deg) translateY(-2rpx);
      }
    }

    image {
      width: 28rpx;
      height: 28rpx;
    }
  }
}

.items-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24rpx 12rpx;
  padding: 16rpx 12rpx 0 12rpx;
  background: #f2f6f2;
}
.loading-more { text-align: center; color: #999; font-size: 26rpx; padding: 24rpx 0; }
.no-more { text-align: center; color: #ccc; font-size: 24rpx; padding: 20rpx 0; }


.search-result {
   
  background: #f6faf6;
  .custom-navbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 90rpx;
    padding: 0 20rpx;
    padding-top: var(--status-bar-height);
    background-color: #ffffff;
    position: sticky;
    top: 0;
    height: calc(90rpx + var(--status-bar-height));
    z-index: 100;

    .navbar-left {
      height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .fa-angle-left {
        font-size: 48rpx;
        color: #333;
      }

    }
    .navbar-center {
      .navbar-title {
        max-width: 450rpx;
        font-family: "PingFang SC-Bold";
        font-weight: 400;
        font-size: 32rpx;
        color: #1f1f1f;
        padding-left: 20rpx;
      }
    }

    .navbar-right {
      width: 80rpx;
      height: 80rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      .fa-ellipsis-h {
        font-size: 36rpx;
        color: #333;
      }
    }
  }
  .tabs-reserveaseat{
    width: 100vw;
    height: 72rpx;
  }
  .tabs-section {
    background: #fff;
    border-bottom: 6rpx solid #f6faf6;
    z-index: 100;
    min-height: 72rpx;
    .tabs-scroll-view {
      width: 100vw;
      box-sizing: border-box;
      padding-left: 50rpx;

      .tabs-wrapper {
        display: flex;
        flex-direction: row;
        align-items: center;
        height: 72rpx;

        .tab {
          position: relative;
          width: auto;
          height: 48rpx;
          font-size: 32rpx;
          font-family: "PingFang SC-Bold";
          color: #999;
          font-weight: 400;
          transition: all 0.5s;
          margin-right: 40rpx;

          .left {
            white-space: nowrap;
            display: inline-block;
          }

          ::after {
            content: "";
            position: absolute;
            right: -15rpx;
            top: 0;
            width: 96rpx;
            height: 48rpx;
            background-image: url("../../static/me/wd_img_qiehuan.png");
            background-size: auto 100%;
            background-repeat: no-repeat;
            opacity: 0;
          }

          &.active {
            color: #1f1f1f;

            text {
              font-family: "PingFang SC-Bold";
            }

            ::after {
              opacity: 0.7;
            }
          }
        }
      }
    }
  }

  .order-list {
    padding: 0 0 32rpx 0;
    height: calc(100vh - 180rpx - var(--status-bar-height));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    
    .order-card {
      background: #fff;
      border-radius: 18rpx;
      margin: 32rpx 24rpx 0 24rpx;
      padding: 24rpx;

      .order-header {
        display: flex;
        align-items: center;
        margin-bottom: 12rpx;

        .project-title {
          font-size: 28rpx;
          font-weight: bold;
          color: #1f1f1f;
          margin-right: 40rpx;
        }

        .tag-initiator {
          font-size: 20rpx;
          color: #b6ff4b;
          background: #1f1f1f;
          border-radius: 8rpx;
          padding: 2rpx 12rpx;
          margin-right: 12rpx;
        }

        .order-status {
          font-size: 24rpx;
          margin-left: auto;
          white-space: nowrap;

          &.status-waitPay {
            color: #888;
          }

          &.status-paid {
            color: #1f1f1f;
          }

          &.status-waitSend {
            color: #888;
          }

          &.status-waitReceive {
            color: #888;
          }

          &.status-waitComment {
            color: #ff9900;
          }

          &.status-refund {
            color: #1f1f1f;
          }

          &.status-finish {
            color: #888;
          }
        }
      }

      .order-main {
        display: flex;
        align-items: center;
        margin-bottom: 12rpx;

        .order-img {
          width: 120rpx;
          height: 120rpx;
          border-radius: 12rpx;
          margin-right: 18rpx;
        }

        .order-info {
          flex: 1;

          .order-title {
            font-size: 28rpx;
            color: #1f1f1f;
            font-weight: bold;
            margin-bottom: 8rpx;
          }

          .order-spec {
            font-size: 24rpx;
            color: #888;
          }
        }

        .order-price {
          text-align: right;

          view {
            font-size: 28rpx;
            color: #1f1f1f;
          }

          .order-count {
            font-size: 22rpx;
            color: #888;
          }
        }
      }

      .order-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 18rpx;

        .btn {
          min-width: 120rpx;
          height: 56rpx;
          line-height: 56rpx;
          border-radius: 32rpx;
          text-align: center;
          font-size: 26rpx;
          padding: 0 24rpx;
          background: #f6faf6;
          color: #1f1f1f;
          border: 2rpx solid #e5e5e5;

          &.btn-pay {
            background: #1f1f1f;
            color: #acf934;
            border: none;
          }

          &.btn-delete {
            background: #f6faf6;
            color: #888;
            border: 2rpx solid #e5e5e5;
          }

          &.btn-cancel {
            background: #f6faf6;
            color: #888;
            border: 2rpx solid #e5e5e5;
          }

          &.btn-remind {
            background: #fffbe6;
            color: #1f1f1f;
            border: 2rpx solid #ffe58f;
          }

          &.btn-confirm {
            background: #1f1f1f;
            color: #acf934;
            border: none;
          }

          &.btn-comment {
            background: #fff;
            color: #1f1f1f;
            border: 2rpx solid #e5e5e5;
          }

          &.btn-refund {
            background: #fff;
            color: #1f1f1f;
            border: 2rpx solid #e5e5e5;
          }
        }
      }
    }
  }

  .order-swiper {
    width: 100vw;
    background: transparent;
    transition: height 0.3s;
    flex: 1;
  }
}
</style>