2024.7.16
This commit is contained in:
魏啾
92
pages/order_food/goodsList.vue
Normal file
92
pages/order_food/goodsList.vue
Normal file
@@ -0,0 +1,92 @@
|
||||
<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>
|
||||
391
pages/order_food/goodsList_scroll.vue
Normal file
391
pages/order_food/goodsList_scroll.vue
Normal file
@@ -0,0 +1,391 @@
|
||||
<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="list-boxafter" v-if="isFixed"></view>
|
||||
<view class="left">
|
||||
<scroll-view scroll-y="true" :style="{ 'height':scrollHeight + 'px' }"
|
||||
:scroll-into-view="leftIntoView" :scroll-with-animation="false">
|
||||
<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">
|
||||
<scroll-view scroll-y="true" :style="{ 'height':scrollHeight + 'px' }" @scroll="mainScroll"
|
||||
:scroll-into-view="scrollInto" :scroll-with-animation="false">
|
||||
<view class="item main-item" v-for="(item,index) in mainArray" :key="index" :id="'item-'+index">
|
||||
<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>
|
||||
<view class="fill-last" :style="{ 'height':fillHeight + 'px' }"></view>
|
||||
</scroll-view>
|
||||
</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: 400,
|
||||
scrollTopSize: 0, //距离顶部的高度
|
||||
fillHeight: 0, // 填充高度，用于最后一项低于滚动区域时使用
|
||||
leftArray: [],
|
||||
mainArray: [],
|
||||
topArr: [],
|
||||
leftIndex: 0,
|
||||
scrollInto: '',
|
||||
isFixed: true
|
||||
}
|
||||
},
|
||||
onPageScroll(e) {
|
||||
console.log(e)
|
||||
if (e.scrollTop >= this.scrollTopSize) { //控制大图层
|
||||
this.isFixed = false;
|
||||
} else {
|
||||
this.isFixed = true;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
/* 计算左侧滚动位置定位 */
|
||||
leftIntoView() {
|
||||
return `left-${this.leftIndex > 3 ? (this.leftIndex-3):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.scrollTopSize = res.top;
|
||||
this.scrollHeight = 1000;
|
||||
console.log(res, res.top, res.height)
|
||||
setTimeout(() => {
|
||||
resolve();
|
||||
}, 100);
|
||||
}).exec();
|
||||
});
|
||||
},
|
||||
/* 获取列表数据 */
|
||||
getListData() {
|
||||
// Promise 为 ES6 新增的API ，有疑问的请自行学习该方法的使用。
|
||||
new Promise((resolve, reject) => {
|
||||
/* 因无真实数据，当前方法模拟数据。正式项目中将此处替换为 数据请求即可 */
|
||||
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 < 5 ? 5 : 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);
|
||||
}).then((res) => {
|
||||
console.log('-----------请求接口返回数据示例-------------');
|
||||
console.log(res);
|
||||
|
||||
uni.hideLoading();
|
||||
this.leftArray = res.left;
|
||||
this.mainArray = res.main;
|
||||
|
||||
// DOM 挂载后 再调用 getElementTop 获取高度的方法。
|
||||
setTimeout(() => {
|
||||
this.getElementTop();
|
||||
}, 100);
|
||||
});
|
||||
},
|
||||
/* 获取元素顶部信息 */
|
||||
getElementTop() {
|
||||
new Promise((resolve, reject) => {
|
||||
let view = uni.createSelectorQuery().selectAll('.main-item');
|
||||
view.boundingClientRect(data => {
|
||||
resolve(data);
|
||||
}).exec();
|
||||
}).then((res) => {
|
||||
let topArr = res.map((item) => {
|
||||
return item.top - this.scrollTopSize; /* 减去滚动容器距离顶部的距离 */
|
||||
});
|
||||
this.topArr = topArr;
|
||||
|
||||
/* 获取最后一项的高度，设置填充高度。判断和填充时做了 +-20 的操作，是为了滚动时更好的定位 */
|
||||
let last = res[res.length - 1].height;
|
||||
if (last - 20 < this.scrollHeight) {
|
||||
this.fillHeight = this.scrollHeight - last + 20;
|
||||
}
|
||||
});
|
||||
},
|
||||
/* 主区域滚动监听 */
|
||||
mainScroll(e) {
|
||||
// 节流方法
|
||||
clearTimeout(this.mainThrottle);
|
||||
this.mainThrottle = setTimeout(() => {
|
||||
scrollFn();
|
||||
}, 10);
|
||||
|
||||
let scrollFn = () => {
|
||||
let top = e.detail.scrollTop;
|
||||
let index = 0;
|
||||
/* 查找当前滚动距离 */
|
||||
for (let i = (this.topArr.length - 1); i >= 0; i--) {
|
||||
/* 在部分安卓设备上，因手机逻辑分辨率与rpx单位计算不是整数，滚动距离与有误差，增加2px来完善该问题 */
|
||||
if ((top + 2) >= this.topArr[i]) {
|
||||
index = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
this.leftIndex = (index < 0 ? 0 : index);
|
||||
}
|
||||
},
|
||||
/* 左侧导航点击 */
|
||||
leftTap(e) {
|
||||
let index = e.currentTarget.dataset.index;
|
||||
this.scrollInto = `item-${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;
|
||||
position: relative;
|
||||
|
||||
.list-boxafter {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 999;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.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;
|
||||
position: relative;
|
||||
|
||||
|
||||
.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>
|
||||
323
pages/order_food/goodsList_swiper.vue
Normal file
323
pages/order_food/goodsList_swiper.vue
Normal file
@@ -0,0 +1,323 @@
|
||||
<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>
|
||||
@@ -12,11 +12,11 @@
|
||||
<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>
|
||||
<u-icon name="arrow-left" :color="isFixed ? '#333' : '#fff'" size="28"></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>
|
||||
<u-icon name="kefu-ermai" :color="isFixed ? '#333' : '#fff'" size="28"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -89,12 +89,12 @@
|
||||
<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="34"></u-icon>
|
||||
<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="34"></u-icon>
|
||||
<u-icon :name="require('@/static/icon_add.png')" size="36"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -171,7 +171,7 @@
|
||||
<view class="col">
|
||||
<text class="t">{{ shopList.storeInfo.businessTime }}</text>
|
||||
</view>
|
||||
<view class="col">
|
||||
<view class="col" @click="makePhoneCall(shopList.storeInfo.phone)">
|
||||
<text class="t">{{ shopList.storeInfo.phone }}</text>
|
||||
</view>
|
||||
<view class="col">
|
||||
@@ -230,19 +230,23 @@
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
<!-- <vastwu-barrage width="750rpx" height="1300rpx" ref="vBarrage"></vastwu-barrage> -->
|
||||
<l-barrage ref="lBarrage" @end="onEnd" :minTop='8' :maxTop='20' :avatar='barrageavatar'></l-barrage>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _ from 'lodash';
|
||||
import navbar from '../../uni_modules/uview-ui/libs/config/props/navbar';
|
||||
import webSocketUtils from '@/common/js/websocket.js'
|
||||
// import vastwuBarrage from '@/components/vastwu-barrage/vastwu-barrage.vue'
|
||||
import webSocketUtils from '@/common/js/websocket.js';
|
||||
import orderdetail from '@/pages/order_detail/index';
|
||||
import lBarrage from '@/components/l-barrage/l-barrage.vue'
|
||||
export default {
|
||||
// components:{vastwuBarrage},
|
||||
components: {
|
||||
orderdetail,
|
||||
lBarrage
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
userInfo: uni.cache.get('userInfo'), //个人信息
|
||||
// #ifndef MP-WEIXIN
|
||||
menuInfo: uni.getSystemInfo(),
|
||||
// #endif
|
||||
@@ -262,12 +266,17 @@
|
||||
tableCode: '', //code，
|
||||
specifications: {},
|
||||
skuidname: [],
|
||||
cartLists: {},
|
||||
cartLists: {}, //购物车
|
||||
orderdetailcartLists: {}, //提交订单
|
||||
socketTicket: null,
|
||||
amountcartNumber: 0,
|
||||
skuidsearch: '', //
|
||||
salePrice: '', //钱数
|
||||
fixedtrue: true
|
||||
fixedtrue: true,
|
||||
datasocket: {}, //储存传参数据
|
||||
radiovalue: '1', //选择支付方式
|
||||
amountVIP: null, //余额
|
||||
barrageavatar: '' //弹幕头像
|
||||
};
|
||||
},
|
||||
onPageScroll(e) {
|
||||
@@ -292,22 +301,27 @@
|
||||
uni.cache.set('tableCode', this.tableCode)
|
||||
}
|
||||
uni.cache.set('types', 'types');
|
||||
uni.$on('message', this.getMessage)
|
||||
this.$nextTick(() => {
|
||||
this.countTitleTopNum(); //导航栏
|
||||
});
|
||||
// this.$refs.vBarrage.init([123])
|
||||
},
|
||||
onUnload() {
|
||||
this.socketTicket.Close()
|
||||
uni.$off('message')
|
||||
},
|
||||
onHide() {
|
||||
this.socketTicket.Close()
|
||||
uni.$off('message')
|
||||
this.fixedtrue = true
|
||||
},
|
||||
onShow() {
|
||||
setTimeout(() => {
|
||||
this.productqueryShopIdByTableCode() //获取shop User id
|
||||
}, 500)
|
||||
uni.$on('message', this.getMessage)
|
||||
this.productqueryShopIdByTableCode() //获取shop User id
|
||||
},
|
||||
methods: {
|
||||
onEnd() { //回调弹幕
|
||||
console.log('一波结束')
|
||||
},
|
||||
// 单独获取他的shopUserid
|
||||
async productqueryShopIdByTableCode() {
|
||||
let res = await this.api.productqueryShopIdByTableCode({
|
||||
@@ -315,7 +329,7 @@
|
||||
})
|
||||
if (res.code == 0) {
|
||||
uni.cache.set('shopUser', res.data)
|
||||
this.handlemessage()
|
||||
this.handlemessage() //监听websocket返回
|
||||
this.productqueryProduct() //list 数据
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
@@ -324,101 +338,87 @@
|
||||
}
|
||||
},
|
||||
getMessage(msg) { //wss 回显数据
|
||||
// console.log(this.shopList.productInfo)
|
||||
// console.log(msg.data)
|
||||
// const sumValuesByKey = (arr, key) => {
|
||||
// return arr.reduce((accumulator, current) => {
|
||||
// const existing = accumulator.find(item => item[key] === current[key]);
|
||||
// if (existing) {
|
||||
// existing.number += current.number;
|
||||
// } else {
|
||||
// accumulator.push({
|
||||
// ...current
|
||||
// });
|
||||
// }
|
||||
// return accumulator;
|
||||
// }, []);
|
||||
// };
|
||||
// const result = sumValuesByKey(msg.data, 'productId');
|
||||
// this.shopList.productInfo.forEach((item, index) => {
|
||||
// if (item.id == result.categoryId) {
|
||||
// item.products.forEach((item1,index1) => {
|
||||
|
||||
// })
|
||||
// }
|
||||
// });
|
||||
if (msg == 1) { // 网络在连接
|
||||
this.fixedtrue = true
|
||||
return false
|
||||
}
|
||||
this.fixedtrue = false
|
||||
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.skuidname = []
|
||||
this.showCart = false
|
||||
setTimeout(() => {
|
||||
uni.showToast({
|
||||
title: msg.msg,
|
||||
icon: "none",
|
||||
})
|
||||
}, 500)
|
||||
this.cartLists = msg
|
||||
this.productqueryProduct() //list 数据
|
||||
break;
|
||||
case 'order':
|
||||
console.log('clearCart')
|
||||
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?tablelist=' + item
|
||||
});
|
||||
break;
|
||||
case 'queryCart': //待提交
|
||||
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) {
|
||||
let nums = 0
|
||||
msg.data.forEach((item, index, arr) => { //初始化skuidname的数据 选择第一个
|
||||
if (item.skuId == this.skuidsearch) {
|
||||
nums = item.number
|
||||
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)
|
||||
}
|
||||
})
|
||||
this.$set(this, 'amountcartNumber', nums)
|
||||
} else {
|
||||
this.$set(this, 'amountcartNumber', 0)
|
||||
}
|
||||
this.productqueryProduct() //list 数据
|
||||
break;
|
||||
default:
|
||||
this.cartLists = msg
|
||||
|
||||
} 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() {
|
||||
@@ -432,12 +432,8 @@
|
||||
},
|
||||
// 数据处理
|
||||
socketSendMsg(data) {
|
||||
console.log(data, 1111)
|
||||
if (this.socketTicket) {
|
||||
console.log(222)
|
||||
this.socketTicket.send(data);
|
||||
} else {
|
||||
console.log(333)
|
||||
}
|
||||
},
|
||||
getQueryString(url, name) { //解码
|
||||
@@ -449,16 +445,15 @@
|
||||
return null;
|
||||
},
|
||||
async cartadd(item, index, index1, a, b) { //列表添加 a传参加减号 b是判断单规格多规格
|
||||
console.log(item, index, index1, a, b)
|
||||
if (b == '单规格') { //没有规格为空
|
||||
this.skuidname = []
|
||||
}
|
||||
this.hodgepodge(item, 1, a) //获取skuid /1添加购物车
|
||||
},
|
||||
async cartListadd(item, index, a) {
|
||||
console.log(item, index, a)
|
||||
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:清空购物车”，
|
||||
@@ -466,6 +461,7 @@
|
||||
"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
|
||||
@@ -519,8 +515,6 @@
|
||||
this.hodgepodge(item, 2)
|
||||
},
|
||||
async hodgepodge(item, a, c) { //此接口去获取商品id ！！！赋值库存 数量 价格等
|
||||
console.log(11111)
|
||||
|
||||
try {
|
||||
let res = await this.api.productqueryProductSku({
|
||||
shopId: uni.cache.get('shopUser'),
|
||||
@@ -538,6 +532,9 @@
|
||||
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:庆康购物车”，
|
||||
@@ -547,6 +544,7 @@
|
||||
};
|
||||
} else {
|
||||
data = { //查询这个商品的价格
|
||||
"name": item.name,
|
||||
"skuId": res.data.id,
|
||||
"num": '', //数量
|
||||
"type": "sku", //“addcart:添加购物车，create0rder:生成订单，clearCart:庆康购物车”，
|
||||
@@ -556,23 +554,35 @@
|
||||
};
|
||||
this.showShopsku = true //打开弹框
|
||||
}
|
||||
this.datasocket = data
|
||||
uni.$u.debounce(this.socketSendMsg(data), 500)
|
||||
}
|
||||
} catch (e) {}
|
||||
},
|
||||
orderdetail() { // 直接生成订单
|
||||
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,
|
||||
if (this.cartLists.data.length == 0) {
|
||||
uni.showToast({
|
||||
title: '请先添加商品',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
uni.$u.debounce(this.socketSendMsg(data), 500)
|
||||
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 {
|
||||
@@ -584,11 +594,11 @@
|
||||
"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) {
|
||||
@@ -608,6 +618,12 @@
|
||||
break;
|
||||
}
|
||||
},
|
||||
//打电话
|
||||
makePhoneCall(phone) {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: phone //仅为示例
|
||||
});
|
||||
},
|
||||
// 点击菜单商品滚动到指定为止
|
||||
titleClickHandle(id) {
|
||||
uni.createSelectorQuery()
|
||||
@@ -657,7 +673,7 @@
|
||||
.exec();
|
||||
}
|
||||
this.titleTopNums = topNums;
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -687,7 +703,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: $paddingSize;
|
||||
// margin-right: $paddingSize;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -943,12 +959,23 @@
|
||||
}
|
||||
|
||||
.btn {
|
||||
position: relative;
|
||||
padding: 6upx 10upx;
|
||||
background-color: $color-priamry;
|
||||
border-radius: 12upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -10px;
|
||||
top: -10px;
|
||||
right: -10px;
|
||||
bottom: -10px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1153,18 +1180,111 @@
|
||||
}
|
||||
|
||||
.btn {
|
||||
position: relative;
|
||||
padding: 16upx 20upx;
|
||||
background-color: $color-priamry;
|
||||
border-radius: 12upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -10px;
|
||||
top: -10px;
|
||||
right: -10px;
|
||||
bottom: -10px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.classorderdetailshow {
|
||||
position: relative;
|
||||
|
||||
.orderdetailuicon {
|
||||
position: absolute;
|
||||
top: 10rpx;
|
||||
left: 10rpx;
|
||||
}
|
||||
|
||||
.payType {
|
||||
padding: 32rpx 34rpx;
|
||||
margin-top: 48rpx;
|
||||
background-color: #fff;
|
||||
|
||||
>view:first-child {
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
>view:last-child {
|
||||
margin-top: 32rpx;
|
||||
}
|
||||
|
||||
.dfs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.fixedview {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
.flex-between {
|
||||
width: 100%;
|
||||
padding: 24rpx 28rpx;
|
||||
background: #FFFFFF;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
.fixedview_one {
|
||||
.fixedview_oneone {
|
||||
font-size: 28rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.fixedview_onetow {
|
||||
font-size: 44rpx;
|
||||
font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
|
||||
font-weight: normal;
|
||||
color: #F45C4C;
|
||||
font-weight: bold;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.fixedview_onethere {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.fixedview_tow {
|
||||
background: red;
|
||||
border-radius: 34rpx;
|
||||
padding: 10rpx 44rpx;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC-Bold, PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shop-info-wrap {
|
||||
.info-wrap {
|
||||
padding: $paddingSize * 2 0;
|
||||
|
||||
@@ -75,6 +75,9 @@
|
||||
<view class="name">
|
||||
{{ item1.name }}
|
||||
</view>
|
||||
<view class="namess">
|
||||
{{ item1.suit }}起售
|
||||
</view>
|
||||
<view class="price-wrap">
|
||||
<view class="price">
|
||||
<text class="i">￥</text>
|
||||
@@ -104,7 +107,7 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cart-wrap">
|
||||
<view class="cart-wrap" v-if="cartLists.data.length != 0">
|
||||
<view class="cart-content">
|
||||
<view class="left">
|
||||
<image class="icon" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/icon_cart.png"
|
||||
@@ -885,6 +888,13 @@
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.namess {
|
||||
margin-top: 16rpx;
|
||||
color: #6b6b6b;
|
||||
font-size: 24rpx;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.select-sku-wrap {
|
||||
.t {
|
||||
color: #999;
|
||||
@@ -893,7 +903,7 @@
|
||||
}
|
||||
|
||||
.price-wrap {
|
||||
padding-top: $paddingSize;
|
||||
margin-top: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
Reference in New Issue
Block a user