4-26-1

pages/index/index.vue

@@ -1,46 +1,105 @@
 <template>
-	<view class="indexBox">
-		<view class="navbox" v-if="userOn!=1">
-			<view class="flex topIconBox">
-				<image @click="navTo('/pages/index/shopTab?type=1')" class="topIcon" src="../../static/icon/shop.png"
-					mode="widthFix"></image>
-				<image @click="navTo('/pages/index/notice')" class="topIcon" src="../../static/icon/message.png"
-					mode="widthFix">
-				</image>
-				<view class="topIconNum flex" v-if="notify>0">
-					<text>
-						{{notify}}
-					</text>
+	<view class="container">
+		<view class="status_bar"></view>
+		<!-- 轮播图 start -->
+		<swiper class="top-swiper" autoplay="true" duration="400" interval="5000" @change="swiperChange">
+			<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item"
+				@click="bannerNavToUrl(item)">
+				<image :src="item.pic" />
+			</swiper-item>
+		</swiper>
+		<!-- 轮播图 end -->
+		<!-- 认证提示 statr-->
+		<view class="rznow flex">
+			<view class="rztit">
+				您尚未完成身份认证，前往认证>>
+			</view>
+			<view class="rzbtn">
+				立即认证
+			</view>
+		</view>
+		<!-- 认证提示 ed-->
+		<!-- 功能区 start-->
+		<view class="gn-wrap flex">
+			<view class="gn-icon flex">
+				<image src="../../static/icon/in1.png" mode="heightFix"></image>
+			</view>
+			<view class="gn-tit">
+				<view class="">
+					租电
 				</view>
+				<view class="tit-jj">
+					以租代购 方便省钱
+				</view>
+			</view>
+			<view class="gn-btn">
+				立即租电
 			</view>
 		</view>
-		<on-user :notify='notify' ref='onuser' v-if="userOn==1"></on-user>
-		<no-user ref='nouser' v-if="userOn==2"></no-user>
-		<!-- 引导图 -->
-		<view class="alertMap" v-if='showAlertMap' @touchmove.stop.prevent="()=>{}">
-			<swiper class="alertMapBox" :indicator-dots='true'>
-				<swiper-item v-for="(item,index) in alertImgMapList">
-					<image class="alertImgMap" :src="item.image" mode="heightFix">
-					</image>
-				</swiper-item>
-			</swiper>
-			<view class="postionbuttom" @click="alertClick">
-				关闭
+		<view class="gn-wrap flex">
+			<view class="gn-icon flex">
+				<image src="../../static/icon/in2.png" mode="heightFix"></image>
+			</view>
+			<view class="gn-tit">
+				<view class="">
+					配件购买
+				</view>
+				<view class="tit-jj">
+					扫码租电
+				</view>
+			</view>
+			<view class="gn-btn">
+				立即购买
 			</view>
 		</view>
-		<!-- #ifndef APP -->
-		<view class="follow flex" @click="navTo('./follow')" v-if="follow==2">
-			<view class="">
-				请关注微信“绿津智能电动车”公众号
+		<!-- 功能区 ed-->
+		<!-- 附近门店 start -->
+		<view class="fjmd">
+			<image src="../../static/img/md.png" mode=""></image>
+		</view>
+		<!-- 附近门店 end -->
+		<!-- 使用攻略 start -->
+		<view class="sygl">
+			<view class="sy-top">
+				<image src="../../static/icon/gl-top.png" mode=""></image>
+				<view class="top-tit">
+					使用攻略
+				</view>
 			</view>
-			<view class="flex">
-				<text>
-					前往关注
-				</text>
-				<image class="followIcon" src="../../static/icon/next2.png" mode="widthFix"></image>
+			<view class="sy-content flex">
+				<view class="content-item flex">
+					<image src="../../static/icon/sy1.png" mode="" class="sy-icon"></image>
+					<view class="">
+						注册账号
+					</view>
+				</view>
+				<image src="../../static/icon/jt.png" mode="" class="jt"></image>
+				<view class="content-item flex">
+					<image src="../../static/icon/sy2.png" mode="" class="sy-icon"></image>
+					<view class="">
+						实名认证
+					</view>
+				</view>
+				
+				<image src="../../static/icon/jt.png" mode="" class="jt"></image>
+				<view class="content-item flex">
+					<image src="../../static/icon/sy3.png" mode="" class="sy-icon"></image>
+					<view class="">
+						购买租电
+					</view>
+				</view>
+				
+				<image src="../../static/icon/jt.png" mode="" class="jt"></image>
+				<view class="content-item flex">
+					<image src="../../static/icon/sy4.png" mode="" class="sy-icon"></image>
+					<view class="">
+						开始使用
+					</view>
+				</view>
+				
 			</view>
 		</view>
-		<!-- #endif -->
+		<!-- 使用攻略 ed-->
 	</view>
 </template>
 
@@ -74,7 +133,8 @@
 			noUser
 		},
 		data() {
-			return {
+			return {
+				carouselList: [],//轮播图
 				alertImgMapIndex: 0, //引导图流程次数
 				showAlertMap: false, //是否显示引导图
 				userOn: 0, //加载显示页面0不加载1加载已购买车辆页面2加载未购买商品页面
@@ -127,11 +187,11 @@
 			}
 			// #endif
 			// 初始化商家
-			this.storeList({})
+			// this.storeList({})
 			// 获取定位数据
 			this.getlocation();
 			// 加载分享信息
-			this.share()
+			// this.share()
 		},
 		onShow() {
 			this.loadIndexs();
@@ -188,17 +248,6 @@
 			// #endif
 			...mapMutations(['setFirstUse']),
 			...mapMutations('shop', ['setShopInfo']),
-			share() {
-				// console.log('加载分享');
-				const that = this;
-				// 请求获取默认数据
-				share({}).then(({
-					data
-				}) => {
-					// console.log('分享回调', data);
-					that.shareData = data.data
-				});
-			},
 			// 获取引导图
 			guide_map() {
 				guide_map().then((e) => {
@@ -400,135 +449,227 @@
 </script>
 
 <style lang="scss">
-	$paddingJg:40rpx;
-
-	page,
-	.indexBox {
-		height: 0;
+	page {
+		background: #ffff;
 		min-height: 100%;
+		height: auto;
 	}
 
-	.follow {
-		z-index: 9999;
-		font-size: $font-base;
-		color: #FFFFFF;
-		padding: 20rpx 30rpx;
-		line-height: 1;
-		position: fixed;
-		bottom: 0;
-		/* #ifdef H5 */
-		bottom: 50px;
-		/* #endif */
-		left: 0;
-		right: 0;
-		text-align: center;
-		background-color: rgba($color: #0BBB62, $alpha: 0.75);
+	// 顶部搜索
+	.top-search {
+		height: 80rpx;
+		padding: 0 20rpx;
+		background-color: #fff;
+
+		.top-logo {
+			width: 50rpx;
+			// height: 50rpx;
+			margin-right: 10rpx;
+
+			image {
+				width: 48rpx;
+			}
 
-		.followIcon {
-			width: 36rpx;
-			height: 36rpx;
 		}
-	}
 
-	// 弹窗引导页
-	.alertMap {
-		position: fixed;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		background-color: rgba($color: #000000, $alpha: 0.75);
-		text-align: center;
-		z-index: 9999999;
+		.search-box {
+			justify-content: center;
+			width: 698rpx;
+			height: 60rpx;
+			background: #EEEEEE;
+			// box-shadow: 0px 10rpx 20rpx 0px rgba(4, 114, 69, 0.22);
+			border-radius: 30rpx;
 
-		.postionbuttom {
-			position: absolute;
-			bottom: 20rpx;
-			left: 150rpx;
-			right: 150rpx;
-			background-color: $color-green;
-			border-radius: 99rpx;
-			color: #FFFFFF;
-			padding: 26rpx 0;
+			.search {
+				width: 34rpx;
+				height: 34rpx;
+			}
 
+			.search-font {
+				margin-left: 14rpx;
+				font-size: 28rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #CBCBCB;
+			}
 		}
+	}
 
-		.alertMapBox {
-			height: 100%;
-			padding-top: 10rpx;
-			padding-bottom: 120rpx;
-		}
+	// 顶部轮播图
+	.top-swiper {
+		width: 750rpx;
+		height: 473rpx;
 
-		.alertImgMap {
-			height: 100%;
+		// margin: 20rpx 0 0;
+		image {
+			width: 750rpx;
+			height: 473rpx;
 		}
 	}
 
-	/deep/ .itemTitleBox {
-		padding: 30rpx $paddingJg;
+	.jg {
+		height: 20rpx;
+		background: #F8F8F8;
+	}
 
-		.itemTitle {
-			font-size: 32rpx;
+	// 分类
+	.cate-section {
+		justify-content: space-around;
+		background-color: #fff;
+		padding: 0rpx 0 30rpx;
 
-		}
+		.cate-item {
+			flex-grow: 0;
+			width: 20%;
+			flex-direction: column;
+			text-align: center;
+			align-items: center;
+			justify-content: center;
 
-		.itemIcon {
-			width: 20rpx;
-			margin-left: 10rpx;
-		}
+			.img-wrapper {
+				width: 112rpx;
+				height: 112rpx;
+				border-radius: 20rpx;
+				position: relative;
 
-		.tager {
-			font-size: 24rpx;
-			font-weight: 400;
-		}
-	}
+				image {
+					width: 112rpx;
+					height: 112rpx;
+					position: absolute;
+					left: 50%;
+					top: 50%;
+					transform: translate(-50%, -50%);
+				}
+			}
 
-	.container {
-		line-height: 1;
-		font-weight: bold;
+			.item-title {
+				margin-top: 15rpx;
+				font-size: 26rpx;
+				font-weight: 500;
+				color: #666666;
+			}
+		}
 	}
 
-	.navbox {
-		/* #ifdef APP */
-		padding-top: var(--status-bar-height);
-		/* #endif */
-		/* #ifdef H5 || MP */
-		padding-top: 30rpx;
-		/* #endif */
-		padding-bottom: 30rpx;
-		position: fixed;
-		top: 0;
-		left: 0;
-		right: 0;
-		background-color: #FFFFFF;
-		z-index: 99;
+	.rznow {
+		font-weight: 500;
+		font-size: 26rpx;
+		color: #FFFFFF;
+		background-color: #78797a;
+		height: 74rpx;
+		padding: 0 42rpx 0 52rpx;
+		.rztit {
+			line-height: 74rpx;
+		}
+		.rzbtn {
+			width: 127rpx;
+			height: 47rpx;
+			text-align: center;
+			line-height: 47rpx;
+			background: #35d9b7;
+			border-radius: 24rpx;
+			font-size: 22rpx;
+		}
 	}
-
-	.topIconBox {
-		padding: 0 $paddingJg;
-		position: relative;
-
-		.topIconNum {
-			position: absolute;
-			top: -10rpx;
-			right: 20rpx;
-			font-size: $font-sm;
-			color: #FFFFFF;
-			min-width: 30rpx;
-			min-height: 30rpx;
-			border-radius: 100rpx;
-			background-color: $color-red;
-			padding: 5rpx;
+	.gn-wrap {
+		margin: 45rpx auto;
+		width: 670rpx;
+		height: 219rpx;
+		background: #FFFFFF;
+		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(50,50,52,0.06);
+		border-radius: 30rpx;
+		padding-right: 47rpx;
+		.gn-icon {
+			flex-shrink: 0;
+			width: 210rpx;
+			height: 100%;
 			justify-content: center;
+			image {
+				height: 112rpx;
+			}
 		}
-
-		.topIcon {
-			width: 45rpx;
-			height: 45rpx;
+		.gn-tit {
+			flex-grow: 1;
+			font-weight: bold;
+			color: #333333;
+			font-size: 36rpx;
+			flex-direction: column;
+			justify-content: center;
+			align-items: flex-start;
+			.tit-jj {
+				font-size: 25rpx;
+				font-weight: 500;
+				color: #666666;
+				padding-top: 32rpx;
+			}
+		}
+		.gn-btn {
+			flex-shrink: 0;
+			width: 127rpx;
+			border: 1px solid $base-color;
+			border-radius: 28rpx;
+			font-size: 25rpx;
+			font-weight: 500;
+			color: $base-color;
+			line-height: 55rpx;
+			text-align: center;
 		}
 	}
-
-	.greenText {
-		color: $color-green;
+	.fjmd {
+		width: 708rpx;
+		height: 288rpx;
+		margin: 20rpx auto;
+		image {
+			width: 100%;
+			height: 100%;
+		}
+	}
+	.sygl {
+		.sy-top {
+			position: relative;
+			height: 100rpx;
+			image {
+				width: 369rpx;
+				height: 8rpx;
+				position: absolute;
+				top: 0;
+				bottom: 0;
+				left: 0;
+				right: 0;
+				margin: auto;
+			}
+			.top-tit {
+				font-size: 32rpx;
+				font-weight: bold;
+				color: #4A2723;
+				text-align: center;
+				line-height: 100rpx;
+			}
+			
+		}
+		.sy-content {
+			padding: 0 10rpx 65rpx ;
+			.content-item {
+				flex-grow: 1;
+				flex-direction: column;
+				justify-content: center;
+				align-items: center;
+				font-size: 22rpx;
+				font-weight: 500;
+				color: #4A2723;
+			}
+			.sy-icon {
+				width: 90rpx;
+				height: 90rpx;
+				margin-bottom: 15rpx;
+			}
+			.jt {
+				flex-shrink: 0;
+				width: 14rpx;
+				height: 15rpx;
+				margin-top: 40rpx;
+				align-self: flex-start;
+			}
+		}
 	}
 </style>