Commit 0f3a50798ffe9ddfe7ce1d47cf8d6185ce07d915
1 parent
6f025476
数据绑定
Showing
3 changed files
with
314 additions
and
20 deletions
src/components/giftGivingItem/giftGivingItem.less
0 → 100644
| 1 | +.giftItem_box { | ||
| 2 | + width: 640px; | ||
| 3 | + // height: 453px; | ||
| 4 | + background: rgba(255, 255, 255, 1); | ||
| 5 | + box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.08); | ||
| 6 | + border-radius: 16px; | ||
| 7 | + margin: 43px auto 0 auto; | ||
| 8 | + padding: 25px; | ||
| 9 | + .user_info { | ||
| 10 | + display: flex; | ||
| 11 | + justify-content: space-between; | ||
| 12 | + position: relative; | ||
| 13 | + padding-bottom: 22px; | ||
| 14 | + border-bottom: solid 1px rgba(247, 247, 248, 1); | ||
| 15 | + .name { | ||
| 16 | + height: 50px; | ||
| 17 | + font-size: 28px; | ||
| 18 | + font-weight: 400; | ||
| 19 | + color: rgba(51, 51, 51, 1); | ||
| 20 | + line-height: 50px; | ||
| 21 | + width: 400px; | ||
| 22 | + overflow: hidden; | ||
| 23 | + text-overflow: ellipsis; | ||
| 24 | + white-space: nowrap; | ||
| 25 | + } | ||
| 26 | + .btn { | ||
| 27 | + width: 144px; | ||
| 28 | + height: 52px; | ||
| 29 | + line-height: 52px; | ||
| 30 | + background: rgba(254, 246, 233, 1); | ||
| 31 | + border-radius: 96px 0px 0px 96px; | ||
| 32 | + text-align: center; | ||
| 33 | + font-size: 26px; | ||
| 34 | + font-weight: 400; | ||
| 35 | + color: rgba(245, 166, 35, 1); | ||
| 36 | + position: absolute; | ||
| 37 | + right: -35px; | ||
| 38 | + } | ||
| 39 | + .gift_active { | ||
| 40 | + height: 40px; | ||
| 41 | + font-size: 28px; | ||
| 42 | + font-weight: 400; | ||
| 43 | + color: rgba(208, 2, 27, 1); | ||
| 44 | + line-height: 40px; | ||
| 45 | + } | ||
| 46 | + } | ||
| 47 | + .item_info { | ||
| 48 | + display: flex; | ||
| 49 | + margin-top: 30px; | ||
| 50 | + padding-bottom: 30px; | ||
| 51 | + border-bottom: solid 1px rgba(247, 247, 248, 1); | ||
| 52 | + img { | ||
| 53 | + width: 159px; | ||
| 54 | + height: 160px; | ||
| 55 | + border-radius: 10px; | ||
| 56 | + } | ||
| 57 | + .box { | ||
| 58 | + margin-left: 30px; | ||
| 59 | + position: relative; | ||
| 60 | + flex: 1; | ||
| 61 | + .name { | ||
| 62 | + font-size: 28px; | ||
| 63 | + font-weight: 400; | ||
| 64 | + color: rgba(51, 51, 51, 1); | ||
| 65 | + max-height: 80px; | ||
| 66 | + /*! autoprefixer: off */ | ||
| 67 | + -webkit-box-orient: vertical; | ||
| 68 | + /*! autoprefixer: on */ | ||
| 69 | + display: -webkit-box; | ||
| 70 | + -webkit-line-clamp: 2; | ||
| 71 | + overflow: hidden; | ||
| 72 | + white-space: normal; | ||
| 73 | + } | ||
| 74 | + .pirce { | ||
| 75 | + width: 100%; | ||
| 76 | + position: absolute; | ||
| 77 | + left: 0; | ||
| 78 | + bottom: 0; | ||
| 79 | + display: flex; | ||
| 80 | + justify-content: space-between; | ||
| 81 | + .title { | ||
| 82 | + span { | ||
| 83 | + width: 15px; | ||
| 84 | + height: 33px; | ||
| 85 | + font-size: 24px; | ||
| 86 | + font-weight: 500; | ||
| 87 | + color: rgba(208, 2, 27, 1); | ||
| 88 | + line-height: 33px; | ||
| 89 | + } | ||
| 90 | + height: 50px; | ||
| 91 | + font-size: 36px; | ||
| 92 | + font-weight: 500; | ||
| 93 | + color: rgba(208, 2, 27, 1); | ||
| 94 | + line-height: 50px; | ||
| 95 | + } | ||
| 96 | + .btn { | ||
| 97 | + height: 40px; | ||
| 98 | + font-size: 28px; | ||
| 99 | + font-weight: 400; | ||
| 100 | + color: rgba(180, 180, 180, 1); | ||
| 101 | + line-height: 40px; | ||
| 102 | + } | ||
| 103 | + } | ||
| 104 | + } | ||
| 105 | + } | ||
| 106 | + .text_tip { | ||
| 107 | + height: 40px; | ||
| 108 | + font-size: 28px; | ||
| 109 | + font-weight: 400; | ||
| 110 | + color: rgba(180, 180, 180, 1); | ||
| 111 | + line-height: 40px; | ||
| 112 | + margin-top: 30px; | ||
| 113 | + num { | ||
| 114 | + color: #666666; | ||
| 115 | + } | ||
| 116 | + } | ||
| 117 | + .btn_list { | ||
| 118 | + padding-top: 30px; | ||
| 119 | + border-top: solid 1px #f7f7f8; | ||
| 120 | + margin-top: 30px; | ||
| 121 | + display: flex; | ||
| 122 | + justify-content: flex-end; | ||
| 123 | + .box { | ||
| 124 | + width: 312px; | ||
| 125 | + display: flex; | ||
| 126 | + justify-content: space-between; | ||
| 127 | + div { | ||
| 128 | + width: 146px; | ||
| 129 | + height: 52px; | ||
| 130 | + line-height: 52px; | ||
| 131 | + border-radius: 8px; | ||
| 132 | + text-align: center; | ||
| 133 | + font-size: 26px; | ||
| 134 | + } | ||
| 135 | + .btn { | ||
| 136 | + background: rgba(249, 249, 249, 1); | ||
| 137 | + color: #999999; | ||
| 138 | + } | ||
| 139 | + .active { | ||
| 140 | + background: rgba(253, 241, 242, 1); | ||
| 141 | + color: #d0021b; | ||
| 142 | + } | ||
| 143 | + } | ||
| 144 | + } | ||
| 145 | +} |
src/components/giftGivingItem/giftGivingItem.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <div v-if="giftGivingItem && giftGivingItem.length > 0"> | ||
| 3 | + <div | ||
| 4 | + class="giftItem_box" | ||
| 5 | + v-for="(item, index) in giftGivingItem" | ||
| 6 | + :key="index" | ||
| 7 | + > | ||
| 8 | + <!--用户信息--> | ||
| 9 | + <div class="user_info"> | ||
| 10 | + <div class="name">{{ item.create_time }}(赠礼)</div> | ||
| 11 | + <div class="gift_active">{{ item.status }}</div> | ||
| 12 | + </div> | ||
| 13 | + <!--商品信息--> | ||
| 14 | + <div class="item_info"> | ||
| 15 | + <img v-lazy="item.goods.simg" /> | ||
| 16 | + <div class="box"> | ||
| 17 | + <div class="name">{{ item.goods.title }}</div> | ||
| 18 | + <div class="pirce"> | ||
| 19 | + <div class="title"> | ||
| 20 | + <span>￥</span>{{ item.goods.price }} | ||
| 21 | + </div> | ||
| 22 | + <div class="btn"> | ||
| 23 | + 总数：{{ parseInt(item.goods.num) }} | ||
| 24 | + </div> | ||
| 25 | + </div> | ||
| 26 | + </div> | ||
| 27 | + </div> | ||
| 28 | + <!-- 显示文字 --> | ||
| 29 | + <div class="text_tip"> | ||
| 30 | + <span v-show="item.total_num">可分享<num>{{item.total_num}}</num>人,</span> | ||
| 31 | + <span v-show="item.give_num">已领 <num>{{item.give_num}}</num> 人,</span> | ||
| 32 | + <span v-show="item.no_address_num"><num>{{item.no_address_num}}</num> 人未填写地址,</span> | ||
| 33 | + <span v-show="item.refund_num"><num>{{item.refund_num}}</num>人退款中</span> | ||
| 34 | + </div> | ||
| 35 | + <!-- 按钮 --> | ||
| 36 | + <div class="btn_list"> | ||
| 37 | + <div class="box"> | ||
| 38 | + <div class="btn">取消支付</div> | ||
| 39 | + <div class="active">立即支付</div> | ||
| 40 | + </div> | ||
| 41 | + </div> | ||
| 42 | + </div> | ||
| 43 | + </div> | ||
| 44 | +</template> | ||
| 45 | + | ||
| 46 | +<script> | ||
| 47 | +export default { | ||
| 48 | + name: "name", | ||
| 49 | + data() { | ||
| 50 | + return {}; | ||
| 51 | + }, | ||
| 52 | + props: ["giftGivingItem"], | ||
| 53 | + created() {}, | ||
| 54 | + methods: { | ||
| 55 | + giftInReturn(item) { | ||
| 56 | + this.$emit("giftInReturn", item); | ||
| 57 | + } | ||
| 58 | + } | ||
| 59 | +}; | ||
| 60 | +</script> | ||
| 61 | + | ||
| 62 | +<!-- Add "scoped" attribute to limit CSS to this component only --> | ||
| 63 | +<style rel="stylesheet/less" lang="less" scoped> | ||
| 64 | +@import "giftGivingItem"; | ||
| 65 | +</style> |
src/pages/myGiftBox/myGiftBox.vue
| @@ -4,7 +4,7 @@ | @@ -4,7 +4,7 @@ | ||
| 4 | <div class="top_box"> | 4 | <div class="top_box"> |
| 5 | <img src="static/img/icon_back.png" /> | 5 | <img src="static/img/icon_back.png" /> |
| 6 | <div class="tabs"> | 6 | <div class="tabs"> |
| 7 | - <van-tabs v-model="active"> | 7 | + <van-tabs @change="onTap" v-model="active"> |
| 8 | <van-tab title="收礼"></van-tab> | 8 | <van-tab title="收礼"></van-tab> |
| 9 | <van-tab title="送礼"></van-tab> | 9 | <van-tab title="送礼"></van-tab> |
| 10 | </van-tabs> | 10 | </van-tabs> |
| @@ -18,10 +18,18 @@ | @@ -18,10 +18,18 @@ | ||
| 18 | infinite-scroll-disabled="loading" | 18 | infinite-scroll-disabled="loading" |
| 19 | :infinite-scroll-distance="50" | 19 | :infinite-scroll-distance="50" |
| 20 | > | 20 | > |
| 21 | + <!-- 送礼列表 --> | ||
| 21 | <receiving-gifts-item | 22 | <receiving-gifts-item |
| 23 | + v-show="active != 1 && active == 0" | ||
| 22 | @giftInReturn="giftInReturn" | 24 | @giftInReturn="giftInReturn" |
| 23 | :receivingGiftsInfo="receivingGiftsInfo" | 25 | :receivingGiftsInfo="receivingGiftsInfo" |
| 24 | ></receiving-gifts-item> | 26 | ></receiving-gifts-item> |
| 27 | + <!-- 收礼列表 --> | ||
| 28 | + <giftGivingItem | ||
| 29 | + v-show="active != 0 && active == 1" | ||
| 30 | + :giftGivingItem="giftGivingItem" | ||
| 31 | + > | ||
| 32 | + </giftGivingItem> | ||
| 25 | </div> | 33 | </div> |
| 26 | </div> | 34 | </div> |
| 27 | </template> | 35 | </template> |
| @@ -29,19 +37,28 @@ | @@ -29,19 +37,28 @@ | ||
| 29 | <script> | 37 | <script> |
| 30 | // 引入组件 | 38 | // 引入组件 |
| 31 | import { Toast, Indicator } from "mint-ui"; | 39 | import { Toast, Indicator } from "mint-ui"; |
| 32 | -import receivingGiftsItem from "@/components/receivingGiftsItem/receivingGiftsItem"; | 40 | +import receivingGiftsItem from "@/components/receivingGiftsItem/receivingGiftsItem"; // 收礼列表 |
| 41 | +import giftGivingItem from "@/components/giftGivingItem/giftGivingItem"; // 送礼列表 | ||
| 33 | export default { | 42 | export default { |
| 34 | name: "myGiftBox", | 43 | name: "myGiftBox", |
| 35 | data() { | 44 | data() { |
| 36 | return { | 45 | return { |
| 37 | active: 0, | 46 | active: 0, |
| 38 | - receivingGiftsInfo: null, // 礼物数据 | ||
| 39 | - loading: false, // 加载 | ||
| 40 | - pages: 0 // 分页 | 47 | + receivingGiftsInfo: null, // 收礼列表页数据 |
| 48 | + receivingGifts: { | ||
| 49 | + loading: false, // 加载 | ||
| 50 | + pages: 0 // 分页 | ||
| 51 | + }, | ||
| 52 | + giftGivingItem: null, // 送礼列表页数据 | ||
| 53 | + giftGiving: { | ||
| 54 | + loading: false, // 加载 | ||
| 55 | + pages: 0 // 分页 | ||
| 56 | + } | ||
| 41 | }; | 57 | }; |
| 42 | }, | 58 | }, |
| 43 | components: { | 59 | components: { |
| 44 | - receivingGiftsItem | 60 | + receivingGiftsItem, |
| 61 | + giftGivingItem | ||
| 45 | }, | 62 | }, |
| 46 | created() { | 63 | created() { |
| 47 | // 收礼订单列表 | 64 | // 收礼订单列表 |
| @@ -50,13 +67,20 @@ export default { | @@ -50,13 +67,20 @@ export default { | ||
| 50 | methods: { | 67 | methods: { |
| 51 | onTap(active) { | 68 | onTap(active) { |
| 52 | this.active = active; | 69 | this.active = active; |
| 70 | + if (this.active != 1 && this.active == 0) { | ||
| 71 | + // 收礼订单列表 | ||
| 72 | + this.getorderGiftList(); | ||
| 73 | + } else { | ||
| 74 | + // 送礼订单列表 | ||
| 75 | + this.getorderGiveGiftList(); | ||
| 76 | + } | ||
| 53 | }, | 77 | }, |
| 54 | /** | 78 | /** |
| 55 | * 获取收礼礼物列表 | 79 | * 获取收礼礼物列表 |
| 56 | */ | 80 | */ |
| 57 | getorderGiftList() { | 81 | getorderGiftList() { |
| 58 | - this.loading = true; | ||
| 59 | - this.pages++; | 82 | + this.receivingGifts.loading = true; |
| 83 | + this.receivingGifts.pages++; | ||
| 60 | // 加载中提示 | 84 | // 加载中提示 |
| 61 | Indicator.open("加载中..."); | 85 | Indicator.open("加载中..."); |
| 62 | 86 | ||
| @@ -65,7 +89,7 @@ export default { | @@ -65,7 +89,7 @@ export default { | ||
| 65 | "/Api/" + this.getApiVersion().index + "/orderGiftList", | 89 | "/Api/" + this.getApiVersion().index + "/orderGiftList", |
| 66 | { | 90 | { |
| 67 | uid: this.$route.query.uid, // 用户id | 91 | uid: this.$route.query.uid, // 用户id |
| 68 | - page: this.pages, // 分页 默认为1 一页20条 | 92 | + page: this.receivingGifts.pages, // 分页 默认为1 一页20条 |
| 69 | type: 1, // 1 收礼列表 2 送礼列表（送礼已废弃） | 93 | type: 1, // 1 收礼列表 2 送礼列表（送礼已废弃） |
| 70 | status: 0 // 0或者不传 全部 1 未填地址 2 未发货 3 已完成 4 已发货 | 94 | status: 0 // 0或者不传 全部 1 未填地址 2 未发货 3 已完成 4 已发货 |
| 71 | }, | 95 | }, |
| @@ -93,7 +117,7 @@ export default { | @@ -93,7 +117,7 @@ export default { | ||
| 93 | 117 | ||
| 94 | if (datas.list && datas.list.length) { | 118 | if (datas.list && datas.list.length) { |
| 95 | // 隐藏加载圈 | 119 | // 隐藏加载圈 |
| 96 | - this.loading = false; | 120 | + this.receivingGifts.loading = false; |
| 97 | if (this.pages > 1) { | 121 | if (this.pages > 1) { |
| 98 | this.$set(this, "receivingGiftsInfo", [ | 122 | this.$set(this, "receivingGiftsInfo", [ |
| 99 | ...this.receivingGiftsInfo, | 123 | ...this.receivingGiftsInfo, |
| @@ -113,21 +137,81 @@ export default { | @@ -113,21 +137,81 @@ export default { | ||
| 113 | } | 137 | } |
| 114 | }, | 138 | }, |
| 115 | // 跳转回赠礼物 | 139 | // 跳转回赠礼物 |
| 116 | - giftInReturn(item){ | 140 | + giftInReturn(item) { |
| 117 | // 判断并调用通用跳转 | 141 | // 判断并调用通用跳转 |
| 118 | - if (typeof this.$parent.gotoDetail === "function") { | ||
| 119 | - | ||
| 120 | - // 临时，设置跳转商品详情参数 | ||
| 121 | - Object.assign(item, { | ||
| 122 | - type: "14", | ||
| 123 | - to: "", | ||
| 124 | - shop_type: "" | ||
| 125 | - }); | 142 | + if (typeof this.$parent.gotoDetail === "function") { |
| 143 | + // 临时，设置跳转商品详情参数 | ||
| 144 | + Object.assign(item, { | ||
| 145 | + type: "14", | ||
| 146 | + to: "", | ||
| 147 | + shop_type: "" | ||
| 148 | + }); | ||
| 126 | 149 | ||
| 150 | + this.$parent.gotoDetail(item); | ||
| 151 | + } | ||
| 152 | + }, | ||
| 153 | + /** | ||
| 154 | + * 获取送礼礼物列表 | ||
| 155 | + */ | ||
| 156 | + getorderGiveGiftList() { | ||
| 157 | + this.giftGiving.loading = true; | ||
| 158 | + this.giftGiving.pages++; | ||
| 159 | + // 加载中提示 | ||
| 160 | + Indicator.open("加载中..."); | ||
| 127 | 161 | ||
| 128 | - this.$parent.gotoDetail(item); | 162 | + // 获取送礼礼物列表接口 |
| 163 | + this.http( | ||
| 164 | + "/Api/" + this.getApiVersion().index + "/orderGiveGiftList", | ||
| 165 | + { | ||
| 166 | + uid: this.$route.query.uid, // 用户id | ||
| 167 | + page: this.giftGiving.pages, // 分页 默认为1 一页20条 | ||
| 168 | + type: 1, // 1 收礼列表 2 送礼列表（送礼已废弃） | ||
| 169 | + status: 0 // 0或者不传 全部 1 未填地址 2 未发货 3 已完成 4 已发货 | ||
| 170 | + }, | ||
| 171 | + this.getorderGiveGiftListCallback, | ||
| 172 | + { | ||
| 173 | + method: "post" | ||
| 129 | } | 174 | } |
| 175 | + ); | ||
| 130 | }, | 176 | }, |
| 177 | + | ||
| 178 | + /** | ||
| 179 | + * 获取送礼礼物列表回调 | ||
| 180 | + * @param {object} res [服务器返回数据] | ||
| 181 | + * @param {object} ext [扩展参数] | ||
| 182 | + */ | ||
| 183 | + getorderGiveGiftListCallback(res, ext) { | ||
| 184 | + // 加载完成 | ||
| 185 | + Indicator.close(); | ||
| 186 | + | ||
| 187 | + // 返回处理 | ||
| 188 | + if (res.code == 200) { | ||
| 189 | + // 解构数据 | ||
| 190 | + let { data: datas } = res; | ||
| 191 | + // 设置giftGivingItem数据 | ||
| 192 | + | ||
| 193 | + if (datas.list && datas.list.length) { | ||
| 194 | + // 隐藏加载圈 | ||
| 195 | + this.giftGiving.loading = false; | ||
| 196 | + if (this.pages > 1) { | ||
| 197 | + this.$set(this, "giftGivingItem", [ | ||
| 198 | + ...this.giftGivingItem, | ||
| 199 | + ...datas.list | ||
| 200 | + ]); | ||
| 201 | + } else { | ||
| 202 | + this.$set(this, "giftGivingItem", datas.list); | ||
| 203 | + } | ||
| 204 | + console.log(this.giftGivingItem); | ||
| 205 | + } | ||
| 206 | + /* 获取送礼订单列表 结束 */ | ||
| 207 | + } else if (res.code == 400) { | ||
| 208 | + // 获取送礼订单列表失败 | ||
| 209 | + Toast(res.message); | ||
| 210 | + } else { | ||
| 211 | + // 获取送礼订单列表失败 | ||
| 212 | + Toast("获取送礼订单列表失败"); | ||
| 213 | + } | ||
| 214 | + } | ||
| 131 | } | 215 | } |
| 132 | }; | 216 | }; |
| 133 | </script> | 217 | </script> |