Initial commit

pages/result/result.js

@@ -0,0 +1,252 @@
+// result.js
+const app = getApp()
+
+Page({
+  data: {
+    event: null,
+    selectedStrategies: [],
+    result: {
+      title: "",
+      description: "",
+      score: 0,
+      scoreText: "",
+      imageClass: ""
+    },
+    historyLessons: [],
+    isLoading: true,
+    showShareTip: false
+  },
+  
+  onLoad: function() {
+    wx.showLoading({
+      title: '分析结果中...',
+      mask: true
+    });
+    
+    const selectedEvent = app.globalData.selectedEvent;
+    const selectedStrategies = app.globalData.selectedStrategies;
+    
+    if (!selectedEvent || !selectedStrategies || selectedStrategies.length === 0) {
+      wx.showToast({
+        title: '缺少必要数据',
+        icon: 'none',
+        duration: 2000
+      });
+      setTimeout(() => {
+        wx.navigateBack();
+      }, 2000);
+      return;
+    }
+    
+    // 模拟结果计算延迟，增强体验
+    setTimeout(() => {
+      // 计算结果
+      const result = this.calculateResult(selectedEvent, selectedStrategies);
+      const lessons = this.generateHistoryLessons(selectedEvent, selectedStrategies);
+      
+      this.setData({
+        event: selectedEvent,
+        selectedStrategies: selectedStrategies,
+        result: result,
+        historyLessons: lessons,
+        isLoading: false
+      });
+      
+      wx.hideLoading();
+    }, 1500);
+  },
+  
+  calculateResult: function(event, strategies) {
+    // 基础分数，根据策略数量和适用性计算
+    let score = 0;
+    const maxScore = 100;
+    const strategiesCount = strategies.length;
+    
+    // 针对每个策略评分
+    strategies.forEach(item => {
+      const strategy = item.strategy;
+      
+      // 策略是否适用于当前事件类型
+      if (strategy.applicable && strategy.applicable.includes(event.type)) {
+        // 基础加分
+        score += 20;
+        
+        // 根据危机等级和策略类型给予额外加分
+        if (event.level === 3) { // 高级危机
+          if (strategiesCount >= 3) { // 多种策略组合应对高级危机
+            score += 10;
+          }
+        } else if (event.level === 2) { // 中级危机
+          if (strategiesCount >= 2) { // 至少两种策略
+            score += 5;
+          }
+        }
+        
+        // 根据策略选择的轮次给予不同评分
+        // 某些危机类型在早期应对更有效
+        if (item.round === 1 && (event.type === 'fakeCurrency' || event.type === 'exchange')) {
+          score += 5; // 早期应对金融类危机更有效
+        }
+        
+        // 组合策略加分（比如经济+行政双管齐下）
+        const typeCount = this.countStrategyTypes(strategies);
+        if (typeCount >= 2) { // 如果使用了至少两种不同类型的策略
+          score += 5;
+        }
+      } else {
+        // 使用了不适用的策略
+        score -= 10;
+      }
+    });
+    
+    // 最终得分不超过100，不低于0
+    score = Math.min(Math.max(score, 0), maxScore);
+    
+    // 根据得分确定结果文本
+    let title = "";
+    let description = "";
+    let scoreText = "";
+    let imageClass = "";
+    
+    if (score >= 90) {
+      title = "完美应对！";
+      description = "您的策略组合非常出色，充分借鉴了历史经验，有效应对了" + event.title + "。根据地经济形势明显好转，边币稳定流通，人民生活得到保障。";
+      scoreText = "卓越";
+      imageClass = "result-excellent";
+    } else if (score >= 70) {
+      title = "有效应对";
+      description = "您的策略组合较为合理，基本控制了" + event.title + "带来的影响。根据地经济形势稳定，边币信任度维持，保障了基本生活需求。";
+      scoreText = "良好";
+      imageClass = "result-good";
+    } else if (score >= 40) {
+      title = "基本应对";
+      description = "您的部分策略发挥了作用，但面对" + event.title + "仍有不足。根据地经济受到一定冲击，边币价值有所波动，生活水平略有下降。";
+      scoreText = "一般";
+      imageClass = "result-average";
+    } else {
+      title = "应对失败";
+      description = "您的策略未能有效应对" + event.title + "。根据地经济遭受重创，边币严重贬值，人民生活陷入困境。建议重新思考策略组合。";
+      scoreText = "不佳";
+      imageClass = "result-poor";
+    }
+    
+    return {
+      title: title,
+      description: description,
+      score: score,
+      scoreText: scoreText,
+      imageClass: imageClass
+    };
+  },
+  
+  // 统计策略类型数量
+  countStrategyTypes: function(strategies) {
+    const types = new Set();
+    strategies.forEach(item => {
+      if (item.strategy.id.startsWith('economic')) {
+        types.add('economic');
+      } else if (item.strategy.id.startsWith('admin')) {
+        types.add('administrative');
+      } else if (item.strategy.id.startsWith('mob')) {
+        types.add('mobilization');
+      }
+    });
+    return types.size;
+  },
+  
+  // 生成历史经验教训
+  generateHistoryLessons: function(event, strategies) {
+    const lessons = [];
+    
+    // 根据事件类型和策略选择生成相关历史经验
+    if (event.type === 'fakeCurrency') {
+      lessons.push({
+        title: "货币稳定的关键经验",
+        content: "历史上，边区政府通过加强金融制度建设和稳定物价，有效维护了边币流通秩序。"
+      });
+    } else if (event.type === 'shortage') {
+      lessons.push({
+        title: "应对物资短缺的经验",
+        content: "各根据地在物资匮乏时期，通过发展生产、精简机构、厉行节约等多种方式度过难关。"
+      });
+    } else if (event.type === 'exchange') {
+      lessons.push({
+        title: "汇率稳定的历史借鉴",
+        content: "边区政府曾通过调整法币与边币比价、加强市场监管等措施，保障币值稳定。"
+      });
+    }
+    
+    // 根据策略选择添加具体历史案例
+    const hasEconomic = strategies.some(item => item.strategy.id.startsWith('economic'));
+    const hasAdmin = strategies.some(item => item.strategy.id.startsWith('admin'));
+    const hasMob = strategies.some(item => item.strategy.id.startsWith('mob'));
+    
+    if (hasEconomic && hasAdmin) {
+      lessons.push({
+        title: "经济与行政措施协同",
+        content: "历史经验表明，经济措施与行政手段相结合，能形成系统性解决方案，效果优于单一策略。"
+      });
+    }
+    
+    if (hasMob) {
+      lessons.push({
+        title: "群众基础的重要性",
+        content: "边区政府的各项政策能够成功实施，离不开广大人民群众的支持与参与。动员群众是解决危机的基础。"
+      });
+    }
+    
+    return lessons;
+  },
+  
+  // 重新应对按钮点击事件
+  handleRestart: function() {
+    wx.showLoading({
+      title: '准备中...',
+      mask: true
+    });
+    
+    setTimeout(() => {
+      wx.hideLoading();
+      wx.navigateBack({
+        delta: 1
+      });
+    }, 800);
+  },
+  
+  // 返回首页按钮点击事件
+  handleBackToHome: function() {
+    wx.showLoading({
+      title: '返回首页...',
+      mask: true
+    });
+    
+    setTimeout(() => {
+      wx.hideLoading();
+      wx.navigateBack({
+        delta: 2
+      });
+    }, 800);
+  },
+  
+  // 分享按钮点击事件
+  handleShare: function() {
+    this.setData({
+      showShareTip: true
+    });
+    
+    setTimeout(() => {
+      this.setData({
+        showShareTip: false
+      });
+    }, 3000);
+  },
+  
+  // 生命周期函数
+  onShareAppMessage: function() {
+    return {
+      title: `我在边区危机中获得了${this.data.result.score}分的评价！`,
+      path: '/pages/index/index',
+      imageUrl: '/images/share-img.jpg' // 需要提供分享图片
+    };
+  }
+}) 

pages/result/result.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "navigationBarTitleText": "边币战争 - 应对结果"
+} 

pages/result/result.wxml

@@ -0,0 +1,83 @@
+<!--result.wxml-->
+<view class="container vintage-bg page-transition">
+  <!-- 加载状态 -->
+  <view class="loading-overlay" wx:if="{{isLoading}}">
+    <view class="loading-spinner"></view>
+    <view class="loading-text">分析战略成效...</view>
+  </view>
+  
+  <view class="content-area" wx:if="{{!isLoading}}">
+    <view class="result-header">
+      <view class="result-title">应对结果</view>
+      <view class="event-info">
+        <view class="event-title">危机事件：{{event.title}}</view>
+        <view class="event-level">
+          危机等级：
+          <view class="level-dots">
+            <view class="level-dot {{event.level >= 1 ? 'active' : ''}}"></view>
+            <view class="level-dot {{event.level >= 2 ? 'active' : ''}}"></view>
+            <view class="level-dot {{event.level >= 3 ? 'active' : ''}}"></view>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <view class="result-card card">
+      <view class="result-image {{result.imageClass}}"></view>
+      <view class="result-content">
+        <view class="result-outcome">{{result.title}}</view>
+        <view class="result-score">
+          效果评估：<text class="score-text">{{result.scoreText}}</text>
+          <view class="score-value">
+            <text class="score-number">{{result.score}}</text>/100
+          </view>
+        </view>
+        <view class="result-description">{{result.description}}</view>
+      </view>
+    </view>
+    
+    <view class="strategies-summary">
+      <view class="summary-title">您采取的策略</view>
+      <view class="strategies-list">
+        <view wx:for="{{selectedStrategies}}" wx:key="index" class="strategy-item card">
+          <view class="strategy-round">第{{item.round}}轮</view>
+          <view class="strategy-title">{{item.strategy.title}}</view>
+          <view class="strategy-desc">{{item.strategy.description}}</view>
+        </view>
+      </view>
+    </view>
+    
+    <view class="historical-lesson">
+      <view class="lesson-title">历史经验总结</view>
+      
+      <!-- 动态生成的历史教训 -->
+      <view class="lessons-list">
+        <view wx:for="{{historyLessons}}" wx:key="index" class="lesson-card card">
+          <view class="lesson-card-title">{{item.title}}</view>
+          <view class="lesson-card-content">{{item.content}}</view>
+        </view>
+      </view>
+      
+      <view class="lesson-content card">
+        面对{{event.title}}类型的危机，历史上的根据地通常采取综合策略，既有经济手段，也有行政举措，更注重发动群众。应对此类危机的关键在于迅速行动、多管齐下，特别是在危机等级较高时，需要各种措施协同配合。在实际历史中，那些成功渡过经济危机的根据地，往往能够灵活运用各种资源，并且得到人民的广泛支持。
+      </view>
+    </view>
+    
+    <view class="action-buttons">
+      <view class="btn-row">
+        <view class="btn btn-outline" bindtap="handleRestart">重新应对</view>
+        <view class="btn" bindtap="handleBackToHome">返回首页</view>
+      </view>
+      <view class="share-btn" bindtap="handleShare">
+        <image class="share-icon" src="/images/share.png" mode="aspectFit"></image>
+        分享结果
+      </view>
+    </view>
+    
+    <!-- 分享提示 -->
+    <view class="share-tip {{showShareTip ? 'show' : ''}}" wx:if="{{showShareTip}}">
+      点击右上角"..."按钮分享给好友
+      <view class="share-tip-arrow"></view>
+    </view>
+  </view>
+</view> 

pages/result/result.wxss

@@ -0,0 +1,479 @@
+/**result.wxss**/
+.container {
+  padding: 30rpx;
+  min-height: 100vh;
+}
+
+.vintage-bg {
+  background-color: #f8f6f1;
+  background-image: url('data:image/png;base64,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');
+  position: relative;
+}
+
+.page-transition {
+  animation: fadeIn 0.5s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+/* 加载状态 */
+.loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(248, 246, 241, 0.9);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 999;
+}
+
+.loading-spinner {
+  width: 80rpx;
+  height: 80rpx;
+  border: 6rpx solid rgba(92, 184, 92, 0.2);
+  border-left-color: #5cb85c;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+.loading-text {
+  margin-top: 30rpx;
+  font-size: 32rpx;
+  color: #5cb85c;
+  font-weight: bold;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.content-area {
+  animation: slideUp 0.8s ease-out;
+}
+
+@keyframes slideUp {
+  from { 
+    transform: translateY(50rpx);
+    opacity: 0;
+  }
+  to { 
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.result-header {
+  margin-bottom: 30rpx;
+}
+
+.result-title {
+  font-size: 40rpx;
+  font-weight: bold;
+  color: #333;
+  text-align: center;
+  margin-bottom: 20rpx;
+  position: relative;
+  display: inline-block;
+}
+
+.result-title::after {
+  content: '';
+  position: absolute;
+  bottom: -10rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 120rpx;
+  height: 4rpx;
+  background-color: #8B0000;
+}
+
+.event-info {
+  background-color: #fff;
+  padding: 20rpx;
+  border-radius: 10rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
+  margin-top: 20rpx;
+}
+
+.event-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 10rpx;
+}
+
+.event-level {
+  display: flex;
+  align-items: center;
+  font-size: 28rpx;
+  color: #666;
+}
+
+.level-dots {
+  display: flex;
+  margin-left: 10rpx;
+}
+
+.level-dot {
+  width: 20rpx;
+  height: 20rpx;
+  border-radius: 50%;
+  background-color: #ddd;
+  margin-right: 5rpx;
+  transition: all 0.3s ease;
+}
+
+.level-dot.active {
+  background-color: #d9534f;
+  animation: pulseDot 2s infinite;
+}
+
+@keyframes pulseDot {
+  0% { opacity: 1; }
+  50% { opacity: 0.6; }
+  100% { opacity: 1; }
+}
+
+.card {
+  background-color: #fff;
+  border-radius: 10rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
+  margin-bottom: 30rpx;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  padding: 20rpx;
+}
+
+.card:hover {
+  transform: translateY(-5rpx);
+  box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.15);
+}
+
+.result-card {
+  overflow: hidden;
+  animation: scaleIn 0.8s ease;
+  padding: 0;
+}
+
+@keyframes scaleIn {
+  0% {
+    transform: scale(0.95);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.result-image {
+  height: 200rpx;
+  background-size: cover;
+  background-position: center;
+}
+
+.result-excellent {
+  background-image: linear-gradient(45deg, #2ecc71, #27ae60);
+}
+
+.result-good {
+  background-image: linear-gradient(45deg, #3498db, #2980b9);
+}
+
+.result-average {
+  background-image: linear-gradient(45deg, #f1c40f, #f39c12);
+}
+
+.result-poor {
+  background-image: linear-gradient(45deg, #e74c3c, #c0392b);
+}
+
+.result-content {
+  padding: 20rpx;
+}
+
+.result-outcome {
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 15rpx;
+}
+
+.result-score {
+  font-size: 28rpx;
+  color: #666;
+  margin-bottom: 15rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.score-text {
+  color: #5cb85c;
+  font-weight: bold;
+}
+
+.score-value {
+  background-color: #f8f9fa;
+  padding: 10rpx 20rpx;
+  border-radius: 20rpx;
+  text-align: center;
+}
+
+.score-number {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #8B0000;
+}
+
+.result-description {
+  font-size: 28rpx;
+  color: #666;
+  line-height: 1.5;
+}
+
+.strategies-summary {
+  margin-bottom: 30rpx;
+  animation: slideInRight 1s ease-out;
+  animation-fill-mode: both;
+  animation-delay: 0.3s;
+}
+
+@keyframes slideInRight {
+  from {
+    transform: translateX(30rpx);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.summary-title, .lesson-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  margin-bottom: 20rpx;
+  color: #333;
+  position: relative;
+  padding-bottom: 10rpx;
+}
+
+.summary-title::after, .lesson-title::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 80rpx;
+  height: 4rpx;
+  background-color: #8B0000;
+  transition: width 0.3s ease;
+}
+
+.summary-title:hover::after, .lesson-title:hover::after {
+  width: 160rpx;
+}
+
+.strategies-list {
+  display: flex;
+  flex-direction: column;
+  gap: 20rpx;
+}
+
+.strategy-item {
+  position: relative;
+  border-left: 8rpx solid #5cb85c;
+  transition: all 0.3s ease;
+}
+
+.strategy-round {
+  font-size: 24rpx;
+  color: #888;
+  margin-bottom: 10rpx;
+}
+
+.strategy-title {
+  font-size: 30rpx;
+  font-weight: bold;
+  margin-bottom: 10rpx;
+  color: #333;
+}
+
+.strategy-desc {
+  font-size: 26rpx;
+  color: #666;
+  line-height: 1.5;
+}
+
+.historical-lesson {
+  margin-bottom: 40rpx;
+  animation: slideInLeft 1s ease-out;
+  animation-fill-mode: both;
+  animation-delay: 0.6s;
+}
+
+@keyframes slideInLeft {
+  from {
+    transform: translateX(-30rpx);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.lessons-list {
+  display: flex;
+  flex-direction: column;
+  gap: 20rpx;
+  margin-bottom: 20rpx;
+}
+
+.lesson-card {
+  border-left: 8rpx solid #f0ad4e;
+  animation: fadeInUp 0.6s ease-out;
+  animation-fill-mode: both;
+}
+
+.lesson-card:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.lesson-card:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes fadeInUp {
+  from { 
+    transform: translateY(20rpx);
+    opacity: 0;
+  }
+  to { 
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.lesson-card-title {
+  font-size: 28rpx;
+  font-weight: bold;
+  margin-bottom: 10rpx;
+  color: #333;
+}
+
+.lesson-card-content {
+  font-size: 26rpx;
+  color: #666;
+  line-height: 1.5;
+}
+
+.lesson-content {
+  font-size: 28rpx;
+  color: #666;
+  line-height: 1.6;
+  border-left: 8rpx solid #5bc0de;
+}
+
+.action-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 20rpx;
+  margin: 30rpx 0;
+}
+
+.btn-row {
+  display: flex;
+  justify-content: space-between;
+}
+
+.btn {
+  padding: 20rpx 40rpx;
+  border-radius: 50rpx;
+  font-size: 30rpx;
+  text-align: center;
+  background-color: #5cb85c;
+  color: #fff;
+  flex: 1;
+  margin: 0 10rpx;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.btn:active {
+  transform: scale(0.98);
+  background-color: #4cae4c;
+}
+
+.btn-outline {
+  background-color: transparent;
+  border: 2rpx solid #5cb85c;
+  color: #5cb85c;
+}
+
+.btn-outline:active {
+  background-color: rgba(92, 184, 92, 0.1);
+}
+
+.share-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20rpx;
+  border-radius: 50rpx;
+  background-color: #f8f9fa;
+  color: #333;
+  font-size: 28rpx;
+  margin-top: 10rpx;
+  transition: all 0.3s ease;
+}
+
+.share-icon {
+  width: 40rpx;
+  height: 40rpx;
+  margin-right: 10rpx;
+}
+
+.share-btn:active {
+  background-color: #e9ecef;
+  transform: scale(0.98);
+}
+
+/* 分享提示 */
+.share-tip {
+  position: fixed;
+  top: 20rpx;
+  right: 30rpx;
+  background-color: rgba(0, 0, 0, 0.7);
+  color: #fff;
+  padding: 15rpx 30rpx;
+  border-radius: 10rpx;
+  font-size: 26rpx;
+  opacity: 0;
+  transform: translateY(-20rpx);
+  transition: all 0.3s ease;
+  z-index: 999;
+}
+
+.share-tip.show {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.share-tip-arrow {
+  position: absolute;
+  top: -16rpx;
+  right: 30rpx;
+  width: 0;
+  height: 0;
+  border-left: 16rpx solid transparent;
+  border-right: 16rpx solid transparent;
+  border-bottom: 16rpx solid rgba(0, 0, 0, 0.7);
+}