丰谷拍照

pages/fenggu/takephoto/takephoto.js

@@ -5,7 +5,8 @@ Page({
    * 页面的初始数据
    */
   data: {
-
+    // 验证步骤
+    stepIndex:0
   },
   takePhoto() {
     // wx.getStorageSync('photoFrame')

pages/fenggu/takephoto/takephoto.wxml

 <view class="takephoto">
     <view class="step" style="height: 200rpx; align-items: center;">
         <view class="step-box" style="border-radius: 10rpx;overflow: hidden;">
-            <view class="step-item step-active">三维码校准完成</view>
-            <view class="step-item" style="margin: 0 5rpx;">拍照中</view>
-            <view class="step-item">验证</view>
+            <view class="step-item {{stepIndex > 0 ? 'step-active' : ''}}">三维码校准完成</view>
+            <view class="step-item {{stepIndex > 1 ? 'step-active' : ''}}" style="margin: 0 5rpx;">拍照中</view>
+            <view class="step-item {{stepIndex > 2 ? 'step-active' : ''}}">验证</view>
         </view>
     </view>
-    <view class="photo" style="flex:1;background-color: black;">
-        <!-- <camera style="height: 100%;width: 100%;" flash="on"  devic-position="back" frame-size="large">
-        </camera> -->
+    <view class="photo" style="position: relative;flex:1;background-color: black;">
+        <camera style="height: 100%;width: 100%;" flash="on"  devic-position="back" frame-size="large">
+        </camera>
+        <!-- 拍照框（正方形） -->
+        <image src="/assets/fenggu/拍照框.png" mode="widthFix" class="focus"/>
     </view>
     <view class="bottom" style="height: 400rpx;align-items: center;">
         <view class="tabs" style="padding: 6rpx;background-color: black;">

pages/fenggu/takephoto/takephoto.wxss

@@ -9,6 +9,14 @@
     box-sizing: border-box;
 }
 
+.takephoto .focus {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    width: 400rpx;
+}
+
 
 .step,.step-box,.bottom,.tabs {
     display: flex;