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 39 .price-box {
40 40 display: flex;
41 41 justify-content: flex-start;
42   - align-items: center;
  42 + align-items: baseline;
43 43 margin-top: 20px;
44 44 .symbol {
45 45 color: #FC1541;
... ... @@ -51,6 +51,17 @@
51 51 white-space: nowrap;
52 52 text-overflow: ellipsis;
53 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 7 <slot name="flag"></slot>
8 8 </div>
9 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 11 <div class="price-box">
12 12 <div class="symbol">¥&nbsp;</div>
13 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 15 </div>
15 16 <div class="ads" v-if="pid == '2'">
16 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 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 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 50 Vue.config.productionTip = false;
51 51  
52 52 // 部署模式设置（开发模式："dev"，测试模式："test"，生产模式："prod"）
53   -Vue.prototype.mode = "prod";
  53 +Vue.prototype.mode = "dev";
54 54  
55 55 // 微信JS-SDK对象
56 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 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 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 14 component: resolve => {
15 15 require(["@/pages/common/common"], resolve);
16 16 },
17   - redirect: "/mall",
  17 + redirect: "/mall2",
18 18 children: [
19 19 {
20 20 // 优选库商城活动页
... ... @@ -94,7 +94,7 @@ const router = new Router({
94 94 }
95 95 },
96 96 {
97   - // 优选库环球优物更多列表页
  97 + // 达人列表页
98 98 path: "/darenList",
99 99 name: "darenList",
100 100 component: resolve => {
... ... @@ -159,22 +159,28 @@ const router = new Router({
159 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 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