<template>
  <view class="main">
    <view class="mainTop" :style="{ height: menu.bottom + 'px', paddingTop: menu.top + 'px' }">
      <image class="backIcon" src="https://eshangtech.com/caiyunyiImg/backIcon.png" @click="handleBack" />

      <view class="searchBox" @click="handleGoOrderSearch">
        <image class="searchIcon" src="/static/images/home/searchIcon.svg" />
        <text style="color: #999999;font-size: 28rpx;">搜索我的订单</text>
        <!-- <input class="searchText" placeholder="搜索我的订单" confirm-type="search" v-modal="searchText"
          /> -->
      </view>
    </view>
    <!-- @confirm="handleSearchOrder" -->

    <view class="tabTypeBox">
      <view :class="selectBigTab === item.value ? 'bigTabItem selectBigTabItem' : 'bigTabItem'"
        v-for="(item, index) in bigTabList" :key="index" @click="handleBigTab(item.value)">
        {{ item.label }}
      </view>
    </view>
    <view scroll-x class="smallTypeBox">
      <view :class="currentTab === item.value ? 'smallTabItem selectSmallTabItem' : 'smallTabItem'"
        v-for="(item, index) in tabList" :key="index" @click="handleTab(item.value)"
        :style="{ background: item.value === 7 && selectBigTab === 3 ? 'transparent' : '' }">
        <template v-if="item.value === 7 && selectBigTab === 3 ? false : true">
          {{ item.label }}
          <image v-if="currentTab === item.value" class="closeIcon"
            src="https://eshangtech.com/caiyunyiImg/closeIcon.png" />
        </template>
      </view>
    </view>


    <!-- 订单列表 -->
    <scroll-view :scroll-y="true" class="orderListBox"
      :style="{ height: `calc(100vh - ${menu.bottom}px - 42px - 35px - 35px)` }" @scrolltolower="handleScrollTolower">
      <view>
        <!-- style="width:100% ;height: calc(100% - 30px);" -->
        <view class="orderItem" v-for="(item, index) in orderList" :key="index" @click="goEvaluate(item)">
          <view class="orderItemTop">
            <view class="orderItemTopLeft">
              <image class="orderItemIcon" src="https://eshangtech.com/caiyunyiImg/storeIcon.png" />
              <view class="orderItemLabel">{{ item.SHOPNAME || "" }}</view>
            </view>
            <view class="orderItemTopRight">
              <view class="statusBox">{{ item.SALEBILL_STATE_TEXT || "" }}</view>
            </view>
          </view>

          <view class="orderItemCenter"
            v-for="(subItem, subIndex) in item.GOODSList.slice(0, item.isShowMore ? item.GOODSList.length : 5)"
            :key="subIndex" @click.stop="handleGoShopDetail(item, subIndex)">
            <view class="orderItemCenterLeft">
              <image class="orderItemShopImg"
                :src="subItem.IMAGE_URL ? subItem.IMAGE_URL.split(',')[0] : 'https://eshangtech.com/ShopICO/no-picture.png'" />
            </view>
            <view class="orderItemCenterRight">
              <view class="orderItemCenterRightLeft">
                <view class="orderItemRightLeftLabel">{{ subItem.COMMODITY_NAME || "" }}</view>
                <view class="orderItemRightLeftSpecifications"></view>
              </view>
              <view class="orderItemCenterRightRight">
                <view class="unitPrice">¥{{ subItem.AVERAGE_PRICE || '-' }}</view>
                <view class="orderItemQuantity">x{{ subItem.ORDER_COUNT || '-' }}</view>
              </view>
            </view>
          </view>

          <div v-if="item.GOODSList.length > 5" class="is_more" @click.stop="handleClickShowMoreShop(item)">
            <img :src="item.isShowMore
              ? '/static/images/home/up_arrow.png'
              : '/static/images/home/down_arrow.png'
              " alt="" class="arrow_icon" />
            共{{ item.GOODSList.length }}个品项
          </div>

          <!-- 实付款 -->
          <view class="orderItemMoneyBox">
            <span class="orderItemUnit">实付款：</span>
            <span class="orderItemMoney">¥{{ item.PAY_AMOUNT || "" }}</span>
          </view>

          <view class="orderItemBottom">
            <view class="orderItemBottomLeft">
              <view class="orderItemBottomLeftMore" v-if="false">更多</view>
            </view>
            <view class="orderItemBottomRight">
              <view class="orderItemBottomRightEvaluate"
                v-if="item.SALEBILL_STATE > 3000 && item.SALEBILL_STATE <= 5000">
                评价
              </view>
              <view class="orderItemBottomRightBuyAgain" v-if="item.SALEBILL_STATE === 1005"
                @click.stop="goEvaluate(item)">
                去付款</view>
              <view class="orderItemBottomRightBuyAgain" v-if="item.SALEBILL_STATE === 2010"
                @click.stop="handleConfirmReceipt(item)">确认收货</view>
              <!-- <view class="orderItemBottomRightBuyAgain" @click.stop="handleGoStore">再次购买</view> -->
            </view>
          </view>
        </view>
      </view>

      <view class="inBottom" v-if="pageMsg.isOver">
        <text class="bottomText">我是有底线的</text>
      </view>
    </scroll-view>



    <!-- 下面是老的 订单页面 -->
    <!-- <div class="fliter">
      <div class="tabs" v-if="searchType !== '6'">
        <div class="tabs_item" :class="currentTab === item.value ? 'tab_active' : ''" v-for="(item, idx) in tabList"
          :key="idx" @click="handleTab(item.value)">
          {{ item.label }}
        </div>
      </div>

      <div class="sum_count" v-if="TotalCount > 0">
        共<span>{{ TotalCount }}</span>笔订单, 合计<span>{{ TotalAmount }}</span>元
      </div>
    </div> -->
    <!-- <scroll-view v-if="orderList && orderList.length > 0" class="srcollView" scroll-y="true" refresher-enabled="true"
      @refresherrefresh="handleRefresherrefresh" :refresher-triggered="triggered" @scrolltolower="handleScrollTolower">
      <div @click="goEvaluate(item)" v-for="(item, idx) in orderList" :key="idx">
        <OrderItem :obj="item" @handleGetOrderList="handleGetTypeOrderList" />
      </div>
      <view class="inBottom">
        <text class="bottomText">{{
          pageMsg.isOver ? "我是有底线的" : "下拉加载更多"
        }}</text>
      </view>
    </scroll-view>
    <no-data text="暂无订单数据" v-else /> -->
  </view>
</template>
<script>
import { mapGetters } from "vuex";
import NoData from "../../../components/noData.vue";
import OrderItem from "./components/orderItem.vue";
export default {
  data() {
    return {
      tabList: [
        // {
        //   label: "全部订单",
        //   value: 1,
        // },
        {
          label: "待付款",
          value: 2,
        },
        {
          label: "待发货",
          value: 3,
        },
        {
          label: "待收货",
          value: 4,
        },
        {
          label: "已完成",
          value: 5,
        },
        {
          label: "退/换货",
          value: 7,
        },
      ],
      currentTab: 1,
      orderList: [],
      pageMsg: {
        pageIndex: 1,
        pageSize: 10,
        isOver: false,
      },
      searchType: "",
      pageType: "",
      isFirst: true,
      triggered: false,
      menu: {},
      bigTabList: [
        { label: "全部订单", value: 1 },
        { label: "彩云驿商城", value: 2 },
        { label: "工会商城", value: 3 },
      ],
      selectBigTab: 1, // 选择的大tab
      searchText: "",
      currentListJSON: "",// 当前订单列表的JSON
    };
  },
  components: {
    OrderItem,
    NoData,
  },
  computed: {
    ...mapGetters({
      user: "user",
    }),
  },
  onLoad(query) {
    this.menu = uni.getMenuButtonBoundingClientRect();
    console.log("query", query);
    if (query.type) {
      this.searchType = query.type;
      this.currentTab = Number(this.searchType) + 1;
    }
    if (query.pageType) {
      this.pageType = query.pageType;
    }
    console.log("this.currentTab", this.currentTab);
    let type =
      this.currentTab === 1
        ? "1005,1010,2010,3000,8000,8010,8020,8900,8999,9000,9999"
        : this.currentTab === 2
          ? "1005"
          : this.currentTab === 3
            ? "1010,2000"
            : this.currentTab === 4
              ? "2010"
              : this.currentTab === 5
                ? "3000"
                : this.currentTab === 7
                  ? "8000,8010,8020,8900"
                  : "";
    // 获取订单数据
    this.handleGetOrderList(type);

    // this.$utils.addUserBehaviorNew();
    this.$utils.addUserBehaviorNew({
      behaviorRecordDesc: "进入商城订单页面"
    });
  },
  // 页面显示的时候调用一下 判断请求的结果JSON 和 新的结果 是否一致 不一致 就换成新的
  onShow() {
    if (this.isFirst) {
      this.isFirst = false
    } else {
      let type =
        this.currentTab === 1
          ? "1005,1010,2010,3000,8000,8010,8020,8900,8999,9000,9999"
          : this.currentTab === 2
            ? "1005"
            : this.currentTab === 3
              ? "1010,2000"
              : this.currentTab === 4
                ? "2010"
                : this.currentTab === 5
                  ? "3000"
                  : this.currentTab === 7
                    ? "8000,8010,8020,8900"
                    : "";
      const req = {
        action_type: "GetOrderList",
        salebillType: this.searchType === "6" ?
          this.selectBigTab === 1 ? '3001,3999' :
            this.selectBigTab === 2 ? '3999' :
              this.selectBigTab === 3 ? '3001' : ''
          :
          this.selectBigTab === 1 ? '3000,3001,3002' :
            this.selectBigTab === 2 ? '3000,3002' :
              this.selectBigTab === 3 ? '3001' : '',
        salebillState: type || "",
        PageIndex: 1,
        pageSize: this.pageMsg.pageIndex * this.pageMsg.pageSize,
        ownerUnitId: 911,
        requestType: "application/x-www-form-urlencoded",
      };
      this.$api.postCoop(req).then(data => {
        let list = data.Data ? data.Data.List : [];
        let resList = [];
        if (list && list.length > 0) {
          if (this.currentTab === 5) {
            list.forEach((item) => {
              if (
                item.SALEBILL_STATE >= 3000 &&
                item.SALEBILL_STATE !== 8999 &&
                item.SALEBILL_STATE !== 9000 &&
                item.SALEBILL_STATE !== 9999
              ) {
                resList.push(item);
              }
            });
          } else {
            list.forEach((item) => {
              resList.push(item);
            });
          }
        }

        let newJSON = JSON.stringify(resList)
        if (newJSON !== this.currentListJSON) {
          this.orderList = resList
          this.currentListJSON = newJSON
        }
      })
    }
  },
  methods: {
    // 跳转订单搜索页面
    handleGoOrderSearch() {
      uni.navigateTo({
        url: "/pages/order/orderSearch/index"
      })
    },
    // 确认收获
    handleConfirmReceipt(obj) {
      console.log('obj', obj);

      let _this = this
      uni.showModal({
        title: '提示',
        content: '确认已收货？',
        success: async function (res) {
          if (res.confirm) {
            const req = {
              action_type: "UpdateOrderState",
              action_data: obj.SALEBILL_ID,
              saleBillChildId: obj.SALEBILL_CHILD_ID || "",
              SALEBILL_STATE: 3000,
            }
            const data = await _this.$api.getCoop(req)
            console.log('data', data);
            if (data.error !== 1) {
              uni.showToast({
                title: data.msg,
                icon: 'none'
              })
            } else {
              uni.showToast({
                title: "收货成功！",
                icon: 'none'
              })
              let type =
                this.currentTab === 1
                  ? "1005,1010,2010,3000,8000,8010,8020,8900,8999,9000,9999"
                  : this.currentTab === 2
                    ? "1005"
                    : this.currentTab === 3
                      ? "1010,2000"
                      : this.currentTab === 4
                        ? "2010"
                        : this.currentTab === 5
                          ? "3000"
                          : this.currentTab === 7
                            ? "8000,8010,8020,8900"
                            : "";
              _this.handleGetOrderList(type);
            }

          } else if (res.cancel) {
          }
        }
      });
    },
    // 点击展开更多商品
    handleClickShowMoreShop(obj) {
      console.log('obj', obj);
      obj.isShowMore = !obj.isShowMore
      this.$forceUpdate()
    },
    // 点击再次跳转 工会商城 或 彩云驿商城
    handleGoStore() {

    },
    // 返回上个页面
    handleBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    // 大tab切换
    handleBigTab(val) {
      this.selectBigTab = val
      console.log('this.currentTab', this.currentTab);

      if (val === 3 && this.currentTab === 7) {
        this.currentTab = 2
      }
      console.log('this.selectBigTab', this.selectBigTab);

      this.orderList = []
      this.pageMsg = {
        pageIndex: 1,
        pageSize: 10,
        isOver: false,
      }
      let type =
        this.currentTab === 1
          ? "1005,1010,2010,3000,8000,8010,8020,8900,8999,9000,9999"
          : this.currentTab === 2
            ? "1005"
            : this.currentTab === 3
              ? "1010,2000"
              : this.currentTab === 4
                ? "2010"
                : this.currentTab === 5
                  ? "3000"
                  : this.currentTab === 7
                    ? "8000,8010,8020,8900"
                    : "";
      this.handleGetOrderList(type);
      this.$forceUpdate()
    },
    // 滚动到底部 加载更多
    handleScrollTolower() {
      this.pageMsg.pageIndex = this.pageMsg.pageIndex + 1;
      let type =
        this.currentTab === 1
          ? "1005,1010,2010,3000,8000,8010,8020,8900,8999,9000,9999"
          : this.currentTab === 2
            ? "1005"
            : this.currentTab === 3
              ? "1010,2000"
              : this.currentTab === 4
                ? "2010"
                : this.currentTab === 5
                  ? "3000"
                  : this.currentTab === 7
                    ? "8000,8010,8020,8900"
                    : "";
      this.handleGetOrderList(type);
    },
    handleTab(val) {
      if (this.selectBigTab === 3 && val === 7) {
        this.currentTab = 2
      }


      this.pageMsg = {
        pageIndex: 1,
        pageSize: 10,
        isOver: false,
      };

      if (this.currentTab === val) {
        this.currentTab = ""
      } else {
        this.currentTab = val;
      }

      this.orderList = [];
      let type =
        this.currentTab === 1
          ? "1005,1010,2010,3000,8000,8010,8020,8900,8999,9000,9999"
          : this.currentTab === 2
            ? "1005"
            : this.currentTab === 3
              ? "1010,2000"
              : this.currentTab === 4
                ? "2010"
                : this.currentTab === 5
                  ? "3000"
                  : this.currentTab === 7
                    ? "8000,8010,8020,8900"
                    : "";
      this.handleGetOrderList(type);
    },
    // 下拉刷新的方法
    async handleRefresherrefresh() {
      this.orderList = [];
      this.pageMsg = {
        pageIndex: 1,
        pageSize: 10,
        isOver: false,
      };
      this.triggered = true;
      let type =
        this.currentTab === 1
          ? "1005,1010,2010,3000,8000,8010,8020,8900,8999,9000,9999"
          : this.currentTab === 2
            ? "1005"
            : this.currentTab === 3
              ? "1010,2000"
              : this.currentTab === 4
                ? "2010"
                : this.currentTab === 5
                  ? "3000"
                  : this.currentTab === 7
                    ? "8000,8010,8020,8900"
                    : "";
      await this.handleGetOrderList(type);
      this.triggered = false;
    },
    // 没传类型的方法
    async handleGetTypeOrderList() {
      let type =
        this.currentTab === 1
          ? "1005,1010,2010,3000,8000,8010,8020,8900,8999,9000,9999"
          : this.currentTab === 2
            ? "1005"
            : this.currentTab === 3
              ? "1010,2000"
              : this.currentTab === 4
                ? "2010"
                : this.currentTab === 5
                  ? "3000"
                  : this.currentTab === 7
                    ? "8000,8010,8020,8900"
                    : "";
      await this.handleGetOrderList(type);
    },
    // 获取订单数据
    async handleGetOrderList(status) {
      if (this.pageMsg.isOver) {
        return;
      }
      uni.showLoading({
        title: "正在加载...",
        mask: true,
      });
      const req = {
        action_type: "GetOrderList",
        salebillType: this.searchType === "6" ?
          this.selectBigTab === 1 ? '3001,3999' :
            this.selectBigTab === 2 ? '3999' :
              this.selectBigTab === 3 ? '3001' : ''
          :
          this.selectBigTab === 1 ? '3000,3001,3002' :
            this.selectBigTab === 2 ? '3000,3002' :
              this.selectBigTab === 3 ? '3001' : '',
        salebillState: status || "",
        // salebillType:
        //   this.searchType === "6"
        //     ? this.pageType === "UnionMall"
        //       ? 3001
        //       : 3999
        //     : this.pageType === "UnionMall"
        //       ? 3001
        //       : "3000,3002",
        // salebillState: this.searchType === "6" ? "" : status || "",
        PageIndex: this.pageMsg.pageIndex,
        pageSize: this.pageMsg.pageSize,
        ownerUnitId: 911,
        requestType: "application/x-www-form-urlencoded",
      };
      const data = await this.$api.postCoop(req);
      console.log("data", data);
      let oldOrderList = [];
      if (this.orderList && this.orderList.length > 0) {
        oldOrderList = JSON.parse(JSON.stringify(this.orderList));
      }
      console.log("oldOrderList", oldOrderList);
      // 手动添加待付款、待发货、待收货
      let list = data.Data ? data.Data.List : [];
      let resList = [];
      if (list && list.length > 0) {
        if (this.currentTab === 5) {
          list.forEach((item) => {
            if (
              item.SALEBILL_STATE >= 3000 &&
              item.SALEBILL_STATE !== 8999 &&
              item.SALEBILL_STATE !== 9000 &&
              item.SALEBILL_STATE !== 9999
            ) {
              resList.push(item);
            }
          });
        } else {
          list.forEach((item) => {
            resList.push(item);
          });
        }
      }
      if (resList && resList.length < 10) {
        this.pageMsg.isOver = true;
        this.$forceUpdate()
      }
      this.orderList = oldOrderList.concat(resList);
      this.currentListJSON = JSON.stringify(this.orderList)
      console.log("获取订单数据2", this.orderList);
      uni.hideLoading();
    },
    goEvaluate(item) {
      console.log("item", item);
      uni.navigateTo({
        url:
          "/pages/order/orderdetail/index?sellchildid=" +
          (item.SALEBILL_CHILD_ID || "") +
          "&orderInternal=" +
          item.SALEBILL_ID +
          "&orderStatus=" +
          item.SALEBILL_STATE +
          "&SUPPLIER_NAME=" +
          item.SUPPLIER_NAME,
      });
    },
    handleGoShopDetail(item, index) {
      let obj = item.GOODSList[index]
      uni.navigateTo({
        url: `/pages/shopPages/shopDetail/index?id=${obj.COMMODITY_ID}`,
      });
    }
  },
};
</script>

<style lang="less" scoped>
.main {
  width: 100vw;
  height: 100vh;

  .mainTop {
    width: 100%;
    box-sizing: border-box;
    padding: 0 24rpx;
    display: flex;
    align-items: center;

    .backIcon {
      width: 38rpx;
      height: 38rpx;
    }

    .searchBox {
      width: calc(100% - 52rpx - 24rpx - 200rpx);
      height: 100%;
      margin-left: 24rpx;
      background-color: #ececec;
      border-radius: 48rpx;
      box-sizing: border-box;
      padding: 20rpx 32rpx;
      display: flex;
      align-items: center;

      .searchIcon {
        width: 24rpx;
        height: 24rpx;
        margin-right: 20rpx;
      }

      .searchText {
        font-family: PingFang-SC, PingFang-SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #000;
        line-height: 40rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
    }
  }

  .tabTypeBox {
    width: 100%;
    height: 30px;
    box-sizing: border-box;
    padding: 0 40rpx;
    margin-top: 24rpx;
    display: flex;
    align-items: center;

    .bigTabItem {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #333333;
      line-height: 40rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
      margin-right: 56rpx;
    }

    .selectBigTabItem {
      color: #F83D3D;
      position: relative;
    }

    .selectBigTabItem::after {
      content: "";
      display: block;
      position: absolute;
      bottom: -12rpx;
      left: 50%;
      width: 48rpx;
      height: 6rpx;
      background: #F83D3D;
      border-radius: 2rpx;
      transform: translateX(-50%);
    }
  }

  .smallTypeBox {
    width: 100%;
    height: 32px;
    margin-top: 22rpx;
    box-sizing: border-box;
    padding: 0 42rpx 0 30rpx;
    white-space: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* 增强移动端滚动体验 */

    &::-webkit-scrollbar {
      display: none;
      /* Chrome, Safari, Opera */
    }

    .smallTabItem {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #333333;
      line-height: 40rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
      box-sizing: border-box;
      padding: 8rpx 24rpx;
      background-color: #fff;
      display: inline-block;
      border-radius: 8rpx;
      margin-right: 12rpx;
    }

    .selectSmallTabItem {
      border: 1px solid #F83D3D;
      box-sizing: border-box;
      border-radius: 8rpx;
      color: #F83D3D;
      display: inline-flex;
      align-items: center;
      background-color: rgba(248, 61, 61, 0.1);
      padding: 6rpx 2rpx 6rpx 12rpx;

      .closeIcon {
        width: 24rpx;
        height: 24rpx;
        margin-left: 8rpx;
      }
    }
  }

  .orderListBox {
    width: 100%;
    box-sizing: border-box;
    margin-top: 20px;

    .orderItem {
      width: 100%;
      box-sizing: border-box;
      padding: 22rpx 32rpx;
      background-color: #fff;
      margin-bottom: 24rpx;

      .orderItemTop {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .orderItemTopLeft {
          width: 70%;
          display: flex;
          align-items: center;

          .orderItemIcon {
            width: 36rpx;
            height: 36rpx;
            margin-right: 16rpx;
          }

          .orderItemLabel {
            display: inline-block;
            width: calc(100% - 52rpx);
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 28rpx;
            color: #333333;
            line-height: 34rpx;
            text-align: left;
            font-style: normal;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }

        .orderItemTopRight {
          width: 30%;

          .statusBox {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #F83D3D;
            line-height: 40rpx;
            text-align: right;
            font-style: normal;
            text-transform: none;
          }
        }
      }

      .orderItemCenter {
        width: 100%;
        margin-top: 22rpx;
        display: flex;
        align-items: center;
        margin-bottom: 16rpx;

        .orderItemCenterLeft {
          width: 160rpx;
          height: 160rpx;
          margin-right: 12rpx;

          .orderItemShopImg {
            width: 100%;
            height: 100%;
            border-radius: 16rpx;
          }
        }

        .orderItemCenterRight {
          width: calc(100% - 160rpx - 12rpx);
          height: 160rpx;
          display: flex;

          .orderItemCenterRightLeft {
            width: calc(100% - 180rpx);

            .orderItemRightLeftLabel {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #333333;
              text-align: left;
              font-style: normal;
              text-transform: none;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              overflow: hidden;
            }

            .orderItemRightLeftSpecifications {
              font-family: AppleSystemUIFont;
              font-size: 24rpx;
              color: #999999;
              line-height: 30rpx;
              text-align: left;
              font-style: normal;
              text-transform: none;
              margin-top: 14rpx;
            }
          }

          .orderItemCenterRightRight {
            width: 180rpx;
            display: flex;
            flex-direction: column;
            align-items: flex-end;

            .unitPrice {
              font-family: AppleSystemUIFont;
              font-size: 24rpx;
              color: #333333;
              line-height: 34rpx;
              text-align: left;
              font-style: normal;
              text-transform: none;
            }

            .orderItemQuantity {
              font-family: AppleSystemUIFont;
              font-size: 24rpx;
              color: #999999;
              line-height: 34rpx;
              text-align: left;
              font-style: normal;
              text-transform: none;
              margin-top: 10rpx;
            }
          }
        }
      }

      .is_more {
        width: 400rpx;
        height: 40rpx;
        margin: auto;
        text-align: center;
        //display: flex;
        //flex-direction: row;
        //align-items: center;
        color: #9fa3a8;
        font-size: 28rpx;

        .arrow_icon {
          width: 26rpx;
          height: 16rpx;
          margin-right: 16rpx;
        }
      }

      .orderItemMoneyBox {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .orderItemUnit {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #333333;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }

        .orderItemMoney {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #333333;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }

      .orderItemBottom {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 32rpx;

        .orderItemBottomLeft {
          .orderItemBottomLeftMore {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #333333;
            line-height: 40rpx;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
        }

        .orderItemBottomRight {
          display: flex;
          align-items: center;

          .orderItemBottomRightEvaluate {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #333333;
            line-height: 40rpx;
            text-align: left;
            font-style: normal;
            text-transform: none;
            padding: 4rpx 26rpx;
            background: #F2F5F6;
            border-radius: 4rpx;
            margin-right: 34rpx;
          }

          .orderItemBottomRightBuyAgain {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #E84D38;
            line-height: 40rpx;
            text-align: left;
            font-style: normal;
            text-transform: none;
            padding: 4rpx 26rpx;
            background: #F2F5F6;
            border-radius: 4rpx;
          }
        }
      }
    }

    .inBottom {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;

      .bottomText {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 26rpx;
        color: #d0d0d0;
        line-height: 40rpx;
        text-align: justify;
        font-style: normal;
        position: relative;
        padding: 6rpx 0;
      }

      .bottomText::after {
        content: "";
        width: 30vw;
        height: 2rpx;
        background: #e0e0e0;
        position: absolute;
        left: -32vw;
        top: 50%;
      }

      .bottomText::before {
        content: "";
        width: 30vw;
        height: 2rpx;
        background: #e0e0e0;
        position: absolute;
        right: -32vw;
        top: 50%;
      }
    }
  }



  .fliter {
    background: #fff;
    margin-bottom: 24rpx;

    .select_box {
      display: flex;
      flex-direction: row;
      padding: 16rpx 32rpx 8rpx;
      align-items: center;
      justify-content: space-between;

      .search_box {
        width: 558rpx;
        height: 72rpx;
        background: #f2f4f5;
        display: flex;
        flex-direction: row;
        align-items: center;
        border-radius: 36rpx;

        img {
          width: 35rpx;
          height: 35rpx;
          margin: auto 16rpx auto 24rpx;
        }

        .select_input {
          width: 476rpx;
          border: none;
          height: 40rpx;
          font-size: 28rpx;
        }
      }

      .select_btn {
        display: flex;
        flex-direction: row;
        align-items: center;
        font-size: 28rpx;
        color: #6c737a;

        img {
          width: 35rpx;
          height: 35rpx;
          margin-right: 12rpx;
        }
      }
    }

    .tabs {
      width: 100%;
      height: 88rpx;
      display: flex;

      .tabs_item {
        text-align: center;
        color: #6c737a;
        font-size: 28rpx;
        line-height: 88rpx;
        flex: 1;
      }

      .tab_active {
        color: #1890ff;
        font-weight: 600;
        position: relative;
      }

      .tab_active:after {
        content: "";
        display: block;
        position: absolute;
        bottom: 2rpx;
        left: 50%;
        margin-left: -24rpx;
        width: 48rpx;
        height: 6rpx;
        background: #1890ff;
        border-radius: 2rpx;
      }
    }

    .sum_count {
      height: 72rpx;
      background: #fff;
      border-radius: 2rpx;
      padding-left: 32rpx;
      line-height: 72rpx;
      font-size: 28rpx;
      color: #6c737a;
      border-top: 2rpx solid #f2f4f5;

      span {
        color: #020e1a;
      }
    }
  }

  .inBottom {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .bottomText {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 26rpx;
      color: #d0d0d0;
      line-height: 40rpx;
      text-align: justify;
      font-style: normal;
      position: relative;
      padding: 6rpx 0;
    }

    .bottomText::after {
      content: "";
      width: 30vw;
      height: 2rpx;
      background: #e0e0e0;
      position: absolute;
      left: -32vw;
      top: 50%;
    }

    .bottomText::before {
      content: "";
      width: 30vw;
      height: 2rpx;
      background: #e0e0e0;
      position: absolute;
      right: -32vw;
      top: 50%;
    }
  }


  // .srcollView {
  //   width: 100%;
  //   height: calc(100vh - 160rpx);

  //   .inBottom {
  //     width: 100%;
  //     display: flex;
  //     align-items: center;
  //     justify-content: center;

  //     .bottomText {
  //       font-family: PingFangSC, PingFang SC;
  //       font-weight: 400;
  //       font-size: 26rpx;
  //       color: #d0d0d0;
  //       line-height: 40rpx;
  //       text-align: justify;
  //       font-style: normal;
  //       position: relative;
  //       padding: 6rpx 0;
  //     }

  //     .bottomText::after {
  //       content: "";
  //       width: 30vw;
  //       height: 2rpx;
  //       background: #e0e0e0;
  //       position: absolute;
  //       left: -32vw;
  //       top: 50%;
  //     }

  //     .bottomText::before {
  //       content: "";
  //       width: 30vw;
  //       height: 2rpx;
  //       background: #e0e0e0;
  //       position: absolute;
  //       right: -32vw;
  //       top: 50%;
  //     }
  //   }
  // }
}
</style>