GuangYuYuan-app/pages/index/index.vue

<template>
	<view class="index">
		<view class="head">
		</view>
		<view class="swiper">
			<template>
				<u-swiper :list="list" class="custom-swiper"></u-swiper>
			</template>
		</view>
		<view class="tag">
			<view class="item" v-for="item in tagList">
				<img src="../../static/index/Frame.png" alt="" />
				{{item.value}}
			</view>
		</view>
		<view class="recommend">
			<view class="tuijian_img">
				<img src="../../static/index/tuijian.png" alt="" />
			</view>

			<view class="recommend_js" v-for="(item,index) in rankingList" :key="index" @click="jumpDetail(item)">
				
				<view class="js_img">
				
					<!-- <image src="../../static/index/ranking.png" mode=""></image> -->
					<view class="border">
							<image :src="iamgeTitle+item.cPortrait" mode="" ></image>
					</view>
				</view>
				
				{{item.cNickName}}
			</view>
		</view>
		<view class="content">
			<view class="selcet_box">
				<view class="options" :class="currentIndex == index?'hover':''" v-for="(item,index) in selectList" :key="index"
					@click="selectOptions(item,index)">
					{{item.cdescribe}}
				</view>
			</view>
			<view class="menu">
				<view class="project" v-for="(item,index) in pojectList" :key="index" @click="goDetails(item.cId)">
					<view class="img">
						<image :src="$globalData.publicUrl + item.cCover"></image>
						<!-- <view class="time">
							{{item.nMinute}}分钟
						</view> -->
					</view>
					<view class="describe">
						<view class="name">
							{{item.cTitle}}
						</view>
						<view class="num">
							<view class="time">
								<img src="../../static/index/time.png" alt="" />
								{{item.nMinute}}分钟
							</view>
							<view class="time">
								<img src="../../static/index/people.png" alt="" />
								{{item.nSaleNumber}}人选择
							</view>
						</view>
						<view class="num">
							{{item.cLdList}}
						</view>
						<!-- 	<view class="num">
							超{{item.nSaleNumber}}人选择
						</view> -->
						<view class="price_box">
							<view class="price">
								￥<text>{{item.dPrice}}</text>
							</view>

							<view class="make" @click.stop="choose(item.cId)">
								预约
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="container" v-if="showCoupon">
			<view class="coupon-box show">
				<view class="bgi">
					<image src="../../static/index/popup_bgi.png" mode=""></image>
					<view class="border">
						<image src="../../static/index/border.png" mode=""></image>
					</view>
					<view class="cut" @click="cut">
						<image src="../../static/other/cut.png" mode=""></image>
					</view>
					<view class="btn" @click="collection">
						<image src="../../static/index/collection.png" mode=""></image>
					</view>
					<view class="coupon">
						<view class="item" v-for="(item,index) in couponList">
							<view class="left">
								<text v-if="item.discountType == 3">￥{{item.discountValue}}<br /></text>
								<text v-else>{{item.rebValue}}折券<br /></text>
								<!-- ￥{{item.discountValue}}<br/> -->
								有效期{{item.termDays}}天
							</view>
							<view class="right" v-if="item.discountType == 3">
								满{{item.thresholdAmount}}减{{item.discountValue}}
							</view>
							<view class="right" v-else>
								满{{item.thresholdAmount}}可用
							</view>
							<view class="one_btn" @click.stop="oneCollection(item)">
								<image src="../../static/index/one.png" mode=""></image>
							</view>
						</view>
					</view>

				</view>

				<!-- <view class="coupon-header">恭喜您获得优惠券</view>
				<view class="coupon-amount">{{ couponAmount }}</view>
				<view class="coupon-desc">{{ couponDesc }}</view>
				<button class="coupon-btn" @click="receiveCoupon">立即领取</button> -->
			</view>
			<view class="mask show" @click="hideCoupon"></view>
		</view>
	</view>
</template>

<script>
	// import { log } from 'util'
	import {
		slideshow,
		project,
		getwxQrCode,
		brightSpot,
		getAccessToken,
		windows,
		couponReceive,
		ranking
	} from '../../api/index'
	export default {
		data() {
			return {
				iamgeTitle:this.$globalData.publicUrl,
				showCoupon: false,
				selectList: [{
					cdescribe: "热门"
				}],
				list: [],
				indicatorDots: true,
				autoplay: true,
				pojectList: [],
				currentIndex: 0,
				cLdList: '',
				code: '',
				couponList: [],
				tagList: [{
						value: '实名认证'
					},
					{
						value: '爽约包赔'
					},
					{
						value: '超时秒退'
					},
					{
						value: '资质证书'
					}
				],
				rankingList: [{
						name: 'sss',
						img: '../..//static/identify/logo.png'
					},
					{
						name: 'sss',
						img: '../..//static/identify/logo.png'
					},
					{
						name: 'sss',
						img: '../..//static/identify/logo.png'
					},
					{
						name: 'sss',
						img: '../..//static/identify/logo.png'
					}
				]
			}
		},
		onShow() {
			console.log(this.$globalData.publicUrl)
			uni.request({
				url: 'https://restapi.amap.com/v3/ip?parameters',
				data: {
					key: '5457092e6c62b83c1b2e45dbe973d858'
				},
				success(res) {
					uni.setStorageSync('selectCity', res.data.city.slice(0, 2))
					// this.$router.go(0)
				}
			})
			this.getList()
			this.getProject()
			this.getbrightSpot()
			this.getlocaltion()
			this.getPopup()
			this.getranking()
		},
		onHide() {
			this.list = []
			this.selectList = [{
				cdescribe: "热门"
			}]

		},
		onLoad(parm) {
			let that = this
			that.cont()

			// if (!options == '') {
			// 	uni.setStorageSync('wx_copenid', options.openid)
			// 	uni.setStorageSync('access-token', options.token)
			// }else{
			// }

			// uni.setStorageSync('wx_copenid', 'o-HEJ6VP2YNi0HPeLaIHCQsQD69s')
			// uni.setStorageSync('access-token', 'eyJhbGciOiJIUzUxMiJ9.eyJ0ZjoiOiJlNGNiNjY0ZS05Y2Q5LTRlOWItODU1Yy0zN2RlNjRiOGI3ZDIifQ.xj0ZBULLc7wYOaUgDQd_zbeynbJ8M3M-UQM6JPUKcV9rIWVlax8dJnU247om39nialcKnklKFZ8m8oerc-NY0A')
		},
		methods: {
			getranking() {
				let data = {
					deptName:uni.getStorageSync('selectCity')
				}
				ranking(data).then(res => {
					console.log(res)
					this.rankingList = res.data.slice(0, 4)
				})
			},
			cut() {
				this.showCoupon = false
			},
			oneCollection(item) {
				let data = {
					couponIds: [],
					openId: uni.getStorageSync('wx_copenid')
				}
				data.couponIds.push(item.id)
				couponReceive(data).then(res => {
					this.showCoupon = false
					uni.showToast({
						title: '已领取',
						icon: 'none'
					})
				})
			},
			collection() {
				let data = {
					couponIds: [],
					openId: uni.getStorageSync('wx_copenid')
				}
				this.couponList.forEach(item => {
					data.couponIds.push(item.id)
				})
				couponReceive(data).then(res => {
					this.showCoupon = false
					uni.showToast({
						title: '已领取',
						icon: 'none'
					})
				})

			},
			getPopup() {
				let data = {}
				data.openid = uni.getStorageSync('wx_copenid')
				data.deptName = uni.getStorageSync('selectCity')
				windows(data).then(res => {
					if (res.data.data.length > 0) {
						this.showCoupon = true
						this.couponList = res.data.data
					} else {
						return
					}
				})
			},
			// showCouponBox() {
			//      this.showCoupon = true;
			//      setTimeout(() => {
			//        this.$refs.couponBox.style.transform = 'translateY(0)';
			//        this.$refs.couponBox.style.opacity = 1;
			//      }, 100);
			//    },
			//    hideCoupon() {
			//      this.$refs.couponBox.style.transform = 'translateY(-100%)';
			//      this.$refs.couponBox.style.opacity = 0;
			//      setTimeout(() => {
			//        this.showCoupon = false;
			//      }, 300);
			//    },
			receiveCoupon() {
				// TODO: 领取优惠券的业务逻辑
			},
			// 正则匹配请求地址中的参数函数
			getUrlCode(name) {
				return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [,
					''
				])[1].replace(/\+/g, '%20')) || null
			},
			cont() {
				let wxCode = this.getUrlCode('code'); // 截取路径中的code，如果没有就去微信授权，如果已经获取到了就直接传code给后台获取openId
				let data = {
					code: wxCode
				}
				if (wxCode !== '') {
					getAccessToken(data).then(res => {
						if (res.data.code == 200) {
							uni.setStorageSync('wx_copenid', res.data.data.copenid)
							uni.setStorageSync('access-token', res.data.data.token)
						}
					})
				}

			},
			getlocaltion() {
				// uni.request({
				// 	url:'https://restapi.amap.com/v3/ip?parameter',
				// 	data:{
				// 		key:'5457092e6c62b83c1b2e45dbe973d858'
				// 	},
				// 	success(res) {
				// 		console.log(res.data.city)
				// 		this.city = '555'
				// 		console.log(this.city)
				// 		// this.$router.go(0)
				// 	}
				// })
				uni.getLocation({
					type: 'wgs84', // 默认为 wgs84 返回 gps 坐标，可以设置为 gcj02 返回可用于 `uni.openLocation` 的坐标
					success: function(res) {
						uni.setStorageSync('latitude', res.latitude)
						uni.setStorageSync('longitude', res.longitude)
					},
				});
			},
			getbrightSpot() {
				brightSpot().then(res => {
					// this.selectList = res.data.data
					this.selectList.push(...res.data.data)
				})
			},
			selectOptions(item, index) {
				this.currentIndex = index
				if (item.cdescribe == '热门') {
					this.cLdList = ''
				} else {
					this.cLdList = item.cdescribe
				}
				this.getProject()
			},
			getList() {
				this.list = []
				slideshow({
					current: 1,
					size: 10,
				}).then(res => {
					res.data.data.forEach(item => {
						this.list.push(this.$globalData.publicUrl + item.cImgUrl)
					})
				})
			},
			getProject() {
				project({
					current: 1,
					size: 10,
					cLdList: this.cLdList
				}).then(res => {
					this.pojectList = res.data.data
				})
			},
			choose(cId) {
				uni.setStorageSync('projectId', cId)
				uni.switchTab({
					url: '/pages/identify/identify',
				})
			},
			goDetails(cid) {
				let deptName = uni.getStorageSync('selectCity')
				uni.navigateTo({
					url: '/pages/index/details?cid=' + cid + '&deptName=' + deptName
				})
			},
			cancel() {
				this.closeModal();
			},
			confirm() {
				this.closeModal();
			},
			closeModal() {
				// uni.navigateBack();
				this.show = false
			},
			jumpDetail(item){
				if (!uni.getStorageSync('access-token')) {
					uni.showModal({
						title: '请先登录！',
						success: (res) => {
							if (res.confirm) {
								this.list = []
								uni.switchTab({
									url: '/pages/my/my'
								})
							} else if (res.cancel) {
								return
							}
						}
					})
					return
				} else {
					uni.navigateTo({
						url: '/pages/identify/details?id=' + item.id
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	body::-webkit-scrollbar {
		display: none;
	}

	.u-full-content {
		// background-color: #00C777;
		background: rgba(237, 237, 237, 0.9);
	}

	.u-update-content {
		font-size: 26rpx;
		color: $u-content-color;
		line-height: 1.7;
		padding: 30rpx;
	}

	.index {

		width: 100vw;
		height: 100%;
		// display: flex;
		// flex-direction: column;
		background: linear-gradient(to bottom right, rgb(246, 249, 242), rgb(210, 241, 243));
		// padding: 0 10px;
		box-sizing: border-box;
		overflow-y: auto;

		// .head {
		// 	padding: 0px 32rpx;
		// 	// margin-top: 32rpx;
		// 	// margin-bottom: 28rpx;
		// 	// width: 100%;
		// 	height: 36rpx;
		// 	display: flex;
		// 	align-items: center;
		// 	font-weight: 500;
		// 	font-size: 38rpx;
		// 	color: #313233;
		// }

		.swiper {
			padding: 16rpx 32rpx;

			::v-deepuni-swiper {
				height: 320rpx !important;
			}
		}

		.tag {
			width: 100%;
			padding: 0px 32rpx;
			margin: 28rpx 0px;
			box-sizing: border-box;
			display: flex;
			justify-content: space-around;

			.item {
				width: 160rpx;
				height: 44rpx;
				background: rgba(0, 184, 151, 0.06);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-size: 24rpx;
				color: #0FB4AC;
				display: flex;
				align-items: center;
				justify-content: center;

				img {
					margin-right: 8rpx;
				}
			}
		}

		.recommend {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: calc(100% - 64rpx);
			margin: 12rpx auto 16rpx;
			height: 218rpx;
			padding: 40rpx 30rpx;
			position: relative;
			background: #FFFFFF;
			box-shadow: 0px 4rpx 12rpx 0px rgba(88, 209, 187, 0.15);
			border-radius: 24rpx;
			box-sizing: border-box;

			.tuijian_img {
				position: absolute;
				top: 0;
				left: 0;
				width: 75rpx;
				height: 40rpx;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.recommend_js {
				text-align: center;
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
				color: #333333;
				.js_img{
					width: 120rpx;
					height: 120rpx;
					position: relative;
					border-radius: 50%;
					// overflow: hidden;
					image {
						width: 100%;
						height: 100%;
						margin-bottom: 12rpx;
						// z-index: 9;
						z-index: 999;
					}
					.border{
						position: absolute;
						top: 0;
						left: 0;
						width: 120rpx;
						height: 120rpx;
						
						image{
							width: 100%;
							height: 100%;
							z-index: 99;
							margin: 0;
							
						}
						// background-image: url(../../static/index/ranking.png);
						// background-size: 130rpx ;
						// image{
						// 	width: 120rpx;
						// 	height: 120rpx;
						// }
					}
				}
			}
		}

		.content {
			width: 100%;
			display: flex;
			flex-direction: column;
			background-color: #fff;
			border-radius: 40rpx 40rpx 0px 0px;
			margin-top: 28rpx;
			// padding: 32rpx;
			box-sizing: border-box;

			.selcet_box {
				width: 100%;
				overflow-x: auto;
				box-sizing: border-box;
				white-space: nowrap;
				padding: 20rpx 32rpx;

				.options {
					display: inline-block;
					// width: 100px;
					font-size: 30rpx;
					margin-right: 24rpx;
				}

				.hover {
					color: #03C8BE;
					font-weight: 700;
					border-bottom: 4rpx solid #03C8BE;
				}
			}

			.menu {
				flex: 1;
				width: 100%;

				.project {
					width: 100%;
					height: 208rpx;
					background: linear-gradient(180deg, #F7FFFF 0%, #E9FFFB 100%);
					box-shadow: 0px 4rpx 12rpx 0px rgba(88, 209, 187, 0.2);
					border-radius: 24px 24px 24px 24px;
					margin: 32rpx 0px;
					padding: 16rpx 32rpx;
					box-sizing: border-box;
					overflow: hidden;
					display: flex;
					justify-content: space-between;

					.img {
						width: 168rpx;
						height: 168rpx;
						border-radius: 8rpx;
						overflow: hidden;
						margin-right: 34rpx;

						image {
							width: 100%;
							height: 100%;
						}

						// .time {
						// 	position: absolute;
						// 	top: 0;
						// 	right: 0;
						// 	padding: 0px 10px;
						// 	background-color: #333;
						// 	opacity: .7;
						// 	border-radius: 0px 0px 0px 10px;
						// 	color: #fff;
						// }
					}

					.describe {
						flex: 1;
						height: 100%;
						// width: 50%;
						// text-align: right;
						display: flex;
						flex-direction: column;
						// justify-content: space-between;

						// width: 100%;
						// margin-top: 10px;
						.name {
							width: 100%;
							font-size: 32rpx;
							line-height: 24rpx;
							font-weight: 500;
						}

						.num {
							font-size: 24rpx;
							color: #808080;
							display: flex;
							margin-top: 16rpx;

							.time {
								font-size: 24rpx;
								color: #666666;
								display: flex;
								align-items: center;
								margin-right: 26rpx;

								img {
									width: 24rpx;
									height: 24rpx;
									margin-right: 4rpx;
								}
							}
						}

						.price_box {
							width: 100%;
							// height: 56rpx;
							// background-color: rgb(241, 245, 244);
							// border-radius: 10px;
							display: flex;
							justify-content: space-between;
							align-items: center;
							// margin-top: 52rpx;
							// color: rgb(80, 171, 162);
							// font-size: 28rpx;
							// padding-left: 20px;

							.price {
								font-size: 24rpx;
								color: #f53e54;
								display: flex;
								align-items: center;

								text {
									font-size: 48rpx
								}
							}

							.make {
								width: 124rpx;
								height: 56rpx;
								font-size: 30rpx;
								color: #fff;
								background: linear-gradient(135deg, #1AD8CF 0%, #21C8C0 100%);
								border-radius: 8rpx 8rpx 8rpx 8rpx;
								padding: 0px 20rpx;
								display: flex;
								align-items: center;
								justify-content: center;
							}
						}
					}
				}
			}
		}

		.container {
			// position: fixed;
			// top: 0;
			// left: 0;
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.coupon-box {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 300rpx;
			transform: translateY(100%);
			// background-color: #fff;
			border-radius: 20rpx 20rpx 0 0;
			box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
			opacity: 1;
			transition: all 0.3s;
			z-index: 9999;

			.bgi {
				width: 350px;
				height: 500px;
				margin: 0 auto;
				position: relative;

				image {
					width: 350px;
					height: 500px;
				}

				.cut {
					width: 80rpx;
					height: 80rpx;
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					z-index: 99999;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.border {
					position: absolute;
					top: 0;
					left: 0;
				}

				.btn {
					position: absolute;
					bottom: 0;
					left: 0;
				}

				.coupon {
					width: 230px;
					height: 230px;
					position: absolute;
					// padding: 5px;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					overflow-y: auto;
					box-sizing: border-box;

					.item {
						width: 85%;
						height: 70px;
						background-image: url(../../static/index/item.png);
						// background-repeat: no-repeat;
						background-size: cover;
						/* 背景图宽度自适应 */
						background-position: center;
						/* 背景图居中 */
						padding: 10rpx 25rpx;
						display: flex;
						align-items: center;
						position: relative;
						margin-bottom: 10rpx;

						.left {
							color: #ff0000;
						}

						.right {
							height: 100%;
							padding-top: 30px;
							margin-left: 20rpx;
							font-size: 28rpx;
						}

						.one_btn {
							position: absolute;
							top: 10%;
							right: 2%;
							width: 30px;
							height: 60px;

							image {
								width: 100%;
								height: 100%;
							}
						}
					}
				}

			}

		}

		.coupon-header {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
			margin: 40rpx 0 20rpx 0;
			text-align: center;
		}

		.coupon-amount {
			font-size: 80rpx;
			font-weight: bold;
			color: #ff0000;
			text-align: center;
		}

		.coupon-desc {
			font-size: 28rpx;
			color: #666;
			margin: 30rpx 0;
			text-align: center;
		}

		.coupon-btn {
			margin: 20rpx auto 0 auto;
			width: 500rpx;
			height: 80rpx;
			border: none;
			border-radius: 40rpx;
			background-color: #ff0000;
			color: #fff;
			font-size: 36rpx;
			display: block;
			text-align: center;
			line-height: 80rpx;
		}

		.mask {
			position: fixed;
			background-color: rgba(0, 0, 0, 0.5);
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 999;
			opacity: 0;
			transition: all 0.3s;
		}

		.show {
			opacity: 1;
		}
	}
</style>