积分兑换

src/project/pidu/AppRedemptionPoints/AppRedemptionPoints.vue

@@ -0,0 +1,296 @@
+<template>
+  <div class="AppRedemptionPoints">
+    <AiTopFixed>
+      <div class="header">
+        <div class="num">
+          <p>积分余额</p>
+          <h3>562</h3>
+        </div>
+        <div class="btn">我的订单</div>
+      </div>
+      <div class="search">
+        <u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="76" font-size="28" bg-color="#fff" inactive-color="#8891A1" 
+          active-color="#1D2229 " :bar-style="barStyle" @change="changeTab" ></u-tabs>
+        <div class="type-select">
+          <div :class="currentType == index ? 'item active' : 'item'" v-for="(item, index) in typeList" :key="index" @click="typeClick(index)">
+            {{item}}
+            <span v-if="index == 1" class="down-icon">⏷</span>
+          </div>
+        </div>
+        <div class="point-select" v-if="currentType == 1">
+          <u-tabs :list="pointTypeList" :is-scroll="true" :current="currentPoint" height="80" font-size="24" bg-color="#fff" inactive-color="#666666" 
+          active-color="#4181FF" bar-width="0" :bold="false" @change="pointClick" ></u-tabs>
+        </div>
+      </div>
+    </AiTopFixed>
+    <div class="list-content">
+      <u-waterfall v-model="flowList">
+        <template v-slot:left="{leftList}">
+          <div v-for="(item, index) in leftList" :key="index" @click="toProductDetail()">
+            <div class="item">
+              <img src="https://cdn.cunwuyun.cn/dvcp/h5/watermark/8.png" alt="">
+              <div class="type type0">京东低价商品</div>
+              <div class="content">
+                <p class="text">无染(wuro)本色抽纸无染(wuro)本色抽纸无无染(wuro)本色抽纸无染(wuro)本色抽</p>
+                <div class="item-money">
+                  <h3>50积分</h3>
+                  <p>+￥2.00</p>
+                  <span>兑换后再付</span>
+                </div>
+                <div class="btn btn0">去兑换</div>
+              </div>
+            </div>
+          </div>
+        </template>
+        <template v-slot:right="{rightList}">
+          <div v-for="(item, index) in rightList" :key="index">
+            <div class="item">
+              <img src="https://cdn.cunwuyun.cn/dvcp/h5/watermark/8.png" alt="">
+              <div class="type type0">京东低价商品</div>
+              <div class="content">
+                <p class="text">无染(wuro)本色抽纸无染(wuro)本色抽纸无无染(wuro)本色抽纸无染(wuro)本色抽</p>
+                <div class="item-money">
+                  <h3>50积分</h3>
+                </div>
+                <div class="btn btn0">去兑换</div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </u-waterfall>
+
+    </div>
+    <!-- <AiEmpty v-else></AiEmpty> -->
+  </div>
+</template>
+
+<script>
+import {mapState} from "vuex";
+
+export default {
+  name: 'AppRedemptionPoints',
+  appName: '积分兑换',
+  data() {
+    return {
+      tabList: [{name: '全部'}, {name: '免费兑'}, {name: '京东低价商品'}],
+      currentTabs: 0,
+      barStyle: {
+        'width': '20px',
+        'height': '3px',
+        'border-radius': '2px',
+        'bottom': '-3px',
+        'background': '#2D7DFF'
+      },
+      typeList: ['最新上架', '积分', '我可兑换的'],
+      currentType: 1,
+      pointTypeList: [{name: '全部'}, {name: '50分以下'},  {name: '100分以下'},  {name: '200分以下'},  {name: '5000分以下'}],
+      currentPoint: 0,
+      leftList: [1,1,1,1,1,11,1,1],
+      rightList: [1,1,1,1,1,11,1,1],
+      flowList: [1,1,1,1,1,11,1,1],
+    }
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  onLoad() {
+
+  },
+  onShow() {
+    document.title = '积分兑换'
+  },
+  methods: {
+    changeTab(index) {
+      this.currentTabs = index
+      // this.getListInit()
+    },
+    typeClick(index) {
+      this.currentType = index
+      // this.getListInit()
+    },
+    pointClick(index) {
+      this.currentPoint = index
+      // this.getListInit()
+    },
+    toProductDetail() {
+      uni.navigateTo({url: './productDetails'})
+    }
+  },
+  onReachBottom() {
+    // this.current = this.current + 1
+    // this.getList()
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.AppRedemptionPoints {
+  min-height: 100%;
+  ::v-deep .AiTopFixed .content {
+   background: #f3f6f9 !important;
+   padding: 0;
+  }
+  .header {
+    display: flex;
+    justify-content: space-between;
+    padding: 32px 24px;
+    background-color: #fff;
+    margin-bottom: 24px;
+    .num {
+      p {
+        font-family: PingFangSC-Regular;
+        font-weight: 400;
+        font-size: 24px;
+        color: #999;
+        line-height: 34px;
+      }
+      h3 {
+        font-family: PingFangSC-SNaNpxibold;
+        font-weight: 600;
+        font-size: 66px;
+        color: #FF6900;
+        line-height: 92px;
+      }
+    }
+    .btn {
+      width: 168px;
+      height: 64px;
+      border: 1px solid #4181FF;
+      line-height: 62px;
+      border-radius: 44px;
+      box-sizing: border-box;
+      text-align: center;
+      font-family: PingFangSC-Medium;
+      font-weight: 500;
+      font-size: 26px;
+      color: #4181FF;
+      margin-top: 28px;
+    }
+  }
+  .search {
+    background-color: #fff;
+    .type-select {
+      display: flex; 
+      border-top: 1px solid #D8D8D8;
+      line-height: 84px;
+      .item {
+        flex: 1;
+        text-align: center;
+        font-family: PingFangSC-Regular;
+        font-size: 26px;
+        color: #8891A1;
+        .down-icon {
+          display: inline-block;
+          margin-left: 8px;
+          transition: all 0.3s ease-in-out;
+          transform: rotate(0deg);
+        }
+      }
+      .active {
+        color: #4181FF;
+        .down-icon {
+          transform: rotate(180deg);
+        }
+      }
+    }
+  }
+  .list-content {
+    padding: 24px 0 24px 24px;
+    background-color: #f3f6f9;
+    .item {
+      width: calc(100% - 24px);
+      background-color: #fff;
+      border-radius: 20px;
+      position: relative;
+      margin-bottom: 24px;
+      img {
+        width: 100%;
+        height: 340px;
+      }
+      .type {
+        padding: 8px 16px;
+        font-family: PingFangSC-Regular;
+        font-size: 20px;
+        line-height: 28px;
+        color: #FFF;
+        border-top-right-radius: 20px;
+        border-bottom-left-radius: 20px;
+        position: absolute;
+        top: 0;
+        right: 0;
+      }
+      .type0 {
+        background-color: #E64E39;
+      }
+      .type1 {
+        background-color: #FF6900;
+      }
+      .content {
+        padding: 16px 16px 24px;
+        position: relative;
+        .text {
+          font-family: PingFangSC-SNaNpxibold;
+          font-weight: 600;
+          font-size: 26px;
+          color: #222;
+          line-height: 38px;
+          text-overflow: -o-ellipsis-lastline;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          line-clamp: 2;					
+          -webkit-box-orient: vertical;
+          margin-bottom: 12px;
+        }
+        .item-money {
+          width: calc(100% - 160px);
+          h3 {
+            font-family: PingFangSC-SNaNpxibold;
+            font-weight: 600;
+            font-size: 34px;
+            color: #FF6900;
+            line-height: 48px;
+          }
+          p {
+            font-family: PingFangSC;
+            font-weight: 600;
+            font-size: 26px;
+            color: #4181FF;
+          }
+          span {
+            display: inline-block;
+            font-family: PingFangSC-Regular;
+            font-weight: 400;
+            font-size: 8px;
+            color: #4181FF;
+            line-height: 22px;
+          }
+        }
+        .btn {
+          padding: 14px 32px;
+          font-family: PingFangSC-Medium;
+          font-weight: 500;
+          font-size: 22px;
+          line-height: 28px;
+          border-radius: 44px;
+          position: absolute;
+          bottom: 24px;
+          right: 16px;
+        }
+        .btn0 {
+          background-color: #2D7DFF;
+          color: #FFF;
+        }
+        .btn1 {
+          background-color: #E2E2E2;
+          color: #666;
+        }
+      }
+    }
+    .item:nth-of-type(2n-1) {
+      margin-right: 22px;
+    }
+  }
+}
+</style>

src/project/pidu/AppRedemptionPoints/myOrderList.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="myOrderList">
+    <AiTopFixed>
+
+    </AiTopFixed>
+    
+    <!-- <AiEmpty v-else></AiEmpty> -->
+  </div>
+</template>
+
+<script>
+import {mapState} from "vuex";
+
+export default {
+  name: 'myOrderList',
+  appName: '我的订单',
+  data() {
+    return {
+      
+    }
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  onLoad() {
+
+  },
+  onShow() {
+    document.title = '我的订单'
+  },
+  methods: {
+    
+  },
+  onReachBottom() {
+    // this.current = this.current + 1
+    // this.getList()
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.myOrderList {
+  min-height: 100%;
+  ::v-deep .AiTopFixed .content {
+   background: #F2F2F2 !important;
+   padding: 24px 16px;
+  }
+
+  
+}
+</style>

src/project/pidu/AppRedemptionPoints/placeOrder.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="placeOrder">
+
+  </div>
+</template>
+
+<script>
+import {mapState} from "vuex";
+
+export default {
+  name: 'placeOrder',
+  appName: '提交订单',
+  data() {
+    return {
+      
+    }
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  onLoad() {
+
+  },
+  onShow() {
+    document.title = '提交订单'
+  },
+  methods: {
+    
+  },
+  onReachBottom() {
+    // this.current = this.current + 1
+    // this.getList()
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.placeOrder {
+
+}
+</style>

src/project/pidu/AppRedemptionPoints/productDetails.vue

@@ -0,0 +1,174 @@
+<template>
+  <div class="productDetails">
+    <img src="https://cdn.cunwuyun.cn/dvcp/h5/watermark/8.png" alt="">
+    <div class="type type0">免费兑</div>
+    <div class="product-info">
+      <p>无染(wuro)本色抽纸无染(wuro)本色抽纸无染(wuro)本色抽纸无染(wuro)本色抽纸</p>
+      <h3>50积分<span>+￥2.00<span>（兑换后再付）</span></span></h3>
+      <div>零售单价¥10.00</div>
+      <span>免费兑换商品，可到固定的兑换点进行「核销兑换」</span>
+    </div>
+    <div class="product-content">
+      <p>商品描述：</p>
+      <p>“本色”最早起源于南朝刘勰《文心雕龙》_
+        “李”蟹悬架于栗龍登花《文温襞垄总理”寿事集色一
+        做过解释，“本色”就是求真，特别较真，有时候有点犟。泉林本色对“本色”的解释是对于生活是一种健康、环保的生活观念。
+        泉林本色是公司在长期的发展过程中逐渐打造的高端产品产品主要是涉岌泉秣本色生活角箱浆纸。产品种美包括软箱面巾纸、
+        盒抽面巾纸、卷纸、空心卷纸、实心卷纸、扁卷纸、手帕纸、饕币纸、珍宝纸、擦手纸、礼品套装等，种类齐全，在各个生活
+        的细微之处全面呵护消费者的健康。
+      </p>
+    </div>
+    <div class="btn" @click="toPlaceOrder()">
+      <div class="status0">立即兑换</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {mapState} from "vuex";
+
+export default {
+  name: 'productDetails',
+  appName: '兑换商品',
+  data() {
+    return {
+      
+    }
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  onLoad() {
+
+  },
+  onShow() {
+    document.title = '兑换商品'
+  },
+  methods: {
+    toPlaceOrder() {
+      uni.navigateTo({url: './placeOrder'})
+    }
+  },
+  onReachBottom() {
+    // this.current = this.current + 1
+    // this.getList()
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.productDetails {
+  background-color: #f3f6f9;
+  position: relative;
+  img {
+    width: 100%;
+    height: 750px;
+  }
+  .type {
+    position: absolute;
+    top: 0;
+    right: 0;
+    line-height: 42px;
+    font-family: PingFangSC-SNaNpxibold;
+    font-weight: 600;
+    font-size: 30px;
+    color: #FFF;
+    padding: 16px 16px 16px 36px;
+    border-bottom-left-radius: 40px;
+  }
+  .type0 {
+    background-color: #E64E39;
+  }
+  .type1 {
+    background-color: #FF6900;
+  }
+  .product-info {
+    padding: 32px;
+    background-color: #fff;
+    margin-bottom: 24px;
+    p {
+      word-break: break-all;
+      font-family: PingFangSC-SNaNpxibold;
+      font-weight: 600;
+      font-size: 48px;
+      color: #222;
+      letter-spacing: 0;
+      line-height: 76px;
+      margin-bottom: 8px;
+    }
+    h3 {
+      font-family: PingFangSC-SNaNpxibold;
+      font-weight: 600;
+      font-size: 44px;
+      color: #FF6900;
+      margin-bottom: 8px;
+      span {
+        font-size: 44px;
+        color: #4181FF;
+        margin-left: 8px;
+        span {
+          font-weight: 400;
+          font-family: PingFangSC-Regular;
+          font-size: 32px;
+        }
+      }
+    }
+    div {
+      font-family: PingFangSC-Regular;
+      font-weight: 400;
+      font-size: 24px;
+      color: #999;
+      line-height: 34px;
+      margin-bottom: 24px;
+      text-decoration: line-through;
+    }
+    span {
+      display: inline-block;
+      padding: 12px;
+      line-height: 36px;
+      background: #F5FCF5;
+      border-radius: 16px;
+      font-family: PingFangSC-Regular;
+      font-size: 24px;
+      color: #3BBC37;
+    }
+  }
+  .product-content {
+    padding: 34px 64px 162px;
+    background-color: #fff;
+    p {
+      font-family: PingFangSC-Regular;
+      font-size: 32px;
+      color: #666;
+      line-height: 60px;
+    }
+  }
+  .btn {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    background-color: #fff;
+    padding: 20px 32px;
+    box-sizing: border-box;
+    div {
+      width: 100%;
+      height: 88px;
+      line-height: 88px;
+      text-align: center;
+      border-radius: 44px;
+      font-family: PingFangSC-Medium;
+      font-weight: 500;
+      font-size: 34px;
+    }
+    .status0 {
+      color: #FFF;
+      background: #4181FF;
+    }
+    .status1 {
+      color: #666;
+      background: #E2E2E2;
+    }
+  }
+}
+</style>

src/project/pidu/AppRedemptionPoints/successOrder.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="successOrder">
+    <AiTopFixed>
+
+    </AiTopFixed>
+    
+    <!-- <AiEmpty v-else></AiEmpty> -->
+  </div>
+</template>
+
+<script>
+import {mapState} from "vuex";
+
+export default {
+  name: 'successOrder',
+  appName: '提交订单',
+  data() {
+    return {
+      
+    }
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  onLoad() {
+
+  },
+  onShow() {
+    document.title = '提交订单'
+  },
+  methods: {
+    
+  },
+  onReachBottom() {
+    // this.current = this.current + 1
+    // this.getList()
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.successOrder {
+  min-height: 100%;
+  ::v-deep .AiTopFixed .content {
+   background: #F2F2F2 !important;
+   padding: 24px 16px;
+  }
+
+  
+}
+</style>