diff --git a/miniprogram/ai-camera/src/App.vue b/miniprogram/ai-camera/src/App.vue index 33aad9a3..dc8345d3 100644 --- a/miniprogram/ai-camera/src/App.vue +++ b/miniprogram/ai-camera/src/App.vue @@ -1,9 +1,8 @@ - diff --git a/miniprogram/ai-camera/src/apis/api.ts b/miniprogram/ai-camera/src/apis/api.ts index 3bc642fc..2480236c 100644 --- a/miniprogram/ai-camera/src/apis/api.ts +++ b/miniprogram/ai-camera/src/apis/api.ts @@ -8,3 +8,48 @@ export const getWxId = (params: any) => { data: params, }); }; + +//获取首页热门推荐 +export const getHotList = (params: any) => { + return http({ + method: "POST", + url: "/QingLong/HuiYa/wxGetTjModelList", + data: params, + }); +}; + +//获取作品数据 +export const getWorkList = (params: any) => { + return http({ + method: "POST", + url: "/QingLong/HuiYa/wxGetTaskImage", + data: params, + }); +}; + +//金豆消耗记录 +export const getChangeRecord = (params: any) => { + return http({ + method: "POST", + url: "/QingLong/HuiYa/wxGetJournal", + data: params, + }); +}; + +//获取制作同款model图片 +export const getModelToMake = (params: any) => { + return http({ + method: "POST", + url: "/QingLong/HuiYa/wxGetModelPrompt", + data: params, + }); +}; + +//获取历史相 +export const getImgHistory = (params: any) => { + return http({ + method: "POST", + url: "/QingLong/HuiYa/wxUserImgHistory", + data: params, + }); +}; diff --git a/miniprogram/ai-camera/src/main.ts b/miniprogram/ai-camera/src/main.ts index b12c1ee7..a212606e 100644 --- a/miniprogram/ai-camera/src/main.ts +++ b/miniprogram/ai-camera/src/main.ts @@ -1,5 +1,7 @@ import { createSSRApp } from "vue"; import App from "./App.vue"; +import "./style/common.scss"; + export function createApp() { const app = createSSRApp(App); return { diff --git a/miniprogram/ai-camera/src/pages.json b/miniprogram/ai-camera/src/pages.json index 3bc687cb..efe974d9 100644 --- a/miniprogram/ai-camera/src/pages.json +++ b/miniprogram/ai-camera/src/pages.json @@ -12,7 +12,9 @@ { "path": "pages/home/home", "style": { - "navigationBarTitleText": "绘智AI相机" + "navigationBarTitleText": "绘智AI相机", + "navigationBarBackgroundColor": "#707070", + "navigationBarTextStyle": "white" } }, { @@ -28,7 +30,50 @@ } } ], + "subPackages": [ + { + "root": "pages/make", + "pages": [ + { + "path": "make", + "style": { + "navigationBarTitleText": "制作同款" + } + } + ] + }, + { + "root": "pages/my/agreement", + "pages": [ + { + "path": "payAgree", + "style": { + "navigationBarTitleText": "支付协议" + } + }, + { + "path": "privacyAgree", + "style": { + "navigationBarTitleText": "隐私协议" + } + } + ] + }, + { + "root": "pages/my/changeRecord", + "pages": [ + { + "path": "changeRecord", + "style": { + "navigationBarTitleText": "变更记录" + } + } + ] + } + ], "tabBar": { + "color": "#999999", + "selectedColor": "#3663e4", "list": [ { "text": "首页", diff --git a/miniprogram/ai-camera/src/pages/home/home.ts b/miniprogram/ai-camera/src/pages/home/home.ts new file mode 100644 index 00000000..03a4bbce --- /dev/null +++ b/miniprogram/ai-camera/src/pages/home/home.ts @@ -0,0 +1,139 @@ +import { reactive, watch } from "vue"; +import { onShow } from "@dcloudio/uni-app"; +import { getHotList } from "@/apis/api"; +import { wxLogin, saveImgCache } from "@/utils/commonUtil"; + +export default function () { + const data: any = reactive({ + hotList: [], + modelId: "", + token: "", + imgList: [], + imgUrl: "", + pageNum: 1, + pageSize: 12, + totalPage: 0, + }); + + watch( + () => data.modelId, + (n) => { + if (n) { + //先查本地缓存 [{modelId:1,imgList:[url1,url2,...]},{modelId:2,imgList:[url1,url2,...]},...] + const imgCache = uni.getStorageSync("imgCache"); + if (imgCache) { + const cacheModel = imgCache.find((item: any) => item.modelId == n); + if (cacheModel) { + data.imgList = cacheModel.imgList; + } else { + selectCloudList(n); + } + } else { + selectCloudList(n); + } + } + } + ); + + function selectCloudList(n: any) { + const selectModel = data.hotList.find((item: any) => item.model_id == n); + const imgList = []; + if (selectModel) { + imgList.push(selectModel.img_url); + selectModel.listImg.forEach((item: any) => { + imgList.push(item.img_url); + }); + data.imgList = imgList; + saveImgCache(n, imgList); + } + } + + //切换分类 + function changeModelId(modelId: any) { + data.modelId = modelId; + } + + onShow(() => { + init(); + }); + + const init = async () => { + const info: any = await wxLogin(); + data.token = info.token; + getHotListFn(); + }; + + //获取热门推荐 + function getHotListFn() { + const param = { + page: data.pageNum, + limit: data.pageSize, + token: data.token, + }; + getHotList(param).then((res: any) => { + if (res.success) { + const dataInfo = res.data; + data.totalPage = dataInfo.totalPage; + data.hotList = dataInfo.list; + data.modelId = + data.hotList && data.hotList.length > 0 + ? data.hotList[0].model_id + : ""; + } else { + uni.showToast({ + icon: "none", + title: "热门推荐获取失败！", + }); + } + }); + } + + function changeList() { + data.pageNum = data.pageNum == data.totalPage ? 1 : data.pageNum + 1; + 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) => { + return item.model_id == data.modelId; + }); + let promptId = ""; + if (model) { + if (index == 0) { + promptId = model.prompt_id; + } else { + promptId = model.listImg[index - 1].prompt_id; + } + } + uni.navigateTo({ + url: "/pages/make/make?modelId=" + data.modelId + "&promptId=" + promptId, + }); + } + + return { + data, + toUpload, + changeList, + changeModelId, + loadImg, + toMake, + }; +} diff --git a/miniprogram/ai-camera/src/pages/home/home.vue b/miniprogram/ai-camera/src/pages/home/home.vue index ef76c53c..9e6974d9 100644 --- a/miniprogram/ai-camera/src/pages/home/home.vue +++ b/miniprogram/ai-camera/src/pages/home/home.vue @@ -1,20 +1,210 @@ - - - - + diff --git a/miniprogram/ai-camera/src/pages/make/convert/convert.ts b/miniprogram/ai-camera/src/pages/make/convert/convert.ts new file mode 100644 index 00000000..b5730de1 --- /dev/null +++ b/miniprogram/ai-camera/src/pages/make/convert/convert.ts @@ -0,0 +1,27 @@ +import { reactive } from "vue"; + +export default function () { + const data: any = reactive({ + boxLeft: 85, // move-box的left值 + }); + + function clickMove(e: any) { + const touch = e.touches[0]; + let pageX = touch.pageX; + + if (pageX < 0) { + pageX = 0; + } + + if (pageX > 170) { + pageX = 170; + } + data.boxLeft = pageX; + e.preventDefault(); + } + + return { + data, + clickMove, + }; +} diff --git a/miniprogram/ai-camera/src/pages/make/convert/convert.vue b/miniprogram/ai-camera/src/pages/make/convert/convert.vue new file mode 100644 index 00000000..793c7553 --- /dev/null +++ b/miniprogram/ai-camera/src/pages/make/convert/convert.vue @@ -0,0 +1,70 @@ + + + + diff --git a/miniprogram/ai-camera/src/pages/make/make.ts b/miniprogram/ai-camera/src/pages/make/make.ts new file mode 100644 index 00000000..7f9454fa --- /dev/null +++ b/miniprogram/ai-camera/src/pages/make/make.ts @@ -0,0 +1,95 @@ +import { reactive } from "vue"; +import { onLoad } from "@dcloudio/uni-app"; +import { getModelToMake, getImgHistory } from "@/apis/api"; + +export default function () { + const token = uni.getStorageSync("token"); + const data: any = reactive({ + moduleId: "", + promptId: "", + token: token, + modelImg: "", //模版图片 + modelTitle: "", //模版标题 + memoList: [], //模版描述 + starNum: 0, //消耗金豆数量 + pageNum: 1, + pageSize: 10, + totalPage: 0, + imgHistoryList: [], + loadContent: { + contentdown: "点击加载更多", + contentrefresh: "正在加载...", + contentnomore: "没有更多数据了~", + }, + loadStatus: "more", + }); + + onLoad((options: any) => { + data.moduleId = options.modelId; + data.promptId = options.promptId; + getModelToMakeFn(); + getImgHistoryFn(); + }); + + //获取模板数据 + function getModelToMakeFn() { + const param = { + model_id: data.moduleId, + prompt_id: data.promptId, + token: data.token, + }; + getModelToMake(param).then((res: any) => { + if (res.success) { + data.modelImg = res.img_url; + data.modelTitle = res.record.model_name; + data.starNum = res.record.star; + const memo = res.record.memo; + if (memo && memo !== "") { + data.memoList = memo.split("。"); + } + } else { + uni.showToast({ + icon: "none", + title: "数据获取失败！", + }); + } + }); + } + + //获取历史相册 + function getImgHistoryFn() { + const param = { + page: data.pageNum, + limit: data.pageSize, + token: data.token, + }; + getImgHistory(param).then((res: any) => { + if (res.success) { + data.imgHistoryList = res.data; + // changeLoadStatus(); + } else { + //changeLoadStatus(); + uni.showToast({ + icon: "none", + title: "历史相册数据获取失败！", + }); + } + }); + } + + //改变底部loading状态 + // function changeLoadStatus() { + // if (data.pageNum == data.totalPage || data.totalPage == 0) { + // data.loadStatus = "no-more"; + // } else { + // data.loadStatus = "more"; + // } + // } + + //立即制作 + function toMake() {} + return { + data, + toMake, + }; +} diff --git a/miniprogram/ai-camera/src/pages/make/make.vue b/miniprogram/ai-camera/src/pages/make/make.vue new file mode 100644 index 00000000..cb69534f --- /dev/null +++ b/miniprogram/ai-camera/src/pages/make/make.vue @@ -0,0 +1,169 @@ + + + diff --git a/miniprogram/ai-camera/src/pages/my/agreement/payAgree.vue b/miniprogram/ai-camera/src/pages/my/agreement/payAgree.vue new file mode 100644 index 00000000..a3a2b9ab --- /dev/null +++ b/miniprogram/ai-camera/src/pages/my/agreement/payAgree.vue @@ -0,0 +1,69 @@ + + + diff --git a/miniprogram/ai-camera/src/pages/my/agreement/privacyAgree.vue b/miniprogram/ai-camera/src/pages/my/agreement/privacyAgree.vue new file mode 100644 index 00000000..397c1318 --- /dev/null +++ b/miniprogram/ai-camera/src/pages/my/agreement/privacyAgree.vue @@ -0,0 +1,65 @@ + + + diff --git a/miniprogram/ai-camera/src/pages/my/changeRecord/changeRecord.ts b/miniprogram/ai-camera/src/pages/my/changeRecord/changeRecord.ts new file mode 100644 index 00000000..70fd5979 --- /dev/null +++ b/miniprogram/ai-camera/src/pages/my/changeRecord/changeRecord.ts @@ -0,0 +1,71 @@ +import { reactive } from "vue"; +import { onShow } from "@dcloudio/uni-app"; + +import { getChangeRecord } from "@/apis/api"; +export default function () { + const token = uni.getStorageSync("token"); + const data: any = reactive({ + pageNum: 1, + pageSize: 10, + totalPage: 0, + recordList: [], + token: token, + loadContent: { + contentdown: "点击加载更多", + contentrefresh: "正在加载...", + contentnomore: "没有更多数据了~", + }, + loadStatus: "more", + }); + + onShow(() => { + data.recordList = []; + getChangeRecordFn(); + }); + + //获取金豆变更记录 + function getChangeRecordFn() { + const param = { + page: data.pageNum, + limit: data.pageSize, + token: data.token, + }; + getChangeRecord(param).then((res: any) => { + if (res.success) { + const dataInfo = res.data; + data.totalPage = dataInfo.totalPage; + data.recordList.push(...dataInfo.list); + changeLoadStatus(); + } else { + changeLoadStatus(); + uni.showToast({ + icon: "none", + title: "数据获取失败！", + }); + } + }); + } + + //改变底部loading状态 + function changeLoadStatus() { + if (data.pageNum == data.totalPage || data.totalPage == 0) { + data.loadStatus = "no-more"; + } else { + data.loadStatus = "more"; + } + } + + //更新页面数据 + function toUpdateList() { + if (data.loadStatus === "more") { + data.loadStatus = "loading"; + data.pageNum += 1; + getChangeRecordFn(); + } + } + + return { + data, + toUpdateList, + }; +} diff --git a/miniprogram/ai-camera/src/pages/my/changeRecord/changeRecord.vue b/miniprogram/ai-camera/src/pages/my/changeRecord/changeRecord.vue new file mode 100644 index 00000000..033293a6 --- /dev/null +++ b/miniprogram/ai-camera/src/pages/my/changeRecord/changeRecord.vue @@ -0,0 +1,90 @@ + + + diff --git a/miniprogram/ai-camera/src/pages/my/my.ts b/miniprogram/ai-camera/src/pages/my/my.ts new file mode 100644 index 00000000..7afbff8f --- /dev/null +++ b/miniprogram/ai-camera/src/pages/my/my.ts @@ -0,0 +1,46 @@ +import { reactive } from "vue"; + +export default function () { + const data: any = reactive({ + startX: 0, // touchstart时的touch.clientX + moveX: 0, // touchmove时的touch.clientX + boxLeft: 85, // move-box的left值 + imgLeftWidth: 85, + imgRightWidth: 85, + }); + + function logout() { + uni.removeStorageSync("token"); + uni.removeStorageSync("id"); + uni.removeStorageSync("imgCache"); + } + + //支付协议 + function toPayAgree() { + uni.navigateTo({ + url: "/pages/my/agreement/payAgree", + }); + } + + //隐私协议 + function toPrivacyAgree() { + uni.navigateTo({ + url: "/pages/my/agreement/privacyAgree", + }); + } + + //金豆变更记录 + function toChangeRecord() { + uni.navigateTo({ + url: "/pages/my/changeRecord/changeRecord", + }); + } + + return { + data, + logout, + toPayAgree, + toPrivacyAgree, + toChangeRecord, + }; +} diff --git a/miniprogram/ai-camera/src/pages/my/my.vue b/miniprogram/ai-camera/src/pages/my/my.vue index cff0fcaa..2fd6e91d 100644 --- a/miniprogram/ai-camera/src/pages/my/my.vue +++ b/miniprogram/ai-camera/src/pages/my/my.vue @@ -1,9 +1,53 @@ - - - \ No newline at end of file + diff --git a/miniprogram/ai-camera/src/pages/works/works.ts b/miniprogram/ai-camera/src/pages/works/works.ts new file mode 100644 index 00000000..fb7b0127 --- /dev/null +++ b/miniprogram/ai-camera/src/pages/works/works.ts @@ -0,0 +1,70 @@ +import { reactive } from "vue"; +import { onShow } from "@dcloudio/uni-app"; +import { getWorkList } from "@/apis/api"; +export default function () { + const token = uni.getStorageSync("token"); + const data: any = reactive({ + pageNum: 1, + pageSize: 10, + totalPage: 0, + imageList: [], + token: token, + loadContent: { + contentdown: "点击加载更多", + contentrefresh: "正在加载...", + contentnomore: "没有更多数据了~", + }, + loadStatus: "more", + }); + + onShow(() => { + data.imageList = []; + getWorkListFn(); + }); + + //获取作品数据 + function getWorkListFn() { + const param = { + page: data.pageNum, + limit: data.pageSize, + token: data.token, + }; + getWorkList(param).then((res: any) => { + if (res.success) { + const dataInfo = res.data; + data.totalPage = dataInfo.totalPage; + data.imageList.push(...dataInfo.list); + changeLoadStatus(); + } else { + changeLoadStatus(); + uni.showToast({ + icon: "none", + title: "数据获取失败！", + }); + } + }); + } + + //更新页面数据 + function toUpdateList() { + if (data.loadStatus === "more") { + data.loadStatus = "loading"; + data.pageNum += 1; + getWorkListFn(); + } + } + + //改变底部loading状态 + function changeLoadStatus() { + if (data.pageNum == data.totalPage || data.totalPage == 0) { + data.loadStatus = "no-more"; + } else { + data.loadStatus = "more"; + } + } + + return { + data, + toUpdateList, + }; +} diff --git a/miniprogram/ai-camera/src/pages/works/works.vue b/miniprogram/ai-camera/src/pages/works/works.vue index bcc0b72c..5d584da8 100644 --- a/miniprogram/ai-camera/src/pages/works/works.vue +++ b/miniprogram/ai-camera/src/pages/works/works.vue @@ -1,9 +1,54 @@ - - \ No newline at end of file + diff --git a/miniprogram/ai-camera/src/static/jd.png b/miniprogram/ai-camera/src/static/jd.png new file mode 100644 index 00000000..3014966a Binary files /dev/null and b/miniprogram/ai-camera/src/static/jd.png differ diff --git a/miniprogram/ai-camera/src/static/user.jpg b/miniprogram/ai-camera/src/static/user.jpg new file mode 100644 index 00000000..31d271c6 Binary files /dev/null and b/miniprogram/ai-camera/src/static/user.jpg differ diff --git a/miniprogram/ai-camera/src/style/common.scss b/miniprogram/ai-camera/src/style/common.scss new file mode 100644 index 00000000..a564d931 --- /dev/null +++ b/miniprogram/ai-camera/src/style/common.scss @@ -0,0 +1,24 @@ +page { + width: 100%; + height: 100%; + background-color: #f5f5f5; + box-sizing: border-box; + font-size: $uni-font-size-base; +} + +.border-radius { + border-radius: 20rpx; + overflow: hidden; +} + +.banner { + width: 100%; + height: 200rpx; +} + +.load-more-container { + width: 100%; + display: flex; + justify-content: center; + align-items: center; +} diff --git a/miniprogram/ai-camera/src/uni.scss b/miniprogram/ai-camera/src/uni.scss index 288300d7..fc1f8259 100644 --- a/miniprogram/ai-camera/src/uni.scss +++ b/miniprogram/ai-camera/src/uni.scss @@ -41,7 +41,7 @@ $uni-border-color: #c8c7cc; /* 文字尺寸 */ $uni-font-size-sm: 12px; $uni-font-size-base: 14px; -$uni-font-size-lg: 16; +$uni-font-size-lg: 16px; /* 图片尺寸 */ $uni-img-size-sm: 20px; @@ -61,7 +61,7 @@ $uni-spacing-row-lg: 15px; /* 垂直间距 */ $uni-spacing-col-sm: 4px; -$uni-spacing-col-base: 8px; +$uni-spacing-col-base: 10px; $uni-spacing-col-lg: 12px; /* 透明度 */ @@ -73,4 +73,4 @@ $uni-font-size-title: 20px; $uni-color-subtitle: #555; // 二级标题颜色 $uni-font-size-subtitle: 18px; $uni-color-paragraph: #3f536e; // 文章段落颜色 -$uni-font-size-paragraph: 15px; \ No newline at end of file +$uni-font-size-paragraph: 15px; diff --git a/miniprogram/ai-camera/src/utils/commonUtil.ts b/miniprogram/ai-camera/src/utils/commonUtil.ts index 7b8f592e..b9ab121e 100644 --- a/miniprogram/ai-camera/src/utils/commonUtil.ts +++ b/miniprogram/ai-camera/src/utils/commonUtil.ts @@ -1,34 +1,76 @@ import { getWxId } from "../apis/api.js"; //登录获取、持久化 id token export function wxLogin() { - uni.login({ - success(res) { - if (res.code) { - getWxId({ - code: res.code, - }).then((wxInfo: any) => { - if (wxInfo.success) { - uni.setStorageSync("token", wxInfo.token); - uni.setStorageSync("id", wxInfo.id); - } else { - uni.showToast({ - icon: "fail", - title: "用户信息获取失败！", - }); - } - }); - } else { + return new Promise((resolve, reject) => { + uni.login({ + success(res) { + if (res.code) { + getWxId({ + code: res.code, + }).then((wxInfo: any) => { + if (wxInfo.success) { + uni.setStorageSync("token", wxInfo.token); + uni.setStorageSync("id", wxInfo.id); + resolve(wxInfo); + } else { + uni.showToast({ + icon: "fail", + title: "用户信息获取失败！", + }); + reject(); + } + }); + } else { + uni.showToast({ + icon: "fail", + title: "登录失败！", + }); + reject(); + } + }, + fail() { uni.showToast({ icon: "fail", title: "登录失败！", }); - } - }, - fail() { - uni.showToast({ - icon: "fail", - title: "登录失败！", - }); - }, + reject(); + }, + }); + }); +} + +//图片本地缓存处理 imgCache [{modelId:1,imgList:[url1,url2,...]},{modelId:2,imgList:[url1,url2,...]},...] +export function saveImgCache(modelId: any, imgList: any) { + Promise.all([ + pro(imgList[0]), + pro(imgList[1]), + pro(imgList[2]), + pro(imgList[3]), + pro(imgList[4]), + ]).then((res) => { + const imgCache = uni.getStorageSync("imgCache"); + if (imgCache && imgCache.length > 0) { + imgCache.push({ modelId: modelId, imgList: res }); + uni.setStorageSync("imgCache", imgCache); + } else { + uni.setStorageSync("imgCache", [{ modelId: modelId, imgList: res }]); + } }); } + +//转存本地路径 +const pro = (url: string) => { + return new Promise((resolve) => { + uni.downloadFile({ + url: url, + success: (res: any) => { + uni.getFileSystemManager().saveFile({ + tempFilePath: res.tempFilePath, + success: (saveRes: any) => { + resolve(saveRes.savedFilePath); + }, + }); + }, + }); + }); +};