兑换大厅样式调整

pages.json

@@ -57,6 +57,8 @@
 		"path": "pages/about/rule"
 	}, {
 		"path": "pages/share/index"
+	}, {
+		"path": "pages/coreRange/coreRange"
 	}],
 	"tabBar": {
 		"custom": true,

pages/core/index.vue

@@ -1,28 +1,91 @@
 <template>
-	<view>
-		<u-navbar leftIconSize="0" :placeholder="true" bgColor="#fff">
+	<view class="core-cla">
+		<u-navbar leftIconSize="0" :placeholder="true" bgColor="#ffffff">
 			<view class="u-nav-slot" slot="left">
 				<text>兑换大厅</text>
 			</view>
 		</u-navbar>
-		<view class="screen-coin">
-			<view class="flex screen-coin-select" @click="openSelect">
-				<view class="title">
-					<text v-if="actionInfo.min">{{ actionInfo.min }}</text>
-					<text v-if="actionInfo.max">-{{ actionInfo.max }}</text>
-					<text>{{ actionInfo.desc }}</text>
+		<!-- swiper开始 -->
+		<view class="swiper-ban">
+			<view class="uni-padding-wrap">
+				<view class="page-section swiper">
+					<view class="page-section-spacing">
+						
+						<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
+							:duration="duration">
+							<swiper-item v-for="(item,index) in imgTop" :key="index" @click="toCoreRange(item.type,item.type=='link'?item.linkUrl:item.goodsTags)">
+								<img :src="item.picUrl" alt="">
+							</swiper-item>
+						</swiper>
+					</view>
 				</view>
-				<u-icon name="arrow-up" color="#333" size="18" v-if="coinShow"></u-icon>
-				<u-icon name="arrow-down" color="#333" size="18" v-else></u-icon>
 			</view>
-			<view class="screen-coin-list" v-if="coinShow">
-				<view class="flex screen-coin-list-item" v-for="(item, index) in coinList" :key="index" @click="selectCoin(item, index)">
-					<text v-if="item.min" :class="{ 'action': actionIndex == index }">{{ item.min }}</text>
-					<text v-if="item.max" :class="{ 'action': actionIndex == index }">-{{ item.max }}</text>
-					<text :class="{ 'action': actionIndex == index }">{{ item.desc }}</text>
+		</view>
+		<!-- swiper结束 -->
+
+		<!-- 分类部分开始 -->
+		<view class="classificationBox">
+			<view v-for="(item,index) in goods" :key="index" @click="toCoreRange('tag',item.categoryId)" class="ificationBox-mar">
+				<img :src="item.picUrl" alt="">
+				<view v-text="item.name" style=" "></view>
+			</view>
+		</view>
+		<!-- 分类部分结束 -->
+
+		<!-- 限时秒杀部分开始 -->
+		<view v-for="(item,index) in exclusive" :key="index">
+			<view class=" sticky-bac">
+				<text class="sticky-bac-text1" v-text="item.name"></text>
+				<view @click="toCoreRange('tag',item.tagId)" class="sticky-bac-text2">
+					<view></view>
+					<view class="flex ">
+						<text>更多</text>
+						<u-icon name="arrow-right" color="#9c9c9c" size="16"></u-icon>
+					</view>
+				</view>	
+			</view>
+			<view class="Seckill-bom">
+				<view class="Seckill-bom-grid" >
+					<navigator :url="`/pages/goods/detail?id=${ itemExc.goodsId }`" class="core-list-item"
+						hover-class="navigator-hover" v-for="(itemExc, indexNum) in exclusiveSingle[index]" :key="indexNum" >
+						<view class="flex iamge-wrap">
+							<image :src="itemExc.picUrl" mode=""></image>
+						</view>
+						<view class="title">{{ itemExc.title }}</view>
+						<view class="bean">
+							<image src="../../static/icon/bean.png" mode="aspectFill"></image>
+							<view>× {{ itemExc.exchangePrice }}</view>
+						</view>
+					</navigator>
 				</view>
 			</view>
 		</view>
+		<!-- 限时秒杀部分结束 -->
+
+
+		<!-- 精选商品部份开始 -->
+		<u-sticky offset-top="60" class="">
+			<view class="screen-coin uSticky-toTop">
+				<view class="flex screen-coin-select" @click="openSelect">
+					<view class="title">
+						<text v-if="actionInfo.min">{{ actionInfo.min }}</text>
+						<text v-if="actionInfo.max">-{{ actionInfo.max }}</text>
+						<text>{{ actionInfo.desc }}</text>
+					</view>
+					<u-icon name="arrow-up" color="#333" size="18" v-if="coinShow"></u-icon>
+					<u-icon name="arrow-down" color="#333" size="18" v-else></u-icon>
+				</view>
+				<view class="screen-coin-list" v-if="coinShow">
+					<view class="flex screen-coin-list-item" v-for="(item, index) in coinList" :key="index"
+						@click="selectCoin(item, index)">
+						<text v-if="item.min" :class="{ 'action': actionIndex == index }">{{ item.min }}</text>
+						<text v-if="item.max" :class="{ 'action': actionIndex == index }">-{{ item.max }}</text>
+						<text :class="{ 'action': actionIndex == index }">{{ item.desc }}</text>
+					</view>
+				</view>
+			</view>
+		</u-sticky>
+
 		<view class="core">
 			<view class="flex core-list">
 				<navigator :url="`/pages/goods/detail?id=${ item.goodsId }`" class="core-list-item"
@@ -45,6 +108,9 @@
 		<custom-tab-bar :activeValue="'core'" />
 
 		<u-overlay :show="coinShow" @click="coinShow = false" zIndex="1"></u-overlay>
+
+		<!-- 精选商品结束 -->
+		<custom-tab-bar :activeValue="'core'" />
 	</view>
 </template>
 
@@ -58,12 +124,21 @@
 		},
 		data() {
 			return {
+
+				indicatorDots: true,
+				autoplay: true,
+				interval: 4500,
+				duration: 2000,
+				imgTop: [],
+				goods: [],
+				exclusive:[],
+				exclusiveSingle:[],
+					
 				pageNum: 1,
 				total: 0,
 				list: [],
 				coinShow: false,
-				coinList:[
-					{
+				coinList: [{
 						min: null,
 						max: null,
 						desc: '全部价格'
@@ -119,20 +194,92 @@
 						desc: '盲豆以上'
 					},
 				],
-				actionInfo:{},
+				actionInfo: {},
 				actionIndex: 0,
-				coinNum:{
+				coinNum: {
 					startPrice: null,
 					endPrice: null
 				}
 			};
 		},
+		onShow() {
 
+		},
 		onLoad() {
 			this.pageList()
 			this.actionInfo = this.coinList[this.actionIndex]
+			this.getSwiper()
+			this.getListIficationBox()
+			this.getExclusive()
 		},
 		methods: {
+			changeIndicatorDots(e) {
+				this.indicatorDots = true
+			},
+			changeAutoplay(e) {
+				this.autoplay = true
+			},
+			intervalChange(e) {
+				this.interval = e.target.value
+			},
+			durationChange(e) {
+				this.duration = e.target.value
+			},
+			// 跳转点击事件
+			toCoreRange(type,data) {
+				// 跳转指令
+				uni.navigateTo({
+					url: `/pages/coreRange/coreRange?type=${type}&data=${data}`,
+				})
+				console.log(`标签是${type},数据是${data}`)
+			},
+			//轮播图
+			getSwiper() {
+				$http.post(`/api/v1/mp/user/exchange/banner/list`, {
+					noToken: true,
+					location: "top"
+				}).then(res => {
+					res.data.forEach(item => {
+						let picUrlArr = item.picUrl.split(',')
+						item.picUrl = env.filePublic + picUrlArr[0]
+					})
+					this.imgTop = this.imgTop.concat(res.data)
+				})
+			},
+			// 分类列表
+			getListIficationBox(){
+				$http.post(`/api/v1/mp/user/exchange/category/list`, {noToken: true}).then(res => {
+					res.data.forEach(item => {
+						let picUrlArr = item.picUrl.split(',')
+						item.picUrl = env.filePublic + picUrlArr[0]
+					})
+					this.goods = this.goods.concat(res.data)
+				})
+			},
+			// 秒杀
+			getExclusive(){
+				$http.post(`/api/v1/mp/user/exchange/activity/list`, {noToken: true}).then(res => {
+					this.exclusive = res.data
+					let arr = []
+					res.data.forEach(item=>{
+						$http.post(`/api/v1/mp/user/exchange/goods/list?pageNum=1&pageSize=4&orderByColumn=exchangePrice&isAsc=asc`, {
+							noToken: true,
+							tagIds: item.tagId, // 分类ID，可空
+							}).then(r => {
+								r.rows.forEach(ite => {
+									let picUrlArr = ite.picUrl.split(',')
+									ite.picUrl = env.filePublic + picUrlArr[0]
+								})
+								arr.push(r.rows)
+						})
+					})
+					this.exclusiveSingle = arr
+				})
+	
+			},
+
+
+			//精选商品部分
 			getList() {
 				uni.showLoading({
 					title: '加载中'
@@ -150,6 +297,7 @@
 								let picUrlArr = item.picUrl.split(',')
 								item.picUrl = env.filePublic + picUrlArr[0]
 							})
+
 							this.total = res.total
 							this.list = this.list.concat(res.rows)
 						}
@@ -157,19 +305,26 @@
 					uni.hideLoading();
 				})
 			},
-
 			pageList() {
 				this.pageNum = 1
 				this.total = 0
 				this.list = []
 				this.getList()
 			},
-			
-			openSelect(){
+			openSelect() {
+				uni.createSelectorQuery().select(".uSticky-toTop").boundingClientRect((data) => {
+					uni.createSelectorQuery().select(".core-cla").boundingClientRect((res) => {
+						uni.pageScrollTo({
+							duration: 100, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
+							scrollTop: data.top - res.top,
+						})
+					}).exec()
+				}).exec()
+
 				this.coinShow = !this.coinShow
 			},
-			
-			selectCoin(item, index){
+
+			selectCoin(item, index) {
 				this.actionIndex = index
 				this.actionInfo = this.coinList[this.actionIndex]
 				this.coinShow = false
@@ -178,7 +333,7 @@
 				this.pageList()
 			},
 		},
-
+		//精选商品
 		onReachBottom() {
 			// 判断是否有数据
 			if (this.total > this.pageNum * 20) {
@@ -194,11 +349,85 @@
 </script>
 
 <style lang="scss" scoped>
+	.swiper-ban {
+		background-color: #FFFFFF;
+		padding: 0 3px;
 
-</style>
-<style lang="scss" scoped>
+		.uni-padding-wrap {
+			border-radius: 5px;
+			overflow: hidden;
+		}
+	}
+	.uni-padding-wrap img{
+		width: 100%;
+		height: 100%;
+	}
+
+	.classificationBox {
+		background-color: #FFFFFF;
+		display: grid;
+		grid-template-columns: 1fr 1fr 1fr 1fr;
+		font-size: 12px;
+
+		.ificationBox-mar {
+			margin: 0 auto;
+			text-align: center;
+			margin-top: 10px;
+			margin-bottom: 10px;
+		}
+	}
+
+	.ificationBox-mar img {
+		width: 44px;
+		height: 44px;
+		border-radius: 29px;
+	}
+
+	.sticky-bac {
+		margin-top: 10px;
+		background-color: #FFFFFF;
+		padding: 0 3px;
+
+		.sticky-bac-text1 {
+			color: #2f2f2f;
+			font-size: 18px;
+			line-height: 25px;
+			display: inline-block;
+			padding: 8px;
+		};
+
+		.sticky-bac-text2 {
+			width: 128px;
+			height: 40px;
+			text-align: right;
+			line-height: 40px;
+			color: #9c9c9c;
+			float: right;
+			display: grid;
+			grid-template-columns: 1fr 1fr;
+		}
+	}
+
+	.Seckill-bom {
+		padding: 0 0.3rem;
+		// margin-bottom: 10px;
+		background-color: #FFFFFF;
+		
+		.Seckill-bom-grid {
+			min-height:550rpx ;
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: space-between;
+			padding: 20rpx 15rpx;
+			margin-bottom: 10px;
+		}
+	}
+
+
+
+	//================
 	.screen-coin {
-		position: fixed;
+		// position: fixed;
 		width: 100%;
 		z-index: 10;
 		background-color: #FFFFFF;
@@ -216,21 +445,24 @@
 				margin-right: 10rpx;
 			}
 		}
+
 		&-list {
 			width: 100%;
 			background-color: #FFFFFF;
 			border-top: 1px solid #F8F8F8;
-			
-			&-item{
+
+			&-item {
 				height: 86rpx;
 				line-height: 86rpx;
 				background-color: #FFFFFF;
 				border-bottom: 1px solid #F8F8F8;
 			}
-			&-item:last-child{
+
+			&-item:last-child {
 				border: 0;
 			}
-			.action{
+
+			.action {
 				color: $uni-text-color;
 			}
 		}
@@ -242,7 +474,7 @@
 		&-list {
 			justify-content: space-evenly;
 			flex-wrap: wrap;
-			padding-top: 96rpx;
+			// padding-top: 96rpx;
 
 			&-item {
 				box-sizing: border-box;
@@ -301,3 +533,5 @@
 		}
 	}
 </style>
+<style lang="scss" scoped>
+</style>