@@ -0,0 +1,764 @@
< template >
< view id = "wrapper" >
< view v-if = "fixedtrue"
style = "height: 100vh; width: 100%; position: fixed; z-index: 999; top: 0; left: 0; background-color: #fff; display: flex; justify-content: center; align-items: center;" >
< image style = "width: 140rpx; height: 140rpx;" src = "@/static/1.gif" mode = "aspectFill" > < / image >
< text style = "margin-left10rpx;font-size: 40rpx;color: #7d7d76;" > 加载中 < / text >
<!-- < u-loadmore status = "loading" fontSize = "50" iconSize = "30" / > -- >
< / view >
<!-- 占位符导航栏 -- >
< navseat class = "navbar" : opacity = 'opacitys' : title = 'toplist.name' : titleshow = 'true' > < / navseat >
<!-- # ifdef MP - WEIXIN -- >
< view : style = "{'height':HeighT.customBar+HeighT.heightBar+'px;background-color: #FFFFFF;position: fixed;top: 0;width: 100%;z-index: 9'}" > < / view >
< view : style = "{'height':HeighT.customBar+HeighT.heightBar+'px;background-color: #FFFFFF;'}" > < / view >
<!-- # endif -- >
<!-- < view class = "shop-cover" : style = "{ height: `${menuInfo.top + menuInfo.height + paddingBtmSize * 8}px` }" >
< image class = "img" :src = "shopList.storeInfo.coverImg" mode = "aspectFill" > < / image >
< / view > -- >
< view class = "list-container" >
< view class = "shopInfo" >
< image class = "shopTitle" src = "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/shopDetails/title.png" mode = "widthFix" / >
< view class = "shopName" > { { shopList . storeInfo . shopName } } < / view >
< view class = "shopDistance" > { { shopList . storeInfo . shopName } } < / view >
< view class = "shopDetail flex-between" >
< text class = "shopTime" > 营业时间 ： { { shopList . storeInfo . shopName } } < / text >
< view class = "flex-end" > 查看 < u-icon style = "margin-left: 15rpx;" name = "arrow-down" color = "#575B66" size = "28" > < / u-icon > < / view >
< / view >
< / view >
< div class = "signatureDish dishes" >
< scroll-view scroll -x class = "scroll-view" >
< view class = "signatureDish_list" >
< view class = "signatureDish_item" v-for = "(item,index) in signatureDish_list" :key="index" >
< image class = "signatureDish_img" :src = "`${item.coverImg}?x-oss-process=image/resize,m_lfit,w_90,h_90`" mode = "aspectFill" / >
< view class = "signatureDish_name" > { { item . name } } < / view >
< view class = "signatureDish_sort" > { { item . name } } < / view >
< view class = "signatureDish_introduce" > { { item . name } } < / view >
< view class = "signatureDish_sell" > { { item . name } } < / view >
< / view >
< / view >
< / scroll-view >
< / div >
< view class = "tab-content" >
< view class = "left-wrap" >
< view class = "left"
: style = "{ top: `${menuInfo.top + menuInfo.height + paddingBtmSize + tabHeadHeight}px` }" >
< view class = "item" v-for = "(item, index) in shopList.productInfo" :key="item.id"
: class = "{ active: titleTopNumIndex == index }" @click ="titleClickHandle(item.id)" >
< text > { { item . name } } < / text >
< / view >
< / view >
< / view >
< view class = "list-wrap" >
< view class = "item-wrap" v-for = "(item,index) in shopList.productInfo" :key="item.id" >
< view class = "title-wrap" :id = "`title${item.id}`" > < / view >
< view class = "title"
: style = "{ top: `${menuInfo.top + menuInfo.height + paddingBtmSize + tabHeadHeight}px` }" >
<!-- -- >
< text > { { item . name } } < / text >
< / view >
< view class = "" v-if = "item.products.length == 0" >
空
< / view >
< view class = "shop-item" v-for = "(item1,index1) in item.products" :key="item1.id" >
< view class = "cover langcover" style = "width:180rpx; height: 180rpx;"
@click.stop ="clickspecifications(item1,index,index1)" >
< c -image style = "position: absolute;z-index:2;"
:src = "`${item1.coverImg}?x-oss-process=image/resize,m_lfit,w_90,h_90`" width = "180"
height = "180" > < / c-image >
< / view >
< view class = "info" style = "display: flex;flex-direction: column;justify-content: center;" >
< view class = "name" >
{ { item1 . name } }
< / view >
< view class = "price-wrap" >
< view class = "price" >
< text class = "i" > ￥ < / text >
< text class = "num" > { { item1 . lowPrice } } < / text >
< text class = "i" > 起 < / text >
< / view >
< view class = "sku-wrap" v-if = "item1.productSkuResult != null"
@click.stop ="clickspecifications(item1,index,index1)" >
< text class = "t" > 选规格 < / text >
< text class = "dot num" v-if = "item1.cartNumber != '0'" > {{ item1.cartNumber }} < / text >
< / view >
< view class = "operation-wrap" v-else >
< view class = "btn" v-if = "item1.cartNumber != '0'"
@click.stop ="cartadd(item1,index,index1,'-',item1.productSkuResult == null ? '单规格':'')" >
< u -icon :name = "require('@/static/icon_sub.png')" size = "36" > < / u-icon >
< / view >
< text class = "num" > { { item1 . cartNumber } } < / text >
< view class = "btn"
@click.stop ="cartadd(item1,index,index1,'+',item1.productSkuResult == null ? '单规格':'')" >
< u -icon :name = "require('@/static/icon_add.png')" size = "36" > < / u-icon >
< / view >
< / view >
< / view >
< / view >
< / view >
< / view >
< / view >
< / view >
< / view >
< view class = "cart-wrap" >
< view class = "cart-content" >
< view class = "left" >
< image class = "icon" src = "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/icon_cart.png"
mode = "aspectFit" @click ="showCart = !showCart" >
< / image >
< text class = "i" > ￥ < / text >
< text class = "num" > { { cartLists . amount || '0.00' } } < / text >
< / view >
< view class = "btn" @tap ="$u.debounce(orderdetail, 500)" >
< text class = "t" > 提交订单 < / text >
< / view >
< / view >
< / view >
<!-- 购物车 -- >
< u-popup :show = "showCart" :round = "20" :zIndex = "98" : overlayStyle = "{ zIndex: 98 }" @close ="showCart = false" >
< view class = "cart-list-wrap" >
< view class = "cart-header" >
< view class = "clear" @click ="cartclear" >
< u -icon name = "trash" color = "#999" > < / u-icon >
< text class = "t" > 清空购物车 < / text >
< / view >
< / view >
< scroll-view scroll -y class = "scroll-view" >
< view class = "list-wrap" >
< view class = "shop-item" v-for = "(item,index) in cartLists.data" :key="item.id" >
< view class = "cover" >
< c-image :src = "item.coverImg" width = "120" height = "120" > < / c-image >
< / view >
< view class = "info" >
< view class = "name" >
{ { item . name } }
< / view >
< view class = "select-sku-wrap" >
< text class = "t" > { { item . skuName } } < / text >
< / view >
< view class = "price-wrap" style = "padding-top: 0;" >
< view class = "price" >
< text class = "i" > ￥ < / text >
< text class = "num" > { { item . salePrice } } < / text >
< text class = "i" > 起 < / text >
< / view >
< view class = "operation-wrap" >
< view class = "btn" v-if = "item.number" @click="cartListadd(item,index,'-')" >
< u -icon :name = "require('@/static/icon_sub.png')" size = "34" > < / u-icon >
< / view >
< text class = "num" v-if = "item.number" > {{ item.number }} < / text >
< view class = "btn" @click ="cartListadd(item,index,'+')" >
< u -icon :name = "require('@/static/icon_add.png')" size = "34" > < / u-icon >
< / view >
< / view >
< / view >
< / view >
< / view >
< / view >
< / scroll-view >
< / view >
< / u-popup >
<!-- 门店详情 -- >
< u-popup :show = "showShopInfo" :round = "20" @close ="showShopInfo = false" >
< view class = "shop-info-wrap" >
< view class = "info-wrap" >
< image :src = "shopList.storeInfo.coverImg" mode = "aspectFill" class = "img" > < / image >
< text class = "t" > { { shopList . storeInfo . shopName } } < / text >
< / view >
< view class = "row" >
< view class = "col" >
< text class = "t" > { { shopList . storeInfo . businessTime } } < / text >
< / view >
< view class = "col" @click ="makePhoneCall(shopList.storeInfo.phone)" >
< text class = "t" > { { shopList . storeInfo . phone } } < / text >
< / view >
< view class = "col" >
< text class = "t" > { { shopList . storeInfo . address } } < / text >
< / view >
< / view >
< view class = "line" > < / view >
< view class = "close" @click ="showShopInfo = false" >
< text class = "t" > 关闭 < / text >
< / view >
< / view >
< / u-popup >
<!-- 规格 -- >
< u-popup :show = "showShopsku" :round = "20" mode = "bottom" @close ="showShopsku = false"
: safeAreaInsetBottom = 'false' >
< view class = "shop_sku" >
< view class = "positionabsolute" >
< u-icon name = "close-circle-fill" @click ="showShopsku = false" color = "#a3aaa3" size = "60" > < / u-icon >
< / view >
< image class = "shop_skucimage" :src = "specifications.coverImg" mode = "widthFix" > < / image >
< view class = "shop_sku_name" >
{ { specifications . name } }
< / view >
< view class = "shop_sku_box" v-for = "(item,index) in specifications.tagSnap" :key="index"
v-if = "specifications.tagSnap" >
< view class = "shop_sku_box_name" >
{ { item . name } }
< / view >
< view class = "flex-start" >
< view class = "shop_sku_box_item" v-for = "(item1,index1) in item.children" :key="index1"
@click ="morloe(item1,index,index1,item)"
: class = " item.start === index1 ?'shop_sku_box_item_selected':'' " >
{ { item1 } }
< / view >
< / view >
< / view >
< view class = "shop_skuselect flex-start" v-if = "specifications.tagSnap" >
已选规格 ： < view class = "shop_skuselectname" > { { skuidname . toString ( ) } } < / view >
< / view >
< view class = "shop_bottom flex-between" >
< view class = "price" >
< text class = "i" > ￥ < / text >
< text class = "num" > { { salePrice } } < / text >
< text class = "i" > 起 < / text >
< / view >
< view class = "operation-wrap" >
< view class = "btn"
@click ="cartadd(specifications,specifications.indexa,specifications.indexb,'-',specifications.tagSnap == null ? '单规格':'')" >
< u -icon :name = "require('@/static/icon_sub.png')" size = "34" > < / u-icon >
< / view >
< text class = "num" > { { amountcartNumber } } < / text >
< view class = "btn"
@click ="cartadd(specifications,specifications.indexa,specifications.indexb,'+',specifications.tagSnap == null ? '单规格':'')" >
< u -icon :name = "require('@/static/icon_add.png')" size = "34" > < / u-icon >
< / view >
< / view >
< / view >
< / view >
< / u-popup >
< l-barrage ref = "lBarrage" @end ="onEnd" : minTop = '8' : maxTop = '20' : avatar = 'barrageavatar' > < / l-barrage >
< / view >
< / template >
< script >
import _ from 'lodash' ;
import webSocketUtils from '@/common/js/websocket.js' ;
import orderdetail from '@/pages/order_detail/index' ;
import lBarrage from '@/components/l-barrage/l-barrage.vue'
import navseat from '@/components/navseat.vue'
export default {
components : {
orderdetail ,
lBarrage ,
navseat
} ,
data ( ) {
return {
opacitys : false ,
toplist : {
name : ''
} ,
userInfo : uni . cache . get ( 'userInfo' ) , //个人信息
// #ifndef MP-WEIXIN
menuInfo : uni . getSystemInfo ( ) ,
// #endif
// #ifdef MP-WEIXIN
menuInfo : uni . getMenuButtonBoundingClientRect ( ) ,
// #endif
signatureDish _list : [ ] ,
paddingBtmSize : 6 ,
tabHeadHeight : 50 ,
isFixed : false ,
shopList : { } , //数据类型
active : 0 ,
showShopInfo : false ,
showShopsku : false ,
titleTopNumIndex : 0 ,
titleTopNums : [ ] ,
showCart : false ,
tableCode : '' , //code，
specifications : { } ,
skuidname : [ ] ,
cartLists : { } , //购物车
orderdetailcartLists : { } , //提交订单
socketTicket : null ,
amountcartNumber : 0 ,
skuidsearch : '' , //
salePrice : '' , //钱数
fixedtrue : true ,
datasocket : { } , //储存传参数据
radiovalue : '1' , //选择支付方式
amountVIP : null , //余额
barrageavatar : '' //弹幕头像
} ;
} ,
computed : {
HeighT ( ) { //手机类型的尺寸
return this . $store . getters . is _BarHeight
} ,
} ,
onPageScroll ( e ) {
if ( e . scrollTop >= ( this . menuInfo . top + this . menuInfo . height + this . paddingBtmSize ) / 2 ) {
this . isFixed = true ;
uni . setNavigationBarColor ( {
frontColor : '#000000' ,
backgroundColor : '#ffffff'
} ) ;
} else {
this . isFixed = false ;
uni . setNavigationBarColor ( {
frontColor : '#ffffff' ,
backgroundColor : '#000000'
} ) ;
}
this . countScrollTitle ( e . scrollTop ) ;
} ,
onLoad ( e ) {
if ( e . q ) {
this . tableCode = this . getQueryString ( decodeURIComponent ( e . q ) , 'code' )
uni . cache . set ( 'tableCode' , this . tableCode )
}
uni . cache . set ( 'types' , 'types' ) ;
this . $nextTick ( ( ) => {
this . countTitleTopNum ( ) ; //导航栏
} ) ;
} ,
onUnload ( ) {
this . socketTicket . Close ( )
uni . $off ( 'message' )
} ,
onHide ( ) {
this . socketTicket . Close ( )
uni . $off ( 'message' )
this . fixedtrue = true
} ,
onShow ( ) {
uni . $on ( 'message' , this . getMessage )
this . productqueryShopIdByTableCode ( ) //获取shop User id
} ,
methods : {
onEnd ( ) { //回调弹幕
console . log ( '一波结束' )
} ,
// 单独获取他的shopUserid
async productqueryShopIdByTableCode ( ) {
let res = await this . api . productqueryShopIdByTableCode ( {
code : uni . cache . get ( 'tableCode' )
} )
if ( res . code == 0 ) {
uni . cache . set ( 'shopUser' , res . data )
this . handlemessage ( ) //监听websocket返回
this . productqueryProduct ( ) //list 数据
} else {
setTimeout ( ( ) => {
uni . pro . switchTab ( 'index/index' )
} , 1000 )
}
} ,
getMessage ( msg ) { //wss 回显数据
if ( msg == 1 ) { // 网络在连接
this . fixedtrue = true
return false
}
this . fixedtrue = false
if ( msg . type == 'heartbeat' ) { //后台心跳 处理返回 不然控制台一直报错
return false
}
try {
if ( msg . status != 'success' ) {
uni . showToast ( {
title : msg . msg ,
icon : "none" ,
} )
if ( msg . msg == '桌码不存在' ) { //卓码不存在直接退出
this . socketTicket . Close ( )
uni . $off ( 'message' )
uni . navigateBack ( )
return false ;
}
} else {
switch ( msg . type ) {
case 'sku' : // sku 数量 查询这个商品的价格和数量
this . $set ( this , 'amountcartNumber' , msg . amount )
this . productqueryProduct ( ) //list 数据
break ;
case 'clearCart' :
this . cartLists = msg
this . productqueryProduct ( ) //list 数据
this . skuidname = [ ]
this . showCart = false
setTimeout ( ( ) => {
uni . showToast ( {
title : msg . msg ,
icon : "none" ,
} )
} , 500 )
break ;
case 'order' :
this . skuidname = [ ]
this . showCart = false
this . cartLists = msg
this . productqueryProduct ( ) //list 数据
break ;
case 'addCart' : //初始化add
this . cartLists = msg
this . productqueryProduct ( ) //list 数据
break ;
case 'addcart' :
this . cartLists = msg
console . log ( msg , 1111 )
this . productqueryProduct ( ) //list 数据
try {
if ( msg . data . length != 0 ) {
let nums = 0
msg . data . forEach ( ( item , index , arr ) => { //初始化skuidname的数据 选择第一个
if ( item . skuId == this . skuidsearch ) {
nums = item . number
}
} )
this . $set ( this , 'amountcartNumber' , nums )
} else {
this . $set ( this , 'amountcartNumber' , 0 )
}
} catch ( e ) {
//TODO handle the exception
}
try {
this . barrageavatar = msg . reqData . headImg
/*插入一条弹幕*/
this . $refs . lBarrage . add (
` ${ msg . reqData . nickName ? msg . reqData . nickName : '微信用户' } ${ msg . reqData . num == - 1 ? '取消了' : '添加了' } ${ msg . reqData . name } ( ${ msg . reqData . num } ) `
) ;
} catch ( e ) {
//TODO handle the exception
}
break ;
}
}
} catch ( e ) {
//TODO handle the exception
}
} ,
handlemessage ( ) {
this . socketTicket ? this . socketTicket . Close ( ) : null //调用前先判断是否有socket正在进行 先关闭后链接
this . socketTicket = new webSocketUtils ( ` ${ uni . conf . baseUrlwws } ` , 5000 , {
tableId : uni . cache . get ( 'tableCode' ) ,
shopId : uni . cache . get ( 'shopUser' ) ,
userId : uni . cache . get ( 'userInfo' ) . id ,
"type" : "connect" ,
} )
} ,
// 数据处理
socketSendMsg ( data ) {
if ( this . socketTicket ) {
this . socketTicket . send ( data ) ;
}
} ,
getQueryString ( url , name ) { //解码
var reg = new RegExp ( '(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)' , 'i' )
var r = url . substr ( 1 ) . match ( reg )
if ( r != null ) {
return r [ 2 ]
}
return null ;
} ,
async cartadd ( item , index , index1 , a , b ) { //列表添加 a传参加减号 b是判断单规格多规格
if ( b == '单规格' ) { //没有规格为空
this . skuidname = [ ]
}
this . hodgepodge ( item , 1 , a ) //获取skuid /1添加购物车
} ,
async cartListadd ( item , index , a ) { //购物车加减
try {
const data = { //定义socket数据传参
"name" : item . name ,
"skuId" : item . skuId ,
"num" : a == '-' ? - 1 : 1 , //skuId
"type" : "addcart" , //“addcart:添加购物车， ，
"productId" : item . productId , //商品id
"shopId" : uni . cache . get ( 'shopUser' ) ,
"userId" : uni . cache . get ( 'userInfo' ) . id
} ;
this . datasocket = data
uni . $u . debounce ( this . socketSendMsg ( data ) , 500 )
} catch ( e ) {
//TODO handle the exception
}
} ,
async productqueryProduct ( ) { //list 数据
let res = await this . api . productqueryProduct ( {
code : uni . cache . get ( 'tableCode' ) ,
productGroupId : ''
} )
if ( res . code == 0 ) {
this . shopList = res . data
this . signatureDish _list = res . data . productInfo [ 0 ] . products
this . $nextTick ( ( ) => {
this . countTitleTopNum ( ) ;
} ) ;
}
} ,
clickspecifications ( item1 , index , index1 ) {
this . skuidname = [ ]
this . specifications = item1
this . specifications . indexa = index
this . specifications . indexb = index1
try {
if ( item1 . productSkuResult == null ) {
// 但但单个规格弹框的处理
this . hodgepodge ( this . specifications , 2 ) //获取skuid /2查找价格和数量
} else {
// 多规格数据处理
this . specifications . tagSnap = JSON . parse ( item1 . productSkuResult . tagSnap ) . map ( ( item ) => {
let res = {
id : item1 . id , //商品id
name : item . name ,
start : 0 ,
children : item . value . split ( "," )
}
return res
} )
this . specifications . tagSnap . forEach ( ( val , index , arr ) => { //初始化skuidname的数据 选择第一个
this . skuidname . push ( val . children [ 0 ] )
} )
this . hodgepodge ( this . specifications . tagSnap [ 0 ] , 2 ) //获取skuid /2查找价格和数量
}
} catch ( e ) {
//TODO handle the exception
}
} ,
async morloe ( e , index , index1 , item ) {
this . specifications . tagSnap [ index ] [ 'start' ] = index1
this . skuidname . splice ( index , 1 , e ) //替换skuidname的数据
this . hodgepodge ( item , 2 )
} ,
async hodgepodge ( item , a , c ) { //此接口去获取商品id ！！！赋值库存 数量 价格等
try {
let res = await this . api . productqueryProductSku ( {
shopId : uni . cache . get ( 'shopUser' ) ,
productId : item . id , //商品id
spec _tag : this . skuidname . join ( "," )
} )
if ( res . stockNumber == 0 ) {
uni . showToast ( {
title : '暂无库存' ,
icon : "none" ,
} )
} else {
this . skuidsearch = res . data . id // 储存skuid 用于筛选数量
this . salePrice = res . data . salePrice // 价格
let data = null
if ( a == 1 ) { //1添加购物车 2是websocket返回这个商品的价格(应为不同的多规格商品返回不同的价格)
data = { //定义socket数据传参
"nickName" : this . userInfo . nickName ,
"barrageavatar" : this . userInfo . headImg ,
'name' : item . name ,
"skuId" : res . data . id ,
"num" : c == '-' ? - 1 : 1 , //数量
"type" : "addcart" , //“addcart:添加购物车， ，
"productId" : item . id , //商品id
"shopId" : uni . cache . get ( 'shopUser' ) ,
"userId" : uni . cache . get ( 'userInfo' ) . id
} ;
} else {
data = { //查询这个商品的价格
"name" : item . name ,
"skuId" : res . data . id ,
"num" : '' , //数量
"type" : "sku" , //“addcart:添加购物车， ，
"productId" : item . id , //商品id
"shopId" : uni . cache . get ( 'shopUser' ) ,
"userId" : uni . cache . get ( 'userInfo' ) . id
} ;
this . showShopsku = true //打开弹框
}
this . datasocket = data
uni . $u . debounce ( this . socketSendMsg ( data ) , 500 )
}
} catch ( e ) { }
} ,
orderdetail ( ) { // 直接生成订单
if ( this . cartLists . data . length == 0 ) {
uni . showToast ( {
title : '请先添加商品' ,
icon : 'none'
} )
return false
}
uni . navigateTo ( {
url : '/pages/order/confirm_order?storeInfo=' + JSON . stringify ( this . shopList . storeInfo )
} ) ;
return ;
uni . navigateTo ( {
url : '/pages/order_detail/indexs?tableId=' + JSON . stringify ( this . cartLists )
} ) ;
// let data = {
// "skuId": '',
// "num": '', //数量
// "type": "createOrder", //“addcart:添加购物车， ，
// "couponsId": '', //优惠券ID,
// "isYhq": 0, // 是否使用优惠券（ 1： ：
// "isBuyYhq": 0, // 是否购买优惠券（ 1： ：
// "productId": '', //商品id
// "shopId": uni.cache.get('shopUser'),
// "userId": uni.cache.get('userInfo').id,
// }
// this.datasocket = data
// uni.$u.debounce(this.socketSendMsg(data), 500)
} ,
async cartclear ( ) { //清空购物车
try {
const data = { //定义socket数据传参
"skuId" : '' ,
"num" : '' , //skuId
"type" : "clearCart" , //“addcart:添加购物车， ，
"productId" : '' , //商品id
"shopId" : uni . cache . get ( 'shopUser' ) ,
"userId" : uni . cache . get ( 'userInfo' ) . id
} ;
this . datasocket = data
uni . $u . debounce ( this . socketSendMsg ( data ) , 500 )
} catch ( e ) {
//TODO handle the exception
}
} ,
// 导航栏点击
navClickHandle ( t ) {
switch ( t ) {
case 1 :
// 返回
this . socketTicket . Close ( )
uni . switchTab ( {
url : '/pages/index/index'
} )
break ;
case 2 :
// 显示商家信息
this . showShopInfo = true ;
break ;
default :
break ;
}
} ,
//打电话
makePhoneCall ( phone ) {
uni . makePhoneCall ( {
phoneNumber : phone //仅为示例
} ) ;
} ,
// 点击菜单商品滚动到指定为止
titleClickHandle ( id ) {
uni . createSelectorQuery ( )
. select ( '#wrapper' )
. boundingClientRect ( ( data ) => {
//目标节点
uni . createSelectorQuery ( )
. select ( ` #title ${ id } ` )
. boundingClientRect ( ( res ) => {
const scrollTop = res . top - data . top ;
const offsetNum = this . menuInfo . top + this . menuInfo . height + this
. paddingBtmSize +
this . tabHeadHeight - 1 ;
//最外层盒子节点
uni . pageScrollTo ( {
scrollTop : scrollTop - offsetNum
} ) ;
} )
. exec ( ) ;
} )
. exec ( ) ;
} ,
// 计算滚动到那个标题
countScrollTitle : _ . throttle ( function ( top ) {
if ( this . titleTopNums . length > 1 ) {
for ( let i = 0 ; i <= this . titleTopNums . length - 1 ; i ++ ) {
if ( top >= this . titleTopNums [ i ] && top < this . titleTopNums [ i + 1 ] ) {
this . titleTopNumIndex = i ;
}
}
if ( top >= this . titleTopNums [ this . titleTopNums . length - 1 ] ) {
this . titleTopNumIndex = this . titleTopNums . length - 1 ;
}
}
} , 100 ) ,
// 统计每个标题到顶部的距离
countTitleTopNum ( ) {
let topNums = [ ] ;
for ( let i of this . shopList . productInfo ) {
uni . createSelectorQuery ( )
. select ( ` #title ${ i . id } ` )
. boundingClientRect ( ( res ) => {
topNums . push ( res . top + this . menuInfo . top + this . menuInfo . height + this
. paddingBtmSize -
this . tabHeadHeight - this . tabHeadHeight / 2 ) ;
} )
. exec ( ) ;
}
this . titleTopNums = topNums ;
} ,
}
} ;
< / script >
< style scoped lang = "scss" >
# wrapper {
background - color : # fff ;
}
. shopInfo {
display : flex ;
flex - direction : column ;
padding : 0 20 rpx ;
box - sizing : border - box ;
. shopTitle {
width : 382 rpx ;
margin : 0 auto 30 rpx auto ;
}
. shopName {
font - weight : 500 ;
font - size : 32 rpx ;
color : # 333333 ;
margin - bottom : 16 rpx ;
}
. shopDistance {
font - weight : 400 ;
font - size : 24 rpx ;
color : # 999999 ;
}
. shopDetail {
margin - top : 32 rpx ;
font - weight : 400 ;
font - size : 28 rpx ;
color : # 999999 ;
. shopTime {
font - weight : 400 ;
font - size : 28 rpx ;
color : # 999999 ;
}
}
}
. signatureDish {
width : 100 % ;
padding : 0 20 rpx ;
box - sizing : border - box ;
. signatureDish _list {
width : 100 % ;
display : flex ;
flex - wrap : wrap ;
. signatureDish _item {
display : flex ;
flex - direction : column ;
margin - right : 30 rpx ;
. signatureDish _img {
width : 340 rpx ;
height : 204 rpx ;
}
}
}
}
< / style >
GaoHao