新增抽奖记录页

zhiyangdu
1 parent 203588fd
Showing 4 changed files with 332 additions and 4 deletions
src/components/goodsItem_7/goodsItem_7.less
src/pages/ExchangeRecords/ExchangeRecords.less
src/pages/ExchangeRecords/ExchangeRecords.vue
src/pages/pointsMall/pointsMall.vue
@@ -29,6 +29,7 @@
       .goods_active{
         width: 100%;
         height: 100%;
+        border-radius: 26px;
         background: rgba(0, 0, 0, 0.5);
         display: flex;
         align-items: center;
+.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;
+        display: flex;
+        justify-content: flex-start;
+        padding: 0 0 40px 40px;
+        img{
+            width: 60px;
+            height: 60px;
+        }
+    }
+    .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;
+        }
+        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;
+            }
+        }
+    }
+    .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;
+        text-align: center;
+        line-height: 88px;
+        font-size: 34px;
+        color: #0A0741;
+    }
+}
+<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>
+</template>
+
+<script>
+    // 引入组件
+    import { Toast, Indicator } from 'mint-ui';
+    export default {
+        name: 'ExchangeRecords',
+        data () {
+            return {
+                list:[],
+                page:1,
+                titleImg:null // 标题图片
+            }
+        },
+        created(){
+            document.title="兑奖记录"
+            this.getmyLuckIntegralOrder(this.page)
+        },
+        mounted(){
+            let activeId = this.$route.query.activeId
+            this.getShareData(activeId)
+        },
+        methods: {
+            // 跳转到积分商城首页
+            goointsMall(){
+                this.$router.push({
+                    path:'/pointsMall',
+                    query:{
+                        uid: this.getStore("uid") || 0,
+                    }
+                })
+            },
+            // 抽奖记录
+            /**
+             * 获取活动详情页信息
+             * @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"
+                });
+            },
+
+            /**
+             * 获取抽奖记录信息回调
+             * @param {object} res [服务器返回数据]
+             * @param {object} ext [扩展参数]
+             */
+            getmyLuckIntegralOrderCallback(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]);
+                    }
+                    // 抽奖记录标题
+                    this.titleImg = datas.luck_title_img
+                    /* 获取抽奖记录 结束 */
+                } else if (res.code == 400) {
+                    // 获取抽奖记录失败
+                    Toast(res.message);
+                } else {
+                    // 获取抽奖记录失败
+                    Toast("获取抽奖记录失败");
+                }
+            },
+            // 下拉刷新
+            loadMore() {
+                this.loading = true;
+                this.page++
+                this.getmyLuckIntegralOrder(this.page)
+            },
+            // 获取并设置分享参数
+            getShareData(activeId){
+                this.$parent.getShareData({
+                    type: 14,
+                    id: activeId,
+                    url: ""
+                });
+            }
+        }
+    }
+</script>
+<style rel="stylesheet/less" lang="less">
+    @import "./ExchangeRecords";
+</style>
@@ -28,15 +28,15 @@
               <!-- 商品类型 -->
               <div class="item_box">
                 <div class="item">
-                  <img src="static/img/1.png" alt=""/>
+                  <img src="static/img/points_item01.png" alt=""/>
                   <div class="text">实物商品</div>
                 </div>
                 <div class="item">
-                  <img src="static/img/1.png" alt=""/>
+                  <img src="static/img/points_item02.png" alt=""/>
                   <div class="text">虚拟商品</div>
                 </div>
                 <div class="item">
-                  <img src="static/img/1.png" alt=""/>
+                  <img src="static/img/points_item03.png" alt=""/>
                   <div class="text">满减红包</div>
                 </div>
               </div>
@@ -110,6 +110,7 @@
 </template>
  
 <script>
+import { Toast, Indicator } from "mint-ui";
 import goodsItem2 from "@/components/goodsItem_2/goodsItem_2";
 import columnListBox from "@/components/columnListBox/columnListBox";
 export default {
@@ -183,7 +184,60 @@ export default {
         // 后退
         window.history.go(-1);
       }
-    }
+    },
+    // 积分商场首页
+    /**
+     * 获取积分商场首页信息
+     * * @param {string} uid [用户id]
+     */
+    integralMallIndex () {
+
+      // 加载中提示
+      Indicator.open('加载中...');
+
+      // 请求接口
+      this.http("/Api/" + (this.getApiVersion().LuckDraw) + "/integralMallIndex", {
+        uid: this.getStore("uid"),
+      }, this.integralMallIndexCallback, {
+          method: "POST"
+        });
+    },
+
+    /**
+     * 获取积分商场首页信息
+     * @param {object} res [服务器返回数据]
+     * @param {object} ext [扩展参数]
+     */
+    integralMallIndexCallback (res, ext) {
+
+      // 加载完成
+      Indicator.close();
+
+      // 返回处理
+      if (res.code == 200) {
+
+        // 解构数据
+        let { data: datas } = res;
+        this.info = datas
+        /* 积分商场首页信息 开始 */
+        /*用户信息 */
+        /*为你推荐 */
+        this.$set(this, "goodsLists", datas.goods);
+        /*实物商品 */
+        this.$set(this, "phyicalGoods", datas.goods);
+        /*虚拟商品 */
+        this.$set(this, "virtualGoods", datas.goods);
+        /*满减红包商品 */
+        this.$set(this, "redEnvelopeFull", datas.goods);
+      } else if (res.code == 400) {
+
+        // 获取积分商场首页信息失败
+        Toast(res.message || "获取积分商场首页信息失败");
+      } else {
+        // 获取积分商场首页信息失败
+        Toast(res.message);
+      }
+    },
   },
   head: {
     title () {
@@ -229,6 +283,8 @@ export default {
       // 设置标题
       this.$set(this.backs, 'title', '优选');
     }
+    // 获取商品信息接口
+    // this.integralMallIndex();
     // 临时，为你推荐商品数据
     this.$set(this, 'goodsLists', [
       {