线上订货界面

pages.json

@@ -69,7 +69,40 @@
 			}
 
 		}]
-	}],
+	},{
+        "root": "pages/shopping",
+        "pages": [{
+            "path" : "shopping_car/shopping_car",
+            "style" : {
+                "navigationBarTitleText": "购物车"
+            }
+        }
+        ,{
+            "path" : "integral_mall/integral_mall",
+            "style" : {
+                "navigationBarTitleText": "积分商城"
+            }
+        }
+        ,{
+            "path" : "inline_shop/inline_shop",
+            "style" : {
+                "navigationStyle": "custom" ,// 隐藏系统导航栏
+                "navigationBarTextStyle": "white"
+            }
+        }
+        ,{
+            "path" : "mallMenu/index1",
+            "style" : {
+                "navigationBarTitleText": "商品筛选"
+            }
+        }
+        ,{
+            "path" : "mallMenu/index2",
+            "style" : {
+                "navigationBarTitleText": "商品筛选"
+            }
+        }]
+    }],
 	"preloadRule": {},
 	"globalStyle": {
 		"navigationBarBackgroundColor": "#0095FF",

pages/shopping/inline_shop/inline_shop.vue

@@ -0,0 +1,403 @@
+<template>
+	<view>
+		<!-- 线上订货 -->
+		<u-navbar :background="background" back-icon-color="#ffffff" is-fixed>
+			<u-search placeholder="请输入轮胎规格" :show-action="false" v-model="keyword"></u-search>
+			<u-icon @click="handleGo('msg')" name="chat-fill" label="消息" size="36" label-pos="bottom" :margin-right="16"
+			 label-color="#ffffff" :custom-style="iconCustomStyle"></u-icon>
+		</u-navbar>
+		<view class="content">
+			<u-sticky >
+				<view class="filter-wrap wrap-flex">
+					<u-button :custom-style="buttonCustomStyle" :hair-line="false" hover-class="none" @click="handleGo('mallMenu1')">全部</u-button>
+					<u-dropdown>
+						<u-dropdown-item v-model="brandValue" title="品牌" :options="brandOptions"></u-dropdown-item>
+						<u-dropdown-item v-model="patternValue" title="花纹" :options="patternOptions"></u-dropdown-item>
+					</u-dropdown>
+					<u-button :custom-style="buttonCustomStyle" :hair-line="false" hover-class="none" @click="showFilterPopup=true">筛选
+						<u-icon name="grid"></u-icon>
+					</u-button>
+				</view>
+			</u-sticky>
+			<u-waterfall v-model="flowList" ref="uWaterfall">
+				<template v-slot:left="{leftList}">
+					<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
+						<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
+						<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
+						<view class="demo-title">
+							{{item.title}}
+						</view>
+						<!-- <view class="demo-price">
+							{{item.price}}元
+						</view> -->
+					<!-- 	<view class="demo-tag">
+							<view class="demo-tag-owner">
+								自营
+							</view>
+							<view class="demo-tag-text">
+								放心购
+							</view>
+						</view> -->
+						<view class="demo-shop">
+							库存：{{item.count}}
+						</view>
+						<view class="shopping-car"><u-icon :custom-style="iconCustomStyleCar"  color="#ffffff" name="car"></u-icon></view>
+					</view>
+				</template>
+				<template v-slot:right="{rightList}">
+					<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
+						<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
+						<view class="demo-title">
+							{{item.title}}
+						</view>
+						<!-- <view class="demo-price">
+							{{item.price}}元
+						</view> -->
+						<!-- <view class="demo-tag">
+							<view class="demo-tag-owner">
+								自营
+							</view>
+							<view class="demo-tag-text">
+								放心购
+							</view>
+						</view> -->
+						<view class="demo-shop">
+							库存：{{item.count}}
+						</view>
+						<view class="shopping-car"><u-icon :custom-style="iconCustomStyleCar" name="car" color="#ffffff"></u-icon></view>
+					</view>
+				</template>
+			</u-waterfall>
+			<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
+		</view>
+		<view id="shopping-car"><u-icon :custom-style="iconCustomStyleCarFixed" size="48" name="car" color="#9999999"></u-icon><u-badge :offset="[-8,-8]" :count="goodsCounts" type="error"></u-badge></view>
+		<u-popup v-model="showFilterPopup" mode="right" width="60%">
+			<view class="filter-title">筛选</view>
+			<block v-for="(item,index) in tabbar" :key="index">
+				<scroll-view scroll-y class="right-box">
+					<view class="page-view">
+						<view class="class-item">
+							<view class="item-title">
+								<text>{{item.name}}</text>
+							</view>
+							<view class="item-container">
+								<view class="thumb-box" v-for="(item1, index1) in item.foods" :key="index1">
+									<view class="item-menu-name">{{item1.value}}</view>
+								</view>
+							</view>
+						</view>
+					</view>
+				</scroll-view>
+			</block>
+		</u-popup>
+	</view>
+</template>
+
+<script>
+	import classifyData from "@/common/classify.data.js";
+	export default {
+		data() {
+			return {
+				background: {
+					backgroundColor: "#0291FD",
+					color: "#ffffff"
+
+				},
+				iconCustomStyle: {
+					padding: "24rpx 14rpx 14rpx 14rpx"
+				},
+				iconCustomStyleCar: {
+					background: "#0291FD",
+					padding: "16rpx",
+					borderRadius: "50%"
+				},
+				iconCustomStyleCarFixed: {
+					background: "#ffffff",
+					padding: "16rpx",
+					borderRadius: "50%",
+					boxShadow: "0px 1px 12px 0px rgba(116, 116, 116, 0.6)"
+				},
+				buttonCustomStyle: {
+					border: "none"
+				},
+				keyword: "",
+				allValue: "",
+				brandValue: "",
+				brandOptions: [{
+					label: "赛轮",
+					value: "SAILUN"
+				}, {
+					label: "金宇",
+					value: "jinyu"
+				}],
+				patternValue: "",
+				patternOptions: [{
+					label: "SH08",
+					value: "SH08"
+				}, {
+					label: "RH07",
+					value: "RH07"
+				}],
+				showFilterPopup: false,
+				tabbar: [{
+					"name": "品牌",
+					"foods": [{
+							"value": "赛轮",
+							"label": "SAILUN",
+						},
+						{
+							"value": "金宇",
+							"label": "jinyu",
+						},
+					]
+				}],
+				loadStatus: 'loadmore',
+				goodsCounts: 99,//购物车商品数
+				flowList: [],
+				list: [{
+						price: 35,
+						title: '175/70R14 88T XL SH08 BGSL',
+						count: '100',
+						image: 'https://img12.360buyimg.com/n7/jfs/t16642/126/2693663818/450163/6879e8ce/5b06d93bN6305bd94.png',
+					},
+					{
+						price: 75,
+						title: '175/70R14 88T XL SH08 BGSL',
+						count: '100',
+						image: 'https://img12.360buyimg.com/n7/jfs/t1/47645/22/6120/140457/5d3d17deEec9f8e8d/3687ff03ca89b48c.jpg',
+					},
+					{
+						price: 385,
+						title: '175/70R14 88T XL SH08 BGSL',
+						count: '100',
+						image: 'https://img11.360buyimg.com/n7/jfs/t1/88990/24/4208/105799/5de4c6e9E24bc09d0/f810effb14c9c13a.jpg',
+					},
+					{
+						price: 784,
+						title: '175/70R14 88T XL SH08 BGSL',
+						count: '100',
+						image: 'https://img12.360buyimg.com/n7/jfs/t1/93698/23/4500/114562/5de713dfEfc997085/e8deaa979909851d.jpg',
+					},
+					{
+						price: 7891,
+						title: '175/70R14 88T XL SH08 BGSL',
+						count: '100',
+						image: 'https://img11.360buyimg.com/n7/jfs/t16642/126/2693663818/450163/6879e8ce/5b06d93bN6305bd94.png',
+					},
+					{
+						price: 2341,
+						count: '100',
+						title: '175/70R14 88T XL SH08 BGSL',
+						image: 'https://img10.360buyimg.com/n7/jfs/t1/68753/35/2229/118427/5d089fb7Ee5b93887/2e3bbc7fec247fdc.jpg',
+					},
+					{
+						price: 661,
+						count: '100',
+						title: '175/70R14 88T XL SH08 BGSL',
+						image: 'https://img10.360buyimg.com/n7/jfs/t1/68753/35/2229/118427/5d089fb7Ee5b93887/2e3bbc7fec247fdc.jpg',
+					},
+					{
+						price: 1654,
+						title: '175/70R14 88T XL SH08 BGSL',
+						count: '100',
+						image: 'https://img10.360buyimg.com/n7/jfs/t1/68753/35/2229/118427/5d089fb7Ee5b93887/2e3bbc7fec247fdc.jpg',
+					},
+					{
+						price: 1678,
+						title: '175/70R14 88T XL SH08 BGSL',
+						count: '100',
+						image: 'https://img10.360buyimg.com/n7/jfs/t1/68753/35/2229/118427/5d089fb7Ee5b93887/2e3bbc7fec247fdc.jpg',
+					},
+					{
+						price: 924,
+						title: '175/70R14 88T XL SH08 BGSL',
+						count: '100',
+						image: 'https://img10.360buyimg.com/n7/jfs/t1/68753/35/2229/118427/5d089fb7Ee5b93887/2e3bbc7fec247fdc.jpg',
+					},
+					{
+						price: 8243,
+						title: '175/70R14 88T XL SH08 BGSL',
+						count: '100',
+						image: 'https://img10.360buyimg.com/n7/jfs/t1/68753/35/2229/118427/5d089fb7Ee5b93887/2e3bbc7fec247fdc.jpg',
+					},
+				]
+			}
+		},
+		onLoad() {
+			this.addRandomData();
+		},
+		onReachBottom() {
+			this.loadStatus = 'loading';
+			// 模拟数据加载
+			setTimeout(() => {
+				this.addRandomData();
+				this.loadStatus = 'loadmore';
+			}, 1000)
+		},
+		methods: {
+			handleGoMeg: function(value) {
+				var urlStr = ""
+				switch (value) {
+					case "msg":
+						urlStr: "../../msg/index";
+						break;
+					case "mallMenu1":
+						urlStr: "../../mallMenu/index1";
+						break;
+					case "mallMenu2":
+						urlStr: "../../mallMenu2/index2";
+						break;
+				};
+				uni.switchTab({
+					url: urlStr
+				});
+			},
+			addRandomData() {
+				for (let i = 0; i < 10; i++) {
+					let index = this.$u.random(0, this.list.length - 1);
+					// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
+					let item = JSON.parse(JSON.stringify(this.list[index]))
+					item.id = this.$u.guid();
+					this.flowList.push(item);
+				}
+			},
+			remove(id) {
+				this.$refs.uWaterfall.remove(id);
+			},
+			clear() {
+				this.$refs.uWaterfall.clear();
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.wrap-flex {
+		display: flex;
+	}
+
+	.filter-wrap {
+		background: #ffffff;
+	}
+
+	.filter-title {
+		background: #F6F6F6;
+		padding: 16rpx;
+	}
+
+	.class-item {
+		margin-bottom: 30rpx;
+		background-color: #fff;
+		padding: 16rpx;
+		border-radius: 8rpx;
+	}
+
+	.class-item:last-child {
+		min-height: 100vh;
+	}
+
+	.item-title {
+		font-size: 26rpx;
+		color: $u-main-color;
+		font-weight: bold;
+	}
+
+	.item-menu-name {
+		font-weight: normal;
+		font-size: 24rpx;
+		color: $u-main-color;
+	}
+
+	.item-container {
+		display: flex;
+		flex-wrap: wrap;
+	}
+
+	.thumb-box {
+		width: 33.333333%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-direction: column;
+		margin: 20px 16rpx 0;
+		background: #f6f6f6;
+		padding: 8rpx;
+	}
+
+	.demo-warter {
+		border-radius: 8px;
+		margin: 5px;
+		background-color: #ffffff;
+		padding: 8px;
+		position: relative;
+	}
+
+	.u-close {
+		position: absolute;
+		top: 32rpx;
+		right: 32rpx;
+	}
+
+	.demo-image {
+		width: 100%;
+		border-radius: 4px;
+	}
+
+	.demo-title {
+		font-size: 30rpx;
+		margin-top: 5px;
+		color: $u-main-color;
+	}
+
+	.demo-tag {
+		display: flex;
+		margin-top: 5px;
+	}
+
+	.demo-tag-owner {
+		background-color: $u-type-error;
+		color: #FFFFFF;
+		display: flex;
+		align-items: center;
+		padding: 4rpx 14rpx;
+		border-radius: 50rpx;
+		font-size: 20rpx;
+		line-height: 1;
+	}
+
+	.demo-tag-text {
+		border: 1px solid $u-type-primary;
+		color: $u-type-primary;
+		margin-left: 10px;
+		border-radius: 50rpx;
+		line-height: 1;
+		padding: 4rpx 14rpx;
+		display: flex;
+		align-items: center;
+		border-radius: 50rpx;
+		font-size: 20rpx;
+	}
+
+	.demo-price {
+		font-size: 30rpx;
+		color: $u-type-error;
+		margin-top: 5px;
+	}
+
+	.demo-shop {
+		font-size: 22rpx;
+		color: $u-tips-color;
+		margin-top: 5px;
+	}
+	.shopping-car{
+		position: absolute;
+		bottom: 4rpx;
+		right: 16rpx;
+	}
+	#shopping-car{
+		position: fixed;
+		z-index: 9999;
+		right: 26rpx;
+		bottom: 300rpx;
+	}
+</style>