上传文件至 'pages/goods'

pages/goods/all.vue

@@ -0,0 +1,269 @@
+<template>
+	<view class="app-container">
+		<view class="top-container">
+			<view class="tab">
+				<view class="item" :class="screenType === 0 ? 'current':''" @tap="changeScreen(0)">综合</view>
+				<view class="item" :class="screenType === 1 ? 'current':''" @tap="changeScreen(1)">销量</view>
+				<view class="item" :class="screenType === 2 || screenType === 3 ? 'current':''"  @tap="changeScreen(2)">价格
+					<image src="@/static/icon/price_1.png" v-if="screenType === 2"></image>
+					<image src="@/static/icon/price_2.png" v-if="screenType === 3"></image>
+					<image src="@/static/icon/price_0.png" v-if="screenType != 2 && screenType != 3"></image>
+				</view>
+				<view class="item" :class="screenType === 4 ? 'current':''" @tap="changeScreen(4)">上架时间</view>
+			</view>
+			<view class="icon">
+				<image src="@/static/icon/show_1.png" v-if="showType == 1" @tap="showType = 2"></image>
+				<image src="@/static/icon/show_2.png" v-if="showType == 2" @tap="showType = 1"></image>
+			</view>
+		</view>
+		<view class="goods-waterfall-list" v-show="showType == 1">
+			<view class="left">
+				<block v-for="(item, index) in goodsList" :key='index'>
+					<view class="item" v-if="index%2==0" @tap="toGoodsDetail(item.goodsId)">
+						<view class="image">
+							<image :src="item.imgUrl" mode="aspectFill" class="img"></image>
+							<image :src="item.logo" mode="aspectFill" class="water" v-if="item.isShowWater"></image>
+						</view>
+						<view class="content">
+							<view class="title ellipsis-2">{{item.goodsName}}</view>
+							<view class="tags" v-if="item.tags1 && item.tags1.length > 0">
+								<view class="it" v-for="(it, idx) in item.tags1" :key="idx">{{it}}</view>
+							</view>
+							<view class="price">
+								<view class="price-1">¥{{item.goodsPrice | numToFixed}}</view>
+								<view class="price-2">¥{{item.orgGoodsPrice | numToFixed}}</view>
+							</view>
+							<view class="tags2" v-if="item.tags2 && item.tags2.length > 0">
+								<view class="it" v-for="(it, idx) in item.tags2" :key="idx">{{it}}</view>
+							</view>
+							<view class="text">销量：{{item.soldNum}}</view>
+						</view>
+					</view>
+				</block>
+			</view>
+			<view class="right">
+				<block v-for="(item, index) in goodsList" :key='index'>
+					<view class="item" v-if="index%2==1" @tap="toGoodsDetail(item.goodsId)">
+						<view class="image">
+							<image :src="item.imgUrl" mode="aspectFill" class="img"></image>
+							<image :src="item.logo" mode="aspectFill" class="water" v-if="item.isShowWater"></image>
+						</view>
+						<view class="content">
+							<view class="title ellipsis-2">{{item.goodsName}}</view>
+							<view class="tags" v-if="item.tags1 && item.tags1.length > 0">
+								<view class="it" v-for="(it, idx) in item.tags1" :key="idx">{{it}}</view>
+							</view>
+							<view class="price">
+								<view class="price-1">¥{{item.goodsPrice | numToFixed}}</view>
+								<view class="price-2">¥{{item.orgGoodsPrice | numToFixed}}</view>
+							</view>
+							<view class="tags2" v-if="item.tags2 && item.tags2.length > 0">
+								<view class="it" v-for="(it, idx) in item.tags2" :key="idx">{{it}}</view>
+							</view>
+							<view class="text">销量：{{item.soldNum}}</view>
+						</view>
+					</view>
+				</block>
+			</view>
+		</view>
+		
+		<view class="goods-row-list" v-show="showType == 2">
+			<block v-for="(item, index) in goodsList" :key='index'>
+				<view class="item" @tap="toGoodsDetail(item.goodsId)">
+					<view class="image">
+						<image :src="item.imgUrl" mode="aspectFill" class="img"></image>
+						<image :src="item.logo" mode="aspectFill" class="water" v-if="item.isShowWater"></image>
+					</view>
+					<view class="right">
+						<view>
+							<view class="title ellipsis-2">{{item.goodsName}}</view>
+							<view class="tags" v-if="item.tags1 && item.tags1.length > 0">
+								<view class="it" v-for="(it, idx) in item.tags1" :key="idx">{{it}}</view>
+							</view>
+						</view>
+						<view>
+							<view class="bottom">
+								<view class="price">
+									<view class="price-1">¥{{item.goodsPrice | numToFixed}}</view>
+									<view class="price-2">¥{{item.orgGoodsPrice | numToFixed}}</view>
+								</view>
+								<view class="text">销量：{{item.soldNum}}</view>
+							</view>
+						</view>
+					</view>
+				</view>
+			</block>
+		</view>
+		<no-data v-if="!goodsList.length" :showText="'暂无商品'"></no-data>
+		<loading-text v-if="goodsList.length"  :loading="loading" :noMore="noMore" ></loading-text>
+		
+		<!-- <drag-button :isDock="true" :customBar="true" ref="dragButton"></drag-button> -->
+	</view>
+</template>
+
+<script>
+	// import dragButton from '@/components/drag-button.vue';
+	
+	export default {
+		// components:{
+		// 	dragButton
+		// },
+		data() {
+			return {
+				screenType: '',
+				goodsList: [],
+				pageNum: 1,
+				pageSize: 8,
+				noMore: false,
+				loading: false,
+				showType: 1
+			}
+		},
+		
+		onShow() {
+			// this.$refs.dragButton.init();
+		},
+		
+		onLoad() {
+			this.getGoodsList();
+		},
+		
+		// 下拉刷新
+		onPullDownRefresh() {
+			this.pageNum = 1;
+			this.getGoodsList();
+		},
+		
+		// 上拉加载
+		onReachBottom() {
+			this.getGoodsList(1);
+		},
+		
+		methods: {
+			// 切换筛选类型
+			changeScreen(type) {
+				if(type != 2) {
+					if(this.screenType !== type) {
+						this.screenType = type;
+					}else {
+						this.screenType = '';
+					}
+				}else {
+					if(this.screenType != 2 && this.screenType != 3) {
+						this.screenType = 2;
+					}else if(this.screenType == 2) {
+						this.screenType = 3;
+					}else {
+						this.screenType = '';
+					}
+				}
+				this.pageNum = 1;
+				this.getGoodsList();
+			},
+			
+			// 获取商品列表
+			getGoodsList(loadMore) {
+				if(this.noMore && loadMore)return;
+				this.noMore = false
+				if(!loadMore){
+					this.pageNum = 1;
+				}else{
+					this.loading = true;
+				}
+				this.$axios({
+					url: '/goods/list/sort/page',
+					method: 'get',
+					params: {
+						pageNum: this.pageNum,
+						pageSize: this.pageSize,
+						categoryId: '',
+						sort: this.screenType
+					},
+					isLoading: !loadMore
+				}).then(res => {
+					res.data.records.forEach(item => {
+						if(item.logo && item.logoStartTime) {
+							item.isShowWater = this.$compareTime(item.logoStartTime, item.logoEndTime);
+						}else {
+							item.isShowWater = false;
+						}
+					})
+					let _list = res.data.records;
+					let pageTotal = res.data.pages;
+					if(this.pageNum >= pageTotal){
+						this.noMore = true;
+					}
+					if (_list.length) {
+						this.pageNum += 1
+					}
+					if (loadMore) {
+						this.goodsList = this.goodsList.concat(_list);
+						this.loading = false;
+					} else {
+						this.goodsList = _list;
+					}
+					
+					uni.stopPullDownRefresh();
+				})
+			},
+			
+			toGoodsDetail(id) {
+				uni.navigateTo({
+					url: '/packageGoods/pages/detail?id=' + id
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.app-container {
+		background: #F4F2F2;
+		padding-top: 88rpx;
+		box-sizing: border-box;
+	}
+	.top-container {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		background: #FFFFFF;
+		display: flex;
+		padding: 0 20rpx;
+		align-items: center;
+		box-sizing: border-box;
+		.tab {
+			flex: 1;
+			display: flex;
+			padding: 0 80rpx 0 30rpx;
+			box-sizing: border-box;
+			justify-content: space-between;
+			.item {
+				height: 88rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				font-size: 30rpx;
+				color: #666666;
+				&.current {
+					color: #FF3F42;
+				}
+				image {
+					width: 18rpx;
+					height: 30rpx;
+					display: block;
+					margin-left: 10rpx;
+				}
+			}
+		}
+		.icon {
+			padding-right: 10rpx;
+			image {
+				width: 36rpx;
+				height: 36rpx;
+				display: block;
+			}
+		}
+	}
+	
+</style>

pages/goods/classify.vue

@@ -0,0 +1,197 @@
+<template>
+	<view class="app-container">
+		<view class="search-container">
+			<view class="search">
+				<image src="/static/icon/search.png" class=""></image>
+				<input type="text" confirm-type="search" placeholder="输入分类名称进行搜索" v-model="keyword" @confirm="searchSubmit">
+			</view>
+		</view>
+		
+		<view class="main-container">
+			<view class="left">
+				<block v-for="(item, index) in leftList" :key='index'>
+					<view class="item ellipsis" :class="leftCurrent == item.categoryId ? 'current':''" @tap="changeLeft(item.categoryId)">{{item.name}}</view>
+				</block>
+			</view>
+			<view class="right">
+				<block v-for="(item, index) in rightList" :key='index'>
+					<view class="item" @tap="toList(item.categoryId, item.name)">
+						<image :src="item.imgUrl" mode="aspectFill"></image>
+						<text class="name ellipsis">{{item.name}}</text>
+					</view>
+				</block>
+				<no-data v-if="!rightList.length" :showText="'暂无数据'"  style="width: 100%;"></no-data>
+			</view>
+		</view>
+		
+		<!-- <drag-button :isDock="true" :customBar="true" ref="dragButton"></drag-button> -->
+	</view>
+</template>
+
+<script>
+	// import dragButton from '@/components/drag-button.vue';
+	
+	export default {
+		// components:{
+		// 	dragButton
+		// },
+		data() {
+			return {
+				keyword: '',
+				leftList: [],
+				leftCurrent: 0,
+				rightList: [],
+			}
+		},
+		
+		onShow() {
+			if(uni.getStorageSync('categoryId')) {
+				this.getLeftList();
+			}
+			
+			// this.$refs.dragButton.init();
+		},
+		
+		onLoad() {
+			if(!uni.getStorageSync('categoryId')) {
+				this.getLeftList();
+			}
+		},
+		
+		methods: {
+			// 获取一级菜单
+			getLeftList() {
+				this.$axios({
+					url: '/goods/category/list',
+					method: 'get',
+					params: {}
+				}).then(res => {
+					this.leftList = res.data;
+					if(uni.getStorageSync('categoryId')) {
+						this.leftCurrent = uni.getStorageSync('categoryId');
+						uni.setStorageSync('categoryId', 0);
+					}else {
+						this.leftCurrent = res.data.length > 0 ? res.data[0].categoryId : 0;
+					}
+					this.getRightList();
+				})
+			},
+			
+			// 获取二级菜单
+			getRightList() {
+				this.$axios({
+					url: '/goods/category/list',
+					method: 'get',
+					params: {
+						parentId: this.leftCurrent,
+						name: this.keyword
+					}
+				}).then(res => {
+					this.rightList = res.data;
+				})
+			},
+			
+			// 切换一级菜单
+			changeLeft(pid) {
+				this.leftCurrent = pid;
+				this.getRightList();
+			},
+			
+			// 搜索
+			searchSubmit() {
+				this.getRightList();
+			},
+			
+			toList(cid, cname) {
+				uni.navigateTo({
+					url: '/packageGoods/pages/list?cid=' + cid + '&cname=' + cname
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.app-container {
+		background: #F4F2F2;
+	}
+	.search-container {
+		background: #FFFFFF;
+		padding: 12rpx 20rpx;
+		border-bottom: 1px solid #F4F2F2;
+		.search {
+			height: 64rpx;
+			display: flex;
+			align-items: center;
+			background: #F0F0F0;
+			border-radius: 64rpx;
+			padding: 0 20rpx;
+			image {
+				width: 28rpx;
+				height: 28rpx;
+			}
+			input {
+				width: 100%;
+				padding-left: 15rpx;
+			}
+		}
+	}
+	.main-container {
+		display: flex;
+		height: calc(100vh - 88rpx);
+		.left {
+			width: 220rpx;
+			height: 100%;
+			overflow-y: scroll;
+			background: #FFFFFF;
+			box-sizing: border-box;
+			padding: 30rpx 20rpx;
+			flex-shrink: 0;
+			.item {
+				margin-bottom: 40rpx;
+				font-size: 28rpx;
+				color: #333333;
+				line-height: 48rpx;
+				border-radius: 48rpx;
+				text-align: center;
+				&.current {
+					color: #FFFFFF;
+					background: #FF3F42;
+				}
+			}
+		}
+		.right {
+			width: 500rpx;
+			margin: 20rpx 20rpx auto 10rpx;
+			background: #FFFFFF;
+			border-radius: 10rpx;
+			display: flex;
+			flex-wrap: wrap;
+			padding: 0 20rpx 20rpx 20rpx;
+			max-height: calc(100% - 20rpx);
+			overflow-y: scroll;
+			box-sizing: border-box;
+			.item {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				margin-right: 20rpx;
+				margin-top: 20rpx;
+				width: 140rpx;
+				font-size: 24rpx;
+				image {
+					width: 140rpx;
+					height: 140rpx;
+					margin-bottom: 5rpx;
+				}
+				.name {
+					width: 150rpx;
+					text-align: center;
+				}
+				&:nth-child(3n) {
+					margin-right: 0;
+				}
+			}
+		}
+	}
+</style>