hezhiying/pages/qianggou/qianggou.vue

<template>
<view class="qianggou">
	<view class="banner">
		<u-swiper :circular="true" :list="swiperList" :autoplay="true"></u-swiper>
		
	</view>
	<view class="notice">
		<u-notice-bar :text="text1" :direction="'column'" @click="jump" :mode="'link'" bgColor="transparent" color="#4D9A5E"></u-notice-bar>
	</view>
	<view class="qgList">
		<view class="qgItem" v-for="(item,index) in list" :key="index">
			<image :src="baseUrl+item.image" class="bgPic" mode="aspectFill"></image>
			<view class="qgInfo">
				<view class="conpany">
					<view class="line"></view>
					<view class="text">
						{{item.title}}
					</view>
					<view class="line"></view>
				</view>
				<view class="time" @click="goProductList(item)">
					开放时间：{{item.status!='normal'?'待开放':item.start+'-'+item.end}}
				</view>
			</view>
			
		</view>
		<view class="gobottom">
			--我也是有底线的--
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
	<!-- tabbar -->
	<TabBar :tabBarShow="1"></TabBar>
</view>
</template>

<script>
import {getWarehouseList} from '@/common/api.js'
import TabBar from '../../components/TabBar/TabBar.vue';
export default{
	components:{
		TabBar,
		
	},
	data(){
		return{
			swiperList:[
				'/static/image/banner1.png',
				'/static/image/banner2.png',
				'/static/image/banner3.png'
			],
			text1:[
				'用户隐私协议','用户注册协议','委托托管协议','用户须知','C2C个人支付风险提示'
			],
			list:[]
		}
	},
	methods:{
		jump(val){
			console.log("7777",val)
			let id=null;
			switch (val){
				case 0:
					id=2;
					break;
				case 1:
					id=1;
					break;
				case 2:
					id=4;
					break;
				case 3:
					id=3;
					break;
				case 4:
					id=5;
					break;
			}
			uni.navigateTo({
				url:`/pages/my/richText?id=${id}`
			})
		},
		getWarehouseList(){
			getWarehouseList().then(res=>{
				console.log(res,)
				this.list = res.data;
			})
		},
		goProductList(item){
			if(item.status=="normal"){
				if(item.is_allow_access==0){
					this.$refs.uToast.show({
						message:'未到抢购时间'
					})
				}else{
					uni.navigateTo({
						url:'/pages/qianggou/productList'
					})
				}
			}else{
				this.$refs.uToast.show({
					message:item.title+'等待开放'
				})
				return;
			}
		}
	},
	onLoad(){
		this.getWarehouseList()
	},
	onReady() {
		uni.hideTabBar();
		// #ifdef MP
		uni.setNavigationBarTitle({
			title: '首页',
		})
		uni.setNavigationBarColor({
			frontColor: '#ffffff',
			backgroundColor: 'rgb(221, 190, 127)',
		})
		// #endif
	},
}
</script>

<style lang="scss" scoped>
.qianggou{
	padding:24rpx;
	.banner{
		height: 260rpx;
		margin-bottom: 10rpx;
		// margin: -200rpx auto 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
		.u-swiper{
			background-color: #fff !important;
		}
	}
	.qgList{
		.qgItem{
			height:286rpx;
			width: 100%;
			position: relative;
			overflow: hidden;
			margin-bottom:20rpx;
			.bgPic{
				width:100%;
			}
			.qgInfo{
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				height: 100%;
				width: 100%;
				text-align: center;
				background: rgba(0,0,0,.6);
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				z-index:99;
				.conpany{
					display: flex;
					align-items: center;
					color: rgb(193, 193, 193);;
					.line{
						height:4rpx;
						width:100rpx;
						background-color: rgb(193, 193, 193);;
					}
					.text{
						font-size: 30rpx;
						color: rgb(193, 193, 193);
						margin:0 10rpx;
					}
				}
				.time{
					font-size: 38rpx;
					color: #fff;
					margin-top: 26px;
				}
			}
			
		}
	}
}
.gobottom{
	color: rgba(165, 165, 165, 0.5);
	font-size: 30rpx;
	margin-top:20rpx;
	text-align: center;
}
</style>