yikangyang-wx/package_sub/pages/Shop/ProductDetail.vue

<template>
  <view class="wrap">
    <!--    <view class="back-icon" :style="{ top: tabTop }" @click="$u.throttle(back, 500)">-->
    <!--      <u-icon name="arrow-left" :size="44"></u-icon>-->
    <!--    </view>-->
    <view style="height: 763rpx"></view>
    <u-swiper
      style="position: fixed; top: 0; left: 0; right: 0"
      mode="none"
      :height="763"
      :list="swiper"
      @change="(e) => (swiperIndex = e)"
    ></u-swiper>

    <view class="content">
      <view class="swiper-num">
        {{ swiperIndex + 1 }} / {{ swiper.length }}
      </view>
      <view class="topbar">
        <text>便宜又放心</text>
      </view>

      <view class="container">
        <view class="price">
          <view>
            <text>¥</text>
            <text style="font-size: 32rpx; padding-left: 6rpx">{{
              productSku ? productSku.price : detail.price
            }}</text>
          </view>
        </view>
        <view class="title">
          {{ detail.name }}
          <text v-if="productSku">｜{{ productSku.name }}</text>
        </view>
        <view class="switch-type">
          <scroll-view :scroll-x="true">
            <view class="switch-type-scroll">
              <view
                class="switch-type-item"
                :class="{
                  'switch-type-item-active': form.product_sku_id === tag.id,
                }"
                :style="{
                  background: !tag.stock_num ? '#aaa' : '',
                }"
                v-for="tag in detail.product_skus"
                :key="tag.id"
                @tap="
                  () => {
                    if (tag.stock_num) {
                      form.product_sku_id = tag.id;
                    }
                  }
                "
              >
                {{ tag.name }}
              </view>
            </view>
          </scroll-view>
          <u-icon
            name="arrow-right"
            :size="34"
            color="#333"
            @tap="showType = true"
          ></u-icon>
        </view>
        <view class="goods">
          <view class="goods-row">
            <view class="goods-row__icon">
              <u-icon name="car" :size="30" color="#333"></u-icon>
            </view>
            <view class="goods-row__text"> 多仓发货 </view>
          </view>
          <view class="goods-row">
            <view class="goods-row__icon">
              <u-icon name="heart" :size="30" color="#333"></u-icon>
            </view>
            <view class="goods-row__text"> 买贵必赔｜退货宝｜假一赔十 </view>
          </view>
          <view class="goods-row">
            <view class="goods-row__icon">
              <u-icon name="tags" :size="30" color="#333"></u-icon>
            </view>
            <view class="goods-row__text"> 品牌｜型号 </view>
          </view>
        </view>
        <view class="split"></view>
        <view class="tabs" :style="'top:' + tabTop + 'px'">
          <view
            class="search"
            :style="'padding-right:' + menuButtonLeft + 'px'"
          >
            <u-icon
              style="padding: 0 20rpx"
              name="arrow-left"
              :size="36"
              color="#333"
              @tap="$u.route({ type: 'back' })"
            ></u-icon>
            <view
              class="flex1"
              @click="$u.route({ url: '/package_sub/pages/Shop/Search' })"
            >
              <u-search
                :show-action="false"
                shape="round"
                placeholder="请输入搜索内容"
              ></u-search>
            </view>
            <button
              class="clear-btn"
              style="padding: 0 14rpx"
              open-type="share"
            >
              <u-icon name="share" :size="36" color="#333"></u-icon>
            </button>
            <button
              class="clear-btn"
              style="padding: 0 14rpx"
              @click="$u.route({ url: '/package_sub/pages/Shop/Cart' })"
            >
              <u-icon name="shopping-cart" :size="36" color="#333"></u-icon>
            </button>
          </view>
          <view
            class="tab"
            :class="{ 'tab-active': index === currentTab }"
            v-for="(tab, index) in tabs"
            :key="tab.text"
            @click="tabClick(index)"
          >
            {{ tab.text }}
          </view>
        </view>
       <!-- <view class="comment">
          <view
            class="panel-title"
            @tap="
              $u.route({
                url: '/package_sub/pages/Shop/Reply',
              })
            "
          >
            <text class="flex1">评论</text>
            <u-icon name="arrow-right" :size="28" color="#333"></u-icon>
          </view>

          <view
            class="comment-container"
            v-for="(res, index) in commentList"
            :key="res.id"
          >
            <view class="left"
              ><image :src="res.url" mode="aspectFill"></image
            ></view>
            <view class="right">
              <view class="top">
                <view class="name">{{ res.name }}</view>
                <view class="like" :class="{ highlight: res.isLike }">
                  <view class="num">{{ res.likeNum }}</view>
                  <u-icon
                    v-if="!res.isLike"
                    name="thumb-up"
                    :size="30"
                    color="#9a9a9a"
                  ></u-icon>
                  <u-icon
                    v-if="res.isLike"
                    name="thumb-up-fill"
                    :size="30"
                  ></u-icon>
                </view>
              </view>
              <view class="right-content">{{ res.contentText }}</view>
              <view class="bottom">
                {{ res.date }}
              </view>
            </view>
          </view>
        </view>
        -->
		<view class="detail">
          <view class="panel-title"> 宝贝详情 </view>
          <view>
            <u-parse :html="detail.content" lazy-load />
          </view>
        </view>
        <view class="recommend">
          <view class="panel-title"> 推荐商品 </view>
          <view class="recommend-wrap">
            <view
              class="product-item"
              v-for="item in recommendPro"
              :key="item.id"
              @tap="
                $u.throttle(() => {
                  toDetail(item);
                }, 500)
              "
            >
              <view class="top">
                <image
                  class="product-item__img"
                  :src="item.image ? item.image.url : ''"
                  mode="aspectFill"
                ></image>
              </view>
              <view class="bottom">
                <view class="product-item__title">
                  {{ item.name }}
                </view>
                <view class="product-item__price">
                  <view>
                    <text>¥</text>
                    <text>{{ item.price }}</text>
                    <text>起</text>
                  </view>
                  <!--                  <u-button-->
                  <!--                    :hair-line="false"-->
                  <!--                    type="warning"-->
                  <!--                    ripple-->
                  <!--                    shape="circle"-->
                  <!--                    :custom-style="{-->
                  <!--                      height: '28rpx',-->
                  <!--                      'line-height': '28rpx',-->
                  <!--                      padding: '0 6rpx',-->
                  <!--                      color: '#fff',-->
                  <!--                      'font-size': '17rpx',-->
                  <!--                    }"-->
                  <!--                    >加入购物车</u-button-->
                  <!--                  >-->
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-back-top :scroll-top="scrollTop" :top="400"></u-back-top>
    <!-- 类型选择 -->
    <u-popup
      v-model="showType"
      mode="bottom"
      border-radius="14"
      safe-area-inset-bottom
      @close="(isSkuSubmit = false), (isImmediateBuy = false)"
    >
      <view class="content">
        <scroll-view scroll-y="true" style="height: 800rpx">
          <view class="product">
            <view
              class="product-item"
              :class="{
                'product-item-active': form.product_sku_id === item.id,
              }"
              v-for="item in detail.product_skus || []"
              :key="item.id"
              @click="
                () => {
                  if (item.stock_num) {
                    form.product_sku_id = item.id;
                  }
                }
              "
            >
              <view class="top">
                <image
                  class="product-item__img"
                  :src="
                    item.image
                      ? item.image.url
                      : detail.image
                      ? detail.image.url
                      : ''
                  "
                  mode="aspectFill"
                ></image>
                <image
                  class="product-item__soldout"
                  v-if="!item.stock_num"
                  src="~@/package_sub/static/Shop/yishouxing.png"
                  mode="aspectFit"
                ></image>
              </view>
              <view class="bottom">
                <view class="product-item__title">
                  {{ item.name }}
                </view>
                <view class="product-item__price">
                  <view>
                    <text>¥</text>
                    <text>{{ item.price }}</text>
                  </view>
                </view>
              </view>
              <u-icon
                class="product-item-active__check"
                name="checkmark-circle-fill"
                color="red"
                :size="40"
                v-if="form.product_sku_id === item.id"
              ></u-icon>
            </view>
          </view>
        </scroll-view>
        <view
          class="sku-num"
          style="padding-left: 10%; padding-top: 8rpx"
          v-if="isSkuSubmit"
        >
          <text>数量：</text>
          <u-number-box
            v-model="form.num"
            :min="1"
            :max="productSku.stock_num"
          ></u-number-box>
        </view>
        <view class="confirm-btn">
          <u-button
            :hair-line="false"
            :custom-style="{
              'background-image':
                'linear-gradient(-90deg, #e26165 0%, #c10d12 94%, #c10d12 100%)',
              color: '#fff',
              width: '80%',
              'margin-top': '20rpx',
            }"
            @click="confirm"
            >确定</u-button
          >
        </view>
      </view>
    </u-popup>
    <!--    -->
    <view class="navigation">
      <view class="left">
        <button class="item" open-type="contact">
          <u-icon name="server-fill" :size="40" color="#333"></u-icon>
          <view class="text u-line-1">客服</view>
        </button>
        <view
          class="item car"
          @tap="$u.route({ url: '/package_sub/pages/Shop/Cart' })"
        >
          <u-badge
            class="car-num"
            :count="cartNum"
            type="error"
            :offset="[-3, -6]"
          ></u-badge>
          <u-icon name="shopping-cart" :size="40" color="#333"></u-icon>
          <view class="text u-line-1">购物车</view>
        </view>
      </view>
      <view class="right">
        <view
          class="cart btn u-line-1"
          @click="(isSkuSubmit = true), (showType = true)"
          >加入购物车</view
        >
        <view
          class="buy btn u-line-1"
          @click="
            (isImmediateBuy = true), (isSkuSubmit = true), (showType = true)
          "
          >立即购买</view
        >
      </view>
    </view>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      scrollTop: 0,
      swiperIndex: 0,
      showType: false,
      detail: {},
      form: {
        num: 1,
        product_id: "",
        product_sku_id: "",
      },
      tabs: [
        {
          text: "宝贝",
          targetClass: "content",
        },
        // {
        //   text: "评价",
        //   targetClass: "comment",
        // },
        {
          text: "详情",
          targetClass: "detail",
        },
        {
          text: "推荐",
          targetClass: "recommend",
        },
      ],
      tabHeight: null,
      currentTab: 0,

      recommendPro: [],
      timer: null,
      cartNum: 0,

      commentList: [],
      isSkuSubmit: false,
      isImmediateBuy: false,
    };
  },
  computed: {
    menuButtonLeft() {
      return (
        uni.getSystemInfoSync().windowWidth -
        uni.getMenuButtonBoundingClientRect().left
      );
    },
    tabTop() {
      return uni.getMenuButtonBoundingClientRect().bottom;
    },
    swiper() {
      return this.detail?.product_images?.map((i) => i.image?.url) || [];
    },
    productSku() {
      return this.detail?.product_skus?.find(
        (sku) => sku.id === this.form.product_sku_id
      );
    },
  },
  methods: {
    toDetail(item) {
      this.$u.route({
        url: "/package_sub/pages/Shop/ProductDetail",
        params: {
          id: item.id,
        },
      });
    },
    // 获取一个目标元素的高度
    getElRect(elClass, dataVal) {
      return new Promise((resolve, reject) => {
        const query = uni.createSelectorQuery().in(this);
        query
          .select("." + elClass)
          .fields(
            {
              rect: true,
            },
            (res) => {
              // 如果节点尚未生成，res值为null，循环调用执行
              if (!res) {
                setTimeout(() => {
                  this.getElRect(elClass);
                }, 10);
                return;
              }
              if (dataVal) {
                this["dataVal"] = res.top;
              }

              resolve(res.top);
            }
          )
          .exec();
      });
    },
    async getCartNum() {
      try {
        const res = await this.$u.api.cartList({
          page: 1,
          page_size: 1,
        });
        this.cartNum = res.total;
      } catch (err) {}
    },
    async getComment() {
      this.commentList = [
        {
          id: 1,
          name: "叶轻眉",
          date: "12-25 18:58",
          contentText:
            "我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的",
          url: "https://cdn.uviewui.com/uview/template/SmilingDog.jpg",
          allReply: 12,
          likeNum: 33,
          isLike: false,
          replyList: [
            {
              name: "uview",
              contentStr:
                "uview是基于uniapp的一个UI框架，代码优美简洁，宇宙超级无敌彩虹旋转好用，用它！",
            },
            {
              name: "粘粘",
              contentStr:
                "今天吃什么，明天吃什么，晚上吃什么，我只是一只小猫咪为什么要烦恼这么多",
            },
          ],
        },
        {
          id: 2,
          name: "叶轻眉1",
          date: "01-25 13:58",
          contentText:
            "我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的",
          allReply: 0,
          likeNum: 11,
          isLike: false,
          url: "https://cdn.uviewui.com/uview/template/niannian.jpg",
        },
        {
          id: 3,
          name: "叶轻眉2",
          date: "03-25 13:58",
          contentText:
            "我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的",
          allReply: 0,
          likeNum: 21,
          isLike: false,
          url: "../../../static/logo.png",
          replyList: [
            {
              name: "uview",
              contentStr:
                "uview是基于uniapp的一个UI框架，代码优美简洁，宇宙超级无敌彩虹旋转好用，用它！",
            },
            {
              name: "豆包",
              contentStr: "想吃冰糖葫芦粘豆包，但没钱5555.........",
            },
          ],
        },
        {
          id: 4,
          name: "叶轻眉3",
          date: "06-20 13:58",
          contentText:
            "我不信伊朗会没有后续反应，美国肯定会为今天的事情付出代价的",
          url: "https://cdn.uviewui.com/uview/template/SmilingDog.jpg",
          allReply: 0,
          likeNum: 150,
          isLike: false,
        },
      ];
    },
    async getRecommendPro() {
      try {
        const res = await this.$u.api.productList({
          page: 1,
          page_size: 6,
          sort_name: "sort",
        });
        this.recommendPro = res.list?.data;
      } catch (err) {}
    },
    async pageScrollHandle() {
      try {
        if (!this.tabHeight) {
          const rect = await Promise.all(
            this.tabs.map((tab, index) => this.getElRect(tab.targetClass))
          );
          this.tabHeight = rect;
        }
      } catch (err) {
        console.error(err);
      }
    },
    tabClick(index) {
      this.currentTab = index;
      uni.pageScrollTo({
        scrollTop: this.tabHeight[index] + 1,
      });
    },
    back() {
      this.$u.route({
        type: "back",
      });
    },
    async getDetail(id) {
      try {
        const res = await this.$u.api.productDetail({
          id,
        });
        this.detail = res.detail;
        // if (res.detail?.product_skus?.length > 0) {
        //   this.form["product_sku_id"] = res.detail.product_skus[0].id;
        // }
        this.$nextTick((_) => {
          setTimeout((_) => {
            this.pageScrollHandle();
          }, 500);
        });
      } catch (err) {
        console.error(err);
      }
    },
    async confirm() {
      try {
        if (this.isSkuSubmit) {
          if (!this.form.product_sku_id) {
            this.$refs.uToast.show({
              title: "请选择产品规格",
              type: "warning",
            });
            return;
          }
          if (!this.form.num) {
            this.$refs.uToast.show({
              title: "请选择产品数量",
              type: "warning",
            });
            return;
          }
          const res = await this.$u.api.cartSave(this.form);
          this.$refs.uToast.show({
            title: "已加入购物车",
            type: "success",
          });
          this.getCartNum();
        }
        if (this.isImmediateBuy) {
          this.$u.route({
            url: "/package_sub/pages/Shop/Pay",
          });
        }
        this.showType = false;
      } catch (err) {}
    },
  },
  created() {
    this.getRecommendPro();
    this.getCartNum();
    this.getComment();
  },
  onLoad(option) {
    if (option.id) {
      this.form.product_id = option.id;
      this.getDetail(option.id);
    }
  },
  onPageScroll({ scrollTop }) {
    if (this.timer) return;
    this.timer = setTimeout(() => {
      // 节流
      this.timer = null;
      this.scrollTop = scrollTop;
      if (scrollTop < this.tabHeight[1]) {
        this.currentTab = 0;
      } else if (
        scrollTop >= this.tabHeight[1] &&
        scrollTop - this.tabTop - 86 < this.tabHeight[2]
      ) {
        this.currentTab = 1;
      } else if (
        scrollTop - this.tabTop - 86 >= this.tabHeight[2] &&
        scrollTop - this.tabTop - 86 < this.tabHeight[3]
      ) {
        this.currentTab = 2;
      } else {
        this.currentTab = 3;
      }
    }, 100);
  },
};
</script>

<style>
page {
  background: #f5f5f5;
}
</style>
<style lang="scss" scoped>
::v-deep .u-swiper-indicator {
  bottom: 46rpx !important;
}
.clear-btn {
  border: none;
  background-color: transparent;
  line-height: 1.5;
  font-size: 28rpx;
  color: #333;
  padding: 0;
  &::after {
    border: none;
  }
}
.flex1 {
  flex: 1;
}
.wrap {
  position: relative;
}
.back-icon {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 2;
  top: 40rpx;
  left: 30rpx;
  border-radius: 100%;
  filter: drop-shadow(0 0 2rpx #fff);
}
.content {
  margin-top: -40rpx;
  position: relative;

  .swiper-num {
    color: #fff;
    position: absolute;
    top: -60rpx;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.3);
    border-radius: 36rpx;
    padding: 4rpx 10rpx;
    line-height: 1;
  }
  .topbar {
    height: 122rpx;
    border-radius: 40rpx 40rpx 0 0;
    background-image: linear-gradient(
      90deg,
      #c10d12 0%,
      #c10d12 4%,
      #e26165 99%,
      #e26165 100%
    );

    text {
      font-size: 22rpx;
      color: #ffffff;
      float: right;
      padding-top: 26rpx;
      padding-right: 52rpx;
    }
  }
  .container {
    border-radius: 40rpx 40rpx;
    margin-top: -40rpx;
    background: #fff;
    min-height: calc(100vh - 729rpx);
    position: relative;

    .price {
      font-size: 30rpx;
      color: red;
      padding: 38rpx 30rpx 0 34rpx;
      position: relative;
      z-index: 4;
    }
    .title {
      font-size: 28rpx;
      line-height: 1.5;
      color: #333333;
      padding: 38rpx 30rpx 0;
      position: relative;
      z-index: 4;
    }
    .switch-type {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 42rpx calc(34rpx + 34rpx) 0 34rpx;
      position: relative;
      z-index: 4;

      &-scroll {
        display: flex;
        align-items: center;
      }
      &-item {
        flex-shrink: 0;
        border-radius: 6rpx;
        background-color: #f5f5f5;
        padding: 22rpx 20rpx;
        font-size: 20rpx;
        color: #333333;
        border: 1px solid transparent;
        margin-right: 18rpx;
        max-width: 240rpx;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;

        &-active {
          background-color: #fdf3f3;
          border-color: #c5151a;
          color: #c20d12;
        }
      }
    }
    .goods {
      position: relative;
      z-index: 4;
      background: #fff;
      padding: 48rpx 36rpx 0;

      &-row {
        display: flex;
        align-items: center;

        &__text {
          font-size: 22rpx;
          color: #333;
          padding-left: 18rpx;
        }
      }
    }
    .split {
      background: #f5f5f5;
      height: 30rpx;
      width: 100vw;
      margin-top: 30rpx;
      position: relative;
      z-index: 4;
      &::before {
        content: "";
        z-index: 4;
        position: absolute;
        background: #fff;
        left: 0;
        right: 0;
        top: -30rpx;
        height: 30rpx;
      }
    }
    .tabs {
      width: 100vw;
      display: flex;
      align-items: center;
      position: sticky;
      z-index: 3;
      top: 0;
      background: #fff;
      filter: drop-shadow(0 1rpx 1rpx #00000042);

      .search {
        display: flex;
        align-items: center;
        z-index: 3;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background: #fff;
        transform: translateY(-100%);
        &::before {
          content: "";
          position: absolute;
          background: #fff;
          left: 0;
          right: 0;
          height: 200rpx;
          top: -200rpx;
          z-index: 3;
        }
      }
      .tab {
        flex: 1;
        text-align: center;
        font-size: 24rpx;
        color: #333333;
        padding: 26rpx 0;

        &-active {
          color: #000;
        }
      }
    }
    .comment {
      position: relative;
      z-index: 2;

      .comment-container {
        display: flex;
        padding: 0 34rpx;
        margin-top: 38rpx;
        .left {
          image {
            width: 54rpx;
            height: 54rpx;
            border-radius: 50%;
            background-color: #f2f2f2;
          }
        }
        .right {
          flex: 1;
          padding-left: 14rpx;
          font-size: 22rpx;
          .top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10rpx;
            .name {
              color: #333;
              font-size: 24rpx;
            }
            .like {
              display: flex;
              align-items: center;
              color: #9a9a9a;
              font-size: 26rpx;
              .num {
                margin-right: 4rpx;
                color: #9a9a9a;
              }
            }
            .highlight {
              color: $uni-color-primary;
              .num {
                color: $uni-color-primary;
              }
            }
          }
          .right-content {
            margin-bottom: 10rpx;
          }
          .bottom {
            margin-top: 20rpx;
            display: flex;
            font-size: 24rpx;
            color: #9a9a9a;
          }
        }
      }
    }
    .detail {
      position: relative;
      z-index: 2;
    }
    .recommend {
      padding-bottom: 40rpx;
      position: relative;
      z-index: 2;
      &-wrap {
        padding: 0 20rpx;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 20rpx 56rpx;

        .product-item {
          .bottom {
            padding-top: 16rpx;
          }
          &__img {
            width: 100%;
            height: 266rpx;
          }
          &__title {
            font-size: 25rpx;
            color: #333333;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            word-break: break-all;
          }
          &__price {
            display: flex;
            align-items: center;
            justify-content: space-between;

            text {
              color: red;
            }
            text:nth-child(1) {
              font-size: 21rpx;
            }
            text:nth-child(2) {
              font-size: 32rpx;
            }
          }
        }
      }
    }
    .panel-title {
      font-size: 32rpx;
      color: #333333;
      font-weight: 500;
      padding: 36rpx 30rpx 32rpx 30rpx;
      display: flex;
      align-items: center;
    }
  }
}

.product {
  padding: 80rpx 20rpx;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 40rpx;

  &-item {
    background: #f5f5f5;
    border: 1px solid transparent;
    padding: 10rpx;
    border-radius: 10rpx;
    position: relative;

    .bottom {
      padding-top: 16rpx;
    }
    .top {
      position: relative;
    }
    &__soldout {
      height: 266rpx;
      width: 100%;
      padding: 40rpx;
      box-sizing: border-box;
      background: #ffffff99;
      opacity: 0.86;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
    &__img {
      width: 100%;
      height: 266rpx;
    }
    &__title {
      font-size: 25rpx;
      color: #333333;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      word-break: break-all;
    }
    &__price {
      display: flex;
      align-items: center;
      justify-content: space-between;

      text {
        color: red;
      }
      text:nth-child(1) {
        font-size: 21rpx;
      }
      text:nth-child(2) {
        font-size: 32rpx;
      }
    }

    &-active {
      border-color: red;

      &__check {
        position: absolute;
        top: 10rpx;
        right: 10rpx;
      }
    }
  }
}

.navigation {
  display: flex;
  margin-top: 100rpx;
  border: solid 2rpx #f2f2f2;
  background-color: #ffffff;
  padding: 16rpx 0;
  padding-bottom: calc(constant(safe-area-inset-bottom));
  padding-bottom: calc(env(safe-area-inset-bottom));
  z-index: 10;
  position: sticky;
  bottom: 0;

  .left {
    display: flex;
    font-size: 20rpx;
    button {
      display: block;
      margin: 0;
      padding: 0;
      line-height: normal;
      background: none;
      border-radius: 0;
      box-shadow: none;
      border: none;
      font-size: unset;
      text-align: unset;
      overflow: visible;
      color: inherit;
      &::after {
        border: none;
      }
    }
    .item {
      color: #333;
      margin: 0 30rpx;
      &.car {
        text-align: center;
        position: relative;
        .car-num {
          position: absolute;
          top: -10rpx;
          right: -10rpx;
        }
      }
    }
  }
  .right {
    display: flex;
    font-size: 28rpx;
    align-items: center;
    margin-left: auto;
    margin-right: 20rpx;
    .btn {
      line-height: 64rpx;
      padding: 0 34rpx;
      color: #ffffff;
    }
    .cart {
      border-radius: 6rpx 0 0 6rpx;
      background-color: #ff9c1b;
    }
    .buy {
      border-radius: 0 6rpx 6rpx 0;
      background: linear-gradient(0deg, #ff2a00 0%, #f26011 100%);
    }
  }
}
</style>