w-front-end / select_good · Commits

Commit 5a217dfc696b069e30161b6159cd7c9fe338f0ce

Authored by 王强
1 parent a5c2e0cf

新版商城首页页面完成~

Inline Side-by-side
Showing 17 changed files with 814 additions and 535 deletions
src/components/goodsItem_2/goodsItem_2.less
  View file @5a217df
@@ -39,7 +39,7 @@ @@ -39,7 +39,7 @@
39 .price-box { 39 .price-box {
40 display: flex; 40 display: flex;
41 justify-content: flex-start; 41 justify-content: flex-start;
42 - align-items: center; 42 + align-items: baseline;
43 margin-top: 20px; 43 margin-top: 20px;
44 .symbol { 44 .symbol {
45 color: #FC1541; 45 color: #FC1541;
@@ -51,6 +51,17 @@ @@ -51,6 +51,17 @@
51 white-space: nowrap; 51 white-space: nowrap;
52 text-overflow: ellipsis; 52 text-overflow: ellipsis;
53 overflow: hidden; 53 overflow: hidden;
  54 + & + .prices {
  55 + margin-left: 10px;
  56 + }
  57 + }
  58 + .prices {
  59 + color: #BEBEBE;
  60 + font-size: 18px;
  61 + text-decoration: line-through;
  62 + white-space: nowrap;
  63 + text-overflow: ellipsis;
  64 + overflow: hidden;
54 } 65 }
55 } 66 }
56 } 67 }
src/components/goodsItem_2/goodsItem_2.vue
  View file @5a217df
@@ -7,10 +7,11 @@ @@ -7,10 +7,11 @@
7 <slot name="flag"></slot> 7 <slot name="flag"></slot>
8 </div> 8 </div>
9 <div class="content-box"> 9 <div class="content-box">
10 - <div class="title" v-if="pid == undefined || pid == '1'">{{item.title}}</div> 10 + <div class="title" v-if="pid == undefined || pid == '1' || pid == '3'">{{item.title}}</div>
11 <div class="price-box"> 11 <div class="price-box">
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' && item.prices && parseFloat(item.prices) > 0 ">¥{{item.prices}}</div>
14 </div> 15 </div>
15 <div class="ads" v-if="pid == '2'"> 16 <div class="ads" v-if="pid == '2'">
16 {{item.title || ""}} 17 {{item.title || ""}}
src/components/iconSwiperBox/iconSwiperBox.less 0 → 100644
  View file @5a217df
  1 +@charset "UTF-8";
  2 +
  3 +.icon-swiper-box {
  4 + position: relative;
  5 + width: 100%;
  6 + // height: 440px;
  7 + overflow: hidden;
  8 + .swipe {
  9 + margin: 0 auto;
  10 + width: 100%;
  11 + height: 100%;
  12 + .swipe-item {
  13 + margin: 40px auto 26px auto;
  14 + width: 100%;
  15 + height: 100%;
  16 + .icons-com {
  17 + margin: 10px auto 30px auto;
  18 + width: 25%;
  19 + float: left;
  20 + }
  21 + }
  22 + /deep/ .van-swipe__indicators {
  23 + bottom: 20px;
  24 + .van-swipe__indicator {
  25 + background-color: #D8D8D8;
  26 + width: 6px;
  27 + height: 6px;
  28 + opacity: unset;
  29 + border-radius: 50%;
  30 + &.van-swipe__indicator--active {
  31 + background-color: #FC1541;
  32 + width: 26px;
  33 + border-radius: 3px;
  34 + }
  35 + }
  36 + }
  37 + }
  38 +}
0 \ No newline at end of file 39 \ No newline at end of file
src/components/iconSwiperBox/iconSwiperBox.vue 0 → 100644
  View file @5a217df
  1 +<template>
  2 + <div class="icon-swiper-box" v-if="icons && icons.length">
  3 + <swipe class="swipe" :autoplay="0" @change="onChange">
  4 + <swipe-item class="swipe-item" v-for="(items, index) in icons" :key="index">
  5 +
  6 + <!-- 单个图标 -->
  7 + <icons-com v-for="(item, i) in items" :key="i" @jump="jump(item)"
  8 + :item="item">
  9 + </icons-com>
  10 + </swipe-item>
  11 + </swipe>
  12 + <div style="clear: both;"></div>
  13 + </div>
  14 +</template>
  15 +
  16 +<script>
  17 +
  18 + // 引入组件
  19 + import { Swipe, SwipeItem } from "vant";
  20 + import iconsCom from "@/components/iconsCom/iconsCom";
  21 +
  22 + export default {
  23 + name: 'iconSwiperBox',
  24 + data() {
  25 + return {
  26 +
  27 + }
  28 + },
  29 + props: ["icons"],
  30 + components: {
  31 + Swipe,
  32 + SwipeItem,
  33 + iconsCom
  34 + },
  35 + methods: {
  36 +
  37 + /**
  38 + * 当swiper切换
  39 + * @param {Int} index [切换swiper索引]
  40 + */
  41 + onChange(index) {
  42 + this.$emit("onChange", index);
  43 + },
  44 +
  45 + /**
  46 + * 跳转
  47 + * @param {Object} item [对象参数]
  48 + */
  49 + jump(item) {
  50 + this.$emit("jump", item);
  51 + }
  52 + }
  53 + }
  54 +</script>
  55 +
  56 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  57 +<style rel="stylesheet/less" lang="less" scoped>
  58 + @import './iconSwiperBox';
  59 +</style>
src/components/iconsCom/iconsCom.less 0 → 100644
  View file @5a217df
  1 +@charset "UTF-8";
  2 +
  3 +.icons-com {
  4 + .icons-img {
  5 + display: block;
  6 + margin: 0 auto;
  7 + width: 100px;
  8 + height: 100px;
  9 + border-radius: 50%;
  10 + }
  11 + .title {
  12 + color: #777777;
  13 + font-size: 26px;
  14 + font-weight: 400;
  15 + text-align: center;
  16 + }
  17 +}
src/components/iconsCom/iconsCom.vue 0 → 100644
  View file @5a217df
  1 +<template>
  2 + <div class="icons-com" v-if="item && item.simg && item.title" @click="jump(item)">
  3 + <img v-lazy="item.simg" class="icons-img" />
  4 + <div class="title">{{item.title}}</div>
  5 + </div>
  6 +</template>
  7 +
  8 +<script>
  9 + export default {
  10 + name: 'iconsCom',
  11 + data() {
  12 + return {
  13 +
  14 + }
  15 + },
  16 + props: ["item"],
  17 + components: {
  18 +
  19 + },
  20 + methods: {
  21 +
  22 + /**
  23 + * 跳转
  24 + * @param {Object} item [对象]
  25 + */
  26 + jump(item) {
  27 + this.$emit("jump", item);
  28 + }
  29 + }
  30 + }
  31 +</script>
  32 +
  33 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  34 +<style rel="stylesheet/less" lang="less" scoped>
  35 + @import 'iconsCom';
  36 +</style>
src/components/textBgTitleCom/textBgTitleCom.less 0 → 100644
  View file @5a217df
  1 +@charset "UTF-8";
  2 +
  3 +.text-bg-title-com {
  4 + position: relative;
  5 + background-color: transparent;
  6 + width: 100%;
  7 + height: auto;
  8 + .bg-box {
  9 + width: 100%;
  10 + height: 100%;
  11 + .bg-img {
  12 + display: block;
  13 + width: 100%;
  14 + height: 100%;
  15 + }
  16 + }
  17 + .box {
  18 + position: absolute;
  19 + top: 0;
  20 + left: 0;
  21 + z-index: 1;
  22 + display: flex;
  23 + justify-content: space-between;
  24 + align-items: center;
  25 + margin: 0 auto;
  26 + padding: 0 30px;
  27 + width: 90%;
  28 + height: 100%;
  29 + .title-box {
  30 + display: flex;
  31 + justify-content: flex-start;
  32 + align-items: center;
  33 + .title {
  34 + color: #4A4A4A;
  35 + font-size: 34px;
  36 + font-weight: 600;
  37 + max-width: 580px;
  38 + white-space: nowrap;
  39 + text-overflow: ellipsis;
  40 + overflow: hidden;
  41 + }
  42 + .line {
  43 + background-color: #979797;
  44 + width: 1px;
  45 + height: 22px;
  46 + margin: 0 16px;
  47 + }
  48 + .sub-title {
  49 + color: #999999;
  50 + font-size: 24px;
  51 + font-weight: 400;
  52 + max-width: 580px;
  53 + white-space: nowrap;
  54 + text-overflow: ellipsis;
  55 + overflow: hidden;
  56 + }
  57 + }
  58 + .more-box {
  59 + display: contents;
  60 + color: #999999;
  61 + font-size: 26px;
  62 + font-weight: 400;
  63 + .more-text {
  64 + max-width: 90px;
  65 + white-space: nowrap;
  66 + text-overflow: ellipsis;
  67 + overflow: hidden;
  68 + }
  69 + }
  70 + .extend-box {
  71 +
  72 + }
  73 + }
  74 +}
0 \ No newline at end of file 75 \ No newline at end of file
src/components/textBgTitleCom/textBgTitleCom.vue 0 → 100644
  View file @5a217df
  1 +<template>
  2 +
  3 + <!--
  4 + 含有标题、副标题、标题背景、更多、右侧slot扩展的标题组件
  5 + -->
  6 +
  7 + <div class="text-bg-title-com" :class="'style-' + titles.style" fv-if="titles">
  8 +
  9 + <!-- 背景 -->
  10 + <div class="bg-box" v-if="titles.bg">
  11 + <img :src="titles.bg + SIGN.BIG" class="bg-img" />
  12 + </div>
  13 +
  14 + <div class="box">
  15 +
  16 + <!-- 标题 -->
  17 + <div class="title-box">
  18 + <div class="title">{{titles.title}}</div>
  19 + <div class="line" v-if="titles.subTitle"></div>
  20 + <div class="sub-title" v-if="titles.subTitle">{{titles.subTitle}}</div>
  21 + </div>
  22 +
  23 + <!-- 插槽 -->
  24 + <div class="extend-box">
  25 + <slot name="extend"></slot>
  26 + </div>
  27 +
  28 + <!-- 更多 -->
  29 + <div class="more-box" v-if="titles.more" @click="more(titles.more)">
  30 + <div class="more-text">更多</div>
  31 + </div>
  32 + </div>
  33 + </div>
  34 +</template>
  35 +
  36 +<script>
  37 + export default {
  38 + name: 'textBgTitleCom',
  39 + data: function () {
  40 + return {
  41 +
  42 + }
  43 + },
  44 + props: ["titles"],
  45 + methods: {
  46 +
  47 + /**
  48 + * 更多
  49 + * @param {object} item [数据对象]
  50 + */
  51 + more(item) {
  52 + this.$emit("more", item);
  53 + }
  54 + }
  55 + }
  56 +</script>
  57 +
  58 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  59 +<style rel="stylesheet/less" lang="less">
  60 + @import './textBgTitleCom';
  61 +</style>
src/main.js
  View file @5a217df
@@ -50,7 +50,7 @@ import &#39;url-search-params-polyfill&#39;; @@ -50,7 +50,7 @@ import &#39;url-search-params-polyfill&#39;;
50 Vue.config.productionTip = false; 50 Vue.config.productionTip = false;
51 51
52 // 部署模式设置（开发模式："dev"，测试模式："test"，生产模式："prod"） 52 // 部署模式设置（开发模式："dev"，测试模式："test"，生产模式："prod"）
53 -Vue.prototype.mode = "prod"; 53 +Vue.prototype.mode = "dev";
54 54
55 // 微信JS-SDK对象 55 // 微信JS-SDK对象
56 Vue.prototype.jweixin = { 56 Vue.prototype.jweixin = {
src/pages/mall2/mall2.less 0 → 100644
  View file @5a217df
  1 +@charset "UTF-8";
  2 +
  3 +.mall-box {
  4 + background-color: #F6F6F6;
  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: linear-gradient(180deg, rgba(0, 0, 0, 0.39) 0%, rgba(0, 0, 0, 0) 100%);
  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 + padding-bottom: 40px;
  29 + .section {
  30 + background-color: #ffffff;
  31 + margin: 40px auto;
  32 + width: 690px;
  33 + height: auto;
  34 + border-radius: 24px;
  35 + overflow: hidden;
  36 + &:last-child {
  37 + margin-bottom: 0;
  38 + }
  39 + &.shop-hot {
  40 +
  41 + }
  42 + &.shop-list {
  43 + .header-img-box {
  44 + width: 100%;
  45 + height: 100%;
  46 + .header-img {
  47 + display: block;
  48 + width: 100%;
  49 + height: 100%;
  50 + }
  51 + }
  52 + .list-box {
  53 + display: flex;
  54 + justify-content: space-between;
  55 + align-items: center;
  56 + }
  57 + }
  58 + }
  59 + }
  60 +}
0 \ No newline at end of file 61 \ No newline at end of file
src/pages/mall2/mall2.vue 0 → 100644
  View file @5a217df
  1 +<template>
  2 + <div class="mall-box">
  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="section shop-hot">
  22 +
  23 + <!-- 标题 -->
  24 + <text-bg-title-com
  25 + :titles="{
  26 + bg: 'static/img/text_bg_title_bg.jpg'
  27 + }">
  28 + </text-bg-title-com>
  29 +
  30 + <!-- 轮播展示店铺 -->
  31 + <iconSwiperBox @jump="toDetail"
  32 + :icons="navs">
  33 + </iconSwiperBox>
  34 + </div>
  35 +
  36 + <!-- 店铺列表 -->
  37 + <div class="shop-list-box" v-if="shopLists && shopLists.length">
  38 +
  39 + <div class="section shop-list" v-for="(items, index) in shopLists" :key="index" @click="toDetail(items)">
  40 +
  41 + <!-- 头图 -->
  42 + <div class="header-img-box">
  43 + <img :src="items.header_img + SIGN.BIG" class="header-img" />
  44 + </div>
  45 +
  46 + <!-- 商品列表 -->
  47 + <div class="list-box">
  48 +
  49 + <!-- 商品展示样式 2 -->
  50 + <goods-item-2 class="item" v-for="(item, i) in items.list" :key="i"
  51 + :item="item"
  52 + pid="3">
  53 + </goods-item-2>
  54 + </div>
  55 + </div>
  56 + </div>
  57 + </div>
  58 + </div>
  59 +</template>
  60 +
  61 +<script>
  62 +
  63 + // 引入组件
  64 + import { Toast, Indicator } from "mint-ui";
  65 + import callAppBox from "@/components/callAppBox/callAppBox";
  66 + import backBox from "@/components/backBox/backBox";
  67 + import textBgTitleCom from "@/components/textBgTitleCom/textBgTitleCom";
  68 + import iconSwiperBox from "@/components/iconSwiperBox/iconSwiperBox";
  69 + import goodsItem2 from "@/components/goodsItem_2/goodsItem_2";
  70 +
  71 + export default {
  72 + name: "mallBox",
  73 + data() {
  74 + return {
  75 + title: "", // 标题
  76 + backs: null, // 后退按钮组
  77 + navs: null, // 导航
  78 + shopLists: null // 店铺列表
  79 + };
  80 + },
  81 + components: {
  82 + callAppBox,
  83 + backBox,
  84 + textBgTitleCom,
  85 + iconSwiperBox,
  86 + goodsItem2
  87 + },
  88 + created() {
  89 +
  90 + // 获取优选库精选活动
  91 + this.activityAd();
  92 +
  93 + // 判断是否在App内
  94 + if (this.isCNLive.value) {
  95 +
  96 + // 添加后退按钮组“后退”和“分享”按钮
  97 + this.$set(this, 'backs', {
  98 + funcs: {
  99 + back: {
  100 + icon: "static/img/icon_back.png"
  101 + },
  102 + funcArray: [
  103 + {
  104 + icon: "static/img/icon_share.png",
  105 + func: this.toShare
  106 + }
  107 + ]
  108 + }
  109 + });
  110 + }
  111 +
  112 +
  113 +
  114 +
  115 + // 临时，初始化店铺列表数据
  116 + this.$set(this, 'shopLists', [
  117 + {
  118 + header_img: 'static/img/box_banner.jpg',
  119 + list: [
  120 + {
  121 + ads: "广告语",
  122 + id: "9519164",
  123 + price: "5.01",
  124 + prices: "6.00",
  125 + shop_type: "1",
  126 + simg: "http://wjjseller.cnlive.com/uploads/05ac5ee31c3bb363d95072559d205bd8.png",
  127 + title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml"
  128 + },
  129 + {
  130 + ads: "广告语",
  131 + id: "9519164",
  132 + price: "5.01",
  133 + prices: "6.00",
  134 + shop_type: "1",
  135 + simg: "http://wjjseller.cnlive.com/uploads/05ac5ee31c3bb363d95072559d205bd8.png",
  136 + title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml"
  137 + },
  138 + {
  139 + ads: "广告语",
  140 + id: "9519164",
  141 + price: "5.01",
  142 + prices: "6.00",
  143 + shop_type: "1",
  144 + simg: "http://wjjseller.cnlive.com/uploads/05ac5ee31c3bb363d95072559d205bd8.png",
  145 + title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml"
  146 + }
  147 + ]
  148 + },
  149 + {
  150 + header_img: 'static/img/box_banner.jpg',
  151 + list: [
  152 + {
  153 + ads: "广告语",
  154 + id: "9519164",
  155 + price: "5.01",
  156 + prices: "6.00",
  157 + shop_type: "1",
  158 + simg: "http://wjjseller.cnlive.com/uploads/05ac5ee31c3bb363d95072559d205bd8.png",
  159 + title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml"
  160 + },
  161 + {
  162 + ads: "广告语",
  163 + id: "9519164",
  164 + price: "5.01",
  165 + prices: "6.00",
  166 + shop_type: "1",
  167 + simg: "http://wjjseller.cnlive.com/uploads/05ac5ee31c3bb363d95072559d205bd8.png",
  168 + title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml"
  169 + },
  170 + {
  171 + ads: "广告语",
  172 + id: "9519164",
  173 + price: "5.01",
  174 + prices: "6.00",
  175 + shop_type: "1",
  176 + simg: "http://wjjseller.cnlive.com/uploads/05ac5ee31c3bb363d95072559d205bd8.png",
  177 + title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml"
  178 + }
  179 + ]
  180 + },
  181 + {
  182 + header_img: 'static/img/box_banner.jpg',
  183 + list: [
  184 + {
  185 + ads: "广告语",
  186 + id: "9519164",
  187 + price: "5.01",
  188 + prices: "6.00",
  189 + shop_type: "1",
  190 + simg: "http://wjjseller.cnlive.com/uploads/05ac5ee31c3bb363d95072559d205bd8.png",
  191 + title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml"
  192 + },
  193 + {
  194 + ads: "广告语",
  195 + id: "9519164",
  196 + price: "5.01",
  197 + prices: "6.00",
  198 + shop_type: "1",
  199 + simg: "http://wjjseller.cnlive.com/uploads/05ac5ee31c3bb363d95072559d205bd8.png",
  200 + title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml"
  201 + },
  202 + {
  203 + ads: "广告语",
  204 + id: "9519164",
  205 + price: "5.01",
  206 + prices: "6.00",
  207 + shop_type: "1",
  208 + simg: "http://wjjseller.cnlive.com/uploads/05ac5ee31c3bb363d95072559d205bd8.png",
  209 + title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml"
  210 + }
  211 + ]
  212 + },
  213 + {
  214 + header_img: 'static/img/box_banner.jpg',
  215 + list: [
  216 + {
  217 + ads: "广告语",
  218 + id: "9519164",
  219 + price: "5.01",
  220 + prices: "6.00",
  221 + shop_type: "1",
  222 + simg: "http://wjjseller.cnlive.com/uploads/05ac5ee31c3bb363d95072559d205bd8.png",
  223 + title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml"
  224 + },
  225 + {
  226 + ads: "广告语",
  227 + id: "9519164",
  228 + price: "5.01",
  229 + prices: "6.00",
  230 + shop_type: "1",
  231 + simg: "http://wjjseller.cnlive.com/uploads/05ac5ee31c3bb363d95072559d205bd8.png",
  232 + title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml"
  233 + },
  234 + {
  235 + ads: "广告语",
  236 + id: "9519164",
  237 + price: "5.01",
  238 + prices: "6.00",
  239 + shop_type: "1",
  240 + simg: "http://wjjseller.cnlive.com/uploads/05ac5ee31c3bb363d95072559d205bd8.png",
  241 + title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml"
  242 + }
  243 + ]
  244 + },
  245 + {
  246 + header_img: 'static/img/box_banner.jpg',
  247 + list: [
  248 + {
  249 + ads: "广告语",
  250 + id: "9519164",
  251 + price: "5.01",
  252 + prices: "6.00",
  253 + shop_type: "1",
  254 + simg: "http://wjjseller.cnlive.com/uploads/05ac5ee31c3bb363d95072559d205bd8.png",
  255 + title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml"
  256 + },
  257 + {
  258 + ads: "广告语",
  259 + id: "9519164",
  260 + price: "5.01",
  261 + prices: "6.00",
  262 + shop_type: "1",
  263 + simg: "http://wjjseller.cnlive.com/uploads/05ac5ee31c3bb363d95072559d205bd8.png",
  264 + title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml"
  265 + },
  266 + {
  267 + ads: "广告语",
  268 + id: "9519164",
  269 + price: "5.01",
  270 + prices: "6.00",
  271 + shop_type: "1",
  272 + simg: "http://wjjseller.cnlive.com/uploads/05ac5ee31c3bb363d95072559d205bd8.png",
  273 + title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml"
  274 + }
  275 + ]
  276 + }
  277 + ]);
  278 +
  279 +
  280 +
  281 +
  282 + },
  283 + methods: {
  284 +
  285 + /**
  286 + * 获取初始数据
  287 + */
  288 + activityAd() {
  289 +
  290 + // 加载中提示
  291 + Indicator.open("加载中...");
  292 +
  293 + // 获取证书请求接口
  294 + this.http("/Api/" + this.getApiVersion().index + "/activityAd", {
  295 + id: this.$route.query.id
  296 + }, this.activityAdCallback, {
  297 + method: "POST"
  298 + });
  299 + },
  300 +
  301 + /**
  302 + * 获取初始数据回调
  303 + * @param {Object} res [服务器返回数据]
  304 + * @param {Object} ext [扩展参数]
  305 + */
  306 + activityAdCallback(res, ext) {
  307 +
  308 + // 加载完成
  309 + Indicator.close();
  310 +
  311 + // 返回处理
  312 + if (res.code == 200) {
  313 +
  314 + // 解构数据
  315 + let { data: datas } = res;
  316 +
  317 + /* 获取优选库精选活动数据 开始 */
  318 +
  319 + // 设置标题
  320 + this.$set(this, "title", datas.title);
  321 +
  322 + // 设置后退按钮组
  323 + this.$set(this.backs, 'title', datas.title);
  324 +
  325 + // 设置navs数据
  326 + if (datas.navs && datas.navs.length) {
  327 + this.$set(this, "navs", datas.navs);
  328 + }
  329 +
  330 + /* 获取优选库精选活动数据 结束 */
  331 +
  332 + } else if (res.code == 400) {
  333 +
  334 + // 获取初始数据失败
  335 + Toast(res.message);
  336 + } else {
  337 +
  338 + // 获取初始数据失败
  339 + Toast("获取初始数据失败");
  340 + }
  341 + },
  342 +
  343 + /**
  344 + * 调用通用跳转（跳转店铺首页）
  345 + * @param {Object} item [通用跳转对象]
  346 + */
  347 + toDetail(item) {
  348 +
  349 + // 判断是否有通用跳转函数
  350 + if (typeof this.$parent.gotoDetail === 'function') {
  351 + // 调用通用跳转
  352 + this.$parent.gotoDetail(item);
  353 + }
  354 + },
  355 +
  356 + /**
  357 + * 分享
  358 + */
  359 + toShare() {
  360 +
  361 + // 判断分享
  362 + if (typeof this.$parent.toShare === 'function') {
  363 + this.$parent.toShare(38, this.$route.query.id || 0);
  364 + }
  365 + },
  366 +
  367 + /**
  368 + * 后退
  369 + */
  370 + back() {
  371 +
  372 + // 判断是否有处理函数
  373 + if (typeof this.$parent.back === 'function') {
  374 +
  375 + // 后退
  376 + this.$parent.back();
  377 + } else {
  378 +
  379 + // 后退
  380 + window.history.go(-1);
  381 + }
  382 + }
  383 + },
  384 + head: {
  385 + title() {
  386 + return {
  387 + inner: this.title
  388 + };
  389 + }
  390 + },
  391 + watch: {
  392 +
  393 + // 设置页面标题
  394 + title(newVal) {
  395 + if (
  396 + this.$store.state.browser.toLowerCase() == "qq" &&
  397 + this.$store.state.deviceType.toLowerCase() == "iphone"
  398 + ) {
  399 + this.$iFrame.insertIFrame(newVal);
  400 + } else {
  401 + this.$emit("updateHead");
  402 + }
  403 + }
  404 + },
  405 + mounted() {
  406 +
  407 + // 如果是App外，设置唤起App和微信内分享参数
  408 + if (!this.isCNLive.value) {
  409 +
  410 + // 唤起详情页
  411 + if (typeof this.$parent.getOpenApp === "function") {
  412 + this.$parent.getOpenApp({
  413 + type: 38,
  414 + id: this.$route.query.id || 0,
  415 + url: ""
  416 + });
  417 + }
  418 +
  419 + // 分享详情页
  420 + if (typeof this.$parent.getShareData === "function") {
  421 + this.$parent.getShareData({
  422 + type: 38,
  423 + id: this.$route.query.id || 0,
  424 + url: ""
  425 + });
  426 + }
  427 + }
  428 + }
  429 + }
  430 +</script>
  431 +
  432 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  433 +<style rel="stylesheet/less" lang="less" scoped>
  434 +@import "mall2";
  435 +</style>
0 \ No newline at end of file 436 \ No newline at end of file
src/pages/test/item.vue deleted 100644 → 0
  View file @a5c2e0c
1 -<template>  
2 -<div>  
3 - <!-- item -->  
4 - <div class="item_box">  
5 - <!-- 用户信息 -->  
6 - <div class="user_info">  
7 - <img class="pic" src="http://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/05/18/158978851853674726863.jpg" alt=""/>  
8 - <div class="name">陕西省-张三-20100759</div>  
9 - </div>  
10 - <!-- 描述 -->  
11 - <div class="desc">  
12 - 纯天然无污染无添加，一年取一次原生态放养土蜂蜜百花蜜纯天然无污染无添加  
13 - </div>  
14 - <!-- 图片库 -->  
15 - <div class="img-box" >  
16 - <div :class="['item',grids.list.length==1?'one':(grids.list.length==2 || grids.list.length==4? 'two':'three')]" v-for="(item, index) in grids.list" :key="index" @click="jump(item)">  
17 - <!--<div @click.stop="imagePreview(index)" :class="['item',grids.list.length==1?'one':(grids.list.length==2 || grids.list.length==4? 'two':'three')]" v-for="(item, index) in grids.list" :key="index" @click="jump(item)">-->  
18 - <van-image  
19 - v-if="index < 9"  
20 - class="img"  
21 - fit="cover"  
22 - lazy-load  
23 - :src="(item.img || item) + (item.v === true ? '' : SIGN.BIG)"  
24 - >  
25 - <template v-slot:error>  
26 - <img class="img" src="static/img/x.jpg" alt=""/>  
27 - </template>  
28 - </van-image>  
29 - <div v-if="index < 8 && item.v === true" class="play_box">  
30 - <img src="static/img/play.png" />  
31 - </div>  
32 - <div v-if="grids.list.length>9 && index == 8" class="title">共{{grids.list.length}}张</div>  
33 - </div>  
34 - </div>  
35 - <!-- 地址信息 -->  
36 - <div class="address_info">  
37 - <div class="left">  
38 - <img src="http://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/05/18/158978851853674726863.jpg" alt=""/>  
39 - 陕西省 西安市 西安区  
40 - </div>  
41 - <div class="right">  
42 - 2020-09-23  
43 - </div>  
44 - </div>  
45 - </div>  
46 -</div>  
47 -</template>  
48 -  
49 -<script>  
50 -export default {  
51 - data(){  
52 - return{  
53 - grids:{  
54 - list:[  
55 - {img:"http://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/05/18/158978851853674726863.jpg"},  
56 - {img:"http://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/05/18/158978851853674726863.jpg"},  
57 - {img:"http://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/05/18/158978851853674726863.jpg"}  
58 - ]  
59 - }  
60 - }  
61 - },  
62 -//部件  
63 - components: {  
64 - },  
65 -//静态  
66 - props: [  
67 -],  
68 -//对象内部的属性监听，也叫深度监听  
69 - watch: {  
70 - },  
71 -//属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；  
72 - computed: {  
73 - },  
74 -//方法表示一个具体的操作，主要书写业务逻辑；  
75 - methods: {  
76 -  
77 - },  
78 -//请求数据  
79 - created() {  
80 -},  
81 - mounted() {  
82 -}  
83 -}  
84 -</script>  
85 -  
86 -<style scoped lang="less" rel="stylesheet/less">  
87 -// 页面信息  
88 -.item_box{  
89 - margin: 20px;  
90 - padding: 30px 20px 20px 20px;  
91 - background-color: #fff;  
92 - border-radius: 16px;  
93 - .user_info{  
94 - display:flex;  
95 - .pic{  
96 - display:block;  
97 - width:80px;  
98 - height:80px;  
99 - border-radius: 50%;  
100 - margin-right: 90px;  
101 - }  
102 - .name{  
103 - flex: 1;  
104 - height: 80px;  
105 - font-size: 30px;  
106 - font-family: PingFangSC-Regular, PingFang SC;  
107 - font-weight: 400;  
108 - color: #333333;  
109 - line-height: 80px;  
110 - overflow: hidden;  
111 - text-overflow:ellipsis;  
112 - white-space: nowrap;  
113 - }  
114 - }  
115 - .desc{  
116 - height: 74px;  
117 - font-size: 26px;  
118 - font-weight: 400;  
119 - color: #666660;  
120 - line-height: 37px;  
121 - margin-top: 30px;  
122 - display: -webkit-box;  
123 - -webkit-box-orient: vertical;  
124 - -webkit-line-clamp: 2;  
125 - overflow: hidden;  
126 - }  
127 - .img-box {  
128 - width: 100%;  
129 - display: flex;  
130 - flex-wrap: wrap;  
131 - //justify-content: space-around;  
132 - list-style: none;  
133 - .item{  
134 - display: flex;  
135 - align-items: center;  
136 - justify-content: center;  
137 - padding:0 5px;  
138 - box-sizing: border-box;  
139 - position: relative;  
140 - .title{  
141 - position: absolute;  
142 - flex: 1;  
143 - font-size:28px;  
144 - color: #fff;  
145 - }  
146 - .img {  
147 - display: block;  
148 - width: 100%;  
149 - height: 340px;  
150 - }  
151 - .play_box{  
152 - width: 100%;  
153 - height: 100%;  
154 - position: absolute;  
155 - left: 0;  
156 - top:0;  
157 - //background-color: #000;  
158 - z-index: 1;  
159 - display: flex;  
160 - justify-content: center;  
161 - align-items: center;  
162 - img{  
163 - width: 86px;  
164 - height: 86px;  
165 - }  
166 - }  
167 - }  
168 - .two{  
169 - width: calc(calc(100% / 2));  
170 - margin-top: 10px;  
171 - .img {  
172 - height: 340px;  
173 - }  
174 - }  
175 - .three{  
176 - width: calc(calc(100% / 3));  
177 - margin-top: 10px;  
178 - .img {  
179 - height: 222px;  
180 - }  
181 - }  
182 - }  
183 - .address_info{  
184 - margin-top:30px;  
185 - font-size:24px;  
186 - font-weight: 300;  
187 - color: #9A9A9A;  
188 - line-height: 33px;  
189 - overflow: hidden;  
190 - .left{  
191 - display:flex;  
192 - align-items: center;  
193 - float:left;  
194 - img{  
195 - display:block;  
196 - width:22px;  
197 - height:22px;  
198 - margin-right: 10px;  
199 - }  
200 - }  
201 - .right{  
202 - float:right;  
203 - }  
204 - }  
205 - }  
206 -</style>  
207 -  
src/pages/test/test.less deleted 100644 → 0
  View file @a5c2e0c
src/pages/test/test.vue deleted 100644 → 0
  View file @a5c2e0c
1 -<template>  
2 -<div>  
3 - <!-- 搜索 -->  
4 - <div class="search_box">  
5 - <div class="search">  
6 - <div class="left">  
7 - 供给  
8 - <span @click="dropDownMenuShow=true" class="icon_triangle">  
9 - </span>  
10 - <!-- 下拉选项 -->  
11 - <div v-show="dropDownMenuShow" @click="dropDownMenuShow=false" class="drop_down_menu">  
12 - <span class="up_triangle">  
13 - </span>  
14 - <div class="box">  
15 - <div class="item">  
16 - 求购  
17 - </div>  
18 - <div class="item">  
19 - 供给  
20 - </div>  
21 - </div>  
22 - </div>  
23 - </div>  
24 - <!--分割线 -->  
25 - <div class="line"> </div>  
26 - <!--搜索框-->  
27 - <div class="right">  
28 - <input @focus="handleFocus"  
29 - @blur="handleblur"  
30 - placeholder="请输入货品关键字"  
31 - type="text" />  
32 - </div>  
33 - </div>  
34 - <div class="cancel">取消</div>  
35 - </div>  
36 - <!-- 分类 -->  
37 - <div class="classification_box">  
38 - <div class="item">  
39 - 品类  
40 - <span class="icon_triangle">  
41 - </span>  
42 - </div>  
43 - <!--分割线 -->  
44 - <div class="line"> </div>  
45 - <div class="item">  
46 - 供货期  
47 - <span class="icon_triangle">  
48 - </span>  
49 - </div>  
50 - <!--分割线 -->  
51 - <div class="line"> </div>  
52 - <div class="item">  
53 - 地区  
54 - <span class="icon_triangle">  
55 - </span>  
56 - </div>  
57 - </div>  
58 - <!-- item -->  
59 - <div class="list_box">  
60 - <item></item>  
61 - </div>  
62 -</div>  
63 -</template>  
64 -  
65 -<script>  
66 - import item from "./item";  
67 -export default {  
68 - data(){  
69 - return{  
70 - dropDownMenuShow:false,  
71 - }  
72 - },  
73 -//部件  
74 - components: {  
75 - item  
76 - },  
77 -//静态  
78 - props: [  
79 -],  
80 -//对象内部的属性监听，也叫深度监听  
81 - watch: {  
82 - },  
83 -//属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；  
84 - computed: {  
85 - },  
86 -//方法表示一个具体的操作，主要书写业务逻辑；  
87 - methods: {  
88 - /* 使文本框出现在视野内 */  
89 - // 键盘弹起  
90 - handleFocus(event) {  
91 - clearTimeout(this.timer);  
92 - },  
93 - // 键盘回落  
94 - handleblur() {  
95 - this.timer = setTimeout(() => {  
96 - document.body.scrollTop = 0;  
97 - window.pageXOffset = 0;  
98 - document.documentElement.scrollTop = 0;  
99 - }, 100);  
100 - },  
101 - // 安卓手机下弹起和收起  
102 - androidkeyboardOn() {  
103 - const innerHeight = window.innerHeight;  
104 - window.addEventListener("resize", () => {  
105 - const newInnerHeight = window.innerHeight;  
106 - if (innerHeight > newInnerHeight) {  
107 - this.androidKeyBoard = true;  
108 - } else {  
109 - this.androidKeyBoard = false;  
110 - }  
111 - });  
112 - },  
113 - },  
114 -//请求数据  
115 - created() {  
116 -},  
117 - mounted() {  
118 -}  
119 -}  
120 -</script>  
121 -  
122 -<style scoped lang="less" rel="stylesheet/less">  
123 -.icon_triangle{  
124 - display: block;  
125 - width: 0;  
126 - height: 0;  
127 - border-left: 8px solid transparent;  
128 - border-right: 8px solid transparent;  
129 - border-top: 8px solid #4A4A4A;  
130 - margin-left: 10px;  
131 -}  
132 -.search_box{  
133 - display: flex;  
134 - .search{  
135 - width: 604px;  
136 - height: 58px;  
137 - background: #F9F9F9;  
138 - border-radius: 32px;  
139 - display: flex;  
140 - margin: 20px 30px;  
141 - .left{  
142 - height: 37px;  
143 - font-size: 26px;  
144 - font-weight: 400;  
145 - color: #333333;  
146 - line-height: 37px;  
147 - margin:11px 10px 11px 30px;  
148 - display: flex;  
149 - align-items: center;  
150 - position: relative;  
151 - .drop_down_menu{  
152 - position: absolute;  
153 - top: 50px;  
154 - left: -36px;  
155 - .up_triangle{  
156 - display: block;  
157 - width: 0;  
158 - height: 0;  
159 - border-left: 12px solid transparent;  
160 - border-right: 12px solid transparent;  
161 - border-bottom: 12px solid rgba(0, 0, 0, 0.5);  
162 - margin-left: 40px;  
163 - }  
164 - .box{  
165 - width: 160px;  
166 - height: 160px;  
167 - background: rgba(0, 0, 0, 0.5);  
168 - border-radius: 18px;  
169 - .item{  
170 - height: 40px;  
171 - font-size: 28px;  
172 - font-weight: 400;  
173 - color: #FFFFFF;  
174 - line-height: 40px;  
175 - padding: 20px 0;  
176 - text-align: center;  
177 - }  
178 - .item:first-child{  
179 - margin: 0 20px;  
180 - border-bottom: solid 4px #999999;  
181 - }  
182 - }  
183 - }  
184 - }  
185 - .line{  
186 - width: 1px;  
187 - height: 22px;  
188 - background-color: #858585;  
189 - margin: 18px 20px 18px 15px;  
190 - }  
191 - .right{  
192 - flex: 1;  
193 - input{  
194 - width: 100%;  
195 - line-height: 58px;  
196 - outline-style: none;  
197 - border:0;  
198 - border-radius: 32px;  
199 - background: #F9F9F9;  
200 - font-weight: 400;  
201 - color: #333;  
202 - font-weight: 400;  
203 - font-size: 26px;  
204 - }  
205 - }  
206 - }  
207 - .cancel{  
208 - height: 58px;  
209 - line-height: 58px;  
210 - font-size: 28px;  
211 - font-weight: 400;  
212 - color: #F5A623;  
213 - margin: 20px 30px 20px 0;  
214 - }  
215 -}  
216 -.classification_box{  
217 - display: flex;  
218 - align-items: center;  
219 - padding-bottom: 20px;  
220 - .item{  
221 - flex: 1;  
222 - display: flex;  
223 - align-items: center;  
224 - justify-content: center;  
225 - }  
226 - .line{  
227 - width: 1px;  
228 - height: 24px;  
229 - background-color: #DCDCDC;  
230 - }  
231 -}  
232 -// 页面信息  
233 -.list_box{  
234 - padding: 20px 0;  
235 - background-color: #F3F3F3;  
236 - .item_box{  
237 - margin: 20px;  
238 - padding: 30px 20px 20px 20px;  
239 - background-color: #fff;  
240 - border-radius: 16px;  
241 - .user_info{  
242 - display:flex;  
243 - .pic{  
244 - display:block;  
245 - width:80px;  
246 - height:80px;  
247 - border-radius: 50%;  
248 - margin-right: 90px;  
249 - }  
250 - .name{  
251 - flex: 1;  
252 - height: 80px;  
253 - font-size: 30px;  
254 - font-family: PingFangSC-Regular, PingFang SC;  
255 - font-weight: 400;  
256 - color: #333333;  
257 - line-height: 80px;  
258 - overflow: hidden;  
259 - text-overflow:ellipsis;  
260 - white-space: nowrap;  
261 - }  
262 - }  
263 - .desc{  
264 - height: 74px;  
265 - font-size: 26px;  
266 - font-weight: 400;  
267 - color: #666660;  
268 - line-height: 37px;  
269 - margin-top: 30px;  
270 - display: -webkit-box;  
271 - -webkit-box-orient: vertical;  
272 - -webkit-line-clamp: 2;  
273 - overflow: hidden;  
274 - }  
275 - .img_box{  
276 - width: 100%;  
277 - display: -ms-flexbox;  
278 - display: flex;  
279 - -ms-flex-wrap: wrap;  
280 - flex-wrap: wrap;  
281 - list-style: none;  
282 - .img{  
283 - padding: 5px;  
284 - flex:1  
285 - }  
286 - }  
287 - .address_info{  
288 - margin-top:30px;  
289 - font-size:24px;  
290 - font-weight: 300;  
291 - color: #9A9A9A;  
292 - line-height: 33px;  
293 - overflow: hidden;  
294 - .left{  
295 - display:flex;  
296 - align-items: center;  
297 - float:left;  
298 - img{  
299 - display:block;  
300 - width:22px;  
301 - height:22px;  
302 - margin-right: 10px;  
303 - }  
304 - }  
305 - .right{  
306 - float:right;  
307 - }  
308 - }  
309 - }  
310 -}  
311 -</style>  
312 -  
src/router/index.js
  View file @5a217df
@@ -14,7 +14,7 @@ const router = new Router({ @@ -14,7 +14,7 @@ const router = new Router({
14 component: resolve => { 14 component: resolve => {
15 require(["@/pages/common/common"], resolve); 15 require(["@/pages/common/common"], resolve);
16 }, 16 },
17 - redirect: "/mall", 17 + redirect: "/mall2",
18 children: [ 18 children: [
19 { 19 {
20 // 优选库商城活动页 20 // 优选库商城活动页
@@ -94,7 +94,7 @@ const router = new Router({ @@ -94,7 +94,7 @@ const router = new Router({
94 } 94 }
95 }, 95 },
96 { 96 {
97 - // 优选库环球优物更多列表页 97 + // 达人列表页
98 path: "/darenList", 98 path: "/darenList",
99 name: "darenList", 99 name: "darenList",
100 component: resolve => { 100 component: resolve => {
@@ -159,22 +159,28 @@ const router = new Router({ @@ -159,22 +159,28 @@ const router = new Router({
159 requireAuth: false 159 requireAuth: false
160 } 160 }
161 }, 161 },
  162 +
  163 + /* 优选和商城页面改版升级页面 开始 */
  164 +
162 { 165 {
163 - // 暂未开通  
164 - path: "/test",  
165 - name: "test",  
166 - component: resolve => {  
167 - require(["@/pages/test/test"], resolve);  
168 - },  
169 - meta: {  
170 - requireAuth: false  
171 - }  
172 - } 166 + // 优选库商城活动页
  167 + path: "/mall2",
  168 + name: "mall2",
  169 + component: resolve => {
  170 + require(["@/pages/mall2/mall2"], resolve);
  171 + },
  172 + meta: {
  173 + requireAuth: false
  174 + }
  175 + },
  176 +
  177 + /* 优选和商城页面改版升级页面 结束 */
  178 +
173 ] 179 ]
174 }, 180 },
175 { 181 {
176 path: "*", 182 path: "*",
177 - redirect: "/mall" 183 + redirect: "/"
178 } 184 }
179 ] 185 ]
180 }); 186 });
static/img/box_banner.jpg 0 → 100644
View file @5a217df

28.3 KB
static/img/text_bg_title_bg.jpg 0 → 100644
View file @5a217df

7.79 KB