修改红包弹窗

components/pop-ling-qu - 副本.vue

@@ -0,0 +1,175 @@
+<template>
+	<view>
+		<u-popup v-model="show" mode="center" @close="close">
+			<view class="bg">
+				<view class="title">恭喜您获得</view>
+				<view class="goods">
+					<template v-if="result&&result.type==3">
+						<view class="u-flex  u-col-center u-row-center">
+							<image style="height: 42px;" src="/static/red-pack.png" mode="heightFix"></image>
+						</view>
+						<view class="u-flex u-row-center">
+							<view class="type">物品</view>
+						</view>
+					</template>
+					<template v-if="result&&result.type==2">
+						<view class="u-flex color-money u-col-center u-row-center">
+							<view class="money">{{result.number}}</view>
+							<view class="font-bold" style="margin-top: 20rpx;">元</view>
+						</view>
+						<view class="u-flex u-row-center">
+							<view class="type">现金红包</view>
+						</view>
+					</template>
+					
+				</view>
+				<view class="u-flex u-row-center btn-box">
+					<view class="btn" @click="lingqu">立即领取</view>
+				</view>
+			</view>
+			<view class="u-flex u-row-center">
+				<u-icon name="close-circle" :size="54" @click="close" color="#fff"></u-icon>
+			</view>
+		</u-popup>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				show: false,
+				result: ''
+			}
+		},
+		methods: {
+			open(data) {
+				console.log(data);
+				this.result = data
+				this.show = true
+			},
+			lingqu() {
+				const {
+					orderId,
+					id
+				} = this.result
+				this.$Request.postJson('app/discSpinning/receive', this.result).then(res => {
+					this.result = ''
+					console.log(res)
+					if (res.code == 0) {
+						uni.showToast({
+							title: '领取成功',
+							icon: 'none'
+						})
+						this.$emit('success')
+						this.close()
+					} else {
+						uni.showToast({
+							title: '领取失败',
+							icon: 'none'
+						})
+					}
+				})
+			},
+			close() {
+				this.show = false
+				if(!this.result){
+					return
+				}
+				const {
+					orderId,
+					id
+				} = this.result
+				this.$Request.postJson('app/discSpinning/receive', this.result).then(res => {
+					this.result = ''
+					console.log(res)
+					if (res.code == 0) {
+						this.$emit('success')
+						this.close()
+					} else {
+					}
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	::v-deep .u-mode-center-box {
+		background-color: transparent;
+	}
+
+	.color-money {
+		color: #E42F00;
+	}
+
+	.money {
+		font-weight: 700;
+		font-size: 72rpx;
+		letter-spacing: 2px;
+	}
+
+	.bg {
+		width: 628rpx;
+		height: 770rpx;
+		margin-right: 10rpx;
+		background-color: transparent;
+		background-repeat: no-repeat;
+		background-position: center center;
+		background-size: cover;
+		background-image: url("~static/images/zhuanpan/ling-qu.png");
+		position: relative;
+
+		@media (-webkit-min-device-pixel-ratio: 2),
+		(min-device-pixel-ratio: 2) {
+			background-image: url("~static/images/zhuanpan/ling-qu@2x.png");
+		}
+
+		.title {
+			position: absolute;
+			top: 238rpx;
+			text-align: center;
+			left: 0;
+			right: 0;
+			font-weight: 700;
+			font-size: 58rpx;
+			color: #AF6920;
+			letter-spacing: 4rpx;
+		}
+
+		.goods {
+			position: absolute;
+			top: 326rpx;
+			text-align: center;
+			left: 0;
+			right: 0;
+			text-align: center;
+		}
+
+		.type {
+			padding: 6rpx 28rpx;
+			border-radius: 100rpx;
+			background: #E25B41;
+			font-size: 28rpx;
+			color: #fff;
+			font-weight: bold;
+		}
+
+		.btn-box {
+			position: absolute;
+			top: 574rpx;
+			left: 0;
+			right: 0;
+
+			.btn {
+				padding: 10rpx 60rpx 10rpx 64rpx;
+				text-align: center;
+				font-weight: bold;
+				font-size: 44rpx;
+				color: #AF6920;
+				letter-spacing: 2px;
+			}
+		}
+
+	}
+</style>

components/pop-ling-qu.vue

@@ -1,6 +1,6 @@
 <template>
 	<view>
-		<u-popup v-model="show" mode="center">
+		<u-popup v-model="show" mode="center" @close="close">
 			<view class="bg">
 				<view class="title">恭喜您获得</view>
 				<view class="goods">
@@ -15,18 +15,22 @@
 					<template v-if="result&&result.type==2">
 						<view class="u-flex color-money u-col-center u-row-center">
 							<view class="money">{{result.number}}</view>
-							<view class="font-bold" style="margin-top: 20rpx;">元</view>
+							<view class="font-bold " style="margin-top: 20rpx;font-size: 36rpx;">元</view>
 						</view>
-						<view class="u-flex u-row-center">
+						<view class="u-flex u-m-t-24 u-row-center">
 							<view class="type">现金红包</view>
 						</view>
 					</template>
 					
 				</view>
-				<view class="u-flex u-row-center btn-box">
+				<!-- <view class="u-flex u-row-center btn-box">
 					<view class="btn" @click="lingqu">立即领取</view>
+				</view> -->
+				<view class="u-flex close u-row-center">
+					<u-icon name="close-circle" :size="54" @click="close" color="#fff"></u-icon>
 				</view>
 			</view>
+			
 		</u-popup>
 	</view>
 </template>
@@ -70,6 +74,22 @@
 			},
 			close() {
 				this.show = false
+				if(!this.result){
+					return
+				}
+				const {
+					orderId,
+					id
+				} = this.result
+				this.$Request.postJson('app/discSpinning/receive', this.result).then(res => {
+					this.result = ''
+					console.log(res)
+					if (res.code == 0) {
+						this.$emit('close')
+						this.close()
+					} else {
+					}
+				})
 			}
 		}
 	}
@@ -86,7 +106,7 @@
 
 	.money {
 		font-weight: 700;
-		font-size: 72rpx;
+		font-size: 96rpx;
 		letter-spacing: 2px;
 	}
 
@@ -98,29 +118,29 @@
 		background-repeat: no-repeat;
 		background-position: center center;
 		background-size: cover;
-		background-image: url("~static/images/zhuanpan/ling-qu.png");
+		background-image: url("~static/images/zhuanpan/gift.png");
 		position: relative;
 
 		@media (-webkit-min-device-pixel-ratio: 2),
 		(min-device-pixel-ratio: 2) {
-			background-image: url("~static/images/zhuanpan/ling-qu@2x.png");
+			background-image: url("~static/images/zhuanpan/gift@2x.png");
 		}
 
 		.title {
 			position: absolute;
-			top: 238rpx;
+			top: 218rpx;
 			text-align: center;
 			left: 0;
 			right: 0;
 			font-weight: 700;
-			font-size: 58rpx;
+			font-size: 60rpx;
 			color: #AF6920;
 			letter-spacing: 4rpx;
 		}
 
 		.goods {
 			position: absolute;
-			top: 326rpx;
+			top: 336rpx;
 			text-align: center;
 			left: 0;
 			right: 0;
@@ -135,7 +155,12 @@
 			color: #fff;
 			font-weight: bold;
 		}
-
+		.close{
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			right: 0;
+		}
 		.btn-box {
 			position: absolute;
 			top: 574rpx;

me/choujiang/choujiang.vue

@@ -76,7 +76,7 @@
 				</template> -->
 			</view>
 		</view>
-		<ling-qu ref="refLingqu" @success="getRedPack"></ling-qu>
+		<ling-qu ref="refLingqu" @close="lingquClose"></ling-qu>
 	</view>
 </template>
 
@@ -530,6 +530,10 @@
 					this.freeNum=res.count||0
 				}
 			},
+			lingquClose(){
+				this.getCount()
+				this.getRedPack()
+			},
 			showLingPop(data){
 				this.$refs.refLingqu.open(data)
 			}