zh_order_food_xcx/pages-takeout/new-shop.vue

<template>
  <view class="shop-index iPhone-bottom flex-direction box-border-box">

    <image v-show="!navBgType" class="bg-img" src="@/static/img/order-food/shop-top.png" mode="aspectFill"
      :class="scrollTop > newNavHeight?'z-4':'z-3'"></image>
    <image v-show="navBgType" class="bg-img-type z-4" src="@/static/img/order-food/shop-top.png" mode="aspectFill"
      :style="{height:newNavHeight+'rpx',opacity:opacity}"></image>

    <newNav :leftShow="false" :textType='false' class="z-4 mb-32" @navHeight='navHeight'>
      <view slot="textContent" class="align-items-center flex-justify-end">
        <view class="ss-box b-rad-50 mr-24 align-items-center flex-justify-center">
          <image class="shop-search" src="@/static/img/order-food/shop-search.png" mode=""></image>
        </view>
        <view class="dd-box align-items-center flex-justify-center b-rad-200 mr-24">
          <image class="shp-list-img mr-8" src="@/static/img/order-food/shp-list.png" mode=""></image>
          <view class="fs-28 fc-f">
            订单
          </view>
        </view>
      </view>
    </newNav>

    <view class="bgc-f box-border-box plr-32 mb-32 shop-info">
      <view class="shop-info-box bgc-f box-border-box p-24 z-3 b-rad-20">
        <view class="fs-40 fw-600 text-overflow-ellipsis mb-16">
          {{shopsInfo.shop_name || "山海鲜熬老灶麻辣火锅辣火锅辣火11 世家匠心传承店川"}}
        </view>
        <view class="fs-24 fw-400 fc-9 text-overflow-ellipsis-one">
          公告：{{shopsInfo.notice||"第二份半价是同时下相同商品的第二份可享受半价受"}}
        </view>
      </view>
    </view>

    <view class="b-b-eee bgc-f box-border-box p-0-32-12 align-items-center flex-justify-space z-3 shop-type-box">
      <view class="align-items-center shop-type-list">
        <view class="shop-item fs-36 mb-8 mr-64" @click="seletShopType(item)"
          :class="shopType === item.id?'fc-3 fw-600':'fc-6'" v-for="(item,i) in shopTypeList" :key="i">
          {{item.name}}
        </view>
        <view class="shop-item-bs bgc-FF3333" :style="{left:shopTypeBsLeft+'rpx'}"></view>
      </view>
      <view class="align-items-center">
        <image class="zh-icon mr-8" src="@/static/img/order-food/zh-icon.png" mode="aspectFill"></image>
        <view class="fw-600 fs-32 fc-3">
          桌号：17
        </view>
      </view>
    </view>

    <!-- <view class="bgc-f sticky-nav" :style="{ height: navBgType?`calc(100vh - ${newNavHeight}rpx - ${48}rpx)`:'auto'}"> -->
    <view class="bgc-F7F8FA">
      <view class="menu-box box-border-box align-items-flex-start pb-130" v-if="shopType === 1">

        <view class="menu-box-left" :style="{top: newNavHeight + 'rpx'}">
          <view class="menu-box-left-box"
            :style="{height: menuLeftType?`calc(100vh - ${newNavHeight}rpx - ${68}rpx)`:''}">
            <view class="menu-type-list fs-26 box-border-box align-items-center flex-justify-center"
              v-for="(item,i) in categoryData" :key="i" @click="selectType(item)"
              :class="type ===  item.type?'bgc-f fc-3 fw-600':'fc-6 fw-400'" :id="'left-scroll'+ item.type">
              {{item.name}}
              <view class="menu-type-num fc-f" v-show="item.num > 0">{{item.num > 99?'99+':item.num}}</view>
            </view>
          </view>
        </view>

        <view class="menu-box-only bgc-f">
          <view class="" v-for="(item,i) in categoryData" :key="i" :id="'scroll'+ item.type">
            <view class="fs-28 fw-600 fc-3 sticky-nav bgc-f p-20 box-border-box" :style="{top: newNavHeight + 'rpx'}">
              {{item.name}}
            </view>
            <view class="menu-list flex-justify-space box-border-box" v-for="(info,k) in item.list" :key="k"
              :id="'goods_id'+ info.goods_id">
              <image class="flex-shrink0 goods_img" :src="info.goods_image" mode="scaleToFill"></image>
              <view class="menu-list-right flex-direction flex-justify-space">
                <view class="mb-8">
                  <view class="mb-4 goods-name text-overflow-ellipsis fs-32 fw-600">{{info.goods_name}}
                  </view>
                  <view class="text-overflow-ellipsis-one fw-400 fc-9 fs-24 mb-2 goods-name" v-if="info.spec_type == 1">
                    {{info.goods_desc?info.goods_desc:''}}
                  </view>
                  <view class="fw-400 fc-9 fs-24">月销{{info.sales}}</view>
                </view>
                <view class="flex-justify-space align-items-flex-end">
                  <view class="">
                    <span class="fs-24 fw-400 fc-FB3D03">￥</span>
                    <span class="fs-40 fw-b fc-FB3D03">{{info.seckill_money>0?info.seckill_money:info.price}}</span>
                  </view>
                  <view class="display-flex align-items-center" v-if="info.spec_type == 1">
                    <image v-show="info.num > 0" class="wh-44" @click="addred(1,i,k,info)"
                      src="@/static/img/takeout/j.png" mode=""></image>
                    <view v-show="info.num > 0" class="right-only-right-2 text-align-center fs-28 fw-400">{{info.num}}
                    </view>
                    <image class="wh-44" src="@/static/img/takeout/add.png" @click="addred(2,i,k,info)" mode=""></image>
                  </view>
                  <view v-else class="right-only-right text-align-center" @click="addred(3,i,k,info)">
                    <view class="fw-600 fs-28 fc-f">
                      选规格
                    </view>
                    <view class="selectedNum" v-if="info.num>0">
                      {{info.num}}
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>

      </view>
      <!--      <newMenu style="height: 100%;" v-if="shopType === 1" :menuLeftType='menuLeftType' :newNavHeight='newNavHeight'
        :shop_id="shop_id" @setCartData="setCartData" @scrollToCategory='handleCategoryScroll' ref="goodsMenu">
      </newMenu> -->
      <ShopInfo style="height: 100%;" :shopId='shop_id' v-else-if="shopType === 2"></ShopInfo>
    </view>

    <view v-if="shopType === 1" class="shop-buttom-money box-border-box" @click="openBuyCrad()">
      <view class="shop-buttom-money-1 bgc-f flex-justify-space align-items-center pl-24 box-border-box pr-8">
        <view class="align-items-center">
          <image class="gwc-img mr-36" src="@/static/img/order-food/gwc-img.png" mode="scaleToFill"></image>
          <view class="shop-buttom-num bgc-FE6B2C fs-24 fc-f text-align-center">{{cartData.total_num}}</view>
          <view class="align-items-baseline">
            <view class="fw-600 fs-28 fc-3 mr-4">￥</view>
            <view class="fw-600 fs-48 fc-3">{{cartData.total_price}}</view>
          </view>
        </view>
        
        <view class="shop-buttom-money-2 text-align-center fc-f fs-32 fw-600 b-rad-200"
          @click.stop="toConfirmOrder()">去结算
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import newMenu from './shop-mod/new-menu.vue';
  import ShopInfo from './shop-mod/info.vue';
  import tools from "@/service/tools";
  import EnBlank from "@/components/en-utils/en-blank/en-blank";
  import {
    receiveCoupon
  } from "@/api/coupon.js"
  import {
    shopInfo
  } from "@/api/shop.js"
  import {
    getDeliveryMoney
  } from "@/api/common";
  import {
    getShopIngList,
    setShopIngDel,
    shoppingSave
  } from "@/api/shopping";
  export default {
    components: {
      newMenu,
      ShopInfo,
      EnBlank
    },
    data() {
      return {
        domHeigjt: 0,
        shopTypeList: [{
          name: "点单",
          id: 1
        }, {
          name: "商家",
          id: 2
        }],
        shopType: 1, //组件类型
        shopTypeBsLeft: 12,
        shop_id: '',
        operate_id: '',
        shopsInfo: {},
        cartData: {
          total_price: 0,
          total_num: 0,
          total_goods_money: 0,
          pack_price: 0,
          must_category: 0,
          is_place_order: 0,
          err_msg: 0,
          goods_list: [],
        },
        isAjax: false,
        newNavHeight: '',
        navBgType: false,
        menuLeftType: false,
        scrollTop: 0,
        opacity: 0,
        heightOne: '',
        heightTwo: '',
        topHeight: '',
        idMark: '', //滚动自适应参数
        idMarkTwo: '', //滚动自适应参数
        type: 0, //分类标识
        typeList: [],
        categoryData: [{
            type: 0,
            name: '测试1',
            list: [{
              goods_id: 1,
              goods_name: '测试商品1-1',
              price: '10',
              goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
            }, {
              goods_id: 2,
              goods_name: '测试商品1-2',
              price: '10',
              goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
            }, {
              goods_id: 3,
              goods_name: '测试商品1-3',
              price: '10',
              goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
            }]
          }, {
            type: 1,
            name: '测试2',
            list: [{
              goods_id: 4,
              goods_name: '测试商品2-1',
              price: '10',
              goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
            }, {
              goods_id: 5,
              goods_name: '测试商品2-2',
              price: '10',
              goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
            }, {
              goods_id: 6,
              goods_name: '测试商品2-3',
              price: '10',
              goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
            }]
          }, {
            type: 2,
            name: '测试3',
            list: [{
              goods_id: 7,
              goods_name: '测试商品3',
              price: '10',
              goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
            }]
          }, {
            type: 3,
            name: '测试4',
            list: [{
              goods_id: 8,
              goods_name: '测试商品4',
              price: '10',
              goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
            }]
          }, {
            type: 4,
            name: '测试5',
            list: [{
              goods_id: 9,
              goods_name: '测试商品5',
              price: '10',
              goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
            }]
          },
          {
            type: 5,
            name: '测试6',
            list: [{
              goods_id: 10,
              goods_name: '测试商品6',
              price: '10',
              goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
            }]
          },
          {
            type: 6,
            name: '测试7',
            list: [{
              goods_id: 11,
              goods_name: '测试商品7',
              price: '10',
              goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
            }]
          },
          {
            type: 7,
            name: '测试8',
            list: [{
              goods_id: 12,
              goods_name: '测试商品8',
              price: '10',
              goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
            }]
          },
          {
            type: 8,
            name: '测试9',
            list: [{
              goods_id: 13,
              goods_name: '测试商品9',
              price: '10',
              goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
            }]
          },
        ],
      }
    },
    onShow() {},
    onLoad(e) {},
    mounted() {},
    onReachBottom(e) {
      console.log(e, '页面触底了');
      // uni.$emit('shopBottom',true)
    },
    // 监听页面滚动
    onPageScroll(e) {
      // e.scrollTop 获取滚动条距离页面顶部的距离
      this.scrollTop = e.scrollTop
      this.opacity = (Number(this.scrollTop) - 30)
      // 可以根据滚动位置执行相应逻辑
      if (e.scrollTop > 25) {
        this.navBgType = true
      } else {
        this.navBgType = false
      }
      if (e.scrollTop > (Number(this.newNavHeight) - 4)) {
        this.menuLeftType = true
      } else {
        this.menuLeftType = false
      }
    },
    methods: {
      selectType(item, itemTwo) {
        if (this.type != item.type) {
          this.type = item.type;
          this.idMark = 'scroll' + item.type

          // 立即更新
          this.$forceUpdate();

          // 延迟执行滚动
          setTimeout(() => {
            this.scrollToCategorySimple(item.type);
          }, 100);
        }
      },

      // 滚动方法
      scrollToCategorySimple(type) {
        const query = uni.createSelectorQuery();
        const selector = `#scroll${type}`;
        uni.pageScrollTo({
          selector: selector,
          duration: 300,
        });
        return
        let targetScrollTop = 0
        query.select('.shop-info').boundingClientRect(rect => {
          console.log('商家详情', rect);
          targetScrollTop += rect.height
        })
        query.select('.shop-type-box').boundingClientRect(rect => {
          console.log('详情切换', rect);
          targetScrollTop += rect.height + this.newNavHeight
          console.log('固定上部分位置', targetScrollTop);
        })
        query.select(selector).boundingClientRect(rect => {
          console.log('id找到元素，top:', rect);
          uni.pageScrollTo({
            scrollTop: targetScrollTop,
            duration: 300,
            success: () => {
              console.log('滚动完成');
            }
          });
          // 获取当前滚动位置
          // query.selectViewport().scrollOffset(res => {
          //   // 计算目标滚动位置
          //   // 减去固定元素的高度：导航栏 + 店铺信息 + 分类栏
          //   const navHeight = this.newNavHeight ? uni.upx2px(this.newNavHeight) : 0;
          //   const fixedOffset = navHeight + 200 + 100; // 可以根据实际情况调整

          //   const targetScrollTop = res.scrollTop + rect.top - fixedOffset;

          //   console.log('当前scrollTop:', res.scrollTop, '目标scrollTop:', targetScrollTop);

          //   // 滚动到目标位置
          //   uni.pageScrollTo({
          //     scrollTop: targetScrollTop,
          //     duration: 300,
          //     success: () => {
          //       console.log('滚动完成');
          //     }
          //   });
          // }).exec();
        }).exec();
      },
      getHeight() {
        const query = uni.createSelectorQuery();
        query.select('.shop-info').boundingClientRect(data => {
          this.heightOne = data.height;
          console.log(this.heightOne, '0000000000');
        }).exec();
        query.select('.shop-type-box').boundingClientRect(data => {
          this.heightTwo = data.height;
          this.topHeight = this.heightOne + this.heightTwo + this.newNavHeight
          console.log(this.topHeight, '111111');
        }).exec();
      },
      navHeight(e) {
        this.newNavHeight = e
        console.log(e, '000000000');
      },
      mustBut() {
        // 未点必选品
        const item = {
          type: this.cartData.must_category
        }
        this.$refs.goodsMenu.selectType(item)
      },
      setShopIngDel() {
        uni.showModal({
          title: '提示',
          content: '是否清除购物车商品？',
          success: (res) => {
            console.log(res)
            if (res.confirm) {
              setShopIngDel({
                'shop_id': this.shop_id,
                'type': 1,
              }).then((res) => {
                if (res.code === 1) {
                  tools.success(res.msg)
                  this.getShopIngList()
                  this.$refs.popupBuy.close()
                } else {
                  tools.error(res.msg)
                }
              })
            }
          }
        });
      },
      setShoppingSave(item, type) {
        if (type === 1) {
          // 加
          item.goods_number = item.goods_number + 1
        } else {
          // 减
          if (item.goods_number < 0) {
            return
          }
          item.goods_number = item.goods_number - 1
        }
        if (this.isAjax) {
          return
        }
        this.isAjax = true
        shoppingSave({
          'type': 1,
          'goods_id': item.goods_id,
          'shop_id': this.shop_id,
          'category_id': item.category_id,
          'goods_spec_id': item.goods_spec_id,
          'number': item.goods_number,
        }).then(res => {
          if (res.code == 1) {
            this.isAjax = false
            this.getShopIngList()
          }
        }).catch(() => {
          this.isAjax = false
        })
      },
      getShopIngList() {
        getShopIngList({
          'shop_id': 111,
        }).then(res => {
          if (res.code === 1) {
            this.cartData = res.data
            if (this.shopType === 1) {
              setTimeout(() => {
                console.log('我的数据执行了')
                // this.$refs.goodsMenu.setShopIngList(this.cartData)
              }, 1000)

            }
          }
        })
      },
      setCartData(cartData) {
        this.cartData = cartData
        this.getDeliveryMoney()
      },
      getDeliveryMoney() {
        getDeliveryMoney({
          'school_id': this.operate_id,
          'shop_id': this.shop_id,
        }).then(res => {
          if (res.code === 1) {
            this.delivery_money = res.data.delivery_money * 1
          }
        })
      },
      toBack() {
        tools.leftClick()
      },
      getDomH(num) {
        this.$nextTick(() => {
          let info = uni.createSelectorQuery().select('#shopInfoBox');
          info.boundingClientRect((data) => {
            if (num === 1) {
              this.domHeigjt = data.height + 72
            } else {
              this.domHeigjt = data.height + 72 + 48
            }
          }).exec()
        })
        // setTimeout(() => {

        // }, 500)
      },

      scrolltolower() {
        console.log('触底');
      },
      seletShopType(item) {
        if (this.shopType != item.id) {
          this.shopType = item.id;
          if (this.shopType == 1) {
            this.shopTypeBsLeft = 12
          } else if (this.shopType == 2) {
            this.shopTypeBsLeft = 150
          } else {
            this.shopTypeBsLeft = 160 * 2
          }
        }
      },
      openBuyCrad() {
        this.$refs.popupBuy.open()
      },
      createOrder() {
        this.$refs.popupBuy.close()
      },
      openCoupon() {
        this.$refs.popupCoupon.open()
      },
      closeCoupon() {
        this.$refs.popupCoupon.close()
      },
      toConfirmOrder() {
        uni.navigateTo({
          url: '/pages-takeout/goods-order?shop_id=' + this.shop_id
        })
      },
      shopInfo() {
        const operate_id = uni.getStorageSync('operate_id')
        shopInfo({
          operate_id: operate_id,
          shop_id: this.shop_id
        }).then((res) => {
          if (res.code == 1) {
            this.shopsInfo = res.data
          } else {
            tools.error(res.msg)
            setTimeout(() => {
              uni.navigateBack({
                delta: 1
              })
            }, 1500)
          }
        })
      }
    },
  }
</script>

<style scoped lang="scss">
  .zh-icon {
    width: 32rpx;
    height: 32rpx;
  }

  .shp-list-img {
    width: 40rpx;
    height: 40rpx;
  }

  .dd-box {
    width: 144rpx;
    padding: 12rpx 0;
    background: rgba(0, 0, 0, 0.14);
  }

  .ss-box {
    width: 64rpx;
    height: 64rpx;
    background: rgba(0, 0, 0, 0.14);
  }

  .shop-search {
    width: 40rpx;
    height: 40rpx;
  }

  .wh-44 {
    width: 44rpx;
    height: 44rpx;
  }

  .blank-text {
    line-height: 32vh;
  }

  .box-title {
    position: relative;
  }

  .box-close {
    position: absolute;
    right: 22rpx;
  }

  .pop-coupon {
    width: 100%;
    height: 42vh;
    background-color: #F5F4F9;
    border-radius: 24rpx 24rpx 0rpx 0rpx;
    padding-top: 32rpx !important;
    display: flex;
    flex-direction: column;
  }

  .item-right {
    padding: 24rpx;
    box-sizing: border-box;
    border-radius: 20rpx 0 0 20rpx;
    position: relative;
  }

  .item-hr {
    width: 0px;
    height: auto;
    border-right: 1rpx dashed #FB7850;
  }

  .item-hr-two {
    width: 0px;
    height: auto;
    border-right: 1rpx dashed #999;
  }

  .item-left {
    width: 220rpx;
    height: auto;
    padding: 20rpx 24rpx;
    box-sizing: border-box;
    position: relative;
    border-radius: 0 20rpx 20rpx 0;
  }

  .but-box {
    width: 152rpx;
    height: 52rpx;
    line-height: 52rpx;
    text-align: center;
    background: linear-gradient(225deg, #FB3D03 0%, #FF6901 100%);
    border-radius: 200rpx;
  }

  .ball {
    width: 24rpx;
    height: 24rpx;
    border-radius: 50%;
    position: absolute;
    top: -12rpx;
    left: -12rpx;
    background: #F5F5F5;
    z-index: 2;
  }

  .ball-two {
    width: 24rpx;
    height: 24rpx;
    border-radius: 50%;
    position: absolute;
    background: #F5F5F5;
    z-index: 10;
    bottom: -12rpx;
    left: -12rpx;
  }

  .shop-index {
    width: 100%;
    min-height: 100vh;
    height: auto;
    position: relative;
  }

  .right-only-right-red {
    width: 44rpx;
    height: 44rpx;
    line-height: 40rpx;
    border-radius: 12rpx;
    border: 1rpx solid #41ABF5;
    color: #41ABF5;
  }

  .right-only-right-add {
    width: 44rpx;
    height: 44rpx;
    line-height: 40rpx;
    background: linear-gradient(117deg, #57CAFF 0%, #41ABF5 100%);
    border-radius: 12rpx;
  }

  .right-only-right-2 {
    min-width: 50rpx;
  }

  .w-514 {
    width: 514rpx;
  }

  .bg-img {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 300rpx;
    transition: linear .3s all;
    // height: 300rpx;
  }

  .bg-img-type {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    // opacity: 100;
    transition: linear .3s all;
  }

  .mb-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 300rpx;
    z-index: -1;
  }


  .nav-img {
    width: 56rpx;
    height: 56rpx;
  }

  .shop-buttom-money {
    width: 100%;
    // height: 140rpx;
    background: rgba(255, 255, 255, 0.8);
    padding-left: 24rpx;
    padding-right: 24rpx;
    padding-bottom: calc(env(safe-area-inset-bottom) + 12rpx);
    padding-top: 22rpx;
    // padding: 20rpx 24rpx;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 5;
  }

  .shop-buttom-num {
    width: 32rpx;
    height: 32rpx;
    line-height: 32rpx;
    border-radius: 50%;
    position: absolute;
    top: 0rpx;
    left: 85rpx;
    border: 1rpx solid #FFFFFF;
  }

  .shop-buttom-money-2 {
    width: 200rpx;
    height: 80rpx;
    line-height: 80rpx;
    background: linear-gradient(270deg, #FF3333 0%, #FE6122 100%);
  }

  .info-box-top {}

  .box-top-right {
    width: 100rpx;
    height: 100rpx;
    border-radius: 12rpx;
  }

  .box-top-left {}

  .top-left-1 {
    width: 480rpx;
    margin-bottom: 8rpx;
  }

  .img-x {
    width: 24rpx;
    height: 24rpx;
  }

  .buy-card {
    height: 828rpx;
    background-color: #fff;
    border-radius: 24rpx 24rpx 0rpx 0rpx;
  }

  .buy-card-top {
    width: 100%;
    height: 92rpx;
    background: #FCF5DB;
    border-radius: 24rpx 24rpx 0rpx 0rpx;
  }

  .buy-card-item {
    width: 100%;
    height: 176rpx;
    margin-bottom: 32rpx;
  }

  .goods_img {
    width: 152rpx;
    height: 152rpx;
    border-radius: 12rpx;
    margin-right: 20rpx;
  }

  .shop-buttom-money-1 {
    width: 100%;
    height: 96rpx;
    position: relative;
  }

  .gwc-img {
    width: 88rpx;
    height: 88rpx;
  }

  .head-box {
    width: 100%;
    position: relative;
  }

  .shop-info-box {
    box-shadow: 0rpx 8rpx 56rpx 0rpx rgba(154, 152, 152, 0.34);
  }

  .info-box-quan-list {
    width: 164rpx;
    height: 48rpx;
    margin: 0 8rpx 8rpx 0;
    position: relative;

    image {
      width: 164rpx;
      height: 48rpx;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
    }
  }

  .quan-list-1 {
    position: absolute;
    top: 3rpx;
    left: 8rpx;
    z-index: 2;
  }

  .quan-list-2 {
    position: absolute;
    top: 8rpx;
    right: 22rpx;
    z-index: 2;
  }

  .shop-type-list {
    // height: 88rpx;
    position: relative;
  }

  .shop-item {
    position: relative;
  }

  .pj-num {
    position: absolute;
    right: -80rpx;
    top: 0;
    text-align: left;
    width: 80rpx;
  }

  .shop-item-bs {
    position: absolute;
    bottom: 0;
    width: 40rpx;
    height: 6rpx;
    border-radius: 20rpx;
    transition: left 0.5s;
  }

  .sticky-nav {
    width: 100%;
    position: sticky;
    z-index: 3;
  }

  .wh-44 {
    width: 44rpx;
    height: 44rpx;
  }

  .menu-box-left-f {
    position: sticky;
    // transition: all .3s ease;
    // overflow: auto;
  }

  .menu-box-left {
    width: 160rpx;
    height: auto;
    position: sticky;
    overflow: auto;
    // transition: all .3s ease;
    // height: 100%;
    // background-color: #F7F8FA;
    // position: absolute;
    // left: 0;
    // top: 0;
    // border-radius: 0rpx 20rpx 0 0rpx;
  }

  .menu-box-left-box {
    overflow-y: auto;
  }

  .menu-type-list {
    width: 160rpx;
    min-height: 108rpx;
    padding: 18rpx 28rpx;
    position: relative;
    z-index: 10;

    .menu-type-num {
      position: absolute;
      top: 2rpx;
      right: 8rpx;
      padding: 0 6rpx;
      min-width: 20rpx;
      height: 32rpx;
      text-align: center;
      line-height: 32rpx;
      background: #FB3D03;
      border-radius: 50%;
    }
  }

  .menu-type-list-f {
    // width: 160rpx;
    background-color: #007AFF;

    width: 100%;
    height: 100%;
    overflow-y: auto;
    /* 如果分类项很多，允许内部滚动 */
    -webkit-overflow-scrolling: touch;
    /* 改善移动端滚动体验 */
    // height: 100%;
  }

  .menu-box-only {
    // flex: 1;
    width: calc(100% - 160rpx);
  }

  .menu-box-right {
    // flex: 1;
    width: 100%;
    height: 100%;
    // padding: 16rpx 0;
    // box-sizing: border-box;
    // position: relative;
  }

  .menu-list {
    width: 100%;
    padding: 0 20rpx 40rpx;
    // height: 200rpx;
    // margin-bottom: 40rpx;

    .goods_img {
      width: 200rpx;
      height: 200rpx;
      border-radius: 12rpx;
      margin-right: 16rpx;
    }

    .menu-list-right {
      flex: 1;

      .right-only-right {
        width: 100rpx;
        height: 44rpx;
        background: linear-gradient(117deg, #57CAFF 0%, #41ABF5 100%);
        border-radius: 12rpx;
        line-height: 44rpx;
        position: relative;

        .selectedNum {
          position: absolute;
          right: 2rpx;
          top: -22rpx;
          font-size: 24rpx;
          color: #fff;
          width: 32rpx;
          height: 32rpx;
          line-height: 32rpx;
          background: #FB3D03;
          border-radius: 50%;
        }
      }

      .right-only-right-red {
        width: 44rpx;
        height: 44rpx;
        line-height: 40rpx;
        border-radius: 12rpx;
        border: 1rpx solid #41ABF5;
        color: #41ABF5;
      }

      .right-only-right-add {
        width: 44rpx;
        height: 44rpx;
        line-height: 40rpx;
        background: linear-gradient(117deg, #57CAFF 0%, #41ABF5 100%);
        border-radius: 12rpx;
      }

      .right-only-right-2 {
        min-width: 50rpx;
      }
    }
  }
</style>