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 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 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 11 </div>
16 12 </div>
17   - </div>
  13 + </div>
18 14 </template>
19 15  
20 16 <script>
... ... @@ -24,11 +20,12 @@
24 20  
25 21 }
26 22 },
27   - props: ["lists"],
  23 + props: ["item", "pid"],
28 24 methods: {
29 25  
30 26 /**
31 27 * 点击跳转
  28 + * @param {object} item [数据对象]
32 29 */
33 30 jump(item) {
34 31 this.$emit("jump", item);
... ... @@ -36,6 +33,7 @@
36 33  
37 34 /**
38 35 * 加入购物车
  36 + * @param {object} item [数据对象]
39 37 */
40 38 addCart(item) {
41 39 this.$emit("addCart", item);
... ... @@ -46,5 +44,5 @@
46 44  
47 45 <!-- Add "scoped" attribute to limit CSS to this component only -->
48 46 <style rel="stylesheet/less" lang="less">
49   - @import './horizList';
  47 + @import './goodsItem_1';
50 48 </style>
51 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 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 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 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 5 width: 100%;
6 6 height: auto;
7 7 .com {
8   - .banner-img-box {
  8 + .title-box + .banner-img-box {
9 9 margin-top: 30px;
  10 + }
  11 + .banner-img-box {
10 12 width: 100%;
11 13 height: auto;
12 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 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 7 :titles="styles.titles">
8 8 </title-box>
9 9  
10 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 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 20 </div>
20 21 </div>
21 22 </template>
... ... @@ -24,7 +25,7 @@
24 25  
25 26 // 引入组件
26 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 30 export default {
30 31 data: function () {
... ... @@ -35,23 +36,40 @@
35 36 props: ["styles"],
36 37 components: {
37 38 titleBox,
38   - horizList
  39 + horizList1
39 40 },
40 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 77  
60 78 <!-- Add "scoped" attribute to limit CSS to this component only -->
61 79 <style rel="stylesheet/less" lang="less">
62   - @import './style_1';
  80 + @import './style_7';
63 81 </style>
64 82 \ No newline at end of file
... ...
src/components/titleBox/titleBox.vue
  View file @e2da349
... ... @@ -4,7 +4,7 @@
4 4 <div class="title-img-box">
5 5 <img :src="titles.simg" class="title-img" mode="widthFix" />
6 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 8 <div class="more-text">更多</div>
9 9 <img class="more-arrow-right-img" src="static/img/icon_arrow_right.png" />
10 10 </div>
... ...
src/pages/com/com.vue
  View file @e2da349
... ... @@ -3,9 +3,9 @@
3 3  
4 4  
5 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 22  
23 23 // 引入组件
24 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 32 data () {
33 33 return {
34 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 107 }
55 108 },
56 109 components: {
57   - style1,
  110 + style7,
58 111  
59 112  
60 113  
... ... @@ -73,19 +126,94 @@
73 126 methods: {
74 127  
75 128 /**
76   - * 更多
  129 + * 更多A
77 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 26 meta: {
27 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 },
... ...