631 lines
13 KiB
Vue
631 lines
13 KiB
Vue
<template>
|
||
<view class="traffic-purchase-wrapper">
|
||
<view v-if="show" class="traffic-purchase-container" style="margin-top: var(--status-bar-height);">
|
||
<!-- 头部 -->
|
||
<view class="header">
|
||
<view class="back-icon" @tap="closePage">
|
||
<u-icon name="arrow-left" color="#333" size="26"></u-icon>
|
||
</view>
|
||
<view class="title">流量采购</view>
|
||
<view class="close-icon" @tap="closePage">
|
||
<u-icon name="close" color="#333" size="24"></u-icon>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 本月使用情况 -->
|
||
<view class="usage-card">
|
||
<view class="usage-title">本月流量使用情况
|
||
<text v-if="usageData.packageName" class="package-type">({{usageData.packageName}})</text>
|
||
</view>
|
||
|
||
<!-- 使用情况加载中 -->
|
||
<view v-if="usageLoading" class="usage-loading">
|
||
<text>加载使用情况...</text>
|
||
</view>
|
||
|
||
<!-- 使用情况错误 -->
|
||
<view v-else-if="usageError" class="usage-error">
|
||
<text>{{usageError}}</text>
|
||
<button class="retry-button-small" @tap="fetchRemainingFlow">刷新</button>
|
||
</view>
|
||
|
||
<!-- 使用情况数据 -->
|
||
<template v-else>
|
||
<view class="usage-row">
|
||
<text>流量使用</text>
|
||
<text>{{usageData.totalFlow - usageData.remainingFlow}}/{{usageData.totalFlow}}人</text>
|
||
</view>
|
||
<view class="usage-progress">
|
||
<view class="progress-bar" :style="{width: usageData.flowPercentage + '%'}"></view>
|
||
</view>
|
||
<view class="usage-row">
|
||
<text>剩余有效期</text>
|
||
<text>{{usageData.remainingDays}}天</text>
|
||
</view>
|
||
<view class="usage-date">
|
||
<text>有效期: {{usageData.startTime}} ~ {{usageData.expireTime}}</text>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
|
||
<!-- 使用警告 -->
|
||
<view v-if="usageData.flowPercentage > 70 && !usageLoading && !usageError" class="warning-box">
|
||
<view class="warning-icon">
|
||
<text class="iconfont icon-warning" style="color: #fff; font-size: 14px;"></text>
|
||
</view>
|
||
<view class="warning-content">
|
||
<view class="warning-title">流量即将用完</view>
|
||
<view class="warning-text">本月流量仅剩{{usageData.remainingFlow}}人，建议购买流量包以保证业务连续性</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 套餐选择 -->
|
||
<view class="section-title">选择流量套餐</view>
|
||
|
||
<!-- 加载状态 -->
|
||
<view v-if="loading" class="loading-container">
|
||
<image src="/static/loading.gif" mode="aspectFit" class="loading-image"></image>
|
||
<text class="loading-text">加载中...</text>
|
||
</view>
|
||
|
||
<!-- 错误提示 -->
|
||
<view v-else-if="error" class="error-container">
|
||
<image src="/static/error.png" mode="aspectFit" class="error-image"></image>
|
||
<text class="error-text">{{error}}</text>
|
||
<button class="retry-button" @tap="fetchFlowPackages">重试</button>
|
||
</view>
|
||
|
||
<!-- 使用v-for循环渲染流量包 -->
|
||
<view
|
||
v-else
|
||
v-for="item in packages"
|
||
:key="item.id"
|
||
class="package-card"
|
||
@tap="openPackageDetail(item)"
|
||
>
|
||
<view class="package-header">
|
||
<view class="package-left">
|
||
<view class="package-icon" :style="{backgroundColor: item.iconColor}">
|
||
<text class="iconfont" :class="item.iconClass" style="color: #0080ff; font-size: 24px;"></text>
|
||
</view>
|
||
<view class="package-info">
|
||
<view class="package-name">
|
||
{{item.name}}
|
||
<text v-if="item.specialTag" class="special-tag">{{item.specialTag}}</text>
|
||
</view>
|
||
<view class="package-price">
|
||
<text class="current-price">¥{{item.price}}</text>
|
||
<text class="original-price" v-if="item.originalPrice !== item.price">¥{{item.originalPrice}}</text>
|
||
</view>
|
||
<view class="package-specs">{{item.specs}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="discount-tag">{{item.discount}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 流量包详情页面 -->
|
||
<package-detail
|
||
:show="showPackageDetail"
|
||
:package-data="currentPackage"
|
||
@close="closePackageDetail"
|
||
@buy-success="handleBuySuccess"
|
||
></package-detail>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import PackageDetail from './PackageDetail.vue';
|
||
import { trafficApi } from '../api/modules/traffic';
|
||
|
||
export default {
|
||
name: 'TrafficPurchase',
|
||
components: {
|
||
'package-detail': PackageDetail
|
||
},
|
||
props: {
|
||
show: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
// 流量包数据
|
||
packages: [],
|
||
// 流量包详情页面
|
||
showPackageDetail: false,
|
||
// 当前选中的流量包
|
||
currentPackage: null,
|
||
// 加载状态
|
||
loading: false,
|
||
// 错误信息
|
||
error: null,
|
||
// 本月使用情况数据
|
||
usageData: {
|
||
packageName: '',
|
||
remainingFlow: 0,
|
||
totalFlow: 0,
|
||
flowPercentage: 0,
|
||
remainingDays: 0,
|
||
totalDays: 0,
|
||
timePercentage: 0,
|
||
expireTime: '',
|
||
startTime: ''
|
||
},
|
||
// 本月使用情况加载状态
|
||
usageLoading: false,
|
||
// 本月使用情况错误信息
|
||
usageError: null
|
||
}
|
||
},
|
||
watch: {
|
||
show(newVal) {
|
||
if (newVal) {
|
||
this.fetchFlowPackages();
|
||
this.fetchRemainingFlow();
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
closePage() {
|
||
this.$emit('close');
|
||
},
|
||
// 打开流量包详情
|
||
openPackageDetail(packageData) {
|
||
this.currentPackage = packageData;
|
||
this.showPackageDetail = true;
|
||
},
|
||
// 关闭流量包详情
|
||
closePackageDetail() {
|
||
this.showPackageDetail = false;
|
||
},
|
||
// 获取流量包数据
|
||
async fetchFlowPackages() {
|
||
if (this.loading) return;
|
||
|
||
this.loading = true;
|
||
this.error = null;
|
||
|
||
uni.showLoading({
|
||
title: '加载中...',
|
||
mask: true
|
||
});
|
||
|
||
try {
|
||
const response = await trafficApi.getFlowPackages();
|
||
|
||
if (response.code === 200) {
|
||
// 处理返回的数据
|
||
this.packages = response.data.map(item => ({
|
||
id: item.id,
|
||
name: item.name,
|
||
price: parseFloat(item.price),
|
||
originalPrice: parseFloat(item.originalPrice),
|
||
specs: `${item.monthlyFlow}人/月·${item.duration}个月`,
|
||
iconClass: this.getIconClass(item.tag),
|
||
iconColor: '#ecf5ff',
|
||
discount: item.discount,
|
||
specialTag: item.tag,
|
||
details: [
|
||
{ label: '每月流量', value: `${item.monthlyFlow}人/月` },
|
||
{ label: '套餐时长', value: `${item.duration}个月` },
|
||
{ label: '总流量', value: `${item.totalFlow}人` }
|
||
],
|
||
privileges: item.privileges
|
||
}));
|
||
} else {
|
||
this.error = response.msg || '获取数据失败';
|
||
}
|
||
} catch (err) {
|
||
this.error = '获取流量包数据失败，请稍后重试';
|
||
console.error('获取流量包数据错误:', err);
|
||
} finally {
|
||
this.loading = false;
|
||
uni.hideLoading();
|
||
}
|
||
},
|
||
// 根据标签获取对应的图标类名
|
||
getIconClass(tag) {
|
||
const iconMap = {
|
||
'入门级': 'icon-shujutongji',
|
||
'热销': 'icon-shuju',
|
||
'尊享': 'icon-data'
|
||
};
|
||
return iconMap[tag] || 'icon-shujutongji';
|
||
},
|
||
// 获取本月流量使用情况
|
||
async fetchRemainingFlow() {
|
||
if (this.usageLoading) return;
|
||
|
||
this.usageLoading = true;
|
||
this.usageError = null;
|
||
|
||
try {
|
||
const response = await trafficApi.getRemainingFlow();
|
||
|
||
if (response.code === 200) {
|
||
this.usageData = response.data;
|
||
} else {
|
||
this.usageError = response.msg || '获取使用情况失败';
|
||
console.error('获取使用情况失败:', response.msg);
|
||
}
|
||
} catch (err) {
|
||
this.usageError = '获取使用情况失败，请稍后重试';
|
||
console.error('获取使用情况错误:', err);
|
||
} finally {
|
||
this.usageLoading = false;
|
||
}
|
||
},
|
||
// 处理购买成功事件
|
||
handleBuySuccess() {
|
||
// 刷新流量使用情况和套餐列表
|
||
this.fetchRemainingFlow();
|
||
this.fetchFlowPackages();
|
||
|
||
// 提示购买成功
|
||
uni.showToast({
|
||
title: '购买成功，流量已更新',
|
||
icon: 'success',
|
||
duration: 2000
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.traffic-purchase-container {
|
||
position: fixed;
|
||
top: 0;
|
||
right: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: #f5f7fa;
|
||
z-index: 10000;
|
||
overflow-y: auto;
|
||
transform-origin: right;
|
||
animation: slideInFromRight 0.3s ease;
|
||
}
|
||
|
||
@keyframes slideInFromRight {
|
||
from {
|
||
transform: translateX(100%);
|
||
}
|
||
to {
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
.header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 12px 15px;
|
||
background-color: #fff;
|
||
border-bottom: 1px solid #eee;
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 1;
|
||
}
|
||
|
||
.back-icon {
|
||
width: 60px;
|
||
font-size: 15px;
|
||
color: #333;
|
||
}
|
||
|
||
.back-text {
|
||
font-weight: 500;
|
||
}
|
||
|
||
.title {
|
||
font-size: 17px;
|
||
font-weight: 500;
|
||
flex: 1;
|
||
text-align: center;
|
||
}
|
||
|
||
.close-icon {
|
||
width: 60px;
|
||
text-align: right;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
padding-right: 10px;
|
||
}
|
||
|
||
.usage-card {
|
||
margin: 15px;
|
||
padding: 15px;
|
||
background-color: #ecf5ff;
|
||
border-radius: 10px;
|
||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
|
||
border: 1px solid #d4e8ff;
|
||
}
|
||
|
||
.usage-title {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
margin-bottom: 15px;
|
||
|
||
.package-type {
|
||
font-size: 14px;
|
||
color: #0080ff;
|
||
font-weight: normal;
|
||
margin-left: 5px;
|
||
}
|
||
}
|
||
|
||
.usage-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 10px;
|
||
font-size: 14px;
|
||
color: #333;
|
||
}
|
||
|
||
.usage-progress {
|
||
height: 10px;
|
||
background-color: #f0f0f0;
|
||
border-radius: 5px;
|
||
margin: 10px 0 15px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.progress-bar {
|
||
height: 100%;
|
||
background-color: #0080ff;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
.warning-box {
|
||
margin: 15px;
|
||
padding: 12px 15px;
|
||
background-color: #fff9e6;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.warning-icon {
|
||
width: 20px;
|
||
height: 20px;
|
||
border-radius: 50%;
|
||
background-color: #ff9900;
|
||
color: #fff;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-right: 10px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.warning-content {
|
||
flex: 1;
|
||
}
|
||
|
||
.warning-title {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #ff9900;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.warning-text {
|
||
font-size: 12px;
|
||
color: #666;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.section-title {
|
||
margin: 20px 15px 10px;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: #333;
|
||
}
|
||
|
||
.package-card {
|
||
margin: 10px 15px;
|
||
background-color: #fff;
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
|
||
border: 1px solid #e6f4ff;
|
||
position: relative;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.package-card:hover {
|
||
background-color: #f8faff;
|
||
}
|
||
|
||
.package-header {
|
||
padding: 18px 15px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.package-left {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.package-icon {
|
||
width: 45px;
|
||
height: 45px;
|
||
background-color: #f0f7ff;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-right: 12px;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.package-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.package-name {
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
color: #333;
|
||
margin-bottom: 4px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.package-price {
|
||
display: flex;
|
||
align-items: baseline;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.current-price {
|
||
font-size: 22px;
|
||
font-weight: bold;
|
||
color: #0080ff;
|
||
}
|
||
|
||
.original-price {
|
||
font-size: 15px;
|
||
color: #999;
|
||
text-decoration: line-through;
|
||
margin-left: 8px;
|
||
}
|
||
|
||
.package-specs {
|
||
font-size: 12px;
|
||
color: #666;
|
||
}
|
||
|
||
.original-tag {
|
||
position: relative;
|
||
display: inline-block;
|
||
margin-left: 8px;
|
||
padding: 2px 6px;
|
||
background-color: #f5f5f5;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
color: #666;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.discount-tag {
|
||
position: absolute;
|
||
right: 15px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
padding:0 20px;
|
||
height: 30px;
|
||
background-color: #e6f4ff;
|
||
color: #0080ff;
|
||
border-radius: 30px;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.special-tag {
|
||
background-color: #BFDBFE;
|
||
color: #3152B8;
|
||
padding: 2px 6px;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
margin-left: 8px;
|
||
}
|
||
|
||
.traffic-purchase-wrapper {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.loading-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 40rpx 0;
|
||
|
||
.loading-image {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
}
|
||
|
||
.loading-text {
|
||
margin-top: 20rpx;
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
}
|
||
}
|
||
|
||
.error-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 40rpx 0;
|
||
|
||
.error-image {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
}
|
||
|
||
.error-text {
|
||
margin: 20rpx 0;
|
||
font-size: 28rpx;
|
||
color: #ff4d4f;
|
||
}
|
||
|
||
.retry-button {
|
||
margin-top: 20rpx;
|
||
padding: 10rpx 30rpx;
|
||
font-size: 28rpx;
|
||
color: #fff;
|
||
background-color: #2979ff;
|
||
border-radius: 8rpx;
|
||
}
|
||
}
|
||
|
||
.usage-loading {
|
||
text-align: center;
|
||
color: #666;
|
||
font-size: 14px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.usage-error {
|
||
text-align: center;
|
||
color: #ff4d4f;
|
||
font-size: 14px;
|
||
margin-bottom: 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.retry-button-small {
|
||
margin-top: 10px;
|
||
padding: 4px 15px;
|
||
font-size: 14px;
|
||
color: #fff;
|
||
background-color: #2979ff;
|
||
border-radius: 4px;
|
||
display: inline-block;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.usage-date {
|
||
font-size: 12px;
|
||
color: #666;
|
||
margin-top: 10px;
|
||
text-align: right;
|
||
}
|
||
</style> |