w-front-end / select_good · Commits

Commit 827809e1da750a310762ed23a76a7d97053e7022

Authored by 王强
1 parent 2d9ffea4

中国总工会，App内页面改版~

Inline Side-by-side
Showing 7 changed files with 1456 additions and 194 deletions
src/components/searchBar/searchBar.less 0 → 100644
  View file @827809e
  1 +@charset "UTF-8";
  2 +
  3 +.search-bar {
  4 + .box {
  5 + width: 100%;
  6 + height: 66px;
  7 + margin: 0 auto;
  8 + .search-form {
  9 + display: flex;
  10 + justify-content: space-between;
  11 + align-items: center;
  12 + width: 100%;
  13 + height: 66px;
  14 + background-color: #EAEAEA;
  15 + border-radius: 32px;
  16 + .left {
  17 + display: flex;
  18 + align-items: center;
  19 + width: calc(100% - 50px);
  20 + height: 100%;
  21 + .icon {
  22 + display: flex;
  23 + justify-content: center;
  24 + align-items: center;
  25 + margin-left: 50px;
  26 + width: 34px;
  27 + height: 34px;
  28 + .img {
  29 + display: block;
  30 + width: 34px;
  31 + height: 34px;
  32 + }
  33 + }
  34 + .input-box {
  35 + display: flex;
  36 + justify-content: space-between;
  37 + align-items: center;
  38 + width: 80%;
  39 + height: 100%;
  40 + font-size: 34px;
  41 + padding-left: 18px;
  42 + .search-input-view {
  43 + color: #B2B2B2;
  44 + width: 100%;
  45 + }
  46 + .search-input {
  47 + color: #000000;
  48 + width: 100%;
  49 + }
  50 + }
  51 + }
  52 + .right {
  53 + display: flex;
  54 + align-items: center;
  55 + width: 50px;
  56 + height: 100%;
  57 + .clear-input {
  58 + margin-right: 14px;
  59 + width: 36px;
  60 + height: 36px;
  61 + .img {
  62 + display: block;
  63 + width: 36px;
  64 + height: 36px;
  65 + }
  66 + }
  67 + }
  68 + }
  69 + }
  70 +}
0 71 \ No newline at end of file
... ...
src/components/searchBar/searchBar.vue 0 → 100644
  View file @827809e
  1 +<template>
  2 + <div class="search-bar" v-if="searchs">
  3 + <div class="box">
  4 + <div class="search-form">
  5 + <div class="left">
  6 + <div class="icon">
  7 + <img src="static/img/icon_search.png" class="img" />
  8 + </div>
  9 + <div class="input-box">
  10 + <div class="search-input-view" v-if="searchs.isLink" @click="toSearch">{{searchs.placeholder}}</div>
  11 + <input type="search" class="search-input" :placeholder="searchs.placeholder" placeholder-style="color: #B2B2B2" v-else v-model="keyword" confirm-type="search" @input="doInput" @confirm="doSearch" />
  12 + </div>
  13 + </div>
  14 + <div class="right">
  15 + <div class="clear-input" v-if="keyword" @click="clearInput">
  16 + <img src="static/img/icon_clear_input.png" class="img" />
  17 + </div>
  18 + </div>
  19 + </div>
  20 + </div>
  21 + </div>
  22 +</template>
  23 +
  24 +<script>
  25 + export default {
  26 + name: "searchBar",
  27 + data() {
  28 + return {
  29 + keyword: ""
  30 + };
  31 + },
  32 + props: ["searchs"],
  33 + methods: {
  34 +
  35 + /**
  36 + * 获取keyword
  37 + */
  38 + getKeyword() {
  39 + return this.keyword;
  40 + },
  41 +
  42 + /**
  43 + * 设置keyword
  44 + * @param {string} keyword [搜索关键字]
  45 + */
  46 + setKeyword(keyword) {
  47 + this.$set(this, "keyword", keyword);
  48 + },
  49 +
  50 + /**
  51 + * 键盘输入监听
  52 + * @param {Object} $event [键盘输入对象]
  53 + */
  54 + doInput($event) {
  55 + this.$emit("doInput", $event.detail.value);
  56 + },
  57 +
  58 + /**
  59 + * 搜索
  60 + * @param {object} $event [input对象]
  61 + */
  62 + doSearch($event) {
  63 +
  64 + // 调用搜索
  65 + if ($event.detail.value) {
  66 + this.$emit("doSearch", $event.detail.value);
  67 + }
  68 + },
  69 +
  70 + /**
  71 + * 跳转搜索页面
  72 + */
  73 + toSearch() {
  74 +
  75 + // 跳转搜索页面
  76 + this.$emit("toSearch");
  77 + },
  78 +
  79 + /**
  80 + * 清除搜索文本内容
  81 + */
  82 + clearInput() {
  83 +
  84 + // 清除搜索文本内容
  85 + this.$set(this, "keyword", "");
  86 +
  87 + // 发送清空input事件
  88 + this.$emit("clearInput");
  89 + }
  90 + }
  91 + }
  92 +</script>
  93 +
  94 +<style rel="stylesheet/less" lang="less" scoped>
  95 + @import './searchBar';
  96 +</style>
0 97 \ No newline at end of file
... ...
src/pages/labourUnion copy/labourUnion.less 0 → 100644
  View file @827809e
  1 +@charset "UTF-8";
  2 +
  3 +.labour-union-page {
  4 + background-color: #ffffff;
  5 + min-height: 100vh;
  6 + .nav-box {
  7 + position: fixed;
  8 + top: 0;
  9 + z-index: 100;
  10 + background-color: #ffffff;
  11 + width: 100%;
  12 + height: auto;
  13 + .call-app-box {
  14 + width: 100%;
  15 + }
  16 + .back-box {
  17 + background-color: #ffffff;
  18 + width: 100%;
  19 + border-bottom: 1px solid #E5E5E5;
  20 + }
  21 + }
  22 + .pl {
  23 + background-color: transparent;
  24 + width: 100%;
  25 + &.is-open-app {
  26 + height: 122px;
  27 + }
  28 + &.is-cnlive {
  29 + height: 93px;
  30 + }
  31 + &.is-hide {
  32 + height: 0px;
  33 + }
  34 + &.tabsFixed {
  35 + &.is-open-app {
  36 + height: 212px;
  37 + }
  38 + &.is-cnlive {
  39 + height: 185px;
  40 + }
  41 + &.is-hide {
  42 + height: 90px;
  43 + }
  44 + }
  45 + }
  46 + .main-box {
  47 + .header-box {
  48 + margin: 30px auto 30px auto;
  49 + width: 690px;
  50 + height: auto;
  51 + border-radius: 16px;
  52 + overflow: hidden;
  53 + .header-img {
  54 + display: block;
  55 + width: 100%;
  56 + height: auto;
  57 + }
  58 + }
  59 + .balance-box {
  60 + background-repeat: no-repeat;
  61 + background-size: 100% 100%;
  62 + margin: 30px auto;
  63 + width: 690px;
  64 + height: 210px;
  65 + .b-box {
  66 + display: flex;
  67 + flex-direction: column;
  68 + justify-content: space-between;
  69 + margin: 0 auto;
  70 + padding: 40px 0 20px 0;
  71 + width: 630px;
  72 + height: auto;
  73 + .balance-top {
  74 + display: flex;
  75 + justify-content: space-between;
  76 + align-items: flex-start;
  77 + .title {
  78 + color: rgba(255, 255, 255, 0.69);
  79 + font-size: 28px;
  80 + font-weight: 500;
  81 + }
  82 + .sub-title {
  83 + color: #FFE450;
  84 + font-size: 22px;
  85 + font-weight: 400;
  86 + }
  87 + }
  88 + .balance-bottom {
  89 + display: flex;
  90 + justify-content: space-between;
  91 + align-items: center;
  92 + margin-top: 20px;
  93 + .price-box {
  94 + display: flex;
  95 + justify-content: flex-start;
  96 + align-items: baseline;
  97 + color: #FFFFFF;
  98 + font-weight: bold;
  99 + .sy {
  100 + font-size: 60px;
  101 + }
  102 + .integer {
  103 + display: flex;
  104 + font-size: 84px;
  105 + }
  106 + .decimal {
  107 + font-size: 60px;
  108 + }
  109 + }
  110 + .btn {
  111 + &.btn-default {
  112 + display: flex;
  113 + justify-content: center;
  114 + align-items: center;
  115 + background: linear-gradient(180deg, #FFE653 0%, #FFC829 100%);
  116 + padding: 10px 24px;
  117 + border-radius: 30px;
  118 + .text {
  119 + color: #3A3A3B;
  120 + font-size: 28px;
  121 + font-weight: 500;
  122 + }
  123 + .icon-back-arrow-right {
  124 + display: block;
  125 + width: 30px;
  126 + height: 30px;
  127 + }
  128 + }
  129 + }
  130 + }
  131 + }
  132 + }
  133 + .tabs-box {
  134 + background-color: #ffffff;
  135 + width: 100%;
  136 + height: 90px;
  137 + // border-top: 1px solid transparent;
  138 + border-bottom: 1px solid transparent;
  139 + &.tabsFixed {
  140 + position: fixed;
  141 + top: 0;
  142 + z-index: 100;
  143 + // border-top: 1px solid #E5E5E5;
  144 + border-bottom: 1px solid #E5E5E5;
  145 + &.is-open-app {
  146 + top: 122px;
  147 + }
  148 + &.is-cnlive {
  149 + top: 95px;
  150 + }
  151 + &.is-hide {
  152 + top: 0;
  153 + }
  154 + }
  155 + }
  156 + .column-list-container {
  157 + padding-top: 30px;
  158 + .section {
  159 + // background-color: #ffffff;
  160 + margin: 0 auto 40px auto;
  161 + width: 690px;
  162 + height: auto;
  163 + border-radius: 24px;
  164 + overflow: hidden;
  165 + &:last-child {
  166 + margin-bottom: 0;
  167 + }
  168 + &.goods-list {
  169 + .column-list-box {
  170 + /deep/ .item-box {
  171 + border: 1px solid #F1F0F0;
  172 + border-radius: 16px;
  173 + }
  174 + }
  175 + .discount-flag {
  176 + position: absolute;
  177 + top: 10px;
  178 + left: 10px;
  179 + z-index: 1;
  180 + background: linear-gradient(90deg, #F9EE7A 0%, #FAD844 100%);
  181 + padding: 1px 8px;
  182 + color: #945A08;
  183 + font-size: 20px;
  184 + font-weight: 400;
  185 + border-radius: 6px;
  186 + }
  187 + }
  188 + }
  189 + /deep/ .van-list__loading {
  190 + .van-loading {
  191 + .van-loading__spinner {
  192 + width: 28px !important;
  193 + height: 28px !important;
  194 + }
  195 + .van-list__loading-text {
  196 + margin-bottom: 30px;
  197 + color: #333333;
  198 + font-size: 28px;
  199 + font-weight: 400;
  200 + }
  201 + .van-loading__text {
  202 + margin-bottom: 30px;
  203 + color: #333333;
  204 + font-size: 28px;
  205 + font-weight: 400;
  206 + }
  207 + }
  208 + }
  209 + /deep/ .van-list__finished-text {
  210 + margin-bottom: 30px;
  211 + color: #333333;
  212 + font-size: 28px;
  213 + font-weight: 400;
  214 + }
  215 + }
  216 + .bottom-pl {
  217 + background-color: transparent;
  218 + width: 100%;
  219 + // height: 100px;
  220 + height: 1px;
  221 + }
  222 + .tips-box {
  223 + position: fixed;
  224 + bottom: 0;
  225 + z-index: 1;
  226 + background-color: #FFF6E5;
  227 + padding: 30px 0;
  228 + width: 100%;
  229 + height: auto;
  230 + .tips {
  231 + display: flex;
  232 + justify-content: flex-start;
  233 + align-items: center;
  234 + margin: 0 auto;
  235 + width: 690px;
  236 + height: 100%;
  237 + .tips-img {
  238 + display: block;
  239 + width: 26px;
  240 + height: 26px;
  241 + & + .text {
  242 + margin-left: 14px;
  243 + }
  244 + }
  245 + .text {
  246 + color: #FEA835;
  247 + font-size: 24px;
  248 + font-weight: 400;
  249 + }
  250 + }
  251 + }
  252 + }
  253 +}
... ...
src/pages/labourUnion copy/labourUnion.vue 0 → 100644
  View file @827809e
  1 +<template>
  2 + <div class="labour-union-page" v-if="tabs.list[tabs.active]">
  3 +
  4 + <!-- 导航区域 -->
  5 + <div class="nav-box" :style="'padding-top: ' + $parent.top.value + 'px'" ref='navBox'>
  6 +
  7 + <!-- H5唤起App组件 -->
  8 + <call-app-box class="call-app-box" ref="callApp" v-if="!isCNLive.value && $parent.isOpenApp.value"
  9 + :callApps="$parent.callApps">
  10 + </call-app-box>
  11 +
  12 + <!-- 后退导航 -->
  13 + <back-box class="back-box" :class="{'hide': $route.query.hideBack == true}" v-if="isCNLive.value" @back="back"
  14 + :backs="backs">
  15 + </back-box>
  16 + </div>
  17 +
  18 + <!-- pl -->
  19 + <div class="pl" :class="{'is-cnlive': isCNLive.value, 'is-open-app': $parent.isOpenApp.value, 'is-hide': $route.query.hideBack == true, 'tabsFixed': tabs.fixed}" :style="'padding-top: ' + $parent.top.value + 'px'"></div>
  20 +
  21 + <!-- 主区域 -->
  22 + <div class="main-box">
  23 +
  24 + <!-- 头图 -->
  25 + <div class="header-box" v-if="ghBanner">
  26 + <img :src="ghBanner + SIGN.BIG" class="header-img" />
  27 + </div>
  28 +
  29 + <!-- 余额展示区块 -->
  30 + <div class="balance-box" :style="{'backgroundImage': 'url(' + balanceBg + ')'}">
  31 + <div class="b-box">
  32 + <div class="balance-top">
  33 + <div class="title">
  34 + 我的余额
  35 + </div>
  36 + <div class="sub-title">
  37 + 工会福利商品仅限网家家支付
  38 + </div>
  39 + </div>
  40 + <div class="balance-bottom">
  41 +
  42 + <!-- 添加key，用户重新渲染计算属性 -->
  43 + <div class="price-box" :key="priceUpdateKey">
  44 + <div class="sy">￥</div>
  45 + <div class="integer">{{getInteger(money)}}.</div>
  46 + <div class="decimal">{{getDecimal(money)}}</div>
  47 + </div>
  48 + <div class="btn btn-default" @click="toOrderList">
  49 + <div class="text">
  50 + 购买记录
  51 + </div>
  52 + <img src="static/img/icon_back_arrow_right.png" class="icon-back-arrow-right" />
  53 + </div>
  54 + </div>
  55 + </div>
  56 + </div>
  57 +
  58 + <!-- tab导航 -->
  59 + <div class="tabs-box" :class="{'is-cnlive': isCNLive.value, 'is-open-app': $parent.isOpenApp.value, 'is-hide': $route.query.hideBack == true, 'tabsFixed': tabs.fixed}" :style="{'top': this.tabs.top}" ref='tabsBox'>
  60 +
  61 + <!-- 横向滑动tabs导航组件 -->
  62 + <horiz-list v-if="tabs.list && tabs.list.length" @change="change"
  63 + :lists="tabs.list"
  64 + com="tab2"
  65 + :pid="tabs.active">
  66 + </horiz-list>
  67 + </div>
  68 +
  69 + <!-- 上拉加载 -->
  70 + <van-list class="column-list-container" v-model="tabs.list[tabs.active].loading" :finished="tabs.list[tabs.active].finished" finished-text="~没有更多了~" @load="loadMore">
  71 +
  72 + <!-- 商品列表 -->
  73 + <div class="section goods-list" v-if="lists[tabs.active] && lists[tabs.active].length">
  74 +
  75 + <!-- 商品样式 7 列表 -->
  76 + <column-list-box class="column-list-box" @jump="toDetail" @primary="primary"
  77 + :lists="lists[tabs.active]"
  78 + com='7'
  79 + goodType='2'
  80 + flag='工会选品'>
  81 + </column-list-box>
  82 + </div>
  83 + </van-list>
  84 +
  85 + <div class="bottom-pl"></div>
  86 + </div>
  87 +
  88 + <!-- 回到顶部按钮 -->
  89 + <goto-top
  90 + :top="parseInt(150)">
  91 + </goto-top>
  92 + </div>
  93 +</template>
  94 +
  95 +<script>
  96 +
  97 + // 引入组件
  98 + import Vue from "vue";
  99 + import { Toast, Indicator } from "mint-ui";
  100 + import { List } from "vant";
  101 + import callAppBox from "@/components/callAppBox/callAppBox";
  102 + import backBox from "@/components/backBox/backBox";
  103 + import horizList from "@/components/horizList/horizList";
  104 + import columnListBox from "@/components/columnListBox/columnListBox";
  105 + import gotoTop from "@/components/gotoTop/gotoTop";
  106 +
  107 + Vue.use(List);
  108 +
  109 + export default {
  110 + name: 'labourUnionPage',
  111 + data () {
  112 + return {
  113 + title: "", // 标题
  114 + backs: null, // 后退按钮组
  115 + ghBanner: '', // 工会Banner图片
  116 + balanceBg: 'static/img/balance_bg.png', // 余额区块背景图片
  117 + money: '0.00', // 我的余额
  118 + priceUpdateKey: 0, // 余额组件key
  119 + CALL_STATUS: {
  120 + INIT: "init", // 初始化页面
  121 + LOAD_MORE: "loadMore" // 加载更多
  122 + },
  123 + activityCode: 'ds_fwh_203', // 页面渠道码
  124 + tabs: { // tabs设置
  125 + fixed: false, // 是否吸顶
  126 + offsetTop: 0, // 距离顶部距离
  127 + top: 0, // 吸顶的top值
  128 + active: 0, // 活动项
  129 + init: false, // tabs数据是否初始化过，防止重复设置tabs列表
  130 + list: [ // tabs数组
  131 + {
  132 + id: 0,
  133 + title: '全部',
  134 + page: 1,
  135 + loading: false,
  136 + loadingNow: false,
  137 + finished: false
  138 + }
  139 + ]
  140 + },
  141 + lists: [] // 列表数据
  142 + }
  143 + },
  144 + components: {
  145 + callAppBox,
  146 + backBox,
  147 + horizList,
  148 + columnListBox,
  149 + gotoTop
  150 + },
  151 + computed: {
  152 +
  153 + /**
  154 + * 获取输入数字的整数部分
  155 + */
  156 + getInteger () {
  157 + return (number) => {
  158 + return parseInt(number);
  159 + }
  160 + },
  161 +
  162 + /**
  163 + * 获取输入数字的小数部分
  164 + */
  165 + getDecimal () {
  166 + return (number) => {
  167 +
  168 + // 拆分数字
  169 + let numberArr = number.toString().split(".");
  170 +
  171 + // 判断是否有效数部分
  172 + if (numberArr.length === 2) {
  173 + return numberArr[1];
  174 + } else {
  175 + return "00";
  176 + }
  177 + }
  178 + }
  179 + },
  180 + created() {
  181 +
  182 + // 判断是否在App内
  183 + if (this.isCNLive.value) {
  184 +
  185 + // 添加后退按钮组“后退”和“分享”按钮
  186 + this.$set(this, 'backs', {
  187 + funcs: {
  188 + back: {
  189 + icon: "static/img/icon_back.png"
  190 + },
  191 + // funcArray: [
  192 + // {
  193 + // icon: "static/img/icon_share.png",
  194 + // func: this.toShare
  195 + // }
  196 + // ]
  197 + }
  198 + });
  199 + }
  200 +
  201 + // 获取页面头部数据
  202 + this.ghIndex();
  203 +
  204 + // 工会商品列表（初始化）
  205 + this.ghGoodsList(this.CALL_STATUS.INIT);
  206 + },
  207 + methods: {
  208 +
  209 + /**
  210 + * 加载更多
  211 + */
  212 + loadMore() {
  213 +
  214 + // 判断是否可加载
  215 + if (this.tabs.list[this.tabs.active].loadingNow === false || this.tabs.list[this.tabs.active].loadingNow === undefined) {
  216 +
  217 + // 设置加载中状态
  218 + this.$set(this.tabs.list[this.tabs.active], 'loadingNow', true);
  219 +
  220 + if (this.tabs.list[this.tabs.active].page == '1' || this.tabs.list[this.tabs.active].page === undefined) {
  221 +
  222 + // 设置初始化页码
  223 + this.$set(this.tabs.list[this.tabs.active], 'page', 1);
  224 +
  225 + // 工会商品列表
  226 + this.ghGoodsList(this.CALL_STATUS.INIT);
  227 + } else {
  228 +
  229 + // 判断页面是数字再执行
  230 + if (!isNaN(parseInt(this.tabs.list[this.tabs.active].page))) {
  231 +
  232 + // 工会商品列表
  233 + this.ghGoodsList(this.CALL_STATUS.LOAD_MORE);
  234 + }
  235 + }
  236 + }
  237 + },
  238 +
  239 + /**
  240 + * 切换tab
  241 + * @param {Object} item [对象数据]
  242 + * @param {Number} index [索引]
  243 + */
  244 + change(item, index) {
  245 +
  246 + // 切换前检查网络状态
  247 + if (this.$parent.onLine) {
  248 +
  249 + // 切换tab
  250 + this.$set(this.tabs, 'active', index);
  251 +
  252 + // 根据参数判断请求哪个接口，获取哪个列表
  253 + if (this.tabs.list[this.tabs.active].type == '1' && (!this.tabs.list[this.tabs.active].page || this.tabs.list[this.tabs.active].page == 1)) {
  254 +
  255 + // 工会商品列表（初始化）
  256 + this.ghGoodsList(this.CALL_STATUS.INIT);
  257 + }
  258 +
  259 + // 回到顶部
  260 + this.gotoTop();
  261 + } else {
  262 +
  263 + // 网络异常提醒
  264 + Toast("网络异常，请检查网络");
  265 + }
  266 + },
  267 +
  268 + /**
  269 + * 回到顶部
  270 + */
  271 + gotoTop() {
  272 + document.documentElement.scrollTop = document.body.scrollTop = 0;
  273 + },
  274 +
  275 + /**
  276 + * 获取页面头部数据
  277 + */
  278 + ghIndex() {
  279 +
  280 + // 判断必要参数
  281 + if (this.$route.query.ghId) {
  282 +
  283 + // 加载中提示
  284 + Indicator.open("加载中...");
  285 +
  286 + // 设置扩展参数
  287 + let ext = {
  288 + method: "POST"
  289 + };
  290 +
  291 + // 判断如果在App内，设置请求头参数
  292 + if (this.isCNLive.value) {
  293 +
  294 + // 初始化headers
  295 + let headers = {};
  296 +
  297 + // 判断是否有version参数
  298 + if (this.$route.query.version) {
  299 + this.$set(headers, 'Version', this.$route.query.version);
  300 + }
  301 +
  302 + // 判断是否有device参数
  303 + if (this.$route.query.device) {
  304 + this.$set(headers, 'Phone-Model', this.$route.query.device);
  305 + }
  306 +
  307 + // 判断headers的值是否正确
  308 + if (headers.Version && headers['Phone-Model']) {
  309 +
  310 + // 设置ext中的headers参数
  311 + this.$set(ext, 'headers', headers);
  312 + }
  313 + }
  314 +
  315 + // 获取证书请求接口
  316 + this.http("/Api/" + (this.getApiVersion().index) + "/ghIndex", {
  317 + id: this.$route.query.ghId,
  318 + uid: (this.$route.query.uid || 0)
  319 + }, this.ghIndexCallback, ext);
  320 + }
  321 + },
  322 +
  323 + /**
  324 + * 获取页面头部数据回调
  325 + * @param {Object} res [服务器返回数据]
  326 + * @param {Object} ext [扩展参数]
  327 + */
  328 + ghIndexCallback(res, ext) {
  329 +
  330 + // 加载完成
  331 + Indicator.close();
  332 +
  333 + // 返回处理
  334 + if (res.code == 200) {
  335 +
  336 + // 解构数据
  337 + let { data: datas } = res;
  338 +
  339 + /* 设置首页数据 开始 */
  340 +
  341 + // 判断是否为首次加载
  342 + if (!this.tabs.init) {
  343 +
  344 + // 设置标题
  345 + this.$set(this, 'title', datas.title);
  346 +
  347 + // 判断是否在App内
  348 + if (this.isCNLive.value) {
  349 +
  350 + // 设置nav标题
  351 + this.$set(this.backs, 'title', this.title);
  352 + }
  353 +
  354 + // 设置工会Banner图片
  355 + if (datas.banner) {
  356 + this.$set(this, 'ghBanner', datas.banner);
  357 + }
  358 +
  359 + // 获取tabs数据
  360 + if (datas.list && datas.list.length) {
  361 +
  362 + // 合并数组
  363 + this.$set(this.tabs, 'list', [...this.tabs.list, ...datas.list]);
  364 + }
  365 +
  366 + // 设置为已加载过，不重复加载重复数据
  367 + this.$set(this.tabs, 'init', true);
  368 + }
  369 +
  370 + // 设置余额
  371 + this.$set(this, 'money', datas.money);
  372 +
  373 + // 更新余额组件key，用于重新渲染余额
  374 + this.$set(this, 'priceUpdateKey', ++this.priceUpdateKey);
  375 +
  376 + /* 设置首页数据 结束 */
  377 +
  378 + } else if (res.code == 400) {
  379 +
  380 + // 获取分类失败
  381 + Toast(res.message);
  382 + } else {
  383 +
  384 + // 获取分类失败
  385 + Toast("获取分类失败");
  386 + }
  387 + },
  388 +
  389 + /**
  390 + * 工会商品列表
  391 + * @param {Object} CALL_STATUS [何处触发请求]
  392 + */
  393 + ghGoodsList(CALL_STATUS = this.CALL_STATUS.LOAD_MORE) {
  394 +
  395 + // 判断必要参数
  396 + if (this.$route.query.ghId && this.tabs.list[this.tabs.active].id >= 0) {
  397 +
  398 + // 设置开始加载
  399 + this.$set(this.tabs.list[this.tabs.active], "loading", true);
  400 +
  401 + // 加载中提示
  402 + Indicator.open('加载中...');
  403 +
  404 + // 请求接口
  405 + this.http("/Api/" + (this.getApiVersion().index) + "/ghGoodsList", {
  406 + id: this.$route.query.ghId,
  407 + group_id: this.tabs.list[this.tabs.active].id,
  408 + page: this.tabs.list[this.tabs.active].page
  409 + }, this.ghGoodsListCallback, {
  410 + method: "POST",
  411 + CALL_STATUS
  412 + });
  413 + }
  414 + },
  415 +
  416 + /**
  417 + * 工会商品列表回调
  418 + * @param {Object} res [服务器返回数据]
  419 + * @param {Object} ext [扩展参数]
  420 + */
  421 + ghGoodsListCallback(res, ext) {
  422 +
  423 + // 加载完成
  424 + Indicator.close();
  425 +
  426 + // 返回处理
  427 + if (res.code == 200) {
  428 +
  429 + // 解构数据
  430 + let {data: datas} = res;
  431 +
  432 + // 判断如果有数据
  433 + if (datas.list && datas.list.length) {
  434 +
  435 + /* 设置列表数据 开始 */
  436 + switch (ext.CALL_STATUS) {
  437 + case this.CALL_STATUS.INIT:
  438 +
  439 + // 设置推荐商品列表
  440 + this.$set(this.lists, this.tabs.active, datas.list);
  441 + break;
  442 + case this.CALL_STATUS.LOAD_MORE:
  443 +
  444 + // 添加数据到数组
  445 + this.$set(this.lists, this.tabs.active, [...this.lists[this.tabs.active], ...datas.list]);
  446 + break;
  447 + }
  448 +
  449 + // 设置页码
  450 + this.$set(this.tabs.list[this.tabs.active], 'page', ++this.tabs.list[this.tabs.active].page);
  451 +
  452 + // 取消Loading中状态，恢复LoadingMore功能
  453 + this.$set(this.tabs.list[this.tabs.active], 'loading', false);
  454 + this.$set(this.tabs.list[this.tabs.active], 'loadingNow', false);
  455 + this.$set(this.tabs.list[this.tabs.active], 'finished', false);
  456 + } else {
  457 +
  458 + // 取消Loading中状态，恢复LoadingMore功能
  459 + this.$set(this.tabs.list[this.tabs.active], 'loading', false);
  460 + this.$set(this.tabs.list[this.tabs.active], 'loadingNow', false);
  461 + this.$set(this.tabs.list[this.tabs.active], 'finished', true);
  462 + }
  463 +
  464 + /* 设置列表数据 结束 */
  465 +
  466 + } else if (res.code == 400) {
  467 +
  468 + // 获取商品出错
  469 + Toast(res.message);
  470 + } else {
  471 +
  472 + // 获取商品出错
  473 + Toast("获取商品出错");
  474 + }
  475 + },
  476 +
  477 + /**
  478 + * 跳转购买记录页面（全部订单页面）
  479 + */
  480 + toOrderList() {
  481 +
  482 + // 判断App内
  483 + if (this.isCNLive.value) {
  484 +
  485 + // 判断通用跳转函数是否存在
  486 + if (typeof this.$parent.gotoDetail === 'function') {
  487 +
  488 + // 跳转参数
  489 + let params = {
  490 + type: '42',
  491 + to: this.$route.query.ghId,
  492 + shop_type: '3'
  493 + };
  494 +
  495 + // 通用跳转
  496 + this.$parent.gotoDetail(params);
  497 + }
  498 + } else {
  499 +
  500 + // App外，唤起App
  501 + this.openApp();
  502 + }
  503 + },
  504 +
  505 + /**
  506 + * 跳转商品详情
  507 + * @param {Object} item [数据对象]
  508 + */
  509 + toDetail(item) {
  510 +
  511 + // 判断App内
  512 + if (this.isCNLive.value) {
  513 +
  514 + // 判断通用跳转函数是否存在
  515 + if (typeof this.$parent.gotoDetail === 'function') {
  516 +
  517 + // 跳转参数
  518 + let params = {
  519 + type: '2',
  520 + to: item.id,
  521 + shop_type: '3'
  522 + };
  523 +
  524 + // 通用跳转
  525 + this.$parent.gotoDetail(params, {
  526 + activityCode: this.activityCode ? this.activityCode : '' // 添加页面渠道码
  527 + });
  528 + }
  529 + } else {
  530 +
  531 + // App外，唤起App
  532 + this.openApp();
  533 + }
  534 + },
  535 +
  536 + /**
  537 + * 项目按钮事件
  538 + * @param {Object} item [数据对象]
  539 + */
  540 + primary(item) {
  541 +
  542 + // 跳转商品详情
  543 + this.toDetail(item);
  544 + },
  545 +
  546 + /**
  547 + * 监听函数，设置滚动条new位置
  548 + */
  549 + scrollEventListenerFun() {
  550 +
  551 + // 下一周期执行
  552 + this.$nextTick(() => {
  553 +
  554 + // 判断组件是否存在
  555 + if (typeof this.$refs.tabsBox === 'object') {
  556 +
  557 + // 判断tabs的offsetTop是否设置
  558 + if (this.tabs.offsetTop == 0) {
  559 +
  560 + // 设置tabs原始位置
  561 + this.$set(this.tabs, 'offsetTop', this.$refs.tabsBox.offsetTop);
  562 + }
  563 +
  564 + // 判断是否有标题栏
  565 + if (typeof this.$refs.navBox === 'object') {
  566 +
  567 + // 设置tabsBox样式，如果window.scrollY >= tabsBox位置，tabsBox吸顶，否则不吸顶
  568 + this.$set(this.tabs, 'fixed', window.scrollY + (this.$refs.navBox.offsetHeight) >= this.tabs.offsetTop);
  569 + } else {
  570 +
  571 + // 设置tabsBox样式，如果window.scrollY >= tabsBox位置，tabsBox吸顶，否则不吸顶
  572 + this.$set(this.tabs, 'fixed', window.scrollY >= this.tabs.offsetTop);
  573 + }
  574 +
  575 + // 如果需要吸顶，设置tabsBox的top值
  576 + if (this.tabs.fixed) {
  577 +
  578 + // 设置吸顶的top值
  579 + this.$set(this.tabs, 'top', (this.$refs.navBox.offsetHeight - 1) + 'px');
  580 + } else {
  581 +
  582 + // 设置吸顶的top值
  583 + this.$set(this.tabs, 'top', 0);
  584 + }
  585 + }
  586 + });
  587 + },
  588 +
  589 + /**
  590 + * 设置滚动条监听
  591 + */
  592 + handleScroll() {
  593 + window.addEventListener("scroll", this.scrollEventListenerFun);
  594 + },
  595 +
  596 + /**
  597 + * 唤起App封装
  598 + */
  599 + openApp() {
  600 +
  601 + this.$nextTick(() => {
  602 +
  603 + // 唤起App
  604 + if (typeof this.$parent.callAppModal === 'function' && typeof this.$refs.callApp === 'object') {
  605 +
  606 + // 设置唤起参数
  607 + let options = {
  608 + success: this.$refs.callApp.callApp
  609 + }
  610 +
  611 + // 唤起App
  612 + this.$parent.callAppModal(options);
  613 + }
  614 + });
  615 + },
  616 +
  617 + /**
  618 + * 后退
  619 + */
  620 + back() {
  621 +
  622 + // 判断是否有处理函数
  623 + if (typeof this.$parent.back === 'function') {
  624 +
  625 + // 后退
  626 + this.$parent.back();
  627 + } else {
  628 +
  629 + // 后退
  630 + window.history.go(-1);
  631 + }
  632 + }
  633 + },
  634 + head: {
  635 + title () {
  636 + return {
  637 + inner: this.title
  638 + }
  639 + }
  640 + },
  641 + watch: {
  642 +
  643 + // 设置页面标题
  644 + title(newVal) {
  645 + if (this.$store.state.browser.toLowerCase() == "qq" && this.$store.state.deviceType.toLowerCase() == "iphone") {
  646 + this.$iFrame.insertIFrame(newVal);
  647 + } else {
  648 + this.$emit("updateHead");
  649 + }
  650 + }
  651 + },
  652 + mounted() {
  653 +
  654 + // 如果是App外，设置唤起App和微信内分享参数
  655 + if (!this.isCNLive.value) {
  656 +
  657 + // 唤起详情页
  658 + if (typeof this.$parent.getOpenApp === "function") {
  659 + this.$parent.getOpenApp({
  660 + type: 0,
  661 + id: this.$route.query.id || 1,
  662 + url: ""
  663 + });
  664 + }
  665 +
  666 + // 分享详情页
  667 + if (typeof this.$parent.getShareData === "function") {
  668 + this.$parent.getShareData({
  669 + type: 0,
  670 + id: this.$route.query.id || 1,
  671 + url: ""
  672 + });
  673 + }
  674 + }
  675 +
  676 + // 设置滚动条监听
  677 + this.handleScroll();
  678 +
  679 + // 页面切换可见状态监听
  680 + document.addEventListener('visibilitychange', () => {
  681 +
  682 + // 页面显示出来了
  683 + if (document.hidden === false && this.$route.name == 'labourUnion') {
  684 +
  685 + // 获取页面头部数据
  686 + this.ghIndex();
  687 + }
  688 + });
  689 + }
  690 + }
  691 +</script>
  692 +
  693 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  694 +<style rel="stylesheet/less" lang='less' scoped>
  695 + @import "labourUnion";
  696 +</style>
... ...
src/pages/labourUnion/labourUnion.less
  View file @827809e
1 1 @charset "UTF-8";
2 2  
3 3 .labour-union-page {
4   - background-color: #ffffff;
  4 + background-color: #F7F7F7;
5 5 min-height: 100vh;
6 6 .nav-box {
7 7 position: fixed;
8 8 top: 0;
9 9 z-index: 100;
10   - background-color: #ffffff;
  10 + background-image: linear-gradient(to right, #FF0928 , #FE215E);
11 11 width: 100%;
12 12 height: auto;
13 13 .call-app-box {
14 14 width: 100%;
15 15 }
16 16 .back-box {
17   - background-color: #ffffff;
  17 + background-image: linear-gradient(to right, #FF0928 , #FE215E);
18 18 width: 100%;
19   - border-bottom: 1px solid #E5E5E5;
  19 + // border-bottom: 1px solid #E5E5E5;
  20 + /deep/.box {
  21 + .title {
  22 + color: #ffffff;
  23 + }
  24 + }
20 25 }
21 26 }
22 27 .pl {
... ... @@ -44,161 +49,204 @@
44 49 }
45 50 }
46 51 .main-box {
47   - .header-box {
48   - margin: 30px auto 30px auto;
49   - width: 690px;
50   - height: auto;
51   - border-radius: 16px;
52   - overflow: hidden;
53   - .header-img {
54   - display: block;
55   - width: 100%;
56   - height: auto;
57   - }
58   - }
59   - .balance-box {
  52 + .section-box {
60 53 background-repeat: no-repeat;
61   - background-size: 100% 100%;
62   - margin: 30px auto;
63   - width: 690px;
64   - height: 210px;
65   - .b-box {
66   - display: flex;
67   - flex-direction: column;
68   - justify-content: space-between;
69   - margin: 0 auto;
70   - padding: 40px 0 20px 0;
71   - width: 630px;
72   - height: auto;
73   - .balance-top {
74   - display: flex;
75   - justify-content: space-between;
76   - align-items: flex-start;
77   - .title {
78   - color: rgba(255, 255, 255, 0.69);
79   - font-size: 28px;
80   - font-weight: 500;
81   - }
82   - .sub-title {
83   - color: #FFE450;
84   - font-size: 22px;
85   - font-weight: 400;
  54 + background-size: 100%;
  55 + width: 100%;
  56 + .section {
  57 + margin: 30px auto 0 auto;
  58 + width: 690px;
  59 + &.full-width {
  60 + width: 100%;
  61 + }
  62 + &.inside {
  63 + margin-top: 0 !important;
  64 + padding-top: 0 !important;
  65 + }
  66 + &.white {
  67 + background-color: #FFFFFF;
  68 + }
  69 + &.border-radius {
  70 + border-radius: 24px;
  71 + overflow: hidden;
  72 + }
  73 + &:first-child {
  74 + margin-top: 0;
  75 + padding-top: 30px;
  76 + }
  77 + /deep/.search-bar {
  78 + .box {
  79 + .search-form {
  80 + background-color: #FFFFFF;
  81 + .left {
  82 + .icon {
  83 + margin-left: 20px;
  84 + }
  85 + .input-box {
  86 + font-size: 26px;
  87 + }
  88 + }
  89 + }
86 90 }
87 91 }
88   - .balance-bottom {
  92 + .balance-order-btn-box {
89 93 display: flex;
90 94 justify-content: space-between;
91 95 align-items: center;
92   - margin-top: 20px;
93   - .price-box {
  96 + .balance-box {
94 97 display: flex;
95 98 justify-content: flex-start;
96   - align-items: baseline;
97   - color: #FFFFFF;
98   - font-weight: bold;
99   - .sy {
100   - font-size: 60px;
101   - }
102   - .integer {
103   - display: flex;
104   - font-size: 84px;
  99 + align-items: center;
  100 + .key {
  101 + color: #FFF8B7;
  102 + font-size: 32px;
  103 + font-weight: bold;
105 104 }
106   - .decimal {
107   - font-size: 60px;
  105 + .value {
  106 + color: #FFF8B7;
  107 + font-size: 38px;
  108 + font-weight: bold;
  109 + max-width: 350px;
  110 + white-space: nowrap;
  111 + text-overflow: ellipsis;
  112 + overflow: hidden;
108 113 }
109 114 }
110   - .btn {
111   - &.btn-default {
112   - display: flex;
113   - justify-content: center;
114   - align-items: center;
115   - background: linear-gradient(180deg, #FFE653 0%, #FFC829 100%);
116   - padding: 10px 24px;
117   - border-radius: 30px;
118   - .text {
119   - color: #3A3A3B;
120   - font-size: 28px;
121   - font-weight: 500;
122   - }
123   - .icon-back-arrow-right {
124   - display: block;
125   - width: 30px;
126   - height: 30px;
  115 + .buttons-box {
  116 + .btn {
  117 + &.btn-active {
  118 + display: flex;
  119 + justify-content: flex-start;
  120 + align-items: center;
  121 + .text {
  122 + color: #FFF8B7;
  123 + font-size: 28px;
  124 + font-weight: 400;
  125 + & + .icon {
  126 + margin-left: 10px;
  127 + }
  128 + }
  129 + .icon {
  130 + display: block;
  131 + width: 28px;
  132 + height: 28px;
  133 + }
127 134 }
128 135 }
129 136 }
130 137 }
131   - }
132   - }
133   - .tabs-box {
134   - background-color: #ffffff;
135   - width: 100%;
136   - height: 90px;
137   - // border-top: 1px solid transparent;
138   - border-bottom: 1px solid transparent;
139   - &.tabsFixed {
140   - position: fixed;
141   - top: 0;
142   - z-index: 100;
143   - // border-top: 1px solid #E5E5E5;
144   - border-bottom: 1px solid #E5E5E5;
145   - &.is-open-app {
146   - top: 122px;
147   - }
148   - &.is-cnlive {
149   - top: 95px;
150   - }
151   - &.is-hide {
152   - top: 0;
  138 + .swiper-box {
  139 + width: 690px;
  140 + height: 320px;
153 141 }
154   - }
155   - }
156   - .column-list-container {
157   - padding-top: 30px;
158   - .section {
159   - // background-color: #ffffff;
160   - margin: 0 auto 40px auto;
161   - width: 690px;
162   - height: auto;
163   - border-radius: 24px;
164   - overflow: hidden;
165   - &:last-child {
166   - margin-bottom: 0;
167   - }
168   - &.goods-list {
169   - .column-list-box {
170   - /deep/ .item-box {
171   - border: 1px solid #F1F0F0;
172   - border-radius: 16px;
  142 + .news-box {
  143 + background-color: #FFFFFF;
  144 + width: 100%;
  145 + height: 85px;
  146 + border-radius: 16px;
  147 + .n-box {
  148 + display: flex;
  149 + justify-content: space-between;
  150 + align-items: center;
  151 + margin: 0 auto;
  152 + width: 650px;
  153 + height: 100%;
  154 + .icon-news-img {
  155 + display: block;
  156 + width: 73px;
  157 + height: 30px;
  158 + }
  159 + .title {
  160 + color: #666666;
  161 + font-size: 26px;
  162 + font-weight: 400;
  163 + width: 505px;
  164 + white-space: nowrap;
  165 + text-overflow: ellipsis;
  166 + overflow: hidden;
  167 + word-wrap: break-word;
  168 + }
  169 + .icon-arrow-right-img {
  170 + display: block;
  171 + width: 26px;
  172 + height: 26px;
173 173 }
174 174 }
175   - .discount-flag {
176   - position: absolute;
177   - top: 10px;
178   - left: 10px;
179   - z-index: 1;
180   - background: linear-gradient(90deg, #F9EE7A 0%, #FAD844 100%);
181   - padding: 1px 8px;
182   - color: #945A08;
183   - font-size: 20px;
184   - font-weight: 400;
185   - border-radius: 6px;
  175 + }
  176 + .tabs-box {
  177 + background-color: #ffffff;
  178 + width: 100%;
  179 + height: 90px;
  180 + // border-top: 1px solid transparent;
  181 + border-bottom: 1px solid transparent;
  182 + &.tabsFixed {
  183 + position: fixed;
  184 + top: 0;
  185 + z-index: 100;
  186 + // border-top: 1px solid #E5E5E5;
  187 + border-bottom: 1px solid #E5E5E5;
  188 + &.is-open-app {
  189 + top: 122px;
  190 + }
  191 + &.is-cnlive {
  192 + top: 95px;
  193 + }
  194 + &.is-hide {
  195 + top: 0;
  196 + }
186 197 }
187 198 }
188   - }
189   - /deep/ .van-list__loading {
190   - .van-loading {
191   - .van-loading__spinner {
192   - width: 28px !important;
193   - height: 28px !important;
  199 + .column-list-container {
  200 + // padding-top: 30px;
  201 + .goods-list {
  202 + margin: 0 auto 40px auto;
  203 + width: 690px;
  204 + height: auto;
  205 + border-radius: 24px;
  206 + overflow: hidden;
  207 + &:last-child {
  208 + margin-bottom: 0;
  209 + }
  210 + .column-list-box {
  211 + /deep/ .item-box {
  212 + border: 1px solid #F1F0F0;
  213 + border-radius: 16px;
  214 + }
  215 + }
  216 + .discount-flag {
  217 + position: absolute;
  218 + top: 10px;
  219 + left: 10px;
  220 + z-index: 1;
  221 + background: linear-gradient(90deg, #F9EE7A 0%, #FAD844 100%);
  222 + padding: 1px 8px;
  223 + color: #945A08;
  224 + font-size: 20px;
  225 + font-weight: 400;
  226 + border-radius: 6px;
  227 + }
194 228 }
195   - .van-list__loading-text {
196   - margin-bottom: 30px;
197   - color: #333333;
198   - font-size: 28px;
199   - font-weight: 400;
  229 + /deep/ .van-list__loading {
  230 + .van-loading {
  231 + .van-loading__spinner {
  232 + width: 28px !important;
  233 + height: 28px !important;
  234 + }
  235 + .van-list__loading-text {
  236 + margin-bottom: 30px;
  237 + color: #333333;
  238 + font-size: 28px;
  239 + font-weight: 400;
  240 + }
  241 + .van-loading__text {
  242 + margin-bottom: 30px;
  243 + color: #333333;
  244 + font-size: 28px;
  245 + font-weight: 400;
  246 + }
  247 + }
200 248 }
201   - .van-loading__text {
  249 + /deep/ .van-list__finished-text {
202 250 margin-bottom: 30px;
203 251 color: #333333;
204 252 font-size: 28px;
... ... @@ -206,12 +254,6 @@
206 254 }
207 255 }
208 256 }
209   - /deep/ .van-list__finished-text {
210   - margin-bottom: 30px;
211   - color: #333333;
212   - font-size: 28px;
213   - font-weight: 400;
214   - }
215 257 }
216 258 .bottom-pl {
217 259 background-color: transparent;
... ...
src/pages/labourUnion/labourUnion.vue
  View file @827809e
... ... @@ -21,66 +21,100 @@
21 21 <!-- 主区域 -->
22 22 <div class="main-box">
23 23  
24   - <!-- 头图 -->
25   - <div class="header-box" v-if="ghBanner">
26   - <img :src="ghBanner + SIGN.BIG" class="header-img" />
27   - </div>
  24 + <!-- 主内容浮动区域 -->
  25 + <div class="section-box" :style="{'backgroundImage': 'url(' + headerBg + ')'}">
  26 +
  27 + <!-- 搜索组件框 -->
  28 + <div class="section">
  29 +
  30 + <!-- 搜索组件 -->
  31 + <search-bar ref="searchBar" @toSearch="toSearch"
  32 + :searchs="searchs">
  33 + </search-bar>
  34 + </div>
28 35  
29   - <!-- 余额展示区块 -->
30   - <div class="balance-box" :style="{'backgroundImage': 'url(' + balanceBg + ')'}">
31   - <div class="b-box">
32   - <div class="balance-top">
33   - <div class="title">
34   - 我的余额
  36 + <!-- 节 -->
  37 + <div class="section">
  38 +
  39 + <!-- 余额和购买记录按钮展示 -->
  40 + <div class="balance-order-btn-box">
  41 +
  42 + <!-- 余额 -->
  43 + <div class="balance-box">
  44 + <div class="key">我的余额：</div>
  45 + <div class="value">{{money}}</div>
35 46 </div>
36   - <div class="sub-title">
37   - 工会福利商品仅限网家家支付
  47 +
  48 + <!-- 购买记录按钮 -->
  49 + <div class="buttons-box">
  50 + <div class="btn btn-active" @click="toOrderList">
  51 + <div class="text">购买记录</div>
  52 + <img src="static/img/icon_arrow_right_color.png" class="icon" mode="aspectFill" />
  53 + </div>
38 54 </div>
39 55 </div>
40   - <div class="balance-bottom">
  56 + </div>
41 57  
42   - <!-- 添加key，用户重新渲染计算属性 -->
43   - <div class="price-box" :key="priceUpdateKey">
44   - <div class="sy">￥</div>
45   - <div class="integer">{{getInteger(money)}}.</div>
46   - <div class="decimal">{{getDecimal(money)}}</div>
47   - </div>
48   - <div class="btn btn-default" @click="toOrderList">
49   - <div class="text">
50   - 购买记录
51   - </div>
52   - <img src="static/img/icon_back_arrow_right.png" class="icon-back-arrow-right" />
  58 + <!-- 节 -->
  59 + <div class="section" v-if="swipers && swipers.length">
  60 +
  61 + <!-- 轮播组件 -->
  62 + <swiper-box class="swiper-box" @jump="swiperJump"
  63 + :swipers="swipers"
  64 + :options="{
  65 + showIndicators: true
  66 + }">
  67 + </swiper-box>
  68 + </div>
  69 +
  70 + <!-- 节 -->
  71 + <div class="section" v-if="news && news.title">
  72 +
  73 + <!-- 新闻 -->
  74 + <div class="news-box" @click="toNewsList(news)">
  75 + <div class="n-box">
  76 + <img src="static/img/icon_news.png" class="icon-news-img" />
  77 + <div class="title">{{news.title}}</div>
  78 + <img src="/static/img/icon_arrow_right.png" class="icon-arrow-right-img" />
53 79 </div>
54 80 </div>
55 81 </div>
56   - </div>
57   -
58   - <!-- tab导航 -->
59   - <div class="tabs-box" :class="{'is-cnlive': isCNLive.value, 'is-open-app': $parent.isOpenApp.value, 'is-hide': $route.query.hideBack == true, 'tabsFixed': tabs.fixed}" :style="{'top': this.tabs.top}" ref='tabsBox'>
  82 +
  83 + <!-- 节 -->
  84 + <div class="section full-width">
  85 +
  86 + <!-- tab导航 -->
  87 + <div class="tabs-box" :class="{'is-cnlive': isCNLive.value, 'is-open-app': $parent.isOpenApp.value, 'is-hide': $route.query.hideBack == true, 'tabsFixed': tabs.fixed}" :style="{'top': this.tabs.top}" ref='tabsBox'>
  88 +
  89 + <!-- 横向滑动tabs导航组件 -->
  90 + <horiz-list v-if="tabs.list && tabs.list.length" @change="change"
  91 + :lists="tabs.list"
  92 + com="tab2"
  93 + :pid="tabs.active">
  94 + </horiz-list>
  95 + </div>
  96 + </div>
60 97  
61   - <!-- 横向滑动tabs导航组件 -->
62   - <horiz-list v-if="tabs.list && tabs.list.length" @change="change"
63   - :lists="tabs.list"
64   - com="tab2"
65   - :pid="tabs.active">
66   - </horiz-list>
67   - </div>
  98 + <!-- 节 -->
  99 + <div class="section">
68 100  
69   - <!-- 上拉加载 -->
70   - <van-list class="column-list-container" v-model="tabs.list[tabs.active].loading" :finished="tabs.list[tabs.active].finished" finished-text="~没有更多了~" @load="loadMore">
  101 + <!-- 上拉加载 -->
  102 + <van-list class="column-list-container" v-model="tabs.list[tabs.active].loading" :finished="tabs.list[tabs.active].finished" finished-text="~没有更多了~" @load="loadMore">
71 103  
72   - <!-- 商品列表 -->
73   - <div class="section goods-list" v-if="lists[tabs.active] && lists[tabs.active].length">
  104 + <!-- 商品列表 -->
  105 + <div class="goods-list" v-if="lists[tabs.active] && lists[tabs.active].length">
74 106  
75   - <!-- 商品样式 7 列表 -->
76   - <column-list-box class="column-list-box" @jump="toDetail" @primary="primary"
77   - :lists="lists[tabs.active]"
78   - com='7'
79   - goodType='2'
80   - flag='工会选品'>
81   - </column-list-box>
  107 + <!-- 商品样式 7 列表 -->
  108 + <column-list-box class="column-list-box" @jump="toDetail" @primary="primary"
  109 + :lists="lists[tabs.active]"
  110 + com='7'
  111 + goodType='2'
  112 + flag='工会选品'>
  113 + </column-list-box>
  114 + </div>
  115 + </van-list>
82 116 </div>
83   - </van-list>
  117 + </div>
84 118  
85 119 <div class="bottom-pl"></div>
86 120 </div>
... ... @@ -100,6 +134,8 @@
100 134 import { List } from "vant";
101 135 import callAppBox from "@/components/callAppBox/callAppBox";
102 136 import backBox from "@/components/backBox/backBox";
  137 + import searchBar from "@/components/searchBar/searchBar";
  138 + import swiperBox from "@/components/swiperBox/swiperBox";
103 139 import horizList from "@/components/horizList/horizList";
104 140 import columnListBox from "@/components/columnListBox/columnListBox";
105 141 import gotoTop from "@/components/gotoTop/gotoTop";
... ... @@ -112,10 +148,12 @@
112 148 return {
113 149 title: "", // 标题
114 150 backs: null, // 后退按钮组
115   - ghBanner: '', // 工会Banner图片
116   - balanceBg: 'static/img/balance_bg.png', // 余额区块背景图片
117 151 money: '0.00', // 我的余额
118 152 priceUpdateKey: 0, // 余额组件key
  153 + headerBg: 'https://wjj.ys2.cnliveimg.com/769shop/img/2022/08/20/63007cd9168b2.png', // 头部背景图片
  154 + searchs: null, // 搜索组件数据
  155 + swipers: null, // 主Banner
  156 + news: null, // 新闻
119 157 CALL_STATUS: {
120 158 INIT: "init", // 初始化页面
121 159 LOAD_MORE: "loadMore" // 加载更多
... ... @@ -144,6 +182,8 @@
144 182 components: {
145 183 callAppBox,
146 184 backBox,
  185 + searchBar,
  186 + swiperBox,
147 187 horizList,
148 188 columnListBox,
149 189 gotoTop
... ... @@ -186,7 +226,7 @@
186 226 this.$set(this, 'backs', {
187 227 funcs: {
188 228 back: {
189   - icon: "static/img/icon_back.png"
  229 + icon: "static/img/icon_back_white.png"
190 230 },
191 231 // funcArray: [
192 232 // {
... ... @@ -198,6 +238,9 @@
198 238 });
199 239 }
200 240  
  241 + // 初始化搜索组件数据
  242 + this.initSearchBar();
  243 +
201 244 // 获取页面头部数据
202 245 this.ghIndex();
203 246  
... ... @@ -237,6 +280,22 @@
237 280 },
238 281  
239 282 /**
  283 + * 初始化搜索组件数据
  284 + */
  285 + initSearchBar() {
  286 +
  287 + // 初始化搜索组件数据
  288 + this.$set(this, 'searchs', {
  289 + placeholder: '请输入搜索关键字',
  290 + isLink: true
  291 + });
  292 +
  293 + if (this.debug) {
  294 + console.log('initSearchBar', this.searchs);
  295 + }
  296 + },
  297 +
  298 + /**
240 299 * 切换tab
241 300 * @param {Object} item [对象数据]
242 301 * @param {Number} index [索引]
... ... @@ -353,7 +412,11 @@
353 412  
354 413 // 设置工会Banner图片
355 414 if (datas.banner) {
356   - this.$set(this, 'ghBanner', datas.banner);
  415 + this.$set(this, 'swipers', [
  416 + {
  417 + simg: datas.banner
  418 + }
  419 + ]);
357 420 }
358 421  
359 422 // 获取tabs数据
... ... @@ -475,6 +538,34 @@
475 538 },
476 539  
477 540 /**
  541 + * 跳转搜索页面
  542 + */
  543 + toSearch() {
  544 +
  545 + // 判断App内
  546 + if (this.isCNLive.value) {
  547 +
  548 + // 判断通用跳转函数是否存在
  549 + if (typeof this.$parent.gotoDetail === 'function') {
  550 +
  551 + // 跳转参数
  552 + let params = {
  553 + type: '34',
  554 + to: window.location.origin + window.location.pathname + '#/labourUnionSearch?type=web',
  555 + shop_type: ''
  556 + };
  557 +
  558 + // 通用跳转
  559 + this.$parent.gotoDetail(params);
  560 + }
  561 + } else {
  562 +
  563 + // App外，唤起App
  564 + this.openApp();
  565 + }
  566 + },
  567 +
  568 + /**
478 569 * 跳转购买记录页面（全部订单页面）
479 570 */
480 571 toOrderList() {
... ... @@ -503,6 +594,20 @@
503 594 },
504 595  
505 596 /**
  597 + * swiper跳转事件
  598 + * @param {Object} item [swiper对象]
  599 + */
  600 + swiperJump(item) {
  601 +
  602 +
  603 + console.log(item);
  604 +
  605 +
  606 +
  607 +
  608 + },
  609 +
  610 + /**
506 611 * 跳转商品详情
507 612 * @param {Object} item [数据对象]
508 613 */
... ...
static/img/icon_arrow_right_color.png 0 → 100644
View file @827809e

390 Bytes