积分兑换

src/project/pidu/AppPointsChange/AppPointsChange.vue

@@ -13,35 +13,24 @@
     </AiTopFixed>
     <div class="list-content">
       <div class="select">
-        <div class="active">最新上架</div>
-        <div class="price active">价格<span class="top active">⏶</span><span class="bottom">⏷</span></div>
-        <div class="sure active">可兑换的
-          <img src="./components/imgs/check-icon.png" alt="">
+        <div :class="search.newStatus == 1 ? 'active' : ''" @click="clickNew()">最新上架</div>
+        <div class="price active" @click="clickPrice()">价格<span class="top" :class="search.priceStatus == 1 ? 'active' : ''">⏶</span><span class="bottom" :class="search.priceStatus != 1 ? 'active' : ''">⏷</span></div>
+        <div class="sure" :class="search.status == 2 ? 'active' : ''" @click="clickStatus()">可兑换的
+          <img src="./components/imgs/check-icon.png" alt="" v-if="search.status == 2">
         </div>
       </div>
       <div class="type">
         <div class="type-item" :class="index == typeIndex ? 'active' : ''" v-for="(item, index) in typeList" :key="index" @click="typeClick(index)">{{item}}</div>
       </div>
-      <div class="item" @click="toDetail()">
+      <div class="item" :class="item.status != 0 ? 'lack-item' : ''" v-for="(item, index) in list" :key="index" @click="toDetail()">
         <div class="left">
-          <img src="./components/imgs/check-icon.png" alt="">
+          <img :src="item.imageUrl" alt="">
         </div>
         <div class="right">
-          <p>天薇抽纸天然无香纸巾天薇抽纸天然无香纸巾天薇抽纸天然无香纸巾可湿水天薇抽纸天然无香纸巾可湿水</p>
-          <h3>10<span>积分</span></h3>
-
+          <p>{{item.merchandiseName}}</p>
+          <h3>{{item.merchandiseIntegral}}<span>积分</span></h3>
         </div>
-      </div>
-      <div class="item lack-item">
-        <div class="left">
-          <img src="./components/imgs/check-icon.png" alt="">
-        </div>
-        <div class="right">
-          <p>天薇抽纸天然无香纸巾天薇抽纸天然无香纸巾天薇抽纸天然无香纸巾可湿水天薇抽纸天然无香纸巾可湿水</p>
-          <h3>10<span>积分</span></h3>
-
-        </div>
-        <img src="./components/imgs/lack-icon.png" alt="" class="status" />
+        <img src="./components/imgs/lack-icon.png" alt="" class="status" v-if="item.status != 0"/>
       </div>
     </div>
     <!-- <AiEmpty v-else></AiEmpty> -->
@@ -58,29 +47,36 @@ export default {
     return {
       current: 1,
       list: [],
-      typeList: ['全部', '100分以下', '500分以下', '1000分以下', '5000分以下', '10000分以下'],
-      typeIndex: 0
+      typeList: ['全部', '100分以下', '500分以下', '1000分以下', '5000分以下'],
+      typeIndex: 0,
+      search: {
+        status: '',
+        newStatus: '',
+        priceStatus: '1'
+      }
+
     }
   },
   computed: {
     ...mapState(['user']),
   },
   onLoad() {
-    // this.getList()
-    // uni.$on('reload', () => {
-    //   this.getListInit()
-    // })
+    this.getList()
+    uni.$on('reload', () => {
+      this.getListInit()
+    })
   },
   onShow() {
     document.title = '积分兑换'
   },
   methods: {
     getList() {
-      this.$http.post('/app/apppartyintegralinfo/list', null, {
+      this.$http.post('/app/appintegralmerchandise/listByGirdMember', null, {
         params: {
+          ...this.search,
           size: 20,
           current: this.current,
-          partyName: this.partyName
+          queryIntegralType: this.typeIndex
         },
       })
       .then((res) => {
@@ -102,7 +98,19 @@ export default {
     },
     toMyOrder() {
       uni.navigateTo({url:`./myOrder`})
-    }
+    },
+    clickStatus() {
+      this.search.status = this.search.status == 2 ? '' : 2
+      this.getListInit()
+    },
+    clickNew() {
+      this.search.newStatus = this.search.newStatus == 1 ? '' : 1
+      this.getListInit()
+    },
+    clickPrice() {
+      this.search.priceStatus = this.search.priceStatus == 1 ? '' : 1
+      this.getListInit()
+    },
   },
   onReachBottom() {
     this.current = this.current + 1