积分

src/App.vue

@@ -25,9 +25,16 @@ export default {
 </script>
 
 <style>
+/* 引入更好的字体 */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
 html {
   font-size: 16px;
   height: 100%;
+  /* 优化字体渲染 */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
 }
 
 body {
@@ -36,27 +43,151 @@ body {
   font-size: 16px;
   -webkit-text-size-adjust: 100%;
   height: 100%;
+  /* 优化字体显示 */
+  font-feature-settings: "kern" 1;
+  font-kerning: normal;
 }
-h1{
+
+h1 {
   margin: 0;
   padding: 0;
 }
+
 #app {
-  font-family: Arial, sans-serif;
+  /* 优化字体栈 - 优先使用系统字体，fallback到网络字体 */
+  font-family: 
+    /* 系统字体优先 */
+    -apple-system, BlinkMacSystemFont, 
+    /* Windows 系统字体 */
+    "Segoe UI", 
+    /* 现代无衬线字体 */
+    "Inter", "Helvetica Neue", Helvetica, Arial,
+    /* 中文字体 */
+    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei",
+    /* 通用 fallback */
+    sans-serif,
+    /* Emoji 支持 */
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    
+  /* 字体渲染优化 */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  font-variant-ligatures: common-ligatures;
+  
+  /* 文本渲染优化 */
+  text-rendering: optimizeLegibility;
+  
+  /* 字体大小调整 */
+  font-size: 14px;
+  line-height: 1.5;
+  letter-spacing: 0.01em;
+  
   color: #2c3e50;
   height: 100%;
-  /* padding-bottom: 50px; */
   min-height: 100vh;
   position: relative;
 }
 
+/* 针对不同元素的字体优化 */
+h1, h2, h3, h4, h5, h6 {
+  font-family: inherit;
+  font-weight: 600;
+  line-height: 1.3;
+  letter-spacing: -0.01em;
+}
+
+p, span, div {
+  font-family: inherit;
+  font-weight: 400;
+}
+
+/* 按钮字体优化 */
+button, .btn {
+  font-family: inherit;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+}
+
+/* 输入框字体优化 */
+input, textarea, select {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: 1.4;
+}
+
+/* PC端字体优化 */
+@media screen and (min-width: 768px) {
+  #app {
+    font-size: 15px;
+    line-height: 1.6;
+    letter-spacing: 0.005em;
+  }
+  
+  h1, h2, h3, h4, h5, h6 {
+    letter-spacing: -0.02em;
+  }
+  
+  /* PC端使用稍细的字重 */
+  body {
+    font-weight: 400;
+  }
+}
+
+/* 高分辨率屏幕优化 */
+@media screen and (-webkit-min-device-pixel-ratio: 2), 
+       screen and (min-resolution: 192dpi) {
+  #app {
+    -webkit-font-smoothing: subpixel-antialiased;
+  }
+}
+
+/* 暗色模式字体优化 */
+@media (prefers-color-scheme: dark) {
+  #app {
+    -webkit-font-smoothing: antialiased;
+  }
+}
+
 .tab-bar {
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
   z-index: 100;
+  /* 确保 tab-bar 也使用优化的字体 */
+  font-family: inherit;
+}
+
+/* 特殊字体类 */
+.font-medium {
+  font-weight: 500;
+}
+
+.font-semibold {
+  font-weight: 600;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.text-xs {
+  font-size: 12px;
+}
+
+.text-sm {
+  font-size: 13px;
+}
+
+.text-base {
+  font-size: 14px;
+}
+
+.text-lg {
+  font-size: 16px;
+}
+
+.text-xl {
+  font-size: 18px;
 }
 </style>

src/api/profile.js

@@ -69,4 +69,6 @@ export const setBankInfo = (data) => {
     data: formData,
     loading: true
   });
-};
+};
+// 获取积分商城商品列表 
+export const getLotteryPrize = () => request({ url: "/index/get_lottery_prize", method: "get", loading: true });

src/router/index.js

@@ -29,6 +29,8 @@ import OrderManagement from '@/views/OrderManagement.vue'
 import Medical from '@/views/Medical.vue'
 // 红旗中国 后期邀请百姓直接替换
 import China from '@/views/China.vue'
+import Jifen from '@/views/jifen.vue'
+import Dhjilu from '@/views/dhjilu.vue'
 Vue.use(VueRouter);
 
 const routes = [
@@ -239,7 +241,23 @@ const routes = [
     meta: {
       hideTabBar: true
   },
-}
+  },
+  {
+    path: "/jifen",
+    name: "Jifen",
+    component: Jifen,
+    meta: {
+      hideTabBar: true
+  },
+  },
+  {
+    path: "/dhjilu",
+    name: "Dhjilu",
+    component: Dhjilu,
+    meta: {
+      hideTabBar: true
+  },
+  },
 ];
 
 const router = new VueRouter({

src/views/Dynamic.vue

@@ -132,6 +132,7 @@ export default {
   box-sizing: border-box;
   overflow-y: auto;
   position: relative;
+  padding-bottom: 100px;
 }
 
 .dynamic-title {

src/views/Home.vue

@@ -1,17 +0,0 @@
-<template>
-  <div class="home">
-    <h1>首页</h1>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Home'
-}
-</script>
-
-<style scoped>
-.home {
-  padding: 20px;
-}
-</style> 

src/views/dhjilu.vue

@@ -0,0 +1,288 @@
+<template>
+  <div>
+    <!-- 导航栏 -->
+    <div class="nav-bar">
+      <div class="back-btn" @click="$router.back()">
+        <i class="arrow-left"></i>
+      </div>
+      <div class="title">兑换记录</div>
+    </div>
+
+    <!-- 主容器 -->
+    <div class="dhjilu-container">
+      <div class="content-wrapper">
+        <!-- 记录列表 -->
+        <div class="records-list">
+          <div 
+            v-for="(record, index) in exchangeRecords" 
+            :key="record.id"
+            class="record-item"
+          >
+            <div class="record-content">
+              <div class="record-number">奖品{{ getChineseNumber(index + 1) }}</div>
+              <div class="record-name">{{ record.productName }}</div>
+              <div class="record-price">价值{{ record.value }}元</div>
+              <div class="record-count">{{ record.count }}份</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Toast 提示 -->
+    <Toast ref="toast" />
+  </div>
+</template>
+
+<script>
+import Toast from '@/components/Toast.vue';
+
+export default {
+  name: 'DhjiluPage',
+  components: {
+    Toast
+  },
+  data() {
+    return {
+      exchangeRecords: [
+        {
+          id: 1,
+          productName: '小米手机',
+          value: 5999,
+          count: 0,
+          points: 100,
+          exchangeTime: '2024-01-15 14:30:00',
+          status: 'completed'
+        },
+        {
+          id: 2,
+          productName: '片仔癀',
+          value: 18000,
+          count: 0,
+          points: 200,
+          exchangeTime: '2024-01-14 16:20:00',
+          status: 'pending'
+        },
+        {
+          id: 3,
+          productName: '野山参',
+          value: 38888,
+          count: 1,
+          points: 300,
+          exchangeTime: '2024-01-13 09:15:00',
+          status: 'completed'
+        },
+        {
+          id: 4,
+          productName: '纪念金条',
+          value: 78000,
+          count: 0,
+          points: 400,
+          exchangeTime: '2024-01-12 11:45:00',
+          status: 'pending'
+        },
+        {
+          id: 5,
+          productName: '劳力士金表',
+          value: 88000,
+          count: 0,
+          points: 500,
+          exchangeTime: '2024-01-11 15:30:00',
+          status: 'pending'
+        }
+      ]
+    }
+  },
+  mounted() {
+    this.loadExchangeRecords();
+  },
+  methods: {
+    // 加载兑换记录
+    async loadExchangeRecords() {
+      try {
+        // 这里应该调用真实的API
+        // const response = await getExchangeRecords();
+        // this.exchangeRecords = response.data;
+        
+        // 当前使用模拟数据，实际开发时替换为API调用
+        console.log('兑换记录加载完成');
+      } catch (error) {
+        console.error('加载兑换记录失败:', error);
+        this.$refs.toast.show('加载记录失败', 'error');
+      }
+    },
+
+    // 转换数字为中文
+    getChineseNumber(num) {
+      const chineseNumbers = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'];
+      return chineseNumbers[num - 1] || num;
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* 导航栏样式 */
+.nav-bar {
+  height: 44px;
+  background-color: #fff;
+  color: #000;
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding: 0 15px;
+  font-weight: bold;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
+
+.back-btn {
+  width: 24px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.arrow-left {
+  width: 12px;
+  height: 12px;
+  border-left: 2px solid #000;
+  border-bottom: 2px solid #000;
+  transform: rotate(45deg);
+}
+
+.title {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 16px;
+}
+
+/* 主容器 */
+.dhjilu-container {
+  min-height: calc(100vh - 44px);
+  background: linear-gradient(135deg, #c94545 0%, #b43a39 100%);
+  padding: 20px;
+  padding-bottom: 100px;
+}
+
+.content-wrapper {
+  background: white;
+  border-radius: 12px;
+  padding: 15px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+}
+
+/* 记录列表 */
+.records-list {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.record-item {
+  background: linear-gradient(135deg, #f5a5a5 0%, #f0b8b8 100%);
+  border-radius: 12px;
+  padding: 20px 15px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  transition: transform 0.2s ease;
+}
+
+.record-item:active {
+  transform: scale(0.98);
+}
+
+.record-content {
+  display: grid;
+  grid-template-columns: auto 1fr auto auto;
+  align-items: center;
+  gap: 15px;
+}
+
+.record-number {
+  font-size: 16px;
+  font-weight: 600;
+  color: #d91d42;
+  min-width: 50px;
+}
+
+.record-name {
+  font-size: 16px;
+  font-weight: 500;
+  color: #333;
+  text-align: left;
+}
+
+.record-price {
+  font-size: 16px;
+  font-weight: 600;
+  color: #d91d42;
+  text-align: right;
+  min-width: 90px;
+}
+
+.record-count {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  text-align: right;
+  min-width: 30px;
+}
+
+/* 响应式优化 */
+@media screen and (max-width: 375px) {
+  .dhjilu-container {
+    padding: 15px;
+  }
+  
+  .record-content {
+    gap: 10px;
+  }
+  
+  .record-number,
+  .record-name,
+  .record-price,
+  .record-count {
+    font-size: 14px;
+  }
+  
+  .record-item {
+    padding: 15px 12px;
+  }
+}
+
+@media screen and (max-width: 320px) {
+  .record-content {
+    gap: 8px;
+  }
+  
+  .record-number,
+  .record-name,
+  .record-price,
+  .record-count {
+    font-size: 13px;
+  }
+  
+  .record-price {
+    min-width: 80px;
+  }
+}
+
+/* 空状态 */
+.empty-state {
+  text-align: center;
+  padding: 60px 20px;
+  color: #999;
+}
+
+.empty-state .icon {
+  font-size: 48px;
+  margin-bottom: 15px;
+  color: #ddd;
+}
+
+.empty-state .text {
+  font-size: 16px;
+  line-height: 1.5;
+}
+</style>

src/views/jifen.vue

@@ -0,0 +1,479 @@
+<template>
+<div>
+<div class="nav-bar">
+        <div class="back-btn" @click="$router.back()">
+            <i class="arrow-left"></i>
+        </div>
+        <div class="title">积分商城</div>
+        </div>
+  <div class="jifen-container">
+    
+    <!-- 头部积分显示 -->
+    <div class="header-section">
+      <div class="points-display">
+        <h2>兑换国家物资</h2>
+        <div class="current-points">{{ userPoints }}</div>
+        <div class="points-label">我的积分</div>
+      </div>
+    </div>
+
+    <!-- 商品网格 -->
+    <div class="products-grid">
+      <div 
+        v-for="product in products" 
+        :key="product.id"
+        class="product-card"
+        :class="{ 'large-card': product.isLarge }"
+      >
+        <div class="product-image">
+          <img :src="product.image" :alt="product.name" />
+        </div>
+        <div class="product-info">
+          <div class="product-info-content">
+            <div class="product-points">{{ product.probability }}积分</div>
+            <div class="product-name">{{ product.name }}</div>
+          </div>
+          <button 
+            class="exchange-btn"
+            @click="handleExchange(product)"
+          >
+            立即兑换
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 兑换确认弹窗 -->
+    <div v-if="showConfirmDialog" class="confirm-overlay">
+      <div class="confirm-dialog">
+        <div class="confirm-content">
+          <h3>确认兑换</h3>
+          <div class="confirm-product">
+            <img :src="selectedProduct.image" :alt="selectedProduct.name" />
+            <div class="confirm-info">
+              <div class="confirm-name">{{ selectedProduct.name }}</div>
+              <div class="confirm-points">需要 {{ selectedProduct.probability }} 积分</div>
+            </div>
+          </div>
+          <p>确认要兑换此商品吗？</p>
+          <div class="confirm-buttons">
+            <button class="btn-cancel" @click="cancelExchange">取消</button>
+            <button class="btn-confirm" @click="confirmExchange">确认兑换</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Toast 提示 -->
+    <Toast ref="toast" />
+  </div>
+  
+</div>
+</template>
+
+<script>
+import Toast from '@/components/Toast.vue';
+import { getLotteryPrize } from '@/api/profile';
+export default {
+  name: 'JifenPage',
+  components: {
+    Toast
+  },
+  data() {
+    return {
+      userPoints: 0.00,
+      showConfirmDialog: false,
+      selectedProduct: null,
+      products: []
+    }
+  },
+  mounted() {
+    // this.loadUserPoints();
+    this.loadProducts();
+  },
+  methods: {
+    // 加载用户积分
+    async loadUserPoints() {
+      try {
+        const res = await getLotteryPrize();
+        this.userPoints = res.data.points;
+      } catch (error) {
+        console.error('加载用户积分失败:', error);
+        this.$refs.toast.show('加载积分失败', 'error');
+      }
+    },
+
+    // 加载商品列表
+    async loadProducts() {
+      try {
+        const res = await getLotteryPrize();
+        this.products = res.data;
+        // 当前使用模拟数据，实际开发时替换为API调用
+        console.log('商品列表加载完成');
+      } catch (error) {
+        console.error('加载商品列表失败:', error);
+        this.$refs.toast.show('加载商品失败', 'error');
+      }
+    },
+
+    // 处理兑换点击
+    handleExchange(product) {
+      if (this.userPoints < product.points) {
+        this.$refs.toast.show('积分不足，无法兑换', 'error');
+        return;
+      }
+      
+      this.selectedProduct = product;
+      this.showConfirmDialog = true;
+    },
+
+    // 取消兑换
+    cancelExchange() {
+      this.showConfirmDialog = false;
+      this.selectedProduct = null;
+    },
+
+    // 确认兑换
+    async confirmExchange() {
+      try {
+        // 这里应该调用真实的兑换API
+        // const response = await exchangeProduct({
+        //   productId: this.selectedProduct.id,
+        //   points: this.selectedProduct.points
+        // });
+        
+        // 模拟兑换成功
+        this.userPoints -= this.selectedProduct.points;
+        this.$refs.toast.show('兑换成功！', 'success');
+        
+        this.showConfirmDialog = false;
+        this.selectedProduct = null;
+        
+        // 可以跳转到兑换记录页面
+        // this.$router.push('/exchange-records');
+        
+      } catch (error) {
+        console.error('兑换失败:', error);
+        this.$refs.toast.show('兑换失败，请重试', 'error');
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.jifen-container {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #c94545 0%, #b43a39 100%);
+  padding: 20px;
+  padding-bottom: 100px;
+}
+
+/* 头部积分显示 */
+.header-section {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.points-display h2 {
+  color: white;
+  font-size: 20px;
+  font-weight: 600;
+  margin-bottom: 10px;
+}
+
+.current-points {
+  color: white;
+  font-size: 48px;
+  font-weight: bold;
+  margin-bottom: 5px;
+  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
+}
+
+.points-label {
+  color: white;
+  font-size: 16px;
+  opacity: 0.9;
+}
+
+/* 商品网格 */
+.products-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 15px;
+  margin-bottom: 20px;
+}
+
+.product-card {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  background: white;
+  border-radius: 12px;
+  padding: 15px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+  transition: transform 0.2s ease;
+}
+
+.product-card:active {
+  transform: scale(0.98);
+}
+
+.product-card.large-card {
+  grid-column: span 2;
+}
+
+.product-image {
+  width: 100%;
+  height: 140px;
+  background: #f5f5f5;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 12px;
+  overflow: hidden;
+}
+
+.large-card .product-image {
+  height: 120px;
+}
+
+.product-image img {
+  width: 80%;
+  height: 80%;
+  object-fit: contain;
+}
+
+.product-info {
+  text-align: center;
+}
+.product-info-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.product-points {
+  font-size: 14px;
+  color: #000;
+  font-weight: 500;
+}
+
+.product-name {
+  font-size: 14px;
+  color: #000;
+  font-weight: 500;
+}
+
+.exchange-btn {
+    margin-top: 10px;
+  width: 100%;
+  background: #c94545;
+  color: white;
+  border: none;
+  border-radius: 20px;
+  padding: 8px 0;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.exchange-btn:hover {
+  background: #b43a39;
+}
+
+.exchange-btn:disabled {
+  background: #ccc;
+  cursor: not-allowed;
+}
+
+.exchange-btn:active {
+  transform: scale(0.95);
+}
+
+/* 确认弹窗 */
+.confirm-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0,0,0,0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.confirm-dialog {
+  background: white;
+  border-radius: 12px;
+  width: 90%;
+  max-width: 400px;
+  overflow: hidden;
+}
+
+.confirm-content {
+  padding: 25px 20px;
+  text-align: center;
+}
+
+.confirm-content h3 {
+  margin: 0 0 20px 0;
+  font-size: 18px;
+  color: #333;
+}
+
+.confirm-product {
+  display: flex;
+  align-items: center;
+  background: #f8f8f8;
+  border-radius: 8px;
+  padding: 15px;
+  margin-bottom: 20px;
+}
+
+.confirm-product img {
+  width: 60px;
+  height: 60px;
+  object-fit: contain;
+  margin-right: 15px;
+  background: white;
+  border-radius: 6px;
+}
+
+.confirm-info {
+  flex: 1;
+  text-align: left;
+}
+
+.confirm-name {
+  font-size: 16px;
+  font-weight: 500;
+  color: #333;
+  margin-bottom: 5px;
+}
+
+.confirm-points {
+  font-size: 14px;
+  color: #c94545;
+  font-weight: 500;
+}
+
+.confirm-content p {
+  margin: 0 0 25px 0;
+  color: #666;
+  font-size: 15px;
+}
+
+.confirm-buttons {
+  display: flex;
+  gap: 12px;
+}
+
+.btn-cancel,
+.btn-confirm {
+  flex: 1;
+  padding: 12px 0;
+  border: none;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.btn-cancel {
+  background: #f5f5f5;
+  color: #666;
+}
+
+.btn-cancel:hover {
+  background: #e8e8e8;
+}
+
+.btn-confirm {
+  background: #c94545;
+  color: white;
+}
+
+.btn-confirm:hover {
+  background: #b43a39;
+}
+
+.btn-cancel:active,
+.btn-confirm:active {
+  transform: scale(0.98);
+}
+
+/* 响应式优化 */
+@media screen and (max-width: 375px) {
+  .jifen-container {
+    padding: 15px;
+  }
+  
+  .products-grid {
+    gap: 12px;
+  }
+  
+  .product-card {
+    padding: 12px;
+  }
+  
+  .current-points {
+    font-size: 42px;
+  }
+  
+  .points-display h2 {
+    font-size: 18px;
+  }
+}
+
+@media screen and (max-width: 320px) {
+  .current-points {
+    font-size: 36px;
+  }
+  
+  .product-image {
+    height: 80px;
+  }
+  
+  .large-card .product-image {
+    height: 100px;
+  }
+}
+.nav-bar {
+  height: 44px;
+  background-color: #fff;
+  color: #000;
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding: 0 15px;
+  font-weight: bold;
+}
+
+.back-btn {
+  width: 24px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.arrow-left {
+  width: 12px;
+  height: 12px;
+  border-left: 2px solid #000;
+  border-bottom: 2px solid #000;
+  transform: rotate(45deg);
+}
+
+.title {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 16px;
+}
+</style>

vue.config.js

@@ -37,7 +37,7 @@ module.exports = {
     https: false,
     proxy: {
       "/api": {
-        target: "https://ui1.gametty.cc/api",
+        target: "https://www.gametty.cc/api",
         changeOrigin: true,
         pathRewrite: {
           "^/api": "",