w-front-end / select_good · Commits

Commit 3d4066edb8bddc69d4f3c6d16b9cce03be52c401

Authored by 王强
1 parent 12fac22d

购好物，新版工会提交~

Inline Side-by-side
Showing 12 changed files with 1241 additions and 3 deletions
src/main.js
  View file @3d4066e
... ... @@ -131,6 +131,7 @@ Vue.prototype.apiVersion = {
131 131 dynamic: "Dynamic", // 达人动态相关接口
132 132 LeadGoose: "LeadGoose", // 领头雁项目
133 133 good: "Good", // 优选库
  134 + cms: "cms", // CMS
134 135 // addAddresss:"https://managemall.cnlive.com/",// 生产环境url
135 136 addAddresss: "https://wjjshop.cnlive.com/" // 测试环境url
136 137 };
... ... @@ -209,6 +210,19 @@ Vue.prototype.getParams = function(mode) {
209 210 "content-type": "application/x-www-form-urlencoded"
210 211 }
211 212 };
  213 + params.cms = {
  214 + apiAddress: "https://cmstest.cnlive.com",
  215 + params: {
  216 + appId: "1428_kcocq31568",
  217 + appKey: "95d966a0d045e9ca2f656e02ed939d10751082e01847b0",
  218 + secret: "62d49e5db14b87259289cfd49b35ed893b791797e75bb4",
  219 + ver: "1.0",
  220 + timestamp: new Date().getTime().toString().substr(0, 10)
  221 + },
  222 + headers: {
  223 + "content-type": "application/x-www-form-urlencoded"
  224 + }
  225 + };
212 226 break;
213 227 case "prod":
214 228 params.shop = {
... ... @@ -240,6 +254,19 @@ Vue.prototype.getParams = function(mode) {
240 254 "content-type": "application/x-www-form-urlencoded"
241 255 }
242 256 };
  257 + params.cms = {
  258 + apiAddress: "https://cms.cnlive.com/api",
  259 + params: {
  260 + appId: "1428_kceh75xf38",
  261 + appKey: "316289f13240766d98742a94314a7ea116e78f7339ea68",
  262 + secret: "ec565d677c3ef878a086f43912369a94e5ca6a0b63dde5",
  263 + ver: "1.0",
  264 + timestamp: new Date().getTime().toString().substr(0, 10)
  265 + },
  266 + headers: {
  267 + "content-type": "application/x-www-form-urlencoded"
  268 + }
  269 + }
243 270 break;
244 271 case "dev":
245 272 default:
... ... @@ -272,6 +299,19 @@ Vue.prototype.getParams = function(mode) {
272 299 "content-type": "application/x-www-form-urlencoded"
273 300 }
274 301 };
  302 + params.cms = {
  303 + apiAddress: "https://cmstest.cnlive.com",
  304 + params: {
  305 + appId: "1428_kcocq31568",
  306 + appKey: "95d966a0d045e9ca2f656e02ed939d10751082e01847b0",
  307 + secret: "62d49e5db14b87259289cfd49b35ed893b791797e75bb4",
  308 + ver: "1.0",
  309 + timestamp: new Date().getTime().toString().substr(0, 10)
  310 + },
  311 + headers: {
  312 + "content-type": "application/x-www-form-urlencoded"
  313 + }
  314 + };
275 315 }
276 316  
277 317 return params;
... ... @@ -481,7 +521,7 @@ Vue.prototype.http = function(path, data, callback, ext) {
481 521 let method = "GET";
482 522  
483 523 // 允许的请求地址
484   - let apiArr = ["shop", "cnlive"];
  524 + let apiArr = ["shop", "cnlive", "cms"];
485 525  
486 526 // 默认请求接口（shop）
487 527 let api = "shop";
... ... @@ -502,6 +542,7 @@ Vue.prototype.http = function(path, data, callback, ext) {
502 542  
503 543 // cnlive接口，sign处理
504 544 if (api == "cnlive") {
  545 +
505 546 // 获取cnlive接口所需参数（包括sign获取等封装）
506 547 data = this.getCnliveParams(data, params[api].params, method);
507 548 }
... ... @@ -509,8 +550,7 @@ Vue.prototype.http = function(path, data, callback, ext) {
509 550 // 判断请求方式
510 551 if (method.toUpperCase() === "OPEN") {
511 552 // 打开页面
512   - window.location.href =
513   - params[api].apiAddress + path + "?" + data.join("&");
  553 + window.location.href = params[api].apiAddress + path + "?" + data.join("&");
514 554 } else {
515 555  
516 556 // shop接口，如果请求接口参数有uid，在headers中加入Uid参数
... ...
src/pages/labourUnion2/labourUnion2.less 0 → 100644
  View file @3d4066e
  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 + height: 0;
  31 + }
  32 + &.is-hide {
  33 + height: 0px;
  34 + }
  35 + &.tabsFixed {
  36 + &.is-open-app {
  37 + height: 212px;
  38 + }
  39 + &.is-cnlive {
  40 + height: 185px;
  41 + }
  42 + &.is-hide {
  43 + height: 90px;
  44 + }
  45 + }
  46 + }
  47 + .main-box {
  48 + .balance-box {
  49 + position: relative;
  50 + background-repeat: no-repeat;
  51 + background-size: 100% 100%;
  52 + margin: 30px auto;
  53 + width: 690px;
  54 + height: 210px;
  55 + .b-box {
  56 + display: flex;
  57 + flex-direction: column;
  58 + justify-content: space-between;
  59 + margin: 0 auto;
  60 + padding: 40px 0 20px 0;
  61 + width: 630px;
  62 + height: auto;
  63 + .balance-top {
  64 + display: flex;
  65 + justify-content: space-between;
  66 + align-items: flex-start;
  67 + .title {
  68 + color: rgba(255, 255, 255, 1);
  69 + font-size: 28px;
  70 + font-weight: 400;
  71 + }
  72 + .sub-title {
  73 + color: #FFFFFF;
  74 + font-size: 22px;
  75 + font-weight: 400;
  76 + }
  77 + }
  78 + .balance-bottom {
  79 + display: flex;
  80 + justify-content: space-between;
  81 + align-items: center;
  82 + margin-top: 20px;
  83 + .price-box {
  84 + display: flex;
  85 + justify-content: flex-start;
  86 + align-items: baseline;
  87 + color: #FFFFFF;
  88 + font-weight: bold;
  89 + .sy {
  90 + font-size: 60px;
  91 + }
  92 + .integer {
  93 + display: flex;
  94 + font-size: 84px;
  95 + }
  96 + .decimal {
  97 + font-size: 60px;
  98 + }
  99 + }
  100 + }
  101 + }
  102 + .buttons-box {
  103 + position: absolute;
  104 + right: 0;
  105 + bottom: 0;
  106 + z-index: 1;
  107 + .button-labourUnion2-buy-record-img {
  108 + display: block;
  109 + width: 260px;
  110 + height: 62px;
  111 + }
  112 + }
  113 + }
  114 + .header-box {
  115 + margin: 30px auto 10px auto;
  116 + width: 690px;
  117 + height: auto;
  118 + border: 1px solid rgba(234, 7, 15, 0.3);
  119 + border-radius: 24px;
  120 + overflow: hidden;
  121 + .header-img {
  122 + display: block;
  123 + width: 100%;
  124 + height: auto;
  125 + }
  126 + .news-links-box {
  127 + padding: 30px 0;
  128 + width: 100%;
  129 + .links {
  130 + display: flex;
  131 + justify-content: space-between;
  132 + align-items: center;
  133 + margin: 0 auto;
  134 + width: 630px;
  135 + >.icon-news {
  136 + display: block;
  137 + width: 74px;
  138 + height: 32px;
  139 + }
  140 + >.title {
  141 + color: #666666;
  142 + font-size: 26px;
  143 + font-weight: 400;
  144 + width: 505px;
  145 + white-space: nowrap;
  146 + text-overflow: ellipsis;
  147 + overflow: hidden;
  148 + }
  149 + >.icon-arrow-right-img {
  150 + display: block;
  151 + width: 26px;
  152 + height: 26px;
  153 + }
  154 + }
  155 + }
  156 + }
  157 + .links-box {
  158 + margin: 0 auto 0 auto;
  159 + width: 690px;
  160 + height: auto;
  161 + .link-item {
  162 + background: linear-gradient(180deg, #FCFDFD 0%, #F9FAFB 100%);
  163 + margin-top: 20px;
  164 + width: 334px;
  165 + height: 120px;
  166 + border: 2px solid #F4F6F9;
  167 + border-radius: 12px;
  168 + float: left;
  169 + &:nth-child(2n) {
  170 + float: right;
  171 + }
  172 + >.box {
  173 + display: flex;
  174 + justify-content: flex-start;
  175 + align-items: center;
  176 + margin: 20px auto;
  177 + width: 274px;
  178 + height: auto;
  179 + .icon {
  180 + width: 80px;
  181 + height: 80px;
  182 + .icon-links-img {
  183 + display: block;
  184 + width: 80px;
  185 + height: 80px;
  186 + }
  187 + & + .title {
  188 + margin-left: 24px;
  189 + }
  190 + }
  191 + .title {
  192 + color: #333333;
  193 + font-size: 26px;
  194 + font-weight: 400;
  195 + white-space: nowrap;
  196 + text-overflow: ellipsis;
  197 + overflow: hidden;
  198 + }
  199 + }
  200 + }
  201 + }
  202 + .tabs-box {
  203 + background-color: #ffffff;
  204 + width: 100%;
  205 + height: 90px;
  206 + // border-top: 1px solid transparent;
  207 + border-bottom: 1px solid transparent;
  208 + &.tabsFixed {
  209 + position: fixed;
  210 + top: 0;
  211 + z-index: 100;
  212 + // border-top: 1px solid #E5E5E5;
  213 + border-bottom: 1px solid #E5E5E5;
  214 + &.is-open-app {
  215 + top: 122px;
  216 + }
  217 + &.is-cnlive {
  218 + top: 95px;
  219 + }
  220 + &.is-hide {
  221 + top: 0;
  222 + }
  223 + }
  224 + }
  225 + .column-list-container {
  226 + padding-top: 30px;
  227 + .section {
  228 + // background-color: #ffffff;
  229 + margin: 0 auto 40px auto;
  230 + width: 690px;
  231 + height: auto;
  232 + border-radius: 24px;
  233 + overflow: hidden;
  234 + &:last-child {
  235 + margin-bottom: 0;
  236 + }
  237 + &.goods-list {
  238 + .column-list-box {
  239 + /deep/ .item-box {
  240 + border: 1px solid #F1F0F0;
  241 + border-radius: 16px;
  242 + }
  243 + }
  244 + .discount-flag {
  245 + position: absolute;
  246 + top: 10px;
  247 + left: 10px;
  248 + z-index: 1;
  249 + background: linear-gradient(90deg, #F9EE7A 0%, #FAD844 100%);
  250 + padding: 1px 8px;
  251 + color: #945A08;
  252 + font-size: 20px;
  253 + font-weight: 400;
  254 + border-radius: 6px;
  255 + }
  256 + }
  257 + }
  258 + /deep/ .van-list__loading {
  259 + .van-loading {
  260 + .van-loading__spinner {
  261 + width: 28px !important;
  262 + height: 28px !important;
  263 + }
  264 + .van-list__loading-text {
  265 + margin-bottom: 30px;
  266 + color: #333333;
  267 + font-size: 28px;
  268 + font-weight: 400;
  269 + }
  270 + .van-loading__text {
  271 + margin-bottom: 30px;
  272 + color: #333333;
  273 + font-size: 28px;
  274 + font-weight: 400;
  275 + }
  276 + }
  277 + }
  278 + /deep/ .van-list__finished-text {
  279 + margin-bottom: 30px;
  280 + color: #333333;
  281 + font-size: 28px;
  282 + font-weight: 400;
  283 + }
  284 + }
  285 + .bottom-pl {
  286 + background-color: transparent;
  287 + width: 100%;
  288 + // height: 100px;
  289 + height: 1px;
  290 + }
  291 + .tips-box {
  292 + position: fixed;
  293 + bottom: 0;
  294 + z-index: 1;
  295 + background-color: #FFF6E5;
  296 + padding: 30px 0;
  297 + width: 100%;
  298 + height: auto;
  299 + .tips {
  300 + display: flex;
  301 + justify-content: flex-start;
  302 + align-items: center;
  303 + margin: 0 auto;
  304 + width: 690px;
  305 + height: 100%;
  306 + .tips-img {
  307 + display: block;
  308 + width: 26px;
  309 + height: 26px;
  310 + & + .text {
  311 + margin-left: 14px;
  312 + }
  313 + }
  314 + .text {
  315 + color: #FEA835;
  316 + font-size: 24px;
  317 + font-weight: 400;
  318 + }
  319 + }
  320 + }
  321 + }
  322 +}
... ...
src/pages/labourUnion2/labourUnion2.vue 0 → 100644
  View file @3d4066e
  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="balance-box" :style="{'backgroundImage': 'url(' + balanceBg + ')'}">
  26 + <div class="b-box">
  27 + <div class="balance-top">
  28 + <div class="title">
  29 + 我的余额
  30 + </div>
  31 + <div class="sub-title">
  32 + 工会福利商品仅限网家家支付
  33 + </div>
  34 + </div>
  35 + <div class="balance-bottom">
  36 +
  37 + <!-- 添加key，用户重新渲染计算属性 -->
  38 + <div class="price-box" :key="priceUpdateKey">
  39 + <div class="sy">￥</div>
  40 + <div class="integer">{{getInteger(money)}}.</div>
  41 + <div class="decimal">{{getDecimal(money)}}</div>
  42 + </div>
  43 + </div>
  44 + </div>
  45 + <div class="buttons-box" @click="toOrderList">
  46 + <img src="static/img/button_labourUnion2_buy_record.png" class="button-labourUnion2-buy-record-img" />
  47 + </div>
  48 + </div>
  49 +
  50 + <!-- 头图 -->
  51 + <div class="header-box" v-if="ghBanner || firstNewsTitle">
  52 +
  53 + <!-- Banner图片 -->
  54 + <img :src="ghBanner" class="header-img" v-if="ghBanner" />
  55 +
  56 + <!-- 跳转新闻列表区块 -->
  57 + <div class="news-links-box" v-if="firstNewsTitle">
  58 + <div class="links" @click="toNewsList(jumpNewsListParams)">
  59 + <img src="static/img/icon_news_tips.png" class="icon-news" />
  60 + <div class="title">{{firstNewsTitle}}</div>
  61 + <img src="static/img/icon_arrow_right.png" class="icon-arrow-right-img" />
  62 + </div>
  63 + </div>
  64 + </div>
  65 +
  66 + <!-- 跳转连接区块 -->
  67 + <div class="links-box" v-if="linksArr && linksArr.length">
  68 + <div class="link-item" v-for="(item, index) in linksArr" :key="index" @click="toLink(item)">
  69 + <div class="box">
  70 + <div class="icon">
  71 + <img :src="item.poster" class="icon-links-img" />
  72 + </div>
  73 + <div class="title">{{item.title}}</div>
  74 + </div>
  75 + </div>
  76 +
  77 + <!-- 清除浮动失去高度 -->
  78 + <div style="clear: both;"></div>
  79 + </div>
  80 +
  81 + <!-- tab导航 -->
  82 + <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'>
  83 +
  84 + <!-- 横向滑动tabs导航组件 -->
  85 + <horiz-list v-if="tabs.list && tabs.list.length" @change="change"
  86 + :lists="tabs.list"
  87 + com="tab2"
  88 + :pid="tabs.active">
  89 + </horiz-list>
  90 + </div>
  91 +
  92 + <!-- 上拉加载 -->
  93 + <van-list class="column-list-container" v-model="tabs.list[tabs.active].loading" :finished="tabs.list[tabs.active].finished" finished-text="~没有更多了~" @load="loadMore">
  94 +
  95 + <!-- 商品列表 -->
  96 + <div class="section goods-list" v-if="lists[tabs.active] && lists[tabs.active].length">
  97 +
  98 + <!-- 商品样式 7 列表 -->
  99 + <column-list-box class="column-list-box" @jump="toDetail" @primary="primary"
  100 + :lists="lists[tabs.active]"
  101 + com='7'
  102 + goodType='2'
  103 + flag='工会选品'>
  104 + </column-list-box>
  105 + </div>
  106 + </van-list>
  107 +
  108 + <div class="bottom-pl"></div>
  109 + </div>
  110 +
  111 + <!-- 回到顶部按钮 -->
  112 + <goto-top
  113 + :top="parseInt(150)">
  114 + </goto-top>
  115 + </div>
  116 +</template>
  117 +
  118 +<script>
  119 +
  120 + // 引入组件
  121 + import Vue from "vue";
  122 + import { Toast, Indicator } from "mint-ui";
  123 + import { List } from "vant";
  124 + import callAppBox from "@/components/callAppBox/callAppBox";
  125 + import backBox from "@/components/backBox/backBox";
  126 + import horizList from "@/components/horizList/horizList";
  127 + import columnListBox from "@/components/columnListBox/columnListBox";
  128 + import gotoTop from "@/components/gotoTop/gotoTop";
  129 +
  130 + Vue.use(List);
  131 +
  132 + export default {
  133 + name: 'labourUnionPage',
  134 + data () {
  135 + return {
  136 + title: "", // 标题
  137 + backs: null, // 后退按钮组
  138 + ghBanner: '', // 工会Banner图片
  139 + balanceBg: 'static/img/balance_bg_2.png', // 余额区块背景图片
  140 + money: '0.00', // 我的余额
  141 + priceUpdateKey: 0, // 余额组件key
  142 + firstNewsTitle: '', // 第一条新闻标题
  143 + jumpNewsListParams: { // 跳转新闻列表参数
  144 + type: '34',
  145 + to: this.mode === 'prod' ? 'http://wjjh5.cnlive.com/cnculColumn.html?moreUrl=http%3A%2F%2Fcms.cnlive.com%2Fapi%2FcontentApi%2FgetBlockContents%3FblockId%3D10161&type=web' : 'http://wjjh5test.cnlive.com/cnculColumn.html?moreUrl=http%3A%2F%2Fcmstest.cnlive.com%3A8768%2FcontentApi%2FgetBlockContents%3FblockId%3D10404&type=web',
  146 + shop_type: ''
  147 + },
  148 + linksArr: [], // 连接列表项目数组
  149 + CALL_STATUS: {
  150 + INIT: "init", // 初始化页面
  151 + LOAD_MORE: "loadMore" // 加载更多
  152 + },
  153 + tabs: { // tabs设置
  154 + fixed: false, // 是否吸顶
  155 + offsetTop: 0, // 距离顶部距离
  156 + top: 0, // 吸顶的top值
  157 + active: 0, // 活动项
  158 + init: false, // tabs数据是否初始化过，防止重复设置tabs列表
  159 + list: [ // tabs数组
  160 + {
  161 + id: 0,
  162 + title: '全部',
  163 + page: 1,
  164 + loading: false,
  165 + loadingNow: false,
  166 + finished: false
  167 + }
  168 + ]
  169 + },
  170 + lists: [] // 列表数据
  171 + }
  172 + },
  173 + components: {
  174 + callAppBox,
  175 + backBox,
  176 + horizList,
  177 + columnListBox,
  178 + gotoTop
  179 + },
  180 + computed: {
  181 +
  182 + /**
  183 + * 获取输入数字的整数部分
  184 + */
  185 + getInteger () {
  186 + return (number) => {
  187 + return parseInt(number);
  188 + }
  189 + },
  190 +
  191 + /**
  192 + * 获取输入数字的小数部分
  193 + */
  194 + getDecimal () {
  195 + return (number) => {
  196 +
  197 + // 拆分数字
  198 + let numberArr = number.toString().split(".");
  199 +
  200 + // 判断是否有效数部分
  201 + if (numberArr.length === 2) {
  202 + return numberArr[1];
  203 + } else {
  204 + return "00";
  205 + }
  206 + }
  207 + }
  208 + },
  209 + created() {
  210 +
  211 + // 判断是否在App内
  212 + if (this.isCNLive.value) {
  213 +
  214 + // 添加后退按钮组“后退”和“分享”按钮
  215 + this.$set(this, 'backs', {
  216 + funcs: {
  217 + back: {
  218 + icon: "static/img/icon_back.png"
  219 + },
  220 + // funcArray: [
  221 + // {
  222 + // icon: "static/img/icon_share.png",
  223 + // func: this.toShare
  224 + // }
  225 + // ]
  226 + }
  227 + });
  228 + }
  229 +
  230 + // 获取页面头部数据
  231 + this.ghOtherIndex();
  232 +
  233 + // 获取新闻列表（CMS）
  234 + this.getList();
  235 +
  236 + // 获取连接列表（CMS）
  237 + this.getBlockContents();
  238 +
  239 + // 工会商品列表（初始化）
  240 + this.shopNewGoodsList(this.CALL_STATUS.INIT);
  241 + },
  242 + methods: {
  243 +
  244 + /**
  245 + * 加载更多
  246 + */
  247 + loadMore() {
  248 +
  249 + // 判断是否可加载
  250 + if (this.tabs.list[this.tabs.active].loadingNow === false || this.tabs.list[this.tabs.active].loadingNow === undefined) {
  251 +
  252 + // 设置加载中状态
  253 + this.$set(this.tabs.list[this.tabs.active], 'loadingNow', true);
  254 +
  255 + if (this.tabs.list[this.tabs.active].page == '1' || this.tabs.list[this.tabs.active].page === undefined) {
  256 +
  257 + // 设置初始化页码
  258 + this.$set(this.tabs.list[this.tabs.active], 'page', 1);
  259 +
  260 + // 工会商品列表
  261 + this.shopNewGoodsList(this.CALL_STATUS.INIT);
  262 + } else {
  263 +
  264 + // 判断页面是数字再执行
  265 + if (!isNaN(parseInt(this.tabs.list[this.tabs.active].page))) {
  266 +
  267 + // 工会商品列表
  268 + this.shopNewGoodsList(this.CALL_STATUS.LOAD_MORE);
  269 + }
  270 + }
  271 + }
  272 + },
  273 +
  274 + /**
  275 + * 切换tab
  276 + * @param {Object} item [对象数据]
  277 + * @param {Number} index [索引]
  278 + */
  279 + change(item, index) {
  280 +
  281 + // 切换前检查网络状态
  282 + if (this.$parent.onLine) {
  283 +
  284 + // 切换tab
  285 + this.$set(this.tabs, 'active', index);
  286 +
  287 + // 根据参数判断请求哪个接口，获取哪个列表
  288 + if (this.tabs.list[this.tabs.active].type == '1' && (!this.tabs.list[this.tabs.active].page || this.tabs.list[this.tabs.active].page == 1)) {
  289 +
  290 + // 工会商品列表（初始化）
  291 + this.ghGoodsList(this.CALL_STATUS.INIT);
  292 + }
  293 +
  294 + // 回到顶部
  295 + this.gotoTop();
  296 + } else {
  297 +
  298 + // 网络异常提醒
  299 + Toast("网络异常，请检查网络");
  300 + }
  301 + },
  302 +
  303 + /**
  304 + * 回到顶部
  305 + */
  306 + gotoTop() {
  307 + document.documentElement.scrollTop = document.body.scrollTop = 0;
  308 + },
  309 +
  310 + /**
  311 + * 获取页面头部数据
  312 + */
  313 + ghOtherIndex() {
  314 +
  315 + // 加载中提示
  316 + Indicator.open("加载中...");
  317 +
  318 + // 获取证书请求接口
  319 + this.http("/Api/" + (this.getApiVersion().index) + "/ghOtherIndex", {
  320 + uid: (this.$route.query.uid || 0)
  321 + }, this.ghOtherIndexCallback, {
  322 + method: "POST"
  323 + });
  324 + },
  325 +
  326 + /**
  327 + * 获取页面头部数据回调
  328 + * @param {Object} res [服务器返回数据]
  329 + * @param {Object} ext [扩展参数]
  330 + */
  331 + ghOtherIndexCallback(res, ext) {
  332 +
  333 + // 加载完成
  334 + Indicator.close();
  335 +
  336 + // 返回处理
  337 + if (res.code == 200) {
  338 +
  339 + // 解构数据
  340 + let { data: datas } = res;
  341 +
  342 + /* 设置首页数据 开始 */
  343 +
  344 + // 判断是否为首次加载
  345 + if (!this.tabs.init) {
  346 +
  347 + // 设置标题
  348 + this.$set(this, 'title', datas.title);
  349 +
  350 + // 判断是否在App内
  351 + if (this.isCNLive.value) {
  352 +
  353 + // 设置nav标题
  354 + this.$set(this.backs, 'title', this.title);
  355 + }
  356 +
  357 + // 设置工会Banner图片
  358 + if (datas.banner) {
  359 + this.$set(this, 'ghBanner', datas.banner);
  360 + }
  361 +
  362 + // 获取tabs数据
  363 + if (datas.list && datas.list.length) {
  364 +
  365 + // 合并数组
  366 + this.$set(this.tabs, 'list', [...this.tabs.list, ...datas.list]);
  367 + }
  368 +
  369 + // 设置为已加载过，不重复加载重复数据
  370 + this.$set(this.tabs, 'init', true);
  371 + }
  372 +
  373 + // 设置余额
  374 + this.$set(this, 'money', datas.money);
  375 +
  376 + // 更新余额组件key，用于重新渲染余额
  377 + this.$set(this, 'priceUpdateKey', ++this.priceUpdateKey);
  378 +
  379 + /* 设置首页数据 结束 */
  380 +
  381 + } else if (res.code == 400) {
  382 +
  383 + // 获取分类失败
  384 + Toast(res.message);
  385 + } else {
  386 +
  387 + // 获取分类失败
  388 + Toast("获取分类失败");
  389 + }
  390 + },
  391 +
  392 + /**
  393 + * 工会商品列表
  394 + * @param {Object} CALL_STATUS [何处触发请求]
  395 + */
  396 + shopNewGoodsList(CALL_STATUS = this.CALL_STATUS.LOAD_MORE) {
  397 +
  398 + // 判断必要参数
  399 + if (this.tabs.list[this.tabs.active].id >= 0) {
  400 +
  401 + // 设置开始加载
  402 + this.$set(this.tabs.list[this.tabs.active], "loading", true);
  403 +
  404 + // 加载中提示
  405 + Indicator.open('加载中...');
  406 +
  407 + // 请求接口
  408 + this.http("/Api/" + (this.getApiVersion().index) + "/shopNewGoodsList", {
  409 + groupid: this.tabs.list[this.tabs.active].id,
  410 + page: this.tabs.list[this.tabs.active].page
  411 + }, this.shopNewGoodsListCallback, {
  412 + method: "POST",
  413 + CALL_STATUS
  414 + });
  415 + }
  416 + },
  417 +
  418 + /**
  419 + * 工会商品列表回调
  420 + * @param {Object} res [服务器返回数据]
  421 + * @param {Object} ext [扩展参数]
  422 + */
  423 + shopNewGoodsListCallback(res, ext) {
  424 +
  425 + // 加载完成
  426 + Indicator.close();
  427 +
  428 + // 返回处理
  429 + if (res.code == 200) {
  430 +
  431 + // 解构数据
  432 + let {data: datas} = res;
  433 +
  434 + // 判断如果有数据
  435 + if (datas && datas.length) {
  436 +
  437 + /* 设置列表数据 开始 */
  438 + switch (ext.CALL_STATUS) {
  439 + case this.CALL_STATUS.INIT:
  440 +
  441 + // 设置推荐商品列表
  442 + this.$set(this.lists, this.tabs.active, datas);
  443 + break;
  444 + case this.CALL_STATUS.LOAD_MORE:
  445 +
  446 + // 添加数据到数组
  447 + this.$set(this.lists, this.tabs.active, [...this.lists[this.tabs.active], ...datas]);
  448 + break;
  449 + }
  450 +
  451 + // 设置页码
  452 + this.$set(this.tabs.list[this.tabs.active], 'page', ++this.tabs.list[this.tabs.active].page);
  453 +
  454 + // 取消Loading中状态，恢复LoadingMore功能
  455 + this.$set(this.tabs.list[this.tabs.active], 'loading', false);
  456 + this.$set(this.tabs.list[this.tabs.active], 'loadingNow', false);
  457 + this.$set(this.tabs.list[this.tabs.active], 'finished', false);
  458 + } else {
  459 +
  460 + // 取消Loading中状态，恢复LoadingMore功能
  461 + this.$set(this.tabs.list[this.tabs.active], 'loading', false);
  462 + this.$set(this.tabs.list[this.tabs.active], 'loadingNow', false);
  463 + this.$set(this.tabs.list[this.tabs.active], 'finished', true);
  464 + }
  465 +
  466 + /* 设置列表数据 结束 */
  467 +
  468 + } else if (res.code == 400) {
  469 +
  470 + // 获取商品出错
  471 + Toast(res.message);
  472 + } else {
  473 +
  474 + // 获取商品出错
  475 + Toast("获取商品出错");
  476 + }
  477 + },
  478 +
  479 + /**
  480 + * 获取新闻列表（CMS）
  481 + */
  482 + getList() {
  483 +
  484 + // 加载中提示
  485 + Indicator.open("加载中...");
  486 +
  487 + // 设置blockId
  488 + let blockId = '10404';
  489 +
  490 + // 根据环境设置blockId
  491 + if (this.mode === 'prod') {
  492 + blockId = '10161'
  493 + }
  494 +
  495 + // 获取证书请求接口
  496 + this.http("/contentApi/getBlockContents?blockId=" + blockId, {}, this.getListCallback, {
  497 + method: "GET",
  498 + api: "cms"
  499 + });
  500 + },
  501 +
  502 + /**
  503 + * 获取新闻列表（CMS）回调
  504 + * @param {Object} res [服务器返回数据]
  505 + * @param {Object} ext [扩展参数]
  506 + */
  507 + getListCallback(res, ext) {
  508 +
  509 + // 加载完成
  510 + Indicator.close();
  511 +
  512 + // 返回处理
  513 + if (res.errorCode == 0) {
  514 +
  515 + // 解构数据
  516 + let { data: datas } = res;
  517 +
  518 + // 判断是否有新闻内容
  519 + if (datas && datas.list && datas.list.length) {
  520 +
  521 + // 设置新闻第一个标题
  522 + this.$set(this, 'firstNewsTitle', datas.list[0].title);
  523 + }
  524 + } else {
  525 +
  526 + // 获取新闻列表失败
  527 + Toast(res.errorMessage);
  528 + }
  529 + },
  530 +
  531 + /**
  532 + * 获取连接列表（CMS）
  533 + */
  534 + getBlockContents() {
  535 +
  536 + // 加载中提示
  537 + Indicator.open("加载中...");
  538 +
  539 + // 设置blockId
  540 + let blockId = '10400';
  541 +
  542 + // 根据环境设置blockId
  543 + if (this.mode === 'prod') {
  544 + blockId = '10157'
  545 + }
  546 +
  547 + // 获取证书请求接口
  548 + this.http("/contentApi/getBlockContents?blockId=" + blockId, {}, this.getBlockContentsCallback, {
  549 + method: "GET",
  550 + api: "cms"
  551 + });
  552 + },
  553 +
  554 + /**
  555 + * 获取连接列表（CMS）回调
  556 + * @param {Object} res [服务器返回数据]
  557 + * @param {Object} ext [扩展参数]
  558 + */
  559 + getBlockContentsCallback(res, ext) {
  560 +
  561 + // 加载完成
  562 + Indicator.close();
  563 +
  564 + // 返回处理
  565 + if (res.errorCode == 0) {
  566 +
  567 + // 解构数据
  568 + let { data: datas } = res;
  569 +
  570 + // 判断是否有新闻内容
  571 + if (datas && datas.list && datas.list.length) {
  572 +
  573 + // 设置连接列表
  574 + this.$set(this, 'linksArr', datas.list);
  575 + }
  576 + } else {
  577 +
  578 + // 获取连接列表失败
  579 + Toast(res.errorMessage);
  580 + }
  581 + },
  582 +
  583 + /**
  584 + * 跳转购买记录页面（全部订单页面）
  585 + */
  586 + toOrderList() {
  587 +
  588 + // 判断App内
  589 + if (this.isCNLive.value) {
  590 +
  591 + // 判断通用跳转函数是否存在
  592 + if (typeof this.$parent.gotoDetail === 'function') {
  593 +
  594 + // 跳转参数
  595 + // let params = {
  596 + // type: '42',
  597 + // to: this.$route.query.ghId,
  598 + // shop_type: '3'
  599 + // };
  600 +
  601 + let params = {
  602 + type: '42',
  603 + to: '',
  604 + shop_type: ''
  605 + };
  606 +
  607 + // 通用跳转
  608 + this.$parent.gotoDetail(params);
  609 + }
  610 + } else {
  611 +
  612 + // App外，唤起App
  613 + this.openApp();
  614 + }
  615 + },
  616 +
  617 + /**
  618 + * 跳转新闻列表
  619 + * @param {Object} item [跳转新闻列表参数]
  620 + */
  621 + toNewsList(item) {
  622 +
  623 + // 判断App内
  624 + if (this.isCNLive.value) {
  625 +
  626 + // 判断通用跳转函数是否存在
  627 + if (typeof this.$parent.gotoDetail === 'function') {
  628 +
  629 + // 判断跳转参数是否齐全
  630 + if (typeof item === 'object' && item.type && typeof item.to === 'string' && item.to && typeof item.shop_type === 'string') {
  631 +
  632 + // 通用跳转
  633 + this.$parent.gotoDetail(item);
  634 + }
  635 + }
  636 + } else {
  637 +
  638 + // App外，唤起App
  639 + this.openApp();
  640 + }
  641 + },
  642 +
  643 + /**
  644 + * 跳转连接（通用跳转）
  645 + * @param {Object} item [参数对象]
  646 + */
  647 + toLink(item) {
  648 +
  649 + // 判断App内
  650 + if (this.isCNLive.value) {
  651 +
  652 + // 判断通用跳转函数是否存在
  653 + if (typeof this.$parent.gotoDetail === 'function') {
  654 +
  655 + // 判断跳转参数是否齐全
  656 + if (typeof item === 'object' && typeof item.thirdUrl === 'string' && item.thirdUrl) {
  657 +
  658 + // 跳转参数
  659 + let params = {
  660 + type: '34',
  661 + to: item.thirdUrl,
  662 + shop_type: ''
  663 + };
  664 +
  665 + // 通用跳转
  666 + this.$parent.gotoDetail(params);
  667 + }
  668 + }
  669 + } else {
  670 +
  671 + // App外，唤起App
  672 + this.openApp();
  673 + }
  674 + },
  675 +
  676 + /**
  677 + * 跳转商品详情
  678 + * @param {Object} item [数据对象]
  679 + */
  680 + toDetail(item) {
  681 +
  682 + // 判断App内
  683 + if (this.isCNLive.value) {
  684 +
  685 + // 判断通用跳转函数是否存在
  686 + if (typeof this.$parent.gotoDetail === 'function') {
  687 +
  688 + // 跳转参数
  689 + let params = {
  690 + type: '2',
  691 + to: item.id,
  692 + shop_type: '3'
  693 + };
  694 +
  695 + // 通用跳转
  696 + this.$parent.gotoDetail(params);
  697 + }
  698 + } else {
  699 +
  700 + // App外，唤起App
  701 + this.openApp();
  702 + }
  703 + },
  704 +
  705 + /**
  706 + * 项目按钮事件
  707 + * @param {Object} item [数据对象]
  708 + */
  709 + primary(item) {
  710 +
  711 + // 跳转商品详情
  712 + this.toDetail(item);
  713 + },
  714 +
  715 + /**
  716 + * 监听函数，设置滚动条new位置
  717 + */
  718 + scrollEventListenerFun() {
  719 +
  720 + // 下一周期执行
  721 + this.$nextTick(() => {
  722 +
  723 + // 判断组件是否存在
  724 + if (typeof this.$refs.tabsBox === 'object') {
  725 +
  726 + // 判断tabs的offsetTop是否设置
  727 + if (this.tabs.offsetTop == 0) {
  728 +
  729 + // 设置tabs原始位置
  730 + this.$set(this.tabs, 'offsetTop', this.$refs.tabsBox.offsetTop);
  731 + }
  732 +
  733 + // 判断是否有标题栏
  734 + if (typeof this.$refs.navBox === 'object') {
  735 +
  736 + // 设置tabsBox样式，如果window.scrollY >= tabsBox位置，tabsBox吸顶，否则不吸顶
  737 + this.$set(this.tabs, 'fixed', window.scrollY + (this.$refs.navBox.offsetHeight) >= this.tabs.offsetTop);
  738 + } else {
  739 +
  740 + // 设置tabsBox样式，如果window.scrollY >= tabsBox位置，tabsBox吸顶，否则不吸顶
  741 + this.$set(this.tabs, 'fixed', window.scrollY >= this.tabs.offsetTop);
  742 + }
  743 +
  744 + // 如果需要吸顶，设置tabsBox的top值
  745 + if (this.tabs.fixed) {
  746 +
  747 + // 设置吸顶的top值
  748 + this.$set(this.tabs, 'top', (this.$refs.navBox.offsetHeight - 1) + 'px');
  749 + } else {
  750 +
  751 + // 设置吸顶的top值
  752 + this.$set(this.tabs, 'top', 0);
  753 + }
  754 + }
  755 + });
  756 + },
  757 +
  758 + /**
  759 + * 设置滚动条监听
  760 + */
  761 + handleScroll() {
  762 + window.addEventListener("scroll", this.scrollEventListenerFun);
  763 + },
  764 +
  765 + /**
  766 + * 唤起App封装
  767 + */
  768 + openApp() {
  769 +
  770 + this.$nextTick(() => {
  771 +
  772 + // 唤起App
  773 + if (typeof this.$parent.callAppModal === 'function' && typeof this.$refs.callApp === 'object') {
  774 +
  775 + // 设置唤起参数
  776 + let options = {
  777 + success: this.$refs.callApp.callApp
  778 + }
  779 +
  780 + // 唤起App
  781 + this.$parent.callAppModal(options);
  782 + }
  783 + });
  784 + },
  785 +
  786 + /**
  787 + * 后退
  788 + */
  789 + back() {
  790 +
  791 + // 判断是否有处理函数
  792 + if (typeof this.$parent.back === 'function') {
  793 +
  794 + // 后退
  795 + this.$parent.back();
  796 + } else {
  797 +
  798 + // 后退
  799 + window.history.go(-1);
  800 + }
  801 + }
  802 + },
  803 + head: {
  804 + title () {
  805 + return {
  806 + inner: this.title
  807 + }
  808 + }
  809 + },
  810 + watch: {
  811 +
  812 + // 设置页面标题
  813 + title(newVal) {
  814 + if (this.$store.state.browser.toLowerCase() == "qq" && this.$store.state.deviceType.toLowerCase() == "iphone") {
  815 + this.$iFrame.insertIFrame(newVal);
  816 + } else {
  817 + this.$emit("updateHead");
  818 + }
  819 + }
  820 + },
  821 + mounted() {
  822 +
  823 + // 如果是App外，设置唤起App和微信内分享参数
  824 + if (!this.isCNLive.value) {
  825 +
  826 + // 唤起详情页
  827 + if (typeof this.$parent.getOpenApp === "function") {
  828 + this.$parent.getOpenApp({
  829 + type: 72,
  830 + id: this.$route.query.appid || this.$route.query.id || 1,
  831 + url: ""
  832 + });
  833 + }
  834 +
  835 + // 分享详情页
  836 + if (typeof this.$parent.getShareData === "function") {
  837 + this.$parent.getShareData({
  838 + type: 72,
  839 + id: this.$route.query.appid || this.$route.query.id || 1,
  840 + url: ""
  841 + });
  842 + }
  843 + }
  844 +
  845 + // 设置滚动条监听
  846 + this.handleScroll();
  847 +
  848 + // 页面切换可见状态监听
  849 + document.addEventListener('visibilitychange', () => {
  850 +
  851 + // 页面显示出来了
  852 + if (document.hidden === false && this.$route.name == 'labourUnion') {
  853 +
  854 + // 获取页面头部数据
  855 + this.ghIndex();
  856 + }
  857 + });
  858 + }
  859 + }
  860 +</script>
  861 +
  862 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  863 +<style rel="stylesheet/less" lang='less' scoped>
  864 + @import "labourUnion2";
  865 +</style>
... ...
src/router/index.js
  View file @3d4066e
... ... @@ -282,6 +282,17 @@ const router = new Router({
282 282 requireAuth: false
283 283 }
284 284 },
  285 + {
  286 + // 工会商品列表首页2
  287 + path: "/labourUnion2",
  288 + name: "labourUnion2",
  289 + component: resolve => {
  290 + require(["@/pages/labourUnion2/labourUnion2"], resolve);
  291 + },
  292 + meta: {
  293 + requireAuth: false
  294 + }
  295 + },
285 296  
286 297 /* 优选和商城页面改版升级页面 结束 */
287 298  
... ...
static/img/balance_bg_2.png 0 → 100644
View file @3d4066e

46.7 KB
static/img/banner_labourUnion2.png 0 → 100644
View file @3d4066e

225 KB
static/img/button_labourUnion2_buy_record.png 0 → 100644
View file @3d4066e

9.44 KB
static/img/icon_labourUnion2_1.png 0 → 100644
View file @3d4066e

1.78 KB
static/img/icon_labourUnion2_2.png 0 → 100644
View file @3d4066e

2.56 KB
static/img/icon_labourUnion2_3.png 0 → 100644
View file @3d4066e

1.5 KB
static/img/icon_labourUnion2_4.png 0 → 100644
View file @3d4066e

1.87 KB
static/img/icon_news_tips.png 0 → 100644
View file @3d4066e

2.08 KB