修改商品列表卡顿的问题

pages.json

@@ -49,8 +49,8 @@
 					"titleNView": false
 				}
 			}
-		}  
-    ],
+		}
+	],
 	"subPackages": [{
 		"root": "pages/home",
 		"pages": [{
@@ -73,7 +73,7 @@
 				}
 
 			},
-			
+
 			// 扫码出库确认
 			{
 				"path": "Scan-code-out/index",
@@ -82,37 +82,50 @@
 				}
 
 			},
+			// 积分商城
 			{
-				"path": "shopping/shopping_car",
+				"path": "integral-mall/integral_mall",
+				"style": {
+					"navigationBarTitleText": "积分商城"
+				}
+			}, {
+				"path": "integral-mall/integral_mall_car",
 				"style": {
 					"navigationStyle": "custom", // 隐藏系统导航栏
 					"navigationBarTextStyle": "white"
 				}
 			}, {
-				"path": "shopping/integral_mall",
+				"path": "integral-mall/integral_mall_goods_details",
 				"style": {
-					"navigationBarTitleText": "积分商城"
+					"navigationBarTitleText": "商品详情"
 				}
 			}, {
-				"path": "shopping/integral_mall_confirmorder",
+				"path": "integral-mall/integral_mall_confirmorder",
 				"style": {
 					"navigationBarTitleText": "订单确认"
 				}
-			}, {
-				"path": "shopping/inline_shop",
+			},
+			// 线上订货
+			{
+				"path": "inline-shop/inline_shop",
 				"style": {
 					"navigationStyle": "custom", // 隐藏系统导航栏
 					"navigationBarTextStyle": "white"
 				}
 			}, {
-				"path": "shopping/inline_shop_details",
+				"path": "inline-shop/inline_shop_details",
 				"style": {
 					"navigationBarTitleText": "商品详情"
 				}
-			}
-			,{
-			    "path" : "my-stock/my-stock",
-			    "style" : {
+			}, {
+				"path": "inline-shop/inline_shop_car",
+				"style": {
+					"navigationStyle": "custom", // 隐藏系统导航栏
+					"navigationBarTextStyle": "white"
+				}
+			}, {
+				"path": "my-stock/my-stock",
+				"style": {
 					"navigationStyle": "custom", // 隐藏系统导航栏
 					"navigationBarTextStyle": "white"
 				}
@@ -152,7 +165,7 @@
 				"style": {
 					"navigationBarTitleText": "搜索"
 				}
-			
+
 			},
 			//优惠卷
 			{
@@ -245,22 +258,19 @@
 					"navigationBarTitleText": "核销管理"
 				}
 
-			}
-			,{
-			    "path" : "my-order/my-order",
-			    "style" : {
+			}, {
+				"path": "my-order/my-order",
+				"style": {
 					"navigationBarTitleText": "我的订单"
 				}
-			}
-			,{
-			    "path" : "agent-stock/agent-stock",
-			    "style" : {
+			}, {
+				"path": "agent-stock/agent-stock",
+				"style": {
 					"navigationBarTitleText": "经销商库存"
 				}
-			}
-			,{
-			    "path" : "setting/setting",
-			    "style" : {
+			}, {
+				"path": "setting/setting",
+				"style": {
 					"navigationBarTitleText": "设置"
 				}
 			}
@@ -292,8 +302,8 @@
 		"navigationBarBackgroundColor": "#0095FF",
 		"navigationBarTextStyle": "white",
 		"app-plus": {
-			"bounce": "none" ,//关闭窗口回弹效果
-			"scrollIndicator": "none"//app页面不显示滚动条
+			"bounce": "none", //关闭窗口回弹效果
+			"scrollIndicator": "none" //app页面不显示滚动条
 		}
 	},
 	"tabBar": {

pages/home/index.vue

@@ -94,12 +94,12 @@
 			},
 			inInlineshop(){
 				this.$u.route({
-					url: 'pages/home/shopping/inline_shop',
+					url: 'pages/home/inline-shop/inline_shop',
 				})
 			},
 			inIntegral(){
 				this.$u.route({
-					url: 'pages/home/shopping/integral_mall',
+					url: 'pages/home/integral-mall/integral_mall',
 				})
 			}
 		}

pages/home/inline-shop/inline_shop.vue

@@ -0,0 +1,412 @@
+<template>
+	<view class="page">
+		<!-- 购物车 -->
+		<u-navbar :background="background" title-color="#ffffff" 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>
+		<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 style="position: static;">
+					<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>
+		<scroll-view scroll-y="true" @scrolltolower="scrollBottom" class="scroll-view-container">
+			<view class="page-box">
+				<u-waterfall v-model="goodsList" ref="uWaterfall">
+					<template v-slot:left="{leftList}">
+						<view class="demo-warter" v-for="(item, index) in leftList" :key="index" @click="handleGoDetails">
+							<!-- 警告：微信小程序中需要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" @click="handleGoDetails">
+							<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 :status="loadStatus" bgColor="#f2f2f2"></u-loadmore>
+			</view>
+		</scroll-view>
+		<view id="shopping-car" @click="handleGoCar"><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>
+	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,//购物车商品数
+				goodsList: [],
+				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();
+		},
+		methods: {
+			scrollBottom: function(){
+				console.log("到底了")
+				this.loadStatus = 'loading';
+				// 模拟数据加载
+				setTimeout(() => {
+					this.addRandomData();
+					this.loadStatus = 'loadmore';
+				}, 1000)
+			},
+			handleGo: 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
+				});
+			},
+			handleGoDetails: function(){
+				uni.navigateTo({
+					url: "/pages/home/inline-shop/inline_shop_details"
+				})
+			},
+			handleGoCar: function(){
+				console.log("进入购物车")
+				uni.navigateTo({
+					url: "/pages/home/inline-shop/inline_shop_car"
+				})
+			},
+			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.goodsList.push(item);
+				};
+			},
+		}
+	}
+</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;
+	}
+	.scroll-view-container{
+		width: 100%;
+		height: calc(100vh - 176rpx);
+	}
+	.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>

pages/home/shopping/shopping_car.vue → pages/home/inline-shop/inline_shop_car.vue

@@ -7,29 +7,33 @@
 				<text class="navbar-button" v-show="enbleEdit==true" @click="enbleEdit=false">完成</text>
 			</template>
 		</u-navbar>
-		<u-checkbox-group class="order" @change="checkboxGroupChange">
-			<u-checkbox @change="checkboxChange" style="width: 100%;" v-model="item.checked" shape="circle" v-for="(item,index) in goodsList" :key="item.id" :name="item.id">
-				<view class="item">
-					<view class="left">
-						<image :src="item.goodsUrl" mode="aspectFill"></image>
-					</view>
-					<view class="content">
-						<view class="title u-line-2">{{ item.title }}</view>
-						<view class="type">{{ item.type }}</view>
-						<!-- <view class="delivery-time">发货时间 {{ item.deliveryTime }}</view> -->
-						<view class="price-row">
-							<view class="brand">
-								{{ item.brand }}
+		<scroll-view scroll-y @scrolltolower="scrollBottom" class="scroll-view-container">
+			<view class="page-box">
+				<u-checkbox-group class="order" @change="checkboxGroupChange">
+					<u-checkbox @change="checkboxChange" style="width: 100%;" v-model="item.checked" shape="circle" v-for="(item,index) in goodsList" :key="item.id" :name="item.id">
+						<view class="item">
+							<view class="left">
+								<image :src="item.goodsUrl" mode="aspectFill"></image>
 							</view>
-							<view class="demo-count-box">
-								<u-number-box v-model="selectedCount" :min="1" @change="selectedCountChange"></u-number-box>
+							<view class="content">
+								<view class="title u-line-2">{{ item.title }}</view>
+								<view class="type">{{ item.type }}</view>
+								<!-- <view class="delivery-time">发货时间 {{ item.deliveryTime }}</view> -->
+								<view class="price-row">
+									<view class="brand">
+										{{ item.brand }}
+									</view>
+									<view class="demo-count-box">
+										<u-number-box v-model="selectedCount" :min="1" @change="selectedCountChange"></u-number-box>
+									</view>
+								</view>
 							</view>
 						</view>
-					</view>
-				</view>
-			</u-checkbox>
-		</u-checkbox-group>
-		<u-loadmore :status="loadStatus" bgColor="#f2f2f2"></u-loadmore>
+					</u-checkbox>
+				</u-checkbox-group>
+				<u-loadmore :status="loadStatus" bgColor="#f2f2f2"></u-loadmore>
+			</view>
+		</scroll-view>	
 		<view class="navigation">
 			<view class="left">
 				<view class="item">
@@ -168,15 +172,16 @@
 		onLoad() {
 			this.addRandomData();
 		},
-		onReachBottom() {
-			this.loadStatus = 'loading';
-			// 模拟数据加载
-			setTimeout(() => {
-				this.addRandomData();
-				this.loadStatus = 'loadmore';
-			}, 1000)
-		},
+		
 		methods: {
+			scrollBottom: function() {
+				this.loadStatus = 'loading';
+				// 模拟数据加载
+				setTimeout(() => {
+					this.addRandomData();
+					this.loadStatus = 'loadmore';
+				}, 1000)
+			},
 			selectedCountChange: function(){},
 			checkboxGroupChange: function(params) {
 				console.log(1)
@@ -188,19 +193,22 @@
 				}
 			},
 			checkedAll: function(params) {
-				console.log(this.checkedAllValue)
 				if(params.value){
-					this.list.map(val => {
+					this.goodsList.map(val => {
 						val.checked = true;
 					})
 				}else{
-					this.list.map(val => {
+					this.goodsList.map(val => {
 						val.checked = false;
 					})
 				}
 				
 			},
-			handleSubmit: function(){},
+			handleSubmit: function(){
+				uni.navigateTo({
+					url: "/pages/home/shopping/integral_mall_confirmorder"
+				})
+			},
 			handleDel: function(){},
 			addRandomData() {
 				for (let i = 0; i < 10; i++) {
@@ -208,6 +216,9 @@
 					// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
 					let item = JSON.parse(JSON.stringify(this.list[index]))
 					item.id = this.$u.guid();
+					if(this.checkedAllValue){
+						item.checked = true;
+					};
 					this.goodsList.push(item);
 				}
 			},
@@ -216,8 +227,9 @@
 </script>
 
 <style lang="scss" scoped>
-	.page{
-		padding-bottom: 100rpx;
+	.scroll-view-container{
+		width: 100%;
+		height: calc(100vh - 176rpx);
 	}
 	.navbar-button {
 		padding: 24rpx 26rpx;
@@ -270,6 +282,7 @@
 				.title {
 					font-size: 28rpx;
 					line-height: 50rpx;
+					color: #606266;
 				}
 
 				.type {

pages/home/integral-mall/integral_mall.vue

@@ -0,0 +1,430 @@
+<template>
+	<view>
+		<view class="wrap">
+			<!-- 积分商城 -->
+			<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 style="position: static;">
+						<u-dropdown-item v-model="brandValue" title="品牌" :options="brandOptions"></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>
+					<u-search placeholder="请输入商品名称或种类" :animation="true" :style="inputCustomStyle" :show-action="false" v-model="keyword" @focus="inputFocus" @blur="inputBlur"></u-search>
+				</view>
+			</u-sticky>
+			<scroll-view scroll-y @scrolltolower="scrollBottom" class="scroll-view-container">
+				<view class="page-box">
+					<view class="order" >
+						<view class="item" v-for="(item, index) in goodsList" :key="index" @click="handleGoDetails">
+							<view class="left"><image :src="item.goodsUrl" mode="aspectFill"></image></view>
+							<view class="content">
+								<view class="title u-line-2">{{ item.title }}</view>
+								<view class="type">{{ item.type }}</view>
+								<!-- <view class="delivery-time">发货时间 {{ item.deliveryTime }}</view> -->
+								<view class="price-row">
+									<view class="price">
+										{{ item.price }}积分
+									</view>
+									<view class="exchange">加入购物车</view>
+								</view>
+							</view>
+						</view>
+					</view>
+					<u-loadmore :status="loadStatus" bgColor="#f2f2f2"></u-loadmore>
+				</view>
+			</scroll-view>	
+			<view id="shopping-car" @click="handleGoCar"><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>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			buttonCustomStyle: {
+				border: "none"
+			},
+			brandValue: "",
+			brandOptions: [{
+				label: "赛轮",
+				value: "SAILUN"
+			}, {
+				label: "金宇",
+				value: "jinyu"
+			}],
+			keyword: "",
+			inputCustomStyle: {},
+			iconCustomStyleCarFixed: {
+				background: "#ffffff",
+				padding: "16rpx",
+				borderRadius: "50%",
+				boxShadow: "0px 1px 12px 0px rgba(116, 116, 116, 0.6)"
+			},
+			goodsCounts: 100,
+			showFilterPopup: false,
+			tabbar: [{
+				"name": "品牌",
+				"foods": [{
+						"value": "赛轮",
+						"label": "SAILUN",
+					},
+					{
+						"value": "金宇",
+						"label": "jinyu",
+					},
+				]
+			}],
+			loadStatus: "loadmore",
+			
+			goodsList: [],
+			list: [
+				{
+					goodsUrl: 'https://img12.360buyimg.com/n7/jfs/t16642/126/2693663818/450163/6879e8ce/5b06d93bN6305bd94.png',
+					title: '【胎动】T-M3蘑菇钉，24支/盒， 3mm ',
+					type: '胎动品牌；修补类型；普通积分',
+					deliveryTime: '付款后30天内发货',
+					price: '348.58',
+					number: 2
+				},
+				{
+					goodsUrl: 'https://img12.360buyimg.com/n7/jfs/t1/47645/22/6120/140457/5d3d17deEec9f8e8d/3687ff03ca89b48c.jpg',
+					title: '【胎动】T-M3蘑菇钉，24支/盒， 3mm ',
+					type: '胎动品牌；修补类型；普通积分',
+					deliveryTime: '付款后30天内发货',
+					price: '135.00',
+					number: 1
+				},
+				{
+					goodsUrl: 'https://img11.360buyimg.com/n7/jfs/t1/88990/24/4208/105799/5de4c6e9E24bc09d0/f810effb14c9c13a.jpg',
+					title: '【胎动】T-M3蘑菇钉，24支/盒， 3mm ',
+					type: '胎动品牌；修补类型；普通积分',
+					deliveryTime: '付款后7天内发货',
+					price: '128.05',
+					number: 1
+				},
+				{
+					goodsUrl: 'https://img12.360buyimg.com/n7/jfs/t1/93698/23/4500/114562/5de713dfEfc997085/e8deaa979909851d.jpg',
+					title: '【胎动】T-M3蘑菇钉，24支/盒， 3mm ',
+					type: '胎动品牌；修补类型；普通积分',
+					deliveryTime: '保质5年',
+					price: '1998',
+					number: 3
+				},
+				{
+					goodsUrl: 'https://img11.360buyimg.com/n7/jfs/t16642/126/2693663818/450163/6879e8ce/5b06d93bN6305bd94.png',
+					title: '【胎动】T-M3蘑菇钉，24支/盒， 3mm ',
+					type: '胎动品牌；修补类型；普通积分',
+					deliveryTime: '保质5年',
+					price: '2354',
+					number: 1
+				},
+				{
+					goodsUrl: 'https://img10.360buyimg.com/n7/jfs/t1/68753/35/2229/118427/5d089fb7Ee5b93887/2e3bbc7fec247fdc.jpg',
+					title: '【胎动】T-M3蘑菇钉，24支/盒， 3mm ',
+					type: '胎动品牌；修补类型；普通积分',
+					deliveryTime: '珍藏10年好酒',
+					price: '1543',
+					number: 3
+				},
+				{
+					goodsUrl: 'https://img10.360buyimg.com/n7/jfs/t1/68753/35/2229/118427/5d089fb7Ee5b93887/2e3bbc7fec247fdc.jpg',
+					title: '【胎动】T-M3蘑菇钉，24支/盒， 3mm ',
+					type: '胎动品牌；修补类型；普通积分',
+					deliveryTime: '口感好',
+					price: '120',
+					number: 1
+				},
+				{
+					goodsUrl: 'https://img10.360buyimg.com/n7/jfs/t1/68753/35/2229/118427/5d089fb7Ee5b93887/2e3bbc7fec247fdc.jpg',
+					title: '【胎动】T-M3蘑菇钉，24支/盒， 3mm ',
+					type: '胎动品牌；修补类型；普通积分',
+					deliveryTime: '使用方便',
+					price: '451',
+					number: 9
+				}
+			]
+		};
+	},
+	onLoad() {
+		this.getDataList();
+	},
+	computed: {
+		// 价格小数
+		priceDecimal() {
+			return val => {
+				if (val !== parseInt(val)) return val.slice(-2);
+				else return '00';
+			};
+		},
+		// 价格整数
+		priceInt() {
+			return val => {
+				if (val !== parseInt(val)) return val.split('.')[0];
+				else return val;
+			};
+		}
+	},
+	methods: {
+		inputFocus: function(){
+			console.log(111);
+			this.inputCustomStyle = {
+				position: "absolute",
+				zIndex: "100",
+				width: "98%",
+				margin: "6rpx 1%"
+			};
+		},
+		inputBlur: function(){
+			this.inputCustomStyle = {};
+		},
+		scrollBottom: function(v){
+			console.log(v);
+			this.loadStatus = 'loading';
+			// 模拟数据加载
+			setTimeout(() => {
+				this.getDataList();
+				this.loadStatus = 'loadmore';
+			}, 1000)
+		},
+		getDataList: function(){
+			this.goodsList = this.goodsList.concat(this.list)
+		},
+		handleGoCar: function(){
+			console.log("进入购物车")
+			uni.navigateTo({
+				url: "/pages/home/integral-mall/integral_mall_car"
+			})
+		},
+		handleGoDetails: function(){
+			uni.navigateTo({
+				url: "/pages/home/integral-mall/integral_mall_goods_details"
+			})
+		},
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+	/* #ifndef H5 */
+	page {
+		height: 100%;
+		background-color: #f2f2f2;
+	}
+	/* #endif */
+	.wrap-flex {
+		display: flex;
+	}
+	.scroll-view-container{
+		width: 100%;
+		height: calc(100% - 88rpx);
+	}
+	.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;
+	}
+.order {
+		width: 710rpx;
+		background-color: #ffffff;
+		margin: 20rpx auto;
+		border-radius: 20rpx;
+		box-sizing: border-box;
+		padding: 20rpx;
+		font-size: 28rpx;
+		.top {
+			display: flex;
+			justify-content: space-between;
+			.left {
+				display: flex;
+				align-items: center;
+				.store {
+					margin: 0 10rpx;
+					font-size: 32rpx;
+					font-weight: bold;
+				}
+			}
+			.right {
+				color: $u-type-warning-dark;
+			}
+		}
+		.item {
+			display: flex;
+			margin: 20rpx 0 0;
+			.left {
+				margin-right: 20rpx;
+				image {
+					width: 200rpx;
+					height: 200rpx;
+					border-radius: 10rpx;
+				}
+			}
+			.content {
+				.title {
+					font-size: 28rpx;
+					line-height: 50rpx;
+				}
+				.type {
+					margin: 10rpx 0;
+					font-size: 24rpx;
+					color: $u-tips-color;
+				}
+				.delivery-time {
+					color: #e5d001;
+					font-size: 24rpx;
+				}
+				.price-row{
+					display: flex;
+					justify-content: space-between;
+					margin: 10rpx 0;
+					font-size: 26rpx;
+					.price{
+						color: #FF0000;
+					}
+					.exchange{
+						background: #0094FE;
+						color: #FFFFFF;
+						padding: 4rpx 16rpx;
+						line-height: 1.5;
+					}
+				}
+			}
+			.right {
+				margin-left: 10rpx;
+				padding-top: 20rpx;
+				text-align: right;
+				.decimal {
+					font-size: 24rpx;
+					margin-top: 4rpx;
+				}
+				.number {
+					color: $u-tips-color;
+					font-size: 24rpx;
+				}
+			}
+		}
+		.total {
+			margin-top: 20rpx;
+			text-align: right;
+			font-size: 24rpx;
+			.total-price {
+				font-size: 32rpx;
+			}
+		}
+		.bottom {
+			display: flex;
+			margin-top: 40rpx;
+			padding: 0 10rpx;
+			justify-content: space-between;
+			align-items: center;
+			.btn {
+				line-height: 52rpx;
+				width: 160rpx;
+				border-radius: 26rpx;
+				border: 2rpx solid $u-border-color;
+				font-size: 26rpx;
+				text-align: center;
+				color: $u-type-info-dark;
+			}
+			.evaluate {
+				color: $u-type-warning-dark;
+				border-color: $u-type-warning-dark;
+			}
+		}
+	}
+.centre {
+	text-align: center;
+	margin: 200rpx auto;
+	font-size: 32rpx;
+	image {
+		width: 164rpx;
+		height: 164rpx;
+		border-radius: 50%;
+		margin-bottom: 20rpx;
+	}
+	.tips {
+		font-size: 24rpx;
+		color: #999999;
+		margin-top: 20rpx;
+	}
+	.btn {
+		margin: 80rpx auto;
+		width: 200rpx;
+		border-radius: 32rpx;
+		line-height: 64rpx;
+		color: #ffffff;
+		font-size: 26rpx;
+		background: linear-gradient(270deg, rgba(249, 116, 90, 1) 0%, rgba(255, 158, 1, 1) 100%);
+	}
+}
+.wrap {
+	display: flex;
+	flex-direction: column;
+	height: calc(100vh - var(--window-top));
+	width: 100%;
+}
+	#shopping-car{
+		position: fixed;
+		z-index: 9999;
+		right: 26rpx;
+		bottom: 300rpx;
+	}
+</style>

pages/home/integral-mall/integral_mall_car.vue

@@ -0,0 +1,428 @@
+<template>
+	<view class="page">
+		<!-- 购物车 -->
+		<u-navbar title="购物车" :background="background" title-color="#ffffff" back-icon-color="#ffffff" is-fixed>
+			<template slot="right">
+				<text class="navbar-button" v-show="enbleEdit==false" @click="enbleEdit=true">编辑</text>
+				<text class="navbar-button" v-show="enbleEdit==true" @click="enbleEdit=false">完成</text>
+			</template>
+		</u-navbar>
+		<scroll-view scroll-y @scrolltolower="scrollBottom" class="scroll-view-container">
+			<view class="page-box">
+				<u-checkbox-group class="order" @change="checkboxGroupChange">
+					<u-checkbox @change="checkboxChange" style="width: 100%;" v-model="item.checked" shape="circle" v-for="(item,index) in goodsList" :key="item.id" :name="item.id">
+						<view class="item">
+							<view class="left">
+								<image :src="item.goodsUrl" mode="aspectFill"></image>
+							</view>
+							<view class="content">
+								<view class="title u-line-2">{{ item.title }}</view>
+								<view class="type">{{ item.type }}</view>
+								<!-- <view class="delivery-time">发货时间 {{ item.deliveryTime }}</view> -->
+								<view class="price-row">
+									<view class="brand">
+										{{ item.brand }}
+									</view>
+									<view class="demo-count-box">
+										<u-number-box v-model="selectedCount" :min="1" @change="selectedCountChange"></u-number-box>
+									</view>
+								</view>
+							</view>
+						</view>
+					</u-checkbox>
+				</u-checkbox-group>
+				<u-loadmore :status="loadStatus" bgColor="#f2f2f2"></u-loadmore>
+			</view>
+		</scroll-view>	
+		<view class="navigation">
+			<view class="left">
+				<view class="item">
+					<u-checkbox shape="circle" @change="checkedAll" v-model="checkedAllValue">全选</u-checkbox>
+				</view>
+			</view>
+			<view class="right" v-show="enbleEdit==false">
+				<view class="total">合计：<text>2条</text></view>
+				<view class="buy btn u-line-1" @click="handleGoConfirm">立即兑换</view>
+			</view>
+			<view class="right" v-show="enbleEdit==true">
+				<view class="buy btn u-line-1" @click="handleDel">删除</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				background: {
+					backgroundColor: "#0291FD",
+					color: "#ffffff"
+
+				},
+				buttonCustomStyle: {
+					color: "#ffffff",
+					background: "transparent",
+					border: "none"
+				},
+				selectedCount: 0,
+				checkedAllValue: false,
+				enbleEdit: false,
+				loadStatus: "false",
+				goodsList: [],
+				list: [{
+						id: "1",
+						goodsUrl: 'https://img12.360buyimg.com/n7/jfs/t16642/126/2693663818/450163/6879e8ce/5b06d93bN6305bd94.png',
+						title: '【胎动】T-M3蘑菇钉，24支/盒， 3mm ',
+						type: '胎动品牌；修补类型；普通积分',
+						deliveryTime: '付款后30天内发货',
+						price: '348.58',
+						number: 2,
+						checked: false,
+						disabled: false,
+						brand: "SAILUN"
+					},
+					{
+						id: "2",
+						goodsUrl: 'https://img12.360buyimg.com/n7/jfs/t1/47645/22/6120/140457/5d3d17deEec9f8e8d/3687ff03ca89b48c.jpg',
+						title: '【胎动】T-M3蘑菇钉，24支/盒， 3mm ',
+						type: '胎动品牌；修补类型；普通积分',
+						deliveryTime: '付款后30天内发货',
+						price: '135.00',
+						number: 1,
+						checked: false,
+						disabled: false,
+						brand: "SAILUN"
+					},
+					{
+						id: "3",
+						goodsUrl: 'https://img11.360buyimg.com/n7/jfs/t1/88990/24/4208/105799/5de4c6e9E24bc09d0/f810effb14c9c13a.jpg',
+						title: '【胎动】T-M3蘑菇钉，24支/盒， 3mm ',
+						type: '胎动品牌；修补类型；普通积分',
+						deliveryTime: '付款后7天内发货',
+						price: '128.05',
+						number: 1,
+						checked: false,
+						disabled: false,
+						brand: "SAILUN"
+					},
+					{
+						id: "4",
+						goodsUrl: 'https://img12.360buyimg.com/n7/jfs/t1/93698/23/4500/114562/5de713dfEfc997085/e8deaa979909851d.jpg',
+						title: '【胎动】T-M3蘑菇钉，24支/盒， 3mm ',
+						type: '胎动品牌；修补类型；普通积分',
+						deliveryTime: '保质5年',
+						price: '1998',
+						number: 3,
+						checked: false,
+						disabled: false,
+						brand: "SAILUN"
+					},
+					{
+						id: "5",
+						goodsUrl: 'https://img11.360buyimg.com/n7/jfs/t16642/126/2693663818/450163/6879e8ce/5b06d93bN6305bd94.png',
+						title: '【胎动】T-M3蘑菇钉，24支/盒， 3mm ',
+						type: '胎动品牌；修补类型；普通积分',
+						deliveryTime: '保质5年',
+						price: '2354',
+						number: 1,
+						checked: false,
+						disabled: false,
+						brand: "SAILUN"
+					},
+					{
+						id: "6",
+						goodsUrl: 'https://img10.360buyimg.com/n7/jfs/t1/68753/35/2229/118427/5d089fb7Ee5b93887/2e3bbc7fec247fdc.jpg',
+						title: '【胎动】T-M3蘑菇钉，24支/盒， 3mm ',
+						type: '胎动品牌；修补类型；普通积分',
+						deliveryTime: '珍藏10年好酒',
+						price: '1543',
+						number: 3,
+						checked: false,
+						disabled: false,
+						brand: "SAILUN"
+					},
+					{
+						id: "7",
+						goodsUrl: 'https://img10.360buyimg.com/n7/jfs/t1/68753/35/2229/118427/5d089fb7Ee5b93887/2e3bbc7fec247fdc.jpg',
+						title: '【胎动】T-M3蘑菇钉，24支/盒， 3mm ',
+						type: '胎动品牌；修补类型；普通积分',
+						deliveryTime: '口感好',
+						price: '120',
+						number: 1,
+						checked: false,
+						disabled: false,
+						brand: "SAILUN"
+					},
+					{
+						id: "8",
+						goodsUrl: 'https://img10.360buyimg.com/n7/jfs/t1/68753/35/2229/118427/5d089fb7Ee5b93887/2e3bbc7fec247fdc.jpg',
+						title: '【胎动】T-M3蘑菇钉，24支/盒， 3mm ',
+						type: '胎动品牌；修补类型；普通积分',
+						deliveryTime: '使用方便',
+						price: '451',
+						number: 9,
+						checked: false,
+						disabled: false,
+						brand: "SAILUN"
+					}
+				]
+			}
+		},
+		onLoad() {
+			this.addRandomData();
+		},
+		
+		methods: {
+			scrollBottom: function() {
+				this.loadStatus = 'loading';
+				// 模拟数据加载
+				setTimeout(() => {
+					this.addRandomData();
+					this.loadStatus = 'loadmore';
+				}, 1000)
+			},
+			selectedCountChange: function(){},
+			checkboxGroupChange: function(params) {
+				console.log(1)
+				console.log(params)
+			},
+			checkboxChange: function(params) {
+				if(!params.value){
+					this.checkedAllValue = false;
+				}
+			},
+			checkedAll: function(params) {
+				if(params.value){
+					this.goodsList.map(val => {
+						val.checked = true;
+					})
+				}else{
+					this.goodsList.map(val => {
+						val.checked = false;
+					})
+				}
+				
+			},
+			handleGoConfirm: function(){
+				uni.navigateTo({
+					url: "/pages/home/integral-mall/integral_mall_confirmorder"
+				})
+			},
+			handleDel: function(){},
+			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();
+					if(this.checkedAllValue){
+						item.checked = true;
+					};
+					this.goodsList.push(item);
+				}
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.scroll-view-container{
+		width: 100%;
+		height: calc(100vh - 176rpx);
+	}
+	.navbar-button {
+		padding: 24rpx 26rpx;
+		display: inline-block;
+	}
+
+	.order {
+		width: 710rpx;
+		background-color: #ffffff;
+		margin: 20rpx auto;
+		border-radius: 20rpx;
+		box-sizing: content-box;
+		padding: 20rpx;
+		font-size: 28rpx;
+		.top {
+			display: flex;
+			justify-content: space-between;
+
+			.left {
+				display: flex;
+				align-items: center;
+
+				.store {
+					margin: 0 10rpx;
+					font-size: 32rpx;
+					font-weight: bold;
+				}
+			}
+
+			.right {
+				color: $u-type-warning-dark;
+			}
+		}
+
+		.item {
+			display: flex;
+			margin: 20rpx 0 0;
+
+			.left {
+				margin-right: 20rpx;
+
+				image {
+					width: 200rpx;
+					height: 200rpx;
+					border-radius: 10rpx;
+				}
+			}
+
+			.content {
+				.title {
+					font-size: 28rpx;
+					line-height: 50rpx;
+					color: #606266;
+				}
+
+				.type {
+					margin: 10rpx 0;
+					font-size: 24rpx;
+					color: $u-tips-color;
+				}
+
+				.delivery-time {
+					color: #e5d001;
+					font-size: 24rpx;
+				}
+
+				.price-row {
+					display: flex;
+					justify-content: space-between;
+					margin: 10rpx 0;
+					font-size: 26rpx;
+
+					.price {
+						color: #FF0000;
+					}
+					.brand{
+						color: #999999;
+						background: #F3F3F3;
+						padding: 0 8rpx;
+						border-radius: 5rpx;
+					}
+					.exchange {
+						background: #0094FE;
+						color: #FFFFFF;
+						padding: 4rpx 16rpx;
+						line-height: 1.5;
+					}
+				}
+			}
+
+			.right {
+				margin-left: 10rpx;
+				padding-top: 20rpx;
+				text-align: right;
+
+				.decimal {
+					font-size: 24rpx;
+					margin-top: 4rpx;
+				}
+
+				.number {
+					color: $u-tips-color;
+					font-size: 24rpx;
+				}
+			}
+		}
+
+		.total {
+			margin-top: 20rpx;
+			text-align: right;
+			font-size: 24rpx;
+
+			.total-price {
+				font-size: 32rpx;
+			}
+		}
+
+		.bottom {
+			display: flex;
+			margin-top: 40rpx;
+			padding: 0 10rpx;
+			justify-content: space-between;
+			align-items: center;
+
+			.btn {
+				line-height: 52rpx;
+				width: 160rpx;
+				border-radius: 26rpx;
+				border: 2rpx solid $u-border-color;
+				font-size: 26rpx;
+				text-align: center;
+				color: $u-type-info-dark;
+			}
+
+			.evaluate {
+				color: $u-type-warning-dark;
+				border-color: $u-type-warning-dark;
+			}
+		}
+	}
+
+	.navigation {
+		display: flex;
+		width: 100%;
+		justify-content: space-between;
+		margin-top: 100rpx;
+		border: solid 2rpx #f2f2f2;
+		background-color: #ffffff;
+		padding: 16rpx 0;
+		position: fixed;
+		bottom: 0;
+		z-index: 100;
+		.left {
+			display: flex;
+			font-size: 20rpx;
+
+			.item {
+				margin: 0 30rpx;
+
+				&.car {
+					text-align: center;
+					position: relative;
+
+					.car-num {
+						position: absolute;
+						top: -10rpx;
+						right: -10rpx;
+					}
+				}
+			}
+		}
+
+		.right {
+			display: flex;
+			font-size: 28rpx;
+			align-items: center;
+
+			.btn {
+				line-height: 66rpx;
+				padding: 0 30rpx;
+				border-radius: 36rpx;
+				color: #ffffff;
+			}
+
+			.cart {
+				background-color: #ed3f14;
+				margin-right: 30rpx;
+			}
+
+			.buy {
+				margin: 0 16rpx;
+				background-color: #ff7900;
+			}
+		}
+	}
+</style>

pages/home/integral-mall/integral_mall_goods_details.vue

@@ -0,0 +1,257 @@
+<template>
+	<view>
+		<!-- 线上订货详情页 -->
+		<view class="demo-warter">
+			<u-swiper height="750" :list="goodsDetails.imageList" image="image"></u-swiper>
+			<view class="demo-info">
+				<view class="demo-title">
+					{{goodsDetails.title}}
+				</view>
+				<!-- <view class="demo-price">
+					{{goodsDetails.price}}元
+				</view> -->
+				<!-- <view class="demo-tag">
+					<view class="demo-tag-owner">
+						自营
+					</view>
+					<view class="demo-tag-text">
+						放心购
+					</view>
+				</view> -->
+				<view class="demo-shop">
+					库存：{{goodsDetails.count}}
+				</view>
+				<view class="demo-count">
+					<view class="demo-count-seleced">
+						已选：{{selectedCount}}
+					</view>
+					<view class="demo-count-box">
+						<u-number-box v-model="selectedCount" :min="1" @change="selectedCountChange"></u-number-box>
+					</view>
+				</view>
+			</view>
+		</view>
+		<u-sticky :enable="tabEnable" :offset-top="tabOffset">
+			<u-tabs class="tabCustomStyle" :list="tabList" :is-scroll="false" :current="tabCurrent" @change="tabChange"
+			 :bg-color="tabBg"></u-tabs>
+		</u-sticky>
+		<!-- 这里装商品和详情的内容 -->
+		<view style="height: 750px;"></view>
+		<view class="navigation">
+			<!-- <view class="left">
+				<view class="item">
+					<u-icon name="server-fill" :size="40" :color="$u.color['contentColor']"></u-icon>
+					<view class="text u-line-1">客服</view>
+				</view>
+				<view class="item">
+					<u-icon name="home" :size="40" :color="$u.color['contentColor']"></u-icon>
+					<view class="text u-line-1">店铺</view>
+				</view>
+				<view class="item car">
+					<u-badge class="car-num" :count="9" type="error" :offset="[-3, -6]"></u-badge>
+					<u-icon name="shopping-cart" :size="40" :color="$u.color['contentColor']"></u-icon>
+					<view class="text u-line-1">购物车</view>
+				</view>
+			</view> -->
+			<view class="right">
+				<view class="cart btn u-line-1" @click="inShopcar">加入购物车</view>
+				<view class="buy btn u-line-1" @click="handleGoConfirm">立即兑换</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				goodsDetails: {
+					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',
+					imageList: [{
+						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: 35,
+						title: '175/70R14 88T XL SH08 BGSL',
+						count: '100',
+						image: 'https://img12.360buyimg.com/n7/jfs/t1/47645/22/6120/140457/5d3d17deEec9f8e8d/3687ff03ca89b48c.jpg',
+					}],
+				},
+				selectedCount: 0, //选中的商品数量
+				tabList: [{
+					name: '商品'
+				}, {
+					name: '详情'
+				}],
+				tabCurrent: 0,
+				tabBg: "#ffffff",
+				tabEnable: false,
+				tabOffset: 0
+			}
+		},
+		methods: {
+			selectedCountChange: function() {},
+			tabChange: function(params) {
+				this.tabCurrent = params
+				console.log(params)
+			},
+			inShopcar(){
+				this.$u.route({
+					url: 'integral-mall/integral_mall_car',
+				})
+			},
+			handleGoConfirm: function(){
+				console.log("立即兑换")
+				uni.navigateTo({
+					url: "/pages/home/integral-mall/integral_mall_confirmorder"
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.demo-warter {
+		border-radius: 8px;
+		background-color: #ffffff;
+		position: relative;
+	}
+
+	.demo-info {
+		margin: 5px;
+		padding: 8px;
+	}
+
+	.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;
+	}
+
+	.demo-count {
+		display: flex;
+		font-size: 22rpx;
+		margin-top: 5px;
+		justify-content: space-between;
+		font-weight: 600;
+	}
+
+	.tabCustomStyle {
+		border-top: 8rpx solid #EFEFEF;
+		border-bottom: 8rpx solid #EFEFEF;
+	}
+
+	/* 底部提交栏目 */
+	.navigation {
+		display: flex;
+		width: 100%;
+		margin-top: 100rpx;
+		border: solid 2rpx #f2f2f2;
+		background-color: #ffffff;
+		padding: 16rpx 26rpx;
+		position: fixed;
+		bottom: 0;
+		z-index: 100;
+		.left {
+			display: flex;
+			font-size: 20rpx;
+
+			.item {
+				margin: 0 30rpx;
+
+				&.car {
+					text-align: center;
+					position: relative;
+
+					.car-num {
+						position: absolute;
+						top: -10rpx;
+						right: -10rpx;
+					}
+				}
+			}
+		}
+
+		.right {
+			display: flex;
+			font-size: 28rpx;
+			align-items: center;
+			width: 100%;
+			.btn {
+				line-height: 66rpx;
+				padding: 0 30rpx;
+				border-radius: 36rpx;
+				color: #ffffff;
+				text-align: center;
+			}
+
+			.cart {
+				background-color: #ed3f14;
+				width: 50%;
+				margin-right: 30rpx;
+			}
+
+			.buy {
+				width: 50%;
+				background-color: #ff7900;
+			}
+		}
+	}
+</style>

pages/home/shopping/inline_shop.vue → static/inline_shop.vue

@@ -6,19 +6,19 @@
 			<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 style="position: static;">
-						<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-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 style="position: static;">
+					<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>
+		<scroll-view scroll-y @scrolltolower="scrollBottom" class="scroll-view-container">
 			<u-waterfall v-model="flowList" ref="uWaterfall">
 				<template v-slot:left="{leftList}">
 					<view class="demo-warter" v-for="(item, index) in leftList" :key="index" @click="inDetails">
@@ -69,7 +69,7 @@
 				</template>
 			</u-waterfall>
 			<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
-		</view>
+		</scroll-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>
@@ -226,14 +226,7 @@
 		onLoad() {
 			this.addRandomData();
 		},
-		onReachBottom() {
-			this.loadStatus = 'loading';
-			// 模拟数据加载
-			setTimeout(() => {
-				this.addRandomData();
-				this.loadStatus = 'loadmore';
-			}, 1000)
-		},
+		
 		methods: {
 			handleGo: function(value) {
 				var urlStr = ""
@@ -252,6 +245,14 @@
 					url: urlStr
 				});
 			},
+			scrollBottom:function() {
+				this.loadStatus = 'loading';
+				// 模拟数据加载
+				setTimeout(() => {
+					this.addRandomData();
+					this.loadStatus = 'loadmore';
+				}, 1000)
+			},
 			addRandomData() {
 				for (let i = 0; i < 10; i++) {
 					let index = this.$u.random(0, this.list.length - 1);
@@ -328,7 +329,10 @@
 		background: #f6f6f6;
 		padding: 8rpx;
 	}
-
+	.scroll-view-container{
+		width: 100%;
+		height: calc(100% - 88rpx);
+	}
 	.demo-warter {
 		border-radius: 8px;
 		margin: 5px;

pages/home/shopping/integral_mall.vue → static/integral_mall.vue

@@ -13,26 +13,29 @@
 				<u-search placeholder="请输入商品名称或种类" :animation="true" :style="inputCustomStyle" :show-action="false" v-model="keyword" @focus="inputFocus" @blur="inputBlur"></u-search>
 			</view>
 		</u-sticky>
-		<view class="page-box">
-			<view class="order" >
-				<view class="item" v-for="(item, index) in goodsList" :key="index">
-					<view class="left"><image :src="item.goodsUrl" mode="aspectFill"></image></view>
-					<view class="content">
-						<view class="title u-line-2">{{ item.title }}</view>
-						<view class="type">{{ item.type }}</view>
-						<!-- <view class="delivery-time">发货时间 {{ item.deliveryTime }}</view> -->
-						<view class="price-row">
-							<view class="price">
-								{{ item.price }}积分
+		<scroll-view scroll-y style="height: 2119rpx;width: 100%;" @scrolltolower="reachBottom">
+			111
+			<!-- <view class="page-box">
+				<view class="order" >
+					<view class="item" v-for="(item, index) in goodsList" :key="index">
+						<view class="left"><image :src="item.goodsUrl" mode="aspectFill"></image></view>
+						<view class="content">
+							<view class="title u-line-2">{{ item.title }}</view>
+							<view class="type">{{ item.type }}</view>
+							<view class="delivery-time">发货时间 {{ item.deliveryTime }}</view>
+							<view class="price-row">
+								<view class="price">
+									{{ item.price }}积分
+								</view>
+								<view class="exchange">加入购物车</view>
 							</view>
-							<view class="exchange">加入购物车</view>
 						</view>
 					</view>
 				</view>
-			</view>
-			<u-loadmore :status="loadStatus" bgColor="#f2f2f2"></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-loadmore :status="loadStatus" bgColor="#f2f2f2"></u-loadmore>
+			</view> -->
+		</scroll-view>
+		<view id="shopping-car" @click="handleGoCar"><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">
@@ -165,14 +168,7 @@
 		onLoad() {
 			this.addRandomData();
 		},
-		onReachBottom() {
-			this.loadStatus = 'loading';
-			// 模拟数据加载
-			setTimeout(() => {
-				this.addRandomData();
-				this.loadStatus = 'loadmore';
-			}, 1000)
-		},
+		
 		methods: {
 			inputFocus: function(){
 				console.log(111);
@@ -198,11 +194,29 @@
 					case "mallMenu2":
 						urlStr: "../../mallMenu2/index2";
 						break;
+				
+						
 				};
+				console.log(urlStr)
 				uni.switchTab({
 					url: urlStr
 				});
 			},
+			handleGoCar: function(){
+				console.log("进入")
+				uni.navigateTo({
+					url: "/pages/template/order/index"
+				})
+			},
+			reachBottom() {
+				console.log("到底了")
+				this.loadStatus = 'loading';
+				// 模拟数据加载
+				setTimeout(() => {
+					this.addRandomData();
+					this.loadStatus = 'loadmore';
+				}, 1000)
+			},
 			addRandomData() {
 				for (let i = 0; i < 10; i++) {
 					let index = this.$u.random(0, this.list.length - 1);