绘智AI相机

main
gongdi 11 months ago
parent 2feb07392a
commit cfc3c20c6d

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

@ -59,7 +59,11 @@ export default function () {
const init = async () => { const init = async () => {
const info: any = await wxLogin(); const info: any = await wxLogin();
data.pageNum = 1;
data.totalPage = 0;
data.token = info.token; data.token = info.token;
data.hotList = [];
data.modelId = "";
getHotListFn(); getHotListFn();
}; };
@ -93,23 +97,6 @@ export default function () {
getHotListFn(); 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) { function toMake(index: number) {
const model = data.hotList.find((item: any) => { const model = data.hotList.find((item: any) => {
@ -130,10 +117,8 @@ export default function () {
return { return {
data, data,
toUpload,
changeList, changeList,
changeModelId, changeModelId,
loadImg,
toMake, toMake,
}; };
} }

@ -1,9 +1,11 @@
import { reactive } from "vue"; import { reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app"; import { onLoad } from "@dcloudio/uni-app";
import { getModelToMake, getImgHistory } from "@/apis/api"; import { getModelToMake, getImgHistory, makeImg } from "@/apis/api";
export default function () { export default function () {
const token = uni.getStorageSync("token"); const token = uni.getStorageSync("token");
const { screenWidth } = uni.getWindowInfo();
const data: any = reactive({ const data: any = reactive({
moduleId: "", moduleId: "",
promptId: "", promptId: "",
@ -22,11 +24,17 @@ export default function () {
contentnomore: "没有更多数据了~", contentnomore: "没有更多数据了~",
}, },
loadStatus: "more", loadStatus: "more",
tempImgUrl: "", //上传文件路径
isMaking: false, //正在制作
isDisabled: false, //按钮在上传时禁用
imgWidth: Math.floor((screenWidth - 60) / 3), //历史图片适配宽度
}); });
onLoad((options: any) => { onLoad((options: any) => {
data.moduleId = options.modelId; data.moduleId = options.modelId;
data.promptId = options.promptId; data.promptId = options.promptId;
console.log(data);
getModelToMakeFn(); getModelToMakeFn();
getImgHistoryFn(); 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 { return {
data, data,
toMake, toMake,
toUpload,
deleteTemp,
convertTemp,
}; };
} }

@ -35,7 +35,24 @@
<view class="flag"></view> <view class="flag"></view>
上传照片 上传照片
</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" /> <uni-icons type="plusempty" color="" size="24" />
</button> </button>
<view class="part-title"> <view class="part-title">
@ -44,20 +61,40 @@
</view> </view>
<view class="img-history border-radius"> <view class="img-history border-radius">
<view <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" v-for="img in data.imgHistoryList"
:key="img.source_img_url" :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> </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> </view>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import getData from "./make"; import getData from "./make";
const { data, toMake } = getData(); const { data, toMake, toUpload, deleteTemp, convertTemp } = getData();
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.make-container { .make-container {
@ -69,6 +106,9 @@ const { data, toMake } = getData();
.content { .content {
width: 100%; width: 100%;
height: calc(100% - 112rpx); height: calc(100% - 112rpx);
overflow-y: scroll;
padding-bottom: $uni-spacing-col-base;
box-sizing: border-box;
.model-content { .model-content {
width: 100%; width: 100%;
height: 550rpx; height: 550rpx;
@ -149,19 +189,36 @@ const { data, toMake } = getData();
margin-right: 10rpx; 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 { .img-history {
width: 100%; width: 100%;
height: auto; height: auto;
background-color: white; background-color: white;
padding: $uni-spacing-col-base; padding: $uni-spacing-col-base 0;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between;
.img-content { .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;
}
} }
} }
} }

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

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

Loading…
Cancel
Save