mh/pages/index/more.vue

<!-- 盲盒商城 -->
<template>
	<view class="more">
		<view class="banner"><image src="https://www.chaomangdao.com/image/home/banner@2x.png" mode=""></image></view>
		<view class="small">
			<view class="small-item">
				<view class="small-image"><image src="https://www.chaomangdao.com/image/home/small1.png" mode=""></image></view>
				<view class="small-font">新手帮助</view>
			</view>
			<view class="small-item" @click="navTo('/pages/me/recharge')">
				<view class="small-image"><image src="https://www.chaomangdao.com/image/home/small2.png" mode=""></image></view>
				<view class="small-font">优惠充值</view>
			</view>
			<view class="small-item" @click="navTo('/pages/me/balance')">
				<view class="small-image"><image src="https://www.chaomangdao.com/image/home/small3.png" mode=""></image></view>
				<view class="small-font">我的余额</view>
			</view>
			<view class="small-item" @click="navTo('/pages/tabbar/box')">
				<view class="small-image"><image src="https://www.chaomangdao.com/image/home/small4.png" mode=""></image></view>
				<view class="small-font">我的盒柜</view>
			</view>
		</view>
		<view class="more_head flex">
			<view class="more_head_li flexs" :class="{ active: index == i }" v-for="(item, index) in list" :key="index" @click="changeHead(index)">
				<text>{{ item.name }}</text>
			</view>
		</view>
		<view class="home_recommend_ul flex">
			<view class="home_recommend_li" v-for="(item, index) in boxList" :key="index" @click="goMessage(item, 0)">
				<view class="home_recommend_li_img">
					<view class="home_recommend_li_img_top flex">
						<view class="home_recommend_li_img_box"><image :src="item.image" mode="aspectFill"></image></view>
					</view>
				</view>
				<view class="home_recommend_li_main">
					<view class="home_recommend_li_name">{{ item.box_name }}</view>
					<view class="home_recommend_li_glod flex">
						<image src="https://www.chaomangdao.com/image/home/gold.png" mode=""></image>
						<view class="home_recommend_li_glod_font">{{ item.coin_price }}金币</view>
					</view>
					<view class="home_recommend_li_price">
						<view class="home_recommend_li_price_icon">
							<view class="home_recommend_li_price_icon_bg"><image src="https://www.chaomangdao.com/image/home/bdbz.png" mode=""></image></view>
							<view class="home_recommend_li_price_icon_font">保底必中</view>
						</view>
						<view class="home_recommend_li_price_font">{{ item.price_min }}元~{{ item.price_max }}元</view>
					</view>
					<view class="home_recommend_shop">
						<view class="home_recommend_li_img_right" v-if="item.right.length != 0">
							<view class="home_recommend_li_img_bot"><image :src="items" mode="aspectFill" v-for="(items, index) in item.bot" :key="index"></image></view>
							<image :src="items" mode="aspectFill" v-for="(items, index) in item.right" :key="index"></image>
						</view>
						<text>共{{ item.goods_num }}款商品</text>
					</view>
				</view>
			</view>
		</view>
		<view class="screen" :style="{ width: isShow ? '600rpx' : 0 }">
			<view class="screen_box">
				<view class="screen_name">价格区间</view>
				<view class="screen_head flexs">
					<view class="screen_ipt center"><input type="number" v-model="minPrice" placeholder="最低价" placeholder-style="color:#999999" /></view>
					<view class="screen_head_line"></view>
					<view class="screen_ipt center"><input type="number" v-model="maxPrice" placeholder="最高价" placeholder-style="color:#999999" /></view>
				</view>
				<view class="screen_ul flexs">
					<view class="screen_li center" :class="{ active: index == selectPrice }" v-for="(item, index) in priceList" :key="index" @click="selectprice(index)">
						{{ item }}
					</view>
				</view>
			</view>
			<view class="screen_footer flex">
				<view class="screen_footer_li center" v-for="(item, index) in 2" :key="index" @click="reset(index)">{{ index == 0 ? '重置' : '确定' }}</view>
			</view>
		</view>
		<view class="marking" v-if="isShow"></view>
		<!-- <uni-popup ref="popup" :mask-click="false" type="right">
		  
		</uni-popup> -->
		<!-- <uni-drawer ref="popup" mode="right" :mask-click="false">
				<scroll-view style="height: 100%;" scroll-y="true">
						<button @click="closeDrawer" type="primary">关闭Drawer</button>
						<view v-for="item in 60" :key="item">可滚动内容 {{ item }}</view>
				</scroll-view>
		</uni-drawer> -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			i: 0,
			page: 1,
			pages: 0,
			price: '', //加个排序
			sort: '', //排序
			list: [{ name: '新品', type: 0 }, { name: '综合', type: 0 }, { name: '价格', type: 0 }, { name: '筛选', type: 0 }],
			boxList: [], //
			isShow: false,
			selectPrice: -1, //选择哪个价钱
			minPrice: '', //最低价
			maxPrice: '', //最高价
			priceList: [] //价格区间
		};
	},
	methods: {
		//去详情
		goMessage(item, type) {
			uni.navigateTo({ url: '/pages/index/details?id=' + item.box_id + '&type=' + type });
		},
		//重置
		reset(index) {
			if (index == 0) {
				this.minPrice = '';
				this.maxPrice = '';
				this.selectPrice = -1;
			} else {
				this.price = (this.minPrice == 0 || this.minPrice) && this.maxPrice ? this.minPrice + '-' + this.maxPrice : '';
				this.isShow = false;
				this.list[3].type = 0;
				this.getBoxListByCategory();
			}
		},
		//选择价钱
		selectprice(index) {
			this.selectPrice = index == this.selectPrice ? -1 : index;
			if (this.selectPrice != -1) {
				this.minPrice = this.priceList[index].split('-')[0];
				this.maxPrice = this.priceList[index].split('-')[1];
			}
		},
		changeHead(index) {
			this.page = 1;
			this.i = index;
			// this.list[index].type = this.list[index].type == 0 ? 1 : 0;
			// if (index == 0) {
			// 	this.sort = 'new';
			// } else if (index == 1) {
			// 	this.sort = this.list[index].type == 0 ? 'combine_desc' : 'combine_asc';
			// } else if (index == 2) {
			// 	this.sort = this.list[index].type == 0 ? 'price_desc' : 'price_asc';
			// } else {
			// 	this.list[index].type == 1 ? (this.isShow = true) : (this.isShow = false);
			// 	return;
			// }
			this.getBoxListByCategory(this.list[index].category_id);
		},
		returnTop() {
			uni.navigateBack();
		},
		getBoxListByCategory(id) {
			this.$api.search({ page: this.page, msg: '数据加载中', sort: this.sort, price: this.price, category_id: id }).then(res => {
				if (res.code === 1) {
					res.data.data.forEach(item => {
						item.image = item.goods_images[0];
						item.right = [];
						item.bot = [];
						item.goods_images.forEach((em, index) => {
							if (index > 0 && index < 3) {
								item.right.push(em);
							}
							if (index > 2) {
								item.bot.push(em);
							}
						});
					});
					(this.boxList = this.page == 1 ? res.data.data : [...rhis.boxList, ...res.data.data]), (this.pages = res.data.last_page);
				}
			});
		},
		//获取价格区间
		getPriceList() {
			this.$api.priceRange().then(res => {
				if (res.code === 1) {
					this.priceList = res.data.range;
				}
			});
		},
		navTo(url) {
			uni.navigateTo({
				url,
				fail() {
					uni.switchTab({
						url
					});
				}
			});
		},
		classify() {
			this.$api.categoryList({ page: 1, limit: 1000 }).then(({ data }) => {
				data.unshift({ category_id: 0, name: '全部' });
				this.list = data;
				this.getBoxListByCategory(this.list[0].category_id);
			});
		}
	},
	onLoad() {
		this.classify();
		this.getPriceList();
	},
	onPullDownRefresh() {
		this.page = 1;
		this.getBoxListByCategory();
	},
	onReachBottom() {
		if (this.page < this.pages) {
			this.page++;
			this.getBoxListByCategory();
		}
	}
};
</script>

<style lang="scss">
.more,
page {
	min-height: 100%;
	height: auto;
	background: #fff6f7;
}
.screen {
	position: fixed;
	bottom: 0;
	right: 0;
	width: 0;
	overflow: hidden;
	height: calc(100vh - 88px);
	background: #ffffff;
	z-index: 2021;
	transition: all 0.2s ease;
	.screen_box {
		padding: 30rpx 20rpx 0 30rpx;
		.screen_name {
			font-size: 28rpx;
			margin-bottom: 24rpx;
		}
		.screen_head {
			.screen_ipt {
				width: 168rpx;
				height: 64rpx;
				padding: 0 30rpx;
				background: #f5f5f5;
				border-radius: 32rpx;
				input {
					font-size: 26rpx;
					text-align: center;
				}
			}
			.screen_head_line {
				width: 27rpx;
				height: 3rpx;
				margin: 0 20rpx;
				background: #999999;
			}
		}
		.screen_ul {
			flex-wrap: wrap;
			.screen_li {
				width: 166rpx;
				height: 64rpx;
				margin: 24rpx 24rpx 0 0;
				font-size: 26rpx;
				background: #f5f5f5;
				border-radius: 32rpx;
				&:nth-child(3n) {
					margin-right: 0;
				}
			}
			.active {
				color: #ffffff;
				background: #f6af32;
			}
		}
	}
	.screen_footer {
		width: 100%;
		bottom: 0;

		position: absolute;
		.screen_footer_li {
			width: 260rpx;
			height: 68rpx;
			color: #666666;
			font-size: 32rpx;
			background: #f5f5f5;
			&:last-child {
				color: #ffffff;
				background: #f6af32;
			}
		}
	}
}
.marking {
	position: fixed;
	bottom: 0;
	right: 0;
	width: 100%;
	height: calc(100vh - 88px);
	background: rgba(0, 0, 0, 0.5);
}
.banner {
	width: 715rpx;
	height: 317rpx;
	margin: 0 auto;
	image {
		width: 100%;
		height: 100%;
	}
}
.small {
	margin-top: 24rpx;
	width: 100%;
	display: flex;
	justify-content: space-around;
	align-items: center;
	.small-item {
		width: 25%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		line-height: 1;
		.small-image {
			width: 64rpx;
			height: 64rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.small-font {
			margin-top: 16rpx;
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
	}
}
.more_head {
	width: 100%;
	height: 88rpx;
	z-index: 20;
	margin-bottom: 30rpx;
	justify-content: start;
	margin-top: 20rpx;
	.more_head_li {
		margin: 0 30rpx;
		padding-bottom: 10rpx;
		text {
			font-size: 30rpx;
		}
		image {
			width: 22rpx;
			height: 22rpx;
			transition: all 0.2s ease;
			margin-left: 10rpx;
		}
		.handstand {
			transform: rotate(180deg);
		}
		&.active {
			text {
				color: #6087f6;
			}
			border-bottom: 2px solid #6087f6;
		}
	}
}
.home_recommend_ul {
	flex-wrap: wrap;
	padding: 0 28rpx;
	.home_recommend_li {
		width: 700rpx;
		background: #ffffff;
		border-radius: 15rpx;
		padding: 20rpx;
		margin-bottom: 30rpx;
		background: #ffffff;
		box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(153, 153, 153, 0.1);
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		.home_recommend_li_img {
			width: 190rpx;
			height: 190rpx;
			.home_recommend_li_img_box {
				image {
					width: 190rpx;
					height: 190rpx;
					border-radius: 6rpx;
				}
			}
		}
		.home_recommend_li_main {
			padding-left: 10rpx;
		}
		.home_recommend_li_price {
			padding: 0 8rpx 0 0;
			margin: 10rpx 0 0;
			background: #fff1eb;
			display: flex;
			align-items: center;
			border-top-right-radius: 14rpx;
			border-bottom-right-radius: 14rpx;
			.home_recommend_li_price_icon {
				position: relative;
				width: 124rpx;
				height: 32rpx;
				padding-left: 36rpx;
				.home_recommend_li_price_icon_bg {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					width: 124rpx;
					height: 32rpx;
					imgae {
						width: 100%;
						height: 100%;
					}
				}
				.home_recommend_li_price_icon_font {
					position: relative;
					z-index: 2;
					font-size: 18rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #ffffff;
					line-height: 32rpx;
				}
			}
			.home_recommend_li_price_font {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #ff2829;
				line-height: 32rpx;
			}
		}
		.home_recommend_li_name {
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			font-size: 28rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}
		.home_recommend_li_glod {
			justify-content: flex-start;
			align-items: center;
			margin-top: 22rpx;
			image {
				width: 32rpx;
				height: 32rpx;
			}
			.home_recommend_li_glod_font {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #ff281e;
				margin-left: 10rpx;
			}
		}
	}
}
.home_recommend_shop {
	margin-top: 10rpx;
	display: flex;
	align-items: flex-end;
	text {
		font-size: 16rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #999999;
	}
}
.home_recommend_li_img_right {
	display: flex;
	align-items: center;
	image {
		width: 50rpx;
		height: 50rpx;
		background: #ffffff;
		border: 1px solid #e2e2e2;
		border-radius: 5rpx;
		margin-right: 10rpx;
		&:last-child {
			margin-right: 0;
		}
	}
	.home_recommend_li_img_bot {
		display: flex;
		align-items: center;
		image {
			width: 50rpx;
			height: 50rpx;
			background: #ffffff;
			border: 1px solid #e2e2e2;
			border-radius: 5rpx;
			margin-right: 10rpx;
		}
	}
}
</style>