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="textContentSlot" class="align-items-center flex-justify-end">
        <view class="ss-box b-rad-50 mr-24 align-items-center flex-justify-center z-4" @click.stop="goSearch">
          <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 z-4" @click="goToOrder">
          <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">
          {{shopsInfo.shop_name}}
        </view>
        <view class="fs-24 fw-400 fc-9 text-overflow-ellipsis-one pt-15" v-if="shopsInfo.notice">
          公告：{{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">
          桌号：{{table_number}}
        </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" v-if="shopType === 1">

        <view class="menu-box-left" :style="{top: newNavHeight + 'rpx'}">
          <view class="menu-box-left-box pb-130 box-border-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 categoryList" :key="i" @click="selectType(item)"
              :class="type ===  item.category_id?'bgc-f fc-3 fw-600':'fc-6 fw-400'"
              :id="'left-scroll'+ item.category_id">
              {{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 pb-130 box-border-box">
          <view class="" v-for="(item,i) in goodsList" :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>
                <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,info)"
                      src="@/static/img/order-food/reduce-img.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/order-food/add-img.png" @click="addred(2,info)" mode="">
                    </image>
                  </view>
                  <view v-else class="right-only-right text-align-center b-rad-200" @click="addred(3,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>

      <ShopInfo style="height: 100%;" 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 b-rad-200">
        <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_goods_money}}</view>
          </view>
        </view>

        <view class="shop-buttom-money-2 text-align-center fc-f fs-32 fw-600 b-rad-200"
          :class="cartData.total_num>0?'':'opacity-4'" @click.stop="toConfirmOrder()">去结算
        </view>
      </view>
    </view>

    <uni-popup ref="popupBuy" type="bottom" background-color="transparent" borderRadius='20px 20rpx 0 0'>
      <view class="buy-card flex-index-css">
        <view class="buy-card-top box-border-box plr-32 flex-justify-space align-items-center b-rad-20-20-0-0">
          <view class="">
            <span class="fs-32 fc-3 mr-12">已选商品</span>
          </view>
          <view class="fs-28 fw-400 fc-9 align-items-center" @click.stop="setShopIngDel">
            <view class="">
              <uni-icons type="trash" size="18" color="#999"></uni-icons>
            </view>
            <view class="fs-28 fw-400 fc-9">清空</view>
          </view>
        </view>
        <view class="scroll-view-css bgc-ECECEC box-border-box car-scroll-box">
          <view class="buy-card-item bgc-f b-rad-20 display-flex p-20 box-border-box"
            v-for="(goods,i) in cartData.goods_list" :key="i">
            <image class="goods_img flex-shrink0" :src="goods.goods_image" mode="scaleToFill"></image>
            <view class="flex-1 flex-direction flex-justify-space">
              <view class="">
                <view class="w-514 text-overflow-ellipsis-one fs-34 fw-600 mb-8">
                  {{goods.goods_name}}都算iOS对哦哎对哦哎对哦啊速度iOS
                </view>
                <view class="fc-6" v-show="goods.goods_attr">
                  {{goods.goods_attr}}
                </view>
              </view>
              <view class="flex-justify-space">
                <view class="">
                  <span class="fs-24 fc-FB3D03 fw-400">￥</span>
                  <span class="fs-40 fc-FB3D03 fw-b">{{goods.price}}</span>
                </view>
                <view class="display-flex align-items-center">
                  <image class="wh-44" @click.stop="setShoppingSave(goods,2)"
                    src="@/static/img/order-food/reduce-img.png" mode="">
                  </image>
                  <view class="right-only-right-2 text-align-center fs-28 fw-400">
                    {{goods.goods_number}}
                  </view>
                  <image class="wh-44" src="/static/img/order-food/add-img.png" @click.stop="setShoppingSave(goods,1)"
                    mode=""></image>
                </view>
              </view>
            </view>
          </view>
          <en-blank navBackgroundColor='#ECECEC' v-if="cartData.goods_list.length<=0" message="快去选购商品吧！~"></en-blank>
        </view>
        <view class="pop-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 b-rad-200">
            <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_goods_money}}</view>
              </view>
            </view>

            <view class="shop-buttom-money-2 text-align-center fc-f fs-32 fw-600 b-rad-200"
              :class="cartData.total_num>0?'':'opacity-4'" @click.stop="toConfirmOrder()">去结算
            </view>
          </view>
        </view>
      </view>
    </uni-popup>
  </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 cartStore from '@/utils/cartStore.js';
  import {
    getGoodsCategory,
    getGoodsGoods
  } from '@/api/goods.js'
  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
        }],
        table_number: '',
        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: '', //默认分类标识
        categoryList: [],
        goodsList: [],
        cartData: {
          total_price: 0,
          total_num: 0,
          pack_price: 0,
          total_goods_money: 0,
          goods_list: [],
        }
      }
    },
    onShow() {
      this.getShopIngList();
    },
    onLoad(e) {
      cartStore.setShopId();
      this.getshopInfo();
    },
    mounted() {},
    onReachBottom(e) {},
    // 监听页面滚动
    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: {
      shopInfo() {
        // 获取商家详情
        shopInfo().then((res) => {
          if (res.code === 1) {
            this.shopsInfo = res.data
          }
        })
      },
      getGoodsCategory() {
        //获取商家分类
        getGoodsCategory().then((res) => {
          if (res.code === 1) {
            this.categoryList = res.data
            this.type = res.data[0].category_id
          }
        })
      },
      getGoodsGoods() {
        //获取商家商品列表
        getGoodsGoods().then((res) => {
          if (res.code === 1) {
            // 初始化商品列表
            this.goodsList = res.data
            // 从购物车数据中回显每个商品的数量
            this.updateGoodsNumFromCart()
          }
        })
      },
      getShopIngList() {
        // 获取购物车列表
        const shopCart = cartStore.getShopCart(this.shop_id);
        if (shopCart) {
          this.cartData = {
            ...this.cartData,
            total_price: shopCart.total_price,
            total_num: shopCart.total_num,
            pack_price: shopCart.pack_price, //配送费总额
            total_goods_money: shopCart.total_goods_money, //商品价格总额
            goods_list: shopCart.goods_list
          };
          // 同步更新商品列表中的数量
          this.updateGoodsNumFromCart();
        }
      },
      getshopInfo() {
        this.table_number = uni.getStorageSync('table_number')
        this.shopInfo()
        this.getGoodsCategory()
        this.getGoodsGoods()
      },
      updateGoodsNumFromCart() {
        // 从购物车数据同步商品数量
        if (!this.goodsList) return;

        const shopCart = cartStore.getShopCart(this.shop_id);
        if (!shopCart) return;

        // 创建商品数量映射
        const goodsQuantityMap = {};
        const cartGoodsPackPriceMap = {}; // 存储商品配送费信息

        shopCart.goods_list.forEach(item => {
          if (!goodsQuantityMap[item.goods_id]) {
            goodsQuantityMap[item.goods_id] = 0;
            cartGoodsPackPriceMap[item.goods_id] = 0;
          }
          // 累加同一个商品不同规格的数量
          goodsQuantityMap[item.goods_id] += item.goods_number;
          // 累加同一个商品不同规格的配送费（按数量计算）
          cartGoodsPackPriceMap[item.goods_id] += parseFloat(item.pack_price || 0) * (item
            .goods_number || 0);
        });

        // 更新商品列表数量
        this.goodsList.forEach(category => {
          if (category.list && category.list.length > 0) {
            category.list.forEach(goods => {
              goods.num = goodsQuantityMap[goods.goods_id] || 0;
            });
          }
        });

        // 更新分类列表中的商品数量
        this.updateCategoryNum()
      },
      updateCategoryNum() {
        // 更新分类的商品总数
        if (!this.categoryList || !this.goodsList) {
          return
        }

        this.categoryList.forEach(categoryItem => {
          // 找到对应的商品分类
          const goodsCategory = this.goodsList.find(
            category => category.type === categoryItem.category_id
          )

          if (goodsCategory && goodsCategory.list) {
            // 计算该分类下所有商品的总数量
            const totalNum = goodsCategory.list.reduce((sum, goods) => {
              return sum + (goods.num || 0)
            }, 0)
            categoryItem.num = totalNum
          } else {
            categoryItem.num = 0
          }
        })
      },
      goToOrder() {
        uni.navigateTo({
          url: 'pages/order/index'
        })
      },
      goSearch() {
        uni.navigateTo({
          url: 'pages/index/search-record'
        })
      },
      selectType(item, itemTwo) {
        if (this.type != item.category_id) {
          this.type = item.category_id;
          this.idMark = 'scroll' + item.category_id

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

          // 延迟执行滚动
          setTimeout(() => {
            this.scrollToCategorySimple(item.category_id);
          }, 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('滚动完成');
            }
          });
        }).exec();
      },
      addred(type, item) {
        if (type === 1) {
          // 减
          --item.num;
          if (item.num >= 0) {
            this.shoppingSave(item, item.num)
          }
        } else if (type === 2) {
          // 加
          ++item.num;
          this.shoppingSave(item, item.num)
        } else if (type === 3) {
          // 选规格
          uni.navigateTo({
            url: `pages-takeout/new-specs-info?goods_id=${item.goods_id}&category_id=${item.category_id}&shop_id=${this.shop_id}`
          })
        }
      },
      shoppingSave(item, num) {
        // 前端处理购物车
        // const goodsData = {
        // 	goods_id: item.goods_id,
        // 	goods_name: item.goods_name,
        // 	goods_image: item.goods_image,
        // 	category_id: item.category_id,
        // 	seckill_money: item.seckill_money || 0,
        // 	price: item.price || 0,
        // 	pack_price: item.pack_price || 0, // 添加配送费
        // 	spec_type: item.spec_type || 1,
        // 	goods_desc: item.goods_desc || '',
        // 	line_price: item.line_price || '',
        // 	sales: item.sales || 0
        // };
        if (num <= 0) {
          // 数量为0，移除商品
          cartStore.removeFromCart(item.goods_id, item.goods_spec || []);
        } else {
          // 更新商品数量
          const success = cartStore.updateQuantity(
            item.goods_id,
            item.goods_spec || [],
            num
          );
          if (!success) {
            // 如果更新失败，尝试添加新商品
            cartStore.addToCart(item, item.goods_spec || [], num);
          }
        }
        // 更新页面数据
        this.getShopIngList();
        this.$forceUpdate();
      },
      findGoodsInList(goodsId) {
        // 在商品列表中查找指定商品
        for (let category of this.goodsList) {
          if (category.list) {
            const goods = category.list.find(item => item.goods_id === goodsId)
            if (goods) {
              return goods
            }
          }
        }
        return null
      },
      navHeight(e) {
        this.newNavHeight = e
      },
      setShopIngDel() {
        uni.showModal({
          title: '提示',
          content: '是否清除购物车商品？',
          success: (res) => {
            if (res.confirm) {
              cartStore.clearCurrentShopCart();
              this.getShopIngList();
              this.$refs.popupBuy.close();
              uni.showToast({
                title: '已清空购物车',
                icon: 'success'
              });
            }
          }
        });
      },
      setShoppingSave(item, type) {
        if (type === 1) {
          // 加
          item.goods_number = item.goods_number + 1
        } else {
          // 减
          item.goods_number = item.goods_number - 1
        }

        if (item.goods_number <= 0) {
          // 数量为0，移除商品
          cartStore.removeFromCart(item.goods_id, item.goods_spec || []);
        } else {
          // 更新商品数量
          cartStore.updateQuantity(
            item.goods_id,
            item.goods_spec || [],
            item.goods_number
          );
        }
        // 更新页面数据
        this.getShopIngList();
      },
      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()
        })
      },
      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()
      },
      toConfirmOrder() {
        uni.navigateTo({
          url: '/pages-takeout/goods-order'
        })
      },
      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">
  .car-scroll-box {
    padding: 12rpx 24rpx calc(env(safe-area-inset-bottom) + 48rpx);
  }

  .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: 480rpx;
  }

  .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;
  }

  .pop-shop-buttom-money {
    width: 100%;
    // height: 140rpx;
    background: #ECECEC;
    padding-left: 24rpx;
    padding-right: 24rpx;
    padding-bottom: calc(env(safe-area-inset-bottom) + 12rpx);
    padding-top: 22rpx;
    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: 60vh;
    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;
    border-radius: 0rpx 20rpx 20rpx 0rpx;

    .menu-type-num {
      position: absolute;
      top: 2rpx;
      right: 8rpx;
      padding: 0 6rpx;
      min-width: 20rpx;
      height: 32rpx;
      text-align: center;
      line-height: 32rpx;
      background: #FE6B2C;
      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: 116rpx;
        height: 44rpx;
        background: linear-gradient(270deg, #FF3333 0%, #FE6122 100%);
        line-height: 44rpx;
        position: relative;

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

      .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>