w-front-end / select_good · Commits

Commit 7d697c09c709c4a6b9ee3ebc20d6eee2cd75177f

Authored by 王强
1 parent 2d804393

购好物，首页，“积分商城”模块改为“电视购物”模块~

Inline Side-by-side
Showing 3 changed files with 178 additions and 13 deletions
src/components/goodsItem_10/goodsItem_10.vue
  View file @7d697c0
@@ -8,10 +8,10 @@ @@ -8,10 +8,10 @@
8 </div> 8 </div>
9 <div class="content-box" v-if="item.price || item.num"> 9 <div class="content-box" v-if="item.price || item.num">
10 10
11 - <div class="price-box" v-if="pid == '1' || pid == '3'"> 11 + <div class="price-box" v-if="pid == '1' || pid == '3' || pid == '5'">
12 <div class="symbol">¥</div> 12 <div class="symbol">¥</div>
13 <div class="price">{{item.price}}</div> 13 <div class="price">{{item.price}}</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> --> 14 + <!-- <div class="prices" v-if="(pid == '1' || pid == '3' || pid == '3' || pid == '5') && item.prices && parseFloat(item.prices) > 0 && parseFloat(item.prices) > parseFloat(item.price)">¥{{item.prices}}</div> -->
15 </div> 15 </div>
16 16
17 <!-- <div class="price-box" v-if="(pid == '2' || pid == '4') && item.price && parseFloat(item.price) > 0"> 17 <!-- <div class="price-box" v-if="(pid == '2' || pid == '4') && item.price && parseFloat(item.price) > 0">
@@ -26,13 +26,13 @@ @@ -26,13 +26,13 @@
26 </div> 26 </div>
27 27
28 <!-- 划线价格 --> 28 <!-- 划线价格 -->
29 - <div class="prices-box" v-if="pid == '3' && item.prices && parseFloat(item.prices) > 0 && parseFloat(item.prices) > parseFloat(item.price)"> 29 + <div class="prices-box" v-if="(pid == '3' || pid == '5') && item.prices && parseFloat(item.prices) > 0 && parseFloat(item.prices) > parseFloat(item.price)">
30 <div class="symbol">¥</div> 30 <div class="symbol">¥</div>
31 <div class="prices">{{item.prices}}</div> 31 <div class="prices">{{item.prices}}</div>
32 </div> 32 </div>
33 33
34 <!-- 划线价格高度占位 --> 34 <!-- 划线价格高度占位 -->
35 - <div class="prices-pl-box" v-else-if="pid == '4' && (!item.prices || parseFloat(item.prices) <= 0)"></div> 35 + <div class="prices-pl-box" v-else-if="(pid == '4' || pid == '5') && (!item.prices || parseFloat(item.prices) <= 0)"></div>
36 </div> 36 </div>
37 </div> 37 </div>
38 </template> 38 </template>
src/pages/optimization2/optimization2.vue
  View file @7d697c0
@@ -43,8 +43,8 @@ @@ -43,8 +43,8 @@
43 </icon-swiper-box> 43 </icon-swiper-box>
44 </div> 44 </div>
45 45
46 - <!-- 折扣专区/积分商城 -->  
47 - <div class="section-col-2" v-if="showIntegral && pointsLists && pointsLists.length"> 46 + <!-- 折扣专区/积分商城/电视购物 -->
  47 + <div class="section-col-2" v-if="(showIntegral && pointsLists && pointsLists.length) || (showTVGoods && tvGoodsLists && tvGoodsLists.length)">
48 48
49 <!-- 折扣专区 --> 49 <!-- 折扣专区 -->
50 <div class="section-2 shop-list" v-if="discountLists && discountLists.length"> 50 <div class="section-2 shop-list" v-if="discountLists && discountLists.length">
@@ -76,7 +76,7 @@ @@ -76,7 +76,7 @@
76 <!-- 商品展示样式 10 --> 76 <!-- 商品展示样式 10 -->
77 <goods-item-10 class="item" :class="'list-0'" @jump="toDiscountList(discountData.now[0])" 77 <goods-item-10 class="item" :class="'list-0'" @jump="toDiscountList(discountData.now[0])"
78 :item="discountData.now[0]" 78 :item="discountData.now[0]"
79 - pid="3"> 79 + pid="5">
80 80
81 <!-- 折扣角标 --> 81 <!-- 折扣角标 -->
82 <div class="discount-flag" slot="flag" v-if="parseFloat(discountData.now[0].price) < parseFloat(discountData.now[0].prices)"> 82 <div class="discount-flag" slot="flag" v-if="parseFloat(discountData.now[0].price) < parseFloat(discountData.now[0].prices)">
@@ -95,7 +95,7 @@ @@ -95,7 +95,7 @@
95 <!-- 商品展示样式 10 --> 95 <!-- 商品展示样式 10 -->
96 <goods-item-10 class="item" :class="'list-1'" @jump="toDiscountList(discountData.now[1])" 96 <goods-item-10 class="item" :class="'list-1'" @jump="toDiscountList(discountData.now[1])"
97 :item="discountData.now[1]" 97 :item="discountData.now[1]"
98 - pid="3"> 98 + pid="5">
99 99
100 <!-- 折扣角标 --> 100 <!-- 折扣角标 -->
101 <div class="discount-flag" slot="flag" v-if="parseFloat(discountData.now[1].price) < parseFloat(discountData.now[1].prices)"> 101 <div class="discount-flag" slot="flag" v-if="parseFloat(discountData.now[1].price) < parseFloat(discountData.now[1].prices)">
@@ -149,6 +149,49 @@ @@ -149,6 +149,49 @@
149 </transition> 149 </transition>
150 </div> 150 </div>
151 </div> 151 </div>
  152 +
  153 + <!-- 电视购物 -->
  154 + <div class="section-2 shop-list" v-if="showTVGoods && tvGoodsLists && tvGoodsLists.length">
  155 +
  156 + <!-- 标题 -->
  157 + <text-bg-title-com
  158 + :titles="{
  159 + bg: 'static/img/text_bg_title_bg_6.png'
  160 + }">
  161 + </text-bg-title-com>
  162 +
  163 + <!-- 商品列表 -->
  164 + <div class="list-box">
  165 +
  166 + <!-- 动画 -->
  167 + <transition name="fade" appear enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut" appear-active-class="animate__animated animate__fadeIn">
  168 +
  169 + <!-- 区域容器 -->
  170 + <div class="list" v-if="tvGoodsData.now && tvGoodsData.now.length && tvGoodsData.now[0].id">
  171 +
  172 + <!-- 商品展示样式 10 -->
  173 + <goods-item-10 class="item" @jump="tvGoodsMore(tvUrl)"
  174 + :item="tvGoodsData.now[0]"
  175 + pid="5">
  176 + </goods-item-10>
  177 + </div>
  178 + </transition>
  179 +
  180 + <!-- 动画 -->
  181 + <transition name="fade" appear enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut" appear-active-class="animate__animated animate__fadeIn">
  182 +
  183 + <!-- 区域容器 -->
  184 + <div class="list" v-if="tvGoodsData.now && tvGoodsData.now.length && tvGoodsData.now[1].id">
  185 +
  186 + <!-- 商品展示样式 10 -->
  187 + <goods-item-10 class="item" @jump="tvGoodsMore(tvUrl)"
  188 + :item="tvGoodsData.now[1]"
  189 + pid="5">
  190 + </goods-item-10>
  191 + </div>
  192 + </transition>
  193 + </div>
  194 + </div>
152 </div> 195 </div>
153 196
154 <!-- 折扣专区 --> 197 <!-- 折扣专区 -->
@@ -404,6 +447,15 @@ @@ -404,6 +447,15 @@
404 index: 0, // 下一个需要展示的位置下标（积分商城now数据） 447 index: 0, // 下一个需要展示的位置下标（积分商城now数据）
405 interval: null // 轮训对象，用于判断如果有轮训对象就不再重新设置轮训了 448 interval: null // 轮训对象，用于判断如果有轮训对象就不再重新设置轮训了
406 }, 449 },
  450 + showTVGoods: false, // 是否显示电视购物模块，默认不显示
  451 + tvGoodsLists: null, // 积分商城数据
  452 + tvGoodsData: {
  453 + now: [], // 当前电视购物数据（用于动画展示）
  454 + next: 0, // 下一个需要展示的电视购物数组下标（电视购物总数据）
  455 + index: 0, // 下一个需要展示的位置下标（电视购物now数据）
  456 + interval: null // 轮训对象，用于判断如果有轮训对象就不再重新设置轮训了
  457 + },
  458 + tvUrl: null, // 电视购物跳转连接
407 likeLists: null, // 猜你喜欢列表 459 likeLists: null, // 猜你喜欢列表
408 likeNum: 0, // 猜你喜欢二维数组当前显示的下标 460 likeNum: 0, // 猜你喜欢二维数组当前显示的下标
409 subBanner: null, // 副Banner 461 subBanner: null, // 副Banner
@@ -689,7 +741,7 @@ @@ -689,7 +741,7 @@
689 // 设置用户积分 741 // 设置用户积分
690 this.$set(this.points, 'value', datas.grade); 742 this.$set(this.points, 'value', datas.grade);
691 743
692 - // 判断是否有积分商城 744 + // 判断是否有积分商城模块
693 if (this.showIntegral && datas.integral_goods && datas.integral_goods.length) { 745 if (this.showIntegral && datas.integral_goods && datas.integral_goods.length) {
694 746
695 // 判断折扣专区是否有数据 747 // 判断折扣专区是否有数据
@@ -756,7 +808,7 @@ @@ -756,7 +808,7 @@
756 // 轮训计时器 808 // 轮训计时器
757 this.pointsData.interval = setInterval(() => { 809 this.pointsData.interval = setInterval(() => {
758 810
759 - // 切换折扣专区数据 811 + // 切换积分商城数据
760 this.fade(this.pointsData, this.pointsLists); 812 this.fade(this.pointsData, this.pointsLists);
761 }, timer); 813 }, timer);
762 }, 1000); 814 }, 1000);
@@ -765,14 +817,14 @@ @@ -765,14 +817,14 @@
765 }); 817 });
766 } else { 818 } else {
767 819
768 - // 如果需要展示积分商城，并且折扣专区商品数量大于2，重新设置折扣专区模块商品数量 820 + // 如果不需要展示积分商城/积分商城数据为空，并且折扣专区商品数量大于3，重新设置折扣专区模块商品数量
769 if (this.discountLists.length > 3) { 821 if (this.discountLists.length > 3) {
770 822
771 - // 设置折扣专区模块产品数量为2个 823 + // 设置折扣专区模块产品数量为3个
772 this.$set(this, 'discountLists', [this.discountLists[0], this.discountLists[1], this.discountLists[2]]); 824 this.$set(this, 'discountLists', [this.discountLists[0], this.discountLists[1], this.discountLists[2]]);
773 } 825 }
774 826
775 - // 判断是否有积分商城 827 + // 判断是否有积分商城，如果有，删除积分商城
776 for (let i = 0; i < this.navs.length; i++) { 828 for (let i = 0; i < this.navs.length; i++) {
777 829
778 // 如果是积分商城 830 // 如果是积分商城
@@ -788,6 +840,94 @@ @@ -788,6 +840,94 @@
788 this.$set(this, 'showIntegral', false); 840 this.$set(this, 'showIntegral', false);
789 } 841 }
790 842
  843 + // 判断是否有电视购物模块
  844 + if (datas.tv_goods && datas.tv_goods.length) {
  845 +
  846 + // 判断折扣专区是否有数据
  847 + if (this.discountLists.length) {
  848 +
  849 + // 当前展示的折扣专区数据（兼容数据不足 2 个的情况）
  850 + if (this.discountLists.length >= 2) {
  851 + this.$set(this.discountData, 'now', [this.discountLists[0], this.discountLists[1]]);
  852 + } else {
  853 + this.$set(this.discountData, 'now', [this.discountLists[0]]);
  854 + }
  855 +
  856 + // 设置折扣专区下一条数据数组下标（根据数组长度，兼容数据 <= 2 的情况）
  857 + this.$set(this.discountData, 'next', this.discountData.now.length < this.discountLists.length ? this.discountData.now.length : 0);
  858 +
  859 + // 设置折扣专区计时器，每3秒切换一次数据
  860 + this.$nextTick(() => {
  861 +
  862 + // 判断是否已有轮训对象
  863 + if (!this.discountData.interval) {
  864 +
  865 + // 判断数据数量是否 > 2 ，如果是，执行切换轮训
  866 + if (this.discountData.now.length < this.discountLists.length) {
  867 +
  868 + // 轮训计时器
  869 + this.discountData.interval = setInterval(() => {
  870 +
  871 + // 切换折扣专区数据
  872 + this.fade(this.discountData, this.discountLists);
  873 + }, 5000);
  874 + }
  875 + }
  876 + });
  877 + }
  878 +
  879 + // 设置显示电视购物模块
  880 + this.$set(this, 'showTVGoods', true);
  881 + this.$set(this, 'tvUrl', datas.tv_url);
  882 +
  883 + // 电视购物数据
  884 + this.$set(this, 'tvGoodsLists', datas.tv_goods);
  885 +
  886 + // 当前展示的电视购物数据（兼容数据不足 2 个的情况）
  887 + if (this.tvGoodsLists.length >= 2) {
  888 + this.$set(this.tvGoodsData, 'now', [this.tvGoodsLists[0], this.tvGoodsLists[1]]);
  889 + } else {
  890 + this.$set(this.tvGoodsData, 'now', [this.tvGoodsLists[0]]);
  891 + }
  892 +
  893 + // 设置电视购物下一条数据数组下标
  894 + this.$set(this.tvGoodsData, 'next', this.tvGoodsData.now.length < this.tvGoodsLists.length ? this.tvGoodsData.now.length : 0);
  895 +
  896 + // 设置电视购物计时器，每3秒切换一次数据
  897 + this.$nextTick(() => {
  898 +
  899 + // 判断是否已有轮训对象
  900 + if (!this.tvGoodsData.interval) {
  901 +
  902 + // 判断数据数量是否 > 2 ，如果是，执行切换轮训
  903 + if (this.tvGoodsData.now.length < this.tvGoodsLists.length) {
  904 +
  905 + // 和折扣专区岔开，延时1秒执行
  906 + setTimeout(() => {
  907 +
  908 + // 随机生成轮训时间
  909 + let timer = (parseInt(Math.random() * (500 + 1) + 5000, 10) || 5000);
  910 +
  911 + // 轮训计时器
  912 + this.tvGoodsData.interval = setInterval(() => {
  913 +
  914 + // 切换电视购物数据
  915 + this.fade(this.tvGoodsData, this.tvGoodsLists);
  916 + }, timer);
  917 + }, 1000);
  918 + }
  919 + }
  920 + });
  921 + } else {
  922 +
  923 + // 如果不需要展示电视购物/电视购物数据为空，并且折扣专区商品数量大于3，重新设置折扣专区模块商品数量
  924 + if (this.discountLists.length > 3) {
  925 +
  926 + // 设置折扣专区模块产品数量为3个
  927 + this.$set(this, 'discountLists', [this.discountLists[0], this.discountLists[1], this.discountLists[2]]);
  928 + }
  929 + }
  930 +
791 // 判断是否有猜你喜欢 931 // 判断是否有猜你喜欢
792 if (datas.recommend_goods && datas.recommend_goods.length) { 932 if (datas.recommend_goods && datas.recommend_goods.length) {
793 933
@@ -1043,6 +1183,31 @@ @@ -1043,6 +1183,31 @@
1043 }, 1183 },
1044 1184
1045 /** 1185 /**
  1186 + * 跳转电视购物首页
  1187 + * @param {String} url [电视购物首页连接地址]
  1188 + */
  1189 + tvGoodsMore(url) {
  1190 +
  1191 + // 判断必要参数
  1192 + if (url) {
  1193 +
  1194 + // 跳转封装
  1195 + if (typeof this.$parent.gotoDetail === 'function') {
  1196 +
  1197 + // 设置跳转参数
  1198 + let params = {
  1199 + type: '34',
  1200 + to: url.indexOf('?') > -1 ? (url + '&type=web') : (url + '?type=web'),
  1201 + shop_type: ''
  1202 + };
  1203 +
  1204 + // 页面跳转
  1205 + this.$parent.gotoDetail(params);
  1206 + }
  1207 + }
  1208 + },
  1209 +
  1210 + /**
1046 * 换一租 1211 * 换一租
1047 * @param {Object} item [数据对象] 1212 * @param {Object} item [数据对象]
1048 */ 1213 */
static/img/text_bg_title_bg_6.png 0 → 100644
View file @7d697c0

9.46 KB