gdxz/uniapp-app
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

8.20提交

Browse Source
This commit is contained in:
zoujiandong
2025-08-20 17:40:56 +08:00
parent d56117c39f
commit 2051df3a52
9 changed files with 1612 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages_app/buyPoint/buyPoint.vue
+309 -5
View File
@@ -1,14 +1,318 @@
<template>
<view class="content">
<uni-nav-bar
left-icon="left"
title="购买积分"
@clickLeft="goBack"
fixed
color="#8B2316"
height="140rpx"
:border="false"
backgroundColor="#eeeeee"
></uni-nav-bar>
<view class="buy-point-page">
<!-- 主要内容区域 -->
<view class="main-content">
<!-- 页面标题 -->
<view class="page-title">购买积分</view>
<!-- 积分套餐选择 -->
<view class="package-grid">
<view
class="package-item"
:class="{ active: selectedPackage === pkg.id }"
v-for="pkg in packages"
:key="pkg.id"
@click="selectPackage(pkg.id)"
>
<text class="package-points">{{ pkg.points }}</text>
</view>
</view>
<view class="bar"></view>
<!-- 所需金额显示 -->
<view class="amount-section">
<view class="amount-row">
<text class="amount-label">所需金额</text>
<text class="amount-value">¥{{ selectedPackageData.price }}</text>
</view>
</view>
</view>
<!-- 底部购买按钮 -->
<view class="bottom-actions">
<view class="buy-btn" @click="confirmPurchase">
<text class="btn-text">立即购买</text>
</view>
</view>
</view>
</template>
<script setup>
import { ref } from 'vue';
import { onShow } from "@dcloudio/uni-app";
import { ref, computed } from 'vue';
// 积分套餐数据 - 根据图片显示5个选项
const packages = ref([
{ id: 1, points: 500, price: '45.00' },
{ id: 2, points: 1000, price: '88.00' },
{ id: 3, points: 2500, price: '198.00' },
{ id: 4, points: 5000, price: '398.00' },
{ id: 5, points: 10000, price: '758.00' }
]);
// 选择状态
const selectedPackage = ref(0); // 默认未选择
// 计算属性
const selectedPackageData = computed(() => {
if (selectedPackage.value === 0) {
return { points: 0, price: '0.00' };
}
return packages.value.find(p => p.id === selectedPackage.value) || { points: 0, price: '0.00' };
});
// 方法
const goBack = () => {
uni.navigateBack({
fail() {
uni.redirectTo({
url: '/pages/index/index'
});
}
});
};
const selectPackage = (packageId) => {
selectedPackage.value = packageId;
};
const confirmPurchase = () => {
if (selectedPackage.value === 0) {
uni.showToast({
title: '请选择积分套餐',
icon: 'none'
});
return;
}
const packageData = selectedPackageData.value;
uni.showModal({
title: '确认购买',
content: `确认购买${packageData.points}积分，支付金额¥${packageData.price}？`,
success: (res) => {
if (res.confirm) {
uni.showToast({
title: '购买成功',
icon: 'success'
});
}
}
});
};
</script>
<style scoped>
<style lang="scss" scoped>
// 变量定义
$bg-color: #ffffff;
$text-primary: #333333;
$text-secondary: #666666;
$text-light: #999999;
$border-color: #e5e5e5;
$white: #ffffff;
$theme-color: #e74c3c;
$teal-color: #00cbc0;
$light-teal: #e6f7f6;
</style>
// 混合器
@mixin flex-center {
display: flex;
align-items: center;
justify-content: center;
}
@mixin flex-between {
display: flex;
align-items: center;
justify-content: space-between;
}
.buy-point-page {
height: calc(100vh - 140rpx);
background-color: $bg-color;
overflow: hidden; // 隐藏滚动条
.bar{
width:100%;
height: 20rpx;
background:#eeeeee;
}
}
.status-bar {
height: 44rpx;
background-color: $white;
@include flex-between;
padding: 0 30rpx;
font-size: 24rpx;
color: $text-primary;
.status-left {
display: flex;
align-items: center;
gap: 20rpx;
.time {
font-weight: 500;
}
.app-icons {
display: flex;
gap: 8rpx;
.app-icon {
width: 24rpx;
height: 24rpx;
border-radius: 4rpx;
@include flex-center;
font-size: 16rpx;
color: $white;
&.blue { background-color: #007aff; }
&.red { background-color: #ff3b30; }
&.red-white { background-color: #ff3b30; }
}
}
}
.status-right {
display: flex;
align-items: center;
gap: 20rpx;
.network-info,
.signal,
.wifi,
.battery {
font-size: 22rpx;
}
}
}
.header {
height: 88rpx;
background-color: $white;
@include flex-between;
padding: 0 30rpx;
border-bottom: 1rpx solid $border-color;
.header-left {
.back-btn {
font-size: 48rpx;
color: $theme-color;
font-weight: bold;
}
}
.header-center {
.title {
font-size: 36rpx;
color: $theme-color;
font-weight: bold;
}
}
}
.main-content {
padding: 40rpx 0rpx;
.page-title {
font-size: 36rpx;
color: $text-primary;
font-weight: normal;
padding:0 30rpx;
margin-bottom: 60rpx;
text-align: left;
}
.package-grid {
display: grid;
padding:0 30rpx;
grid-template-columns: repeat(3, 1fr);
gap: 30rpx;
margin-bottom: 80rpx;
// 第一行3个，第二行2个
.package-item {
height: 120rpx;
border: 2rpx solid $teal-color;
border-radius: 16rpx;
@include flex-center;
background-color: $white;
transition: all 0.3s ease;
cursor: pointer;
&.active {
background-color: $teal-color;
border-color: $teal-color;
.package-points {
color: $white;
}
}
.package-points {
font-size: 36rpx;
color: $teal-color;
font-weight: normal;
}
}
}
.amount-section {
.amount-row {
@include flex-between;
padding: 30rpx;
.amount-label {
font-size: 32rpx;
color: $text-primary;
font-weight: normal;
}
.amount-value {
font-size: 36rpx;
color: $theme-color;
font-weight: normal;
}
}
}
}
.bottom-actions {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: $white;
z-index: 100;
.buy-btn {
background-color: $teal-color;
height: 88rpx;
@include flex-center;
cursor: pointer;
.btn-text {
color: $white;
font-size: 32rpx;
}
}
}
</style>