优化和商城的关联

This commit is contained in:
Your Name 2022-12-07 22:37:12 +08:00
parent bb1615c42b
commit d4cd22da1a
4 changed files with 172 additions and 6 deletions

View File

@ -139,12 +139,17 @@
name: '球场预约',
src: this.imgUrl + '/h5/images/serve/order4.png',
href: '/pages/appointment/appointment'
},
{
name: '设备',
src: this.imgUrl + '/h5/images/serve/order4.png',
href: '/pages/machine/machine?machineId=102022110791780032&communityId=2022110264250009'
},
{
name: '就餐',
src: this.imgUrl + '/h5/images/serve/order4.png',
href: '/pages/reserve/reserveDining'
},
// {
// name: '',
// src: this.imgUrl + '/h5/images/serve/order4.png',
// href: '/pages/machine/machine?machineId=102022110791780032&communityId=2022110264250009'
// },
];
}
}

View File

@ -55,7 +55,7 @@ export function navigateMP(_url) {
} else {
_url = _url + "?hcCommunityId=" + getMallCommunityId();
}
_url = _url + "&mallFrom=HC_APP"
_url = _url + "&mallFrom=HC_MINI"
uni.navigateToMiniProgram({
appId: conf.mallMinAppId,

View File

@ -655,6 +655,14 @@
}
}
,{
"path" : "pages/reserve/reserveDining",
"style" :
{
"navigationBarTitleText": "预约就餐",
"enablePullDownRefresh": false
}
}
],
"tabBar": {
"color": "#272636",

View File

@ -0,0 +1,153 @@
<template>
<view>
<view class="VerticalBox">
<scroll-view class="VerticalNav nav" scroll-y scroll-with-animation :scroll-top="verticalNavTop" style="height:calc(100vh - 375upx)">
<view class="cu-item" :class="index==tabCur?'text-green cur':''" v-for="(item,index) in categoryList" :key="index" @tap="TabSelect"
:data-id="index">
{{item.categoryName}}
</view>
</scroll-view>
<scroll-view class="VerticalMain" scroll-y scroll-with-animation style="height:calc(100vh - 375upx)"
:scroll-into-view="'main-'+mainCur" @scroll="VerticalMain">
<view class=" padding-lr-sm" v-for="(item,index) in categoryList" :key="index" :id="'main-'+index">
<view class="cu-bar solid-bottom bg-white">
<view class="action">
<text class="cuIcon-title text-green"></text>{{item.categoryName}}</view>
</view>
<view class="cu-list menu-avatar">
<view class="cu-item">
<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"></view>
<view class="content">
<view class="text-grey">凯尔</view>
<view class="text-gray text-sm flex">
<text class="text-cut">
<text class="cuIcon-infofill text-red margin-right-xs"></text>
我已天理为凭踏入这片荒芜不再受凡人的枷锁遏制我已天理为凭踏入这片荒芜不再受凡人的枷锁遏制
</text> </view>
</view>
<view class="action">
<view class="text-grey text-xs">22:20</view>
<view class="cu-tag round bg-grey sm">5</view>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list: [],
tabCur: 0,
mainCur: 0,
verticalNavTop: 0,
load: true
};
},
onLoad() {
uni.showLoading({
title: '加载中...',
mask: true
});
let list = [{}];
for (let i = 0; i < 26; i++) {
list[i] = {};
list[i].catalogName = String.fromCharCode(65 + i);
list[i].id = i;
}
this.list = list;
this.listCur = list[0];
},
onReady() {
uni.hideLoading()
},
methods: {
TabSelect(e) {
this.tabCur = e.currentTarget.dataset.id;
this.mainCur = e.currentTarget.dataset.id;
this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50
},
VerticalMain(e) {
// #ifdef MP-ALIPAY
return false //
// #endif
let that = this;
let tabHeight = 0;
if (this.load) {
for (let i = 0; i < this.list.length; i++) {
let view = uni.createSelectorQuery().select("#main-" + this.list[i].id);
view.fields({
size: true
}, data => {
this.list[i].top = tabHeight;
tabHeight = tabHeight + data.height;
this.list[i].bottom = tabHeight;
}).exec();
}
this.load = false
}
let scrollTop = e.detail.scrollTop + 10;
for (let i = 0; i < this.list.length; i++) {
if (scrollTop > this.list[i].top && scrollTop < this.list[i].bottom) {
this.verticalNavTop = (this.list[i].id - 1) * 50
this.tabCur = this.list[i].id
return false
}
}
}
},
}
</script>
<style lang="scss" scoped>
.fixed {
position: fixed;
z-index: 99;
}
.VerticalNav.nav {
width: 200upx;
white-space: initial;
}
.VerticalNav.nav .cu-item {
width: 100%;
text-align: center;
background-color: #fff;
margin: 0;
border: none;
height: 50px;
position: relative;
}
.VerticalNav.nav .cu-item.cur {
background-color: #f1f1f1;
}
.VerticalNav.nav .cu-item.cur::after {
content: "";
width: 8upx;
height: 30upx;
border-radius: 10upx 0 0 10upx;
position: absolute;
background-color: currentColor;
top: 0;
right: 0upx;
bottom: 0;
margin: auto;
}
.VerticalBox {
display: flex;
}
.VerticalMain {
background-color: #f1f1f1;
flex: 1;
}
</style>