|
| xqd
@@ -1,1443 +0,0 @@
|
|
|
-<template>
|
|
|
- <view class="template-details">
|
|
|
- <block v-if="showdrawing">
|
|
|
- <u-notice-bar v-if="drawingtitle=='正在努力绘制中...'||drawingtitle=='图片正在渲染中...'" :text="noticebar" step
|
|
|
- bgColor="#000"></u-notice-bar>
|
|
|
- <view class="lazy-loading tn-flex justify-center align-center flex-wrap">
|
|
|
- <view class="preloader_1">
|
|
|
- <view></view>
|
|
|
- <view></view>
|
|
|
- <view></view>
|
|
|
- <view></view>
|
|
|
- <view></view>
|
|
|
- </view>
|
|
|
- <view class="drawing">
|
|
|
- {{drawingtitle}}
|
|
|
- </view>
|
|
|
- <view v-if="showprogress" class="progress">
|
|
|
- <u-line-progress :percentage="percentage" activeColor="#9b59b6" height="18"></u-line-progress>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </block>
|
|
|
-
|
|
|
- <swiper class="card-swiper" :circular="false" :autoplay="true" duration="500" interval="12000"
|
|
|
- @change="cardSwiper">
|
|
|
- <swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
|
|
|
- <view class="lazy-load" :style="{height: windowHeight+'px'}">
|
|
|
- <u--image @load="previewload" @error="previewerror" width="100%" height="100%" :src="item.url"
|
|
|
- mode="widthFix">
|
|
|
- <view slot="error" style="font-size: 32rpx;text-align: center;">
|
|
|
- 图片加载失败
|
|
|
- </view>
|
|
|
- </u--image>
|
|
|
- </view>
|
|
|
- </swiper-item>
|
|
|
- </swiper>
|
|
|
- <view class="indication">
|
|
|
- <block v-for="(item,index) in swiperList" :key="index">
|
|
|
- <view v-if="swiperList.length>1" class="spot" :class="cardCur==index?'active':''"></view>
|
|
|
- </block>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="tabbar footerfixed dd-glass tn-color-white" style="border-radius: 100rpx;">
|
|
|
- <view class="action" @click="getisback">
|
|
|
- <view class="bar-icon">
|
|
|
- <view class="tn-icon-left-circle">
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="">立即返回</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="action" @click="getdownload(cardCur)">
|
|
|
- <view class="bar-icon">
|
|
|
- <view class="tn-icon-download">
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="">下载/分享</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="action" @click="preViewImg_ys(1)" v-if="engin=='rh'">
|
|
|
- <view class="bar-icon">
|
|
|
- <view class="tn-icon-image">
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="">模板</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="action" @click="preViewImg_ys(2)" v-if="engin=='rh'">
|
|
|
- <view class="bar-icon">
|
|
|
- <view class="tn-icon-image">
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="">照片</view>
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
- <view class="action" @click="parameters" v-if="engin!='rh'">
|
|
|
-
|
|
|
- <view class="bar-icon">
|
|
|
- <view class="tn-icon-creative">
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="">绘画参数</view>
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
- <view class="action" @click="preViewImg(1)" v-if="parameter.refImg&&$Route.query.urls">
|
|
|
- <view class="bar-icon">
|
|
|
- <view class="tn-icon-image">
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="">参考图</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="action" @click="preViewImg(2)" v-if="form.init_image
|
|
|
-">
|
|
|
- <view class="bar-icon">
|
|
|
- <view class="tn-icon-image">
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="">参考图</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view v-if="show2" class="action"
|
|
|
- @click="tn(engin!='rh'?'/pages/painting/draw?prompt='+parameter.promptSame+'&engine='+engin+'&model_name='+parameter.model_name+'&refImg='
|
|
|
- +parameter.refImg:'/pages/painting/draw?rh_modalId='+(parameter.templateId?parameter.templateId:-1)+'&rh_modalurl='+parameter.source_image_url)">
|
|
|
- <view class="tn-flex-direction-column tn-flex-row-center tn-flex-col-center tn-button--clear-style">
|
|
|
- <view class="bar-icon">
|
|
|
- <view class="tn-icon-write">
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="">创作相似</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view v-else class="action" @click="setOpen">
|
|
|
- <view class="tn-flex-direction-column tn-flex-row-center tn-flex-col-center tn-button--clear-style">
|
|
|
- <view class="bar-icon">
|
|
|
- <view class="tn-icon-up-circle">
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="">{{showopen?'已公开':'公开作品'}}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
- <tn-landscape :show="show1" @close="closeLandscape" closePosition="bottom" :closeSize="60">
|
|
|
- <view class="tn-color-white" style="width: 100vw;">
|
|
|
-
|
|
|
- <view class="" style="margin: 120rpx 60rpx;">
|
|
|
- <view class="tn-flex tn-flex-row-between tn-flex-col-between tn-margin-top-xl tn-text-justify">
|
|
|
- <text class="">AI绘画：{{parameter.engine == 'sd'?'StableDiffusion绘图':'MidJourney绘图'}}</text>
|
|
|
- </view>
|
|
|
- <view v-if="parameter.prompt&&$Route.query.urls"
|
|
|
- class="tn-flex tn-flex-row-between tn-flex-col-between tn-margin-top-xl tn-text-justify">
|
|
|
- <text class="">描述词：{{parameter.prompt}}</text>
|
|
|
- </view>
|
|
|
- <view v-if="form.keywords"
|
|
|
- class="tn-flex tn-flex-row-between tn-flex-col-between tn-margin-top-xl tn-text-justify">
|
|
|
- <text class="">描述词：{{form.keywords}}</text>
|
|
|
- </view>
|
|
|
- <view v-if="parameter.model_name"
|
|
|
- class="tn-flex tn-flex-row-between tn-flex-col-between tn-margin-top-xl tn-text-justify">
|
|
|
- <text class="">模型：{{form.name?form.name:parameter.model_name}}</text>
|
|
|
- </view>
|
|
|
- <view v-if="parameter.width"
|
|
|
- class="tn-flex tn-flex-row-between tn-flex-col-between tn-margin-top-xl tn-text-justify">
|
|
|
- <text class="">分辨率：{{parameter.width}}x{{parameter.height}}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </tn-landscape>
|
|
|
- <u-popup :show="show" @close="close" @open="open" mode="center">
|
|
|
- <view
|
|
|
- style="background: rgba(0, 0, 0, 0);width: 300rpx;height: 300rpx;display: flex;align-items: center;flex-direction: column;justify-content: center;color:#207CF7;">
|
|
|
- <l-circularProgress :isBgShow="true" :lineWidth="10" boxWidth="100" boxHeight="100"
|
|
|
- progressColor="#207CF7" fontColor="#207CF7" gradualColor="#207CF7"
|
|
|
- :percent="progress"></l-circularProgress>
|
|
|
- <view class="">
|
|
|
- 图片下载中...
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </u-popup>
|
|
|
-
|
|
|
- <wike-painter style="height:1px;margin-top: -9999999px;" :board="posterObj" @done="posterSuccess"
|
|
|
- ref="painter"></wike-painter>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- import {
|
|
|
- mapMutations,
|
|
|
- mapActions,
|
|
|
- mapState,
|
|
|
- mapGetters
|
|
|
- } from 'vuex';
|
|
|
- let timingr;
|
|
|
- let asynchronous;
|
|
|
- // 判断是否为微信环境
|
|
|
- // const isWechat = () => {
|
|
|
- // return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
|
|
|
- // }
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- tobheight: 45,
|
|
|
- showdrawing: true,
|
|
|
- showprogress: true,
|
|
|
- drawingtitle: '正在努力绘制中...',
|
|
|
- percentage: 0,
|
|
|
- show1: false,
|
|
|
- show2: true,
|
|
|
- cardCur: 0,
|
|
|
- swiperList: [],
|
|
|
- form: {},
|
|
|
- parameter: {},
|
|
|
- noticebar: ['精美图片需要时间打磨，预计20-30秒左右出图',
|
|
|
- '图片生成中请不要退出此页面，否则可能会无法生成'
|
|
|
- // '长时间未出图？可稍后在 我的-绘画记录 里查看'
|
|
|
- ],
|
|
|
- parameterid: 0,
|
|
|
- showopen: false,
|
|
|
- failnum: 0,
|
|
|
- windowHeight: 0,
|
|
|
- engin: '',
|
|
|
- progress: 0,
|
|
|
- isDowload: false,
|
|
|
- show: false,
|
|
|
- sd_keywords: '',
|
|
|
-
|
|
|
-
|
|
|
- // 生成海报data
|
|
|
- platform: this.$platform.get(),
|
|
|
-
|
|
|
- qrcode: '',
|
|
|
- spmplatform: 0,
|
|
|
- posterObj: {},
|
|
|
- info: {
|
|
|
- // poster_bg_img_path:"",
|
|
|
-
|
|
|
- poster_bg_width: 347,
|
|
|
- poster_bg_height: 574,
|
|
|
-
|
|
|
- poster_qrcode_x: 278,
|
|
|
- poster_qrcode_y: 495,
|
|
|
- poster_qrcode_width: 52,
|
|
|
- poster_qrcode_height: 52,
|
|
|
- },
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 生成海报需要的数据由此开始
|
|
|
- computed: {
|
|
|
- ...mapGetters(['appInfo', 'homeTemplate', 'isLogin', 'userInfo', 'userData'])
|
|
|
- },
|
|
|
- onShow() {
|
|
|
- console.log('this.userInfo-----------------', this.option, this.userInfo);
|
|
|
- },
|
|
|
- onLoad(o) {
|
|
|
- this.spmplatform = ['H5', 'wxOfficialAccount', 'wxMiniProgram', 'App'].indexOf(this.platform) + 1;
|
|
|
- // this.commonqrcodePath()
|
|
|
-
|
|
|
- var that = this;
|
|
|
- this.windowHeight = uni.$u.sys().windowHeight - 60
|
|
|
- this.engin = that.$Route.query.from
|
|
|
- if (that.$Route.query.urls) {
|
|
|
- this.showprogress = false
|
|
|
- this.drawingtitle = '图片正在加载中...'
|
|
|
- that.gallerydetail(that.$Route.query.urls)
|
|
|
- }
|
|
|
- if (that.$Route.query.form) {
|
|
|
- this.form = that.$Route.query.form
|
|
|
- console.log('生成绘画的参数：', this.form);
|
|
|
- this.parameter.refImg = this.form.refer_img
|
|
|
- this.parameter.prompt = this.form.init_image + this.form.prompt
|
|
|
- this.parameter.model_name = this.form.model_id
|
|
|
- this.parameter.width = this.form.width
|
|
|
- this.parameter.height = this.form.height
|
|
|
- this.parameter.engine = 'sd'
|
|
|
- this.show2 = false
|
|
|
- this.sd_keywords = this.form.keywords
|
|
|
- this.aiPlay();
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- preViewImg_ys(type) {
|
|
|
- if (type == 1) {
|
|
|
- uni.previewImage({
|
|
|
- urls: [this.parameter.source_image_url],
|
|
|
- longPressActions: {
|
|
|
- itemList: ['发送给朋友', '保存图片', '收藏'],
|
|
|
- success: function(data) {},
|
|
|
- fail: function(err) {
|
|
|
- console.log(err.errMsg);
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- } else {
|
|
|
- uni.previewImage({
|
|
|
- urls: [this.parameter.target_image_url],
|
|
|
- longPressActions: {
|
|
|
- itemList: ['发送给朋友', '保存图片', '收藏'],
|
|
|
- success: function(data) {},
|
|
|
- fail: function(err) {
|
|
|
- console.log(err.errMsg);
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- downloadPic(e) {
|
|
|
- return new Promise((resolve, reject) => {
|
|
|
- uni.request({
|
|
|
- url: e,
|
|
|
- method: 'GET',
|
|
|
- responseType: 'arraybuffer',
|
|
|
- success: ress => {
|
|
|
- let base64 = uni.arrayBufferToBase64(ress.data);
|
|
|
- base64 = 'data:image/jpeg;base64,' + base64
|
|
|
- resolve(base64);
|
|
|
- },
|
|
|
- fail: (e) => {
|
|
|
- resolve('fail');
|
|
|
- }
|
|
|
- })
|
|
|
- });
|
|
|
- },
|
|
|
- commonqrcodePath() {
|
|
|
- let spm = this.userInfo.id + '.1.0.' + this.spmplatform + '.1';
|
|
|
- // console.log(spm);
|
|
|
- this.$http('common.qrcodePath', {
|
|
|
- spm: spm
|
|
|
- }).then(res => {
|
|
|
- if (res.code == 0) {
|
|
|
- this.qrcode = res.data;
|
|
|
- this.createPoster()
|
|
|
- console.log('二维码需要包含的url信息=============', this.qrcode);
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- async createPoster(e) {
|
|
|
- let that = this;
|
|
|
-
|
|
|
- let avatarUrl = '';
|
|
|
- let mainUrl = '';
|
|
|
- uni.showLoading({
|
|
|
- title: '海报渲染中'
|
|
|
- });
|
|
|
-
|
|
|
- console.log("that.swiperList[0].url,that.userInfo.avatar", that.userInfo, that.swiperList[0].url, that
|
|
|
- .userInfo.avatar);
|
|
|
-
|
|
|
-
|
|
|
- if (that.swiperList[0].url.indexOf("https") < 0) {
|
|
|
- mainUrl = await that.downloadPic(that.swiperList[0].url.replace("http:", "https:"));
|
|
|
- } else {
|
|
|
- mainUrl = await that.downloadPic(that.swiperList[0].url);
|
|
|
- }
|
|
|
- if (mainUrl == 'fail') {
|
|
|
- uni.hideLoading();
|
|
|
- uni.showToast({
|
|
|
- title: '生成失败',
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
- return;
|
|
|
- }
|
|
|
- that.userInfo.avatar =
|
|
|
- "https://face.cdn.zhishuyun.com/attachments/1133012400174534792/1204009950465101866/0d47db66-1faf-42df-a732-22cf18697a65_ins.png?ex=65d32ca5&is=65c0b7a5&hm=7219a0f250453314cfbf9eefaf2e927ba8d6adea944774b3fe32e67c0787a877&"
|
|
|
- if (that.userInfo.avatar) {
|
|
|
- if (that.userInfo.avatar.indexOf("https") < 0) {
|
|
|
- avatarUrl = await that.downloadPic(that.userInfo.avatar.replace("http:", "https:"));
|
|
|
- } else {
|
|
|
- avatarUrl = await that.downloadPic(that.userInfo.avatar);
|
|
|
- }
|
|
|
- if (avatarUrl == 'fail') {
|
|
|
- uni.hideLoading();
|
|
|
- uni.showToast({
|
|
|
- title: '生成失败',
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
- return;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- let proportionally = this.info.poster_bg_width / uni.$u.sys().windowWidth;
|
|
|
- (this.posterObj = {
|
|
|
- width: (this.info.poster_bg_width / proportionally) + 'px',
|
|
|
- height: (this.info.poster_bg_height / proportionally) + 'px',
|
|
|
- background: 'rgba(0,0,0,0)',
|
|
|
- borderRadius: '16rpx',
|
|
|
- views: [
|
|
|
- // 背景图
|
|
|
- {
|
|
|
- src: '/static/shareBg.png',
|
|
|
- type: "image",
|
|
|
- css: {
|
|
|
- width: (this.info.poster_bg_width / proportionally) + 'px',
|
|
|
- height: (this.info.poster_bg_height / proportionally) + 'px',
|
|
|
- }
|
|
|
- },
|
|
|
- // 主图
|
|
|
- {
|
|
|
- type: 'view',
|
|
|
- css: {
|
|
|
- position: 'absolute',
|
|
|
- left: '24rpx',
|
|
|
- top: '24rpx',
|
|
|
- },
|
|
|
- views: [{
|
|
|
- src: mainUrl,
|
|
|
- type: "image",
|
|
|
- css: {
|
|
|
- width: 705 + 'rpx',
|
|
|
- height: 936 + 'rpx',
|
|
|
- borderRadius: '28rpx',
|
|
|
- }
|
|
|
- }, ],
|
|
|
- },
|
|
|
-
|
|
|
-
|
|
|
- // 头像
|
|
|
- {
|
|
|
- type: 'view',
|
|
|
- css: {
|
|
|
- display: 'flex',
|
|
|
- position: 'absolute',
|
|
|
- left: '24rpx',
|
|
|
- top: '1060rpx',
|
|
|
-
|
|
|
- },
|
|
|
- views: [{
|
|
|
- type: 'image',
|
|
|
- src: that.userInfo.avatar ? avatarUrl : '/static/images/head.jpg',
|
|
|
- css: {
|
|
|
- marginTop: '-80rpx',
|
|
|
- borderRadius: '50%',
|
|
|
- width: '94rpx',
|
|
|
- height: '94rpx',
|
|
|
- objectFit: 'cover'
|
|
|
- }
|
|
|
- }, ],
|
|
|
- },
|
|
|
- // 昵称
|
|
|
- {
|
|
|
- type: 'view',
|
|
|
- css: {
|
|
|
- display: 'flex',
|
|
|
- position: 'absolute',
|
|
|
- left: '140rpx',
|
|
|
- bottom: '196rpx',
|
|
|
-
|
|
|
- },
|
|
|
- views: [{
|
|
|
- type: 'text',
|
|
|
- text: that.userInfo.nickname ? that.userInfo.nickname : '默认用户',
|
|
|
- css: {
|
|
|
- fontSize: '28rpx',
|
|
|
- color: '#333333',
|
|
|
- }
|
|
|
- }],
|
|
|
- },
|
|
|
-
|
|
|
- // 海报文案1
|
|
|
- {
|
|
|
- type: 'view',
|
|
|
- css: {
|
|
|
- display: 'flex',
|
|
|
- position: 'absolute',
|
|
|
- left: '24rpx',
|
|
|
- bottom: '96rpx',
|
|
|
-
|
|
|
- },
|
|
|
- views: [{
|
|
|
- type: 'text',
|
|
|
- text: '免费体验Al生成个人质感艺术照',
|
|
|
- css: {
|
|
|
- fontSize: '32rpx',
|
|
|
- color: '#333333',
|
|
|
- }
|
|
|
- }],
|
|
|
- },
|
|
|
- // 海报文案2
|
|
|
- {
|
|
|
- type: 'view',
|
|
|
- css: {
|
|
|
- display: 'flex',
|
|
|
- position: 'absolute',
|
|
|
- left: '24rpx',
|
|
|
- bottom: '44rpx',
|
|
|
-
|
|
|
- },
|
|
|
- views: [{
|
|
|
- type: 'text',
|
|
|
- text: '设计微信/抖音/小红书专属头像',
|
|
|
- css: {
|
|
|
- fontSize: '32rpx',
|
|
|
- color: '#333333',
|
|
|
- }
|
|
|
- }],
|
|
|
- },
|
|
|
-
|
|
|
- // 二维码上方文案
|
|
|
- {
|
|
|
- type: 'view',
|
|
|
- css: {
|
|
|
- position: 'absolute',
|
|
|
- right: '40rpx',
|
|
|
- bottom: '196rpx',
|
|
|
- },
|
|
|
- views: [{
|
|
|
- type: 'text',
|
|
|
- text: '微信扫码',
|
|
|
- css: {
|
|
|
- fontSize: '24rpx',
|
|
|
- color: '#333333',
|
|
|
- }
|
|
|
- }],
|
|
|
- },
|
|
|
- {
|
|
|
- type: 'view',
|
|
|
- css: {
|
|
|
- left: (this.info.poster_qrcode_x / proportionally) + 'px',
|
|
|
- top: (this.info.poster_qrcode_y / proportionally) + 'px',
|
|
|
- position: 'fixed',
|
|
|
-
|
|
|
- },
|
|
|
- views: [{
|
|
|
- type: 'qrcode',
|
|
|
- text: this.qrcode,
|
|
|
- css: {
|
|
|
- width: (this.info.poster_qrcode_width / proportionally) + 'px',
|
|
|
- height: (this.info.poster_qrcode_width / proportionally) + 'px',
|
|
|
- background: '#fff'
|
|
|
- }
|
|
|
- },
|
|
|
- // {
|
|
|
- // src: '/static/images/fanyunLogo.png',
|
|
|
- // type: "image",
|
|
|
- // css: {
|
|
|
- // position: 'absolute',
|
|
|
- // width: 30 + 'rpx',
|
|
|
- // height: 30 + 'rpx',
|
|
|
-
|
|
|
- // left: '44rpx',
|
|
|
- // top: '44rpx',
|
|
|
-
|
|
|
- // }
|
|
|
- // }
|
|
|
- ],
|
|
|
- },
|
|
|
- ]
|
|
|
- }),
|
|
|
- (
|
|
|
- this.showPoster = true,
|
|
|
- // this.revertUrl()
|
|
|
-
|
|
|
- setTimeout(() => {
|
|
|
- that.$refs.painter.canvasToTempFilePathSync({
|
|
|
- // 在nvue里是jpeg
|
|
|
- fileType: 'jpg',
|
|
|
- quality: 1,
|
|
|
- success: res => {
|
|
|
- console.log('res.tempFilePath', res.tempFilePath);
|
|
|
- // uni.showModal({
|
|
|
- // title: '提示',
|
|
|
- // content: '查看图片后长按图片即可保存或分享',
|
|
|
- // confirmText: '查看',
|
|
|
- // confirmColor: '#1F79F0',
|
|
|
- // success: function(res2) {
|
|
|
- // if (res2.confirm) {
|
|
|
- uni.previewImage({
|
|
|
- urls: [res.tempFilePath],
|
|
|
- longPressActions: {
|
|
|
- itemList: ['发送给朋友', '保存图片',
|
|
|
- '收藏'
|
|
|
- ],
|
|
|
- success: function(data) {},
|
|
|
- fail: function(err) {
|
|
|
- console.log(err
|
|
|
- .errMsg);
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- // } else if (res2.cancel) {
|
|
|
- // console.log('用户点击取消');
|
|
|
- // }
|
|
|
- // }
|
|
|
- // });
|
|
|
- }
|
|
|
- })
|
|
|
- }, 1000)
|
|
|
- );
|
|
|
- },
|
|
|
- posterSuccess() {
|
|
|
- uni.hideLoading();
|
|
|
- },
|
|
|
- // 生成海报需要的数据到此为止
|
|
|
-
|
|
|
-
|
|
|
- preViewImg(type) {
|
|
|
- if (type == 1) {
|
|
|
- uni.previewImage({
|
|
|
- urls: [this.parameter.refImg],
|
|
|
- longPressActions: {
|
|
|
- itemList: ['发送给朋友', '保存图片', '收藏'],
|
|
|
- success: function(data) {},
|
|
|
- fail: function(err) {
|
|
|
- console.log(err.errMsg);
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- } else {
|
|
|
- uni.previewImage({
|
|
|
- urls: [this.form.init_image],
|
|
|
- longPressActions: {
|
|
|
- itemList: ['发送给朋友', '保存图片', '收藏'],
|
|
|
- success: function(data) {},
|
|
|
- fail: function(err) {
|
|
|
- console.log(err.errMsg);
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- parameters() {
|
|
|
- var that = this;
|
|
|
- // if(that.showdrawing){
|
|
|
- // uni.showToast({
|
|
|
- // title:'图片生成中',
|
|
|
- // icon:'none'
|
|
|
- // })
|
|
|
- // return;
|
|
|
- // }
|
|
|
- that.show1 = true
|
|
|
-
|
|
|
- },
|
|
|
- setOpen() {
|
|
|
- var that = this;
|
|
|
- if (that.showdrawing) {
|
|
|
- uni.showToast({
|
|
|
- title: '图片生成中',
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
- return;
|
|
|
- }
|
|
|
- if (that.showopen) {
|
|
|
- uni.showToast({
|
|
|
- title: '图片已公开',
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
- return;
|
|
|
- }
|
|
|
- uni.showModal({
|
|
|
- confirmColor: '#207CF7',
|
|
|
- confirmText: '确认公开',
|
|
|
- title: '提示',
|
|
|
- content: '是否确认公开此绘画作品',
|
|
|
- success(src) {
|
|
|
- if (src.confirm) {
|
|
|
- that.$http('gallery.setOpen', {
|
|
|
- id: that.parameterid
|
|
|
- }).then(res => {
|
|
|
- if (res.code == 0) {
|
|
|
- uni.showToast({
|
|
|
- title: '提交成功,等待审核'
|
|
|
- })
|
|
|
- that.showopen = true
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- gallerydetail(id) {
|
|
|
- let that = this;
|
|
|
- this.$http('gallery.detail', {
|
|
|
- id: id,
|
|
|
- type: this.engin
|
|
|
- }).then(res => {
|
|
|
- if (res.code == 0) {
|
|
|
-
|
|
|
- if (this.engin == 'sd') {
|
|
|
- for (var i = 0; i < res.data.imgs_file.length; i++) {
|
|
|
- var url = {
|
|
|
- id: res.data.id,
|
|
|
- type: 'image',
|
|
|
- url: res.data.imgs_file[i],
|
|
|
- // url: res.data.origin_url,
|
|
|
- }
|
|
|
- that.swiperList.push(url)
|
|
|
- }
|
|
|
- this.done = true
|
|
|
- } else if (this.engin == 'mj') {
|
|
|
- var url = {
|
|
|
- id: res.data.id,
|
|
|
- type: 'image',
|
|
|
- url: res.data.origin_url,
|
|
|
- }
|
|
|
- that.swiperList.push(url)
|
|
|
- this.done = true
|
|
|
- } else if (this.engin == 'rh') {
|
|
|
- var url = {
|
|
|
- id: res.data.id,
|
|
|
- type: 'image',
|
|
|
- url: res.data.imgs_file[0],
|
|
|
- }
|
|
|
- that.swiperList.push(url)
|
|
|
-
|
|
|
- console.log("this.engin == 'rh'====", res.data.imgs_file, that.swiperList);
|
|
|
- this.done = true
|
|
|
-
|
|
|
- this.commonqrcodePath()
|
|
|
- }
|
|
|
-
|
|
|
- console.log('获取到的图片详情返回值：', res);
|
|
|
- this.showdrawing = false
|
|
|
-
|
|
|
- this.parameter = res.data
|
|
|
-
|
|
|
- //this.parameter.prompt =
|
|
|
- //'https://mjcdn.iduomi.cc/attachments/1124768570157564029/1129053571321712670/erinramirez_In_a_Chinese_ancient_garden_a_lady_is_playing_the_t_cff28ad6-6f7e-44f0-a7bb-2a8724e573f2.png 关键词测试测'
|
|
|
- // this.parameter.prompt = '123'
|
|
|
-
|
|
|
-
|
|
|
- if (this.parameter.prompt.includes('http') && this.parameter.prompt.includes('.png')) {
|
|
|
- this.parameter.refImg = this.parameter.prompt.split('.png')[0] + '.png'
|
|
|
-
|
|
|
- // 创作相似去参考图提示词
|
|
|
- let tempKeyWord = ''
|
|
|
- this.parameter.prompt.split('.png').forEach((item, index) => {
|
|
|
- if (!item.includes('http')) {
|
|
|
- tempKeyWord += item
|
|
|
- }
|
|
|
- })
|
|
|
- this.parameter.promptSame = tempKeyWord
|
|
|
- this.parameter.prompt = tempKeyWord
|
|
|
- } else if (this.parameter.prompt.includes('http') && this.parameter.prompt.includes(
|
|
|
- '.jpeg')) {
|
|
|
- this.parameter.refImg = this.parameter.prompt.split('.jpeg')[0] + '.jpeg'
|
|
|
-
|
|
|
- // 创作相似去参考图提示词
|
|
|
- let tempKeyWord = ''
|
|
|
- this.parameter.prompt.split('.jpeg').forEach((item, index) => {
|
|
|
- if (!item.includes('http')) {
|
|
|
- tempKeyWord += item
|
|
|
- }
|
|
|
- })
|
|
|
- this.parameter.promptSame = tempKeyWord
|
|
|
- this.parameter.prompt = tempKeyWord
|
|
|
- } else if (this.parameter.prompt.includes('http') && this.parameter.prompt.includes(
|
|
|
- '.jpg')) {
|
|
|
- this.parameter.refImg = this.parameter.prompt.split('.jpg')[0] + '.jpg'
|
|
|
-
|
|
|
- // 创作相似去参考图提示词
|
|
|
- let tempKeyWord = ''
|
|
|
- this.parameter.prompt.split('.jpg').forEach((item, index) => {
|
|
|
- if (!item.includes('http')) {
|
|
|
- tempKeyWord += item
|
|
|
- }
|
|
|
- })
|
|
|
- this.parameter.promptSame = tempKeyWord
|
|
|
- this.parameter.prompt = tempKeyWord
|
|
|
- } else {
|
|
|
- this.parameter.promptSame = this.parameter.prompt
|
|
|
- }
|
|
|
- console.log('进入这里了没有', this.parameter.promptSame);
|
|
|
- } else {
|
|
|
-
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- aiPlay() {
|
|
|
- let that = this;
|
|
|
- this.showdrawing = true
|
|
|
- if (that.failnum == 0) {
|
|
|
- this.progressbar()
|
|
|
- }
|
|
|
-
|
|
|
- this.$http('gallery.create', this.form).then(res => {
|
|
|
- if (res.code == 0) {
|
|
|
- this.showTask(res.data.id)
|
|
|
- } else {
|
|
|
- uni.hideToast()
|
|
|
- uni.showModal({
|
|
|
- confirmText: '退出',
|
|
|
- showCancel: false,
|
|
|
- confirmColor: '#207CF7',
|
|
|
- title: '提示',
|
|
|
- content: res.msg,
|
|
|
- success(tit) {
|
|
|
- if (tit.confirm) {
|
|
|
- uni.navigateBack()
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- });
|
|
|
- },
|
|
|
- progressbar() {
|
|
|
- var that = this;
|
|
|
- if (that.percentage < 99) {
|
|
|
- timingr = setTimeout(() => {
|
|
|
- that.percentage = uni.$u.range(0, 99, that.percentage + 1)
|
|
|
- that.progressbar()
|
|
|
- }, 300);
|
|
|
- } else {
|
|
|
- clearTimeout(timingr);
|
|
|
- }
|
|
|
- },
|
|
|
- showTask(id) {
|
|
|
- let that = this;
|
|
|
- this.$http('gallery.getOpensdDetail', {
|
|
|
- id: id,
|
|
|
- }).then(res => {
|
|
|
- if (res.code == 0) {
|
|
|
- if (res.data.state == "success") {
|
|
|
- this.percentage = 99
|
|
|
- this.drawingtitle = '图片正在渲染中，请不要退出此页面'
|
|
|
- this.parameterid = res.data.id
|
|
|
- this.done = true
|
|
|
- clearTimeout(asynchronous);
|
|
|
- var url = {
|
|
|
- id: 0,
|
|
|
- type: 'image',
|
|
|
- url: res.data.gen_img,
|
|
|
- }
|
|
|
- that.swiperList.push(url)
|
|
|
- } else if (res.data.state == "in_create") {
|
|
|
- asynchronous = setTimeout(() => {
|
|
|
- that.showTask(id)
|
|
|
- }, 1000);
|
|
|
- return;
|
|
|
- } else if (res.data.state == "in_wait") {
|
|
|
- asynchronous = setTimeout(() => {
|
|
|
- that.showTask(id)
|
|
|
- }, 1000);
|
|
|
- return;
|
|
|
- } else {
|
|
|
- uni.showModal({
|
|
|
- confirmText: '退出',
|
|
|
- showCancel: false,
|
|
|
- confirmColor: '#207CF7',
|
|
|
- title: '提示',
|
|
|
- content: res.msg,
|
|
|
- success(tit) {
|
|
|
- if (tit.confirm) {
|
|
|
- uni.navigateBack()
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- } else {
|
|
|
- uni.showModal({
|
|
|
- confirmText: '退出',
|
|
|
- showCancel: false,
|
|
|
- confirmColor: '#207CF7',
|
|
|
- title: '提示',
|
|
|
- content: res.msg,
|
|
|
- success(tit) {
|
|
|
- if (tit.confirm) {
|
|
|
- uni.navigateBack()
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- previewload() {
|
|
|
- // console.log('ch');
|
|
|
- this.showdrawing = false
|
|
|
- this.percentage = 0
|
|
|
- },
|
|
|
- previewerror() {
|
|
|
- this.showdrawing = false
|
|
|
- this.percentage = 0
|
|
|
- },
|
|
|
- preview(e) {
|
|
|
- uni.previewImage({
|
|
|
- urls: [e]
|
|
|
- })
|
|
|
- },
|
|
|
- is_weixin() {
|
|
|
- var ua = window.navigator.userAgent.toLowerCase();
|
|
|
- if (ua.match(/MicroMessenger/i) == 'micromessenger') {
|
|
|
- console.log('微信浏览器');
|
|
|
- return true;
|
|
|
- } else {
|
|
|
- console.log("不是微信浏览器");
|
|
|
- return false;
|
|
|
- }
|
|
|
- },
|
|
|
- //下载分享
|
|
|
- getdownload(index) {
|
|
|
- if (this.showdrawing) {
|
|
|
- uni.showToast({
|
|
|
- title: '图片生成中',
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
- return;
|
|
|
- }
|
|
|
- // if (!this.is_weixin()) {
|
|
|
- // return uni.showModal({
|
|
|
- // showCancel: false,
|
|
|
- // title: '提示',
|
|
|
- // content: '请在微信内置浏览器打开，长按图片下载/分享',
|
|
|
- // confirmColor: '#207CF7'
|
|
|
- // })
|
|
|
- // }
|
|
|
- this.createPoster()
|
|
|
- return
|
|
|
-
|
|
|
- uni.showModal({
|
|
|
- showCancel: false,
|
|
|
- title: '提示',
|
|
|
- content: '请在微信内置浏览器打开，长按图片下载/分享',
|
|
|
- confirmColor: '#207CF7'
|
|
|
- })
|
|
|
- return
|
|
|
-
|
|
|
- if (this.engin == 'mj') {
|
|
|
- uni.showModal({
|
|
|
- showCancel: false,
|
|
|
- title: '提示',
|
|
|
- content: '请在微信内置浏览器打开，长按图片下载/分享',
|
|
|
- confirmColor: '#207CF7'
|
|
|
- })
|
|
|
- return
|
|
|
- }
|
|
|
-
|
|
|
- console.log('要下载的图片地址：', this.parameter.imgs_file[index]);
|
|
|
-
|
|
|
- let url = this.parameter.imgs_file[index]
|
|
|
- // return
|
|
|
- const detectDeviceType = () => /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i
|
|
|
- .test(
|
|
|
- navigator.userAgent) ? false : true;
|
|
|
- if (this.is_weixin()) {
|
|
|
- uni.showModal({
|
|
|
- showCancel: false,
|
|
|
- title: '提示',
|
|
|
- content: '请在微信内置浏览器打开，长按图片下载/分享',
|
|
|
- confirmColor: '#207CF7'
|
|
|
- })
|
|
|
- } else {
|
|
|
- if (detectDeviceType()) {
|
|
|
- let _this = this
|
|
|
-
|
|
|
- // if (_this.isDowload) {
|
|
|
- // uni.showToast({
|
|
|
- // icon: 'none',
|
|
|
- // title: '请等待上一个视频下载完成后，再下载',
|
|
|
- // });
|
|
|
- // }
|
|
|
- // PC端
|
|
|
- // this.delItem.url = 'http://www.liwantao.top/test.mp4'
|
|
|
-
|
|
|
- const downloadTask = uni.downloadFile({
|
|
|
- url, //文件链接
|
|
|
- timeout: 99999999,
|
|
|
- success: (res) => {
|
|
|
- if (res.statusCode === 200) {
|
|
|
- var oA = document.createElement("a");
|
|
|
- // oA.download = _this.delItem.name; // 设置下载的文件名，默认是'下载'
|
|
|
- oA.href = res.tempFilePath; //临时路径再保存到本地
|
|
|
- document.body.appendChild(oA);
|
|
|
- oA.click();
|
|
|
- oA.remove(); // 下载之后把创建的元素删除
|
|
|
- }
|
|
|
- },
|
|
|
- fail: (err) => {
|
|
|
- _this.show = false;
|
|
|
- _this.isDowload = false
|
|
|
- _this.progress = 0
|
|
|
-
|
|
|
- // console.log(_this.show, _this.isDowload, _this.progress, err);
|
|
|
- uni.showToast({
|
|
|
- icon: 'none',
|
|
|
- mask: true,
|
|
|
- title: '失败请重新下载',
|
|
|
- });
|
|
|
- },
|
|
|
- })
|
|
|
-
|
|
|
- downloadTask.onProgressUpdate((res) => {
|
|
|
- if (res.progress > 0) {
|
|
|
- _this.show = true;
|
|
|
- _this.isDowload = true
|
|
|
- }
|
|
|
- _this.progress = res.progress;
|
|
|
- if (res.progress == 100) {
|
|
|
- _this.show = false;
|
|
|
- _this.isDowload = false
|
|
|
- _this.progress = 0
|
|
|
-
|
|
|
- uni.showToast({
|
|
|
- icon: 'success',
|
|
|
- title: '图片下载成功！',
|
|
|
- });
|
|
|
- }
|
|
|
- })
|
|
|
- } else {
|
|
|
- uni.showModal({
|
|
|
- showCancel: false,
|
|
|
- title: '提示',
|
|
|
- content: '请在微信内置浏览器打开，长按图片下载/分享',
|
|
|
- confirmColor: '#207CF7'
|
|
|
- })
|
|
|
- return
|
|
|
- // 其他移动端浏览器
|
|
|
- // window.open(this.delItem.url)
|
|
|
-
|
|
|
- let _this = this
|
|
|
- // this.delItem.url = 'http://www.liwantao.top/test.mp4'
|
|
|
-
|
|
|
- var oA = document.createElement("a");
|
|
|
- // oA.download = _this.delItem.name;
|
|
|
- oA.href = url;
|
|
|
- document.body.appendChild(oA);
|
|
|
- oA.click();
|
|
|
- oA.remove();
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- getisback() {
|
|
|
- if (!this.done) {
|
|
|
- uni.showModal({
|
|
|
- confirmColor: '#207CF7',
|
|
|
- confirmText: '立即退出',
|
|
|
- title: '提示',
|
|
|
- content: '图片生成中，退出此页面后可能无法生成',
|
|
|
- success(src) {
|
|
|
- if (src.confirm) {
|
|
|
- uni.navigateBack()
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- } else {
|
|
|
- uni.navigateBack()
|
|
|
- }
|
|
|
- },
|
|
|
- // 跳转
|
|
|
- tn(e) {
|
|
|
- // console.log(e);
|
|
|
- uni.navigateTo({
|
|
|
- url: e,
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- // cardSwiper
|
|
|
- cardSwiper(e) {
|
|
|
- // console.log(e.detail);
|
|
|
- this.cardCur = e.detail.current
|
|
|
- },
|
|
|
-
|
|
|
- // 弹出压屏窗
|
|
|
- showLandscape() {
|
|
|
- this.openLandscape()
|
|
|
- },
|
|
|
- // 打开压屏窗
|
|
|
- openLandscape() {
|
|
|
- this.show1 = true
|
|
|
- },
|
|
|
- // 关闭压屏窗
|
|
|
- closeLandscape() {
|
|
|
- this.show1 = false
|
|
|
- },
|
|
|
- },
|
|
|
- onUnload() {
|
|
|
- clearTimeout(timingr);
|
|
|
- clearTimeout(asynchronous);
|
|
|
- },
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
- // .shareBox {
|
|
|
- // position: fixed;
|
|
|
- // top: 0;
|
|
|
- // left: 0;
|
|
|
- // height: 100vh;
|
|
|
- // width: 100vw;
|
|
|
- // background: red;
|
|
|
- // z-index: 9999999;
|
|
|
- // }
|
|
|
-
|
|
|
- .template-details {
|
|
|
- margin: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100vh;
|
|
|
- color: #fff;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- /* 胶囊*/
|
|
|
- .tn-custom-nav-bar__back {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- justify-content: space-evenly;
|
|
|
- align-items: center;
|
|
|
- box-sizing: border-box;
|
|
|
- background-color: rgba(0, 0, 0, 0.15);
|
|
|
- border-radius: 1000rpx;
|
|
|
- border: 1rpx solid rgba(255, 255, 255, 0.5);
|
|
|
- color: #FFFFFF;
|
|
|
- font-size: 18px;
|
|
|
-
|
|
|
- .icon {
|
|
|
- display: block;
|
|
|
- flex: 1;
|
|
|
- margin: auto;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- &:before {
|
|
|
- content: " ";
|
|
|
- width: 1rpx;
|
|
|
- height: 110%;
|
|
|
- position: absolute;
|
|
|
- top: 22.5%;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- margin: auto;
|
|
|
- transform: scale(0.5);
|
|
|
- transform-origin: 0 0;
|
|
|
- pointer-events: none;
|
|
|
- box-sizing: border-box;
|
|
|
- opacity: 0.7;
|
|
|
- background-color: #FFFFFF;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- /* 图标容器15 start */
|
|
|
- .icon15 {
|
|
|
- &__item {
|
|
|
- width: 30%;
|
|
|
-
|
|
|
- border-radius: 10rpx;
|
|
|
- padding: 30rpx;
|
|
|
- margin: 20rpx 10rpx;
|
|
|
- transform: scale(1);
|
|
|
- transition: transform 0.3s linear;
|
|
|
- transform-origin: center center;
|
|
|
-
|
|
|
- &--icon {
|
|
|
- width: 100rpx;
|
|
|
- height: 100rpx;
|
|
|
- font-size: 50rpx;
|
|
|
- border-radius: 50%;
|
|
|
- margin-bottom: 18rpx;
|
|
|
- position: relative;
|
|
|
- z-index: 1;
|
|
|
-
|
|
|
- &::after {
|
|
|
- content: " ";
|
|
|
- position: absolute;
|
|
|
- z-index: -1;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- left: 0;
|
|
|
- bottom: 0;
|
|
|
- border-radius: inherit;
|
|
|
- opacity: 1;
|
|
|
- transform: scale(1, 1);
|
|
|
- background-size: 100% 100%;
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- /* 按钮 */
|
|
|
- .button-1 {
|
|
|
- background-color: rgba(0, 0, 0, 0.15);
|
|
|
- position: fixed;
|
|
|
- /* bottom:200rpx;
|
|
|
- right: 20rpx; */
|
|
|
- top: 25%;
|
|
|
- right: 30rpx;
|
|
|
- z-index: 1001;
|
|
|
- border-radius: 100px;
|
|
|
- }
|
|
|
-
|
|
|
- .button-2 {
|
|
|
- background-color: rgba(0, 0, 0, 0.15);
|
|
|
- position: fixed;
|
|
|
- /* bottom:200rpx;
|
|
|
- right: 20rpx; */
|
|
|
- top: 35%;
|
|
|
- right: 30rpx;
|
|
|
- z-index: 1001;
|
|
|
- border-radius: 100px;
|
|
|
- }
|
|
|
-
|
|
|
- .button-3 {
|
|
|
- background-color: rgba(0, 0, 0, 0.15);
|
|
|
- position: fixed;
|
|
|
- /* bottom:200rpx;
|
|
|
- right: 20rpx; */
|
|
|
- top: 45%;
|
|
|
- right: 30rpx;
|
|
|
- z-index: 1001;
|
|
|
- border-radius: 100px;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- /* 用户头像 start */
|
|
|
- .logo-image {
|
|
|
- width: 100rpx;
|
|
|
- height: 100rpx;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
-
|
|
|
- .logo-pic {
|
|
|
- background-size: cover;
|
|
|
- background-repeat: no-repeat;
|
|
|
- // background-attachment:fixed;
|
|
|
- background-position: top;
|
|
|
- border: 6rpx solid rgba(255, 255, 255, 0.25);
|
|
|
- box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
|
|
|
- border-radius: 50%;
|
|
|
- overflow: hidden;
|
|
|
- // background-color: #FFFFFF;
|
|
|
- }
|
|
|
-
|
|
|
- /* 底部tabbar start*/
|
|
|
- /* 毛玻璃*/
|
|
|
- .dd-glass {
|
|
|
- width: 100%;
|
|
|
- backdrop-filter: blur(20rpx);
|
|
|
- -webkit-backdrop-filter: blur(20rpx);
|
|
|
- }
|
|
|
-
|
|
|
- .footerfixed {
|
|
|
- position: fixed;
|
|
|
- // margin: 20rpx;
|
|
|
- margin: 40rpx 5%;
|
|
|
- width: 90%;
|
|
|
- bottom: calc(env(safe-area-inset-bottom) / 2);
|
|
|
- ;
|
|
|
- z-index: 999;
|
|
|
- background-color: rgba(0, 0, 0, 0.15);
|
|
|
- box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
|
|
|
- }
|
|
|
-
|
|
|
- .tabbar {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- min-height: 110rpx;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 0;
|
|
|
- height: calc(110rpx + env(safe-area-inset-bottom) / 2);
|
|
|
- // padding-bottom: calc(env(safe-area-inset-bottom) / 2);
|
|
|
- }
|
|
|
-
|
|
|
- .tabbar .action {
|
|
|
- font-size: 22rpx;
|
|
|
- position: relative;
|
|
|
- flex: 1;
|
|
|
- text-align: center;
|
|
|
- padding: 0;
|
|
|
- display: block;
|
|
|
- height: auto;
|
|
|
- line-height: 1;
|
|
|
- margin: 0;
|
|
|
- overflow: initial;
|
|
|
- }
|
|
|
-
|
|
|
- .tabbar .action .bar-icon {
|
|
|
- width: 100rpx;
|
|
|
- position: relative;
|
|
|
- display: block;
|
|
|
- height: auto;
|
|
|
- margin: 0 auto 10rpx;
|
|
|
- text-align: center;
|
|
|
- font-size: 42rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .tabbar .action .bar-icon image {
|
|
|
- width: 50rpx;
|
|
|
- height: 50rpx;
|
|
|
- display: inline-block;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- /* 全屏轮播 start*/
|
|
|
- .card-swiper {
|
|
|
- height: 100vh !important;
|
|
|
- }
|
|
|
-
|
|
|
- .card-swiper swiper-item {
|
|
|
- width: 750rpx !important;
|
|
|
- left: 0rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- overflow: initial;
|
|
|
- background: #000;
|
|
|
- }
|
|
|
-
|
|
|
- .card-swiper swiper-item .swiper-item {
|
|
|
- // width: 100%;
|
|
|
- // display: block;
|
|
|
- // height: 100vh;
|
|
|
- // border-radius: 0rpx;
|
|
|
- // transform: scale(0.9);
|
|
|
- // transition: all 0.2s ease-in 0s;
|
|
|
- // will-change: transform;
|
|
|
- // overflow: hidden;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- height: 100%;
|
|
|
- background: #000;
|
|
|
- }
|
|
|
-
|
|
|
- .card-swiper swiper-item.cur .swiper-item {
|
|
|
- transform: scale(1);
|
|
|
- transition: all 0.2s ease-in 0s;
|
|
|
- will-change: transform;
|
|
|
- }
|
|
|
-
|
|
|
- .image-banner {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
-
|
|
|
- .image-banner image {
|
|
|
- width: 100%;
|
|
|
- // height: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- /* 轮播指示点 start*/
|
|
|
- .indication {
|
|
|
- z-index: 9999;
|
|
|
- width: 100%;
|
|
|
- height: 36rpx;
|
|
|
- position: fixed;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
-
|
|
|
- .spot {
|
|
|
- background-color: #FFFFFF;
|
|
|
- opacity: 0.6;
|
|
|
- width: 10rpx;
|
|
|
- height: 10rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
- top: calc(-280rpx - env(safe-area-inset-bottom) / 2);
|
|
|
- top: calc(-280rpx - constant(safe-area-inset-bottom));
|
|
|
- margin: 0 8rpx !important;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
-
|
|
|
- .spot.active {
|
|
|
- opacity: 1;
|
|
|
- width: 30rpx;
|
|
|
- background-color: #FFFFFF;
|
|
|
- }
|
|
|
-
|
|
|
- .lazy-load {
|
|
|
- background: #000;
|
|
|
- display: grid;
|
|
|
- align-items: center;
|
|
|
- padding-bottom: env(safe-area-inset-bottom);
|
|
|
- // height: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .lazy-load view {
|
|
|
- width: 100%;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .lazy-loading {
|
|
|
- background: #000;
|
|
|
- height: 100%;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .drawing {
|
|
|
- position: absolute;
|
|
|
- top: 46%;
|
|
|
- // color: #606266;
|
|
|
- font-size: 18px;
|
|
|
- }
|
|
|
-
|
|
|
- .progress {
|
|
|
- position: absolute;
|
|
|
- top: 52%;
|
|
|
- width: 60%;
|
|
|
- }
|
|
|
-
|
|
|
- .preloader_1 {
|
|
|
- position: absolute;
|
|
|
- // right: 8%;
|
|
|
- // bottom: 12%;
|
|
|
- // position: fixed;
|
|
|
- // right: 58%;
|
|
|
- margin-right: 65px;
|
|
|
- top: 42%;
|
|
|
- }
|
|
|
-
|
|
|
- .preloader_1 view {
|
|
|
- display: block;
|
|
|
- bottom: 0px;
|
|
|
- width: 9px;
|
|
|
- height: 5px;
|
|
|
- background: #9b59b6;
|
|
|
- position: absolute;
|
|
|
- animation: preloader_1 1.5s infinite ease-in-out;
|
|
|
- }
|
|
|
-
|
|
|
- .preloader_1 view:nth-child(2) {
|
|
|
- left: 11px;
|
|
|
- animation-delay: .2s;
|
|
|
- }
|
|
|
-
|
|
|
- .preloader_1 view:nth-child(3) {
|
|
|
- left: 22px;
|
|
|
- animation-delay: .4s;
|
|
|
- }
|
|
|
-
|
|
|
- .preloader_1 view:nth-child(4) {
|
|
|
- left: 33px;
|
|
|
- animation-delay: .6s;
|
|
|
- }
|
|
|
-
|
|
|
- .preloader_1 view:nth-child(5) {
|
|
|
- left: 44px;
|
|
|
- animation-delay: .8s;
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes preloader_1 {
|
|
|
- 0% {
|
|
|
- height: 5px;
|
|
|
- transform: translateY(0px);
|
|
|
- background: #9b59b6;
|
|
|
- }
|
|
|
-
|
|
|
- 25% {
|
|
|
- height: 30px;
|
|
|
- transform: translateY(15px);
|
|
|
- background: #3498db;
|
|
|
- }
|
|
|
-
|
|
|
- 50% {
|
|
|
- height: 5px;
|
|
|
- transform: translateY(0px);
|
|
|
- background: #9b59b6;
|
|
|
- }
|
|
|
-
|
|
|
- 100% {
|
|
|
- height: 5px;
|
|
|
- transform: translateY(0px);
|
|
|
- background: #9b59b6;
|
|
|
- }
|
|
|
- }
|
|
|
-</style>
|
