433 lines
9.6 KiB
Vue
433 lines
9.6 KiB
Vue
|
<template>
|
|||
|
|
<view class="view-page" :style="{backgroundImage: `url('${ThemeData ? ThemeData.app_bg : baseBgUrl }')`}">
|
|||
|
|
<navBar :style="{marginTop: `${statusBarHeight}${uni.getSystemInfoSync().platform === 'ios' ? 'px': 'dp'}`}"
|
|||
|
|
:navTitle="'羽声充值'" :isLeftSlot="true">
|
|||
|
|
</navBar>
|
|||
|
|
<view class="content">
|
|||
|
|
<view class="">
|
|||
|
|
<uni-easyinput prefixIcon="search" clearSize="18" v-model="searchValue" placeholder="请输入您在羽声语音的ID">
|
|||
|
|
</uni-easyinput>
|
|||
|
|
</view>
|
|||
|
|
<view class="show_ByIdView">
|
|||
|
|
<view class="">
|
|||
|
|
余额
|
|||
|
|
</view>
|
|||
|
|
<view class="">
|
|||
|
|
金币
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="coinWrap">
|
|||
|
|
<view
|
|||
|
|
class="coinBox"
|
|||
|
|
:class="{ 'selected': selectedIndex === index }"
|
|||
|
|
v-for="(ele, index) in moneyList"
|
|||
|
|
:key="index"
|
|||
|
|
@click="selectAmount(index)"
|
|||
|
|
>
|
|||
|
|
<view class="w-fill coin">
|
|||
|
|
<img style="width: 40rpx;height: 40rpx;" :src="Coin" alt="" />{{ele.coin}}
|
|||
|
|
</view>
|
|||
|
|
<view class="w-fill money">
|
|||
|
|
￥{{ele.money}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="text-wrap">
|
|||
|
|
<view class="" style="margin-bottom: 20rpx;">
|
|||
|
|
充值小贴士：
|
|||
|
|
</view>
|
|||
|
|
<view class="font-24" style="margin-bottom: 20rpx;">
|
|||
|
|
1.为避免您的账号及资金被冻结，请勿通过非官方渠道 充值，谨防上当受损！
|
|||
|
|
</view>
|
|||
|
|
<view class="font-24">
|
|||
|
|
2.充值前请确定您已满18周岁
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="pay-button-wrap">
|
|||
|
|
<button
|
|||
|
|
class="pay-button"
|
|||
|
|
:class="{ 'disabled': selectedIndex === -1 || isPaying || !isAgreed }"
|
|||
|
|
:disabled="selectedIndex === -1 || isPaying || !isAgreed"
|
|||
|
|
@click="handlePay"
|
|||
|
|
>
|
|||
|
|
{{ isPaying ? '支付中...' : '立即支付' }}
|
|||
|
|
</button>
|
|||
|
|
<view class="agreement-wrap">
|
|||
|
|
<checkbox-group @change="handleAgreementChange">
|
|||
|
|
<label class="agreement-label">
|
|||
|
|
<checkbox
|
|||
|
|
:checked="isAgreed"
|
|||
|
|
color="#3ABC6D"
|
|||
|
|
style="transform: scale(0.8);"
|
|||
|
|
/>
|
|||
|
|
<text class="agreement-text">我已阅读并同意</text>
|
|||
|
|
<text class="agreement-link" @click.stop="showAgreement">《充值协议》</text>
|
|||
|
|
</label>
|
|||
|
|
</checkbox-group>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import config from '@/until/config.js';
|
|||
|
|
import navBar from '@/component/nav.vue';
|
|||
|
|
import Coin from '@/static/image/income/coin.png';
|
|||
|
|
import wxPay from '@/until/wxpay.js';
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
navBar
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
baseBgUrl: config.new_unionUrl || '',
|
|||
|
|
unionBgUrl: config.unicon_url || '',
|
|||
|
|
statusBarHeight: 0,
|
|||
|
|
ThemeData: null,
|
|||
|
|
searchValue: "",
|
|||
|
|
Coin: Coin,
|
|||
|
|
moneyList: [{
|
|||
|
|
coin: 300,
|
|||
|
|
money: 3,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
coin: 500,
|
|||
|
|
money: 5,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
coin: 1000,
|
|||
|
|
money: 10,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
coin: 1500,
|
|||
|
|
money: 15,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
coin: 2000,
|
|||
|
|
money: 20,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
coin: 3000,
|
|||
|
|
money: 30,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
coin: 5000,
|
|||
|
|
money: 50,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
coin: 10000,
|
|||
|
|
money: 100,
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
selectedIndex: -1, // 选中的充值金额索引
|
|||
|
|
selectedAmount: 0, // 选中的金额（元）
|
|||
|
|
selectedCoin: 0, // 选中的金币数量
|
|||
|
|
isPaying: false,
|
|||
|
|
isAgreed: false // 是否同意协议
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad() {
|
|||
|
|
// 页面加载时初始化微信 JS-SDK
|
|||
|
|
this.initWxPay();
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 初始化微信支付
|
|||
|
|
async initWxPay() {
|
|||
|
|
try {
|
|||
|
|
await wxPay.initWxJsSDK();
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('初始化微信支付失败:', error);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 选择充值金额
|
|||
|
|
selectAmount(index) {
|
|||
|
|
this.selectedIndex = index;
|
|||
|
|
this.selectedAmount = this.moneyList[index].money;
|
|||
|
|
this.selectedCoin = this.moneyList[index].coin;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 协议勾选变化
|
|||
|
|
handleAgreementChange(e) {
|
|||
|
|
this.isAgreed = e.detail.value.length > 0;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 查看协议
|
|||
|
|
showAgreement() {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '充值协议',
|
|||
|
|
content: '1. 充值前请确认您已满18周岁\n2. 充值金额一经充值成功，不支持退款\n3. 请勿通过非官方渠道充值，谨防上当受骗\n4. 充值遇到问题请联系客服处理\n5. 本平台保留最终解释权',
|
|||
|
|
confirmText: '我知道了',
|
|||
|
|
showCancel: false
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 立即支付
|
|||
|
|
async handlePay() {
|
|||
|
|
// 1. 验证用户ID
|
|||
|
|
if (!this.searchValue || this.searchValue.trim() === '') {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请输入您在羽声语音的ID',
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 2000
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 2. 验证是否选择了充值金额
|
|||
|
|
if (this.selectedIndex === -1) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请选择充值金额',
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 2000
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 3. 验证是否同意协议
|
|||
|
|
if (!this.isAgreed) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请先阅读并同意充值协议',
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 2000
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 4. 防止重复点击
|
|||
|
|
if (this.isPaying) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.isPaying = true;
|
|||
|
|
uni.showLoading({
|
|||
|
|
title: '正在发起支付...',
|
|||
|
|
mask: true
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
// 5. 生成订单号
|
|||
|
|
const orderNo = this.generateOrderNo();
|
|||
|
|
|
|||
|
|
// 6. 计算支付金额（单位：分）
|
|||
|
|
const payAmount = Math.round(this.selectedAmount * 100);
|
|||
|
|
|
|||
|
|
// 7. 附加信息（用户ID和金币数量）
|
|||
|
|
const attach = JSON.stringify({
|
|||
|
|
userId: this.searchValue.trim(),
|
|||
|
|
coin: this.selectedCoin
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 8. 调用微信支付
|
|||
|
|
const result = await wxPay.pay(payAmount, orderNo, attach);
|
|||
|
|
|
|||
|
|
uni.hideLoading();
|
|||
|
|
|
|||
|
|
// 9. 处理支付结果
|
|||
|
|
if (result.success) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '支付成功',
|
|||
|
|
icon: 'success',
|
|||
|
|
duration: 2000
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 支付成功后的处理
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.handlePaySuccess();
|
|||
|
|
}, 2000);
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: result.message || '支付失败',
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 2000
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
uni.hideLoading();
|
|||
|
|
console.error('支付错误:', error);
|
|||
|
|
|
|||
|
|
let errorMsg = '支付失败';
|
|||
|
|
if (error.message) {
|
|||
|
|
if (error.message.includes('取消')) {
|
|||
|
|
errorMsg = '您已取消支付';
|
|||
|
|
} else {
|
|||
|
|
errorMsg = error.message;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
uni.showToast({
|
|||
|
|
title: errorMsg,
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 2000
|
|||
|
|
});
|
|||
|
|
} finally {
|
|||
|
|
this.isPaying = false;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 生成订单号
|
|||
|
|
generateOrderNo() {
|
|||
|
|
const timestamp = Date.now();
|
|||
|
|
const random = Math.floor(Math.random() * 10000).toString().padStart(4, '0');
|
|||
|
|
return `YS${timestamp}${random}`;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 支付成功后的处理
|
|||
|
|
handlePaySuccess() {
|
|||
|
|
// 清空选择
|
|||
|
|
this.selectedIndex = -1;
|
|||
|
|
this.selectedAmount = 0;
|
|||
|
|
this.selectedCoin = 0;
|
|||
|
|
this.isAgreed = false;
|
|||
|
|
|
|||
|
|
// 可以跳转到支付成功页面或刷新余额
|
|||
|
|
// uni.navigateTo({
|
|||
|
|
// url: '/pages/other/paySuccess'
|
|||
|
|
// });
|
|||
|
|
|
|||
|
|
// 或者返回上一页
|
|||
|
|
// uni.navigateBack();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.view-page {
|
|||
|
|
min-height: 100vh;
|
|||
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
|
|||
|
|
.content {
|
|||
|
|
padding: 0 32rpx;
|
|||
|
|
|
|||
|
|
.show_ByIdView {
|
|||
|
|
margin: 16rpx 0;
|
|||
|
|
width: 100%;
|
|||
|
|
display: inline-flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.coinWrap {
|
|||
|
|
display: inline-grid;
|
|||
|
|
grid-template-columns: repeat(3, 1fr);
|
|||
|
|
/* 创建3列，每列等宽 */
|
|||
|
|
grid-template-rows: repeat(3, 1fr);
|
|||
|
|
/* 创建3行，每行等高 */
|
|||
|
|
gap: 10px;
|
|||
|
|
|
|||
|
|
/* 网格项之间的间隙 */
|
|||
|
|
.coinBox {
|
|||
|
|
width: 212rpx;
|
|||
|
|
height: 152rpx;
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
display: inline-flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
align-content: center;
|
|||
|
|
border: 2rpx solid transparent;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
cursor: pointer;
|
|||
|
|
|
|||
|
|
&.selected {
|
|||
|
|
border-color: #3ABC6D;
|
|||
|
|
background: rgba(58, 188, 109, 0.1);
|
|||
|
|
|
|||
|
|
.coin {
|
|||
|
|
color: #3ABC6D;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.money {
|
|||
|
|
color: #3ABC6D;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.coin {
|
|||
|
|
font-size: 44rpx;
|
|||
|
|
font-family: D-DIN-PRO, D-DIN-PRO;
|
|||
|
|
font-weight: bold;
|
|||
|
|
font-size: 44rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
margin-left: 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.money {
|
|||
|
|
color: rgba(0, 0, 0, 0.45);
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text-wrap {
|
|||
|
|
margin-top: 32rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
font-family: PingFang SC, PingFang SC;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: rgba(0, 0, 0, 0.85);
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
text-transform: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pay-button-wrap {
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
padding: 20rpx 32rpx;
|
|||
|
|
// background: #FFFFFF;
|
|||
|
|
// box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
|
|||
|
|
|
|||
|
|
.agreement-wrap {
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
|
|||
|
|
.agreement-label {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
|
|||
|
|
.agreement-text {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #666666;
|
|||
|
|
margin-left: 8rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.agreement-link {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #3ABC6D;
|
|||
|
|
text-decoration: underline;
|
|||
|
|
margin-left: 4rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pay-button {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 88rpx;
|
|||
|
|
background: #3ABC6D;
|
|||
|
|
border-radius: 44rpx;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
border: none;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
|
|||
|
|
&.disabled {
|
|||
|
|
background: #CCCCCC;
|
|||
|
|
opacity: 0.6;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|