fix::扫码商品页面接口对接
This commit is contained in:
GaoHao
@@ -8,9 +8,18 @@ export default {
|
|||||||
loginapplogin(data) { //APP登录(登录即注册)
|
loginapplogin(data) { //APP登录(登录即注册)
|
||||||
return uni.api.post("/login/app/login", data);
|
return uni.api.post("/login/app/login", data);
|
||||||
},
|
},
|
||||||
|
productqueryShop(data) { //通过桌码获取店铺信息
|
||||||
|
return uni.api.get("/product/queryShop", data);
|
||||||
|
},
|
||||||
productqueryProduct(data) { //获取商品信息
|
productqueryProduct(data) { //获取商品信息
|
||||||
return uni.api.post("/product/queryProduct", data, false);
|
return uni.api.post("/product/queryProduct", data, false);
|
||||||
},
|
},
|
||||||
|
cartAdd(data) { //添加到购物车
|
||||||
|
return uni.api.post("/product/addCart", data);
|
||||||
|
},
|
||||||
|
cleanCart(data) { //清空购物车
|
||||||
|
return uni.api.post("/product/cleanCart", data);
|
||||||
|
},
|
||||||
// 下单详情
|
// 下单详情
|
||||||
getproductorderConfirm(data) {
|
getproductorderConfirm(data) {
|
||||||
return uni.api.get("/product/orderConfirm", data);
|
return uni.api.get("/product/orderConfirm", data);
|
||||||
|
|||||||
@@ -102,6 +102,7 @@ async function request(options) {
|
|||||||
let res = await uni.pro.request(options);
|
let res = await uni.pro.request(options);
|
||||||
// #endif
|
// #endif
|
||||||
if (res.code != 0) {
|
if (res.code != 0) {
|
||||||
|
console.log(options)
|
||||||
if (res.code == -4) {
|
if (res.code == -4) {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
// title: '',
|
// title: '',
|
||||||
|
|||||||
@@ -173,13 +173,6 @@
|
|||||||
"navigationBarTextStyle": "white"
|
"navigationBarTextStyle": "white"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"path": "pages/order_food/goodsList_swiper",
|
|
||||||
"style": {
|
|
||||||
"navigationStyle": "custom",
|
|
||||||
"navigationBarTextStyle": "white"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"path": "pages/make/list",
|
"path": "pages/make/list",
|
||||||
"style": {
|
"style": {
|
||||||
|
|||||||
@@ -58,7 +58,8 @@
|
|||||||
let tableCode = this.getQueryString(decodeURIComponent(res.result), 'code')
|
let tableCode = this.getQueryString(decodeURIComponent(res.result), 'code')
|
||||||
uni.cache.set('tableCode', tableCode)
|
uni.cache.set('tableCode', tableCode)
|
||||||
if (tableCode) {
|
if (tableCode) {
|
||||||
uni.pro.navigateTo('order_food/order_food')
|
// uni.pro.navigateTo('order_food/order_food')
|
||||||
|
uni.pro.navigateTo('order_food/goodsList_scroll')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,92 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view>
|
|
||||||
<view class="t1">点击下方链接体验</view>
|
|
||||||
<navigator url="goodsList_scroll" hover-class="hover">
|
|
||||||
<view class="title">
|
|
||||||
<text>滚动式联动</text>
|
|
||||||
<text class="link">立即体验</text></view>
|
|
||||||
<view class="content">
|
|
||||||
<view>
|
|
||||||
优点：滚动流畅度很好，全平台兼容
|
|
||||||
</view>
|
|
||||||
<view>
|
|
||||||
缺点：因为需要计算高度的原因，需要在页面初始化时将所有商品信息返回，若是有大量的数据，不太建议这样做，会影响到打开时的加载速度
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</navigator>
|
|
||||||
<navigator url="goodsList_swiper" hover-class="hover">
|
|
||||||
<view class="title">
|
|
||||||
<text>轮播式联动</text>
|
|
||||||
<text class="link">立即体验</text>
|
|
||||||
</view>
|
|
||||||
<view class="content">
|
|
||||||
<view>
|
|
||||||
优点：左侧导航与主内容区域联动性好且可以随意调整右侧内容的高度
|
|
||||||
</view>
|
|
||||||
<view>
|
|
||||||
缺点：因H5平台浏览器众多，体验欠佳，不建议在H5平台使用。
|
|
||||||
<text style="color: red;">双向联动有BUG，仅支持左侧联动</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</navigator>
|
|
||||||
<view class="t2">
|
|
||||||
<view>因数据不可控的原因，请各位开发者们选择适合自己的模板使用，各有优缺点，选择适合自己的才是最好的。</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.t1{
|
|
||||||
padding-top: 30rpx;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 36rpx;
|
|
||||||
color: #e50000;
|
|
||||||
}
|
|
||||||
.t2{
|
|
||||||
padding: 30rpx;
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #ee0000;
|
|
||||||
|
|
||||||
>view{
|
|
||||||
margin-bottom: 10rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
navigator{
|
|
||||||
font-size: 28rpx;
|
|
||||||
margin: 30rpx;
|
|
||||||
padding: 20rpx;
|
|
||||||
background-color: #fff;
|
|
||||||
border:#e5e5e5 solid 1px;
|
|
||||||
|
|
||||||
.title{
|
|
||||||
padding-bottom: 20rpx;
|
|
||||||
margin-bottom: 20rpx;
|
|
||||||
border-bottom:#e5e5e5 solid 1px;
|
|
||||||
color:#333;
|
|
||||||
font-size: 32rpx;
|
|
||||||
|
|
||||||
.link{
|
|
||||||
color: #09f;
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.content{
|
|
||||||
line-height: 48rpx;
|
|
||||||
color:#999;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -9,14 +9,14 @@
|
|||||||
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/orderfood/shuangyu1.png" mode="aspectFill">
|
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/orderfood/shuangyu1.png" mode="aspectFill">
|
||||||
</image>
|
</image>
|
||||||
<view class="panelone">
|
<view class="panelone">
|
||||||
{{ shopList.storeInfo.shopName }}
|
{{ shopInfo.storeInfo.shopName }}
|
||||||
</view>
|
</view>
|
||||||
<view class="paneltow">
|
<view class="paneltow">
|
||||||
距离您12.44KM
|
距离您{{ shopInfo.distance }}
|
||||||
</view>
|
</view>
|
||||||
<view class="panelthere flex-between">
|
<view class="panelthere flex-between">
|
||||||
<view class="paneltheretext">
|
<view class="paneltheretext">
|
||||||
营业时间：{{ shopList.storeInfo.businessStartDay +'至'+ shopList.storeInfo.businessEndDay +' '+ shopList.storeInfo.businessTime }}
|
营业时间：{{ shopInfo.storeInfo.businessStartDay +'至'+ shopInfo.storeInfo.businessEndDay +' '+ shopInfo.storeInfo.businessTime }}
|
||||||
</view>
|
</view>
|
||||||
<view class="flex-start" @click="showShopClick">
|
<view class="flex-start" @click="showShopClick">
|
||||||
<view style="margin-right: 14rpx;">查看</view>
|
<view style="margin-right: 14rpx;">查看</view>
|
||||||
@@ -29,10 +29,10 @@
|
|||||||
<view class="panelfive">
|
<view class="panelfive">
|
||||||
<scroll-view :scroll-x="true" :scroll-into-view="leftIntoView" :scroll-with-animation="false">
|
<scroll-view :scroll-x="true" :scroll-into-view="leftIntoView" :scroll-with-animation="false">
|
||||||
<view class="panelfive_list">
|
<view class="panelfive_list">
|
||||||
<view class="panelfiveitem" v-for="(item,index) in 3" :key="index">
|
<view class="panelfiveitem" v-for="(item,index) in shopProductList.hots" :key="index">
|
||||||
<image class="panelfiveitemimage" src="@/static/avatar.png" mode="aspectFill"></image>
|
<image class="panelfiveitemimage" src="@/static/avatar.png" mode="aspectFill"></image>
|
||||||
<view class="panelfiveitemone">
|
<view class="panelfiveitemone">
|
||||||
厚乳酪冰镇拿铁
|
{{ item.name }}
|
||||||
</view>
|
</view>
|
||||||
<view class="panelfiveitemtow">
|
<view class="panelfiveitemtow">
|
||||||
本店回头客第4名
|
本店回头客第4名
|
||||||
@@ -66,7 +66,7 @@
|
|||||||
<view class="left">
|
<view class="left">
|
||||||
<scroll-view :scroll-y="!isFixed" :style="{ 'height':scrollHeight + 'px' }"
|
<scroll-view :scroll-y="!isFixed" :style="{ 'height':scrollHeight + 'px' }"
|
||||||
:scroll-into-view="leftIntoView" :scroll-with-animation="false">
|
:scroll-into-view="leftIntoView" :scroll-with-animation="false">
|
||||||
<view class="item" v-for="(item,index) in shopList.productInfo" :key="index"
|
<view class="item" v-for="(item,index) in shopProductList.productInfo" :key="index"
|
||||||
:class="{ 'active':index==leftIndex }" :id="'left-'+index" :data-index="index"
|
:class="{ 'active':index==leftIndex }" :id="'left-'+index" :data-index="index"
|
||||||
@tap="leftTap($event,index)">{{item.name}}</view>
|
@tap="leftTap($event,index)">{{item.name}}</view>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
@@ -74,7 +74,7 @@
|
|||||||
<view class="main">
|
<view class="main">
|
||||||
<scroll-view :scroll-y="!isFixed" :scroll-top="scrollHeight" :style="{ 'height':scrollHeight + 'px' }" @scroll="mainScroll"
|
<scroll-view :scroll-y="!isFixed" :scroll-top="scrollHeight" :style="{ 'height':scrollHeight + 'px' }" @scroll="mainScroll"
|
||||||
:scroll-into-view="scrollInto" :scroll-with-animation="true">
|
:scroll-into-view="scrollInto" :scroll-with-animation="true">
|
||||||
<view class="item main-item" v-for="(item,index) in shopList.productInfo" :key="index" :id="'item-'+index">
|
<view class="item main-item" v-for="(item,index) in shopProductList.productInfo" :key="index" :id="'item-'+index">
|
||||||
<view class="title">
|
<view class="title">
|
||||||
<view>{{item.name}}</view>
|
<view>{{item.name}}</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -186,7 +186,7 @@
|
|||||||
<view class="shop-info-wrap">
|
<view class="shop-info-wrap">
|
||||||
<view class="info-wrap flex-between">
|
<view class="info-wrap flex-between">
|
||||||
<view></view>
|
<view></view>
|
||||||
<text class="shopName">{{ shopList.storeInfo.shopName }}</text>
|
<text class="shopName">{{ shopInfo.storeInfo.shopName }}</text>
|
||||||
<view class="close" @click="showShopInfo = false">
|
<view class="close" @click="showShopInfo = false">
|
||||||
<u-icon name="close" color="#999999" size="28"></u-icon>
|
<u-icon name="close" color="#999999" size="28"></u-icon>
|
||||||
</view>
|
</view>
|
||||||
@@ -195,22 +195,22 @@
|
|||||||
<view class="row" style="margin-bottom: 20rpx;">
|
<view class="row" style="margin-bottom: 20rpx;">
|
||||||
<view class="col">
|
<view class="col">
|
||||||
<text class="l">营业时间：</text>
|
<text class="l">营业时间：</text>
|
||||||
<text class="t">{{ shopList.storeInfo.businessStartDay +'至'+ shopList.storeInfo.businessEndDay +' '+ shopList.storeInfo.businessTime }}</text>
|
<text class="t">{{ shopInfo.storeInfo.businessStartDay +'至'+ shopInfo.storeInfo.businessEndDay +' '+ shopInfo.storeInfo.businessTime }}</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="col">
|
<view class="col">
|
||||||
<text class="l">商家地址：</text>
|
<text class="l">商家地址：</text>
|
||||||
<text class="t">{{ shopList.storeInfo.address }}</text>
|
<text class="t">{{ shopInfo.storeInfo.address }}</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="col" @click="makePhoneCall(shopList.storeInfo.phone)">
|
<view class="col" @click="makePhoneCall(shopInfo.storeInfo.phone)">
|
||||||
<text class="l">商家电话：</text>
|
<text class="l">商家电话：</text>
|
||||||
<text class="t">{{ shopList.storeInfo.phone }}</text>
|
<text class="t">{{ shopInfo.storeInfo.phone }}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="info-wrap-title">商家公告</view>
|
<view class="info-wrap-title">商家公告</view>
|
||||||
<view class="row">
|
<view class="row">
|
||||||
<view class="col">
|
<view class="col">
|
||||||
<text class="l">公告：</text>
|
<text class="l">公告：</text>
|
||||||
<text class="t">{{ shopList.storeInfo.detail }}</text>
|
<text class="t">{{ shopInfo.storeInfo.detail }}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
@@ -298,13 +298,13 @@
|
|||||||
heightnav: '' ,//点击获取的距离
|
heightnav: '' ,//点击获取的距离
|
||||||
showShopInfo: false, //店铺信息弹窗是否显示
|
showShopInfo: false, //店铺信息弹窗是否显示
|
||||||
showShopsku: false, //多规格弹窗是否显示
|
showShopsku: false, //多规格弹窗是否显示
|
||||||
|
skuId: null, // 多规格ID
|
||||||
cartLists: {}, //购物车
|
cartLists: {}, //购物车
|
||||||
cartLists_count: 0,
|
cartLists_count: 0,
|
||||||
shopList: {
|
shopInfo: {}, //店铺信息
|
||||||
storeInfo:{
|
shopProductList: {
|
||||||
shopName: "",
|
|
||||||
}
|
}, //商品信息
|
||||||
}, //店铺信息
|
|
||||||
specifications: {
|
specifications: {
|
||||||
|
|
||||||
}, // 规格信息
|
}, // 规格信息
|
||||||
@@ -350,7 +350,6 @@
|
|||||||
this.scrollTopSize = res.top; //元素距离顶部的距离
|
this.scrollTopSize = res.top; //元素距离顶部的距离
|
||||||
this.scrollHeight = this.scrollHeight - this.heightnav
|
this.scrollHeight = this.scrollHeight - this.heightnav
|
||||||
// console.log(this.scrollHeight, 111)
|
// console.log(this.scrollHeight, 111)
|
||||||
this.getListData();
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@@ -376,6 +375,7 @@
|
|||||||
this.fixedtrue = true
|
this.fixedtrue = true
|
||||||
},
|
},
|
||||||
onShow() {
|
onShow() {
|
||||||
|
console.log(uni.cache.get('token'))
|
||||||
if (!uni.cache.get('token')) {
|
if (!uni.cache.get('token')) {
|
||||||
uni.login({
|
uni.login({
|
||||||
provider: 'weixin',
|
provider: 'weixin',
|
||||||
@@ -395,7 +395,7 @@
|
|||||||
.miniAppOpenId)
|
.miniAppOpenId)
|
||||||
uni.cache.set('userInfo', res.data.userInfo);
|
uni.cache.set('userInfo', res.data.userInfo);
|
||||||
uni.$on('message', this.getMessage)
|
uni.$on('message', this.getMessage)
|
||||||
this.productqueryShopIdByTableCode() //获取shop User id
|
this.productqueryShop();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
fail: (err) => {}
|
fail: (err) => {}
|
||||||
@@ -405,11 +405,91 @@
|
|||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
uni.$on('message', this.getMessage)
|
uni.$on('message', this.getMessage)
|
||||||
this.productqueryShopIdByTableCode() //获取shop User id
|
this.productqueryShop();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* socket初始化
|
||||||
|
*/
|
||||||
|
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",
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 通过桌码获取店铺信息
|
||||||
|
*/
|
||||||
|
async productqueryShop () {
|
||||||
|
let res = await this.api.productqueryShop({
|
||||||
|
code: uni.cache.get('tableCode'),
|
||||||
|
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返回
|
||||||
|
this.shopInfo = res.data;
|
||||||
|
this.productqueryProduct() //list 数据
|
||||||
|
} else {
|
||||||
|
setTimeout(() => {
|
||||||
|
uni.pro.switchTab('index/index')
|
||||||
|
}, 1000)
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取商品数据
|
||||||
|
*/
|
||||||
|
async productqueryProduct() {
|
||||||
|
let res = await this.api.productqueryProduct({
|
||||||
|
// code: uni.cache.get('tableCode'),
|
||||||
|
"shopId": uni.cache.get('shopUser'),
|
||||||
|
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
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
console.log(this.shopProductList)
|
||||||
|
// this.$nextTick(() => {
|
||||||
|
// this.countTitleTopNum();
|
||||||
|
// });
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 商品数量增加/减少
|
* 商品数量增加/减少
|
||||||
* @param {Object} item
|
* @param {Object} item
|
||||||
@@ -422,7 +502,8 @@
|
|||||||
if (b == '单规格') { //没有规格为空
|
if (b == '单规格') { //没有规格为空
|
||||||
this.skuidname = []
|
this.skuidname = []
|
||||||
}
|
}
|
||||||
this.hodgepodge(item, 1, a) //获取skuid /1添加购物车
|
let cartNumber = a == '+' ? item.cartNumber+1 : item.cartNumber-1;
|
||||||
|
this.hodgepodge(item, 1, a, cartNumber) //获取skuid /1添加购物车
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -449,6 +530,16 @@
|
|||||||
*/
|
*/
|
||||||
addShopping ( item, index, index1, a, b ) {
|
addShopping ( item, index, index1, a, b ) {
|
||||||
console.log(item)
|
console.log(item)
|
||||||
|
let params = {
|
||||||
|
"skuId": this.skuId,
|
||||||
|
"num": item.cartNumber + this.amountcartNumber, //数量
|
||||||
|
"type": a == '+' ? 1 : 0,
|
||||||
|
"productId": item.id, //商品id
|
||||||
|
"shopId": uni.cache.get('shopUser'),
|
||||||
|
"userId": uni.cache.get('userInfo').id,
|
||||||
|
"tableId": uni.cache.get('tableCode'),
|
||||||
|
}
|
||||||
|
this.addCart(params)
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -476,6 +567,58 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 添加到购物车
|
||||||
|
*/
|
||||||
|
async addCart ( data ) {
|
||||||
|
let res = await this.api.cartAdd(data)
|
||||||
|
if ( res.code == 0) {
|
||||||
|
this.showShopsku = false;
|
||||||
|
this.$set(this, 'amountcartNumber', 1)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 清空购物车
|
||||||
|
*/
|
||||||
|
async cartclear() {
|
||||||
|
let res = await this.api.cleanCart({
|
||||||
|
"shopId": uni.cache.get('shopUser'),
|
||||||
|
"tableId": uni.cache.get('tableCode'),
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 商品数量\购物车数量处理
|
||||||
|
*/
|
||||||
|
setNumber () {
|
||||||
|
// 处理购物车相同id的情况下 数量相加
|
||||||
|
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;
|
||||||
|
}, []);
|
||||||
|
// 购物车总数据与列表页面互通
|
||||||
|
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
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 结算直接生成订单
|
* 结算直接生成订单
|
||||||
*/
|
*/
|
||||||
@@ -488,7 +631,7 @@
|
|||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: '/pages/order/confirm_order?storeInfo=' + JSON.stringify(this.shopList.storeInfo)
|
url: '/pages/order/confirm_order?storeInfo=' + JSON.stringify(this.shopInfo.storeInfo)
|
||||||
});
|
});
|
||||||
|
|
||||||
// let data = {
|
// let data = {
|
||||||
@@ -513,41 +656,6 @@
|
|||||||
this.showShopInfo = true;
|
this.showShopInfo = true;
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
|
||||||
* 单独获取他的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)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 获取店铺数据
|
|
||||||
*/
|
|
||||||
async productqueryProduct() {
|
|
||||||
let res = await this.api.productqueryProduct({
|
|
||||||
code: uni.cache.get('tableCode'),
|
|
||||||
productGroupId: ''
|
|
||||||
})
|
|
||||||
if (res.code == 0) {
|
|
||||||
this.shopList = res.data;
|
|
||||||
console.log(this.shopList)
|
|
||||||
// this.$nextTick(() => {
|
|
||||||
// this.countTitleTopNum();
|
|
||||||
// });
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 多规格选择
|
* 多规格选择
|
||||||
@@ -591,7 +699,8 @@
|
|||||||
this.skuidname.splice(index, 1, e) //替换skuidname的数据
|
this.skuidname.splice(index, 1, e) //替换skuidname的数据
|
||||||
this.hodgepodge(item, 2)
|
this.hodgepodge(item, 2)
|
||||||
},
|
},
|
||||||
async hodgepodge(item, a, c) { //此接口去获取商品id ！！！赋值库存 数量 价格等
|
|
||||||
|
async hodgepodge(item, a, c, num) { //此接口去获取商品id ！！！赋值库存 数量 价格等
|
||||||
try {
|
try {
|
||||||
let res = await this.api.productqueryProductSku({
|
let res = await this.api.productqueryProductSku({
|
||||||
shopId: uni.cache.get('shopUser'),
|
shopId: uni.cache.get('shopUser'),
|
||||||
@@ -609,45 +718,34 @@
|
|||||||
this.salePrice = res.data.salePrice // 价格
|
this.salePrice = res.data.salePrice // 价格
|
||||||
let data = null;
|
let data = null;
|
||||||
if (a == 1) { //1添加购物车 2是websocket返回这个商品的价格(应为不同的多规格商品返回不同的价格)
|
if (a == 1) { //1添加购物车 2是websocket返回这个商品的价格(应为不同的多规格商品返回不同的价格)
|
||||||
data = { //定义socket数据传参
|
let params = {
|
||||||
"nickName": this.userInfo.nickName,
|
|
||||||
"barrageavatar": this.userInfo.headImg,
|
|
||||||
'name': item.name,
|
|
||||||
"skuId": res.data.id,
|
"skuId": res.data.id,
|
||||||
"num": c == '-' ? -1 : 1, //数量
|
"num": num, //数量
|
||||||
"type": "addcart", //“addcart:添加购物车，create0rder:生成订单，clearCart:庆康购物车”，
|
"type": c == '+' ? 1 : 0,
|
||||||
"productId": item.id, //商品id
|
"productId": item.id, //商品id
|
||||||
"shopId": uni.cache.get('shopUser'),
|
"shopId": uni.cache.get('shopUser'),
|
||||||
"userId": uni.cache.get('userInfo').id
|
"userId": uni.cache.get('userInfo').id,
|
||||||
};
|
"tableId": uni.cache.get('tableCode'),
|
||||||
|
}
|
||||||
|
this.addCart(params);
|
||||||
} else {
|
} else {
|
||||||
data = { //查询这个商品的价格
|
this.skuId = res.data.id;
|
||||||
"name": item.name,
|
|
||||||
"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
|
|
||||||
};
|
|
||||||
this.$set(this, 'amountcartNumber', 1)
|
|
||||||
this.showShopsku = true //打开弹框
|
this.showShopsku = true //打开弹框
|
||||||
}
|
}
|
||||||
this.datasocket = data;
|
this.$set(this, 'amountcartNumber', 1)
|
||||||
uni.$u.debounce(this.socketSendMsg(data), 500)
|
// this.datasocket = data;
|
||||||
|
// uni.$u.debounce(this.socketSendMsg(data), 500)
|
||||||
}
|
}
|
||||||
} catch (e) {}
|
} catch (e) {}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 获取消息
|
* 获取消息
|
||||||
* @param {Object} msg
|
* @param {Object} msg
|
||||||
*/
|
*/
|
||||||
getMessage(msg) { //wss 回显数据
|
getMessage(msg) { //wss 回显数据
|
||||||
console.log(msg)
|
console.log(msg.type)
|
||||||
if (msg == 1) { // 网络在连接
|
if (msg == 1) { // 网络在连接
|
||||||
this.fixedtrue = true
|
this.fixedtrue = true
|
||||||
return false
|
return false
|
||||||
@@ -672,58 +770,26 @@
|
|||||||
switch (msg.type) {
|
switch (msg.type) {
|
||||||
case 'sku': // sku 数量 查询这个商品的价格和数量
|
case 'sku': // sku 数量 查询这个商品的价格和数量
|
||||||
// this.$set(this, 'amountcartNumber', msg.amount)
|
// this.$set(this, 'amountcartNumber', msg.amount)
|
||||||
this.productqueryProduct() //list 数据
|
// 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;
|
break;
|
||||||
case 'order':
|
case 'order':
|
||||||
this.skuidname = []
|
this.skuidname = []
|
||||||
this.showCart = false
|
this.showCart = false
|
||||||
this.cartLists = msg
|
this.cartLists = msg
|
||||||
this.productqueryProduct() //list 数据
|
// this.productqueryProduct() //list 数据
|
||||||
break;
|
break;
|
||||||
case 'addCart': //初始化add
|
case 'addCart': //初始化add
|
||||||
this.cartLists = msg
|
this.cartLists = msg
|
||||||
this.productqueryProduct() //list 数据
|
|
||||||
break;
|
break;
|
||||||
case 'addcart':
|
case 'addcart':
|
||||||
this.cartLists = msg
|
this.cartLists = msg
|
||||||
console.log(msg, 1111)
|
|
||||||
this.productqueryProduct() //list 数据
|
|
||||||
try {
|
try {
|
||||||
if (msg.data.length != 0) {
|
//购物车为空的情况
|
||||||
let nums = 0
|
if ( msg.data.length == 0) {
|
||||||
msg.data.forEach((item, index, arr) => { //初始化skuidname的数据 选择第一个
|
this.showCart = false;
|
||||||
if (item.skuId == this.skuidsearch) {
|
|
||||||
nums = item.number
|
|
||||||
}
|
|
||||||
})
|
|
||||||
// this.$set(this, 'amountcartNumber', nums)
|
|
||||||
} else {
|
|
||||||
this.$set(this, 'amountcartNumber', 1)
|
|
||||||
}
|
}
|
||||||
} catch (e) {
|
this.setNumber()
|
||||||
//TODO handle the exception
|
} catch (e) {}
|
||||||
}
|
|
||||||
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;
|
break;
|
||||||
}
|
}
|
||||||
this.cartListsdatashow = this.cartLists.data.length == 0 ? false : true
|
this.cartListsdatashow = this.cartLists.data.length == 0 ? false : true
|
||||||
@@ -740,23 +806,16 @@
|
|||||||
//TODO handle the exception
|
//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) {
|
socketSendMsg(data) {
|
||||||
if (this.socketTicket) {
|
if (this.socketTicket) {
|
||||||
console.log(data)
|
|
||||||
this.socketTicket.send(data);
|
this.socketTicket.send(data);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// 导航栏高度 去计算列表页的高度
|
// 导航栏高度 去计算列表页的高度
|
||||||
Topdistance(e) {
|
Topdistance(e) {
|
||||||
|
|||||||
@@ -1,323 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view class="container">
|
|
||||||
<!-- 顶部面板 -->
|
|
||||||
<view class="top--panel">
|
|
||||||
<!-- 顶部面板，可添加所需要放在页面顶部的内容代码。比如banner图 -->
|
|
||||||
<view style="background-color: #ffaa00;text-align: center;font-size: 28rpx;padding: 10px 0;color: #fff;">
|
|
||||||
<view>这里顶部内容占位区域，不需要则删除</view>
|
|
||||||
<view>可添加需放在页面顶部的内容，比如banner图</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<!-- 滚动区域 -->
|
|
||||||
<view class="scroll-panel" id="scroll-panel">
|
|
||||||
<view class="list-box">
|
|
||||||
<view class="left">
|
|
||||||
<scroll-view scroll-y="true"
|
|
||||||
:style="{ 'height':scrollHeight }"
|
|
||||||
:scroll-into-view="leftIntoView"
|
|
||||||
:scroll-with-animation="true"
|
|
||||||
>
|
|
||||||
<view class="item"
|
|
||||||
v-for="(item,index) in leftArray"
|
|
||||||
:key="index"
|
|
||||||
:class="{ 'active':index==leftIndex }"
|
|
||||||
:id="'left-'+index"
|
|
||||||
:data-index="index"
|
|
||||||
@tap="leftTap"
|
|
||||||
>{{item}}</view>
|
|
||||||
</scroll-view>
|
|
||||||
</view>
|
|
||||||
<view class="main">
|
|
||||||
<swiper class="swiper" :style="{ 'height':scrollHeight }"
|
|
||||||
:current="leftIndex" @change="swiperChange"
|
|
||||||
:vertical="true" duration="200" :disable-touch="true">
|
|
||||||
<swiper-item v-for="(item,index) in mainArray" :key="index">
|
|
||||||
<scroll-view scroll-y="true" :style="{ 'height':scrollHeight }">
|
|
||||||
<view class="item">
|
|
||||||
<view class="title">
|
|
||||||
<view>{{item.title}}</view>
|
|
||||||
</view>
|
|
||||||
<view class="goods" v-for="(item2,index2) in item.list" :key="index2">
|
|
||||||
<image src="/static/logo.png" mode=""></image>
|
|
||||||
<view>
|
|
||||||
<view>第{{index2+1}}个商品标题</view>
|
|
||||||
<view class="describe">第{{index2+1}}个商品的描述内容</view>
|
|
||||||
<view class="money">第{{index2+1}}个商品的价格</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</scroll-view>
|
|
||||||
</swiper-item>
|
|
||||||
</swiper>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<!-- 底部面板 -->
|
|
||||||
<view class="bottom-panel">
|
|
||||||
<!-- 底部面板，可添加所需要放在页面底部的内容代码。比如购物车栏目 -->
|
|
||||||
<view style="background-color: #ffaa00;text-align: center;font-size: 28rpx;padding: 10px 0;color: #fff;">
|
|
||||||
<view>这里底部内容占位区域，不需要则删除</view>
|
|
||||||
<view>可添加需放在页面底部的内容，比如购物车栏目</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
scrollHeight:'400px',
|
|
||||||
leftArray:[],
|
|
||||||
mainArray:[],
|
|
||||||
leftIndex:0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed:{
|
|
||||||
/* 计算左侧滚动位置定位 */
|
|
||||||
leftIntoView(){
|
|
||||||
return `left-${this.leftIndex > 5 ? (this.leftIndex-5):0}`;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onReady(){
|
|
||||||
/* 在非H5平台，nextTick回调后有概率获取到错误的元素高度，则添加200ms的延迟来减少BUG的产生 */
|
|
||||||
setTimeout(()=>{
|
|
||||||
/* 等待滚动区域初始化完成 */
|
|
||||||
this.initScrollView().then(()=>{
|
|
||||||
/* 获取列表数据，你的代码从此处开始 */
|
|
||||||
this.getListData();
|
|
||||||
})
|
|
||||||
},100);
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
/* 初始化滚动区域 */
|
|
||||||
initScrollView(){
|
|
||||||
return new Promise((resolve, reject)=>{
|
|
||||||
let view = uni.createSelectorQuery().select('#scroll-panel');
|
|
||||||
view.boundingClientRect(res => {
|
|
||||||
this.scrollHeight = `${res.height}px`;
|
|
||||||
setTimeout(()=>{
|
|
||||||
resolve();
|
|
||||||
},100);
|
|
||||||
}).exec();
|
|
||||||
});
|
|
||||||
},
|
|
||||||
/* 获取列表数据 */
|
|
||||||
getListData(){
|
|
||||||
// Promise 为 ES6 新增的API ，有疑问的请自行学习该方法的使用。
|
|
||||||
new Promise((resolve,reject)=>{
|
|
||||||
/* 因无真实数据，当前方法模拟数据。正式项目中将此处替换为 数据请求即可 */
|
|
||||||
uni.showLoading();
|
|
||||||
setTimeout(()=>{
|
|
||||||
/* 因无真实数据，当前方法模拟数据。正式项目中将此处替换为 数据请求即可 */
|
|
||||||
uni.showLoading();
|
|
||||||
|
|
||||||
// 模拟数据
|
|
||||||
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 < 20 ? 20 : 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);
|
|
||||||
},1000);
|
|
||||||
}).then((res)=>{
|
|
||||||
console.log('-----------请求接口返回数据示例-------------');
|
|
||||||
console.log(res);
|
|
||||||
|
|
||||||
uni.hideLoading();
|
|
||||||
this.leftArray=res.left;
|
|
||||||
this.mainArray=res.main;
|
|
||||||
});
|
|
||||||
},
|
|
||||||
/* 左侧导航点击 */
|
|
||||||
leftTap(e){
|
|
||||||
let index=e.currentTarget.dataset.index;
|
|
||||||
this.leftIndex=Number(index);
|
|
||||||
},
|
|
||||||
/* 轮播图切换 */
|
|
||||||
swiperChange(e){
|
|
||||||
let index=e.detail.current;
|
|
||||||
this.leftIndex=Number(index);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
page{
|
|
||||||
height: 100vh;
|
|
||||||
}
|
|
||||||
.container{
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
/* 容器 */
|
|
||||||
.container{
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: flex-start;
|
|
||||||
align-content: flex-start;
|
|
||||||
|
|
||||||
&>view{
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.scroll-panel{
|
|
||||||
flex-grow: 1;
|
|
||||||
height: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bottom-panel{
|
|
||||||
padding-bottom: 0;
|
|
||||||
padding-bottom: constant(safe-area-inset-bottom);
|
|
||||||
padding-bottom: env(safe-area-inset-bottom);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.list-box{
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: flex-start;
|
|
||||||
align-content: flex-start;
|
|
||||||
font-size: 28rpx;
|
|
||||||
|
|
||||||
.left{
|
|
||||||
width: 200rpx;
|
|
||||||
background-color: #f6f6f6;
|
|
||||||
line-height: normal;
|
|
||||||
box-sizing: border-box;
|
|
||||||
font-size: 32rpx;
|
|
||||||
|
|
||||||
.item{
|
|
||||||
padding: 30rpx;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
|
|
||||||
& + .item{
|
|
||||||
margin-top: 1px;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: '';
|
|
||||||
display: block;
|
|
||||||
height: 0;
|
|
||||||
border-top: #d6d6d6 solid 1px;
|
|
||||||
width: 620upx;
|
|
||||||
position: absolute;
|
|
||||||
top: -1px;
|
|
||||||
right: 0;
|
|
||||||
transform:scaleY(0.5); /* 1px像素 */
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active{
|
|
||||||
color: #42b983;
|
|
||||||
background-color: #fff;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&::before{
|
|
||||||
content: '';
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
border-left: #42b983 solid 4px;
|
|
||||||
height: 100%;
|
|
||||||
width: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fill-last{
|
|
||||||
height: 0;
|
|
||||||
width: 100%;
|
|
||||||
background: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.main{
|
|
||||||
background-color: #fff;
|
|
||||||
padding-left: 20rpx;
|
|
||||||
width: 0;
|
|
||||||
flex-grow: 1;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.title{
|
|
||||||
line-height: normal;
|
|
||||||
padding: 30rpx 0;
|
|
||||||
font-size: 24rpx;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #666;
|
|
||||||
background-color: #fff;
|
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
z-index: 19;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item{
|
|
||||||
padding-bottom: 16rpx;
|
|
||||||
border-bottom: #eee solid 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.goods{
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: center;
|
|
||||||
align-content: center;
|
|
||||||
|
|
||||||
& + .goods{
|
|
||||||
margin-top: 16rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
& > image{
|
|
||||||
width: 120rpx;
|
|
||||||
height: 120rpx;
|
|
||||||
margin-right: 16rpx;
|
|
||||||
margin-left: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.describe{
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.money{
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #efba21;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -307,7 +307,7 @@
|
|||||||
this.tableCode = this.getQueryString(decodeURIComponent(e.q), 'code')
|
this.tableCode = this.getQueryString(decodeURIComponent(e.q), 'code')
|
||||||
uni.cache.set('tableCode', this.tableCode)
|
uni.cache.set('tableCode', this.tableCode)
|
||||||
}
|
}
|
||||||
uni.cache.set('types', 'types');
|
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.countTitleTopNum(); //导航栏
|
this.countTitleTopNum(); //导航栏
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,765 +0,0 @@
|
|||||||
<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">
|
|
||||||
<view class="signatureDish_title"></view>
|
|
||||||
<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:添加购物车，create0rder:生成订单，clearCart:清空购物车”，
|
|
||||||
"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:添加购物车，create0rder:生成订单，clearCart:庆康购物车”，
|
|
||||||
"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:添加购物车，create0rder:生成订单，clearCart:庆康购物车”，
|
|
||||||
"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:添加购物车，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)
|
|
||||||
},
|
|
||||||
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
|
|
||||||
};
|
|
||||||
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 20rpx;
|
|
||||||
box-sizing: border-box;
|
|
||||||
.shopTitle{
|
|
||||||
width: 382rpx;
|
|
||||||
margin: 0 auto 30rpx auto;
|
|
||||||
}
|
|
||||||
.shopName{
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 32rpx;
|
|
||||||
color: #333333;
|
|
||||||
margin-bottom: 16rpx;
|
|
||||||
}
|
|
||||||
.shopDistance{
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #999999;
|
|
||||||
}
|
|
||||||
.shopDetail{
|
|
||||||
margin-top: 32rpx;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #999999;
|
|
||||||
.shopTime{
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #999999;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.signatureDish{
|
|
||||||
width: 100%;
|
|
||||||
padding: 0 20rpx;
|
|
||||||
box-sizing: border-box;
|
|
||||||
.signatureDish_list{
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
.signatureDish_item{
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
margin-right: 30rpx;
|
|
||||||
.signatureDish_img{
|
|
||||||
width: 340rpx;
|
|
||||||
height: 204rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
Reference in New Issue
Block a user