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

<template>
  <view class="pay-page" :class="{ 'wechat-browser': isWeixinBrowser }">
    <view class="fixed-nav" v-if="!isWeixinBrowser">
      <NavBar title="在线付款" />
    </view>
    <view class="pay-scroll">
      <!-- 预约信息 -->
      <view class="pay-section">
        <view class="pay-title">预约信息</view>
        <view class="pay-row"><text>预约日期</text><text>{{ item.batch && item.batch.created_at ? formatChinaDate(item.batch.created_at) : '' }}</text></view>
        <view class="pay-row"><text>预约批次</text><text>{{ item.batch.name }}</text></view>
        <view class="pay-row"><text>航行方向</text><text>{{ item.direction_name }}</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>{{ item.ship.ship_number }}</text></view>
        <view class="pay-row"><text>总长度</text><text>{{ item.ship.total_length }}米</text></view>
        <view class="pay-row"><text>型宽</text><text>{{ item.ship.total_width }}米</text></view>
        <view class="pay-row"><text>型深</text><text>{{ item.ship.molded_depth }}米</text></view>
        <view class="pay-row"><text>载重</text><text>{{ item.ship.total_tonnage }}吨</text></view>
        <view class="pay-row"><text>类型</text><text>{{ item.ship && item.ship.ship_type ? getShipTypeName(item.ship.ship_type) : '' }}</text></view>
      </view>
      <!-- 票价信息 -->
      <view class="pay-section">
        <view class="pay-title">票价信息</view>
        <view class="pay-row"><text>过闸费用</text><text>￥{{ item.price }}</text></view>
        <view class="pay-row"><text>按吨位计费</text><text>{{ item.ship.total_tonnage }}吨</text></view>
        <view class="pay-row pay-total">
          <text>总计</text>
          <text class="pay-total-num">￥{{ item.price }}</text>
        </view>
      </view>
      <!-- 支付方式 -->
      <view class="pay-section">
        <view class="pay-title">扫码支付</view>
        <view class="pay-qrcode-box">
          <image :src="qrcodeUrl" class="pay-qrcode-img" mode="aspectFit" @longpress="handleLongPress" />
        </view>
        <view class="pay-qrcode-tip">请使用微信或支付宝扫码支付</view>
      </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" @click="handlePay">立即支付 ￥300.00</button>
      </view>
    </view>
  </view>
</template>

<script>
import NavBar from '@/components/NavBar.vue'
import { base } from '@/common/util.js'
import { API } from '@/config/index.js'

export default {
  name: 'PayOrderPage',
  components: {
    NavBar
  },
  data() {
    return {
      item: null,
      qrcodeUrl: '',
      shipTypeEnum: [],
      isWeixinBrowser: false
    }
  },
  onLoad(options) {
    if (options.item) {
      try {
        this.item = JSON.parse(decodeURIComponent(options.item));
      } catch (e) {
        console.error('Failed to parse item:', e);
        this.item = {};
      }
    }
    console.log(this.item);
    // #ifdef H5
    this.isWeixinBrowser = /MicroMessenger/i.test(navigator.userAgent)
    // #endif
  },
  onShow() {
    if (this.item && this.item.id) {
      this.fetchQrcode(this.item.id);
    }
    this.fetchShipTypeEnum();
  },
  methods: {
    formatChinaDate: base.formatChinaDate,
    async fetchQrcode(id) {
      const token = uni.getStorageSync('token');
      if (!token || !id) return;
      try {
        const res = await new Promise((resolve, reject) => {
          uni.request({
            url: `${API.GET_PAYMENT_QRCODE}?id=${id}&token=${token}`,
            method: 'GET',
            success: resolve,
            fail: reject
          });
        });
        if (res.data && res.data.errcode === 0) {
          this.qrcodeUrl = res.data.data.qrcode;
        }
      } catch (e) {}
    },
    async fetchShipTypeEnum() {
      const token = uni.getStorageSync('token');
      if (!token) return;
      try {
        const res = await new Promise((resolve, reject) => {
          uni.request({
            url: `${API.SHIP_PROPERTY_ENUM}?token=${token}`,
            method: 'GET',
            success: resolve,
            fail: reject
          });
        });
        if (res.data && res.data.errcode === 0) {
          const shipTypeRaw = res.data.data.ship_type || {};
          if (Array.isArray(shipTypeRaw)) {
            this.shipTypeEnum = shipTypeRaw;
          } else {
            this.shipTypeEnum = Object.keys(shipTypeRaw).map(label => ({
              label,
              value: shipTypeRaw[label]
            }));
          }
        }
      } catch (e) {
        console.error('Failed to fetch ship type enum:', e);
      }
    },
    getShipTypeName(type) {
      const found = this.shipTypeEnum.find(item => item.value === type || item.value == type);
      return found ? found.label : type;
    },
    handlePay() {
      //POST调用模拟支付接口
      uni.request({
        url: `${API.FAKE_PAY}`,
        method: 'POST',
        data: {
          id: this.item.id,
          token: uni.getStorageSync('token')
        },
        success: (res) => {
          console.log('模拟支付结果：', res);
        },
        fail: (err) => {
          console.error('模拟支付失败：', err);
        }
      });
    },
    handleLongPress() {
      // 获取当前图片信息
      uni.getImageInfo({
        src: this.qrcodeUrl,
        success: (imageInfo) => {
          // 使用图片路径进行扫码
          uni.scanCode({
            scanType: ['qrCode'],
            onlyFromCamera: false,
            path: imageInfo.path,
            success: (res) => {
              console.log('扫码结果：', res);
              if (res.result) {
                uni.showToast({
                  title: '扫码成功',
                  icon: 'success'
                });
                // 这里可以处理扫码结果，比如跳转到支付页面
                // uni.navigateTo({
                //   url: `/pages/payment/index?url=${encodeURIComponent(res.result)}`
                // });
              }
            },
            fail: (err) => {
              console.error('扫码失败：', err);
              uni.showToast({
                title: '扫码失败',
                icon: 'none'
              });
            }
          });
        },
        fail: (err) => {
          console.error('获取图片信息失败：', err);
          uni.showToast({
            title: '获取图片失败',
            icon: 'none'
          });
        }
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.pay-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #cbe6ff 0%, #f6faff 100%);
  padding-bottom: 32rpx;
}

.wechat-browser {
  padding-top: 20rpx;
}

.wechat-browser .pay-scroll {
  margin-top: 0;
}

.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;
  &::after {
    border: 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;
  &::after {
    border: none;
  }
}
.pay-qrcode-box {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 32rpx 0;
}
.pay-qrcode-img {
  width: 260rpx;
  height: 260rpx;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
}
.pay-qrcode-tip {
  text-align: center;
  color: #888;
  font-size: 26rpx;
  margin-top: 12rpx;
}
</style>