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 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' || pid == '3'">
  11 + <div class="price-box" v-if="pid == '1' || pid == '3' || pid == '5'">
12 12 <div class="symbol">¥</div>
13 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 15 </div>
16 16  
17 17 <!-- <div class="price-box" v-if="(pid == '2' || pid == '4') && item.price && parseFloat(item.price) > 0">
... ... @@ -26,13 +26,13 @@
26 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 30 <div class="symbol">¥</div>
31 31 <div class="prices">{{item.prices}}</div>
32 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 36 </div>
37 37 </div>
38 38 </template>
... ...
src/pages/optimization2/optimization2.vue
  View file @7d697c0
... ... @@ -43,8 +43,8 @@
43 43 </icon-swiper-box>
44 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 50 <div class="section-2 shop-list" v-if="discountLists && discountLists.length">
... ... @@ -76,7 +76,7 @@
76 76 <!-- 商品展示样式 10 -->
77 77 <goods-item-10 class="item" :class="'list-0'" @jump="toDiscountList(discountData.now[0])"
78 78 :item="discountData.now[0]"
79   - pid="3">
  79 + pid="5">
80 80  
81 81 <!-- 折扣角标 -->
82 82 <div class="discount-flag" slot="flag" v-if="parseFloat(discountData.now[0].price) < parseFloat(discountData.now[0].prices)">
... ... @@ -95,7 +95,7 @@
95 95 <!-- 商品展示样式 10 -->
96 96 <goods-item-10 class="item" :class="'list-1'" @jump="toDiscountList(discountData.now[1])"
97 97 :item="discountData.now[1]"
98   - pid="3">
  98 + pid="5">
99 99  
100 100 <!-- 折扣角标 -->
101 101 <div class="discount-flag" slot="flag" v-if="parseFloat(discountData.now[1].price) < parseFloat(discountData.now[1].prices)">
... ... @@ -149,6 +149,49 @@
149 149 </transition>
150 150 </div>
151 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 195 </div>
153 196  
154 197 <!-- 折扣专区 -->
... ... @@ -404,6 +447,15 @@
404 447 index: 0, // 下一个需要展示的位置下标（积分商城now数据）
405 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 459 likeLists: null, // 猜你喜欢列表
408 460 likeNum: 0, // 猜你喜欢二维数组当前显示的下标
409 461 subBanner: null, // 副Banner
... ... @@ -689,7 +741,7 @@
689 741 // 设置用户积分
690 742 this.$set(this.points, 'value', datas.grade);
691 743  
692   - // 判断是否有积分商城
  744 + // 判断是否有积分商城模块
693 745 if (this.showIntegral && datas.integral_goods && datas.integral_goods.length) {
694 746  
695 747 // 判断折扣专区是否有数据
... ... @@ -756,7 +808,7 @@
756 808 // 轮训计时器
757 809 this.pointsData.interval = setInterval(() => {
758 810  
759   - // 切换折扣专区数据
  811 + // 切换积分商城数据
760 812 this.fade(this.pointsData, this.pointsLists);
761 813 }, timer);
762 814 }, 1000);
... ... @@ -765,14 +817,14 @@
765 817 });
766 818 } else {
767 819  
768   - // 如果需要展示积分商城，并且折扣专区商品数量大于2，重新设置折扣专区模块商品数量
  820 + // 如果不需要展示积分商城/积分商城数据为空，并且折扣专区商品数量大于3，重新设置折扣专区模块商品数量
769 821 if (this.discountLists.length > 3) {
770 822  
771   - // 设置折扣专区模块产品数量为2个
  823 + // 设置折扣专区模块产品数量为3个
772 824 this.$set(this, 'discountLists', [this.discountLists[0], this.discountLists[1], this.discountLists[2]]);
773 825 }
774 826  
775   - // 判断是否有积分商城
  827 + // 判断是否有积分商城，如果有，删除积分商城
776 828 for (let i = 0; i < this.navs.length; i++) {
777 829  
778 830 // 如果是积分商城
... ... @@ -788,6 +840,94 @@
788 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 932 if (datas.recommend_goods && datas.recommend_goods.length) {
793 933  
... ... @@ -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 1212 * @param {Object} item [数据对象]
1048 1213 */
... ...
static/img/text_bg_title_bg_6.png 0 → 100644
View file @7d697c0

9.46 KB