w-front-end / select_good · Commits

Commit e2da349634cfe545f74e9d66b128fa5dcebb6387

Authored by 王强
1 parent 0b03318f

商城首页开发中~

Inline Side-by-side
Showing 10 changed files with 445 additions and 64 deletions
src/components/goodsItem_1/goodsItem_1.less 0 → 100644
  View file @e2da349
  1 +@charset "UTF-8";
  2 +
  3 +.goods-item-1-box {
  4 + background-color: transparent;
  5 + width: 200px;
  6 + height: auto;
  7 + .img-box {
  8 + display: flex;
  9 + justify-content: center;
  10 + align-items: center;
  11 + width: 200px;
  12 + height: 200px;
  13 + .simg {
  14 + display: block;
  15 + width: 200px;
  16 + }
  17 + }
  18 + .title {
  19 + display: -webkit-box;
  20 + margin-top: 20px;
  21 + color: #666666;
  22 + font-size: 28px;
  23 + min-height: 64px;
  24 + -webkit-line-clamp: 2;
  25 + -webkit-box-orient: vertical;
  26 + text-overflow: ellipsis;
  27 + overflow: hidden;
  28 + }
  29 + .price-box {
  30 + display: flex;
  31 + justify-content: space-between;
  32 + align-items: center;
  33 + margin-top: 20px;
  34 + .price {
  35 + color: #FF725C;
  36 + font-size: 35px;
  37 + }
  38 + .add-cart {
  39 + width: 50px;
  40 + height: 50px;
  41 + .add-img {
  42 + display: block;
  43 + width: 50px;
  44 + height: 50px;
  45 + }
  46 + }
  47 + }
  48 + &.pid-2, &.pid-4 { // 小号样式
  49 + width: 170px;
  50 + .img-box {
  51 + width: 170px;
  52 + height: 170px;
  53 + .simg {
  54 + display: block;
  55 + width: 170px;
  56 + }
  57 + }
  58 + .title {
  59 + font-size: 24px;
  60 + }
  61 + .price-box {
  62 + margin-top: 10px;
  63 + }
  64 + }
  65 +}
0 \ No newline at end of file 66 \ No newline at end of file
src/components/horizList/horizList.vue renamed to src/components/goodsItem_1/goodsItem_1.vue
  View file @e2da349
1 <template> 1 <template>
2 - <div class="horiz-list-box" v-if="lists && lists.list && lists.list.length">  
3 - <div class="box">  
4 - <div class="item-box" v-for="(item, index) in lists.list" :key="index" @click="jump(item)">  
5 - <div class="img-box">  
6 - <img :src="item.simg + SIGN.SMALL" class="simg" />  
7 - </div>  
8 - <div class="title">{{item.title}}</div>  
9 - <div class="price-box">  
10 - <div class="price">{{item.price}}</div>  
11 - <div class="add-cart" @click.stop.prevent @click="addCart(item)">  
12 - <img src="static/img/" class="add-img" />  
13 - </div>  
14 - </div> 2 + <div class="goods-item-1-box" :class="'pid-' + pid" v-if="item">
  3 + <div class="img-box">
  4 + <img :src="item.simg + SIGN.SMALL" class="simg" />
  5 + </div>
  6 + <div class="title">{{item.title}}</div>
  7 + <div class="price-box">
  8 + <div class="price">￥{{item.price}}</div>
  9 + <div class="add-cart" v-if="pid == '1' || pid == '3'" @click.stop.prevent @click="addCart(item)">
  10 + <img src="static/img/icon_add.png" class="add-img" />
15 </div> 11 </div>
16 </div> 12 </div>
17 - </div> 13 + </div>
18 </template> 14 </template>
19 15
20 <script> 16 <script>
@@ -24,11 +20,12 @@ @@ -24,11 +20,12 @@
24 20
25 } 21 }
26 }, 22 },
27 - props: ["lists"], 23 + props: ["item", "pid"],
28 methods: { 24 methods: {
29 25
30 /** 26 /**
31 * 点击跳转 27 * 点击跳转
  28 + * @param {object} item [数据对象]
32 */ 29 */
33 jump(item) { 30 jump(item) {
34 this.$emit("jump", item); 31 this.$emit("jump", item);
@@ -36,6 +33,7 @@ @@ -36,6 +33,7 @@
36 33
37 /** 34 /**
38 * 加入购物车 35 * 加入购物车
  36 + * @param {object} item [数据对象]
39 */ 37 */
40 addCart(item) { 38 addCart(item) {
41 this.$emit("addCart", item); 39 this.$emit("addCart", item);
@@ -46,5 +44,5 @@ @@ -46,5 +44,5 @@
46 44
47 <!-- Add "scoped" attribute to limit CSS to this component only --> 45 <!-- Add "scoped" attribute to limit CSS to this component only -->
48 <style rel="stylesheet/less" lang="less"> 46 <style rel="stylesheet/less" lang="less">
49 - @import './horizList'; 47 + @import './goodsItem_1';
50 </style> 48 </style>
51 \ No newline at end of file 49 \ No newline at end of file
src/components/horizList/horizList.less deleted 100644 → 0
  View file @0b03318
1 -@charset "UTF-8";  
2 -  
3 -.horiz-list-box {  
4 - background-color: transparent;  
5 - width: 100%;  
6 - height: auto;  
7 - .box {  
8 -  
9 - }  
10 -}  
11 \ No newline at end of file 0 \ No newline at end of file
src/components/horizList_1/horizList_1.less 0 → 100644
  View file @e2da349
  1 +@charset "UTF-8";
  2 +
  3 +.horiz-list-1-box {
  4 + background-color: transparent;
  5 + width: 100%;
  6 + height: auto;
  7 + > .box {
  8 + margin-top: 30px;
  9 + width: 750px;
  10 + .h-box {
  11 + width: 100%;
  12 + height: auto;
  13 + overflow: hidden;
  14 + .scroll-box {
  15 + width: 100%;
  16 + height: auto;
  17 + overflow-x: auto;
  18 + overflow-y: hidden;
  19 + -webkit-overflow-scrolling: touch;
  20 + padding-bottom: 22px;
  21 + > .box {
  22 + display: flex;
  23 + justify-content: space-around;
  24 + align-items: center;
  25 + .item-box {
  26 + display: inline-flex;
  27 +
  28 + }
  29 + }
  30 + }
  31 + }
  32 + &.pid-2, &.pid-4 {
  33 + .h-box {
  34 + height: 320px;
  35 + .scroll-box {
  36 + > .box {
  37 + display: block;
  38 + .item-box {
  39 + padding-right: 40px;
  40 + &:first-child {
  41 + padding-left: 40px;
  42 + }
  43 + }
  44 + }
  45 + }
  46 + }
  47 + }
  48 + }
  49 +}
0 \ No newline at end of file 50 \ No newline at end of file
src/components/horizList_1/horizList_1.vue 0 → 100644
  View file @e2da349
  1 +<template>
  2 + <div class="horiz-list-1-box" v-if="lists && lists.length">
  3 + <div class="box" :class="'pid-' + pid">
  4 + <div class="h-box">
  5 + <div class="scroll-box" ref="scrollBox">
  6 + <div class="box" :style="'width: ' + scrollItemBox + 'vw'">
  7 + <div class="item-box" v-for="(item, index) in lists" :key="index" @click="jump(item)">
  8 +
  9 + <!-- 商品展示样式 1 -->
  10 + <goods-item-1 @jump=jump @addCart=addCart
  11 + :item="item"
  12 + :pid="pid">
  13 + </goods-item-1>
  14 + </div>
  15 + </div>
  16 + </div>
  17 + </div>
  18 + </div>
  19 + </div>
  20 +</template>
  21 +
  22 +<script>
  23 + // 引入组件
  24 + import goodsItem1 from "@/components/goodsItem_1/goodsItem_1";
  25 +
  26 + export default {
  27 + data: function () {
  28 + return {
  29 + basicWidth: 100,
  30 + scrollItemBox: 100
  31 + }
  32 + },
  33 + props: ["lists", "pid"],
  34 + components: {
  35 + goodsItem1
  36 + },
  37 + methods: {
  38 +
  39 + /**
  40 + * 点击跳转
  41 + */
  42 + jump(item) {
  43 + this.$emit("jump", item);
  44 + },
  45 +
  46 + /**
  47 + * 加入购物车
  48 + */
  49 + addCart(item) {
  50 + this.$emit("addCart", item);
  51 + },
  52 +
  53 + /**
  54 + * 设置横向滚动
  55 + * @param {object} wrapper [需要设置滚动的对象]
  56 + */
  57 + setScrollBox(wrapper) {
  58 +
  59 + // box滚动元素宽度，item对象
  60 + let scrollItemBox = 0;
  61 + let clientWidth = wrapper.clientWidth;
  62 + let multiple = clientWidth / 750;
  63 + let childrens = wrapper.children[0].children;
  64 +
  65 + // 遍历子元素，获取box宽度
  66 + for (let i = 0; i < childrens.length; i++) {
  67 + scrollItemBox += childrens[i].clientWidth;
  68 + }
  69 +
  70 + // 根据屏幕比例计算实际设置vw值
  71 + // scrollItemBox = (scrollItemBox + ((30 * multiple * (childrens.length - 1)))) / clientWidth * this.basicWidth;
  72 + scrollItemBox = ((scrollItemBox + (0 * multiple)) / clientWidth * this.basicWidth);
  73 +
  74 + // 判断scrollItemBox值，更新this.scrollItemBox宽度
  75 + if (scrollItemBox > this.basicWidth) {
  76 + this.$set(this, "scrollItemBox", scrollItemBox);
  77 + } else {
  78 + this.$set(this, "scrollItemBox", this.basicWidth);
  79 + }
  80 + }
  81 + },
  82 + watch: {
  83 +
  84 + /**
  85 + * 监听横向滚动数据加载
  86 + */
  87 + lists(newVal, oldVal) {
  88 +
  89 + // 判断是否有数据
  90 + if (typeof newVal === "object" && newVal.length > 0 && (this.pid == "2" || this.pid == "4")) {
  91 +
  92 + // 下一周期处理
  93 + this.$nextTick(function() {
  94 +
  95 + // 设置横向滚动
  96 + this.setScrollBox(this.$refs.scrollBox);
  97 + });
  98 + }
  99 + }
  100 + },
  101 + mounted() {
  102 +
  103 + // 判断如果lists有值，设置横向滚动数据
  104 + if (this.lists && this.lists.length && (this.pid == "2" || this.pid == "4")) {
  105 +
  106 + // 下一周期处理
  107 + this.$nextTick(function() {
  108 +
  109 + // 设置横向滚动
  110 + this.setScrollBox(this.$refs.scrollBox);
  111 + });
  112 + }
  113 + }
  114 + }
  115 +</script>
  116 +
  117 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  118 +<style rel="stylesheet/less" lang="less">
  119 + @import './horizList_1';
  120 +</style>
0 \ No newline at end of file 121 \ No newline at end of file
src/components/style_1/style_1.less renamed to src/components/style_7/style_7.less
  View file @e2da349
@@ -5,8 +5,10 @@ @@ -5,8 +5,10 @@
5 width: 100%; 5 width: 100%;
6 height: auto; 6 height: auto;
7 .com { 7 .com {
8 - .banner-img-box { 8 + .title-box + .banner-img-box {
9 margin-top: 30px; 9 margin-top: 30px;
  10 + }
  11 + .banner-img-box {
10 width: 100%; 12 width: 100%;
11 height: auto; 13 height: auto;
12 .banner-img { 14 .banner-img {
src/components/style_1/style_1.vue renamed to src/components/style_7/style_7.vue
  View file @e2da349
@@ -3,19 +3,20 @@ @@ -3,19 +3,20 @@
3 <div class="com"> 3 <div class="com">
4 4
5 <!-- 引入标题 --> 5 <!-- 引入标题 -->
6 - <title-box v-if="styles.titles" 6 + <title-box v-if="styles.titles" @more="more"
7 :titles="styles.titles"> 7 :titles="styles.titles">
8 </title-box> 8 </title-box>
9 9
10 <!-- Banner图 --> 10 <!-- Banner图 -->
11 - <div class="banner-img-box">  
12 - <img :src="styles.banner + SIGN.BIG" class="banner-img" mode="widthFix" /> 11 + <div class="banner-img-box" v-if="styles.market && styles.market.simg" @click="bannerJump(styles.market)">
  12 + <img :src="styles.market.simg + SIGN.BIG" class="banner-img" mode="widthFix" />
13 </div> 13 </div>
14 14
15 <!-- 横向滚动列表 --> 15 <!-- 横向滚动列表 -->
16 - <horiz-list v-if="styles.lists && styles.lists.list && styles.lists.list.length"  
17 - :lists="styles.lists">  
18 - </horiz-list> 16 + <horiz-list-1 v-if="styles.market && styles.market.goods && styles.market.goods.length" @jump=jump @addCart=addCart
  17 + :lists="styles.market.goods"
  18 + :pid="styles.market.pid">
  19 + </horiz-list-1>
19 </div> 20 </div>
20 </div> 21 </div>
21 </template> 22 </template>
@@ -24,7 +25,7 @@ @@ -24,7 +25,7 @@
24 25
25 // 引入组件 26 // 引入组件
26 import titleBox from "@/components/titleBox/titleBox"; 27 import titleBox from "@/components/titleBox/titleBox";
27 - import horizList from "@/components/horizList/horizList"; 28 + import horizList1 from "@/components/horizList_1/horizList_1";
28 29
29 export default { 30 export default {
30 data: function () { 31 data: function () {
@@ -35,23 +36,40 @@ @@ -35,23 +36,40 @@
35 props: ["styles"], 36 props: ["styles"],
36 components: { 37 components: {
37 titleBox, 38 titleBox,
38 - horizList 39 + horizList1
39 }, 40 },
40 methods: { 41 methods: {
41 42
42 -  
43 - },  
44 - watch: { 43 + /**
  44 + * 更多
  45 + * @param {object} item [数据对象]
  46 + */
  47 + more(item) {
  48 + this.$emit("more", item);
  49 + },
  50 +
  51 + /**
  52 + * banner跳转
  53 + * @param {object} item [数据对象]
  54 + */
  55 + bannerJump(item) {
  56 + this.$emit("bannerJump", item);
  57 + },
45 58
46 /** 59 /**
47 - * 监听styles变化 60 + * 点击跳转
  61 + * @param {object} item [数据对象]
48 */ 62 */
49 - styles(newVal, oldVal) { 63 + jump(item) {
  64 + this.$emit("jump", item);
  65 + },
50 66
51 - // 设置横向滚动列表样式  
52 - if (this.styles.lists && this.styles.lists.length) {  
53 - this.$set(this.styles.lists, "style", "big-3");  
54 - } 67 + /**
  68 + * 加入购物车
  69 + * @param {object} item [数据对象]
  70 + */
  71 + addCart(item) {
  72 + this.$emit("addCart", item);
55 } 73 }
56 } 74 }
57 } 75 }
@@ -59,5 +77,5 @@ @@ -59,5 +77,5 @@
59 77
60 <!-- Add "scoped" attribute to limit CSS to this component only --> 78 <!-- Add "scoped" attribute to limit CSS to this component only -->
61 <style rel="stylesheet/less" lang="less"> 79 <style rel="stylesheet/less" lang="less">
62 - @import './style_1'; 80 + @import './style_7';
63 </style> 81 </style>
64 \ No newline at end of file 82 \ No newline at end of file
src/components/titleBox/titleBox.vue
  View file @e2da349
@@ -4,7 +4,7 @@ @@ -4,7 +4,7 @@
4 <div class="title-img-box"> 4 <div class="title-img-box">
5 <img :src="titles.simg" class="title-img" mode="widthFix" /> 5 <img :src="titles.simg" class="title-img" mode="widthFix" />
6 </div> 6 </div>
7 - <div class="more-box" @click="more(titles.is_more)"> 7 + <div class="more-box" v-if="titles.is_more" @click="more(titles.more_data)">
8 <div class="more-text">更多</div> 8 <div class="more-text">更多</div>
9 <img class="more-arrow-right-img" src="static/img/icon_arrow_right.png" /> 9 <img class="more-arrow-right-img" src="static/img/icon_arrow_right.png" />
10 </div> 10 </div>
src/pages/com/com.vue
  View file @e2da349
@@ -3,9 +3,9 @@ @@ -3,9 +3,9 @@
3 3
4 4
5 <!-- style_1组件 --> 5 <!-- style_1组件 -->
6 - <style-1  
7 - :styles="style1">  
8 - </style-1> 6 + <style-7 @more="moreA" @bannerJump="bannerJumpA" @jump=jumpA @addCart=addCartA
  7 + :styles="styleA">
  8 + </style-7>
9 9
10 10
11 11
@@ -22,7 +22,7 @@ @@ -22,7 +22,7 @@
22 22
23 // 引入组件 23 // 引入组件
24 import { Toast, Indicator } from "mint-ui"; 24 import { Toast, Indicator } from "mint-ui";
25 - import style1 from "@/components/style_1/style_1"; 25 + import style7 from "@/components/style_7/style_7";
26 26
27 27
28 28
@@ -32,16 +32,69 @@ @@ -32,16 +32,69 @@
32 data () { 32 data () {
33 return { 33 return {
34 title: "", 34 title: "",
35 - style1: {  
36 - titles: {  
37 - title: "static/img/title.png",  
38 - more: {  
39 - haveMore: true  
40 - }  
41 - },  
42 - banner: "static/img/banner-02.jpg",  
43 - lists: {  
44 - list: [] 35 + styleA: {
  36 + "id": "1567",
  37 + "simg": "https://wjjtest.ys2.cnliveimg.com/shop/img/2020/03/26/5e7c442f13a41.png",
  38 + "style": "7",
  39 + "title": "网家家生鲜",
  40 + "video": "",
  41 + "video_img": "",
  42 + "w": "90",
  43 + "h": "90",
  44 + "img": [],
  45 + "market": {
  46 + "id": "66",
  47 + "title": "火锅测试",
  48 + "icon": "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/05/06/5ccfa14759478.png",
  49 + "simg": "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/05/06/5ccfa14a3c3fe.jpg",
  50 + "pid": "4",
  51 + "type": "13",
  52 + "to": "66",
  53 + "shop_type": "",
  54 + "goods": [
  55 + {
  56 + "id": "9520377",
  57 + "title": "测试优惠劵",
  58 + "simg": "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/04/29/5cc5e6f49256e.png",
  59 + "price": "120.00",
  60 + "shop_type": "1"
  61 + },
  62 + {
  63 + "id": "9520377",
  64 + "title": "测试优惠劵",
  65 + "simg": "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/04/29/5cc5e6f49256e.png",
  66 + "price": "120.00",
  67 + "shop_type": "1"
  68 + },
  69 + {
  70 + "id": "9520377",
  71 + "title": "测试优惠劵",
  72 + "simg": "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/04/29/5cc5e6f49256e.png",
  73 + "price": "120.00",
  74 + "shop_type": "1"
  75 + },
  76 + {
  77 + "id": "9520377",
  78 + "title": "测试优惠劵",
  79 + "simg": "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/04/29/5cc5e6f49256e.png",
  80 + "price": "120.00",
  81 + "shop_type": "1"
  82 + },
  83 + {
  84 + "id": "9520377",
  85 + "title": "测试优惠劵",
  86 + "simg": "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/04/29/5cc5e6f49256e.png",
  87 + "price": "120.00",
  88 + "shop_type": "1"
  89 + },
  90 + {
  91 + "id": "9520377",
  92 + "title": "测试优惠劵",
  93 + "simg": "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/04/29/5cc5e6f49256e.png",
  94 + "price": "120.00",
  95 + "shop_type": "1"
  96 + }
  97 + ]
45 } 98 }
46 }, 99 },
47 100
@@ -54,7 +107,7 @@ @@ -54,7 +107,7 @@
54 } 107 }
55 }, 108 },
56 components: { 109 components: {
57 - style1, 110 + style7,
58 111
59 112
60 113
@@ -73,19 +126,94 @@ @@ -73,19 +126,94 @@
73 methods: { 126 methods: {
74 127
75 /** 128 /**
76 - * 更多 129 + * 更多A
77 * @param {object} item [数据对象] 130 * @param {object} item [数据对象]
78 */ 131 */
79 - more(item) { 132 + moreA(item) {
80 133
81 134
82 - console.log("more", item); 135 + console.log("moreA", item);
83 136
84 137
85 138
86 }, 139 },
87 140
  141 + /**
  142 + * Banner跳转A
  143 + * @param {object} item [数据对象]
  144 + */
  145 + bannerJumpA(item) {
  146 +
  147 + // 判断并调用通用跳转
  148 + if (typeof this.$parent.gotoDetail === "function") {
  149 + this.$parent.gotoDetail(item);
  150 + }
  151 + },
  152 +
  153 + /**
  154 + * 跳转A
  155 + * @param {object} item [数据对象]
  156 + */
  157 + jumpA(item) {
  158 +
  159 +
  160 + console.log("jumpA", item);
  161 +
  162 +
88 163
  164 + },
  165 +
  166 + /**
  167 + * 加入购物车A
  168 + * @param {object} item [数据对象]
  169 + */
  170 + addCartA(item) {
  171 +
  172 +
  173 + console.log("addCartA", item);
  174 +
  175 +
  176 +
  177 + },
  178 +
  179 + /**
  180 + * 更多B
  181 + * @param {object} item [数据对象]
  182 + */
  183 + moreB(item) {
  184 +
  185 +
  186 + console.log("moreB", item);
  187 +
  188 +
  189 +
  190 + },
  191 +
  192 + /**
  193 + * 跳转A
  194 + * @param {object} item [数据对象]
  195 + */
  196 + jumpB(item) {
  197 +
  198 +
  199 + console.log("jumpA", item);
  200 +
  201 +
  202 +
  203 + },
  204 +
  205 + /**
  206 + * 加入购物车A
  207 + * @param {object} item [数据对象]
  208 + */
  209 + addCartB(item) {
  210 +
  211 +
  212 + console.log("addCartA", item);
  213 +
  214 +
  215 +
  216 + },
89 217
90 218
91 219
src/router/index.js
  View file @e2da349
@@ -26,6 +26,17 @@ const router = new Router({ @@ -26,6 +26,17 @@ const router = new Router({
26 meta: { 26 meta: {
27 requireAuth: false 27 requireAuth: false
28 } 28 }
  29 + },
  30 + {
  31 + // 首页
  32 + path: "/com",
  33 + name: "com",
  34 + component: resolve => {
  35 + require(["@/pages/com/com"], resolve);
  36 + },
  37 + meta: {
  38 + requireAuth: false
  39 + }
29 } 40 }
30 ] 41 ]
31 }, 42 },