1

api/api.js

@@ -342,3 +342,10 @@ export function getCateData(data) {
 		noAuth: true
 	});
 }
+/**
+ * 用户实名认证
+ * @param {Object} data
+ */
+export function userReal(data) {
+  return request.post("user/real", data, { noAuth: true });
+}

components/blindBox/blindBox.vue

@@ -9,7 +9,7 @@
 					恭喜你获得 {{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">
+					<image src="@/static/images/mh-item.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>
@@ -245,12 +245,16 @@
 					background-position: center;
 				}
 				.blind-box{
-					width: 80%;
-					height: 500rpx;
-					background: #D753FC;
+					width: 100%;
+					height: 480rpx;
+					// background: #D753FC;
+					background-image: url('@/static/images/mh-bg.png');
+					background-repeat: no-repeat;
+					background-size: 100%;
 					display: flex;
 					flex-wrap: wrap;
 					padding: 40rpx;
+					padding-bottom: 80rpx;
 					grid-gap: 20rpx;
 					.box-item{
 						flex: 30%;

components/treasureBox/index.vue

@@ -2,13 +2,17 @@
 	<view class="content">
 		<view class="bg">
 			<view class="top">
-
+				<view class="iconfont icon-guanbi2" style="position: absolute;right: 20px;top:-40px;font-size: 30px;color: white;" @click="close"></view>
 			</view>
-			<view class="lucky-draw" @click="openBox()" style="border: solid 1px red;width: 160px;height: 160px;margin: 0 auto;">
-				
+			<view class="lucky-draw">
 			
+				<image src="@/static/images/box.png" mode="aspectFit" style="width: 220px;height: 220px;position: relative;top: 12px;right: 16px;" v-if="!gifShow&&!popShow"></image>
+				<image src="@/static/images/box.gif" mode="aspectFit" style="width: 350px;height: 350px;" v-else-if="gifShow"></image>			
+				<image src="@/static/images/box2.png" mode="aspectFit" style="width: 350px;height: 350px;position: relative;top: 10px;right: 10px;" v-else-if="!gifShow&&popShow"></image>
+			</view>
+			<view class="btn" @click="openBox">
+				立刻开启
 			</view>
-			
 		</view>
 		<view class="coupon_popups" v-if="popShow">
 			<view class="bg2"></view>
@@ -39,6 +43,7 @@
 			return {
 				wheel:0,
 				popShow:false,
+				gifShow:false,
 				blindShow:false,
 				list:[],
 				drawInfo:{
@@ -56,8 +61,15 @@
 				this.blindShow=true;
 			},
 			openBox(){
-				this.popShow=true;
+				this.gifShow=true;
+				setTimeout(()=>{
+					this.gifShow=false;
+					this.popShow=true;
+				},1500)
 			},
+			close(){
+				this.$emit('closeTreasureBox')
+			}
 		}
 	}
 </script>
@@ -69,6 +81,8 @@
 		position: fixed;
 		top: 0;
 		z-index: 1000;
+		padding-top: 200rpx;
+		background-color: rgba(0,0,0,1);
 		.coupon_popups{
 			z-index: 999;
 			position: fixed;
@@ -83,7 +97,7 @@
 				top: 0;
 				width: 100%;
 				height: 100%;
-				background-color: rgba(0,0,0,.5);
+				background-color: rgba(0,0,0,.8);
 			}
 			
 			.con{
@@ -151,9 +165,8 @@
 		}
 		.bg {
 			width: 100%;
-			height: 100vh;
-			background-image: url('https://plus.hwms.shop/uploads/def/20240402/de991ebf4c190afcc5de692a910949f4.png');
-			background-size: 100% 100%;
+			// height: 100vh;
+			
 			position: relative;
 			padding-bottom: 40rpx;
 			.rule {
@@ -180,13 +193,22 @@
 				}
 			}
 			.top{
-				height: 330rpx;
+				width: 488rpx;
+				height: 140rpx;
+				background-image: url('@/static/images/box-title.png');
+				background-size: 100% 100%;
+				margin: 0 auto;
 			}
 			.lucky-draw{
 				display: flex;
 				flex-direction: column;
 				align-items: center;
 				justify-content: center;
+				width: 670rpx;
+				height: 670rpx;
+				margin: 0 auto;
+				// background-image: url('@/static/images/box.png');
+				background-size: 100% 100%;
 				.title{
 					position: relative;
 					bottom: 20rpx;
@@ -203,6 +225,21 @@
 					background-position: center;
 				}
 			}
+			.btn{
+				width: 460rpx;
+				height: 100rpx;
+				background: linear-gradient(180deg, #FEFD65 0%, #F3C936 100%);
+				border-radius: 60rpx;
+				border: 4rpx solid #FFFFFF;
+				font-weight: 600;
+				font-size: 36rpx;
+				color: #530115;
+				line-height: 100rpx;
+				text-align: center;
+				margin: 0 auto;
+				position: relative;
+				top: 160rpx;
+			}
 			.lucky-draw-info{
 				margin: 80rpx auto;
 				width: 680rpx;

pages/users/real_name_authentication/index.vue

@@ -1,16 +1,16 @@
 <template>
-	<view class="content">
+	<view class="content" :style="viewColor">
 		<view class="title">
 			身份证信息
 		</view>
 		<view class="input-items">
 			<view class="item">
 				<text class="input-name">姓名</text>
-				<input type="text" placeholder="请输入姓名"/>
+				<input type="text" v-model="name" placeholder="请输入姓名"/>
 			</view>
 			<view class="item">
 				<text class="input-name">身份证号码</text>
-				<input type="text" placeholder="请输入身份证号码"/>
+				<input type="text" v-model="number" placeholder="请输入身份证号码"/>
 			</view>
 		</view>
 		<view class="title">
@@ -58,18 +58,43 @@
 				
 			</view>
 		</view>
+		<view class="btn" @click="submitReal">
+			提交认证
+		</view>
 	</view>
 </template>
 
 <script>
+	import {userReal} from '@/api/api.js'
+	import { mapGetters } from "vuex";
 	export default {
+		computed: mapGetters(['viewColor']),
 		data(){
 			return{
+				name:'',
+				number:'',
 				image1:[],
-				image2:[]
+				image2:[],
 			}
 		},
 		methods:{
+			async submitReal(){
+				let data1={
+					real_name:this.name,
+					card_id:this.number,
+					card_front:this.image1[0],
+					card_back:this.image2[0],
+				}
+				await userReal(data1).then((res)=>{
+					console.log('res: ',res);
+					
+				}).catch((err)=>{
+					uni.showToast({
+						icon:'none',
+						title: err
+					});
+				})
+			},
 			/**
 			 * 上传文件
 			 *
@@ -110,7 +135,7 @@
 	}
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 	.content{
 		width: 100%;
 		height: 100vh;
@@ -126,11 +151,12 @@
 			display: flex;
 			flex-direction: column;
 			grid-gap: 40rpx;
-			padding: 40rpx 60rpx;
+			padding: 40rpx 28rpx;
 			.photo-top{
 				display: flex;
 				flex-direction: row;
 				grid-column-gap: 88rpx;
+				padding: 0 32rpx;
 				.real-left{
 					flex: 1;
 					width: 276rpx;
@@ -221,7 +247,7 @@
 			display: flex;
 			flex-direction: column;
 			grid-gap: 40rpx;
-			padding: 40rpx 60rpx;
+			padding: 40rpx 28rpx;
 			.item{
 				display: flex;
 				flex-direction: row;
@@ -233,5 +259,21 @@
 				}
 			}
 		}
+		.btn{
+			width: 660rpx;
+			height: 100rpx;
+			background-color: var(--view-theme);
+			border-radius: 60rpx;
+			// background-color: red;
+			color: white;
+			font-size: 48rpx;
+			text-align: center;
+			line-height: 100rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			margin: 0 auto;
+			margin-top: 100rpx;
+		}
 	}
 </style>

pages/users/user_sgin/index.vue

@@ -51,7 +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>
+		  <treasureBox v-if="treasureShow" @closeTreasureBox="closeBox"></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)'">
@@ -101,6 +101,9 @@
 	 		}
 	 	},
 	 	methods: {
+			closeBox(){
+				this.treasureShow=false;
+			},
 			go(){
 				this.treasureShow=true;
 			},