w-front-end / select_good · Commits

Commit 7e27dfc9a1197563e6ba1a164bc6ef260d32ca8a

Authored by 王强
1 parent a6d146a3

购好物，福利专区页面完成~

Inline Side-by-side
Showing 3 changed files with 966 additions and 0 deletions
src/pages/welfareList/welfareList.less 0 → 100644
  View file @7e27dfc
  1 +@charset "UTF-8";
  2 +
  3 +.welfare-list-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 + .section {
  48 + width: 690px;
  49 + &.banner-box {
  50 + margin-top: 30px;
  51 + }
  52 + &.coupon-box {
  53 + margin: 30px auto 0 auto;
  54 + overflow: hidden;
  55 + /deep/.coupon-horiz-box {
  56 + width: 690px;
  57 + > .box {
  58 + width: 690px;
  59 + }
  60 + }
  61 + }
  62 + }
  63 + .dividing-line {
  64 + background-color: #F9F9F9;
  65 + width: 100%;
  66 + height: 10px;
  67 + }
  68 + .tabs-box {
  69 + background-color: #ffffff;
  70 + width: 100%;
  71 + height: 90px;
  72 + // border-top: 1px solid transparent;
  73 + border-bottom: 1px solid transparent;
  74 + &.tabsFixed {
  75 + position: fixed;
  76 + top: 0;
  77 + z-index: 100;
  78 + // border-top: 1px solid #E5E5E5;
  79 + // border-bottom: 1px solid #E5E5E5;
  80 + &.is-open-app {
  81 + top: 122px;
  82 + }
  83 + &.is-cnlive {
  84 + top: 95px;
  85 + }
  86 + &.is-hide {
  87 + top: 0;
  88 + }
  89 + }
  90 + }
  91 + .column-list-container {
  92 + padding-top: 30px;
  93 + .section {
  94 + // background-color: #ffffff;
  95 + margin: 0 auto 40px auto;
  96 + width: 690px;
  97 + height: auto;
  98 + border-radius: 24px;
  99 + overflow: hidden;
  100 + &:last-child {
  101 + margin-bottom: 0;
  102 + }
  103 + &.goods-list {
  104 + .column-list-box {
  105 + /deep/ .item-box {
  106 + border: 1px solid #F1F0F0;
  107 + border-radius: 16px;
  108 + }
  109 + }
  110 + .discount-flag {
  111 + position: absolute;
  112 + top: 10px;
  113 + left: 10px;
  114 + z-index: 1;
  115 + background: linear-gradient(90deg, #F9EE7A 0%, #FAD844 100%);
  116 + padding: 1px 8px;
  117 + color: #945A08;
  118 + font-size: 20px;
  119 + font-weight: 400;
  120 + border-radius: 6px;
  121 + }
  122 + }
  123 + }
  124 + /deep/ .van-list__loading {
  125 + .van-loading {
  126 + .van-loading__spinner {
  127 + width: 28px !important;
  128 + height: 28px !important;
  129 + }
  130 + .van-list__loading-text {
  131 + margin-bottom: 30px;
  132 + color: #333333;
  133 + font-size: 28px;
  134 + font-weight: 400;
  135 + }
  136 + }
  137 + }
  138 + /deep/ .van-list__finished-text {
  139 + margin-bottom: 30px;
  140 + color: #333333;
  141 + font-size: 28px;
  142 + font-weight: 400;
  143 + }
  144 + }
  145 + .bottom-pl {
  146 + background-color: transparent;
  147 + width: 100%;
  148 + // height: 100px;
  149 + height: 1px;
  150 + }
  151 + }
  152 +}
... ...
src/pages/welfareList/welfareList.vue 0 → 100644
  View file @7e27dfc
  1 +<template>
  2 + <div class="welfare-list-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="section banner-box" v-if="swipers && swipers.length">
  26 +
  27 + <!-- 轮播组件 -->
  28 + <swiper-box @jump="swiperJump"
  29 + :swipers="swipers"
  30 + :options="{
  31 + showIndicators: true
  32 + }">
  33 + </swiper-box>
  34 + </div>
  35 +
  36 + <!-- 节 -->
  37 + <div class="section coupon-box" v-if="coupons && coupons.length">
  38 +
  39 + <!-- 优惠券列表 滑动 -->
  40 + <horiz-list class="coupon-horiz-box" @todo="todo"
  41 + :lists="coupons"
  42 + com="coupon">
  43 + </horiz-list>
  44 + </div>
  45 +
  46 + <!-- 分割线 -->
  47 + <div class="dividing-line" v-if="coupons && coupons.length"></div>
  48 +
  49 + <!-- tab导航 -->
  50 + <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'>
  51 +
  52 + <!-- 横向滑动tabs导航组件 -->
  53 + <horiz-list v-if="tabs.list && tabs.list.length" @change="change"
  54 + :lists="tabs.list"
  55 + com="tab2"
  56 + :pid="tabs.active">
  57 + </horiz-list>
  58 + </div>
  59 +
  60 + <!-- 上拉加载 -->
  61 + <van-list class="column-list-container" v-model="tabs.list[tabs.active].loading" :finished="tabs.list[tabs.active].finished" finished-text="~没有更多了~" @load="loadMore">
  62 +
  63 + <!-- 商品列表 -->
  64 + <div class="section goods-list" v-if="lists[tabs.active] && lists[tabs.active].length">
  65 +
  66 + <!-- 商品样式 7 列表 -->
  67 + <column-list-box class="column-list-box" @jump="toDetail" @primary="primary"
  68 + :lists="lists[tabs.active]"
  69 + com='7'
  70 + goodType='2'
  71 + flag=''>
  72 + </column-list-box>
  73 + </div>
  74 + </van-list>
  75 +
  76 + <div class="bottom-pl"></div>
  77 + </div>
  78 +
  79 + <!-- 回到顶部按钮 -->
  80 + <goto-top
  81 + :top="parseInt(150)">
  82 + </goto-top>
  83 + </div>
  84 +</template>
  85 +
  86 +<script>
  87 +
  88 + // 引入组件
  89 + import Vue from "vue";
  90 + import { Toast, Indicator } from "mint-ui";
  91 + import { List } from "vant";
  92 + import callAppBox from "@/components/callAppBox/callAppBox";
  93 + import backBox from "@/components/backBox/backBox";
  94 + import swiperBox from "@/components/swiperBox/swiperBox";
  95 + import horizList from "@/components/horizList/horizList";
  96 + import columnListBox from "@/components/columnListBox/columnListBox";
  97 + import gotoTop from "@/components/gotoTop/gotoTop";
  98 +
  99 + Vue.use(List);
  100 +
  101 + export default {
  102 + name: 'welfareListPage',
  103 + data () {
  104 + return {
  105 + title: '', // 标题
  106 + backs: null, // 后退按钮组
  107 + shareParams: {}, // 分享参数
  108 + CALL_STATUS: {
  109 + INIT: "init", // 初始化页面
  110 + LOAD_MORE: "loadMore" // 加载更多
  111 + },
  112 + swipers: null, // 主Banner
  113 + coupons: null, // 优惠券数据对象
  114 + tabs: { // tabs设置
  115 + fixed: false, // 是否吸顶
  116 + offsetTop: 0, // 距离顶部距离
  117 + top: 0, // 吸顶的top值
  118 + active: 0, // 活动项
  119 + init: false, // tabs数据是否初始化过，防止重复设置tabs列表
  120 + list: [ // tabs数组
  121 + {
  122 + id: 0,
  123 + title: '全部',
  124 + page: 1,
  125 + loading: false,
  126 + loadingNow: false,
  127 + finished: false
  128 + }
  129 + ]
  130 + },
  131 + lists: [] // 列表数据
  132 + }
  133 + },
  134 + components: {
  135 + callAppBox,
  136 + backBox,
  137 + swiperBox,
  138 + horizList,
  139 + columnListBox,
  140 + gotoTop
  141 + },
  142 + computed: {
  143 +
  144 + /**
  145 + * 获取输入数字的整数部分
  146 + */
  147 + getInteger () {
  148 + return (number) => {
  149 + return parseInt(number);
  150 + }
  151 + },
  152 +
  153 + /**
  154 + * 获取输入数字的小数部分
  155 + */
  156 + getDecimal () {
  157 + return (number) => {
  158 +
  159 + // 拆分数字
  160 + let numberArr = number.toString().split(".");
  161 +
  162 + // 判断是否有效数部分
  163 + if (numberArr.length === 2) {
  164 + return numberArr[1];
  165 + } else {
  166 + return "00";
  167 + }
  168 + }
  169 + }
  170 + },
  171 + created() {
  172 +
  173 + // 初始化页面
  174 + this.initPage();
  175 +
  176 + // 判断是否在App内
  177 + if (this.isCNLive.value) {
  178 +
  179 + // 添加后退按钮组“后退”和“分享”按钮
  180 + this.$set(this, 'backs', {
  181 + funcs: {
  182 + back: {
  183 + icon: "static/img/icon_back.png"
  184 + },
  185 + funcArray: [
  186 + {
  187 + icon: "static/img/icon_share.png",
  188 + func: this.toShare,
  189 + params: this.shareParams
  190 + }
  191 + ]
  192 + }
  193 + });
  194 + }
  195 +
  196 + // 获取页面头部数据
  197 + this.getDiscountActivityInfo();
  198 +
  199 + // 商品列表（初始化）
  200 + this.getDiscountActivityGoodsList(this.CALL_STATUS.INIT);
  201 + },
  202 + methods: {
  203 +
  204 + /**
  205 + * 初始化页面
  206 + */
  207 + initPage() {
  208 +
  209 + // 设置分享参数
  210 + this.$set(this, 'shareParams', {
  211 + type: 25,
  212 + id: this.$route.query.id || 0
  213 + });
  214 + },
  215 +
  216 + /**
  217 + * 加载更多
  218 + */
  219 + loadMore() {
  220 +
  221 + // 判断是否可加载
  222 + if (this.tabs.list[this.tabs.active].loadingNow === false || this.tabs.list[this.tabs.active].loadingNow === undefined) {
  223 +
  224 + // 设置加载中状态
  225 + this.$set(this.tabs.list[this.tabs.active], 'loadingNow', true);
  226 +
  227 + if (this.tabs.list[this.tabs.active].page == '1' || this.tabs.list[this.tabs.active].page === undefined) {
  228 +
  229 + // 设置初始化页码
  230 + this.$set(this.tabs.list[this.tabs.active], 'page', 1);
  231 +
  232 + // 商品列表
  233 + this.getDiscountActivityGoodsList(this.CALL_STATUS.INIT);
  234 + } else {
  235 +
  236 + // 判断页面是数字再执行
  237 + if (!isNaN(parseInt(this.tabs.list[this.tabs.active].page))) {
  238 +
  239 + // 商品列表
  240 + this.getDiscountActivityGoodsList(this.CALL_STATUS.LOAD_MORE);
  241 + }
  242 + }
  243 + }
  244 + },
  245 +
  246 + /**
  247 + * 切换tab
  248 + * @param {Object} item [对象数据]
  249 + * @param {Number} index [索引]
  250 + */
  251 + change(item, index) {
  252 +
  253 + // 切换前检查网络状态
  254 + if (this.$parent.onLine) {
  255 +
  256 + // 切换tab
  257 + this.$set(this.tabs, 'active', index);
  258 +
  259 + // 根据参数判断请求哪个接口，获取哪个列表
  260 + if (this.tabs.list[this.tabs.active].type == '1' && (!this.tabs.list[this.tabs.active].page || this.tabs.list[this.tabs.active].page == 1)) {
  261 +
  262 + // 商品列表（初始化）
  263 + this.getDiscountActivityGoodsList(this.CALL_STATUS.INIT);
  264 + }
  265 +
  266 + // 回到顶部
  267 + this.gotoTop();
  268 + } else {
  269 +
  270 + // 网络异常提醒
  271 + Toast("网络异常，请检查网络");
  272 + }
  273 + },
  274 +
  275 + /**
  276 + * 回到顶部
  277 + */
  278 + gotoTop() {
  279 + document.documentElement.scrollTop = document.body.scrollTop = 0;
  280 + },
  281 +
  282 + /**
  283 + * 获取页面头部数据
  284 + */
  285 + getDiscountActivityInfo() {
  286 +
  287 + // 判断必要参数
  288 + if (this.$route.query.id) {
  289 +
  290 + // 加载中提示
  291 + Indicator.open("加载中...");
  292 +
  293 + // 获取证书请求接口
  294 + this.http("/Api/" + (this.getApiVersion().index) + "/getDiscountActivityInfo", {
  295 + id: this.$route.query.id,
  296 + uid: this.$route.query.uid || 0
  297 + }, this.getDiscountActivityInfoCallback, {
  298 + method: "POST"
  299 + });
  300 + }
  301 + },
  302 +
  303 + /**
  304 + * 获取页面头部数据回调
  305 + * @param {Object} res [服务器返回数据]
  306 + * @param {Object} ext [扩展参数]
  307 + */
  308 + getDiscountActivityInfoCallback(res, ext) {
  309 +
  310 + // 加载完成
  311 + Indicator.close();
  312 +
  313 + // 返回处理
  314 + if (res.code == 200) {
  315 +
  316 + // 解构数据
  317 + let { data: datas } = res;
  318 +
  319 + /* 设置首页数据 开始 */
  320 +
  321 + // 判断是否为首次加载
  322 + if (!this.tabs.init) {
  323 +
  324 + // 设置标题
  325 + this.$set(this, 'title', datas.title);
  326 +
  327 + // 判断是否在App内
  328 + if (this.isCNLive.value) {
  329 +
  330 + // 设置nav标题
  331 + this.$set(this.backs, 'title', this.title);
  332 + }
  333 +
  334 + // 获取头部swiper的banner
  335 + if (datas.banner && typeof datas.banner === 'object' && datas.banner.length) {
  336 +
  337 + // 设置banner
  338 + this.$set(this, 'swipers', datas.banner);
  339 + }
  340 +
  341 + // 判断在App内再设置优惠券
  342 + if (this.isCNLive.value) {
  343 +
  344 + // 如果有优惠券，设置优惠券信息
  345 + if (datas.coupon && datas.coupon.length) {
  346 +
  347 + // 设置优惠券
  348 + this.$set(this, 'coupons', datas.coupon);
  349 + }
  350 + }
  351 +
  352 + // 获取tabs数据
  353 + if (datas.list && datas.list.length) {
  354 +
  355 + // 合并数组
  356 + this.$set(this.tabs, 'list', [...this.tabs.list, ...datas.list]);
  357 + }
  358 +
  359 + // 设置为已加载过，不重复加载重复数据
  360 + this.$set(this.tabs, 'init', true);
  361 + }
  362 +
  363 + /* 设置首页数据 结束 */
  364 +
  365 + } else if (res.code == 400) {
  366 +
  367 + // 获取数据失败
  368 + Toast(res.message);
  369 + } else {
  370 +
  371 + // 获取数据失败
  372 + Toast("获取数据失败");
  373 + }
  374 + },
  375 +
  376 + /**
  377 + * 商品列表
  378 + * @param {Object} CALL_STATUS [何处触发请求]
  379 + */
  380 + getDiscountActivityGoodsList(CALL_STATUS = this.CALL_STATUS.LOAD_MORE) {
  381 +
  382 + // 判断必要参数
  383 + if (this.$route.query.id && this.tabs.list[this.tabs.active].id >= 0) {
  384 +
  385 + // 设置开始加载
  386 + this.$set(this.tabs.list[this.tabs.active], "loading", true);
  387 +
  388 + // 加载中提示
  389 + Indicator.open('加载中...');
  390 +
  391 + // 请求接口
  392 + this.http("/Api/" + (this.getApiVersion().index) + "/getDiscountActivityGoodsList", {
  393 + id: this.$route.query.id,
  394 + uid: this.$route.query.uid || 0,
  395 + groupid: this.tabs.list[this.tabs.active].id,
  396 + page: this.tabs.list[this.tabs.active].page
  397 + }, this.getDiscountActivityGoodsListCallback, {
  398 + method: "POST",
  399 + CALL_STATUS
  400 + });
  401 + }
  402 + },
  403 +
  404 + /**
  405 + * 商品列表回调
  406 + * @param {Object} res [服务器返回数据]
  407 + * @param {Object} ext [扩展参数]
  408 + */
  409 + getDiscountActivityGoodsListCallback(res, ext) {
  410 +
  411 + // 加载完成
  412 + Indicator.close();
  413 +
  414 + // 返回处理
  415 + if (res.code == 200) {
  416 +
  417 + // 解构数据
  418 + let {data: datas} = res;
  419 +
  420 + // 判断如果有数据
  421 + if (datas.list && datas.list.length) {
  422 +
  423 + /* 设置列表数据 开始 */
  424 + switch (ext.CALL_STATUS) {
  425 + case this.CALL_STATUS.INIT:
  426 +
  427 + // 设置推荐商品列表
  428 + this.$set(this.lists, this.tabs.active, datas.list);
  429 + break;
  430 + case this.CALL_STATUS.LOAD_MORE:
  431 +
  432 + // 添加数据到数组
  433 + this.$set(this.lists, this.tabs.active, [...this.lists[this.tabs.active], ...datas.list]);
  434 + break;
  435 + }
  436 +
  437 + // 设置页码
  438 + this.$set(this.tabs.list[this.tabs.active], 'page', ++this.tabs.list[this.tabs.active].page);
  439 +
  440 + // 取消Loading中状态，恢复LoadingMore功能
  441 + this.$set(this.tabs.list[this.tabs.active], 'loading', false);
  442 + this.$set(this.tabs.list[this.tabs.active], 'loadingNow', false);
  443 + this.$set(this.tabs.list[this.tabs.active], 'finished', false);
  444 + } else {
  445 +
  446 + // 取消Loading中状态，恢复LoadingMore功能
  447 + this.$set(this.tabs.list[this.tabs.active], 'loading', false);
  448 + this.$set(this.tabs.list[this.tabs.active], 'loadingNow', false);
  449 + this.$set(this.tabs.list[this.tabs.active], 'finished', true);
  450 + }
  451 +
  452 + /* 设置列表数据 结束 */
  453 +
  454 + } else if (res.code == 400) {
  455 +
  456 + // 获取商品出错
  457 + Toast(res.message);
  458 + } else {
  459 +
  460 + // 获取商品出错
  461 + Toast("获取商品出错");
  462 + }
  463 + },
  464 +
  465 + /**
  466 + * 领取优惠券
  467 + * @param {Object} coupons [优惠券对象]
  468 + */
  469 + getUserCoupon(coupons) {
  470 +
  471 + // 判断必要参数
  472 + if (this.$route.query.uid && coupons.id) {
  473 +
  474 + // 加载中提示
  475 + Indicator.open("加载中...");
  476 +
  477 + // 获取证书请求接口
  478 + this.http("/Api/" + (this.getApiVersion().index) + "/getUserCoupon", {
  479 + coupon_id: coupons.id,
  480 + uid: this.$route.query.uid
  481 + }, this.getUserCouponCallback, {
  482 + method: "POST",
  483 + coupons
  484 + });
  485 + }
  486 + },
  487 +
  488 + /**
  489 + * 领取优惠券回调
  490 + * @param {Object} res [服务器返回数据]
  491 + * @param {Object} ext [扩展参数]
  492 + */
  493 + getUserCouponCallback(res, ext) {
  494 +
  495 + // 加载完成
  496 + Indicator.close();
  497 +
  498 + // 返回处理
  499 + if (res.code == 200) {
  500 +
  501 + // 设置优惠券状态（不能再领取）
  502 + this.$set(ext.coupons, 'state', '1');
  503 +
  504 + // 领取成功提示
  505 + Toast('领取成功');
  506 + } else if (res.code == 400) {
  507 +
  508 + // 获取数据失败
  509 + Toast(res.message);
  510 + } else {
  511 +
  512 + // 获取数据失败
  513 + Toast("获取数据失败");
  514 + }
  515 + },
  516 +
  517 + /**
  518 + * swiper跳转事件
  519 + * @param {Object} item [数据对象]
  520 + */
  521 + swiperJump(item) {
  522 +
  523 + // 判断在App内
  524 + if (this.isCNLive.value) {
  525 +
  526 + // 判断通用跳转函数是否存在
  527 + if (typeof this.$parent.gotoDetail === 'function') {
  528 +
  529 + // 判断是否有跳转参数
  530 + if (item.type && item.id) {
  531 +
  532 + // 跳转参数
  533 + let params = {
  534 + type: item.type,
  535 + to: item.id,
  536 + shop_type: item.shop_type
  537 + };
  538 +
  539 + // 通用跳转
  540 + this.$parent.gotoDetail(params);
  541 + }
  542 + }
  543 + } else {
  544 +
  545 + // App外，唤起App
  546 + this.openApp();
  547 + }
  548 + },
  549 +
  550 + /**
  551 + * 优惠券点击事件
  552 + * @param {Object} coupons [优惠券对象]
  553 + */
  554 + todo(coupons) {
  555 +
  556 + // 判断必要参数
  557 + if (coupons.id) {
  558 +
  559 + // 判断优惠券状态
  560 + if (coupons.state == '0') {
  561 +
  562 + // 领取优惠券
  563 + this.getUserCoupon(coupons);
  564 + } else if (coupons.state == '1') {
  565 +
  566 + // 已经领取过优惠券提示
  567 + Toast('您已领取该优惠劵');
  568 + }
  569 + }
  570 + },
  571 +
  572 + /**
  573 + * 跳转商品详情
  574 + * @param {Object} item [数据对象]
  575 + */
  576 + toDetail(item) {
  577 +
  578 + // 判断在App内
  579 + if (this.isCNLive.value) {
  580 +
  581 + // 判断通用跳转函数是否存在
  582 + if (typeof this.$parent.gotoDetail === 'function') {
  583 +
  584 + // 跳转参数
  585 + let params = {
  586 + type: '2',
  587 + to: item.id,
  588 + shop_type: item.shop_type
  589 + };
  590 +
  591 + // 通用跳转
  592 + this.$parent.gotoDetail(params);
  593 + }
  594 + } else {
  595 +
  596 + // App外，唤起App
  597 + this.openApp();
  598 + }
  599 + },
  600 +
  601 + /**
  602 + * 项目按钮事件
  603 + * @param {Object} item [数据对象]
  604 + */
  605 + primary(item) {
  606 +
  607 + // 跳转商品详情
  608 + this.toDetail(item);
  609 + },
  610 +
  611 + /**
  612 + * 播放视频
  613 + * @param {String} videoUrl [数据对象]
  614 + */
  615 + playNow(videoUrl) {
  616 +
  617 + // 判断在App内
  618 + if (this.isCNLive.value) {
  619 +
  620 + // 判断通用跳转函数是否存在
  621 + if (typeof this.$parent.gotoDetail === 'function') {
  622 +
  623 + // 设置跳转参数
  624 + let params = {
  625 + type: '22',
  626 + to: item.to,
  627 + shop_type: ''
  628 + };
  629 +
  630 + // 通用跳转
  631 + this.$parent.gotoDetail(params);
  632 + }
  633 + } else {
  634 +
  635 + // App外，唤起App
  636 + this.openApp();
  637 + }
  638 + },
  639 +
  640 + /**
  641 + * 监听函数，设置滚动条new位置
  642 + */
  643 + scrollEventListenerFun() {
  644 +
  645 + // 下一周期执行
  646 + this.$nextTick(() => {
  647 +
  648 + // 判断组件是否存在
  649 + if (typeof this.$refs.tabsBox === 'object') {
  650 +
  651 + // 判断tabs的offsetTop是否设置
  652 + if (this.tabs.offsetTop == 0) {
  653 +
  654 + // 设置tabs原始位置
  655 + this.$set(this.tabs, 'offsetTop', this.$refs.tabsBox.offsetTop);
  656 + }
  657 +
  658 + // 判断是否有标题栏
  659 + if (typeof this.$refs.navBox === 'object') {
  660 +
  661 + // 设置tabsBox样式，如果window.scrollY >= tabsBox位置，tabsBox吸顶，否则不吸顶
  662 + this.$set(this.tabs, 'fixed', window.scrollY + (this.$refs.navBox.offsetHeight) >= this.tabs.offsetTop);
  663 + } else {
  664 +
  665 + // 设置tabsBox样式，如果window.scrollY >= tabsBox位置，tabsBox吸顶，否则不吸顶
  666 + this.$set(this.tabs, 'fixed', window.scrollY >= this.tabs.offsetTop);
  667 + }
  668 +
  669 + // 如果需要吸顶，设置tabsBox的top值
  670 + if (this.tabs.fixed) {
  671 +
  672 + // 设置吸顶的top值
  673 + this.$set(this.tabs, 'top', (this.$refs.navBox.offsetHeight - 1) + 'px');
  674 + } else {
  675 +
  676 + // 设置吸顶的top值
  677 + this.$set(this.tabs, 'top', 0);
  678 + }
  679 + }
  680 + });
  681 + },
  682 +
  683 + /**
  684 + * 设置滚动条监听
  685 + */
  686 + handleScroll() {
  687 + window.addEventListener("scroll", this.scrollEventListenerFun);
  688 + },
  689 +
  690 + /**
  691 + * 唤起App封装
  692 + */
  693 + openApp() {
  694 +
  695 + this.$nextTick(() => {
  696 +
  697 + // 唤起App
  698 + if (typeof this.$parent.callAppModal === 'function' && typeof this.$refs.callApp === 'object') {
  699 +
  700 + // 设置唤起参数
  701 + let options = {
  702 + success: this.$refs.callApp.callApp
  703 + }
  704 +
  705 + // 唤起App
  706 + this.$parent.callAppModal(options);
  707 + }
  708 + });
  709 + },
  710 +
  711 + /**
  712 + * 分享
  713 + */
  714 + toShare() {
  715 +
  716 + // 判断分享
  717 + if (typeof this.$parent.toShare === 'function' && typeof this.shareParams === 'object' && this.shareParams.type) {
  718 + this.$parent.toShare(this.shareParams.type, this.shareParams.id || 0);
  719 + }
  720 + },
  721 +
  722 + /**
  723 + * 后退
  724 + */
  725 + back() {
  726 +
  727 + // 判断是否有处理函数
  728 + if (typeof this.$parent.back === 'function') {
  729 +
  730 + // 后退
  731 + this.$parent.back();
  732 + } else {
  733 +
  734 + // 后退
  735 + window.history.go(-1);
  736 + }
  737 + }
  738 + },
  739 + head: {
  740 + title () {
  741 + return {
  742 + inner: this.title
  743 + }
  744 + }
  745 + },
  746 + watch: {
  747 +
  748 + // 设置页面标题
  749 + title(newVal) {
  750 + if (this.$store.state.browser.toLowerCase() == "qq" && this.$store.state.deviceType.toLowerCase() == "iphone") {
  751 + this.$iFrame.insertIFrame(newVal);
  752 + } else {
  753 + this.$emit("updateHead");
  754 + }
  755 + }
  756 + },
  757 + mounted() {
  758 +
  759 + // 如果是App外，设置唤起App和微信内分享参数
  760 + if (!this.isCNLive.value) {
  761 +
  762 + // 唤起详情页
  763 + if (typeof this.$parent.getOpenApp === "function" && typeof this.shareParams === 'object' && this.shareParams.type) {
  764 + this.$parent.getOpenApp({
  765 + type: this.shareParams.type,
  766 + id: this.shareParams.id || 1,
  767 + url: ""
  768 + });
  769 + }
  770 +
  771 + // 分享详情页
  772 + if (typeof this.$parent.getShareData === "function") {
  773 + this.$parent.getShareData({
  774 + type: this.shareParams.type,
  775 + id: this.shareParams.id || 1,
  776 + url: ""
  777 + });
  778 + }
  779 + }
  780 +
  781 + // 设置滚动条监听
  782 + this.handleScroll();
  783 +
  784 + // 页面切换可见状态监听
  785 + document.addEventListener('visibilitychange', () => {
  786 +
  787 + // 页面显示出来了
  788 + if (document.hidden === false && this.$route.name == 'shopList') {
  789 +
  790 + // 获取页面头部数据
  791 + this.getActShopIndex();
  792 + }
  793 + });
  794 + }
  795 + }
  796 +</script>
  797 +
  798 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  799 +<style rel="stylesheet/less" lang='less' scoped>
  800 + @import "welfareList";
  801 +</style>
... ...
src/router/index.js
  View file @7e27dfc
... ... @@ -155,6 +155,19 @@ const router = new Router({
155 155 }
156 156 },
157 157 {
  158 + // 福利专区列表页（根据工会商品列表页改版）
  159 + path: "/welfareList",
  160 + name: "welfareList",
  161 + component: resolve => {
  162 + require([
  163 + "@/pages/welfareList/welfareList"
  164 + ], resolve);
  165 + },
  166 + meta: {
  167 + requireAuth: false
  168 + }
  169 + },
  170 + {
158 171 // 我的礼盒
159 172 path: "/myGiftBox",
160 173 name: "myGiftBox",
... ...