1205 lines
30 KiB
Vue
1205 lines
30 KiB
Vue
<template>
|
||
<view id="wrapper">
|
||
<view class="nav-wrap" :class="{ 'is-fixed': isFixed }"
|
||
:style="{ paddingTop: `${menuInfo.top}px`, paddingBottom: `${paddingBtmSize}px` }">
|
||
<view class="content" :style="{ height: `${menuInfo.height}px`, paddingLeft: `${paddingBtmSize}px` }">
|
||
<view class="left-btn">
|
||
<view class="btn" :style="{ width: `${menuInfo.height}px`, height: `${menuInfo.height}px` }"
|
||
@click="navClickHandle(1)">
|
||
<u-icon name="arrow-left" :color="isFixed ? '#333' : '#fff'" size="38"></u-icon>
|
||
</view>
|
||
<view class="btn" :style="{ width: `${menuInfo.height}px`, height: `${menuInfo.height}px` }"
|
||
@click="navClickHandle(2)">
|
||
<u-icon name="kefu-ermai" :color="isFixed ? '#333' : '#fff'" size="38"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<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="header-wrap">
|
||
<text class="title">
|
||
<text class="t">{{ shopList.storeInfo.shopName }}</text>
|
||
</text>
|
||
<view class="cover">
|
||
<image class="img" :src="shopList.storeInfo.logo" mode="aspectFill"></image>
|
||
</view>
|
||
</view>
|
||
<view class="tab-header"
|
||
:style="{ height: `${tabHeadHeight}px`, top: `${menuInfo.top + menuInfo.height + paddingBtmSize}px` }">
|
||
<view class="left">
|
||
<text class="t">选择</text>
|
||
</view>
|
||
<view class="right">
|
||
<text class="t">商家</text>
|
||
<text class="d">{{ shopList.shopTableInfo.name }}</text>
|
||
</view>
|
||
</view>
|
||
<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" style="width:180rpx; height: 180rpx;">
|
||
<c-image :src="item1.coverImg" 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="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="cartadd(item1,index,index1,'-',item1.cartNumber,item1.productSkuResult == null ? '单规格':'')">
|
||
<u-icon :name="require('@/static/icon_sub.png')" size="34"></u-icon>
|
||
</view>
|
||
<text class="num">{{ item1.cartNumber }}</text>
|
||
<view class="btn"
|
||
@click="cartadd(item1,index,index1,'+',item1.cartNumber,item1.productSkuResult == null ? '单规格':'')">
|
||
<u-icon :name="require('@/static/icon_add.png')" size="34"></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}}</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="orderfoodindex">
|
||
<text class="t" style="color: #ffd100;">可用优惠劵</text>
|
||
</view> -->
|
||
<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">
|
||
<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="center" @close="showShopsku = false"
|
||
:safeAreaInsetBottom='false'>
|
||
<view class="shop_sku">
|
||
<view class="shop_sku_name">
|
||
{{specifications.name}}
|
||
</view>
|
||
<view class="shop_sku_box" v-for="(item,index) in specifications.tagSnap" :key="index">
|
||
<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">
|
||
已选规格：<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.cartNumber)">
|
||
<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.cartNumber)">
|
||
<u-icon :name="require('@/static/icon_add.png')" size="34"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import _ from 'lodash';
|
||
import navbar from '../../uni_modules/uview-ui/libs/config/props/navbar';
|
||
import webSocketUtils from '@/common/js/websocket.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
// #ifndef MP-WEIXIN
|
||
menuInfo: uni.getSystemInfo(),
|
||
// #endif
|
||
// #ifdef MP-WEIXIN
|
||
menuInfo: uni.getMenuButtonBoundingClientRect(),
|
||
// #endif
|
||
paddingBtmSize: 6,
|
||
tabHeadHeight: 50,
|
||
isFixed: false,
|
||
shopList: {}, //数据类型
|
||
active: 0,
|
||
showShopInfo: false,
|
||
showShopsku: false,
|
||
titleTopNumIndex: 0,
|
||
titleTopNums: [],
|
||
showCart: false,
|
||
tableCode: '', //code，
|
||
specifications: {},
|
||
skuidname: [],
|
||
cartLists: {},
|
||
socketTicket: null,
|
||
amountcartNumber: 0,
|
||
skuidsearch: '', //
|
||
salePrice: '' //钱数
|
||
};
|
||
},
|
||
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);
|
||
},
|
||
async onLoad(e) {
|
||
if (e.q) {
|
||
let tableCode = this.getQueryString(decodeURIComponent(e.q), 'code')
|
||
uni.cache.set('tableCode', tableCode)
|
||
// this.scanCodehandle()
|
||
}
|
||
if (!uni.cache.get('token') && uni.cache.get('tableCode')) {
|
||
uni.reLaunch({
|
||
url: '/pages/login/login?type=' + 0
|
||
});
|
||
}
|
||
uni.$on('message', this.getMessage)
|
||
this.$nextTick(() => {
|
||
this.countTitleTopNum(); //导航栏
|
||
});
|
||
},
|
||
onUnload() {
|
||
this.socketSendMsg({ //定义socket数据传参
|
||
"type": "close", //“addcart:添加购物车，create0rder:生成订单，clearCart:庆康购物车”，
|
||
})
|
||
this.socketTicket.Close()
|
||
uni.$off('message')
|
||
},
|
||
onShow() {
|
||
setTimeout(() => {
|
||
if (uni.cache.get('token') && uni.cache.get('tableCode')) {
|
||
this.productqueryShopIdByTableCode() //获取shop User id
|
||
}
|
||
}, 500)
|
||
},
|
||
methods: {
|
||
// 单独获取他的shopUserid
|
||
async productqueryShopIdByTableCode() {
|
||
let res = await this.api.productqueryShopIdByTableCode({
|
||
code: uni.cache.get('tableCode')
|
||
})
|
||
try {
|
||
if (res.data) {
|
||
let time = new Date
|
||
console.log(time,'时间戳')
|
||
uni.cache.set('shopUser', res.data)
|
||
this.handlemessage()
|
||
}
|
||
} catch (e) {
|
||
//TODO handle the exception
|
||
}
|
||
},
|
||
getMessage(msg) { //wss 回显数据
|
||
if (msg.status != 'success') {
|
||
uni.showToast({
|
||
title: msg.msg,
|
||
icon: "none",
|
||
})
|
||
if (msg.msg == '桌码不存在') { //卓码不存在直接退出
|
||
this.socketSendMsg({ //定义socket数据传参
|
||
"type": "close", //“addcart:添加购物车，create0rder:生成订单，clearCart:庆康购物车”，
|
||
})
|
||
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':
|
||
console.log('clearCart')
|
||
this.specifications.duoguge = ''
|
||
this.skuidname = []
|
||
this.showCart = false
|
||
setTimeout(() => {
|
||
uni.showToast({
|
||
title: '清空购物车成功',
|
||
icon: "none",
|
||
})
|
||
}, 1000)
|
||
this.cartLists = msg
|
||
this.productqueryProduct() //list 数据
|
||
break;
|
||
case 'order':
|
||
console.log('clearCart')
|
||
this.specifications.duoguge = ''
|
||
this.skuidname = []
|
||
this.showCart = false
|
||
this.cartLists = msg
|
||
this.productqueryProduct() //list 数据
|
||
break;
|
||
// case 'createOrder': //去结算
|
||
// let item = JSON.stringify(msg.data)
|
||
// uni.redirectTo({
|
||
// url: '/pages/order_detail/order_detail?tableId=' + item
|
||
// });
|
||
// break;
|
||
case 'queryCart': //待提交
|
||
// let queryCart = JSON.stringify(msg.data)
|
||
// uni.pro.navigateTo('order_detail/order_detail', {
|
||
// tableId: JSON.stringify(msg.data)
|
||
// })
|
||
uni.redirectTo({
|
||
url: '/pages/order_detail/order_detail?tableId=' + JSON.stringify(msg.data) +
|
||
'&amount=' + msg.amount
|
||
});
|
||
break;
|
||
case 'addcart':
|
||
this.cartLists = msg
|
||
if (msg.data.length != 0) {
|
||
msg.data.forEach((item, index, arr) => { //初始化skuidname的数据 选择第一个
|
||
if (item.skuId == this.skuidsearch) {
|
||
this.$set(this, 'amountcartNumber', item.number)
|
||
} else {
|
||
this.$set(this, 'amountcartNumber', 0)
|
||
}
|
||
})
|
||
} else {
|
||
this.$set(this, 'amountcartNumber', 0)
|
||
}
|
||
this.productqueryProduct() //list 数据
|
||
break;
|
||
default:
|
||
this.cartLists = msg
|
||
this.productqueryProduct() //list 数据
|
||
}
|
||
}
|
||
},
|
||
handlemessage() {
|
||
console.log(this.socketTicket,'是否存在socketTicket1')
|
||
// this.socketTicket ? this.socketTicket.Close() : null //调用前先判断是否有socket正在进行 先关闭后链接
|
||
this.socketTicket = new webSocketUtils(
|
||
`${uni.conf.baseUrlwws}/websocket/table/${uni.cache.get('tableCode')}/${uni.cache.get('shopUser')}/${uni.cache.get('userInfo').id}`,
|
||
5000)
|
||
console.log(this.socketTicket,'是否存在socketTicket3')
|
||
},
|
||
// 数据处理
|
||
socketSendMsg(data) {
|
||
if (this.socketTicket) {
|
||
this.socketTicket.send(data);
|
||
}
|
||
},
|
||
scanCodehandle(e) {
|
||
// #ifdef MP-WEIXIN || MP-ALIPAY
|
||
uni.login({ //alipay weixin
|
||
provider: 'weixin',
|
||
success: async (data) => {
|
||
try {
|
||
uni.getUserInfo({
|
||
provider: 'weixin',
|
||
success: async (infoRes) => {
|
||
console.log(infoRes, 81);
|
||
uni.cache.set('weixincode', data.code);
|
||
let res = await this.api.userwxlogin({
|
||
code: uni.cache.get('weixincode'), //临时登录凭证
|
||
encryptedData: infoRes.encryptedData, // 用户非敏感信息
|
||
rawData: infoRes.rawData,
|
||
signature: infoRes.signature,
|
||
iv: infoRes.iv,
|
||
qrCode: uni.cache.get('tableCode')
|
||
})
|
||
if (res.code == 0) {
|
||
uni.cache.set('token', res.data.token);
|
||
uni.cache.set('miniAppOpenId', res.data.userInfo
|
||
.miniAppOpenId)
|
||
uni.cache.set('userInfo', res.data.userInfo);
|
||
this.productqueryShopIdByTableCode() //获取shop User id
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
console.log(err)
|
||
}
|
||
});
|
||
|
||
} catch (e) {
|
||
console.log(e)
|
||
}
|
||
}
|
||
});
|
||
// #endif
|
||
},
|
||
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, guge) { //列表添加
|
||
console.log(item, index, index1, a, b, guge)
|
||
if (guge == '单规格') { //没有规格为空
|
||
this.specifications.duoguge = ''
|
||
this.skuidname = []
|
||
}
|
||
this.hodgepodge(item, 1, a) //获取skuid
|
||
},
|
||
async cartListadd(item, index, a) {
|
||
console.log(item, index, a)
|
||
try {
|
||
const data = { //定义socket数据传参
|
||
"skuId": item.skuId,
|
||
"num": a == '-' ? -1 : 1, //skuId
|
||
"type": "addcart", //“addcart:添加购物车，create0rder:生成订单，clearCart:清空购物车”，
|
||
"productId": item.id, //商品id
|
||
"shopId": uni.cache.get('shopUser'),
|
||
"userId": uni.cache.get('userInfo').id
|
||
};
|
||
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.$nextTick(() => {
|
||
this.countTitleTopNum();
|
||
});
|
||
}
|
||
},
|
||
clickspecifications(e, a, b, d) {
|
||
console.log(e, a, b)
|
||
this.skuidname = []
|
||
this.specifications = e
|
||
this.specifications.indexa = a
|
||
this.specifications.indexb = b
|
||
this.specifications.duoguge = 'duoguge'
|
||
if (e.productSkuResult.tagSnap == null) {
|
||
uni.showToast({
|
||
title: '暂无规格',
|
||
icon: "none",
|
||
})
|
||
return false
|
||
}
|
||
this.specifications.tagSnap = JSON.parse(e.productSkuResult.tagSnap).map((item) => {
|
||
let res = {
|
||
id: e.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])
|
||
})
|
||
try {
|
||
this.hodgepodge(this.specifications.tagSnap[0], 2)
|
||
} catch (e) {
|
||
//TODO handle the exception
|
||
}
|
||
if (d != '更新数据') {
|
||
this.showShopsku = true
|
||
}
|
||
},
|
||
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 // 储存skuid 用于筛选数量
|
||
let data = null
|
||
if (a == 1) {
|
||
data = { //定义socket数据传参
|
||
"skuId": res.data.id,
|
||
"num": c == '-' ? -1 : 1, //数量
|
||
"type": "addcart", //“addcart:添加购物车，create0rder:生成订单，clearCart:庆康购物车”，
|
||
"productId": item.id, //商品id
|
||
"shopId": uni.cache.get('shopUser'),
|
||
"userId": uni.cache.get('userInfo').id
|
||
};
|
||
} else {
|
||
data = { //定义socket数据传参
|
||
"skuId": res.data.id,
|
||
"num": '', //数量
|
||
"type": "sku", //“addcart:添加购物车，create0rder:生成订单，clearCart:庆康购物车”，
|
||
"productId": item.id, //商品id
|
||
"shopId": uni.cache.get('shopUser'),
|
||
"userId": uni.cache.get('userInfo').id
|
||
};
|
||
}
|
||
uni.$u.debounce(this.socketSendMsg(data), 500)
|
||
}
|
||
} catch (e) {
|
||
uni.showToast({
|
||
title: '获取失败',
|
||
icon: "none",
|
||
})
|
||
}
|
||
},
|
||
orderdetail() {
|
||
// uni.pro.navigateTo('order_detail/order_detail', {
|
||
// tableId: item
|
||
// })
|
||
// if (this.showCart) {
|
||
let data = { //定义socket数据传参
|
||
"skuId": '',
|
||
"num": '', //数量
|
||
"type": "queryCart", //“addcart:添加购物车，create0rder:生成订单，clearCart:庆康购物车”，
|
||
"productId": '', //商品id
|
||
"shopId": uni.cache.get('shopUser'),
|
||
"userId": uni.cache.get('userInfo').id
|
||
}
|
||
uni.$u.debounce(this.socketSendMsg(data), 500)
|
||
// } else {
|
||
// this.showCart = true
|
||
// }
|
||
|
||
},
|
||
orderfoodindex() {
|
||
uni.pro.navigateTo('index/coupons/index', {
|
||
orderfood: 0
|
||
})
|
||
},
|
||
async cartclear() {
|
||
try {
|
||
const data = { //定义socket数据传参
|
||
"skuId": '',
|
||
"num": '', //skuId
|
||
"type": "clearCart", //“addcart:添加购物车，create0rder:生成订单，clearCart:清空购物车”，
|
||
"productId": '', //商品id
|
||
"shopId": uni.cache.get('shopUser'),
|
||
"userId": uni.cache.get('userInfo').id
|
||
};
|
||
uni.$u.debounce(this.socketSendMsg(data), 500)
|
||
} catch (e) {
|
||
//TODO handle the exception
|
||
}
|
||
|
||
},
|
||
// 导航栏点击
|
||
navClickHandle(t) {
|
||
switch (t) {
|
||
case 1:
|
||
// 返回
|
||
uni.switchTab({
|
||
url: '/pages/index/index'
|
||
})
|
||
break;
|
||
case 2:
|
||
// 显示商家信息
|
||
this.showShopInfo = true;
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
},
|
||
// 点击菜单商品滚动到指定为止
|
||
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">
|
||
$bg: #fafafa;
|
||
$tabLeft: 200upx;
|
||
$itemH: 100upx;
|
||
$cartH: 90upx;
|
||
|
||
.nav-wrap {
|
||
width: 100%;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 97;
|
||
|
||
&.is-fixed {
|
||
background-color: #fff;
|
||
}
|
||
|
||
.content {
|
||
.left-btn {
|
||
display: flex;
|
||
|
||
.btn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: $paddingSize;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.shop-cover {
|
||
position: relative;
|
||
|
||
&::after {
|
||
content: '';
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 2;
|
||
background-color: rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.img {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
}
|
||
|
||
.list-container {
|
||
background-color: #fff;
|
||
border-radius: 20upx;
|
||
position: relative;
|
||
z-index: 96;
|
||
margin-top: -40upx;
|
||
|
||
.header-wrap {
|
||
$h: 120upx;
|
||
height: $h;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 $paddingSize;
|
||
|
||
.title {
|
||
font-weight: bold;
|
||
|
||
.t {
|
||
font-size: 42upx;
|
||
}
|
||
}
|
||
|
||
.cover {
|
||
width: $h;
|
||
height: $h;
|
||
margin-top: -40upx;
|
||
background: #999;
|
||
|
||
.img {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 12upx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.tab-header {
|
||
display: flex;
|
||
align-items: center;
|
||
background-color: $bg;
|
||
position: sticky;
|
||
z-index: 999;
|
||
|
||
.t {
|
||
font-size: 32upx;
|
||
}
|
||
|
||
.left {
|
||
width: $tabLeft;
|
||
display: flex;
|
||
padding-left: $paddingSize;
|
||
|
||
.t {
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.right {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 $paddingSize;
|
||
|
||
.d {
|
||
padding: 12upx 16upx;
|
||
background-color: #faf2b6;
|
||
border-radius: 12upx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.tab-content {
|
||
display: flex;
|
||
position: relative;
|
||
|
||
.left-wrap {
|
||
width: $tabLeft;
|
||
background-color: $bg;
|
||
|
||
.left {
|
||
width: $tabLeft;
|
||
position: sticky;
|
||
|
||
.item {
|
||
height: $itemH;
|
||
display: flex;
|
||
align-items: center;
|
||
padding-left: $paddingSize;
|
||
|
||
&.active {
|
||
background-color: #fff;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.list-wrap {
|
||
flex: 1;
|
||
padding-left: $paddingSize;
|
||
padding-bottom: $paddingSize * 3 + $cartH;
|
||
|
||
.item-wrap {
|
||
.title {
|
||
height: $itemH;
|
||
display: flex;
|
||
align-items: center;
|
||
position: sticky;
|
||
z-index: 10;
|
||
background-color: #fff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.shop-item {
|
||
display: flex;
|
||
padding-bottom: $paddingSize;
|
||
|
||
.info {
|
||
flex: 1;
|
||
padding-left: 20upx;
|
||
padding-right: $paddingSize;
|
||
|
||
.name {
|
||
font-size: 28upx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.select-sku-wrap {
|
||
.t {
|
||
color: #999;
|
||
font-size: 24upx;
|
||
}
|
||
}
|
||
|
||
.price-wrap {
|
||
padding-top: $paddingSize;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.price {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
|
||
.i {
|
||
font-size: 20upx;
|
||
color: $numColor;
|
||
position: relative;
|
||
bottom: 4upx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.num {
|
||
font-size: 42upx;
|
||
color: $numColor;
|
||
position: relative;
|
||
top: 6upx;
|
||
padding: 0 4upx;
|
||
}
|
||
}
|
||
|
||
.sku-wrap {
|
||
padding: 6upx 16upx;
|
||
background-color: $color-priamry;
|
||
border-radius: 12upx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
|
||
.t {
|
||
font-size: 24upx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.dot {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 20upx;
|
||
position: absolute;
|
||
padding: 2upx 12upx;
|
||
border-radius: 8upx;
|
||
background-color: $numColor;
|
||
color: #fff;
|
||
position: absolute;
|
||
top: -14upx;
|
||
right: -8upx;
|
||
}
|
||
}
|
||
|
||
.operation-wrap {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.num {
|
||
font-size: 32upx;
|
||
padding: 0 16upx;
|
||
}
|
||
|
||
.btn {
|
||
padding: 6upx 10upx;
|
||
background-color: $color-priamry;
|
||
border-radius: 12upx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.cart-wrap {
|
||
width: 100%;
|
||
padding: $paddingSize;
|
||
position: fixed;
|
||
bottom: $paddingSize * 2;
|
||
left: 0;
|
||
z-index: 99;
|
||
|
||
.cart-content {
|
||
display: flex;
|
||
height: $cartH;
|
||
border-radius: $cartH;
|
||
|
||
.left {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
background-color: #111;
|
||
padding-left: 120upx;
|
||
position: relative;
|
||
border-radius: $cartH 0 0 $cartH;
|
||
|
||
.icon {
|
||
width: 80upx;
|
||
height: 120upx;
|
||
position: absolute;
|
||
left: $paddingSize;
|
||
bottom: 20upx;
|
||
}
|
||
|
||
.i,
|
||
.num {
|
||
color: #fff;
|
||
}
|
||
|
||
.i {
|
||
font-size: 20upx;
|
||
position: relative;
|
||
top: 4upx;
|
||
}
|
||
|
||
.num {
|
||
font-size: 42upx;
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
width: 200upx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: bold;
|
||
background: $linear-color-priamry;
|
||
border-radius: 0 $cartH $cartH 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.cart-list-wrap {
|
||
.cart-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
background-color: #f4eddf;
|
||
padding: 20upx $paddingSize;
|
||
border-radius: 20upx 20upx 0 0;
|
||
|
||
.clear {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.t {
|
||
font-size: 24upx;
|
||
color: #999;
|
||
margin-left: 4upx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.scroll-view {
|
||
max-height: 50vh;
|
||
}
|
||
|
||
.list-wrap {
|
||
padding: $paddingSize 0 $paddingSize * 2 + $cartH $paddingSize;
|
||
}
|
||
}
|
||
|
||
.shop_sku {
|
||
width: 700rpx;
|
||
border-radius: 20rpx;
|
||
background: #fff;
|
||
|
||
.shop_sku_name {
|
||
padding: 0 $paddingSize;
|
||
margin-top: 20rpx;
|
||
font-weight: bold;
|
||
font-size: 32upx;
|
||
}
|
||
|
||
.shop_sku_box {
|
||
padding: 0 $paddingSize;
|
||
|
||
.shop_sku_box_name {
|
||
margin-top: 20rpx;
|
||
font-weight: 500;
|
||
font-size: 28upx;
|
||
color: #999;
|
||
}
|
||
|
||
.flex-start {
|
||
.shop_sku_box_item {
|
||
margin-top: 16rpx;
|
||
padding: 8rpx 24rpx;
|
||
border-radius: 24rpx;
|
||
font-size: 24upx;
|
||
margin-left: 16rpx;
|
||
background: #fbe3e3;
|
||
}
|
||
|
||
.shop_sku_box_item:nth-child(1) {
|
||
margin-left: 0;
|
||
}
|
||
|
||
.shop_sku_box_item_noselected {
|
||
color: #000;
|
||
}
|
||
|
||
.shop_sku_box_item_selected {
|
||
border: 1rpx solid red;
|
||
color: red;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.shop_skuselect {
|
||
padding: 10rpx $paddingSize;
|
||
margin-top: 28rpx;
|
||
width: 100%;
|
||
background: #f7f7f7;
|
||
color: #ada7a7;
|
||
font-size: 24upx;
|
||
|
||
.shop_skuselectname {
|
||
color: #000;
|
||
font-size: 26upx;
|
||
}
|
||
}
|
||
|
||
.shop_bottom {
|
||
box-sizing: border-box;
|
||
padding: 10rpx $paddingSize;
|
||
margin: 28rpx 0;
|
||
|
||
.price {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
|
||
.i {
|
||
font-size: 20upx;
|
||
color: $numColor;
|
||
position: relative;
|
||
bottom: 4upx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.num {
|
||
font-size: 42upx;
|
||
color: $numColor;
|
||
position: relative;
|
||
top: 6upx;
|
||
padding: 0 4upx;
|
||
}
|
||
}
|
||
|
||
.operation-wrap {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.num {
|
||
font-size: 32upx;
|
||
padding: 0 16upx;
|
||
}
|
||
|
||
.btn {
|
||
padding: 6upx 10upx;
|
||
background-color: $color-priamry;
|
||
border-radius: 12upx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.shop-info-wrap {
|
||
.info-wrap {
|
||
padding: $paddingSize * 2 0;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
border-bottom: 1upx solid #f2f2f2;
|
||
|
||
.img {
|
||
width: 100upx;
|
||
height: 100upx;
|
||
border-radius: 12upx;
|
||
}
|
||
|
||
.t {
|
||
font-size: 32upx;
|
||
padding-top: 8upx;
|
||
}
|
||
}
|
||
|
||
.row {
|
||
padding: 0 $paddingSize $paddingSize;
|
||
|
||
.col {
|
||
padding-top: $paddingSize;
|
||
|
||
.t {
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
|
||
.line {
|
||
height: 12upx;
|
||
background-color: #f2f2f2;
|
||
}
|
||
|
||
.close {
|
||
padding: $paddingSize 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
</style> |