Day14 - 做一半的产品编辑 modal

今天回顾六角的课程范例，重做一遍产品编辑 modal ，但目前只做了一半

<template>
  <!-- Button trigger modal -->
  <button
    type="button"
    class="btn btn-primary"
    data-bs-toggle="modal"
    data-bs-target="#exampleModal"
  >
    按这边
  </button>

  <!-- Modal -->
  <div
    class="modal fade"
    id="exampleModal"
    tabindex="-1"
    aria-labelledby="exampleModalLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog modal-xl modal-fullscreen-md-down">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">商品资讯</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-md-6">
              <div v-for="i in 3" :key="'img' + i" class="mb-3">
                <label :for="'img' + i" class="form-label">图片网址</label>
                <input
                  type="text"
                  class="form-control"
                  :id="'img' + i"
                  placeholder="image url"
                  // 与当前的产品 url 双向绑定
                  v-model="tempProduct.imageUrl[i]"
                  <img :src="tempProduct.imageUrl[i]" :alt="tempProduct.title" />
                />
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          // 登入才能取得 api 的 Token
          <button @click="login">login</button>
          // 取得 Token 才能捉取後台的产品清单
          <button @click="getProductList">getProductList</button>
          // 取得後台产品清单才能从中选一个产品，利用该产品 id，取得该产品完整资讯
          <button @click="getProduct">getProduct</button>
          <button
            type="button"
            class="btn btn-secondary"
            data-bs-dismiss="modal"
          >
            Close
          </button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Modal",
  data() {
    return {
      user: {
        email: "----",
        password: "----",
      },
      token: "",
      uuid: "----",
      id: "----",
      // 取得指定产品完整资料後，将他暂存与此
      tempProduct: {
        id: "",
        title: "",
        category: "",
        content: "",
        description: "",
        imageUrl: [],
        enabled: false,
        origin_price: 0,
        price: 0,
        unit: "",
        options: {
          message: "Hello World!",
        },
      },
    };
  },
  methods: {
    login() {
      const api = "我的 api";
      axios
        .post(api, this.user)
        .then((res) => {
          const token = res.data.token;
          const expired = res.data.expired;
          // 将 token 与他的到期时间存到浏览器 cookie 里
          document.cookie = `loginToken = ${token}; expires = ${new Date(
            expired * 1000
          )};`;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getProductList() {
      const api = `我的 api`;
      // 先从浏览器 cookie 取得 token
      this.token = document.cookie.replace(/(?:(?:^|.*;\s*)loginToken\s*=\s*([^;]*).*$)|^.*$/, "$1");

      // https://github.com/axios/axios#global-axios-defaults
      // 并且 header 按照後端 api 文件的规格要求填上 Bearer token 字样
      axios.defaults.headers.common.Authorization = `Bearer ${this.token}`;
      axios
        .get(api)
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getProduct() {
      const api = `我的 api`;
      // 先从浏览器 cookie 取得 token
      this.token = document.cookie.replace(/(?:(?:^|.*;\s*)loginToken\s*=\s*([^;]*).*$)|^.*$/, "$1");

      // https://github.com/axios/axios#global-axios-defaults
      // 并且 header 按照後端 api 文件的规格要求填上 Bearer token 字样
      axios.defaults.headers.common.Authorization = `Bearer ${this.token}`;
      axios
        .get(api)
        .then((res) => {
          console.log(res);
          this.tempProduct = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style></style>

今天笔记到这，如果内容有出入，都在麻烦纠正了，谢谢您 (っಠ‿ಠ)っ