generated from duanshuwen/webapp-vue-frontend
feat: 图片保存的
This commit is contained in:
@@ -1,42 +1,24 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<transition name="fade" mode="out-in">
|
||||
<img
|
||||
:key="activeScene.sceneName"
|
||||
:src="activeScene.sceneCoverUrl"
|
||||
class="bg-image"
|
||||
/>
|
||||
<img :key="activeScene.sceneName" :src="activeScene.sceneCoverUrl" class="bg-image" />
|
||||
</transition>
|
||||
|
||||
<div class="gradient-overlay"></div>
|
||||
|
||||
<TopNavBar
|
||||
title=""
|
||||
color="white"
|
||||
:showHistory="true"
|
||||
@back="onBack"
|
||||
@history="onHistory"
|
||||
/>
|
||||
<TopNavBar title="" color="white" :showHistory="true" @back="onBack" @history="onHistory" />
|
||||
|
||||
<div class="content-layer">
|
||||
<div class="style-tabs">
|
||||
<div
|
||||
v-for="tab in styles"
|
||||
:key="tab.id"
|
||||
:class="['tab-item', { active: activeStyleId === tab.id }]"
|
||||
@click="handleStyleChange(tab.id)"
|
||||
>
|
||||
<div v-for="tab in styles" :key="tab.id" :class="['tab-item', { active: activeStyleId === tab.id }]"
|
||||
@click="handleStyleChange(tab.id)">
|
||||
{{ tab.name }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="scene-list-container">
|
||||
<div
|
||||
v-for="(item, index) in currentScenes"
|
||||
:key="`${activeStyleId}-${index}`"
|
||||
:class="['scene-card', { active: activeSceneIndex === index }]"
|
||||
@click="activeSceneIndex = index"
|
||||
>
|
||||
<div v-for="(item, index) in currentScenes" :key="`${activeStyleId}-${index}`"
|
||||
:class="['scene-card', { active: activeSceneIndex === index }]" @click="activeSceneIndex = index">
|
||||
<img :src="item.sceneCoverUrl" class="thumb-img" />
|
||||
<div class="scene-name">{{ item.sceneName }}</div>
|
||||
</div>
|
||||
@@ -53,27 +35,13 @@
|
||||
</div>
|
||||
|
||||
<!-- 协议提示 -->
|
||||
<van-popup
|
||||
v-model:show="showAgree"
|
||||
round
|
||||
:close-on-click-overlay="false"
|
||||
:style="{ padding: '30px 24px', width: '80%' }"
|
||||
>
|
||||
<AgreementTip
|
||||
@cancel="cancelAgree"
|
||||
@confirm="onAgree"
|
||||
@view-rule="onViewRule"
|
||||
/>
|
||||
<van-popup v-model:show="showAgree" round :close-on-click-overlay="false"
|
||||
:style="{ padding: '30px 24px', width: '80%' }">
|
||||
<AgreementTip @cancel="cancelAgree" @confirm="onAgree" @view-rule="onViewRule" />
|
||||
</van-popup>
|
||||
|
||||
<!-- 选图说明 -->
|
||||
<van-popup
|
||||
v-model:show="showGuide"
|
||||
round
|
||||
position="bottom"
|
||||
closeable
|
||||
close-icon-position="top-left"
|
||||
>
|
||||
<van-popup v-model:show="showGuide" round position="bottom" closeable close-icon-position="top-left">
|
||||
<PhotoGuide @start="onStartSelect" />
|
||||
</van-popup>
|
||||
</template>
|
||||
@@ -89,7 +57,7 @@ import PhotoGuide from '../components/PhotoGuide.vue'
|
||||
// @ts-ignore
|
||||
import AgreementTip from '../components/AgreementTip.vue'
|
||||
// @ts-ignore
|
||||
import {getAigcGenerationTimes, getAigcSceneList, AigcSceneListItem, AigcSceneStyleItem } from '@api'
|
||||
import { getAigcGenerationTimes, getAigcSceneList, AigcSceneListItem, AigcSceneStyleItem } from '@api'
|
||||
// @ts-ignore
|
||||
import { createGeneratorPhotoTask } from '@api'
|
||||
import { showFailToast, showSuccessToast, showToast } from 'vant'
|
||||
@@ -164,14 +132,6 @@ const onStartSelect = () => {
|
||||
|
||||
// 调用上传
|
||||
const uploadImage = () => {
|
||||
// 测试保存图片逻辑
|
||||
// if (window.wx && wx.miniProgram) {
|
||||
// wx.miniProgram.navigateTo({
|
||||
// url: `/pages-bridge/SaveImage?imageUrl=${encodeURIComponent(activeScene.value.sceneCoverUrl)}`
|
||||
// });
|
||||
// }
|
||||
// return
|
||||
|
||||
/// 调用小程序上传接口
|
||||
const wx = (window as any).wx
|
||||
if (wx && wx.miniProgram) {
|
||||
@@ -305,13 +265,11 @@ onMounted(() => {
|
||||
inset: 0;
|
||||
height: 60%;
|
||||
z-index: 1;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(0, 0, 0, 0) 0%,
|
||||
rgba(0, 0, 0, 0.1) 70%,
|
||||
rgba(0, 0, 0, 0.7) 85%,
|
||||
#000 100%
|
||||
);
|
||||
background: linear-gradient(to bottom,
|
||||
rgba(0, 0, 0, 0) 0%,
|
||||
rgba(0, 0, 0, 0.1) 70%,
|
||||
rgba(0, 0, 0, 0.7) 85%,
|
||||
#000 100%);
|
||||
}
|
||||
|
||||
/* 内容布局层 */
|
||||
@@ -455,7 +413,7 @@ onMounted(() => {
|
||||
font-size: 13px;
|
||||
color: #bbb;
|
||||
padding: 12px;
|
||||
margin: 0 102px 15px;
|
||||
margin: 0 90px 16px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 999px 999px 999px 999px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
|
||||
@@ -80,7 +80,8 @@ const saveImage = () => {
|
||||
return;
|
||||
}
|
||||
|
||||
if (window.wx && wx.miniProgram) {
|
||||
const wx = (window as any).wx
|
||||
if (wx && wx.miniProgram) {
|
||||
wx.miniProgram.navigateTo({
|
||||
url: `/pages-bridge/SaveImage?imageUrl=${encodeURIComponent(imageUrl.value)}`
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user