pc端个人信息+充值弹窗
This commit is contained in:
parent
e1968dbbbc
commit
2384142adc
@ -112,8 +112,7 @@ export default {
|
||||
this.$refs.uToast.show({type: 'warning',title: "图片上传格式错误!"});
|
||||
return;
|
||||
}
|
||||
// this.form.coverPath = file;
|
||||
// this.fileList[0] = file;
|
||||
uni.$emit('workshopPage',fileList[0]?.url);
|
||||
},
|
||||
// 提示语弹窗
|
||||
showToast({type,title}){
|
||||
|
||||
@ -12,12 +12,12 @@
|
||||
<u-icon name="download" size="34" class="hfu-icon" color="#99d7ff" />
|
||||
<text class="web-download">移动端下载</text>
|
||||
</view>
|
||||
<view class="header-function">
|
||||
<view class="header-function" @click.stop="showIdentityDialog = true">
|
||||
<u-icon name="/static/pc-code.png" size="34" class="hfu-icon" />
|
||||
<text class="web-diamond">{{ diamond }} 充值</text>
|
||||
</view>
|
||||
<el-dropdown class="header-avatar" @command="toShow">
|
||||
<view class="ha-icon">
|
||||
<view class="ha-icon" @click.stop="showIdentityDialog = true;$refs.identityRef.toShowCell(0)">
|
||||
<image :src="fileUrl+getAvatar"></image>
|
||||
<text>{{ getTopTip }}</text>
|
||||
</view>
|
||||
@ -42,12 +42,15 @@
|
||||
<LoginDialog :showLogin="showLogin" @toast="showToast" @close="showLogin = false" @openCode="showMobileDownloadDialog = true"
|
||||
@login="login"/>
|
||||
<MobileDownloadDialog @toast="showToast" :showDialog="showMobileDownloadDialog" @close="showMobileDownloadDialog = false" />
|
||||
<IdentityDialog ref="identityRef" :userMessage="userMessage" :diamond="diamond" @toast="showToast"
|
||||
:showDialog="showIdentityDialog" @close="showIdentityDialog = false;$refs.identityRef.showCell=false" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LoginDialog from './loginDialog.vue';
|
||||
import MobileDownloadDialog from './mobileDownloadDialog.vue';
|
||||
import IdentityDialog from './identityDialog.vue';
|
||||
import configService from '@/common/config.service.js';
|
||||
export default {
|
||||
props: {
|
||||
@ -62,7 +65,8 @@ export default {
|
||||
},
|
||||
components: {
|
||||
LoginDialog,
|
||||
MobileDownloadDialog
|
||||
MobileDownloadDialog,
|
||||
IdentityDialog
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
@ -94,6 +98,8 @@ export default {
|
||||
showLogin: false,
|
||||
// 移动端下载弹窗显示
|
||||
showMobileDownloadDialog: false,
|
||||
// 个人信息+充值弹窗显示
|
||||
showIdentityDialog: false,
|
||||
// 下拉栏列表
|
||||
dropList: [
|
||||
{
|
||||
@ -126,6 +132,11 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
let that = this;
|
||||
// 页面通信——钻石-1
|
||||
uni.$on('deleteDiamond',()=>{
|
||||
that.diamond--;
|
||||
});
|
||||
this.init();
|
||||
},
|
||||
methods:{
|
||||
@ -302,7 +313,10 @@ export default {
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
filter: opacity(0.8);
|
||||
opacity: 0.8;
|
||||
}
|
||||
&:active{
|
||||
opacity: 0.6;
|
||||
}
|
||||
text{
|
||||
font-size: 28rpx;
|
||||
|
||||
649
pages/pc_web/index/components/identityDialog.vue
Normal file
649
pages/pc_web/index/components/identityDialog.vue
Normal file
@ -0,0 +1,649 @@
|
||||
<template>
|
||||
<u-popup :value="showDialog" mode="center" border-radius="20" @close="$emit('close')">
|
||||
<view class="mobile-identity-dialog" :style="{width: showCell ? '1970rpx' : '1280rpx'}">
|
||||
<view class="mid-main">
|
||||
<u-icon name="close-circle" color="#353c15" class="mi-close" size="60" @click="$emit('close')" />
|
||||
<view class="mi-top">
|
||||
<image class="mit-avatar" :title="userMessage.realname||('用户'+userMessage.username)"
|
||||
:src="fileUrl+defaultLoginAvatar" @click="toShowCell(0)"></image>
|
||||
<view class="mit-left">
|
||||
<view class="mitl-item">
|
||||
手机账号：<text>{{ userMessage.username }}</text>
|
||||
</view>
|
||||
<view class="mitl-item">
|
||||
注册日期：<text>{{ getEnrollDate }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mit-right">
|
||||
<view class="mitr-btn">
|
||||
<view class="mitr-count">
|
||||
余额：<u-icon :name="diamondIcon" size="40" label-pos="left"
|
||||
:label="diamond" label-size="32"/>
|
||||
</view>
|
||||
<u-icon class="mitr-type" name="arrow-right" color="#909090" size="28" label-pos="left"
|
||||
label="充 值 类 型" label-size="32" margin-right="10" @click="toShowCell(1)" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mi-bottom">
|
||||
<view class="header-top">
|
||||
<view class="recharge-introduce">
|
||||
<view class="introduce-title">[充值] PIXEL.AI虚拟货币充值</view>
|
||||
<view class="introduce-price">单价：<text>￥ {{ rechargeList[0].price }} 元/颗</text></view>
|
||||
<view class="introduce-name">类型：<text>{{ rechargeList[0].name }}</text></view>
|
||||
<view class="introduce-time">有效性：<text>{{ rechargeList[0].time }}</text></view>
|
||||
<!-- <view class="introduce-time">描述：<text>{{ rechargeList[0].description }}</text></view> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="mib-count-list">
|
||||
<view class="count-item" v-for="(item,index) in options" :key="index"
|
||||
:class="selectElementIndex === index ? 'count-item-select' : ''" @click="selectOption(index)">
|
||||
<view class="ci-left">
|
||||
<text class="ci-name">钻石包</text>
|
||||
<text class="ci-count">{{ item }} 颗</text>
|
||||
</view>
|
||||
<view class="ci-right">
|
||||
￥<text>{{ item*rechargeList[0].price }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pay-btn">
|
||||
<view class="pay-text" :class=" selectElementIndex ? '' : 'pay-disabled'" @click="toShowCell(2)">
|
||||
<u-icon name="weixin-fill" color="#b2f08f" size="40" margin-left="10"
|
||||
label="微信支付" label-color="#b2f08f" label-size="32"/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="absolute-link" v-show="showCell">
|
||||
<view class="link-block"></view>
|
||||
</view>
|
||||
<view class="mid-cell" :class="showCell?'':'mid-cell-back'">
|
||||
<view v-if="currentType === 0">
|
||||
<view class="identity-detail">
|
||||
<u-divider bgColor="#ffffff00" fontSize="35" color="#b2f08f" borderColor="#f8f9f9">
|
||||
个人资料
|
||||
</u-divider>
|
||||
<u-avatar @click="preview(fileUrl+defaultLoginAvatar)" :src="fileUrl+defaultLoginAvatar" size="200"/>
|
||||
<view class="detail-item">
|
||||
昵称：<text>{{ userMessage.realname || '战士不留姓名~' }}</text>
|
||||
</view>
|
||||
<view class="detail-item">
|
||||
绑定电话：<text>{{ userMessage.username }}</text>
|
||||
</view>
|
||||
<view class="detail-item">
|
||||
生产日期：<text>{{ getEnrollDate }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else-if="currentType === 1">
|
||||
<u-section title="充值类型" :right="false" color="#cbe7fb"
|
||||
fontSize="34" :arrow="false" subColor="#cbe7fb" />
|
||||
<scroll-view :scrollY="true" class="recharge-list">
|
||||
<view class="recharge-item" :style="{background:item.cardBackground}"
|
||||
v-for="(item,index) in rechargeList" @click="showCell = false" :key="index">
|
||||
<image :src="fileUrl + item.icon"></image>
|
||||
<view class="recharge-content">
|
||||
<view class="content-title" :style="{color:item.titleColor}">
|
||||
{{ item.name }}
|
||||
</view>
|
||||
<view class="content-abstract">
|
||||
<text>{{item.description}}</text>
|
||||
<u-icon name="arrow-right" size="12"></u-icon>
|
||||
</view>
|
||||
<view class="content-introduce">
|
||||
<text>有效天数：{{ item.time }}</text>
|
||||
<text>价格：<text style="font-weight: bold;">{{item.price}} 元/颗</text></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-loadmore :status="isFinish" color="#a7b6b8" marginTop="30" marginBottom="20" />
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view v-else>
|
||||
<view class="pay-title">
|
||||
请使用微信支付
|
||||
</view>
|
||||
<view class="pay-code">
|
||||
<image v-loading="payLoading" :src="wechatPayCode"></image>
|
||||
</view>
|
||||
<view class="pay-btns">
|
||||
<view class="pb-cancel" @click="showCell = false">
|
||||
取消支付
|
||||
</view>
|
||||
<view class="pb-config" @click="showCell = false">
|
||||
完成支付
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import configService from '@/common/config.service.js';
|
||||
import { tools } from '@/utils/utils.js';
|
||||
export default {
|
||||
props: {
|
||||
showDialog: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
userMessage: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
diamond: {
|
||||
type: Number || String,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
// 基础路径
|
||||
fileUrl: configService.fileUrl + 'pixel/my/',
|
||||
mobileFileUrl: configService.fileUrl + 'pixel/home/',
|
||||
diamondIcon: configService.fileUrl + 'pixel/pc/workshops/diamond.png',
|
||||
// 默认登录头像
|
||||
defaultLoginAvatar: 'login-avatar.png',
|
||||
// 测试用微信支付二维码
|
||||
wechatPayCode: configService.fileUrl + 'pixel/pc/home/wechat-pay-test-code.png',
|
||||
// 是否展示侧栏
|
||||
showCell: false,
|
||||
// 是否结束——loadmore加载更多，loading加载中，nomore无更多
|
||||
isFinish: 'nomore',
|
||||
// 充值类型列表
|
||||
rechargeList: [{
|
||||
icon: 'diamond.png',
|
||||
name: '钻石-diamond',
|
||||
description: '通用制图货币，助力高端操作~',
|
||||
time: '无限制',
|
||||
price: '0.1',
|
||||
cardBackground: 'linear-gradient( 80deg, #F9FAF3 0%, #3BE0FF 100%)',
|
||||
titleColor: '#004DB2',
|
||||
}],
|
||||
// 当前侧栏展示类型——0 个人信息、1 充值类型、2 支付
|
||||
currentType: 0,
|
||||
// 额度选项
|
||||
options: [50,100,200,300,500,1000],
|
||||
// 元素选择下标
|
||||
selectElementIndex: '',
|
||||
// 支付二维码加载
|
||||
payLoading: false
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
// 注册日期
|
||||
getEnrollDate(){
|
||||
let date = new Date(this.userMessage.createtime);
|
||||
return `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 侧栏展开/关闭
|
||||
toShowCell(type = 0){
|
||||
// 当前侧栏打开并且展示类型相同——关闭侧栏
|
||||
if(this.showCell && type === this.currentType){
|
||||
this.showCell = false;
|
||||
// 当前侧栏打开并且展示类型不同——切换侧栏内容
|
||||
} else if(this.showCell && type !== this.currentType){
|
||||
this.showCell = false;
|
||||
setTimeout(()=>{
|
||||
// 下面判断模拟后端获取数据生成微信支付二维码
|
||||
if(type === 2){
|
||||
this.payLoading = true;
|
||||
setTimeout(()=>{this.payLoading = false;},1000)
|
||||
}
|
||||
this.showCell = true;
|
||||
this.currentType = type;
|
||||
});
|
||||
// 当前侧栏关闭——打开侧栏
|
||||
} else {
|
||||
// 下面判断模拟后端获取数据生成微信支付二维码
|
||||
if(type === 2){
|
||||
this.payLoading = true;
|
||||
setTimeout(()=>{this.payLoading = false;},1000)
|
||||
}
|
||||
this.showCell = true;
|
||||
this.currentType = type;
|
||||
}
|
||||
},
|
||||
// 预览图片
|
||||
preview(path){
|
||||
tools.methods.lookImage(0,[path]);
|
||||
},
|
||||
// 选择支付额度
|
||||
selectOption(index){
|
||||
if(this.selectElementIndex && this.selectElementIndex !== index){
|
||||
this.showCell = false;
|
||||
setTimeout(()=>{this.toShowCell(2);})
|
||||
}
|
||||
this.selectElementIndex = this.selectElementIndex === index ? '' : index;
|
||||
if(this.currentType === 2 && !this.selectElementIndex) this.showCell = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.mobile-identity-dialog{
|
||||
width: 1280rpx;
|
||||
height: 1060rpx;
|
||||
display: flex;
|
||||
transition: 0.2s;
|
||||
background-color: #ffffff00 !important;
|
||||
.mid-main{
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
min-width: 1280rpx;
|
||||
border-radius: 20rpx;
|
||||
box-shadow: 0 0 40rpx #eee;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
.mi-close{
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 30rpx;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
opacity: 0.8;
|
||||
}
|
||||
&:active{
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
.mi-top{
|
||||
height: 310rpx;
|
||||
width: 100%;
|
||||
background: linear-gradient(to right top, #bbf388 0%, #a6ec96 100%);
|
||||
box-shadow: 0 0 20rpx #bfbfbf;
|
||||
padding: 130rpx 50rpx 20rpx;
|
||||
display: flex;
|
||||
.mit-avatar{
|
||||
width: 130rpx;
|
||||
height: 130rpx;
|
||||
border-radius: 100%;
|
||||
border: 4rpx solid rgba(230, 230, 230, 0.6);
|
||||
box-shadow: 0 0 14rpx #bfbfbf;
|
||||
transition: 0.4s;
|
||||
margin-right: 40rpx;
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
box-shadow: 0 0 14rpx #eee;
|
||||
}
|
||||
&:active{
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
.mit-left{
|
||||
height: 130rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
.mitl-item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #909090;
|
||||
font-size: 36rpx;
|
||||
text{
|
||||
color: #14151e;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mit-right{
|
||||
flex: 1;
|
||||
height: 116rpx;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-end;
|
||||
.mitr-btn{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.mitr-type{
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
margin-bottom: -2rpx;
|
||||
::v-deep .u-icon__icon{
|
||||
color: #14151e !important;
|
||||
}
|
||||
::v-deep .u-icon__label{
|
||||
color: #14151e !important;
|
||||
border-bottom: 2rpx solid #14151e;
|
||||
}
|
||||
}
|
||||
&:active{
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
.mitr-count{
|
||||
font-size: 32rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.mi-bottom{
|
||||
padding: 20rpx 120rpx;
|
||||
.header-top{
|
||||
display: flex;
|
||||
// justify-content: center;
|
||||
.recharge-introduce{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 32rpx;
|
||||
.introduce-title{
|
||||
font-weight: bold;
|
||||
font-size: 40rpx;
|
||||
margin-bottom: 14rpx;
|
||||
}
|
||||
.introduce-price{
|
||||
text{
|
||||
font-weight: bold;
|
||||
}
|
||||
margin-bottom: 14rpx;
|
||||
}
|
||||
.introduce-name{
|
||||
text{
|
||||
color:#005fd2;
|
||||
}
|
||||
margin-bottom: 14rpx;
|
||||
}
|
||||
.introduce-time{
|
||||
margin-bottom: 14rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mib-count-list{
|
||||
margin-top: 16rpx;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-gap: 26rpx;
|
||||
grid-template-columns: repeat(3,1fr);
|
||||
.count-item{
|
||||
background-color: #fafafb;
|
||||
border-radius: 20rpx;
|
||||
border: 2rpx solid #eef1f1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
height: 160rpx;
|
||||
padding: 30rpx 0;
|
||||
cursor: pointer;
|
||||
opacity: 0.7;
|
||||
.ci-left{
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.ci-name{
|
||||
font-size: 36rpx;
|
||||
color: #12131e;
|
||||
font-weight: 500;
|
||||
}
|
||||
.ci-count{
|
||||
color: #909090;
|
||||
}
|
||||
}
|
||||
.ci-right{
|
||||
margin-left: 10rpx;
|
||||
color: #ff4848;
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
// margin-bottom: 10rpx;
|
||||
text{
|
||||
font-size: 60rpx;
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
opacity: 1;
|
||||
border-color: #ff9803;
|
||||
}
|
||||
}
|
||||
.count-item-select{
|
||||
opacity: 1;
|
||||
border-color: #ff9803;
|
||||
}
|
||||
}
|
||||
.pay-btn{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 30rpx;
|
||||
.pay-text{
|
||||
cursor: pointer;
|
||||
border-radius: 16rpx;
|
||||
width: 300rpx;
|
||||
height: 84rpx;
|
||||
background-color: #12131e;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 0 10rpx #b0f89e;
|
||||
&:hover{
|
||||
opacity: 0.8;
|
||||
}
|
||||
&:active{
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
.pay-disabled{
|
||||
cursor: default;
|
||||
opacity: 0.6;
|
||||
box-shadow: none;
|
||||
&:hover{
|
||||
opacity: 0.6;
|
||||
}
|
||||
&:active{
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.absolute-link{
|
||||
width: 20rpx;
|
||||
display: flex;
|
||||
height: 76%;
|
||||
align-items: flex-end;
|
||||
.link-block{
|
||||
width: 100%;
|
||||
height: 120rpx;
|
||||
background-color: #181929;
|
||||
}
|
||||
}
|
||||
.mid-cell{
|
||||
border-radius: 20rpx;
|
||||
background-color: #12131e;
|
||||
padding: 50rpx 40rpx;
|
||||
animation-duration: 0.2s;
|
||||
animation-fill-mode: both;
|
||||
animation-name: fadeInLeft;
|
||||
::v-deep .uni-scroll-view{
|
||||
overflow: scroll !important;
|
||||
}
|
||||
.identity-detail{
|
||||
// margin: 10rpx 30rpx;
|
||||
height: 960rpx;
|
||||
background: linear-gradient(rgba(113, 113, 113, 0.4), rgba(0, 0, 0, 0.1));
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 40rpx 25rpx 0rpx;
|
||||
.u-avatar{
|
||||
margin-top: 30rpx;
|
||||
border: 2rpx solid #fff;
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
box-shadow: 0 0 20rpx #eee;
|
||||
}
|
||||
&:active{
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
.detail-item{
|
||||
margin-top: 50rpx;
|
||||
width: 90%;
|
||||
font-size: 32rpx;
|
||||
background-image: linear-gradient(to right, #c9fe76 0%, #669437 100%);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
.recharge-list{
|
||||
margin: 30rpx 0;
|
||||
width: 100%;
|
||||
height: calc(100% - 60rpx);
|
||||
.recharge-item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 200rpx;
|
||||
border-radius: 16rpx;
|
||||
width: 100%;
|
||||
color: #000;
|
||||
font-size: 24rpx;
|
||||
padding: 36rpx;
|
||||
margin-bottom: 20rpx;
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
opacity: 0.9;
|
||||
}
|
||||
&:active{
|
||||
opacity: 0.8;
|
||||
}
|
||||
image{
|
||||
width: 126rpx;
|
||||
height: 126rpx;
|
||||
margin-right: 32rpx;
|
||||
}
|
||||
.recharge-content{
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
overflow: hidden;
|
||||
.content-title{
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.content-abstract{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
text{
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.content-introduce{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.pay-title{
|
||||
margin-top: 156rpx;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: 48rpx;
|
||||
background-image: linear-gradient(to right, #c9fe76 0%, #a6ec95 60%);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.pay-code{
|
||||
margin-top: 60rpx;
|
||||
text-align: center;
|
||||
image{
|
||||
border-radius: 20rpx;
|
||||
width: 340rpx;
|
||||
height: 340rpx;
|
||||
}
|
||||
}
|
||||
.pay-btns{
|
||||
margin-top: 60rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.pb-cancel,.pb-config{
|
||||
border-radius: 10rpx;
|
||||
width: 200rpx;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
opacity: 0.8;
|
||||
}
|
||||
&:active{
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
.pb-cancel{
|
||||
color: #fbfbfb;
|
||||
border: 2rpx solid #fbfbfb;
|
||||
margin-right: 40rpx;
|
||||
}
|
||||
.pb-config{
|
||||
color: #12131e;
|
||||
background-color: #a6ec95;
|
||||
border: 2rpx solid #b4ffa1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mid-cell-back{
|
||||
animation-name: fadeOutLeft !important;
|
||||
}
|
||||
}
|
||||
::v-deep .u-mode-center-box{
|
||||
background-color: #ffffff00;
|
||||
overflow: unset !important;
|
||||
}
|
||||
::v-deep .uni-scroll-view{
|
||||
overflow: unset !important;
|
||||
}
|
||||
@keyframes fadeInLeft {
|
||||
from {
|
||||
width: 0;
|
||||
opacity: 0;
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
to {
|
||||
width: 670rpx;
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
@keyframes fadeOutLeft {
|
||||
from {
|
||||
width: 670rpx;
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
to {
|
||||
width: 0;
|
||||
display: none;
|
||||
opacity: 0;
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -295,8 +295,10 @@ export default {
|
||||
right: 50rpx;
|
||||
top: 40rpx;
|
||||
cursor: pointer;
|
||||
transition: 0.5s;
|
||||
&:hover{
|
||||
color: #b4f08e;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
.ldr-top{
|
||||
@ -354,4 +356,7 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .u-mode-center-box{
|
||||
box-shadow: 0 0 20rpx #eee;
|
||||
}
|
||||
</style>
|
||||
@ -3,7 +3,7 @@
|
||||
<view class="mobile-download-dialog">
|
||||
<view class="mobile-download-background" :style="{backgroundImage: `url(${fileUrl+background})`}">
|
||||
<image class="mdb-logo" :src="mobileFileUrl+logo"></image>
|
||||
<u-icon name="close-circle" color="#7da4c4" class="mdb-close" size="60" @click="$emit('close')" />
|
||||
<u-icon name="close-circle" color="#353c15" class="mdb-close" size="60" @click="$emit('close')" />
|
||||
<image class="mdb-code" :src="fileUrl + downloadCode"></image>
|
||||
</view>
|
||||
<view class="mobile-download-content">
|
||||
@ -79,6 +79,12 @@ export default {
|
||||
top: 30rpx;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
opacity: 0.8;
|
||||
}
|
||||
&:active{
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
.mobile-download-background{
|
||||
width: 100%;
|
||||
@ -147,4 +153,7 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .u-mode-center-box{
|
||||
box-shadow: 0 0 20rpx #c9c9c9;
|
||||
}
|
||||
</style>
|
||||
@ -65,6 +65,18 @@ export default {
|
||||
this.scrollTop = e.scrollTop;
|
||||
},
|
||||
onLoad() {
|
||||
let that = this;
|
||||
// 页面通信——换页工作台
|
||||
uni.$on('workshopPage',(fileUrl)=>{
|
||||
that.changePlat(1);
|
||||
setTimeout(()=>{
|
||||
if(that.isLogin){
|
||||
that.$refs.pageRef.formData.uploadFile = fileUrl;
|
||||
that.$refs.pageRef.formData.fileList = [{url: fileUrl}];
|
||||
that.$refs.pageRef.uploadDisabled = true;
|
||||
}
|
||||
},500);
|
||||
});
|
||||
},
|
||||
methods:{
|
||||
// 复制地址
|
||||
|
||||
@ -87,7 +87,7 @@
|
||||
</view>
|
||||
</view>
|
||||
<!-- 更多类型 -->
|
||||
<u-popup class="options-popup" v-model="showMoreOptions" mode="bottom" border-radius="30"
|
||||
<u-popup z-index="90" class="options-popup" v-model="showMoreOptions" mode="bottom" border-radius="30"
|
||||
closeable close-icon="arrow-down" close-icon-color="#a7b6b8" :maskCustomStyle="{position: 'absolute'}">
|
||||
<view class="op-content">
|
||||
<view class="op-top">
|
||||
|
||||
@ -69,7 +69,7 @@
|
||||
<view class="use-tips">Tips：<view class="uset-content">{{ serviceItem.tips || '智能创作~' }}</view></view>
|
||||
</view>
|
||||
<!-- 更多类型 -->
|
||||
<u-popup class="options-popup" v-model="showMoreOptions" mode="bottom" border-radius="30"
|
||||
<u-popup z-index="90" class="options-popup" v-model="showMoreOptions" mode="bottom" border-radius="30"
|
||||
closeable close-icon="arrow-down" close-icon-color="#a7b6b8" :maskCustomStyle="{position: 'absolute'}">
|
||||
<view class="op-content">
|
||||
<view class="op-top">
|
||||
@ -460,6 +460,8 @@ export default {
|
||||
// 真正处理方法
|
||||
async realUpload(){
|
||||
let that = this;
|
||||
// 钻石余额-1
|
||||
uni.$emit('deleteDiamond');
|
||||
let resp = await that.$api.generateImages(that.getParams(that.serviceItem));
|
||||
if(resp?.success){
|
||||
that.setResultFile(resp.data.path);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user