应客户需求做了一个xunruicms的 始发地→目的地计算查询插件

每一个始发地-目的地都作为一条数据，前端如匹配则计算价格

具体功能如下：

后台可以设置不同的始发地和目的地  他们的价格也不同，前端实现选择不同的始发地到不同的目的地 然后通过输入的体积计算整体货物运费

计算公式是：体积*价格

实现效果如下：

 

实现方法：

首先后台增加一个内容模块，叫价格计算

然后标题作为始发地title

在增加一个字段作为目的地destination

再增加一个字段作为价格price

 

然后增加一个栏目，内容模型选择价格计算，然后将下面代码放在对应的列表页，则可以直接实现效果

<div class="mubanbaba mbbb mb_88 shipping-calculator-v2">
  <div class="scv2-card">
    <div class="scv2-header">
      <i class="scv2-icon fas fa-ship"></i>
      <h3 class="scv2-title">国际海运运费计算器</h3>
    </div>
    
    <form id="scv2Form" class="scv2-form">
      <!-- 港口选择行 -->
      <div class="scv2-port-row">
        <div class="scv2-input-group">
          <label class="scv2-label">
            <i class="fas fa-map-marker-alt"></i> 起运港
          </label>
          <div class="scv2-select-wrapper">
            <select id="scv2FromPort" class="scv2-select" required>
              <option value="">-- 选择起运港 --</option>
              {php $temp_ports = array();}
              {module catid=$catid order=inputtime page=1}
                {if !in_array($t['title'], $temp_ports)}
                  {php $temp_ports[] = $t['title'];}
                  <option value="{$t['title']}">{$t['title']}</option>
                {/if}
              {/module}
            </select>
            <i class="scv2-chevron fas fa-chevron-down"></i>
          </div>
        </div>

        <div class="scv2-arrow">
          <i class="fas fa-long-arrow-alt-right"></i>
        </div>

        <div class="scv2-input-group">
          <label class="scv2-label">
            <i class="fas fa-map-marked-alt"></i> 目的港
          </label>
          <div class="scv2-select-wrapper">
            <select id="scv2ToPort" class="scv2-select" required>
              <option value="">-- 选择目的港 --</option>
              {module catid=$catid order=inputtime page=1}
                <option value="{$t['destination']}" 
                        data-from="{$t['title']}" 
                        data-price="{$t['price']}">
                  {$t['destination']}
                </option>
              {/module}
            </select>
            <i class="scv2-chevron fas fa-chevron-down"></i>
          </div>
        </div>
      </div>

      <!-- 体积输入行 -->
      <div class="scv2-volume-row">
        <div class="scv2-input-group">
          <label class="scv2-label">
            <i class="fas fa-cube"></i> 货物体积 (m³)
          </label>
          <div class="scv2-input-wrapper">
            <input type="number" id="scv2Volume" class="scv2-input" 
                   min="0.1" step="0.1" placeholder="例如：12.5" required>
            <span class="scv2-unit">m³</span>
          </div>
        </div>
      </div>

      <button type="submit" class="scv2-submit">
        <i class="fas fa-calculator"></i> 立即计算
      </button>
    </form>

    <!-- 结果展示 -->
    <div id="scv2Result" class="scv2-result">
      <div class="scv2-result-card">
        <div class="scv2-route">
          <span id="scv2ResultFrom" class="scv2-port-badge">-</span>
          <i class="fas fa-arrow-right"></i>
          <span id="scv2ResultTo" class="scv2-port-badge">-</span>
        </div>
        
        <div class="scv2-details">
          <div class="scv2-detail-item">
            <span>货物体积：</span>
            <strong id="scv2ResultVol">0</strong> m³
          </div>
          <div class="scv2-detail-item">
            <span>单价：</span>
            <strong id="scv2UnitPrice">0</strong> 元/m³
          </div>
        </div>
        
        <div class="scv2-total">
          <span>预估总价：</span>
          <span class="scv2-price">¥<span id="scv2ResultPrice">0.00</span></span>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
/* 现代化绿色主题 */
.shipping-calculator-v2 {
  --scv2-primary: #2E8B57;
  --scv2-primary-light: #3CB371;
  --scv2-primary-dark: #228B22;
  --scv2-secondary: #F0FFF0;
  --scv2-card-bg: #FFFFFF;
  --scv2-text: #36454F;
  --scv2-border: #C1E1C1;
  --scv2-shadow: 0 4px 20px rgba(46, 139, 87, 0.15);
  --scv2-radius: 12px;
  
  font-family: 'Segoe UI', 'PingFang SC', sans-serif;
  max-width: 680px;
  margin: 0 auto;
  color: var(--scv2-text);
}

/* 卡片设计 */
.scv2-card {
  background: var(--scv2-card-bg);
  border-radius: var(--scv2-radius);
  box-shadow: var(--scv2-shadow);
  overflow: hidden;
}

/* 头部样式 */
.scv2-header {
  background: linear-gradient(135deg, var(--scv2-primary), var(--scv2-primary-dark));
  color: white;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.scv2-icon {
  font-size: 24px;
}

.scv2-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

/* 表单样式 */
.scv2-form {
  padding: 24px;
}

.scv2-port-row {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 20px;
}

.scv2-input-group {
  flex: 1;
  min-width: 0;
}

.scv2-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--scv2-text);
}

.scv2-label i {
  margin-right: 6px;
  color: var(--scv2-primary);
}

.scv2-select-wrapper {
  position: relative;
}

.scv2-select {
  width: 100%;
  padding: 12px 16px;
  padding-right: 36px;
  border: 1px solid var(--scv2-border);
  border-radius: 8px;
  font-size: 15px;
  background-color: white;
  appearance: none;
  transition: all 0.2s;
}

.scv2-select:focus {
  border-color: var(--scv2-primary-light);
  box-shadow: 0 0 0 3px rgba(46, 139, 87, 0.1);
  outline: none;
}

.scv2-chevron {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--scv2-primary);
  font-size: 14px;
}

.scv2-arrow {
  padding-bottom: 22px;
  color: var(--scv2-primary);
  font-size: 18px;
}

/* 体积输入 */
.scv2-volume-row {
  margin-bottom: 24px;
}

.scv2-input-wrapper {
  position: relative;
}

.scv2-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--scv2-border);
  border-radius: 8px;
  font-size: 15px;
  transition: all 0.2s;
}

.scv2-input:focus {
  border-color: var(--scv2-primary-light);
  box-shadow: 0 0 0 3px rgba(46, 139, 87, 0.1);
  outline: none;
}

.scv2-unit {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--scv2-primary);
  font-size: 14px;
}

/* 计算按钮 */
.scv2-submit {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--scv2-primary), var(--scv2-primary-dark));
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.scv2-submit:hover {
  background: linear-gradient(135deg, var(--scv2-primary-dark), var(--scv2-primary));
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(46, 139, 87, 0.25);
}

/* 结果展示 */
.scv2-result {
  padding: 0 24px 24px;
  display: none;
}

.scv2-result-card {
  background: var(--scv2-secondary);
  border-radius: 8px;
  padding: 20px;
  border: 1px dashed var(--scv2-primary-light);
}

.scv2-route {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 20px;
}

.scv2-port-badge {
  background: white;
  border: 1px solid var(--scv2-primary);
  color: var(--scv2-primary);
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: 500;
  min-width: 80px;
  text-align: center;
}

.scv2-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.scv2-detail-item {
  background: rgba(255,255,255,0.7);
  padding: 12px;
  border-radius: 6px;
  font-size: 14px;
}

.scv2-total {
  text-align: center;
  padding-top: 12px;
  border-top: 1px solid var(--scv2-border);
  font-size: 16px;
}

.scv2-price {
  font-size: 24px;
  font-weight: 700;
  color: var(--scv2-primary-dark);
  margin-left: 8px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .scv2-port-row {
    flex-direction: column;
    gap: 16px;
  }
  
  .scv2-arrow {
    display: none;
  }
  
  .scv2-details {
    grid-template-columns: 1fr;
  }
}

/* Font Awesome 图标 (如果尚未引入) */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  // 动态过滤目的港
  const fromPortSelect = document.getElementById('scv2FromPort');
  const toPortSelect = document.getElementById('scv2ToPort');
  
  if (fromPortSelect && toPortSelect) {
    fromPortSelect.addEventListener('change', function() {
      const fromPort = this.value;
      
      Array.from(toPortSelect.options).forEach(option => {
        option.style.display = 
          (option.value === "" || option.dataset.from === fromPort) ? '' : 'none';
      });
      
      toPortSelect.value = '';
      document.getElementById('scv2Result').style.display = 'none';
    });
  }

  // 表单提交
  const form = document.getElementById('scv2Form');
  if (form) {
    form.addEventListener('submit', function(e) {
      e.preventDefault();
      
      const fromPort = fromPortSelect?.value;
      const toPort = toPortSelect?.value;
      const volume = parseFloat(document.getElementById('scv2Volume')?.value || 0);
      
      if (!fromPort || !toPort || isNaN(volume) || volume <= 0) {
        alert('请填写有效的港口信息和货物体积');
        return;
      }

      // 查找匹配的航线
      const selectedOption = Array.from(toPortSelect.options).find(opt => 
        opt.value === toPort && opt.dataset.from === fromPort
      );
      
      if (!selectedOption?.dataset.price) {
        alert('未找到该航线的运费信息，请确认港口组合');
        return;
      }

      // 计算并显示结果
      const unitPrice = parseFloat(selectedOption.dataset.price);
      const totalPrice = (unitPrice * volume).toFixed(2);
      
      document.getElementById('scv2ResultFrom').textContent = fromPort;
      document.getElementById('scv2ResultTo').textContent = toPort;
      document.getElementById('scv2ResultVol').textContent = volume.toFixed(1);
      document.getElementById('scv2UnitPrice').textContent = unitPrice.toFixed(2);
      document.getElementById('scv2ResultPrice').textContent = totalPrice;
      document.getElementById('scv2Result').style.display = 'block';
    });
  }
});
</script>

如想要开发其他功能，可联系站长QQ或者微信