pc端个人信息+充值弹窗
This commit is contained in:
parent
e1968dbbbc
commit
2384142adc
@ -112,8 +112,7 @@ export default {
|
|||||||
this.$refs.uToast.show({type: 'warning',title: "图片上传格式错误!"});
|
this.$refs.uToast.show({type: 'warning',title: "图片上传格式错误!"});
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
// this.form.coverPath = file;
|
uni.$emit('workshopPage',fileList[0]?.url);
|
||||||
// this.fileList[0] = file;
|
|
||||||
},
|
},
|
||||||
// 提示语弹窗
|
// 提示语弹窗
|
||||||
showToast({type,title}){
|
showToast({type,title}){
|
||||||
|
|||||||
@ -12,12 +12,12 @@
|
|||||||
<u-icon name="download" size="34" class="hfu-icon" color="#99d7ff" />
|
<u-icon name="download" size="34" class="hfu-icon" color="#99d7ff" />
|
||||||
<text class="web-download">移动端下载</text>
|
<text class="web-download">移动端下载</text>
|
||||||
</view>
|
</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" />
|
<u-icon name="/static/pc-code.png" size="34" class="hfu-icon" />
|
||||||
<text class="web-diamond">{{ diamond }} 充值</text>
|
<text class="web-diamond">{{ diamond }} 充值</text>
|
||||||
</view>
|
</view>
|
||||||
<el-dropdown class="header-avatar" @command="toShow">
|
<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>
|
<image :src="fileUrl+getAvatar"></image>
|
||||||
<text>{{ getTopTip }}</text>
|
<text>{{ getTopTip }}</text>
|
||||||
</view>
|
</view>
|
||||||
@ -42,12 +42,15 @@
|
|||||||
<LoginDialog :showLogin="showLogin" @toast="showToast" @close="showLogin = false" @openCode="showMobileDownloadDialog = true"
|
<LoginDialog :showLogin="showLogin" @toast="showToast" @close="showLogin = false" @openCode="showMobileDownloadDialog = true"
|
||||||
@login="login"/>
|
@login="login"/>
|
||||||
<MobileDownloadDialog @toast="showToast" :showDialog="showMobileDownloadDialog" @close="showMobileDownloadDialog = false" />
|
<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>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import LoginDialog from './loginDialog.vue';
|
import LoginDialog from './loginDialog.vue';
|
||||||
import MobileDownloadDialog from './mobileDownloadDialog.vue';
|
import MobileDownloadDialog from './mobileDownloadDialog.vue';
|
||||||
|
import IdentityDialog from './identityDialog.vue';
|
||||||
import configService from '@/common/config.service.js';
|
import configService from '@/common/config.service.js';
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
@ -62,7 +65,8 @@ export default {
|
|||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
LoginDialog,
|
LoginDialog,
|
||||||
MobileDownloadDialog
|
MobileDownloadDialog,
|
||||||
|
IdentityDialog
|
||||||
},
|
},
|
||||||
data(){
|
data(){
|
||||||
return{
|
return{
|
||||||
@ -94,6 +98,8 @@ export default {
|
|||||||
showLogin: false,
|
showLogin: false,
|
||||||
// 移动端下载弹窗显示
|
// 移动端下载弹窗显示
|
||||||
showMobileDownloadDialog: false,
|
showMobileDownloadDialog: false,
|
||||||
|
// 个人信息+充值弹窗显示
|
||||||
|
showIdentityDialog: false,
|
||||||
// 下拉栏列表
|
// 下拉栏列表
|
||||||
dropList: [
|
dropList: [
|
||||||
{
|
{
|
||||||
@ -126,6 +132,11 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
let that = this;
|
||||||
|
// 页面通信——钻石-1
|
||||||
|
uni.$on('deleteDiamond',()=>{
|
||||||
|
that.diamond--;
|
||||||
|
});
|
||||||
this.init();
|
this.init();
|
||||||
},
|
},
|
||||||
methods:{
|
methods:{
|
||||||
@ -302,7 +313,10 @@ export default {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
&:hover{
|
&:hover{
|
||||||
filter: opacity(0.8);
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
&:active{
|
||||||
|
opacity: 0.6;
|
||||||
}
|
}
|
||||||
text{
|
text{
|
||||||
font-size: 28rpx;
|
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;
|
right: 50rpx;
|
||||||
top: 40rpx;
|
top: 40rpx;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
transition: 0.5s;
|
||||||
&:hover{
|
&:hover{
|
||||||
color: #b4f08e;
|
color: #b4f08e;
|
||||||
|
transform: rotate(90deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.ldr-top{
|
.ldr-top{
|
||||||
@ -354,4 +356,7 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
::v-deep .u-mode-center-box{
|
||||||
|
box-shadow: 0 0 20rpx #eee;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -3,7 +3,7 @@
|
|||||||
<view class="mobile-download-dialog">
|
<view class="mobile-download-dialog">
|
||||||
<view class="mobile-download-background" :style="{backgroundImage: `url(${fileUrl+background})`}">
|
<view class="mobile-download-background" :style="{backgroundImage: `url(${fileUrl+background})`}">
|
||||||
<image class="mdb-logo" :src="mobileFileUrl+logo"></image>
|
<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>
|
<image class="mdb-code" :src="fileUrl + downloadCode"></image>
|
||||||
</view>
|
</view>
|
||||||
<view class="mobile-download-content">
|
<view class="mobile-download-content">
|
||||||
@ -79,6 +79,12 @@ export default {
|
|||||||
top: 30rpx;
|
top: 30rpx;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
&:hover{
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
&:active{
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.mobile-download-background{
|
.mobile-download-background{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -147,4 +153,7 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
::v-deep .u-mode-center-box{
|
||||||
|
box-shadow: 0 0 20rpx #c9c9c9;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -65,6 +65,18 @@ export default {
|
|||||||
this.scrollTop = e.scrollTop;
|
this.scrollTop = e.scrollTop;
|
||||||
},
|
},
|
||||||
onLoad() {
|
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:{
|
methods:{
|
||||||
// 复制地址
|
// 复制地址
|
||||||
|
|||||||
@ -87,7 +87,7 @@
|
|||||||
</view>
|
</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'}">
|
closeable close-icon="arrow-down" close-icon-color="#a7b6b8" :maskCustomStyle="{position: 'absolute'}">
|
||||||
<view class="op-content">
|
<view class="op-content">
|
||||||
<view class="op-top">
|
<view class="op-top">
|
||||||
|
|||||||
@ -69,7 +69,7 @@
|
|||||||
<view class="use-tips">Tips：<view class="uset-content">{{ serviceItem.tips || '智能创作~' }}</view></view>
|
<view class="use-tips">Tips：<view class="uset-content">{{ serviceItem.tips || '智能创作~' }}</view></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'}">
|
closeable close-icon="arrow-down" close-icon-color="#a7b6b8" :maskCustomStyle="{position: 'absolute'}">
|
||||||
<view class="op-content">
|
<view class="op-content">
|
||||||
<view class="op-top">
|
<view class="op-top">
|
||||||
@ -460,6 +460,8 @@ export default {
|
|||||||
// 真正处理方法
|
// 真正处理方法
|
||||||
async realUpload(){
|
async realUpload(){
|
||||||
let that = this;
|
let that = this;
|
||||||
|
// 钻石余额-1
|
||||||
|
uni.$emit('deleteDiamond');
|
||||||
let resp = await that.$api.generateImages(that.getParams(that.serviceItem));
|
let resp = await that.$api.generateImages(that.getParams(that.serviceItem));
|
||||||
if(resp?.success){
|
if(resp?.success){
|
||||||
that.setResultFile(resp.data.path);
|
that.setResultFile(resp.data.path);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user