czg_team
/
cashier_weapp
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

列表

This commit is contained in:
魏啾 2024-07-26 11:16:13 +08:00
parent 9ee4ff1f30
commit 62f0e6f25b
4 changed files with 272 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
pages/chooseasong/index.vue
View File

@ -1,8 +1,7 @@
<template>
<view class="content">
<!-- 占位符导航栏 -->
<navseat :opacity='false' :title='"歌曲列表"' :titleshow='true' :heightshow='true' :namecolor='"#fff"'
:iconshow='false'></navseat>
<navseat :opacity='false' :title='"歌曲列表"' :titleshow='true' :heightshow='true' :namecolor='"#fff"' iconcolor='#fff'></navseat>
<view class="search flex-between">
<view class="searchinput flex-between">
<input type="text" class="searchinput_input" placeholder-style="color:#FFFFFF" @input="onInput"
@ -140,14 +139,12 @@
if (e.q) {
this.shopId = this.getQueryString(decodeURIComponent(e.q), 'shopId')
}
uni.hideHomeButton();
},
computed: {},
mounted() {},
onShow() {
if (!uni.cache.get('miniAppOpenId')) {
if (!uni.cache.get('miniAppOpenId')) {//单独登录
uni.login({
provider: 'weixin',
success: async (data) => {

19
pages/index/indexs.vue
View File

@ -56,16 +56,17 @@
methods: {
scanCodehandle(i) {
if (i == 0) {
uni.scanCode({
success: (res) => {
let tableCode = this.getQueryString(decodeURIComponent(res.result), 'code')
uni.cache.set('tableCode', tableCode)
if (tableCode) {
uni.pro.navigateTo('order_food/order_food')
}
uni.pro.navigateTo('order_food/goodsList_scroll')
// uni.scanCode({
// success: (res) => {
// let tableCode = this.getQueryString(decodeURIComponent(res.result), 'code')
// uni.cache.set('tableCode', tableCode)
// if (tableCode) {
// uni.pro.navigateTo('order_food/order_food')
// }
}
})
// }
// })
} else {
if (this.usershopUserinfo.isVip == 0) {
// 跳转到开通页面

300
pages/order_food/goodsList_scroll.vue
View File

@ -1,11 +1,58 @@
<template>
<view class="container">
<!-- 占位符导航栏 -->
<!-- 顶部面板 -->
<view class="top--panel">
<navseat :opacity='opacity' :titleshow='true' :heightshow='opacity' @Topdistance='Topdistance'></navseat>
<!-- 顶部面板，可添加所需要放在页面顶部的内容代码。比如banner图 -->
<view style="background-color: #ffaa00;text-align: center;font-size: 28rpx;padding: 10px 0;color: #fff;">
<view>这里顶部内容占位区域，不需要则删除</view>
<view>可添加需放在页面顶部的内容，比如banner图</view>
<image class="panelimgbackground"
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/orderfood/shuangyu1.png" mode="aspectFill">
</image>
<view class="panelone">
后海&双屿
</view>
<view class="paneltow">
距离您12.44KM
</view>
<view class="panelthere flex-between">
<view class="paneltheretext">
营业时间：8:30-24:00
</view>
<view class="flex-start">
<view style="margin-right: 14rpx;">查看</view>
<u-icon name="arrow-down" color="#999999" size="28"></u-icon>
</view>
</view>
<view class="panelfour">
本店招牌菜
</view>
<view class="panelfive flex-between">
<view class="panelfiveitem" v-for="(item,index) in 2" :key="index">
<image class="panelfiveitemimage" src="@/static/avatar.png" mode="aspectFill"></image>
<view class="panelfiveitemone">
厚乳酪冰镇拿铁
</view>
<view class="panelfiveitemtow">
本店回头客第4名
</view>
<view class="panelfiveitemthere flex-start">
<text>招牌</text>
</view>
<view class="panelfiveitemfour">
桂香馥郁，沉入新鲜甘甜的椰..
</view>
<view class="panelfiveitemfive">
月售169
</view>
<view class="panelfiveitemsex flex-between">
<view class="panelfiveitemsex_oen">
<text>¥</text>
<text>88/份</text>
<text>「5份起点」</text>
</view>
<u-icon name="plus-circle-fill" color="#E9AB7A" size="40"></u-icon>
</view>
</view>
</view>
</view>
<!-- 滚动区域 -->
@ -50,12 +97,16 @@
</view>
</template>
<script>
import navseat from '@/components/navseat.vue'
export default {
components: {
navseat
},
data() {
return {
scrollHeight: 400,
opacity: false, //是否显示
scrollHeight: 1000,
scrollTopSize: 0, //距离顶部的高度
fillHeight: 0, // 填充高度，用于最后一项低于滚动区域时使用
leftArray: [],
@ -63,12 +114,23 @@
topArr: [],
leftIndex: 0,
scrollInto: '',
isFixed: true
isFixed: true,
heightnav: '' //点击获取的距离
}
},
onPageScroll(e) {
console.log(e)
if (e.scrollTop >= this.scrollTopSize) { //控制大图层
console.log(e.scrollTop, this.scrollTopSize)
try {
if (e.scrollTop <= 44) { //搜索导航栏显示影藏
this.opacity = false
} else {
this.opacity = true
}
} catch (e) {
//TODO handle the exception
}
if (e.scrollTop >= this.scrollTopSize-10) { //控制大图层
console.log('nishizhengqde')
this.isFixed = false;
} else {
this.isFixed = true;
@ -77,40 +139,38 @@
computed: {
/* 计算左侧滚动位置定位 */
leftIntoView() {
return `left-${this.leftIndex > 3 ? (this.leftIndex-3):0}`;
return `left-${this.leftIndex > 20 ? (this.leftIndex-20):0}`;
}
},
onReady() {
/* 在非H5平台，nextTick回调后有概率获取到错误的元素高度，则添加200ms的延迟来减少BUG的产生 */
setTimeout(() => {
/* 等待滚动区域初始化完成 */
this.initScrollView().then(() => {
/* 获取列表数据，你的代码从此处开始 */
this.getListData();
uni.getSystemInfo({
success: (data) => {
this.scrollHeight = data.windowHeight
console.log(data.windowHeight, 1)
this.$u.getRect('.scroll-panel').then(res => {
console.log(res, 11)
this.scrollTopSize = res.top; //元素距离顶部的距离
this.scrollHeight = this.scrollHeight - this.heightnav
console.log(this.scrollHeight, 111)
this.getListData();
})
}
})
}, 100);
/* 在非H5平台，nextTick回调后有概率获取到错误的元素高度，则添加200ms的延迟来减少BUG的产生 */
},
methods: {
/* 初始化滚动区域 */
initScrollView() {
return new Promise((resolve, reject) => {
let view = uni.createSelectorQuery().select('#scroll-panel');
view.boundingClientRect(res => {
this.scrollTopSize = res.top;
this.scrollHeight = 812;
console.log(res, res.top, res.height)
setTimeout(() => {
resolve();
}, 100);
}).exec();
});
// 导航栏高度 去计算列表页的高度
Topdistance(e) {
this.heightnav = e ////导航栏高度
},
/* 获取列表数据 */
getListData() {
// Promise 为 ES6 新增的API ，有疑问的请自行学习该方法的使用。
new Promise((resolve, reject) => {
/* 因无真实数据，当前方法模拟数据。正式项目中将此处替换为 数据请求即可 */
uni.showLoading();
// 模拟数据
let mockData = () => {
@ -156,8 +216,6 @@
}).then((res) => {
console.log('-----------请求接口返回数据示例-------------');
console.log(res);
uni.hideLoading();
this.leftArray = res.left;
this.mainArray = res.main;
@ -211,22 +269,30 @@
},
/* 左侧导航点击 */
leftTap(e) {
let index = e.currentTarget.dataset.index;
this.scrollInto = `item-${index}`;
console.log(e)
try {
if (this.isFixed) {
uni.pageScrollTo({
scrollTop: this.scrollTopSize + this.heightnav, //滑动需要的距离 nav+列表距离的高度
duration: 100
});
this.isFixed = false
this.opacity = false
}
} catch (e) {
//TODO handle the exception
}
setTimeout(() => {
let index = e.currentTarget.dataset.index;
this.scrollInto = `item-${index}`;
}, 300)
}
}
}
</script>
<style lang="scss">
page {
height: 100vh;
}
.container {
height: 100%;
}
/* 容器 */
.container {
display: flex;
@ -240,10 +306,161 @@
width: 100%;
}
.top--panel {
padding: 0 20rpx;
.panelimgbackground {
width: 382rpx;
margin: 82rpx auto 0 auto;
height: 158rpx;
}
.panelone {
margin-top: 32rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 500;
font-size: 32rpx;
color: #333333;
}
.paneltow {
margin-top: 16rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 24rpx;
color: #999999;
}
.panelthere {
margin-top: 16rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 24rpx;
color: #999999;
.paneltheretext {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 28rpx;
color: #999999;
}
.flex-start {
view {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 28rpx;
color: #999999;
}
}
}
.panelfour {
margin-top: 50rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: bold;
font-size: 32rpx;
color: #333333;
}
.panelfive {
.panelfiveitem {
margin-top: 16rpx;
width: 340rpx;
.panelfiveitemimage {
border-radius: 20rpx 20rpx 0rpx 0rpx;
width: 100%;
height: 204rpx;
}
.panelfiveitemone {
margin-top: 32rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 500;
font-size: 28rpx;
color: #333333;
}
.panelfiveitemtow {
margin-top: 16rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 24rpx;
color: #FF534B;
}
.panelfiveitemthere {
margin-top: 8rpx;
// text:nth-child(1) {
// margin-left: 0;
// }
text {
padding: 4rpx 24rpx;
background: #F6F6F6;
border-radius: 8rpx 8rpx 8rpx 8rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 20rpx;
color: #999999;
}
}
.panelfiveitemfour {
margin-top: 10rpx;
width: 100%;
overflow: hidden; //超出的文本隐藏
text-overflow: ellipsis; //溢出用省略号显示
white-space: nowrap; //溢出不换行
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 24rpx;
color: #999999;
}
.panelfiveitemfive {
margin-top: 8rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 24rpx;
color: #999999;
}
.panelfiveitemsex {
padding-bottom: 48rpx;
.panelfiveitemsex_oen {
text:nth-child(1) {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 24rpx;
color: #333333;
}
text:nth-child(2) {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 36rpx;
color: #333333;
}
text:nth-child(3) {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 24rpx;
color: #666666;
}
}
}
}
}
}
.scroll-panel {
flex-grow: 1;
// height: 0;
// overflow: hidden;
overflow: hidden;
}
@ -264,6 +481,7 @@
align-content: flex-start;
font-size: 28rpx;
position: relative;
.left {
width: 200rpx;
background-color: #f6f6f6;

1
pages/order_food/order_food.vue
View File

@ -537,6 +537,7 @@
}
return res
})
console.log(this.specifications.tagSnap)
this.specifications.tagSnap.forEach((val, index, arr) => { //初始化skuidname的数据 选择第一个
this.skuidname.push(val.children[0])
})