积分兑换

src/apps/AppIntegralExchange/AppIntegralExchange.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="AppIntegralExchange">
+    <h1>积分兑换</h1>
+    <u-button @click="toDetail">详情</u-button>
+  </div>
+</template>
+
+<script>
+export default {
+  appName: '积分兑换',
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    toDetail() {
+      uni.navigateTo({url: './commodityDetails'})
+    }
+  },
+  onShow() {
+
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.AppIntegralExchange {
+
+}
+</style>

src/apps/AppIntegralExchange/commodityDetails.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="commodityDetails">
+    <div class="img_info">
+      <img src="https://cdn.cunwuyun.cn/dvcp/h5/no-admin.png" alt="">
+    </div>
+    <div class="commodity_title">
+      <div class="title">天薇抽纸天然无香纸巾天薇抽纸天然无香纸巾天薇抽纸天然无香纸巾可湿水…</div>
+      <div class="commodity_integral">
+        <p class="integral"><span>10</span><span>分</span></p>
+        <h5 class="repertory">库存：100</h5>
+      </div>
+    </div>
+    <div class="exchange">
+      <div class="owner_integral">积分余额:438</div>
+      <!-- 积分不足、缺货 -->
+      <div class="exchange_btn">立即兑换</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'commodityDetails',
+  data() {
+    return {
+
+    }
+  },
+  onShow() {
+    document.title = '商品详情'
+  },
+  methods: {
+    
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.commodityDetails {
+  background: #FFF;
+  .img_info {
+    width: 100%;
+    height: 750px;
+    img {
+      width: 100%;
+    }
+  }
+  .commodity_title {
+    padding: 32px;
+    box-sizing: border-box;
+    .title {
+      font-size: 32px;
+      color: #333333;
+      font-weight: 600;
+    }
+  }
+  .commodity_integral {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 32px;
+
+    .integral {
+      color: #FF6900;
+      font-size: 500;
+      span:first-child {
+        font-size: 34px;
+      }
+      span:last-child {
+        font-size: 26px;
+      }
+    }
+    .repertory {
+      color: #999999;
+      font-size: 26px;
+    }
+  }
+  .exchange {
+    width: 100vw;
+    height: 112px;
+    padding: 0 32px;
+    box-sizing: border-box;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: #FFF;
+
+    .owner_integral {
+      color: #CA906A;
+    }
+
+    .exchange_btn {
+      width: 224px;
+      text-align: center;
+      height: 80px;
+      line-height: 80px;
+      // background: #DDDDDD;
+      border-radius: 52px;
+      background-image: linear-gradient(90deg, #FFA044 0%, #FF8436 100%);
+      color: #FFF;
+    }
+  }
+}
+</style>