新增兑换记录页面

zhiyangdu
1 parent b91fc160
Showing 3 changed files with 205 additions and 215 deletions
src/pages/pointsExchangeRecords/pointsExchangeRecords.less
src/pages/pointsExchangeRecords/pointsExchangeRecords.vue
src/router/index.js
-.ExchangeRecords_box{
-    width: 100%;
-    min-height: 100vh;
-    background: rgb(241,46,50,1) url("../../../static/img/pointsMall/ExchangeRecords.jpg") no-repeat
-    center bottom;
-    background-size: 100%;
-    padding: 1px 0 0 0;
-    .top_back{
-        height: 60px;
+.records_back{
+  background: #F6F6F6;
+  .com_box{
+    margin: 30px 30px 0 30px;
+    background: #FFFFFF;
+    border-radius: 24px;
+    .item_box{
+      padding: 30px;
+      border-bottom: solid 2px #EAEAEA;
+      display: flex;
+      padding-bottom: 28px;
+      img{
         display: flex;
-        justify-content: flex-start;
-        padding: 0 0 40px 40px;
-        img{
-            width: 60px;
-            height: 60px;
+        width: 190px;
+        height: 190px;
+      }
+      .right{
+        margin-left: 32px;
+        .name{
+          height: 80px;
+          font-size: 28px;
+          font-weight: 400;
+          color: #333333;
+          line-height: 40px;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          /*! autoprefixer: off */
+          -webkit-box-orient: vertical;
+          /*! autoprefixer: on */
+          text-overflow: ellipsis;
+          overflow: hidden;
         }
-    }
-    .drawRecord_title{
-        width: 588px;
-        height: 390px;
-        //background: url("../../../static/img/pointsMall/title.png") no-repeat center top;
-        background-size: 100%;
-        margin: 2px 81px 64px  81px;
-    }
-    .title_t{
-        height:53px;
-        font-size:34px;
-        font-weight:400;
-        color:rgba(249,249,249,1);
-        line-height:53px;
-        text-align: center;
-        margin: 49px 0;
-    }
-    .content_box{
-        width:670px;
-        height:669px;
-        background:rgba(241,46,50,1);
-        border-radius:16px;
-        margin: auto;
-        padding-top: 1px;
-        .tip{
-            text-align: center;
+        .address_name{
+          margin-top: 10px;
+          height: 33px;
+          font-size: 24px;
+          font-weight: 400;
+          color: #9B9B9B;
+          line-height: 33px;
         }
-        ul{
-            height: 540px;
-            overflow-y: auto;
-        }
-        div{
-            //display: flex;
-            //justify-content: space-between;
-            color: #fff;
-        }
-        .content_top{
-            width:580px;
-            height:60px;
-            line-height: 60px;
-            background:rgba(232,28,32,1);
-            border-radius:12px;
-            margin: 20px auto;
-            font-size: 30px;
-            font-weight: 600;
-            padding: 0 27px;
-            display: flex;
-            justify-content: space-between;
-            div{
-                color:rgba(255,202,40,1);
-            }
-        }
-        .item{
-            padding: 20px 34px 20px 20px;
-            font-size:28px;
-            font-weight:400;
-            color:rgba(255,255,255,1);
-            line-height:40px;
-            position: relative;
-            display: flex;
-            align-items: center;
-            .adderss{
-                position: absolute;
-                right:72px;
-                top:48px;
-                width:100px;
-                height:34px;
-                line-height: 34px;
-                border-radius:18px;
-                border:1px solid rgba(244,195,47,1);
-                color: #F4C32F;
-                font-size: 22px;
-                display: flex;
-                justify-content: center !important;
-            }
-            div:nth-child(1){
-                float: left;
-                display: flex;
-                justify-content: flex-start;
-                flex: 1;
-                text-overflow: ellipsis;
-                overflow: hidden;
-                display: -webkit-box;
-                -webkit-box-orient:vertical;
-                -webkit-line-clamp:2;
-                -ms-word-wrap:break-word;
-                word-wrap:break-word;
-            }
-            div:nth-child(2){
-                float: left;
-                width: 280px;
-                display: flex;
-                justify-content: flex-start;
-            }
-            div:nth-child(3){
-                width: 80px;
-                text-align: center;
-            }
+        .exchange_time{
+          margin-top: 34px;
+          height: 33px;
+          font-size: 24px;
+          font-weight: 400;
+          color: #9B9B9B;
+          line-height: 33px;
         }
+      }
     }
-    .btn{
-        width:520px;
-        height:88px;
-        background:linear-gradient(180deg,rgba(241,205,59,1) 0%,rgba(254,155,2,1) 100%);
-        border-radius:44px;
-        border:1px solid rgba(151,151,151,1);
-        margin: 64px auto;
+  }
+  .is_more{
+    text-align: center;
+    padding-bottom: 20px;
+    color: #6D7278;
+    font-size: 32px;
+    font-weight: 500;
+    height: 100px;
+    line-height: 100px;
+  }
+  // 返回按钮
+  .title_box{
+    width: 100%;
+    position: fixed;
+    left: 0;
+    font-size: 36px;
+    font-weight: 400;
+    color: #000000;
+    height: 93px;
+    line-height: 93px;
+    top: 0;
+    text-align: center;
+    background-color: #fff;
+    .title{
+      display: flex;
+      position: relative;
+      .goback{
+        display: block;
+        width: 38px;
+        height: 38px;
+        position: absolute;
+        left: 20px;
+        top: 27px;
+      }
+      .text{
+        flex: 1;
         text-align: center;
-        line-height: 88px;
-        font-size: 34px;
-        color: #0A0741;
+      }  
     }
-}
+  }
+  // 占位
+  .title_box_lh{
+    height: 93px;
+  }
+}
 \ No newline at end of file
 <template>
-    <div>
-        <div class="ExchangeRecords_box">
-            <!--<div v-if="this.isCNLive.value&&this.$parent.isBackIcon" class="top_back" :style="'padding-top: ' + (($parent.top.value)+8) + 'px'">-->
-                <!--<img v-if="this.isAndroid.value" @click="$parent.back()" src="static/img/go_back.png" alt="">-->
-                <!--<img v-else="this.isiPhone.value" @click="goLucky()" src="static/img/go_back.png" alt="">-->
-            <!--</div>-->
-            <div class="top_back" :style="'margin-top: ' + (($parent.top.value)+8) + 'px'">
-                <img @click="goointsMall()" src="static/img/pointsMall/go_back.png" alt="">
-            </div>
-            <div class="drawRecord_title" :style="{backgroundImage: 'url('+ titleImg +')',marginTop:+($parent.top.value)+'px'}"></div>
-            <div class="title_t">兑换记录</div>
-            <div class="content_box">
-                <div class="content_top">
-                    <div>兑换名称</div>
-                    <div>兑换时间</div>
-                    <div>数量</div>
-                </div>
-                <div class="tip" v-if="list&&list.length==0">
-                    暂无兑换记录
-                </div>
-                <ul
-                    v-if="list"
-                    v-infinite-scroll="loadMore"
-                    infinite-scroll-disabled="loading"
-                    :infinite-scroll-distance="list.length">
-                    <li v-for="(item,index) in list" :key="index">
-                        <div class="item">
-                            <div v-if="item&&item.title" class="item.title">
-                                {{item.title}}
-                            </div>
-                            <div v-if="item&&item.create_time">{{item.create_time*1000 | datetime('yyyy-MM-dd hh:mm:ss')}}</div>
-                            <div>{{item.num}}个</div>
-                        </div>
-                    </li>
-                </ul>
-            </div>
-        </div>
+<div class="records_back">
+    <!-- 占位 -->
+    <div v-show="this.isCNLive.value" class="title_box_lh" :style="'padding-top: ' + (($parent.top.value)+8) + 'px'">
  
     </div>
+    <!--返回按钮-->
+    <div class="title_box" :style="'padding-top: ' + (($parent.top.value)+8) + 'px'" >
+        <div class="title">      <!--返回按钮-->
+          <img v-if="this.isCNLive.value" @click="goback"
+              class="goback" src="static/img/icon_back.png" />
+          <div class="text">兑换记录</div>
+        </div>
+    </div>
+    <div  class="com_box"
+          v-infinite-scroll="loadMore"
+          infinite-scroll-disabled="loading"
+          :infinite-scroll-distance="list.length">
+      <div class="item_box" v-for="(item, index) in list" :key="index">
+        <img v-lazy="item.simg" src="item" alt=""/>
+        <div class="right">
+          <div class="name">
+            {{item.title}}
+          </div>
+          <div class="address_name">
+            收货人 {{item.address_name}}
+          </div>
+          <div class="exchange_time">
+            兑换时间 {{item.create_time*1000 | datetime('yyyy-MM-dd hh:mm:ss')}}
+          </div>
+        </div>
+      </div>
+      <div v-if="isMore==0" class="is_more">
+        没有更多了
+      </div>
+    </div>
+</div>
 </template>
  
 <script>
 // 引入组件
-import { Toast, Indicator } from 'mint-ui';
+import { Toast, Indicator } from "mint-ui";
 export default {
-  name: 'ExchangeRecords',
   data () {
     return {
-      list: [],
-      page: 1,
-      titleImg: null // 标题图片
+      list: [], // 中奖记录列表
+      page: 0,
+      isMore: 1, // 0没有更多1有更多
+      addressInfo: null // 暂存已选商品发货地址信息
     }
   },
-  created () {
-    document.title = "兑奖记录"
-    this.getmyLuckIntegralOrder(this.page)
+  //部件
+  components: {
   },
-  mounted () {
-    let activeId = this.$route.query.activeId
-    this.getShareData(activeId)
+  //静态
+  props: [
+  ],
+  //对象内部的属性监听，也叫深度监听
+  watch: {
+  },
+  //属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
+  computed: {
   },
+  //方法表示一个具体的操作，主要书写业务逻辑；
   methods: {
-    // 跳转到积分商城首页
-    goointsMall () {
-      this.$router.push({
-        path: '/pointsMall',
-        query: {
-          uid: this.getStore("uid") || 0,
-        }
-      })
+    // 下拉刷新
+    loadMore () {
+      this.loading = true;
+      this.page++;
+      this.getmyLuckDraw(this.page);
     },
     // 抽奖记录
     /**
@@ -76,41 +75,47 @@ export default {
      * @param {string} id [活动id]
      * * @param {string} uid [用户id]
      */
-    getmyLuckIntegralOrder (page) {
-
-      // 加载中提示
-      Indicator.open('加载中...');
-
-      // 请求接口
-      this.http("/Api/" + (this.getApiVersion().LuckDraw) + "/myLuckIntegralOrder", {
-        uid: this.getStore("uid"),
-        page: page
-      }, this.getmyLuckIntegralOrderCallback, {
-          method: "POST"
-        });
+    getmyLuckDraw (page) {
+      if (this.isMore == 1) {
+        // 加载中提示
+        Indicator.open("加载中...");
+        // 请求接口
+        this.http(
+          "/Api/" + this.getApiVersion().LuckDraw + "/myLuckIntegralOrder",
+          {
+            uid: this.getStore("uid"),
+            page: page,
+            type: "1"
+          },
+          this.myLuckDrawCallback,
+          {
+            method: "POST"
+          }
+        );
+      }
     },
-
     /**
      * 获取抽奖记录信息回调
      * @param {object} res [服务器返回数据]
      * @param {object} ext [扩展参数]
      */
-    getmyLuckIntegralOrderCallback (res, ext) {
+    myLuckDrawCallback (res, ext) {
       this.loading = false;
       // 加载完成
       Indicator.close();
  
       // 返回处理
       if (res.code == 200) {
-
         // 解构数据
         let { data: datas } = res;
-        /* 获取活动详情页数据 开始 */
-        for (let i = 1; i <= datas.list.length; i++) {
-          this.list.push(datas.list[i - 1]);
+        if (datas.list.length == 0) {
+          this.isMore = 0;
+        } else {
+          /* 获取活动详情页数据 开始 */
+          for (let i = 1; i <= datas.list.length; i++) {
+            this.list.push(datas.list[i - 1]);
+          }
         }
-        // 抽奖记录标题
-        this.titleImg = datas.luck_title_img
         /* 获取抽奖记录 结束 */
       } else if (res.code == 400) {
         // 获取抽奖记录失败
@@ -120,23 +125,29 @@ export default {
         Toast("获取抽奖记录失败");
       }
     },
-    // 下拉刷新
-    loadMore () {
-      this.loading = true;
-      this.page++
-      this.getmyLuckIntegralOrder(this.page)
-    },
-    // 获取并设置分享参数
-    getShareData (activeId) {
-      this.$parent.getShareData({
-        type: 14,
-        id: activeId,
-        url: ""
-      });
+    // 返回
+    goback () {
+      if (this.isAndroid.value) {
+        this.$parent.back();
+      } else {
+        this.$router.push({
+          path: '/pointsMall',
+          query: {
+            uid: this.getStore("uid") || 0,
+          }
+        })
+      }
     }
+  },
+  //请求数据
+  created () {
+  },
+  mounted () {
   }
 }
 </script>
-<style rel="stylesheet/less" lang="less">
-@import './pointsExchangeRecords';
+
+<style rel="stylesheet/less" scoped lang="less">
+@import 'pointsExchangeRecords';
 </style>
+
@@ -225,6 +225,8 @@ const router = new Router({
                         requireAuth: false
                     }
                 },
+                /* 优选和商城页面改版升级页面 结束 */
+                /* 积分商城开始 */
                 {
                     // 积分商城首页
                     path: "/pointsMall",
@@ -235,9 +237,20 @@ const router = new Router({
                     meta: {
                         requireAuth: false
                     }
+                },
+                {
+                    // 积分商城兑换记录
+                    path: "/pointsExchangeRecords",
+                    name: "pointsExchangeRecords",
+                    component: resolve => {
+                        require([
+                            "@/pages/pointsExchangeRecords/pointsExchangeRecords"
+                        ], resolve);
+                    },
+                    meta: {
+                        requireAuth: false
+                    }
                 }
-
-                /* 优选和商城页面改版升级页面 结束 */
             ]
         },
         {