fix::合并gaohao到dev
This commit is contained in:
GaoHao
@@ -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) => {
|
||||
|
||||
@@ -75,6 +75,13 @@
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (this.amount <= 0) {
|
||||
uni.showToast({
|
||||
title: '金额必须大于0',
|
||||
icon: 'none'
|
||||
});
|
||||
return false;
|
||||
}
|
||||
let res = await this.api.paymemeberIn({
|
||||
shopId: this.shopId, // 判断显示哪家的作品,
|
||||
amount: this.amount // 判断显示哪家的作品,
|
||||
|
||||
1060
pages/order/confirm_order.vue
Normal file
1060
pages/order/confirm_order.vue
Normal file
File diff suppressed because it is too large
Load Diff
@@ -257,7 +257,7 @@
|
||||
},
|
||||
onHide() {
|
||||
this.socketTicket.Close()
|
||||
uni.$off('message')
|
||||
uni.$off('getMessage')
|
||||
},
|
||||
onShow() {
|
||||
uni.$on('message', this.getMessage)
|
||||
|
||||
@@ -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>
|
||||
@@ -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
File diff suppressed because it is too large
Load Diff
1899
pages/order_food/order_foodscroll-view.vue
Normal file
1899
pages/order_food/order_foodscroll-view.vue
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user