路泰科技体检小程序UI设计新版本
1
wwl
5 天以前 a6cdbcfe28fcc40ebb4919f57d60fb20122e8e57
pages/history/history.vue
@@ -1,205 +1,236 @@
<template>
   <view class="page">
      <!-- <view class="nav-bar">
         <view class="nav-left">
            <uni-icons type="left" size="20" color="#333"></uni-icons>
            <text class="nav-title">问诊记录</text>
         </view>
         <view class="nav-right">
            <uni-icons type="more-filled" size="20" color="#333"></uni-icons>
            <uni-icons type="camera-filled" size="20" color="#333"></uni-icons>
         </view>
      </view> -->
  <view class="page">
    <!-- <view class="nav-bar">
      <view class="nav-left">
        <uni-icons type="left" size="20" color="#333"></uni-icons>
        <text class="nav-title">问诊记录</text>
      </view>
      <view class="nav-right">
        <uni-icons type="more-filled" size="20" color="#333"></uni-icons>
        <uni-icons type="camera-filled" size="20" color="#333"></uni-icons>
      </view>
    </view> -->
      <scroll-view class="content" scroll-y>
         <view class="record-list">
            <view class="record-item" v-for="(item, index) in records" :key="index">
               <view class="record-left">
                  <image class="record-image" :src="item.image" mode="aspectFill"></image>
               </view>
               <view class="record-right">
                  <view class="record-header">
                     <text class="record-title">{{ item.title }}</text>
                     <text
                        :class="['record-status', item.status === '待体检' ? 'pending' : 'completed']">{{ item.status }}</text>
                  </view>
                  <view class="record-detail">
                     <text class="detail-text">共{{ item.items.length }}项: {{ item.items.join(' | ') }}</text>
                  </view>
                  <view class="record-time">
                     <text class="time-text">体检时间: {{ item.time }}</text>
                  </view>
                  <view class="record-price">
                     <text class="price-symbol">¥</text>
                     <text class="price-value">{{ item.price }}</text>
                  </view>
               </view>
            </view>
         </view>
      </scroll-view>
   </view>
    <scroll-view class="content" scroll-y>
      <view class="record-list">
        <view class="record-item" v-for="(item, index) in records" :key="index">
          <view class="record-left">
            <image class="record-image" :src="item.image || img"></image>
          </view>
          <view class="record-right">
            <view class="record-header">
              <text class="record-title">{{ item.title }}</text>
              <text class="record-status" :class="{ pending: item.status === '待体检', completed: item.status !== '待体检' }">{{ item.status }}</text>
            </view>
            <view class="record-detail">
              <text class="detail-text">共{{ item.items.length || 0}}项: {{ item.items.join(' | ') }}</text>
            </view>
            <view class="record-time">
              <text class="time-text">体检时间: {{ formatTime(item.time) }}</text>
            </view>
            <view class="record-price">
              <text class="price-symbol">¥</text>
              <text class="price-value">{{ item.price || 0 }}</text>
            </view>
          </view>
        </view>
        <view v-if="records.length === 0" class="empty-view">
          <text class="empty-text">暂无问诊记录</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>
<script>
   export default {
      data() {
         return {
            records: [
               {
                  title: '入职体检',
                  status: '待体检',
                  items: ['血常规', '心电图', '尿常规', '胸部CT', '血脂', '血糖', '肝脏检查'],
                  time: '2025-02-13 09:30',
                  price: '450.00',
                  image: 'https://ai-public.mastergo.com/ai/img_res/27bcf0acb95aa0120114fecacce5bf5c.jpg'
               },
               {
                  title: '父母体检套餐',
                  status: '待体检',
                  items: ['血常规', '心电图', '尿常规', '胸部CT', '血脂', '血糖', '血压', '肝脏检查'],
                  time: '2025-02-13 09:30',
                  price: '1250.00',
                  image: 'https://ai-public.mastergo.com/ai/img_res/abc0b357072bacea915b011713877481.jpg'
               },
               {
                  title: '入职体检',
                  status: '已完成',
                  items: ['血常规', '心电图', '尿常规', '胸部CT', '血脂'],
                  time: '2024-02-15 09:30',
                  price: '380.00',
                  image: 'https://ai-public.mastergo.com/ai/img_res/7410d9b377dca1af453b5cd576e38144.jpg'
               }
            ]
         }
         }
         }
import { getwenzhenxinxi } from "@/api/system/report";
export default {
  data() {
    return {
      img: 'https://ai-public.mastergo.com/ai/img_res/27bcf0acb95aa0120114fecacce5bf5c.jpg', // 默认图片
      records: [],
      idCard: ''
    };
  },
  onLoad(option) {
    console.log('history.vue onLoad 参数:', option);
    if (option.cusIdCard) {
      this.idCard = decodeURIComponent(option.cusIdCard);
      console.log('解析后的身份证号:', this.idCard);
      this.getRecords();
    } else {
      uni.showToast({
        title: '身份证号未传递',
        icon: 'none'
      });
    }
  },
  methods: {
    formatTime(isoTime) {
      if (!isoTime) return '';
      const date = new Date(isoTime);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    getRecords() {
      getwenzhenxinxi({ idCard: this.idCard }).then(res => {
        console.log('getwenzhenxinxi 响应:', res);
        if (res.code === 200) {
          this.records = res.data || [];
        } else {
          uni.showToast({
            title: res.msg || '获取问诊记录失败',
            icon: 'none'
          });
        }
      }).catch(err => {
        console.error('getwenzhenxinxi 错误:', err);
        uni.showToast({
          title: err.message || '网络错误,请稍后重试',
          icon: 'none'
        });
      });
    }
  }
};
</script>
<style scoped>
.page {
  height: 100%;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}
<style>
   page {
      height: 100%;
      background-color: #f5f5f5;
   }
.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 32rpx;
  height: 88rpx;
  background-color: #fff;
  flex-shrink: 0;
}
   .page {
      height: 100%;
      display: flex;
      flex-direction: column;
   }
.nav-left {
  display: flex;
  align-items: center;
}
   .nav-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 32rpx;
      height: 88rpx;
      background-color: #fff;
      flex-shrink: 0;
   }
.nav-title {
  font-size: 16px;
  color: #333;
  margin-left: 16rpx;
  font-weight: 500;
}
   .nav-left {
      display: flex;
      align-items: center;
   }
.nav-right {
  display: flex;
  align-items: center;
  gap: 32rpx;
}
   .nav-title {
      font-size: 16px;
      color: #333;
      margin-left: 16rpx;
      font-weight: 500;
   }
.content {
  flex: 1;
  overflow: auto;
}
   .nav-right {
      display: flex;
      align-items: center;
      gap: 32rpx;
   }
.record-list {
  padding: 24rpx;
}
   .content {
      flex: 1;
      overflow: auto;
   }
.record-item {
  display: flex;
  background-color: #fff;
  border-radius: 12rpx;
  padding: 24rpx;
  margin-bottom: 24rpx;
}
   .record-list {
      padding: 24rpx;
   }
.record-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 8rpx;
}
   .record-item {
      display: flex;
      background-color: #fff;
      border-radius: 12rpx;
      padding: 24rpx;
      margin-bottom: 24rpx;
   }
.record-right {
  flex: 1;
  margin-left: 24rpx;
}
   .record-image {
      width: 120rpx;
      height: 120rpx;
      border-radius: 8rpx;
   }
.record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}
   .record-right {
      flex: 1;
      margin-left: 24rpx;
   }
.record-title {
  font-size: 16px;
  color: #333;
  font-weight: 500;
}
   .record-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16rpx;
   }
.record-status {
  font-size: 14px;
}
   .record-title {
      font-size: 16px;
      color: #333;
      font-weight: 500;
   }
.pending {
  color: #1890ff;
}
   .record-status {
      font-size: 14px;
   }
.completed {
  color: #999;
}
   .pending {
      color: #1890ff;
   }
.record-detail {
  margin-bottom: 16rpx;
}
   .completed {
      color: #999;
   }
.detail-text {
  font-size: 14px;
  color: #666;
  line-height: 1.4;
}
   .record-detail {
      margin-bottom: 16rpx;
   }
.record-time {
  margin-bottom: 16rpx;
}
   .detail-text {
      font-size: 14px;
      color: #666;
      line-height: 1.4;
   }
.time-text {
  font-size: 14px;
  color: #666;
}
   .record-time {
      margin-bottom: 16rpx;
   }
.record-price {
  display: flex;
  align-items: baseline;
}
   .time-text {
      font-size: 14px;
      color: #666;
   }
.price-symbol {
  font-size: 14px;
  color: #ff6b00;
}
   .record-price {
      display: flex;
      align-items: baseline;
   }
.price-value {
  font-size: 20px;
  color: #ff6b00;
  font-weight: 500;
}
   .price-symbol {
      font-size: 14px;
      color: #ff6b00;
   }
.empty-view {
  text-align: center;
  padding: 50rpx;
}
   .price-value {
      font-size: 20px;
      color: #ff6b00;
      font-weight: 500;
   }
.empty-text {
  font-size: 28rpx;
  color: #999;
}
</style>