油站小程序 两个弹窗

gasStation-uni/pages/index/index.vue

@@ -88,11 +88,6 @@
 							{{ distance || "0" }}KM
 						</view>
 					</view>
-					<!-- <scroll-view scroll-x="true">
-						<view class="scrollbox" >
-						<view style="margin: 0px 10px;"  v-for="(item,index) in 13" :key="index">123123</view>
-						</view>
-					</scroll-view> -->
 					<u-swiper :list="list3" previousMargin="30" nextMargin="30" circular :autoplay="false" radius="5"
 						bgColor="#ffffff"></u-swiper>
 					<view class="juanniu" @click="goOil()">
@@ -105,7 +100,14 @@
 			<!-- <u-picker :show="show" :columns="columns" @confirm="confirm" @cancel="cancel"></u-picker> -->
 			<u-picker :columns="columns" @confirm="confirm" :show="show" @cancel="show = false"
 				keyName="label"></u-picker>
-
+			<u-overlay :show="shows">
+				<image src="../../static/imgs/zzxryl.png"
+					style="width: 280px; height: 350px; margin: 20px auto; margin-top: 200px; ">
+				</image>
+				<view class="anniuprp" @click="onOverlay()">
+					<text>立即领取</text>
+				</view>
+			</u-overlay>
 			<!--外层结束  -->
 			<tabbar :msg="msg"></tabbar>
 		</view>
@@ -122,6 +124,7 @@
 			return {
 				msg: "1",
 				show: false,
+				shows: true,
 				title: '',
 				oilTypeList: '',
 				columns: [
@@ -339,6 +342,12 @@
 			cancel() {
 				this.show = false
 			},
+			onOverlay() {
+				this.shows = false
+				uni.showToast({
+					title: '领取成功'
+				})
+			},
 			goActivity() {
 				// 去活动页
 				uni.navigateTo({
@@ -645,4 +654,17 @@
 
 
 	}
-</style>
+
+	.anniuprp {
+		width: 130px;
+		height: 36px;
+		background: linear-gradient(180deg, #FF6D3A 0%, #FF327A 100%);
+		box-shadow: inset 0px 0px 6px 3px rgba(255, 255, 255, 0.25);
+		border-radius: 18px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: white;
+		margin: 0 auto;
+	}
+</style>

gasStation-uni/pagesHome/activeIn/index.vue

@@ -403,7 +403,7 @@
 	}
 
 	.anniu {
-		width: 100%;
+		width: 90%;
 		height: 42px;
 		display: flex;
 		align-items: center;
@@ -412,6 +412,8 @@
 		background: #2F72F7;
 		border-radius: 8px;
 		position: fixed;
-		bottom: 25px;
+		bottom: 20px;
+		left: 50%;
+		transform: translate(-50%, -50%);
 	}
-</style>
+</style>

gasStation-uni/pagesMy/CardManagement/Detail.vue

@@ -97,5 +97,6 @@
 		color: white;
 		border-radius: 8px;
 		background: #ff6e05;
+
 	}
-</style>
+</style>

gasStation-uni/pagesMy/Coupons/Coupons.vue

@@ -32,7 +32,23 @@
 					</view>
 				</view>
 			</view>
+			<u-overlay :show="shows">
 
+				<view class="boxck">
+					<view class="coupbox" v-for="(item,index) in 3" :key="index">
+						<view class="left_coup">￥188</view>
+						<view class="right_liu">
+							<view class="">
+								<view class="c_name">优惠券名称</view>
+								<view class="c_time">有效期：2023/12/03</view>
+							</view>
+
+						</view>
+					</view>
+					<view class="_anniuprp" @click="onCoupons()">立即领取</view>
+				</view>
+
+			</u-overlay>
 
 		</view>
 	</view>
@@ -45,6 +61,7 @@
 		data() {
 			return {
 				cardsList: [],
+				shows: true,
 				query: {
 					couponType: '',
 					useStatus: 0,
@@ -112,6 +129,12 @@
 				this.getGiftRecords()
 
 
+			},
+			onCoupons() {
+				this.shows = false
+				uni.showToast({
+					title: '领取成功'
+				})
 			},
 			goback() {
 				uni.navigateBack()
@@ -268,4 +291,75 @@
 		background: #ecf5ff !important;
 		color: #8179ff;
 	}
-</style>
+
+	.boxck {
+		width: 280px;
+		height: 350px;
+		margin: 20px auto;
+		margin-top: 200px;
+		background: url('http://47.95.206.185:83/yhqbj.png')center no-repeat;
+		background-size: 100% 100%;
+		position: relative;
+		box-sizing: border-box;
+		padding: 5px 32px;
+	}
+
+	._anniuprp {
+		width: 172px;
+		height: 36px;
+		background: linear-gradient(90deg, #FFF4CB 0%, #FDDC66 100%);
+		border-radius: 18px 18px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		position: absolute;
+		bottom: 20px;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		color: #E11E27;
+		font-size: 14px;
+		font-weight: bold;
+	}
+
+	.coupbox {
+		width: 100%;
+		height: 60px;
+		background: url('http://47.95.206.185:83/yhtz.png')center no-repeat;
+		background-size: 100% 100%;
+		margin: 10px auto;
+		display: flex;
+		align-items: center;
+
+	}
+
+	.left_coup {
+		width: 35%;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 16px;
+		font-weight: bold;
+		color: #FF4747;
+	}
+
+	.right_liu {
+		width: 65%;
+		height: 100%;
+		text-align: center;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.c_time {
+		font-size: 12px;
+		color: #999999;
+	}
+
+	.c_name {
+		font-size: 16px;
+		font-weight: bold;
+		color: #7D592C;
+	}
+</style>