数据绑定

zhiyangdu
1 parent 6f025476
Showing 3 changed files with 314 additions and 20 deletions
src/components/giftGivingItem/giftGivingItem.less
src/components/giftGivingItem/giftGivingItem.vue
src/pages/myGiftBox/myGiftBox.vue
+.giftItem_box {
+    width: 640px;
+    // height: 453px;
+    background: rgba(255, 255, 255, 1);
+    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.08);
+    border-radius: 16px;
+    margin: 43px auto 0 auto;
+    padding: 25px;
+    .user_info {
+        display: flex;
+        justify-content: space-between;
+        position: relative;
+        padding-bottom: 22px;
+        border-bottom: solid 1px rgba(247, 247, 248, 1);
+        .name {
+            height: 50px;
+            font-size: 28px;
+            font-weight: 400;
+            color: rgba(51, 51, 51, 1);
+            line-height: 50px;
+            width: 400px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+        .btn {
+            width: 144px;
+            height: 52px;
+            line-height: 52px;
+            background: rgba(254, 246, 233, 1);
+            border-radius: 96px 0px 0px 96px;
+            text-align: center;
+            font-size: 26px;
+            font-weight: 400;
+            color: rgba(245, 166, 35, 1);
+            position: absolute;
+            right: -35px;
+        }
+        .gift_active {
+            height: 40px;
+            font-size: 28px;
+            font-weight: 400;
+            color: rgba(208, 2, 27, 1);
+            line-height: 40px;
+        }
+    }
+    .item_info {
+        display: flex;
+        margin-top: 30px;
+        padding-bottom: 30px;
+        border-bottom: solid 1px rgba(247, 247, 248, 1);
+        img {
+            width: 159px;
+            height: 160px;
+            border-radius: 10px;
+        }
+        .box {
+            margin-left: 30px;
+            position: relative;
+            flex: 1;
+            .name {
+                font-size: 28px;
+                font-weight: 400;
+                color: rgba(51, 51, 51, 1);
+                max-height: 80px;
+                /*! autoprefixer: off */
+                -webkit-box-orient: vertical;
+                /*! autoprefixer: on */
+                display: -webkit-box;
+                -webkit-line-clamp: 2;
+                overflow: hidden;
+                white-space: normal;
+            }
+            .pirce {
+                width: 100%;
+                position: absolute;
+                left: 0;
+                bottom: 0;
+                display: flex;
+                justify-content: space-between;
+                .title {
+                    span {
+                        width: 15px;
+                        height: 33px;
+                        font-size: 24px;
+                        font-weight: 500;
+                        color: rgba(208, 2, 27, 1);
+                        line-height: 33px;
+                    }
+                    height: 50px;
+                    font-size: 36px;
+                    font-weight: 500;
+                    color: rgba(208, 2, 27, 1);
+                    line-height: 50px;
+                }
+                .btn {
+                    height: 40px;
+                    font-size: 28px;
+                    font-weight: 400;
+                    color: rgba(180, 180, 180, 1);
+                    line-height: 40px;
+                }
+            }
+        }
+    }
+    .text_tip {
+        height: 40px;
+        font-size: 28px;
+        font-weight: 400;
+        color: rgba(180, 180, 180, 1);
+        line-height: 40px;
+        margin-top: 30px;
+        num {
+            color: #666666;
+        }
+    }
+    .btn_list {
+        padding-top: 30px;
+        border-top: solid 1px #f7f7f8;
+        margin-top: 30px;
+        display: flex;
+        justify-content: flex-end;
+        .box {
+            width: 312px;
+            display: flex;
+            justify-content: space-between;
+            div {
+                width: 146px;
+                height: 52px;
+                line-height: 52px;
+                border-radius: 8px;
+                text-align: center;
+                font-size: 26px;
+            }
+            .btn {
+                background: rgba(249, 249, 249, 1);
+                color: #999999;
+            }
+            .active {
+                background: rgba(253, 241, 242, 1);
+                color: #d0021b;
+            }
+        }
+    }
+}
+<template>
+    <div v-if="giftGivingItem && giftGivingItem.length > 0">
+        <div
+            class="giftItem_box"
+            v-for="(item, index) in giftGivingItem"
+            :key="index"
+        >
+            <!--用户信息-->
+            <div class="user_info">
+                <div class="name">{{ item.create_time }}(赠礼)</div>
+                <div class="gift_active">{{ item.status }}</div>
+            </div>
+            <!--商品信息-->
+            <div class="item_info">
+                <img v-lazy="item.goods.simg" />
+                <div class="box">
+                    <div class="name">{{ item.goods.title }}</div>
+                    <div class="pirce">
+                        <div class="title">
+                            <span>￥</span>{{ item.goods.price }}
+                        </div>
+                        <div class="btn">
+                            总数：{{ parseInt(item.goods.num) }}
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- 显示文字 -->
+            <div class="text_tip">
+                <span v-show="item.total_num">可分享<num>{{item.total_num}}</num>人,</span>
+                <span v-show="item.give_num">已领 <num>{{item.give_num}}</num> 人,</span>
+                <span v-show="item.no_address_num"><num>{{item.no_address_num}}</num> 人未填写地址,</span>
+                <span v-show="item.refund_num"><num>{{item.refund_num}}</num>人退款中</span>
+            </div>
+            <!-- 按钮 -->
+            <div class="btn_list">
+                <div class="box">
+                    <div class="btn">取消支付</div>
+                    <div class="active">立即支付</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "name",
+    data() {
+        return {};
+    },
+    props: ["giftGivingItem"],
+    created() {},
+    methods: {
+        giftInReturn(item) {
+            this.$emit("giftInReturn", item);
+        }
+    }
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style rel="stylesheet/less" lang="less" scoped>
+@import "giftGivingItem";
+</style>
@@ -4,7 +4,7 @@
         <div class="top_box">
             <img src="static/img/icon_back.png" />
             <div class="tabs">
-                <van-tabs v-model="active">
+                <van-tabs @change="onTap" v-model="active">
                     <van-tab title="收礼"></van-tab>
                     <van-tab title="送礼"></van-tab>
                 </van-tabs>
@@ -18,10 +18,18 @@
             infinite-scroll-disabled="loading"
             :infinite-scroll-distance="50"
         >
+            <!-- 送礼列表 -->
             <receiving-gifts-item
+                v-show="active != 1 && active == 0"
                 @giftInReturn="giftInReturn"
                 :receivingGiftsInfo="receivingGiftsInfo"
             ></receiving-gifts-item>
+            <!-- 收礼列表 -->
+            <giftGivingItem
+                v-show="active != 0 && active == 1"
+                :giftGivingItem="giftGivingItem"
+            >
+            </giftGivingItem>
         </div>
     </div>
 </template>
@@ -29,19 +37,28 @@
 <script>
 // 引入组件
 import { Toast, Indicator } from "mint-ui";
-import receivingGiftsItem from "@/components/receivingGiftsItem/receivingGiftsItem";
+import receivingGiftsItem from "@/components/receivingGiftsItem/receivingGiftsItem"; // 收礼列表
+import giftGivingItem from "@/components/giftGivingItem/giftGivingItem"; // 送礼列表
 export default {
     name: "myGiftBox",
     data() {
         return {
             active: 0,
-            receivingGiftsInfo: null, // 礼物数据
-            loading: false, // 加载
-            pages: 0 // 分页
+            receivingGiftsInfo: null, // 收礼列表页数据
+            receivingGifts: {
+                loading: false, // 加载
+                pages: 0 // 分页
+            },
+            giftGivingItem: null, // 送礼列表页数据
+            giftGiving: {
+                loading: false, // 加载
+                pages: 0 // 分页
+            }
         };
     },
     components: {
-        receivingGiftsItem
+        receivingGiftsItem,
+        giftGivingItem
     },
     created() {
         // 收礼订单列表
@@ -50,13 +67,20 @@ export default {
     methods: {
         onTap(active) {
             this.active = active;
+            if (this.active != 1 && this.active == 0) {
+                // 收礼订单列表
+                this.getorderGiftList();
+            } else {
+                // 送礼订单列表
+                this.getorderGiveGiftList();
+            }
         },
         /**
          * 获取收礼礼物列表
          */
         getorderGiftList() {
-            this.loading = true;
-            this.pages++;
+            this.receivingGifts.loading = true;
+            this.receivingGifts.pages++;
             // 加载中提示
             Indicator.open("加载中...");
  
@@ -65,7 +89,7 @@ export default {
                 "/Api/" + this.getApiVersion().index + "/orderGiftList",
                 {
                     uid: this.$route.query.uid, // 用户id
-                    page: this.pages, // 分页 默认为1 一页20条
+                    page: this.receivingGifts.pages, // 分页 默认为1 一页20条
                     type: 1, // 1 收礼列表 2 送礼列表（送礼已废弃）
                     status: 0 // 0或者不传 全部 1 未填地址 2 未发货 3 已完成 4 已发货
                 },
@@ -93,7 +117,7 @@ export default {
  
                 if (datas.list && datas.list.length) {
                     // 隐藏加载圈
-                    this.loading = false;
+                    this.receivingGifts.loading = false;
                     if (this.pages > 1) {
                         this.$set(this, "receivingGiftsInfo", [
                             ...this.receivingGiftsInfo,
@@ -113,21 +137,81 @@ export default {
             }
         },
         // 跳转回赠礼物
-        giftInReturn(item){
+        giftInReturn(item) {
             // 判断并调用通用跳转
-                if (typeof this.$parent.gotoDetail === "function") {
-
-                    // 临时，设置跳转商品详情参数
-                    Object.assign(item, {
-                        type: "14",
-                        to: "",
-                        shop_type: ""
-                    });
+            if (typeof this.$parent.gotoDetail === "function") {
+                // 临时，设置跳转商品详情参数
+                Object.assign(item, {
+                    type: "14",
+                    to: "",
+                    shop_type: ""
+                });
  
+                this.$parent.gotoDetail(item);
+            }
+        },
+        /**
+         * 获取送礼礼物列表
+         */
+        getorderGiveGiftList() {
+            this.giftGiving.loading = true;
+            this.giftGiving.pages++;
+            // 加载中提示
+            Indicator.open("加载中...");
  
-                    this.$parent.gotoDetail(item);
+            // 获取送礼礼物列表接口
+            this.http(
+                "/Api/" + this.getApiVersion().index + "/orderGiveGiftList",
+                {
+                    uid: this.$route.query.uid, // 用户id
+                    page: this.giftGiving.pages, // 分页 默认为1 一页20条
+                    type: 1, // 1 收礼列表 2 送礼列表（送礼已废弃）
+                    status: 0 // 0或者不传 全部 1 未填地址 2 未发货 3 已完成 4 已发货
+                },
+                this.getorderGiveGiftListCallback,
+                {
+                    method: "post"
                 }
+            );
         },
+
+        /**
+         * 获取送礼礼物列表回调
+         * @param {object} res [服务器返回数据]
+         * @param {object} ext [扩展参数]
+         */
+        getorderGiveGiftListCallback(res, ext) {
+            // 加载完成
+            Indicator.close();
+
+            // 返回处理
+            if (res.code == 200) {
+                // 解构数据
+                let { data: datas } = res;
+                // 设置giftGivingItem数据
+
+                if (datas.list && datas.list.length) {
+                    // 隐藏加载圈
+                    this.giftGiving.loading = false;
+                    if (this.pages > 1) {
+                        this.$set(this, "giftGivingItem", [
+                            ...this.giftGivingItem,
+                            ...datas.list
+                        ]);
+                    } else {
+                        this.$set(this, "giftGivingItem", datas.list);
+                    }
+                    console.log(this.giftGivingItem);
+                }
+                /* 获取送礼订单列表 结束 */
+            } else if (res.code == 400) {
+                // 获取送礼订单列表失败
+                Toast(res.message);
+            } else {
+                // 获取送礼订单列表失败
+                Toast("获取送礼订单列表失败");
+            }
+        }
     }
 };
 </script>