xukou-ticket-wx/pages/order/pay_order.vue

<template>
  <view class="pay-bg">
    <view class="fixed-nav">
      <NavBar title="在线购票" />
    </view>
    <view class="pay-scroll">
      <!-- 预约信息 -->
      <view class="pay-section">
        <view class="pay-title">预约信息</view>
        <view class="pay-row"><text>预约日期</text><text>2024-01-14</text></view>
        <view class="pay-row"><text>预约批次</text><text>下午批次</text></view>
        <view class="pay-row"><text>航行方向</text><text>南向北</text></view>
        <view class="pay-row">
          <text>预约状态</text>
          <text class="pay-status">已确认</text>
        </view>
      </view>
      <!-- 船舶信息 -->
      <view class="pay-section">
        <view class="pay-title">船舶信息</view>
        <view class="pay-row"><text>船舶</text><text>苏航666</text></view>
        <view class="pay-row"><text>编号</text><text>ZJ12345</text></view>
        <view class="pay-row"><text>载重</text><text>500吨</text></view>
        <view class="pay-row"><text>类型</text><text>货船</text></view>
        <view class="pay-row"><text>总长度</text><text>45米</text></view>
        <view class="pay-row"><text>型宽</text><text>8米</text></view>
        <view class="pay-row"><text>型深</text><text>3.5米</text></view>
      </view>
      <!-- 票价信息 -->
      <view class="pay-section">
        <view class="pay-title">票价信息</view>
        <view class="pay-row"><text>过闸费用</text><text>￥300.00</text></view>
        <view class="pay-row"><text>按吨位计费</text><text>500吨</text></view>
        <view class="pay-row pay-total">
          <text>总计</text>
          <text class="pay-total-num">￥300.00</text>
        </view>
      </view>
      <!-- 支付方式 -->
      <view class="pay-section">
        <view class="pay-title">支付方式</view>
        <radio-group v-model="payType" class="pay-radio-group">
          <view class="pay-row pay-paytype" @click="payType = 'wechat'">
            <view class="pay-label">
              <image src="/static/wechat.png" class="pay-icon" />
              <text>微信支付</text>
            </view>
            <radio value="wechat" :checked="payType === 'wechat'" />
          </view>
          <view class="pay-row pay-paytype" @click="payType = 'alipay'">
            <view class="pay-label">
              <image src="/static/alipay.png" class="pay-icon" />
              <text>支付宝支付</text>
            </view>
            <radio value="alipay" :checked="payType === 'alipay'" />
          </view>
        </radio-group>
      </view>
    </view>
    <view class="pay-bottom-bar">
      <view class="pay-bottom-tip">
        <text class="pay-bottom-clock">🕒</text>
        <text class="pay-bottom-tip-text">
          请在 <text class="pay-bottom-time">14:06</text> 内完成支付
        </text>
      </view>
      <view class="pay-bottom-btns">
        <button class="pay-cancel-btn">取消订单</button>
        <button class="pay-pay-btn">立即支付 ￥300.00</button>
      </view>
    </view>
  </view>
</template>

<script>
import NavBar from '@/components/NavBar.vue'
export default {
  components: {
    NavBar
  },
  data() {
    return {
      payType: 'wechat'
    }
  }
}
</script>

<style scoped>
.pay-bg {
  min-height: 100vh;
  background: linear-gradient(180deg, #cbe6ff 0%, #f6faff 100%);
  padding-bottom: 32rpx;
}
.fixed-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: linear-gradient(180deg, #cbe6ff 0%, #f6faff 100%);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  height: 90px;
}
.pay-scroll {
  padding-top: 110px;
  padding-bottom: 160rpx; 
}
.pay-section {
  background: #fff;
  border-radius: 24rpx;
  margin: 0 24rpx 32rpx 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(59,124,255,0.08);
  padding: 32rpx 24rpx 8rpx 24rpx;
}
.pay-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #222;
  margin-bottom: 24rpx;
}
.pay-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 28rpx;
  color: #222;
  padding: 18rpx 0;
  border-bottom: 1rpx solid #f2f4f8;
}
.pay-row:last-child {
  border-bottom: none;
}
.pay-status {
  background: #217aff;
  color: #fff;
  border-radius: 24rpx;
  padding: 4rpx 24rpx;
  font-size: 24rpx;
}
.pay-total {
  font-weight: bold;
}
.pay-total-num {
  color: #217aff;
  font-size: 32rpx;
}
.pay-paytype {
  gap: 16rpx;
}
.pay-label {
  display: flex;
  align-items: center;
}
.pay-icon {
  width: 36rpx;
  height: 36rpx;
  margin-right: 20rpx;
}
.pay-paytype text {
  margin-left: 0;          /* 确保文字紧跟图标 */
}
.pay-radio-group {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}
.pay-bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  box-shadow: 0 -2rpx 16rpx rgba(59,124,255,0.08);
  padding: 24rpx 24rpx 32rpx 24rpx;
  z-index: 999;
}
.pay-bottom-tip {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26rpx;
  margin-bottom: 18rpx;
}
.pay-bottom-clock-box {
  width: 40rpx;
  height: 40rpx;
  border: 2rpx solid #217aff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12rpx;
}
.pay-bottom-clock {
  color: #217aff;
  font-size: 28rpx;
}
.pay-bottom-tip-text {
  color: #222;
}
.pay-bottom-time {
  color: #217aff;
  font-weight: bold;
}
.pay-bottom-btns {
  display: flex;
  gap: 24rpx;
  justify-content: center;
}
.pay-cancel-btn {
  min-width: 240rpx;
  height: 72rpx;
  border-radius: 36rpx;
  background: #f5f7fa;
  color: #222;
  font-size: 28rpx;
  border: none;
  outline: none;
}
.pay-pay-btn {
  min-width: 320rpx;
  height: 72rpx;
  border-radius: 36rpx;
  background: #217aff;
  color: #fff;
  font-size: 28rpx;
  font-weight: 500;
  border: none;
  outline: none;
}
</style>