话不多说直接上代码吧

使用的vue3的语法糖进行完成的

因为我是请求的后端接口

<template><view class="load"><view class="selectPart"><Select></Select></view><view class="PhotoPart"><image :src="image" mode=""></image></view><view class="btnPart"><button class="btnOne"><image src="../../static/images/mo.png" mode=""></image><text>更像我</text></button><button class="btnTwo" @click="downloadPhoto">下载 ￥4.8</button></view></view>
</template><script setup>import { ref, watch, computed, onMounted } from 'vue'import { onLoad } from '@dcloudio/uni-app'import Select from '../components/select.vue'import { getCreatePhotoList } from '../../api/index.ts'// 图片IDconst photoID = ref(null)// 图片const image = ref('')//获取上一个页面路由传递的参数onLoad((option) => {photoID.value = Number(option.photoID)getImageList()})// 获取生成的照片const getImageList = () => {const data = {id: photoID.value}getCreatePhotoList(data).then((res) => {image.value = res.data.items[0].file_path})}// 下载图片按钮const downloadPhoto = () => {uni.downloadFile({url: image.value,success(res) {if (res.statusCode === 200) {// 下载成功，保存到相册uni.saveImageToPhotosAlbum({filePath: res.tempFilePath,success() {uni.showToast({title: '保存成功',icon: 'success'});},fail() {uni.showToast({title: '保存失败',icon: 'none'});}});} else {uni.showToast({title: '下载失败',icon: 'none'});}},fail() {uni.showToast({title: '下载失败',icon: 'none'});}});};
</script>
//样式的话就不给大家啦，如果大家需要的话那就在评论区留言吧，随时恭候