w-front-end / select_good · Commits

Commit 1ed1800a96ef9d84b02a5df24f944a252a8ee839

Authored by 王强
2 parents ef978c54 caeeafa4

Merge branch 'version_8_august' into version_2.0.0_optimization_mall_update

Inline Side-by-side
Showing 6 changed files with 237 additions and 121 deletions
src/components/goodsItem_10/goodsItem_10.less
  View file @1ed1800
... ... @@ -57,9 +57,32 @@
57 57 overflow: hidden;
58 58 }
59 59 }
  60 + .prices-box {
  61 + display: flex;
  62 + justify-content: center;
  63 + align-items: baseline;
  64 + height: 28px;
  65 + line-height: 28px;
  66 + .symbol {
  67 + color: #AAAAAA;
  68 + font-size: 22px;
  69 + font-weight: 300;
  70 + text-decoration: line-through;
  71 + }
  72 + .prices {
  73 + color: #AAAAAA;
  74 + font-size: 22px;
  75 + font-weight: 300;
  76 + text-decoration: line-through;
  77 + }
  78 + }
  79 + .prices-pl-box {
  80 + height: 28px;
  81 + line-height: 28px;
  82 + }
60 83 }
61 84  
62   - &.pid-2 { // 排名样式
  85 + &.pid-2, &.pid-4 { // 积分样式
63 86 .content-box {
64 87 .price-box {
65 88 justify-content: center;
... ...
src/components/goodsItem_10/goodsItem_10.vue
  View file @1ed1800
... ... @@ -8,22 +8,31 @@
8 8 </div>
9 9 <div class="content-box" v-if="item.price || item.num">
10 10  
11   - <div class="price-box" v-if="pid == '1'">
  11 + <div class="price-box" v-if="pid == '1' || pid == '3'">
12 12 <div class="symbol">¥</div>
13 13 <div class="price">{{item.price}}</div>
14   - <!-- <div class="prices" v-if="(pid == '1') && item.prices && parseFloat(item.prices) > 0 && parseFloat(item.prices) > parseFloat(item.price)">¥{{item.prices}}</div> -->
  14 + <!-- <div class="prices" v-if="(pid == '1' || pid == '3') && item.prices && parseFloat(item.prices) > 0 && parseFloat(item.prices) > parseFloat(item.price)">¥{{item.prices}}</div> -->
15 15 </div>
16 16  
17   - <!-- <div class="price-box" v-if="pid == '2' && item.price && parseFloat(item.price) > 0">
  17 + <!-- <div class="price-box" v-if="(pid == '2' || pid == '4') && item.price && parseFloat(item.price) > 0">
18 18 <div class="symbol">¥</div>
19 19 <div class="price">{{item.price}}</div>
20 20 </div> -->
21 21  
22   - <!-- <div class="price-box" v-else-if="pid == '2'"> -->
23   - <div class="price-box" v-if="pid == '2'">
  22 + <!-- <div class="price-box" v-else-if="pid == '2' || pid == '4'"> -->
  23 + <div class="price-box" v-if="pid == '2' || pid == '4'">
24 24 <div class="price">{{item.num}}</div>
25 25 <div class="price-text">积分</div>
26 26 </div>
  27 +
  28 + <!-- 划线价格 -->
  29 + <div class="prices-box" v-if="pid == '3' && item.prices && parseFloat(item.prices) > 0 && parseFloat(item.prices) > parseFloat(item.price)">
  30 + <div class="symbol">¥</div>
  31 + <div class="prices">{{item.prices}}</div>
  32 + </div>
  33 +
  34 + <!-- 划线价格高度占位 -->
  35 + <div class="prices-pl-box" v-else-if="pid == '4' || !item.prices || parseFloat(item.prices) <= 0"></div>
27 36 </div>
28 37 </div>
29 38 </template>
... ...
src/components/goodsItem_7/goodsItem_7.less
  View file @1ed1800
... ... @@ -76,11 +76,39 @@
76 76 text-overflow: ellipsis;
77 77 overflow: hidden;
78 78 }
79   - .grey-title{
80   - font-size: 36px;
81   - height: 76px;
82   - }
  79 + .tags-box {
  80 + // display: flex;
  81 + // justify-content: flex-start;
  82 + // align-items: center;
  83 + .tag {
  84 + margin-top: 10px;
  85 + margin-right: 10px;
  86 + float: left;
  87 + &.week {
  88 + background-color: #FA972F;
  89 + padding: 0 8px 4px 8px;
  90 + color: #fff;
  91 + font-size: 22px;
  92 + font-weight: 500;
  93 + border-radius: 6px;
  94 + }
  95 + &.good {
  96 + background-color: #FC1541;
  97 + padding: 0 8px 4px 8px;
  98 + color: #fff;
  99 + font-size: 22px;
  100 + font-weight: 500;
  101 + border-radius: 6px;
  102 + }
  103 + }
  104 + }
  105 + .grey-title{
  106 + clear: both;
  107 + font-size: 36px;
  108 + height: 76px;
  109 + }
83 110 .coupon-box {
  111 + clear: both;
84 112 display: inline;
85 113 margin-top: 8px;
86 114 padding: 1px 6px;
... ... @@ -90,11 +118,12 @@
90 118 border-radius: 4px;
91 119 }
92 120 .price-box {
  121 + clear: both;
93 122 display: flex;
94 123 justify-content: space-between;
95 124 align-items: center;
96   - margin-top: 10px;
97 125 margin-bottom: 20px;
  126 + padding-top: 10px;
98 127 .left {
99 128 display: flex;
100 129 justify-content: flex-start;
... ... @@ -123,6 +152,7 @@
123 152 }
124 153 /**积分显示*/
125 154 .grade-box {
  155 + clear: both;
126 156 height: 50px;
127 157 font-size: 36px;
128 158 font-weight: 500;
... ... @@ -132,14 +162,14 @@
132 162 align-items: center;
133 163 /**红色字*/
134 164 .num{
135   - font-size: 36px;
136   - font-weight: 500;
137   - color: #FC1541;
  165 + font-size: 36px;
  166 + font-weight: 500;
  167 + color: #FC1541;
138 168 }
139 169 /**健康商城商品颜色*/
140 170 .grey-box{
141   - color: #3EB781;
142   - font-size: 36px;
  171 + color: #3EB781;
  172 + font-size: 36px;
143 173 }
144 174 span {
145 175 font-size: 24px;
... ... @@ -150,20 +180,21 @@
150 180 }
151 181 /**积分加现金*/
152 182 .price-title-box{
153   - height: 42px;
154   - font-size: 30px;
155   - font-weight: 400;
156   - color: #FC1541;
157   - line-height: 42px;
158   - overflow: hidden;
159   - text-overflow: ellipsis;
160   - white-space: nowrap;
  183 + clear: both;
  184 + height: 42px;
  185 + font-size: 30px;
  186 + font-weight: 400;
  187 + color: #FC1541;
  188 + line-height: 42px;
  189 + overflow: hidden;
  190 + text-overflow: ellipsis;
  191 + white-space: nowrap;
161 192 }
162 193 }
163   - /*兼容积分商城样式*/
164   - .integral-content-box{
165   - width: 100%;
166   - }
  194 + /*兼容积分商城样式*/
  195 + .integral-content-box{
  196 + width: 100%;
  197 + }
167 198 &.g-2 {
168 199 .content-box {
169 200 .title {
... ... @@ -195,4 +226,4 @@
195 226 }
196 227 }
197 228 }
198 229 -}
  230 +}
199 231 \ No newline at end of file
... ...
src/components/goodsItem_7/goodsItem_7.vue
  View file @1ed1800
... ... @@ -2,15 +2,17 @@
2 2 <div class="goods-item-7-box" v-if="item" @click="jump(item)">
3 3 <div class="item" :class="'g-' + goodType">
4 4 <div class="img-box">
  5 +
  6 + <!-- 产品图片 -->
5 7 <img v-lazy="item.simg + SIGN.MIDDLE" class="img" />
6 8  
7   - <!-- 补货中按钮 -->
8   - <div v-if="item && item.stock && item.stock == 0" class="goods_active">
  9 + <!-- 补货中提示 -->
  10 + <div v-if="item && item.stock && item.stock <= 0" class="goods_active">
9 11 补货中
10 12 </div>
11 13  
12 14 <!-- goodType=1为积分商城定义实物商品展示tip积分+现金形式 -->
13   - <div v-if="goodType == 1 && item && item.price && parseInt(item.price)>0" class="goods_tip">
  15 + <div v-if="goodType == 1 && item && item.price && parseInt(item.price) > 0" class="goods_tip">
14 16 积分+现金
15 17 </div>
16 18  
... ... @@ -18,20 +20,34 @@
18 20 <slot name="flag"></slot>
19 21 </div>
20 22 <div class="content-box" :class="{'integral-content-box':company == 1 || company == 2}">
21   - <div class="title" :class="{'grey-title':company == 2}">{{item.title}}</div>
  23 + <div class="title" :class="{'grey-title':company == 2}">
  24 + {{item.title}}
  25 + </div>
  26 +
  27 + <!-- 运营标签 -->
  28 + <div class="tags-box" v-if="item.istop && item.istop == '2'">
  29 + <div class="tag week">本周推荐</div>
  30 + </div>
  31 +
22 32 <!-- <div class="coupon-box">
23 33 满180减10
24 34 </div> -->
25   - <!-- 积分加现金 -->
26   - <div v-if="goodType == 1" class="price-title-box">
27   - {{parseInt(item.num)>9999?this.formatDecimal((parseInt(item.num) / 10000), 0) +"万":item.num}}<span>积分 <span v-show="parseInt(item.price)>0">+ {{item.price}}元</span></span>
28   - </div>
29   - <!-- 积分 -->
30   - <div v-else-if="company == 1 || company == 2" class="grade-box" >
31   - <span class="num" :class="{'grey-box':company == 2}"> {{parseInt(item.num)>9999?this.formatDecimal((parseInt(item.num) / 10000), 0) +"万":item.num}}</span>
32   - <span v-if="company==1">积分</span><span v-else>健康值</span>
  35 +
  36 + <!-- 积分加现金 -->
  37 + <div v-if="goodType == 1" class="price-title-box">
  38 + {{parseInt(item.num) > 9999 ? this.formatDecimal((parseInt(item.num) / 10000), 0) + "万" : item.num}}<span>积分 <span v-show="parseInt(item.price)>0">+ {{item.price}}元</span></span>
  39 + </div>
  40 +
  41 + <!-- 积分 -->
  42 + <div v-else-if="company == 1 || company == 2" class="grade-box" >
  43 + <span class="num" :class="{'grey-box':company == 2}">
  44 + {{parseInt(item.num)>9999 ? this.formatDecimal((parseInt(item.num) / 10000), 0) + "万" : item.num}}
  45 + </span>
  46 + <span v-if="company==1">积分</span>
  47 + <span v-else>健康值</span>
33 48 </div>
34   - <!-- 价格 -->
  49 +
  50 + <!-- 价格 -->
35 51 <div v-else class="price-box">
36 52 <div class="left">
37 53 <div class="y">¥&nbsp;</div>
... ... @@ -49,63 +65,63 @@
49 65  
50 66 <script>
51 67 export default {
52   - data: function () {
53   - return {
54   -
55   - }
56   - },
57   - props: ["item", "goodType", "company"],
58   - computed: {
  68 + data: function () {
  69 + return {
59 70  
60   - /**
61   - * 获取输入数字的整数部分
62   - */
63   - getInteger () {
64   - return (number) => {
65   - return parseInt(number);
66   - }
  71 + }
67 72 },
  73 + props: ["item", "goodType", "company"],
  74 + computed: {
  75 +
  76 + /**
  77 + * 获取输入数字的整数部分
  78 + */
  79 + getInteger () {
  80 + return (number) => {
  81 + return parseInt(number);
  82 + }
  83 + },
68 84  
69   - /**
70   - * 获取输入数字的小数部分
71   - */
72   - getDecimal () {
73   - return (number) => {
74   -
75   - // 拆分数字
76   - let numberArr = number.toString().split(".");
77   -
78   - // 判断是否有效数部分
79   - if (numberArr.length === 2) {
80   - return numberArr[1];
81   - } else {
82   - return "00";
  85 + /**
  86 + * 获取输入数字的小数部分
  87 + */
  88 + getDecimal () {
  89 + return (number) => {
  90 +
  91 + // 拆分数字
  92 + let numberArr = number.toString().split(".");
  93 +
  94 + // 判断是否有效数部分
  95 + if (numberArr.length === 2) {
  96 + return numberArr[1];
  97 + } else {
  98 + return "00";
  99 + }
  100 + }
83 101 }
84   - }
85   - }
86   - },
87   - methods: {
88   -
89   - /**
90   - * 点击跳转
91   - * @param {object} item [数据对象]
92   - */
93   - jump (item) {
94   - this.$emit("jump", item);
95 102 },
  103 + methods: {
  104 +
  105 + /**
  106 + * 点击跳转
  107 + * @param {object} item [数据对象]
  108 + */
  109 + jump (item) {
  110 + this.$emit("jump", item);
  111 + },
96 112  
97   - /**
98   - * 主按钮点击事件
99   - * @param {object} item [数据对象]
100   - */
101   - primary (item) {
102   - this.$emit("primary", item);
  113 + /**
  114 + * 主按钮点击事件
  115 + * @param {object} item [数据对象]
  116 + */
  117 + primary (item) {
  118 + this.$emit("primary", item);
  119 + }
103 120 }
104   - }
105 121 }
106 122 </script>
107 123  
108 124 <!-- Add "scoped" attribute to limit CSS to this component only -->
109 125 <style rel="stylesheet/less" lang="less" scoped>
110   -@import './goodsItem_7';
111   -</style>
  126 + @import './goodsItem_7';
  127 +</style>
112 128 \ No newline at end of file
... ...
src/pages/discountList/discountList.vue
  View file @1ed1800
... ... @@ -343,7 +343,8 @@
343 343  
344 344 // 获取证书请求接口
345 345 this.http("/Api/" + (this.getApiVersion().good) + "/discountGoods", {
346   - uid: this.getStore("uid") || 0
  346 + uid: this.getStore("uid") || 0,
  347 + goods_id: (this.$route.query && this.$route.query.user_selected_goods_id ? this.$route.query.user_selected_goods_id : '0')
347 348 }, this.discountGoodsCallback, {
348 349 method: "POST"
349 350 });
... ...
src/pages/optimization2/optimization2.vue
  View file @1ed1800
... ... @@ -49,7 +49,7 @@
49 49 <div class="section-2 shop-list" v-if="discountLists && discountLists.length">
50 50  
51 51 <!-- 标题 -->
52   - <text-bg-title-com @more="toDiscountList"
  52 + <text-bg-title-com
53 53 :titles="{
54 54 bg: 'static/img/text_bg_title_bg_3.png'
55 55 }">
... ... @@ -75,7 +75,7 @@
75 75 <!-- 商品展示样式 10 -->
76 76 <goods-item-10 class="item" :class="'list-0'" @jump="toDiscountList(discountData.now[0])"
77 77 :item="discountData.now[0]"
78   - pid="1">
  78 + pid="3">
79 79  
80 80 <!-- 折扣角标 -->
81 81 <div class="discount-flag" slot="flag" v-if="parseFloat(discountData.now[0].price) < parseFloat(discountData.now[0].prices)">
... ... @@ -94,7 +94,7 @@
94 94 <!-- 商品展示样式 10 -->
95 95 <goods-item-10 class="item" :class="'list-1'" @jump="toDiscountList(discountData.now[1])"
96 96 :item="discountData.now[1]"
97   - pid="1">
  97 + pid="3">
98 98  
99 99 <!-- 折扣角标 -->
100 100 <div class="discount-flag" slot="flag" v-if="parseFloat(discountData.now[1].price) < parseFloat(discountData.now[1].prices)">
... ... @@ -126,9 +126,9 @@
126 126 <div class="list" v-if="pointsData.now && pointsData.now.length && pointsData.now[0].id">
127 127  
128 128 <!-- 商品展示样式 10 -->
129   - <goods-item-10 class="item" @jump="pointsMore"
  129 + <goods-item-10 class="item" @jump="pointsMore(pointsData.now[0])"
130 130 :item="pointsData.now[0]"
131   - pid="2">
  131 + pid="4">
132 132 </goods-item-10>
133 133 </div>
134 134 </transition>
... ... @@ -140,9 +140,9 @@
140 140 <div class="list" v-if="pointsData.now && pointsData.now.length && pointsData.now[1].id">
141 141  
142 142 <!-- 商品展示样式 10 -->
143   - <goods-item-10 class="item" @jump="pointsMore"
  143 + <goods-item-10 class="item" @jump="pointsMore(pointsData.now[1])"
144 144 :item="pointsData.now[1]"
145   - pid="2">
  145 + pid="4">
146 146 </goods-item-10>
147 147 </div>
148 148 </transition>
... ... @@ -251,7 +251,7 @@
251 251 </div> -->
252 252  
253 253 <!-- 热销排行 -->
254   - <div class="section hot-box" ref="hotBox" v-if="sales && sales.length" @click="toHotSaleList">
  254 + <div class="section hot-box" ref="hotBox" v-if="sales && sales.length">
255 255  
256 256 <!-- 商品样式 10 滑动 -->
257 257 <!-- <horiz-list class="components-box"
... ... @@ -269,12 +269,12 @@
269 269 </horiz-list> -->
270 270  
271 271 <!-- 热销商品自动滚动 -->
272   - <marquee-box class="marquee-box"
  272 + <marquee-box class="marquee-box" @jump="toDetail"
273 273 :lists="sales"
274 274 :options="marqueeOptions">
275 275  
276 276 <!-- 标题 -->
277   - <text-bg-title-com slot="title-box"
  277 + <text-bg-title-com slot="title-box" @more="toHotSaleList"
278 278 :titles="{
279 279 bg: 'static/img/text_bg_title_bg_5.png',
280 280 more: true
... ... @@ -393,6 +393,8 @@
393 393 showNavs: false, // 是否显示其它频道跳转，默认不显示
394 394 showIntegral: false, // 是否显示积分商城模块，默认不显示
395 395 showOptimization: true, // 默认显示品质优选，高版本不显示品质优选
  396 + toAddToShoppingCart: false, // 是否支持App内“好物推荐”的“+”加入购物车，默认跳转详情
  397 + toJumpToShopSearch: false, // 是否支持App内搜索栏跳转原生搜索页面，默认跳转H5搜索页面
396 398 points: null, // 用户积分
397 399 pointsLists: null, // 积分商城数据
398 400 pointsData: {
... ... @@ -657,6 +659,14 @@
657 659 // 获取平台版本
658 660 let version = this.$route.query.version;
659 661  
  662 + // 根据平台，判断是否符合版本，支持列表的“+”加入购物车/搜索跳转原生
  663 + if ((this.isiPhone.value && this.$parent.compareVersion(version, '2.0.0')) || (this.isAndroid.value && this.$parent.compareVersion(version, '1.8.7.0'))) {
  664 +
  665 + // 设置列表的“+”加入购物车/搜索跳转原生
  666 + this.$set(this, 'toAddToShoppingCart', true);
  667 + this.$set(this, 'toJumpToShopSearch', true);
  668 + }
  669 +
660 670 // 根据平台，判断是否符合版本，显示搜索和其它导航菜单
661 671 if ((this.isiPhone.value && this.$parent.compareVersion(version, '1.9.6')) || (this.isAndroid.value && this.$parent.compareVersion(version, '1.8.5.3'))) {
662 672  
... ... @@ -912,10 +922,10 @@
912 922 // 设置跳转参数
913 923 let params = {
914 924 type: '5',
915   - to: window.location.origin + window.location.pathname + '#/discountList',
  925 + to: window.location.origin + window.location.pathname + '#/discountList' + (item && item.id ? '?user_selected_goods_id=' + item.id : ''),
916 926 shop_type: ''
917 927 };
918   -
  928 +
919 929 // 页面跳转
920 930 this.$parent.gotoDetail(params);
921 931 }
... ... @@ -1022,7 +1032,7 @@
1022 1032 // 设置跳转参数
1023 1033 let params = {
1024 1034 type: '5',
1025   - to: window.location.origin + window.location.pathname + '#/pointsMall',
  1035 + to: window.location.origin + window.location.pathname + '#/pointsMall' + (item && item.id ? '?user_selected_goods_id=' + item.id : ''),
1026 1036 shop_type: ''
1027 1037 };
1028 1038  
... ... @@ -1078,11 +1088,19 @@
1078 1088 // 判断是否在App内
1079 1089 if (this.isCNLive.value) {
1080 1090  
1081   - // 判断加入购物车函数是否存在
1082   - if (typeof this.$parent.addToShoppingCart === 'function') {
  1091 + // 判断App版本是否支持“好物推荐”的“+”加入购物车
  1092 + if (this.toAddToShoppingCart) {
1083 1093  
1084   - // 加入购物车
1085   - this.$parent.addToShoppingCart(item);
  1094 + // 判断加入购物车函数是否存在
  1095 + if (typeof this.$parent.addToShoppingCart === 'function') {
  1096 +
  1097 + // 加入购物车
  1098 + this.$parent.addToShoppingCart(item);
  1099 + }
  1100 + } else {
  1101 +
  1102 + // 跳转详情页面
  1103 + this.toDetail(item);
1086 1104 }
1087 1105 } else {
1088 1106  
... ... @@ -1099,27 +1117,44 @@
1099 1117 // 判断是否在App内
1100 1118 if (this.isCNLive.value) {
1101 1119  
1102   - // 判断加入购物车函数是否存在
1103   - if (typeof this.$parent.jumpToShopSearch === 'function') {
  1120 + // 判断App版本是否支持跳转原生搜索页面
  1121 + if (this.toJumpToShopSearch) {
1104 1122  
1105   - // 跳转搜索页面（原生交互）
1106   - this.$parent.jumpToShopSearch();
  1123 + // 判断加入购物车函数是否存在
  1124 + if (typeof this.$parent.jumpToShopSearch === 'function') {
  1125 +
  1126 + // 跳转搜索页面（原生交互）
  1127 + this.$parent.jumpToShopSearch();
  1128 + }
  1129 + } else {
  1130 +
  1131 + // 跳转搜索页面（H5，跳转封装）
  1132 + this.toSearchH5();
1107 1133 }
1108 1134 } else {
1109 1135  
1110 1136 // 跳转搜索页面（H5，跳转封装）
1111   - if (typeof this.$parent.gotoDetail === 'function') {
  1137 + this.toSearchH5();
  1138 + }
  1139 + },
1112 1140  
1113   - // 设置跳转参数
1114   - let params = {
1115   - type: '5',
1116   - to: window.location.origin + window.location.pathname + '#/search',
1117   - shop_type: ''
1118   - };
  1141 + /**
  1142 + * 跳转H5搜索页面
  1143 + */
  1144 + toSearchH5() {
1119 1145  
1120   - // 页面跳转
1121   - this.$parent.gotoDetail(params);
1122   - }
  1146 + // 跳转搜索页面（H5，跳转封装）
  1147 + if (typeof this.$parent.gotoDetail === 'function') {
  1148 +
  1149 + // 设置跳转参数
  1150 + let params = {
  1151 + type: '5',
  1152 + to: window.location.origin + window.location.pathname + '#/search',
  1153 + shop_type: ''
  1154 + };
  1155 +
  1156 + // 页面跳转
  1157 + this.$parent.gotoDetail(params);
1123 1158 }
1124 1159 },
1125 1160  
... ...