adminzy/ai-c
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: optimize promote poster QR code style and withdraw page rules layout

Browse Source
This commit is contained in:
xin 2026-02-05 00:15:23 +08:00
parent 2174aaada5
commit 822e31afbf
6 changed files with 196 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
pages/promote-poster/promote-poster.js
View File

@ -61,7 +61,7 @@ Page({
return {
id: item.asset_key,
url: url,
qrBottom: 4.5, // 对应 1920 高度下的位置
qrBottom: 13, // 对应 1920 高度下的位置，约 250px
qrRight: 8 // 对应 1080 宽度下的位置
};
});
@ -70,7 +70,7 @@ Page({
// 兜底默认海报
this.setData({
posters: [
{ id: 'default', url: 'https://ai-c.maimanji.com/uploads/assets/poster-1.png', qrBottom: 4.5, qrRight: 8 }
{ id: 'default', url: 'https://ai-c.maimanji.com/uploads/assets/poster-1.png', qrBottom: 13, qrRight: 8 }
],
isLoading: false
});
@ -167,19 +167,34 @@ Page({
qrImg.onerror = reject;
});
// 识别白框位置：根据 1080x1920 设计稿，白框在右下角
// 识别白框位置：居中显示，位于底部
// 二维码尺寸 260x260
const qrW = 260;
const qrX = 720; // 1080 - 100 - 260
const qrY = 1580; // 1920 - 80 - 260
const qrX = (canvasW - qrW) / 2; // 水平居中
const qrY = canvasH - qrW - 250; // 距离底部 250px，避免挡住文字
// 绘制二维码背景（白框内可能需要微调，这里先绘制一个纯白背景确保清晰）
ctx.fillStyle = '#FFFFFF';
// 绘制圆形白底
const radius = (qrW + 20) / 2;
const centerX = qrX + qrW / 2;
const centerY = qrY + qrW / 2;
ctx.save();
ctx.beginPath();
this.roundRect(ctx, qrX - 5, qrY - 5, qrW + 10, qrW + 10, 10);
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
ctx.fillStyle = '#FFFFFF';
ctx.fill();
ctx.restore();
// 绘制圆形二维码
ctx.save();
ctx.beginPath();
// 计算二维码的圆形裁剪区域
const qrRadius = qrW / 2;
ctx.arc(centerX, centerY, qrRadius, 0, 2 * Math.PI);
ctx.clip(); // 裁剪为圆形
ctx.drawImage(qrImg, qrX, qrY, qrW, qrW);
ctx.restore();
// 6. 导出
setTimeout(() => {

2
pages/promote-poster/promote-poster.wxml
View File

@ -15,7 +15,7 @@
<swiper-item wx:for="{{posters}}" wx:key="id" class="poster-item">
<view class="poster-card {{currentPosterIndex === index ? 'active' : ''}}">
<image src="{{item.url}}" mode="aspectFill" class="poster-img" binderror="onImageError" data-index="{{index}}" />
<view class="qr-overlay" style="bottom: {{item.qrBottom}}%; right: {{item.qrRight}}%;">
<view class="qr-overlay" style="bottom: {{item.qrBottom}}%;">
<image src="{{qrCodeUrl}}" class="qr-img" binderror="onQrError" />
</view>
</view>

5
pages/promote-poster/promote-poster.wxss
View File

@ -54,12 +54,15 @@
height: 130rpx;
background: #fff;
padding: 10rpx;
border-radius: 12rpx;
border-radius: 50%;
left: 50%;
transform: translateX(-50%);
}
.qr-img {
width: 100%;
height: 100%;
border-radius: 50%;
}
.action-area {

15
pages/withdraw/withdraw.js
View File

@ -13,7 +13,20 @@ Page({
records: [],
withdrawConfig: {
minWithdrawAmount: 1
}
},
showRulesModal: false
},
onOpenRules() {
this.setData({ showRulesModal: true });
},
onCloseRules() {
this.setData({ showRulesModal: false });
},
onContactService() {
this.setData({ showRulesModal: false });
wx.navigateTo({
url: '/pages/support/support'
});
},
onLoad() {
const sys = wx.getSystemInfoSync();

131
pages/withdraw/withdraw.wxml
View File

@ -54,64 +54,9 @@
{{submitting ? '处理中...' : '立即提现'}}
</button>
<!-- 提现说明 -->
<view class="instruction-section">
<scroll-view scroll-y class="instruction-scroll">
<!-- 规则说明 -->
<view class="rule-block">
<view class="rule-header">
<text class="rule-icon">📄</text>
<text class="rule-title">提现规则说明</text>
</view>
<view class="rule-content">
<view class="rule-item">1. <text class="rule-label">最低提现金额：</text>单笔提现金额不低于 ¥100.00。</view>
<view class="rule-item">2. <text class="rule-label">每日提现次数：</text>每日最多可发起 3 次提现申请。</view>
<view class="rule-item">3. <text class="rule-label">可提现余额：</text>仅限“已结算”状态的收入可提现，待结算金额暂不支持。</view>
<view class="rule-item">4. <text class="rule-label">提现服务费：</text>每笔提现收取 1% 服务费（最低 ¥1.00），由第三方支付平台收取。</view>
<view class="rule-item">5. <text class="rule-label">审核时间：</text>提现申请将在 24 小时 内完成审核并安排打款。</view>
<view class="rule-item">6. <text class="rule-label">到账时间：</text>审核通过后，预计 24 小时内到账，具体以银行或微信到账通知为准。</view>
<view class="rule-item">7. <text class="rule-label">账户要求：</text>提现账户需为 本人实名认证 的微信或银行卡。</view>
<view class="rule-item">8. <text class="rule-label">失败处理：</text>如提现失败，金额将自动退回至可提现余额，可重新发起申请。</view>
</view>
</view>
<!-- 常见问题 -->
<view class="rule-block">
<view class="rule-header">
<text class="rule-title">常见问题</text>
</view>
<view class="rule-content">
<view class="qa-item">
<view class="qa-q">· 为什么提现金额不符？</view>
<view class="qa-a">可提现金额仅包含已结算收入，待结算部分暂不可提。</view>
</view>
<view class="qa-item">
<view class="qa-q">· 提现服务费如何计算？</view>
<view class="qa-a">每笔提现收取 5% 作为服务费，在提现金额中自动扣除。</view>
</view>
<view class="qa-item">
<view class="qa-q">· 提现未到账怎么办？</view>
<view class="qa-a">请在提现记录中查看审核状态，如超时未到账，请联系客服处理。</view>
</view>
<view class="qa-item">
<view class="qa-q">· 如何更换提现账户？</view>
<view class="qa-a">请在“账户管理”中更新实名认证信息。</view>
</view>
</view>
</view>
<!-- 需要帮助 -->
<view class="rule-block">
<view class="rule-header">
<text class="rule-icon">📞</text>
<text class="rule-title">需要帮助？</text>
</view>
<view class="rule-content">
<view class="help-text">如有疑问，请前往 <text class="link">帮助中心</text> 或联系 <text class="link">在线客服</text>。</view>
<view class="help-text">服务时间：工作日 9:00-22:00</view>
</view>
</view>
</scroll-view>
<!-- 提现规则入口 -->
<view class="rules-entry" bindtap="onOpenRules">
<text class="rules-entry-text">提现规则与常见问题</text>
</view>
</view>
@ -139,5 +84,75 @@
</view>
</view>
</view>
<!-- 规则说明弹窗 -->
<view class="modal-mask" wx:if="{{showRulesModal}}" bindtap="onCloseRules"></view>
<view class="modal-container" wx:if="{{showRulesModal}}">
<view class="modal-header">
<text class="modal-title">提现规则与常见问题</text>
<view class="modal-close" bindtap="onCloseRules">
<app-icon name="close" size="40" color="#9CA3AF" />
</view>
</view>
<scroll-view scroll-y class="modal-scroll">
<!-- 规则说明 -->
<view class="rule-block">
<view class="rule-header">
<text class="rule-icon">📄</text>
<text class="rule-title">提现规则说明</text>
</view>
<view class="rule-content">
<view class="rule-item">1. <text class="rule-label">最低提现金额：</text>单笔提现金额不低于 ¥100.00。</view>
<view class="rule-item">2. <text class="rule-label">每日提现次数：</text>每日最多可发起 3 次提现申请。</view>
<view class="rule-item">3. <text class="rule-label">可提现余额：</text>仅限“已结算”状态的收入可提现，待结算金额暂不支持。</view>
<view class="rule-item">4. <text class="rule-label">提现服务费：</text>每笔提现收取 1% 服务费（最低 ¥1.00），由第三方支付平台收取。</view>
<view class="rule-item">5. <text class="rule-label">审核时间：</text>提现申请将在 24 小时 内完成审核并安排打款。</view>
<view class="rule-item">6. <text class="rule-label">到账时间：</text>审核通过后，预计 24 小时内到账，具体以银行或微信到账通知为准。</view>
<view class="rule-item">7. <text class="rule-label">账户要求：</text>提现账户需为 本人实名认证 的微信或银行卡。</view>
<view class="rule-item">8. <text class="rule-label">失败处理：</text>如提现失败，金额将自动退回至可提现余额，可重新发起申请。</view>
</view>
</view>
<!-- 常见问题 -->
<view class="rule-block">
<view class="rule-header">
<text class="rule-title">常见问题</text>
</view>
<view class="rule-content">
<view class="qa-item">
<view class="qa-q">· 为什么提现金额不符？</view>
<view class="qa-a">可提现金额仅包含已结算收入，待结算部分暂不可提。</view>
</view>
<view class="qa-item">
<view class="qa-q">· 提现服务费如何计算？</view>
<view class="qa-a">每笔提现收取 5% 作为服务费，在提现金额中自动扣除。</view>
</view>
<view class="qa-item">
<view class="qa-q">· 提现未到账怎么办？</view>
<view class="qa-a">请在提现记录中查看审核状态，如超时未到账，请联系客服处理。</view>
</view>
<view class="qa-item">
<view class="qa-q">· 如何更换提现账户？</view>
<view class="qa-a">请在“账户管理”中更新实名认证信息。</view>
</view>
</view>
</view>
<!-- 需要帮助 -->
<view class="rule-block">
<view class="rule-header">
<text class="rule-icon">📞</text>
<text class="rule-title">需要帮助？</text>
</view>
<view class="rule-content">
<view class="help-text">如有疑问，请前往 <text class="link-contact" bindtap="onContactService">在线客服</text> 咨询。</view>
<view class="help-text">服务时间：工作日 9:00-22:00</view>
</view>
</view>
<!-- 底部留白 -->
<view style="height: 40rpx;"></view>
</scroll-view>
</view>
</view>

96
pages/withdraw/withdraw.wxss
View File

@ -184,20 +184,84 @@
box-shadow: none;
}
/* 提现说明 */
.instruction-section {
margin-top: 64rpx;
padding: 32rpx;
background: #F9FAFB;
border-radius: 32rpx;
border: 2rpx dashed #E5E7EB;
margin-bottom: 40rpx;
/* 提现规则入口 */
.rules-entry {
display: flex;
justify-content: center;
align-items: center;
margin-top: 32rpx;
padding: 16rpx 0;
}
.instruction-scroll {
max-height: 600rpx;
.rules-entry-text {
font-size: 28rpx;
color: #B06AB3;
font-weight: 600;
border-bottom: 2rpx solid transparent;
}
/* 规则弹窗 */
.modal-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 1000;
backdrop-filter: blur(4px);
}
.modal-container {
position: fixed;
left: 0;
right: 0;
bottom: 0;
background: #FFFFFF;
border-radius: 40rpx 40rpx 0 0;
z-index: 1001;
padding: 0 32rpx;
padding-bottom: env(safe-area-inset-bottom);
max-height: 80vh;
display: flex;
flex-direction: column;
animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes slideUp {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 32rpx 0;
border-bottom: 2rpx solid #F3F4F6;
}
.modal-title {
font-size: 34rpx;
font-weight: 800;
color: #111827;
}
.modal-close {
padding: 10rpx;
}
.modal-scroll {
flex: 1;
padding-top: 32rpx;
overflow-y: auto;
}
/* 复用规则样式 */
.rule-block {
margin-bottom: 40rpx;
}
@ -242,7 +306,7 @@
}
.qa-item {
margin-bottom: 20rpx;
margin-bottom: 24rpx;
}
.qa-item:last-child {
@ -250,7 +314,7 @@
}
.qa-q {
font-size: 26rpx;
font-size: 28rpx;
font-weight: 700;
color: #374151;
margin-bottom: 8rpx;
@ -269,10 +333,12 @@
line-height: 1.6;
}
.link {
color: #B06AB3;
font-weight: 600;
.link-contact {
color: #FF69B4; /* 粉色高亮 */
font-weight: 700;
display: inline;
text-decoration: underline;
padding: 0 4rpx;
}