w-front-end / select_good · Commits

Commit f95ff15f1c47c626d0388a0c7ad2a54e969b415c

Authored by 王强
1 parent fe7b41f8

优选库——优选——折扣专区列表页页面完成~

Inline Side-by-side
Showing 8 changed files with 996 additions and 5 deletions
src/components/countDownCom/countDownCom.less
  View file @f95ff15
@@ -83,5 +83,22 @@ @@ -83,5 +83,22 @@
83 } 83 }
84 } 84 }
85 } 85 }
  86 + &.style-5 {
  87 + .container {
  88 + .block {
  89 + background-color: #481814;
  90 + width: 36px;
  91 + height: 36px;
  92 + color: #FFFFFF;
  93 + font-size: 20px;
  94 + font-weight: 400;
  95 + }
  96 + .colon {
  97 + color: #633531;
  98 + font-size: 24px;
  99 + font-weight: 300;
  100 + }
  101 + }
  102 + }
86 } 103 }
87 } 104 }
88 \ No newline at end of file 105 \ No newline at end of file
src/components/countDownCom/countDownCom.vue
  View file @f95ff15
@@ -8,13 +8,13 @@ @@ -8,13 +8,13 @@
8 </div> 8 </div>
9 <div class="container"> 9 <div class="container">
10 <span class="block">{{ timeData.hours }}</span> 10 <span class="block">{{ timeData.hours }}</span>
11 - <span class="colon" v-if="sty == '2'">时</span> 11 + <span class="colon" v-if="sty == '2' || sty == '5'">时</span>
12 <span class="colon" v-else>:</span> 12 <span class="colon" v-else>:</span>
13 <span class="block">{{ timeData.minutes }}</span> 13 <span class="block">{{ timeData.minutes }}</span>
14 - <span class="colon" v-if="sty == '2'">分</span> 14 + <span class="colon" v-if="sty == '2' || sty == '5'">分</span>
15 <span class="colon" v-else>:</span> 15 <span class="colon" v-else>:</span>
16 <span class="block">{{ timeData.seconds }}</span> 16 <span class="block">{{ timeData.seconds }}</span>
17 - <span class="colon" v-if="sty == '2'">秒</span> 17 + <span class="colon" v-if="sty == '2' || sty == '5'">秒</span>
18 </div> 18 </div>
19 </template> 19 </template>
20 </van-count-down> 20 </van-count-down>
src/components/goodsItem_2/goodsItem_2.vue
  View file @f95ff15
@@ -11,7 +11,7 @@ @@ -11,7 +11,7 @@
11 <div class="price-box" v-if="pid != '5'"> 11 <div class="price-box" v-if="pid != '5'">
12 <div class="symbol">¥&nbsp;</div> 12 <div class="symbol">¥&nbsp;</div>
13 <div class="price">{{item.price}}</div> 13 <div class="price">{{item.price}}</div>
14 - <div class="prices" v-if="(pid == '3' || pid == '4') && item.prices && parseFloat(item.prices) > 0 ">¥{{item.prices}}</div> 14 + <div class="prices" v-if="(pid == '3' || pid == '4') && item.prices && parseFloat(item.prices) > 0 && parseFloat(item.prices) > parseFloat(item.price)">¥{{item.prices}}</div>
15 </div> 15 </div>
16 <div class="ads" v-if="pid == '2'"> 16 <div class="ads" v-if="pid == '2'">
17 {{item.title || ""}} 17 {{item.title || ""}}
src/components/goodsItem_8/goodsItem_8.less 0 → 100644
  View file @f95ff15
  1 +@charset "UTF-8";
  2 +
  3 +.goods-item-8-box {
  4 + background-color: transparent;
  5 + width: 100%;
  6 + height: auto;
  7 + .main-box {
  8 + display: flex;
  9 + justify-content: space-between;
  10 + margin: 0 auto;
  11 + padding: 30px 0;
  12 + width: 90%;
  13 + height: auto;
  14 + .img-box {
  15 + position: relative;
  16 + display: flex;
  17 + justify-content: center;
  18 + align-items: center;
  19 + background-color: transparent;
  20 + // margin: 0 auto;
  21 + width: 210px;
  22 + height: 210px;
  23 + border-radius: 12px;
  24 + overflow: hidden;
  25 + .simg {
  26 + display: block;
  27 + width: 210px;
  28 + height: 210px;
  29 + }
  30 + }
  31 + .content-box {
  32 + display: flex;
  33 + flex-direction: column;
  34 + justify-content: space-between;
  35 + align-items: center;
  36 + width: 63%;
  37 + height: auto;
  38 + .top-box {
  39 + width: 100%;
  40 + .title {
  41 + display: -webkit-box;
  42 + width: 100%;
  43 + color: #333333;
  44 + font-size: 28px;
  45 + font-weight: 600;
  46 + -webkit-line-clamp: 2;
  47 + /*! autoprefixer: off */
  48 + -webkit-box-orient: vertical;
  49 + /*! autoprefixer: on */
  50 + text-overflow: ellipsis;
  51 + overflow: hidden;
  52 + & + .sub-title {
  53 + margin-top: 10px;
  54 + }
  55 + }
  56 + .sub-title {
  57 + color: #9B9B9B;
  58 + font-size: 24px;
  59 + font-weight: 400;
  60 + white-space: nowrap;
  61 + text-overflow: ellipsis;
  62 + overflow: hidden;
  63 + }
  64 + }
  65 + .bottom-box {
  66 + display: flex;
  67 + justify-content: space-between;
  68 + align-items: baseline;
  69 + width: 100%;
  70 + .price-box {
  71 + display: flex;
  72 + justify-content: flex-start;
  73 + align-items: baseline;
  74 + // margin-top: 20px;
  75 + .symbol {
  76 + color: #FC1541;
  77 + font-size: 26px;
  78 + }
  79 + .integer {
  80 + color: #FC1541;
  81 + font-size: 34px;
  82 + }
  83 + .decimal {
  84 + color: #FC1541;
  85 + font-size: 26px;
  86 + }
  87 + .prices {
  88 + margin-left: 10px;
  89 + color: #A5A5A5;
  90 + font-size: 24px;
  91 + font-weight: 300;
  92 + text-decoration: line-through;
  93 + }
  94 + }
  95 + .icon-box {
  96 + width: 54px;
  97 + height: 54px;
  98 + .icon-img {
  99 + display: block;
  100 + width: 54px;
  101 + height: 54px;
  102 + }
  103 + }
  104 + }
  105 + }
  106 + }
  107 + &.style-2 {
  108 + .main-box {
  109 + .content-box {
  110 + .top-box {
  111 + .sub-title {
  112 + display: inline-block;
  113 + background-color:rgba(245, 166, 35, 0.08);
  114 + padding: 2px 16px;
  115 + color: #F5A623;
  116 + border-radius: 18px;
  117 + }
  118 + }
  119 + }
  120 + }
  121 + }
  122 +}
src/components/goodsItem_8/goodsItem_8.vue 0 → 100644
  View file @f95ff15
  1 +<template>
  2 + <div class="goods-item-8-box" :class="'style-' + sty" v-if="item" @click="jump(item)">
  3 + <div class="main-box">
  4 + <div class="img-box">
  5 + <img v-lazy="item.simg + SIGN.SMALL" class="simg" />
  6 + <slot name="flag"></slot>
  7 + </div>
  8 + <div class="content-box">
  9 + <div class="top-box">
  10 + <div class="title">{{item.title}}</div>
  11 + <div class="sub-title">{{item.ads}}</div>
  12 + </div>
  13 + <div class="bottom-box">
  14 + <div class="price-box">
  15 + <div class="symbol">¥&nbsp;</div>
  16 + <div class="integer">{{item.price}}</div>
  17 + <div class="decimal"></div>
  18 + <div class="prices" v-if="sty && item.prices && parseFloat(item.prices) > 0 && parseFloat(item.prices) > parseFloat(item.price)">¥{{item.prices}}</div>
  19 + </div>
  20 + <div class="icon-box">
  21 + <img src="static/img/icon_list_arrow_right.png" class="icon-img" v-if="sty == 2" />
  22 + <img src="static/img/icon_shopping_cart_active.png" class="icon-img" v-else />
  23 + </div>
  24 + </div>
  25 + </div>
  26 + </div>
  27 + </div>
  28 +</template>
  29 +
  30 +<script>
  31 + export default {
  32 + data: function () {
  33 + return {
  34 +
  35 + }
  36 + },
  37 + props: ["item", "sty"],
  38 + computed: {
  39 +
  40 + /**
  41 + * 获取输入数字的整数部分
  42 + */
  43 + getInteger() {
  44 + return (number) => {
  45 + return parseInt(number);
  46 + }
  47 + },
  48 +
  49 + /**
  50 + * 获取输入数字的小数部分
  51 + */
  52 + getDecimal() {
  53 + return (number) => {
  54 +
  55 + // 拆分数字
  56 + let numberArr = number.toString().split(".");
  57 +
  58 + // 判断是否有效数部分
  59 + if (numberArr.length === 2) {
  60 + return numberArr[1];
  61 + } else {
  62 + return "00";
  63 + }
  64 + }
  65 + }
  66 + },
  67 + methods: {
  68 +
  69 + /**
  70 + * 点击跳转
  71 + * @param {object} item [数据对象]
  72 + */
  73 + jump(item) {
  74 + this.$emit("jump", item);
  75 + },
  76 +
  77 + /**
  78 + * 主按钮点击事件
  79 + * @param {object} item [数据对象]
  80 + */
  81 + primary(item) {
  82 + this.$emit("primary", item);
  83 + }
  84 + }
  85 + }
  86 +</script>
  87 +
  88 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  89 +<style rel="stylesheet/less" lang="less" scoped>
  90 + @import './goodsItem_8';
  91 +</style>
src/pages/discountList/discountList.less 0 → 100644
  View file @f95ff15
  1 +@charset "UTF-8";
  2 +
  3 +.discount-list-page {
  4 + background-color: #FFF6E5;
  5 + min-height: 100vh;
  6 + .call-app-box {
  7 + position: fixed;
  8 + top: 0;
  9 + z-index: 100;
  10 + }
  11 + .back-box {
  12 + position: fixed;
  13 + top: 0;
  14 + z-index: 100;
  15 + background-color: #ffffff;
  16 + }
  17 + .pl {
  18 + background-color: transparent;
  19 + width: 100%;
  20 + &.is-open-app {
  21 + height: 122px;
  22 + }
  23 + &.is-cnlive {
  24 + height: 93px;
  25 + }
  26 + }
  27 + .main-box {
  28 + .header-box {
  29 + width: 100%;
  30 + height: auto;
  31 + .header-img {
  32 + display: block;
  33 + width: 100%;
  34 + height: auto;
  35 + }
  36 + }
  37 + .count-down-box {
  38 + display: flex;
  39 + justify-content: flex-start;
  40 + align-items: center;
  41 + margin: 0 auto;
  42 + width: 630px;
  43 + height: auto;
  44 + .text {
  45 + color: #633531;
  46 + font-size: 24px;
  47 + font-weight: 400;
  48 + }
  49 + }
  50 + .section {
  51 + background-color: #ffffff;
  52 + margin: 40px auto;
  53 + width: 690px;
  54 + height: auto;
  55 + border-radius: 24px;
  56 + overflow: hidden;
  57 + &:last-child {
  58 + margin-bottom: 0;
  59 + }
  60 + &.goods-list {
  61 + /deep/ .goods-item-8-box {
  62 + .main-box {
  63 + border-bottom: 1px solid #EAEAEA;
  64 + }
  65 + }
  66 + /deep/ .goods-item-8-box:last-child {
  67 + .main-box {
  68 + border-bottom: none;
  69 + }
  70 + }
  71 + .discount-flag {
  72 + position: absolute;
  73 + top: 10px;
  74 + left: 10px;
  75 + z-index: 1;
  76 + background: linear-gradient(90deg, #F9EE7A 0%, #FAD844 100%);
  77 + padding: 1px 8px;
  78 + color: #945A08;
  79 + font-size: 20px;
  80 + font-weight: 400;
  81 + border-radius: 6px;
  82 + }
  83 + }
  84 + }
  85 + .bottom-pl {
  86 + background-color: transparent;
  87 + width: 100%;
  88 + height: 100px;
  89 + }
  90 + .tips-box {
  91 + position: fixed;
  92 + bottom: 0;
  93 + z-index: 1;
  94 + background-color: #FFF6E5;
  95 + padding: 30px 0;
  96 + width: 100%;
  97 + height: auto;
  98 + .tips {
  99 + display: flex;
  100 + justify-content: flex-start;
  101 + align-items: center;
  102 + margin: 0 auto;
  103 + width: 690px;
  104 + height: 100%;
  105 + .tips-img {
  106 + display: block;
  107 + width: 26px;
  108 + height: 26px;
  109 + & + .text {
  110 + margin-left: 14px;
  111 + }
  112 + }
  113 + .text {
  114 + color: #FEA835;
  115 + font-size: 24px;
  116 + font-weight: 400;
  117 + }
  118 + }
  119 + }
  120 + }
  121 +}
0 \ No newline at end of file 122 \ No newline at end of file
src/pages/discountList/discountList.vue 0 → 100644
  View file @f95ff15
  1 +<template>
  2 + <div class="discount-list-page">
  3 +
  4 + <!-- H5唤起App组件 -->
  5 + <call-app-box class="call-app-box" ref="callApp" v-if="!isCNLive.value"
  6 + :callApps="$parent.callApps">
  7 + </call-app-box>
  8 +
  9 + <!-- 后退导航 -->
  10 + <back-box class="back-box" :style="'padding-top: ' + $parent.top.value + 'px'" v-if="isCNLive.value" @back="back"
  11 + :backs="backs">
  12 + </back-box>
  13 +
  14 + <!-- pl -->
  15 + <div class="pl" :class="{'is-cnlive': isCNLive.value, 'is-open-app': $parent.isOpenApp.value}"></div>
  16 +
  17 + <!-- 主区域 -->
  18 + <div class="main-box">
  19 +
  20 + <!-- 头图 -->
  21 + <div class="header-box">
  22 + <img src="static/img/header_discount_list.jpg" class="header-img" />
  23 + </div>
  24 +
  25 + <!-- 倒计时 -->
  26 + <div class="count-down-box">
  27 + <div class="text">
  28 + 距离活动结束仅剩
  29 + </div>
  30 +
  31 + <!-- 倒计时组件 -->
  32 + <count-down-com slot="extend"
  33 + :time="new Date().getTime() + 10000000 - new Date().getTime()"
  34 + sty="5">
  35 + </count-down-com>
  36 + </div>
  37 +
  38 + <!-- 商品列表 -->
  39 + <div class="section goods-list">
  40 +
  41 + <!-- 商品列表 -->
  42 + <goods-item-8 v-for="(item, index) in goodsLists" :key="index"
  43 + :item="item"
  44 + sty="1">
  45 +
  46 + <!-- 折扣角标 -->
  47 + <div class="discount-flag" slot="flag">
  48 + 5折
  49 + </div>
  50 + </goods-item-8>
  51 + </div>
  52 +
  53 + <div class="bottom-pl"></div>
  54 +
  55 + <!-- 活动规则提示 -->
  56 + <div class="tips-box">
  57 + <div class="tips">
  58 + <img src="static/img/icon_tips.png" class="tips-img" />
  59 + <div class="text">本次活动每个商品每个用户限购一件</div>
  60 + </div>
  61 + </div>
  62 + </div>
  63 +
  64 + <!-- 回到顶部按钮 -->
  65 + <goto-top
  66 + :top="parseInt(150)">
  67 + </goto-top>
  68 + </div>
  69 +</template>
  70 +
  71 +<script>
  72 +
  73 + // 引入组件
  74 + import { Toast, Indicator } from "mint-ui";
  75 + import callAppBox from "@/components/callAppBox/callAppBox";
  76 + import backBox from "@/components/backBox/backBox";
  77 + import countDownCom from "@/components/countDownCom/countDownCom";
  78 + import goodsItem8 from "@/components/goodsItem_8/goodsItem_8";
  79 + import gotoTop from "@/components/gotoTop/gotoTop";
  80 +
  81 + export default {
  82 + name: 'optimization',
  83 + data () {
  84 + return {
  85 + title: "", // 标题
  86 + backs: null, // 后退按钮组
  87 + goodsLists: null, // 商品列表
  88 +
  89 + }
  90 + },
  91 + components: {
  92 + callAppBox,
  93 + backBox,
  94 + countDownCom,
  95 + goodsItem8,
  96 + gotoTop
  97 + },
  98 + created() {
  99 +
  100 + // 设置标题
  101 + this.$set(this, "title", "折扣专区");
  102 +
  103 + // 判断是否在App内
  104 + if (this.isCNLive.value) {
  105 +
  106 + // 添加后退按钮组“后退”和“分享”按钮
  107 + this.$set(this, 'backs', {
  108 + funcs: {
  109 + back: {
  110 + icon: "static/img/icon_back.png"
  111 + },
  112 + funcArray: [
  113 + {
  114 + icon: "static/img/icon_share.png",
  115 + func: this.toShare
  116 + }
  117 + ]
  118 + }
  119 + });
  120 +
  121 + // 设置标题
  122 + this.$set(this.backs, 'title', '折扣专区');
  123 + }
  124 +
  125 +
  126 +
  127 + // 优选页面接口
  128 + // this.fansShopMessageList();
  129 +
  130 +
  131 + // 临时，初始化列表数据
  132 + this.$set(this, 'goodsLists', [
  133 + {
  134 + ads: "专区特供超值商品",
  135 + id: "9524815",
  136 + price: "50.00",
  137 + prices: "300.00",
  138 + shop: {
  139 + id: "57",
  140 + logo: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/04/20/5cbab33c82a82.png",
  141 + shop_url: "https://wjjshop.cnlive.com/html/mall/1/#/pages/main/shopIndex/shop?shop_id=57",
  142 + title: "李宁旗舰店",
  143 + titles: "专区特供超值商品"
  144 + },
  145 + shop_type: "1",
  146 + shopid: "57",
  147 + simg: "http://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/01/02/5c2c76eeb6584.jpg",
  148 + title: "传统汉堡焗套餐 传统汉堡焗套餐汉堡焗传统汉堡焗套餐传统汉堡焗套餐 传统汉堡焗套餐汉堡焗传统汉堡焗套餐"
  149 + },
  150 + {
  151 + ads: "专区特供超值商品",
  152 + id: "9524815",
  153 + price: "50.00",
  154 + prices: "20.00",
  155 + shop: {
  156 + id: "57",
  157 + logo: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/04/20/5cbab33c82a82.png",
  158 + shop_url: "https://wjjshop.cnlive.com/html/mall/1/#/pages/main/shopIndex/shop?shop_id=57",
  159 + title: "李宁旗舰店",
  160 + titles: "专区特供超值商品"
  161 + },
  162 + shop_type: "1",
  163 + shopid: "57",
  164 + simg: "http://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/01/02/5c2c76eeb6584.jpg",
  165 + title: "传统汉堡焗套餐"
  166 + },
  167 + {
  168 + ads: "专区特供超值商品",
  169 + id: "9524815",
  170 + price: "50.00",
  171 + prices: "300.00",
  172 + shop: {
  173 + id: "57",
  174 + logo: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/04/20/5cbab33c82a82.png",
  175 + shop_url: "https://wjjshop.cnlive.com/html/mall/1/#/pages/main/shopIndex/shop?shop_id=57",
  176 + title: "李宁旗舰店",
  177 + titles: "专区特供超值商品"
  178 + },
  179 + shop_type: "1",
  180 + shopid: "57",
  181 + simg: "http://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/01/02/5c2c76eeb6584.jpg",
  182 + title: "传统汉堡焗套餐 传统汉堡焗套餐汉堡焗传统汉堡焗套餐传统汉堡焗套餐 传统汉堡焗套餐汉堡焗传统汉堡焗套餐"
  183 + },
  184 + {
  185 + ads: "专区特供超值商品",
  186 + id: "9524815",
  187 + price: "50.00",
  188 + prices: "300.00",
  189 + shop: {
  190 + id: "57",
  191 + logo: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/04/20/5cbab33c82a82.png",
  192 + shop_url: "https://wjjshop.cnlive.com/html/mall/1/#/pages/main/shopIndex/shop?shop_id=57",
  193 + title: "李宁旗舰店",
  194 + titles: "专区特供超值商品"
  195 + },
  196 + shop_type: "1",
  197 + shopid: "57",
  198 + simg: "http://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/01/02/5c2c76eeb6584.jpg",
  199 + title: "传统汉堡焗套餐 传统汉堡焗套餐汉堡焗传统汉堡焗套餐传统汉堡焗套餐 传统汉堡焗套餐汉堡焗传统汉堡焗套餐"
  200 + },
  201 + {
  202 + ads: "专区特供超值商品",
  203 + id: "9524815",
  204 + price: "50.00",
  205 + prices: "300.00",
  206 + shop: {
  207 + id: "57",
  208 + logo: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/04/20/5cbab33c82a82.png",
  209 + shop_url: "https://wjjshop.cnlive.com/html/mall/1/#/pages/main/shopIndex/shop?shop_id=57",
  210 + title: "李宁旗舰店",
  211 + titles: "专区特供超值商品"
  212 + },
  213 + shop_type: "1",
  214 + shopid: "57",
  215 + simg: "http://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/01/02/5c2c76eeb6584.jpg",
  216 + title: "传统汉堡焗套餐 传统汉堡焗套餐汉堡焗传统汉堡焗套餐传统汉堡焗套餐 传统汉堡焗套餐汉堡焗传统汉堡焗套餐"
  217 + },
  218 + {
  219 + ads: "专区特供超值商品",
  220 + id: "9524815",
  221 + price: "50.00",
  222 + prices: "300.00",
  223 + shop: {
  224 + id: "57",
  225 + logo: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/04/20/5cbab33c82a82.png",
  226 + shop_url: "https://wjjshop.cnlive.com/html/mall/1/#/pages/main/shopIndex/shop?shop_id=57",
  227 + title: "李宁旗舰店",
  228 + titles: "专区特供超值商品"
  229 + },
  230 + shop_type: "1",
  231 + shopid: "57",
  232 + simg: "http://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/01/02/5c2c76eeb6584.jpg",
  233 + title: "传统汉堡焗套餐 传统汉堡焗套餐汉堡焗传统汉堡焗套餐传统汉堡焗套餐 传统汉堡焗套餐汉堡焗传统汉堡焗套餐"
  234 + },
  235 + {
  236 + ads: "专区特供超值商品",
  237 + id: "9524815",
  238 + price: "50.00",
  239 + prices: "300.00",
  240 + shop: {
  241 + id: "57",
  242 + logo: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/04/20/5cbab33c82a82.png",
  243 + shop_url: "https://wjjshop.cnlive.com/html/mall/1/#/pages/main/shopIndex/shop?shop_id=57",
  244 + title: "李宁旗舰店",
  245 + titles: "专区特供超值商品"
  246 + },
  247 + shop_type: "1",
  248 + shopid: "57",
  249 + simg: "http://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/01/02/5c2c76eeb6584.jpg",
  250 + title: "传统汉堡焗套餐 传统汉堡焗套餐汉堡焗传统汉堡焗套餐传统汉堡焗套餐 传统汉堡焗套餐汉堡焗传统汉堡焗套餐"
  251 + },
  252 + {
  253 + ads: "专区特供超值商品",
  254 + id: "9524815",
  255 + price: "50.00",
  256 + prices: "300.00",
  257 + shop: {
  258 + id: "57",
  259 + logo: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/04/20/5cbab33c82a82.png",
  260 + shop_url: "https://wjjshop.cnlive.com/html/mall/1/#/pages/main/shopIndex/shop?shop_id=57",
  261 + title: "李宁旗舰店",
  262 + titles: "专区特供超值商品"
  263 + },
  264 + shop_type: "1",
  265 + shopid: "57",
  266 + simg: "http://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/01/02/5c2c76eeb6584.jpg",
  267 + title: "传统汉堡焗套餐 传统汉堡焗套餐汉堡焗传统汉堡焗套餐传统汉堡焗套餐 传统汉堡焗套餐汉堡焗传统汉堡焗套餐"
  268 + },
  269 + {
  270 + ads: "专区特供超值商品",
  271 + id: "9524815",
  272 + price: "50.00",
  273 + prices: "300.00",
  274 + shop: {
  275 + id: "57",
  276 + logo: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/04/20/5cbab33c82a82.png",
  277 + shop_url: "https://wjjshop.cnlive.com/html/mall/1/#/pages/main/shopIndex/shop?shop_id=57",
  278 + title: "李宁旗舰店",
  279 + titles: "专区特供超值商品"
  280 + },
  281 + shop_type: "1",
  282 + shopid: "57",
  283 + simg: "http://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/01/02/5c2c76eeb6584.jpg",
  284 + title: "传统汉堡焗套餐 传统汉堡焗套餐汉堡焗传统汉堡焗套餐传统汉堡焗套餐 传统汉堡焗套餐汉堡焗传统汉堡焗套餐"
  285 + },
  286 + {
  287 + ads: "专区特供超值商品",
  288 + id: "9524815",
  289 + price: "50.00",
  290 + prices: "300.00",
  291 + shop: {
  292 + id: "57",
  293 + logo: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/04/20/5cbab33c82a82.png",
  294 + shop_url: "https://wjjshop.cnlive.com/html/mall/1/#/pages/main/shopIndex/shop?shop_id=57",
  295 + title: "李宁旗舰店",
  296 + titles: "专区特供超值商品"
  297 + },
  298 + shop_type: "1",
  299 + shopid: "57",
  300 + simg: "http://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/01/02/5c2c76eeb6584.jpg",
  301 + title: "传统汉堡焗套餐 传统汉堡焗套餐汉堡焗传统汉堡焗套餐传统汉堡焗套餐 传统汉堡焗套餐汉堡焗传统汉堡焗套餐"
  302 + },
  303 + {
  304 + ads: "专区特供超值商品",
  305 + id: "9524815",
  306 + price: "50.00",
  307 + prices: "300.00",
  308 + shop: {
  309 + id: "57",
  310 + logo: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/04/20/5cbab33c82a82.png",
  311 + shop_url: "https://wjjshop.cnlive.com/html/mall/1/#/pages/main/shopIndex/shop?shop_id=57",
  312 + title: "李宁旗舰店",
  313 + titles: "专区特供超值商品"
  314 + },
  315 + shop_type: "1",
  316 + shopid: "57",
  317 + simg: "http://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/01/02/5c2c76eeb6584.jpg",
  318 + title: "传统汉堡焗套餐 传统汉堡焗套餐汉堡焗传统汉堡焗套餐传统汉堡焗套餐 传统汉堡焗套餐汉堡焗传统汉堡焗套餐"
  319 + },
  320 + {
  321 + ads: "专区特供超值商品",
  322 + id: "9524815",
  323 + price: "50.00",
  324 + prices: "300.00",
  325 + shop: {
  326 + id: "57",
  327 + logo: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/04/20/5cbab33c82a82.png",
  328 + shop_url: "https://wjjshop.cnlive.com/html/mall/1/#/pages/main/shopIndex/shop?shop_id=57",
  329 + title: "李宁旗舰店",
  330 + titles: "专区特供超值商品"
  331 + },
  332 + shop_type: "1",
  333 + shopid: "57",
  334 + simg: "http://wjjtest.ys2.cnliveimg.com/802/shop/img/2019/01/02/5c2c76eeb6584.jpg",
  335 + title: "传统汉堡焗套餐 传统汉堡焗套餐汉堡焗传统汉堡焗套餐传统汉堡焗套餐 传统汉堡焗套餐汉堡焗传统汉堡焗套餐"
  336 + }
  337 + ]);
  338 +
  339 +
  340 +
  341 +
  342 +
  343 + },
  344 + methods: {
  345 +
  346 + /**
  347 + * 优选页面接口
  348 + */
  349 + fansShopMessageList() {
  350 +
  351 + // 校验登录
  352 + if (this.$parent.checkLogin()) {
  353 +
  354 + // 加载中提示
  355 + Indicator.open("加载中...");
  356 +
  357 + // 获取证书请求接口
  358 + this.http("/Api/" + this.getApiVersion().dynamic + "/fansShopMessageList", {
  359 + uid: this.getStore("uid")
  360 + }, this.fansShopMessageListCallback, {
  361 + method: "POST"
  362 + });
  363 + }
  364 + },
  365 +
  366 + /**
  367 + * 优选页面接口回调
  368 + * @param {Object} res [服务器返回数据]
  369 + * @param {Object} ext [扩展参数]
  370 + */
  371 + fansShopMessageListCallback(res, ext) {
  372 +
  373 + // 加载完成
  374 + Indicator.close();
  375 +
  376 + // 返回处理
  377 + if (res.code == 200) {
  378 +
  379 + // 解构数据
  380 + let { data: datas } = res;
  381 +
  382 + /* 获取优选库“优选”数据 开始 */
  383 +
  384 +
  385 +
  386 + /* 获取优选库“优选”数据 结束 */
  387 +
  388 + } else if (res.code == 400) {
  389 +
  390 + // 获取优选失败
  391 + Toast(res.message);
  392 + } else {
  393 +
  394 + // 获取优选失败
  395 + Toast("获取优选失败");
  396 + }
  397 + },
  398 +
  399 + /**
  400 + * 商品列表
  401 + * @param {Int} groupId [平台分类id]
  402 + * @param {Int} page [页码]
  403 + * @param {String} CALL_STATUS [何处触发请求]
  404 + */
  405 + shopGoodsList(groupId, page) {
  406 +
  407 + // 校验必填参数
  408 + if (groupId && page) {
  409 +
  410 + // 加载中
  411 + this.$set(this.paging, "loading", true);
  412 +
  413 + // 获取证书请求接口
  414 + this.http("/Api/" + this.getApiVersion().index + "/shopNewGoodsList", {
  415 + groupid: groupId,
  416 + page: page
  417 + }, this.shopGoodsListCallback, {
  418 + method: "POST"
  419 + }
  420 + );
  421 + }
  422 + },
  423 +
  424 + /**
  425 + * 商品列表回调
  426 + * @param {Object} res [服务器返回数据]
  427 + * @param {Object} ext [扩展参数]
  428 + */
  429 + shopGoodsListCallback(res, ext) {
  430 +
  431 + // 下拉刷新结束
  432 + this.$set(this, "isLoading", false);
  433 +
  434 + // 返回处理
  435 + if (res.code == 200) {
  436 +
  437 + // 解构数据
  438 + let { data: datas } = res;
  439 +
  440 + /* 获取商品列表数据 开始 */
  441 +
  442 +
  443 +
  444 + /* 获取商品列表数据 结束 */
  445 +
  446 + } else if (res.code == 400) {
  447 +
  448 + // 获取最新上架列表失败
  449 + Toast(res.message);
  450 + } else {
  451 +
  452 + // 获取最新上架列表失败
  453 + Toast("获取最新上架列表失败");
  454 + }
  455 + },
  456 +
  457 + /**
  458 + * 跳转折扣专区列表
  459 + * @param {Object} item [通用跳转对象]
  460 + */
  461 + toDiscountList(item) {
  462 +
  463 + // 跳转封装
  464 + if (typeof this.$parent.navBarJump === 'function') {
  465 +
  466 + // 设置跳转参数
  467 + let params = {
  468 +
  469 + };
  470 +
  471 + // 页面跳转
  472 + this.$parent.navBarJump(params);
  473 + }
  474 + },
  475 +
  476 + /**
  477 + * 锚点定位
  478 + * @param {Object} item [数据对象]
  479 + */
  480 + anchor(item) {
  481 +
  482 + },
  483 +
  484 + /**
  485 + * 跳转品质优选列表
  486 + * @param {Object} item [通用跳转对象]
  487 + */
  488 + toOptimizationList(item) {
  489 +
  490 + // 跳转封装
  491 + if (typeof this.$parent.navBarJump === 'function') {
  492 +
  493 + // 设置跳转参数
  494 + let params = {
  495 +
  496 + };
  497 +
  498 + // 页面跳转
  499 + this.$parent.navBarJump(params);
  500 + }
  501 + },
  502 +
  503 + /**
  504 + * 查看更多积分
  505 + * @param {Object} item [数据对象]
  506 + */
  507 + pointsMore(item) {
  508 +
  509 + console.log('pointsMore', item);
  510 +
  511 + },
  512 +
  513 + /**
  514 + * 换一租
  515 + * @param {Object} item [数据对象]
  516 + */
  517 + changeGoods(item) {
  518 +
  519 + console.log('changeGoods', item);
  520 +
  521 + },
  522 +
  523 + /**
  524 + * 跳转商品详情
  525 + * @param {Object} item [数据对象]
  526 + */
  527 + toDetail(item) {
  528 +
  529 + // 判断通用跳转函数是否存在
  530 + if (typeof this.$parent.gotoDetail === 'function') {
  531 +
  532 +
  533 + console.log('toDetail', item);
  534 +
  535 +
  536 + // 通用跳转
  537 + this.$parent.gotoDetail(item);
  538 + }
  539 + },
  540 + /**
  541 + * 列表加号按钮事件
  542 + * @param {Object} item [数据对象]
  543 + */
  544 + primary(item) {
  545 + this.toDetail(item);
  546 + },
  547 +
  548 +
  549 +
  550 +
  551 +
  552 +
  553 + /**
  554 + * 分享
  555 + */
  556 + toShare() {
  557 +
  558 + // 判断分享
  559 + if (typeof this.$parent.toShare === 'function') {
  560 + this.$parent.toShare(38, this.$route.query.id || 0);
  561 + }
  562 + },
  563 +
  564 + /**
  565 + * 后退
  566 + */
  567 + back() {
  568 +
  569 + // 判断是否有处理函数
  570 + if (typeof this.$parent.back === 'function') {
  571 +
  572 + // 后退
  573 + this.$parent.back();
  574 + } else {
  575 +
  576 + // 后退
  577 + window.history.go(-1);
  578 + }
  579 + }
  580 + },
  581 + head: {
  582 + title () {
  583 + return {
  584 + inner: this.title
  585 + }
  586 + }
  587 + },
  588 + watch: {
  589 +
  590 + // 设置页面标题
  591 + title(newVal) {
  592 + if (this.$store.state.browser.toLowerCase() == "qq" && this.$store.state.deviceType.toLowerCase() == "iphone") {
  593 + this.$iFrame.insertIFrame(newVal);
  594 + } else {
  595 + this.$emit("updateHead");
  596 + }
  597 + }
  598 + },
  599 + mounted() {
  600 +
  601 + // 如果是App外，设置唤起App和微信内分享参数
  602 + if (!this.isCNLive.value) {
  603 +
  604 + // 唤起详情页
  605 + if (typeof this.$parent.getOpenApp === "function") {
  606 + this.$parent.getOpenApp({
  607 + type: 38,
  608 + id: this.$route.query.id || 1,
  609 + url: ""
  610 + });
  611 + }
  612 +
  613 + // 分享详情页
  614 + if (typeof this.$parent.getShareData === "function") {
  615 + this.$parent.getShareData({
  616 + type: 38,
  617 + id: this.$route.query.id || 1,
  618 + url: ""
  619 + });
  620 + }
  621 + }
  622 + }
  623 + }
  624 +</script>
  625 +
  626 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  627 +<style rel="stylesheet/less" lang='less' scoped>
  628 + @import "discountList";
  629 +</style>
0 \ No newline at end of file 630 \ No newline at end of file
src/router/index.js
  View file @f95ff15
@@ -174,7 +174,7 @@ const router = new Router({ @@ -174,7 +174,7 @@ const router = new Router({
174 } 174 }
175 }, 175 },
176 { 176 {
177 - // 新版优选库“优选”页面 177 + // 新版优选库“优选主页”页面
178 path: "/optimization2", 178 path: "/optimization2",
179 name: "optimization2", 179 name: "optimization2",
180 component: resolve => { 180 component: resolve => {
@@ -184,6 +184,17 @@ const router = new Router({ @@ -184,6 +184,17 @@ const router = new Router({
184 requireAuth: false 184 requireAuth: false
185 } 185 }
186 }, 186 },
  187 + {
  188 + // 新版优选库“优选折扣列表”页面
  189 + path: "/discountList",
  190 + name: "discountList",
  191 + component: resolve => {
  192 + require(["@/pages/discountList/discountList"], resolve);
  193 + },
  194 + meta: {
  195 + requireAuth: false
  196 + }
  197 + },
187 198
188 /* 优选和商城页面改版升级页面 结束 */ 199 /* 优选和商城页面改版升级页面 结束 */
189 200