w-front-end / select_good · Commits

Commit 174163ede0d83ad0c43f301dd236ca5b0872bc05

Authored by 王强
1 parent 2badf2fb

开发“优选”页面组件~ 商品组件2，横向滑动2完成。

Inline Side-by-side
Showing 12 changed files with 504 additions and 4 deletions
src/components/goodsItem_1/goodsItem_1.vue
  View file @174163e
1 1 <template>
2   - <div class="goods-item-1-box" :class="'pid-' + pid" v-if="item">
  2 + <div class="goods-item-1-box" :class="'pid-' + pid" v-if="item" @click="jump(item)">
3 3 <div class="img-box">
4 4 <img v-lazy="item.simg + SIGN.SMALL" class="simg" />
5 5 </div>
... ...
src/components/goodsItem_2/goodsItem_2.less 0 → 100644
  View file @174163e
  1 +@charset "UTF-8";
  2 +
  3 +.goods-item-2-box {
  4 + background-color: #ffffff;
  5 + padding: 20px 0;
  6 + width: 240px;
  7 + height: auto;
  8 + border-radius: 8px;
  9 + .img-box {
  10 + display: flex;
  11 + justify-content: center;
  12 + align-items: center;
  13 + background-color: #F9F9F9;
  14 + margin: 0 auto;
  15 + width: 200px;
  16 + height: 200px;
  17 + border-radius: 8px;
  18 + overflow: hidden;
  19 + .simg {
  20 + display: block;
  21 + width: 200px;
  22 + }
  23 + }
  24 + .content-box {
  25 + margin: 0 auto;
  26 + width: 200px;
  27 + .title {
  28 + margin-top: 10px;
  29 + color: #333333;
  30 + font-size: 24px;
  31 + white-space: nowrap;
  32 + text-overflow: ellipsis;
  33 + overflow: hidden;
  34 + }
  35 + .price-box {
  36 + display: flex;
  37 + justify-content: flex-start;
  38 + align-items: center;
  39 + margin-top: 20px;
  40 + .symbol {
  41 + color: #FC1541;
  42 + font-size: 20px;
  43 + }
  44 + .price {
  45 + color: #FC1541;
  46 + font-size: 30px;
  47 + white-space: nowrap;
  48 + text-overflow: ellipsis;
  49 + overflow: hidden;
  50 + }
  51 + }
  52 + }
  53 +
  54 + &.pid-2 { // 排名样式
  55 + .content-box {
  56 + .price-box {
  57 + justify-content: center;
  58 + }
  59 + .ads {
  60 + margin-top: 15px;
  61 + text-align: center;
  62 + color: #999999;
  63 + font-size: 24px;
  64 + white-space: nowrap;
  65 + text-overflow: ellipsis;
  66 + overflow: hidden;
  67 + }
  68 + }
  69 + }
  70 +}
0 71 \ No newline at end of file
... ...
src/components/goodsItem_2/goodsItem_2.vue 0 → 100644
  View file @174163e
  1 +<template>
  2 + <div class="goods-item-2-box" :class="'pid-' + pid" v-if="item" @click="jump(item)">
  3 + <div class="img-box">
  4 + <img v-lazy="item.simg + SIGN.SMALL" class="simg" />
  5 + </div>
  6 + <div class="content-box">
  7 + <div class="title" v-if="pid == undefined || pid == '1'">{{item.title}}</div>
  8 + <div class="price-box">
  9 + <div class="symbol">￥</div>
  10 + <div class="price">{{item.price}}</div>
  11 + </div>
  12 + <div class="ads" v-if="pid == '2'">
  13 + 爆卖1000件
  14 + </div>
  15 + </div>
  16 + </div>
  17 +</template>
  18 +
  19 +<script>
  20 + export default {
  21 + data: function () {
  22 + return {
  23 +
  24 + }
  25 + },
  26 + props: ["item", "pid"],
  27 + methods: {
  28 +
  29 + /**
  30 + * 点击跳转
  31 + * @param {object} item [数据对象]
  32 + */
  33 + jump(item) {
  34 + this.$emit("jump", item);
  35 + }
  36 + }
  37 + }
  38 +</script>
  39 +
  40 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  41 +<style rel="stylesheet/less" lang="less">
  42 + @import './goodsItem_2';
  43 +</style>
0 44 \ No newline at end of file
... ...
src/components/horizList_1/horizList_1.vue
  View file @174163e
... ... @@ -4,7 +4,7 @@
4 4 <div class="h-box">
5 5 <div class="scroll-box" ref="scrollBox">
6 6 <div class="box" :style="'width: ' + scrollItemBox + 'vw'">
7   - <div class="item-box" v-for="(item, index) in lists" :key="index" @click="jump(item)">
  7 + <div class="item-box" v-for="(item, index) in lists" :key="index">
8 8  
9 9 <!-- 商品展示样式 1 -->
10 10 <goods-item-1 @jump=jump @addCart=addCart
... ...
src/components/horizList_2/horizList_2.less 0 → 100644
  View file @174163e
  1 +@charset "UTF-8";
  2 +
  3 +.horiz-list-2-box {
  4 + background-color: transparent;
  5 + width: 100%;
  6 + height: auto;
  7 + .title-box + .box {
  8 + margin-top: 30px;
  9 + }
  10 + > .box {
  11 + margin-top: 30px;
  12 + width: 750px;
  13 + .h-box {
  14 + width: 100%;
  15 + height: 354px;
  16 + overflow: hidden;
  17 + .scroll-box {
  18 + width: 100%;
  19 + height: auto;
  20 + overflow-x: auto;
  21 + overflow-y: hidden;
  22 + -webkit-overflow-scrolling: touch;
  23 + padding-bottom: 26px;
  24 + > .box {
  25 + display: block;
  26 + .item-box {
  27 + display: inline-flex;
  28 + padding-right: 30px;
  29 + &:first-child {
  30 + padding-left: 30px;
  31 + }
  32 + }
  33 + }
  34 + }
  35 + }
  36 + &.pid-2 {
  37 + .h-box {
  38 + height: 360px;
  39 + .scroll-box {
  40 + padding-bottom: 26px;
  41 + }
  42 + }
  43 + }
  44 + }
  45 +}
0 46 \ No newline at end of file
... ...
src/components/horizList_2/horizList_2.vue 0 → 100644
  View file @174163e
  1 +<template>
  2 + <div class="horiz-list-2-box" v-if="lists && lists.length">
  3 + <slot name="title-box"></slot>
  4 + <div class="box" :class="'pid-' + pid">
  5 + <div class="h-box">
  6 + <div class="scroll-box" ref="scrollBox">
  7 + <div class="box" :style="'width: ' + scrollItemBox + 'vw'">
  8 + <div class="item-box" v-for="(item, index) in lists" :key="index">
  9 +
  10 + <!-- 商品展示样式 2 -->
  11 + <goods-item-2 @jump=jump
  12 + :item="item"
  13 + :pid="pid">
  14 + </goods-item-2>
  15 + </div>
  16 + </div>
  17 + </div>
  18 + </div>
  19 + </div>
  20 + </div>
  21 +</template>
  22 +
  23 +<script>
  24 + // 引入组件
  25 + import goodsItem2 from "@/components/goodsItem_2/goodsItem_2";
  26 +
  27 + export default {
  28 + data: function () {
  29 + return {
  30 + basicWidth: 100,
  31 + scrollItemBox: 100
  32 + }
  33 + },
  34 + props: ["lists", "pid"],
  35 + components: {
  36 + goodsItem2
  37 + },
  38 + methods: {
  39 +
  40 + /**
  41 + * 点击跳转
  42 + */
  43 + jump(item) {
  44 + this.$emit("jump", item);
  45 + },
  46 +
  47 + /**
  48 + * 设置横向滚动
  49 + * @param {object} wrapper [需要设置滚动的对象]
  50 + */
  51 + setScrollBox(wrapper) {
  52 +
  53 + // box滚动元素宽度，item对象
  54 + let scrollItemBox = 0;
  55 + let clientWidth = wrapper.clientWidth;
  56 + let multiple = clientWidth / 750;
  57 + let childrens = wrapper.children[0].children;
  58 +
  59 + // 遍历子元素，获取box宽度
  60 + for (let i = 0; i < childrens.length; i++) {
  61 + scrollItemBox += childrens[i].clientWidth;
  62 + }
  63 +
  64 + // 根据屏幕比例计算实际设置vw值
  65 + // scrollItemBox = (scrollItemBox + ((30 * multiple * (childrens.length - 1)))) / clientWidth * this.basicWidth;
  66 + scrollItemBox = ((scrollItemBox + (0 * multiple)) / clientWidth * this.basicWidth);
  67 +
  68 + // 判断scrollItemBox值，更新this.scrollItemBox宽度
  69 + if (scrollItemBox > this.basicWidth) {
  70 + this.$set(this, "scrollItemBox", scrollItemBox);
  71 + } else {
  72 + this.$set(this, "scrollItemBox", this.basicWidth);
  73 + }
  74 + }
  75 + },
  76 + watch: {
  77 +
  78 + /**
  79 + * 监听横向滚动数据加载
  80 + */
  81 + lists(newVal, oldVal) {
  82 +
  83 + // 判断是否有数据
  84 + if (typeof newVal === "object" && newVal.length > 0) {
  85 +
  86 + // 下一周期处理
  87 + this.$nextTick(function() {
  88 +
  89 + // 设置横向滚动
  90 + this.setScrollBox(this.$refs.scrollBox);
  91 + });
  92 + }
  93 + }
  94 + },
  95 + mounted() {
  96 +
  97 + // 判断如果lists有值，设置横向滚动数据
  98 + if (this.lists && this.lists.length) {
  99 +
  100 + // 下一周期处理
  101 + this.$nextTick(function() {
  102 +
  103 + // 设置横向滚动
  104 + this.setScrollBox(this.$refs.scrollBox);
  105 + });
  106 + }
  107 + }
  108 + }
  109 +</script>
  110 +
  111 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  112 +<style rel="stylesheet/less" lang="less">
  113 + @import './horizList_2';
  114 +</style>
0 115 \ No newline at end of file
... ...
src/components/textTitleBox/textTitleBox.less 0 → 100644
  View file @174163e
  1 +@charset "UTF-8";
  2 +
  3 +.title-box {
  4 + background-color: transparent;
  5 + width: 100%;
  6 + height: auto;
  7 + .box {
  8 + display: flex;
  9 + justify-content: space-between;
  10 + align-items: center;
  11 + margin: 0 auto;
  12 + width: 690px;
  13 + height: auto;
  14 + .title-box {
  15 + display: contents;
  16 + color: #4A4A4A;
  17 + font-size: 36px;
  18 + font-weight: 600;
  19 + }
  20 + .more-box {
  21 + display: contents;
  22 + color: #999999;
  23 + font-size: 26px;
  24 + font-weight: 400;
  25 + }
  26 + }
  27 +}
0 28 \ No newline at end of file
... ...
src/components/textTitleBox/textTitleBox.vue 0 → 100644
  View file @174163e
  1 +<template>
  2 + <div class="title-box" v-if="titles">
  3 + <div class="box">
  4 + <div class="title-box">
  5 + <div class="title">{{titles.title}}</div>
  6 + </div>
  7 + <div class="more-box" @click="more(titles)">
  8 + <div class="more-text">更多</div>
  9 + </div>
  10 + </div>
  11 + </div>
  12 +</template>
  13 +
  14 +<script>
  15 + export default {
  16 + data: function () {
  17 + return {
  18 +
  19 + }
  20 + },
  21 + props: ["titles"],
  22 + methods: {
  23 +
  24 + /**
  25 + * 更多
  26 + * @param {object} item [数据对象]
  27 + */
  28 + more(item) {
  29 + this.$emit("more", item);
  30 + }
  31 + }
  32 + }
  33 +</script>
  34 +
  35 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  36 +<style rel="stylesheet/less" lang="less">
  37 + @import './textTitleBox';
  38 +</style>
... ...
src/components/titleBox/titleBox.vue
  View file @174163e
1 1 <template>
2   - <!-- <div class="title-box" v-if="titles"> -->
3   - <div class="title-box">
  2 + <div class="title-box" v-if="titles">
4 3 <div class="box">
5 4 <div class="title-img-box">
6 5 <img :src="titles.simg" class="title-img" mode="widthFix" />
... ...
src/pages/com/com.less 0 → 100644
  View file @174163e
  1 +@charset "UTF-8";
  2 +
  3 +.com {
  4 + background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(249, 249, 249, 1) 100%);
  5 +}
0 6 \ No newline at end of file
... ...
src/pages/com/com.vue 0 → 100644
  View file @174163e
  1 +<template>
  2 + <div class="com">
  3 +
  4 + <!-- 商品样式 2 滑动 -->
  5 + <horiz-list-2 @jump="jump"
  6 + :lists="lists"
  7 + pid="1">
  8 +
  9 + <!-- 标题 -->
  10 + <text-title-box slot="title-box"
  11 + :titles="{
  12 + title: '最近购买'
  13 + }">
  14 + </text-title-box>
  15 + </horiz-list-2>
  16 +
  17 +
  18 +
  19 + </div>
  20 +</template>
  21 +
  22 +<script>
  23 +
  24 + // 引入组件
  25 + import { Toast, Indicator } from "mint-ui";
  26 + import horizList2 from "@/components/horizList_2/horizList_2";
  27 + import textTitleBox from "@/components/textTitleBox/textTitleBox";
  28 +
  29 + export default {
  30 + data () {
  31 + return {
  32 + title: "",
  33 + lists: [
  34 + {
  35 + simg: "static/img/pic_1.jpg",
  36 + title: "传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐",
  37 + price: "230.90"
  38 + },
  39 + {
  40 + simg: "static/img/pic_2.jpg",
  41 + title: "传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐",
  42 + price: "230.90"
  43 + },
  44 + {
  45 + simg: "static/img/pic_3.jpg",
  46 + title: "传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐",
  47 + price: "230.90"
  48 + },
  49 + {
  50 + simg: "static/img/pic_1.jpg",
  51 + title: "传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐",
  52 + price: "230.90"
  53 + },
  54 + {
  55 + simg: "static/img/pic_2.jpg",
  56 + title: "传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐",
  57 + price: "230.90"
  58 + },
  59 + {
  60 + simg: "static/img/pic_3.jpg",
  61 + title: "传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐传统汉堡焗套餐",
  62 + price: "230.90"
  63 + }
  64 + ]
  65 +
  66 +
  67 +
  68 +
  69 +
  70 +
  71 + }
  72 + },
  73 + components: {
  74 + horizList2,
  75 + textTitleBox,
  76 +
  77 +
  78 + },
  79 + created() {
  80 +
  81 + // 设置标题
  82 + this.$set(this, "title", "ccdd");
  83 +
  84 +
  85 +
  86 +
  87 +
  88 +
  89 + },
  90 + methods: {
  91 +
  92 + /**
  93 + * 跳转
  94 + * @param {object} item [数据对象]
  95 + */
  96 + jump(item) {
  97 +
  98 + // 判断并调用通用跳转
  99 + if (typeof this.$parent.gotoDetail === "function") {
  100 +
  101 + // 构造跳转详情页参数
  102 + let options = {
  103 + type: "2",
  104 + to: item.id,
  105 + shop_type: item.shop_type
  106 + }
  107 +
  108 +
  109 + console.log(options);
  110 +
  111 +
  112 +
  113 +
  114 + this.$parent.gotoDetail(options);
  115 + }
  116 + },
  117 +
  118 +
  119 +
  120 + },
  121 + head: {
  122 + title () {
  123 + return {
  124 + inner: this.title
  125 + }
  126 + }
  127 + },
  128 + watch: {
  129 +
  130 + // 设置页面标题
  131 + title(newVal) {
  132 + if (this.$store.state.browser.toLowerCase() == "qq" && this.$store.state.deviceType.toLowerCase() == "iphone") {
  133 + this.$iFrame.insertIFrame(newVal);
  134 + } else {
  135 + this.$emit("updateHead");
  136 + }
  137 + }
  138 + },
  139 + mounted() {
  140 +
  141 + }
  142 + }
  143 +</script>
  144 +
  145 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  146 +<style rel="stylesheet/less" lang='less' scoped>
  147 + @import "com";
  148 +</style>
... ...
src/router/index.js
  View file @174163e
... ... @@ -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 },
... ...