Camera test

android/gradle/wrapper/gradle-wrapper.properties

@@ -1,6 +1,7 @@
+#Tue Apr 23 20:50:32 MSK 2024
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.4-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.4-bin.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME

assets/styles.scss

@@ -5,6 +5,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+:root:root {
+  --van-duration-base: 0.1s;
+}
+
 body, html {
   margin: 0;
   background-color: #f7f8fa;

layouts/default.vue

@@ -2,8 +2,6 @@
   <div>
     <van-nav-bar title="Знакомства СПб" style="margin-bottom: 16px;" />
 
-    <slot/>
+    <slot />
   </div>
 </template>
-<script setup lang="ts">
-</script>

nuxt.config.ts

@@ -3,5 +3,8 @@ export default defineNuxtConfig({
   ssr: false,
   devtools: { enabled: true },
   css: ['@/assets/styles.scss'],
+  app: {
+    pageTransition: { name: 'van-fade', mode: 'out-in' },
+  },
   modules: ['@vant/nuxt'],
 })

pages/index.vue

@@ -1,8 +1,10 @@
 <template>
+  <div class="index-page">
     <van-cell-group inset>
-    <van-cell title="Профиль" is-link to="/profile" />
+      <van-cell title="Профиль" is-link to="/profile" class="van-haptics-feedback" />
       <van-cell title="Надар" is-link to="/nadar" />
     </van-cell-group>
+  </div>
 </template>
 
 <script setup lang="ts">

pages/nadar.vue

@@ -1,52 +1,26 @@
 <template>
-  <van-image :src="src" />
+  <div class="nadar-page">
-  <pre>DEBUG: {{ debug }}</pre>
+    <div style="text-align: center;">
-  <van-button type="primary" @click="takePicture">
+      <van-image :src="src" width="200" height="200" round fit="cover" style="box-shadow: 0 0 12px rgba(0,0,0,0.1)" @click="takePicture" />
-    Make photo naxuy
+    </div>
-  </van-button>
 
-  <!--  <van-uploader :after-read="afterRead" /> -->
+    <pre>{{ debug }}</pre>
-<!--  <van-image :src="imageUrl" /> -->
+  </div>
 </template>
 
 <script setup lang="ts">
 import { Camera, CameraResultType, CameraSource } from '@capacitor/camera'
 
-// const file = ref()
-//
 const src = ref()
-const debug = ref('')
+const debug = ref()
 
 async function takePicture() {
   const photo = await Camera.getPhoto({
     resultType: CameraResultType.Uri,
     source: CameraSource.Photos,
-    width: 200,
-    height: 200,
-    quality: 90,
   })
+
   debug.value = photo
   src.value = photo.webPath
-
-  // const requestResult = await Camera.requestPermissions({ permissions: ['photos'] })
-  //
-  // if (requestResult.state === 'granted') {
-  //   try {
-  //     const {photos} = await Camera.pickImages({ width: 200, height: 200, quality: 90, limit: 1 })
-  //     debug.value = photos
-  //     src.value = photos[0].webPath
-  //   }
-  //   catch (e) {
-  //     debug.value = e
-  //   }
-  // }
 }
-
-// const imageUrl = ref('')
-// function afterRead(file) {
-//   // Создаем URL из файла
-//   const url = URL.createObjectURL(file.file)
-//   // Обновляем реактивную ссылку
-//   imageUrl.value = url
-// }
 </script>

pages/profile.vue

@@ -1,4 +1,5 @@
 <template>
+  <div class="profile-page">
     <van-space direction="vertical" fill>
       <van-row justify="center">
         <van-col>
@@ -8,6 +9,7 @@
             fit="cover"
             round
             src="/nadarik.jpg"
+            @click="previewAvatar"
           />
         </van-col>
       </van-row>
@@ -31,6 +33,7 @@
       @select="onClickAction"
       @cancel="onCancel"
     />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -57,6 +60,13 @@ function onClickAction(action: ActionSheetAction) {
 function onCancel() {
   showNotify({ type: 'danger', message: 'Закрыто нахой' })
 }
+
+function previewAvatar() {
+  showImagePreview({
+    images: ['https://i.imgur.com/PE3sVPb.jpeg'],
+    showIndex: false,
+  })
+}
 </script>
 
 <style scoped>