w-front-end / select_good · Commits

Commit 753b7d3a1834b6d607893c412ad55aa88b18e64e

Authored by 王强
2 parents 6ce258a5 c1b1c75f

Merge branch 'Guan_AI_house' 

# Conflicts:
#	src/components/swiperItem/swiperItem.less
Inline Side-by-side
Showing 15 changed files with 1495 additions and 6 deletions
src/components/columnCommodityListBox/columnCommodityListBox.less 0 → 100644
  View file @753b7d3
  1 +@charset "UTF-8";
  2 +
  3 +.column-list-box {
  4 + .title-box {
  5 + & + .box {
  6 + margin-top: 30px;
  7 + }
  8 + }
  9 + .box {
  10 + // display: flex;
  11 + // flex-direction: row;
  12 + // justify-content: space-between;
  13 + // align-items: flex-start;
  14 + // flex-wrap: wrap;
  15 + column-count: 2;
  16 + column-width: 336px;
  17 + column-gap: 18px;
  18 + margin: 0 auto;
  19 + padding-bottom: 18px;
  20 + width: 690px;
  21 + .left-box {
  22 + .item-box {
  23 + &:last-child {
  24 + margin-bottom: 0;
  25 + }
  26 + }
  27 + }
  28 + .right-box {
  29 + .item-box {
  30 + &:last-child {
  31 + // margin-bottom: 0;
  32 + }
  33 + }
  34 + }
  35 + .item-box {
  36 + background-color: #ffffff;
  37 + margin-bottom: 18px;
  38 + width: 336px;
  39 + height: auto;
  40 + break-inside: avoid;
  41 + border-radius: 16px;
  42 + overflow: hidden;
  43 + .item {
  44 + width: 100%;
  45 + height: auto;
  46 + .img-box {
  47 + display: flex;
  48 + justify-content: center;
  49 + align-items: center;
  50 + width: 100%;
  51 + height: 336px;
  52 + // height: 100%;
  53 + overflow: hidden;
  54 + .img {
  55 + display: block;
  56 + width: 100%;
  57 + height: auto;
  58 + }
  59 + }
  60 + .content-box {
  61 + margin: 0 auto;
  62 + width: 286px;
  63 + .title {
  64 + display: -webkit-box;
  65 + margin-top: 20px;
  66 + color: #333333;
  67 + font-size: 26px;
  68 + width: 100%;
  69 + height: auto;
  70 + line-height: 40px;
  71 + -webkit-line-clamp: 2;
  72 + -webkit-box-orient: vertical;
  73 + text-overflow: ellipsis;
  74 + overflow: hidden;
  75 + }
  76 + .coupon-box {
  77 + display: inline;
  78 + margin-top: 8px;
  79 + padding: 1px 6px;
  80 + color: #FC1541;
  81 + font-size: 18px;
  82 + border: 1px solid #FC1541;
  83 + border-radius: 4px;
  84 + }
  85 + .price-box {
  86 + display: flex;
  87 + justify-content: space-between;
  88 + align-items: center;
  89 + margin-top: 25px;
  90 + margin-bottom: 20px;
  91 + .left {
  92 + display: flex;
  93 + justify-content: flex-start;
  94 + align-items: baseline;
  95 + color: #FC1541;
  96 + .y {
  97 + font-size: 24px;
  98 + }
  99 + .integer {
  100 + font-size: 38px;
  101 + }
  102 + .decimal {
  103 + font-size: 24px;
  104 + }
  105 +
  106 + }
  107 + .right {
  108 + display: flex;
  109 + justify-content: flex-end;
  110 + align-items: baseline;
  111 + .icon-add {
  112 + display: block;
  113 + width: 48px;
  114 + height: 48px;
  115 + }
  116 + }
  117 + }
  118 + }
  119 + }
  120 + }
  121 + }
  122 +}
0 \ No newline at end of file 123 \ No newline at end of file
src/components/columnCommodityListBox/columnCommodityListBox.vue 0 → 100644
  View file @753b7d3
  1 +<template>
  2 + <div class="column-list-box" v-if="columnLists && columnLists.list && columnLists.list.length">
  3 + <slot name="title"></slot>
  4 + <div class="box">
  5 +
  6 + <!-- left-box -->
  7 + <div class="left-box">
  8 +
  9 + <!-- 数组内奇数，index是偶数 -->
  10 + <div class="item-box" v-if="!(index % 2)" v-for="(item, index) in columnLists.list" :key="index" @click="toDetail(item)">
  11 + <div class="item">
  12 + <div class="img-box">
  13 + <img v-lazy="item.simg + SIGN.MIDDLE" class="img" />
  14 + </div>
  15 + <div class="content-box">
  16 + <div class="title">{{item.title}}</div>
  17 + <!-- <div class="coupon-box">
  18 + 满180减10
  19 + </div> -->
  20 + <div class="price-box">
  21 + <div class="left">
  22 + <div class="y">￥</div>
  23 + <div class="integer">{{getInteger(item.price)}}.</div>
  24 + <div class="decimal">{{getDecimal(item.price)}}</div>
  25 + </div>
  26 + <div class="right">
  27 + <img src="static/img/icon_add.png" class="icon-add" mode="widthFix" />
  28 + </div>
  29 + </div>
  30 + </div>
  31 + </div>
  32 + </div>
  33 + </div>
  34 +
  35 + <!-- right-box -->
  36 + <div class="right-box">
  37 +
  38 + <!-- 数组内偶数，index是奇数 -->
  39 + <div class="item-box" v-if="index % 2" v-for="(item, index) in columnLists.list" :key="index" @click="toDetail(item)">
  40 + <div class="item">
  41 + <div class="img-box">
  42 + <img v-lazy="item.simg + SIGN.MIDDLE" class="img" />
  43 + </div>
  44 + <div class="content-box">
  45 + <div class="title">{{item.title}}</div>
  46 + <!-- <div class="coupon-box">
  47 + 满180减10
  48 + </div> -->
  49 + <div class="price-box">
  50 + <div class="left">
  51 + <div class="y">￥</div>
  52 + <div class="integer">{{getInteger(item.price)}}.</div>
  53 + <div class="decimal">{{getDecimal(item.price)}}</div>
  54 + </div>
  55 + <div class="right">
  56 + <img src="static/img/icon_add.png" class="icon-add" mode="widthFix" />
  57 + </div>
  58 + </div>
  59 + </div>
  60 + </div>
  61 + </div>
  62 + </div>
  63 + </div>
  64 + </div>
  65 +</template>
  66 +
  67 +<script>
  68 + export default {
  69 + data() {
  70 + return {
  71 +
  72 + };
  73 + },
  74 + props: ["columnLists"],
  75 + computed: {
  76 +
  77 + /**
  78 + * 获取整数
  79 + */
  80 + getInteger() {
  81 + return (number) => {
  82 + return parseInt(number);
  83 + }
  84 + },
  85 +
  86 + /**
  87 + * 获取小数
  88 + */
  89 + getDecimal() {
  90 + return (number) => {
  91 +
  92 + // 拆分数字
  93 + let numberArr = number.toString().split(".");
  94 +
  95 + // 判断是否有效数部分
  96 + if (numberArr.length === 2) {
  97 + return numberArr[1];
  98 + } else {
  99 + return "00";
  100 + }
  101 + }
  102 + }
  103 + },
  104 + methods: {
  105 +
  106 + /**
  107 + * 跳转详情
  108 + * @param {object} item [对象]
  109 + */
  110 + toDetail(item) {
  111 + this.$emit("detail", item);
  112 + }
  113 + }
  114 + }
  115 +</script>
  116 +
  117 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  118 +<style rel="stylesheet/less" lang='less' scoped>
  119 + @import './columnCommodityListBox';
  120 +</style>
src/components/htmlBox/htmlBox.less 0 → 100644
  View file @753b7d3
  1 +@charset "UTF-8";
  2 +
  3 +.html-box {
  4 + .box {
  5 + width: 750px;
  6 + height: auto;
  7 + .html {
  8 + background-color: #ffffff;
  9 + margin: 0 auto;
  10 + width: 690px;
  11 + height: auto;
  12 + color: #999999 !important;
  13 + font-size: 26px !important;
  14 + p {
  15 + margin-top: 20px;
  16 + margin-bottom: 20px;
  17 + margin-block-start: 20px;
  18 + margin-block-end: 20px;
  19 + margin-inline-start: 0px;
  20 + margin-inline-end: 0px;
  21 + }
  22 + img {
  23 + width: 100% !important;
  24 + height: auto !important;
  25 + }
  26 + }
  27 + }
  28 +}
0 \ No newline at end of file 29 \ No newline at end of file
src/components/htmlBox/htmlBox.vue 0 → 100644
  View file @753b7d3
  1 +<template>
  2 + <div class="html-box" v-if="htmls">
  3 + <div class="box">
  4 + <div class="html" v-html="htmls"></div>
  5 + </div>
  6 + </div>
  7 +</template>
  8 +
  9 +<script>
  10 + export default {
  11 + data() {
  12 + return {
  13 +
  14 + }
  15 + },
  16 + props: ["htmls"],
  17 + methods: {
  18 +
  19 + }
  20 + }
  21 +</script>
  22 +
  23 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  24 +<style rel="stylesheet/less" lang="less" scoped>
  25 + @import './htmlBox';
  26 +</style>
src/components/imgListBox/imgListBox.less 0 → 100644
  View file @753b7d3
  1 +@charset "UTF-8";
  2 +
  3 +.img-list-box {
  4 + .box {
  5 + width: 750px;
  6 + height: auto;
  7 + .img-box {
  8 + display: flex;
  9 + justify-content: center;
  10 + align-items: center;
  11 + padding-bottom: 80px;
  12 + width: 100%;
  13 + height: 100%;
  14 + &:first-child {
  15 + padding-top: 50px;
  16 + }
  17 + .img {
  18 + display: block;
  19 + width: 100%;
  20 + }
  21 + }
  22 + }
  23 +}
0 \ No newline at end of file 24 \ No newline at end of file
src/components/imgListBox/imgListBox.vue 0 → 100644
  View file @753b7d3
  1 +<template>
  2 + <div class="img-list-box" v-if="imgLists && imgLists.length">
  3 + <div class="box">
  4 + <div class="img-box" v-for="(item, index) in imgLists" :key="index" @click="toDetail(item)">
  5 + <img v-lazy="item.simg + SIGN.BIG" class="img" mode="widthFix" />
  6 + </div>
  7 + </div>
  8 + </div>
  9 +</template>
  10 +
  11 +<script>
  12 + export default {
  13 + data() {
  14 + return {
  15 +
  16 + };
  17 + },
  18 + props: ["imgLists"],
  19 + methods: {
  20 + /**
  21 + * 跳转详情
  22 + * @param {object} item [列表对象]
  23 + */
  24 + toDetail(item) {
  25 + this.$emit("detail", item);
  26 + }
  27 + }
  28 + }
  29 +</script>
  30 +
  31 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  32 +<style rel="stylesheet/less" lang='less' scoped>
  33 + @import './imgListBox';
  34 +</style>
src/components/tabBox/tabBox.less 0 → 100644
  View file @753b7d3
  1 +.tabBox {
  2 + // tab上线填充
  3 + .van-tabs--line .van-tabs__wrap{
  4 + height: 60px;
  5 + line-height: 30px;
  6 + padding: 30px 0;
  7 + }
  8 + // tab标题颜色和字号
  9 + .van-tab{
  10 + color: #B4B4B4;
  11 + font-size: 32px;
  12 + }
  13 + // tab选中颜色
  14 + .van-tab--active{
  15 + color: #333333;
  16 + }
  17 + // 选中下划线
  18 + .van-tabs__line{
  19 + background-color: #FC1541;
  20 + width: 40px !important;
  21 + height: 4px;
  22 + position: absolute;
  23 + bottom: 2vw;
  24 + left: 0;
  25 + z-index: 1;
  26 + border-radius: 0.4vw;
  27 + top: 50px;
  28 + }
  29 + // tab边框
  30 + .van-hairline--top-bottom::after, .van-hairline-unset--top-bottom::after{
  31 + border-width: 0;
  32 + }
  33 + .tabBox_main{
  34 + width: 750px;
  35 + height: auto;
  36 + .skeleton {
  37 + &.brief {
  38 + background-color: #ffffff;
  39 + }
  40 + &.boutique {
  41 + background: linear-gradient(90deg, rgba(255, 246, 248, 1) 0%, rgba(255, 233, 239, 1) 100%);
  42 + }
  43 + &.commodity {
  44 + width: 100%;
  45 + height: 100%;
  46 + background-color: #F9F9F9;
  47 + //.column-commodity-excessive {
  48 + // background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(249, 249, 249, 1) 100%);
  49 + // width: 750px;
  50 + // height: 30px;
  51 + //}
  52 + }
  53 + }
  54 + }
  55 +}
src/components/tabBox/tabBox.vue 0 → 100644
  View file @753b7d3
  1 +<template>
  2 + <div class="tabBox">
  3 + <!-- 主内容区域 -->
  4 + <van-tabs @change="onChange" swipeable v-model="active">
  5 + <van-tab v-for="(item,index) in tabbar" :key="index" :title="item.title">
  6 +
  7 + </van-tab>
  8 + <div class="tabBox_main" ref="tabsSwiperBox">
  9 + <div class="tabbar" v-for="(item, index) in tabbaromponents.ads" :key="index">
  10 + <!-- 关爱屋简介 -->
  11 + <div class="skeleton brief" ref="brief">
  12 + <html-box
  13 + v-if="item.style === '14'"
  14 + :htmls="item.content">
  15 + </html-box>
  16 + </div>
  17 + <!-- 精品推荐 -->
  18 + <div class="skeleton boutique" ref="boutique">
  19 + <img-list-box
  20 + v-if="item.style === '12'"
  21 + @detail="toDetail"
  22 + :imgLists="item.img">
  23 + </img-list-box>
  24 + <!--优惠专区-->
  25 + <discountZone v-if="item.style == '1'" @more="toDetail" @toDetail="toDetail"
  26 + :discountZoneInfo="item">
  27 + </discountZone>
  28 + <!--天天特惠-->
  29 + <preferential v-if="item.style == '2'" @more="toDetail" @toDetail="toDetail"
  30 + :preferentialInfo="item">
  31 + </preferential>
  32 +
  33 + <!--视听专区-->
  34 + <videoArea v-if="item.style == '13'" @more="toDetail" @toDetail="toDetail"
  35 + :videoAreaInfo="item">
  36 + </videoArea>
  37 +
  38 + <!-- style_7组件 -->
  39 + <style-7 v-if="item.style == '7'" @more="toDetail" @bannerJump="toDetail" @jump=$parent.jump @addCart=$parent.addCart
  40 + :styles="item">
  41 + </style-7>
  42 + </div>
  43 + <!-- 商品推荐 -->
  44 + <div class="skeleton commodity" ref="commodity">
  45 + <!--infinite-scroll-immediate-check="true"可避免上拉多次调用接口问题-->
  46 + <div class="column-commodity-list" infinite-scroll-immediate-check="true" v-infinite-scroll="loadCommodity" infinite-scroll-disabled="paging.commodity.loading" :infinite-scroll-distance="paging.distance">
  47 + <column-commodity-list-box
  48 + v-if="item.style === '15'"
  49 + @detail="toCommodityDetail"
  50 + :columnLists="commoditys">
  51 + </column-commodity-list-box>
  52 + </div>
  53 + </div>
  54 + </div>
  55 + </div>
  56 + </van-tabs>
  57 + </div>
  58 +</template>
  59 +
  60 +<script>
  61 + import { Toast, Indicator } from "mint-ui";
  62 + import htmlBox from "@/components/htmlBox/htmlBox";
  63 + import imgListBox from "@/components/imgListBox/imgListBox";
  64 + import columnCommodityListBox from "@/components/columnCommodityListBox/columnCommodityListBox";
  65 + import discountZone from "@/components/discountZone/discountZone";
  66 + import preferential from "@/components/preferential/preferential";
  67 + import videoArea from "@/components/videoArea/videoArea";
  68 + import style7 from "@/components/style_7/style_7";
  69 + export default {
  70 + name: 'name',
  71 + data () {
  72 + return {
  73 + active: 0,
  74 + tabbaromponents: null, // 组件库
  75 + commoditys: { // 全部推荐
  76 + list: []
  77 + },
  78 + paging: { // 分页
  79 + commodity: {
  80 + loading: true,
  81 + page: 1
  82 + },
  83 + distance: 50
  84 + }
  85 + }
  86 + },
  87 + props:["tabbar"],
  88 + components: {
  89 + htmlBox,
  90 + imgListBox,
  91 + columnCommodityListBox,
  92 + discountZone,
  93 + preferential,
  94 + videoArea,
  95 + style7,
  96 + },
  97 + created(){
  98 + // 初始化的时选中关爱屋
  99 + this.tabbaromponents = this.tabbar.find((item)=>{
  100 + return item.title === "关爱屋"
  101 + });
  102 + // 获取爱心屋全部商品数据
  103 + this.shopRecommendGoods(this.paging.commodity.page)
  104 + },
  105 + methods: {
  106 + onChange(name, title) {
  107 + // 切换tab时判断展示哪个组件
  108 + this.tabbaromponents = this.tabbar.find((item)=>{
  109 + return item.title === title
  110 + });
  111 + },
  112 + /**
  113 + * 调用通用跳转
  114 + * @param {object} item [通用跳转对象]
  115 + */
  116 + toDetail(item) {
  117 + // 判断是否有通用跳转函数
  118 + if (typeof this.$parent.toDetail === "function") {
  119 +
  120 + // 调用通用跳转
  121 + this.$parent.toDetail(item);
  122 + }
  123 + },
  124 + /**
  125 + * 特定跳转商品详情
  126 + * @param {object} item [跳转对象]
  127 + */
  128 + toCommodityDetail(item) {
  129 +
  130 + // 设置跳转参数
  131 + Object.assign(item, {
  132 + type: "2",
  133 + to: item.id
  134 + });
  135 +
  136 + // 调用通用跳转
  137 + this.toDetail(item);
  138 + },
  139 + /**
  140 + * 爱心屋项目全部商品
  141 + * @param {int} page [页码]
  142 + */
  143 + shopRecommendGoods(page) {
  144 + // 判断必要参数
  145 + if (this.tabbar[2].shop_id) {
  146 +
  147 + // 加载中
  148 + this.$set(this.paging.commodity, "loading", true);
  149 +
  150 + // 加载中提示
  151 + Indicator.open('加载中...');
  152 +
  153 + // 请求接口
  154 + this.http("/Api/" + (this.getApiVersion().index) + "/shopGoodsList", {
  155 + shop_id: this.tabbar[2].shop_id,
  156 + page: page
  157 + }, this.shopRecommendGoodsCallback, {
  158 + method: "POST"
  159 + });
  160 + }
  161 + },
  162 +
  163 + /**
  164 + * 爱心屋项目全部商品回调
  165 + * @param {object} res [服务器返回数据]
  166 + * @param {object} ext [扩展参数]
  167 + */
  168 + shopRecommendGoodsCallback(res, ext) {
  169 + // 加载完成
  170 + Indicator.close();
  171 +
  172 + // 返回处理
  173 + if (res.code == 200) {
  174 +
  175 + // 解构数据
  176 + let {data: datas} = res;
  177 +
  178 + /* 设置商品推荐数据 开始 */
  179 +
  180 + // 判断是否有数据
  181 + if (datas && datas.length) {
  182 +
  183 + // 追加列表
  184 + this.$set(this.commoditys, "list", [...this.commoditys.list, ...datas]);
  185 +
  186 + // 设置还有需要加载的内容
  187 + this.$set(this.paging.commodity, "loading", false);
  188 + } else {
  189 +
  190 + // 没有需要加载的内容，停止上拉加载
  191 + this.$set(this.paging.commodity, "loading", true);
  192 + }
  193 +
  194 + /* 设置商品推荐数据 结束 */
  195 +
  196 + } else if (res.code == 400) {
  197 +
  198 + // 获取商品推荐失败
  199 + Toast(res.message);
  200 + } else {
  201 +
  202 + // 获取商品推荐失败
  203 + Toast("获取商品推荐失败");
  204 + }
  205 + },
  206 + /**
  207 + * 上拉加载“爱心屋项目全部商品”
  208 + */
  209 + loadCommodity() {
  210 + // 判断是“精品推荐”页才加载
  211 + if (this.tabbaromponents.title === '全部商品' && this.tabbaromponents.shop_id) {
  212 + // 设置“精品推荐”页码
  213 + this.$set(this.paging.commodity, "page", ++this.paging.commodity.page);
  214 + // 调用接口
  215 + this.shopRecommendGoods(this.paging.commodity.page);
  216 + }
  217 + },
  218 +
  219 + }
  220 + }
  221 +</script>
  222 +
  223 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  224 +<style rel="stylesheet/less" lang="less">
  225 + @import './tabBox';
  226 +</style>
src/main.js
  View file @753b7d3
@@ -6,7 +6,7 @@ import VueHead from &quot;vue-head&quot;; @@ -6,7 +6,7 @@ import VueHead from &quot;vue-head&quot;;
6 import sha1 from "sha1"; 6 import sha1 from "sha1";
7 import 'mint-ui/lib/style.css'; 7 import 'mint-ui/lib/style.css';
8 import { Toast, Indicator,InfiniteScroll } from "mint-ui"; 8 import { Toast, Indicator,InfiniteScroll } from "mint-ui";
9 -import { Rate, Popup, Lazyload, Search, PullRefresh, Picker } from "vant"; 9 +import { Rate, Popup, Lazyload, Search, PullRefresh, Picker, Tab, Tabs} from "vant";
10 import App from "./App"; 10 import App from "./App";
11 import IdCard from './common/IdCard'; 11 import IdCard from './common/IdCard';
12 import VueBus from 'vue-bus'; 12 import VueBus from 'vue-bus';
@@ -18,6 +18,8 @@ Vue.use(Rate); @@ -18,6 +18,8 @@ Vue.use(Rate);
18 Vue.use(Popup); 18 Vue.use(Popup);
19 Vue.use(PullRefresh); 19 Vue.use(PullRefresh);
20 Vue.use(Picker); 20 Vue.use(Picker);
  21 +Vue.use(Tab);
  22 +Vue.use(Tabs);
21 Vue.use(Lazyload, { 23 Vue.use(Lazyload, {
22 preload: 90, 24 preload: 90,
23 loading: "static/img/x.jpg", 25 loading: "static/img/x.jpg",
@@ -44,7 +46,7 @@ import &#39;url-search-params-polyfill&#39;; @@ -44,7 +46,7 @@ import &#39;url-search-params-polyfill&#39;;
44 Vue.config.productionTip = false; 46 Vue.config.productionTip = false;
45 47
46 // 部署模式设置（开发模式："dev"，测试模式："test"，生产模式："prod"） 48 // 部署模式设置（开发模式："dev"，测试模式："test"，生产模式："prod"）
47 -Vue.prototype.mode = "dev"; 49 +Vue.prototype.mode = "test";
48 50
49 // 微信JS-SDK对象 51 // 微信JS-SDK对象
50 Vue.prototype.jweixin = { 52 Vue.prototype.jweixin = {
src/pages/GuanAIHouse/GuanAIHouse.less 0 → 100644
  View file @753b7d3
  1 +@charset "UTF-8";
  2 +
  3 +.mall-box {
  4 + .nav {
  5 + position: fixed;
  6 + top: 0;
  7 + z-index: 100;
  8 + background-color: transparent;
  9 + width: 750px;
  10 + height: auto;
  11 + }
  12 + .pl-call-app {
  13 + background-color: transparent;
  14 + width: 100%;
  15 + height: 122px;
  16 + }
  17 + .pl-nav {
  18 + background-color: #FA245F;
  19 + width: 100%;
  20 + height: 93px;
  21 + }
  22 + /deep/ .van-pull-refresh {
  23 + .van-pull-refresh__track {
  24 + .van-pull-refresh__head {
  25 + font-size: 30px;
  26 + }
  27 + }
  28 + }
  29 + .header-box {
  30 + background-color: #FA245F;
  31 + width: 750px;
  32 + height: auto;
  33 + .swiper-box {
  34 + // padding-top: 93px;
  35 + padding-bottom: 30px;
  36 + }
  37 + .padding-top30{
  38 + padding-top: 30px;
  39 + }
  40 + }
  41 + .main-box {
  42 + .tabs-box {
  43 + padding-top: 30px;
  44 + padding-bottom: 30px;
  45 + width: 750px;
  46 + height: auto;
  47 + &.bg-white {
  48 + background-color: #ffffff;
  49 + }
  50 + &.bg-excessive-color {
  51 + background: linear-gradient(90deg, rgba(255, 246, 248, 1) 0%, rgba(255, 233, 239, 1) 100%);
  52 + }
  53 + .box {
  54 + display: flex;
  55 + justify-content: space-around;
  56 + align-items: center;
  57 + margin: 0 auto;
  58 + width: 690px;
  59 + height: 100%;
  60 + .tab {
  61 + color: #B4B4B4;
  62 + font-size: 32px;
  63 + .line {
  64 + background-color: transparent;
  65 + margin: 8px auto 0 auto;
  66 + width: 40px;
  67 + height: 4px;
  68 + }
  69 + &.active {
  70 + color: #333333;
  71 + .line {
  72 + background-color: #FC1541;
  73 + width: 40px;
  74 + height: 4px;
  75 + }
  76 + }
  77 + }
  78 + }
  79 + }
  80 + .tabs-swiper-box {
  81 + width: 750px;
  82 + height: auto;
  83 + .swipe {
  84 + width: 100%;
  85 + height: 100%;
  86 + .swipe-item {
  87 + width: 100%;
  88 + height: 100%;
  89 + .skeleton {
  90 + &.brief {
  91 + background-color: #ffffff;
  92 + }
  93 + &.boutique {
  94 + background: linear-gradient(90deg, rgba(255, 246, 248, 1) 0%, rgba(255, 233, 239, 1) 100%);
  95 + }
  96 + &.commodity {
  97 + background-color: #F9F9F9;
  98 + .column-commodity-excessive {
  99 + background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(249, 249, 249, 1) 100%);
  100 + width: 750px;
  101 + height: 30px;
  102 + }
  103 + }
  104 + }
  105 + }
  106 + }
  107 + }
  108 + }
  109 +}
src/pages/GuanAIHouse/GuanAIHouse.vue 0 → 100644
  View file @753b7d3
  1 +<template>
  2 + <div class="mall-box" ref="mallBox">
  3 +
  4 + <!-- nav -->
  5 + <div class="nav">
  6 +
  7 + <!-- H5唤起App组件 -->
  8 + <call-app-box class="call-app-box" :style="'padding-top: ' + ($parent.top.value) + 'px'" ref="callApp" v-if="!isCNLive.value"
  9 + :callApps="$parent.callApps">
  10 + </call-app-box>
  11 +
  12 + <!-- 后退按钮组 -->
  13 + <back-box v-if="$parent.isBackBox.value" class="back-box" :style="'padding-top: ' + $parent.top.value + 'px; background-color: rgba(250, 36, 95, ' + opacity + ')'" ref="navBox" @back="back"
  14 + :backs="backs">
  15 + </back-box>
  16 + </div>
  17 +
  18 + <!-- pl callApp -->
  19 + <div class="pl-call-app" :style="'padding-top: ' + $parent.top.value + 'px'" v-if="$parent.isOpenApp.value"></div>
  20 +
  21 + <!-- pl nav -->
  22 + <div v-if="$parent.isBackBox.value" class="pl-nav" :style="'padding-top: ' + $parent.top.value + 'px'"></div>
  23 +
  24 + <!-- 头部区域 -->
  25 + <div class="header-box" ref="headerBox">
  26 +
  27 + <!-- 轮播图 -->
  28 + <swiper-box class="swiper-box" :class="{'padding-top30': !$parent.isBackBox.value}" @detail="toDetail"
  29 + :swipers="swipers">
  30 + </swiper-box>
  31 + </div>
  32 +
  33 + <!-- 主内容区域 -->
  34 + <div class="main-box">
  35 +
  36 + <!-- tabs -->
  37 + <div class="tabs-box" :class="tabs[activeTabIndex] && tabs[activeTabIndex].class ? tabs[activeTabIndex].class : ''" ref="tabsBox">
  38 + <div class="box">
  39 + <div class="tab" :class="{'active': item.active}" v-for="(item, index) in tabs" :key="index" @click="changeTab(item)">
  40 + <div class="title">{{item.title}}</div>
  41 + <div class="line"></div>
  42 + </div>
  43 + </div>
  44 + </div>
  45 +
  46 + <!-- 滑动列表区域 -->
  47 + <div class="tabs-swiper-box" :style="{height: swiperExce.offsetHeight + 'px', minHeight: 'calc(100vh - ' + ($parent.top.value + 'px') + ' - 38.1vh)'}" ref="tabsSwiperBox">
  48 + <swipe class="swipe" ref="swiperBox" :autoplay="0" :touchable="swiperTouchable.value" :show-indicators="false" :loop="false" :initial-swipe="2" @change="swiperChange">
  49 + <swipe-item class="swipe-item">
  50 +
  51 + <!-- 外部骨架 -->
  52 + <div class="skeleton brief" ref="brief">
  53 +
  54 + <!-- 领头雁简介 -->
  55 + <html-box
  56 + :htmls="briefs">
  57 + </html-box>
  58 + </div>
  59 + </swipe-item>
  60 + <swipe-item class="swipe-item">
  61 +
  62 + <!-- 外部骨架 -->
  63 + <div class="skeleton boutique" ref="boutique">
  64 +
  65 + <!-- 精品推荐 -->
  66 + <div class="boutique-list" v-infinite-scroll="loadBoutique" infinite-scroll-disabled="paging.boutique.loading" :infinite-scroll-distance="paging.distance">
  67 +
  68 + <img-list-box @detail="toDetail"
  69 + :imgLists="boutiques">
  70 + </img-list-box>
  71 + <!--优惠专区-->
  72 + <!--<discountZone @more="toDetail" @toDetail="toDetail"-->
  73 + <!--:discountZoneInfo="item">-->
  74 + <!--</discountZone>-->
  75 + </div>
  76 + </div>
  77 + </swipe-item>
  78 + <swipe-item class="swipe-item">
  79 +
  80 + <!-- 外部骨架 -->
  81 + <div class="skeleton commodity" ref="commodity">
  82 +
  83 + <!-- 渐变过度 -->
  84 + <div class="column-commodity-excessive"></div>
  85 +
  86 + <!-- 商品推荐 -->
  87 + <div class="column-commodity-list" v-infinite-scroll="loadCommodity" infinite-scroll-disabled="paging.commodity.loading" :infinite-scroll-distance="paging.distance">
  88 +
  89 + <column-commodity-list-box @detail="toCommodityDetail"
  90 + :columnLists="commoditys">
  91 + </column-commodity-list-box>
  92 + </div>
  93 + </div>
  94 + </swipe-item>
  95 + </swipe>
  96 + </div>
  97 + </div>
  98 + </div>
  99 +</template>
  100 +
  101 +<script>
  102 +
  103 + // 引入组件
  104 + import Vue from "vue";
  105 + // import { Toast, Indicator, Swipe, SwipeItem } from "mint-ui";
  106 + import { Toast, Indicator } from "mint-ui";
  107 + import { Swipe, SwipeItem } from "vant";
  108 + import callAppBox from "@/components/callAppBox/callAppBox";
  109 + import swiperBox from "@/components/swiper/swiper";
  110 + import backBox from "@/components/backBox/backBox";
  111 + import htmlBox from "@/components/htmlBox/htmlBox";
  112 + import imgListBox from "@/components/imgListBox/imgListBox";
  113 + import columnCommodityListBox from "@/components/columnCommodityListBox/columnCommodityListBox";
  114 + import discountZone from "@/components/discountZone/discountZone";
  115 + export default {
  116 + data () {
  117 + return {
  118 + title: "", // 页面标题
  119 + backs: null, // 后退按钮组
  120 + opacity: 0, // 后退按钮背景色透明度
  121 + swipers: null, // 轮播图
  122 + tabs: null, // tabs内容
  123 + activeTabIndex: -1, // 活动tab索引
  124 + swiperExce: { // swiper元素高度，最小高度
  125 + offsetHeight: 0
  126 + },
  127 + swiperTouchable: { // 是否可以通过手势滑动
  128 + value: true
  129 + },
  130 + briefs: null, // 领头雁简介
  131 + boutiques: { // 精品推荐
  132 + list: []
  133 + },
  134 + shopId: null, // 店铺id
  135 + commoditys: { // 全部推荐
  136 + list: []
  137 + },
  138 + paging: { // 分页
  139 + boutique: {
  140 + loading: true,
  141 + page: 1
  142 + },
  143 + commodity: {
  144 + loading: true,
  145 + page: 1
  146 + },
  147 + distance: 50
  148 + }
  149 + }
  150 + },
  151 + components: {
  152 + Swipe,
  153 + SwipeItem,
  154 + callAppBox,
  155 + swiperBox,
  156 + backBox,
  157 + htmlBox,
  158 + imgListBox,
  159 + columnCommodityListBox
  160 + },
  161 + created() {
  162 +
  163 + // 设置后退按钮组
  164 + this.$set(this, "backs", {
  165 + title: ""
  166 + });
  167 +
  168 + // 判断是否在App内
  169 + if (this.isCNLive.value) {
  170 +
  171 + // 添加后退按钮组“后退”和“分享”按钮
  172 + Object.assign(this.backs, {
  173 + funcs: {
  174 + back: {
  175 + icon: "static/img/icon_back_white.png"
  176 + },
  177 + funcArray: [
  178 + {
  179 + icon: "static/img/icon_share_white.png",
  180 + func: this.toShare
  181 + }
  182 + ]
  183 + }
  184 + });
  185 + }
  186 +
  187 + // tabs
  188 + this.$set(this, "tabs", [
  189 + {
  190 + title: "领头雁简介",
  191 + active: false,
  192 + class: "bg-white"
  193 + },
  194 + {
  195 + title: "精品推荐",
  196 + active: false,
  197 + class: "bg-excessive-color"
  198 + },
  199 + {
  200 + title: "全部商品",
  201 + active: false,
  202 + class: "bg-white"
  203 + }
  204 + ]);
  205 +
  206 + // 判断商品列表是否可以滑动
  207 + if (this.$route.query.swiperTouchable) {
  208 + if (typeof this.$route.query.swiperTouchable === "string" && this.$route.query.swiperTouchable === "false") {
  209 + this.$set(this.swiperTouchable, "value", false);
  210 + }
  211 + }
  212 +
  213 + // 领头雁电商活动
  214 + this.activityAdsShop();
  215 +
  216 + // 获取领头雁电商精品推荐
  217 + this.getActivityAdsGoods(this.paging.boutique.page);
  218 + },
  219 + methods: {
  220 +
  221 + /**
  222 + * 上拉加载“精品推荐”
  223 + */
  224 + loadBoutique() {
  225 +
  226 + // 判断是“精品推荐”页才加载
  227 + if (this.activeTabIndex === 1) {
  228 +
  229 + // 设置“精品推荐”页码
  230 + this.$set(this.paging.boutique, "page", ++this.paging.boutique.page);
  231 +
  232 + // 调用接口
  233 + this.getActivityAdsGoods(this.paging.boutique.page);
  234 + }
  235 + },
  236 +
  237 + /**
  238 + * 上拉加载“商品推荐”
  239 + */
  240 + loadCommodity() {
  241 +
  242 + // 判断是“精品推荐”页才加载
  243 + if (this.activeTabIndex === 2 && this.shopId) {
  244 +
  245 + // 设置“精品推荐”页码
  246 + this.$set(this.paging.commodity, "page", ++this.paging.commodity.page);
  247 +
  248 + // 调用接口
  249 + this.shopRecommendGoods(this.paging.commodity.page);
  250 + }
  251 + },
  252 +
  253 + /**
  254 + * 领头雁电商活动
  255 + */
  256 + activityAdsShop() {
  257 +
  258 + // 判断必要参数
  259 + if (this.$route.query.id) {
  260 +
  261 + // 加载中提示
  262 + Indicator.open('加载中...');
  263 +
  264 + // 请求接口
  265 + this.http("/Api/" + (this.getApiVersion().LeadGoose) + "/activityAdsShop", {
  266 + id: this.$route.query.id
  267 + }, this.activityAdsShopCallback, {
  268 + method: "POST"
  269 + });
  270 + }
  271 + },
  272 +
  273 + /**
  274 + * 领头雁电商活动回调
  275 + * @param {object} res [服务器返回数据]
  276 + * @param {object} ext [扩展参数]
  277 + */
  278 + activityAdsShopCallback(res, ext) {
  279 +
  280 + // 加载完成
  281 + Indicator.close();
  282 +
  283 + // 返回处理
  284 + if (res.code == 200) {
  285 + // 解构数据
  286 + let {data: datas} = res;
  287 +
  288 + /* 设置活动数据 开始 */
  289 +
  290 + // 设置标题
  291 + this.$set(this, "title", datas.title);
  292 +
  293 + // 设置后退按钮组标题
  294 + this.$set(this.backs, "title", datas.title);
  295 +
  296 + // 设置banner
  297 + if (datas.banner) {
  298 + this.$set(this, "swipers", datas.banner);
  299 + }
  300 + // 设置领头雁简介
  301 + this.$set(this, "briefs", datas.content);
  302 +
  303 + // 设置活动店铺shop_id，用于店铺推荐商品使用
  304 + if (datas.shop_id) {
  305 +
  306 + // 设置活动店铺shop_id
  307 + this.$set(this, "shopId", datas.shop_id);
  308 +
  309 + // 店铺商品推荐
  310 + this.shopRecommendGoods(this.paging.commodity.page);
  311 + }
  312 +
  313 + /* 设置活动数据 结束 */
  314 +
  315 + } else if (res.code == 400) {
  316 +
  317 + // 获取活动失败
  318 + Toast(res.message);
  319 + } else {
  320 +
  321 + // 获取活动失败
  322 + Toast("获取活动失败");
  323 + }
  324 + },
  325 +
  326 + /**
  327 + * 获取领头雁电商精品推荐
  328 + * @param {int} page [页码]
  329 + */
  330 + getActivityAdsGoods(page) {
  331 +
  332 + // 判断必要参数
  333 + if (this.$route.query.id) {
  334 +
  335 + // 加载中
  336 + this.$set(this.paging.boutique, "loading", true);
  337 +
  338 + // 加载中提示
  339 + Indicator.open('加载中...');
  340 +
  341 + // 请求接口
  342 + this.http("/Api/" + (this.getApiVersion().LeadGoose) + "/getActivityAdsGoods", {
  343 + id: this.$route.query.id,
  344 + page: page
  345 + }, this.getActivityAdsGoodsCallback, {
  346 + method: "POST"
  347 + });
  348 + }
  349 + },
  350 +
  351 + /**
  352 + * 获取领头雁电商精品推荐回调
  353 + * @param {object} res [服务器返回数据]
  354 + * @param {object} ext [扩展参数]
  355 + */
  356 + getActivityAdsGoodsCallback(res, ext) {
  357 +
  358 + // 加载完成
  359 + Indicator.close();
  360 +
  361 + // 返回处理
  362 + if (res.code == 200) {
  363 +
  364 + // 解构数据
  365 + let {data: datas} = res;
  366 +
  367 + /* 设置精品推荐数据 开始 */
  368 +
  369 + // 判断是否有数据
  370 + if (datas.list && datas.list.length) {
  371 +
  372 + // 追加列表
  373 + this.$set(this.boutiques, "list", [...this.boutiques.list, ...datas.list]);
  374 +
  375 + // 设置还有需要加载的内容
  376 + this.$set(this.paging.boutique, "loading", false);
  377 +
  378 + // 如果当前显示“精品推荐”，设置swiper高度
  379 + if (this.activeTabIndex === 1) {
  380 +
  381 + this.$nextTick(() => {
  382 +
  383 + setTimeout(() => {
  384 +
  385 + // 重新设置swiper高度
  386 + this.$set(this.swiperExce, "offsetHeight", this.$refs.boutique.offsetHeight);
  387 + }, 500);
  388 + });
  389 + }
  390 + } else {
  391 +
  392 + // 没有需要加载的内容，停止上拉加载
  393 + this.$set(this.paging.boutique, "loading", true);
  394 + }
  395 +
  396 + /* 设置精品推荐数据 结束 */
  397 +
  398 + } else if (res.code == 400) {
  399 +
  400 + // 获取精品推荐失败
  401 + Toast(res.message);
  402 + } else {
  403 +
  404 + // 获取精品推荐失败
  405 + Toast("获取精品推荐失败");
  406 + }
  407 + },
  408 +
  409 + /**
  410 + * 店铺商品推荐
  411 + * @param {int} page [页码]
  412 + */
  413 + shopRecommendGoods(page) {
  414 +
  415 + // 判断必要参数
  416 + if (this.shopId) {
  417 +
  418 + // 加载中
  419 + this.$set(this.paging.commodity, "loading", true);
  420 +
  421 + // 加载中提示
  422 + Indicator.open('加载中...');
  423 +
  424 + // 请求接口
  425 + this.http("/Api/" + (this.getApiVersion().index) + "/shopRecommendGoods", {
  426 + shop_id: this.shopId,
  427 + page: page
  428 + }, this.shopRecommendGoodsCallback, {
  429 + method: "POST"
  430 + });
  431 + }
  432 + },
  433 +
  434 + /**
  435 + * 店铺商品推荐回调
  436 + * @param {object} res [服务器返回数据]
  437 + * @param {object} ext [扩展参数]
  438 + */
  439 + shopRecommendGoodsCallback(res, ext) {
  440 +
  441 + // 加载完成
  442 + Indicator.close();
  443 +
  444 + // 返回处理
  445 + if (res.code == 200) {
  446 +
  447 + // 解构数据
  448 + let {data: datas} = res;
  449 +
  450 + /* 设置商品推荐数据 开始 */
  451 +
  452 + // 判断是否有数据
  453 + if (datas.list && datas.list.length) {
  454 +
  455 + // 追加列表
  456 + this.$set(this.commoditys, "list", [...this.commoditys.list, ...datas.list]);
  457 +
  458 + // 设置还有需要加载的内容
  459 + this.$set(this.paging.commodity, "loading", false);
  460 +
  461 + // 如果当前显示“全部商品”，设置swiper高度
  462 + if (this.activeTabIndex === 2) {
  463 +
  464 + this.$nextTick(() => {
  465 +
  466 + setTimeout(() => {
  467 +
  468 + // 重新设置swiper高度
  469 + this.$set(this.swiperExce, "offsetHeight", this.$refs.commodity.offsetHeight);
  470 + }, 500);
  471 + });
  472 + }
  473 + } else {
  474 +
  475 + // 没有需要加载的内容，停止上拉加载
  476 + this.$set(this.paging.commodity, "loading", true);
  477 + }
  478 +
  479 + /* 设置商品推荐数据 结束 */
  480 +
  481 + } else if (res.code == 400) {
  482 +
  483 + // 获取商品推荐失败
  484 + Toast(res.message);
  485 + } else {
  486 +
  487 + // 获取商品推荐失败
  488 + Toast("获取商品推荐失败");
  489 + }
  490 + },
  491 +
  492 + /**
  493 + * 调用通用跳转
  494 + * @param {object} item [通用跳转对象]
  495 + */
  496 + toDetail(item) {
  497 +
  498 + // 判断是否有通用跳转函数
  499 + if (typeof this.$parent.gotoDetail === "function") {
  500 +
  501 + // 调用通用跳转
  502 + this.$parent.gotoDetail(item);
  503 + }
  504 + },
  505 +
  506 + /**
  507 + * 特定跳转商品详情
  508 + * @param {object} item [跳转对象]
  509 + */
  510 + toCommodityDetail(item) {
  511 +
  512 + // 设置跳转参数
  513 + Object.assign(item, {
  514 + type: "2",
  515 + to: item.id
  516 + });
  517 +
  518 + // 调用通用跳转
  519 + this.toDetail(item);
  520 + },
  521 +
  522 + /**
  523 + * 切换tab
  524 + * @param {object} item [当前备切换的标签对象]
  525 + */
  526 + changeTab(item) {
  527 +
  528 + // 判断点击的是非当前活动项目
  529 + if (!item.active) {
  530 +
  531 + // 清理所有活动状态
  532 + for (let i = 0; i < this.tabs.length; i++) {
  533 + this.$set(this.tabs[i], "active", false);
  534 + }
  535 +
  536 + // 设置新的活动项目
  537 + this.$set(item, "active", true);
  538 +
  539 + // 设置新的活动索引
  540 + for (let i = 0; i < this.tabs.length; i++) {
  541 + if (item.title === this.tabs[i].title) {
  542 + this.$set(this, "activeTabIndex", i);
  543 + break;
  544 + }
  545 + }
  546 +
  547 + // 判断是否需要执行切换
  548 + if (this.$refs.swiperBox.active !== this.activeTabIndex) {
  549 +
  550 + // 切换到对应swiper
  551 + this.$refs.swiperBox.swipeTo(this.activeTabIndex);
  552 +
  553 + // 设置swiper高度
  554 + this.setSwiperHeight();
  555 + }
  556 + }
  557 + },
  558 +
  559 + /**
  560 + * swiper滑动改变
  561 + * @param {int} index [swiper索引]
  562 + */
  563 + swiperChange(index) {
  564 +
  565 + // 如果当前tabs不一致，并且不是在切换中，设置tabs联动
  566 + if (index !== this.activeTabIndex) {
  567 +
  568 + // 清理所有活动状态
  569 + for (let i = 0; i < this.tabs.length; i++) {
  570 + this.$set(this.tabs[i], "active", false);
  571 + }
  572 +
  573 + // 设置新的活动项目
  574 + this.$set(this.tabs[index], "active", true);
  575 +
  576 + // 设置新的活动索引
  577 + this.$set(this, "activeTabIndex", index);
  578 +
  579 + // 设置swiper高度
  580 + this.setSwiperHeight();
  581 + }
  582 + },
  583 +
  584 + /**
  585 + * 设置swiper高度
  586 + */
  587 + setSwiperHeight() {
  588 +
  589 + this.$nextTick(() => {
  590 +
  591 + // 设置swiper高度
  592 + switch (this.activeTabIndex) {
  593 + case 0:
  594 + this.$set(this.swiperExce, "offsetHeight", this.$refs.brief.offsetHeight);
  595 + break;
  596 + case 1:
  597 + this.$set(this.swiperExce, "offsetHeight", this.$refs.boutique.offsetHeight);
  598 + break;
  599 + case 2:
  600 + this.$set(this.swiperExce, "offsetHeight", this.$refs.commodity.offsetHeight);
  601 + break;
  602 + }
  603 + });
  604 + },
  605 +
  606 + /**
  607 + * 后退
  608 + */
  609 + back() {
  610 +
  611 + // 判断后退
  612 + if (typeof this.$parent.back === "function") {
  613 + this.$parent.back();
  614 + } else {
  615 + window.history.go(-1);
  616 + }
  617 + },
  618 +
  619 + /**
  620 + * 分享
  621 + */
  622 + toShare() {
  623 +
  624 + // 判断分享
  625 + if (typeof this.$parent.toShare === "function") {
  626 + this.$parent.toShare(37, this.$route.query.id || 0);
  627 + }
  628 + },
  629 +
  630 + /**
  631 + * 滚动条滚动/touchmove监听处理
  632 + * @param {object} e [滚动条对象]
  633 + * @param {boolean} isTimeout [是否为setTimeout方法调用]
  634 + */
  635 + onPageScrollFun(e, isTimeout = false) {
  636 +
  637 + // 获取滚动条位置，浏览器兼容处理
  638 + let scrollTop = (document.documentElement.scrollTop || document.body.scrollTop) || 0;
  639 +
  640 + // 滚动控制高度
  641 + let maxHeight = 200;
  642 +
  643 + // 动态获取百分比分配比例
  644 + if (typeof this.$refs === "object" && typeof this.$refs.navBox === "object" && typeof this.$refs.navBox.clientHeight === "number") {
  645 + maxHeight = (this.$refs.navBox.clientHeight + this.$parent.top.value) * 2;
  646 + }
  647 +
  648 + if (scrollTop >= 0 && scrollTop <= maxHeight) {
  649 + this.opacity = scrollTop / maxHeight;
  650 + } else if (scrollTop > maxHeight) {
  651 + this.opacity = 1;
  652 + } else {
  653 + this.opacity = 0;
  654 + }
  655 +
  656 + if (!isTimeout) {
  657 +
  658 + if (this.timer) {
  659 + clearTimeout(this.timer);
  660 + }
  661 +
  662 + // 倒计时校正滚动条位置
  663 + this.timer = setTimeout(function(options) {
  664 +
  665 + // 递归
  666 + options.context.onPageScrollFun(options.e, true);
  667 + }, 1000, {e, context: this});
  668 + }
  669 + }
  670 + },
  671 + head: {
  672 + title () {
  673 + return {
  674 + inner: this.title
  675 + }
  676 + }
  677 + },
  678 + watch: {
  679 +
  680 + // 设置页面标题
  681 + title(newVal) {
  682 + if (this.$store.state.browser.toLowerCase() == "qq" && this.$store.state.deviceType.toLowerCase() == "iphone") {
  683 + this.$iFrame.insertIFrame(newVal);
  684 + } else {
  685 + this.$emit("updateHead");
  686 + }
  687 + }
  688 + },
  689 + mounted() {
  690 +
  691 + // 监听滚动条，设置滚动条推动渐变颜色和图片
  692 + window.addEventListener("scroll", this.onPageScrollFun, true);
  693 +
  694 + // 获取并设置分享参数
  695 +
  696 + // 唤起详情页
  697 + if (typeof this.$parent.getOpenApp === "function") {
  698 + this.$parent.getOpenApp({
  699 + type: 37,
  700 + id: this.$route.query.id || 0,
  701 + url: ""
  702 + });
  703 + }
  704 +
  705 + // 分享详情页
  706 + if (typeof this.$parent.getShareData === "function") {
  707 + this.$parent.getShareData({
  708 + type: 37,
  709 + id: this.$route.query.id || 0,
  710 + url: ""
  711 + });
  712 + }
  713 +
  714 + // 设置初始化tab
  715 + this.$nextTick(() => {
  716 +
  717 + // 设置初始化tab
  718 + this.changeTab(this.tabs[2]);
  719 + });
  720 + }
  721 + }
  722 +</script>
  723 +
  724 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  725 +<style rel="stylesheet/less" lang='less' scoped>
  726 + @import "GuanAIHouse";
  727 +</style>
src/pages/mall/mall.vue
  View file @753b7d3
@@ -20,6 +20,7 @@ @@ -20,6 +20,7 @@
20 20
21 <!-- 遍历ads，输出列表数据 --> 21 <!-- 遍历ads，输出列表数据 -->
22 <div class="ads-box"> 22 <div class="ads-box">
  23 + <tabBox v-if="tabbar" :tabbar="tabbar"></tabBox>
23 <div class="ads" v-for="(item, index) in ads" :key="index"> 24 <div class="ads" v-for="(item, index) in ads" :key="index">
24 25
25 <!--优惠专区--> 26 <!--优惠专区-->
@@ -58,7 +59,7 @@ @@ -58,7 +59,7 @@
58 import videoArea from "@/components/videoArea/videoArea"; 59 import videoArea from "@/components/videoArea/videoArea";
59 import style7 from "@/components/style_7/style_7"; 60 import style7 from "@/components/style_7/style_7";
60 import horizList from "@/components/horizList/horizList"; 61 import horizList from "@/components/horizList/horizList";
61 - 62 + import tabBox from "@/components/tabBox/tabBox";
62 export default { 63 export default {
63 name: 'mall', 64 name: 'mall',
64 data() { 65 data() {
@@ -67,7 +68,8 @@ @@ -67,7 +68,8 @@
67 isLoading: false, // 下拉刷新控制 68 isLoading: false, // 下拉刷新控制
68 banner:null, // banner 69 banner:null, // banner
69 navs: null, // 导航 70 navs: null, // 导航
70 - ads: null // 列表 71 + ads: null, // 列表
  72 + tabbar:null // tabbar嵌套组件
71 } 73 }
72 }, 74 },
73 components:{ 75 components:{
@@ -77,7 +79,8 @@ @@ -77,7 +79,8 @@
77 preferential, 79 preferential,
78 videoArea, 80 videoArea,
79 style7, 81 style7,
80 - horizList 82 + horizList,
  83 + tabBox
81 }, 84 },
82 created() { 85 created() {
83 86
@@ -150,7 +153,10 @@ @@ -150,7 +153,10 @@
150 if (datas.ads && datas.ads.length) { 153 if (datas.ads && datas.ads.length) {
151 this.$set(this, "ads", datas.ads); 154 this.$set(this, "ads", datas.ads);
152 } 155 }
153 - 156 + // 设置tabbar数据
  157 + if (datas.tabbar && datas.tabbar.length) {
  158 + this.$set(this, "tabbar", datas.tabbar);
  159 + }
154 /* 获取优选库精选活动数据 结束 */ 160 /* 获取优选库精选活动数据 结束 */
155 161
156 } else if (res.code == 400) { 162 } else if (res.code == 400) {
src/router/index.js
  View file @753b7d3
@@ -81,6 +81,17 @@ const router = new Router({ @@ -81,6 +81,17 @@ const router = new Router({
81 meta: { 81 meta: {
82 requireAuth: false 82 requireAuth: false
83 } 83 }
  84 + },
  85 + {
  86 + // 优选库关爱屋
  87 + path: "/GuanAIHouse",
  88 + name: "GuanAIHouse",
  89 + component: resolve => {
  90 + require(["@/pages/GuanAIHouse/GuanAIHouse"], resolve);
  91 + },
  92 + meta: {
  93 + requireAuth: false
  94 + }
84 } 95 }
85 ] 96 ]
86 }, 97 },
static/img/icon_back_white.png 0 → 100644
View file @753b7d3

288 Bytes
static/img/icon_share_white.png 0 → 100644
View file @753b7d3

657 Bytes