w-front-end / select_good · Commits

Commit c206f223523cc09810000571422840106023af25

Authored by 王强
1 parent c729ad9b

购好物，首页改版，新版折扣专区和积分商城模块，定时3秒自动更换数据，渐入渐出~

Inline Side-by-side
Showing 7 changed files with 195 additions and 48 deletions
package-lock.json
  View file @c206f22
@@ -163,6 +163,11 @@ @@ -163,6 +163,11 @@
163 "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=", 163 "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=",
164 "dev": true 164 "dev": true
165 }, 165 },
  166 + "animate.css": {
  167 + "version": "4.1.1",
  168 + "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz",
  169 + "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
  170 + },
166 "ansi-html": { 171 "ansi-html": {
167 "version": "0.0.7", 172 "version": "0.0.7",
168 "resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.7.tgz", 173 "resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.7.tgz",
package.json
  View file @c206f22
@@ -10,6 +10,7 @@ @@ -10,6 +10,7 @@
10 "build": "node build/build.js" 10 "build": "node build/build.js"
11 }, 11 },
12 "dependencies": { 12 "dependencies": {
  13 + "animate.css": "^4.1.1",
13 "callapp-lib": "^2.1.8", 14 "callapp-lib": "^2.1.8",
14 "crypto-js": "^3.1.9-1", 15 "crypto-js": "^3.1.9-1",
15 "es6-promise": "^4.2.8", 16 "es6-promise": "^4.2.8",
src/components/goodsItem_10/goodsItem_10.less
  View file @c206f22
@@ -33,6 +33,7 @@ @@ -33,6 +33,7 @@
33 justify-content: center; 33 justify-content: center;
34 align-items: baseline; 34 align-items: baseline;
35 margin-top: 20px; 35 margin-top: 20px;
  36 + height: 32px;
36 .symbol { 37 .symbol {
37 color: #FC1541; 38 color: #FC1541;
38 font-size: 24px; 39 font-size: 24px;
src/components/goodsItem_10/goodsItem_10.vue
  View file @c206f22
1 <template> 1 <template>
2 <div class="goods-item-10-box" :class="'pid-' + pid" v-if="item" @click="jump(item)"> 2 <div class="goods-item-10-box" :class="'pid-' + pid" v-if="item" @click="jump(item)">
3 - <div class="top-box"> 3 + <div class="top-box" v-if="item.simg">
4 <div class="img-box"> 4 <div class="img-box">
5 <img v-lazy="item.simg + SIGN.SMALL" class="simg" /> 5 <img v-lazy="item.simg + SIGN.SMALL" class="simg" />
6 </div> 6 </div>
7 <slot name="flag"></slot> 7 <slot name="flag"></slot>
8 </div> 8 </div>
9 - <div class="content-box"> 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'">
12 <div class="symbol">¥</div> 12 <div class="symbol">¥</div>
src/main.js
  View file @c206f22
@@ -24,6 +24,8 @@ import App from &quot;./App&quot;; @@ -24,6 +24,8 @@ import App from &quot;./App&quot;;
24 import IdCard from "./common/IdCard"; 24 import IdCard from "./common/IdCard";
25 import VueClipboard from "vue-clipboard2"; 25 import VueClipboard from "vue-clipboard2";
26 import VueBus from "vue-bus"; 26 import VueBus from "vue-bus";
  27 +import animate from 'animate.css';
  28 +
27 Vue.use(Vuex); 29 Vue.use(Vuex);
28 Vue.use(VueResource); 30 Vue.use(VueResource);
29 Vue.use(VueHead, { separator: " " }); 31 Vue.use(VueHead, { separator: " " });
@@ -45,6 +47,7 @@ Vue.use(Lazyload, { @@ -45,6 +47,7 @@ Vue.use(Lazyload, {
45 error: "static/img/x.jpg", 47 error: "static/img/x.jpg",
46 attempt: 3 48 attempt: 3
47 }); 49 });
  50 +Vue.use(animate);
48 // 身份证校验 51 // 身份证校验
49 Vue.prototype.validid = IdCard; 52 Vue.prototype.validid = IdCard;
50 // 新增Bug通讯 53 // 新增Bug通讯
src/pages/optimization2/optimization2.less
  View file @c206f22
@@ -170,9 +170,16 @@ @@ -170,9 +170,16 @@
170 } 170 }
171 } 171 }
172 .list-box { 172 .list-box {
  173 + position: relative;
173 display: flex; 174 display: flex;
174 justify-content: space-between; 175 justify-content: space-between;
175 align-items: center; 176 align-items: center;
  177 + .list {
  178 + visibility: visible;
  179 + width: 50%;
  180 + width: auto;
  181 + height: auto;
  182 + }
176 .discount-flag { 183 .discount-flag {
177 position: absolute; 184 position: absolute;
178 top: 4px; 185 top: 4px;
src/pages/optimization2/optimization2.vue
  View file @c206f22
@@ -66,16 +66,43 @@ @@ -66,16 +66,43 @@
66 <!-- 商品列表 --> 66 <!-- 商品列表 -->
67 <div class="list-box"> 67 <div class="list-box">
68 68
69 - <!-- 商品展示样式 10 -->  
70 - <goods-item-10 class="item" v-for="(item, index) in discountLists" :key="index" @jump="toDiscountList(item)"  
71 - :item="item"  
72 - pid="1"> 69 + <!-- 动画 -->
  70 + <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">
  71 +
  72 + <!-- 区域容器 -->
  73 + <div class="list" v-if="discountData.now && discountData.now.length && discountData.now[0].id">
  74 +
  75 + <!-- 商品展示样式 10 -->
  76 + <goods-item-10 class="item" :class="'list-0'" @jump="toDiscountList(discountData.now[0])"
  77 + :item="discountData.now[0]"
  78 + pid="1">
  79 +
  80 + <!-- 折扣角标 -->
  81 + <div class="discount-flag" slot="flag" v-if="parseFloat(discountData.now[0].price) < parseFloat(discountData.now[0].prices)">
  82 + {{discountData.now[0].tag || getDiscount(discountData.now[0].price, discountData.now[0].prices)}}
  83 + </div>
  84 + </goods-item-10>
  85 + </div>
  86 + </transition>
  87 +
  88 + <!-- 动画 -->
  89 + <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">
  90 +
  91 + <!-- 区域容器 -->
  92 + <div class="list" v-if="discountData.now && discountData.now.length && discountData.now[1].id">
  93 +
  94 + <!-- 商品展示样式 10 -->
  95 + <goods-item-10 class="item" :class="'list-1'" @jump="toDiscountList(discountData.now[1])"
  96 + :item="discountData.now[1]"
  97 + pid="1">
73 98
74 - <!-- 折扣角标 -->  
75 - <div class="discount-flag" slot="flag" v-if="parseFloat(item.price) < parseFloat(item.prices)">  
76 - {{item.tag || getDiscount(item.price, item.prices)}} 99 + <!-- 折扣角标 -->
  100 + <div class="discount-flag" slot="flag" v-if="parseFloat(discountData.now[1].price) < parseFloat(discountData.now[1].prices)">
  101 + {{discountData.now[1].tag || getDiscount(discountData.now[1].price, discountData.now[1].prices)}}
  102 + </div>
  103 + </goods-item-10>
77 </div> 104 </div>
78 - </goods-item-10> 105 + </transition>
79 </div> 106 </div>
80 </div> 107 </div>
81 108
@@ -92,11 +119,33 @@ @@ -92,11 +119,33 @@
92 <!-- 商品列表 --> 119 <!-- 商品列表 -->
93 <div class="list-box"> 120 <div class="list-box">
94 121
95 - <!-- 商品展示样式 10 -->  
96 - <goods-item-10 class="item" v-for="(item, index) in pointsLists" :key="index" @jump="pointsMore"  
97 - :item="item"  
98 - pid="2">  
99 - </goods-item-10> 122 + <!-- 动画 -->
  123 + <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">
  124 +
  125 + <!-- 区域容器 -->
  126 + <div class="list" v-if="pointsData.now && pointsData.now.length && pointsData.now[0].id">
  127 +
  128 + <!-- 商品展示样式 10 -->
  129 + <goods-item-10 class="item" @jump="pointsMore"
  130 + :item="pointsData.now[0]"
  131 + pid="2">
  132 + </goods-item-10>
  133 + </div>
  134 + </transition>
  135 +
  136 + <!-- 动画 -->
  137 + <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">
  138 +
  139 + <!-- 区域容器 -->
  140 + <div class="list" v-if="pointsData.now && pointsData.now.length && pointsData.now[1].id">
  141 +
  142 + <!-- 商品展示样式 10 -->
  143 + <goods-item-10 class="item" @jump="pointsMore"
  144 + :item="pointsData.now[1]"
  145 + pid="2">
  146 + </goods-item-10>
  147 + </div>
  148 + </transition>
100 </div> 149 </div>
101 </div> 150 </div>
102 </div> 151 </div>
@@ -302,28 +351,38 @@ @@ -302,28 +351,38 @@
302 name: 'optimization', 351 name: 'optimization',
303 data () { 352 data () {
304 return { 353 return {
305 - title: "", // 标题  
306 - backs: null, // 后退按钮组  
307 - swipers: null, // 主Banner  
308 - swiperNavs: null, // 其它频道列表  
309 - navs: null, // 导航  
310 - discountType: null, // 折扣专区状态，0：未开始；1：进行中；2：已结束  
311 - discountTimeout: 0, // 倒计时超时时间计数  
312 - discountTime: null, // 倒计时时间  
313 - discountLists: null, // 折扣专区数据  
314 - quality: null, // 品质优选  
315 - salesOptions: null, // 热销排行选项  
316 - sales: null, // 热销排行数据  
317 - showSearch: false, // 是否显示搜索，默认不显示  
318 - showNavs: false, // 是否显示其它频道跳转，默认不显示  
319 - showIntegral: false, // 是否显示积分商城模块，默认不显示  
320 - showOptimization: true, // 默认显示品质优选，高版本不显示品质优选  
321 - points: null, // 用户积分  
322 - pointsLists: null, // 积分商城数据  
323 - likeLists: null, // 猜你喜欢列表  
324 - likeNum: 0, // 猜你喜欢二维数组当前显示的下标  
325 - subBanner: null, // 副Banner  
326 - shopGoodsLists: { // 推荐商品瀑布流 354 + title: "", // 标题
  355 + backs: null, // 后退按钮组
  356 + swipers: null, // 主Banner
  357 + swiperNavs: null, // 其它频道列表
  358 + navs: null, // 导航
  359 + discountType: null, // 折扣专区状态，0：未开始；1：进行中；2：已结束
  360 + discountTimeout: 0, // 倒计时超时时间计数
  361 + discountTime: null, // 倒计时时间
  362 + discountLists: null, // 折扣专区数据
  363 + discountData: {
  364 + now: [], // 当前折扣专区数据（用于动画展示）
  365 + next: 0, // 下一个需要展示的折扣专区数组下标（折扣专区总数据）
  366 + index: 0 // 下一个需要展示的位置下标（折扣专区now数据）
  367 + },
  368 + quality: null, // 品质优选
  369 + salesOptions: null, // 热销排行选项
  370 + sales: null, // 热销排行数据
  371 + showSearch: false, // 是否显示搜索，默认不显示
  372 + showNavs: false, // 是否显示其它频道跳转，默认不显示
  373 + showIntegral: false, // 是否显示积分商城模块，默认不显示
  374 + showOptimization: true, // 默认显示品质优选，高版本不显示品质优选
  375 + points: null, // 用户积分
  376 + pointsLists: null, // 积分商城数据
  377 + pointsData: {
  378 + now: [], // 当前积分商城数据（用于动画展示）
  379 + next: 0, // 下一个需要展示的积分商城数组下标（积分商城总数据）
  380 + index: 0 // 下一个需要展示的位置下标（积分商城now数据）
  381 + },
  382 + likeLists: null, // 猜你喜欢列表
  383 + likeNum: 0, // 猜你喜欢二维数组当前显示的下标
  384 + subBanner: null, // 副Banner
  385 + shopGoodsLists: { // 推荐商品瀑布流
327 loading: false, 386 loading: false,
328 loadingNow: false, 387 loadingNow: false,
329 finished: false, 388 finished: false,
@@ -597,26 +656,57 @@ @@ -597,26 +656,57 @@
597 this.$set(this.points, 'value', datas.grade); 656 this.$set(this.points, 'value', datas.grade);
598 657
599 // 判断是否有积分商城 658 // 判断是否有积分商城
600 - if (datas.integral_goods && datas.integral_goods.length) { 659 + if (this.showIntegral && datas.integral_goods && datas.integral_goods.length) {
601 660
602 - // 如果需要展示积分商城，并且折扣专区商品数量大于2，重新设置折扣专区模块商品数量  
603 - if (this.showIntegral && this.discountLists.length > 2) { 661 + // 当前展示的折扣专区数据
  662 + this.$set(this.discountData, 'now', [this.discountLists[0], this.discountLists[1]]);
604 663
605 - // 设置折扣专区模块产品数量为2个  
606 - this.$set(this, 'discountLists', [this.discountLists[0], this.discountLists[1]]);  
607 - } 664 + // 设置折扣专区下一条数据数组下标
  665 + this.$set(this.discountData, 'next', this.discountData.now.length);
  666 +
  667 + // 设置折扣专区计时器，每3秒切换一次数据
  668 + this.$nextTick(() => {
  669 +
  670 + // 轮训计时器
  671 + setInterval(() => {
  672 +
  673 + // 切换折扣专区数据
  674 + this.fade(this.discountData, this.discountLists);
  675 + }, 3000);
  676 + });
608 677
609 // 积分商城数据 678 // 积分商城数据
610 this.$set(this, 'pointsLists', datas.integral_goods); 679 this.$set(this, 'pointsLists', datas.integral_goods);
611 680
612 - // 判断积分商城模块数据大于2，只显示2个  
613 - if (this.pointsLists.length > 2) { 681 + // 当前展示的积分商城数据
  682 + this.$set(this.pointsData, 'now', [this.pointsLists[0], this.pointsLists[1]]);
614 683
615 - // 设置积分商城模块产品数量为2个  
616 - this.$set(this, 'pointsLists', [datas.integral_goods[0], datas.integral_goods[1]]);  
617 - } 684 + // 设置积分商城下一条数据数组下标
  685 + this.$set(this.pointsData, 'next', this.pointsData.now.length);
  686 +
  687 + // 设置积分商城计时器，每3秒切换一次数据
  688 + this.$nextTick(() => {
  689 +
  690 + // 和折扣专区岔开，延时1秒执行
  691 + setTimeout(() => {
  692 +
  693 + // 轮训计时器
  694 + setInterval(() => {
  695 +
  696 + // 切换折扣专区数据
  697 + this.fade(this.pointsData, this.pointsLists);
  698 + }, 3000);
  699 + }, 1000);
  700 + });
618 } else { 701 } else {
619 702
  703 + // 如果需要展示积分商城，并且折扣专区商品数量大于2，重新设置折扣专区模块商品数量
  704 + if (this.discountLists.length > 3) {
  705 +
  706 + // 设置折扣专区模块产品数量为2个
  707 + this.$set(this, 'discountLists', [this.discountLists[0], this.discountLists[1], this.discountLists[2]]);
  708 + }
  709 +
620 // 判断是否有积分商城 710 // 判断是否有积分商城
621 for (let i = 0; i < this.navs.length; i++) { 711 for (let i = 0; i < this.navs.length; i++) {
622 712
@@ -967,6 +1057,46 @@ @@ -967,6 +1057,46 @@
967 }, 1057 },
968 1058
969 /** 1059 /**
  1060 + * 淡入淡出切换函数
  1061 + * @param {Object} nows [当前数据对象]
  1062 + * @param {Object} sources [原始数据对象]
  1063 + */
  1064 + fade(nows, sources) {
  1065 +
  1066 + // 清空当前折扣专区数据（为了实现动画效果，VUE识别）
  1067 + this.$set(nows.now, nows.index, []);
  1068 +
  1069 + // 延时设置新的数据
  1070 + setTimeout(() => {
  1071 +
  1072 + // 更新当前显示的折扣专区数据
  1073 + this.$set(nows.now, nows.index, sources[nows.next]);
  1074 +
  1075 + // 设置下一个更新的数据位置
  1076 + if (nows.index >= nows.now.length - 1) {
  1077 +
  1078 + // 重置index
  1079 + this.$set(nows, 'index', 0);
  1080 + } else {
  1081 +
  1082 + // index++
  1083 + this.$set(nows, 'index', ++nows.index);
  1084 + }
  1085 +
  1086 + // 判断下一条数据是否超出数组下标范围，如果超出，设置为0
  1087 + if (nows.next >= sources.length - 1) {
  1088 +
  1089 + // 重置next
  1090 + this.$set(nows, 'next', 0);
  1091 + } else {
  1092 +
  1093 + // next下移
  1094 + this.$set(nows, 'next', ++nows.next);
  1095 + }
  1096 + }, 500);
  1097 + },
  1098 +
  1099 + /**
970 * 后退 1100 * 后退
971 */ 1101 */
972 back() { 1102 back() {