拍摄注意弹出优化

abson
1 parent 35d801ce
Showing 3 changed files with 97 additions and 28 deletions
packageD/pages/AI-test-skin/shoot_notice/shoot_notice.js
packageD/pages/AI-test-skin/shoot_notice/shoot_notice.wxml
packageD/pages/AI-test-skin/shoot_notice/shoot_notice.wxss
 /*
  * @Author: abson
  * @Date: 2022-02-15 10:01:57
- * @LastEditTime: 2022-02-17 09:40:38
+ * @LastEditTime: 2022-02-28 15:37:20
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AEet urkl
  * @FilePath: \MShopWeApp\packageB\pages\AI-test-skin\shoot_notice\shoot_notice.js
@@ -19,6 +19,7 @@ Page({
      */
     data: {
         iurl: setting.imghost,
+        notice_show:"",
     },
  
     /**
@@ -32,7 +33,11 @@ Page({
      * 生命周期函数--监听页面显示
      */
     onShow: function () {
-
+        setTimeout(()=>{
+            this.setData({
+                notice_show:'none',
+            })
+        },3000).bind(this)
     },
  
     /**
@@ -64,15 +69,15 @@ Page({
     },
  
     //从相册中选择图片
-    show_pai_pop:function () {
+    show_pai_pop: function () {
         //选择和拍照一张图片
         wx.chooseImage({
             count: 1,
             sizeType: ['original', 'compressed'],
             sourceType: ['album', 'camera'],
-            success (res) {
-                let imgArr = res.tempFilePaths;
-                getApp().globalData.skin_img=imgArr[0];
+            success(res) {
+                let imgArr = res.tempFiles;
+                getApp().globalData.skin_img_info = imgArr[0];
                 let url = "/packageD/pages/AI-test-skin/select_photo/select_photo";
                 app.goto(url);
             }
 <!--packageB/pages/AI-test-skin/shoot_notice/shoot_notice.wxml-->
 <view class="content">
+    <view class="notice_show" style="display: {{notice_show}};">根据要求拍摄，测肤结果更准确。</view>
     <view>
         <view class="work">准备工作</view>
         <view class="hengxian"></view>
@@ -6,7 +6,31 @@ page {
     box-sizing: border-box;
     background-color: #e7f5fb;
 }
+
+@keyframes notice_show {
+    0% {
+        top: -999rpx;
+    }
+   
+    100% {
+        top: 10rpx;
+    }
+}
+
+.notice_show {
+    text-align: center;
+    padding: 30rpx;
+    color: skyblue;
+    position: absolute;
+    right: 10%;
+    box-shadow: #f0f0f0 0px 0px 5px;
+    z-index: 999;
+    background: #fff;
+    animation: 2s notice_show linear;
+}
+
 .content {
+    position: relative;
     width: 100%;
     /* height: 100%; */
     border-radius: 25rpx;
@@ -26,11 +50,12 @@ page {
     align-items: center;
     margin-bottom: 40rpx
 }
+
 .content .ready1 {
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding-bottom: 50rpx ;
+    padding-bottom: 50rpx;
     /* margin-bottom: 40rpx */
 }
  
@@ -65,8 +90,9 @@ page {
 .content image {
     height: 100%;
 }
+
 .btn {
-    
+
     /* height: 150rpx; */
     /* margin-left: 50%; */
     margin: 70rpx 0 30rpx 50%;
@@ -78,6 +104,7 @@ page {
     border-radius: 50rpx;
     color: #fff;
 }
+
 .btn_fixed {
     position: fixed;
     width: 100%;
@@ -85,6 +112,7 @@ page {
     height: 300rpx;
     background: #e7f5fb;
 }
+
 .notice {
     text-align: center;
     color: red;
@@ -98,36 +126,71 @@ page {
     right: 0;
     bottom: 0;
     z-index: 11;
-    background: rgba(0,0,0,0.4);
+    background: rgba(0, 0, 0, 0.4);
     width: 100%;
     height: 100%;
 }
  
-.flex{display: flex}
-.jc-center{
+.flex {
+    display: flex
+}
+
+.jc-center {
     justify-content: center;
 }
-.ac{align-items: center}
-.pai_content{
-    position: fixed;z-index: 100;bottom: 0;background: #FFFFFF;width: 100%;
-    border-top-left-radius:30rpx;
-    border-top-right-radius:30rpx;
+
+.ac {
+    align-items: center
 }
-.p_item{ height: 100rpx; line-height: 100rpx;text-align: center; border-bottom: 1rpx solid #eee}
-.p_cancle{height: 100rpx; line-height: 100rpx;text-align: center; border-top:20rpx solid #f8f8f8;}
  
-@keyframes p_up
-{
-    from {transform:translateY(100%);}
-    to {transform:translateY(0);}
+.pai_content {
+    position: fixed;
+    z-index: 100;
+    bottom: 0;
+    background: #FFFFFF;
+    width: 100%;
+    border-top-left-radius: 30rpx;
+    border-top-right-radius: 30rpx;
+}
+
+.p_item {
+    height: 100rpx;
+    line-height: 100rpx;
+    text-align: center;
+    border-bottom: 1rpx solid #eee
+}
+
+.p_cancle {
+    height: 100rpx;
+    line-height: 100rpx;
+    text-align: center;
+    border-top: 20rpx solid #f8f8f8;
 }
  
-@keyframes p_down
-{
-   from {transform:translateY(0);}
-   to {transform:translateY(100%);}
+@keyframes p_up {
+    from {
+        transform: translateY(100%);
+    }
+
+    to {
+        transform: translateY(0);
+    }
 }
-.p_to_up{animation:p_up 1s;}
-.p_to_down{animation:p_down 0.5s;}
  
+@keyframes p_down {
+    from {
+        transform: translateY(0);
+    }
+
+    to {
+        transform: translateY(100%);
+    }
+}
+
+.p_to_up {
+    animation: p_up 1s;
+}
  
+.p_to_down {
+    animation: p_down 0.5s;
+}
 \ No newline at end of file