2067 lines
56 KiB
Vue
2067 lines
56 KiB
Vue
<template>
|
||
<view v-if="shop" class="hm-wrap">
|
||
<view class="hm-header-xian"></view>
|
||
<!-- 门店信息展示 -->
|
||
<view class="head">
|
||
<!-- 点餐模式-->
|
||
<view class="food-mode">
|
||
<view v-if="table_id">
|
||
<view class="table">
|
||
{{tableName}}
|
||
<view @click="del_table" class="del">
|
||
<u-icon name="close" color="#999" size="20"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-else>
|
||
<u-subsection @change="setFoodMode" :list="shop.food_mode.tab" :current="foodModeIndex"
|
||
bgColor="#f3f4f6" inactiveColor="#909193" activeColor="#303133" mode="button"
|
||
keyName="text"></u-subsection>
|
||
</view>
|
||
</view>
|
||
<!-- 门店名称 -->
|
||
<view class="shop-name">
|
||
<view class="hm-dis-block-inline hm-m-r-10">
|
||
<u-icon name="star" size="20" color="#303133" bold></u-icon>
|
||
</view>
|
||
{{shop.shop_name}}
|
||
</view>
|
||
<!-- 距店距离 -->
|
||
<view class="distance">
|
||
距离您{{shop.location}}
|
||
<view class="hm-dis-block-inline hm-m-l-20" v-if="applet.shop_mode.value == 20"
|
||
@click="goTo('shop/list')">
|
||
切换门店
|
||
<view class="hm-dis-block-inline">
|
||
<u-icon name="arrow-right" size="15" color="#999" bold></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 顶部导航条 -->
|
||
<view class="hm-p-lr-20 hm-bg-f hm-border-b">
|
||
<u-tabs :list="menu" :current="cut" @click="menuTab" :itemStyle="{height:'35px'}" lineColor="#ff9900"
|
||
:activeStyle="{color:'#ff9900'}"></u-tabs>
|
||
</view>
|
||
<!-- 点单界面 -->
|
||
<!-- #ifdef MP-WEIXIN || H5 -->
|
||
<block v-if="cut==0">
|
||
<!-- #endif -->
|
||
<!-- #ifdef MP-ALIPAY -->
|
||
<view v-if="cut==0">
|
||
<!-- #endif -->
|
||
<view v-if="category.length" class="menu-wrap">
|
||
<!-- 左侧菜单 -->
|
||
<scroll-view scroll-y scroll-with-animation class="tab-view menu-scroll-view" :scroll-top="scrollTop"
|
||
:scroll-into-view="itemId">
|
||
<view v-for="(item,index) in category" :key="index" class="tab-item"
|
||
:class="[current == index ? 'tab-item-active' : '']" @tap.stop="swichMenu(index)">
|
||
<text class="hm-line-1">{{item.name}}</text>
|
||
</view>
|
||
<view v-if="order_total_num > 0 && shop.status.value == 1" class="hm-h-100"></view>
|
||
</scroll-view>
|
||
<!-- 右侧商品列表 -->
|
||
<scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box"
|
||
@scroll="rightScroll">
|
||
<view class="class-item" :id="'item' + index" v-for="(item , index) in category" :key="index">
|
||
<view class="item-title">{{item.name}}</view>
|
||
<view class="item-goods" v-for="(item1, index1) in item.goods" :key="index1">
|
||
<image @click="setGoodsDetailShow(index,index1)" :src="item1.image[0].url"></image>
|
||
<div v-if="applet.other.is_stock == 1 && item1.stock < 1" class="tag">
|
||
售罄
|
||
</div>
|
||
<div v-else-if="item1.goods_status.value == 20" class="tag">
|
||
{{item1.goods_status.text}}
|
||
</div>
|
||
<view class="title hm-line-1">{{item1.goods_name}}</view>
|
||
<view class="selling hm-line-1">
|
||
<text v-if="item1.selling_point">{{item1.selling_point}}</text>
|
||
</view>
|
||
<!-- 选购工具 -->
|
||
<view v-if="item1.goods_status.value == 10" class="cart-but">
|
||
<view
|
||
v-if="applet.other.is_stock == 0 || (applet.other.is_stock == 1 && item1.stock > 1)">
|
||
<view v-if="item1.spec_type == 10 || item1.total_num > 0">
|
||
<view class="but add" @click="addCount(index,index1)">
|
||
<view class="icon">
|
||
<u-icon name="plus" color="#fff" bold></u-icon>
|
||
</view>
|
||
</view>
|
||
<view v-if="item1.total_num>0" class="total-num">
|
||
<u--input @focus="cart_focus(index,index1)" @input="cart_input" :value="item1.total_num" inputAlign="center" border="none" type="number"></u--input>
|
||
</view>
|
||
<view class="but minus" v-if="item1.total_num>0"
|
||
@click="minusCount(index,index1)">
|
||
<view class="icon">
|
||
<u-icon name="minus" color="#FF9900"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-else>
|
||
<view class="spec" @click="addCount(index,index1)">选择</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="sold">
|
||
<text v-if="item1.start_sale>1" class="hm-col-warning">{{item1.start_sale}}个起售</text> 月售{{item1.month_sales}}
|
||
</view>
|
||
<view class="price">￥{{item1.spec[0].goods_price}}</view>
|
||
</view>
|
||
</view>
|
||
<!-- 技术支持 -->
|
||
<view class="hm">
|
||
{{applet.copyright}} <text class="v">V{{applet.version}}</text>
|
||
</view>
|
||
<view v-if="order_total_num > 0 && shop.status.value == 1" class="hm-h-100"></view>
|
||
</scroll-view>
|
||
</view>
|
||
<view v-else class="hm">
|
||
<img :src="applet.domain + '/addons/food/img/empty/data.png'" />
|
||
<view class="text">暂无数据</view>
|
||
<!-- 技术支持 -->
|
||
<view class="hm">
|
||
{{applet.copyright}} <text class="v">V{{applet.version}}</text>
|
||
</view>
|
||
</view>
|
||
<!-- 门店休息提醒 -->
|
||
<view v-if="shop.status.value == 0" class="shop-rest" @click="shopRest = true">
|
||
当前门店已经休息
|
||
<view class="icon">
|
||
<u-icon name="arrow-up" color="#fff"></u-icon>
|
||
</view>
|
||
</view>
|
||
<!-- 门店休息弹窗 -->
|
||
<u-popup :show="shopRest" round="10" @close="shopRest = false" closeable>
|
||
<view class="hm-p-20">
|
||
<view class="hm-col-tips hm-border-b hm-p-b-20">当前门店已休息</view>
|
||
<view class="hm-p-t-20 hm-text-center">
|
||
<view class="hm-dis-block-inline">
|
||
<u-button @click="shopRestTpl" size="small" text="营业提醒" plain></u-button>
|
||
</view>
|
||
</view>
|
||
<view class="hm-font-28 hm-col-tips hm-p-20 hm-text-center">门店营业时间：周一至周日 {{shop.shop_hours}}</view>
|
||
</view>
|
||
</u-popup>
|
||
<!-- 门店选择 -->
|
||
<u-popup :show="chooseShop" round="10" @close="chooseShop = false" closeable safeAreaInsetBottom>
|
||
<view class="hm-p-20">
|
||
<view class="hm-p-b-20 hm-border-b">附近门店</view>
|
||
<view v-for="(item, index) in shopList" :key="index"
|
||
:class="index == shopIndex?'choose-shop-active':'choose-shop'">
|
||
<view class="choose-shop-checked">
|
||
<radio-group @change="shopIndex = index">
|
||
<label>
|
||
<radio :checked="index == shopIndex" color="#ff9900" :value="toString(index)">
|
||
</radio>
|
||
</label>
|
||
</radio-group>
|
||
</view>
|
||
<view class="hm-font-30 hm-col-content">
|
||
{{item.shop_name}}
|
||
<text class="hm-m-l-10 hm-font-22">{{item.location}}</text>
|
||
<view class="hm-dis-block-inline hm-m-l-10">
|
||
<u-tag :text="item.status.text" :type="item.status.value?'success':'error'" size="mini"
|
||
plain></u-tag>
|
||
</view>
|
||
</view>
|
||
<view class="hm-line-1 hm-font-26 hm-col-tips">
|
||
{{item.city + item.district + item.address}}
|
||
</view>
|
||
</view>
|
||
<view class="hm-m-t-50 hm-text-center">
|
||
<view class="choose-shop-but">
|
||
<u-button @click="goTo('shop/list')" type="warning" color="#ff9900" text="切换门店" plain>
|
||
</u-button>
|
||
</view>
|
||
<view class="choose-shop-but hm-m-l-50">
|
||
<u-button @click="setChooseShop" type="warning" text="确认选择"></u-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
<!-- 商品详情 -->
|
||
<u-popup :show="goods_detail_show" @close="setGoodsDetailClose" mode="center" round="10" :closeable="true">
|
||
<view v-if="goods_detail" class="goods-detail">
|
||
<view class="title">
|
||
{{goods_detail.goods_name}}
|
||
<!-- #ifndef H5 || APP-PLUS -->
|
||
<view class="share">
|
||
<button class="hm-btn-normal" open-type="share">
|
||
<u-icon name="share-square" color="#999" size="25"></u-icon>
|
||
</button>
|
||
</view>
|
||
<!-- #endif -->
|
||
</view>
|
||
<view class="goods">
|
||
<image :src="goods_detail.image[0].url" />
|
||
<view class="hm-p-t-10">
|
||
<text class="hm-col-error hm-font-b">
|
||
￥{{goods_detail.spec[0].goods_price}}
|
||
</text>
|
||
<text class="hm-font-zhx hm-col-tips hm-m-l-20" v-if="goods_detail.spec[0].line_price>0">
|
||
￥{{goods_detail.spec[0].line_price}}
|
||
</text>
|
||
<text class="hm-col-tips hm-fr">
|
||
月售 {{goods_detail.month_sales}}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<view class="hm-p-t-20">
|
||
<view v-if="shop.status.value" class="cart-but">
|
||
<view v-if="goods_detail.spec_type == 10 || goods_detail.total_num > 0">
|
||
<view class="but add" @click="addCount(goods_index,goods_index1)">
|
||
<view class="icon">
|
||
<u-icon name="plus" color="#fff" bold></u-icon>
|
||
</view>
|
||
</view>
|
||
<view v-if="goods_detail.total_num>0" class="total-num">
|
||
<u--input @focus="cart_focus(goods_index,goods_index1)" @input="cart_input" :value="goods_detail.total_num" inputAlign="center" border="none" type="number"></u--input>
|
||
</view>
|
||
<view class="but minus" v-if="goods_detail.total_num>0"
|
||
@click="minusCount(goods_index,goods_index1)">
|
||
<view class="icon">
|
||
<u-icon name="minus" color="#FF9900"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-else>
|
||
<view class="spec" @click="addCount(goods_index,goods_index1)">选择</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
<!-- 多规格选择框 -->
|
||
<u-popup :show="show" round="10" zIndex='10100' @close="show = false" closeable>
|
||
<view v-if="goods" class="spec-box">
|
||
<view class="goods">
|
||
<image :src="goods_img"></image>
|
||
<view class="goods-name">{{goods.goods_name}}</view>
|
||
<view class="spec-name">{{spec_name}}</view>
|
||
<view class="hm-col-error">
|
||
￥{{goods_price}}
|
||
<text class="hm-font-zhx hm-col-tips hm-m-l-10" v-if="line_price>0">￥{{line_price}}</text>
|
||
</view>
|
||
</view>
|
||
<view v-for="(attr, attr_idx) in specData.spec_attr" :key="attr_idx">
|
||
<view class="title" :data-id="attr.group_id">{{attr.group_name}}</view>
|
||
<view class="hm-cf hm-p-b-20">
|
||
<view v-for="(item, item_idx) in attr.spec_items" :key="item_idx" class="but"
|
||
:class="item.checked?'but-ok':'but-no'" @click="specTap(attr_idx,item_idx)">
|
||
{{item.spec_value}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="hm-p-b-20">
|
||
<view class="title">购买数量</view>
|
||
<view class="selectNumber">
|
||
<view @click="down"
|
||
:class="'default left ' + (goods.spec[spec_index].sell_num>=1?'':' default-active')">-
|
||
</view>
|
||
<view class="num">{{goods.spec[spec_index].sell_num}}</view>
|
||
<view @click="up" class="default right">+</view>
|
||
<view v-if="applet.other.is_stock==1 && stock_num < 1"
|
||
class="hm-dis-block-inline hm-m-l-10">
|
||
<u-badge value="库存不足" shape="horn"></u-badge>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="hm-p-lr-b25 hm-m-t-20">
|
||
<u-button @click="show = false;" type="warning" text="加入购物车"></u-button>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
<!-- 底部购物车工具栏 -->
|
||
<view v-if="order_total_num > 0 && shop.status.value == 1">
|
||
<!-- #ifdef H5 -->
|
||
<view class="hm-footer-fixed-h5">
|
||
<!-- #endif -->
|
||
<!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
|
||
<view class="hm-footer-fixed">
|
||
<!-- #endif -->
|
||
<view class="bottom-cart">
|
||
<view class="cart" @click="cart_show = true">
|
||
<view class="icon">
|
||
<u-icon name="shopping-cart-fill" color="#FF9900" size="40"></u-icon>
|
||
</view>
|
||
<view class="count">{{order_total_num}}</view>
|
||
</view>
|
||
<view class="total">
|
||
<view class="text">￥{{order_total_price}}</view>
|
||
<view class="min-price" v-if="foodMode == 10">支持扫码与排号点单</view>
|
||
<view class="min-price" v-if="foodMode == 20">
|
||
<text v-if="min_price > 0">外卖起送差{{min_price}}元</text>
|
||
<text v-else>预计30分钟内送达</text>
|
||
</view>
|
||
<view class="min-price" v-if="foodMode == 30">支持预约下单</view>
|
||
</view>
|
||
<view class="but">
|
||
<u-button @click="gotoCart()" type="warning"
|
||
:customStyle="{height:'100rpx',width:'200rpx'}"
|
||
:disabled="foodMode == 20 && min_price != 0" text="确认订单"></u-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 底部购物车列表 -->
|
||
<u-popup :show="cart_show" round="10" @close="cart_show = false" closeable>
|
||
<view class="cart-list">
|
||
<view class="title">
|
||
购物车列表
|
||
<view class="cler">
|
||
<u-button size="small" @click="cartCler()" text="清空" icon="trash"></u-button>
|
||
</view>
|
||
</view>
|
||
<view class="item" v-for="(item, index) in goodslist" :key="index">
|
||
<image v-if="item.spec_type == 10" :src="item.image[0].url"></image>
|
||
<image v-if="item.spec_type == 20"
|
||
:src="item.goods_sku.image.url ?item.goods_sku.image.url:item.image[0].url"></image>
|
||
<view class="cart-but">
|
||
<view class="but add" @click="cartUp(index)">
|
||
<view class="icon">
|
||
<u-icon name="plus" color="#fff" bold></u-icon>
|
||
</view>
|
||
</view>
|
||
<view class="total-num">{{item.total_num}}</view>
|
||
<view class="but minus" @click="cartDown(index)">
|
||
<view class="icon">
|
||
<u-icon name="minus" color="#FF9900"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="goods-name">
|
||
{{item.goods_name}}
|
||
<view class="goods-attr">{{item.goods_sku.goods_attr}}</view>
|
||
</view>
|
||
<view class="goods-price">
|
||
￥{{item.goods_sku.goods_price}}
|
||
<text class="hm-font-zhx hm-col-tips hm-m-l-10"
|
||
v-if="item.goods_sku.line_price>0">￥{{item.goods_sku.line_price}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
<!-- #ifdef MP-WEIXIN || H5 -->
|
||
</block>
|
||
<!-- #endif -->
|
||
<!-- #ifdef MP-ALIPAY -->
|
||
</view>
|
||
<!-- #endif -->
|
||
<!-- 评价界面 -->
|
||
<!-- #ifdef MP-WEIXIN || H5 -->
|
||
<block v-if="cut==1">
|
||
<!-- #endif -->
|
||
<!-- #ifdef MP-ALIPAY -->
|
||
<view v-if="cut==1">
|
||
<!-- #endif -->
|
||
<!-- 评分展示 -->
|
||
<view class="score-detail hm-m-t-20">
|
||
<view class="left">
|
||
<view class="score">{{score.all}}</view>
|
||
<view class="hm-font-24">商家评分</view>
|
||
</view>
|
||
<view class="right">
|
||
<view class="hm-p-tb-10">
|
||
口味
|
||
<view class="hm-dis-block-inline">
|
||
<u-rate :value="score.flavor" activeColor="#ff9900" inactiveColor="#999" readonly
|
||
allowHalf></u-rate>
|
||
</view>
|
||
</view>
|
||
<view class="hm-p-tb-10">
|
||
卫生
|
||
<view class="hm-dis-block-inline">
|
||
<u-rate :value="score.ambient" activeColor="#ff9900" inactiveColor="#999" readonly
|
||
allowHalf></u-rate>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="right">
|
||
<view class="hm-p-tb-10">
|
||
服务
|
||
<view class="hm-dis-block-inline">
|
||
<u-rate :value="score.serve" activeColor="#ff9900" inactiveColor="#999" readonly
|
||
allowHalf></u-rate>
|
||
</view>
|
||
</view>
|
||
<view class="hm-p-tb-10">
|
||
速度
|
||
<view class="hm-dis-block-inline">
|
||
<u-rate :value="score.speed" activeColor="#ff9900" inactiveColor="#999" readonly
|
||
allowHalf></u-rate>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<scroll-view scroll-y class="hm-w-h" @scrolltolower="cmtReachBottom">
|
||
<!-- 评分列表 -->
|
||
<view v-if="(cmt_list.data).length">
|
||
<view class="hm-m-t-20">
|
||
<view v-for="(item, index) in cmt_list.data" :key="index">
|
||
<view v-if="item.is_show.value == 1" class="score-list hm-border-b">
|
||
<view class="left">
|
||
<image :src="item.user.avatar.url"></image>
|
||
</view>
|
||
<view class="right">
|
||
<view class="hm-font-30 hm-p-l-10">
|
||
{{item.user.nickname}}
|
||
<text
|
||
class="hm-fr hm-col-tips hm-font-22">{{$u.timeFormat(item.create_time)}}</text>
|
||
</view>
|
||
<view class="hm-p-b-10">
|
||
<u-rate :value="item.total" activeColor="#ff9900" inactiveColor="#909399"
|
||
readonly allowHalf></u-rate>
|
||
</view>
|
||
<view class="hm-p-tb-20 hm-font-28 hm-border-t">{{item.content}}</view>
|
||
<view v-if="item.reply" class="hm-bg hm-p-20 hm-br-8 hm-col-tips hm-font-26">
|
||
{{item.reply}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="hm-p-20">
|
||
<u-loadmore :status="loadStatus" bgColor="#f3f4f6"></u-loadmore>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-else class="hm">
|
||
<img :src="applet.domain + '/addons/food/img/empty/comment.png'" />
|
||
<view class="text">暂无评论记录</view>
|
||
</view>
|
||
<view class="hm">
|
||
{{applet.copyright}} <text class="v">V{{applet.version}}</text>
|
||
</view>
|
||
</scroll-view>
|
||
<!-- #ifdef MP-WEIXIN || H5 -->
|
||
</block>
|
||
<!-- #endif -->
|
||
<!-- #ifdef MP-ALIPAY -->
|
||
</view>
|
||
<!-- #endif -->
|
||
<!-- 门店详情 -->
|
||
<view v-if="cut==2">
|
||
<view class="hm-p-lr-20 hm-m-t-20">
|
||
<view class="menu hm-col-tips hm-font-26">
|
||
<view class="navbar-list" @click="openLocation()">
|
||
<image src="/static/user/address.png"></image>
|
||
{{shop.city + shop.district + shop.address}}
|
||
<view class="arrow-right">
|
||
<u-icon color="#c0c4cc" name="arrow-right"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view class="navbar-list" @click="phone(shop.phone)">
|
||
<image src="/static/user/phone.png"></image>
|
||
{{shop.phone}}
|
||
<view class="arrow-right">
|
||
<u-icon color="#c0c4cc" name="arrow-right"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view class="navbar-list">
|
||
<image src="/static/user/growup.png"></image>
|
||
营业时间：{{shop.shop_hours}}
|
||
</view>
|
||
<view class="navbar-list" @click="shopRestTpl()">
|
||
<image src="/static/user/equity.png"></image>
|
||
工商营业执照
|
||
<view class="arrow-right">
|
||
<u-icon color="#c0c4cc" name="arrow-right"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view class="navbar-list" @click="shopRestTpl()">
|
||
<image src="/static/user/cas.png"></image>
|
||
食品经营许可证
|
||
<view class="arrow-right">
|
||
<u-icon color="#c0c4cc" name="arrow-right"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="hm">
|
||
{{applet.copyright}} <text class="v">V{{applet.version}}</text>
|
||
</view>
|
||
</view>
|
||
<u-modal :show="scanCodeShow" title="友情提示" content="当前为扫码模式，扫桌码后才可以下单" confirmText="扫一扫" confirmColor="#19be6b"
|
||
@confirm="scanCode" @cancel="scanCodeShow = false" showCancelButton></u-modal>
|
||
<u-popup :show="authBox" zIndex="900000" mode="center" round="10">
|
||
<view class="hm-popup">
|
||
<view class="hm-p-b-20 hm-border-b">权限设置</view>
|
||
<view class="hm-p-20 hm-col-tips hm-text-center">
|
||
你未开启获取位置权限！
|
||
</view>
|
||
<view class="hm-p-lr-b25">
|
||
<u-button type="success" openType="openSetting" text="去开启"></u-button>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
const App = getApp();
|
||
export default {
|
||
data() {
|
||
return {
|
||
scanCodeShow: false, //扫一扫提示
|
||
authBox: false, //授权弹窗
|
||
applet: {
|
||
shop_mode: {
|
||
value: 10
|
||
}
|
||
},
|
||
shop_id:'',//门店参数
|
||
table_id: '', //扫码参数
|
||
tableName: '', //餐桌名称
|
||
foodMode: 10, //10=堂食，20=外卖，30=外带
|
||
foodModeIndex: 0, //点单模式 - 默认选项
|
||
menu: [{
|
||
"name": "点单"
|
||
}, {
|
||
"name": "评价"
|
||
}, {
|
||
"name": "详情"
|
||
}],
|
||
cut: 0,
|
||
scrollTop: 0, //tab标题的滚动条位置
|
||
oldScrollTop: 0,
|
||
current: 0, // 预设当前项的值
|
||
menuHeight: 0, // 左边菜单的高度
|
||
menuItemHeight: 0, // 左边菜单item的高度
|
||
itemId: '', // 栏目右边scroll-view用于滚动的id
|
||
arr: [],
|
||
scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
|
||
|
||
//购物车数据
|
||
goodslist: {}, //购物车商品列表
|
||
category: {}, //分类+商品列表
|
||
order_total_num: 0, //购物车商品总数
|
||
order_total_price: 0, //购物车商品总价
|
||
min_price: 0, //起送价
|
||
cart_show: false,
|
||
|
||
//多规格商品数据
|
||
show: false, //是否显示
|
||
goods_spec_arr: [],
|
||
goods: null, //商品详情
|
||
specData: {}, //商品规格
|
||
goods_sku_id: '',
|
||
goods_price: '',
|
||
line_price: '',
|
||
spec_index: 0,
|
||
spec_name: '',
|
||
goods_img: '',
|
||
stock_num: 0,
|
||
|
||
//门店数据
|
||
chooseShop: false, //选择门店
|
||
shopRest: false, //门店歇业提醒
|
||
shopList: {}, //门店列表
|
||
shopIndex: 0, //门店列表默认选项
|
||
shop: null,
|
||
score: {}, //门店评分
|
||
cmt_list: {
|
||
data: [] //评论列表
|
||
},
|
||
page: 1,
|
||
loadStatus: 'loadmore',
|
||
|
||
//商品详情数据
|
||
goods_detail: null, //商品详情
|
||
goods_detail_show: false, //是否显示商品详情
|
||
goods_index: 0, //多规格商品在列表中所在的分类索引
|
||
goods_index1: 0, //多规格商品在列表中所在的商品索引
|
||
|
||
index:0,
|
||
index1:0,
|
||
}
|
||
},
|
||
async onLoad(options) {
|
||
let _this = this,
|
||
scene = decodeURIComponent(options.scene),
|
||
q = decodeURIComponent(options.q);
|
||
//#ifndef H5
|
||
await _this.$onLaunched;
|
||
//#endif
|
||
_this.applet = App.getApplet();
|
||
//进入方式
|
||
if (q != 'undefined' && q != '') {
|
||
_this.getQrcode(q);//普通二维码进入
|
||
}else if (scene != undefined && scene != '') {
|
||
_this.getQrcode(scene,false);//小程序码进入
|
||
}else{
|
||
_this.shop_id = uni.getStorageSync('shop_id') || '';
|
||
_this.table_id = uni.getStorageSync('table_id') || '';
|
||
uni.removeStorageSync('shop_id');
|
||
uni.removeStorageSync('table_id');
|
||
_this.showPage();
|
||
}
|
||
},
|
||
onShow() {
|
||
let _this = this;
|
||
// #ifdef MP-WEIXIN
|
||
let systemSetting = uni.getSystemSetting();
|
||
if (!systemSetting.locationEnabled) {
|
||
App.showError('手机定位模块未开启');
|
||
return false;
|
||
}
|
||
uni.authorize({
|
||
scope: 'scope.userLocation',
|
||
success() {
|
||
_this.showPage();
|
||
},
|
||
fail() {
|
||
_this.authBox = true;
|
||
}
|
||
})
|
||
// #endif
|
||
// #ifndef MP-WEIXIN
|
||
_this.showPage();
|
||
// #endif
|
||
},
|
||
onReady() {
|
||
this.getMenuItemTop()
|
||
},
|
||
onShareTimeline(res) {
|
||
//分享到朋友圈，仅微信小程序可用
|
||
if (res.from === 'button') { // 来自页面内分享按钮
|
||
//console.log(res.target)
|
||
}
|
||
return {
|
||
title: _this.shop.shop_name,
|
||
path: '/pages/shop/index'
|
||
}
|
||
},
|
||
methods: {
|
||
|
||
/**
|
||
* 小程序处理普通二维码数据
|
||
* is_q 是否是普通二维码进入
|
||
*/
|
||
getQrcode: function(scene,is_q=true) {
|
||
let _this = this;
|
||
if(is_q){
|
||
let q = scene.split('/food/' + App.globalData.applet_id + '/');
|
||
scene = q[1];
|
||
}
|
||
scene = scene.split("-");
|
||
// #ifdef MP-WEIXIN || MP-ALIPAY
|
||
//如果是线下发的优惠券码
|
||
if (scene[0] == 'coupon') {
|
||
uni.showModal({
|
||
title: "提示",
|
||
content: "是否要领取优惠券？",
|
||
success: function(o) {
|
||
if (o.confirm) {
|
||
_this._get('market.coupon/offline', {
|
||
id: scene[1]
|
||
}, function(result) {
|
||
App.showSuccess(result.msg, function() {
|
||
_this.goTo('user/index');
|
||
});
|
||
}, false, false);
|
||
return true;
|
||
}
|
||
}
|
||
});
|
||
}
|
||
//如果是小程序码
|
||
if (scene[0] == 'applet') {
|
||
_this.goTo('index/index');
|
||
return true;
|
||
}
|
||
//如果是自定义二维码码
|
||
if (scene[0] == 'sn') {
|
||
_this.scanQrcode(scene[1]);//识别预生成二维码
|
||
return true;
|
||
}
|
||
// #endif
|
||
if(scene[0] == 'shop'){
|
||
_this.shop_id = scene[1];
|
||
_this.showPage();
|
||
return true;
|
||
}
|
||
if(scene[0] == 'table'){
|
||
_this.shop_id = scene[1];
|
||
_this.table_id = scene[2];
|
||
_this.showPage();
|
||
return true;
|
||
}
|
||
if(scene[0] == 'paybill'){
|
||
_this.goTo('order/pay_bill?shop_id='+scene[1]);
|
||
return true;
|
||
}
|
||
if(scene[0] == 'wifi'){
|
||
_this.goTo('shop/wifi?shop_id='+scene[1]);
|
||
return true;
|
||
}
|
||
},
|
||
/**
|
||
* 识别预生成普通二维码
|
||
*/
|
||
scanQrcode:function(id){
|
||
let _this = this,
|
||
q = '';
|
||
_this._get('qrcode/detail', {
|
||
id: id
|
||
}, function(result) {
|
||
let detail = result.data.detail;
|
||
//小程序码
|
||
if (detail.type.value == 10) {
|
||
q = 'applet-' + detail.applet_id;
|
||
}
|
||
//门店码
|
||
if (detail.type.value == 20) {
|
||
q = 'shop-' + detail.shop_id;
|
||
}
|
||
//餐桌码
|
||
if (detail.type.value == 30) {
|
||
q = 'table-' + detail.shop_id + '-' + detail.table_id;
|
||
}
|
||
//WIFI链接码
|
||
if (detail.type.value == 40) {
|
||
q = 'wifi-' + detail.shop_id;
|
||
}
|
||
//买单码
|
||
if (detail.type.value == 40) {
|
||
q = 'paybill-' + detail.shop_id;
|
||
}
|
||
_this.getQrcode(q,false);
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 购物车输入获取焦点
|
||
*/
|
||
cart_focus(index,index1){
|
||
let _this = this,
|
||
goods = _this.category[index].goods[index1]; // 后端同步更新
|
||
_this.index = index;
|
||
_this.index1 = index1;
|
||
|
||
// #ifdef H5
|
||
if (!App.checkIsLogin()) {
|
||
App.showLogin();
|
||
return false;
|
||
}
|
||
// #endif
|
||
if (_this.foodMode == 10 && _this.shop.is_scan == 1 && _this.table_id == '') {
|
||
_this.scanCodeShow = true;
|
||
return false;
|
||
}
|
||
//判断是否为多规格
|
||
if (goods.spec_type == 20) {
|
||
_this.specShow(goods);
|
||
return true;
|
||
}
|
||
//判断单规格商品库存
|
||
if (_this.applet.other.is_stock == 1) {
|
||
if (goods.total_num >= goods.spec[0].stock_num) {
|
||
App.showError('库存不足');
|
||
return false;
|
||
}
|
||
}
|
||
},
|
||
/**
|
||
* 购物车输入数值
|
||
*/
|
||
cart_input(value){
|
||
let _this = this,
|
||
index = _this.index,
|
||
index1 = _this.index1,
|
||
goods = _this.category[index].goods[index1]; // 后端同步更新
|
||
App._post_form('cart/edit', {
|
||
goods_id: goods.goods_id,
|
||
goods_num: value,
|
||
goods_sku_id: goods.spec[0].spec_sku_id,
|
||
table_id: _this.table_id
|
||
}, () => {
|
||
_this.getGoods();
|
||
});
|
||
},
|
||
/**
|
||
* 删除餐桌
|
||
*/
|
||
del_table() {
|
||
let _this = this;
|
||
_this.table_id = '';
|
||
_this.showPage();
|
||
},
|
||
/**
|
||
* 设置点餐模式
|
||
*/
|
||
setFoodMode: function(index) {
|
||
let _this = this;
|
||
_this.foodModeIndex = index;
|
||
_this.foodMode = _this.shop.food_mode.tab[index].value;
|
||
},
|
||
/**
|
||
* 获取页面数据，验证是否已经自动登录
|
||
*/
|
||
showPage() {
|
||
let _this = this;
|
||
_this.authBox = false; //授权弹窗
|
||
_this.cart_show = false; //购物车列表
|
||
_this.chooseShop = false; //选择门店
|
||
uni.getLocation({
|
||
type: 'wgs84',
|
||
success: function(res) {
|
||
uni.setStorageSync('location', res.latitude + ',' + res.longitude);
|
||
let data = {};
|
||
//如果是扫码进入
|
||
if(_this.shop_id != ''){
|
||
data.shop_id = _this.shop_id;
|
||
}
|
||
App._get('shop/detail', data, function(result) {
|
||
_this.shop = result.data.detail;
|
||
let food_mode = uni.getStorageSync('food_mode') || '';
|
||
uni.removeStorageSync('food_mode');
|
||
//如果是首页点单组件进入
|
||
if (food_mode != '') {
|
||
for (let n = 0; n < _this.shop.food_mode.tab.length; n++) {
|
||
if (_this.shop.food_mode.tab[n].value == food_mode) {
|
||
_this.foodModeIndex = n;
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
//如果是扫桌码进入
|
||
if (_this.table_id != '') {
|
||
_this.getTable();
|
||
_this.foodMode = 10; //扫码点单
|
||
_this.foodModeIndex = 0;
|
||
}
|
||
//默认点单模式为
|
||
_this.foodMode = _this.shop.food_mode.tab[_this.foodModeIndex].value;
|
||
//是否显示选择门店框
|
||
if (_this.applet.other.open_shop == 1 && _this.applet.shop_mode.value ==
|
||
20 && _this.shop_id == '') {
|
||
_this.getShopList(); //获取门店列表
|
||
}
|
||
uni.setStorageSync('shop', result.data.detail);
|
||
//门店分享参数
|
||
uni.$u.mpShare.title = result.data.detail.shop_name;
|
||
uni.$u.mpShare.imageUrl = result.data.detail.logo;
|
||
_this.getGoods(); //获取商品信息
|
||
});
|
||
}
|
||
});
|
||
},
|
||
/**
|
||
* 手动选择门店
|
||
*/
|
||
setChooseShop: function() {
|
||
let _this = this;
|
||
_this.shop = _this.shopList[_this.shopIndex];
|
||
uni.setStorageSync('shop', _this.shopList[_this.shopIndex]);
|
||
_this.chooseShop = false; //选择门店
|
||
_this.getGoods();
|
||
},
|
||
/**
|
||
* 获取分类列表
|
||
*/
|
||
getShopList: function() {
|
||
let _this = this;
|
||
App._get('shop/lists', {}, function(result) {
|
||
_this.chooseShop = true;
|
||
_this.shopList = result.data.list;
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 购物车 - 清空
|
||
*/
|
||
cartCler: function() {
|
||
let _this = this;
|
||
// #ifdef H5
|
||
if (!App.checkIsLogin()) {
|
||
App.showLogin();
|
||
return false;
|
||
}
|
||
// #endif
|
||
if (_this.foodMode == 10 && _this.shop.is_scan == 1 && _this.table_id == '') {
|
||
_this.scanCodeShow = true;
|
||
return false;
|
||
}
|
||
uni.showModal({
|
||
title: "提示",
|
||
content: "确定要清空购物车？",
|
||
success: function(o) {
|
||
if (o.confirm) {
|
||
App._get('cart/clearAll', {
|
||
table_id: _this.table_id
|
||
}, function(result) {
|
||
App.showSuccess(result.msg, function() {
|
||
_this.cart_show = false;
|
||
_this.getGoods();
|
||
});
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 购物车 - 递增
|
||
*/
|
||
cartUp: function(index) {
|
||
let _this = this,
|
||
goods = _this.goodslist[index]; // 后端同步更新
|
||
// #ifdef H5
|
||
if (!App.checkIsLogin()) {
|
||
App.showLogin();
|
||
return false;
|
||
}
|
||
// #endif
|
||
//判断单规格商品库存
|
||
if (_this.applet.other.is_stock == 1) {
|
||
if (goods.total_num >= goods.goods_sku.stock_num) {
|
||
App.showError('库存不足');
|
||
return false;
|
||
}
|
||
}
|
||
if (_this.foodMode == 10 && _this.shop.is_scan == 1 && _this.table_id == '') {
|
||
_this.scanCodeShow = true;
|
||
return false;
|
||
}
|
||
App._post_form('cart/add', {
|
||
goods_id: goods.goods_id,
|
||
goods_num: 1,
|
||
goods_sku_id: goods.goods_sku_id,
|
||
table_id: _this.table_id
|
||
}, () => {
|
||
_this.getGoods();
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 购物车 - 递减
|
||
*/
|
||
cartDown: function(index) {
|
||
let _this = this,
|
||
goods = _this.goodslist[index]; // 后端同步更新
|
||
// #ifdef H5
|
||
if (!App.checkIsLogin()) {
|
||
App.showLogin();
|
||
return false;
|
||
}
|
||
// #endif
|
||
if (_this.foodMode == 10 && _this.shop.is_scan == 1 && _this.table_id == '') {
|
||
_this.scanCodeShow = true;
|
||
return false;
|
||
}
|
||
App._post_form('cart/sub', {
|
||
goods_id: goods.goods_id,
|
||
goods_sku_id: goods.goods_sku_id,
|
||
table_id: _this.table_id
|
||
}, () => {
|
||
_this.getGoods();
|
||
});
|
||
},
|
||
|
||
//转到订单确认页面
|
||
gotoCart: function() {
|
||
let _this = this,
|
||
url = '?food_mode=' + _this.foodMode + '&table_id=' + _this.table_id;
|
||
// #ifdef H5
|
||
if (!App.checkIsLogin()) {
|
||
App.showLogin();
|
||
return false;
|
||
}
|
||
// #endif
|
||
if (_this.foodMode == 10 && _this.shop.is_scan == 1 && _this.table_id == '') {
|
||
_this.scanCodeShow = true;
|
||
return false;
|
||
}
|
||
App.goTo('flow/checkout' + url);
|
||
return false;
|
||
},
|
||
/**
|
||
* 拨打电话
|
||
*/
|
||
phone: function(phone) {
|
||
uni.makePhoneCall({
|
||
phoneNumber: phone
|
||
});
|
||
},
|
||
/**
|
||
* 查看门店位置
|
||
*/
|
||
openLocation: function() {
|
||
let _this = this,
|
||
location = _this.shop.coordinate;
|
||
location = location.split(',');
|
||
uni.openLocation({
|
||
latitude: Number(location[0]),
|
||
longitude: Number(location[1]),
|
||
name: _this.shop.shop_name,
|
||
address: _this.shop.address,
|
||
success: function() {}
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 递增 - 多规格
|
||
*/
|
||
up: function() {
|
||
let _this = this,
|
||
spec_index = _this.spec_index,
|
||
goods = _this.goods; // 后端同步更新
|
||
// #ifdef H5
|
||
if (!App.checkIsLogin()) {
|
||
App.showLogin();
|
||
return false;
|
||
}
|
||
// #endif
|
||
//判断单规格商品库存
|
||
if (_this.applet.other.is_stock == 1) {
|
||
if (goods.spec[spec_index].sell_num >= goods.spec[spec_index].stock_num) {
|
||
App.showError('库存不足');
|
||
return false;
|
||
}
|
||
}
|
||
if (_this.foodMode == 10 && _this.shop.is_scan == 1 && _this.table_id == '') {
|
||
_this.scanCodeShow = true;
|
||
return false;
|
||
}
|
||
App._post_form('cart/add', {
|
||
goods_id: goods.goods_id,
|
||
goods_num: 1,
|
||
goods_sku_id: goods.spec[spec_index].spec_sku_id,
|
||
table_id: _this.table_id
|
||
}, () => {
|
||
goods.spec[spec_index].sell_num++;
|
||
_this.goods = goods;
|
||
_this.getGoods();
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 递减指定的商品数量
|
||
*/
|
||
down: function() {
|
||
let _this = this,
|
||
spec_index = _this.spec_index,
|
||
goods = _this.goods;
|
||
// #ifdef H5
|
||
if (!App.checkIsLogin()) {
|
||
App.showLogin();
|
||
return false;
|
||
}
|
||
// #endif
|
||
if (_this.foodMode == 10 && _this.shop.is_scan == 1 && _this.table_id == '') {
|
||
_this.scanCodeShow = true;
|
||
return false;
|
||
}
|
||
if (goods.spec[spec_index].sell_num > 1) {
|
||
// 后端同步更新
|
||
App._post_form('cart/sub', {
|
||
goods_id: goods.goods_id,
|
||
goods_sku_id: goods.spec[spec_index].spec_sku_id,
|
||
table_id: _this.table_id
|
||
}, () => {
|
||
goods.spec[spec_index].sell_num--;
|
||
_this.goods = goods;
|
||
_this.getGoods();
|
||
});
|
||
}
|
||
if (goods.spec[spec_index].sell_num == 1) {
|
||
// 后端同步更新
|
||
App._post_form('cart/delete', {
|
||
goods_id: goods.goods_id,
|
||
goods_sku_id: goods.spec[spec_index].spec_sku_id,
|
||
table_id: _this.table_id
|
||
}, function(result) {
|
||
goods.spec[spec_index].sell_num--;
|
||
_this.goods = goods;
|
||
_this.getGoods();
|
||
});
|
||
}
|
||
},
|
||
/**
|
||
* 获取商品列表
|
||
*/
|
||
getGoods: function() {
|
||
let _this = this;
|
||
App._get('goods/lists', {
|
||
table_id: _this.table_id,
|
||
food_mode: _this.foodMode
|
||
}, function(result) {
|
||
_this.setData(result.data);
|
||
if (_this.goods_detail_show == true) {
|
||
_this.goods_detail = result.data.category[_this.goods_index].goods[_this
|
||
.goods_index1];
|
||
}
|
||
});
|
||
},
|
||
//显示底部弹出框
|
||
specShow: function(goods) {
|
||
let _this = this,
|
||
specData = null;
|
||
for (let i = 0; i < goods.specData.spec_attr.length; i++) {
|
||
for (let j = 0; j < goods.specData.spec_attr[i].spec_items.length; j++) {
|
||
if (j == 0) {
|
||
goods.specData.spec_attr[i].spec_items[0].checked = true;
|
||
this.goods_spec_arr[i] = goods.specData.spec_attr[i].spec_items[0].item_id;
|
||
} else {
|
||
goods.specData.spec_attr[i].spec_items[j].checked = false;
|
||
}
|
||
}
|
||
}
|
||
specData = goods.specData;
|
||
let spec_list = specData.spec_list[0];
|
||
_this.setData({
|
||
show: true,
|
||
goods: goods,
|
||
specData: specData,
|
||
goods_sku_id: spec_list.goods_spec_id,
|
||
spec_name: spec_list.spec_name,
|
||
goods_price: spec_list.form.goods_price,
|
||
line_price: spec_list.form.line_price,
|
||
goods_img: spec_list.form.image_url,
|
||
stock_num: spec_list.form.stock_num
|
||
});
|
||
},
|
||
/**
|
||
* 点击切换不同规格
|
||
*/
|
||
specTap: function(attrIdx, itemIdx) {
|
||
let specData = this.specData;
|
||
for (let i in specData.spec_attr) {
|
||
for (let j in specData.spec_attr[i].spec_items) {
|
||
if (attrIdx == i) {
|
||
specData.spec_attr[i].spec_items[j].checked = false;
|
||
if (itemIdx == j) {
|
||
specData.spec_attr[i].spec_items[itemIdx].checked = true;
|
||
this.goods_spec_arr[i] = specData.spec_attr[i].spec_items[itemIdx].item_id;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
this.specData = specData; // 更新商品规格信息
|
||
this.updateSpecGoods();
|
||
},
|
||
|
||
/**
|
||
* 更新商品规格信息
|
||
*/
|
||
updateSpecGoods: function() {
|
||
let spec_sku_id = this.goods_spec_arr.join('_'),
|
||
spec_list = this.specData.spec_list,
|
||
spec_name = '',
|
||
stock_num = 0,
|
||
spec_index = 0,
|
||
goods_img = '',
|
||
skuItem;
|
||
for (let i = 0; i < spec_list.length; i++) {
|
||
if (spec_list[i].spec_sku_id == spec_sku_id) {
|
||
skuItem = spec_list[i];
|
||
spec_index = i;
|
||
break;
|
||
}
|
||
}
|
||
//规格图片
|
||
if (skuItem.form.image_url == '') {
|
||
goods_img = this.goods.image[0].url;
|
||
} else {
|
||
goods_img = skuItem.form.image_url;
|
||
}
|
||
// 记录goods_sku_id
|
||
// 更新商品价格、划线价、库存
|
||
if (typeof skuItem === 'object') {
|
||
this.setData({
|
||
goods_sku_id: skuItem.spec_sku_id,
|
||
spec_name: skuItem.spec_name,
|
||
goods_price: skuItem.form.goods_price,
|
||
line_price: skuItem.form.line_price,
|
||
spec_index: spec_index,
|
||
goods_img: goods_img,
|
||
stock_num: skuItem.form.stock_num
|
||
});
|
||
}
|
||
},
|
||
/**
|
||
* 递增指定的商品数量
|
||
*/
|
||
addCount: function(index, index1) {
|
||
let _this = this,
|
||
goods = _this.category[index].goods[index1]; // 后端同步更新
|
||
// #ifdef H5
|
||
if (!App.checkIsLogin()) {
|
||
App.showLogin();
|
||
return false;
|
||
}
|
||
// #endif
|
||
if (_this.foodMode == 10 && _this.shop.is_scan == 1 && _this.table_id == '') {
|
||
_this.scanCodeShow = true;
|
||
return false;
|
||
}
|
||
//判断是否为多规格
|
||
if (goods.spec_type == 20) {
|
||
_this.specShow(goods);
|
||
return true;
|
||
}
|
||
//判断单规格商品库存
|
||
if (_this.applet.other.is_stock == 1) {
|
||
if (goods.total_num >= goods.spec[0].stock_num) {
|
||
App.showError('库存不足');
|
||
return false;
|
||
}
|
||
}
|
||
App._post_form('cart/add', {
|
||
goods_id: goods.goods_id,
|
||
goods_num: 1,
|
||
goods_sku_id: goods.spec[0].spec_sku_id,
|
||
table_id: _this.table_id
|
||
}, () => {
|
||
_this.getGoods();
|
||
});
|
||
},
|
||
/**
|
||
* 递减指定的商品数量
|
||
*/
|
||
minusCount: function(index, index1) {
|
||
let _this = this,
|
||
goods = _this.category[index].goods[index1]; // 后端同步更新
|
||
// #ifdef H5
|
||
if (!App.checkIsLogin()) {
|
||
App.showLogin();
|
||
return false;
|
||
}
|
||
// #endif
|
||
if (_this.foodMode == 10 && _this.shop.is_scan == 1 && _this.table_id == '') {
|
||
_this.scanCodeShow = true;
|
||
return false;
|
||
}
|
||
//判断是否为多规格
|
||
if (goods.spec_type == 20) {
|
||
_this.specShow(goods);
|
||
return true;
|
||
}
|
||
if (goods.total_num > 1) {
|
||
// 后端同步更新
|
||
App._post_form('cart/sub', {
|
||
goods_id: goods.goods_id,
|
||
goods_sku_id: goods.spec[0].spec_sku_id,
|
||
table_id: _this.table_id
|
||
}, () => {
|
||
_this.getGoods();
|
||
});
|
||
}
|
||
if (goods.total_num == 1) {
|
||
// 后端同步更新
|
||
App._post_form('cart/delete', {
|
||
goods_id: goods.goods_id,
|
||
goods_sku_id: goods.spec[0].spec_sku_id,
|
||
table_id: _this.table_id
|
||
}, function(result) {
|
||
_this.getGoods();
|
||
});
|
||
}
|
||
},
|
||
/**
|
||
* 商品详情 - 显示
|
||
*/
|
||
setGoodsDetailShow: function(index, index1) {
|
||
let _this = this,
|
||
goods = _this.category[index].goods[index1];
|
||
_this.goods_detail = goods;
|
||
_this.goods_index = index;
|
||
_this.goods_index1 = index1;
|
||
_this.goods_detail_show = true;
|
||
//商品分享参数
|
||
uni.$u.mpShare.title = goods.goods_name + ' - ' + _this.shop.shop_name;
|
||
uni.$u.mpShare.imageUrl = goods.image[0].url;
|
||
},
|
||
/**
|
||
* 商品详情 - 关闭
|
||
*/
|
||
setGoodsDetailClose: function() {
|
||
let _this = this;
|
||
_this.goods_detail_show = false;
|
||
//恢复门店分享参数
|
||
uni.$u.mpShare.title = _this.shop.shop_name;
|
||
uni.$u.mpShare.imageUrl = _this.shop.front;
|
||
},
|
||
/**
|
||
* 点击顶部菜单
|
||
*/
|
||
menuTab: function(e) {
|
||
let _this = this;
|
||
_this.cut = e.index;
|
||
if (e.index == 1) {
|
||
_this.getScore(); //获取门店评分
|
||
_this.getCmtList(false, 1); //获取门店评分列表
|
||
}
|
||
},
|
||
/**
|
||
* 获取门店评分
|
||
*/
|
||
getScore: function() {
|
||
let _this = this;
|
||
App._get('comment/score', {}, function(result) {
|
||
_this.setData(result.data);
|
||
});
|
||
},
|
||
/**
|
||
* 获取评分和评论列表
|
||
*/
|
||
getCmtList: function(isPage, page) {
|
||
let _this = this;
|
||
App._get('comment/lists', {
|
||
page: page || 1
|
||
}, function(result) {
|
||
let resList = result.data.list,
|
||
dataList = _this.cmt_list;
|
||
if (isPage == true) {
|
||
_this.cmt_list.data = dataList.data.concat(resList.data);
|
||
} else {
|
||
_this.cmt_list = resList;
|
||
}
|
||
_this.loadStatus = 'loadmore';
|
||
});
|
||
},
|
||
/**
|
||
* 触底加载
|
||
*/
|
||
cmtReachBottom: function() {
|
||
let _this = this;
|
||
_this.loadStatus = "loading"; //加载中
|
||
setTimeout(() => {
|
||
// 已经是最后一页
|
||
if (_this.page >= _this.cmt_list.last_page) {
|
||
_this.loadStatus = "nomore"; //没有数据
|
||
return false;
|
||
}
|
||
// 加载下一页列表
|
||
_this.getCmtList(true, ++_this.page);
|
||
}, 1500);
|
||
},
|
||
// 点击左边的栏目切换
|
||
async swichMenu(index) {
|
||
let _this = this;
|
||
if (_this.arr.length == 0) {
|
||
await _this.getMenuItemTop();
|
||
}
|
||
if (index == _this.current) return;
|
||
_this.scrollRightTop = _this.oldScrollTop;
|
||
_this.$nextTick(function() {
|
||
_this.scrollRightTop = _this.arr[index];
|
||
_this.current = index;
|
||
_this.leftMenuStatus(index);
|
||
})
|
||
},
|
||
// 观测元素相交状态
|
||
async observer() {
|
||
this.tabbar.map((val, index) => {
|
||
let observer = uni.createIntersectionObserver(this);
|
||
// 检测右边scroll-view的id为itemxx的元素与right-box的相交状态
|
||
// 如果跟.right-box底部相交，就动态设置左边栏目的活动状态
|
||
observer.relativeTo('.right-box', {
|
||
top: 0
|
||
}).observe('#item' + index, res => {
|
||
if (res.intersectionRatio > 0) {
|
||
let id = res.id.substring(4);
|
||
this.leftMenuStatus(id);
|
||
}
|
||
})
|
||
})
|
||
},
|
||
// 设置左边菜单的滚动状态
|
||
async leftMenuStatus(index) {
|
||
this.current = index;
|
||
// 如果为0，意味着尚未初始化
|
||
if (this.menuHeight == 0 || this.menuItemHeight == 0) {
|
||
await this.getElRect('menu-scroll-view', 'menuHeight');
|
||
await this.getElRect('tab-item', 'menuItemHeight');
|
||
}
|
||
// 将菜单活动item垂直居中
|
||
this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
|
||
},
|
||
// 右边菜单滚动
|
||
async rightScroll(e) {
|
||
let _this = this;
|
||
_this.oldScrollTop = e.detail.scrollTop;
|
||
if (this.arr.length == 0) {
|
||
await this.getMenuItemTop();
|
||
}
|
||
if (!this.menuHeight) {
|
||
await this.getElRect('menu-scroll-view', 'menuHeight');
|
||
}
|
||
setTimeout(() => { // 节流
|
||
// scrollHeight为右边菜单垂直中点位置
|
||
let scrollHeight = e.detail.scrollTop + this.menuHeight / 2;
|
||
for (let i = 0; i < this.arr.length; i++) {
|
||
let height1 = this.arr[i];
|
||
let height2 = this.arr[i + 1];
|
||
// 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
|
||
if (!height2 || scrollHeight >= height1 && scrollHeight < height2) {
|
||
this.leftMenuStatus(i);
|
||
return;
|
||
}
|
||
}
|
||
}, 10)
|
||
},
|
||
// 获取右边菜单每个item到顶部的距离
|
||
getMenuItemTop() {
|
||
new Promise(resolve => {
|
||
let selectorQuery = uni.createSelectorQuery();
|
||
selectorQuery.selectAll('.class-item').boundingClientRect((rects) => {
|
||
// 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
|
||
if (!rects.length) {
|
||
setTimeout(() => {
|
||
this.getMenuItemTop();
|
||
}, 10);
|
||
return;
|
||
}
|
||
rects.forEach((item) => {
|
||
// 这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
|
||
this.arr.push(item.top - rects[0].top);
|
||
resolve();
|
||
})
|
||
}).exec()
|
||
})
|
||
},
|
||
// 获取一个目标元素的高度
|
||
getElRect(elClass, dataVal) {
|
||
new Promise((resolve, reject) => {
|
||
const query = uni.createSelectorQuery().in(this);
|
||
query.select('.' + elClass).fields({
|
||
size: true
|
||
}, res => {
|
||
// 如果节点尚未生成，res值为null，循环调用执行
|
||
if (!res) {
|
||
setTimeout(() => {
|
||
this.getElRect(elClass);
|
||
}, 10);
|
||
return;
|
||
}
|
||
this[dataVal] = res.height;
|
||
resolve();
|
||
}).exec();
|
||
})
|
||
},
|
||
/**
|
||
* 验证堂食餐桌
|
||
*/
|
||
getTable: function() {
|
||
let _this = this;
|
||
App._get('table/detail', {
|
||
table_id: _this.table_id
|
||
}, result => {
|
||
let table = result.data.detail,
|
||
content = '';
|
||
_this.tableName = table.table_name;
|
||
if (table.status.value > 10) {
|
||
if (table.status.value == 20) {
|
||
content = '当前餐桌（' + table.table_name + '），正在用餐，你是要加餐吗？';
|
||
} else {
|
||
content = '当前餐桌（' + table.table_name + '），已被预定，你是要提前点餐吗？'
|
||
}
|
||
App.showError(content);
|
||
}
|
||
});
|
||
},
|
||
/**
|
||
* 扫一扫
|
||
*/
|
||
scanCode: function() {
|
||
let _this = this;
|
||
// #ifndef H5
|
||
_this.scanCodeShow = false;
|
||
uni.scanCode({
|
||
onlyFromCamera: true,// 只允许通过相机扫码
|
||
scanType: ['qrCode'],// 只允许识别二维码
|
||
success: function(res) {
|
||
//如果扫码成功
|
||
if (res.errMsg == 'scanCode:ok') {
|
||
|
||
// #ifdef MP-WEIXIN
|
||
let scene = decodeURIComponent(res.path),
|
||
q = '';
|
||
if (scene != 'undefined') {
|
||
//如果是普通二维码
|
||
if (res.scanType == 'QR_CODE') {
|
||
q = scene.split('/food/' + App.globalData.applet_id + '/');
|
||
scene = q[1];
|
||
q = scene.split('&');
|
||
scene = q[0];
|
||
}else{
|
||
//如果是小程序码
|
||
q = scene.split('=');
|
||
scene = q[1];
|
||
//res.scanType == 'WX_CODE' //微信小程序码
|
||
//res.scanType == 'QR' //支付宝小程序码
|
||
}
|
||
} else {
|
||
App.showError('二维码不合法');
|
||
}
|
||
// #endif
|
||
// #ifdef MP-ALIPAY
|
||
let scene = res.qrCode,
|
||
q = '';
|
||
if (scene == 'fake_code') {
|
||
|
||
} else {
|
||
//普通二维码
|
||
//https://demo.hemaphp.com/food/10001/table-10003-10070
|
||
q = scene.split('/food/' + App.globalData.applet_id + '/');
|
||
scene = q[1];
|
||
}
|
||
// #endif
|
||
scene = scene.split('-');
|
||
if (scene[0] == 'table') {
|
||
_this.shop_id = scene[1];
|
||
_this.table_id = scene[2];
|
||
_this.showPage();
|
||
}else if (scene[0] == 'sn') {
|
||
App._get('qrcode/detail', {
|
||
id: scene[1]
|
||
}, function(result) {
|
||
let detail = result.data.detail;
|
||
//餐桌码
|
||
if (detail.type.value == 30) {
|
||
_this.shop_id = detail.shop_id;
|
||
_this.table_id = detail.table_id;
|
||
_this.showPage();
|
||
}else{
|
||
App.showError('不是合法的餐桌码');
|
||
}
|
||
});
|
||
}else{
|
||
App.showError('不是合法的餐桌码');
|
||
}
|
||
}else{
|
||
App.showError('扫码失败');
|
||
}
|
||
}
|
||
});
|
||
// #endif
|
||
// #ifdef H5
|
||
App.showError('无法调起扫一扫，请直接用微信扫码');
|
||
// #endif
|
||
},
|
||
goTo: function(url) {
|
||
App.goTo(url);
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
/*头部内容*/
|
||
.head {
|
||
padding: 20rpx;
|
||
background-color: #fff;
|
||
|
||
.shop-name {
|
||
font-size: 35rpx;
|
||
font-weight: 700;
|
||
color: #303133;
|
||
}
|
||
|
||
.distance {
|
||
padding-top: 10rpx;
|
||
font-size: 28rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.food-mode {
|
||
float: right;
|
||
margin-top: 15rpx;
|
||
height: 70rpx;
|
||
width: 300rpx;
|
||
text-align: center;
|
||
|
||
.table {
|
||
display: inline-block;
|
||
color: #f3f4f6;
|
||
background-color: #303133;
|
||
padding: 15rpx 25rpx;
|
||
border-radius: 50rpx;
|
||
font-size: 26rpx;
|
||
|
||
.del {
|
||
display: inline-block;
|
||
float: right;
|
||
margin-top: -30rpx;
|
||
margin-right: -60rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/*主体内容*/
|
||
::-webkit-scrollbar {
|
||
width: 0;
|
||
height: 0;
|
||
color: transparent;
|
||
}
|
||
|
||
.menu-wrap {
|
||
display: flex;
|
||
overflow: hidden;
|
||
|
||
.tab-view {
|
||
width: 220rpx;
|
||
height: 100%;
|
||
font-size: 26rpx;
|
||
|
||
.tab-item {
|
||
height: 150rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #909193;
|
||
}
|
||
|
||
.tab-item-active {
|
||
position: relative;
|
||
color: #303133;
|
||
font-weight: 600;
|
||
background: #fff;
|
||
}
|
||
|
||
.tab-item-active::before {
|
||
content: "";
|
||
position: absolute;
|
||
border-left: 4rpx solid #ff9900;
|
||
height: 70rpx;
|
||
left: 0;
|
||
top: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.right-box {
|
||
background-color: #FFF;
|
||
|
||
.class-item {
|
||
padding: 15rpx;
|
||
|
||
.item-title {
|
||
font-size: 28rpx;
|
||
color: #909399;
|
||
border-bottom: 1rpx solid #f3f4f6;
|
||
padding: 0rpx 0rpx 15rpx 20rpx;
|
||
}
|
||
|
||
.item-goods {
|
||
padding: 15rpx;
|
||
height: 180rpx;
|
||
position: relative;
|
||
|
||
image {
|
||
width: 180rpx;
|
||
height: 180rpx;
|
||
border-radius: 8rpx;
|
||
float: left;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.tag {
|
||
display: inline-block;
|
||
z-index: 1;
|
||
position: absolute;
|
||
top: 15rpx;
|
||
left: 15rpx;
|
||
width: 180rpx;
|
||
height: 180rpx;
|
||
border-radius: 8rpx;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
color: #fff;
|
||
line-height: 180rpx;
|
||
text-align: center;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.title {
|
||
padding-top: 10rpx;
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
color: #000;
|
||
}
|
||
|
||
.selling {
|
||
height: 30rpx;
|
||
padding-top: 5rpx;
|
||
color: #999;
|
||
font-size: 22rpx;
|
||
}
|
||
|
||
.sold {
|
||
padding-top: 10rpx;
|
||
color: #303133;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.price {
|
||
padding-top: 5rpx;
|
||
color: #fa3534;
|
||
font-size: 28rpx;
|
||
font-weight: 900;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/*选购工具样式*/
|
||
.cart-but {
|
||
display: inline-block;
|
||
float: right;
|
||
margin-top: 10rpx;
|
||
|
||
.but {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
text-align: center;
|
||
line-height: 50rpx;
|
||
vertical-align: middle;
|
||
float: right;
|
||
border-radius: 50%;
|
||
|
||
.icon {
|
||
margin: 12rpx 0rpx 0rpx 12rpx;
|
||
}
|
||
}
|
||
|
||
.add {
|
||
background-color: #FF9900;
|
||
}
|
||
|
||
.minus {
|
||
border: 1rpx solid #FF9900;
|
||
}
|
||
|
||
.total-num {
|
||
|
||
font-size: 25rpx;
|
||
font-weight: 700;
|
||
color: #606266;
|
||
border-bottom: 1rpx solid #f3f4f6;
|
||
float: right;
|
||
text-align: center;
|
||
height: 45rpx;
|
||
line-height: 45rpx;
|
||
margin-top: 5rpx;
|
||
width: 50rpx;
|
||
}
|
||
|
||
.spec {
|
||
height: 50rpx;
|
||
line-height: 50rpx;
|
||
background-color: #FF9900;
|
||
padding: 2rpx 25rpx;
|
||
font-size: 26rpx;
|
||
border-radius: 50rpx;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
/*门店列表*/
|
||
.choose-shop {
|
||
margin-top: 20rpx;
|
||
padding: 20rpx;
|
||
border-radius: 10rpx;
|
||
border: 1rpx solid #f3f4f6;
|
||
}
|
||
|
||
.choose-shop-active {
|
||
margin-top: 20rpx;
|
||
padding: 20rpx;
|
||
border-radius: 10rpx;
|
||
border: 1rpx solid #ff9900;
|
||
}
|
||
|
||
.choose-shop-checked {
|
||
display: inline-block;
|
||
float: right;
|
||
margin-top: 15rpx;
|
||
}
|
||
|
||
.choose-shop-but {
|
||
display: inline-block;
|
||
width: 300rpx;
|
||
}
|
||
|
||
/*底部购物车工具条*/
|
||
.bottom-cart {
|
||
width: 100%;
|
||
height: 100rpx;
|
||
background-color: #c0c4cc;
|
||
|
||
.cart {
|
||
display: inline-block;
|
||
float: left;
|
||
margin-top: -20rpx;
|
||
margin-left: 40rpx;
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
text-align: center;
|
||
border-radius: 50%;
|
||
background-color: #FFF;
|
||
|
||
.icon {
|
||
margin: 15rpx 0rpx 0rpx 10rpx;
|
||
display: inline-block;
|
||
float: left;
|
||
}
|
||
|
||
.count {
|
||
position: absolute;
|
||
left: 110rpx;
|
||
top: -18rpx;
|
||
font-size: 30rpx;
|
||
line-height: 40rpx;
|
||
padding: 0 12rpx;
|
||
color: #fff;
|
||
background: #ff495e;
|
||
border-radius: 20rpx;
|
||
}
|
||
}
|
||
|
||
.total {
|
||
display: inline-block;
|
||
float: left;
|
||
margin-left: 20rpx;
|
||
height: 100rpx;
|
||
|
||
.text {
|
||
margin-top: -15rpx;
|
||
height: 30rpx;
|
||
color: #000;
|
||
font-size: 32rpx;
|
||
font-weight: 900;
|
||
}
|
||
|
||
.min-price {
|
||
margin-top: 5rpx;
|
||
color: #666;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
.but {
|
||
display: inline-block;
|
||
float: right;
|
||
|
||
button {
|
||
height: 100rpx;
|
||
width: 200rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
/*购物车列表*/
|
||
.cart-list {
|
||
padding: 20rpx 20rpx 0rpx 20rpx;
|
||
|
||
.title {
|
||
padding-bottom: 20rpx;
|
||
|
||
.cler {
|
||
display: inline-block;
|
||
float: right;
|
||
margin-top: -8rpx;
|
||
padding-right: 100rpx;
|
||
}
|
||
}
|
||
|
||
.item {
|
||
height: 100rpx;
|
||
padding: 10rpx 0;
|
||
border-top: 1rpx solid #f3f4f6;
|
||
font-size: 25rpx;
|
||
|
||
image {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
border-radius: 8rpx;
|
||
float: left;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.goods-name {
|
||
padding-top: 10rpx;
|
||
font-weight: 900;
|
||
color: #000;
|
||
|
||
.goods-attr {
|
||
margin-left: 15rpx;
|
||
color: #999;
|
||
display: inline-block;
|
||
}
|
||
}
|
||
|
||
.goods-price {
|
||
padding-top: 10rpx;
|
||
color: #ff495e;
|
||
display: inline-block;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 多规格选项框 */
|
||
.spec-box {
|
||
padding: 20rpx;
|
||
|
||
.goods {
|
||
height: 150rpx;
|
||
padding-bottom: 20rpx;
|
||
|
||
image {
|
||
height: 150rpx;
|
||
width: 150rpx;
|
||
border-radius: 10rpx;
|
||
float: left;
|
||
margin-right: 30rpx;
|
||
box-shadow: 6rpx 6rpx 8rpx rgba(26, 26, 26, 0.2);
|
||
}
|
||
|
||
.goods-name {
|
||
font-size: 32rpx;
|
||
padding-top: 10rpx;
|
||
color: #000000;
|
||
}
|
||
|
||
.spec-name {
|
||
font-size: 28rpx;
|
||
padding: 10rpx 0rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
.title {
|
||
color: #606266;
|
||
padding-top: 20rpx;
|
||
font-size: 28rpx;
|
||
border-top: 1px dashed #eee;
|
||
}
|
||
|
||
.but {
|
||
height: 50rpx;
|
||
line-height: 50rpx;
|
||
vertical-align: middle;
|
||
text-align: center;
|
||
padding: 0 20rpx;
|
||
border-radius: 10rpx;
|
||
float: left;
|
||
margin-top: 20rpx;
|
||
margin-left: 20rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.but-ok {
|
||
background-color: #FF9900;
|
||
color: #fff;
|
||
}
|
||
|
||
.but-no {
|
||
background-color: #f3f4f6;
|
||
color: #c0c4cc;
|
||
}
|
||
|
||
}
|
||
|
||
/*门店休息提醒*/
|
||
.shop-rest {
|
||
width: 100%;
|
||
line-height: 100rpx;
|
||
font-size: 28rpx;
|
||
text-align: center;
|
||
color: #fff;
|
||
background-color: rgba(0, 0, 0, 0.7);
|
||
|
||
.icon {
|
||
display: inline-block;
|
||
padding-right: 35rpx;
|
||
padding-top: 35rpx;
|
||
float: right;
|
||
}
|
||
}
|
||
|
||
/*商品详情*/
|
||
.goods-detail {
|
||
width: 600rpx;
|
||
padding: 20rpx;
|
||
|
||
.title {
|
||
padding-bottom: 20rpx;
|
||
border-bottom: 1rpx solid #f3f4f6;
|
||
|
||
.share {
|
||
display: inline-block;
|
||
float: right;
|
||
margin: 5rpx 70rpx 0rpx 0rpx;
|
||
}
|
||
}
|
||
|
||
.goods {
|
||
padding-top: 20rpx;
|
||
|
||
image {
|
||
border-radius: 8rpx;
|
||
height: 600rpx;
|
||
width: 600rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.menu {
|
||
border-radius: 15rpx;
|
||
padding: 0 20rpx 30rpx 20rpx;
|
||
background-color: #fff;
|
||
|
||
.navbar-list {
|
||
padding-top: 30rpx;
|
||
line-height: 50rpx;
|
||
|
||
image {
|
||
float: left;
|
||
margin-right: 20rpx;
|
||
height: 50rpx;
|
||
width: 50rpx;
|
||
}
|
||
|
||
.text {
|
||
display: inline-block;
|
||
float: right;
|
||
margin-right: 10rpx;
|
||
font-size: 24rpx;
|
||
color: #fa3534;
|
||
}
|
||
|
||
.arrow-right {
|
||
display: inline-block;
|
||
float: right;
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
/*评价栏目*/
|
||
.score-detail {
|
||
padding: 20rpx;
|
||
background-color: #FFF;
|
||
text-align: center;
|
||
color: #606266;
|
||
|
||
.left {
|
||
display: inline-block;
|
||
height: 106rpx;
|
||
width: 19%;
|
||
|
||
.score {
|
||
color: #FF9900;
|
||
font-weight: 900;
|
||
font-size: 50rpx;
|
||
}
|
||
}
|
||
|
||
.right {
|
||
font-size: 22rpx;
|
||
display: inline-block;
|
||
float: right;
|
||
width: 40%;
|
||
border-left: 1rpx solid #f3f4f6;
|
||
}
|
||
}
|
||
</style> |