|
|
@@ -1,1139 +1,1145 @@
|
|
|
<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_price}}</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" :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}}
|
|
|
- </view>
|
|
|
- <view class="fc-6">
|
|
|
- {{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_price}}</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>
|
|
|
+ <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_price}}</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" :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}}
|
|
|
+ </view>
|
|
|
+ <view class="fc-6">
|
|
|
+ {{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_price}}</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 {
|
|
|
- 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: []
|
|
|
- }
|
|
|
- },
|
|
|
- onShow() {
|
|
|
- this.getShopIngList()
|
|
|
- },
|
|
|
- onLoad(e) {
|
|
|
- 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() {
|
|
|
- // 获取购物车列表
|
|
|
- getShopIngList().then(res => {
|
|
|
- if (res.code === 1) {
|
|
|
- this.cartData = res.data
|
|
|
- // 同步更新商品列表中的数量
|
|
|
- this.updateGoodsNumFromCart()
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- getshopInfo() {
|
|
|
- this.table_number = uni.getStorageSync('table_number')
|
|
|
- this.shopInfo()
|
|
|
- this.getGoodsCategory()
|
|
|
- this.getGoodsGoods()
|
|
|
- },
|
|
|
- updateGoodsNumFromCart() {
|
|
|
- // 从购物车数据同步商品数量
|
|
|
- if (!this.goodsList || !this.cartData.goods_list) {
|
|
|
- return
|
|
|
- }
|
|
|
-
|
|
|
- // 创建购物车商品的映射，按goods_id分组，累加数量
|
|
|
- const cartGoodsMap = {}
|
|
|
- this.cartData.goods_list.forEach(cartItem => {
|
|
|
- const goodsId = cartItem.goods_id
|
|
|
- if (!cartGoodsMap[goodsId]) {
|
|
|
- cartGoodsMap[goodsId] = 0
|
|
|
- }
|
|
|
- // 累加同一个商品不同规格的数量
|
|
|
- cartGoodsMap[goodsId] += cartItem.goods_number || 0
|
|
|
- })
|
|
|
-
|
|
|
- // 更新商品列表中的数量
|
|
|
- this.goodsList.forEach(category => {
|
|
|
- if (category.list && category.list.length > 0) {
|
|
|
- category.list.forEach(goods => {
|
|
|
- // 从购物车映射中获取该商品的总数量
|
|
|
- goods.num = cartGoodsMap[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 (this.isAjax) {
|
|
|
- return
|
|
|
- }
|
|
|
- this.isAjax = true
|
|
|
- if (type === 1) {
|
|
|
- // 减
|
|
|
- --item.num;
|
|
|
- if (item.num >= 0) {
|
|
|
- this.shoppingSave(item, item.num)
|
|
|
- } else {
|
|
|
- this.isAjax = false
|
|
|
- }
|
|
|
- } else if (type === 2) {
|
|
|
- // 加
|
|
|
- ++item.num;
|
|
|
- this.shoppingSave(item, item.num)
|
|
|
- } else if (type === 3) {
|
|
|
- // 选规格
|
|
|
- this.isAjax = false
|
|
|
- uni.navigateTo({
|
|
|
- url: `pages-takeout/new-specs-info?goods_id=${item.goods_id}&category_id=${item.category_id}`
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- shoppingSave(item, num) {
|
|
|
- shoppingSave({
|
|
|
- goods_id: item.goods_id,
|
|
|
- category_id: item.category_id,
|
|
|
- goods_spec_id: item.goods_spec_id,
|
|
|
- number: num
|
|
|
- }).then((res) => {
|
|
|
- if (res.code === 1) {
|
|
|
- tools.success(res.msg)
|
|
|
- this.isAjax = false
|
|
|
- // 直接更新当前商品的数量（即时反馈）
|
|
|
- const goods = this.findGoodsInList(item.goods_id)
|
|
|
- if (goods) {
|
|
|
- goods.num = num
|
|
|
- }
|
|
|
- this.getShopIngList()
|
|
|
- } else {
|
|
|
- this.isAjax = false
|
|
|
- tools.error(res.msg)
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- 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
|
|
|
- },
|
|
|
- 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().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 {
|
|
|
- // 减
|
|
|
- item.goods_number = item.goods_number - 1
|
|
|
- }
|
|
|
- this.shoppingSave(item, item.goods_number)
|
|
|
- },
|
|
|
- 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)
|
|
|
- },
|
|
|
- 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)
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- }
|
|
|
+ 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,
|
|
|
+ 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,
|
|
|
+ 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 = {};
|
|
|
+ shopCart.goods_list.forEach(item => {
|
|
|
+ if (!goodsQuantityMap[item.goods_id]) {
|
|
|
+ goodsQuantityMap[item.goods_id] = 0;
|
|
|
+ }
|
|
|
+ goodsQuantityMap[item.goods_id] += item.goods_number;
|
|
|
+ });
|
|
|
+
|
|
|
+ // 更新商品列表数量
|
|
|
+ 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) {
|
|
|
+ // 前端处理购物车
|
|
|
+ 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
|
|
|
+ },
|
|
|
+ mustBut() {
|
|
|
+ // 未点必选品
|
|
|
+ const item = {
|
|
|
+ type: this.cartData.must_category
|
|
|
+ }
|
|
|
+ this.$refs.goodsMenu.selectType(item)
|
|
|
+ },
|
|
|
+ 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()
|
|
|
+ })
|
|
|
+ // setTimeout(() => {
|
|
|
+
|
|
|
+ // }, 500)
|
|
|
+ },
|
|
|
+ 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() {
|
|
|
+ console.log(this.cartData,'11111111111');
|
|
|
+ return
|
|
|
+ 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">
|
|
|
- .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: 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;
|
|
|
- }
|
|
|
-
|
|
|
- .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>
|
|
|
+ .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: 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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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>
|
