見積りフォームテスト 項目1: 天幕を選ぶ スタンダード天幕 しっかり天幕 カラー天幕 項目２: サイズを選ぶ 1間×1.5間 1間×2間 項目3: 高さを選ぶ h1800 h2000 項目4: 天幕たれの形状を選ぶ 波たれ ストレートたれ 項目5: テントの数を入れる 項目6: 横幕について 横幕: なし 三方幕 {{ pricesWall[tentType][tentSize][tentHeight]['三方幕'] | formatPrice }}円 一方幕 {{ pricesWall[tentType][tentSize][tentHeight]['一方幕'] | formatPrice }}円 三方幕+一方幕 {{ (pricesWall[tentType][tentSize][tentHeight]['三方幕'] + pricesWall[tentType][tentSize][tentHeight]['一方幕']) | formatPrice }}円 項目7: 横幕の数 項目8: オプション品を選ぶ } (}円) 総額: 税込総額: } 税抜総額: } const app = Vue.createApp({ data() { return { tentType: '', tentSize: '', tentHeight: '', tentQuantity: 1, sideWall: 'none', sideWallCount: 0, pricesTent: { "スタンダード天幕": { "1間×1.5間": , "1間×2間": , }, "しっかり天幕": { "1間×1.5間": , "1間×2間": , }, "カラー天幕": { "1間×1.5間": , "1間×2間": , } }, pricesWall: { "スタンダード天幕": { "1間×1.5間": { "h1800": , "h2000": , }, "1間×2間": { "h1800": , "h2000": , }, }, "糸入り透明": { "1間×1.5間": { "h1800": , "h2000": , }, "1間×2間": { "h1800": , "h2000": , }, }, "しっかり天幕": { "1間×1.5間": { "h1800": , "h2000": , }, "1間×2間": { "h1800": , "h2000": , }, }, "カラー天幕": { "1間×1.5間": { "h1800": , "h2000": , }, "1間×2間": { "h1800": , "h2000": , }, }, "軽量ターポリン": { "1間×1.5間": { "h2000": , }, "1間×2間": { "h2000": , }, }, }, accessories: { "ウインドローラー": 0, "ドアロール": 0, "マジックテープ付きドア": 0, "バルブホルダー": 0, "LEDライト": 0, }, optinItems: { "ウインドローラー": 3000, "ドアロール": 3000, "マジックテープ付きドア": 5000, "バルブホルダー": 1000, "LEDライト": 2000, }, }; }, methods: { setSideWallCount(count) { this.sideWallCount = count; }, }, computed: { showSideWallPrice() { return this.sideWall !== "none"; }, totalPriceWithoutTax() { let totalPrice = 0; if (this.tentType && this.tentSize && this.tentHeight) { totalPrice += this.pricesTent[this.tentType][this.tentSize][this.tentHeight]; } if (this.sideWallCount && this.showSideWallPrice) { if (this.sideWall === "both") { totalPrice += this.pricesWall[this.tentType][this.tentSize][this.tentHeight]["三方幕"] + this.pricesWall[this.tentType][this.tentSize][this.tentHeight]["一方幕"]; } else { totalPrice += this.pricesWall[this.tentType][this.tentSize][this.tentHeight][this.sideWall]; } } for (const option in this.accessories) { totalPrice += this.accessories[option] * this.optinItems[option]; } return totalPrice; }, totalPriceWithTax() { return Math.floor(this.totalPriceWithoutTax * 1.1); }, }, filters: { formatPrice(price) { return price.toLocaleString(); }, }, });app.mount("#app");
