|
- <template>
- <view class="page">
- <!-- 毛玻璃 -->
- <view class="glass">
- <image src="../../assets/img/homeImg.jpg" mode="scaleToFill" />
- </view>
- <view class="showImgBox imgContenBox"
- ><image :src="styleData.coverImg"
- /></view>
- <text class="name">{{ styleData.title }}</text>
- <view class="orangeBtn" @click="createing(styleData.id)"
- >开始制作写真
- <view class="free">
- <text>耗金币{{ needCoin }}枚</text>
- </view>
- </view>
- <view class="balance"
- >金币余额: {{ userInfoModulesPinia.myGlod }}
- <image src="../../assets/icon/coin.png" mode="aspectFit" />
- </view>
- </view>
- </template>
-
- <script setup>
- //#region 导入
- import { ref, reactive } from "vue";
- import { onLoad } from "@dcloudio/uni-app";
- import {
- findByIdApi,
- findImageApi,
- createPhotoApi,
- } from "../../api/closeStyle";
- import { findGlodApi } from "../../api/home";
- import { userInfoModules } from "@/store/modules/userInfo";
- const userInfoModulesPinia = userInfoModules();
- //#endregion
-
- //#region 初始化
- const styleId = ref(null);
- const styleData = ref({});
- onLoad((options) => {
- styleId.value = options.id;
- getInfo();
- getMyCoin();
- });
- // 查询我的金币
- async function getMyCoin() {
- const res4 = await findGlodApi();
- if (!res4.data) {
- userInfoModulesPinia.myGlod = 0;
- } else {
- userInfoModulesPinia.myGlod = res4.data.digitalAvatarResidueGlod
- ? res4.data.digitalAvatarResidueGlod
- : 0;
- }
- }
- const needCoin = ref(""); //模版消耗金币
- async function getInfo() {
- try {
- const res = await findByIdApi(styleId.value);
- needCoin.value = res.data.salePrice;
- console.log(res);
- styleData.value = res.data;
- } catch (error) {
- uni.showToast({
- title: "获取数据失败,请重试",
- icon: "none",
- });
- }
- }
-
- //#endregion ---------------------
-
- //#region 生成写真照片
-
- async function createing(id) {
- if (needCoin.value > userInfoModulesPinia.myGlod) {
- uni.showToast({
- title: "金币不足,请充值",
- icon: "none",
- });
- return;
- }
- try {
- uni.showLoading({
- title: "生成中...",
- mask: true,
- });
- const res = await findImageApi();
- let myImg = res.data.image;
- const data = {
- digitalAvatarId: id,
- userImages: JSON.stringify([myImg]),
- title: styleData.value.title,
- };
- const res2 = await createPhotoApi(data);
- console.log(res2);
- uni.reLaunch({
- url: `/pages/createing/index?id=${res2.data.id}`,
- });
- uni.hideLoading();
- } catch (error) {
- console.log(error);
- uni.hideLoading();
- uni.showToast({
- title: "生成失败,请重试",
- icon: "none",
- });
- }
- }
- //#endregion ---------------------
-
- //#region
-
- //#endregion ---------------------
- </script>
-
- <style lang="scss">
- .showImgBox {
- margin-top: 30rpx;
- width: 540rpx;
- height: 720rpx;
- // background-color: #ccc;
- border-radius: 30rpx;
- image {
- width: 100%;
- height: 100%;
- border-radius: 30rpx;
- }
- }
- .name {
- margin-top: 80rpx;
- margin-bottom: 110rpx;
- font-size: 44rpx;
- font-weight: 800;
- }
- .orangeBtn {
- position: relative;
- .free {
- position: absolute;
- top: -18rpx;
- right: -70rpx;
- width: 142rpx;
- height: 50rpx;
- background-color: #000;
- border-radius: 25rpx 25rpx 25rpx 0;
- font-size: 22rpx;
- font-weight: 900;
- line-height: 50rpx;
- text-align: center;
- }
- }
- .balance {
- display: inline-block;
- margin-top: 70rpx;
- font-size: 30rpx;
- font-weight: bold;
- line-height: 33rpx;
- image {
- display: inline-block;
- width: 33rpx;
- height: 33rpx;
- vertical-align: middle;
- }
- }
- </style>
|