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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: リモートホスト上でスクリプトや命令を実行する Zabbix の詳細な説明
推薦する
(MariaDB) MySQL のデータ型とストレージメカニズムの包括的な説明
1.1 データ型の概要データ型は、各フィールドに保存できるデータの種類、保存できるデータの量、保存で...
ネイティブ JavaScript メッセージボード
この記事では、参考までにメッセージボードを実装するためのJavaScriptの具体的なコードを紹介し...
一目でわかる$nextTickの説明
目次1. 機能説明2. 親コンポーネント3. サブコンポーネント NextTick.vue 4なぜ未...
Linux で SSH サーバー エイリアスを作成する 2 つの方法
序文SSH 経由でさまざまなリモート システムに頻繁にアクセスする場合は、このトリックを使用すると時...
WeChatアプレット仮想リストの応用例
目次序文仮想リストとは何ですか?デモ効果準備スクリーンの高さとボックスの高さ最適化要約する序文人気の...
MySQLをインストールして設定し、ルートパスワードを変更する方法
1. インストールapt-get install mysql-server にはアカウントとパスワー...
LinuxカーネルマクロContainer_Ofの詳細な説明
目次1. 構造体はメモリにどのように保存されますか? 2. container_ofマクロ3. 型4...
Linux (CentOS7) に Tomcat をインストールし、Tomcat をスタートアップ項目として設定します (tomcat8 を例に挙げます)
目次TomcatをインストールするTomcat 圧縮パッケージをダウンロードTomcatには3つの主...
HTMLでアンカーの位置を設定するためのいくつかの一般的な方法
HTML でアンカーの位置を設定する方法はいくつかあるので、ここで紹介します。 1. ID ポジショ...
Centos で MySQL パスワードを変更する方法
1. MySQL ログイン設定を変更します。 # vim /etc/my.cnf文を追加: skip...
Nginx は gzip 圧縮に基づいてアクセス速度を向上します
1. nginx はなぜ gzip を使用するのですか? 1. 圧縮の役割:ページがgzipで圧縮さ...
Centos 7 sshd の変更 | ルートログインの禁止と sshd ポートスクリプトの定義
1. 新しいユーザーwwweee000を作成します [root@localhost ~]# user...
Node.js で MySQL データベースにバッチデータを挿入する方法
プロジェクト（nodejs）では、一度に複数のデータをデータベースに挿入する必要があります。データベ...
Node.js のワーカー スレッドの詳細な理解
目次概要Node.js における CPU バウンド アプリケーションの歴史CPUを集中的に使用する操...
MySQLのカバーインデックスに関する知識ポイントのまとめ
インデックスにクエリする必要があるすべてのフィールドの値が含まれている（またはカバーしている）場合、...