新增更多商品列表页面

components/tui-loadmore/tui-loadmore.vue

@@ -0,0 +1,161 @@
+<template>
+	<view class="tui-loadmore">
+		<view :class="['tui-loading-'+index, (index==3 && type)?'tui-loading-'+type:'']"></view>
+		<view class="tui-loadmore-tips">{{text}}</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "tuiLoadmore",
+		props: {
+			//显示文本
+			text: {
+				type: String,
+				default: "正在加载..."
+			},
+			//loading 样式 ：1,2,3
+			index: {
+				type: Number,
+				default: 1
+			},
+			//颜色设置，只有index=3时生效：primary，red，orange，green
+			type: {
+				type: String,
+				default: ""
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.tui-loadmore {
+		width: 48%;
+		margin: 1.5em auto;
+		line-height: 1.5em;
+		font-size: 24rpx;
+		text-align: center;
+	}
+
+	.tui-loading-1 {
+		margin: 0 5px;
+		width: 20px;
+		height: 20px;
+		display: inline-block;
+		vertical-align: middle;
+		-webkit-animation: a 1s steps(12) infinite;
+		animation: a 1s steps(12) infinite;
+		background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;
+		background-size: 100%;
+	}
+
+	@-webkit-keyframes a {
+		0% {
+			-webkit-transform: rotate(0deg);
+			transform: rotate(0deg);
+		}
+
+		to {
+			-webkit-transform: rotate(1turn);
+			transform: rotate(1turn);
+		}
+	}
+
+	@keyframes a {
+		0% {
+			-webkit-transform: rotate(0deg);
+			transform: rotate(0deg);
+		}
+
+		to {
+			-webkit-transform: rotate(1turn);
+			transform: rotate(1turn);
+		}
+	}
+
+	.tui-loadmore-tips {
+		display: inline-block;
+		vertical-align: middle;
+	}
+
+	.tui-loading-2 {
+		width: 28rpx;
+		height: 28rpx;
+		border: 1px solid #8f8d8e;
+		border-radius: 50%;
+		margin: 0 6px;
+		display: inline-block;
+		vertical-align: middle;
+		clip-path: polygon(0% 0%,100% 0%,100% 30%,0% 30%);
+		animation: rotate 1s linear infinite;
+	}
+
+	@-webkit-keyframes rotate {
+		from {
+			transform: rotatez(0deg);
+		}
+
+		to {
+			transform: rotatez(360deg);
+		}
+	}
+
+	@keyframes rotate {
+		from {
+			transform: rotatez(0deg);
+		}
+
+		to {
+			transform: rotatez(360deg);
+		}
+	}
+
+	.tui-loading-3 {
+		display: inline-block;
+		margin: 0 6px;
+		vertical-align: middle;
+		width: 28rpx;
+		height: 28rpx;
+		background: 0 0;
+		border-radius: 50%;
+		border: 2px solid;
+		border-color: #e5e5e5 #e5e5e5 #e5e5e5 #8f8d8e;
+		animation: tui-rotate 0.7s linear infinite;
+	}
+
+	.tui-loading-3.tui-loading-primary {
+		border-color: #e5e5e5 #e5e5e5 #e5e5e5 #5677fc;
+	}
+
+	.tui-loading-3.tui-loading-green {
+		border-color: #e5e5e5 #e5e5e5 #e5e5e5 #19be6b;
+	}
+
+	.tui-loading-3.tui-loading-orange {
+		border-color: #e5e5e5 #e5e5e5 #e5e5e5 #ff7900;
+	}
+
+	.tui-loading-3.tui-loading-red {
+		border-color: #ededed #ededed #ededed #ed3f14;
+	}
+
+	@-webkit-keyframes tui-rotate {
+		0% {
+			transform: rotate(0);
+		}
+
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+
+	@keyframes tui-rotate {
+		0% {
+			transform: rotate(0);
+		}
+
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+</style>

components/tui-nomore/tui-nomore.vue

@@ -0,0 +1,115 @@
+<template>
+	<view class="tui-nomore-class tui-loadmore-none">
+		<view :class="[isDot?'tui-nomore-dot':'tui-nomore']">
+			<view :style="{backgroundColor:backgroundColor}" :class="[isDot?'tui-dot-text':'tui-nomore-text']">{{isDot?dotText:text}}</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "tuiNomore",
+		props: {
+			//当前页面背景颜色
+			backgroundColor: {
+				type: String,
+				default: "#fafafa"
+			},
+			//是否以圆点代替 "没有更多了"
+			isDot: {
+				type: Boolean,
+				default: false
+			},
+			//isDot为false时生效
+			text: {
+				type: String,
+				default: "没有更多了"
+			}
+		},
+		data() {
+			return {
+				dotText: "●"
+			};
+		}
+	}
+</script>
+
+<style scoped>
+	.tui-loadmore-none {
+		width: 50%;
+		margin: 1.5em auto;
+		line-height: 1.5em;
+		font-size: 24rpx;
+		display: flex;
+		justify-content: center;
+	}
+
+	.tui-nomore {
+		width: 100%;
+		height: 100%;
+		position: relative;
+		display: flex;
+		justify-content: center;
+		margin-top: 10rpx;
+		padding-bottom: 6rpx;
+	}
+
+	.tui-nomore::before {
+		content: ' ';
+		position: absolute;
+		border-bottom: 1rpx solid #e5e5e5;
+		-webkit-transform: scaleY(0.5);
+		transform: scaleY(0.5);
+		width: 100%;
+		top: 18rpx;
+		left: 0;
+	}
+
+	.tui-nomore-text {
+		color: #999;
+		font-size: 24rpx;
+		text-align: center;
+		padding: 0 18rpx;
+		height: 36rpx;
+		line-height: 36rpx;
+		position: relative;
+		z-index: 1;
+	}
+
+	.tui-nomore-dot {
+		position: relative;
+		text-align: center;
+		-webkit-display: flex;
+		display: flex;
+		-webkit-justify-content: center;
+		justify-content: center;
+		margin-top: 10rpx;
+		padding-bottom: 6rpx;
+	}
+
+	.tui-nomore-dot::before {
+		content: '';
+		position: absolute;
+		border-bottom: 1rpx solid #e5e5e5;
+		-webkit-transform: scaleY(0.5)  translateX(-50%);
+		transform: scaleY(0.5)  translateX(-50%);
+		width: 360rpx;
+		top: 18rpx;
+		left: 50%;
+	}
+
+	.tui-dot-text {
+		position: relative;
+		color: #e5e5e5;
+		font-size: 10px;
+		text-align: center;
+		width: 50rpx;
+		height: 36rpx;
+		line-height: 36rpx;
+		-webkit-transform: scale(0.8);
+		transform: scale(0.8);
+		-webkit-transform-origin: center center;
+		transform-origin: center center;
+		z-index: 1;
+	}
+</style>

pages/goods/good-floorMore.vue

@@ -0,0 +1,435 @@
+<template>
+	<view class="container clearfix tui-skeleton">
+		<!-- 骨架 -->
+		<tui-skeleton v-if="skeletonShow" :isLoading="true" loadingType="2"></tui-skeleton>
+		<!-- 商品列表 -->
+		<view class="container-section clearfix">
+			<!-- 商品列表区域 -->
+			<view class="product-list" v-for="(pro,index) in productList" :key="index" @click.stop="Details(pro)">
+				<view class="product-list-image">
+					<image class="product-image" :src="pro.mainImage" mode=""></image>
+					<!-- 推荐 -->
+					<image class="product-icon" :src="StaticUrl+'recommend.png'" mode="" v-if="pro.recommend === '1'"></image>
+				</view>
+				<view class="product-list-msg">
+					<view class="product-msg-name">{{ pro.name }}</view>
+					<view class="product-list-tag " v-if="pro.activeStatus == 1">
+						<text class="tag tag-02">活动价</text>
+					</view>
+					<view class="product-list-pri">
+						<view class="price">￥{{ pro.price | PriceFormat}}</view>
+						<view class="carts" @click.stop="handAddCarts(pro)">
+							<view class="carts-add">
+								<text class="iconfont icon-gouwuche"></text>
+							</view>
+						</view>
+					</view>
+				</view> 
+			</view>
+		</view>
+		<tui-loadmore :index="2" v-if="hasNextPage"></tui-loadmore>
+		<tui-nomore  text="没有更多了" v-else></tui-nomore>
+		<!-- 侧边 -->
+		<scroll-top :isScrollTop="isScrollTop" :bottom="160"></scroll-top>
+	</view>
+</template>
+
+<script>
+	import tuiSkeleton from "@/components/tui-skeleton/tui-skeleton"
+	import tuiLoadmore from '@/components/tui-loadmore/tui-loadmore.vue';
+	import tuiNomore from '@/components/tui-nomore/tui-nomore.vue';
+	import authorize from '@/common/config/authorize.js'
+	import btSearch from '@/components/uni-search/bt-search.vue'
+	import banner from '@/components/cm-module/homeIndex/banner.vue'
+	import { mapState,mapMutations} from 'vuex';
+	export default {
+		components:{
+			tuiSkeleton,
+			btSearch,
+			banner,
+			tuiLoadmore,
+			tuiNomore
+		},
+		data() {
+			return {
+				StaticUrl:this.$Static,
+				title:'', // 页面标题
+				floorId:'', //楼层id
+				userId:0,
+				skeletonShow: true,
+				productList:[],//商品列表
+				pageNum:1,
+				pageSize:10,
+				hasNextPage:false,
+				isScrollTop:false,
+				isRequest:false,
+			}
+		},
+		filters: {
+			//处理金额
+			PriceFormat: function(text) {
+				return Number(text).toFixed(2)
+			}
+		},
+		onLoad(options) {
+			console.log(options);
+			this.floorId = options.floorId
+			this.userId = this.userInfo?.userId
+			this.fetchProductList()
+			uni.setNavigationBarTitle({
+				title:options.title
+			})
+		},
+		computed: {
+			...mapState(['hasLogin','userInfo','identity','isActivity'])
+		},
+		methods: {
+			//初始化商品数据列表
+			fetchProductList(){
+				this.ProductService.QueryProductList(
+					{
+						pageNum:this.pageNum,
+						pageSize:this.pageSize,
+						floorId:this.floorId
+					}
+				)
+				.then(response =>{
+					let data = response.data;
+					this.productList = data.list
+					this.hasNextPage = data.hasNextPage
+					this.title = data.title
+					// 获取购物车商品数量
+					// this.GetCartNumber();
+					this.skeletonShow = false
+				})
+				.catch(error =>{
+					this.$util.msg(error.msg,2000)
+				})
+			},
+			//上滑加载更多
+			GetOnReachBottomProductList(){
+				this.pageNum+=1
+				this.ProductService.QueryProductList(
+					{
+						pageNum:this.pageNum,
+						pageSize:this.pageSize,
+						floorId:this.floorId
+					}
+				)
+				.then(response =>{
+					let data = response.data;
+					this.hasNextPage = data.hasNextPage
+					this.productList = this.productList.concat(data.list) 
+				})
+				.catch(error =>{
+					this.$util.msg(error.msg,2000)
+				})
+			},
+			// 商品详情
+			Details(pro){
+				this.$api.navigateTo(`/pages/goods/product?productId=${pro.productId}`)
+			},
+			// 添加到购物车
+			handAddCarts(pro){
+				if(!this.hasLogin){
+					this.$api.navigateTo(`/pages/login/login`)
+				}else{
+					this.ProductService.shoppingAddCart(
+						{
+							productId:pro.productId,
+							userId:this.userId,
+							productCount:1,
+							heUserId:0,
+						}
+					)
+					.then(response => {
+						this.$util.msg('加入购物车成功',1500,true,'success')
+						this.GetCartNumber()
+					})
+					.catch(error =>{
+						this.$util.msg(error.msg,2000);
+					})
+				}
+			}, 
+			//查询购物车数量
+			GetCartNumber(){
+				this.ProductService.QueryShoppingQuantity(
+					{
+						userId:this.userId,
+					}
+				)
+				.then(response => {
+					this.$store.commit('updateAllNum',response.data)
+				})
+				.catch(error =>{
+					console.log('查询购物车数量错误信息',error)
+				})
+			}
+		},
+		onShow() {
+			this.GetCartNumber()
+		},
+		// 监听页面滚动事件
+		onPageScroll(e) {
+			if(e.scrollTop>400){
+				this.isScrollTop = true
+			}else{
+				this.isScrollTop = false
+			}	
+		},
+		onPullDownRefresh() {//下拉刷新
+			// this.getHomeInformation()
+			this.pageNum = 1
+			this.fetchProductList()
+			setTimeout(()=>{
+				uni.stopPullDownRefresh()
+			}, 2000)
+		},
+		onReachBottom() {
+			console.log('触底了..');
+			if(this.hasNextPage){
+				this.GetOnReachBottomProductList()
+			}	
+		},
+		onShareAppMessage(res){//分享转发
+			if (res.from === 'button') {
+		      // 来自页面内转发按钮
+		    }
+			return {
+			  title: '国内外知名美容院线护肤品线上商城~',
+			  path: 'pages/tabBar/index/index',
+			  imageUrl:'https://static.caimei365.com/app/mini-hehe/icon/icon-index-share.jpg'
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	page{
+		background-color: #F7F7F7;
+	}
+	.container{
+		width: 750rxp;
+		height: 100vh;
+	}
+	.navbar-wrap {
+		position: fixed;
+		width: 100%;
+		top: 0;
+		z-index: 100000;
+		box-sizing: border-box;
+		background-image: linear-gradient(0deg, #f83c6c 0%, #fa55bf 100%);
+		background-size: cover;
+		border-bottom:none;
+		&.bgnone{
+			background: rgba(255,255,255,0);
+		}
+		&.bgclass{
+			background: #F94A9B;
+		}
+	}
+	.navbar-text {
+		 font-size: 30rpx;
+		 color: #000000;
+		 font-weight: 500;
+	}
+	.navbar-text.center{
+		text-align: center;
+	}
+	.navbar-text.left{
+		text-align: left;
+		padding-left: 45px;
+	}
+	.navbar-icon {
+		 position: fixed;
+		 display: flex;
+		 box-sizing: border-box;
+	}
+	.navbar-icon .iconfont {
+		 display: inline-block;
+		 overflow: hidden;
+		 font-size: 44rpx;
+		 padding-right:40rpx;
+		 margin-top: 1px;
+	}
+	.navbar-icon .icon-iconfonticonfontsousuo1 {
+		color: #000000;
+	}
+	.navbar-icon view {
+		 height: 18px;
+		 border-left: 0.5px solid rgba(0,0,0, 0.3);
+		 margin-top: 6px;
+	}
+	.navbar-loading {
+		 background: #fff;
+		 text-align: center;
+	}
+	.search-input{
+		width: 100%;
+		height: 110rpx;
+		padding: 20rpx 24rpx;
+		box-sizing: border-box;
+		.gosearch-btn{
+			width: 100%;
+			height: 100%;
+			border-radius: 40rpx;
+			background: #F0F0F0;
+			margin: 0 auto;
+			font-size: 28rpx;
+			line-height: 70rpx;
+			color: #8A8A8A;
+			background: #FFFFFF;
+			position: relative;
+			box-sizing: border-box;
+			padding-left: 80rpx;
+			.search-icon{
+				width: 80rpx;
+				height: 70rpx;
+				position:absolute ;
+				left: 0;
+				top: 0;
+				text-align: center;
+				line-height: 70rpx;
+				.icon-iconfonticonfontsousuo1{
+					margin:0 6rpx;
+					font-size: $font-size-34;
+					color: #8A8A8A;
+					z-index: 10;
+				}
+			}
+			.search-text{
+				font-size: $font-size-24;
+				line-height: 70rpx;
+				color: #8A8A8A;
+			}
+		}
+	}
+	.container-section{
+		width: 100%;
+		height: auto;
+		background-color: #F7F7F7;
+		box-sizing: border-box;
+		padding: 0 24rpx;
+		.product-list{
+			width: 339rpx;
+			height: 532rpx;
+			float: left;
+			margin-right: 24rpx;
+			margin-top: 24rpx;
+			background-color: #FFFFFF;
+			border-radius: 16rpx;
+			&:nth-child(2n){
+				margin-right: 0;
+			}
+			.product-list-image{
+				width: 100%;
+				height: 339rpx;
+				float: left;
+				position: relative;
+				.product-image{
+					width: 100%;
+					height: 100%;
+					display: block;
+					border-radius: 16rpx 16rpx 0 0;
+				}
+				.product-icon{
+					width: 68rpx;
+					height: 55rpx;
+					display: block;
+					position: absolute;
+					top: 0;
+					left: 34rpx;
+				}
+			}
+			.product-list-msg{
+				width: 100%;
+				height: 193rpx;
+				box-sizing: border-box;
+				padding: 16rpx 24rpx;
+				float: left;
+				position: relative;
+				.product-msg-name{
+					width: 100%;
+					height: 72rpx;
+					line-height: 35rpx;
+					text-overflow: ellipsis;
+					overflow: hidden;
+					display: -webkit-box;
+					-webkit-line-clamp: 2;
+					line-clamp: 2;
+					-webkit-box-orient: vertical;
+					font-size: $font-size-26;
+					color: #333333;
+					text-align: justify;
+					float: left;
+				}
+				.product-list-tag{
+					position: relative;
+					z-index: 9;
+					width: 100%;
+					height: 30rpx;
+					margin-top: 8rpx;
+					float: left;
+					.tag{
+						display: inline-block;
+						height: 32rpx;
+						font-size: 22rpx;
+						line-height: 30rpx;
+						text-align: center;
+						color: #f83c6c;
+						float: left;
+						margin-right: 10rpx;
+						&.tag-02{
+							width: 80rpx;
+							background: url(https://static.caimei365.com/app/mini-hehe/icon/icon-active.png)top center no-repeat;
+							background-size: contain;
+						}
+						&.tag-01{
+							width: 56rpx;
+							color: #fff;
+							background-color: #f83c6c;
+							border-radius: 4rpx;
+						}
+					}
+				}
+				.product-list-pri{
+					width: 100%;
+					height: 44rpx;
+					float: left;
+					position: absolute;
+					bottom: 16rpx;
+					left: 0;
+					box-sizing: border-box;
+					padding: 0 24rpx;
+					.price{
+						float: left;
+						font-size:$font-size-26;
+						color: #f83c6c;
+						font-weight: bold;
+						line-height: 44rpx;
+					}
+					.carts{
+						float: right;
+						.carts-add{
+							width: 44rpx;
+							height: 44rpx;
+							text-align: center;
+							line-height: 44rpx;
+							background-color: #ff457b;
+							border-radius: 50%;
+							.iconfont{
+								font-size: 32rpx;
+								color: #FFFFFF;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+	.clearfix::after{
+		content: "";
+		display: block;
+		clear: both;
+	}
+</style>