ea
This commit is contained in:
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"custom-nav": "/components/custom-nav/custom-nav"
|
||||
},
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
@@ -0,0 +1,112 @@
|
||||
import { diamonds, diamondVirtualPayment, updatesessionkey, updateuserinfo, userInfo } from '../../../utils/request';
|
||||
|
||||
interface CoinPackage {
|
||||
id: number
|
||||
coins: number
|
||||
price: number
|
||||
ribbon?: string
|
||||
ribbonClass?: string
|
||||
artClass: string
|
||||
chest?: boolean
|
||||
selected: boolean
|
||||
}
|
||||
Page({
|
||||
data: {
|
||||
packages: [],
|
||||
selectedPackage: null as CoinPackage | null,
|
||||
userInfo: { diamond: 0 }
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
this.setData({ userInfo: wx.getStorageSync('userInfo') })
|
||||
diamonds().then((res: any) => {
|
||||
if (!res.code) {
|
||||
this.setData({ packages: res.data });
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
handleBack() {
|
||||
wx.navigateBack({
|
||||
fail: () => wx.switchTab({ url: '/pages/my/my' }),
|
||||
})
|
||||
},
|
||||
handlePackageTap(e: WechatMiniprogram.TouchEvent) {
|
||||
const id = e.currentTarget.dataset.id
|
||||
const selectedPackage = this.data.packages.find((item: CoinPackage) => item.id === id) || this.data.selectedPackage
|
||||
|
||||
this.setData({
|
||||
selectedPackage,
|
||||
})
|
||||
},
|
||||
handleBuy() {
|
||||
const that = this;
|
||||
if (that.data.selectedPackage == null) {
|
||||
return;
|
||||
}
|
||||
wx.showLoading({ title: '处理中, 请稍后.', mask: true });
|
||||
wx.checkSession({
|
||||
success() {
|
||||
that.payment();
|
||||
},
|
||||
fail() {
|
||||
wx.login({
|
||||
success(login) {
|
||||
updatesessionkey(login.code).then((res: any) => {
|
||||
if (!res.code) {
|
||||
that.payment();
|
||||
} else {
|
||||
wx.showModal({
|
||||
title: '温馨提示',
|
||||
content: res.message,
|
||||
showCancel: false
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
wx.hideLoading();
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
payment() {
|
||||
let that = this;
|
||||
diamondVirtualPayment((that.data.selectedPackage || { id: 0 }).id).then((res: any) => {
|
||||
wx.requestVirtualPayment({
|
||||
signData: JSON.stringify(res.param.signData),
|
||||
paySig: res.param.paySig,
|
||||
signature: res.param.signature,
|
||||
mode: res.param.mode,
|
||||
success(result: any) {
|
||||
wx.hideLoading();
|
||||
console.log(result)
|
||||
|
||||
userInfo().then((res: any) => {
|
||||
if (!res.code) {
|
||||
wx.setStorageSync('userInfo', res.data);
|
||||
that.setData({ userInfo: res.data });
|
||||
}
|
||||
})
|
||||
},
|
||||
fail(error: any) {
|
||||
wx.hideLoading();
|
||||
console.log(error);
|
||||
wx.showModal({
|
||||
title: '温馨提示',
|
||||
content: '支付失败',
|
||||
showCancel: false
|
||||
})
|
||||
}
|
||||
});
|
||||
}).catch(() => {
|
||||
wx.hideLoading();
|
||||
wx.showModal({
|
||||
title: '温馨提示',
|
||||
content: '系统繁忙, 请稍后再试',
|
||||
showCancel: false
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,71 @@
|
||||
<view class="coin-page">
|
||||
<custom-nav padding-x="42">
|
||||
<view class="coin-nav">
|
||||
<view class="nav-back" bindtap="handleBack"><text></text></view>
|
||||
<text class="nav-title">购买金币</text>
|
||||
<view class="nav-placeholder"></view>
|
||||
</view>
|
||||
</custom-nav>
|
||||
|
||||
<view class="coin-content">
|
||||
<view class="balance-card">
|
||||
<image class="balance-art icon-placeholder" src="/static/images/icons/frame_1.png" mode="widthFix"></image>
|
||||
<view class="balance-copy">{{userInfo.diamond}}</view>
|
||||
</view>
|
||||
|
||||
<view class="section-head">
|
||||
<text class="section-title">金币套餐</text>
|
||||
<view class="section-note">
|
||||
<image class="info-icon icon-placeholder" src="/static/images/info-circle.png" mode="aspectFit"></image>
|
||||
<text>套餐数量与价格以实际配置为准</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="package-grid">
|
||||
<view
|
||||
wx:for="{{packages}}"
|
||||
wx:key="id"
|
||||
class="package-card {{selectedPackage.id == item.id ? 'selected' : ''}}"
|
||||
data-id="{{item.id}}"
|
||||
bindtap="handlePackageTap"
|
||||
>
|
||||
<view wx:if="{{item.ribbon}}" class="ribbon {{item.ribbonClass}}">{{item.ribbon}}</view>
|
||||
<text class="package-name">{{item.coins}} 金币</text>
|
||||
<image class="package-art {{item.artClass}} icon-placeholder" src="{{item.icon}}" mode="widthFix"></image>
|
||||
<view class="package-price">
|
||||
<text>¥</text>
|
||||
<text>{{item.price}}</text>
|
||||
</view>
|
||||
<view wx:if="{{item.selected}}" class="selected-check"><text></text></view>
|
||||
|
||||
<view wx:if="{{item.tag == 'best_seller'}}" class="right-jiao best_seller">热卖</view>
|
||||
<view wx:if="{{item.tag == 'hot'}}" class="right-jiao">爆款</view>
|
||||
<view wx:if="{{item.tag == 'recommend'}}" class="right-jiao recommend">推荐</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tips-card">
|
||||
<view class="tip-row">
|
||||
<image class="tip-icon flash-tip icon-placeholder" src="/static/images/icons/frame_7.png" mode="aspectFit"></image>
|
||||
<text>充值后金币实时到账</text>
|
||||
</view>
|
||||
<view class="tip-row">
|
||||
<image class="tip-icon shield-tip icon-placeholder" src="/static/images/icons/frame_.png" mode="aspectFit"></image>
|
||||
<text>金币仅用于平台内数字人视频相关功能</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="selected-bar">
|
||||
<view class="selected-left">
|
||||
<image class="selected-icon icon-placeholder" src="/static/images/icons/check-circle-filled.png" mode="aspectFit"></image>
|
||||
<text>已选：</text>
|
||||
<text class="selected-coins">{{selectedPackage.coin || 0}}</text>
|
||||
<text>金币</text>
|
||||
</view>
|
||||
<text class="selected-price">¥{{selectedPackage.price || 0.00}}</text>
|
||||
</view>
|
||||
|
||||
<view class="buy-btn" bindtap="handleBuy">立即购买</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -0,0 +1,509 @@
|
||||
page {
|
||||
min-height: 100vh;
|
||||
background: #fbfaff;
|
||||
color: #111827;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.coin-page {
|
||||
width: 750rpx;
|
||||
min-height: 100vh;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
background:
|
||||
radial-gradient(circle at 80% 5%, rgba(138, 103, 255, 0.16), transparent 20%),
|
||||
radial-gradient(circle at 18% 8%, rgba(115, 129, 255, 0.12), transparent 24%),
|
||||
linear-gradient(180deg, #f9f6ff 0%, #fbfbff 42%, #ffffff 100%);
|
||||
}
|
||||
|
||||
.coin-nav {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.nav-back,
|
||||
.nav-placeholder {
|
||||
width: 58rpx;
|
||||
height: 58rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.nav-back text {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
display: block;
|
||||
border-left: 5rpx solid #111827;
|
||||
border-bottom: 5rpx solid #111827;
|
||||
transform: rotate(45deg);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 31rpx;
|
||||
line-height: 1.2;
|
||||
font-weight: 900;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.coin-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 24rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.balance-card {
|
||||
position: relative;
|
||||
/* height: 198rpx; */
|
||||
/* padding: 36rpx 38rpx; */
|
||||
border-radius: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
/* overflow: hidden; */
|
||||
/* background:
|
||||
radial-gradient(circle at 82% 46%, rgba(126, 83, 255, 0.22), transparent 30%),
|
||||
linear-gradient(100deg, #ffffff 0%, #eee8ff 100%); */
|
||||
/* border: 1rpx solid #ded6ff; */
|
||||
box-shadow: 0 10rpx 22rpx rgba(103, 86, 176, 0.1);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.balance-copy {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
z-index: 2026;
|
||||
font-weight: bold;
|
||||
font-size: 72rpx;
|
||||
left: 110rpx;
|
||||
bottom: 45rpx;
|
||||
}
|
||||
|
||||
.balance-title {
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.balance-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18rpx;
|
||||
}
|
||||
|
||||
.coin-icon {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
font-size: 20rpx;
|
||||
font-weight: 900;
|
||||
background: linear-gradient(135deg, #ffd56b, #ff9900);
|
||||
box-shadow: inset 0 0 0 4rpx rgba(255, 255, 255, 0.38), 0 7rpx 13rpx rgba(248, 154, 12, 0.2);
|
||||
}
|
||||
|
||||
.balance-count {
|
||||
font-size: 68rpx;
|
||||
line-height: 1;
|
||||
font-weight: 900;
|
||||
color: #0e1118;
|
||||
}
|
||||
|
||||
.balance-art {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
/* position: absolute; */
|
||||
/* left: 0;
|
||||
top: 0; */
|
||||
}
|
||||
|
||||
.open-box {
|
||||
width: 142rpx;
|
||||
height: 104rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.box-lid {
|
||||
width: 142rpx;
|
||||
height: 44rpx;
|
||||
border-radius: 24rpx 24rpx 8rpx 8rpx;
|
||||
background: linear-gradient(135deg, rgba(196, 163, 255, 0.55), rgba(138, 89, 255, 0.28));
|
||||
transform: rotate(6deg) translateY(12rpx);
|
||||
}
|
||||
|
||||
.box-body {
|
||||
width: 126rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 12rpx 12rpx 28rpx 28rpx;
|
||||
background: linear-gradient(135deg, rgba(126, 83, 255, 0.28), rgba(196, 163, 255, 0.5));
|
||||
box-shadow: 0 8rpx 18rpx rgba(126, 83, 255, 0.18);
|
||||
}
|
||||
|
||||
.big-coin {
|
||||
width: 76rpx;
|
||||
height: 76rpx;
|
||||
margin-top: -108rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #ffe28b, #ffac19);
|
||||
box-shadow: inset 0 0 0 8rpx rgba(255, 255, 255, 0.34), 0 10rpx 18rpx rgba(255, 172, 25, 0.24);
|
||||
}
|
||||
|
||||
.big-coin text {
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
border-radius: 8rpx;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.art-spark {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
border-radius: 5rpx;
|
||||
background: #ffffff;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.spark-one {
|
||||
margin-right: -12rpx;
|
||||
margin-bottom: 98rpx;
|
||||
}
|
||||
|
||||
.spark-two {
|
||||
width: 18rpx;
|
||||
height: 18rpx;
|
||||
margin-left: -4rpx;
|
||||
margin-bottom: 46rpx;
|
||||
background: #8d73ff;
|
||||
}
|
||||
|
||||
.section-head {
|
||||
margin-top: 34rpx;
|
||||
margin-bottom: 22rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 27rpx;
|
||||
font-weight: 900;
|
||||
color: #121722;
|
||||
}
|
||||
|
||||
.section-note {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
color: #85899a;
|
||||
font-size: 20rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.info-icon {
|
||||
width: 18rpx;
|
||||
height: 18rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2rpx solid currentColor;
|
||||
font-size: 14rpx;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.package-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 22rpx 18rpx;
|
||||
}
|
||||
|
||||
.package-card {
|
||||
position: relative;
|
||||
height: 230rpx;
|
||||
border-radius: 22rpx;
|
||||
padding: 28rpx 0;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
box-shadow: 0 8rpx 20rpx rgba(82, 90, 146, 0.08);
|
||||
border-width: 2rpx;
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.package-card.selected {
|
||||
border-color: #7351ff;
|
||||
background-color: rgba(196, 163, 255, 0.1);
|
||||
}
|
||||
|
||||
.ribbon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 74rpx;
|
||||
height: 42rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
font-size: 18rpx;
|
||||
font-weight: 800;
|
||||
transform: rotate(-45deg) translate(-22rpx, -10rpx);
|
||||
}
|
||||
|
||||
.red-ribbon {
|
||||
background: #ff5b78;
|
||||
}
|
||||
|
||||
.purple-ribbon {
|
||||
background: #7452ff;
|
||||
}
|
||||
|
||||
.gold-ribbon {
|
||||
background: #ffb629;
|
||||
}
|
||||
|
||||
.package-name {
|
||||
color: #111827;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.1;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.package-art {
|
||||
width: 82rpx;
|
||||
margin-top: 18rpx;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.coin-pile {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.coin-pile text {
|
||||
width: 54rpx;
|
||||
height: 22rpx;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
background: linear-gradient(180deg, #ffe28b, #f8a113);
|
||||
box-shadow: inset 0 0 0 4rpx rgba(255, 255, 255, 0.36), 0 8rpx 0 -2rpx #e98a0d;
|
||||
}
|
||||
|
||||
.coin-pile text:nth-child(1) {
|
||||
margin-right: -26rpx;
|
||||
}
|
||||
|
||||
.coin-pile text:nth-child(2) {
|
||||
margin-bottom: 26rpx;
|
||||
}
|
||||
|
||||
.coin-pile text:nth-child(3) {
|
||||
margin-left: -26rpx;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.large-pile .coin-pile text {
|
||||
width: 66rpx;
|
||||
height: 26rpx;
|
||||
}
|
||||
|
||||
.mini-chest {
|
||||
width: 74rpx;
|
||||
height: 54rpx;
|
||||
margin-left: -18rpx;
|
||||
border-radius: 8rpx 8rpx 14rpx 14rpx;
|
||||
background: linear-gradient(90deg, #7b56d9 0 28%, #ffbd47 28% 46%, #a166f0 46% 100%);
|
||||
box-shadow: 0 8rpx 12rpx rgba(113, 83, 226, 0.18);
|
||||
}
|
||||
|
||||
.package-price {
|
||||
margin-top: auto;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 4rpx;
|
||||
color: #6d4cff;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.package-price text:first-child {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.package-price text:last-child {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.right-jiao {
|
||||
position: absolute;
|
||||
left: -90rpx;
|
||||
top: -9rpx;
|
||||
width: 100%;
|
||||
height: 50rpx;
|
||||
line-height: 70rpx;
|
||||
background-color: #6d4cff;
|
||||
z-index: 9999;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
font-size: 18rpx;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.right-jiao.best_seller {
|
||||
background-color: orange;
|
||||
}
|
||||
.right-jiao.recommend{
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.selected-check {
|
||||
position: absolute;
|
||||
right: 12rpx;
|
||||
bottom: 12rpx;
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #6f4cff;
|
||||
}
|
||||
|
||||
.selected-check text {
|
||||
width: 16rpx;
|
||||
height: 9rpx;
|
||||
border-left: 4rpx solid #ffffff;
|
||||
border-bottom: 4rpx solid #ffffff;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.tips-card {
|
||||
margin-top: 26rpx;
|
||||
padding: 16rpx 24rpx;
|
||||
border-radius: 18rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12rpx;
|
||||
background: #f5f3ff;
|
||||
color: #73788a;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.tip-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.tip-icon {
|
||||
width: 22rpx;
|
||||
height: 22rpx;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
background: #6f4cff;
|
||||
}
|
||||
|
||||
.shield-tip {
|
||||
border-radius: 6rpx 6rpx 12rpx 12rpx;
|
||||
}
|
||||
|
||||
.selected-bar {
|
||||
height: 62rpx;
|
||||
margin-top: 14rpx;
|
||||
padding: 0 30rpx 0 24rpx;
|
||||
border-radius: 999rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: #ffffff;
|
||||
border: 1rpx solid #e4e2f2;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.selected-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
color: #171b26;
|
||||
font-size: 23rpx;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.selected-icon {
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #6f4cff;
|
||||
}
|
||||
|
||||
.selected-icon text {
|
||||
width: 14rpx;
|
||||
height: 8rpx;
|
||||
border-left: 4rpx solid #ffffff;
|
||||
border-bottom: 4rpx solid #ffffff;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.selected-coins,
|
||||
.selected-price {
|
||||
color: #6f4cff;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.selected-price {
|
||||
font-size: 29rpx;
|
||||
}
|
||||
|
||||
.buy-btn {
|
||||
height: 68rpx;
|
||||
margin-top: 12rpx;
|
||||
border-radius: 14rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
font-size: 29rpx;
|
||||
font-weight: 800;
|
||||
background: linear-gradient(135deg, #4c88ff 0%, #7b3df2 100%);
|
||||
box-shadow: 0 10rpx 18rpx rgba(91, 83, 244, 0.2);
|
||||
}
|
||||
|
||||
.icon-placeholder {
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
background: none;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
}
|
||||
Reference in New Issue
Block a user