绘智AI相机

miniprogram/ai-camera/src/apis/api.ts

@@ -53,3 +53,12 @@ export const getImgHistory = (params: any) => {
     data: params,
   });
 };
+
+//制作图片 https://www.hzkjai.com/QingLong/HuiYa/wxAddTask
+export const makeImg = (params: any) => {
+  return http({
+    method: "POST",
+    url: "/QingLong/HuiYa/wxAddTask",
+    data: params,
+  });
+};

miniprogram/ai-camera/src/pages/home/home.ts

@@ -59,7 +59,11 @@ export default function () {
 
   const init = async () => {
     const info: any = await wxLogin();
+    data.pageNum = 1;
+    data.totalPage = 0;
     data.token = info.token;
+    data.hotList = [];
+    data.modelId = "";
     getHotListFn();
   };
 
@@ -93,23 +97,6 @@ export default function () {
     getHotListFn();
   }
 
-  const toUpload = () => {
-    uni.chooseImage({
-      count: 1,
-      success: (res) => {
-        console.log(res);
-      },
-      complete: (res) => {
-        console.log("complete", res);
-        data.imgUrl = res.tempFilePaths[0];
-      },
-    });
-  };
-
-  function loadImg() {
-    console.log("加载完成");
-  }
-
   //到制作同款页面
   function toMake(index: number) {
     const model = data.hotList.find((item: any) => {
@@ -130,10 +117,8 @@ export default function () {
 
   return {
     data,
-    toUpload,
     changeList,
     changeModelId,
-    loadImg,
     toMake,
   };
 }

miniprogram/ai-camera/src/pages/make/make.ts

@@ -1,9 +1,11 @@
 import { reactive } from "vue";
 import { onLoad } from "@dcloudio/uni-app";
-import { getModelToMake, getImgHistory } from "@/apis/api";
+import { getModelToMake, getImgHistory, makeImg } from "@/apis/api";
 
 export default function () {
   const token = uni.getStorageSync("token");
+  const { screenWidth } = uni.getWindowInfo();
+
   const data: any = reactive({
     moduleId: "",
     promptId: "",
@@ -22,11 +24,17 @@ export default function () {
       contentnomore: "没有更多数据了~",
     },
     loadStatus: "more",
+    tempImgUrl: "", //上传文件路径
+    isMaking: false, //正在制作
+    isDisabled: false, //按钮在上传时禁用
+    imgWidth: Math.floor((screenWidth - 60) / 3), //历史图片适配宽度
   });
 
   onLoad((options: any) => {
     data.moduleId = options.modelId;
     data.promptId = options.promptId;
+    console.log(data);
+
     getModelToMakeFn();
     getImgHistoryFn();
   });
@@ -86,10 +94,74 @@ export default function () {
   //   }
   // }
 
+  //上传图片
+  function toUpload() {
+    uni.chooseImage({
+      count: 1,
+      success: (res) => {
+        data.tempImgUrl = res.tempFilePaths[0];
+      },
+      fail: (err) => {
+        uni.showToast({
+          icon: "none",
+          title: "图片上传失败！",
+        });
+      },
+    });
+  }
+
+  //删除临时上传图片
+  function deleteTemp() {
+    data.tempImgUrl = "";
+  }
+
+  //历史转临时上传文件
+  function convertTemp(url: string) {
+    data.tempImgUrl = url;
+  }
+
   //立即制作
-  function toMake() {}
+  function toMake() {
+    if (data.tempImgUrl && data.tempImgUrl !== "") {
+      const param = {
+        model_id: data.moduleId,
+        prompt_id: data.promptId,
+        token: data.token,
+        source_img_url: data.tempImgUrl,
+        count: 1,
+      };
+      data.isMaking = true;
+      makeImg(param).then((res: any) => {
+        data.isMaking = false;
+        if (res.success) {
+          uni.showToast({
+            duration: 3500,
+            icon: "none",
+            title: res.estimation_finish_time,
+          });
+          data.isDisabled = true;
+          setTimeout(() => {
+            uni.navigateBack();
+          }, 3500);
+        } else {
+          uni.showToast({
+            icon: "none",
+            title: res.message,
+          });
+        }
+      });
+    } else {
+      uni.showToast({
+        icon: "none",
+        title: "请上传图片！",
+      });
+    }
+  }
   return {
     data,
     toMake,
+    toUpload,
+    deleteTemp,
+    convertTemp,
   };
 }

miniprogram/ai-camera/src/pages/make/make.vue

@@ -35,7 +35,24 @@
         <view class="flag"></view>
         上传照片
       </view>
-      <button class="make-btn-style">
+      <view
+        class="temp-img-content border-radius"
+        v-if="data.tempImgUrl && data.tempImgUrl !== ''"
+      >
+        <image
+          :src="data.tempImgUrl"
+          mode="scaleToFill"
+          style="width: 100%; height: 100%"
+        />
+        <uni-icons
+          type="trash"
+          color=""
+          size="24"
+          class="img-del"
+          @click="deleteTemp"
+        />
+      </view>
+      <button v-else class="make-btn-style" @click="toUpload">
         <uni-icons type="plusempty" color="" size="24" />
       </button>
       <view class="part-title">
@@ -44,20 +61,40 @@
       </view>
       <view class="img-history border-radius">
         <view
-          class="img-content border-radius"
+          class="img-content"
+          :style="
+            'width:' +
+            data.imgWidth +
+            'px; height:' +
+            data.imgWidth * 1.2 +
+            'px'
+          "
           v-for="img in data.imgHistoryList"
           :key="img.source_img_url"
+          @click="convertTemp(img.source_img_url)"
         >
-          <image :src="img.source_img_url" style="width: 100%; height: 100%" />
+          <view class="img-box border-radius">
+            <image
+              :src="img.source_img_url"
+              style="width: 100%; height: 100%"
+            />
+          </view>
         </view>
       </view>
     </view>
-    <button @click="toMake" class="make-btn-style">立即制作</button>
+    <button
+      @click="toMake"
+      class="make-btn-style"
+      :loading="data.isMaking"
+      :disabled="data.isDisabled"
+    >
+      立即制作
+    </button>
   </view>
 </template>
 <script setup lang="ts">
 import getData from "./make";
-const { data, toMake } = getData();
+const { data, toMake, toUpload, deleteTemp, convertTemp } = getData();
 </script>
 <style scoped lang="scss">
 .make-container {
@@ -69,6 +106,9 @@ const { data, toMake } = getData();
   .content {
     width: 100%;
     height: calc(100% - 112rpx);
+    overflow-y: scroll;
+    padding-bottom: $uni-spacing-col-base;
+    box-sizing: border-box;
     .model-content {
       width: 100%;
       height: 550rpx;
@@ -149,19 +189,36 @@ const { data, toMake } = getData();
         margin-right: 10rpx;
       }
     }
+    .temp-img-content {
+      width: 260rpx;
+      height: 320rpx;
+      overflow: hidden;
+      margin-bottom: 10rpx;
+      position: relative;
+      .img-del {
+        position: absolute;
+        right: 10rpx;
+        top: 10rpx;
+        color: $uni-text-color-disable;
+      }
+    }
     .img-history {
       width: 100%;
       height: auto;
       background-color: white;
-      padding: $uni-spacing-col-base;
+      padding: $uni-spacing-col-base 0;
       box-sizing: border-box;
       display: flex;
       flex-wrap: wrap;
-      justify-content: space-between;
       .img-content {
-        width: 160rpx;
+        padding: 10rpx;
-        height: 160rpx;
+        box-sizing: border-box;
-        overflow: hidden;
+        margin-left: 10px;
+        .img-box {
+          width: 100%;
+          height: 100%;
+          overflow: hidden;
+        }
       }
     }
   }

miniprogram/ai-camera/src/pages/works/works.ts

@@ -7,7 +7,7 @@ export default function () {
     pageNum: 1,
     pageSize: 10,
     totalPage: 0,
-    imageList: [],
+    imageList: [{}, {}, {}, {}, {}],
     token: token,
     loadContent: {
       contentdown: "点击加载更多",
@@ -18,6 +18,8 @@ export default function () {
   });
 
   onShow(() => {
+    data.pageNum = 1;
+    data.totalPage = 0;
     data.imageList = [];
     getWorkListFn();
   });

miniprogram/ai-camera/src/pages/works/works.vue

@@ -11,6 +11,7 @@
         v-for="item in data.imageList"
         :key="item.id"
       >
+        <image :src="item.source_img_url" style="width: 100%; height: 100%" />
       </view>
       <uni-load-more
         class="load-more-container"