From aede8f96449b054a856f51ebd9b177374a2f3697 Mon Sep 17 00:00:00 2001
From: yangtao <yang1793766139@163.com>
Date: Fri, 5 Apr 2024 18:30:57 +0800
Subject: [PATCH] 1

---
 components/blindBox/blindBox.vue | 306 +++++++++++++++++++++++++++++++
 components/treasureBox/index.vue | 240 ++++++++++++++++++++++++
 pages/user/index.vue             |   6 +
 pages/users/user_sgin/index.vue  |  14 +-
 4 files changed, 562 insertions(+), 4 deletions(-)
 create mode 100644 components/blindBox/blindBox.vue
 create mode 100644 components/treasureBox/index.vue

diff --git a/components/blindBox/blindBox.vue b/components/blindBox/blindBox.vue
new file mode 100644
index 0000000..7c8fb5b
--- /dev/null
+++ b/components/blindBox/blindBox.vue
@@ -0,0 +1,306 @@
+<template>
+	<view class="content" v-show="blindShow">
+		<view class="bg">
+			<view class="top">
+
+			</view>
+			<view class="lucky-draw">
+				<view class="title">
+					恭喜你获得 {{wheel}} 次盲盒抽奖机会
+				</view>
+				<view class="blind-box">
+					<image src="@/static/images/shop/3.png" @click="openBlindBox(index)" :class="actionIndex==index?'action':''" class="box-item" v-for="(item,index) in 6">
+				</view>
+				<view class='iconfont icon-guanbi3' @click='closePop()'></view>
+			</view>
+			
+		</view>
+		<view class="coupon_popups" v-if="popShow">
+			<view class="bg2"></view>
+			<view class="con" >
+				<view class="content">
+					<image :src="drawInfo.img" mode=""></image>
+					<view class="text-black">恭喜您获得</view>
+					<view class="text-red">{{drawInfo.text}}</view>
+					<view class="btn" @click="popShow = false">开心收下</view>
+				</view>
+				
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {} from '@/api/user.js'
+	export default {
+		components: {
+		},
+		data() {
+			return {
+				wheel:0,
+				actionIndex:'',
+				popShow:false,
+				blindShow:true,
+				defaultConfig: {
+					gutter: '5px',
+					speed: 60,
+					stopRange:'0.95'
+				},
+				popShow:false,
+				list:[],
+				drawInfo:{
+					img:'',
+					text:'',
+					
+				}
+			}
+		},
+		onLoad() {
+			this.init()
+		},
+		methods: {
+			openBlindBox(val){
+				this.actionIndex=val;
+				this.popShow=true;
+			},
+			init(){
+			},
+			closePop(){
+				this.blindShow=false;
+			}
+		}
+	}
+</script>
+
+<style lang="less" scoped>
+	@keyframes bounce {
+	  from {
+		  transform: scale3d(1, 1, 1);
+	  }
+	  20%,
+	  53%,
+	  to {
+	    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+	    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
+	  }
+	
+	  40%,
+	  43% {
+	    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+	    transform: translate3d(0, -15px, 0) scaleY(1.1);
+	  }
+	  50% {
+	    transform: scale3d(1.1, 1.1, 1.1);
+	  }
+	  70% {
+	    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+	    transform: translate3d(0, -5px, 0) scaleY(1.05);
+	  }
+	
+	  80% {
+	    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+	    transform: translate3d(0, 0, 0) scaleY(0.95);
+	  }
+	
+	  90% {
+	    transform: translate3d(0, -4px, 0) scaleY(1.02);
+	  }
+	}
+	
+	.content {
+		width: 100%;
+		height: 100vh;
+		position: fixed;
+		background-color: rgba(0,0,0,.5);
+		z-index: 10000;
+		top: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		.coupon_popups{
+			z-index: 999;
+			position: fixed;
+			left: 0;
+			top: 0;
+			width: 100%;
+			height: 100%;
+			text-align: center;
+			.bg2{
+				position: absolute;
+				left: 0;
+				top: 0;
+				width: 100%;
+				height: 100%;
+				background-color: rgba(0,0,0,.5);
+			}
+			
+			.con{
+				position: absolute;
+				left: 50%;
+				top: 50%;
+				transform: translate(-50%,-50%);
+				width: 680rpx;
+				height: 900rpx;
+				background-size: 100% 700rpx;
+				background-repeat: no-repeat;
+				display: flex;
+				justify-content: center;
+				.content{
+					width: 500rpx;
+					height: 520rpx;
+					border-radius: 20rpx;
+					margin: 0 auto;
+					background-color: white;
+					display: flex;
+					flex-direction: column;
+					justify-content: center;
+					align-items: center;
+					grid-gap: 40rpx;
+					image{
+						width: 300rpx;
+						height: 200rpx;
+						margin-top: 50rpx;
+					}
+					.text-black{
+						font-size: 32rpx;
+						font-weight: bold;
+					}
+					.text-red{
+						font-size: 28rpx;
+						color: #FC3C70;
+					}
+					.btn{
+						color: white;
+						margin-bottom: 40rpx;
+						width: 328rpx;
+						height: 68rpx;
+						line-height: 68rpx;
+						padding: 4rpx 0;
+						border-radius: 60rpx;
+						background: linear-gradient(136deg, #D753FC 0%, #FC276C 53%, #FC3E8F 100%);
+					
+					}
+					
+				}
+				.text{
+					width: 600rpx;
+					margin: 30rpx auto 0;
+					font-size: 20rpx;
+					color: #ffffff;
+				}
+				
+			}
+		}
+		.bg {
+			width: 80%;
+			height: 80vh;
+			background-size: 100% 100%;
+			position: relative;
+			padding-bottom: 40rpx;
+			
+			.rule {
+				width: 80rpx;
+				height: 120rpx;
+				background-image: url(@/static/images/right-btn.png);
+				background-size: 100%;
+				background-repeat: no-repeat;
+				position: absolute;
+				right: 0;
+				top: 320rpx;
+				// text-align: center;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				text {
+					width: 56rpx;
+					height: 80rpx;
+					font-family: PingFang SC;
+					font-weight: 500;
+					font-size: 28rpx;
+					color: #DC3424;
+					line-height: 36rpx;
+				}
+			}
+			.top{
+				height: 330rpx;
+			}
+			.lucky-draw{
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				justify-content: center;
+				.title{
+					position: relative;
+					bottom: 20rpx;
+					width:80%;
+					height: 50rpx;
+					font-family: PingFang SC;
+					font-weight: 400;
+					font-size: 32rpx;
+					color: #FFFFFF;
+					margin: 20rpx 0;
+					line-height: 54rpx;
+					text-align: center;
+					background: url('@/static/images/font-bg.png') no-repeat 100%;
+					background-position: center;
+				}
+				.blind-box{
+					width: 80%;
+					height: 500rpx;
+					background: #D753FC;
+					display: flex;
+					flex-wrap: wrap;
+					padding: 40rpx;
+					grid-gap: 20rpx;
+					.box-item{
+						flex: 30%;
+						height: auto;
+					}
+					.action{
+						animation:bounce 2s 1;
+						animation-direction: normal;
+					}
+				}
+				
+			}
+			.lucky-draw-info{
+				margin: 80rpx auto;
+				width: 680rpx;
+				height: 440rpx;
+				background-color: white;
+				display: flex;
+				flex-direction: column;
+				border-radius: 32rpx;
+				.title{
+					
+					text-align: center;
+					font-size: 36rpx;
+					color: #FC3C70;
+					line-height: 72rpx;
+				}
+				.list{
+					flex: 1;
+					overflow: scroll;
+					display: flex;
+					flex-direction: column;
+					grid-gap: 20rpx;
+					.item{
+						font-size: 32rpx;
+						font-weight: bold;
+						padding: 10rpx 20rpx;
+						width: 100%;
+						display: flex;
+						justify-content: space-between;
+						
+					}
+				}
+			}
+		
+			.icon-guanbi3{
+				color: #ffffff;
+				font-size: 50rpx;
+				margin-top:50rpx;
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/components/treasureBox/index.vue b/components/treasureBox/index.vue
new file mode 100644
index 0000000..b947ef8
--- /dev/null
+++ b/components/treasureBox/index.vue
@@ -0,0 +1,240 @@
+<template>
+	<view class="content">
+		<view class="bg">
+			<view class="top">
+
+			</view>
+			<view class="lucky-draw" @click="openBox()" style="border: solid 1px red;width: 160px;height: 160px;margin: 0 auto;">
+				
+				
+			</view>
+			
+		</view>
+		<view class="coupon_popups" v-if="popShow">
+			<view class="bg2"></view>
+			<view class="con" >
+				<view class="content">
+					<image :src="drawInfo.img" mode=""></image>
+					<view class="text-black">恭喜您获得</view>
+					<view class="text-red">{{drawInfo.text}}</view>
+					<view class="btn" @click="confirm">开心收下</view>
+				</view>
+				<view class='iconfont icon-guanbi3' @click="popShow = false"></view>
+			</view>
+		</view>
+		 <blind-box v-if="blindShow"></blind-box>
+	</view>
+</template>
+
+<script>
+	import {getWhellNumber,getWhellConfig,getWhellAction,getWhellList} from '@/api/user.js'
+	import LuckyWheel from 'uni-luck-draw/lucky-wheel';
+	import blindBox from '@/components/blindBox/blindBox.vue';
+	export default {
+		components: {
+			LuckyWheel,
+			blindBox
+		},
+		data() {
+			return {
+				wheel:0,
+				popShow:false,
+				blindShow:false,
+				list:[],
+				drawInfo:{
+					img:'',
+					text:'',
+					
+				}
+			}
+		},
+		onLoad() {
+		},
+		methods: {
+			confirm(){
+				this.popShow = false;
+				this.blindShow=true;
+			},
+			openBox(){
+				this.popShow=true;
+			},
+		}
+	}
+</script>
+
+<style lang="less" scoped>
+	.content {
+		width: 100%;
+		height: 100vh;
+		position: fixed;
+		top: 0;
+		z-index: 1000;
+		.coupon_popups{
+			z-index: 999;
+			position: fixed;
+			left: 0;
+			top: 0;
+			width: 100%;
+			height: 100%;
+			text-align: center;
+			.bg2{
+				position: absolute;
+				left: 0;
+				top: 0;
+				width: 100%;
+				height: 100%;
+				background-color: rgba(0,0,0,.5);
+			}
+			
+			.con{
+				position: absolute;
+				left: 50%;
+				top: 50%;
+				transform: translate(-50%,-50%);
+				width: 680rpx;
+				height: 900rpx;
+				background-size: 100% 700rpx;
+				background-repeat: no-repeat;
+				display: flex;
+				justify-content: center;
+				.content{
+					width: 500rpx;
+					height: 520rpx;
+					border-radius: 20rpx;
+					margin: 0 auto;
+					background-color: white;
+					display: flex;
+					flex-direction: column;
+					justify-content: center;
+					align-items: center;
+					grid-gap: 40rpx;
+					image{
+						width: 300rpx;
+						height: 200rpx;
+						margin-top: 50rpx;
+					}
+					.text-black{
+						font-size: 32rpx;
+						font-weight: bold;
+					}
+					.text-red{
+						font-size: 28rpx;
+						color: #FC3C70;
+					}
+					.btn{
+						color: white;
+						margin-bottom: 40rpx;
+						width: 328rpx;
+						height: 68rpx;
+						line-height: 68rpx;
+						padding: 4rpx 0;
+						border-radius: 60rpx;
+						background: linear-gradient(136deg, #D753FC 0%, #FC276C 53%, #FC3E8F 100%);
+					
+					}
+					
+				}
+				.text{
+					width: 600rpx;
+					margin: 30rpx auto 0;
+					font-size: 20rpx;
+					color: #ffffff;
+				}
+				.icon-guanbi3{
+					color: #ffffff;
+					font-size: 70rpx;
+					position: absolute;
+					bottom: 250rpx;
+					left: 310rpx;
+				}
+			}
+		}
+		.bg {
+			width: 100%;
+			height: 100vh;
+			background-image: url('https://plus.hwms.shop/uploads/def/20240402/de991ebf4c190afcc5de692a910949f4.png');
+			background-size: 100% 100%;
+			position: relative;
+			padding-bottom: 40rpx;
+			.rule {
+				width: 80rpx;
+				height: 120rpx;
+				background-image: url(@/static/images/right-btn.png);
+				background-size: 100%;
+				background-repeat: no-repeat;
+				position: absolute;
+				right: 0;
+				top: 320rpx;
+				// text-align: center;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				text {
+					width: 56rpx;
+					height: 80rpx;
+					font-family: PingFang SC;
+					font-weight: 500;
+					font-size: 28rpx;
+					color: #DC3424;
+					line-height: 36rpx;
+				}
+			}
+			.top{
+				height: 330rpx;
+			}
+			.lucky-draw{
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				justify-content: center;
+				.title{
+					position: relative;
+					bottom: 20rpx;
+					width:60%;
+					height: 50rpx;
+					font-family: PingFang SC;
+					font-weight: 400;
+					font-size: 32rpx;
+					color: #FFFFFF;
+					margin: 20rpx 0;
+					line-height: 54rpx;
+					text-align: center;
+					background: url('@/static/images/font-bg.png') no-repeat 100%;
+					background-position: center;
+				}
+			}
+			.lucky-draw-info{
+				margin: 80rpx auto;
+				width: 680rpx;
+				height: 440rpx;
+				background-color: white;
+				display: flex;
+				flex-direction: column;
+				border-radius: 32rpx;
+				.title{
+					
+					text-align: center;
+					font-size: 36rpx;
+					color: #FC3C70;
+					line-height: 72rpx;
+				}
+				.list{
+					flex: 1;
+					overflow: scroll;
+					display: flex;
+					flex-direction: column;
+					grid-gap: 20rpx;
+					.item{
+						font-size: 32rpx;
+						font-weight: bold;
+						padding: 10rpx 20rpx;
+						width: 100%;
+						display: flex;
+						justify-content: space-between;
+						
+					}
+				}
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pages/user/index.vue b/pages/user/index.vue
index ef806fd..dfe75cc 100644
--- a/pages/user/index.vue
+++ b/pages/user/index.vue
@@ -59,6 +59,12 @@
 							<view class="phone" v-if="!userInfo.phone && isLogin" @tap="bindPhone">绑定手机号</view>
 						</view>
 					</view>
+					<view class="num-wrapper skeleton-rect">
+						<view class="num-item" >
+							<text class="num">{{userInfo.member_value || 0}}</text>
+							<view class="txt">成长值</view>
+						</view>
+					</view>
 					<view class="num-wrapper skeleton-rect">
 						<view class="num-item" @click="goMenuPage('/pages/users/user_goods_collection/index')">
 							<text class="num">{{userInfo.total_collect_product || 0}}</text>
diff --git a/pages/users/user_sgin/index.vue b/pages/users/user_sgin/index.vue
index 315753d..3b62b82 100644
--- a/pages/users/user_sgin/index.vue
+++ b/pages/users/user_sgin/index.vue
@@ -21,10 +21,10 @@
 		         <view class='item' v-for="(item,index) in signConfig" :key="index">
 		            <view :class='(index+1) == signConfig.length ? "rewardTxt" : ""'>{{item.value.sign_day}}</view>
 		            <view class='venus' :class="(index + 1 === signConfig.length ? 'reward' : '') + '' +(sign_index >= index + 1 ? 'venusSelect' : '')"></view>
-		            <view class='num' :class='item.is_sgin ? "on" : ""'>+{{item.value.sign_integral}}</view>
+		            <!-- <view class='num' :class='item.is_sgin ? "on" : ""'>+{{item.value.sign_integral}}</view> -->
 		         </view>
 		      </view>
-		      <button class='but b-color on' v-if="is_sign">已签到</button>
+		      <button class='but b-color on' v-if="is_sign" @click="go">已签到</button>
 		      <form @submit="goSign" report-submit='true' v-else>
 		        <button class='but b-color' :class="disabled ? 'disabled' : ''" formType="submit">立即签到</button>
 		      </form>
@@ -51,6 +51,7 @@
 		         <view class='loading' @click='goSignList' v-if="signList.length >= 3">点击加载更多<text class='iconfont icon-xiangyou'></text></view>
 		      </view>
 		   </view>
+		  <treasureBox v-if="treasureShow"></treasureBox>
 		   <view class='signTip acea-row row-center-wrapper' :class='active==true?"on":""'>
 		      <view class='signTipLight loadingpic'></view>
 		      <view class='signTipCon' :style="'background-image: url('+domain+'/static/diy/signSuccess'+keyColor+'.png)'">
@@ -70,8 +71,9 @@
 	 import { getSignUser, getSignList, setSignIntegral} from '@/api/user.js';
 	 import { HTTP_REQUEST_URL } from '@/config/app';
 	 import { toLogin } from '@/libs/login.js';
+	 import treasureBox from '@/components/treasureBox/index.vue';
 	 export default {
-		 components: {},
+		 components: {treasureBox},
 	 	data() {
 	 		return {
 				domain: HTTP_REQUEST_URL,
@@ -85,7 +87,8 @@
 				day:0,
 				sign_index:0,
 				is_sign: false, //是否签到
-				disabled: false
+				disabled: false,
+				treasureShow:false,
 	 		};
 	 	},
 	 	computed: mapGetters(['isLogin','viewColor','keyColor']),
@@ -98,6 +101,9 @@
 	 		}
 	 	},
 	 	methods: {
+			go(){
+				this.treasureShow=true;
+			},
 			/**
 			    * 去签到记录页面
 			    *