From ffea1f6c7c09d8724910259c3bb2e573032bb73d Mon Sep 17 00:00:00 2001 From: Wayne Date: Sat, 18 Nov 2023 13:41:06 +0800 Subject: [PATCH] =?UTF-8?q?=E5=B0=87card=E7=9A=84vuex=E6=8F=9B=E5=88=B0pin?= =?UTF-8?q?ia=E5=8E=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/card.js | 6 ++++++ src/main.js | 34 +++++++++++++++-------------- src/store/card.js | 26 ++++++++++++++++++++++ src/store/pinia.js | 5 +++++ src/utils/initStore.js | 12 +++++++++++ src/views/Card/Edit.vue | 48 +++++++++++++++++++++++++---------------- 6 files changed, 96 insertions(+), 35 deletions(-) create mode 100644 src/api/card.js create mode 100644 src/store/card.js create mode 100644 src/store/pinia.js create mode 100644 src/utils/initStore.js diff --git a/src/api/card.js b/src/api/card.js new file mode 100644 index 0000000..531ee7f --- /dev/null +++ b/src/api/card.js @@ -0,0 +1,6 @@ +import ajax from "./ajax"; + +//通訊錄 +export const getCardData = async () => + ajax(`/Card/getCardData`); + \ No newline at end of file diff --git a/src/main.js b/src/main.js index 7ead08f..50c4cd0 100644 --- a/src/main.js +++ b/src/main.js @@ -2,9 +2,9 @@ import { createApp } from "vue"; import App from "./App.vue"; import router from "./router"; import store from "./store"; -import { createPinia } from 'pinia' +import pinia from './store/pinia' import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' - +import { initStore } from './utils/initStore'; import liff from '@line/liff'; import { VueClipboard } from "@soerenmartius/vue3-clipboard"; @@ -14,19 +14,21 @@ import "@/assets/css/common.less"; // import './registerServiceWorker' liff.init({ - liffId: import.meta.env.VITE_APP_LINE_LIFF_ID - }).then(() => { + liffId: import.meta.env.VITE_APP_LINE_LIFF_ID +}).then(() => { + + window.liff = liff; - window.liff = liff; - - const vue = createApp(App); - const pinia = createPinia(); - pinia.use(piniaPluginPersistedstate); - // 將LIFF實例提供給應用 - vue.use(VueClipboard); - vue.use(pinia); - vue.use(store).use(router).mount("#app"); + const vue = createApp(App); + pinia.use(piniaPluginPersistedstate); + // 將LIFF實例提供給應用 + vue.use(VueClipboard); + vue.use(pinia); + // 初始化Store + initStore(pinia); - }).catch((error) => { - console.error('初始化 LIFF 時出錯:', error); - }); + vue.use(store).use(router).mount("#app"); + +}).catch((error) => { + console.error('初始化 LIFF 時出錯:', error); +}); diff --git a/src/store/card.js b/src/store/card.js new file mode 100644 index 0000000..a0bed1d --- /dev/null +++ b/src/store/card.js @@ -0,0 +1,26 @@ +import { defineStore } from 'pinia' + +import { updateCusCard } from "@/api"; + +export const useCardStore = defineStore('card', { + state: () => { + return { + cusCard: '', + vipCard: '', + } + }, + getters: { + }, + actions: { + async updateCusCard(payload) { + let res = await updateCusCard(payload); + if (res.code === 200) { + this.cusCard = payload; + return true; + } + + return false; + } + }, + persist: true +}) \ No newline at end of file diff --git a/src/store/pinia.js b/src/store/pinia.js new file mode 100644 index 0000000..609dfdb --- /dev/null +++ b/src/store/pinia.js @@ -0,0 +1,5 @@ +import { createPinia } from 'pinia'; + +const pinia = createPinia(); + +export default pinia; diff --git a/src/utils/initStore.js b/src/utils/initStore.js new file mode 100644 index 0000000..e58435e --- /dev/null +++ b/src/utils/initStore.js @@ -0,0 +1,12 @@ +import { useCardStore } from '@/store/card.js'; +import { getCardData } from '@/api/card.js'; + +export const initStore = async (pinia) => { + const cardStore = useCardStore(); + + let res = await getCardData(); + if (res.code === 200) { + cardStore.cusCard = res.data.cus_card; + cardStore.vipCard = res.data.vip_card; + } +}; diff --git a/src/views/Card/Edit.vue b/src/views/Card/Edit.vue index 72e1891..b19b166 100644 --- a/src/views/Card/Edit.vue +++ b/src/views/Card/Edit.vue @@ -4,22 +4,23 @@ import FlexView from "@/components/FlexView.vue"; import { ref, reactive, watch } from "vue"; -import { updateCusCard } from "@/api"; -import { useStore } from "vuex"; +import { useCardStore } from '@/store/card' + import { useRouter } from "vue-router"; import axios from "axios"; import _ from "lodash"; -import { showToast } from "vant"; -import { showLoadingToast, showSuccessToast } from "vant"; +import { showToast, showLoadingToast, showSuccessToast,showFailToast } from "vant"; import { Cropper } from "vue-advanced-cropper"; import "vue-advanced-cropper/dist/style.css"; +import { onMounted } from "vue"; const URL = window.URL || window.webkitURL; -const store = useStore(); +const cardStore = useCardStore(); + const router = useRouter(); const showNfc = ref(false); @@ -78,6 +79,12 @@ const form = ref({ }, }); +onMounted(() => { + if (cardStore.cusCard.cus_card && cardStore.cusCard.cus_card.length > 0) { + form.value = JSON.parse(cardStore.cusCard.cus_card); + } +}); + const sizeColumns = ref([ { text: "xxs", value: "xxs" }, { text: "xs", value: "xs" }, @@ -91,13 +98,6 @@ const sizeColumns = ref([ { text: "5xl", value: "5xl" }, ]); -if ( - store.state.user.userInfo.cus_card && - store.state.user.userInfo.cus_card.length > 0 -) { - form.value = JSON.parse(_.clone(store.state.user.userInfo.cus_card)); -} - watch( () => form.value.title, (newVal) => { @@ -273,18 +273,28 @@ const handleSubmit = async () => { forbidClick: true, }); - let res = await updateCusCard({ - user_id: user_id, + let cusCard = { card_title: form.value.title, show_cus: form.value.showNfc, cus_card: JSON.stringify(form.value), - }); - if (res.code === 200) { - store.commit("user/setCusCard", JSON.stringify(form.value)); + }; + + let res = cardStore.updateCusCard(cusCard); + + if(res){ showSuccessToast("建立成功"); - } else { - showToast.fail("建立失敗"); + }else{ + showFailToast("建立失敗"); } + + // let res = await updateCusCard(cusCard); + + // if (res.code === 200) { + // cardStore.cusCard = cusCard; + // showSuccessToast("建立成功"); + // } else { + // showToast.fail("建立失敗"); + // } router.push("/card/edit"); };