w-front-end / select_good · Commits

Commit aff307cf2fd1be1ab54b203ab58cd0696b7d10fc

Authored by 王强
1 parent 6c6029e9

搜索页面组件完成~

Inline Side-by-side
Showing 19 changed files with 1316 additions and 3 deletions
src/common/helper.class.js
  View file @aff307c
@@ -142,4 +142,35 @@ export default class Helper { @@ -142,4 +142,35 @@ export default class Helper {
142 142
143 /* 加密/解密算法 结束 */ 143 /* 加密/解密算法 结束 */
144 144
  145 + /* 数字格式化 开始 */
  146 +
  147 + /**
  148 + * 获取输入数字的整数部分
  149 + */
  150 + getInteger() {
  151 + return (number) => {
  152 + return parseInt(number);
  153 + }
  154 + }
  155 +
  156 + /**
  157 + * 获取输入数字的小数部分
  158 + */
  159 + getDecimal() {
  160 + return (number) => {
  161 +
  162 + // 拆分数字
  163 + let numberArr = number.toString().split(".");
  164 +
  165 + // 判断是否有效数部分
  166 + if (numberArr.length === 2) {
  167 + return numberArr[1];
  168 + } else {
  169 + return "00";
  170 + }
  171 + }
  172 + }
  173 +
  174 + /* 数字格式化 结束 */
  175 +
145 } 176 }
146 \ No newline at end of file 177 \ No newline at end of file
src/components/darenList/darenList.less 0 → 100644
  View file @aff307c
  1 +.daren-list {
  2 + .box {
  3 + display: flex;
  4 + justify-content: space-between;
  5 + align-items: center;
  6 + margin: 0 auto;
  7 + width: 690px;
  8 + .left-box {
  9 + display: flex;
  10 + justify-content: flex-start;
  11 + align-items: center;
  12 + .avatar-box {
  13 + width: 80px;
  14 + height: 80px;
  15 + border-radius: 50%;
  16 + overflow: hidden;
  17 + .avatar-img {
  18 + display: block;
  19 + width: 80px;
  20 + height: 80px;
  21 + }
  22 + }
  23 + .user-info {
  24 + margin-left: 30px;
  25 + .name {
  26 + color: #4A4A4A;
  27 + font-size: 28px;
  28 + font-weight: 400;
  29 + white-space: nowrap;
  30 + text-overflow: ellipsis;
  31 + overflow: hidden;
  32 + }
  33 + .desc {
  34 + margin-top: 10px;
  35 + color: #B4B4B4;
  36 + font-size: 22px;
  37 + font-weight:400;
  38 + }
  39 + }
  40 + }
  41 + .right-box {
  42 + .arrow-box {
  43 + width: 25px;
  44 + height: 25px;
  45 + .arrow-right{
  46 + display: block;
  47 + width: 25px;
  48 + height: 25px;
  49 + }
  50 + }
  51 + .btn {
  52 + display: flex;
  53 + justify-content: center;
  54 + align-items: center;
  55 + background: #FFF2F5;
  56 + color: #FC1541;
  57 + width: 120px;
  58 + height: 48px;
  59 + border-radius: 10px;
  60 + font-size: 26px;
  61 + }
  62 + }
  63 + }
  64 +}
0 \ No newline at end of file 65 \ No newline at end of file
src/components/darenList/darenList.vue 0 → 100644
  View file @aff307c
  1 +<template>
  2 + <div class="daren-list" v-if="item" @click="jump(item)">
  3 + <div class="box">
  4 +
  5 + <div class="left-box">
  6 + <div class="avatar-box">
  7 + <img v-lazy="item.user_img || item.logo" class="avatar-img" />
  8 + </div>
  9 + <div class="user-info">
  10 + <div class="name">
  11 + {{item.title}}
  12 + </div>
  13 + <div class="desc">
  14 + {{item.fans}}粉丝
  15 + </div>
  16 + </div>
  17 + </div>
  18 + <div class="right-box">
  19 + <div v-if="item.is_fans">
  20 + <div class="btn" v-if="item.is_fans == '1'" @click.stop.prevent="primary(item)">
  21 + 已关注
  22 + </div>
  23 + <div class="btn" v-else @click.stop.prevent="primary(item)">
  24 + 关注
  25 + </div>
  26 + </div>
  27 + <div class="arrow-box" v-else>
  28 + <img src="static/img/icon_arrow_right.png" class="arrow-right" />
  29 + </div>
  30 + </div>
  31 + </div>
  32 + </div>
  33 +</template>
  34 +
  35 +<script>
  36 + export default {
  37 + name: 'darenLists',
  38 + data() {
  39 + return {
  40 +
  41 + }
  42 + },
  43 + props: ["item"],
  44 + methods: {
  45 +
  46 + /**
  47 + * 点击事件
  48 + * @param {object} item [数据参数]
  49 + */
  50 + jump(item) {
  51 + this.$emit("jump", item);
  52 + },
  53 +
  54 + /**
  55 + * 关注/取消关注达人
  56 + * @param {object} item [数据对象]
  57 + */
  58 + primary(item) {
  59 + this.$emit("primary", item);
  60 + }
  61 + }
  62 + }
  63 +</script>
  64 +
  65 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  66 +<style rel="stylesheet/less" lang="less" scoped>
  67 + @import "darenList";
  68 +</style>
src/components/goodsItem_4/goodsItem_4.less 0 → 100644
  View file @aff307c
  1 +@charset "UTF-8";
  2 +
  3 +.goods-item-4-box {
  4 + background-color: transparent;
  5 + width: 100%;
  6 + height: auto;
  7 + .main-box {
  8 + display: flex;
  9 + justify-content: space-between;
  10 + margin: 0 auto;
  11 + width: 690px;
  12 + height: auto;
  13 + .img-box {
  14 + display: flex;
  15 + justify-content: center;
  16 + align-items: center;
  17 + background-color: transparent;
  18 + // margin: 0 auto;
  19 + width: 160px;
  20 + height: 160px;
  21 + border-radius: 8px;
  22 + overflow: hidden;
  23 + .simg {
  24 + display: block;
  25 + width: 160px;
  26 + height: 160px;
  27 + }
  28 + }
  29 + .content-box {
  30 + display: flex;
  31 + flex-direction: column;
  32 + justify-content: space-between;
  33 + align-items: center;
  34 + width: 500px;
  35 + height: auto;
  36 + .top-box {
  37 + width: 500px;
  38 + .title {
  39 + color: #4A4A4A;
  40 + font-size: 28px;
  41 + font-weight: 400;
  42 + white-space: nowrap;
  43 + text-overflow: ellipsis;
  44 + overflow: hidden;
  45 + }
  46 + }
  47 + .bottom-box {
  48 + width: 500px;
  49 + .price-box {
  50 + display: flex;
  51 + justify-content: flex-start;
  52 + align-items: baseline;
  53 + // margin-top: 20px;
  54 + .symbol {
  55 + color: #FC1541;
  56 + font-size: 26px;
  57 + }
  58 + .integer {
  59 + color: #FC1541;
  60 + font-size: 34px;
  61 + }
  62 + .decimal {
  63 + color: #FC1541;
  64 + font-size: 26px;
  65 + }
  66 + }
  67 + .shop-box {
  68 + display: flex;
  69 + justify-content: flex-start;
  70 + align-items: center;
  71 + margin-top: 10px;
  72 + .shop-name {
  73 + color: #9B9B9B;
  74 + font-size: 24px;
  75 + max-width: 400px;
  76 + white-space: nowrap;
  77 + text-overflow: ellipsis;
  78 + overflow: hidden;
  79 + }
  80 + .buttons-box {
  81 + .btn {
  82 + &.btn-primary {
  83 + margin-left: 20px;
  84 + color: #4A4A4A;
  85 + font-size: 24px;
  86 + }
  87 + }
  88 + }
  89 + }
  90 + }
  91 + }
  92 + }
  93 +}
src/components/goodsItem_4/goodsItem_4.vue 0 → 100644
  View file @aff307c
  1 +<template>
  2 + <div class="goods-item-4-box" v-if="item" @click="jump(item)">
  3 + <div class="main-box">
  4 + <div class="img-box">
  5 + <img v-lazy="item.simg + SIGN.SMALL" class="simg" />
  6 + </div>
  7 + <div class="content-box">
  8 + <div class="top-box">
  9 + <div class="title">{{item.title}}</div>
  10 + </div>
  11 + <div class="bottom-box">
  12 + <div class="price-box">
  13 + <div class="symbol">¥</div>
  14 + <div class="integer">{{getInteger(item.price)}}.</div>
  15 + <div class="decimal">{{getDecimal(item.price)}}</div>
  16 + </div>
  17 + <div class="shop-box" @click.stop.prevent="primary(item)">
  18 + <div class="shop-name">
  19 + 领头雁自营店
  20 + </div>
  21 + <div class="buttons-box">
  22 + <div class="btn btn-primary">进店&gt;</div>
  23 + </div>
  24 + </div>
  25 + </div>
  26 + </div>
  27 + </div>
  28 + </div>
  29 +</template>
  30 +
  31 +<script>
  32 + export default {
  33 + data: function () {
  34 + return {
  35 +
  36 + }
  37 + },
  38 + props: ["item"],
  39 + computed: {
  40 +
  41 + /**
  42 + * 获取输入数字的整数部分
  43 + */
  44 + getInteger() {
  45 + return (number) => {
  46 + return parseInt(number);
  47 + }
  48 + },
  49 +
  50 + /**
  51 + * 获取输入数字的小数部分
  52 + */
  53 + getDecimal() {
  54 + return (number) => {
  55 +
  56 + // 拆分数字
  57 + let numberArr = number.toString().split(".");
  58 +
  59 + // 判断是否有效数部分
  60 + if (numberArr.length === 2) {
  61 + return numberArr[1];
  62 + } else {
  63 + return "00";
  64 + }
  65 + }
  66 + }
  67 +
  68 + },
  69 + methods: {
  70 +
  71 + /**
  72 + * 点击跳转
  73 + * @param {object} item [数据对象]
  74 + */
  75 + jump(item) {
  76 + this.$emit("jump", item);
  77 + },
  78 +
  79 + /**
  80 + * 主按钮点击事件
  81 + * @param {object} item [数据对象]
  82 + */
  83 + primary(item) {
  84 + this.$emit("primary", item);
  85 + }
  86 + }
  87 + }
  88 +</script>
  89 +
  90 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  91 +<style rel="stylesheet/less" lang="less" scoped>
  92 + @import './goodsItem_4';
  93 +</style>
src/components/goodsItem_5/goodsItem_5.less 0 → 100644
  View file @aff307c
  1 +@charset "UTF-8";
  2 +
  3 +.goods-item-5-box {
  4 + background-color: transparent;
  5 + width: 100%;
  6 + height: auto;
  7 + .main-box {
  8 + display: flex;
  9 + justify-content: space-between;
  10 + margin: 0 auto;
  11 + width: 690px;
  12 + height: auto;
  13 + .left-box {
  14 + display: flex;
  15 + justify-content: space-between;
  16 + align-items: center;
  17 + width: 570px;
  18 + .img-box {
  19 + display: flex;
  20 + justify-content: center;
  21 + align-items: center;
  22 + background-color: transparent;
  23 + // margin: 0 auto;
  24 + width: 160px;
  25 + height: 160px;
  26 + border-radius: 8px;
  27 + overflow: hidden;
  28 + .simg {
  29 + display: block;
  30 + width: 160px;
  31 + height: 160px;
  32 + }
  33 + }
  34 + .content-box {
  35 + display: flex;
  36 + flex-direction: column;
  37 + justify-content: space-between;
  38 + align-items: center;
  39 + width: 380px;
  40 + height: 100%;
  41 + .top-box {
  42 + width: 380px;
  43 + .title {
  44 + color: #333333;
  45 + font-size: 28px;
  46 + font-weight: 500;
  47 + white-space: nowrap;
  48 + text-overflow: ellipsis;
  49 + overflow: hidden;
  50 + }
  51 + .desc-box {
  52 + display: flex;
  53 + align-items: center;
  54 + margin-top: 10px;
  55 + .desc {
  56 + color: #999999;
  57 + font-size: 22px;
  58 + white-space: nowrap;
  59 + text-overflow: ellipsis;
  60 + overflow: hidden;
  61 + & + .desc {
  62 + margin-left: 20px;
  63 + }
  64 + }
  65 + }
  66 + }
  67 + .bottom-box {
  68 + width: 380px;
  69 + white-space: nowrap;
  70 + text-overflow: ellipsis;
  71 + overflow: hidden;
  72 + .flag {
  73 + display: inline;
  74 + background-color: #FFF2F5;
  75 + padding: 1px 8px;
  76 + color: #FC1541;
  77 + font-size: 20px;
  78 + border-radius: 4px;
  79 + }
  80 + }
  81 + }
  82 + }
  83 + .right-box {
  84 + display: flex;
  85 + justify-content: flex-end;
  86 + align-items: center;
  87 + width: 120px;
  88 + .distance-box {
  89 + color: #333333;
  90 + font-size: 24px;
  91 + white-space: nowrap;
  92 + text-overflow: ellipsis;
  93 + overflow: hidden;
  94 + }
  95 + }
  96 + }
  97 +}
src/components/goodsItem_5/goodsItem_5.vue 0 → 100644
  View file @aff307c
  1 +<template>
  2 + <div class="goods-item-5-box" v-if="item" @click="jump(item)">
  3 + <div class="main-box">
  4 + <div class="left-box">
  5 + <div class="img-box">
  6 + <img v-lazy="item.simg + SIGN.SMALL" class="simg" />
  7 + </div>
  8 + <div class="content-box">
  9 + <div class="top-box">
  10 + <div class="title">{{item.title}}</div>
  11 + <div class="desc-box">
  12 + <div class="desc">评价：{{item.evaluate}}</div>
  13 + <div class="desc">月销：{{item.count}}</div>
  14 + </div>
  15 + </div>
  16 + <div class="bottom-box">
  17 + <div class="flag" v-if="item.flag">
  18 + {{item.flag}}
  19 + </div>
  20 + </div>
  21 + </div>
  22 + </div>
  23 + <div class="right-box">
  24 + <div class="distance-box">
  25 + {{item.distance}}
  26 + </div>
  27 + </div>
  28 + </div>
  29 + </div>
  30 +</template>
  31 +
  32 +<script>
  33 + export default {
  34 + data: function () {
  35 + return {
  36 +
  37 + }
  38 + },
  39 + props: ["item"],
  40 + computed: {
  41 +
  42 + /**
  43 + * 获取输入数字的整数部分
  44 + */
  45 + getInteger() {
  46 + return (number) => {
  47 + return parseInt(number);
  48 + }
  49 + },
  50 +
  51 + /**
  52 + * 获取输入数字的小数部分
  53 + */
  54 + getDecimal() {
  55 + return (number) => {
  56 +
  57 + // 拆分数字
  58 + let numberArr = number.toString().split(".");
  59 +
  60 + // 判断是否有效数部分
  61 + if (numberArr.length === 2) {
  62 + return numberArr[1];
  63 + } else {
  64 + return "00";
  65 + }
  66 + }
  67 + }
  68 +
  69 + },
  70 + methods: {
  71 +
  72 + /**
  73 + * 点击跳转
  74 + * @param {object} item [数据对象]
  75 + */
  76 + jump(item) {
  77 + this.$emit("jump", item);
  78 + },
  79 +
  80 + /**
  81 + * 主按钮点击事件
  82 + * @param {object} item [数据对象]
  83 + */
  84 + primary(item) {
  85 + this.$emit("primary", item);
  86 + }
  87 + }
  88 + }
  89 +</script>
  90 +
  91 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  92 +<style rel="stylesheet/less" lang="less" scoped>
  93 + @import './goodsItem_5';
  94 +</style>
src/components/listCom/listCom.less 0 → 100644
  View file @aff307c
  1 +@charset "UTF-8";
  2 +
  3 +.list-com {
  4 + background-color: transparent;
  5 + .title-box {
  6 + padding: 30px 0;
  7 + & + .line-top {
  8 + margin: 0 auto;
  9 + width: 690px;
  10 + border-top: 1px solid #F2F2F2;
  11 + }
  12 + }
  13 + .box {
  14 + padding-bottom: 30px;
  15 + .item-box {
  16 + margin-top: 30px;
  17 + }
  18 + }
  19 +}
0 \ No newline at end of file 20 \ No newline at end of file
src/components/listCom/listCom.vue 0 → 100644
  View file @aff307c
  1 +<template>
  2 + <div class="list-com" :style="{backgroundColor: lists.backgroundColor}" v-if="lists && lists.list && lists.list.length">
  3 + <slot name="title"></slot>
  4 + <div class="line-top"></div>
  5 + <div class="box">
  6 +
  7 + <!-- 循环输出数据 -->
  8 + <div class="item-box" v-for="(item, index) in lists.list" :key="index">
  9 +
  10 + <!-- 商品列表(goodsItem_4) -->
  11 + <goods-item-4 v-if="lists.style == '4'" @jump="jump" @primary="primary"
  12 + :item="item">
  13 + </goods-item-4>
  14 +
  15 + <!-- 美食列表 -->
  16 + <goods-item-5 v-if="lists.style == '5'" @jump="jump"
  17 + :item="item">
  18 + </goods-item-5>
  19 +
  20 + <!-- 达人列表 -->
  21 + <daren-list v-if="lists.style == 'daren-list'" @jump="jump" @primary="primary"
  22 + :item="item">
  23 + </daren-list>
  24 + </div>
  25 + </div>
  26 + </div>
  27 +</template>
  28 +
  29 +<script>
  30 +
  31 + // 引入组件
  32 + import goodsItem4 from "@/components/goodsItem_4/goodsItem_4";
  33 + import goodsItem5 from "@/components/goodsItem_5/goodsItem_5";
  34 + import darenList from "@/components/darenList/darenList";
  35 +
  36 + export default {
  37 + data() {
  38 + return {
  39 +
  40 + };
  41 + },
  42 + props: ["lists"],
  43 + components: {
  44 + goodsItem4,
  45 + goodsItem5,
  46 + darenList
  47 + },
  48 + methods: {
  49 +
  50 + /**
  51 + * 跳转详情
  52 + * @param {object} item [对象]
  53 + */
  54 + jump(item) {
  55 + this.$emit("jump", item);
  56 + },
  57 +
  58 + /**
  59 + * 项目内按钮跳转
  60 + * @param {object} item [对象]
  61 + */
  62 + primary(item) {
  63 + this.$emit("primary", item);
  64 + },
  65 +
  66 +
  67 +
  68 +
  69 + }
  70 + }
  71 +</script>
  72 +
  73 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  74 +<style rel="stylesheet/less" lang='less' scoped>
  75 + @import './listCom';
  76 +</style>
src/components/searchCom/searchCom.less 0 → 100644
  View file @aff307c
  1 +@charset "UTF-8";
  2 +
  3 +.search-com {
  4 + background-color: transparent;
  5 + padding: 14px 0 20px 0;
  6 + width: 750px;
  7 + height: auto;
  8 + .box {
  9 + position: relative;
  10 + display: flex;
  11 + justify-content: space-between;
  12 + align-items: center;
  13 + margin: 0 auto;
  14 + width: 690px;
  15 + height: auto;
  16 + .search-group {
  17 + display: flex;
  18 + justify-content: space-between;
  19 + align-items: center;
  20 + width: 600px;
  21 + border: 3px solid #f9f9ff;
  22 + border-radius: 32px;
  23 + .left-box {
  24 + display: flex;
  25 + align-items: center;
  26 + .search-icon {
  27 + margin: 16px 20px 16px 30px;
  28 + width: 32px;
  29 + height: 32px;
  30 + .search-img {
  31 + display: block;
  32 + width: 32px;
  33 + height: 32px;
  34 + }
  35 + }
  36 + .line {
  37 + background-color: #858585;
  38 + margin-right: 20px;
  39 + width: 1px;
  40 + height: 22px;
  41 + }
  42 + .input-box {
  43 + width: 440px;
  44 + height: 64px;
  45 + .keyword {
  46 + background-color: transparent;
  47 + padding: 0;
  48 + color: #333333;
  49 + font-size: 26px;
  50 + width: 100%;
  51 + height: 100%;
  52 + border: none;
  53 + outline: none;
  54 + &::placeholder {
  55 + color: #C8C8C8;
  56 + font-size: 26px;
  57 + }
  58 + &::-webkit-search-cancel-button {
  59 + display: none;
  60 + }
  61 + }
  62 + }
  63 + }
  64 + .right-box {
  65 + .clear-input-box {
  66 + margin-right: 20px;
  67 + width: 26px;
  68 + height: 26px;
  69 + .clear-input-img {
  70 + display: block;
  71 + width: 26px;
  72 + height: 26px;
  73 + }
  74 + }
  75 + }
  76 +
  77 + }
  78 + .buttons-box {
  79 +
  80 + }
  81 + }
  82 +}
src/components/searchCom/searchCom.vue 0 → 100644
  View file @aff307c
  1 +<template>
  2 + <div class="search-com" :style="'background-color: ' + defaultSearchs.backgroundColor">
  3 + <div class="box">
  4 + <div class="search-group" :style="'border-color: ' + defaultSearchs.borderColor">
  5 + <div class="left-box">
  6 + <div class="search-icon">
  7 + <img src="static/img/icon_search.png" class="search-img" />
  8 + </div>
  9 + <div class="line"></div>
  10 + <div class="input-box">
  11 + <input type="search" :placeholder="defaultSearchs.pl" :maxlength="defaultSearchs.maxlength" v-model="defaultSearchs.keyword" class="keyword" @blur="onBlur" />
  12 + </div>
  13 + </div>
  14 + <div class="right-box">
  15 + <div class="clear-input-box" v-if="defaultSearchs.keyword">
  16 + <img src="static/img/icon_clear_input.png" class="clear-input-img" />
  17 + </div>
  18 + </div>
  19 + </div>
  20 + <div class="buttons-box">
  21 + <div class="btn btn-primary" :style="'color: ' + defaultSearchs.borderColor" @click="doCancel">{{defaultSearchs.btnText}}</div>
  22 + </div>
  23 + </div>
  24 + </div>
  25 +</template>
  26 +
  27 +<script>
  28 + export default {
  29 + data: function () {
  30 + return {
  31 + defaultSearchs: {
  32 + backgroundColor: "transparent",
  33 + keyword: "",
  34 + maxlength: 20,
  35 + borderColor: "#F9F9F9",
  36 + pl: "请输入搜索内容",
  37 + btnText: "取消"
  38 + }
  39 + }
  40 + },
  41 + props: ['searchs'],
  42 + methods: {
  43 +
  44 + /**
  45 + * 获取搜索关键字
  46 + */
  47 + getKeyword() {
  48 + return this.defaultSearchs.keyword;
  49 + },
  50 +
  51 + /**
  52 + * 设置搜索关键字
  53 + * @param {String} keyword [搜索关键字]
  54 + */
  55 + setKeyword(keyword) {
  56 + this.$set(this.defaultSearchs, "keyword", keyword);
  57 + },
  58 +
  59 + /**
  60 + * 搜索
  61 + * @param {object} item [数据对象]
  62 + */
  63 + doSearch(item) {
  64 + this.$emit("search", item);
  65 + },
  66 +
  67 + /**
  68 + * 取消按钮
  69 + */
  70 + doCancel() {
  71 + this.$emit("cancel");
  72 + },
  73 +
  74 + /**
  75 + * 失去焦点处理
  76 + */
  77 + onBlur() {
  78 +
  79 + // 判断是否有onBlur函数
  80 + if (typeof this.$parent.onBlur === "function") {
  81 + this.$parent.onBlur();
  82 + }
  83 + }
  84 + },
  85 + mounted() {
  86 +
  87 + // 合并参数对象
  88 + Object.assign(this.defaultSearchs, this.searchs);
  89 + }
  90 + }
  91 +</script>
  92 +
  93 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  94 +<style rel="stylesheet/less" lang="less" scoped>
  95 + @import './searchCom';
  96 +</style>
src/components/textTitleBox/textTitleBox.less
  View file @aff307c
@@ -24,4 +24,17 @@ @@ -24,4 +24,17 @@
24 font-weight: 400; 24 font-weight: 400;
25 } 25 }
26 } 26 }
  27 + &.style-2 {
  28 + .box {
  29 + .title-box {
  30 + display: contents;
  31 + color: #666666;
  32 + font-size: 30px;
  33 + font-weight: 500;
  34 + }
  35 + .more-box {
  36 + font-weight: 500;
  37 + }
  38 + }
  39 + }
27 } 40 }
28 \ No newline at end of file 41 \ No newline at end of file
src/components/textTitleBox/textTitleBox.vue
  View file @aff307c
1 <template> 1 <template>
2 - <div class="title-box" v-if="titles"> 2 + <div class="title-box" :class="'style-' + titles.style" fv-if="titles">
3 <div class="box"> 3 <div class="box">
4 <div class="title-box"> 4 <div class="title-box">
5 <div class="title">{{titles.title}}</div> 5 <div class="title">{{titles.title}}</div>
@@ -15,7 +15,7 @@ @@ -15,7 +15,7 @@
15 export default { 15 export default {
16 data: function () { 16 data: function () {
17 return { 17 return {
18 - 18 +
19 } 19 }
20 }, 20 },
21 props: ["titles"], 21 props: ["titles"],
src/pages/common/common.vue
  View file @aff307c
@@ -223,6 +223,27 @@ @@ -223,6 +223,27 @@
223 223
224 // 后退 224 // 后退
225 window.history.go(1); 225 window.history.go(1);
  226 + },
  227 +
  228 + /**
  229 + * 销毁WebView
  230 + */
  231 + destroy() {
  232 +
  233 + // App内
  234 + if (this.isCNLive.value) {
  235 +
  236 + // 调用App，销毁WebView
  237 + if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.destroy) {
  238 + window.webkit.messageHandlers.destroy.postMessage({body: {}});
  239 + } else if (window.obj && window.obj.destroy) {
  240 + window.obj.destroy();
  241 + }
  242 + } else {
  243 +
  244 + // 后退
  245 + window.history.go(-1);
  246 + }
226 }, 247 },
227 248
228 /** 249 /**
@@ -252,7 +273,7 @@ @@ -252,7 +273,7 @@
252 } else { 273 } else {
253 274
254 // 设置跳转登录域名 275 // 设置跳转登录域名
255 - let loginUrl = (this.mode == "prod") ? "https://manage.cnlive.com/html/mall/1/#/pages/users/login/login" : "https://wjjshop.cnlive.com/html/mall/1/#/pages/users/login/login"; 276 + let loginUrl = (this.mode == "prod") ? "https://managemall.cnlive.com/html/mall/1/#/pages/users/login/login" : "https://wjjshop.cnlive.com/html/mall/1/#/pages/users/login/login";
256 277
257 // 跳转mall项目登录 278 // 跳转mall项目登录
258 window.location.href = loginUrl + "?processing=redirect&pages=" + encodeURIComponent(window.location.href); 279 window.location.href = loginUrl + "?processing=redirect&pages=" + encodeURIComponent(window.location.href);
src/pages/search/search.less 0 → 100644
  View file @aff307c
  1 +@charset "UTF-8";
  2 +
  3 +.search-box {
  4 + background-color: #F9F9F9;
  5 + min-height: 100vh;
  6 + .nav {
  7 + position: fixed;
  8 + top: 0;
  9 + background-color: #FAFBFD;
  10 + }
  11 + .pl {
  12 + background-color: transparent;
  13 + width: 750px;
  14 + height: 104px;
  15 + }
  16 + .list-com + .list-com {
  17 + margin-top: 14px;
  18 + }
  19 +}
src/pages/search/search.vue 0 → 100644
  View file @aff307c
  1 +<template>
  2 + <div class="search-box">
  3 +
  4 + <!-- nav -->
  5 + <div class="nav" :style="'padding-top: ' + ($parent.top.value) + 'px'">
  6 +
  7 + <!-- 搜索组件 -->
  8 + <search-com @cancel="doCancel"
  9 + :searchs="searchs">
  10 + </search-com>
  11 + </div>
  12 +
  13 + <!-- pl占位 -->
  14 + <div class="pl" :style="'padding-top: ' + ($parent.top.value) + 'px'"></div>
  15 +
  16 + <!-- 搜索结果-商品 -->
  17 + <list-com @jump="toDetail" @primary="toShop"
  18 + :lists="commoditys">
  19 +
  20 + <!-- 标题 -->
  21 + <text-title-box slot="title" @more="more"
  22 + :titles="{
  23 + title: '苹果-商品',
  24 + more: true,
  25 + style: '2'
  26 + }">
  27 + </text-title-box>
  28 + </list-com>
  29 +
  30 + <!-- 搜索结果-达人 -->
  31 + <list-com @jump="toDarenProfile" @primary="fansShop"
  32 + :lists="darenLists">
  33 +
  34 + <!-- 标题 -->
  35 + <text-title-box slot="title" @more="more"
  36 + :titles="{
  37 + title: '苹果-达人',
  38 + more: true,
  39 + style: '2'
  40 + }">
  41 + </text-title-box>
  42 + </list-com>
  43 +
  44 + <!-- 搜索结果-美食 -->
  45 + <list-com @jump="toFood"
  46 + :lists="foodList">
  47 +
  48 + <!-- 标题 -->
  49 + <text-title-box slot="title" @more="more"
  50 + :titles="{
  51 + title: '苹果-美食',
  52 + more: true,
  53 + style: '2'
  54 + }">
  55 + </text-title-box>
  56 + </list-com>
  57 +
  58 +
  59 +
  60 +
  61 +
  62 + </div>
  63 +</template>
  64 +
  65 +<script>
  66 +
  67 + // 引入组件
  68 + import { Toast, Indicator } from "mint-ui";
  69 + import searchCom from "@/components/searchCom/searchCom";
  70 + import textTitleBox from "@/components/textTitleBox/textTitleBox";
  71 + import listCom from "@/components/listCom/listCom";
  72 +
  73 +
  74 +
  75 +
  76 +
  77 + export default {
  78 + name: 'search',
  79 + data () {
  80 + return {
  81 + title: "",
  82 + searchs: {
  83 + backgroundColor: "#FAFBFD",
  84 + borderColor: "#FC1541"
  85 + },
  86 + commoditys: {
  87 + style: "4",
  88 + backgroundColor: "#FFFFFF",
  89 + list: [
  90 + {
  91 + simg: "static/img/9.png",
  92 + title: "覆盆子苹果礼盒套装",
  93 + price: "299.90"
  94 + },
  95 + {
  96 + simg: "static/img/9.png",
  97 + title: "覆盆子苹果礼盒套装",
  98 + price: "299.90"
  99 + },
  100 + {
  101 + simg: "static/img/9.png",
  102 + title: "覆盆子苹果礼盒套装",
  103 + price: "299.90"
  104 + }
  105 + ]
  106 + },
  107 + darenLists: {
  108 + style: "daren-list",
  109 + backgroundColor: "#FFFFFF",
  110 + list: [
  111 + {
  112 + user_img: "static/img/6.png",
  113 + title: "万能苹果",
  114 + fans: "222",
  115 + is_fans: "0"
  116 + },
  117 + {
  118 + user_img: "static/img/6.png",
  119 + title: "全球小苹果",
  120 + fans: "999",
  121 + is_fans: "0"
  122 + },
  123 + {
  124 + user_img: "static/img/6.png",
  125 + title: "健身小苹果",
  126 + fans: "222",
  127 + is_fans: "0"
  128 + },
  129 + {
  130 + user_img: "static/img/6.png",
  131 + title: "全球小苹果",
  132 + fans: "10",
  133 + is_fans: "1"
  134 + },
  135 + {
  136 + user_img: "static/img/6.png",
  137 + title: "健身小苹果",
  138 + fans: "1000",
  139 + is_fans: "1"
  140 + }
  141 + ]
  142 + },
  143 + foodList: {
  144 + style: "5",
  145 + backgroundColor: "#FFFFFF",
  146 + list: [
  147 + {
  148 + simg: "static/img/9.png",
  149 + title: "食色天香（外文大厦店）",
  150 + evaluate: "4.6",
  151 + count: "1234",
  152 + flag: "网家家城市推荐TOP 100",
  153 + distance: "456m"
  154 + },
  155 + {
  156 + simg: "static/img/9.png",
  157 + title: "食色天香（外文大厦店）",
  158 + evaluate: "4.6",
  159 + count: "1234",
  160 + flag: "网家家城市推荐TOP 100",
  161 + distance: "456km"
  162 + },
  163 + {
  164 + simg: "static/img/9.png",
  165 + title: "食色天香（外文大厦店）",
  166 + evaluate: "4.6",
  167 + count: "1234",
  168 + flag: "",
  169 + distance: "456m"
  170 + }
  171 + ]
  172 + },
  173 +
  174 +
  175 +
  176 +
  177 +
  178 +
  179 +
  180 + }
  181 + },
  182 + components: {
  183 + searchCom,
  184 + textTitleBox,
  185 + listCom,
  186 +
  187 +
  188 +
  189 +
  190 +
  191 +
  192 + },
  193 + created() {
  194 +
  195 + // 设置标题
  196 + this.$set(this, "title", "搜索");
  197 + },
  198 + methods: {
  199 +
  200 + /**
  201 + * 优选页面接口
  202 + */
  203 + fansShopMessageList() {
  204 +
  205 + // 校验登录
  206 + if (this.$parent.checkLogin()) {
  207 +
  208 + // 加载中提示
  209 + Indicator.open("加载中...");
  210 +
  211 + // 获取证书请求接口
  212 + this.http("/Api/" + this.getApiVersion().dynamic + "/fansShopMessageList", {
  213 + uid: this.getStore("uid")
  214 + }, this.fansShopMessageListCallback, {
  215 + method: "post"
  216 + }
  217 + );
  218 + }
  219 + },
  220 +
  221 + /**
  222 + * 优选页面接口回调
  223 + * @param {object} res [服务器返回数据]
  224 + * @param {object} ext [扩展参数]
  225 + */
  226 + fansShopMessageListCallback(res, ext) {
  227 +
  228 + // 加载完成
  229 + Indicator.close();
  230 +
  231 + // 下拉刷新结束
  232 + this.$set(this, "isLoading", false);
  233 +
  234 + // 返回处理
  235 + if (res.code == 200) {
  236 +
  237 + // 解构数据
  238 + let { data: datas } = res;
  239 +
  240 + /* 获取优选库“优选”数据 开始 */
  241 +
  242 + // 获取“达人列表数据”
  243 + if (datas.list && datas.list.length) {
  244 +
  245 + // 设置“达人列表数据”数据
  246 + this.$set(this, "dresserList", datas.list);
  247 + }
  248 +
  249 + // 获取“热销商品”
  250 + if (datas.hotGoods && datas.hotGoods.length) {
  251 +
  252 + // 设置“热销商品”数据
  253 + this.$set(this, "hotGoods", datas.hotGoods);
  254 +
  255 + // 判断“热销商品”更多
  256 + if (datas.hotGoodsMore) {
  257 +
  258 + // 设置“热销商品”更多
  259 + this.$set(this, "hotGoodsMore", datas.hotGoodsMore);
  260 + }
  261 + }
  262 +
  263 + // 获取“最新上架”
  264 + if (datas.newGoods && datas.newGoods.length) {
  265 +
  266 + // 设置“最新上架”数据
  267 + this.$set(this, "newGoods", datas.newGoods);
  268 +
  269 + // 判断“最新上架”更多
  270 + if (datas.newGoodsMore) {
  271 +
  272 + // 设置“最新上架”更多
  273 + this.$set(this, "newGoodsMore", datas.newGoodsMore);
  274 + }
  275 + }
  276 +
  277 + // 获取“最近购买”
  278 + if (datas.newBuyGoods && datas.newBuyGoods.length) {
  279 +
  280 + // 设置“最近购买”数据
  281 + this.$set(this, "newBuyGoods", datas.newBuyGoods);
  282 + }
  283 +
  284 + // 获取“猜你喜欢”
  285 + if (datas.recommendGoods && datas.recommendGoods.length) {
  286 +
  287 + // 设置“猜你喜欢”数据
  288 + this.$set(this, "recommendGoods", datas.recommendGoods);
  289 + }
  290 +
  291 + /* 获取优选库“优选”数据 结束 */
  292 +
  293 + } else if (res.code == 400) {
  294 +
  295 + // 获取优选失败
  296 + Toast(res.message);
  297 + } else {
  298 +
  299 + // 获取优选失败
  300 + Toast("获取优选失败");
  301 + }
  302 + },
  303 +
  304 + /**
  305 + * 更多
  306 + * @param {object} item [数据对象]
  307 + */
  308 + more(item) {
  309 +
  310 +
  311 +
  312 + console.log("more", item);
  313 +
  314 +
  315 +
  316 + // 判断并调用通用跳转
  317 + if (typeof this.$parent.gotoDetail === "function") {
  318 + this.$parent.gotoDetail(item);
  319 + }
  320 + },
  321 +
  322 + /**
  323 + * 跳转商品详情
  324 + * @param {object} item [数据对象]
  325 + */
  326 + toDetail(item) {
  327 +
  328 +
  329 +
  330 + console.log("toDetail", item);
  331 +
  332 +
  333 +
  334 +
  335 + // 判断并调用通用跳转
  336 + if (typeof this.$parent.gotoDetail === "function") {
  337 +
  338 + // 构造跳转详情页参数
  339 + let options = {
  340 + type: "2",
  341 + to: item.id,
  342 + shop_type: item.shop_type
  343 + }
  344 +
  345 + this.$parent.gotoDetail(options);
  346 + }
  347 + },
  348 +
  349 + /**
  350 + * 进入店铺
  351 + */
  352 + toShop(item) {
  353 +
  354 +
  355 + console.log("toShop", item);
  356 +
  357 +
  358 +
  359 +
  360 + },
  361 +
  362 + /**
  363 + * 进入达人个人主页
  364 + */
  365 + toDarenProfile(item) {
  366 +
  367 +
  368 + console.log("toDarenProfile", item);
  369 +
  370 +
  371 +
  372 +
  373 + },
  374 +
  375 + /**
  376 + * 关注/取消关注达人
  377 + */
  378 + fansShop(item) {
  379 +
  380 +
  381 + console.log("fansShop", item);
  382 +
  383 +
  384 +
  385 +
  386 + },
  387 +
  388 +
  389 +
  390 +
  391 +
  392 +
  393 +
  394 +
  395 +
  396 +
  397 + /**
  398 + * 搜索框取消按钮，销毁WebView
  399 + */
  400 + doCancel() {
  401 +
  402 + // 判断destroy函数是否存在
  403 + if (typeof this.$parent.destroy === "function") {
  404 + this.$parent.destroy();
  405 + } else {
  406 +
  407 + // 后退
  408 + window.history.go(-1);
  409 + }
  410 + }
  411 + },
  412 + head: {
  413 + title () {
  414 + return {
  415 + inner: this.title
  416 + }
  417 + }
  418 + },
  419 + watch: {
  420 +
  421 + // 设置页面标题
  422 + title(newVal) {
  423 + if (this.$store.state.browser.toLowerCase() == "qq" && this.$store.state.deviceType.toLowerCase() == "iphone") {
  424 + this.$iFrame.insertIFrame(newVal);
  425 + } else {
  426 + this.$emit("updateHead");
  427 + }
  428 + }
  429 + }
  430 + }
  431 +</script>
  432 +
  433 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  434 +<style rel="stylesheet/less" lang='less' scoped>
  435 + @import "search";
  436 +</style>
src/router/index.js
  View file @aff307c
@@ -92,6 +92,17 @@ const router = new Router({ @@ -92,6 +92,17 @@ const router = new Router({
92 meta: { 92 meta: {
93 requireAuth: false 93 requireAuth: false
94 } 94 }
  95 + },
  96 + {
  97 + // 优选库搜索页面
  98 + path: "/search",
  99 + name: "search",
  100 + component: resolve => {
  101 + require(["@/pages/search/search"], resolve);
  102 + },
  103 + meta: {
  104 + requireAuth: false
  105 + }
95 } 106 }
96 ] 107 ]
97 }, 108 },
static/img/icon_clear_input.png 0 → 100644
View file @aff307c

597 Bytes
static/img/icon_search.png 0 → 100644
View file @aff307c

793 Bytes