Vueは物流タイムライン効果を実現します

Vueは物流タイムライン効果を実現します

この記事では、物流タイムライン効果を実現するためのVueの具体的なコードを例として紹介します。具体的な内容は次のとおりです。

息子コンポーネント（ロジスティクスタイムラインコンポーネント） 

<テンプレート>
  <div class="steps-wrap">
    <ul>
      <li v-for="(item,index) ステップ" :key="index">
        <span class="time">{{item.time}}</span>
        <div class="circle">
          <img class="icon" v-if="index===0" src="../../../assets/images/user_seleted.png" />
          <画像
            クラス="アイコン"
            v-else-if="インデックス === ステップ数.長さ-1"
            src="../../../assets/images/user_seleted.png"
          />
          <i v-else class="circle-icon"></i>
        </div>

        <span v-html="item.context" class="メッセージ"></span>
      </li>
    </ul>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  小道具: {
    手順: {
      タイプ: 配列、
    }
  }
}
</スクリプト>

<スタイル lang="less">
.steps-wrap {
  ul {
    パディング: 0 16px;
    li {
      ディスプレイ: フレックス;
      行の高さ: 1rem;
      色: #999;
      。時間 {
        テキスト配置: 中央;
        幅: 80ピクセル;
        フォントサイズ: 12px;
      }
      。丸 {
        位置: 相対的;
        zインデックス: 999;
        ディスプレイ: フレックス;
        コンテンツの中央揃え: 中央;
        アイテムの位置を中央揃えにします。
        境界線の半径: 50%;
        幅: 16px;
        高さ: 16px;
        上: 0;
        .アイコン {
          幅: 100%;
          高さ: 100%;
        }
        .circle-icon {
          位置: 相対的;
          zインデックス: 999;
          表示: インラインブロック;
          境界線の半径: 50%;
          幅: 8px;
          高さ: 8px;
          背景色: #333333;
        }
      }
      。メッセージ {
        パディング: 0 0 1.6rem 25px;
        フォントサイズ: 12px;
        フレックス: 1;
        左境界線: 1px 実線 #999999;
        左マージン: -8px;
      }
      &:最後の子 {
        。メッセージ {
          border-left: 1px 透明の実線;
        }
      }
    }
  }
}
</スタイル>

親コンポーネント

<テンプレート>
  <div class="ロジスティクス">
    <m-header :title="title" 固定>
      <a @click="$router.go(-1)" スロット="左">
        <img src="../../assets/images/root_back.png" class="m-icon-img" style="width:20px" />
      </a>
    </m-ヘッダー>
    <div class="item" @click="isShow = true">
      <img class="left" src="../../assets/images/ck.jpg" />
      <div class="text">
        <p class="name">{{current.nu}}</p>
        <p class="title">{{current.com}}</p>
      </div>
      <img class="refresh" src="../../assets/images/root_next.png" />
    </div>
 
    <v-steps v-if="loadDataDone" :steps="current.data"></v-steps>
    <div v-else クラス="空">
      <img src="../../assets/images/vip.png" alt />
      <span>ごめんなさい！クエリレコードはまだありません</span>
    </div>

    <van-action-sheet v-model="isShow" title="ロジスティクス">
      <ul class="リスト">
        <li v-for="リスト内の項目" @click="onSelect(item)" :key="item.nu" class="item">
          <img class="left" src="../../assets/images/ck.jpg" />
          <div class="text">
            <p class="name">{{item.nu}}</p>
            <p class="title">{{item.com}}</p>
          </div>
        </li>
      </ul>
    </バンアクションシート>
  </div>
</テンプレート>

<スクリプト>
'@/components/common/header/header.vue' から mHeader をインポートします。
'@/components/common/steps/Steps.vue' から vSteps をインポートします。
エクスポートデフォルト{
  名前: 「物流」、
  コンポーネント:
    mヘッダー、
    vステップ
  },
  計算: {
    順序Sn() {
      これを返します。$route.query.orderSn
    }
  },
  データ （） {
    戻る {
      タイトル: 「クエリ結果」
      isShow: false、
      リスト: [],
      現在： {}、
      ロードデータ完了: false
    }
  },
  作成された（）{
    この.getData()
  },
  メソッド: {
    非同期getData() {
      this.loadDataDone = true
      res = this.get(this.API.message.deliveryHtml, { を待機します。
        パラメータ: {
          順序Sn: this.orderSn
        }
      }).then(res => {
        res.Status == 'true' && res.StatusCode === '200' の場合 {
          // 携帯電話番号クリックダイヤル処理 const telReg = /1[3-9]\d{9}|[0][1-9]{2,3}-[0-9]{5,10}|95\d{3}/g
          res.Result.forEach(item => {
            アイテム.data.forEach(アイテム1 => {
              // 電話番号を抽出します if (telReg.test(item1.context)) {
                 tels = [...new Set(item1.context.match(telReg))] とします。
                 tels.forEach(item2 => {
                    item1.context = item1.context.replace(新しい正規表現(item2, 'g')、`<a style="color:red" href="tel:${item2}" rel="external nofollow" >${item2}</a>`)
                  })
              }
            })
          })
          this.current = res.Result[0]
          this.list = res.結果
        }

        res.Status == 0 || res.Status == 4 の場合 {
          this.loadDataDone = false
        }
      })
    },
    onSelect (アイテム) {
      this.isShow = false
      this.current = アイテム
    }
  }
}
</スクリプト>

<スタイル lang="less" >
.ロジスティクス{
  。アイテム {
    ディスプレイ: フレックス;
    align-items: center; /* 垂直中央 */
    パディング: 12px 24px;
    。左 {
      幅: 50px;
      高さ: 50px;
      オブジェクトフィット: カバー;
    }
    。文章 {
      フレックス: 1;
      ｐ {
        マージン: 0;
        左パディング: 12px;
      }
    }
    .リフレッシュ{
      幅: 24px;
      高さ: 24px;
    }
  }
  。空の {
    ディスプレイ: フレックス;
    コンテンツの中央揃え: 中央;
    アイテムの位置を中央揃えにします。
    パディング上部: 48px;
    フォントサイズ: 14px;
    スパン {
      左パディング: 12px;
    }
  }
}
</スタイル>

インターフェースデータ形式

{
    「ステータス」: 「true」、
    "ステータスコード": "200",
    "メッセージ": "成功",
    「タイムスタンプ」: 1584005302985、
    「サイン」：null、
    "結果"： [{
        "状態": "署名済み",
        "ステータス": "3",
        "com": "SF",
        "ニュー": "SF1018384252542",
        "データ"： [{
            「コンテキスト」：「[上海] SFエクスプレスがエクスプレス貨物を受け取りました」
            「時間」: 「2020-03-01 18:16:59」、
            "ftime": "2020-03-01 18:16:59"
        }, {
            「コンテキスト」：「[上海] エクスプレス貨物は [上海青浦崇古ビジネスポイント] で積み込まれ、[上海華新配送センター] に発送する準備が整いました」
            「時間」: 「2020-03-01 18:40:14」、
            "ftime": "2020-03-01 18:40:14"
        }, {
            「コンテキスト」：「[上海]エクスプレスが発送されました」
            「時間」: 「2020-03-01 18:42:12」、
            "ftime": "2020-03-01 18:42:12"
        }, {
            「コンテキスト」：「[上海] 速達便が [上海華鑫配送センター] に到着しました」
            「時間」: 「2020-03-01 19:01:08」、
            "ftime": "2020-03-01 19:01:08"
        }, {
            「コンテキスト」：「[上海] エクスプレス貨物は [上海華鑫配送センター] に積み込まれ、[国家航空ハブ (蕭山)] に発送する準備が整っています」
            「時間」: 「2020-03-01 20:01:27」、
            "ftime": "2020-03-01 20:01:27"
        }, {
            「コンテキスト」：「[上海]エクスプレスが発送されました」
            「時間」: 「2020-03-01 20:48:53」、
            "ftime": "2020-03-01 20:48:53"
        }, {
            「コンテキスト」：「[杭州]エクスプレスが[国家航空ハブ（蕭山）]に到着しました」
            「時間」: 「2020-03-01 23:20:28」、
            "ftime": "2020-03-01 23:20:28"
        }, {
            「コンテキスト」：「[杭州] の速達貨物は [国家航空ハブ (蕭山)] で積み込まれ、[石家荘高開配送センター] に発送する準備が整っています」
            「時間」: 「2020-03-02 01:31:35」、
            "ftime": "2020-03-02 01:31:35"
        }, {
            「コンテキスト」：「[杭州]エクスプレスは[杭州から石家荘へのフライト]で出発しました」
            「時間」: 「2020-03-02 04:15:00」、
            "ftime": "2020-03-02 04:15:00"
        }, {
            「コンテキスト」：「[石家荘市] エクスプレスが [石家荘] に到着し、[石家荘高開配送センター] に送る準備が整いました」
            「時間」: 「2020-03-02 06:02:00」、
            "ftime": "2020-03-02 06:02:00"
        }, {
            「コンテキスト」：「[石家荘市] 速達便が [石家荘高開配送センター] に到着しました」
            「時間」: 「2020-03-02 08:21:18」、
            "ftime": "2020-03-02 08:21:18"
        }, {
            「コンテキスト」：「[石家荘市] 速達貨物は [石家荘高開配送センター] に積み込まれ、[邢台ハイテク配送ポイント] に発送する準備が整っています」
            「時間」: 「2020-03-02 09:15:47」、
            "ftime": "2020-03-02 09:15:47"
        }, {
            「コンテキスト」：「[石家荘市] エクスプレスが派遣されました」
            「時間」: 「2020-03-02 09:16:05」、
            "ftime": "2020-03-02 09:16:05"
        }, {
            「コンテキスト」：「[邢台市] 速達便が [邢台ハイテク配送ポイント] に到着しました」
            「時間」: 「2020-03-02 11:48:24」、
            "ftime": "2020-03-02 11:48:24"
        }, {
            「コンテキスト」：「[邢台市] 速達貨物は [邢台ハイテク配送ポイント] に積み込まれ、[邢台市沙河市松井ビジネスポイント] に発送する準備が整いました」
            「時間」: 「2020-03-02 13:17:55」、
            "ftime": "2020-03-02 13:17:55"
        }, {
            「コンテキスト」：「[邢台市] 急行が出発しました」
            「時間」: 「2020-03-02 13:18:54」、
            "ftime": "2020-03-02 13:18:54"
        }, {
            「コンテキスト」：「[邢台市] 速達便が [邢台市沙河市松井商務ポイント] に到着しました」
            「時間」: 「2020-03-02 13:46:04」、
            "ftime": "2020-03-02 13:46:04"
        }, {
            「コンテキスト」：「[邢台市] が配達中です。署名の準備をしてください (配達人: Deng Pengfei、電話: 18631965961)」
            「時間」: 「2020-03-02 13:59:33」、
            "ftime": "2020-03-02 13:59:33"
        }, {
            「コンテキスト」：「[邢台市] 急行列車は鄧鵬飛に引き渡され、現在向かっています（連絡先番号：18631965961、SF急行はお客様の電話のプライバシーを保護するために「安全通話」を有効にしています。お気軽に電話に出てください！）」
            「時間」: 「2020-03-02 14:04:19」、
            "ftime": "2020-03-02 14:04:19"
        }, {
            "context": "[邢台市] お客様の宅配便の受取が完了しました。ご不明な点がございましたら、配達員 [鄧鵬飛、電話: 18631965961] までお電話ください。流行期間中、SFエクスプレスは店舗を毎日消毒し、配達員は毎日体温を測り、マスクを着用しています。SFエクスプレスをご利用いただき、ありがとうございます。またのご利用をお待ちしております。(メイン注文の合計商品数: 1)",
            「時間」: 「2020-03-02 14:37:20」、
            "ftime": "2020-03-02 14:37:20"
        }, {
            "context": "[邢台市] 公式サイト\"運送状情報と領収書画像\"で荷受人情報を閲覧できます",
            「時間」: 「2020-03-02 14:37:20」、
            "ftime": "2020-03-02 14:37:20"
        }]
    }, {
        "状態": "署名済み",
        "ステータス": "3",
        "com": "YD",
        "ニュー": "3103140966821",
        "データ"： [{
            「コンテキスト」：「上海普陀区徐社がアイテムを収集しスキャンする」
            「時間」: 「2020-02-13 20:13:39」、
            "ftime": "2020-02-13 20:13:39"
        }, {
            「コンテキスト」：「上海配送センターは配送センターで計量とスキャンを行っています」
            「時間」: 「2020-02-13 23:22:20」、
            "ftime": "2020-02-13 23:22:20"
        }, {
            「コンテキスト」：「上海配送センターは積載用の車両をスキャンし、江蘇省蘇州配送センターに送信します」
            「時間」: 「2020-02-14 00:29:45」、
            "ftime": "2020-02-14 00:29:45"
        }, {
            「コンテキスト」：「江蘇蘇州配送センターは配送センターの荷降ろし車両をスキャンしています」
            「時間」: 「2020-02-24 04:36:07」、
            "ftime": "2020-02-24 04:36:07"
        }, {
            "context": "江蘇省蘇州配送センターから送信、今回の転送先: 江蘇省蘇州相城区会社",
            「時間」: 「2020-02-24 04:55:10」、
            "ftime": "2020-02-24 04:55:10"
        }, {
            「コンテキスト」：「江蘇省蘇州市襄城区会社万里路便利倉庫支店が配達をスキャンしています。配達担当者：傅龍龍。連絡先番号：18751166952」
            「時間」: 「2020-02-24 09:22:13」、
            "ftime": "2020-02-24 09:22:13"
        }, {
            「コンテキスト」：「江蘇省蘇州市襄城区会社万里路便利倉庫支店が配達をスキャンしています。配達担当者：傅龍龍。連絡先番号：18751166952」
            「時間」: 「2020-02-24 09:30:24」、
            "ftime": "2020-02-24 09:30:24"
        }, {
            「コンテキスト」：「江蘇省蘇州市襄城区会社の万里路便利倉庫支店の速達郵便を受け取りました。ご不明な点がございましたら、営業担当の傅龍龍 [18751166952] までお電話ください。出会いは運命です。私のサービスにご満足いただけましたら、星 5 つを付けていただけますか? [宅配業者の評価で星 5 つを付けてください]」
            「時間」: 「2020-02-24 11:11:05」、
            "ftime": "2020-02-24 11:11:05"
        }]
    }, {
        "状態": "署名済み",
        "ステータス": "3",
        "com": "ZTO",
        "ニュー": "73122326322138",
        "データ"： [{
            "context": "【蘇州市】 【昆山】 (0512-83630555, 0512-87807044) CK (18762410718) が収集されました",
            「時間」: 「2019-11-07 18:42:40」、
            "ftime": "2019-11-07 18:42:40"
        }, {
            "context": "【蘇州市】 急行列車が【昆山】 に到着しました",
            「時間」: 「2019-11-07 22:37:12」、
            "ftime": "2019-11-07 22:37:12"
        }, {
            "context": "【蘇州市】 速達貨物が【昆山】を出発し、【無錫交通部】に送られました",
            「時間」: 「2019-11-07 22:49:26」、
            "ftime": "2019-11-07 22:49:26"
        }, {
            "context": "【無錫市】急行列車が【無錫交通局】に到着しました",
            「時間」: 「2019-11-08 05:15:58」、
            "ftime": "2019-11-08 05:15:58"
        }, {
            "context": "【無錫市】 速達貨物は【無錫交通局】を出発し、【南京交通局】に送られました",
            「時間」: 「2019-11-08 05:16:50」、
            "ftime": "2019-11-08 05:16:50"
        }, {
            "context": "【南京市】急行列車が【南京交通局】に到着しました",
            「時間」: 「2019-11-08 10:04:29」、
            "ftime": "2019-11-08 10:04:29"
        }, {
            「コンテキスト」：「【南京市】 速達貨物は【南京交通局】を出発し、【南京浦口区】に送られました」
            「時間」: 「2019-11-08 10:12:19」、
            "ftime": "2019-11-08 10:12:19"
        }, {
            "context": "【南京市】 特急列車が【南京浦口区】に到着しました",
            「時間」: 「2019-11-08 13:03:28」、
            "ftime": "2019-11-08 13:03:28"
        }, {
            "context": "【南京市】 【南京浦口区】中級裁判所（13291283965）が最初の荷物を配達しています。電話を開いたままにして、辛抱強くお待ちください（95720は中通の宅配便業者が発信する専用番号です。お気軽におかけください）。兄弟の今日の体温は正常です。彼はマスクを着用して荷物を配達します。兄弟に連絡して、荷物を指定の集荷場所に置くこともできます。健康を祈っています！",
            「時間」: 「2019-11-08 13:06:57」、
            "ftime": "2019-11-08 13:06:57"
        }, {
            "context": "【南京】エクスプレスは【南京大西園濱江ビル地下の菜鳥駅】に引き取られました。ご不明な点がございましたら、(13291283965 / 95311)までお電話ください。ZTOエクスプレスをご利用いただきありがとうございます。またのご利用をお待ちしております！",
            「時間」: 「2019-11-08 13:40:19」、
            "ftime": "2019-11-08 13:40:19"
        }]
    }],
    「アラートタイプ」: 「トースト」
}

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vueは水平タイムラインを実装する
  • Vueはタイムライン機能を実装する
  • 2列の水平タイムラインを実装するためのVueサンプルコード
  • VUEはタイムライン再生コンポーネントを実装します
  • vue+canvasでタイムラインを描く方法
  • Vue.jsはタイムライン機能を実装します
  • Vue+swiperでタイムライン効果を実現
  • Vue タイムライン vue-light-timeline 使用方法
  • Vueは移動可能な水平タイムラインを実装します
  • Vueはタイムライン効果を実装する

<<:  リモートホスト上でスクリプトや命令を実行する Zabbix の詳細な説明

>>:  MySQL の悲観的ロックと楽観的ロックの使用例

推薦する

docker runコンテナの自動終了の解決策

今日、Dockerfile を使用してイメージを作成したときに問題が発生し、イメージの実行後にコンテ...

Nginx を使用して https ルートドメイン名への 301 リダイレクトを実装するためのサンプル コード

SEO とセキュリティを考慮して、301 リダイレクトが必要です。以下の一般的な処理には Nginx...

Windows 7 の mysql6.x で中国語の文字化けが発生する問題に対する完璧な解決策

1. コマンドラインでMySQLサービスを停止します: net stop mysql stop my...

seata docker 高可用性デプロイメントの詳細な紹介

バージョン1.4.2公式ドキュメントドッカーハブ起動する環境変数SEATA_CONFIG_NAMEを...

ページ要素の絶対位置と相対位置に関するある程度の理解

今日から、定期的にちょっとした豆知識を整理していきます。簡単なものもあるかもしれませんが、どれも役に...

MySQLへのJava接続の基礎となるカプセル化の詳細な説明

この記事では、Java接続MySQLの基礎となるカプセル化コードを参考までに紹介します。具体的な内容...

PSSHを使用してLinuxサーバーを一括管理する

pssh は、多数のマシンでのバッチ ssh 操作に使用される、Python で実装されたオープン ...

CSS と HTML とフロントエンド テクノロジーのレイヤー図

フロントエンドテクノロジー層 （写真は少し極端ですが、参考までに） Javascript と DOM...

MySQLの権限とインデックスの詳細な説明

mysql の権限とインデックスmysql の最高権限ユーザーは root です。 CREATE U...

VMware に Centos7 をインストールした後に外部ネットワークに ping できない問題を解決する

クラスターを構成する際に問題が発生しました。当初は 3 台の仮想マシンすべてが外部ネットワークに p...

CSS で順序付きリスト項目と順序なしリスト項目のスタイルを設定する方法

順序なしリストでは、順序なしリストのシンボルは各リストの前に表示されるドットです。順序付きリスト o...

DockerはRedisをインストールし、操作用のビジュアルクライアントを導入します

1 はじめにRedis 、 ANSI C言語で開発されたKey-Valueベースの高性能NoSQLデ...

Centos7 ベースの Varnish キャッシュ プロキシ サーバーを展開する

1. ワニスの概要1. ワニスの紹介Varnish は、新しいソフトウェア アーキテクチャを使用し、...

HTML コード例: ハイパーリンクの詳細な説明

ハイパーリンクは、Web サイト上のすべてのページがハイパーリンクで接続され、ページ間を移動できるた...

JS の Promise に中止関数を追加する方法

目次概要プロミスレースメソッド約束の再パッケージ化中止コントローラAxiosプラグインにはキャンセル...