624 lines
16 KiB
Vue
624 lines
16 KiB
Vue
<template>
|
||
<!-- #ifdef APP -->
|
||
<view class="recharge-detail" :style="{ paddingTop: CustomBar+'rpx' }">
|
||
<view class="app-top" :style="{ height: CustomBar+'rpx',
|
||
background: topLevel===0? '#ffffff00' : `rgba(255, 255, 255,${topLevel})` }"></view>
|
||
<!-- #endif -->
|
||
<!-- #ifndef APP -->
|
||
<view class="recharge-detail">
|
||
<!-- #endif -->
|
||
<view class="rd-top">
|
||
<!-- #ifdef MP -->
|
||
<view :style="{height: `${StatusBar}px`}"></view>
|
||
<view class="app-top" :style="{height: `${StatusBar}px`,background: topLevel===0? '#ffffff00' : `rgba(255, 255, 255,${topLevel})`}"></view>
|
||
<view class="mobile-logo" :style="{height: `${CustomBarHeight}px`,backgroundColor: `rgba(255, 255, 255,${topLevel})`}">
|
||
<!-- #endif -->
|
||
<!-- #ifndef MP -->
|
||
<view class="mobile-logo" :style="{backgroundColor: `rgba(255, 255, 255,${topLevel})`}">
|
||
<!-- #endif -->
|
||
<u-icon name="arrow-left" size="40" class="back" @click="back"
|
||
:color="topLevel===0? '#f9f9f9' : `rgba(194, 234, 4,${topLevel})`"></u-icon>
|
||
<image :src="fileUrl+logo"></image>
|
||
<view style="width: 75rpx;"></view>
|
||
</view>
|
||
<view class="recharge-top" :style="{background:item.background}">
|
||
<view class="recharge-header" :style="{background:item.detailBackground}">
|
||
<view class="header-top">
|
||
<image :src="myFileUrl+item.icon"></image>
|
||
<view class="recharge-introduce">
|
||
<view class="introduce-title">[充值] PIXEL.AI虚拟货币充值</view>
|
||
<view class="introduce-price">单价：<text>￥ {{ item.price }} 元/颗</text></view>
|
||
<view class="introduce-name">类型：<text>{{ item.name }}</text></view>
|
||
<view class="introduce-time">有效性：<text>{{ item.time }}</text></view>
|
||
</view>
|
||
</view>
|
||
<view class="header-bottom">
|
||
<text>· {{ item.description }}</text>
|
||
<!-- <u-icon name="arrow-right" size="24" /> -->
|
||
</view>
|
||
</view>
|
||
<view class="recharge-body">
|
||
<view class="recharge-bt">
|
||
充值额度：
|
||
</view>
|
||
<view class="recharge-tags">
|
||
<u-tag v-for="(item,index) in options" :key="index" :index="index"
|
||
:text="item+'颗'" @click="selectElement" :class="selectElementIndex===index?'u-tag-select':''"></u-tag>
|
||
<!-- <u-tag :index="-1" :class="selectElementIndex===-1?'u-tag-select':''"
|
||
:text="otherNum?(otherNum+'颗'):'其它数量'" @click="selectOtherElement"></u-tag> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="recharge-pay">
|
||
<view class="recharge-pl">
|
||
<view class="recharge-plt">
|
||
总计：<text>￥{{ form.price?((form.price*form.num).toFixed(2)):0 }}</text>
|
||
</view>
|
||
<view class="recharge-plb">
|
||
<u-checkbox size="30" @change="isAgree = !isAgree" :activeColor="item.payFontColor" v-model="isAgree" />
|
||
我已阅读并同意<text @click="toAgree">《PIXEL.AI支付协议》</text>
|
||
</view>
|
||
</view>
|
||
<view class="recharge-pr">
|
||
<button :loading="payLoading" :style="{background:item.payFontColor,boxShadow:item.payBoxShadow}"
|
||
type="button" @click="payClick">立即支付</button>
|
||
</view>
|
||
</view>
|
||
<u-keyboard ref="uKeyboard" mode="number" v-model="showKeyboard" :cancelBtn="false"
|
||
:dotEnabled="false" :confirmBtn="false" @change="valChange" @backspace="backspace"></u-keyboard>
|
||
<u-toast ref="uToast"></u-toast>
|
||
<u-popup class="pay-popup" v-model="showPayResult" mode="bottom" border-radius="30">
|
||
<view class="popup-view">
|
||
<view class="popup-title">{{ payResult.result || '支付失败' }} ￥{{ payResult.amount }}</view>
|
||
<view class="popup-payfont">微信支付</view>
|
||
<view class="popup-content">
|
||
<view class="content-result" v-if="payResult.result">
|
||
钻石余额：{{ (personCount-options[payResult.buyType-1]) || 0 }}
|
||
<text :style="{ backgroundImage: item.payFontColor }">+ {{ options[payResult.buyType-1] }}</text>
|
||
</view>
|
||
<view class="content-result" v-else>
|
||
钻石余额：{{ personCount || 0 }}
|
||
</view>
|
||
<view class="content-time">{{ dateFormat(payResult.createTime) }}</view>
|
||
</view>
|
||
<view class="popup-btn" @click="showPayResult = false" v-if="payResult.result"
|
||
:style="{ background: item.payFontColor, boxShadow: item.payBoxShadow }">
|
||
完 成
|
||
</view>
|
||
<view class="popup-btn" @click="showPayResult = false" v-else
|
||
:style="{ background: payErrorColor, boxShadow: payBoxShadow }">
|
||
完 成
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import configService from '@/common/config.service.js';
|
||
export default {
|
||
// #ifdef MP
|
||
options: {
|
||
styleIsolation: 'shared'
|
||
},
|
||
// #endif
|
||
data(){
|
||
return{
|
||
// #ifdef MP
|
||
// 微信小程序自定义导航栏参数
|
||
StatusBar: this.StatusBar || 0,
|
||
CustomBarHeight: this.Custom.height+(this.Custom.top-this.StatusBar)*2 || 0,
|
||
// #endif
|
||
// 基础地址
|
||
fileUrl: configService.fileUrl + 'pixel/home/',
|
||
myFileUrl: configService.fileUrl + 'pixel/my/',
|
||
// logo图标
|
||
logo: 'logo-new.png',
|
||
topLevel: 0,// 页面是否滚动到顶
|
||
//支付详情
|
||
item:{
|
||
icon: 'diamond.png',
|
||
price: 0.1,
|
||
name: '钻石-diamond',
|
||
description: '通用制图货币，助力高端操作~',
|
||
time: '无限制',
|
||
background:'linear-gradient( 190deg, #4BACFF 0%, rgba(255,255,255,0.77) 100%)',// 详情总体背景
|
||
detailBackground:'linear-gradient( 80deg, rgba(255,255,255,0.77) 0%, #4BACFF 100%)',// 详情内部单元背景
|
||
payFontColor:'linear-gradient( 90deg, rgba(54,141,255,0.99) 0%, #72A0FF 100%)',// 支付按钮颜色及复选框颜色
|
||
payBoxShadow:'0px 2px 10px 1px rgba(54,141,255,0.19)',// 支付按钮阴影
|
||
},
|
||
// 支付失败按钮颜色
|
||
payErrorColor: 'linear-gradient( 90deg, rgba(255, 81, 51, 1.0) 0%, #ff8b74 100%)',
|
||
// 支付失败按钮阴影
|
||
payBoxShadow:'0px 2px 10px 1px rgba(255, 122, 56, 0.2)',
|
||
// 支付订单
|
||
form:{
|
||
price: 0.1,// 单价
|
||
num: 0,// 数量
|
||
},
|
||
// 元素选择下标
|
||
selectElementIndex: '',
|
||
// 额度选项
|
||
options: [50,100,200,300,500,1000],
|
||
// 其它数量
|
||
otherNum: '',
|
||
isAgree:false, //是否同意协议
|
||
// 打开键盘
|
||
showKeyboard: false,
|
||
// 支付按钮加载效果
|
||
payLoading: false,
|
||
// 订单表单
|
||
orderForm: {
|
||
amount: '',// 金额
|
||
buyType: '',// 1-5, 2-10, 3-20, 4-30, 5-50, 6-100——这里换序号1、2、3...
|
||
// memberAccount: '',// 支付人账号
|
||
memberId: '',// 用户id
|
||
orderType: '个人账户钻石充值',// 支付用途
|
||
},
|
||
// 显示支付结果
|
||
showPayResult: false,
|
||
// 剩余钻石余额
|
||
personCount: 0,
|
||
// 支付结果
|
||
payResult: {}
|
||
}
|
||
},
|
||
onPageScroll(e) {
|
||
// #ifndef H5
|
||
const level = e.scrollTop/60;
|
||
if(level<=1) this.topLevel = level;
|
||
else this.topLevel = 1;
|
||
// #endif
|
||
},
|
||
|
||
onShow(){
|
||
let orderId = uni.getStorageSync('payVisabled');
|
||
if(orderId){
|
||
this.showPayResult = true;
|
||
this.getPayResult(orderId);
|
||
this.myCurrency();
|
||
uni.setStorageSync('payVisabled','');
|
||
}
|
||
// #ifndef H5
|
||
},
|
||
// #endif
|
||
|
||
// #ifdef H5
|
||
let that = this;
|
||
window.onscroll = function () {
|
||
//为了保证兼容性，这里取三个值，哪个有值取哪一个
|
||
//scrollTop就是触发滚轮事件时滚轮的高度
|
||
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
|
||
const level = scrollTop/60;
|
||
if(level<=1) that.topLevel = level;
|
||
else that.topLevel = 1;
|
||
}
|
||
},
|
||
|
||
onHide() {
|
||
window.onscroll = null;
|
||
},
|
||
// #endif
|
||
onLoad(){
|
||
const { username, id } = JSON.parse(this.$store.state.user_message);
|
||
// this.orderForm.memberAccount = username;
|
||
this.orderForm.memberId = id;
|
||
},
|
||
methods:{
|
||
// 获取支付结果
|
||
async getPayResult(id){
|
||
let res = await this.$api.singleOrder(id);
|
||
if(res.success){
|
||
this.payResult = res.data;
|
||
}else{
|
||
this.$refs.uToast.show({type:'error',title: "支付结果获取失败！"});
|
||
}
|
||
},
|
||
// 获取我的余额
|
||
async myCurrency(){
|
||
let res = await this.$api.getCurrency();
|
||
if(res?.success){
|
||
this.personCount = res.data.numerical;
|
||
} else {
|
||
this.$refs.uToast.show({type:'error',title: "余额数据拉取失败！"});
|
||
}
|
||
},
|
||
// 时间格式化
|
||
dateFormat(time){
|
||
let date = time ? new Date(time) : new Date();
|
||
let month = date.getMonth()+1,
|
||
day = date.getDate(),
|
||
hour = date.getHours(),
|
||
minute = date.getMinutes(),
|
||
second = date.getSeconds();
|
||
return `${date.getFullYear()}年${month<10?'0':''}${month}月${day<10?'0':''}${day}日 ${hour<10?'0':''}${hour}:${minute<10?'0':''}${minute}`;
|
||
},
|
||
// 返回
|
||
back(){
|
||
// uni.navigateBack();
|
||
uni.redirectTo({
|
||
url: '/pages/mobile_web/recharge/recharge'
|
||
})
|
||
},
|
||
// 支付协议
|
||
toAgree() {
|
||
// 跳转富文本
|
||
},
|
||
// 元素选择
|
||
selectElement(index){
|
||
const selected = this.selectElementIndex === index;
|
||
this.form.num = selected ? 0 : this.options[index];
|
||
this.selectElementIndex = selected ? '' : index;
|
||
this.orderForm.buyType = selected ? '' : index + 1;
|
||
},
|
||
// 更多数量
|
||
selectOtherElement(index){
|
||
const selected = this.selectElementIndex === index;
|
||
// this.form.num = selected ? 0 : this.options[index];
|
||
if(selected){
|
||
this.form.num = 0;
|
||
this.selectElementIndex = '';
|
||
} else {
|
||
this.showKeyboard = true;
|
||
}
|
||
},
|
||
// 按键被点击(点击退格键不会触发此事件)
|
||
valChange(val) {
|
||
// 将每次按键的值拼接到value变量中，注意+=写法
|
||
this.otherNum += val;
|
||
this.form.num = this.otherNum;
|
||
this.selectElementIndex = -1;
|
||
},
|
||
// 退格键被点击
|
||
backspace() {
|
||
// 删除value的最后一个字符
|
||
if(this.otherNum.length){
|
||
this.otherNum = this.otherNum.substr(0, this.otherNum.length - 1);
|
||
this.form.num = this.otherNum?this.otherNum:0;
|
||
this.selectElementIndex = this.otherNum?-1:'';
|
||
}
|
||
},
|
||
// 支付
|
||
async payClick() {
|
||
// #ifndef APP
|
||
if(this.isMpWeb()) return;
|
||
// #endif
|
||
|
||
if(!this.isAgree){
|
||
this.$refs.uToast.show({type:'warning',title: "请阅读并勾选同意《PIXEL.AI支付协议》"});
|
||
return;
|
||
}
|
||
const { num, price } = this.form;
|
||
if(!num||num<50){
|
||
this.$refs.uToast.show({type:'warning',title: "购买数量至少50颗"});
|
||
return;
|
||
}
|
||
try{
|
||
this.payLoading = true;
|
||
this.orderForm.amount = (price*num).toFixed(2);
|
||
// this.orderForm.amount = 0.01;// 测试换成0.01
|
||
let res = await this.$api.h5Pay(this.orderForm);
|
||
if(res.success){
|
||
let url = res.data.h5Url;
|
||
uni.setStorageSync('payVisabled',res.data.id);
|
||
if(this.UniPlatform === 'web'){
|
||
location.href = url + '&redirect_url=' + encodeURIComponent(window.location.href);
|
||
}else{
|
||
uni.navigateTo({
|
||
url: `/pages/index/webview?title=微信支付&src=${encodeURI(url)}`
|
||
})
|
||
}
|
||
}else{
|
||
this.$refs.uToast.show({type:'error',title: "订单创建失败！"});
|
||
}
|
||
}catch(e){
|
||
}finally{
|
||
this.payLoading = false;
|
||
}
|
||
},
|
||
// #ifndef APP
|
||
// 判断是否在微信内置浏览器打开
|
||
isMpWeb(){
|
||
if(navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == 'micromessenger'){
|
||
this.$refs.uToast.show({type:'warning',title: "请在手机浏览器打开，进行支付操作!"});
|
||
return true;
|
||
}else{
|
||
return false;
|
||
}
|
||
},
|
||
// #endif
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.recharge-detail{
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 100vh;
|
||
background: linear-gradient(to bottom, #53a8ed 0%, #f9f9f9 30%, #f9f9f9 100%);
|
||
// #ifdef APP || MP
|
||
.app-top{
|
||
width: 100%;
|
||
position: fixed;
|
||
z-index: 81;
|
||
}
|
||
// #endif
|
||
.rd-top{
|
||
// #ifdef APP
|
||
.app-top{
|
||
width: 100%;
|
||
position: fixed;
|
||
z-index: 81;
|
||
top: 0;
|
||
}
|
||
// #endif
|
||
.mobile-logo{
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.back{
|
||
margin-left: 35rpx;
|
||
margin-top: 5rpx
|
||
}
|
||
position: fixed;
|
||
z-index: 81;
|
||
padding: 15rpx 0;
|
||
image{
|
||
width: 200rpx;
|
||
height: 45rpx;
|
||
}
|
||
// .u-icon{
|
||
|
||
// }
|
||
}
|
||
.recharge-top{
|
||
height: 710rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
padding: 0 32rpx;
|
||
.recharge-header{
|
||
margin-top: 120rpx;
|
||
display: flex;
|
||
height: 350rpx;
|
||
width: 100%;
|
||
border-radius: 16rpx;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
padding: 64rpx 30rpx 36rpx;
|
||
.header-top{
|
||
display: flex;
|
||
image{
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
margin-right: 40rpx;
|
||
}
|
||
.recharge-introduce{
|
||
display: flex;
|
||
flex-direction: column;
|
||
font-size: 26rpx;
|
||
.introduce-title{
|
||
font-weight: bold;
|
||
font-size: 34rpx;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
.introduce-price{
|
||
text{
|
||
font-weight: bold;
|
||
}
|
||
margin-bottom: 10rpx;
|
||
}
|
||
.introduce-name{
|
||
text{
|
||
color:#005fd2;
|
||
}
|
||
margin-bottom: 10rpx;
|
||
}
|
||
.introduce-time{
|
||
|
||
}
|
||
}
|
||
}
|
||
.header-bottom{
|
||
margin-left: 10rpx;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #5e5e5e;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: flex;
|
||
align-items: center;
|
||
text{
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
margin-right: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
.recharge-body{
|
||
margin-top: 24rpx;
|
||
display: flex;
|
||
// height: 400rpx;
|
||
width: 100%;
|
||
border-radius: 16rpx;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
padding: 32rpx 0;
|
||
background-color: #FFFFFF;
|
||
margin-bottom: -80%;
|
||
.recharge-bt{
|
||
font-size: 32rpx;
|
||
color: #000000;
|
||
margin: 0 42rpx;
|
||
}
|
||
.recharge-tags{
|
||
margin: 32rpx 42rpx 0;
|
||
display: grid;
|
||
grid-gap: 26rpx;
|
||
grid-template-columns: repeat(3,1fr);
|
||
/deep/.u-tag{
|
||
// width: 200rpx;
|
||
height: 74rpx;
|
||
font-size: 28rpx;
|
||
display: flex;
|
||
color: rgba(41,121,255,0.6);
|
||
background-color: #fff;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
&:active{
|
||
opacity: 0.8;
|
||
}
|
||
}
|
||
.u-tag-select{
|
||
// #ifndef MP
|
||
box-shadow: 0 0 15rpx #eee;
|
||
color: #2979ff;
|
||
background-color: rgba(236,245,255,0.8);
|
||
// #endif
|
||
// #ifdef MP
|
||
/deep/.u-tag{
|
||
box-shadow: 0 0 15rpx #eee;
|
||
color: #2979ff;
|
||
background-color: rgba(236,245,255,0.8);
|
||
}
|
||
// #endif
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.recharge-pay {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
position: fixed;
|
||
padding: 26rpx 30rpx;
|
||
width: 100%;
|
||
bottom: 0;
|
||
left: 0;
|
||
height: 150rpx;
|
||
background-color: #FFFFFF;
|
||
.recharge-pl{
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-around;
|
||
width: calc(100% - 228rpx);
|
||
.recharge-plt{
|
||
font-weight: 500;
|
||
font-size: 30rpx;
|
||
color: #000000;
|
||
line-height: 48rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
text{
|
||
font-size: 36rpx;
|
||
color: #FF3640;
|
||
}
|
||
}
|
||
.recharge-plb{
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #AFAFAF;
|
||
display: flex;
|
||
align-items: center;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
text{
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
color: #368DFF;
|
||
}
|
||
.u-checkbox{
|
||
display: inline;
|
||
margin-right: 10rpx;
|
||
min-width: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
.recharge-pr{
|
||
min-width: 228rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
button{
|
||
width: 100%;
|
||
height: 88rpx;
|
||
border-radius: 44rpx;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
line-height: 120rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
&:active{
|
||
opacity: 0.8;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.pay-popup{
|
||
.popup-view{
|
||
background-color: #f5f5f5;
|
||
padding: 60rpx 25rpx 20rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
.popup-title{
|
||
color: #212121;
|
||
font-size: 46rpx;
|
||
font-weight: bold;
|
||
}
|
||
.popup-payfont{
|
||
margin: 20rpx 0 36rpx;
|
||
color: #373737;
|
||
font-size: 28rpx;
|
||
}
|
||
.popup-content{
|
||
width: 100%;
|
||
background-color: #ffffff;
|
||
border-radius: 16rpx;
|
||
padding: 30rpx 40rpx;
|
||
font-size: 30rpx;
|
||
.content-result{
|
||
font-size: 34rpx;
|
||
margin-bottom: 40rpx;
|
||
text{
|
||
margin-left: 10rpx;
|
||
font-weight: bold;
|
||
background-clip: text;
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
}
|
||
.content-time{
|
||
color: #AFAFAF;
|
||
text-align: end;
|
||
}
|
||
}
|
||
.popup-btn{
|
||
border-radius: 56rpx;
|
||
width: 100%;
|
||
height: 100rpx;
|
||
font-size: 34rpx;
|
||
margin: 50rpx 0 40rpx;
|
||
font-weight: bold;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #eee;
|
||
&:active{
|
||
opacity: 0.8;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |