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 :circular="true" :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 :src="userInfo.selfPhotoUrl || '/static/me/ud4.png'" mode=""></image>
							</view>
							<view class="text">
								<view class="phone">{{ userInfo.ncikName || ''}}</view>
								<!--                <view class="welcome">尊敬的{{ userInfo.ncikName || ''}}，下午好~</view>-->
							</view>
							<view @click="goQrCode" 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="/static/me/u5.png" 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  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="address1">{{storeInfo.distanceDesc}}</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/2.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/1.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 class="button-wrap">
								<view @click="goRights()" class="btn">
									<view class="icon">
										<u-icon name="/static/index/equity_card.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>-->
					<!--            &lt;!&ndash; 分割线 &ndash;&gt;-->
					<!--            <view class="custom-line"></view>-->
					<!--            &lt;!&ndash; 门店列表 &ndash;&gt;-->
					<!--            <view class="store-wrap ">-->
					<!--              <view class="store-list">-->
					<!--                <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="">-&#45;&#45;到底了-&#45;&#45;</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() {
			this.updateApp()
			this.userInfo = uni.getStorageSync('userInfo');
			if (this.userInfo.selfPhoto) {
				this.getImgUrlByOssId(this.userInfo.selfPhoto);
			}
			// 查询门店信息
			const data = uni.getStorageSync('storeInfo');
			if (!data) {
				// 获取位置信息查询门店列表数据
				this.getLocation();
			} else {
				this.storeInfo = data;
			}
		},
		onLoad(e) {

			if (e.shareUserId) {
				//用户点击分享到好友或者朋友圈传递过来的参数
				uni.setStorageSync('shareUserId', e.shareUserId)
			}
			if (e.scene) {
				//用户扫用户的会员吗进入小程序
				uni.setStorageSync('shareUserId', e.scene)
			}

			if (e.q) {
				//用户扫技师端或者拓客端二维码传递过来的参数
				const q = decodeURIComponent(e.q)
				let a = q.split('?')
				let b = a[1].split('&')
				let param = {} //技师端分享过来的参数
				for (let i = 0; i < b.length; i++) {
					param[b[i].split('=')[0]] = b[i].split('=')[1]
				}
				if (param.expandUserId) { //从拓客端进来的用户
					uni.setStorageSync('expandParam', param)
				} else { //从技师端进来的用户
					uni.setStorageSync('promotionParam', param)
				}

			}

			this.getLocation();

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

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

			// 用户信息

			setTimeout(() => {
				this.userInfo = uni.getStorageSync('userInfo');
				if (this.userInfo.selfPhoto) {
					this.getImgUrlByOssId(this.userInfo.selfPhoto);
				}
			}, 2000)

		},
		//分享到朋友圈
		onShareTimeline(option) {
			return {
				title: '娇骄儿造型',
				imageUrl: '/static/logo.png',
				query: `shareUserId='${this.userInfo.id}`,
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			};
		},

		//分享到好友
		onShareAppMessage: function(res) {
			return {
				title: '娇骄儿造型',
				imageUrl: '/static/logo.png',
				path: `/pages/index/index?shareUserId=${this.userInfo.id}`,
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			};
		},


		methods: {

			goQrCode() {
				uni.navigateTo({
					url: '/pages/qrCode/index'
				})
			},

			goRights() {
				uni.navigateTo({
					url: '/storePages/rights/index'
				})
			},

			// 去服务点单页面
			gotoServiceOrder() {
				uni.navigateTo({
					url: '/orderPages/storeService/index'
				})
			},

			goBookService() {
				uni.navigateTo({
					url: '/orderPages/bookService/index'
				})
			},
			//点击通知
			handleNoticeClick(e) {
				console.log(e)
				uni.navigateTo({
					url: '/storePages/notice/index?noticeId=' + e.noticeId,
				})
			},
			// 去优惠劵大厅
			gotoReceiveCoupons() {
				uni.navigateTo({
					url: '/orderPages/receiveCoupons/index'
				})
			},
			// 去我的优惠劵页面
			gotoCoupon() {
				uni.navigateTo({
					url: '/orderPages/myCoupon/index'
				})
			},
			// 储值服务
			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);
				})
			},
			async getImgUrlByBannerOssId(items) {
				for (let i = 0; i < items.length; i++) {
					if (items[i].slideshowId) {
						this.$api.getImage(items[i].slideshowId).then(res => {
							this.bannerList.push(res.data.data[0].url.replace(/^http:/, "https:"))
						})
					}
				}
			},
			// 获取门店列表数据
			getStoreListData(data) {
				let that = this;
				// 用户绑定门店
				this.$api.storeList(data).then((res) => {
					console.log(res.data.data[0])
					that.storeInfo = res.data.data[0]
					// 更新用户选择的门店信息
					uni.setStorageSync('storeInfo', res.data.data[0])
				})
			},

			getNoticeListData() {
				let req = {
					auth: true,
					noticeType: 2,
					status: 0
				}
				this.$api.noticeList(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;
					}
				})
			},

			getImgUrlByOssId(ossId) {

				if (ossId) {
					this.$api.getImage(ossId).then(res => {
						this.userInfo.selfPhotoUrl = res.data.data[0].url.replace(/^http:/, "https:")
						this.$set(this.userInfo)
					})
				}

			},
			// 获取经纬度信息
			getLocation() {
				let that = this
				console.log('+++++++++++++开始获取位置信息++++++++++++++++')
				uni.getLocation({
					type: 'gcj02',
					success: function(res) {
						console.log(res)
						let latitude = res.latitude; // 纬度
						let longitude = res.longitude; // 经度
						let speed = res.speed; // 速度
						let accuracy = res.accuracy; // 精确度
						// 在这里可以对位置信息进行处理
						console.log("纬度：" + latitude + ";经度" + longitude)
						that.reqParm.latitude = latitude
						that.reqParm.longitude = longitude
						uni.setStorageSync('location', that.reqParm)
					},
					fail: function(fail) {
						console.log('获取用户地址失败==》', fail)
					},
					complete: function(complete) {
						console.log('获取用户地址失败or成功==》', complete)
						that.getStoreListData(that.reqParm)
					}
				});
			},

			// 去选择门店
			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.setStorageSync('orderListIndex', 1)
				uni.switchTab({
					url: '/pages/order/index',
				})
			},
			// 去商品下单页面
			gotoGoods() {
				uni.navigateTo({
					url: '/orderPages/bookService/index',
				})
			},

			// 用户绑定门店
			userBindStore() {
				let that = this;
				// 用户绑定门店
				this.$api.userBindStore(this.reqParm).then((res) => {
					console.log(this.reqParm)
				})
			},
			updateApp() {
				const updateManager = uni.getUpdateManager();

				updateManager.onCheckForUpdate(function(res) {
					// 请求完新版本信息的回调
					console.log('++++++++++onCheckForUpdate++++++++++', res.hasUpdate);
					if (res.hasUpdate) {

						updateManager.onUpdateReady(function(res) {
							console.log('+++++++++onUpdateReady+++++++++++++', res)
							uni.showModal({
								title: '更新提示',
								content: '新版本已经准备好，是否重启应用？',
								showCancel: false,
								success(res) {
									if (res.confirm) {
										// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
										updateManager.applyUpdate();
									}
								}
							});
						});

						updateManager.onUpdateFailed(function(res) {
							// 新的版本下载失败
							console.log('+++++++++onUpdateFailed+++++++++++++', res)
							uni.showModal({
								title: '更新提示',
								content: '检测到小程序更新，但是下载失败，请检查网络',
								showCancel: false
							});
						});
					}
				});
			},

		}
	};
</script>

<style scoped lang="scss">
	/* 头部内容 */
	.head-wrap {
		height: 1375rpx;
		background: #FFE05C;

		.content-info {
			position: relative;

			.h-bg {
				height: 680rpx;
			}

			.content {
				position: absolute;
				top: 460rpx;
				left: 24rpx;
				right: 24rpx;
				border-radius: 12rpx;

				.h-notice-bar {
					padding-left: 20rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(237, 86, 159, 0.05);
					border-radius: 20rpx;
				}

				.noticeCard {
					margin-top: 10rpx;
					padding: 10rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 8rpx 16rpx 0rpx 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: 18px;
								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;
								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 {
										width: 400rpx;
										color: #999999;
										font-size: 12px;
										padding-right: 12px;
									}

									.address1 {
										color: #999999;
										font-size: 12px;
										padding-right: 12px;
									}
								}
							}

						}

						.adress {
							font-size: 22rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							padding-left: 80rpx;
							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: 28rpx;
							line-height: 36rpx;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							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;
		background-color: #FFE05C;
	}

	.tabBarView {
		position: fixed;
		bottom: 0;
	}
</style>