649 lines
16 KiB
Vue
649 lines
16 KiB
Vue
<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> |