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 163 "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=",
164 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 171 "ansi-html": {
167 172 "version": "0.0.7",
168 173 "resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.7.tgz",
... ...
package.json
  View file @c206f22
... ... @@ -10,6 +10,7 @@
10 10 "build": "node build/build.js"
11 11 },
12 12 "dependencies": {
  13 + "animate.css": "^4.1.1",
13 14 "callapp-lib": "^2.1.8",
14 15 "crypto-js": "^3.1.9-1",
15 16 "es6-promise": "^4.2.8",
... ...
src/components/goodsItem_10/goodsItem_10.less
  View file @c206f22
... ... @@ -33,6 +33,7 @@
33 33 justify-content: center;
34 34 align-items: baseline;
35 35 margin-top: 20px;
  36 + height: 32px;
36 37 .symbol {
37 38 color: #FC1541;
38 39 font-size: 24px;
... ...
src/components/goodsItem_10/goodsItem_10.vue
  View file @c206f22
1 1 <template>
2 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 4 <div class="img-box">
5 5 <img v-lazy="item.simg + SIGN.SMALL" class="simg" />
6 6 </div>
7 7 <slot name="flag"></slot>
8 8 </div>
9   - <div class="content-box">
  9 + <div class="content-box" v-if="item.price || item.num">
10 10  
11 11 <div class="price-box" v-if="pid == '1'">
12 12 <div class="symbol">¥</div>
... ...
src/main.js
  View file @c206f22
... ... @@ -24,6 +24,8 @@ import App from &quot;./App&quot;;
24 24 import IdCard from "./common/IdCard";
25 25 import VueClipboard from "vue-clipboard2";
26 26 import VueBus from "vue-bus";
  27 +import animate from 'animate.css';
  28 +
27 29 Vue.use(Vuex);
28 30 Vue.use(VueResource);
29 31 Vue.use(VueHead, { separator: " " });
... ... @@ -45,6 +47,7 @@ Vue.use(Lazyload, {
45 47 error: "static/img/x.jpg",
46 48 attempt: 3
47 49 });
  50 +Vue.use(animate);
48 51 // 身份证校验
49 52 Vue.prototype.validid = IdCard;
50 53 // 新增Bug通讯
... ...
src/pages/optimization2/optimization2.less
  View file @c206f22
... ... @@ -170,9 +170,16 @@
170 170 }
171 171 }
172 172 .list-box {
  173 + position: relative;
173 174 display: flex;
174 175 justify-content: space-between;
175 176 align-items: center;
  177 + .list {
  178 + visibility: visible;
  179 + width: 50%;
  180 + width: auto;
  181 + height: auto;
  182 + }
176 183 .discount-flag {
177 184 position: absolute;
178 185 top: 4px;
... ...
src/pages/optimization2/optimization2.vue
  View file @c206f22
... ... @@ -66,16 +66,43 @@
66 66 <!-- 商品列表 -->
67 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 104 </div>
78   - </goods-item-10>
  105 + </transition>
79 106 </div>
80 107 </div>
81 108  
... ... @@ -92,11 +119,33 @@
92 119 <!-- 商品列表 -->
93 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 149 </div>
101 150 </div>
102 151 </div>
... ... @@ -302,28 +351,38 @@
302 351 name: 'optimization',
303 352 data () {
304 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 386 loading: false,
328 387 loadingNow: false,
329 388 finished: false,
... ... @@ -597,26 +656,57 @@
597 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 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 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 711 for (let i = 0; i < this.navs.length; i++) {
622 712  
... ... @@ -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 1102 back() {
... ...