前端更新

pages.json

@@ -114,6 +114,14 @@
 					"navigationBarTitleText": "",
 					"navigationStyle": "custom"
 				}
+			},
+			{
+				"path" : "color/index",
+				"style" : 
+				{
+					"navigationBarTitleText" : "证件照换底色",
+					"navigationStyle": "custom"
+				}
 			}
 
 		]

pages/index/index.vue

@@ -18,16 +18,16 @@
 		 <view class="contentBox">
 			 
 			 <view class="navBox">
-				 <view class="navItem">
+				 <view class="navItem" @click="goTo('/pagesA/photo/photo_1')">
 					 <image src="/static/img/index/zjhc.png" mode="widthFix"></image>
 				 </view>
-				 <view class="navItem">
+				 <view class="navItem" @click="goTo('/pagesA/color/index')">
 				 	<image src="/static/img/index/zjgs.png" mode="widthFix"></image>
 				 </view>
-				 <view class="navItem">
+				 <view class="navItem" @click="goTo('/pagesA/photo/face')">
 				 	<image src="/static/img/index/aixz.png" mode="widthFix"></image>
 				 </view>
-				 <view class="navItem">
+				 <view class="navItem" @click="goTo('/pagesA/photo/cartoon_1')">
 				 	<image src="/static/img/index/kthf.png" mode="widthFix"></image>
 				 </view>
 			 </view>	
@@ -215,6 +215,13 @@
 	    }
 	},
     methods: {
+		goTo(url)
+		{
+			uni.$u.route({
+				type:'navigateTo',
+				url: url,
+			});
+		},
 		//获取门店信息
 		getHomeInfo(){
 			var _this =this;

pagesA/color/index.vue

@@ -0,0 +1,271 @@
+<template>
+	<view class="container">
+		<view class="uploadBox">
+			<view class="uploadBtn">
+				<view class="uploadBtn_img">
+					 <image src="/static/img/index/add.png" mode="widthFix"></image>
+				</view>
+				<view class="uploadBtn_txt">点击上传人物换背景</view>
+			</view>	
+		</view>
+		<view class="uploadTips" @click="tips">
+			<text>照片注意事项</text> <image src="/static/img/index/tips.png" mode="widthFix"></image>
+		</view>
+		
+		<view class="colorBox">
+			 <view class="title">选择背景颜色</view>   
+			 <scroll-view class="scrollBox" scroll-x="true" @scroll="scroll" scroll-left="0">
+				 <view class="color on" style="background-color: blue;">
+					 <image src="/static/img/index/duigou.png" mode="widthFix"></image>
+				 </view>
+				 <view class="color" style="background-color:green;">
+				 </view>
+				 <view class="color" style="background-color:greenyellow;">
+				 </view>
+				 <view class="color" style="background-color:darkred;">
+				 </view>
+				 <view class="color" style="background-color:red;">
+				 </view>
+				 <view class="color" style="background-color: blueviolet;">
+				 </view>
+				 <view class="color" style="background-color: yellowgreen;">
+				 </view>
+							<view class="color" style="background-color:green;">
+							</view>
+							<view class="color" style="background-color:greenyellow;">
+							</view>
+							<view class="color" style="background-color:darkred;">
+							</view>
+							<view class="color" style="background-color:red;">
+							</view>
+			 </scroll-view>	
+			  
+			 <view class="btnBox no">
+				 保存
+			 </view>
+			 <view class="btnBox yes">
+			 	保存
+			 </view>
+			 <view class="num">
+				 <text>剩余生成次数</text>
+				 <text class="use">1</text>
+				 <text>/30</text>
+			 </view>		   
+		</view>
+			
+			
+		<u-popup :show="show" :round="10" mode="center" bgColor="transparent" @close="close" @open="open">
+		            <view class="popupBox">
+		                <view class="popupTop">
+							提醒
+						</view>
+						<view class="popupDesc">
+							<u-parse :content="content" :tagStyle="style"></u-parse>
+							
+						</view>
+						<view class="popupBtn">
+							<view class="sbtnBox a3" @click="yes">我了解啦</view>
+						</view>
+		            </view>
+		</u-popup>	
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				//弹窗
+				show: false,
+				content: `<p>1.人物需抬头挺胸，两眼平视前方</p>
+							<p>2.人物应去掉发饰，眼镜，露出双耳</p>
+							<p>3.深色衣服，白色背景墙效果更佳</p>
+							<p>4.请使用后置摄像头拍摄，效果更佳</p>`,
+				style: {
+							// 字符串的形式
+	
+							p: 'font-weight: 400;font-size: 28rpx;color: #555555;line-height: 60rpx;',
+						
+					 },
+
+		
+			}
+		},
+		methods: {
+			//滚动监控
+			scroll1(e) {
+				console.log(e);
+			},
+			//弹窗
+			tips(){
+				 this.show = true;
+			},
+			
+			open() {
+			   console.log('open');
+			},
+			close() {
+			   this.show = false;
+			
+			},
+			yes(){
+				this.close();
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+page{background-color: #F5F6FB;}
+.container{width: 100%;}
+.uploadBox{
+	width: 400rpx;
+	height: 500rpx;
+	background: #FFFFFF;
+	border-radius: 24rpx;
+	margin:200rpx auto auto auto;
+}
+.uploadBtn{ width: 100%; height: auto;}
+.uploadBtn_img{ width: 100%; height: auto; text-align: center;}
+.uploadBtn_img image{ width: 96rpx; height: 96rpx; margin: 160rpx auto auto auto; display: inline-block;}
+.uploadBtn_txt{
+	width: 100%; 
+	height: auto;
+	font-weight: 400;
+	font-size: 30rpx;
+	color: #333333;
+	line-height: 44rpx;
+	text-align: center;
+}
+.uploadTips{ width: 100%; height: 50rpx; line-height: 50rpx; text-align: center;}
+.uploadTips text{
+	font-weight: 400;
+	font-size: 24rpx;
+	color: #999999;
+}
+.uploadTips image{ width: 24rpx; height: 24rpx; display: inline-block; margin-left: 10rpx;}
+
+.colorBox{
+	width: 750rpx;
+	height: 520rpx;
+	background: #FFFFFF;
+	border-radius: 24rpx 24rpx 0rpx 0rpx;
+	position: fixed;
+	bottom: 0;
+}
+.title{
+	width: 100%;
+	height: 40rpx;
+	font-weight: 700;
+	font-size: 28rpx;
+	color: #333333;
+	line-height: 40rpx;
+	text-align: center;
+	margin: 20rpx 0rpx;
+}
+
+.scrollBox {
+ 	margin-top: 20rpx;
+ 	width: 100%;
+ 	height: 90rpx;
+ 	white-space: nowrap;
+ 	
+ }
+.color{
+	width: 72rpx;
+	height: 72rpx;
+	border-radius: 50%;
+	display: inline-block;
+	margin-left: 30rpx;
+	border: 8rpx solid #FFFFFF;
+	overflow: hidden;
+}
+.on{
+	border-color:#E7E7EF;
+ }
+.on image{width: 50rpx; height:auto; margin: 12rpx 0rpx 0rpx 12rpx;}
+
+
+.popupBox{
+	width: 600rpx;
+	height: auto;
+	border-radius: 24rpx;
+	background-color: #FFFFFF;
+}
+.popupTop{
+	width: 600rpx;
+	height: 140rpx;
+	background: linear-gradient(to bottom, #D3D5FF 20%, #FFFFFF 50%);
+	border-radius: 24rpx 24rpx 0rpx 0rpx;
+	line-height: 140rpx;
+	text-align: center;
+	font-weight: 700;
+	font-size: 30rpx;
+	color: #333333;
+}
+.popupDesc{
+	width:480rpx;
+	font-weight: 400;
+	font-size: 28rpx;
+	color: #555555;
+	padding: 0rpx 60rpx;
+}
+
+.popupBtn{ width: 100%; height: auto;
+    display: flex; flex-wrap: wrap;
+	justify-content: space-around; /* 使子元素在容器中均匀分布 */
+	align-items: center; /* 如果需要垂直居中子元素 */
+}
+.sbtnBox{
+	margin: 30rpx auto;
+	width: 478rpx;
+	height: 80rpx;
+	font-weight: 700;
+	font-size: 30rpx;
+	line-height: 80rpx;
+	border: 2rpx solid #4D94FF;
+	text-align: center;
+	border-radius: 44rpx;
+	
+	
+}
+
+.a3{
+	background: linear-gradient( 270deg, #2E57F1 0%, #8358F6 100%);
+	color:#FFFFFF;
+}
+
+
+.btnBox{
+	width: 702rpx;
+	height: 88rpx;
+	border-radius: 44rpx;
+	
+	font-weight: 700;
+	font-size: 30rpx;
+	line-height: 88rpx;
+	text-align: center;
+	
+	margin: 20rpx auto;
+
+}
+.yes{
+	border: 2rpx solid #9B75FF;
+	background: linear-gradient( 270deg, #2E57F1 0%, #8358F6 100%);
+	color:#FFFFFF;
+}
+.no{
+	border: 2rpx solid #ECEBF1;
+	background-color: #ECEBF1;
+	color:#C8C6D4;
+}
+
+
+.num{ width: 100%; height: 60rpx; text-align: center;
+	font-weight: 400;
+	font-size: 24rpx;
+	color: #555555;
+	line-height: 60rpx;
+}
+.num .use{ color: #7A74F0;}
+</style>