11

src/pages.json

@@ -12,6 +12,12 @@
 				"navigationBarTitleText": "照片详细"
 			}
 		},
+		{
+			"path": "pages/home/takePhoto",
+			"style": {
+				"navigationBarTitleText": "拍照"
+			}
+		},
 		{
 			"path": "pages/index/index",
 			"style": {
@@ -78,7 +84,9 @@
 			"van-popup": "/wxcomponents/vant/popup/index",
 			"van-cell": "/wxcomponents/vant/cell/index",
 			"van-cell-group": "/wxcomponents/vant/cell-group/index",
-			"van-uploader": "/wxcomponents/vant/uploader/index"
+			"van-uploader": "/wxcomponents/vant/uploader/index",
+			"van-icon": "/wxcomponents/vant/icon/index",
+			"van-image": "/wxcomponents/vant/image/index"
 		}
 	}
 }

src/pages/home/detail.vue

@@ -1,11 +1,21 @@
 <template>
-  <div class="body">
-    <img class="div-img" :src="image" />
-    <van-uploader :max-count="1" @after-read="upload">
-      <van-button custom-style=" margin-top: 100rpx" size="small" type="info"
-        >拍照识别</van-button
+  <div>
+    <div class="flex flex-center">
+      <van-image fit="widthFix" width="600rpx" :src="image" />
+    </div>
+    <div class="div-b">
+      <div class="mt-5">榴莲成熟度：70%</div>
+      <div class="mt-5">
+        <van-image width="60rpx" height="60rpx" :src="image" />
+      </div>
+
+      <van-button
+        custom-style="margin-top: 10rpx;"
+        type="info"
+        @click="againTakePhoto"
+        >重新拍照</van-button
       >
-    </van-uploader>
+    </div>
   </div>
 </template>
 
@@ -15,36 +25,25 @@ export default {
   data() {
     return {
       image: "",
-      even: {},
     };
   },
   onLoad(op) {
-    this.even = op.file;
-    console.log(this.even.file);
     this.image = op.file;
+    console.log("接收显示图片url：" + this.image);
   },
   methods: {
-    upload(event) {
-      const { file } = event.detail;
-      console.log(event);
-      console.log(event.detail);
-      this.image = event.detail.url;
+    againTakePhoto() {
+      this.$navigator.push("takePhoto");
     },
   },
 };
 </script>
 
 <style scoped>
-.body {
-  height: 100%;
+.div-b {
   width: 100%;
   text-align: center;
   display: inline-block;
   vertical-align: middle;
 }
-.div-img {
-  width: 100px;
-  height: 100px;
-  margin-top: 20%;
-}
 </style>

src/pages/home/index.vue

@@ -4,28 +4,22 @@
     <h1 class="mt-20">水果慧眼</h1>
     <div class="mt-20">梧桐AI智慧创新团队</div>
 
-    <van-uploader :max-count="1" @after-read="upload">
-      <van-button custom-style=" margin-top: 100rpx" size="small" type="info"
-        >拍照识别</van-button
-      >
-    </van-uploader>
+    <van-button
+      custom-style=" margin-top: 100rpx"
+      size="small"
+      type="info"
+      @click="goTakePhoto"
+      >拍照识别</van-button
+    >
   </div>
 </template>
 
 <script>
 export default {
   name: "index.vue",
-  data() {
-    return {
-      image: "",
-    };
-  },
-  onLoad(op) {},
   methods: {
-    upload(event) {
-      const { file } = event.detail;
-      console.log(event);
-      this.$navigator.push("detail?file=" + event.detail);
+    goTakePhoto() {
+      this.$navigator.push("takePhoto");
     },
   },
 };

src/pages/home/takePhoto.vue

@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <camera class="camera" frame-size="large"></camera>
+    <div class="record">
+      <van-icon
+        color="#afadad"
+        size="100rpx"
+        name="stop-circle-o"
+        @click="record"
+      />
+
+      <van-uploader :max-count="1" @after-read="getImage">
+        <a class="a-xc">相册</a>
+      </van-uploader>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "takePhoto.vue",
+  methods: {
+    record() {
+      const cameraContext = wx.createCameraContext();
+      cameraContext.takePhoto({
+        quality: "high", //高质量的图片
+        success: (res) => {
+          console.log("拍照返回图片信息：" + res);
+          this.$navigator.push("detail?file=" + res.tempImagePath);
+        },
+      });
+    },
+    getImage(event) {
+      console.log("选择的相片信息：" + event.detail.file.url);
+      this.$navigator.push("detail?file=" + event.detail.file.url);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.camera {
+  width: 100vw;
+  height: 100vh;
+}
+.record {
+  position: fixed;
+  bottom: 60rpx;
+  left: 0;
+  right: 0;
+  width: 120rpx;
+  height: 120rpx;
+  margin: auto;
+}
+.a-xc {
+  position: fixed;
+  bottom: 60rpx;
+  right: 60rpx;
+}
+</style>