xukou-ticket-wx/pages/index/ship_detail.vue

<template>
  <view class="ship-detail-bg" :class="{ 'wechat-browser': isWeixinBrowser }">
    <view class="fixed-nav" v-if="!isWeixinBrowser">
      <NavBar title="船舶详情" />
    </view>
    <view class="content-area">
      <view v-if="ship" class="ship-section">
        <view class="section-title">基本信息</view>
        <view class="section-row"><text>船舶所有人</text><text>{{ ship.owner_name }}</text></view>
        <view class="section-row"><text>身份证号</text><text>{{ ship.id_card }}</text></view>
        <view class="section-row"><text>联系电话</text><text>{{ ship.phone }}</text></view>
        <view class="section-row"><text>船舶编号</text><text>{{ ship.ship_number }}</text></view>
      </view>
      <view v-if="ship" class="ship-section">
        <view class="section-title">船舶参数</view>
        <view class="section-row"><text>总吨位</text><text>{{ ship.total_tonnage }}</text></view>
        <view class="section-row"><text>总长度</text><text>{{ ship.total_length }}</text></view>
        <view class="section-row"><text>总宽</text><text>{{ ship.total_width }}</text></view>
        <view class="section-row"><text>型深</text><text>{{ ship.molded_depth }}</text></view>
        <view class="section-row"><text>吨位等级</text><text>{{ ship.tonnage_class }}</text></view>
        <view class="section-row"><text>船型</text><text>{{ getShipTypeName(ship.ship_type) }}</text></view>
      </view>
      <view v-if="ship" class="ship-section">
        <view class="section-title">船检簿</view>
        <view class="section-row">
          <text>第一页</text>
          <image :src="ship.picture1_file ? ship.picture1_file.url : ''" style="width:80px;height:80px;" mode="aspectFill" />
        </view>
        <view class="section-row">
          <text>第二页</text>
          <image :src="ship.picture2_file ? ship.picture2_file.url : ''" style="width:80px;height:80px;" mode="aspectFill" />
        </view>
        <view class="section-row">
          <text>第三页</text>
          <image :src="ship.picture3_file ? ship.picture3_file.url : ''" style="width:80px;height:80px;" mode="aspectFill" />
        </view>
      </view>
      <view v-if="ship" class="ship-section">
        <view class="section-title">签名确认</view>
        <view class="section-row">
          <text>签名声明</text>
          <text>本人承诺所提供材料皆真实有效；如有虚假，本人承担因此造成的全部责任。</text>
        </view>
        <view class="section-row">
          <text>签名图片</text>
          <image :src="ship.signature" style="width:120px;height:60px;" mode="aspectFit" />
        </view>
      </view>
    </view>
    <!-- <view class="fixed-bottom-btn-bar">
      <button class="delete-btn" @click="onDelete">删除</button>
      <button class="edit-btn" @click="onEdit">编辑</button>
    </view> -->
  </view>
</template>

<script>
import NavBar from '@/components/NavBar.vue'
import { API } from '@/config/index.js'
export default {
  name: 'ShipDetailPage',
  components: { NavBar },
  data() {
    return {
      ship: null,
      id: null,
      shipTypeEnum: [],
      isWeixinBrowser: false,
      picture1_file: {},
      picture2_file: {},
      picture3_file: {},
    }
  },
  onLoad(options) {
    this.id = options.id;
    if (options.item) {
      try {
        this.ship = JSON.parse(decodeURIComponent(options.item));
      } catch (e) {
        this.ship = null;
      }
    }
    // #ifdef H5
    this.isWeixinBrowser = /MicroMessenger/i.test(navigator.userAgent)
    // #endif
  },
  onShow(){
    this.fetchShipPropertyEnum().then(() => {
      this.fetchShipDetail();
    });
  },
  methods: {
    getShipTypeName(type) {
      if (!Array.isArray(this.shipTypeEnum)) return type;
      const found = this.shipTypeEnum.find(item => item.value === type?.toString());
      return found ? found.label : type;
    },
    async fetchShipPropertyEnum() {
      const token = uni.getStorageSync('token');
      if (!token) {
        uni.showToast({ title: '请先登录', icon: 'none' });
        return false;
      }
      uni.showLoading({ title: '加载中...' });
      try {
        const res = await new Promise((resolve, reject) => {
          uni.request({
            url: API.SHIP_PROPERTY_ENUM,
            method: 'GET',
            data: { token },
            success: resolve,
            fail: reject
          });
        });
        uni.hideLoading();
        if (res.data && res.data.errcode === 0) {
          const shipTypeRaw = res.data.data.ship_type || {};
          this.shipTypeEnum = Object.entries(shipTypeRaw).map(([label, value]) => ({
            label,
            value: value.toString()
          }));
          return true;
        } else {
          uni.showToast({ title: res.data.errmsg || '获取枚举失败', icon: 'none' });
          return false;
        }
      } catch (error) {
        uni.hideLoading();
        uni.showToast({ title: error.message || '网络错误', icon: 'none' });
        return false;
      }
    },
    async fetchShipDetail() {
      const token = uni.getStorageSync('token');
      if (!token) {
        uni.showToast({ title: '请先登录', icon: 'none' });
        return;
      }
      uni.showLoading({ title: '加载中...' });
      try {
        const res = await new Promise((resolve, reject) => {
          uni.request({
            url: `${API.SHIP_DETAIL}/${this.id}`,
            method: 'GET',
            data: { token },
            success: resolve,
            fail: reject
          });
        });
        uni.hideLoading();
        if (res.data && res.data.errcode === 0) {
          this.ship = res.data.data;
        } else {
          uni.showToast({ title: res.data.errmsg || '获取失败', icon: 'none' });
        }
      } catch (error) {
        uni.hideLoading();
        uni.showToast({ title: error.message || '网络错误', icon: 'none' });
      }
    },
    getFileUrl(fileId) {
      if (!fileId) return '';
      // 这里假设有图片预览接口 /api/customer/upload-file/preview?id=xxx
      return `${API.BASE_URL}/api/customer/upload-file/preview?id=${fileId}`;
    },
    onEdit() {
      if (!this.ship || !this.ship.id) return;
      // 只传递船舶 id，编辑页面自行通过接口获取详情
      uni.navigateTo({
        url: `/pages/index/ship_add?edit=1&id=${this.ship.id}`
      });
    },
    onDelete() {
      const token = uni.getStorageSync('token');
      if (!token) {
        uni.showToast({ title: '请先登录', icon: 'none' });
        return;
      }
      if (!this.ship || !this.ship.id) {
        uni.showToast({ title: '无效的船舶信息', icon: 'none' });
        return;
      }
      uni.showModal({
        title: '提示',
        content: '确定要删除该船舶吗？',
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({ title: '删除中...' });
            uni.request({
              url: `${API.SHIP_DELETE}/${this.ship.id}?token=${token}`,
              method: 'POST',
              data: {},
              header: { 'content-type': 'application/json' },
              success: (res) => {
                uni.hideLoading();
                if (res.data && res.data.errcode === 0) {
                  uni.showToast({ title: '删除成功', icon: 'success' });
                  setTimeout(() => {
                    uni.navigateBack();
                  }, 1000);
                } else {
                  uni.showToast({ title: res.data.errmsg || '删除失败', icon: 'none' });
                }
              },
              fail: (err) => {
                uni.hideLoading();
                uni.showToast({ title: '网络错误', icon: 'none' });
              }
            });
          }
        }
      });
    }
  }
}
</script>

<style scoped>
.ship-detail-bg {
  min-height: 100vh;
  background: linear-gradient(180deg, #cbe6ff 0%, #f6faff 100%);
  padding-bottom: 32rpx;
}

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

.wechat-browser .content-area {
  padding-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);
}
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  padding: 0 32rpx;
  background: transparent;
  font-size: 36rpx;
  margin-bottom: 32rpx;
}
.iconfont.icon-back {
  font-size: 44rpx;
  color: #222;
}
.iconfont.icon-more {
  font-size: 36rpx;
  color: #222;
}
.nav-title {
  flex: 1;
  text-align: center;
  font-size: 36rpx;
  font-weight: bold;
  color: #222;
  letter-spacing: 2rpx;
}
.ship-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;
  margin-top: 20px;
}
.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #222;
  margin-bottom: 24rpx;
}
.section-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 28rpx;
  color: #222;
  padding: 18rpx 0;
  border-bottom: 1rpx solid #f2f4f8;
}
.section-row:last-child {
  border-bottom: none;
}
.bottom-add-btn {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  width: 80vw;
  max-width: 340px;
  height: 48px;
  background: linear-gradient(90deg, #3b7cff 0%, #5bb6ff 100%);
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(59,124,255,0.12);
  z-index: 99;
}
.content-area {
  padding-top: 90px;
  padding-bottom: 20px;
}
.fixed-bottom-btn-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  background: rgba(255,255,255,0.95);
  display: flex;
  justify-content: center;
  padding: 16px 0 24px 0;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.04);
}
.edit-btn {
  min-width: 320rpx;
  height: 80rpx;
  border-radius: 40rpx;
  background: #217aff;
  color: #fff;
  font-size: 32rpx;
  font-weight: 500;
  border: none;
  outline: none;
  box-shadow: 0 4rpx 16rpx rgba(33,122,255,0.08);
  transition: background 0.2s;
}
.delete-btn {
  min-width: 320rpx;
  height: 80rpx;
  border-radius: 40rpx;
  background: #ff3b3b;
  color: #fff;
  font-size: 32rpx;
  font-weight: 500;
  border: none;
  outline: none;
  box-shadow: 0 4rpx 16rpx rgba(255,59,59,0.12);
  transition: background 0.2s;
  margin-left: 16px;
}
</style>