Commit b3b284580a8a4c46c55c8196597f7c12403f9ff8
Merge branch 'version_2.0.0_optimization_mall_update' of http://bj.gitlab.cnlive…
….com/w-front-end/select_good into version_2.0.0_optimization_mall_update
Showing
8 changed files
with
521 additions
and
77 deletions
src/components/goodsItem_2/goodsItem_2.less
| @@ -34,8 +34,12 @@ | @@ -34,8 +34,12 @@ | ||
| 34 | font-size: 24px; | 34 | font-size: 24px; |
| 35 | white-space: nowrap; | 35 | white-space: nowrap; |
| 36 | text-overflow: ellipsis; | 36 | text-overflow: ellipsis; |
| 37 | - overflow: hidden; | ||
| 38 | - } | 37 | + overflow: hidden; |
| 38 | + } | ||
| 39 | + /**积分商城显示灰色颜色字**/ | ||
| 40 | + .grey { | ||
| 41 | + color: #666666; | ||
| 42 | + } | ||
| 39 | .price-box { | 43 | .price-box { |
| 40 | display: flex; | 44 | display: flex; |
| 41 | justify-content: flex-start; | 45 | justify-content: flex-start; |
src/components/goodsItem_2/goodsItem_2.vue
| @@ -7,8 +7,10 @@ | @@ -7,8 +7,10 @@ | ||
| 7 | <slot name="flag"></slot> | 7 | <slot name="flag"></slot> |
| 8 | </div> | 8 | </div> |
| 9 | <div class="content-box"> | 9 | <div class="content-box"> |
| 10 | - <div class="title" v-if="pid == undefined || pid == '1' || pid == '3' || pid == '4' || pid == '5'">{{item.title}}</div> | ||
| 11 | - <div class="price-box" v-if="pid != '5'"> | 10 | + <!--因积分商城需要显示白色灰色字体标示 --> |
| 11 | + <div class="title" :class={grey:item.grade} v-if="pid == undefined || pid == '1' || pid == '3' || pid == '4' || pid == '5'">{{item.title}}</div> | ||
| 12 | + <!--因积分商城不价格所有加上 !item.grade判断 --> | ||
| 13 | + <div class="price-box" v-if="pid != '5' && !item.grade"> | ||
| 12 | <div class="symbol">¥ </div> | 14 | <div class="symbol">¥ </div> |
| 13 | <div class="price">{{item.price}}</div> | 15 | <div class="price">{{item.price}}</div> |
| 14 | <div class="prices" v-if="(pid == '3' || pid == '4') && item.prices && parseFloat(item.prices) > 0 && parseFloat(item.prices) > parseFloat(item.price)">¥{{item.prices}}</div> | 16 | <div class="prices" v-if="(pid == '3' || pid == '4') && item.prices && parseFloat(item.prices) > 0 && parseFloat(item.prices) > parseFloat(item.price)">¥{{item.prices}}</div> |
| @@ -21,27 +23,27 @@ | @@ -21,27 +23,27 @@ | ||
| 21 | </template> | 23 | </template> |
| 22 | 24 | ||
| 23 | <script> | 25 | <script> |
| 24 | - export default { | ||
| 25 | - data: function () { | ||
| 26 | - return { | 26 | +export default { |
| 27 | + data: function () { | ||
| 28 | + return { | ||
| 27 | 29 | ||
| 28 | - } | ||
| 29 | - }, | ||
| 30 | - props: ["item", "pid"], | ||
| 31 | - methods: { | 30 | + } |
| 31 | + }, | ||
| 32 | + props: ["item", "pid"], | ||
| 33 | + methods: { | ||
| 32 | 34 | ||
| 33 | - /** | ||
| 34 | - * 点击跳转 | ||
| 35 | - * @param {object} item [数据对象] | ||
| 36 | - */ | ||
| 37 | - jump(item) { | ||
| 38 | - this.$emit("jump", item); | ||
| 39 | - } | ||
| 40 | - } | 35 | + /** |
| 36 | + * 点击跳转 | ||
| 37 | + * @param {object} item [数据对象] | ||
| 38 | + */ | ||
| 39 | + jump (item) { | ||
| 40 | + this.$emit("jump", item); | ||
| 41 | } | 41 | } |
| 42 | + } | ||
| 43 | +} | ||
| 42 | </script> | 44 | </script> |
| 43 | 45 | ||
| 44 | <!-- Add "scoped" attribute to limit CSS to this component only --> | 46 | <!-- Add "scoped" attribute to limit CSS to this component only --> |
| 45 | <style rel="stylesheet/less" lang="less" scoped> | 47 | <style rel="stylesheet/less" lang="less" scoped> |
| 46 | - @import './goodsItem_2'; | 48 | +@import './goodsItem_2'; |
| 47 | </style> | 49 | </style> |
src/components/goodsItem_7/goodsItem_7.less
| @@ -17,12 +17,28 @@ | @@ -17,12 +17,28 @@ | ||
| 17 | width: 100%; | 17 | width: 100%; |
| 18 | height: 330px; | 18 | height: 330px; |
| 19 | // height: 100%; | 19 | // height: 100%; |
| 20 | - overflow: hidden; | 20 | + overflow: hidden; |
| 21 | + // 因为积分需要层叠到图片上方需要设置父级相对定位 | ||
| 22 | + position: relative; | ||
| 21 | .img { | 23 | .img { |
| 22 | display: block; | 24 | display: block; |
| 23 | width: 100%; | 25 | width: 100%; |
| 24 | height: auto; | 26 | height: auto; |
| 25 | - } | 27 | + } |
| 28 | + // 积分商城需要商品是否有货显示补货中 | ||
| 29 | + .goods_active{ | ||
| 30 | + width: 100%; | ||
| 31 | + height: 58px; | ||
| 32 | + line-height: 58px; | ||
| 33 | + background: #000000; | ||
| 34 | + color: #fff; | ||
| 35 | + font-size: 30px; | ||
| 36 | + opacity: 0.39; | ||
| 37 | + text-align: center; | ||
| 38 | + position: absolute; | ||
| 39 | + left: 0; | ||
| 40 | + bottom: 0; | ||
| 41 | + } | ||
| 26 | } | 42 | } |
| 27 | .content-box { | 43 | .content-box { |
| 28 | margin: 0 auto; | 44 | margin: 0 auto; |
| @@ -84,7 +100,23 @@ | @@ -84,7 +100,23 @@ | ||
| 84 | height: 48px; | 100 | height: 48px; |
| 85 | } | 101 | } |
| 86 | } | 102 | } |
| 87 | - } | 103 | + } |
| 104 | + /**积分显示*/ | ||
| 105 | + .grade-box { | ||
| 106 | + height: 50px; | ||
| 107 | + font-size: 36px; | ||
| 108 | + font-weight: 500; | ||
| 109 | + color: #FC1541; | ||
| 110 | + line-height: 50px; | ||
| 111 | + display: flex; | ||
| 112 | + align-items: center; | ||
| 113 | + span{ | ||
| 114 | + font-size: 24px; | ||
| 115 | + font-weight: 400; | ||
| 116 | + color: #999999; | ||
| 117 | + margin-left: 10px; | ||
| 118 | + } | ||
| 119 | + } | ||
| 88 | } | 120 | } |
| 89 | } | 121 | } |
| 90 | } | 122 | } |
src/components/goodsItem_7/goodsItem_7.vue
| @@ -3,13 +3,18 @@ | @@ -3,13 +3,18 @@ | ||
| 3 | <div class="item"> | 3 | <div class="item"> |
| 4 | <div class="img-box"> | 4 | <div class="img-box"> |
| 5 | <img v-lazy="item.simg + SIGN.MIDDLE" class="img" /> | 5 | <img v-lazy="item.simg + SIGN.MIDDLE" class="img" /> |
| 6 | + <!-- 补货中按钮 --> | ||
| 7 | + <div v-show="item.grade" class="goods_active"> | ||
| 8 | + 补货中 | ||
| 9 | + </div> | ||
| 6 | </div> | 10 | </div> |
| 7 | <div class="content-box"> | 11 | <div class="content-box"> |
| 8 | <div class="title">{{item.title}}</div> | 12 | <div class="title">{{item.title}}</div> |
| 9 | <!-- <div class="coupon-box"> | 13 | <!-- <div class="coupon-box"> |
| 10 | 满180减10 | 14 | 满180减10 |
| 11 | </div> --> | 15 | </div> --> |
| 12 | - <div class="price-box"> | 16 | + <!-- 价格 --> |
| 17 | + <div v-show="!item.grade" class="price-box"> | ||
| 13 | <div class="left"> | 18 | <div class="left"> |
| 14 | <div class="y">¥ </div> | 19 | <div class="y">¥ </div> |
| 15 | <div class="integer">{{getInteger(item.price)}}.</div> | 20 | <div class="integer">{{getInteger(item.price)}}.</div> |
| @@ -19,70 +24,74 @@ | @@ -19,70 +24,74 @@ | ||
| 19 | <img src="static/img/icon_add.png" class="icon-add" mode="widthFix" @click.stop.prevent="primary(item)" /> | 24 | <img src="static/img/icon_add.png" class="icon-add" mode="widthFix" @click.stop.prevent="primary(item)" /> |
| 20 | </div> | 25 | </div> |
| 21 | </div> | 26 | </div> |
| 27 | + <!-- 积分 --> | ||
| 28 | + <div v-show="item.grade" class="grade-box"> | ||
| 29 | + {{item.grade}}<span>积分</span> | ||
| 30 | + </div> | ||
| 22 | </div> | 31 | </div> |
| 23 | </div> | 32 | </div> |
| 24 | </div> | 33 | </div> |
| 25 | </template> | 34 | </template> |
| 26 | 35 | ||
| 27 | <script> | 36 | <script> |
| 28 | - export default { | ||
| 29 | - data: function () { | ||
| 30 | - return { | 37 | +export default { |
| 38 | + data: function () { | ||
| 39 | + return { | ||
| 31 | 40 | ||
| 32 | - } | ||
| 33 | - }, | ||
| 34 | - props: ["item"], | ||
| 35 | - computed: { | 41 | + } |
| 42 | + }, | ||
| 43 | + props: ["item"], | ||
| 44 | + computed: { | ||
| 36 | 45 | ||
| 37 | - /** | ||
| 38 | - * 获取输入数字的整数部分 | ||
| 39 | - */ | ||
| 40 | - getInteger() { | ||
| 41 | - return (number) => { | ||
| 42 | - return parseInt(number); | ||
| 43 | - } | ||
| 44 | - }, | 46 | + /** |
| 47 | + * 获取输入数字的整数部分 | ||
| 48 | + */ | ||
| 49 | + getInteger () { | ||
| 50 | + return (number) => { | ||
| 51 | + return parseInt(number); | ||
| 52 | + } | ||
| 53 | + }, | ||
| 45 | 54 | ||
| 46 | - /** | ||
| 47 | - * 获取输入数字的小数部分 | ||
| 48 | - */ | ||
| 49 | - getDecimal() { | ||
| 50 | - return (number) => { | 55 | + /** |
| 56 | + * 获取输入数字的小数部分 | ||
| 57 | + */ | ||
| 58 | + getDecimal () { | ||
| 59 | + return (number) => { | ||
| 51 | 60 | ||
| 52 | - // 拆分数字 | ||
| 53 | - let numberArr = number.toString().split("."); | 61 | + // 拆分数字 |
| 62 | + let numberArr = number.toString().split("."); | ||
| 54 | 63 | ||
| 55 | - // 判断是否有效数部分 | ||
| 56 | - if (numberArr.length === 2) { | ||
| 57 | - return numberArr[1]; | ||
| 58 | - } else { | ||
| 59 | - return "00"; | ||
| 60 | - } | ||
| 61 | - } | ||
| 62 | - } | ||
| 63 | - }, | ||
| 64 | - methods: { | 64 | + // 判断是否有效数部分 |
| 65 | + if (numberArr.length === 2) { | ||
| 66 | + return numberArr[1]; | ||
| 67 | + } else { | ||
| 68 | + return "00"; | ||
| 69 | + } | ||
| 70 | + } | ||
| 71 | + } | ||
| 72 | + }, | ||
| 73 | + methods: { | ||
| 65 | 74 | ||
| 66 | - /** | ||
| 67 | - * 点击跳转 | ||
| 68 | - * @param {object} item [数据对象] | ||
| 69 | - */ | ||
| 70 | - jump(item) { | ||
| 71 | - this.$emit("jump", item); | ||
| 72 | - }, | 75 | + /** |
| 76 | + * 点击跳转 | ||
| 77 | + * @param {object} item [数据对象] | ||
| 78 | + */ | ||
| 79 | + jump (item) { | ||
| 80 | + this.$emit("jump", item); | ||
| 81 | + }, | ||
| 73 | 82 | ||
| 74 | - /** | ||
| 75 | - * 主按钮点击事件 | ||
| 76 | - * @param {object} item [数据对象] | ||
| 77 | - */ | ||
| 78 | - primary(item) { | ||
| 79 | - this.$emit("primary", item); | ||
| 80 | - } | ||
| 81 | - } | 83 | + /** |
| 84 | + * 主按钮点击事件 | ||
| 85 | + * @param {object} item [数据对象] | ||
| 86 | + */ | ||
| 87 | + primary (item) { | ||
| 88 | + this.$emit("primary", item); | ||
| 82 | } | 89 | } |
| 90 | + } | ||
| 91 | +} | ||
| 83 | </script> | 92 | </script> |
| 84 | 93 | ||
| 85 | <!-- Add "scoped" attribute to limit CSS to this component only --> | 94 | <!-- Add "scoped" attribute to limit CSS to this component only --> |
| 86 | <style rel="stylesheet/less" lang="less" scoped> | 95 | <style rel="stylesheet/less" lang="less" scoped> |
| 87 | - @import './goodsItem_7'; | 96 | +@import './goodsItem_7'; |
| 88 | </style> | 97 | </style> |
src/pages/pointsMall/pointsMall.less
0 → 100644
| 1 | +@charset "UTF-8"; | ||
| 2 | +.main_box{ | ||
| 3 | + background: #fff; | ||
| 4 | +} | ||
| 5 | + // 头部 | ||
| 6 | + .top_main{ | ||
| 7 | + margin:40px 30px; | ||
| 8 | + padding: 30px; | ||
| 9 | + height: 394px; | ||
| 10 | + background: #FFFFFF; | ||
| 11 | + box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.06); | ||
| 12 | + border-radius: 24px; | ||
| 13 | + .top{ | ||
| 14 | + display: flex; | ||
| 15 | + justify-content: space-between; | ||
| 16 | + .left{ | ||
| 17 | + height: 40px; | ||
| 18 | + font-size: 28px; | ||
| 19 | + font-weight: 400; | ||
| 20 | + color: #45270D; | ||
| 21 | + line-height: 40px; | ||
| 22 | + span{ | ||
| 23 | + margin-left: 8px; | ||
| 24 | + height: 40px; | ||
| 25 | + font-size: 28px; | ||
| 26 | + font-weight: 500; | ||
| 27 | + color: #F5A623; | ||
| 28 | + line-height: 40px; | ||
| 29 | + } | ||
| 30 | + } | ||
| 31 | + .right{ | ||
| 32 | + height: 33px; | ||
| 33 | + font-size: 24px; | ||
| 34 | + font-weight: 400; | ||
| 35 | + color: #999999; | ||
| 36 | + line-height: 33px; | ||
| 37 | + display: flex; | ||
| 38 | + justify-content: center; | ||
| 39 | + align-items: center; | ||
| 40 | + .back_right_iocn{ | ||
| 41 | + display: block; | ||
| 42 | + width: 20px; | ||
| 43 | + height:20px; | ||
| 44 | + margin-left: 10px; | ||
| 45 | + } | ||
| 46 | + } | ||
| 47 | + } | ||
| 48 | + // 商品类型 | ||
| 49 | + .item_box{ | ||
| 50 | + display: flex; | ||
| 51 | + justify-content: space-between; | ||
| 52 | + margin: 40px 110px 30px 110px; | ||
| 53 | + .item{ | ||
| 54 | + img{ | ||
| 55 | + display: block; | ||
| 56 | + width: 90px; | ||
| 57 | + height:90px; | ||
| 58 | + } | ||
| 59 | + .text{ | ||
| 60 | + width: 96px; | ||
| 61 | + height: 33px; | ||
| 62 | + font-size: 24px; | ||
| 63 | + font-weight: 400; | ||
| 64 | + color: #666666; | ||
| 65 | + line-height: 33px; | ||
| 66 | + margin-top: 12px; | ||
| 67 | + } | ||
| 68 | + } | ||
| 69 | + } | ||
| 70 | + //赚取积分 | ||
| 71 | + .earn_points_box{ | ||
| 72 | + height: 90px; | ||
| 73 | + background: #FFF8E8; | ||
| 74 | + border-radius: 12px; | ||
| 75 | + display:flex; | ||
| 76 | + justify-content: space-between; | ||
| 77 | + align-items: center; | ||
| 78 | + padding: 10px 20px; | ||
| 79 | + .earn_icon{ | ||
| 80 | + display: block; | ||
| 81 | + width: 36px; | ||
| 82 | + height:36px; | ||
| 83 | + } | ||
| 84 | + .desc{ | ||
| 85 | + height: 90px; | ||
| 86 | + font-size: 26px; | ||
| 87 | + font-weight: 400; | ||
| 88 | + color: #746037; | ||
| 89 | + line-height: 90px; | ||
| 90 | + } | ||
| 91 | + .btn{ | ||
| 92 | + padding: 9px 20px; | ||
| 93 | + height: 50px; | ||
| 94 | + background: #DAB277; | ||
| 95 | + border-radius: 26px; | ||
| 96 | + color: #fff; | ||
| 97 | + text-align: center; | ||
| 98 | + display: flex; | ||
| 99 | + align-items: center; | ||
| 100 | + .earn_right_back{ | ||
| 101 | + display: block; | ||
| 102 | + width: 9px; | ||
| 103 | + height: 18px; | ||
| 104 | + margin-left: 8px; | ||
| 105 | + } | ||
| 106 | + } | ||
| 107 | + } | ||
| 108 | + } | ||
| 109 | + // 内容区域 | ||
| 110 | + .tab_item_box{ | ||
| 111 | + display: flex; | ||
| 112 | + align-items: center; | ||
| 113 | + // justify-content: space-between; | ||
| 114 | + margin:50px 30px 33px 30px; | ||
| 115 | + .item{ | ||
| 116 | + height: 33px; | ||
| 117 | + font-size: 24px; | ||
| 118 | + font-weight: 400; | ||
| 119 | + color: #999999; | ||
| 120 | + line-height: 33px; | ||
| 121 | + } | ||
| 122 | + .active{ | ||
| 123 | + height: 48px; | ||
| 124 | + font-size: 34px; | ||
| 125 | + font-weight: 600; | ||
| 126 | + color: #373737; | ||
| 127 | + line-height: 48px; | ||
| 128 | + } | ||
| 129 | + .line{ | ||
| 130 | + width: 1px; | ||
| 131 | + height: 20px; | ||
| 132 | + background: #999999; | ||
| 133 | + margin: 0 16px; | ||
| 134 | + } | ||
| 135 | + } | ||
| 136 | + // 为你推荐 | ||
| 137 | + .list-box { | ||
| 138 | + display: flex; | ||
| 139 | + justify-content: space-between; | ||
| 140 | + align-items: center; | ||
| 141 | + .discount-flag { | ||
| 142 | + position: absolute; | ||
| 143 | + top: 4px; | ||
| 144 | + left: 22px; | ||
| 145 | + z-index: 1; | ||
| 146 | + background: linear-gradient(90deg, #F9EE7A 0%, #FAD844 100%); | ||
| 147 | + padding: 1px 8px; | ||
| 148 | + color: #945A08; | ||
| 149 | + font-size: 20px; | ||
| 150 | + font-weight: 400; | ||
| 151 | + border-radius: 6px; | ||
| 152 | + } | ||
| 153 | +} | ||
| 0 | \ No newline at end of file | 154 | \ No newline at end of file |
src/pages/pointsMall/pointsMall.vue
0 → 100644
| 1 | +<template> | ||
| 2 | +<div> | ||
| 3 | + <div class="main_box"> | ||
| 4 | + <div class="top_main"> | ||
| 5 | + <!-- 头部 --> | ||
| 6 | + <div class="top"> | ||
| 7 | + <div class="left"> | ||
| 8 | + 我的积分: <span>2800</span> | ||
| 9 | + </div> | ||
| 10 | + <div class="right"> | ||
| 11 | + 兑换记录 | ||
| 12 | + <!-- 返回图标 --> | ||
| 13 | + <img class="back_right_iocn" src="static/img/back_right.png" alt=""/> | ||
| 14 | + </div> | ||
| 15 | + </div> | ||
| 16 | + <!-- 商品类型 --> | ||
| 17 | + <div class="item_box"> | ||
| 18 | + <div class="item"> | ||
| 19 | + <img src="static/img/1.png" alt=""/> | ||
| 20 | + <div class="text">实物商品</div> | ||
| 21 | + </div> | ||
| 22 | + <div class="item"> | ||
| 23 | + <img src="static/img/1.png" alt=""/> | ||
| 24 | + <div class="text">虚拟商品</div> | ||
| 25 | + </div> | ||
| 26 | + <div class="item"> | ||
| 27 | + <img src="static/img/1.png" alt=""/> | ||
| 28 | + <div class="text">满减红包</div> | ||
| 29 | + </div> | ||
| 30 | + </div> | ||
| 31 | + <!--积分赚取 --> | ||
| 32 | + <div class="earn_points_box"> | ||
| 33 | + <img class="earn_icon" src="static/img/1.png" alt=""> | ||
| 34 | + <div class="desc">赚取更多积分,兑换精美礼品~</div> | ||
| 35 | + <div class="btn">赚取积分 <img class="earn_right_back" src="static/img/back_right.png" alt=""/></div> | ||
| 36 | + </div> | ||
| 37 | + </div> | ||
| 38 | + <!-- 为你推荐 --> | ||
| 39 | + <div class="tab_item_box"> | ||
| 40 | + <div class="item active">为你推荐</div> | ||
| 41 | + <!-- 分割线 --> | ||
| 42 | + <div class="line"> </div> | ||
| 43 | + <div class="item">热门商品</div> | ||
| 44 | + </div> | ||
| 45 | + <!-- 为你推荐商品列表 --> | ||
| 46 | + <div class="list-box"> | ||
| 47 | + <!-- 商品展示样式 2 --> | ||
| 48 | + <goods-item-2 class="item" v-for="(item, index) in goodsLists" :key="index" @jump="toDiscountList(item)" | ||
| 49 | + :item="item" | ||
| 50 | + pid="4"> | ||
| 51 | + </goods-item-2> | ||
| 52 | + </div> | ||
| 53 | + <!-- 实物商品 --> | ||
| 54 | + <div class="tab_item_box"> | ||
| 55 | + <div class="item active">实物商品</div> | ||
| 56 | + <!-- 分割线 --> | ||
| 57 | + <div class="line"> </div> | ||
| 58 | + <div class="item">实物商品实物商品实物商品实物商品</div> | ||
| 59 | + </div> | ||
| 60 | + <!-- 实物商品裂变 --> | ||
| 61 | + <!-- 商品样式 7 列表 --> | ||
| 62 | + <column-list-box class="column-list-box" v-if="phyicalGoods && phyicalGoods.list && phyicalGoods.list.length" @jump="toDetail" @primary="primary" | ||
| 63 | + :lists="phyicalGoods" | ||
| 64 | + com="7"> | ||
| 65 | + </column-list-box> | ||
| 66 | + <!-- 虚拟商品 --> | ||
| 67 | + <div class="tab_item_box"> | ||
| 68 | + <div class="item active">虚拟商品</div> | ||
| 69 | + <!-- 分割线 --> | ||
| 70 | + <div class="line"> </div> | ||
| 71 | + <div class="item">热门商品</div> | ||
| 72 | + </div> | ||
| 73 | + <!-- 满减红包 --> | ||
| 74 | + <div class="tab_item_box"> | ||
| 75 | + <div class="item active">满减红包</div> | ||
| 76 | + <!-- 分割线 --> | ||
| 77 | + <div class="line"> </div> | ||
| 78 | + <div class="item">热门商品</div> | ||
| 79 | + </div> | ||
| 80 | + </div> | ||
| 81 | +</div> | ||
| 82 | +</template> | ||
| 83 | + | ||
| 84 | +<script> | ||
| 85 | +import goodsItem2 from "@/components/goodsItem_2/goodsItem_2"; | ||
| 86 | +import columnListBox from "@/components/columnListBox/columnListBox"; | ||
| 87 | +export default { | ||
| 88 | + data () { | ||
| 89 | + return { | ||
| 90 | + goodsLists: null, // 为你推荐商品 | ||
| 91 | + phyicalGoods: null, // 实物商品 | ||
| 92 | + virtualGoods: null, // 虚拟商品 | ||
| 93 | + redEnvelopeFull: null // 满减红包 | ||
| 94 | + } | ||
| 95 | + }, | ||
| 96 | + //部件 | ||
| 97 | + components: { | ||
| 98 | + goodsItem2, | ||
| 99 | + columnListBox | ||
| 100 | + }, | ||
| 101 | + //静态 | ||
| 102 | + props: [ | ||
| 103 | + ], | ||
| 104 | + //对象内部的属性监听,也叫深度监听 | ||
| 105 | + watch: { | ||
| 106 | + }, | ||
| 107 | + //属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。主要当作属性来使用; | ||
| 108 | + computed: { | ||
| 109 | + }, | ||
| 110 | + //方法表示一个具体的操作,主要书写业务逻辑; | ||
| 111 | + methods: { | ||
| 112 | + }, | ||
| 113 | + //请求数据 | ||
| 114 | + created () { | ||
| 115 | + // 临时,为你推荐商品数据 | ||
| 116 | + this.$set(this, 'goodsLists', [ | ||
| 117 | + { | ||
| 118 | + ads: "广告语", | ||
| 119 | + id: "9519164", | ||
| 120 | + price: "5.01", | ||
| 121 | + prices: "6.00", | ||
| 122 | + shop_type: "1", | ||
| 123 | + simg: "http://wjjseller.cnlive.com/uploads/05ac5ee31c3bb363d95072559d205bd8.png", | ||
| 124 | + title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml", | ||
| 125 | + grade: 1500 // 积分 | ||
| 126 | + }, | ||
| 127 | + { | ||
| 128 | + ads: "广告语", | ||
| 129 | + id: "9519164", | ||
| 130 | + price: "5.01", | ||
| 131 | + prices: "6.00", | ||
| 132 | + shop_type: "1", | ||
| 133 | + simg: "http://wjjseller.cnlive.com/uploads/05ac5ee31c3bb363d95072559d205bd8.png", | ||
| 134 | + title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml", | ||
| 135 | + grade: 1500 // 积分 | ||
| 136 | + }, | ||
| 137 | + { | ||
| 138 | + ads: "广告语", | ||
| 139 | + id: "9519164", | ||
| 140 | + price: "5.01", | ||
| 141 | + prices: "6.00", | ||
| 142 | + shop_type: "1", | ||
| 143 | + simg: "http://wjjseller.cnlive.com/uploads/05ac5ee31c3bb363d95072559d205bd8.png", | ||
| 144 | + title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml", | ||
| 145 | + grade: 1500 // 积分 | ||
| 146 | + } | ||
| 147 | + ]); | ||
| 148 | + // 临时,实物商品列表 | ||
| 149 | + this.$set(this, 'phyicalGoods', { | ||
| 150 | + list: [ | ||
| 151 | + { | ||
| 152 | + activity: "0", | ||
| 153 | + activity_desc: "", | ||
| 154 | + addtime: "1604544867", | ||
| 155 | + ads: "23123", | ||
| 156 | + code: "160454486791776561000", | ||
| 157 | + id: "9525539", | ||
| 158 | + price: "0.01", | ||
| 159 | + prices: "0.00", | ||
| 160 | + shop_type: "1", | ||
| 161 | + simg: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/11/05/5fa3695e39ae6.png", | ||
| 162 | + stock: "0", | ||
| 163 | + stoptime: "0", | ||
| 164 | + title: "aabbsdf350ml", | ||
| 165 | + grade: 1500 // 积分 | ||
| 166 | + }, | ||
| 167 | + { | ||
| 168 | + activity: "0", | ||
| 169 | + activity_desc: "", | ||
| 170 | + addtime: "1604544867", | ||
| 171 | + ads: "23123", | ||
| 172 | + code: "160454486791776561000", | ||
| 173 | + id: "9525539", | ||
| 174 | + price: "0.01", | ||
| 175 | + prices: "0.00", | ||
| 176 | + shop_type: "1", | ||
| 177 | + simg: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/11/05/5fa3695e39ae6.png", | ||
| 178 | + stock: "0", | ||
| 179 | + stoptime: "0", | ||
| 180 | + title: "aabbsdf350ml", | ||
| 181 | + grade: 1500 // 积分 | ||
| 182 | + }, | ||
| 183 | + { | ||
| 184 | + activity: "0", | ||
| 185 | + activity_desc: "", | ||
| 186 | + addtime: "1604544867", | ||
| 187 | + ads: "23123", | ||
| 188 | + code: "160454486791776561000", | ||
| 189 | + id: "9525539", | ||
| 190 | + price: "0.01", | ||
| 191 | + prices: "0.00", | ||
| 192 | + shop_type: "1", | ||
| 193 | + simg: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/11/05/5fa3695e39ae6.png", | ||
| 194 | + stock: "0", | ||
| 195 | + stoptime: "0", | ||
| 196 | + title: "aabbsdf350ml", | ||
| 197 | + grade: 1500 // 积分 | ||
| 198 | + }, | ||
| 199 | + { | ||
| 200 | + activity: "0", | ||
| 201 | + activity_desc: "", | ||
| 202 | + addtime: "1604544867", | ||
| 203 | + ads: "23123", | ||
| 204 | + code: "160454486791776561000", | ||
| 205 | + id: "9525539", | ||
| 206 | + price: "0.01", | ||
| 207 | + prices: "0.00", | ||
| 208 | + shop_type: "1", | ||
| 209 | + simg: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/11/05/5fa3695e39ae6.png", | ||
| 210 | + stock: "0", | ||
| 211 | + stoptime: "0", | ||
| 212 | + title: "aabbsdf350ml", | ||
| 213 | + grade: 1500 // 积分 | ||
| 214 | + } | ||
| 215 | + ] | ||
| 216 | + }); | ||
| 217 | + }, | ||
| 218 | + mounted () { | ||
| 219 | + } | ||
| 220 | +} | ||
| 221 | +</script> | ||
| 222 | + | ||
| 223 | +<style rel="stylesheet/less" lang='less' scoped> | ||
| 224 | +@import 'pointsMall'; | ||
| 225 | +</style> | ||
| 226 | + |
src/router/index.js
| @@ -32,7 +32,9 @@ const router = new Router({ | @@ -32,7 +32,9 @@ const router = new Router({ | ||
| 32 | path: "/fansShopMessageList", | 32 | path: "/fansShopMessageList", |
| 33 | name: "fansShopMessageList", | 33 | name: "fansShopMessageList", |
| 34 | component: resolve => { | 34 | component: resolve => { |
| 35 | - require(["@/pages/fansShopMessageList/fansShopMessageList"], resolve); | 35 | + require([ |
| 36 | + "@/pages/fansShopMessageList/fansShopMessageList" | ||
| 37 | + ], resolve); | ||
| 36 | }, | 38 | }, |
| 37 | meta: { | 39 | meta: { |
| 38 | requireAuth: false | 40 | requireAuth: false |
| @@ -131,7 +133,9 @@ const router = new Router({ | @@ -131,7 +133,9 @@ const router = new Router({ | ||
| 131 | path: "/recommendMore", | 133 | path: "/recommendMore", |
| 132 | name: "recommendMore", | 134 | name: "recommendMore", |
| 133 | component: resolve => { | 135 | component: resolve => { |
| 134 | - require(["@/pages/recommendMore/recommendMore"], resolve); | 136 | + require([ |
| 137 | + "@/pages/recommendMore/recommendMore" | ||
| 138 | + ], resolve); | ||
| 135 | }, | 139 | }, |
| 136 | meta: { | 140 | meta: { |
| 137 | requireAuth: false | 141 | requireAuth: false |
| @@ -178,7 +182,9 @@ const router = new Router({ | @@ -178,7 +182,9 @@ const router = new Router({ | ||
| 178 | path: "/optimization2", | 182 | path: "/optimization2", |
| 179 | name: "optimization2", | 183 | name: "optimization2", |
| 180 | component: resolve => { | 184 | component: resolve => { |
| 181 | - require(["@/pages/optimization2/optimization2"], resolve); | 185 | + require([ |
| 186 | + "@/pages/optimization2/optimization2" | ||
| 187 | + ], resolve); | ||
| 182 | }, | 188 | }, |
| 183 | meta: { | 189 | meta: { |
| 184 | requireAuth: false | 190 | requireAuth: false |
| @@ -211,15 +217,27 @@ const router = new Router({ | @@ -211,15 +217,27 @@ const router = new Router({ | ||
| 211 | path: "/optimizationList", | 217 | path: "/optimizationList", |
| 212 | name: "optimizationList", | 218 | name: "optimizationList", |
| 213 | component: resolve => { | 219 | component: resolve => { |
| 214 | - require(["@/pages/optimizationList/optimizationList"], resolve); | 220 | + require([ |
| 221 | + "@/pages/optimizationList/optimizationList" | ||
| 222 | + ], resolve); | ||
| 215 | }, | 223 | }, |
| 216 | meta: { | 224 | meta: { |
| 217 | requireAuth: false | 225 | requireAuth: false |
| 218 | } | 226 | } |
| 219 | }, | 227 | }, |
| 228 | + { | ||
| 229 | + // 积分商城首页 | ||
| 230 | + path: "/pointsMall", | ||
| 231 | + name: "pointsMall", | ||
| 232 | + component: resolve => { | ||
| 233 | + require(["@/pages/pointsMall/pointsMall"], resolve); | ||
| 234 | + }, | ||
| 235 | + meta: { | ||
| 236 | + requireAuth: false | ||
| 237 | + } | ||
| 238 | + } | ||
| 220 | 239 | ||
| 221 | /* 优选和商城页面改版升级页面 结束 */ | 240 | /* 优选和商城页面改版升级页面 结束 */ |
| 222 | - | ||
| 223 | ] | 241 | ] |
| 224 | }, | 242 | }, |
| 225 | { | 243 | { |
static/img/back_right.png
0 → 100755
477 Bytes