w-front-end / select_good · Commits

Commit aa34d58e3c71fc13285545421348022c90f99554

Authored by 王强
1 parent 14422ef7

购好物，添加常规活动列表页，在福利专区基础上调整，目前福利专区页面和常规活动列表页相同，周四换个名字方便记忆使用~

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