From ca36402f4561b3e3241234c7887f5684cab621d7 Mon Sep 17 00:00:00 2001
From: zhongzm <zhongzm@agt.com>
Date: Tue, 24 Dec 2024 18:41:27 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E5=A5=97=E9=A4=90=E7=95=8C=E9=9D=A2?=
 =?UTF-8?q?=E8=B7=AF=E5=BE=84=E4=BF=AE=E6=94=B9=E8=B0=83=E7=94=A8=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/set-meal/index.vue | 258 +----------------------------------
 1 file changed, 3 insertions(+), 255 deletions(-)

diff --git a/src/views/set-meal/index.vue b/src/views/set-meal/index.vue
index 8bfe66a..72f8976 100644
--- a/src/views/set-meal/index.vue
+++ b/src/views/set-meal/index.vue
@@ -1,259 +1,7 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n';
-const { t } = useI18n();
-interface PackageOption {
-  id: number
-  price: number
-  minutes: number
-  data: number
-  isRecommended?: boolean
-  promotion?: string
-  callMinutes?: string
-  cloudStorage?: string
-  effectiveDate?: string
-}
-
-import { ref } from 'vue'
-
-const packageOptions: PackageOption[] = [
-  {
-    id: 1,
-    price: 59,
-    minutes: 100,
-    data: 10,
-    isRecommended: true,
-    promotion: '升59元全家享套餐，每月享10元话费+10GB国内通用流量，共12个月；限时加享价值120元热门会员优惠',
-    callMinutes: '100分钟，当月有效',
-    cloudStorage: '40GB，每月有效',
-    effectiveDate: '下一月结日'
-  },
-  { id: 2, price: 59, minutes: 100, data: 10 },
-  { id: 3, price: 79, minutes: 150, data: 15 },
-  { id: 4, price: 99, minutes: 200, data: 20 },
-  { id: 5, price: 129, minutes: 300, data: 30 },
-  { id: 6, price: 169, minutes: 500, data: 40 },
-]
-
-const selectedPackage = ref(packageOptions[0])
-
-const selectPackage = (option: PackageOption) => {
-  selectedPackage.value = option
-}
+import LineChart from '@/views/home/modules/line-chart.vue';
 </script>
-
 <template>
-  <div class="package-container">
-    <!-- 顶部价格展示 -->
-    <div class="price-header">
-      <div class="price">
-        <span class="currency">¥</span>
-        <span class="amount">{{ selectedPackage.price }}</span>
-        <span class="period">/月</span>
-      </div>
-      <div class="subtitle">{{t('page.setmeal.changemeallable')}}</div>
-    </div>
-
-    <!-- 套餐选项 -->
-    <div class="package-options">
-      <h3 class="section-title">{{ t('page.setmeal.changablelevel') }}</h3>
-      <div class="options-grid">
-        <div
-          v-for="option in packageOptions"
-          :key="option.id"
-          :class="[
-            'option-card',
-            {
-              recommended: option.isRecommended,
-              selected: selectedPackage.id === option.id
-            }
-          ]"
-          @click="selectPackage(option)"
-        >
-          <div v-if="option.isRecommended" class="recommended-tag">{{ t('page.setmeal.highlyrecommended') }}</div>
-          <div class="price">¥{{ option.price }}</div>
-          <div class="details">
-            {{ option.minutes }} {{ t('page.setmeal.mealmin') }} / {{ option.data }}GB
-            <template v-if="option.isRecommended">/ {{ t('page.setmeal.mealvip') }}</template>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- 套餐详情 -->
-    <div class="package-details">
-      <h3 class="section-title">{{ t('page.setmeal.mealdetail') }}</h3>
-      <div class="details-list">
-        <div class="detail-item">
-          <div class="label">{{ t('page.setmeal.Limitedtimeoffer') }}</div>
-          <div class="value highlight">{{ selectedPackage.promotion || '暂无优惠' }}</div>
-        </div>
-        <div class="detail-item">
-          <div class="label">{{ t('page.setmeal.GeneralPurposeTraffic') }}</div>
-          <div class="value">{{ `${selectedPackage.data}GB，当月有效` }}</div>
-        </div>
-        <div class="detail-item">
-          <div class="label">{{ t('page.setmeal.Effectivemethod') }}</div>
-          <div class="value">{{ selectedPackage.effectiveDate || '下一月结日' }}</div>
-        </div>
-      </div>
-    </div>
-
-    <!-- 底部操作栏 -->
-    <div class="bottom-bar">
-      <button class="btn-primary">{{ t('page.setmeal.Applynow') }}</button>
-    </div>
-  </div>
+  <LineChart />
 </template>
-
-<style scoped>
-.package-container {
-  background: #f5f5f5;
-  min-height: 100vh;
-  padding: 16px 16px 80px;
-}
-
-.price-header {
-  background: #fff1f0;
-  padding: 20px;
-  border-radius: 12px;
-  margin-bottom: 16px;
-}
-
-.price {
-  color: #ff4d4f;
-  margin-bottom: 8px;
-}
-
-.currency {
-  font-size: 20px;
-}
-
-.amount {
-  font-size: 32px;
-  font-weight: bold;
-}
-
-.period {
-  font-size: 16px;
-}
-
-.subtitle {
-  font-size: 14px;
-  color: #666;
-}
-
-.section-title {
-  font-size: 16px;
-  font-weight: 500;
-  margin-bottom: 16px;
-  color: #333;
-  position: relative;
-  padding-left: 12px;
-}
-
-.section-title::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 4px;
-  height: 16px;
-  background: #1890ff;
-  border-radius: 2px;
-}
-
-.options-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 12px;
-  margin-bottom: 16px;
-}
-
-.option-card {
-  background: white;
-  padding: 16px;
-  border-radius: 8px;
-  text-align: center;
-  position: relative;
-  border: 1px solid #e8e8e8;
-  cursor: pointer;
-  transition: all 0.3s;
-}
-
-.option-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.option-card.selected {
-  border-color: #ff4d4f;
-  background: #fff1f0;
-}
-
-.recommended-tag {
-  position: absolute;
-  top: 0;
-  left: 0;
-  background: #ff4d4f;
-  color: white;
-  font-size: 12px;
-  padding: 2px 8px;
-  border-radius: 0 0 8px 0;
-}
-
-.package-details {
-  background: white;
-  padding: 16px;
-  border-radius: 12px;
-}
-
-.detail-item {
-  display: flex;
-  padding: 12px 0;
-  border-bottom: 1px solid #f0f0f0;
-}
-
-.detail-item:last-child {
-  border-bottom: none;
-}
-
-.label {
-  width: 80px;
-  color: #666;
-}
-
-.value {
-  flex: 1;
-  color: #333;
-}
-
-.value.highlight {
-  color: #ff4d4f;
-}
-
-.bottom-bar {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: white;
-  padding: 12px 16px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
-  height: 60px;
-}
-
-.btn-primary {
-  background: #ff4d4f;
-  color: white;
-  border: none;
-  padding: 12px 32px;
-  border-radius: 24px;
-  font-size: 16px;
-  width: 90%;
-  max-width: 400px;
-}
-</style>
+<style scoped></style>