|
@@ -1,1056 +1,1215 @@
|
|
|
<template>
|
|
<template>
|
|
|
- <view class="shop-index iPhone-bottom flex-direction box-border-box">
|
|
|
|
|
-
|
|
|
|
|
- <image v-show="!navBgType" class="bg-img" src="@/static/img/order-food/shop-top.png" mode="aspectFill"
|
|
|
|
|
- :class="scrollTop > newNavHeight?'z-4':'z-3'"></image>
|
|
|
|
|
- <image v-show="navBgType" class="bg-img-type z-4" src="@/static/img/order-food/shop-top.png" mode="aspectFill"
|
|
|
|
|
- :style="{height:newNavHeight+'rpx',opacity:opacity}"></image>
|
|
|
|
|
-
|
|
|
|
|
- <newNav :leftShow="false" :textType='false' class="z-4 mb-32" @navHeight='navHeight'>
|
|
|
|
|
- <view slot="textContent" class="align-items-center flex-justify-end">
|
|
|
|
|
- <view class="ss-box b-rad-50 mr-24 align-items-center flex-justify-center">
|
|
|
|
|
- <image class="shop-search" src="@/static/img/order-food/shop-search.png" mode=""></image>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="dd-box align-items-center flex-justify-center b-rad-200 mr-24">
|
|
|
|
|
- <image class="shp-list-img mr-8" src="@/static/img/order-food/shp-list.png" mode=""></image>
|
|
|
|
|
- <view class="fs-28 fc-f">
|
|
|
|
|
- 订单
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </newNav>
|
|
|
|
|
-
|
|
|
|
|
- <view class="bgc-f box-border-box plr-32 mb-32 shop-info">
|
|
|
|
|
- <view class="shop-info-box bgc-f box-border-box p-24 z-3 b-rad-20">
|
|
|
|
|
- <view class="fs-40 fw-600 text-overflow-ellipsis mb-16">
|
|
|
|
|
- {{shopsInfo.shop_name || "山海鲜熬老灶麻辣火锅辣火锅辣火11 世家匠心传承店川"}}
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="fs-24 fw-400 fc-9 text-overflow-ellipsis-one">
|
|
|
|
|
- 公告:{{shopsInfo.notice||"第二份半价是同时下相同商品的第二份可享受半价受"}}
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
-
|
|
|
|
|
- <view class="b-b-eee bgc-f box-border-box p-0-32-12 align-items-center flex-justify-space z-3 shop-type-box">
|
|
|
|
|
- <view class="align-items-center shop-type-list">
|
|
|
|
|
- <view class="shop-item fs-36 mb-8 mr-64" @click="seletShopType(item)"
|
|
|
|
|
- :class="shopType === item.id?'fc-3 fw-600':'fc-6'" v-for="(item,i) in shopTypeList" :key="i">
|
|
|
|
|
- {{item.name}}
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="shop-item-bs bgc-FF3333" :style="{left:shopTypeBsLeft+'rpx'}"></view>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="align-items-center">
|
|
|
|
|
- <image class="zh-icon mr-8" src="@/static/img/order-food/zh-icon.png" mode="aspectFill"></image>
|
|
|
|
|
- <view class="fw-600 fs-32 fc-3">
|
|
|
|
|
- 桌号:17
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
-
|
|
|
|
|
- <!-- <view class="bgc-f sticky-nav" :style="{ height: navBgType?`calc(100vh - ${newNavHeight}rpx - ${48}rpx)`:'auto'}"> -->
|
|
|
|
|
- <view class="bgc-F7F8FA">
|
|
|
|
|
- <view class="menu-box box-border-box align-items-flex-start pb-130" v-if="shopType === 1">
|
|
|
|
|
-
|
|
|
|
|
- <view class="menu-box-left" :style="{top: newNavHeight + 'rpx'}">
|
|
|
|
|
- <view class="menu-box-left-box"
|
|
|
|
|
- :style="{height: menuLeftType?`calc(100vh - ${newNavHeight}rpx - ${68}rpx)`:''}">
|
|
|
|
|
- <view class="menu-type-list fs-26 box-border-box align-items-center flex-justify-center"
|
|
|
|
|
- v-for="(item,i) in categoryData" :key="i" @click="selectType(item)"
|
|
|
|
|
- :class="type === item.type?'bgc-f fc-3 fw-600':'fc-6 fw-400'" :id="'left-scroll'+ item.type">
|
|
|
|
|
- {{item.name}}
|
|
|
|
|
- <view class="menu-type-num fc-f" v-show="item.num > 0">{{item.num > 99?'99+':item.num}}</view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
-
|
|
|
|
|
- <view class="menu-box-only bgc-f">
|
|
|
|
|
- <view class="" v-for="(item,i) in categoryData" :key="i" :id="'scroll'+ item.type">
|
|
|
|
|
- <view class="fs-28 fw-600 fc-3 sticky-nav bgc-f p-20 box-border-box" :style="{top: newNavHeight + 'rpx'}">
|
|
|
|
|
- {{item.name}}
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="menu-list flex-justify-space box-border-box" v-for="(info,k) in item.list" :key="k"
|
|
|
|
|
- :id="'goods_id'+ info.goods_id">
|
|
|
|
|
- <image class="flex-shrink0 goods_img" :src="info.goods_image" mode="scaleToFill"></image>
|
|
|
|
|
- <view class="menu-list-right flex-direction flex-justify-space">
|
|
|
|
|
- <view class="mb-8">
|
|
|
|
|
- <view class="mb-4 goods-name text-overflow-ellipsis fs-32 fw-600">{{info.goods_name}}
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="text-overflow-ellipsis-one fw-400 fc-9 fs-24 mb-2 goods-name" v-if="info.spec_type == 1">
|
|
|
|
|
- {{info.goods_desc?info.goods_desc:''}}
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="fw-400 fc-9 fs-24">月销{{info.sales}}</view>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="flex-justify-space align-items-flex-end">
|
|
|
|
|
- <view class="">
|
|
|
|
|
- <span class="fs-24 fw-400 fc-FB3D03">¥</span>
|
|
|
|
|
- <span class="fs-40 fw-b fc-FB3D03">{{info.seckill_money>0?info.seckill_money:info.price}}</span>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="display-flex align-items-center" v-if="info.spec_type == 1">
|
|
|
|
|
- <image v-show="info.num > 0" class="wh-44" @click="addred(1,i,k,info)"
|
|
|
|
|
- src="@/static/img/takeout/j.png" mode=""></image>
|
|
|
|
|
- <view v-show="info.num > 0" class="right-only-right-2 text-align-center fs-28 fw-400">{{info.num}}
|
|
|
|
|
- </view>
|
|
|
|
|
- <image class="wh-44" src="@/static/img/takeout/add.png" @click="addred(2,i,k,info)" mode=""></image>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view v-else class="right-only-right text-align-center" @click="addred(3,i,k,info)">
|
|
|
|
|
- <view class="fw-600 fs-28 fc-f">
|
|
|
|
|
- 选规格
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="selectedNum" v-if="info.num>0">
|
|
|
|
|
- {{info.num}}
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
-
|
|
|
|
|
- </view>
|
|
|
|
|
- <!-- <newMenu style="height: 100%;" v-if="shopType === 1" :menuLeftType='menuLeftType' :newNavHeight='newNavHeight'
|
|
|
|
|
- :shop_id="shop_id" @setCartData="setCartData" @scrollToCategory='handleCategoryScroll' ref="goodsMenu">
|
|
|
|
|
- </newMenu> -->
|
|
|
|
|
- <ShopInfo style="height: 100%;" :shopId='shop_id' v-else-if="shopType === 2"></ShopInfo>
|
|
|
|
|
- </view>
|
|
|
|
|
-
|
|
|
|
|
- <view v-if="shopType === 1" class="shop-buttom-money box-border-box" @click="openBuyCrad()">
|
|
|
|
|
- <view class="shop-buttom-money-1 bgc-f flex-justify-space align-items-center pl-24 box-border-box pr-8">
|
|
|
|
|
- <view class="align-items-center">
|
|
|
|
|
- <image class="gwc-img mr-36" src="@/static/img/order-food/gwc-img.png" mode="scaleToFill"></image>
|
|
|
|
|
- <view class="shop-buttom-num bgc-FE6B2C fs-24 fc-f text-align-center">{{cartData.total_num}}</view>
|
|
|
|
|
- <view class="align-items-baseline">
|
|
|
|
|
- <view class="fw-600 fs-28 fc-3 mr-4">¥</view>
|
|
|
|
|
- <view class="fw-600 fs-48 fc-3">{{cartData.total_price}}</view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
-
|
|
|
|
|
- <view class="shop-buttom-money-2 text-align-center fc-f fs-32 fw-600 b-rad-200"
|
|
|
|
|
- @click.stop="toConfirmOrder()">去结算
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
|
|
+ <view class="shop-index iPhone-bottom flex-direction box-border-box">
|
|
|
|
|
+
|
|
|
|
|
+ <image v-show="!navBgType" class="bg-img" src="@/static/img/order-food/shop-top.png" mode="aspectFill"
|
|
|
|
|
+ :class="scrollTop > newNavHeight?'z-4':'z-3'"></image>
|
|
|
|
|
+ <image v-show="navBgType" class="bg-img-type z-4" src="@/static/img/order-food/shop-top.png" mode="aspectFill"
|
|
|
|
|
+ :style="{height:newNavHeight+'rpx',opacity:opacity}"></image>
|
|
|
|
|
+
|
|
|
|
|
+ <newNav :leftShow="false" :textType='false' class="z-4 mb-32" @navHeight='navHeight'>
|
|
|
|
|
+ <view slot="textContent" class="align-items-center flex-justify-end">
|
|
|
|
|
+ <view class="ss-box b-rad-50 mr-24 align-items-center flex-justify-center">
|
|
|
|
|
+ <image class="shop-search" src="@/static/img/order-food/shop-search.png" mode=""></image>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="dd-box align-items-center flex-justify-center b-rad-200 mr-24">
|
|
|
|
|
+ <image class="shp-list-img mr-8" src="@/static/img/order-food/shp-list.png" mode=""></image>
|
|
|
|
|
+ <view class="fs-28 fc-f">
|
|
|
|
|
+ 订单
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </newNav>
|
|
|
|
|
+
|
|
|
|
|
+ <view class="bgc-f box-border-box plr-32 mb-32 shop-info">
|
|
|
|
|
+ <view class="shop-info-box bgc-f box-border-box p-24 z-3 b-rad-20">
|
|
|
|
|
+ <view class="fs-40 fw-600 text-overflow-ellipsis mb-16">
|
|
|
|
|
+ {{shopsInfo.shop_name || "山海鲜熬老灶麻辣火锅辣火锅辣火11 世家匠心传承店川"}}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="fs-24 fw-400 fc-9 text-overflow-ellipsis-one">
|
|
|
|
|
+ 公告:{{shopsInfo.notice||"第二份半价是同时下相同商品的第二份可享受半价受"}}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <view class="b-b-eee bgc-f box-border-box p-0-32-12 align-items-center flex-justify-space z-3 shop-type-box">
|
|
|
|
|
+ <view class="align-items-center shop-type-list">
|
|
|
|
|
+ <view class="shop-item fs-36 mb-8 mr-64" @click="seletShopType(item)"
|
|
|
|
|
+ :class="shopType === item.id?'fc-3 fw-600':'fc-6'" v-for="(item,i) in shopTypeList" :key="i">
|
|
|
|
|
+ {{item.name}}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="shop-item-bs bgc-FF3333" :style="{left:shopTypeBsLeft+'rpx'}"></view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="align-items-center">
|
|
|
|
|
+ <image class="zh-icon mr-8" src="@/static/img/order-food/zh-icon.png" mode="aspectFill"></image>
|
|
|
|
|
+ <view class="fw-600 fs-32 fc-3">
|
|
|
|
|
+ 桌号:17
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- <view class="bgc-f sticky-nav" :style="{ height: navBgType?`calc(100vh - ${newNavHeight}rpx - ${48}rpx)`:'auto'}"> -->
|
|
|
|
|
+ <view class="bgc-F7F8FA">
|
|
|
|
|
+ <view class="menu-box box-border-box align-items-flex-start pb-130" v-if="shopType === 1">
|
|
|
|
|
+
|
|
|
|
|
+ <view class="menu-box-left" :style="{top: newNavHeight + 'rpx'}">
|
|
|
|
|
+ <view class="menu-box-left-box"
|
|
|
|
|
+ :style="{height: menuLeftType?`calc(100vh - ${newNavHeight}rpx - ${68}rpx)`:''}">
|
|
|
|
|
+ <view class="menu-type-list fs-26 box-border-box align-items-center flex-justify-center"
|
|
|
|
|
+ v-for="(item,i) in categoryData" :key="i" @click="selectType(item)"
|
|
|
|
|
+ :class="type === item.type?'bgc-f fc-3 fw-600':'fc-6 fw-400'"
|
|
|
|
|
+ :id="'left-scroll'+ item.type">
|
|
|
|
|
+ {{item.name}}
|
|
|
|
|
+ <view class="menu-type-num fc-f" v-show="item.num > 0">{{item.num > 99?'99+':item.num}}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <view class="menu-box-only bgc-f">
|
|
|
|
|
+ <view class="" v-for="(item,i) in categoryData" :key="i" :id="'scroll'+ item.type">
|
|
|
|
|
+ <view class="fs-28 fw-600 fc-3 sticky-nav bgc-f p-20 box-border-box"
|
|
|
|
|
+ :style="{top: newNavHeight + 'rpx'}">
|
|
|
|
|
+ {{item.name}}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="menu-list flex-justify-space box-border-box" v-for="(info,k) in item.list" :key="k"
|
|
|
|
|
+ :id="'goods_id'+ info.goods_id">
|
|
|
|
|
+ <image class="flex-shrink0 goods_img" :src="info.goods_image" mode="scaleToFill"></image>
|
|
|
|
|
+ <view class="menu-list-right flex-direction flex-justify-space">
|
|
|
|
|
+ <view class="mb-8">
|
|
|
|
|
+ <view class="mb-4 goods-name text-overflow-ellipsis fs-32 fw-600">
|
|
|
|
|
+ {{info.goods_name}}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="text-overflow-ellipsis-one fw-400 fc-9 fs-24 mb-2 goods-name"
|
|
|
|
|
+ v-if="info.spec_type == 1">
|
|
|
|
|
+ {{info.goods_desc?info.goods_desc:''}}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <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" @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%;" :shopId='shop_id' v-else-if="shopType === 2"></ShopInfo>
|
|
|
|
|
+
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <view v-if="shopType === 1" class="shop-buttom-money box-border-box" @click="openBuyCrad()">
|
|
|
|
|
+ <view class="shop-buttom-money-1 bgc-f flex-justify-space align-items-center pl-24 box-border-box pr-8 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 p-32">
|
|
|
|
|
+ <view class="buy-card-item display-flex" 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">
|
|
|
|
|
+ <view class="w-514 text-overflow-ellipsis-one fs-34 fw-600 mb-12">
|
|
|
|
|
+ {{goods.goods_name}}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="w-514 text-overflow-ellipsis-one fs-24 fw-400 mb-18"
|
|
|
|
|
+ :class="goods.status_str?'fc-FD5C02':'fc-9'">
|
|
|
|
|
+ {{goods.status_str?goods.status_str:goods.goods_attr}}
|
|
|
|
|
+ </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/takeout/j.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/takeout/add.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>
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
- import newMenu from './shop-mod/new-menu.vue';
|
|
|
|
|
- import ShopInfo from './shop-mod/info.vue';
|
|
|
|
|
- import tools from "@/service/tools";
|
|
|
|
|
- import EnBlank from "@/components/en-utils/en-blank/en-blank";
|
|
|
|
|
- import {
|
|
|
|
|
- receiveCoupon
|
|
|
|
|
- } from "@/api/coupon.js"
|
|
|
|
|
- import {
|
|
|
|
|
- shopInfo
|
|
|
|
|
- } from "@/api/shop.js"
|
|
|
|
|
- import {
|
|
|
|
|
- getDeliveryMoney
|
|
|
|
|
- } from "@/api/common";
|
|
|
|
|
- import {
|
|
|
|
|
- getShopIngList,
|
|
|
|
|
- setShopIngDel,
|
|
|
|
|
- shoppingSave
|
|
|
|
|
- } from "@/api/shopping";
|
|
|
|
|
- export default {
|
|
|
|
|
- components: {
|
|
|
|
|
- newMenu,
|
|
|
|
|
- ShopInfo,
|
|
|
|
|
- EnBlank
|
|
|
|
|
- },
|
|
|
|
|
- data() {
|
|
|
|
|
- return {
|
|
|
|
|
- domHeigjt: 0,
|
|
|
|
|
- shopTypeList: [{
|
|
|
|
|
- name: "点单",
|
|
|
|
|
- id: 1
|
|
|
|
|
- }, {
|
|
|
|
|
- name: "商家",
|
|
|
|
|
- id: 2
|
|
|
|
|
- }],
|
|
|
|
|
- shopType: 1, //组件类型
|
|
|
|
|
- shopTypeBsLeft: 12,
|
|
|
|
|
- shop_id: '',
|
|
|
|
|
- operate_id: '',
|
|
|
|
|
- shopsInfo: {},
|
|
|
|
|
- cartData: {
|
|
|
|
|
- total_price: 0,
|
|
|
|
|
- total_num: 0,
|
|
|
|
|
- total_goods_money: 0,
|
|
|
|
|
- pack_price: 0,
|
|
|
|
|
- must_category: 0,
|
|
|
|
|
- is_place_order: 0,
|
|
|
|
|
- err_msg: 0,
|
|
|
|
|
- goods_list: [],
|
|
|
|
|
- },
|
|
|
|
|
- isAjax: false,
|
|
|
|
|
- newNavHeight: '',
|
|
|
|
|
- navBgType: false,
|
|
|
|
|
- menuLeftType: false,
|
|
|
|
|
- scrollTop: 0,
|
|
|
|
|
- opacity: 0,
|
|
|
|
|
- heightOne: '',
|
|
|
|
|
- heightTwo: '',
|
|
|
|
|
- topHeight: '',
|
|
|
|
|
- idMark: '', //滚动自适应参数
|
|
|
|
|
- idMarkTwo: '', //滚动自适应参数
|
|
|
|
|
- type: 0, //分类标识
|
|
|
|
|
- typeList: [],
|
|
|
|
|
- categoryData: [{
|
|
|
|
|
- type: 0,
|
|
|
|
|
- name: '测试1',
|
|
|
|
|
- list: [{
|
|
|
|
|
- goods_id: 1,
|
|
|
|
|
- goods_name: '测试商品1-1',
|
|
|
|
|
- price: '10',
|
|
|
|
|
- goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
|
|
|
|
|
- }, {
|
|
|
|
|
- goods_id: 2,
|
|
|
|
|
- goods_name: '测试商品1-2',
|
|
|
|
|
- price: '10',
|
|
|
|
|
- goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
|
|
|
|
|
- }, {
|
|
|
|
|
- goods_id: 3,
|
|
|
|
|
- goods_name: '测试商品1-3',
|
|
|
|
|
- price: '10',
|
|
|
|
|
- goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
|
|
|
|
|
- }]
|
|
|
|
|
- }, {
|
|
|
|
|
- type: 1,
|
|
|
|
|
- name: '测试2',
|
|
|
|
|
- list: [{
|
|
|
|
|
- goods_id: 4,
|
|
|
|
|
- goods_name: '测试商品2-1',
|
|
|
|
|
- price: '10',
|
|
|
|
|
- goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
|
|
|
|
|
- }, {
|
|
|
|
|
- goods_id: 5,
|
|
|
|
|
- goods_name: '测试商品2-2',
|
|
|
|
|
- price: '10',
|
|
|
|
|
- goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
|
|
|
|
|
- }, {
|
|
|
|
|
- goods_id: 6,
|
|
|
|
|
- goods_name: '测试商品2-3',
|
|
|
|
|
- price: '10',
|
|
|
|
|
- goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
|
|
|
|
|
- }]
|
|
|
|
|
- }, {
|
|
|
|
|
- type: 2,
|
|
|
|
|
- name: '测试3',
|
|
|
|
|
- list: [{
|
|
|
|
|
- goods_id: 7,
|
|
|
|
|
- goods_name: '测试商品3',
|
|
|
|
|
- price: '10',
|
|
|
|
|
- goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
|
|
|
|
|
- }]
|
|
|
|
|
- }, {
|
|
|
|
|
- type: 3,
|
|
|
|
|
- name: '测试4',
|
|
|
|
|
- list: [{
|
|
|
|
|
- goods_id: 8,
|
|
|
|
|
- goods_name: '测试商品4',
|
|
|
|
|
- price: '10',
|
|
|
|
|
- goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
|
|
|
|
|
- }]
|
|
|
|
|
- }, {
|
|
|
|
|
- type: 4,
|
|
|
|
|
- name: '测试5',
|
|
|
|
|
- list: [{
|
|
|
|
|
- goods_id: 9,
|
|
|
|
|
- goods_name: '测试商品5',
|
|
|
|
|
- price: '10',
|
|
|
|
|
- goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
|
|
|
|
|
- }]
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- type: 5,
|
|
|
|
|
- name: '测试6',
|
|
|
|
|
- list: [{
|
|
|
|
|
- goods_id: 10,
|
|
|
|
|
- goods_name: '测试商品6',
|
|
|
|
|
- price: '10',
|
|
|
|
|
- goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
|
|
|
|
|
- }]
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- type: 6,
|
|
|
|
|
- name: '测试7',
|
|
|
|
|
- list: [{
|
|
|
|
|
- goods_id: 11,
|
|
|
|
|
- goods_name: '测试商品7',
|
|
|
|
|
- price: '10',
|
|
|
|
|
- goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
|
|
|
|
|
- }]
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- type: 7,
|
|
|
|
|
- name: '测试8',
|
|
|
|
|
- list: [{
|
|
|
|
|
- goods_id: 12,
|
|
|
|
|
- goods_name: '测试商品8',
|
|
|
|
|
- price: '10',
|
|
|
|
|
- goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
|
|
|
|
|
- }]
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- type: 8,
|
|
|
|
|
- name: '测试9',
|
|
|
|
|
- list: [{
|
|
|
|
|
- goods_id: 13,
|
|
|
|
|
- goods_name: '测试商品9',
|
|
|
|
|
- price: '10',
|
|
|
|
|
- goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
|
|
|
|
|
- }]
|
|
|
|
|
- },
|
|
|
|
|
- ],
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- onShow() {},
|
|
|
|
|
- onLoad(e) {},
|
|
|
|
|
- mounted() {},
|
|
|
|
|
- onReachBottom(e) {
|
|
|
|
|
- console.log(e, '页面触底了');
|
|
|
|
|
- // uni.$emit('shopBottom',true)
|
|
|
|
|
- },
|
|
|
|
|
- // 监听页面滚动
|
|
|
|
|
- onPageScroll(e) {
|
|
|
|
|
- // e.scrollTop 获取滚动条距离页面顶部的距离
|
|
|
|
|
- this.scrollTop = e.scrollTop
|
|
|
|
|
- this.opacity = (Number(this.scrollTop) - 30)
|
|
|
|
|
- // 可以根据滚动位置执行相应逻辑
|
|
|
|
|
- if (e.scrollTop > 25) {
|
|
|
|
|
- this.navBgType = true
|
|
|
|
|
- } else {
|
|
|
|
|
- this.navBgType = false
|
|
|
|
|
- }
|
|
|
|
|
- if (e.scrollTop > (Number(this.newNavHeight) - 4)) {
|
|
|
|
|
- this.menuLeftType = true
|
|
|
|
|
- } else {
|
|
|
|
|
- this.menuLeftType = false
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- methods: {
|
|
|
|
|
- selectType(item, itemTwo) {
|
|
|
|
|
- if (this.type != item.type) {
|
|
|
|
|
- this.type = item.type;
|
|
|
|
|
- this.idMark = 'scroll' + item.type
|
|
|
|
|
-
|
|
|
|
|
- // 立即更新
|
|
|
|
|
- this.$forceUpdate();
|
|
|
|
|
-
|
|
|
|
|
- // 延迟执行滚动
|
|
|
|
|
- setTimeout(() => {
|
|
|
|
|
- this.scrollToCategorySimple(item.type);
|
|
|
|
|
- }, 100);
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
-
|
|
|
|
|
- // 滚动方法
|
|
|
|
|
- scrollToCategorySimple(type) {
|
|
|
|
|
- const query = uni.createSelectorQuery();
|
|
|
|
|
- const selector = `#scroll${type}`;
|
|
|
|
|
- uni.pageScrollTo({
|
|
|
|
|
- selector: selector,
|
|
|
|
|
- duration: 300,
|
|
|
|
|
- });
|
|
|
|
|
- return
|
|
|
|
|
- let targetScrollTop = 0
|
|
|
|
|
- query.select('.shop-info').boundingClientRect(rect => {
|
|
|
|
|
- console.log('商家详情', rect);
|
|
|
|
|
- targetScrollTop += rect.height
|
|
|
|
|
- })
|
|
|
|
|
- query.select('.shop-type-box').boundingClientRect(rect => {
|
|
|
|
|
- console.log('详情切换', rect);
|
|
|
|
|
- targetScrollTop += rect.height + this.newNavHeight
|
|
|
|
|
- console.log('固定上部分位置', targetScrollTop);
|
|
|
|
|
- })
|
|
|
|
|
- query.select(selector).boundingClientRect(rect => {
|
|
|
|
|
- console.log('id找到元素,top:', rect);
|
|
|
|
|
- uni.pageScrollTo({
|
|
|
|
|
- scrollTop: targetScrollTop,
|
|
|
|
|
- duration: 300,
|
|
|
|
|
- success: () => {
|
|
|
|
|
- console.log('滚动完成');
|
|
|
|
|
- }
|
|
|
|
|
- });
|
|
|
|
|
- // 获取当前滚动位置
|
|
|
|
|
- // query.selectViewport().scrollOffset(res => {
|
|
|
|
|
- // // 计算目标滚动位置
|
|
|
|
|
- // // 减去固定元素的高度:导航栏 + 店铺信息 + 分类栏
|
|
|
|
|
- // const navHeight = this.newNavHeight ? uni.upx2px(this.newNavHeight) : 0;
|
|
|
|
|
- // const fixedOffset = navHeight + 200 + 100; // 可以根据实际情况调整
|
|
|
|
|
-
|
|
|
|
|
- // const targetScrollTop = res.scrollTop + rect.top - fixedOffset;
|
|
|
|
|
-
|
|
|
|
|
- // console.log('当前scrollTop:', res.scrollTop, '目标scrollTop:', targetScrollTop);
|
|
|
|
|
-
|
|
|
|
|
- // // 滚动到目标位置
|
|
|
|
|
- // uni.pageScrollTo({
|
|
|
|
|
- // scrollTop: targetScrollTop,
|
|
|
|
|
- // duration: 300,
|
|
|
|
|
- // success: () => {
|
|
|
|
|
- // console.log('滚动完成');
|
|
|
|
|
- // }
|
|
|
|
|
- // });
|
|
|
|
|
- // }).exec();
|
|
|
|
|
- }).exec();
|
|
|
|
|
- },
|
|
|
|
|
- getHeight() {
|
|
|
|
|
- const query = uni.createSelectorQuery();
|
|
|
|
|
- query.select('.shop-info').boundingClientRect(data => {
|
|
|
|
|
- this.heightOne = data.height;
|
|
|
|
|
- console.log(this.heightOne, '0000000000');
|
|
|
|
|
- }).exec();
|
|
|
|
|
- query.select('.shop-type-box').boundingClientRect(data => {
|
|
|
|
|
- this.heightTwo = data.height;
|
|
|
|
|
- this.topHeight = this.heightOne + this.heightTwo + this.newNavHeight
|
|
|
|
|
- console.log(this.topHeight, '111111');
|
|
|
|
|
- }).exec();
|
|
|
|
|
- },
|
|
|
|
|
- navHeight(e) {
|
|
|
|
|
- this.newNavHeight = e
|
|
|
|
|
- console.log(e, '000000000');
|
|
|
|
|
- },
|
|
|
|
|
- mustBut() {
|
|
|
|
|
- // 未点必选品
|
|
|
|
|
- const item = {
|
|
|
|
|
- type: this.cartData.must_category
|
|
|
|
|
- }
|
|
|
|
|
- this.$refs.goodsMenu.selectType(item)
|
|
|
|
|
- },
|
|
|
|
|
- setShopIngDel() {
|
|
|
|
|
- uni.showModal({
|
|
|
|
|
- title: '提示',
|
|
|
|
|
- content: '是否清除购物车商品?',
|
|
|
|
|
- success: (res) => {
|
|
|
|
|
- console.log(res)
|
|
|
|
|
- if (res.confirm) {
|
|
|
|
|
- setShopIngDel({
|
|
|
|
|
- 'shop_id': this.shop_id,
|
|
|
|
|
- 'type': 1,
|
|
|
|
|
- }).then((res) => {
|
|
|
|
|
- if (res.code === 1) {
|
|
|
|
|
- tools.success(res.msg)
|
|
|
|
|
- this.getShopIngList()
|
|
|
|
|
- this.$refs.popupBuy.close()
|
|
|
|
|
- } else {
|
|
|
|
|
- tools.error(res.msg)
|
|
|
|
|
- }
|
|
|
|
|
- })
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- });
|
|
|
|
|
- },
|
|
|
|
|
- setShoppingSave(item, type) {
|
|
|
|
|
- if (type === 1) {
|
|
|
|
|
- // 加
|
|
|
|
|
- item.goods_number = item.goods_number + 1
|
|
|
|
|
- } else {
|
|
|
|
|
- // 减
|
|
|
|
|
- if (item.goods_number < 0) {
|
|
|
|
|
- return
|
|
|
|
|
- }
|
|
|
|
|
- item.goods_number = item.goods_number - 1
|
|
|
|
|
- }
|
|
|
|
|
- if (this.isAjax) {
|
|
|
|
|
- return
|
|
|
|
|
- }
|
|
|
|
|
- this.isAjax = true
|
|
|
|
|
- shoppingSave({
|
|
|
|
|
- 'type': 1,
|
|
|
|
|
- 'goods_id': item.goods_id,
|
|
|
|
|
- 'shop_id': this.shop_id,
|
|
|
|
|
- 'category_id': item.category_id,
|
|
|
|
|
- 'goods_spec_id': item.goods_spec_id,
|
|
|
|
|
- 'number': item.goods_number,
|
|
|
|
|
- }).then(res => {
|
|
|
|
|
- if (res.code == 1) {
|
|
|
|
|
- this.isAjax = false
|
|
|
|
|
- this.getShopIngList()
|
|
|
|
|
- }
|
|
|
|
|
- }).catch(() => {
|
|
|
|
|
- this.isAjax = false
|
|
|
|
|
- })
|
|
|
|
|
- },
|
|
|
|
|
- getShopIngList() {
|
|
|
|
|
- getShopIngList({
|
|
|
|
|
- 'shop_id': 111,
|
|
|
|
|
- }).then(res => {
|
|
|
|
|
- if (res.code === 1) {
|
|
|
|
|
- this.cartData = res.data
|
|
|
|
|
- if (this.shopType === 1) {
|
|
|
|
|
- setTimeout(() => {
|
|
|
|
|
- console.log('我的数据执行了')
|
|
|
|
|
- // this.$refs.goodsMenu.setShopIngList(this.cartData)
|
|
|
|
|
- }, 1000)
|
|
|
|
|
-
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- })
|
|
|
|
|
- },
|
|
|
|
|
- setCartData(cartData) {
|
|
|
|
|
- this.cartData = cartData
|
|
|
|
|
- this.getDeliveryMoney()
|
|
|
|
|
- },
|
|
|
|
|
- getDeliveryMoney() {
|
|
|
|
|
- getDeliveryMoney({
|
|
|
|
|
- 'school_id': this.operate_id,
|
|
|
|
|
- 'shop_id': this.shop_id,
|
|
|
|
|
- }).then(res => {
|
|
|
|
|
- if (res.code === 1) {
|
|
|
|
|
- this.delivery_money = res.data.delivery_money * 1
|
|
|
|
|
- }
|
|
|
|
|
- })
|
|
|
|
|
- },
|
|
|
|
|
- toBack() {
|
|
|
|
|
- tools.leftClick()
|
|
|
|
|
- },
|
|
|
|
|
- getDomH(num) {
|
|
|
|
|
- this.$nextTick(() => {
|
|
|
|
|
- let info = uni.createSelectorQuery().select('#shopInfoBox');
|
|
|
|
|
- info.boundingClientRect((data) => {
|
|
|
|
|
- if (num === 1) {
|
|
|
|
|
- this.domHeigjt = data.height + 72
|
|
|
|
|
- } else {
|
|
|
|
|
- this.domHeigjt = data.height + 72 + 48
|
|
|
|
|
- }
|
|
|
|
|
- }).exec()
|
|
|
|
|
- })
|
|
|
|
|
- // setTimeout(() => {
|
|
|
|
|
-
|
|
|
|
|
- // }, 500)
|
|
|
|
|
- },
|
|
|
|
|
-
|
|
|
|
|
- scrolltolower() {
|
|
|
|
|
- console.log('触底');
|
|
|
|
|
- },
|
|
|
|
|
- seletShopType(item) {
|
|
|
|
|
- if (this.shopType != item.id) {
|
|
|
|
|
- this.shopType = item.id;
|
|
|
|
|
- if (this.shopType == 1) {
|
|
|
|
|
- this.shopTypeBsLeft = 12
|
|
|
|
|
- } else if (this.shopType == 2) {
|
|
|
|
|
- this.shopTypeBsLeft = 150
|
|
|
|
|
- } else {
|
|
|
|
|
- this.shopTypeBsLeft = 160 * 2
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- openBuyCrad() {
|
|
|
|
|
- this.$refs.popupBuy.open()
|
|
|
|
|
- },
|
|
|
|
|
- createOrder() {
|
|
|
|
|
- this.$refs.popupBuy.close()
|
|
|
|
|
- },
|
|
|
|
|
- openCoupon() {
|
|
|
|
|
- this.$refs.popupCoupon.open()
|
|
|
|
|
- },
|
|
|
|
|
- closeCoupon() {
|
|
|
|
|
- this.$refs.popupCoupon.close()
|
|
|
|
|
- },
|
|
|
|
|
- toConfirmOrder() {
|
|
|
|
|
- uni.navigateTo({
|
|
|
|
|
- url: '/pages-takeout/goods-order?shop_id=' + this.shop_id
|
|
|
|
|
- })
|
|
|
|
|
- },
|
|
|
|
|
- shopInfo() {
|
|
|
|
|
- const operate_id = uni.getStorageSync('operate_id')
|
|
|
|
|
- shopInfo({
|
|
|
|
|
- operate_id: operate_id,
|
|
|
|
|
- shop_id: this.shop_id
|
|
|
|
|
- }).then((res) => {
|
|
|
|
|
- if (res.code == 1) {
|
|
|
|
|
- this.shopsInfo = res.data
|
|
|
|
|
- } else {
|
|
|
|
|
- tools.error(res.msg)
|
|
|
|
|
- setTimeout(() => {
|
|
|
|
|
- uni.navigateBack({
|
|
|
|
|
- delta: 1
|
|
|
|
|
- })
|
|
|
|
|
- }, 1500)
|
|
|
|
|
- }
|
|
|
|
|
- })
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ import newMenu from './shop-mod/new-menu.vue';
|
|
|
|
|
+ import ShopInfo from './shop-mod/info.vue';
|
|
|
|
|
+ import tools from "@/service/tools";
|
|
|
|
|
+ import EnBlank from "@/components/en-utils/en-blank/en-blank";
|
|
|
|
|
+ import {
|
|
|
|
|
+ receiveCoupon
|
|
|
|
|
+ } from "@/api/coupon.js"
|
|
|
|
|
+ import {
|
|
|
|
|
+ shopInfo
|
|
|
|
|
+ } from "@/api/shop.js"
|
|
|
|
|
+ import {
|
|
|
|
|
+ getDeliveryMoney
|
|
|
|
|
+ } from "@/api/common";
|
|
|
|
|
+ import {
|
|
|
|
|
+ getShopIngList,
|
|
|
|
|
+ setShopIngDel,
|
|
|
|
|
+ shoppingSave
|
|
|
|
|
+ } from "@/api/shopping";
|
|
|
|
|
+ export default {
|
|
|
|
|
+ components: {
|
|
|
|
|
+ newMenu,
|
|
|
|
|
+ ShopInfo,
|
|
|
|
|
+ EnBlank
|
|
|
|
|
+ },
|
|
|
|
|
+ data() {
|
|
|
|
|
+ return {
|
|
|
|
|
+ domHeigjt: 0,
|
|
|
|
|
+ shopTypeList: [{
|
|
|
|
|
+ name: "点单",
|
|
|
|
|
+ id: 1
|
|
|
|
|
+ }, {
|
|
|
|
|
+ name: "商家",
|
|
|
|
|
+ id: 2
|
|
|
|
|
+ }],
|
|
|
|
|
+ shopType: 1, //组件类型
|
|
|
|
|
+ shopTypeBsLeft: 12,
|
|
|
|
|
+ shop_id: '',
|
|
|
|
|
+ operate_id: '',
|
|
|
|
|
+ shopsInfo: {},
|
|
|
|
|
+ cartData: {
|
|
|
|
|
+ total_price: 0,
|
|
|
|
|
+ total_num: 0,
|
|
|
|
|
+ total_goods_money: 0,
|
|
|
|
|
+ pack_price: 0,
|
|
|
|
|
+ must_category: 0,
|
|
|
|
|
+ is_place_order: 0,
|
|
|
|
|
+ err_msg: 0,
|
|
|
|
|
+ goods_list: [],
|
|
|
|
|
+ },
|
|
|
|
|
+ isAjax: false,
|
|
|
|
|
+ newNavHeight: '',
|
|
|
|
|
+ navBgType: false,
|
|
|
|
|
+ menuLeftType: false,
|
|
|
|
|
+ scrollTop: 0,
|
|
|
|
|
+ opacity: 0,
|
|
|
|
|
+ heightOne: '',
|
|
|
|
|
+ heightTwo: '',
|
|
|
|
|
+ topHeight: '',
|
|
|
|
|
+ idMark: '', //滚动自适应参数
|
|
|
|
|
+ idMarkTwo: '', //滚动自适应参数
|
|
|
|
|
+ type: 0, //分类标识
|
|
|
|
|
+ typeList: [],
|
|
|
|
|
+ categoryData: [{
|
|
|
|
|
+ type: 0,
|
|
|
|
|
+ name: '测试1',
|
|
|
|
|
+ list: [{
|
|
|
|
|
+ goods_id: 1,
|
|
|
|
|
+ goods_name: '测试商品1-1',
|
|
|
|
|
+ price: '10',
|
|
|
|
|
+ spec_type: 1,
|
|
|
|
|
+ goods_number: 0,
|
|
|
|
|
+ goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
|
|
|
|
|
+ }, {
|
|
|
|
|
+ goods_id: 2,
|
|
|
|
|
+ goods_name: '测试商品1-2',
|
|
|
|
|
+ price: '10',
|
|
|
|
|
+ goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
|
|
|
|
|
+ }, {
|
|
|
|
|
+ goods_id: 3,
|
|
|
|
|
+ goods_name: '测试商品1-3',
|
|
|
|
|
+ price: '10',
|
|
|
|
|
+ goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
|
|
|
|
|
+ }]
|
|
|
|
|
+ }, {
|
|
|
|
|
+ type: 1,
|
|
|
|
|
+ name: '测试2',
|
|
|
|
|
+ list: [{
|
|
|
|
|
+ goods_id: 4,
|
|
|
|
|
+ goods_name: '测试商品2-1',
|
|
|
|
|
+ price: '10',
|
|
|
|
|
+ goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
|
|
|
|
|
+ }, {
|
|
|
|
|
+ goods_id: 5,
|
|
|
|
|
+ goods_name: '测试商品2-2',
|
|
|
|
|
+ price: '10',
|
|
|
|
|
+ goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
|
|
|
|
|
+ }, {
|
|
|
|
|
+ goods_id: 6,
|
|
|
|
|
+ goods_name: '测试商品2-3',
|
|
|
|
|
+ price: '10',
|
|
|
|
|
+ goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
|
|
|
|
|
+ }]
|
|
|
|
|
+ }, {
|
|
|
|
|
+ type: 2,
|
|
|
|
|
+ name: '测试3',
|
|
|
|
|
+ list: [{
|
|
|
|
|
+ goods_id: 7,
|
|
|
|
|
+ goods_name: '测试商品3',
|
|
|
|
|
+ price: '10',
|
|
|
|
|
+ goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
|
|
|
|
|
+ }]
|
|
|
|
|
+ }, {
|
|
|
|
|
+ type: 3,
|
|
|
|
|
+ name: '测试4',
|
|
|
|
|
+ list: [{
|
|
|
|
|
+ goods_id: 8,
|
|
|
|
|
+ goods_name: '测试商品4',
|
|
|
|
|
+ price: '10',
|
|
|
|
|
+ goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
|
|
|
|
|
+ }]
|
|
|
|
|
+ }, {
|
|
|
|
|
+ type: 4,
|
|
|
|
|
+ name: '测试5',
|
|
|
|
|
+ list: [{
|
|
|
|
|
+ goods_id: 9,
|
|
|
|
|
+ goods_name: '测试商品5',
|
|
|
|
|
+ price: '10',
|
|
|
|
|
+ goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
|
|
|
|
|
+ }]
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ type: 5,
|
|
|
|
|
+ name: '测试6',
|
|
|
|
|
+ list: [{
|
|
|
|
|
+ goods_id: 10,
|
|
|
|
|
+ goods_name: '测试商品6',
|
|
|
|
|
+ price: '10',
|
|
|
|
|
+ goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
|
|
|
|
|
+ }]
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ type: 6,
|
|
|
|
|
+ name: '测试7',
|
|
|
|
|
+ list: [{
|
|
|
|
|
+ goods_id: 11,
|
|
|
|
|
+ goods_name: '测试商品7',
|
|
|
|
|
+ price: '10',
|
|
|
|
|
+ goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
|
|
|
|
|
+ }]
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ type: 7,
|
|
|
|
|
+ name: '测试8',
|
|
|
|
|
+ list: [{
|
|
|
|
|
+ goods_id: 12,
|
|
|
|
|
+ goods_name: '测试商品8',
|
|
|
|
|
+ price: '10',
|
|
|
|
|
+ goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
|
|
|
|
|
+ }]
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ type: 8,
|
|
|
|
|
+ name: '测试9',
|
|
|
|
|
+ list: [{
|
|
|
|
|
+ goods_id: 13,
|
|
|
|
|
+ goods_name: '测试商品9',
|
|
|
|
|
+ price: '10',
|
|
|
|
|
+ goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
|
|
|
|
|
+ }]
|
|
|
|
|
+ },
|
|
|
|
|
+ ],
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ onShow() {},
|
|
|
|
|
+ onLoad(e) {},
|
|
|
|
|
+ mounted() {},
|
|
|
|
|
+ onReachBottom(e) {
|
|
|
|
|
+ console.log(e, '页面触底了');
|
|
|
|
|
+ // uni.$emit('shopBottom',true)
|
|
|
|
|
+ },
|
|
|
|
|
+ // 监听页面滚动
|
|
|
|
|
+ onPageScroll(e) {
|
|
|
|
|
+ // e.scrollTop 获取滚动条距离页面顶部的距离
|
|
|
|
|
+ this.scrollTop = e.scrollTop
|
|
|
|
|
+ this.opacity = (Number(this.scrollTop) - 30)
|
|
|
|
|
+ // 可以根据滚动位置执行相应逻辑
|
|
|
|
|
+ if (e.scrollTop > 25) {
|
|
|
|
|
+ this.navBgType = true
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.navBgType = false
|
|
|
|
|
+ }
|
|
|
|
|
+ if (e.scrollTop > (Number(this.newNavHeight) - 4)) {
|
|
|
|
|
+ this.menuLeftType = true
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.menuLeftType = false
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ methods: {
|
|
|
|
|
+ selectType(item, itemTwo) {
|
|
|
|
|
+ if (this.type != item.type) {
|
|
|
|
|
+ this.type = item.type;
|
|
|
|
|
+ this.idMark = 'scroll' + item.type
|
|
|
|
|
+
|
|
|
|
|
+ // 立即更新
|
|
|
|
|
+ this.$forceUpdate();
|
|
|
|
|
+
|
|
|
|
|
+ // 延迟执行滚动
|
|
|
|
|
+ setTimeout(() => {
|
|
|
|
|
+ this.scrollToCategorySimple(item.type);
|
|
|
|
|
+ }, 100);
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ // 滚动方法
|
|
|
|
|
+ scrollToCategorySimple(type) {
|
|
|
|
|
+ const query = uni.createSelectorQuery();
|
|
|
|
|
+ const selector = `#scroll${type}`;
|
|
|
|
|
+ uni.pageScrollTo({
|
|
|
|
|
+ selector: selector,
|
|
|
|
|
+ duration: 300,
|
|
|
|
|
+ });
|
|
|
|
|
+ return
|
|
|
|
|
+ let targetScrollTop = 0
|
|
|
|
|
+ query.select('.shop-info').boundingClientRect(rect => {
|
|
|
|
|
+ console.log('商家详情', rect);
|
|
|
|
|
+ targetScrollTop += rect.height
|
|
|
|
|
+ })
|
|
|
|
|
+ query.select('.shop-type-box').boundingClientRect(rect => {
|
|
|
|
|
+ console.log('详情切换', rect);
|
|
|
|
|
+ targetScrollTop += rect.height + this.newNavHeight
|
|
|
|
|
+ console.log('固定上部分位置', targetScrollTop);
|
|
|
|
|
+ })
|
|
|
|
|
+ query.select(selector).boundingClientRect(rect => {
|
|
|
|
|
+ console.log('id找到元素,top:', rect);
|
|
|
|
|
+ uni.pageScrollTo({
|
|
|
|
|
+ scrollTop: targetScrollTop,
|
|
|
|
|
+ duration: 300,
|
|
|
|
|
+ success: () => {
|
|
|
|
|
+ console.log('滚动完成');
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ // 获取当前滚动位置
|
|
|
|
|
+ // query.selectViewport().scrollOffset(res => {
|
|
|
|
|
+ // // 计算目标滚动位置
|
|
|
|
|
+ // // 减去固定元素的高度:导航栏 + 店铺信息 + 分类栏
|
|
|
|
|
+ // const navHeight = this.newNavHeight ? uni.upx2px(this.newNavHeight) : 0;
|
|
|
|
|
+ // const fixedOffset = navHeight + 200 + 100; // 可以根据实际情况调整
|
|
|
|
|
+
|
|
|
|
|
+ // const targetScrollTop = res.scrollTop + rect.top - fixedOffset;
|
|
|
|
|
+
|
|
|
|
|
+ // console.log('当前scrollTop:', res.scrollTop, '目标scrollTop:', targetScrollTop);
|
|
|
|
|
+
|
|
|
|
|
+ // // 滚动到目标位置
|
|
|
|
|
+ // uni.pageScrollTo({
|
|
|
|
|
+ // scrollTop: targetScrollTop,
|
|
|
|
|
+ // duration: 300,
|
|
|
|
|
+ // success: () => {
|
|
|
|
|
+ // console.log('滚动完成');
|
|
|
|
|
+ // }
|
|
|
|
|
+ // });
|
|
|
|
|
+ // }).exec();
|
|
|
|
|
+ }).exec();
|
|
|
|
|
+ },
|
|
|
|
|
+ addred(type, item) {
|
|
|
|
|
+ if (this.isAjax) {
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+ this.isAjax = true
|
|
|
|
|
+ if (type === 1) {
|
|
|
|
|
+ // 减
|
|
|
|
|
+ --item.num;
|
|
|
|
|
+ if (item.num >= 0) {
|
|
|
|
|
+ this.addShoppingSave(item, item.num, type)
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.isAjax = false
|
|
|
|
|
+ }
|
|
|
|
|
+ } else if (type === 2) {
|
|
|
|
|
+ // 加
|
|
|
|
|
+ ++item.num;
|
|
|
|
|
+ if (item.is_infinite === 0 && item.num > item.stock) {
|
|
|
|
|
+ --item.num
|
|
|
|
|
+ this.isAjax = false
|
|
|
|
|
+ } else if (item.is_quota > 0 && item.num > item.quota_num) {
|
|
|
|
|
+ --item.num
|
|
|
|
|
+ this.isAjax = false
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.addShoppingSave(item, item.num, type)
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ } else if (type === 3) {
|
|
|
|
|
+ // 选规格
|
|
|
|
|
+ console.log(item, '000000000')
|
|
|
|
|
+ console.log(this.selectedSpecification, '1111111111111');
|
|
|
|
|
+ this.selectedSpecification.forEach((v, k) => {
|
|
|
|
|
+ if (v.goods_id === item.goods_id) {
|
|
|
|
|
+ v.quota_num = item.quota_num
|
|
|
|
|
+ v.payNum = item.num
|
|
|
|
|
+ v.stock = item.stock
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ this.popData.is_quota = item.is_quota
|
|
|
|
|
+ this.popData.quota_num = item.quota_num
|
|
|
|
|
+ this.popData.is_infinite = item.is_infinite
|
|
|
|
|
+ this.popData.payNum = item.num
|
|
|
|
|
+ this.popData.stock = item.stock
|
|
|
|
|
+ this.getShopGoodsSpec(item)
|
|
|
|
|
+ } else {
|
|
|
|
|
+ let data = JSON.parse(JSON.stringify(this.popData))
|
|
|
|
|
+ this.selectedSpecification.push(data)
|
|
|
|
|
+ console.log(this.popData, "666666666666666666")
|
|
|
|
|
+ console.log('1', this.popData.goods_id, this.shop_id, this.popData.goodsItem.category_id, this.popData
|
|
|
|
|
+ .spec_key, this.popData.num);
|
|
|
|
|
+ this.setShoppingSave()
|
|
|
|
|
+ this.isAjax = false
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ addShoppingSave(item, num, type) {
|
|
|
|
|
+ shoppingSave({
|
|
|
|
|
+ type: 1,
|
|
|
|
|
+ goods_id: item.goods_id,
|
|
|
|
|
+ shop_id: this.shop_id,
|
|
|
|
|
+ category_id: item.category_id,
|
|
|
|
|
+ goods_spec_id: '',
|
|
|
|
|
+ number: num
|
|
|
|
|
+ }).then((res) => {
|
|
|
|
|
+ if (res.code === 1) {
|
|
|
|
|
+ if (type === 1) {
|
|
|
|
|
+ tools.success('操作成功')
|
|
|
|
|
+ } else {
|
|
|
|
|
+ tools.success(res.msg)
|
|
|
|
|
+ }
|
|
|
|
|
+ this.isAjax = false
|
|
|
|
|
+ this.getShopIngList()
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.isAjax = false
|
|
|
|
|
+ tools.error(res.msg)
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ getHeight() {
|
|
|
|
|
+ const query = uni.createSelectorQuery();
|
|
|
|
|
+ query.select('.shop-info').boundingClientRect(data => {
|
|
|
|
|
+ this.heightOne = data.height;
|
|
|
|
|
+ console.log(this.heightOne, '0000000000');
|
|
|
|
|
+ }).exec();
|
|
|
|
|
+ query.select('.shop-type-box').boundingClientRect(data => {
|
|
|
|
|
+ this.heightTwo = data.height;
|
|
|
|
|
+ this.topHeight = this.heightOne + this.heightTwo + this.newNavHeight
|
|
|
|
|
+ console.log(this.topHeight, '111111');
|
|
|
|
|
+ }).exec();
|
|
|
|
|
+ },
|
|
|
|
|
+ navHeight(e) {
|
|
|
|
|
+ this.newNavHeight = e
|
|
|
|
|
+ },
|
|
|
|
|
+ mustBut() {
|
|
|
|
|
+ // 未点必选品
|
|
|
|
|
+ const item = {
|
|
|
|
|
+ type: this.cartData.must_category
|
|
|
|
|
+ }
|
|
|
|
|
+ this.$refs.goodsMenu.selectType(item)
|
|
|
|
|
+ },
|
|
|
|
|
+ setShopIngDel() {
|
|
|
|
|
+ uni.showModal({
|
|
|
|
|
+ title: '提示',
|
|
|
|
|
+ content: '是否清除购物车商品?',
|
|
|
|
|
+ success: (res) => {
|
|
|
|
|
+ console.log(res)
|
|
|
|
|
+ if (res.confirm) {
|
|
|
|
|
+ setShopIngDel({
|
|
|
|
|
+ 'shop_id': this.shop_id,
|
|
|
|
|
+ 'type': 1,
|
|
|
|
|
+ }).then((res) => {
|
|
|
|
|
+ if (res.code === 1) {
|
|
|
|
|
+ tools.success(res.msg)
|
|
|
|
|
+ this.getShopIngList()
|
|
|
|
|
+ this.$refs.popupBuy.close()
|
|
|
|
|
+ } else {
|
|
|
|
|
+ tools.error(res.msg)
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ setShoppingSave(item, type) {
|
|
|
|
|
+ console.log(item,'11111111');
|
|
|
|
|
+ if (type === 1) {
|
|
|
|
|
+ // 加
|
|
|
|
|
+ item.goods_number = item.goods_number + 1
|
|
|
|
|
+ } else {
|
|
|
|
|
+ // 减
|
|
|
|
|
+ if (item.goods_number < 0) {
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+ item.goods_number = item.goods_number - 1
|
|
|
|
|
+ }
|
|
|
|
|
+ return
|
|
|
|
|
+ if (this.isAjax) {
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+ this.isAjax = true
|
|
|
|
|
+ shoppingSave({
|
|
|
|
|
+ 'type': 1,
|
|
|
|
|
+ 'goods_id': item.goods_id,
|
|
|
|
|
+ 'shop_id': this.shop_id,
|
|
|
|
|
+ 'category_id': item.category_id,
|
|
|
|
|
+ 'goods_spec_id': item.goods_spec_id,
|
|
|
|
|
+ 'number': item.goods_number,
|
|
|
|
|
+ }).then(res => {
|
|
|
|
|
+ if (res.code == 1) {
|
|
|
|
|
+ this.isAjax = false
|
|
|
|
|
+ this.getShopIngList()
|
|
|
|
|
+ }
|
|
|
|
|
+ }).catch(() => {
|
|
|
|
|
+ this.isAjax = false
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ getShopIngList() {
|
|
|
|
|
+ getShopIngList({
|
|
|
|
|
+ 'shop_id': 111,
|
|
|
|
|
+ }).then(res => {
|
|
|
|
|
+ if (res.code === 1) {
|
|
|
|
|
+ this.cartData = res.data
|
|
|
|
|
+ if (this.shopType === 1) {
|
|
|
|
|
+ setTimeout(() => {
|
|
|
|
|
+ console.log('我的数据执行了')
|
|
|
|
|
+ // this.$refs.goodsMenu.setShopIngList(this.cartData)
|
|
|
|
|
+ }, 1000)
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ setCartData(cartData) {
|
|
|
|
|
+ this.cartData = cartData
|
|
|
|
|
+ this.getDeliveryMoney()
|
|
|
|
|
+ },
|
|
|
|
|
+ getDeliveryMoney() {
|
|
|
|
|
+ getDeliveryMoney({
|
|
|
|
|
+ 'school_id': this.operate_id,
|
|
|
|
|
+ 'shop_id': this.shop_id,
|
|
|
|
|
+ }).then(res => {
|
|
|
|
|
+ if (res.code === 1) {
|
|
|
|
|
+ this.delivery_money = res.data.delivery_money * 1
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ toBack() {
|
|
|
|
|
+ tools.leftClick()
|
|
|
|
|
+ },
|
|
|
|
|
+ getDomH(num) {
|
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
|
+ let info = uni.createSelectorQuery().select('#shopInfoBox');
|
|
|
|
|
+ info.boundingClientRect((data) => {
|
|
|
|
|
+ if (num === 1) {
|
|
|
|
|
+ this.domHeigjt = data.height + 72
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.domHeigjt = data.height + 72 + 48
|
|
|
|
|
+ }
|
|
|
|
|
+ }).exec()
|
|
|
|
|
+ })
|
|
|
|
|
+ // setTimeout(() => {
|
|
|
|
|
+
|
|
|
|
|
+ // }, 500)
|
|
|
|
|
+ },
|
|
|
|
|
+ seletShopType(item) {
|
|
|
|
|
+ if (this.shopType != item.id) {
|
|
|
|
|
+ this.shopType = item.id;
|
|
|
|
|
+ if (this.shopType == 1) {
|
|
|
|
|
+ this.shopTypeBsLeft = 12
|
|
|
|
|
+ } else if (this.shopType == 2) {
|
|
|
|
|
+ this.shopTypeBsLeft = 150
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.shopTypeBsLeft = 160 * 2
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ openBuyCrad() {
|
|
|
|
|
+ this.$refs.popupBuy.open()
|
|
|
|
|
+ },
|
|
|
|
|
+ createOrder() {
|
|
|
|
|
+ this.$refs.popupBuy.close()
|
|
|
|
|
+ },
|
|
|
|
|
+ openCoupon() {
|
|
|
|
|
+ this.$refs.popupCoupon.open()
|
|
|
|
|
+ },
|
|
|
|
|
+ closeCoupon() {
|
|
|
|
|
+ this.$refs.popupCoupon.close()
|
|
|
|
|
+ },
|
|
|
|
|
+ toConfirmOrder() {
|
|
|
|
|
+ uni.navigateTo({
|
|
|
|
|
+ url: '/pages-takeout/goods-order?shop_id=' + this.shop_id
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ shopInfo() {
|
|
|
|
|
+ const operate_id = uni.getStorageSync('operate_id')
|
|
|
|
|
+ shopInfo({
|
|
|
|
|
+ operate_id: operate_id,
|
|
|
|
|
+ shop_id: this.shop_id
|
|
|
|
|
+ }).then((res) => {
|
|
|
|
|
+ if (res.code == 1) {
|
|
|
|
|
+ this.shopsInfo = res.data
|
|
|
|
|
+ } else {
|
|
|
|
|
+ tools.error(res.msg)
|
|
|
|
|
+ setTimeout(() => {
|
|
|
|
|
+ uni.navigateBack({
|
|
|
|
|
+ delta: 1
|
|
|
|
|
+ })
|
|
|
|
|
+ }, 1500)
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ }
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
<style scoped lang="scss">
|
|
|
- .zh-icon {
|
|
|
|
|
- width: 32rpx;
|
|
|
|
|
- height: 32rpx;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .shp-list-img {
|
|
|
|
|
- width: 40rpx;
|
|
|
|
|
- height: 40rpx;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .dd-box {
|
|
|
|
|
- width: 144rpx;
|
|
|
|
|
- padding: 12rpx 0;
|
|
|
|
|
- background: rgba(0, 0, 0, 0.14);
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .ss-box {
|
|
|
|
|
- width: 64rpx;
|
|
|
|
|
- height: 64rpx;
|
|
|
|
|
- background: rgba(0, 0, 0, 0.14);
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .shop-search {
|
|
|
|
|
- width: 40rpx;
|
|
|
|
|
- height: 40rpx;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .wh-44 {
|
|
|
|
|
- width: 44rpx;
|
|
|
|
|
- height: 44rpx;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .blank-text {
|
|
|
|
|
- line-height: 32vh;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .box-title {
|
|
|
|
|
- position: relative;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .box-close {
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- right: 22rpx;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .pop-coupon {
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- height: 42vh;
|
|
|
|
|
- background-color: #F5F4F9;
|
|
|
|
|
- border-radius: 24rpx 24rpx 0rpx 0rpx;
|
|
|
|
|
- padding-top: 32rpx !important;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- flex-direction: column;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .item-right {
|
|
|
|
|
- padding: 24rpx;
|
|
|
|
|
- box-sizing: border-box;
|
|
|
|
|
- border-radius: 20rpx 0 0 20rpx;
|
|
|
|
|
- position: relative;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .item-hr {
|
|
|
|
|
- width: 0px;
|
|
|
|
|
- height: auto;
|
|
|
|
|
- border-right: 1rpx dashed #FB7850;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .item-hr-two {
|
|
|
|
|
- width: 0px;
|
|
|
|
|
- height: auto;
|
|
|
|
|
- border-right: 1rpx dashed #999;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .item-left {
|
|
|
|
|
- width: 220rpx;
|
|
|
|
|
- height: auto;
|
|
|
|
|
- padding: 20rpx 24rpx;
|
|
|
|
|
- box-sizing: border-box;
|
|
|
|
|
- position: relative;
|
|
|
|
|
- border-radius: 0 20rpx 20rpx 0;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .but-box {
|
|
|
|
|
- width: 152rpx;
|
|
|
|
|
- height: 52rpx;
|
|
|
|
|
- line-height: 52rpx;
|
|
|
|
|
- text-align: center;
|
|
|
|
|
- background: linear-gradient(225deg, #FB3D03 0%, #FF6901 100%);
|
|
|
|
|
- border-radius: 200rpx;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .ball {
|
|
|
|
|
- width: 24rpx;
|
|
|
|
|
- height: 24rpx;
|
|
|
|
|
- border-radius: 50%;
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- top: -12rpx;
|
|
|
|
|
- left: -12rpx;
|
|
|
|
|
- background: #F5F5F5;
|
|
|
|
|
- z-index: 2;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .ball-two {
|
|
|
|
|
- width: 24rpx;
|
|
|
|
|
- height: 24rpx;
|
|
|
|
|
- border-radius: 50%;
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- background: #F5F5F5;
|
|
|
|
|
- z-index: 10;
|
|
|
|
|
- bottom: -12rpx;
|
|
|
|
|
- left: -12rpx;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .shop-index {
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- min-height: 100vh;
|
|
|
|
|
- height: auto;
|
|
|
|
|
- position: relative;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .right-only-right-red {
|
|
|
|
|
- width: 44rpx;
|
|
|
|
|
- height: 44rpx;
|
|
|
|
|
- line-height: 40rpx;
|
|
|
|
|
- border-radius: 12rpx;
|
|
|
|
|
- border: 1rpx solid #41ABF5;
|
|
|
|
|
- color: #41ABF5;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .right-only-right-add {
|
|
|
|
|
- width: 44rpx;
|
|
|
|
|
- height: 44rpx;
|
|
|
|
|
- line-height: 40rpx;
|
|
|
|
|
- background: linear-gradient(117deg, #57CAFF 0%, #41ABF5 100%);
|
|
|
|
|
- border-radius: 12rpx;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .right-only-right-2 {
|
|
|
|
|
- min-width: 50rpx;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .w-514 {
|
|
|
|
|
- width: 514rpx;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .bg-img {
|
|
|
|
|
- position: fixed;
|
|
|
|
|
- top: 0;
|
|
|
|
|
- left: 0;
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- height: 300rpx;
|
|
|
|
|
- transition: linear .3s all;
|
|
|
|
|
- // height: 300rpx;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .bg-img-type {
|
|
|
|
|
- position: fixed;
|
|
|
|
|
- top: 0;
|
|
|
|
|
- left: 0;
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- // opacity: 100;
|
|
|
|
|
- transition: linear .3s all;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .mb-box {
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- top: 0;
|
|
|
|
|
- left: 0;
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- height: 300rpx;
|
|
|
|
|
- z-index: -1;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
- .nav-img {
|
|
|
|
|
- width: 56rpx;
|
|
|
|
|
- height: 56rpx;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .shop-buttom-money {
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- // height: 140rpx;
|
|
|
|
|
- background: rgba(255, 255, 255, 0.8);
|
|
|
|
|
- padding-left: 24rpx;
|
|
|
|
|
- padding-right: 24rpx;
|
|
|
|
|
- padding-bottom: calc(env(safe-area-inset-bottom) + 12rpx);
|
|
|
|
|
- padding-top: 22rpx;
|
|
|
|
|
- // padding: 20rpx 24rpx;
|
|
|
|
|
- position: fixed;
|
|
|
|
|
- left: 0;
|
|
|
|
|
- bottom: 0;
|
|
|
|
|
- z-index: 5;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .shop-buttom-num {
|
|
|
|
|
- width: 32rpx;
|
|
|
|
|
- height: 32rpx;
|
|
|
|
|
- line-height: 32rpx;
|
|
|
|
|
- border-radius: 50%;
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- top: 0rpx;
|
|
|
|
|
- left: 85rpx;
|
|
|
|
|
- border: 1rpx solid #FFFFFF;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .shop-buttom-money-2 {
|
|
|
|
|
- width: 200rpx;
|
|
|
|
|
- height: 80rpx;
|
|
|
|
|
- line-height: 80rpx;
|
|
|
|
|
- background: linear-gradient(270deg, #FF3333 0%, #FE6122 100%);
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .info-box-top {}
|
|
|
|
|
-
|
|
|
|
|
- .box-top-right {
|
|
|
|
|
- width: 100rpx;
|
|
|
|
|
- height: 100rpx;
|
|
|
|
|
- border-radius: 12rpx;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .box-top-left {}
|
|
|
|
|
-
|
|
|
|
|
- .top-left-1 {
|
|
|
|
|
- width: 480rpx;
|
|
|
|
|
- margin-bottom: 8rpx;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .img-x {
|
|
|
|
|
- width: 24rpx;
|
|
|
|
|
- height: 24rpx;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .buy-card {
|
|
|
|
|
- height: 828rpx;
|
|
|
|
|
- background-color: #fff;
|
|
|
|
|
- border-radius: 24rpx 24rpx 0rpx 0rpx;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .buy-card-top {
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- height: 92rpx;
|
|
|
|
|
- background: #FCF5DB;
|
|
|
|
|
- border-radius: 24rpx 24rpx 0rpx 0rpx;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .buy-card-item {
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- height: 176rpx;
|
|
|
|
|
- margin-bottom: 32rpx;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .goods_img {
|
|
|
|
|
- width: 152rpx;
|
|
|
|
|
- height: 152rpx;
|
|
|
|
|
- border-radius: 12rpx;
|
|
|
|
|
- margin-right: 20rpx;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .shop-buttom-money-1 {
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- height: 96rpx;
|
|
|
|
|
- position: relative;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .gwc-img {
|
|
|
|
|
- width: 88rpx;
|
|
|
|
|
- height: 88rpx;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .head-box {
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- position: relative;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .shop-info-box {
|
|
|
|
|
- box-shadow: 0rpx 8rpx 56rpx 0rpx rgba(154, 152, 152, 0.34);
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .info-box-quan-list {
|
|
|
|
|
- width: 164rpx;
|
|
|
|
|
- height: 48rpx;
|
|
|
|
|
- margin: 0 8rpx 8rpx 0;
|
|
|
|
|
- position: relative;
|
|
|
|
|
-
|
|
|
|
|
- image {
|
|
|
|
|
- width: 164rpx;
|
|
|
|
|
- height: 48rpx;
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- top: 0;
|
|
|
|
|
- left: 0;
|
|
|
|
|
- z-index: 1;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .quan-list-1 {
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- top: 3rpx;
|
|
|
|
|
- left: 8rpx;
|
|
|
|
|
- z-index: 2;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .quan-list-2 {
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- top: 8rpx;
|
|
|
|
|
- right: 22rpx;
|
|
|
|
|
- z-index: 2;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .shop-type-list {
|
|
|
|
|
- // height: 88rpx;
|
|
|
|
|
- position: relative;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .shop-item {
|
|
|
|
|
- position: relative;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .pj-num {
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- right: -80rpx;
|
|
|
|
|
- top: 0;
|
|
|
|
|
- text-align: left;
|
|
|
|
|
- width: 80rpx;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .shop-item-bs {
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- bottom: 0;
|
|
|
|
|
- width: 40rpx;
|
|
|
|
|
- height: 6rpx;
|
|
|
|
|
- border-radius: 20rpx;
|
|
|
|
|
- transition: left 0.5s;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .sticky-nav {
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- position: sticky;
|
|
|
|
|
- z-index: 3;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .wh-44 {
|
|
|
|
|
- width: 44rpx;
|
|
|
|
|
- height: 44rpx;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .menu-box-left-f {
|
|
|
|
|
- position: sticky;
|
|
|
|
|
- // transition: all .3s ease;
|
|
|
|
|
- // overflow: auto;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .menu-box-left {
|
|
|
|
|
- width: 160rpx;
|
|
|
|
|
- height: auto;
|
|
|
|
|
- position: sticky;
|
|
|
|
|
- overflow: auto;
|
|
|
|
|
- // transition: all .3s ease;
|
|
|
|
|
- // height: 100%;
|
|
|
|
|
- // background-color: #F7F8FA;
|
|
|
|
|
- // position: absolute;
|
|
|
|
|
- // left: 0;
|
|
|
|
|
- // top: 0;
|
|
|
|
|
- // border-radius: 0rpx 20rpx 0 0rpx;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .menu-box-left-box {
|
|
|
|
|
- overflow-y: auto;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .menu-type-list {
|
|
|
|
|
- width: 160rpx;
|
|
|
|
|
- min-height: 108rpx;
|
|
|
|
|
- padding: 18rpx 28rpx;
|
|
|
|
|
- position: relative;
|
|
|
|
|
- z-index: 10;
|
|
|
|
|
-
|
|
|
|
|
- .menu-type-num {
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- top: 2rpx;
|
|
|
|
|
- right: 8rpx;
|
|
|
|
|
- padding: 0 6rpx;
|
|
|
|
|
- min-width: 20rpx;
|
|
|
|
|
- height: 32rpx;
|
|
|
|
|
- text-align: center;
|
|
|
|
|
- line-height: 32rpx;
|
|
|
|
|
- background: #FB3D03;
|
|
|
|
|
- border-radius: 50%;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .menu-type-list-f {
|
|
|
|
|
- // width: 160rpx;
|
|
|
|
|
- background-color: #007AFF;
|
|
|
|
|
-
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- height: 100%;
|
|
|
|
|
- overflow-y: auto;
|
|
|
|
|
- /* 如果分类项很多,允许内部滚动 */
|
|
|
|
|
- -webkit-overflow-scrolling: touch;
|
|
|
|
|
- /* 改善移动端滚动体验 */
|
|
|
|
|
- // height: 100%;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .menu-box-only {
|
|
|
|
|
- // flex: 1;
|
|
|
|
|
- width: calc(100% - 160rpx);
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .menu-box-right {
|
|
|
|
|
- // flex: 1;
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- height: 100%;
|
|
|
|
|
- // padding: 16rpx 0;
|
|
|
|
|
- // box-sizing: border-box;
|
|
|
|
|
- // position: relative;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .menu-list {
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- padding: 0 20rpx 40rpx;
|
|
|
|
|
- // height: 200rpx;
|
|
|
|
|
- // margin-bottom: 40rpx;
|
|
|
|
|
-
|
|
|
|
|
- .goods_img {
|
|
|
|
|
- width: 200rpx;
|
|
|
|
|
- height: 200rpx;
|
|
|
|
|
- border-radius: 12rpx;
|
|
|
|
|
- margin-right: 16rpx;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .menu-list-right {
|
|
|
|
|
- flex: 1;
|
|
|
|
|
-
|
|
|
|
|
- .right-only-right {
|
|
|
|
|
- width: 100rpx;
|
|
|
|
|
- height: 44rpx;
|
|
|
|
|
- background: linear-gradient(117deg, #57CAFF 0%, #41ABF5 100%);
|
|
|
|
|
- border-radius: 12rpx;
|
|
|
|
|
- line-height: 44rpx;
|
|
|
|
|
- position: relative;
|
|
|
|
|
-
|
|
|
|
|
- .selectedNum {
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- right: 2rpx;
|
|
|
|
|
- top: -22rpx;
|
|
|
|
|
- font-size: 24rpx;
|
|
|
|
|
- color: #fff;
|
|
|
|
|
- width: 32rpx;
|
|
|
|
|
- height: 32rpx;
|
|
|
|
|
- line-height: 32rpx;
|
|
|
|
|
- background: #FB3D03;
|
|
|
|
|
- border-radius: 50%;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .right-only-right-red {
|
|
|
|
|
- width: 44rpx;
|
|
|
|
|
- height: 44rpx;
|
|
|
|
|
- line-height: 40rpx;
|
|
|
|
|
- border-radius: 12rpx;
|
|
|
|
|
- border: 1rpx solid #41ABF5;
|
|
|
|
|
- color: #41ABF5;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .right-only-right-add {
|
|
|
|
|
- width: 44rpx;
|
|
|
|
|
- height: 44rpx;
|
|
|
|
|
- line-height: 40rpx;
|
|
|
|
|
- background: linear-gradient(117deg, #57CAFF 0%, #41ABF5 100%);
|
|
|
|
|
- border-radius: 12rpx;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .right-only-right-2 {
|
|
|
|
|
- min-width: 50rpx;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-</style>
|
|
|
|
|
|
|
+ .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: 920rpx;
|
|
|
|
|
+ border-radius: 24rpx 24rpx 0rpx 0rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .buy-card-top {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 92rpx;
|
|
|
|
|
+ background: #FCF5DB;
|
|
|
|
|
+ border-radius: 24rpx 24rpx 0rpx 0rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .buy-card-item {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 176rpx;
|
|
|
|
|
+ margin-bottom: 32rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .goods_img {
|
|
|
|
|
+ width: 152rpx;
|
|
|
|
|
+ height: 152rpx;
|
|
|
|
|
+ border-radius: 12rpx;
|
|
|
|
|
+ margin-right: 20rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .shop-buttom-money-1 {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 96rpx;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .gwc-img {
|
|
|
|
|
+ width: 88rpx;
|
|
|
|
|
+ height: 88rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .head-box {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .shop-info-box {
|
|
|
|
|
+ box-shadow: 0rpx 8rpx 56rpx 0rpx rgba(154, 152, 152, 0.34);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .info-box-quan-list {
|
|
|
|
|
+ width: 164rpx;
|
|
|
|
|
+ height: 48rpx;
|
|
|
|
|
+ margin: 0 8rpx 8rpx 0;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+
|
|
|
|
|
+ image {
|
|
|
|
|
+ width: 164rpx;
|
|
|
|
|
+ height: 48rpx;
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 0;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ z-index: 1;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .quan-list-1 {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 3rpx;
|
|
|
|
|
+ left: 8rpx;
|
|
|
|
|
+ z-index: 2;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .quan-list-2 {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 8rpx;
|
|
|
|
|
+ right: 22rpx;
|
|
|
|
|
+ z-index: 2;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .shop-type-list {
|
|
|
|
|
+ // height: 88rpx;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .shop-item {
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .pj-num {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ right: -80rpx;
|
|
|
|
|
+ top: 0;
|
|
|
|
|
+ text-align: left;
|
|
|
|
|
+ width: 80rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .shop-item-bs {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ bottom: 0;
|
|
|
|
|
+ width: 40rpx;
|
|
|
|
|
+ height: 6rpx;
|
|
|
|
|
+ border-radius: 20rpx;
|
|
|
|
|
+ transition: left 0.5s;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .sticky-nav {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ position: sticky;
|
|
|
|
|
+ z-index: 3;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .wh-44 {
|
|
|
|
|
+ width: 44rpx;
|
|
|
|
|
+ height: 44rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .menu-box-left-f {
|
|
|
|
|
+ position: sticky;
|
|
|
|
|
+ // transition: all .3s ease;
|
|
|
|
|
+ // overflow: auto;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .menu-box-left {
|
|
|
|
|
+ width: 160rpx;
|
|
|
|
|
+ height: auto;
|
|
|
|
|
+ position: sticky;
|
|
|
|
|
+ overflow: auto;
|
|
|
|
|
+ // transition: all .3s ease;
|
|
|
|
|
+ // height: 100%;
|
|
|
|
|
+ // background-color: #F7F8FA;
|
|
|
|
|
+ // position: absolute;
|
|
|
|
|
+ // left: 0;
|
|
|
|
|
+ // top: 0;
|
|
|
|
|
+ // border-radius: 0rpx 20rpx 0 0rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .menu-box-left-box {
|
|
|
|
|
+ overflow-y: auto;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .menu-type-list {
|
|
|
|
|
+ width: 160rpx;
|
|
|
|
|
+ min-height: 108rpx;
|
|
|
|
|
+ padding: 18rpx 28rpx;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ z-index: 10;
|
|
|
|
|
+
|
|
|
|
|
+ .menu-type-num {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 2rpx;
|
|
|
|
|
+ right: 8rpx;
|
|
|
|
|
+ padding: 0 6rpx;
|
|
|
|
|
+ min-width: 20rpx;
|
|
|
|
|
+ height: 32rpx;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ line-height: 32rpx;
|
|
|
|
|
+ background: #FB3D03;
|
|
|
|
|
+ border-radius: 50%;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .menu-type-list-f {
|
|
|
|
|
+ // width: 160rpx;
|
|
|
|
|
+ background-color: #007AFF;
|
|
|
|
|
+
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ overflow-y: auto;
|
|
|
|
|
+ /* 如果分类项很多,允许内部滚动 */
|
|
|
|
|
+ -webkit-overflow-scrolling: touch;
|
|
|
|
|
+ /* 改善移动端滚动体验 */
|
|
|
|
|
+ // height: 100%;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .menu-box-only {
|
|
|
|
|
+ // flex: 1;
|
|
|
|
|
+ width: calc(100% - 160rpx);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .menu-box-right {
|
|
|
|
|
+ // flex: 1;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ // padding: 16rpx 0;
|
|
|
|
|
+ // box-sizing: border-box;
|
|
|
|
|
+ // position: relative;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .menu-list {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ padding: 0 20rpx 40rpx;
|
|
|
|
|
+ // height: 200rpx;
|
|
|
|
|
+ // margin-bottom: 40rpx;
|
|
|
|
|
+
|
|
|
|
|
+ .goods_img {
|
|
|
|
|
+ width: 200rpx;
|
|
|
|
|
+ height: 200rpx;
|
|
|
|
|
+ border-radius: 12rpx;
|
|
|
|
|
+ margin-right: 16rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .menu-list-right {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+
|
|
|
|
|
+ .right-only-right {
|
|
|
|
|
+ width: 100rpx;
|
|
|
|
|
+ height: 44rpx;
|
|
|
|
|
+ background: linear-gradient(117deg, #57CAFF 0%, #41ABF5 100%);
|
|
|
|
|
+ border-radius: 12rpx;
|
|
|
|
|
+ line-height: 44rpx;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+
|
|
|
|
|
+ .selectedNum {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ right: 2rpx;
|
|
|
|
|
+ top: -22rpx;
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ width: 32rpx;
|
|
|
|
|
+ height: 32rpx;
|
|
|
|
|
+ line-height: 32rpx;
|
|
|
|
|
+ background: #FB3D03;
|
|
|
|
|
+ border-radius: 50%;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .right-only-right-red {
|
|
|
|
|
+ width: 44rpx;
|
|
|
|
|
+ height: 44rpx;
|
|
|
|
|
+ line-height: 40rpx;
|
|
|
|
|
+ border-radius: 12rpx;
|
|
|
|
|
+ border: 1rpx solid #41ABF5;
|
|
|
|
|
+ color: #41ABF5;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .right-only-right-add {
|
|
|
|
|
+ width: 44rpx;
|
|
|
|
|
+ height: 44rpx;
|
|
|
|
|
+ line-height: 40rpx;
|
|
|
|
|
+ background: linear-gradient(117deg, #57CAFF 0%, #41ABF5 100%);
|
|
|
|
|
+ border-radius: 12rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .right-only-right-2 {
|
|
|
|
|
+ min-width: 50rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+</style>
|