增加基础功能

js/src/admin/components/StoreListItem.tsx

@@ -12,6 +12,9 @@ export default class StoreListItem extends Component {
   }
 
   view() {
+    const moneyName = app.forum.attribute('antoinefr-money.moneyname') || '[money]';
+    const price = moneyName.replace('[money]', this.storeData.price);
+
     return (
       <div id={this.storeData.id} className="storeItemContainer">
         <div className="leftAligned">
@@ -24,7 +27,7 @@ export default class StoreListItem extends Component {
           </div>
           <div>
             {app.translator.trans('mattoid-store.lib.item-status')}: <span className={this.storeData.status === 0 ? 'red': 'green'}>{ app.translator.trans('mattoid-store.lib.item-status-' + this.storeData.status) }</span> |&nbsp;
-            {app.translator.trans('mattoid-store.lib.item-price')}: {this.storeData.price} |&nbsp;
+            {app.translator.trans('mattoid-store.lib.item-price')}: {price} |&nbsp;
             {app.translator.trans('mattoid-store.lib.item-stock')}: {this.storeData.stock} |&nbsp;
             {app.translator.trans('mattoid-store.lib.item-discount')}: {this.storeData.discount || '无'} |&nbsp;
             {app.translator.trans('mattoid-store.lib.item-discount_limit')}: {this.storeData.discountLimit || 0}&nbsp;{this.storeData.discountLimitUnit}

js/src/forum/components/StoreItem.tsx

@@ -0,0 +1,38 @@
+import app from 'flarum/forum/app';
+import Component from "flarum/Component";
+
+export default class StoreItem extends Component {
+  private storeData: object = {}
+
+  oninit(vnode) {
+    super.oninit(vnode);
+
+    this.storeData = this.attrs.item.attributes
+    this.storeData.id = this.attrs.item.id
+  }
+
+  view() {
+    const moneyName = app.forum.attribute('antoinefr-money.moneyname') || '[money]';
+    const price = moneyName.replace('[money]', this.storeData.price);
+
+    return (
+      <div id={this.storeData.id}>
+        <div className="itemTitle">
+          {this.storeData.title}
+        </div>
+        <div className="price spacing">
+          {price}
+        </div>
+        <div className="spacing">
+          {app.translator.trans('mattoid-store.lib.item-stock')}: {this.storeData.stock} | {app.translator.trans('mattoid-store.lib.item-type-' + this.storeData.type)}
+        </div>
+        <div className="spacing">
+          {this.storeData.desc}
+        </div>
+        <div className="spacing center">
+          <img className="icon-size" src={this.storeData.icon}/>
+        </div>
+      </div>
+    )
+  }
+}

js/src/forum/components/StorePage.tsx

@@ -2,16 +2,28 @@ import IndexPage from "flarum/forum/components/IndexPage";
 import { IPageAttrs } from 'flarum/common/components/Page';
 import listItems from 'flarum/common/helpers/listItems';
 import Mithril from 'mithril';
+import Button from "flarum/common/components/Button";
+import Stream from "flarum/common/utils/Stream";
+import StoreItem from "./StoreItem";
+import StoreListItem from "../../admin/components/StoreListItem";
 
 export interface IIndexPageAttrs extends IPageAttrs {}
 
 export default class StorePage<CustomAttrs extends IIndexPageAttrs = IIndexPageAttrs> extends IndexPage {
 
+  private storeList: any = []
+  private moreResults: boolean = false
+
   oncreate(vnode: Mithril.VnodeDOM<CustomAttrs, this>) {
     super.oncreate(vnode);
 
     app.setTitle(app.forum.attribute("storeName") || app.translator.trans('mattoid-store.forum.tital'));
     app.setTitleCount(0);
+
+    this.status = Stream('1');
+    this.type = Stream('-1');
+
+    this.loadResults();
   }
 
   view() {
@@ -25,12 +37,73 @@ export default class StorePage<CustomAttrs extends IIndexPageAttrs = IIndexPageA
             <div className="StorePage-results sideNavOffset">
               <h2 class="BadgeOverviewTitle">{app.forum.attribute("storeName") || app.translator.trans('mattoid-store.forum.tital')}</h2>
               <div className="Store-Body">
-                111111111111111
+                {
+                  this.storeList.map((item) => {
+                    return (
+                      <div className="storeItemContainer">
+                        {StoreItem.component({ item })}
+                      </div>
+                    );
+                  })
+                }
               </div>
+
+              {!this.loading && this.storeList.length === 0 && (
+                <div>
+                  <div style="font-size:1.4em;color: var(--muted-more-color);text-align: center;line-height: 100px;">
+                    {app.translator.trans('mattoid-store.lib.list-empty')}
+                  </div>
+                </div>
+              )}
+
+              {!this.loading && this.hasMoreResults() && (
+                <div style="text-align:center;padding:20px">
+                  <Button className={'Button Button--primary'} disabled={this.loading} loading={this.loading} onclick={() => this.loadMore()}>
+                    {app.translator.trans('mattoid-store.lib.list-load-more')}
+                  </Button>
+                </div>
+              )}
+
             </div>
           </div>
         </div>
       </div>
     )
   }
+
+  hasMoreResults() {
+    return this.moreResults;
+  }
+
+  loadMore() {
+    this.loading = true;
+    this.loadResults(this.storeList.length);
+  }
+
+  parseResults(results) {
+    this.moreResults = !!results.payload.links && !!results.payload.links.next;
+    [].push.apply(this.storeList, results.payload.data);
+    this.loading = false;
+    m.redraw();
+
+    return results;
+  }
+
+  loadResults(offset = 0) {
+    const filters = {
+      type: this.type(),
+      status: this.status()
+    };
+
+    return app.store
+      .find("/store/list", {
+        filter:filters,
+        page: {
+          offset,
+        },
+      })
+      .catch(() => {})
+      .then(this.parseResults.bind(this));
+  }
+
 }

less/forum.less

@@ -0,0 +1,43 @@
+
+.storeItemContainer {
+  position: relative;
+  border: 1px solid #696969;
+  padding: 10px;
+  cursor: pointer;
+  width: 270px;
+  height: 285px;
+  border-radius: var(--border-radius);
+  color: var(--primary-color);
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  margin: 5px;
+  background: var(--body-bg);
+  display: inline-block;
+}
+
+.itemTitle {
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.price {
+  color: var(--alert-success-color);
+  font-size: 18px;
+}
+
+.icon-size {
+  width: 80px;
+  height: 80px;
+}
+
+.center {
+  text-align: center;
+}
+
+.spacing {
+  margin-top: 10px;
+}

src/Controller/ListCommodityController.php

@@ -47,7 +47,7 @@ protected function data(ServerRequestInterface $request, Document $document) {
             $list->pop();
         }
         $document->addPaginationLinks(
-            $this->url->to('api')->route('decorationStore.get'),
+            $this->url->to('api')->route('store.commodity.list'),
             $params,
             $offset,
             $limit,

src/Controller/ListStoreController.php

@@ -54,7 +54,7 @@ protected function data(ServerRequestInterface $request, Document $document) {
             $list->pop();
         }
         $document->addPaginationLinks(
-            $this->url->to('api')->route('decorationStore.get'),
+            $this->url->to('api')->route('store.list'),
             $params,
             $offset,
             $limit,