parent
98a0236762
commit
e8639604be
@ -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,
|
||||
};
|
||||
}
|
||||
@ -1,20 +1,210 @@
|
||||
<template>
|
||||
<uni-card title="首页"> </uni-card>
|
||||
<button @click="getDataList()">获取数据</button>
|
||||
<view class="home-container">
|
||||
<view class="home-content">
|
||||
<view class="banner"></view>
|
||||
<view class="content">
|
||||
<view class="part-row border-radius"></view>
|
||||
<view class="part-col border-radius"></view>
|
||||
<view class="part-col border-radius"></view>
|
||||
<view class="part-col border-radius"></view>
|
||||
<view class="part-col border-radius"></view>
|
||||
<view class="part-row large border-radius">
|
||||
<view class="title">其他应用</view>
|
||||
<view class="other-content">
|
||||
<view class="app-item">
|
||||
<view class="app-item-img border-radius"></view>
|
||||
<view class="app-item-title">AI写作</view>
|
||||
</view>
|
||||
<view class="app-item">
|
||||
<view class="app-item-img border-radius"></view>
|
||||
<view class="app-item-title">AI音乐</view>
|
||||
</view>
|
||||
<view class="app-item">
|
||||
<view class="app-item-img border-radius"></view>
|
||||
<view class="app-item-title">AI视频</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="part-row large border-radius">
|
||||
<view class="title">
|
||||
热门推荐
|
||||
<view class="change-list" @click="changeList"
|
||||
>换一批<uni-icons type="refreshempty"
|
||||
/></view>
|
||||
</view>
|
||||
<view class="hot-list">
|
||||
<view
|
||||
class="hot-model border-radius"
|
||||
v-for="item in data.hotList"
|
||||
@click="changeModelId(item.model_id)"
|
||||
:key="item.model_id"
|
||||
>{{ item.model_name }}</view
|
||||
>
|
||||
</view>
|
||||
<view class="img-content">
|
||||
<view class="first-img border-radius" @click="toMake(0)">
|
||||
<image
|
||||
style="width: 100%; height: 100%"
|
||||
:src="data.imgList[0]"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
</view>
|
||||
<view class="other-imgs">
|
||||
<view class="other-img border-radius" @click="toMake(1)"
|
||||
><image
|
||||
style="width: 100%; height: 100%"
|
||||
lazy-load
|
||||
:src="data.imgList[1]"
|
||||
mode="scaleToFill"
|
||||
/></view>
|
||||
<view class="other-img border-radius" @click="toMake(2)"
|
||||
><image
|
||||
style="width: 100%; height: 100%"
|
||||
lazy-load
|
||||
:src="data.imgList[2]"
|
||||
mode="scaleToFill"
|
||||
/></view>
|
||||
<view class="other-img border-radius" @click="toMake(3)"
|
||||
><image
|
||||
style="width: 100%; height: 100%"
|
||||
lazy-load
|
||||
:src="data.imgList[3]"
|
||||
mode="scaleToFill"
|
||||
/></view>
|
||||
<view class="other-img border-radius" @click="toMake(4)"
|
||||
><image
|
||||
style="width: 100%; height: 100%"
|
||||
lazy-load
|
||||
:src="data.imgList[4]"
|
||||
mode="scaleToFill"
|
||||
/></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onLoad() {
|
||||
console.log("主页");
|
||||
},
|
||||
methods: {
|
||||
getDataList() {
|
||||
const token = uni.getStorageSync("token");
|
||||
console.log("token:", token);
|
||||
},
|
||||
},
|
||||
};
|
||||
<script setup lang="ts">
|
||||
import getData from "./home";
|
||||
const { data, changeList, changeModelId, toMake } = getData();
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
<style scoped lang="scss">
|
||||
.home-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #707070;
|
||||
position: relative;
|
||||
.home-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow-y: scroll;
|
||||
.content {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: 0 $uni-spacing-col-base;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
.part-row {
|
||||
width: 100%;
|
||||
height: 220rpx;
|
||||
background-color: white;
|
||||
margin-bottom: $uni-spacing-col-base;
|
||||
}
|
||||
.large {
|
||||
height: auto;
|
||||
min-height: 280rpx;
|
||||
.title {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 80rpx;
|
||||
padding: 0 $uni-spacing-row-base;
|
||||
margin-bottom: $uni-spacing-col-base;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
.change-list {
|
||||
font-size: $uni-font-size-sm;
|
||||
color: $uni-text-color-grey;
|
||||
}
|
||||
}
|
||||
.hot-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-evenly;
|
||||
padding: 0 $uni-spacing-col-base;
|
||||
.hot-model {
|
||||
background-color: $uni-border-color;
|
||||
padding: 10rpx 30rpx;
|
||||
font-size: $uni-font-size-sm;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: $uni-spacing-col-base;
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
.img-content {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
padding: $uni-spacing-row-base;
|
||||
box-sizing: border-box;
|
||||
justify-content: space-between;
|
||||
.first-img {
|
||||
width: calc(50% - 10rpx);
|
||||
height: 500rpx;
|
||||
border: 1px solid $uni-border-color;
|
||||
}
|
||||
.other-imgs {
|
||||
width: calc(50% - 10rpx);
|
||||
height: 500rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-content: space-between;
|
||||
.other-img {
|
||||
width: calc(50% - 10rpx);
|
||||
height: 240rpx;
|
||||
border: 1px solid $uni-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.other-content {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
.app-item {
|
||||
width: 100rpx;
|
||||
height: 150rpx;
|
||||
.app-item-img {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border: 1px solid $uni-border-color;
|
||||
}
|
||||
.app-item-title {
|
||||
width: 100rpx;
|
||||
height: 50rpx;
|
||||
line-height: 50rpx;
|
||||
text-align: center;
|
||||
font-size: $uni-font-size-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.part-col {
|
||||
width: calc(50% - 10rpx);
|
||||
height: 260rpx;
|
||||
background-color: white;
|
||||
margin-bottom: $uni-spacing-col-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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,
|
||||
};
|
||||
}
|
||||
@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<view class="image-compare">
|
||||
<view
|
||||
class="image-container-bottom"
|
||||
:style="{ width: data.boxLeft + 'px' }"
|
||||
>
|
||||
<image class="repair-img" src="../../static/logo.png" />
|
||||
</view>
|
||||
<view class="image-container-top">
|
||||
<image class="repair-img" src="../../static/user.jpg" />
|
||||
</view>
|
||||
<view
|
||||
class="drag-container move-box"
|
||||
@touchmove="clickMove"
|
||||
:style="{ left: data.boxLeft + 'px' }"
|
||||
>
|
||||
<view class="drag-line">
|
||||
<image
|
||||
style="width: 100%; height: 100%"
|
||||
class="repair-img"
|
||||
src="../../static/logo.png"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import getData from "./convert";
|
||||
const { data, clickMove } = getData();
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.image-compare {
|
||||
width: 170px;
|
||||
height: 250px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
.image-container-bottom {
|
||||
width: 85px;
|
||||
height: 250px;
|
||||
z-index: 999;
|
||||
overflow: hidden;
|
||||
.repair-img {
|
||||
width: 170px;
|
||||
height: 250px;
|
||||
}
|
||||
}
|
||||
.image-container-top {
|
||||
width: 170px;
|
||||
height: 250px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
.repair-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.drag-container {
|
||||
width: 2px;
|
||||
height: 250px;
|
||||
background-color: red;
|
||||
position: absolute;
|
||||
.drag-line {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -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,
|
||||
};
|
||||
}
|
||||
@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<view class="make-container">
|
||||
<view class="content">
|
||||
<view class="model-content border-radius">
|
||||
<view class="model-image border-radius">
|
||||
<image :src="data.modelImg" style="width: 100%; height: 100%"></image>
|
||||
</view>
|
||||
<view class="model-info">
|
||||
<view class="model-title">{{ data.modelTitle }}</view>
|
||||
<view class="model-tips">
|
||||
<uni-icons
|
||||
type="info-filled"
|
||||
class="tips-icon"
|
||||
color=""
|
||||
size="20"
|
||||
/>
|
||||
<text>注意事项</text>
|
||||
</view>
|
||||
<view class="tips-content">
|
||||
<view class="memo-tips" v-for="memo in data.memoList" :key="memo">{{
|
||||
memo
|
||||
}}</view>
|
||||
</view>
|
||||
<view class="bot-right">
|
||||
<text>{{ "消耗：" + data.starNum }}</text>
|
||||
<image
|
||||
style="width: 28rpx; height: 28rpx"
|
||||
src="../../static/jd.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="part-title">
|
||||
<view class="flag"></view>
|
||||
上传照片
|
||||
</view>
|
||||
<button class="make-btn-style">
|
||||
<uni-icons type="plusempty" color="" size="24" />
|
||||
</button>
|
||||
<view class="part-title">
|
||||
<view class="flag"></view>
|
||||
历史相册
|
||||
</view>
|
||||
<view class="img-history">
|
||||
<image
|
||||
v-for="img in data.imgHistoryList"
|
||||
:key="img.source_img_url"
|
||||
:src="img.source_img_url"
|
||||
style="width: 160rpx; height: 160rpx"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<button @click="toMake" class="make-btn-style">立即制作</button>
|
||||
</view>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import getData from "./make";
|
||||
const { data, toMake } = getData();
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.make-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
padding: $uni-spacing-col-base;
|
||||
box-sizing: border-box;
|
||||
.content {
|
||||
width: 100%;
|
||||
height: calc(100% - 112rpx);
|
||||
.model-content {
|
||||
width: 100%;
|
||||
height: 550rpx;
|
||||
background-color: white;
|
||||
padding: $uni-spacing-col-base;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
margin-bottom: $uni-spacing-col-base;
|
||||
.model-image {
|
||||
width: 340rpx;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.model-info {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
padding-left: $uni-spacing-col-base;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
.model-title {
|
||||
width: 100%;
|
||||
font-size: $uni-font-size-lg;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.model-tips {
|
||||
width: 100%;
|
||||
height: 50rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $uni-color-warning;
|
||||
margin: 10rpx 0;
|
||||
.tips-icon {
|
||||
margin-left: -5rpx;
|
||||
}
|
||||
text {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.tips-content {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
font-size: $uni-font-size-base;
|
||||
color: $uni-text-color-grey;
|
||||
.memo-tips {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
}
|
||||
.bot-right {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
color: #ffd100;
|
||||
font-size: $uni-font-size-base;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
.part-title {
|
||||
width: 100%;
|
||||
height: 50rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: $uni-font-size-lg;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10rpx;
|
||||
.flag {
|
||||
width: 10rpx;
|
||||
height: 35rpx;
|
||||
border-radius: 10rpx;
|
||||
background-color: $uni-color-primary;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
.img-history {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
background-color: white;
|
||||
padding: $uni-spacing-col-base;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
.make-btn-style {
|
||||
width: 100%;
|
||||
height: 92rpx;
|
||||
line-height: 92rpx;
|
||||
margin-bottom: $uni-spacing-col-base;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -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,
|
||||
};
|
||||
}
|
||||
@ -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,
|
||||
};
|
||||
}
|
||||
@ -1,9 +1,53 @@
|
||||
<template>
|
||||
我的
|
||||
<view class="my-container">
|
||||
<view class="banner"></view>
|
||||
<view class="item-list">
|
||||
<view class="row-item border-radius" @click="toChangeRecord">
|
||||
<text>金豆变更记录</text>
|
||||
<uni-icons type="right" color="" size="16" />
|
||||
</view>
|
||||
<view class="row-item border-radius" @click="toPayAgree">
|
||||
<text>支付协议</text>
|
||||
<uni-icons type="right" color="" size="16" />
|
||||
</view>
|
||||
<view class="row-item border-radius" @click="toPrivacyAgree">
|
||||
<text>隐私协议</text>
|
||||
<uni-icons type="right" color="" size="16" />
|
||||
</view>
|
||||
<view class="row-item border-radius">
|
||||
<text>退出</text>
|
||||
<uni-icons type="right" color="" size="16" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup lang="ts">
|
||||
import getData from "./my";
|
||||
const { data, logout, toPayAgree, toPrivacyAgree, toChangeRecord } = getData();
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
.my-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
font-size: $uni-font-size-base;
|
||||
.item-list {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: 0 $uni-spacing-col-base;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.row-item {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
background-color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: $uni-spacing-col-lg $uni-spacing-col-base;
|
||||
box-sizing: border-box;
|
||||
margin-top: $uni-spacing-col-lg;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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,
|
||||
};
|
||||
}
|
||||
@ -1,9 +1,54 @@
|
||||
<template>
|
||||
作品
|
||||
<view class="works-container">
|
||||
<scroll-view
|
||||
scroll-y
|
||||
enable-flex
|
||||
class="works-scroll-container"
|
||||
@scrolltolower="toUpdateList"
|
||||
>
|
||||
<view
|
||||
class="work-image border-radius"
|
||||
v-for="item in data.imageList"
|
||||
:key="item.id"
|
||||
>
|
||||
</view>
|
||||
<uni-load-more
|
||||
class="load-more-container"
|
||||
:status="data.loadStatus"
|
||||
:contentText="data.loadContent"
|
||||
@clickLoadMore="toUpdateList"
|
||||
/>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup lang="ts">
|
||||
import getData from "./works";
|
||||
const { data, toUpdateList } = getData();
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.works-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.works-scroll-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
padding: $uni-spacing-col-base;
|
||||
box-sizing: border-box;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
.work-image {
|
||||
width: calc(50% - 10rpx);
|
||||
height: 500rpx;
|
||||
border: 1px solid $uni-border-color;
|
||||
margin-bottom: $uni-spacing-col-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
After Width: | Height: | Size: 569 B |
|
After Width: | Height: | Size: 39 KiB |
@ -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;
|
||||
}
|
||||
@ -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);
|
||||
},
|
||||
});
|
||||
},
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
Loading…
Reference in new issue