From 56b8a9fce778688ff853d1281f89667d844e5a94 Mon Sep 17 00:00:00 2001 From: 10994015 Date: Wed, 29 Nov 2023 17:11:46 +0800 Subject: [PATCH] =?UTF-8?q?option=20=E6=9B=B4=E6=96=B0=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- wms/contract/insertData.php | 3 + wms/mkt/assets/js/alpine.js | 147 +++++++++++++++++++++++++++++--- wms/mkt/conn.php | 16 ++-- wms/mkt/css/style.css | 125 ++++++++++++++++++--------- wms/mkt/css/style.css.map | 2 +- wms/mkt/css/style.scss | 126 ++++++++++++++++++--------- wms/mkt/price_option-index.php | 135 ++++++++++++++++++----------- wms/mkt/price_option-select.php | 121 +++++++++++++++++++------- 8 files changed, 495 insertions(+), 180 deletions(-) diff --git a/wms/contract/insertData.php b/wms/contract/insertData.php index c0ced913..0d19cfee 100644 --- a/wms/contract/insertData.php +++ b/wms/contract/insertData.php @@ -108,6 +108,9 @@ foreach ($sheet->getRowIterator() as $key=>$row) { }elseif($id == 14){ $kind ='D'; $subkind = 'D2'; + }elseif($id == 15){ + $kind ='B'; + $subkind = 'B1'; } if(isset($_GET['id'])){ diff --git a/wms/mkt/assets/js/alpine.js b/wms/mkt/assets/js/alpine.js index f2f3962a..fec7d4de 100644 --- a/wms/mkt/assets/js/alpine.js +++ b/wms/mkt/assets/js/alpine.js @@ -1,11 +1,12 @@ const priceOptionIndex = ()=>{ return { init(){ - console.log(this.kind); + this.renderPagination(); this.initButtons(this.kind); + this.options = this.options.slice(0, this.pageLength) }, kind: kind, - pageLength: 999999, + pageLength: 50, search: '', orioptions: options, options: options, @@ -13,8 +14,13 @@ const priceOptionIndex = ()=>{ 1:'標', 2:'選', }, - btntype:'', + btntype:1, buttons:[], + pageLength: 50, + currentpage:1, + dataLangth:options.length, + search: '', + pageNumber:1, initButtons(kind){ if(kind == 'A'){ this.buttons = [ @@ -42,31 +48,146 @@ const priceOptionIndex = ()=>{ {name: '功能與配置', type: 'D1'}, {name: 'OH與樓高', type: 'D2'}, ] + }else if(kind == 'E'){ + this.buttons = [ + {name: '平台梯', type: 'E1'}, + ] } this.buttons.unshift({ name:'顯示全部',type:'1', }) this.btntype = this.buttons[0].type; }, - changeType(type = this.btntype){ - this.btntype = type + changeType(type=this.btntype){ + this.currentpage = 1 + this.btntype = type; this.options = this.orioptions; this.options = this.getOptions(); this.inputSearch() }, - getOptions(){ + getOptions(start=0, end=this.pageLength){ if(this.btntype != 1){ - return this.options.filter(item=>(item.subkind == this.btntype)).slice(0, this.pageLength) + return this.options.filter(item=>(item.subkind == this.btntype)).slice(start, end) } - return this.options.slice(0, this.pageLength); + return this.options.slice(start, end); }, inputSearch(e=null){ let text = e!=null ? e.target.value : this.search; - this.search = text - this.options = this.orioptions - this.options = this.getOptions().filter(item=>{ - return (item.group_name.includes(text)) - }) + this.search = text.toLowerCase(); + if(text != ''){ + this.currentpage = 1; + this.options = this.orioptions + this.options = this.options.filter(item=>{ + if(item.subkind == this.btntype || this.btntype == 1){ + if(item.group_name == null) item.group_name = '' + if(item.spec == null) item.spec = '' + if(item.memo == null) item.memo = '' + if(item.price == null) item.price = 0 + return (item.group_name.toLowerCase().includes(text.toLowerCase()) || item.spec.toLowerCase().includes(text.toLowerCase()) || item.memo.toLowerCase().includes(text.toLowerCase()) || String(item.price).includes(text.toLowerCase())) ; + } + }).slice((Number(this.currentpage)-1)*Number(this.pageLength), (Number(this.currentpage)-1)*Number(this.pageLength) + Number(this.pageLength)) + this.dataLangth = this.options.length + }else{ + this.options = this.orioptions + if(this.btntype == 1){ + this.options = this.options.filter(item=> item.kind == this.kind) + }else{ + this.options = this.options.filter(item=> (item.subkind == this.btntype)) + } + if(this.btntype == 1){ + this.dataLangth = this.orioptions.filter(item=> (item.kind == this.kind)).length + }else{ + this.dataLangth = this.orioptions.filter(item=> (item.subkind == this.btntype)).length + } + this.options = this.options.slice((Number(this.currentpage)-1)*Number(this.pageLength), (Number(this.currentpage)-1)*Number(this.pageLength) + Number(this.pageLength)) + } + this.pageNumber = Math.ceil(Number(this.dataLangth)/Number(this.pageLength)) + this.pageNumberArr = [] + for(let i=0;i{ + return { + init(){ + this.renderPagination(); + this.options = this.options.slice(0, this.pageLength) + }, + orioptions: options, + options: options, + options_arr: { + 1:'標', + 2:'選', + }, + btntype:1, + buttons:[], + pageLength: 50, + currentpage:1, + dataLangth:options.length, + search: '', + pageNumber:1, + startpage:0, + endpage:this.startpage + this.pageLength, + pageNumberArr:[], + changeType(){ + this.options = this.orioptions; + this.options = this.getOptions(); + this.inputSearch() + }, + getOptions(start=0, end=this.pageLength){ + return this.options.slice(start, end); + }, + inputSearch(e=null){ + let text = e!=null ? e.target.value : this.search; + this.search = text.toLowerCase(); + if(text != ''){ + this.currentpage = 1; + this.options = this.orioptions + this.options = this.options.filter(item=>{ + if(item.group_name == null) item.group_name = '' + if(item.spec == null) item.spec = '' + if(item.memo == null) item.memo = '' + if(item.price == null) item.price = 0 + return (item.group_name.toLowerCase().includes(text.toLowerCase()) || item.spec.toLowerCase().includes(text.toLowerCase()) || item.memo.toLowerCase().includes(text.toLowerCase()) || String(item.price).includes(text.toLowerCase())) ; + }).slice((Number(this.currentpage)-1)*Number(this.pageLength), (Number(this.currentpage)-1)*Number(this.pageLength) + Number(this.pageLength)) + this.dataLangth = this.options.length + }else{ + this.options = this.orioptions + this.options = this.options.slice((Number(this.currentpage)-1)*Number(this.pageLength), (Number(this.currentpage)-1)*Number(this.pageLength) + Number(this.pageLength)) + this.dataLangth = this.orioptions.length + } + this.pageNumber = Math.ceil(Number(this.dataLangth)/Number(this.pageLength)) + this.pageNumberArr = [] + for(let i=0;i .sidebar { - width: 10%; + padding: 20px; + width: 15%; min-width: 180px; - height: 100%; + height: auto; min-height: 80vh; display: flex; flex-direction: column; @@ -16,55 +16,65 @@ .price_option-select > .sidebar > a { margin: 6px 0; transition: 0.3s; + color: #666; } .price_option-select > .sidebar > a:hover { - color: #00b; + color: #000; } -.price_option-select > .content { - display: grid; - grid-template-columns: repeat(3, 33.3%); - grid-row-gap: 12px; - grid-column-gap: 12px; +.price_option-select > .sidebar > a.active { + color: #000; + font-weight: 700; } -.price_option-select > .content > a { - width: 100%; - display: block; - height: 300px; - position: relative; +.price_option-select > .options { + width: 85%; } -.price_option-select > .content > a:hover > div { - opacity: 1; +.price_option-select > .options > div { + width: 80%; + margin: 0 auto; } -.price_option-select > .content > a > img { - width: 100%; - height: 100%; - -o-object-fit: cover; - object-fit: cover; +.price_option-select > .options > div.container { + margin-bottom: 16px; } -.price_option-select > .content > a > div { - opacity: 0; - transition: 0.3s; + +.price_option-index { width: 100%; - height: 100%; + margin: 0 auto; + width: 100%; + margin: 0 auto; display: flex; - justify-content: center; - align-items: center; - position: absolute; - top: 0; - right: 0; - background-color: rgba(0, 0, 0, 0.7); } -.price_option-select > .content > a > div p { - color: #fff; - font-size: 17px; - font-weight: 600; +.price_option-index > .sidebar { + padding: 20px; + width: 15%; + min-width: 180px; + height: auto; + min-height: 80vh; + display: flex; + flex-direction: column; + border-right: 1px #ccc solid; } - -.price_option-index { - width: 100%; - max-width: 1200px; +.price_option-index > .sidebar > a { + margin: 6px 0; + transition: 0.3s; + color: #666; +} +.price_option-index > .sidebar > a:hover { + color: #000; +} +.price_option-index > .sidebar > a.active { + color: #000; + font-weight: 700; +} +.price_option-index > .options { + width: 85%; +} +.price_option-index > .options > div { + width: 80%; margin: 0 auto; } +.price_option-index > .options > div.container { + margin-bottom: 16px; +} .btn-secondary { background-color: #6C757D; @@ -72,4 +82,41 @@ .text-light { color: #fff; +} + +.pagination { + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 15px; +} +.pagination small { + color: #111; + font-size: 13px; +} +.pagination .links { + display: flex; + align-items: center; + justify-content: center; +} +.pagination a { + color: black; + float: left; + padding: 8px 16px; + text-decoration: none; + transition: background-color 0.3s; +} +.pagination a.active { + background-color: #1E74FD; + color: white; + border-radius: 5px; +} +.pagination a:hover:not(.active) { + background-color: #ddd; +} +.pagination a.disabled { + cursor: not-allowed; +} +.pagination a.disabled:hover:not(.active) { + background-color: transparent; }/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/wms/mkt/css/style.css.map b/wms/mkt/css/style.css.map index d1fdc7e2..d99b186f 100644 --- a/wms/mkt/css/style.css.map +++ b/wms/mkt/css/style.css.map @@ -1 +1 @@ -{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,WAAA;EACA,iBAAA;EACA,cAAA;EACA,aAAA;ACCJ;ADAI;EACI,UAAA;EACA,gBAAA;EACA,YAAA;EACA,gBAAA;EACA,aAAA;EACA,sBAAA;EACA,4BAAA;ACER;ADDQ;EACI,aAAA;EACA,gBAAA;ACGZ;ADFY;EACI,WAAA;ACIhB;ADAI;EACI,aAAA;EACA,uCAAA;EACA,kBAAA;EACA,qBAAA;ACER;ADDQ;EACI,WAAA;EACA,cAAA;EACA,aAAA;EACA,kBAAA;ACGZ;ADFY;EACI,UAAA;ACIhB;ADFY;EACI,WAAA;EACA,YAAA;EACA,oBAAA;KAAA,iBAAA;ACIhB;ADFY;EACI,UAAA;EACA,gBAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,kBAAA;EACA,MAAA;EACA,QAAA;EACA,oCAAA;ACIhB;ADHgB;EACI,WAAA;EACA,eAAA;EACA,gBAAA;ACKpB;;ADCA;EACI,WAAA;EACA,iBAAA;EACA,cAAA;ACEJ;;ADAA;EACI,yBAAA;ACGJ;;ADDA;EACI,WAAA;ACIJ","file":"style.css"} \ No newline at end of file +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,WAAA;EACA,cAAA;EACA,aAAA;ACCJ;ADAI;EACI,aAAA;EACA,UAAA;EACA,gBAAA;EACA,YAAA;EACA,gBAAA;EACA,aAAA;EACA,sBAAA;EACA,4BAAA;ACER;ADDQ;EACI,aAAA;EACA,gBAAA;EACA,WAAA;ACGZ;ADFY;EACI,WAAA;ACIhB;ADFY;EACI,WAAA;EACA,gBAAA;ACIhB;ADAI;EACI,UAAA;ACER;ADDQ;EACI,UAAA;EACA,cAAA;ACGZ;ADFY;EACI,mBAAA;ACIhB;;ADCA;EACI,WAAA;EACA,cAAA;EACA,WAAA;EACA,cAAA;EACA,aAAA;ACEJ;ADDI;EACI,aAAA;EACA,UAAA;EACA,gBAAA;EACA,YAAA;EACA,gBAAA;EACA,aAAA;EACA,sBAAA;EACA,4BAAA;ACGR;ADFQ;EACI,aAAA;EACA,gBAAA;EACA,WAAA;ACIZ;ADHY;EACI,WAAA;ACKhB;ADHY;EACI,WAAA;EACA,gBAAA;ACKhB;ADDI;EACI,UAAA;ACGR;ADFQ;EACI,UAAA;EACA,cAAA;ACIZ;ADHY;EACI,mBAAA;ACKhB;;ADAA;EACI,yBAAA;ACGJ;;ADDA;EACI,WAAA;ACIJ;;ADFA;EACI,aAAA;EACA,mBAAA;EACA,8BAAA;EACA,gBAAA;ACKJ;ADJI;EACI,WAAA;EACA,eAAA;ACMR;ADJI;EACI,aAAA;EACA,mBAAA;EACA,uBAAA;ACMR;ADJI;EACI,YAAA;EACA,WAAA;EACA,iBAAA;EACA,qBAAA;EACA,iCAAA;ACMR;ADLQ;EACI,yBAAA;EACA,YAAA;EACA,kBAAA;ACOZ;ADLQ;EAAsB,sBAAA;ACQ9B;ADPQ;EACI,mBAAA;ACSZ;ADRY;EAAsB,6BAAA;ACWlC","file":"style.css"} \ No newline at end of file diff --git a/wms/mkt/css/style.scss b/wms/mkt/css/style.scss index 4fa886c2..7123878d 100644 --- a/wms/mkt/css/style.scss +++ b/wms/mkt/css/style.scss @@ -1,12 +1,12 @@ .price_option-select{ width: 100%; - max-width: 1200px; margin: 0 auto; display: flex; >.sidebar{ - width: 10%; + padding: 20px; + width: 15%; min-width: 180px; - height: 100%; + height: auto; min-height: 80vh; display: flex; flex-direction: column; @@ -14,58 +14,102 @@ >a{ margin:6px 0; transition: .3s; + color:#666; &:hover{ - color:#00b; + color:#000; + } + &.active{ + color:#000; + font-weight: 700; } } } - >.content{ - display: grid; - grid-template-columns: repeat(3,33.3%); - grid-row-gap: 12px; - grid-column-gap: 12px; - >a{ - width: 100%; - display: block; - height: 300px; - position: relative; - &:hover > div{ - opacity: 1; - } - >img{ - width: 100%; - height: 100%; - object-fit: cover; - } - >div{ - opacity: 0; - transition: .3s; - width: 100%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; - position: absolute; - top: 0; - right:0; - background-color: rgba($color: #000, $alpha: .7); - p{ - color:#fff; - font-size: 17px; - font-weight: 600; - } + >.options{ + width: 85%; + >div{ + width: 80%; + margin:0 auto; + &.container{ + margin-bottom: 16px; } } } } .price_option-index{ width: 100%; - max-width: 1200px; margin: 0 auto; + width: 100%; + margin: 0 auto; + display: flex; + >.sidebar{ + padding: 20px; + width: 15%; + min-width: 180px; + height: auto; + min-height: 80vh; + display: flex; + flex-direction: column; + border-right:1px #ccc solid; + >a{ + margin:6px 0; + transition: .3s; + color:#666; + &:hover{ + color:#000; + } + &.active{ + color:#000; + font-weight: 700; + } + } + } + >.options{ + width: 85%; + >div{ + width: 80%; + margin:0 auto; + &.container{ + margin-bottom: 16px; + } + } + } } .btn-secondary{ background-color: #6C757D; } .text-light{ color:#fff; -} \ No newline at end of file +} +.pagination { + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 15px; + small{ + color:#111; + font-size: 13px; + } + .links{ + display: flex; + align-items: center; + justify-content: center; + } + a { + color: black; + float: left; + padding: 8px 16px; + text-decoration: none; + transition: background-color .3s; + &.active { + background-color: #1E74FD; + color: white; + border-radius: 5px; + } + &:hover:not(.active) {background-color: #ddd;} + &.disabled{ + cursor:not-allowed; + &:hover:not(.active) {background-color: transparent;} + } + } + +} diff --git a/wms/mkt/price_option-index.php b/wms/mkt/price_option-index.php index 2e7bae5d..e8334a85 100644 --- a/wms/mkt/price_option-index.php +++ b/wms/mkt/price_option-index.php @@ -15,62 +15,97 @@ $optional_arr = [1=>'標', 2=>'選'];
-

OPTION價格查詢

-
-
- - - -
- - - - - - - - - - - - - - -
名稱規格備註配置單位定價
+ + + + + + +
\ No newline at end of file diff --git a/wms/mkt/price_option-select.php b/wms/mkt/price_option-select.php index 9b18daa3..65a89a48 100644 --- a/wms/mkt/price_option-select.php +++ b/wms/mkt/price_option-select.php @@ -1,47 +1,106 @@ prepare($sql_str); +$stmt->execute(); +$options = $stmt->fetchAll(PDO::FETCH_ASSOC); +$optional_arr = [1=>'標', 2=>'選']; ?> -
+ + +
+
+ 全部顯示 A-1車廂意匠 A-2車廂內裝 A-3車廂外部 A-4控制與其他 - A-5汰改 + B-1平台梯 + C-1汰改
-
- - -