Skip to content

課程部分模板

Jump to bottom
wcc723 edited this page May 31, 2021 · 2 revisions

製作登入頁面

<div class="container mt-5">
	<form class="row justify-content-center">
	  <div class="col-md-6">
	    <h1 class="h3 mb-3 font-weight-normal">請先登入</h1>
	    <div class="mb-2">
	      <label for="inputEmail" class="sr-only">Email address</label>
	      <input
	        type="email"
	        id="inputEmail"
	        class="form-control"
	        placeholder="Email address"
	        required
	        autofocus
	      />
	    </div>
	    <div class="mb-2">
	      <label for="inputPassword" class="sr-only">Password</label>
	      <input
	        type="password"
	        id="inputPassword"
	        class="form-control"
	        placeholder="Password"
	        required
	      />
	    </div>
	
	    <div class="text-end mt-4">
	      <button class="btn btn-lg btn-primary btn-block" type="submit">登入</button>
	    </div>
	  </div>
	</form>
</div>

產品列表

<table class="table mt-4">
  <thead>
    <tr>
      <th width="120">分類</th>
      <th>產品名稱</th>
      <th width="120">原價</th>
      <th width="120">售價</th>
      <th width="100">是否啟用</th>
      <th width="200">編輯</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>分類</td>
      <td>標題</td>
      <td class="text-right">
        200
      </td>
      <td class="text-right">
        100
      </td>
      <td>
        <span class="text-success">啟用</span>
      </td>
      <td>
        <div class="btn-group">
          <button class="btn btn-outline-primary btn-sm">編輯</button>
          <button class="btn btn-outline-danger btn-sm">刪除</button>
        </div>
      </td>
    </tr>
  </tbody>
</table>

增加 Bootstrap Modal

<!-- 請同學自行新增 v-model -->
<div class="modal-dialog modal-xl" role="document">
  <div class="modal-content border-0">
    <div class="modal-header bg-dark text-white">
      <h5 class="modal-title" id="exampleModalLabel">
        <span>新增產品</span>
      </h5>
      <button type="button" class="btn-close"
              data-bs-dismiss="modal" aria-label="Close"></button>
    </div>
    <div class="modal-body">
      <div class="row">
        <div class="col-sm-4">
          <div class="mb-3">
            <label for="image" class="form-label">輸入圖片網址</label>
            <input type="text" class="form-control" id="image"
                    placeholder="請輸入圖片連結">
          </div>
          <div class="mb-3">
            <label for="customFile" class="form-label">或 上傳圖片
              <i class="fas fa-spinner fa-spin"></i>
            </label>
            <input type="file" id="customFile" class="form-control">
          </div>
          <img class="img-fluid" alt="">
          <!-- 延伸技巧，多圖 -->
          <div class="mt-5">
            <div class="mb-3 input-group" >
              <input type="url" class="form-control form-control"
                      placeholder="請輸入連結">
              <button type="button" class="btn btn-outline-danger">
                移除
              </button>
            </div>
            <div>
              <button class="btn btn-outline-primary btn-sm d-block w-100">
                新增圖片
              </button>
            </div>
          </div>
        </div>
        <div class="col-sm-8">
          <div class="mb-3">
            <label for="title" class="form-label">標題</label>
            <input type="text" class="form-control" id="title"
                    placeholder="請輸入標題">
          </div>

          <div class="row gx-2">
            <div class="mb-3 col-md-6">
              <label for="category" class="form-label">分類</label>
              <input type="text" class="form-control" id="category"
                      placeholder="請輸入分類">
            </div>
            <div class="mb-3 col-md-6">
              <label for="price" class="form-label">單位</label>
              <input type="text" class="form-control" id="unit"
                      placeholder="請輸入單位">
            </div>
          </div>

          <div class="row gx-2">
            <div class="mb-3 col-md-6">
              <label for="origin_price" class="form-label">原價</label>
              <input type="number" class="form-control" id="origin_price"
                      placeholder="請輸入原價">
            </div>
            <div class="mb-3 col-md-6">
              <label for="price" class="form-label">售價</label>
              <input type="number" class="form-control" id="price"
                      placeholder="請輸入售價">
            </div>
          </div>
          <hr>

          <div class="mb-3">
            <label for="description" class="form-label">產品描述</label>
            <textarea type="text" class="form-control" id="description"
                      placeholder="請輸入產品描述"></textarea>
          </div>
          <div class="mb-3">
            <label for="content" class="form-label">說明內容</label>
            <textarea type="text" class="form-control" id="content"
                      placeholder="請輸入產品說明內容"></textarea>
          </div>
          <div class="mb-3">
            <div class="form-check">
              <input class="form-check-input" type="checkbox"
                      :true-value="1"
                      :false-value="0"
                      id="is_enabled">
              <label class="form-check-label" for="is_enabled">
                是否啟用
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline-secondary"
              data-bs-dismiss="modal">取消
      </button>
      <button type="button" class="btn btn-primary">確認</button>
    </div>
  </div>
</div>

加入錯誤的訊息回饋

彈出訊息列表元件

<template>
  <div class="toast-container position-absolute pe-3 top-0 end-0">
    <Toast v-for="(msg, key) in messages" :key="key"
      :msg="msg"
    />
  </div>
</template>

<script>
import Toast from '@/components/Toast.vue';

export default {
  components: { Toast },
  data() {
    return {
      messages: [],
    };
  },
  inject: ['emitter'],
  mounted() {
    // 請自行補上 emitter 事件
  },
};
</script>

吐司元件

<template>
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" ref="toast">
    <div class="toast-header">
      <span :class="`bg-${msg.style}`" class="p-2 rounded me-2 d-inline-block"></span>
      <strong class="me-auto">{{ msg.title }}</strong>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body" v-if="msg.content">
      {{ msg.content }}
    </div>
  </div>
</template>
<script>
import Toast from 'bootstrap/js/dist/toast';

export default {
  name: 'Toast',
  props: [
    'msg',
  ],
  mounted() {
    const toastEl = this.$refs.toast;
    const toast = new Toast(toastEl, {
      delay: 6000,
    });
    toast.show();
  },
};
</script>

加入分頁切換

<template>
  <nav aria-label="Page navigation example">
    <ul class="pagination justify-content-center">
      <li class="page-item">
        <a class="page-link" href="#" aria-label="Previous">
          <span aria-hidden="true">&laquo;</span>
        </a>
      </li>
      <li class="page-item">
        <a class="page-link" href="#"></a>
      </li>
      <li class="page-item">
        <a class="page-link" href="#" aria-label="Next">
          <span aria-hidden="true">&raquo;</span>
        </a>
      </li>
    </ul>
  </nav>
</template>

<script>
// :pages="{ 頁碼資訊 }"
// @emitPages="更新頁面事件"
export default {
  props: ['pages'],
  methods: {
    updatePage() {
    },
  },
};
</script>

全域的千分號方法

export function currency(num) {
  const n = parseInt(num, 10);
  return `${n.toFixed(0).replace(/./g, (c, i, a) => (i && c !== '.' && ((a.length - i) % 3 === 0) ? `, ${c}`.replace(/\s/g, '') : c))}`;
}

export function date(time) {
  const localDate = new Date(time * 1000);
  return localDate.toLocaleDateString();
}

用戶端加入購物車

<div class="col-md-5">
  <div class="sticky-top">
    <table class="table align-middle">
      <thead>
        <tr>
          <th></th>
          <th>品名</th>
          <th style="width: 110px">數量</th>
          <th>單價</th>
        </tr>
      </thead>
      <tbody>
        <tr >
          <td>
            <button type="button" class="btn btn-outline-danger btn-sm">
              <i class="bi bi-x"></i>
            </button>
          </td>
          <td>
            標題
            <div class="text-success">
              已套用優惠券
            </div>
          </td>
          <td>
            <div class="input-group input-group-sm">
              <input type="number" class="form-control">
              <div class="input-group-text">/ 單位</div>
            </div>
          </td>
          <td class="text-end">
            <small class="text-success">折扣價：</small>
          </td>
        </tr>
      </tbody>
      <tfoot>
      <tr>
        <td colspan="3" class="text-end">總計</td>
        <td class="text-end">199</td>
      </tr>
      <tr>
        <td colspan="3" class="text-end text-success">折扣價</td>
        <td class="text-end text-success">199</td>
      </tr>
      </tfoot>
    </table>
    <div class="input-group mb-3 input-group-sm">
      <input type="text" class="form-control" placeholder="請輸入優惠碼">
      <div class="input-group-append">
        <button class="btn btn-outline-secondary" type="button">
          套用優惠碼
        </button>
      </div>
    </div>
  </div>
</div>

用戶端建立訂單

<div class="my-5 row justify-content-center">
  <form class="col-md-6">
    <table class="table align-middle">
      <thead>
      <th>品名</th>
      <th>數量</th>
      <th>單價</th>
      </thead>
      <tbody>
      <tr>
        <td>產品</td>
        <td>1 / 個</td>
        <td class="text-end">100</td>
      </tr>
      </tbody>
      <tfoot>
      <tr>
        <td colspan="2" class="text-end">總計</td>
        <td class="text-end">100</td>
      </tr>
      </tfoot>
    </table>

    <table class="table">
      <tbody>
      <tr>
        <th width="100">Email</th>
        <td>abc@gmail.com</td>
      </tr>
      <tr>
        <th>姓名</th>
        <td>AA</td>
      </tr>
      <tr>
        <th>收件人電話</th>
        <td>0987654321</td>
      </tr>
      <tr>
        <th>收件人地址</th>
        <td>Address</td>
      </tr>
      <tr>
        <th>付款狀態</th>
        <td>
          <span>尚未付款</span>
          <span class="text-success">付款完成</span>
        </td>
      </tr>
      </tbody>
    </table>
    <div class="text-end">
      <button class="btn btn-danger">確認付款去</button>
    </div>
  </form>
</div>
Clone this wiki locally