认证个人和认证企业

pages/mine/authFirm.vue

@@ -1,22 +1,174 @@
 <template>
-	<view>
-		 企业认证
-	</view>
+  <view class="auth-firm">
+    <!--顶部导航栏-->
+    <navbar leftClick @leftClick="$utils.navigateBack" title="认证企业"/>
+
+    <!--身份信息页面-->
+    <view class="container">
+      <view class="form-item">
+        <view class="label">法人真实姓名</view>
+        <view class="input">{{ name }}</view>
+      </view>
+
+      <uv-divider :hairline="false" lineColor="#c0c0c0" dot></uv-divider>
+
+      <view class="form-item">
+        <view class="label">法人身份证号</view>
+        <view class="input">{{ idCard }}</view>
+      </view>
+
+      <uv-divider :hairline="false" lineColor="#c0c0c0" dot></uv-divider>
+
+      <view class="form-item">
+        <view class="label">营业执照</view>
+        <view class="upload">
+          <uv-upload
+              :fileList="yxzzFileList"
+              :maxCount="5"
+              multiple
+              width="150rpx"
+              height="150rpx"
+              @delete="yxzzDeleteImage"
+              @afterRead="yxzzAfterRead"
+              :previewFullImage="true"></uv-upload>
+        </view>
+      </view>
+
+      <uv-divider :hairline="false" lineColor="#c0c0c0" dot></uv-divider>
+
+      <view class="form-item">
+        <view class="label">其他资质</view>
+        <view class="upload">
+          <uv-upload
+              :fileList="qtzzFileList"
+              :maxCount="5"
+              multiple
+              width="150rpx"
+              height="150rpx"
+              @delete="qtzzDeleteImage"
+              @afterRead="qtzzAfterRead"
+              :previewFullImage="true"></uv-upload>
+        </view>
+      </view>
+
+    </view>
+
+
+
+    <!--请仔细阅读平台《用户协议》《隐私协议》-->
+    <view class="agree">
+      <view>
+        请仔细阅读平台<span style="color:#009dff">《用户协议》</span><span style="color:#009dff">《隐私协议》</span>
+      </view>
+    </view>
+
+
+    <!--下一步按钮-->
+    <button @click="onNextClick" class="bottomBtn">
+      立即认证
+    </button>
+  </view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				
-			}
-		},
-		methods: {
-			
-		}
-	}
+import '../../common.css'; // 引入公共 CSS 文件
+
+export default {
+  data() {
+    return {
+      name: 'xiaohua',
+      idCard: '2101472154874512',
+      yxzzFileList: [
+          {url: 'https://cdn.uviewui.com/uview/swiper/2.jpg'},
+      ],
+      qtzzFileList: [
+        {url: 'https://cdn.uviewui.com/uview/swiper/2.jpg'},
+      ],
+    }
+  },
+  methods: {
+    onNextClick() {
+      this.$utils.navigateTo("/mine/purse");
+    },
+    yxzzDeleteImage(e){
+      this.yxzzFileList.splice(e.index, 1)
+    },
+    qtzzDeleteImage(e){
+      this.qtzzFileList.splice(e.index, 1)
+    },
+
+    yxzzAfterRead(e){
+      let self = this
+      e.file.forEach(file => {
+        self.$Oss.ossUpload(file.url).then(url => {
+          self.yxzzFileList.push({
+            url
+          })
+        })
+      })
+    },
+    qtzzAfterRead(e){
+      let self = this
+      e.file.forEach(file => {
+        self.$Oss.ossUpload(file.url).then(url => {
+          self.qtzzFileList.push({
+            url
+          })
+        })
+      })
+    },
+  }
+}
 </script>
 
-<style>
+<style scoped lang="scss">
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+.auth-firm {
+  .container {
+    padding: 100rpx 50rpx 50rpx 50rpx;
+    //border: 1px solid red;
+
+    .header {
+      margin-bottom: 40rpx;
+      font-size: 28rpx;
+      color: #666;
+    }
+
+    .form-item {
+      margin-bottom: 40rpx;
+
+      .label {
+        font-size: 36rpx;
+        margin-bottom: 10px;
+        display: block;
+      }
+
+      .input {
+        width: 100vw;
+        font-size: 38rpx;
+        margin-top: 40rpx;
+      }
+
+      .upload {
+
+      }
+    }
+  }
+
+  .agree {
+    display: flex;
+    justify-content: center;
+    position: fixed;
+    bottom: 12%;
+    border: 1px solid red;
+    width: 100vw;
+  }
+
+}
 
 </style>

pages/mine/authPerson.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="auth-person">
     <!--顶部导航栏-->
-    <navbar leftClick @leftClick="$utils.navigateBack" title="身份认证"/>
+    <navbar leftClick @leftClick="$utils.navigateBack" title="认证个人"/>
 
     <!--身份信息页面-->
     <view class="container">