354 lines
6.9 KiB
Vue
354 lines
6.9 KiB
Vue
<template>
|
||
<!-- <uni-nav-bar
|
||
left-icon="left"
|
||
title="购买积分"
|
||
@clickLeft="goBack"
|
||
fixed
|
||
color="#8B2316"
|
||
height="180rpx"
|
||
:border="false"
|
||
backgroundColor="#eeeeee"
|
||
></uni-nav-bar> -->
|
||
<navBar :title="'购买积分'" ></navBar>
|
||
<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>
|
||
<unidialog
|
||
:visible="freeVisible"
|
||
:content="freeContent"
|
||
@close="freeClose"
|
||
@confirm="freeConfirm"
|
||
></unidialog>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed } from 'vue';
|
||
import api from '@/api/api';
|
||
import { onLoad } from '@dcloudio/uni-app';
|
||
import unidialog from '@/components/dialog/dialog.vue';
|
||
import navBar from '@/components/navBar/navBar.vue';
|
||
const freeVisible = ref(false);
|
||
const freeContent = ref('您确定是否购买？');
|
||
const freeClose = () => {
|
||
freeVisible.value = false;
|
||
};
|
||
const freeConfirm = () => {
|
||
freeVisible.value = false;
|
||
api.createBointsOrder({
|
||
point: selectedPackageData.value.points
|
||
}).then(res => {
|
||
if(res.code==200){
|
||
uni.sendNativeEvent('payPonitPage', {
|
||
msg: {
|
||
"price":res.data.amount,
|
||
"order_id":res.data.order_id,
|
||
'jifen':res.data.point,
|
||
},
|
||
});
|
||
}
|
||
});
|
||
};
|
||
onLoad(() => {
|
||
getPointUnitPrice();
|
||
});
|
||
const pointUnitPrice = ref(1);
|
||
// 积分套餐数据 - 根据图片显示5个选项
|
||
const packages = ref([
|
||
{ id: 1, points: 500, price: 500*pointUnitPrice.value/100 },
|
||
{ id: 2, points: 1000, price: 1000*pointUnitPrice.value/100 },
|
||
{ id: 3, points: 2500, price: 2500*pointUnitPrice.value/100 },
|
||
{ id: 4, points: 5000, price: 5000*pointUnitPrice.value/100 },
|
||
{ id: 5, points: 10000, price: 10000*pointUnitPrice.value/100 }
|
||
]);
|
||
|
||
const getPointUnitPrice = () => {
|
||
api.getPointUnitPrice().then(res => {
|
||
if(res.code==200){
|
||
pointUnitPrice.value=Number(res.data);
|
||
console.log(pointUnitPrice.value);
|
||
packages.value.forEach(pkg => {
|
||
pkg.price = pkg.points * pointUnitPrice.value / 100;
|
||
});
|
||
}
|
||
});
|
||
};
|
||
// 选择状态
|
||
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;
|
||
freeVisible.value=true;
|
||
};
|
||
</script>
|
||
|
||
<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;
|
||
|
||
// 混合器
|
||
@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: 100vh;
|
||
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 {
|
||
margin-top: calc(var(--status-bar-height) + 44px);
|
||
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> |