jje_uniapp/pages/index/index.vue

<template>
	<view class="content-wrap bg-color">


		<view class="head-wrap ">
			<view class="content-info ">

				<view class="h-bg">
					<!-- 轮播图 -->
					<u-swiper
							:list="bannerList"
							:height="340"
					></u-swiper>
				</view>
				<view class="content">

					<!--  通知栏 -->
					<view v-if="noticeList.length > 0" class="h-notice-bar">
						<scroll-notice  :dataList="noticeList" :type="2" :interval="3000" :height="46" :fontSize="12" color="#666666" @click="handleNoticeClick"></scroll-notice>
					</view>

					<!-- 个人信息、钱包、商店 -->
					<view class="h-content-wrap">
						<!-- 欢迎语 -->
						<view class="welcome-wrap">
							<view class="logo">
								<image v-if="userInfo.selfPhotoUrl" :src="userInfo.selfPhotoUrl" mode=""></image>
								<image v-else src="../../static/logo.png" mode=""></image>
							</view>
							<view class="text">
								<view class="phone">{{userInfo.cellPhone}}</view>
								<view class="welcome">尊敬的{{userInfo.ncikName}}，下午好~</view>
							</view>
							<view @click="gotoReceiveCoupons()" class="arrow-right">
								<!-- <image v-if="userInfo.wxQrCode" class="qrcode" :src="userInfo.qrcode" mode=""></image> -->
								<!-- <image class="qrcode" src="../../static/index/qrcode.png" mode=""></image>
								<view class="h-text">会员码</view> -->
								<view class="coupon-wrap">
									<u-icon name="coupon-fill" color="#ffb83d" size="22"></u-icon>
									<text>领券中心</text>
								</view>
							</view>
						</view>

						<!-- 余额信息 -->
						<view class="balance-info">
							<view @click="gotoRechargeService()" class="balance-amount">
								<text class="number" v-if="userInfo.balance" >￥{{userInfo.balance}}</text>
								<text class="number" v-else>￥0.00</text>
								<view class="">余额 </view>
							</view>
							<view @click="gotoIntgral()" class="score-info">
								<text class="number"  v-if="userInfo.integral" >{{userInfo.integral}}</text>
								<text class="number"  v-else>0</text>
								<view class="">积分 </view>
							</view>
							<view @click="gotoCoupon()" class="coupon-info">
								<text class="number" v-if="userInfo.coupon">{{userInfo.coupon}}</text>
								<text class="number" v-else>0</text>
								<view class="">优惠券 </view>

							</view>
							<view class="e-currency-info">
								<text class="number" v-if="userInfo.electronicCurrency">{{userInfo.electronicCurrency}}</text>
								<text class="number" v-else>0</text>
								<view class="">电子币</view>
							</view>
						</view>

						<view class="custom-line"></view>

						<view class="store-wrap">
							<view class="store-info">
								<view class="logo">
									<image src="../../static/index/u55.png" mode=""></image>
								</view>
								<view @click="gotoStoreChoose()" class="store-content">
									<view class="h-row">
										<view class="store-desc">
											<view class="store-name">
												<view class="">{{storeInfo.storeName}}</view>
											</view>
										</view>
										<view class="arrow-right">
											<view  class="change-store">更换门店</view>
											<u-icon name="arrow-right" color="#333" size="16"></u-icon>
										</view>
									</view>
									<view class="h-row">
										<text class="address">地址：{{storeInfo.address}}</text>
										<!-- <text class="address">距你1.8km</text> -->
									</view>
								</view>
							</view>

						</view>
					</view>

					<!-- 上次订单 -->
					<view class="nav-wrap ">

						<view class="upper-order-wrap">
							<!-- 左边内容 -->
							<view @click="gotoServiceOrder()" class="left-content">
								<view class="title">
									到店服务
								</view>
								<view class="desc">
<!--									多种服务模式任您选择-->
								</view>
								<view class="bg-img">
									<image src="../../static/index/u65.png" mode=""></image>
								</view>
							</view>
							<!-- 右边内容 -->
							<view class="right-content"  @click="goBookService()">
								<view class="title">
									预约服务
								</view>
								<view class="desc">
<!--									拼命研发中敬请期待...-->
								</view>
								<view class="bg-img">
									<image src="../../static/index/u67.png" mode=""></image>
								</view>
							</view>
						</view>

						<!-- 导航菜单 -->
						<view class="horizontal-dashed-line"></view>
						<view class="menu-tab">
							<view class="button-wrap">
								<view @click="gotoComeOrder()" class="btn">
									<view class="icon">
										<u-icon name="/static/index/u213.png" color="red" size="30"></u-icon>
									</view>
									<view class="name">
										再来一单
									</view>
								</view>
							</view>
							<view class="button-wrap">
								<view @click="gotoRechargeService()" class="btn">
									<view class="icon">
										<u-icon name="/static/index/u215.png" color="red" size="30"></u-icon>
									</view>
									<view class="name">
										储值服务
									</view>
								</view>
							</view>
							<view class="button-wrap">
								<view @click="gotoOrder()" class="btn">
									<view class="icon">
										<u-icon name="/static/index/u217.png" color="red" size="30"></u-icon>
									</view>
									<view class="name">
										当前订单
									</view>
								</view>
							</view>
							<view class="button-wrap">
								<view @click="gotoReceiveCoupons()" class="btn">
									<view class="icon">
										<u-icon name="/static/index/u247.png" color="red" size="30"></u-icon>
									</view>
									<view class="name">
										领优惠券
									</view>
								</view>
							</view>
						</view>
					</view>

					<!-- 为你推荐 -->
					<view class="recommend-wrap">
						<view class="recommend-nav">
							<view class="icon">
								<image src="/static/index/u87.png" mode=""></image>
							</view>
							<view class="title">
								为你推荐
							</view>
						</view>
						<!-- 分割线 -->
						<view class="custom-line"></view>
						<!-- 门店列表 -->
						<view class="store-wrap ">
							<view class="store-list" v-for="item in 1">
								<view class="store-content">
									<view class="store-img">
										<image src="../../static/logo.png" mode=""></image>
									</view>
									<view class="h-store-content">
										<view class="title">
											<text>{{storeInfo.storeName}}</text>
										</view>
										<view class="adress">
											地址：{{storeInfo.address}}
										</view>
										<view class="desc">
											<view class="price">
											</view>
											<view @click="gotoGoods()" class="order-btn">
												<view class="btn">去下单</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="footer ">
						<view class="">---到底了---</view>
					</view>
				</view>
			</view>
		</view>

		<view class="tabBarView">
			<tab-bar :tabIndex="tabIndex"></tab-bar>
		</view>
	</view>

</template>

<script>
	import tabBar from "../../components/tabBar/tabBar";
	import ScrollNotice  from '../../components/scroll-notice/ScrollNotice.vue';
	export default {
		components: {
			ScrollNotice,tabBar
		},
		data() {
			return {
				noticeList: [],
				notice: '',
				userInfo: {},
				bannerList: [],
				reqParm: {
					auth: true,
					appid: 46,
					telphone: '',
					longitude: 0,
					latitude: 0
				},
				storeList: [],
				storeInfo: {}
			};
		},

		onShow(){
			// 查询门店信息
			const data = uni.getStorageSync('storeInfo');
			if(!data){
				// 获取门店列表数据
				console.log('+++++++++++++++++++++++++++++++++',this.userInfo)
				this.getStoreListData();
			} else {
				this.storeInfo = data;
			}
		},
		onLoad(){
			uni.hideTabBar({
				animation:false
			})

			// 获取经纬度信息
			this.getLocation();

			//公告信息
			this.getNoticeListData();

			// 获取banner图列表
			this.getSlideshowList();

			// 用户信息
			this.userInfo = uni.getStorageSync('userInfo');
			this.getImgUrlByOssId(this.userInfo.selfPhoto);
		},
		// 分享到朋友圈
		onShareTimeline() {},
		// 分享到用户
		onShareAppMessage(OBJECT) {},
		methods: {
			// 去服务点单页面
			gotoServiceOrder(){
				uni.navigateTo({
					url:'/orderPages/storeService/index'
				})
			},

			goBookService(){
				uni.navigateTo({
					url:'/orderPages/bookService/index'
				})
			},
			//点击通知
			handleNoticeClick(e) {
				console.log(e)
				uni.$u.route({
					url: '/pages/notice/notice-detail',
					params: {
						noticeId: e.noticeId
					}
				})
			},
			// 去优惠劵大厅
			gotoReceiveCoupons(){
				uni.$u.route({
					url: '/pages/coupon/receive-coupons',
					params: {}
				})
			},
			// 去我的优惠劵页面
			gotoCoupon(){
				uni.navigateTo({
					url: '/myPages/coupon/index?name=lisa',
				})
			},
			// 储值服务
			gotoRechargeService(){
				uni.navigateTo({
					url: '/myPages/recharge/index?name=lisa',
				})
			},
			// 获取banner图片
			getSlideshowList(){
				let that = this;
				this.$api.getSlideshowList({data:this.reqParm}).then((res)=>{
					this.getImgUrlByBannerOssId(res.data.data);
				}).catch(() =>{
					uni.showToast({
						title: "操作失败"
					})
				})
			},
			async getImgUrlByBannerOssId(items){
				for(let i = 0; i <items.length; i++) {
					this.$api.getImgUrlByOssId({ossId:items[i].slideshowId}).then(res=>{
						this.bannerList.push(res.data.data[0].url.replace(/^http:/, "https:"))
					})

				}
			},
			// 获取门店列表数据
			getStoreListData(){
				let that = this;
				// 用户绑定门店
				this.$api.storeList(this.reqParm).then((res)=>{
					console.log(res.data.data[0])
						that.storeInfo = res.data.data[0]
						// 更新用户选择的门店信息
						uni.setStorageSync('storeInfo',res.data.data[0])
				}).catch(() =>{
					uni.showToast({
						title: "操作失败"
					})
				})
			},
			// 积分详细页面
			gotoIntgral(){
				uni.$u.route({
					url: '/pages/integral/integral',
					params: {
						name: 'lisa'
					}
				})
			},
			getNoticeListData(){
				let req = {
					auth: true,
					noticeType:2
				}
				this.$api.noticeList({data:req}).then((res)=>{
					if (res.data.rows.length === 1){
						this.noticeList.push(res.data.rows[0])
						this.noticeList.push(res.data.rows[0])
					}else{
						this.noticeList = res.data.rows;
					}
				}).catch(() =>{
					uni.showToast({
						title: "操作失败"
					})
				})
			},

			 getImgUrlByOssId(ossId){
				if (ossId){
					this.$api.getImgUrlByOssId(ossId).then(res=>{
						console.log('++++++++用户头像+++++++++++++++',res)
					})
					this.userInfo.selfPhotoUrl = url;
					return url;
				}

			},
			// 获取经纬度信息
			getLocation(){

				uni.getLocation({
					type: 'gcj02',
					success: function(res) {
						var latitude = res.latitude; // 纬度
						var longitude = res.longitude; // 经度
						var speed = res.speed; // 速度
						var accuracy = res.accuracy; // 精确度
						// 在这里可以对位置信息进行处理
						console.log("纬度："+latitude+";经度"+longitude)
						this.reqParm.latitude = latitude
						this.reqParm.longitude = longitude
					}
				});
			},

			// 去选择门店
			gotoStoreChoose(){
				uni.navigateTo({
					url: '/storePages/store/store-choose?type=1',
				})
			},
			// 去再来一单
			gotoComeOrder(){

				uni.$u.route({
					url: '/pages/index/tabbar',
					params: {
						PageCur: 'orderList',
						status : '4'
					}
				})

			},

			// 去订单页面
			gotoOrder(){
				uni.$u.route({
					url: '/pages/index/tabbar',
					params: {
						PageCur: 'orderList'
					}
				})
			},
			// 去商品下单页面
			gotoGoods(){
				uni.$u.route({
					url: '/pages/index/tabbar',
					params: {
						PageCur: 'goods'
					}
				})
			},

			// 用户绑定门店
			userBindStore(){
				let that = this;
				// 用户绑定门店
				this.$api.userBindStore(this.reqParm).then((res)=>{
					console.log(this.reqParm)
				}).catch(() =>{
					uni.showToast({
						title: "操作失败"
					})
				})
			},

		}
	};
</script>

<style scoped lang="scss">

	/* 头部内容 */
	.head-wrap{
		height: 1080px;
		background: #FFE05C;
		.content-info{
			position: relative;

			.h-bg{
				height: 340px;
			}
			.content{
				position: absolute;
				top: 230px;
				left: 12px;
				right: 12px;
				border-radius: 6px;
				.h-notice-bar{
					padding-left: 10px;
					height: 46px;
					background: #FFFFFF;
					box-shadow: 0px 4px 8px 0px rgba(237,86,159,0.05);
					border-radius: 10px;
				}
				.h-content-wrap{
					background: #fff;
					border-radius: 10px;
					/* 欢迎语 */
					.welcome-wrap{
						padding-top: 12px;
						display: flex;
						margin-left: 12px;
						margin-right: 12px;
						margin-top: 16px;
						align-items: center;
						.logo {
							width: 13%;
							image{
								border-radius: 15px;
								width: 36px;
								height: 36px;
							}
						}
						.text{
							width: 60%;
							font-size: 14px;
							.welcome-wrap{
								font-size: 12px;
								color: #999999 ;
							}
							.welcome{
								font-size: 12px;
								color: #999999 ;
							}
						}
						.arrow-right{
							width: 30%;
							text-align: center;
							cursor: pointer;
							display: flex;
							justify-content: center;
							background: #fff8db;
							// background: red;
							height: 32px;
							align-items: center;
							border-radius: 16px;
							.qrcode{
								height: 20px;
								width: 20px;
							}
							.h-text{
								font-size: 12px;
								color: #999999 ;
							}
							.coupon-wrap{
								display: flex;
								font-size: 14px;
								color: #666;
								align-items: center;
							}
						}

					}

					/* 钱包信息 */
					.balance-info{
						font-size: 12px;
						padding-left: 12px;
						margin-bottom: 16px;
						margin-top: 12px;
						color: #666;
						display: flex;
						justify-content: space-around;
						text-align: center;
						.balance-amount{padding-right: 4px;}
						.score-info{padding-right: 4px;}
						.coupon-info{padding-right: 4px;}
						.e-currency-info{padding-right: 4px;}
						.number{
							color: #333333;
							font-size: 14px;
						}
					}

					/* 商店信息 */
					.store-wrap{
						margin: 10px;
						.store-info{
							display: flex;
							.logo {
								width: 10%;
								text-align: center;
								display: flex;
								justify-content: center;
								align-items: center;
								image{
									width: 30px;
									height: 30px;
								}
							}
							.store-content{
								width: 90%;
								padding-bottom: 13px;
								.h-row{
									display: flex;
									align-items: center;
									justify-content: space-between;
									.store-desc{
										width: 90%;
										display: flex;
										line-height: 30px;
										font-size: 14px;
										.store-name{
										}

									}
									.arrow-right{
										text-align: right;
										margin: 0 auto;
										cursor: pointer;
										padding-top: 3px;
										width: 100px;
										display: flex;
										font-size: 14px;
										.change-store{
											text-align: right;
											color: #666;
										}
										image{
											width: 18px;
											height: 18px;
										}
									}
									.address{
										color: #999999;
										font-size: 12px;
										padding-right: 12px;
									}
								}
							}

						}
						.adress{
							font-size: 11px;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							padding-left:40px;
							color: #666;
						}
					}
				}
			}
		}
	}


	/* 上次订单 */
	.nav-wrap{
		background: #fff;
		border-radius: 8px;
		margin-top: 16px;
		.upper-order-wrap{
			display: flex;
			border-radius: 6px;
			justify-content: center;
			.left-content{
				margin-top: 20px;
				width: 50%;
				font-size: 12px;
				text-align: center;
				border-radius: 10px;
				.title{
					font-size: 18px;
					text-align: center;
				}
				.desc{
					padding-top: 6px;
					color: #999999;
				}
				.bg-img{
					text-align: center;
					height: 100px;
					display: flex;
					justify-content: center;
					align-items: center;
					image{
						width: 78px;
						height: 78px;
					}
				}
			}
			.right-content{
				margin-top: 20px;
				width: 50%;
				font-size: 12px;
				text-align: center;
				.title{
					font-size: 18px;
					text-align: center;
				}
				.desc{
					padding-top: 6px;
					color: #999999;
				}
				.bg-img{
					height: 100px;
					text-align: center;
					display: flex;
					justify-content: center;
					align-items: center;
					image{
						width: 78px;
						height: 78px;
					}
				}
			}
		}
		.menu-tab{
			display: flex;
			justify-content: space-around;  // 平均分布
			justify-content: center;
			padding-bottom: 8px;
			.button-wrap{
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 16px;
				margin-bottom: 18px;
				.name{
					padding-top: 3px;
					font-size: 12px;
					color: #666666;
				}
				.btn{
					padding-left: 12px;
					padding-right: 12px;
					height: 36px;
					border-radius: 18px;
					.icon{
						display: flex;
						padding-right: 6px;
						align-items: center;
						justify-content: center;
						image{
							height: 14px;
							width: 14px;
						}
					}
				}
			}
		}
	}


	/* 为你推荐 */
	.recommend-wrap{
		margin-top: 16px;
		background: #fff;
		border-radius: 8px;
		.recommend-nav{
			display: flex;
			margin-left: 12px;
			padding-top: 8px;
			padding-bottom: 4px;
			align-items: center;
			.icon{
				padding-right: 4px;
				image{
					height: 26px;
					width: 26px;
				}
			}
			.title{
				font-size: 16px;
			}
		}
		/* 门店列表 */
		.store-wrap{
			margin: 12px;
			height: 100px;
			.store-list{
				margin-top: 16px;
				.store-content{
					display: flex;
					.store-img{
						width: 30%;
						image{
							width: 100%;
							height: 78px;
							border-radius: 6px;
						}
					}
					.h-store-content{
						width: 70%;
						padding-left: 8px;
						padding-top: 4px;
						.title{
							font-size: 18px;
							font-family: "黑体", sans-serif;
						}
						.adress{
							font-size: 14px;
							color: #666;
						}
						.price{
							color: #666;
							width: 60%;
							font-size: 14px;
							line-height: 22px;
							.red{
								color: red;
								font-size: 16px;
							}
						}
						.desc{
							display: flex;
							padding-top: 3px;
							.price{
								width: 60%;
								font-size: 14px;
								line-height: 22px;
							}
							.order-btn{
								width: 100%;
								.btn{
									background: #FFE05C;
									text-align: center;
									border-radius: 14px;
									height: 26px;
									line-height: 26px;
									color: #333;
									font-size: 12px;
								}
							}
						}
					}
				}

			}
		}
	}

	/* 底部 */
	.footer{
		margin-top: 30px;
		height: 60px;
		font-size: 12px;
		text-align: center;
		color: #666;
		margin-bottom: 40px;
	}

	.tabBarView{
		position: fixed;
		bottom: 0;
	}

</style>