const { createApp } = Vue; // Event emitter to replace Vue 2 event bus const emitter = mitt(); // Custom directive for scroll-to (replacing vue-scrollto) const vScrollTo = { mounted(el, binding) { el.addEventListener('click', () => { const target = document.querySelector(binding.value.el); if (target) { window.scrollTo({ top: target.offsetTop - binding.value.offset, behavior: 'smooth' }); } }); } }; // Drinklist component const DrinkList = { template: '#type-container', props: ['subdata'], computed: { drinks() { return this.subdata.drinks; } } }; // DrinkContainer component const DrinkContainer = { template: '#drink-container', props: ['drink'], methods: { select() { emitter.emit('select', this.drink); } } }; // SeletedConponent component const SeletedConponent = { template: '#seleted', data() { return { seletedDrink: {}, size: '', sugar: 0, ice: -1, sugarlist: ['無糖', '微糖', '半糖', '七分', '全糖'], sugarlist_en: ['no suger', 'less than half', 'half', 'less', 'normal'], iceLevels: ['hot', 'warm', 'room', 'ice-free', 'little-ice', 'half-ice', 'regular-ice'], iceLevels_cht: ['熱', '溫', '常溫', '去冰', '微冰', '少冰', '正常冰'], name: '', status: 'Submit', isDrinkWarning: false, isSizeWarnning: false, isIceWarnning: false, isOwnerWarning: false }; }, watch: { seletedDrink: { handler() { if (Object.keys(this.seletedDrink).length !== 0) { this.isDrinkWarning = false; } }, deep: true }, ice() { if (this.ice !== -1) { this.isIceWarnning = false; } }, name() { if (this.name !== '') { this.isOwnerWarning = false; } }, size() { if (this.size !== '') { this.isSizeWarnning = false; } } }, created() { emitter.on('select', (drink) => { this.resetSeleted(); this.seletedDrink = drink; }); }, methods: { submit() { const price = this.seletedDrink['price-' + this.size]; if (this.checkSeleted()) { this.status = 'Ordering..'; const postData = { name: this.name, drink: this.seletedDrink['name-cht'], size: this.size, sugar: this.sugarlist[this.sugar], ice: this.iceLevels_cht[this.ice], price: price }; console.log(postData); this.status = 'done'; setTimeout(() => { this.status = 'Submit'; }, 600); this.seletedDrink = {}; this.resetSeleted(); } }, checkSeleted() { let ispass = true; if (Object.keys(this.seletedDrink).length === 0) { this.isDrinkWarning = true; ispass = false; } if (this.ice === -1) { this.isIceWarnning = true; ispass = false; } if (this.name === '') { this.isOwnerWarning = true; ispass = false; } if (this.size === '') { this.isSizeWarnning = true; ispass = false; } return ispass; }, resetSeleted() { this.seletedDrink = {}; this.size = ''; this.ice = -1; this.sugar = 0; this.name = ''; this.isDrinkWarning = false; this.isSizeWarnning = false; this.isIceWarnning = false; this.isOwnerWarning = false; } } }; // Main app const app = createApp({ data() { return { drinksData: [] }; }, mounted() { this.drinksData = [ { 'type-cht': '愛茶的牛', 'type-en': 'Tea', 'drinks': [ {'name-cht': '茉香綠茶', 'name-en': 'Green Tea', 'price-M': '', 'price-L': 30, 'without-sugar': 0}, {'name-cht': '大正紅茶', 'name-en': 'black Tea', 'price-M': '', 'price-L': 30, 'without-sugar': 0}, {'name-cht': '英倫伯爵紅茶', 'name-en':'Earl Grey Tea', 'price-M': '', 'price-L': 35, 'without-sugar': 0}, {'name-cht': '初露青茶', 'name-en': 'Light-Roasted Oolong Tea', 'price-M': '', 'price-L': 30, 'without-sugar': 0}, {'name-cht': '高峰烏龍綠', 'name-en': 'Oolong Tea', 'price-M': '', 'price-L': 30, 'without-sugar': 0}, {'name-cht': '決明大麥', 'name-en': 'Barley Water', 'price-M': '', 'price-L': 25, 'without-sugar': 0}, {'name-cht': '青採翠玉 (冷)', 'name-en': 'Iced Zhu Shan Tea', 'price-M': '', 'price-L': 40, 'without-sugar': 0} ] }, { 'type-cht': '牧場鮮奶茶', 'type-en': 'Milk Tea', 'drinks': [ {'name-cht': '紅茶拿鐵', 'name-en': 'Earl Grey Tea', 'price-M': 45, 'price-L': 55, 'without-sugar': 0}, {'name-cht': '大正紅茶拿鐵', 'name-en': 'Milk Tea', 'price-M': 45, 'price-L': 55, 'without-sugar': 0}, {'name-cht': '珍珠紅茶拿鐵', 'name-en': 'Bubble Milk Tea', 'price-M': 50, 'price-L': 60, 'without-sugar': 0}, {'name-cht': '布丁紅茶拿鐵', 'name-en': 'Pudding Milk Tea', 'price-M': 50, 'price-L': 60, 'without-sugar': 0}, {'name-cht': '仙草紅茶拿鐵', 'name-en': 'Herb jelly Milk Tea', 'price-M': 50, 'price-L': 60, 'without-sugar': 0}, {'name-cht': '紅豆紅茶拿鐵', 'name-en': 'Red Beans Milk Tea', 'price-M': 50, 'price-L': 60, 'without-sugar': 0} ] }, { 'type-cht': '綠光牧場鮮奶', 'type-en': 'Green Light Milk', 'drinks': [ {'name-cht': '珍珠鮮奶', 'name-en': 'Bubble Milk', 'price-M': 60, 'price-L': '', 'without-sugar': 0}, {'name-cht': '手抄黑糖鮮奶', 'name-en': 'Brown Sugar Milk', 'price-M': 55, 'price-L': '', 'without-sugar': 0}, {'name-cht': '大甲芋頭鮮奶', 'name-en': 'Taro Milk', 'price-M': 60, 'price-L': '', 'without-sugar': 0}, {'name-cht': '草莓鮮奶 (冰)', 'name-en': 'Strawberry Milk', 'price-M': 60, 'price-L': '', 'without-sugar': 0}, {'name-cht': '可可亞鮮奶', 'name-en': 'Cocoa Milk', 'price-M': 55, 'price-L': '', 'without-sugar': 0}, {'name-cht': '抹茶鮮奶', 'name-en': 'Matcha Milk', 'price-M': 60, 'price-L': '', 'without-sugar': 0}, {'name-cht': '冬瓜鮮奶', 'name-en': 'White Gourd Milk', 'price-M': 55, 'price-L': '', 'without-sugar': 0}, {'name-cht': '布丁鮮奶', 'name-en': 'Pudding Milk', 'price-M': 55, 'price-L': '', 'without-sugar': 0}, {'name-cht': '仙草凍鮮奶', 'name-en': 'Herb jelly Milk', 'price-M': 55, 'price-L': '', 'without-sugar': 0}, {'name-cht': '紅豆鮮奶', 'name-en': 'Red Beans Milk', 'price-M': 60, 'price-L': '', 'without-sugar': 0} ] }, { 'type-cht': '六時韻/無糖', 'type-en': 'Cold BrewedTea /without sugar', 'drinks': [ {'name-cht': '鹿谷黃金烏龍 (冰)', 'name-en': 'lced Lugu Oolong', 'price-M': 60, 'price-L': '', 'without-sugar': 1}, {'name-cht': '小山迎露 (冰)', 'name-en': 'Lced Jin Shuan Tea', 'price-M': 65, 'price-L': '', 'without-sugar': 1} ] }, { 'type-cht': '台灣鮮豆奶', 'type-en': 'Soy Milk', 'drinks': [ {'name-cht': '大正紅茶鮮豆奶', 'name-en': 'Black Tea & Soy Milk', 'price-M': 45, 'price-L': 55, 'without-sugar': 0}, {'name-cht': '珍珠紅茶鮮豆奶', 'name-en': 'Soy Milk Black Tea w/ Bubble', 'price-M': 50, 'price-L': 60, 'without-sugar': 0}, {'name-cht': '抹茶鮮豆奶', 'name-en': 'Matcha Soy Milk', 'price-M': 50, 'price-L': '', 'without-sugar': 0}, {'name-cht': '冬瓜鮮豆奶', 'name-en': 'White Gourd Soy Milk', 'price-M': 50, 'price-L': '', 'without-sugar': 0}, {'name-cht': '布丁鮮豆奶', 'name-en': 'Pudding Soy Milk', 'price-M': 50, 'price-L': '', 'without-sugar': 0} ] }, { 'type-cht': '手作特調', 'type-en': 'Specials', 'drinks': [ {'name-cht': '原鄉冬瓜茶', 'name-en': 'White Gourd Tea', 'price-M': '', 'price-L': 30, 'without-sugar': 0}, {'name-cht': '冬瓜青茶', 'name-en': 'White Gourd & light-Roasted Oolong Tea', 'price-M': '', 'price-L': 40, 'without-sugar': 0}, {'name-cht': '百香綠茶', 'name-en': 'Passion Gruit Juice & Green Tea', 'price-M': '', 'price-L': 50, 'without-sugar': 0}, {'name-cht': '養樂多綠', 'name-en': 'Yakult& Green Tea', 'price-M': '', 'price-L': 50, 'without-sugar': 0}, {'name-cht': '甘蔗青茶', 'name-en': 'Sugarcane Juice & light-Roasted Oolong Tea', 'price-M': '', 'price-L': 55, 'without-sugar': 0}, {'name-cht': '蔓莓雙果醋', 'name-en': 'Cranberry & Strawberry Vinegar', 'price-M': '', 'price-L': 55, 'without-sugar': 0}, {'name-cht': '香柚綠茶', 'name-en': 'Grapefruit Juice & Green Tea', 'price-M': '', 'price-L': 50, 'without-sugar': 0}, {'name-cht': '青檸香茶', 'name-en': 'Lemon Flavored Green Tea', 'price-M': '', 'price-L': 45, 'without-sugar': 0}, {'name-cht': '檸檬綠茶', 'name-en': 'Green Tea & Lemon Juice', 'price-M': '', 'price-L': 50, 'without-sugar': 0}, {'name-cht': '冬瓜檸檬', 'name-en': 'White Gourd & Lemon Juice', 'price-M': '', 'price-L': 45, 'without-sugar': 0}, {'name-cht': '黑糖檸檬', 'name-en': 'Brown Sugar & Lemon Juice', 'price-M': '', 'price-L': 50, 'without-sugar': 0}, {'name-cht': '金桔檸檬', 'name-en': 'Calamondin & Lemon Juice', 'price-M': '', 'price-L': 50, 'without-sugar': 0}, {'name-cht': '冰萃檸檬', 'name-en': 'Lce Shavings of Lemon Green Juice', 'price-M': '', 'price-L': 50, 'without-sugar': 0} ] } ]; } }); // Register components and directives app.component('drinklist', DrinkList); app.component('drink-container', DrinkContainer); app.component('seletedconponent', SeletedConponent); app.directive('scroll-to', vScrollTo); // Provide axios globally app.provide('$http', axios); // Mount the app app.mount('#app');