@@ -3,10 +3,15 @@
<!-- 占位符导航栏 -- >
<!-- 顶部面板 -- >
< view class = "top--panel" >
< navseat : opacity = 'opacity' : titleshow = 'true' :backColor = "'#fff'" : heightshow = 'opacity' @ Topdistance = 'Topdistance' > < / navseat >
< navseat : opacity = 'opacity' : titleshow = 'true' : heightshow = 'opacity' @ Topdistance = 'Topdistance' > < / navseat >
<!-- # ifdef MP - WEIXIN -- >
< view v-show = "isNavShow" :style="{'height':HeighT.customBar+HeighT.heightBar+'px;background-color: #fff;position: fixed;top: 0;left: 0;width: 100%;z-index: 999'}" > < / view >
< ! - - # endif - - >
<!-- 顶部面板 , 可添加所需要放在页面顶部的内容代码 。 比如banner图 -- >
<!-- https : //czg-qr-order.oss-cn-beijing.aliyuncs.com/orderfood/shuangyu1.png -->
< image class = "panelimgbackground"
src= "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/orderfood/shuangyu1.png" mode = "aspectFill" >
: src= "shopInfo.storeInfo.coverImg"
mode = "aspectFill" >
< / image >
< view class = "panelone" >
{ { shopInfo . storeInfo . shopName } }
@@ -23,14 +28,14 @@
< u-icon name = "arrow-down" color = "#999999" size = "28" > < / u-icon >
< / view >
< / view >
< view class = "panelfour" >
< view class = "panelfour" v-if = "shopProductList.hots && shopProductList.hots.length > 0" >
本店招牌菜
< / view >
< view class = "panelfive" >
< scroll-view :scroll-x = "true" :scroll-into-view = "leftIntoView" :scroll-with-animation = "false" >
< view class = "panelfive_list" >
< view class = "panelfiveitem" v-for = "(item,index) in shopProductList.hots" :key="index" >
< image class = "panelfiveitemimage" src= "@/static/avatar.pn g" mode = "aspectFill" > < / image >
< image class = "panelfiveitemimage" : src= "item.coverIm g" mode = "aspectFill" > < / image >
< view class = "panelfiveitemone" >
{ { item . name } }
< / view >
@@ -40,19 +45,38 @@
< view class = "panelfiveitemthere flex-start" >
< text > 招牌 < / text >
< / view >
< view class = "panelfiveitemfour" >
桂香馥郁 , 沉入新鲜甘甜的椰 . .
< view class = "panelfiveitemfour" v-if = "item.shortTitle" >
{{ item.shortTitle }}
< / view >
< view class = "panelfiveitemfive" >
月售169
月售{ { item . stockNumber } }
< / view >
< view class = "panelfiveitemsex flex-between" >
< view class = "panelfiveitemsex_oen" >
< text > ¥ < / text >
< text > 88 / 份 < / text >
< text > 「 5 份起点 」 < / text >
< text > { { item . lowPrice } } < / text >
< text > / 份 < / text >
< text > 「 { { item . suit } } 份起点 」 < / text >
< / view >
<!-- < u-icon name = "plus-circle-fill" color = "#E9AB7A" size = "40" > < / u-icon > -- >
< / view >
< view class = "panelfiveitemNum" >
< view class = "sku-wrap flex-center" v-if = "item.productSkuResult != null"
@click.stop ="clickspecifications(item,index,index1)" >
< text class = "t" > 选规格 < / text >
< u-badge type = "green" class = "badge" count = "22" > < / u-badge >
< text class = "dot num" v-if = "item.cartNumber != '0'" > {{ item.cartNumber < 99 ? item.cartNumber : ' 99 + ' }} < / text >
< / view >
< view class = "Controls" v-else >
< view v-if = "item.cartNumber != '0'" @click.stop="cartadd(item,'-',item.productSkuResult == null ? '单规格':'',$event)" >
< u -icon name = "minus-circle-fill" color = "#E9AB7A" size = "50" > < / u-icon >
< / view >
< text class = "num" > { { item . cartNumber } } < / text >
< view @click.stop ="cartadd(item,'+',item.productSkuResult == null ? '单规格':'')" >
< u -icon name = "plus-circle-fill" color = "#E9AB7A" size = "50" > < / u-icon >
< / view >
< / view >
< u-icon name = "plus-circle-fill" color = "#E9AB7A" size = "40" > < / u-icon >
< / view >
< / view >
< / view >
@@ -81,11 +105,12 @@
< view class = "goods" @click ="clickspecifications(item1,index,index1)" v-for = "(item1,index1) in item.products" :key="index1" >
< image class = "goodsImg" v-if = "item1.coverImg!=null" :lazy-load="true" :src="`${item1.coverImg}?x-oss-process=image/resize,m_lfit,w_90,h_90`" > < / image >
< image class = "goodsImg" src = "@/static/1.gif" mode = "" v-else :lazy-load = "true" > < / image >
< view v-if = "item.name=='热销'" class="topSort" :class="'c'+(index1+1)" > TOP {{ index1 + 1 }} < / view >
< view class = "goods_right" >
< view class = "name" > { { item1 . name } } < / view >
< view class = "lookBack" > 本店回头客第1 名< / view >
< view class = "describe" > 桂香馥郁 , 沉入新鲜甘甜的椰 < / view >
< view class = "monthlySale" > 月售169 < / view >
< view class = "lookBack" v-if = "item.name=='热销'" > 本店回头客第{{ index1 + 1 }} 名< / view >
< view class = "describe" > { { item1 . shortTitle ? item1 . shortTitle : '' } } < / view >
< view class = "monthlySale" > 月售{ { item1 . stockNumber } } < / view >
< view class = "money" > ¥ < text class = "money_num" > { { item1 . lowPrice } } < / text > / 份 < / view >
< view class = "sku-wrap flex-center" v-if = "item1.productSkuResult != null"
@@ -95,12 +120,12 @@
< text class = "dot num" v-if = "item1.cartNumber != '0'" > {{ item1.cartNumber < 99 ? item1.cartNumber : ' 99 + ' }} < / text >
< / view >
< view class = "Controls" v-else >
< view v-if = "item1.cartNumber != '0'" @click.stop="cartadd(item1,index,index1, '-',item1.productSkuResult == null ? '单规格':'',$event)" >
< u -icon name = "minus-circle-fill" color = "#E9AB7A" size = "4 0" > < / u-icon >
< view v-if = "item1.cartNumber != '0'" @click.stop="cartadd(item1,'-',item1.productSkuResult == null ? '单规格':'',$event)" >
< u -icon name = "minus-circle-fill" color = "#E9AB7A" size = "5 0" > < / u-icon >
< / view >
< text class = "num" > { { item1 . cartNumber } } < / text >
< view @click.stop ="cartadd(item1,index,index1, '+',item1.productSkuResult == null ? '单规格':'')" >
< u -icon name = "plus-circle-fill" color = "#E9AB7A" size = "4 0" > < / u-icon >
< view @click.stop ="cartadd(item1,'+',item1.productSkuResult == null ? '单规格':'')" >
< u -icon name = "plus-circle-fill" color = "#E9AB7A" size = "5 0" > < / u-icon >
< / view >
< / view >
@@ -119,6 +144,8 @@
< view > 可添加需放在页面底部的内容 , 比如购物车栏目 < / view >
< / view >
< / view > -- >
<!-- 购物车悬浮条 -- >
< view class = "cart-wrap" v-if = "cartListsdatashow" >
< view class = "cart-content" >
< view class = "left" >
@@ -156,7 +183,7 @@
< / view >
< view class = "info" >
< view class = "name" > { { item . name } } < / view >
< view class = "select-sku-wrap" > { { item . n ame } } < / view >
< view class = "select-sku-wrap" > { { item . skuN ame } } < / view >
< view class = "price-wrap" style = "padding-top: 0;" >
< view class = "price" >
@@ -165,11 +192,11 @@
< / view >
< view class = "operation-wrap" >
< view class = "btn" v-if = "item.number" @click="cartListadd(item,index,'-')" >
< u -icon name = "minus-circle-fill" color = "#E9AB7A" size = "4 0" > < / u-icon >
< u -icon name = "minus-circle-fill" color = "#E9AB7A" size = "5 0" > < / u-icon >
< / view >
< text class = "num" v-if = "item.number" > {{ item.number }} < / text >
< view class = "btn" @click ="cartListadd(item,index,'+')" >
< u -icon name = "plus-circle-fill" color = "#E9AB7A" size = "4 0" > < / u-icon >
< u -icon name = "plus-circle-fill" color = "#E9AB7A" size = "5 0" > < / u-icon >
< / view >
< / view >
< / view >
@@ -228,7 +255,7 @@
< image class = "shop_skucimage" :src = "specifications.coverImg" mode = "aspectFill" > < / image >
< view class = "shop_sku_name" > { { specifications . name } } < / view >
< view class = "shop_sku_returned" > { { specifications . name } } < / view >
< view class = "shop_sku_description" > { { specifications . name } } < / view >
< view class = "shop_sku_description" > { { specifications . shortTitle ? specifications . shortTitle : '' } } < / view >
< view class = "shop_sku_box" v-for = "(item,index) in specifications.tagSnap" :key="index"
v-if = "specifications.tagSnap" >
@@ -268,7 +295,7 @@
< view class = "shop_skuselect flex-start" v-if = "specifications.tagSnap" >
< view class = "shop_skuselectname" > { { skuidname . toString ( ) } } < / view >
< / view >
< view class = "addShopping" @click ="addShopping(specifications,specifications.indexa,specifications.indexb,'+',specifications.tagSnap == null ? '单规格':'')" > 添加到购物车 < / view >
< view class = "addShopping" :class = "amountcartNumber>0?'active':''" @click ="addShopping(specifications,specifications.indexa,specifications.indexb,'+',specifications.tagSnap == null ? '单规格':'')" > 添加到购物车 < / view >
< / view >
< / view >
< / u -popup >
@@ -285,7 +312,7 @@
data ( ) {
return {
userInfo : uni . cache . get ( 'userInfo' ) , //个人信息
opacity : tru e, //是否显示
opacity : fals e, //是否显示
scrollHeight : 1000 ,
scrollTopSize : 0 , //距离顶部的高度
fillHeight : 0 , // 填充高度,用于最后一项低于滚动区域时使用
@@ -295,6 +322,7 @@
leftIndex : 0 ,
scrollInto : '' ,
isFixed : true ,
isNavShow : false ,
heightnav : '' , //点击获取的距离
showShopInfo : false , //店铺信息弹窗是否显示
showShopsku : false , //多规格弹窗是否显示
@@ -309,25 +337,24 @@
} , // 规格信息
socketTicket : null ,
amountcartNumber : 1 ,
amountcartNumber : 0 ,
salePrice : '' , //钱数
cartListsdatashow : false , //是否显示购物车
showCart : false ,
}
} ,
onPageScroll ( e ) {
console . log ( e . scrollTop , this . scrollTopSize )
try {
if ( e . scrollTop <= 44 ) { //搜索导航栏显示影藏
// this.opacity = false
this . isNavShow = false
} else {
// this.opacity = true
this . isNavShow = true
}
} catch ( e ) {
//TODO handle the exception
}
if ( e . scrollTop >= this . scrollTopSize - 10 ) { //控制大图层
console . log ( 'nishizhengqde' )
console . log ( e . scrollTop , this . scrollTopSize )
if ( e . scrollTop >= this . scrollTopSize ) { //控制大图层
this . isFixed = false ;
} else {
this . isFixed = true ;
@@ -337,20 +364,16 @@
/* 计算左侧滚动位置定位 */
leftIntoView ( ) {
return ` left- ${ this . leftIndex > 20 ? ( this . leftIndex - 20 ) : 0 } ` ;
}
} ,
HeighT ( ) { //手机类型的尺寸
return this . $store . getters . is _BarHeight
} ,
} ,
onReady ( ) {
setTimeout ( ( ) => {
uni . getSystemInfo ( {
success : ( data ) => {
this . scrollHeight = data . windowHeight
// console.log(data.windowHeight, 1)
this . $u . getRect ( '.scroll-panel' ) . then ( res => {
// console.log(res, 11)
this . scrollTopSize = res . top ; //元素距离顶部的距离
this . scrollHeight = this . scrollHeight - this . heightnav
// console.log(this.scrollHeight, 111)
} )
}
} )
} , 100 ) ;
@@ -375,7 +398,6 @@
this . fixedtrue = true
} ,
onShow ( ) {
console . log ( uni . cache . get ( 'token' ) )
if ( ! uni . cache . get ( 'token' ) ) {
uni . login ( {
provider : 'weixin' ,
@@ -432,7 +454,6 @@
lng : uni . cache . get ( 'getLocationstorage' ) . lng ,
lat : uni . cache . get ( 'getLocationstorage' ) . lat ,
} )
console . log ( res )
if ( res . code == 0 ) {
uni . cache . set ( 'shopUser' , res . data . storeInfo . id )
this . handlemessage ( ) //监听websocket返回
@@ -451,42 +472,17 @@
*/
async productqueryProduct ( ) {
let res = await this . api . productqueryProduct ( {
// code: uni.cache.get('tableCode'),
"shopId" : uni . cache . get ( 'shopUser' ) ,
productGroupId: ''
" productGroupId" : ''
} )
if ( res . code == 0 ) {
this . shopProductList = res . data ;
if ( this . cartLists . data . length >= 0 ) {
var summedArray = this . cartLists . data . reduce ( ( acc , current ) => {
const existing = acc . find ( item => item . productId === current . productId ) ;
if ( existing ) {
existing . number += current . number ;
} else {
acc . push ( {
... current
} )
}
return acc ;
} , [ ] ) ;
console . log ( summedArray )
// 购物车总数据与列表页面互通
this . shopProductList . productInfo . forEach ( ( item ) => {
return item . products . filter ( e => {
e . cartNumber = 0 ;
return summedArray . find ( i => {
if ( e . id == i . productId ) {
e . cartNumber = i . number
}
} )
} )
} )
if ( this . cartLists && this . cartLists . data && this . cartLists . data . length >= 0 ) {
this . setNumber ( )
}
console . log ( this . shopProductList )
// this.$nextTick(() => {
// this.countTitleTopNum();
// });
setTimeout ( ( ) => {
this . getElementTop ( ) ;
} , 100 ) ;
}
} ,
@@ -498,7 +494,7 @@
* @param {Object} a
* @param {Object} b
*/
async cartadd ( item , index , index1 , a , b ) { //列表添加 a传参加减号 b是判断单规格多规格\
async cartadd ( item , a , b ) { //列表添加 a传参加减号 b是判断单规格多规格\
if ( b == '单规格' ) { //没有规格为空
this . skuidname = [ ]
}
@@ -518,18 +514,19 @@
if ( a == "+" ) {
this . amountcartNumber ++ ;
} else {
if ( this . amountcartNumber > 1 ) {
if ( this . amountcartNumber > 0 ) {
this . amountcartNumber --
}
}
console . log ( item )
} ,
/**
* 添加购物车
*/
addShopping ( item , index , index1 , a , b ) {
console . log ( item )
if ( this . amountcartNumber <= 0 ) {
return ;
}
let params = {
"skuId" : this . skuId ,
"num" : item . cartNumber + this . amountcartNumber , //数量
@@ -548,20 +545,18 @@
* @param {Object} index
* @param {Object} a
*/
async cartListadd ( item , index , a ) {
console . log ( item )
async cartListadd ( item , index , c ) {
try {
const data = { //定义socket数据传参
"name" : item . name ,
let params = {
"skuId" : item . skuId ,
"num" : a == '- ' ? - 1 : 1 , //skuId
"type" : "addcart" , //“addcart:添加购物车, create0rder:生成订单, clearCart:清空购物车”,
"num" : c == '+ ' ? item . number + 1 : item . number - 1 , //数量
"type" : c == '+' ? 1 : 0 ,
"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 )
"userId" : uni . cache . get ( 'userInfo' ) . id ,
"tableId" : uni . cache . get ( 'tableCode' ) ,
}
this . addCart ( params ) ;
} catch ( e ) {
//TODO handle the exception
}
@@ -575,7 +570,7 @@
let res = await this . api . cartAdd ( data )
if ( res . code == 0 ) {
this . showShopsku = false ;
this . $set ( this , 'amountcartNumber' , 1 )
this . $set ( this , 'amountcartNumber' , 0 )
}
} ,
@@ -617,46 +612,23 @@
} )
} )
} )
} ,
/**
* 结算直接生成订单
*/
orderdetail ( ) {
if ( this . cartLists . data . length == 0 ) {
uni . showToast ( {
title : '请先添加商品' ,
icon : 'none'
// 处理招牌菜商品数量
this . shopProductList . hots . forEach ( ( item ) => {
item . cartNumber = 0 ;
return summedArray . find ( i => {
if ( item . id == i . productId ) {
item . cartNumber = i . number
}
} )
} )
this . cartListsdatashow = this . cartLists . data . length == 0 ? false : true
if ( this . cartLists . data . length > 0 ) {
this . cartLists _count = 0 ;
this . cartLists . data . forEach ( ( v , e ) => {
this . cartLists _count += v . number ;
} )
return false
}
uni . navigateTo ( {
url : '/pages/order/confirm_order?storeInfo=' + JSON . stringify ( this . shopInfo . storeInfo )
} ) ;
// let data = {
// "skuId": '',
// "num": '', //数量
// "type": "createOrder", //“addcart:添加购物车, create0rder:生成订单, clearCart:庆康购物车”,
// "couponsId": '', //优惠券ID,
// "isYhq": 0, // 是否使用优惠券( 1: 使用, 0: 不使用),
// "isBuyYhq": 0, // 是否购买优惠券( 1: 购买, 0: 不够买)
// "productId": '', //商品id
// "shopId": uni.cache.get('shopUser'),
// "userId": uni.cache.get('userInfo').id,
// }
// this.datasocket = data
// uni.$u.debounce(this.socketSendMsg(data), 500)
} ,
/**
* 商家信息显示
*/
showShopClick ( ) {
this . showShopInfo = true ;
} ,
/**
* 多规格选择
* @param {Object} item1
@@ -686,7 +658,6 @@
this . specifications . tagSnap . forEach ( ( val , index , arr ) => { //初始化skuidname的数据 选择第一个
this . skuidname . push ( val . children [ 0 ] )
} )
console . log ( this . specifications )
this . hodgepodge ( this . specifications . tagSnap [ 0 ] , 2 ) //获取skuid /2查找价格和数量
}
@@ -694,20 +665,34 @@
//TODO handle the exception
}
} ,
/**
* 规格选择监听
* @param {Object} e
* @param {Object} index
* @param {Object} index1
* @param {Object} item
*/
async morloe ( e , index , index1 , item ) {
this . specifications . tagSnap [ index ] [ 'start' ] = index1
this . skuidname . splice ( index , 1 , e ) //替换skuidname的数据
this . hodgepodge ( item , 2 )
} ,
/**
* 获取规格信息
* @param {Object} item
* @param {Object} a
* @param {Object} c
* @param {Object} num
*/
async hodgepodge ( item , a , c , num ) { //此接口去获取商品id !!!赋值库存 数量 价格等
try {
let res = await this . api . productqueryProductSku ( {
shopId : uni . cache . get ( 'shopUser' ) ,
productId : item . id , //商品id
spec _tag : this . skuidname . join ( "+ " )
spec _tag : this . skuidname . join ( ", " )
} )
console . log ( res )
if ( res . data . stockNumber == 0 ) {
uni . showToast ( {
title : '暂无库存' ,
@@ -732,13 +717,38 @@
this . skuId = res . data . id ;
this . showShopsku = true //打开弹框
}
this . $set ( this , 'amountcartNumber' , 1 )
// this.datasocket = data;
// uni.$u.debounce(this.socketSendMsg(data), 500)
this . $set ( this , 'amountcartNumber' , 0 )
}
} catch ( e ) { }
} ,
/**
* 结算直接生成订单
*/
orderdetail ( ) {
console . log ( this . cartLists )
console . log ( this . shopInfo )
if ( this . cartLists . data . length == 0 ) {
uni . showToast ( {
title : '请先添加商品' ,
icon : 'none'
} )
return false
}
uni . navigateTo ( {
url : '/pages/order/confirm_order?storeInfo=' + JSON . stringify ( this . shopInfo . storeInfo )
} ) ;
} ,
/**
* 商家信息显示
*/
showShopClick ( ) {
this . showShopInfo = true ;
} ,
/**
* 获取消息
@@ -769,17 +779,15 @@
} else {
switch ( msg . type ) {
case 'sku' : // sku 数量 查询这个商品的价格和数量
// this.$set(this, 'amountcartNumber', msg.amount)
// this.productqueryProduct() //list 数据
break ;
case 'order' :
this . skuidname = [ ]
this . showCart = false
this . cartLists = msg
// this.productqueryProduct() //list 数据
break ;
case 'addCart' : //初始化add
this . cartLists = msg
this . setNumber ( )
break ;
case 'addcart' :
this . cartLists = msg
@@ -792,14 +800,7 @@
} catch ( e ) { }
break ;
}
this . cartListsdatashow = this . cartLists . data . length == 0 ? false : true
console . log ( this . cartLists . data )
if ( this . cartLists . data . length > 0 ) {
this . cartLists _count = 0 ;
this . cartLists . data . forEach ( ( v , e ) => {
this . cartLists _count += v . number ;
} )
}
}
} catch ( e ) {
@@ -814,72 +815,12 @@
}
} ,
// 导航栏高度 去计算列表页的高度
Topdistance ( e ) {
this . heightnav = e ////导航栏高度
} ,
/* 获取列表数据 */
getListData ( ) {
// Promise 为 ES6 新增的API ,有疑问的请自行学习该方法的使用。
new Promise ( ( resolve , reject ) => {
/* 因无真实数据,当前方法模拟数据。正式项目中将此处替换为 数据请求即可 */
// 模拟数据
let mockData = ( ) => {
let [ left , main ] = [
[ ] ,
[ ]
] ;
let size = Math . floor ( Math . random ( ) * 40 ) ;
size = size < 20 ? 20 : size ;
for ( let i = 0 ; i < size ; i ++ ) {
left . push ( ` ${ i + 1 } 类商品 ` ) ;
let list = [ ] ;
let r = Math . floor ( Math . random ( ) * 10 ) ;
r = r < 5 ? 5 : r ;
for ( let j = 0 ; j < r ; j ++ ) {
list . push ( j ) ;
}
main . push ( {
title : ` 第 ${ i + 1 } 类商品标题 ` ,
list
} )
}
return {
left ,
main
}
}
setTimeout ( ( ) => {
let res = mockData ( ) ;
let {
left ,
main
} = res ;
// 将请求接口返回的数据传递给 Promise 对象的 then 函数。
resolve ( {
left ,
main
} ) ;
} , 1000 ) ;
} ) . then ( ( res ) => {
console . log ( '-----------请求接口返回数据示例-------------' ) ;
console . log ( res ) ;
this . leftArray = res . left ;
this . mainArray = res . main ;
// DOM 挂载后 再调用 getElementTop 获取高度的方法。
setTimeout ( ( ) => {
this . getElementTop ( ) ;
} , 100 ) ;
} ) ;
} ,
/* 获取元素顶部信息 */
getElementTop ( ) {
new Promise ( ( resolve , reject ) => {
@@ -887,6 +828,11 @@
view . boundingClientRect ( data => {
resolve ( data ) ;
} ) . exec ( ) ;
this . $u . getRect ( '.scroll-panel' ) . then ( res => {
console . log ( res )
this . scrollTopSize = res . top - this . heightnav ; //元素距离顶部的距离
this . scrollHeight = this . scrollHeight - this . heightnav
} )
} ) . then ( ( res ) => {
let topArr = res . map ( ( item ) => {
return item . top - this . scrollTopSize ; /* 减去滚动容器距离顶部的距离 */
@@ -902,40 +848,18 @@
} ,
/* 主区域滚动监听 */
mainScroll ( e ) {
// 节流方法
// clearTimeout(this.mainThrottle);
// this.mainThrottle = setTimeout(() => {
// scrollFn();
// }, 10);
// let scrollFn = () => {
// let top = e.detail.scrollTop;
// let index = 0;
// /* 查找当前滚动距离 */
// for (let i = (this.topArr.length - 1); i >= 0; i--) {
// /* 在部分安卓设备上, 因手机逻辑分辨率与rpx单位计算不是整数, 滚动距离与有误差, 增加2px来完善该问题 */
// if ((top + 2) >= this.topArr[i]) {
// index = i;
// break;
// }
// }
// }
} ,
/* 左侧导航点击 */
leftTap ( e , index ) {
console . log ( e )
console . log ( index )
try {
this . leftIndex = ( index < 0 ? 0 : index ) ;
if ( this . isFixed ) {
console . log ( this . scrollTopSize )
console . log ( this . heightnav )
uni . pageScrollTo ( {
scrollTop : this . scrollTopSize + this . heightnav , //滑动需要的距离 nav+列表距离的高度
scrollTop : this . scrollTopSize , //滑动需要的距离 nav+列表距离的高度
duration : 100
} ) ;
this . isFixed = false
// this.opacity = false
}
} catch ( e ) {
@@ -945,7 +869,6 @@
setTimeout ( ( ) => {
let index = e . currentTarget . dataset . index ;
this . scrollInto = ` item- ${ index } ` ;
console . log ( this . scrollInto )
} , )
}
}
@@ -999,7 +922,8 @@
}
. panelthere {
margin - top : 16 rpx ;
margin - top : 32 rpx ;
margin - bottom : 50 rpx ;
font - family : Source Han Sans CN , Source Han Sans CN ;
font - weight : 400 ;
font - size : 24 rpx ;
@@ -1023,7 +947,6 @@
}
. panelfour {
margin - top : 50 rpx ;
font - family : Source Han Sans CN , Source Han Sans CN ;
font - weight : bold ;
font - size : 32 rpx ;
@@ -1038,6 +961,7 @@
margin - top : 16 rpx ;
width : 340 rpx ;
margin - right : 30 rpx ;
position : relative ;
. panelfiveitemimage {
border - radius : 20 rpx 20 rpx 0 rpx 0 rpx ;
width : 100 % ;
@@ -1061,7 +985,7 @@
}
. panelfiveitemthere {
margin - top : 8 rpx ;
margin - top : 12 rpx ;
// text:nth-child(1) {
// margin-left: 0;
// }
@@ -1078,7 +1002,7 @@
}
. panelfiveitemfour {
margin - top : 10 rpx ;
margin - top : 12 rpx ;
width : 100 % ;
overflow : hidden ; //超出的文本隐藏
text - overflow : ellipsis ; //溢出用省略号显示
@@ -1109,13 +1033,18 @@
}
text : nth - child ( 2 ) {
font - family : Source Han Sans CN , Source Han Sans CN ;
font - weight : bold ;
font - size : 36 rpx ;
color : # 333333 ;
}
text : nth - child ( 3 ) {
font - family : Source Han Sans CN , Source Han Sans CN ;
font - weight : 400 ;
font - size : 36 rpx ;
color : # 333333 ;
}
text : nth - child ( 3 ) {
text : nth - child ( 4 ) {
font - family : Source Han Sans CN , Source Han Sans CN ;
font - weight : 400 ;
font - size : 24 rpx ;
@@ -1123,6 +1052,47 @@
}
}
}
. panelfiveitemNum {
position : absolute ;
bottom : 82 rpx ;
right : 0 ;
. sku - wrap {
width : 138 rpx ;
height : 54 rpx ;
background : # E3AD7F ;
border - radius : 32 rpx ;
position : absolute ;
bottom : 10 rpx ;
right : 20 rpx ;
align - items : center ;
. t {
font - size : 28 rpx ;
color : # fff ;
}
. dot {
position : absolute ;
top : - 15 rpx ;
right : - 10 rpx ;
background - color : # FF4B33 ;
color : # fff ;
border - radius : 58 rpx ;
padding : 5 rpx 14 rpx ;
box - sizing : border - box ;
display : flex ;
align - items : center ;
justify - content : center ;
font - size : 20 rpx ;
}
}
. Controls {
display : flex ;
align - items : center ;
. num {
margin : 8 rpx 8 rpx 0 8 rpx ;
}
}
}
}
}
}
@@ -1309,22 +1279,25 @@
height : 96 rpx ;
line - height : 96 rpx ;
text - align : center ;
background : # E8AD7B ;
background : # ccc ;
border - radius : 48 rpx ;
font - weight : 400 ;
font - size : 32 rpx ;
color : # FFFFFF ;
margin - top : 36 rpx ;
}
. addShopping . active {
background : # E8AD7B ;
}
}
}
. cart - wrap {
width : 100 % ;
padding : $paddingSize ;
padding : 0 20 rpx ;
box - sizing : border - box ;
position : fixed ;
bottom : $paddingSize ;
bottom : 40 rpx ;
left : 0 ;
z - index : 99 ;
@@ -1674,7 +1647,7 @@
flex - wrap : nowrap ;
justify - content : flex - start ;
align - content : center ;
position : relative ;
& + . goods {
margin - top : 16 rpx ;
}
@@ -1691,6 +1664,29 @@
border - radius : 18 rpx ;
flex - shrink : 0 ;
}
. topSort {
width : 92 rpx ;
height : 38 rpx ;
text - align : center ;
line - height : 38 rpx ;
position : absolute ;
top : 0 ;
left : 0 ;
font - weight : 400 ;
font - size : 24 rpx ;
color : # FFFFFF ;
border - radius : 20 rpx 0 rpx 20 rpx 0 rpx ;
}
. topSort . c1 {
background : # FC5C2E ;
}
. topSort . c2 {
background : # EF994E ;
}
. topSort . c3 {
background : # F4B951 ;
}
. goods _right {
width : 100 % ;