xingmingyi_applet/pagesA/catList/catList.vue

<template>
	<view class="root">
		<view class="content dfsb">
			<view class="secTop">
				<scroll-view :scroll-top="0" scroll-y="true" class="scroll-Y">
					<view @tap="choose(item.id)" :class="['topLi', leftSel == item.id ? 'topsel' : '']"
						v-for="(item, index) in dataList" :key="index">
						{{ item.name }}
					</view>
				</scroll-view>
			</view>
			<view class="topInfo">
				<view class="topCInfo">
					<scroll-view :scroll-top="0" scroll-y="true" class="scroll-Y" >
						<view class="box">
							<view v-if="newsInfo.banner" class="swipe">
								<u-swiper :autoplay="false" :list="newsInfo.banner" keyName="img" height="84"
									border-radius="20" @click="bannerClick"></u-swiper>
							</view>
							<view class="goodLi dfsb dfsb" v-for="(item, index) in newsInfo.list" :key="index">
								<view @click="navTo(item)" class="boxli dffd">
									<view class="textmain">
										{{item.name||''}}
									</view>
									<view class="monli dfsb">
										<text class="textgrey fontmid">SHIPIN</text>
										<text class="red">￥{{item.price||''}}</text>
									</view>
									<view class="monli dfsb">
										<text class="promain">共{{item.number||''}}节,{{item.sales||''}}人购买</text>
										<view class="mempri promain dffs">
											会员价：
											<text class="red">￥{{item.vip_price||''}}</text>
										</view>
									</view>
								</view>
								<view @click="creadOrd(item)" class="libuy" :class="item.my_is_pay==1?'libuyOK':''">
									{{item.my_is_pay==1?'已购买':'立即购买'}}
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<y-modal ref='popup' title="提示" text='您确认付费购买此课程吗' @onConfirm='onConfirm'></y-modal>
	</view>
</template>

<script>
	import { mixin } from './mixin.js'
	export default {
		mixins: [mixin],
		data() {
			return {
				dataList: [], //一层
				newsInfo: {}, //商品
				leftSel: 0, //一层分类选中
				// status: 'loadmore',
				// page: 1,
				// pagnum: 15
			};
		},
		async onLoad(opt) {
			uni.setNavigationBarTitle({
				title:opt.title
			})
			await this.loadData();
		},
		onPullDownRefresh() {
			this.page = 1;
			this.leftSel = 0;
			this.dataList = [];
			this.newsInfo = {};
			this.loadData();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 800);
		},
		// onReachBottom() {
		// 	if (this.status == 'nomore') return;
		// 	this.status = 'loadmore';
		// 	this.page = ++this.page;
		// 	this.loadData();
		// },

		onShow() {},
		methods: { 
			getSecList() {
				this.$api
					.request('new_cate/getTwoCate', {
						id: this.leftSel || '',
					})
					.then(data => {
						if (data.code == 200) {
							this.newsInfo = data.data;
						} else {
							this.$api.toast(data.msg);
						}
					});
			},
			// 轮播
			bannerClick(e) {
				console.log(e);
				let item = this.dataList.banner[e];
				if (item.goods_id != 0) {
					if (item.type == 1) {
						uni.navigateTo({
							url: '/pages/index/video/videoInfo?id=' + item.goods_id
						});
					} else {
						uni.navigateTo({
							url: '/pages/index/navInfo?id=' + item.goods_id
						});
					}
				}
			},
			navTo(item) {
				uni.navigateTo({
					url: `/pagesA/catList/catli?cat_id=${item.id}`
				});
			},
			choose(index) {
				console.log('leftSel: ', index);
				this.leftSel = index;
				console.log('this.leftSel', this.leftSel);
				this.getSecList();
			},
			loadData() {
				this.status = 'loadmore';
				this.$api
					.request('new_cate/getOneCate')
					.then(data => {
						console.log(data);
						if (data.code == 200) {
							this.dataList = data.data;
							this.leftSel = this.dataList[0].id;
							this.getSecList();
						} else {
							this.$api.toast(data.msg);
						}
					});
			}
		}
	};
</script>
<style lang="scss" scoped>
	page {
		height: 100vh;
	}

	.content {
		background-color: #fff;
		align-items: flex-start;

		.topBox {
			background-color: #fff;
		}

		.secTop {
			.scroll-Y {
				height: calc(100vh - 120rpx);
				flex-wrap: wrap;
			}

			.topLi {
				font-size: 26rpx;
				width: 168rpx;
				padding: 26rpx 0;
				line-height: 37rpx;
				text-align: center;
				background: #f4f4f4;
				color: #666;
			}

			.topsel {
				font-size: 28rpx;
				box-sizing: border-box;
				background-color: #fff;
				color: $promain;
				font-weight: 600;
			}
		}

		.topInfo {
			width: 582rpx;
			padding-right: 30rpx;
			padding-left: 12rpx;
			background-color: #f5f5f5;

			// background-color: #fff;
			.swipe {
				width: 540rpx;
				height: 166rpx;
				margin: 20rpx 0;
			}

			.topClass {
				position: fixed;
				z-index: 1;
				background-color: #fff;
				padding-left: 12rpx;
				width: 556rpx;

				.topClaBox {
					flex: 1;
					height: 98rpx;
					line-height: 98rpx;
					display: -webkit-box;
					overflow-x: auto;
					/*适应苹果*/
					-webkit-overflow-scrolling: touch;

					//父盒子隐藏滚动条
					&::-webkit-scrollbar {
						display: none;
					}

					.topClasLi {
						font-size: 28rpx;
						padding: 0 15rpx;
					}

					.topClasel {
						color: $promain;
					}
				}

				.classDown {
					height: 98rpx;
					width: 70rpx;
					box-shadow: -2rpx -5rpx 2rpx 5rpx rgba($color: #000000, $alpha: 0.05);
					background-color: #fff;

					.xuanz {
						transform: translate(180deg);
					}
				}
			}

			.topCInfo {
				flex: 1;
				height: calc(100vh - 120rpx);

				.maskbg {
					position: fixed;
					top: 170rpx;
					left: 200rpx;
					width: calc(100% - 200rpx);
					height: calc(100% - 100rpx);
					background-color: rgba(0, 0, 0, 0.65);
					z-index: 2;
				}

				/* #ifdef MP */
				.maskbg {
					position: fixed;
					top: 70rpx;
				}

				/* #endif */
				.scroll-Y {
					height: calc(100vh - 120rpx);
				}

				.box {
					width: 100%;
					flex-wrap: wrap;
				}

				.goodLi {
					width: 100%;
					margin-top: 40rpx;

					.boxli {
						flex: 1;
						margin-right: 20rpx;
						padding: 20rpx 20rpx 10rpx 28rpx;

						.monli {
							width: 100%;

							.red {
								font-size: 20rpx;
							}

							.promain {
								font-size: 18rpx;
							}
						}

						.monli {
							width: 100%;

							.red {
								font-size: 20rpx;
							}
						}

					}


					&:nth-of-type(3n-2) {
						.boxli {
							background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXIAAACGCAMAAAD3jvGAAAAAAXNSR0IArs4c6QAAAYlQTFRFAAAA////////////3///6Oj/6+v/7u7/4fD/////5OT/////6Oj/////3+r/4uv/5OT/5ub/9/f/4Oj34un44+P45eX4+Pj/4ef54uj54+P55OT6+vr/4eb64uf64+P64OT79vb/4eX74ub74+P34OT34eX3+Pj/4ub44+P44OT44eX49fX/4uX54OP54eT54eT54uX54OP54eT64eT64uX34OX34eP34uT44uX44OX44eP44uT44OT44OX44eP54uT54OT54eX54eP34uT34OT34eX34eP44uP44OT44eT44eP44OP44eT44eT44eP44OP54eT54eT34eP34OP34eT34eT44OP44OP44eT44eT44OP44eP44eT44eT44OT44eP34eT34eT34OT34eP34eP34OT44OT44eP44eP44OT49Pb+9vf/9vf/6+769vf/8/X+9fb/8vP+9fb/4OP45+j64OT49vf/4eT44OP44OP49vf/4eT44eT44eT45Of55un67vD99vf/Yx4bvgAAAH50Uk5TAAIEBggLDQ8RERMUFhcYGhwfHyEjJScnKiwuMDAzNTc5Ojs+QEJERUdJS01OT1JUVlhbXV9hY2ZoamxvcXN1d3p8foCDhYeJi46QkpSXmZudn6Kkpqirra+xs7a4ury/wcPFx8rMztDT1dfY2Nne4OTo7u7w8fLz9Pf5+fv96tGGfAAAAWdJREFUeNrt17FKQmEcxmGP6BByME/oWVycXLoR9ygIomjxLrwT76oLaXHVBheJTiD0vYk8v/XbHv68eqpNT3/e53bX/djnU6C79Q3ycLe/mCMvU/NeIw/XvtXIw01fa+ThZh3myEuaN8jT5i8N8vT/85/MkcfNkcfNkRc3b5GnzZ9b5OEm38yRx82RR8znyNPmT3Pk4cYn5sjj5sjj5shz5gvkafPHBfJwo6M58rg58qz5Enna/OG+N8BQoH3V9TJcfSAv0eHQ/WRY0vWRI7/6KuTIDYtcOXKdb44cOXIhRy7kyIX8/7/4kSNHLluOXMhtuVw5cuSy5a5cyJHLlrtyIUduy+XKkQs5cvn5dOXIhdyWy5UjF3LkQo4cuZAjF3LkQo4cuZAjF3LkQo5cyJEjF3LkQo5cyJEjF3LkQo5cyJELOXLkQo5cyJELOXLkQo5cyJELOXIhR45cyJELOXIhvyRyBPG+ACG3FwEV1LKsAAAAAElFTkSuQmCC) no-repeat;
							background-size: 100% 100%;
						}
					}

					&:nth-of-type(3n-1) {
						.boxli {
							background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXIAAACGCAMAAAD3jvGAAAAAAXNSR0IArs4c6QAAAYxQTFRFAAAA///////////U///////f///R///q///Y///M///S///w///X///R///0//TU//XO//bR//fO///v//fR//jM//jP//jR///r//nO//nR//TN//TP///v//XN//XP//bM//bO//vt//bP//fO//fP//fN//fO//vt//TN//XO//XM//XN//XP//zs//bN//bO//bN//bO//fN//TO//TM//TN//XO//XN//XO//XM//bN//bM//bN//bM//TN//TO//XN//XO//XM//XN//vt//XM//XN//bM//bN//TN//TN//TN//XM//XN//XM//XN//XM//XN//XN//TN//TN//TM//TN//XM//XN//XM//XN//XN//XN//XN//TM//vs//TN//TM//TN//XM//XM//XN//vs//XN//XN//XN//XM//rr//XN//TM//TN//TM//rs//rs//vr//TN//rn//vs//TM//TM//vr//XN//XM//vr//XN//XM//vs//XN//XN//nm//vsfHMuigAAAIF0Uk5TAAIEBgcICwwNDxERExYXGBocHx8hIyUnJyosLjAwMzU3OTo7PkBCREVHSUtNT1FSVFZYW11fYWNmaGpsb3FzdXd6fH6AgYOFh4mLjpCSlJeZm52foqSmqKutr7Gztri6ury/wcPExcXHyszOz9DT1dfY4Oju7u7w8vP09/j5+/v9EeGL8AAAAX9JREFUeNrt2k9KAnEcxuH8AwOJYrlIMDe6mZV3EQSJghJP4l28h3foBC26grvAllE4u/m9EDyf7eweXr6zmOkcbtR6nx+nr8aHfT4FehzPjo3mXT4lGi5fKuThlm8V8vRxaTJHXtB8gDxtvhsgD/dw1Rx5WfMR8rT5foQ83P1+gjxt/jpBHu7urznygPkUedr8eYo83PiXOfKM+Rx52vxpjjzc8Mccecx8gTxtvl0gD3e7rZGnzTc18nDVpkYeN18hT5uvV34dCtdfIy/T5dL05PzusITrueXpOsjTdZFbuZXLyq1cVv4PzJEjR67W35/IrdzKZeXI5bBYuazcypELuVsuK0cu5G65rBw5crnlVi7kyOWWWzlyIUcur08rF3LkQu71aeVCjlzIkQs5cuRCjlzIkQs5ciFHjlzIkQs5cl3PF34rRy7kyIUcuZAjRy7kyIUcuZAjF3LkyIUcuZAjF3LkyJXI31pWjlzI3XIhd1iEHLlbLitHrhbIEcT7Bji0GCzVYAigAAAAAElFTkSuQmCC) no-repeat;
							background-size: 100% 100%;
						}
					}

					&:nth-of-type(3n) {
						.boxli {
							background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXIAAACGCAMAAAD3jvGAAAAAAXNSR0IArs4c6QAAAYlQTFRFAAAA/////////////////+jo/+vr/+7u//Dw//////Lk//////Po///0/+rq/+vr/+3t/+/m//f3//Do/+np/+rq/+vl//j4/+3n/+7o/+np/+rq//r0/+vm/+zn/+zo/+3p//b2/+nl/+rm/+vn/+zo/+zl//j0/+nm/+rn/+vn/+vo//Xy/+zl/+nm/+rn/+rn/+vl/+vm/+nm/+rn/+rn/+rl/+vm/+nm/+nn/+rl/+rm/+vm/+vn/+nn/+rl/+rm/+rm/+vn/+nl/+rm/+rm/+rm/+vl/+nl/+nm/+rm/+rn/+rl/+nm/+nm/+rm/+rl/+rl/+nm/+nm/+nm/+rl/+rm/+rm/+nm/+nl/+rl/+rm/+rm/+nm/+nl/+rm/+rm/+rm/+nl/+nl/+rm/+rm/+rl/+rl/+nm/+nm/+rm//T0//b0//b0//Du//b1//T0//X0//Pz//X0/+rl/+3q/+rm//b1/+nm/+nl/+nl//b1/+rm/+rm/+rm/+zp/+3q//Hw//b1aTKk/wAAAH50Uk5TAAIEBggLDQ8RERMUFhcYGhwfHyEjJScnKiwuMDAzNTc5Ojs+QEJERUdJS01OT1JUVlhbXV9hY2ZoamxvcXN1d3p8foCDhYeJi46QkpSXmZudn6Kkpqirra+xs7a4ury/wcPFx8rMztDT1dfY2Nne4OTo7u7w8fLz9Pf5+fv96tGGfAAAAWdJREFUeNrt17FKQmEcxmGP6BByME/oWVycXLoR9ygIomjxLrwT76oLaXHVBheJTiD0vYk8v/XbHv68eqpNT3/e53bX/djnU6C79Q3ycLe/mCMvU/NeIw/XvtXIw01fa+ThZh3myEuaN8jT5i8N8vT/85/MkcfNkcfNkRc3b5GnzZ9b5OEm38yRx82RR8znyNPmT3Pk4cYn5sjj5sjj5shz5gvkafPHBfJwo6M58rg58qz5Enna/OG+N8BQoH3V9TJcfSAv0eHQ/WRY0vWRI7/6KuTIDYtcOXKdb44cOXIhRy7kyIX8/7/4kSNHLluOXMhtuVw5cuSy5a5cyJHLlrtyIUduy+XKkQs5cvn5dOXIhdyWy5UjF3LkQo4cuZAjF3LkQo4cuZAjF3LkQo5cyJEjF3LkQo5cyJEjF3LkQo5cyJELOXLkQo5cyJELOXLkQo5cyJELOXIhR45cyJELOXIhvyRyBPG+ACG3FwEV1LKsAAAAAElFTkSuQmCC) no-repeat;
							background-size: 100% 100%;
						}
					}

					.libuy {
						width: 147rpx;
						height: 64rpx;
						text-align: center;
						line-height: 64rpx;
						background: rgba(205, 222, 222, 0.39);
						color: #26565A;
						font-size: 26rpx;
						border-radius: 34rpx;
					}

					.libuyOK {
						background: #f5f5f5;
						color: #999;
					}

				}
			}
		}
	}

	.cartBox {
		width: 710rpx;
		position: fixed;
		bottom: 10rpx;
		/* #ifdef H5 */
		bottom: 128rpx;
		/* #endif */
		left: 0;
		z-index: 999;
		margin: 0 20rpx;

		.leftbox {
			height: 100rpx;
			flex: 1;
			background: #000000;
			border-radius: 200rpx 0px 0px 200rpx;
			padding-left: 30rpx;

			.imgBox {
				position: relative;

				image {
					width: 90rpx;
					height: 82rpx;
				}
			}

			.priceInfo {
				position: relative;
				margin-left: 60rpx;

				.price {
					color: #fff;
				}
			}
		}

		.rightbox {
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			color: #fff;
			background: #d8d8d8 linear-gradient(90deg, #6fd237 0%, #57c32a 100%);
			border-radius: 0px 200rpx 200rpx 0px;
			width: 194rpx;
		}

		.ordbox {
			font-size: 24rpx;
			text-align: center;
			margin-bottom: 10rpx;

			text {
				font-size: 30rpx;
			}

			// height: 100rpx;
			// line-height: 100rpx;
			// text-align: center;
			// color: #fff;
			// background: linear-gradient(90deg, #6fd237 0%, #57c32a 100%);
			// border-radius: 200rpx ;
			// margin-right: 15rpx;
			// padding: 0 20rpx;
		}

		.rightBlack {
			background: #000;
			color: #999;
		}
	}

	.ordbtn {
		position: fixed;
		bottom: 130rpx;
		right: 0;
		z-index: 999;
		width: 150rpx;
		height: 150rpx;
		line-height: 150rpx;
		border-radius: 50%;
		color: #fff;
		text-align: center;
		vertical-align: middle;
		font-size: 30rpx;
		background: radial-gradient(#68e670 0%, #5dce2c 100%);
	}
</style>