w-front-end / select_good · Commits

Commit 14031a91a6a438d453cb7c3c92ff356254a129a5

Authored by 王强
1 parent 827809e1

中国总工会，App内，搜索页开发中~

Inline Side-by-side
Showing 10 changed files with 1418 additions and 6 deletions
src/components/goodsItemIII/goodsItemIII.less 0 → 100644
  View file @14031a9
  1 +@charset "UTF-8";
  2 +
  3 +.goods-item-iii-box {
  4 + background-color: transparent;
  5 + width: 100%;
  6 + height: auto;
  7 + .item {
  8 + background-color: #ffffff;
  9 + width: 100%;
  10 + height: auto;
  11 + border-radius: 16px;
  12 + overflow: hidden;
  13 + .img-box {
  14 + display: flex;
  15 + justify-content: center;
  16 + align-items: center;
  17 + width: 100%;
  18 + height: 330px;
  19 + // height: 100%;
  20 + overflow: hidden;
  21 + // 因为积分需要层叠到图片上方需要设置父级相对定位
  22 + position: relative;
  23 + .img {
  24 + display: block;
  25 + width: 100%;
  26 + // height: auto;
  27 + }
  28 + // 积分商城需要商品是否有货显示补货中
  29 + .goods_active{
  30 + width: 100%;
  31 + height: 58px;
  32 + // border-radius: 26px;
  33 + background: rgba(0, 0, 0, 0.4);
  34 + display: flex;
  35 + align-items: center;
  36 + justify-content: center;
  37 + color: #fff;
  38 + font-size: 30px;
  39 + text-align: center;
  40 + position: absolute;
  41 + left: 0;
  42 + bottom: 0;
  43 + }
  44 + // 积分 + 现金标示
  45 + .goods_tip{
  46 + position: absolute;
  47 + left: 14px;
  48 + top: 14px;
  49 + padding: 3px 8px;
  50 + background: linear-gradient(90deg, #F9EE7A 0%, #FAD844 100%);
  51 + border-radius: 7px;
  52 + height: 30px;
  53 + font-size: 22px;
  54 + font-weight: 400;
  55 + color: #945A08;
  56 + line-height: 30px;
  57 + }
  58 + .flag {
  59 + position: absolute;
  60 + top: 0;
  61 + right: 0;
  62 + z-index: 1;
  63 + width: 100%;
  64 + height: 100%;
  65 + }
  66 + }
  67 + .content-box {
  68 + margin: 0 auto;
  69 + width: 290px;
  70 + .title {
  71 + display: -webkit-box;
  72 + margin-top: 20px;
  73 + color: #333333;
  74 + font-size: 28px;
  75 + font-weight: 400;
  76 + width: 100%;
  77 + height: auto;
  78 + min-height: 76px;
  79 + line-height: 40px;
  80 + -webkit-line-clamp: 2;
  81 + /*! autoprefixer: off */
  82 + -webkit-box-orient: vertical;
  83 + /*! autoprefixer: on */
  84 + text-overflow: ellipsis;
  85 + overflow: hidden;
  86 + }
  87 + .grey-title{
  88 + font-size: 36px;
  89 + height: 76px;
  90 + }
  91 + .coupon-box {
  92 + display: inline;
  93 + margin-top: 8px;
  94 + padding: 1px 6px;
  95 + color: #FC1541;
  96 + font-size: 18px;
  97 + border: 1px solid #FC1541;
  98 + border-radius: 4px;
  99 + }
  100 + .price-box {
  101 + display: flex;
  102 + justify-content: space-between;
  103 + align-items: center;
  104 + margin-top: 10px;
  105 + margin-bottom: 20px;
  106 + .left {
  107 + display: flex;
  108 + justify-content: flex-start;
  109 + align-items: baseline;
  110 + color: #FC1541;
  111 + .y {
  112 + font-size: 20px;
  113 + }
  114 + .integer {
  115 + font-size: 36px;
  116 + }
  117 + .decimal {
  118 + font-size: 36px;
  119 + }
  120 + .text {
  121 + font-size: 36px;
  122 + }
  123 + }
  124 + .right {
  125 + display: flex;
  126 + justify-content: flex-end;
  127 + align-items: baseline;
  128 + .icon-add {
  129 + display: block;
  130 + width: 48px;
  131 + height: 48px;
  132 + }
  133 + }
  134 + }
  135 + }
  136 + .tips-box {
  137 + font-size: 20px;
  138 + font-weight: 400;
  139 + width: 100%;
  140 + height: 50px;
  141 + line-height: 50px;
  142 + text-align: center;
  143 + &.not-has {
  144 + background-color: #F4F4F4;
  145 + color: #999999;
  146 + }
  147 + &.has {
  148 + background-color: #FFF2C4;
  149 + color: #E7A304;
  150 + }
  151 + }
  152 + /*兼容积分商城样式*/
  153 + .integral-content-box{
  154 + width: 100%;
  155 + }
  156 + &.g-2 {
  157 + .content-box {
  158 + .title {
  159 + display: block;
  160 + font-weight: 500;
  161 + min-height: unset;
  162 + white-space: nowrap;
  163 + text-overflow: ellipsis;
  164 + overflow: hidden;
  165 + }
  166 + .price-box {
  167 + margin-top: 15px;
  168 + margin-bottom: 15px;
  169 + .left {
  170 + .y {
  171 + font-size: 36px;
  172 + }
  173 + .integer {
  174 + font-size: 36px;
  175 + }
  176 + .decimal {
  177 + font-size: 36px;
  178 + }
  179 + }
  180 + .right {
  181 + display: none;
  182 + }
  183 + }
  184 + }
  185 + }
  186 + }
  187 + &.style-2 {
  188 + .item {
  189 + .content-box {
  190 + .title {
  191 + font-size: 26px;
  192 + font-weight: 500;
  193 + }
  194 + .grey-title{
  195 + font-size: 36px;
  196 + height: 76px;
  197 + }
  198 + .price-box {
  199 + .left {
  200 + display: flex;
  201 + justify-content: flex-start;
  202 + align-items: baseline;
  203 + color: #E68D0E;
  204 + .y {
  205 + font-size: 24px;
  206 + & + .integer {
  207 + margin-left: 5px;
  208 + }
  209 + }
  210 + }
  211 + }
  212 + }
  213 + }
  214 + }
  215 +}
... ...
src/components/goodsItemIII/goodsItemIII.vue 0 → 100644
  View file @14031a9
  1 +<template>
  2 + <div class="goods-item-iii-box" :class="'style-' + sty" v-if="item" @click="jump(item)">
  3 + <div class="item">
  4 + <div class="img-box">
  5 +
  6 + <!-- 产品图片 -->
  7 + <img :src="item.img || item.simg" class="img" />
  8 +
  9 + <!-- 补货中提示 -->
  10 + <div v-if="item && item.stock && item.stock == 0" class="goods_active">
  11 + 补货中
  12 + </div>
  13 +
  14 + <!-- 角标 -->
  15 + <div class="flag">
  16 + <slot name="flag"></slot>
  17 + </div>
  18 + </div>
  19 + <div class="content-box">
  20 +
  21 + <!-- 标题 -->
  22 + <div class="title">{{item.title}}</div>
  23 +
  24 + <!-- 价格 -->
  25 + <div class="price-box">
  26 + <div class="left">
  27 + <div class="text" v-if="!isIntegral">￥</div>
  28 + <div class="integer">{{getInteger(item.price)}}.</div>
  29 + <div class="decimal">{{getDecimal(item.price)}}</div>
  30 + <div class="text" v-if="isIntegral">积分</div>
  31 + </div>
  32 + <div class="right" v-if="sty == '10'">
  33 + <img src="static/img/icon_goods_add.png" class="icon-add" v-if="sty == '10'" @click.stop.prevent="primary(item)" />
  34 + <img src="static/img/icon_add.png" class="icon-add" v-else @click.stop.prevent="primary(item)" />
  35 + </div>
  36 + </div>
  37 + </div>
  38 + <template v-if="item.coupon_num">
  39 + <div class="tips-box" :class="{'has': item.coupon_num >= 1, 'not-has': item.coupon_num <= 0}">
  40 + <div v-if="item.coupon_num > 1">
  41 + 合并{{item.coupon_num}}张优惠券抵用{{item.coupon_money}}元
  42 + </div>
  43 + <div v-else-if="item.coupon_num == 1">
  44 + {{item.coupon_num}}张优惠券抵用{{item.coupon_money}}元
  45 + </div>
  46 + <div v-else-if="item.coupon_num == 0">
  47 + 无可用优惠券
  48 + </div>
  49 + <div v-else-if="item.coupon_num == -1">
  50 + 暂无优惠券 领取助长
  51 + </div>
  52 + </div>
  53 + </template>
  54 + </div>
  55 + </div>
  56 +</template>
  57 +
  58 +<script>
  59 +export default {
  60 + data: function () {
  61 + return {
  62 +
  63 + }
  64 + },
  65 + props: ["item", "sty", "flag", "isIntegral"],
  66 + computed: {
  67 +
  68 + /**
  69 + * 获取输入数字的整数部分
  70 + */
  71 + getInteger () {
  72 + return (number) => {
  73 + return parseInt(number);
  74 + }
  75 + },
  76 +
  77 + /**
  78 + * 获取输入数字的小数部分
  79 + */
  80 + getDecimal () {
  81 + return (number) => {
  82 +
  83 + // 拆分数字
  84 + let numberArr = number.toString().split(".");
  85 +
  86 + // 判断是否有效数部分
  87 + if (numberArr.length === 2) {
  88 + return numberArr[1];
  89 + } else {
  90 + return "00";
  91 + }
  92 + }
  93 + }
  94 + },
  95 + methods: {
  96 +
  97 + /**
  98 + * 点击跳转
  99 + * @param {object} item [数据对象]
  100 + */
  101 + jump (item) {
  102 + this.$emit("jump", item);
  103 + },
  104 +
  105 + /**
  106 + * 主按钮点击事件
  107 + * @param {object} item [数据对象]
  108 + */
  109 + primary (item) {
  110 + this.$emit("primary", item);
  111 + }
  112 + }
  113 +}
  114 +</script>
  115 +
  116 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  117 +<style rel="stylesheet/less" lang="less" scoped>
  118 +@import 'goodsItemIII';
  119 +</style>
... ...
src/components/navSearchBar/navSearchBar.less 0 → 100644
  View file @14031a9
  1 +@charset "UTF-8";
  2 +
  3 +.nav-search-bar {
  4 + display: flex;
  5 + justify-content: flex-start;
  6 + align-items: center;
  7 + margin: 0 auto;
  8 + height: 95px;
  9 + border-bottom: 1px solid #E6E6E6;
  10 + .box {
  11 + display: flex;
  12 + justify-content: flex-start;
  13 + align-items: flex-start;
  14 + margin: 20px auto 0 auto;
  15 + width: 690px;
  16 + height: 100%;
  17 + .back-img {
  18 + display: block;
  19 + margin-top: 10px;
  20 + width: 35px;
  21 + height: 35px;
  22 + & + .search-box {
  23 + margin-left: 20px;
  24 + }
  25 + }
  26 + .search-box {
  27 + background-color: #F9F9F9;
  28 + width: 635px;
  29 + height: 58px;
  30 + border-radius: 32px;
  31 + .box {
  32 + display: flex;
  33 + justify-content: flex-start;
  34 + align-items: center;
  35 + margin: 0 auto;
  36 + width: 575px;
  37 + height: 100%;
  38 + .search-img {
  39 + display: block;
  40 + width: 32px;
  41 + height: 32px;
  42 + }
  43 + .line {
  44 + background-color: #858585;
  45 + margin: 0 20px;
  46 + width: 1px;
  47 + height: 22px;
  48 + }
  49 + .input-box {
  50 + display: flex;
  51 + justify-content: space-between;
  52 + align-items: center;
  53 + width: 500px;
  54 + .input {
  55 + background-color: transparent;
  56 + padding: 0;
  57 + color: #222222;
  58 + font-size: 26px;
  59 + width: 100%;
  60 + height: 100%;
  61 + border: none;
  62 + outline: none;
  63 + &::placeholder {
  64 + color: #B4B4B4;
  65 + font-size: 26px;
  66 + }
  67 + &::-webkit-search-cancel-button {
  68 + display: none;
  69 + }
  70 + }
  71 + .text {
  72 + display: flex;
  73 + justify-content: flex-start;
  74 + align-items: center;
  75 + color: #BEBEBE;
  76 + font-size: 24px;
  77 + font-weight: 400;
  78 + width: 335px;
  79 + height: 100%;
  80 + }
  81 + .icon-clear-input-img {
  82 + display: block;
  83 + width: 26px;
  84 + height: 26px;
  85 + }
  86 + }
  87 + }
  88 + &.have-func {
  89 + width: 415px;
  90 + .box {
  91 + width: 355px;
  92 + .input-box {
  93 + width: 280px;
  94 + .input {
  95 + width: 245px;
  96 + }
  97 + .text {
  98 + width: 280px;
  99 + }
  100 + }
  101 + }
  102 + }
  103 + & + .func-img {
  104 + margin-left: 20px;
  105 + }
  106 + }
  107 + .func-img {
  108 + display: block;
  109 + margin-top: 10px;
  110 + width: 35px;
  111 + height: 35px;
  112 + }
  113 + }
  114 +}
0 115 \ No newline at end of file
... ...
src/components/navSearchBar/navSearchBar.vue 0 → 100644
  View file @14031a9
  1 +<template>
  2 + <div class="nav-search-bar" v-if="navs">
  3 + <div class="box">
  4 + <img :src="navs.back.icon" class="back-img" v-if="navs.back" @click="back" />
  5 + <div class="search-box" :class="{'have-func': navs.func && navs.func.icon}">
  6 + <div class="box">
  7 + <img :src="navs.search.icon" class="search-img" />
  8 + <div class="line"></div>
  9 + <div class="input-box">
  10 + <input type="search" class="input" :placeholder="navs.search && navs.search.pl ? navs.search.pl : ''" v-model="keyword" v-if="navs.search && navs.search.enabled" @keyup="doSearch(keyword, $event)" />
  11 + <div class="text" v-else @click="toSearch">{{navs.search && navs.search.pl ? navs.search.pl : ''}}</div>
  12 + <img src="static/img/icon_clear_input.png" class="icon-clear-input-img" v-if="keyword" @click="clearInput" />
  13 + </div>
  14 + </div>
  15 + </div>
  16 + <img :src="navs.func.icon" class="func-img" v-if="navs.func && navs.func.icon" @click="func" />
  17 + </div>
  18 + </div>
  19 +</template>
  20 +
  21 +<script>
  22 + export default {
  23 + name: 'navSearchBar',
  24 + data() {
  25 + return {
  26 + keyword: ''
  27 + }
  28 + },
  29 + props: ['navs'],
  30 + methods: {
  31 +
  32 + /**
  33 + * 设置搜索关键字
  34 + * @param {Object} keyword [搜索关键字]
  35 + */
  36 + setKeyword(keyword) {
  37 +
  38 + // 设置搜索关键字
  39 + this.$set(this, 'keyword', keyword);
  40 + },
  41 +
  42 + /**
  43 + * 跳转搜索页面
  44 + */
  45 + toSearch() {
  46 +
  47 + // 抛出事件
  48 + this.$emit('toSearch');
  49 + },
  50 +
  51 + /**
  52 + * 搜索
  53 + * @param {string} keyword [搜索关键字]
  54 + * @param {object} e [事件对象]
  55 + */
  56 + doSearch(keyword, e) {
  57 +
  58 + // 判断按下的按键是不是回车（确认）
  59 + if ((keyword && (e.keyCode === 13 || (typeof e.key === "string" && e.key.toLowerCase() === "enter"))) || (!keyword && (e.keyCode === 8 || (typeof e.key === "string" && e.key.toLowerCase() === "backspace")))) {
  60 +
  61 + // 判断不是空格字符串
  62 + if (keyword.trim()) {
  63 + this.$emit("doSearch", keyword);
  64 + } else {
  65 + this.setKeyword('');
  66 + }
  67 + }
  68 + },
  69 +
  70 + /**
  71 + * 清除输入框事件监听
  72 + */
  73 + clearInput() {
  74 +
  75 + // 设置搜索内容为空
  76 + this.$set(this, 'keyword', '');
  77 +
  78 + // 抛出事件
  79 + this.$emit('clearInput');
  80 + },
  81 +
  82 + /**
  83 + * 后退
  84 + */
  85 + back() {
  86 +
  87 + // 抛出事件
  88 + this.$emit('back');
  89 + },
  90 +
  91 + /**
  92 + * 功能按钮
  93 + */
  94 + func() {
  95 +
  96 + // 抛出事件
  97 + this.$emit('func');
  98 + }
  99 + }
  100 + }
  101 +</script>
  102 +
  103 +<style rel="stylesheet/less" lang="less" scoped>
  104 + @import 'navSearchBar';
  105 +</style>
0 106 \ No newline at end of file
... ...
src/main.js
  View file @14031a9
... ... @@ -70,6 +70,9 @@ Vue.config.productionTip = false;
70 70 // 部署模式设置（开发模式："dev"，测试模式："test"，生产模式："prod"）
71 71 Vue.prototype.mode = "dev";
72 72  
  73 +// 工会页面，首页页面接口id
  74 +Vue.prototype.labourUnionPagelId = Vue.prototype.mode === 'prod' ? '2643' : '2643';
  75 +
73 76 // 微信JS-SDK对象
74 77 Vue.prototype.jweixin = {
75 78 value: null
... ...
src/pages/labourUnion/labourUnion.vue
  View file @14031a9
... ... @@ -108,8 +108,7 @@
108 108 <column-list-box class="column-list-box" @jump="toDetail" @primary="primary"
109 109 :lists="lists[tabs.active]"
110 110 com='7'
111   - goodType='2'
112   - flag='工会选品'>
  111 + goodType='2'>
113 112 </column-list-box>
114 113 </div>
115 114 </van-list>
... ... @@ -241,6 +240,9 @@
241 240 // 初始化搜索组件数据
242 241 this.initSearchBar();
243 242  
  243 + // 获取网家家职工之家小程序首页数据
  244 + this.getIndex();
  245 +
244 246 // 获取页面头部数据
245 247 this.ghIndex();
246 248  
... ... @@ -331,6 +333,67 @@
331 333 document.documentElement.scrollTop = document.body.scrollTop = 0;
332 334 },
333 335  
  336 + /**
  337 + * 获取网家家职工之家小程序首页数据
  338 + */
  339 + getIndex() {
  340 +
  341 + // 加载中提示
  342 + // Indicator.open("加载中...");
  343 +
  344 + // 请求接口
  345 + this.http('/contentApi/getPage', {
  346 + pageId: this.labourUnionPagelId,
  347 + sid: this.$route.query.uid || '',
  348 + }, this.getIndexCallback, {
  349 + method: 'GET',
  350 + api: 'cms'
  351 + });
  352 + },
  353 +
  354 + /**
  355 + * 获取网家家职工之家小程序首页数据回调
  356 + * @param {Object} res [服务器返回数据]
  357 + * @param {Object} ext [扩展参数]
  358 + */
  359 + getIndexCallback(res, ext) {
  360 +
  361 + // 加载完成
  362 + // Indicator.close();
  363 +
  364 + // 返回处理
  365 + if (res.errorCode === 0) {
  366 +
  367 + // 解构数据
  368 + let { data: datas } = res;
  369 +
  370 + /* 设置页面数据 开始 */
  371 +
  372 + // 循环数据，找到新闻条目
  373 + for (let i = 0; i < datas.length; i++) {
  374 +
  375 + // 判断是否为新闻条目
  376 + if (datas[i].type == 5) {
  377 +
  378 + // 判断是否有新闻条目
  379 + if (datas[i].contents && datas[i].contents.length) {
  380 +
  381 + // 设置新闻条目标题/跳转连接
  382 + this.$set(this, 'news', {
  383 + title: datas[i].contents[0].title,
  384 + moreUrl: datas[i].moreUrl
  385 + });
  386 + }
  387 +
  388 + break;
  389 + }
  390 + }
  391 +
  392 + /* 设置页面数据 结束 */
  393 +
  394 + }
  395 + },
  396 +
334 397 /**
335 398 * 获取页面头部数据
336 399 */
... ... @@ -550,8 +613,8 @@
550 613  
551 614 // 跳转参数
552 615 let params = {
553   - type: '34',
554   - to: window.location.origin + window.location.pathname + '#/labourUnionSearch?type=web',
  616 + type: '5',
  617 + to: window.location.origin + window.location.pathname + '#/labourUnionSearch',
555 618 shop_type: ''
556 619 };
557 620  
... ... @@ -599,13 +662,43 @@
599 662 */
600 663 swiperJump(item) {
601 664  
  665 + },
  666 +
  667 + /**
  668 + * 跳转新闻列表页
  669 + * @param {Object} news [新闻条目对象]
  670 + */
  671 + toNewsList(news) {
  672 +
  673 + // 判断App内
  674 + if (this.isCNLive.value) {
602 675  
603   - console.log(item);
  676 + // 判断必要参数
  677 + if (typeof news === 'object' && news.moreUrl && typeof news.moreUrl === 'string') {
604 678  
  679 + // 判断通用跳转函数是否存在
  680 + if (typeof this.$parent.gotoDetail === 'function') {
605 681  
  682 + // 设置to参数
  683 + let to = 'https://wjjh5' + (this.mode == 'prod' ? '' : 'test') + '.cnlive.com/cnculColumn.html?moreUrl=' + encodeURIComponent(news.moreUrl);
606 684  
  685 + // 跳转参数
  686 + let params = {
  687 + type: '34',
  688 + to: to,
  689 + shop_type: ''
  690 + };
607 691  
608   - },
  692 + // 通用跳转
  693 + this.$parent.gotoDetail(params);
  694 + }
  695 + }
  696 + } else {
  697 +
  698 + // App外，唤起App
  699 + this.openApp();
  700 + }
  701 + },
609 702  
610 703 /**
611 704 * 跳转商品详情
... ...
src/pages/labourUnionSearch/labourUnionSearch.less 0 → 100644
  View file @14031a9
  1 +@charset "UTF-8";
  2 +
  3 +.search-page {
  4 + background-color: #EFEFEF;
  5 + .container {
  6 + position: relative;
  7 + .main-box {
  8 + width: 100%;
  9 + min-height: 100vh;
  10 + .nav-container {
  11 + position: fixed;
  12 + top: 0;
  13 + z-index: 100;
  14 + background-color: #FFFFFF;
  15 + width: 100%;
  16 + }
  17 + .nav-pl {
  18 + background-color: transparent;
  19 + width: 100%;
  20 + height: 96px;
  21 + }
  22 + .scroll-warp {
  23 + background-color: #EFEFEF;
  24 + .safe-area-inset-bottom {
  25 + @supports (padding-bottom: env(safe-area-inset-bottom)) {
  26 + & {
  27 + padding-bottom: env(safe-area-inset-bottom);
  28 + }
  29 + }
  30 + }
  31 + .section-box {
  32 + background-repeat: no-repeat;
  33 + background-size: 100%;
  34 + width: 100%;
  35 + .section {
  36 + margin: 30px auto 0 auto;
  37 + width: 690px;
  38 + &.full-width {
  39 + width: 100%;
  40 + }
  41 + &.inside {
  42 + margin-top: 0 !important;
  43 + padding-top: 0 !important;
  44 + }
  45 + &.white {
  46 + background-color: #FFFFFF;
  47 + }
  48 + &.border-radius {
  49 + border-radius: 24px;
  50 + overflow: hidden;
  51 + }
  52 + &:first-child {
  53 + margin-top: 0;
  54 + padding-top: 30px;
  55 + }
  56 + .list-container {
  57 + display: flex;
  58 + justify-content: space-between;
  59 + align-items: center;
  60 + flex-flow: wrap;
  61 + margin: 0 auto;
  62 + width: 690px;
  63 + .list-item {
  64 + margin-bottom: 30px;
  65 + width: 330px;
  66 + }
  67 + .discount-flag {
  68 + position: absolute;
  69 + top: 10px;
  70 + left: 10px;
  71 + z-index: 1;
  72 + background: linear-gradient(90deg, #F9EE7A 0%, #FAD844 100%);
  73 + padding: 1px 8px;
  74 + color: #945A08;
  75 + font-size: 20px;
  76 + font-weight: 400;
  77 + border-radius: 6px;
  78 + }
  79 + /deep/ .van-list__loading {
  80 + width: 100%;
  81 + .van-loading {
  82 + .van-loading__spinner {
  83 + margin-bottom: 30px;
  84 + width: 28px !important;
  85 + height: 28px !important;
  86 + }
  87 + .van-list__loading-text {
  88 + margin-bottom: 30px;
  89 + color: #333333;
  90 + font-size: 28px;
  91 + font-weight: 400;
  92 + }
  93 + .van-loading__text {
  94 + margin-bottom: 30px;
  95 + color: #333333;
  96 + font-size: 28px;
  97 + font-weight: 400;
  98 + }
  99 + }
  100 + }
  101 + /deep/ .van-list__finished-text {
  102 + margin-bottom: 30px;
  103 + color: #333333;
  104 + font-size: 28px;
  105 + font-weight: 400;
  106 + width: 100%;
  107 + }
  108 + }
  109 + .no-data {
  110 + padding-top: 416px;
  111 + width: 100%;
  112 + height: auto;
  113 + .icon-empty {
  114 + display: block;
  115 + margin: 0 auto;
  116 + width: 487px;
  117 + height: 298px;
  118 + & + .text {
  119 + margin-top: 20px;
  120 + }
  121 + }
  122 + .text {
  123 + color: #333333;
  124 + font-size: 30px;
  125 + font-weight: 400;
  126 + text-align: center;
  127 + }
  128 + }
  129 + .his-box {
  130 + margin: 0 auto;
  131 + padding-top: 30px;
  132 + width: 690px;
  133 + .title-box {
  134 + .title {
  135 + color: #FD862E;
  136 + font-size: 36px;
  137 + font-weight: bold;
  138 + }
  139 + }
  140 + .item-box {
  141 + display: flex;
  142 + justify-content: flex-start;
  143 + align-items: center;
  144 + flex-wrap: wrap;
  145 + .item {
  146 + background-color: #FFFFFF;
  147 + margin: 20px 10px 0 0;
  148 + padding: 2px 20px;
  149 + color: #FD862E;
  150 + font-size: 30px;
  151 + font-weight: bold;
  152 + border: 1px solid #B8B8B8;
  153 + border-radius: 24px;
  154 + &:last-child {
  155 + margin-right: 0;
  156 + }
  157 + }
  158 + }
  159 + .clear-his {
  160 + display: block;
  161 + margin: 130px auto 0 auto;
  162 + color: #FD862E;
  163 + font-size: 30px;
  164 + font-weight: bold;
  165 + text-align: center;
  166 + }
  167 + }
  168 + }
  169 + }
  170 + }
  171 + }
  172 + }
  173 + .goto-top {
  174 + position: fixed;
  175 + right: 30px;
  176 + bottom: 50px;
  177 + z-index: 1;
  178 + width: 96px;
  179 + height: 96px;
  180 + .goto-top-img {
  181 + display: block;
  182 + width: 96px;
  183 + height: 96px;
  184 + }
  185 + }
  186 +}
0 187 \ No newline at end of file
... ...
src/pages/labourUnionSearch/labourUnionSearch.vue 0 → 100644
  View file @14031a9
  1 +<template>
  2 + <div class="search-page">
  3 +
  4 + <!-- 容器 -->
  5 + <div class="container">
  6 +
  7 + <!-- 主体区域 -->
  8 + <div class="main-box">
  9 +
  10 + <!-- 导航栏容器 -->
  11 + <div class="nav-container" :style="'padding-top: ' + $parent.top.value + 'px'">
  12 +
  13 + <!-- 导航栏 -->
  14 + <nav-search-bar ref="navSearchBar" @back="back" @doSearch="doSearch" @clearInput="clearInput"
  15 + :navs="navsSearch">
  16 + </nav-search-bar>
  17 + </div>
  18 +
  19 + <!-- nav-pl -->
  20 + <div class="nav-pl" :style="'padding-top: ' + $parent.top.value + 'px'"></div>
  21 +
  22 + <!-- 滚动组件 -->
  23 + <div class="scroll-warp">
  24 +
  25 + <!-- 主内容浮动区域 -->
  26 + <div class="section-box">
  27 +
  28 + <!-- 搜索组件框 -->
  29 + <div class="section">
  30 +
  31 + <!-- 判断列表数组是否有数据，有再显示 -->
  32 + <template v-if="lists && lists.length">
  33 +
  34 + <!-- 上拉加载 -->
  35 + <van-list class="list-container" v-model="tabs.loading" :finished="tabs.finished" finished-text="~没有更多了~" @load="loadMore">
  36 +
  37 + <!-- 列表项 -->
  38 + <div class="list-item" v-for="(item, index) in lists" :key="index">
  39 +
  40 + <!-- 商品样式 III 列表 -->
  41 + <goods-item-i-i-i @jump="toDetail" @primary="primary"
  42 + :item="item">
  43 +
  44 + <!-- 角标 -->
  45 + <div class="discount-flag" slot="flag" v-if="item.is_gh != '1'">
  46 + 非工会选品
  47 + </div>
  48 + </goods-item-i-i-i>
  49 + </div>
  50 + </van-list>
  51 + </template>
  52 +
  53 + <!-- 没有搜索数据 -->
  54 + <template v-else-if="tabs && tabs.keyword">
  55 +
  56 + <!-- 未找到您搜索的内容 -->
  57 + <div class="no-data">
  58 +
  59 + <!-- 图片 -->
  60 + <img src="https://wjj.ys2.cnliveimg.com/769/img_new/1659946355366.png" class="icon-empty" />
  61 +
  62 + <!-- 提示文字 -->
  63 + <div class="text">搜索结果为空～</div>
  64 + </div>
  65 + </template>
  66 +
  67 + <!-- 未搜索时，显示历史搜索 -->
  68 + <template v-else>
  69 +
  70 + <!-- 历史搜索区块 -->
  71 + <div class="his-box" v-if="searchHistoryArr && searchHistoryArr.length">
  72 +
  73 + <!-- 标题 -->
  74 + <div class="title-box">
  75 + <div class="title">历史搜索</div>
  76 + </div>
  77 +
  78 + <!-- 历史搜索结果 -->
  79 + <div class="item-box">
  80 + <div class="item" v-for="(item, index) in searchHistoryArr" :key="index" @click="doSearch(item)">
  81 + {{item}}
  82 + </div>
  83 + </div>
  84 +
  85 + <!-- 清除历史搜索结果 -->
  86 + <div class="clear-his" @click="clearSearchHistoryArr">清除搜索历史</div>
  87 + </div>
  88 + </template>
  89 + </div>
  90 + </div>
  91 +
  92 + <!-- 安全底部距离 -->
  93 + <div class="safe-area-inset-bottom"></div>
  94 + </div>
  95 + </div>
  96 + </div>
  97 +
  98 + <!-- 回到顶部按钮 -->
  99 + <goto-top
  100 + :top="parseInt(150)">
  101 + </goto-top>
  102 + </div>
  103 +</template>
  104 +
  105 +<script>
  106 +
  107 + // 引入组件
  108 + import Vue from "vue";
  109 + import { Toast, Indicator } from "mint-ui";
  110 + import { List } from "vant";
  111 + import navSearchBar from '@/components/navSearchBar/navSearchBar';
  112 + import goodsItemIII from '@/components/goodsItemIII/goodsItemIII';
  113 + import gotoTop from "@/components/gotoTop/gotoTop";
  114 +
  115 + Vue.use(List);
  116 +
  117 + export default {
  118 + name: "searchPage",
  119 + data() {
  120 + return {
  121 + title: '',
  122 + statusBarHeight: 0, // 状态栏高度
  123 + scrollViewHeight: 0, // scroll-view高度
  124 + threshold: 230, // 出现返回顶部按钮的滚动条位置
  125 + scrollTop: 0, // 滚动到顶部位置，用于changeTab时，滚动条滚动到顶部
  126 + currScrollTop: 0, // 滚动条当前位置，用于changeTab时，滚动条滚动到顶部
  127 + CALL_STATUS: {
  128 + INIT: "init", // 初始化页面
  129 + LOAD_MORE: "loadMore" // 加载更多
  130 + },
  131 + navsSearch: null, // 导航栏对象
  132 + searchHistoryArr: [], // 搜索历史记录数组
  133 + tabs: {}, // tabsBar数据对象
  134 + interface: 'goodsSearch', // 列表页接口名称
  135 + lists: [] // 列表数据
  136 + }
  137 + },
  138 + components: {
  139 + navSearchBar,
  140 + goodsItemIII,
  141 + gotoTop
  142 + },
  143 + created() {
  144 +
  145 + // 设置标题
  146 + this.$set(this, 'title', '搜索');
  147 +
  148 + // 设置navs
  149 + this.$set(this, 'navsSearch', {
  150 + back: {
  151 + icon: 'static/img/icon_back.png'
  152 + },
  153 + search: {
  154 + icon: 'static/img/icon_search.png',
  155 + pl: '请输入关键字',
  156 + enabled: true
  157 + }
  158 + });
  159 +
  160 + // 初始化tabs对象
  161 + this.setTabs();
  162 +
  163 + // 获取历史搜索结果Storage
  164 + this.getSearchHistoryArr();
  165 + },
  166 + methods: {
  167 +
  168 + /**
  169 + * scroll-view组件滚动监听
  170 + * @param {Object} e [scroll-view滚动事件对象]
  171 + */
  172 + scroll(e) {
  173 +
  174 + // 设置currScrollTop
  175 + this.$set(this, 'currScrollTop', e.detail.scrollTop);
  176 + },
  177 +
  178 + /**
  179 + * 加载更多
  180 + */
  181 + loadMore() {
  182 +
  183 + // 判断是否可加载
  184 + if (this.tabs.loadingNow === false && this.tabs.finished === false) {
  185 +
  186 + // 设置加载中状态
  187 + this.$set(this.tabs, 'loadingNow', true);
  188 +
  189 + if (this.tabs.page == 1 || this.tabs.page === undefined) {
  190 +
  191 + // 设置初始化页码
  192 + this.$set(this.tabs, 'page', 1);
  193 +
  194 + // 初始化列表
  195 + this.getLists(this.tabs, this.CALL_STATUS.INIT);
  196 + } else {
  197 +
  198 + // 判断页面是数字再执行
  199 + if (!isNaN(parseInt(this.tabs.page)) && this.tabs.page > 1) {
  200 +
  201 + // 加载更多
  202 + this.getLists(this.tabs, this.CALL_STATUS.LOAD_MORE);
  203 + }
  204 + }
  205 + }
  206 + },
  207 +
  208 + /**
  209 + * 获取数据列表
  210 + * @param {Object} tabs [tabs对象，获取数据必要参数对象]
  211 + * @param {Object} CALL_STATUS [何处触发请求]
  212 + */
  213 + getLists(tabs, CALL_STATUS = this.CALL_STATUS.INIT) {
  214 +
  215 + // 判断必要参数
  216 + if (typeof tabs === 'object' && tabs.interface && tabs.page >= 1 && tabs.loading === false && tabs.finished === false) {
  217 +
  218 + // 设置loading状态
  219 + this.$set(tabs, 'loading', true);
  220 +
  221 + // 加载中提示
  222 + Indicator.open("加载中...");
  223 +
  224 + // 设置请求参数
  225 + let reqParams = {
  226 + keyword: tabs.keyword,
  227 + uid: (this.$route.query.uid || 0),
  228 + page: tabs.page
  229 + };
  230 +
  231 + // 请求接口
  232 + this.http('/Api/' + (this.getApiVersion().index) + '/' + tabs.interface, reqParams, this.getListsCallback, {
  233 + method: 'POST',
  234 + tabs,
  235 + CALL_STATUS
  236 + });
  237 + }
  238 + },
  239 +
  240 + /**
  241 + * 获取数据列表回调
  242 + * @param {Object} res [服务器返回数据]
  243 + * @param {Object} ext [扩展参数]
  244 + */
  245 + getListsCallback(res, ext) {
  246 +
  247 + // 加载完成
  248 + Indicator.close();
  249 +
  250 + // 如果是初始化，清空lists数据
  251 + if (ext.CALL_STATUS === this.CALL_STATUS.INIT) {
  252 +
  253 + // 清空lists数据
  254 + this.$set(this, 'lists', []);
  255 + }
  256 +
  257 + // 返回处理
  258 + if (res.code == 200) {
  259 +
  260 + // 解构数据
  261 + let {data: datas} = res;
  262 +
  263 + /* 设置列表数据 开始 */
  264 +
  265 + // 判断如果有数据
  266 + if (datas && datas.goods && datas.goods.length) {
  267 +
  268 + switch (ext.CALL_STATUS) {
  269 + case this.CALL_STATUS.INIT:
  270 +
  271 + // 设置数据数组列表
  272 + this.$set(this, 'lists', datas.goods);
  273 +
  274 + // 判断scroll-view滚动条是否需要回到顶部
  275 + if (this.currScrollTop > 0) {
  276 +
  277 + // scroll-view滚动条回到顶部
  278 + this.$set(this, 'scrollTop', this.currScrollTop);
  279 + }
  280 +
  281 + // 下一周期执行
  282 + this.$nextTick(() => {
  283 +
  284 + // 设置滚动条到scroll-view顶部
  285 + this.$set(this, 'scrollTop', 0);
  286 + });
  287 + break;
  288 + case this.CALL_STATUS.LOAD_MORE:
  289 +
  290 + // 追加数据数组列表
  291 + this.$set(this, 'lists', [...this.lists, ...datas.goods]);
  292 + break;
  293 + }
  294 +
  295 + // 设置页码
  296 + this.$set(ext.tabs, 'page', ++ext.tabs.page);
  297 +
  298 + // 取消Loading中状态，设置加载未完成，可以再加载更多
  299 + this.$set(ext.tabs, 'loading', false);
  300 + this.$set(ext.tabs, 'finished', false);
  301 + } else {
  302 +
  303 + // 取消Loading中状态，设置加载已完成，不能再加载更多
  304 + this.$set(ext.tabs, 'loading', false);
  305 + this.$set(ext.tabs, 'finished', true);
  306 + }
  307 +
  308 + /* 设置列表数据 结束 */
  309 +
  310 + } else if (res.code == 400) {
  311 +
  312 + // 获取数据列表失败
  313 + Toast(res.message);
  314 + } else {
  315 +
  316 + // 获取数据列表失败
  317 + Toast('获取数据列表失败');
  318 + }
  319 + },
  320 +
  321 + /**
  322 + * 初始化tabs对象
  323 + * @param {String} keyword [搜索关键字，默认为空字符串]
  324 + */
  325 + setTabs(keyword = '') {
  326 +
  327 + if (this.debug) {
  328 + console.log('setTabs', keyword);
  329 + }
  330 +
  331 + /* 初始化tabs数据 开始 */
  332 +
  333 + // tabsBar数据对象
  334 + this.$set(this, 'tabs', {
  335 + interface: this.interface, // 列表页接口名称
  336 + keyword: keyword, // 搜索关键字
  337 + page: 1, // 页码
  338 + loading: false, // 加载中状态
  339 + loadingNow: false,
  340 + finished: false // 全部加载完成
  341 + });
  342 +
  343 + /* 初始化tabs数据 结束 */
  344 +
  345 + if (this.debug) {
  346 + console.log('setTabs', this.tabs);
  347 + }
  348 + },
  349 +
  350 + /**
  351 + * 搜索事件监听
  352 + * @param {String} keyword [搜索关键字]
  353 + */
  354 + doSearch(keyword) {
  355 +
  356 + if (this.debug) {
  357 + console.log('doSearch', keyword);
  358 + }
  359 +
  360 + // 判断必要参数
  361 + if (keyword && typeof keyword === 'string' && keyword.trim()) {
  362 +
  363 + // 清空列表
  364 + this.$set(this, 'lists', []);
  365 +
  366 + // 初始化tabs对象
  367 + this.setTabs(keyword);
  368 +
  369 + /* 记录搜搜历史 开始 */
  370 +
  371 + // 最多8个历史搜索结果
  372 + if (this.searchHistoryArr.length >= 8) {
  373 +
  374 + // 弹出一个数据
  375 + this.searchHistoryArr.pop();
  376 + }
  377 +
  378 + // 向前插入搜索历史
  379 + this.searchHistoryArr.unshift(keyword);
  380 +
  381 + // 搜索历史放入Storage中
  382 + this.setSearchHistoryArr(keyword);
  383 +
  384 + /* 记录搜搜历史 结束 */
  385 +
  386 + // 下一周期执行
  387 + this.$nextTick(() => {
  388 +
  389 + // 请求搜索接口
  390 + this.getLists(this.tabs, this.CALL_STATUS.INIT);
  391 + });
  392 + }
  393 + },
  394 +
  395 + /**
  396 + * 清除输入框事件监听
  397 + */
  398 + clearInput() {
  399 +
  400 + if (this.debug) {
  401 + console.log('clearInput');
  402 + }
  403 +
  404 + // 清空列表
  405 + this.$set(this, 'lists', []);
  406 +
  407 + // 初始化tabs对象
  408 + this.setTabs();
  409 + },
  410 +
  411 + /**
  412 + * 获取历史搜索结果Storage
  413 + */
  414 + getSearchHistoryArr() {
  415 +
  416 + // 处理搜索历史Storage数组
  417 + if (window.localStorage.getItem("searchHistoryArr")) {
  418 +
  419 + // 获取搜索历史数组
  420 + this.$set(this, "searchHistoryArr", window.localStorage.getItem("searchHistoryArr").split(","));
  421 + }
  422 + },
  423 +
  424 + /**
  425 + * 设置历史搜索结果Storage
  426 + * @param {String} keyword [搜索关键字]
  427 + */
  428 + setSearchHistoryArr(keyword) {
  429 +
  430 + // 设置会话keyword
  431 + window.sessionStorage.setItem("keyword", keyword);
  432 +
  433 + this.$nextTick(() => {
  434 +
  435 + // 设置input值，通过历史记录搜索时，会用到
  436 + this.$refs.navSearchBar.setKeyword(keyword);
  437 + });
  438 +
  439 + // 处理搜索历史Storage数组
  440 + if (!window.localStorage.getItem("searchHistoryArr")) {
  441 + window.localStorage.setItem("searchHistoryArr", "");
  442 + }
  443 +
  444 + // 判断keyword是否有值
  445 + if (keyword) {
  446 +
  447 + // 数组压栈
  448 + this.searchHistoryArr.unshift(keyword);
  449 +
  450 + // 数组去重
  451 + this.$set(this, "searchHistoryArr", Array.from(new Set(this.searchHistoryArr)));
  452 +
  453 + // 判断数组大小，最多存8个
  454 + if (this.searchHistoryArr.length > 8) {
  455 +
  456 + // 循环弹出数组多余元素
  457 + for (let i = this.searchHistoryArr.length; i > 8 ; i--) {
  458 + this.searchHistoryArr.pop();
  459 + }
  460 + }
  461 +
  462 + // 将数组信息序列化，存入Storage中
  463 + window.localStorage.setItem("searchHistoryArr", this.searchHistoryArr.join(","));
  464 + }
  465 + },
  466 +
  467 + /**
  468 + * 清空搜索历史
  469 + */
  470 + clearSearchHistoryArr() {
  471 +
  472 + // 清除搜索历史Storage数组
  473 + if (window.localStorage.getItem("searchHistoryArr")) {
  474 + window.localStorage.setItem("searchHistoryArr", "");
  475 + }
  476 +
  477 + // 清除searchHistoryArr数组
  478 + this.$set(this, "searchHistoryArr", []);
  479 + },
  480 +
  481 + /**
  482 + * 跳转商品详情
  483 + * @param {Object} item [数据对象]
  484 + */
  485 + toDetail(item) {
  486 +
  487 + // 判断App内
  488 + if (this.isCNLive.value) {
  489 +
  490 + // 判断通用跳转函数是否存在
  491 + if (typeof this.$parent.gotoDetail === 'function') {
  492 +
  493 + // 跳转参数
  494 + let params = {
  495 + type: '2',
  496 + to: item.id,
  497 + shop_type: '3'
  498 + };
  499 +
  500 + // 通用跳转
  501 + this.$parent.gotoDetail(params, {
  502 + activityCode: this.activityCode ? this.activityCode : '' // 添加页面渠道码
  503 + });
  504 + }
  505 + } else {
  506 +
  507 + // App外，唤起App
  508 + this.openApp();
  509 + }
  510 + },
  511 +
  512 + /**
  513 + * 项目按钮事件
  514 + * @param {Object} item [数据对象]
  515 + */
  516 + primary(item) {
  517 +
  518 + // 跳转商品详情
  519 + this.toDetail(item);
  520 + },
  521 +
  522 + /**
  523 + * 后退
  524 + */
  525 + back() {
  526 +
  527 + // 判断是否有处理函数
  528 + if (typeof this.$parent.back === 'function') {
  529 +
  530 + // 后退
  531 + this.$parent.back();
  532 + } else {
  533 +
  534 + // 后退
  535 + window.history.go(-1);
  536 + }
  537 + }
  538 + },
  539 + head: {
  540 + title () {
  541 + return {
  542 + inner: this.title
  543 + }
  544 + }
  545 + },
  546 + watch: {
  547 +
  548 + // 设置页面标题
  549 + title(newVal) {
  550 + if (this.$store.state.browser.toLowerCase() == "qq" && this.$store.state.deviceType.toLowerCase() == "iphone") {
  551 + this.$iFrame.insertIFrame(newVal);
  552 + } else {
  553 + this.$emit("updateHead");
  554 + }
  555 + }
  556 + },
  557 + mounted() {
  558 +
  559 + }
  560 + }
  561 +</script>
  562 +
  563 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  564 +<style rel="stylesheet/less" lang="less" scoped>
  565 + @import 'labourUnionSearch';
  566 +</style>
0 567 \ No newline at end of file
... ...
src/router/index.js
  View file @14031a9
... ... @@ -283,6 +283,17 @@ const router = new Router({
283 283 }
284 284 },
285 285 {
  286 + // 工会商品搜索
  287 + path: "/labourUnionSearch",
  288 + name: "labourUnionSearch",
  289 + component: resolve => {
  290 + require(["@/pages/labourUnionSearch/labourUnionSearch"], resolve);
  291 + },
  292 + meta: {
  293 + requireAuth: false
  294 + }
  295 + },
  296 + {
286 297 // 工会商品列表首页2
287 298 path: "/labourUnion2",
288 299 name: "labourUnion2",
... ...
static/img/icon_news.png 0 → 100644
View file @14031a9

1.59 KB