vue模仿顺丰实现移动端快递邮寄app的ui原型图代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：vue模仿顺丰实现移动端快递邮寄app的ui原型图代码，包含我的、寄件、订单跟踪等模块。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>顺丰速运 - 快递服务</title>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue3.2.22.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue-router.global.prod.4.1.6.js"></script>
  
  <!-- Tailwind配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#316CCB', // 顺丰蓝
            secondary: '#FF9800', // 顺丰橙
            neutral: {
              100: '#F5F7FA',
              200: '#E4E7ED',
              300: '#C0C4CC',
              400: '#909399',
              500: '#606266',
              600: '#303133',
              700: '#1E1E1E',
            }
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }
      .transition-custom {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .card-hover {
        @apply hover:shadow-lg hover:-translate-y-1 transition-all duration-300;
      }
      .bottom-nav-active {
        @apply text-primary !important;
      }n
      .scrollbar-hide::-webkit-scrollbar {
        display: none;
      }
      .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }
    }
  </style>
</head>
<body class="bg-neutral-100 font-sans text-neutral-600 min-h-screen">
  <div id="app">
    <!-- 路由视图 -->
    <router-view></router-view>
    
    <!-- 底部导航栏 -->
    <nav class="fixed bottom-0 left-0 right-0 bg-white border-t border-neutral-200 px-4 py-2 flex justify-around items-center z-50">
      <router-link to="/" class="flex flex-col items-center justify-center py-1 text-neutral-400" active-class="bottom-nav-active">
        <i class="fa fa-home text-lg"></i>
        <span class="text-xs mt-1">首页</span>
      </router-link>
      <router-link to="/send" class="flex flex-col items-center justify-center py-1 text-neutral-400" active-class="bottom-nav-active">
        <i class="fa fa-paper-plane text-lg"></i>
        <span class="text-xs mt-1">寄件</span>
      </router-link>
      <router-link to="/orders" class="flex flex-col items-center justify-center py-1 text-neutral-400" active-class="bottom-nav-active">
        <i class="fa fa-list-alt text-lg"></i>
        <span class="text-xs mt-1">订单</span>
      </router-link>
      <router-link to="/profile" class="flex flex-col items-center justify-center py-1 text-neutral-400" active-class="bottom-nav-active">
        <i class="fa fa-user text-lg"></i>
        <span class="text-xs mt-1">我的</span>
      </router-link>
    </nav>
  </div>

  <script>
    // 模拟数据 - 订单列表
    const mockOrders = [
      {
        id: 'SF2023050100001',
        status: 'delivered',
        sender: { name: '张三', phone: '138****5678', address: '北京市朝阳区建国路88号' },
        receiver: { name: '李四', phone: '139****8765', address: '上海市浦东新区张江高科技园区' },
        createTime: '2023-05-01 10:23',
        deliveryTime: '2023-05-02 15:45',
        items: ['文件', '衣物'],
        weight: '1.2kg',
        fee: 18,
        serviceType: 'express',
        paymentMethod: 'online',
        tracking: [
          { time: '2023-05-02 15:45', location: '上海市浦东新区张江分部', status: '已签收', description: '已签收，签收人：李四' },
          { time: '2023-05-02 10:30', location: '上海市浦东新区张江分部', status: '派送中', description: '快递员：王五 (137****1234) 正在为您派送' },
          { time: '2023-05-02 08:15', location: '上海市浦东新区张江分部', status: '到达', description: '快件已到达上海市浦东新区张江分部' },
          { time: '2023-05-01 16:30', location: '北京市朝阳区建国路分部', status: '发出', description: '快件已发出，下一站：上海市浦东新区张江分部' },
          { time: '2023-05-01 10:45', location: '北京市朝阳区建国路分部', status: '揽收', description: '快递员：赵六 (136****5678) 已揽收' }
        ]
      },
      {
        id: 'SF2023050200002',
        status: 'shipping',
        sender: { name: '李四', phone: '139****8765', address: '上海市浦东新区张江高科技园区' },
        receiver: { name: '王五', phone: '135****4321', address: '广州市天河区珠江新城' },
        createTime: '2023-05-02 09:15',
        items: ['电子产品'],
        weight: '2.5kg',
        fee: 25,
        serviceType: 'standard',
        paymentMethod: 'cash',
        tracking: [
          { time: '2023-05-02 16:45', location: '上海市浦东新区张江分部', status: '发出', description: '快件已发出，下一站：广州市天河区珠江新城分部' },
          { time: '2023-05-02 09:45', location: '上海市浦东新区张江分部', status: '揽收', description: '快递员：钱七 (134****8765) 已揽收' }
        ]
      },
      {
        id: 'SF2023050300003',
        status: 'pending',
        sender: { name: '王五', phone: '135****4321', address: '广州市天河区珠江新城' },
        receiver: { name: '赵六', phone: '132****1234', address: '深圳市南山区科技园' },
        createTime: '2023-05-03 11:30',
        items: ['食品'],
        weight: '0.8kg',
        fee: 15,
        serviceType: 'same-day',
        paymentMethod: 'cod',
        tracking: [
          { time: '2023-05-03 11:30', location: '广州市天河区珠江新城分部', status: '创建', description: '订单已创建，等待快递员揽收' }
        ]
      }
    ];
    
    const mockAddresses = [
      { id: 1, name: '张三', phone: '13812345678', address: '北京市朝阳区建国路88号 SOHO现代城 A座 1101', isDefault: true },
      { id: 2, name: '李四', phone: '13987654321', address: '上海市浦东新区张江高科技园区 祖冲之路2288弄', isDefault: false },
      { id: 3, name: '王五', phone: '13511223344', address: '广州市天河区珠江新城华夏路10号 富力中心 2305', isDefault: false }
    ];
    
    const mockCoupons = [
      { id: 1, amount: 5, condition: 10, validFrom: '2023-05-01', validTo: '2023-12-31', status: 'valid' },
      { id: 2, amount: 10, condition: 20, validFrom: '2023-05-01', validTo: '2023-12-31', status: 'valid' },
      { id: 3, amount: 20, condition: 50, validFrom: '2023-04-01', validTo: '2023-04-30', status: 'expired' }
    ];
    
    const mockPoints = [
      { id: 1, points: 100, description: '寄件获得积分', date: '2023-05-01' },
      { id: 2, points: 50, description: '评价获得积分', date: '2023-04-28' },
      { id: 3, points: 200, description: '新用户注册奖励', date: '2023-04-15' }
    ];
    
    const apiService = {
      getData(key, defaultValue = []) {
        const data = localStorage.getItem(key);
        return data ? JSON.parse(data) : defaultValue;
      },
      saveData(key, data) {
        localStorage.setItem(key, JSON.stringify(data));
      },
      getOrders() { return this.getData('orders', mockO.........完整代码请登录后点击上方下载按钮下载查看