积分兑换

src/project/pidu/AppPointsChange/AppPointsChange.vue

@@ -4,7 +4,7 @@
       <div class="header">
         <div class="header-left">
           <span>★</span>
-          积分余额：428
+          积分余额：{{userIntegral}}
         </div>
         <div class="header-right">
           <div @click="toMyOrder">我的订单</div>
@@ -22,7 +22,7 @@
       <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" :class="item.status != 0 ? 'lack-item' : ''" v-for="(item, index) in list" :key="index" @click="toDetail()">
+      <div class="item" :class="item.status != 0 ? 'lack-item' : ''" v-for="(item, index) in list" :key="index" @click="toDetail(item)">
         <div class="left">
           <img :src="item.imageUrl" alt="">
         </div>
@@ -53,8 +53,8 @@ export default {
         status: '',
         newStatus: '',
         priceStatus: '1'
-      }
+      },
-
+      userIntegral: ''
     }
   },
   computed: {
@@ -62,14 +62,22 @@ export default {
   },
   onLoad() {
     this.getList()
-    uni.$on('reload', () => {
+    this.getIntegral()
-      this.getListInit()
+    uni.$on('reloadIntegral', () => {
+      this.getIntegral()
     })
   },
   onShow() {
     document.title = '积分兑换'
   },
   methods: {
+    getIntegral() {
+      this.$http.post('/app/appintegraluser/appGirdIntegral?current=1&size=1').then((res) => {
+        if (res.code == 0) {
+          this.userIntegral = res.data.nowIntegral
+        }
+      })
+    },
     getList() {
       this.$http.post('/app/appintegralmerchandise/listByGirdMember', null, {
         params: {
@@ -93,8 +101,8 @@ export default {
     typeClick(index) {
       this.typeIndex = index
     },
-    toDetail() {
+    toDetail(item) {
-      uni.navigateTo({url:'./detail'})
+      uni.navigateTo({url:`./detail?id=${item.id}&userIntegral=${this.userIntegral}`})
     },
     toMyOrder() {
       uni.navigateTo({url:`./myOrder`})

src/project/pidu/AppPointsChange/detail.vue

@@ -3,18 +3,16 @@
     <div class="goods-img">
       <u-swiper :list="list" mode="none" img-mode="aspectFit" height="750" bg-color="#fff"></u-swiper>
     </div>
-    <div class="goods-title">
+    <div class="goods-title">{{goodsInfo.merchandiseName}}</div>
-      天薇抽纸天然无香纸巾天薇抽纸天然无香纸巾天薇抽纸天然无香纸巾可湿水…
-    </div>
     <div class="goods-point">
-      <h3>10<span>积分</span></h3>
+      <h3>{{goodsInfo.merchandiseIntegral}}<span>积分</span></h3>
-      <div>库存100</div>
+      <div>库存{{goodsInfo.merchandiseNumber}}</div>
     </div>
     <div class="goods-btn status-lack">
-      <div class="text">积分余额:438</div>
+      <div class="text">积分余额:{{userIntegral}}</div>
-      <div class="btn" @click="toOrder()">立即兑换</div>
+      <div class="btn" @click="toOrder()" v-if="goodsInfo.status == 0 && userIntegral >= goodsInfo.merchandiseIntegral">立即兑换</div>
-      <!-- <div class="btn lack-btn">积分不足</div> -->
+      <div class="btn lack-btn" v-if="goodsInfo.status == 0 && userIntegral < goodsInfo.merchandiseIntegral">积分不足</div>
-      <!-- <div class="btn lack-btn">缺货</div> -->
+      <div class="btn lack-btn" v-if="goodsInfo.status != 0">缺货</div>
     </div>
   </div>
 </template>
@@ -26,23 +24,35 @@ export default {
   name: 'detail',
   data() {
     return {
-      list: [
+      list: [],
-        { image: 'https://cdn.uviewui.com/uview/swiper/1.jpg'},
+      userIntegral: '',
-        { image: 'https://cdn.uviewui.com/uview/swiper/2.jpg'},
+      id: '',
-        { image: 'https://cdn.uviewui.com/uview/swiper/3.jpg'}
+      goodsInfo: {}
-      ],
     }
   },
   computed: {
     ...mapState(['user']),
   },
+  onLoad(option) {
+    this.userIntegral = option.userIntegral
+    this.id = option.id
+    this.getDetail()
+  },
   onShow() {
     document.title = '商品详情'
   },
   methods: {
     toOrder() {
-      uni.navigateTo({url:'./order'})
+      uni.navigateTo({url:`./order?userIntegral=${this.userIntegral}&id=${this.id}`})
-    }
+    },
+    getDetail() {
+      this.$http.post(`/app/appintegralmerchandise/queryDetailById?id=${this.id}`).then((res) => {
+        if (res.code == 0) {
+          this.goodsInfo = res.data
+          this.list = [{image: res.data.imageUrl}]
+        }
+      })
+    },
   },
 }
 </script>

src/project/pidu/AppPointsChange/order.vue

@@ -2,14 +2,14 @@
   <div class="order">
     <div class="goods">
       <div class="left">
-        <img src="./components/imgs/check-icon.png" alt="">
+        <img :src="goodsInfo.imageUrl" alt="">
       </div>
       <div class="right">
-        <p>天薇抽纸天然无香纸巾天薇抽纸天然无香纸巾天薇抽纸可湿水面巾纸1天薇抽纸天</p>
+        <p>{{goodsInfo.merchandiseName}}</p>
         <div class="flex">
-          <h3>10<span>积分</span></h3>
+          <h3>{{goodsInfo.merchandiseIntegral}}<span>积分</span></h3>
           <div class="num">
-            <u-number-box v-model="value" @change="valChange" :min="1" :max="200"></u-number-box>
+            <u-number-box v-model="number" @change="valChange" :min="1" :max="max"></u-number-box>
           </div>
         </div>
       </div>
@@ -22,11 +22,11 @@
     </div>
     <div class="flex-item border">
       <div class="label">积分余额</div>
-      <div class="value color-333">484</div>
+      <div class="value color-333">{{userIntegral}}</div>
     </div>
     <div class="flex-item">
       <div class="label">支付积分</div>
-      <div class="value color-ff6900">-10</div>
+      <div class="value color-ff6900">-{{number*goodsInfo.merchandiseIntegral}}</div>
     </div>
     <div class="footer">
       <div>提交订单</div>
@@ -41,20 +41,38 @@ export default {
   name: 'order',
   data() {
     return {
-      value: 1,
+      number: 1,
-      remark: ''
+      remark: '',
+      userIntegral: '',
+      id: '',
+      goodsInfo: {},
+      max: 1
     }
   },
   computed: {
     ...mapState(['user']),
   },
+  onLoad(option) {
+    this.userIntegral = option.userIntegral
+    this.id = option.id
+    this.getDetail()
+  },
   onShow() {
     document.title = '提交订单'
   },
   methods: {
     valChange(e) {
-      console.log('当前值为: ' + e.value)
+      this.number = e.value
-    }
+
+    },
+    getDetail() {
+      this.$http.post(`/app/appintegralmerchandise/queryDetailById?id=${this.id}`).then((res) => {
+        if (res.code == 0) {
+          this.goodsInfo = res.data
+          this.max = parseInt(this.userIntegral/this.goodsInfo.merchandiseIntegral)
+        }
+      })
+    },
   },
 }
 </script>