w-front-end / select_good · Commits

Commit 84b48cea7e7b7c83bf5c742716d24120bb0388f1

Authored by 王强
1 parent af584f07

添加环球优物首页和“更多”列表页~

Inline Side-by-side
Showing 14 changed files with 573 additions and 631 deletions
src/pages/hqyw/hqyw.less
  View file @84b48ce
1 -.mall-box {  
2 - margin-top: 20px;  
3 - /deep/ .van-pull-refresh {  
4 - .van-pull-refresh__track {  
5 - .van-pull-refresh__head {  
6 - font-size: 30px;  
7 - }  
8 - }  
9 - } 1 +@charset "UTF-8";
  2 +
  3 +.hqyw{
  4 + width: 92%;
  5 + margin: 0 4%;
10 } 6 }
  7 +.header{
  8 + width:100%;
  9 + /* height:128px; */
  10 + background: #fff;
  11 + position: fixed;
  12 + top:0;
  13 + left:0;
  14 + right:0;
  15 + z-index:10000;
  16 +}
  17 +.header_ztl{
  18 + width:100%;
  19 + /* height:32px; */
  20 + background: #fff;
  21 +}
  22 +.header_top{
  23 + width:100%;
  24 + height:96px;
  25 + background: #fff;
  26 + display: flex;
  27 +}
  28 +.headerBackground{
  29 + width:100%;
  30 +}
  31 +.header_back{
  32 + padding:29px 10px 29px 28px;
  33 + width:38px;
  34 + height:38px;
  35 +}
  36 +.header_back img{
  37 + width:38px;
  38 + height:38px;
  39 +}
  40 +.header_close{
  41 + padding:29px 30px 29px 10px;
  42 + width:38px;
  43 + height:38px;
  44 +}
  45 +.header_close img{
  46 + width:38px;
  47 + height:38px;
  48 +}
  49 +.header_search{
  50 + width:-moz-calc(100% - 155px);
  51 + width:-webkit-calc(100% -155px);
  52 + width: calc(100% - 155px);
  53 + height:96px;
  54 +}
  55 +.hqyw_swiper{
  56 + margin-top: 30px;
  57 + position: relative;
  58 +}
  59 +.swiper-slide{
  60 + border-radius: 20px;
  61 + height: 356px;
  62 + overflow: hidden;
  63 +}
  64 +.hqyw_swiper_img{
  65 + height: 356px;
  66 + width: 100%;
  67 + object-fit: cover;
  68 +}
  69 +.swiper_pagination{
  70 + text-align: center;
  71 + padding: 17px 0 22px 0;
  72 +}
  73 +.swiper_pagination li{
  74 + width:6.5px;/*no*/
  75 + height:6.5px;/*no*/
  76 + background:rgba(219,220,219,1);
  77 + margin: 0 5px;/*no*/
  78 + display: inline-block;
  79 + border-radius: 50%;
  80 +}
  81 +.swiper_pagination li.swiper_page_active{
  82 + background:rgba(50,50,50,1);
  83 +}
  84 +.card1{
  85 + background:rgba(255,255,255,1);
  86 + box-shadow:0px 0px 18px 0px rgba(0,0,0,0.1);
  87 + border-radius:26px;
  88 + overflow: hidden;
  89 + margin-bottom: 40px;
  90 +}
  91 +.top_pic{
  92 + height: 352px;
  93 +}
  94 +.top_pic_img{
  95 + height: 100%;
  96 + width: 100%;
  97 + object-fit: cover;
  98 +}
  99 +.list{
  100 + margin-top: 10px;
  101 +}
  102 +.scoll_div{
  103 + width: 100%;
  104 + overflow: hidden;
  105 +}
  106 +.scoll_ul{
  107 + width: auto;
  108 + overflow-x: auto;
  109 + overflow-y: hidden;
  110 + -webkit-overflow-scrolling: touch;
  111 + white-space: nowrap;
  112 + height: 100%;
  113 + padding-bottom: 20px;
  114 + margin-bottom: -20px;
  115 +}
  116 +.scoll_li{
  117 + display: inline-block;
  118 + width: 34%;
  119 + height: 100%;
  120 + margin-right:16px;
  121 + margin-left:14px;
  122 +
  123 +}
  124 +.li_pic{
  125 + height: 240px;
  126 + width: 100%;
  127 +}
  128 +.li_pic_img{
  129 + height: 100%;
  130 + width: 100%;
  131 + object-fit: cover;
  132 +}
  133 +.li_name{
  134 + margin-top: 14px;
  135 + font-size:24px;
  136 + font-weight:400;
  137 + color:rgba(30,30,30,1);
  138 + line-height:33px;
  139 + height: 66px;
  140 + /*! autoprefixer: off */
  141 + -webkit-box-orient: vertical;
  142 + /*! autoprefixer: on */
  143 + display: -webkit-box;
  144 + -webkit-line-clamp: 2;
  145 + overflow: hidden;
  146 + white-space: normal;
  147 +}
  148 +.li_price{
  149 + margin-bottom: 32px;
  150 +}
  151 +.li_price p{
  152 + font-size:30px;
  153 + font-weight:500;
  154 + color:rgba(255,21,67,1);
  155 + line-height:42px;
  156 + display: inline-block;
  157 + margin-left: 30px;
  158 +}
  159 +.li_price span{
  160 + font-size:24px;
  161 + font-weight:500;
  162 + color:rgba(30,30,30,1);
  163 + line-height:33px;
  164 + text-decoration: line-through;
  165 + margin-left: 10px;
  166 + display: inline-block;
  167 +}
  168 +.hqyw_qyzz{
  169 + width: 100%;
  170 + height: 94px;
  171 + margin-bottom: 40px;
  172 +}
  173 +.hqyw_qyzz_img{
  174 + height: 100%;
  175 + width: 100%;
  176 +}
  177 +.card2{
  178 + background:rgba(255,255,255,1);
  179 + box-shadow:0px 0px 18px 0px rgba(0,0,0,0.1);
  180 + border-radius:26px;
  181 + margin-bottom: 40px;
  182 +}
  183 +.card_title{
  184 + display: flex;
  185 + justify-content: space-between;
  186 + height: 130px;
  187 +}
  188 +.title_left{
  189 + font-size:42px;
  190 + font-weight:500;
  191 + color:rgba(17,17,17,1);
  192 + line-height:59px;
  193 + margin:auto 30px;
  194 +}
  195 +.title_right{
  196 + margin: auto 50px;
  197 + font-size:20px;
  198 + font-weight:500;
  199 + color:rgba(70,70,70,1);
  200 + line-height:28px;
  201 +}
  202 +.title_right_img{
  203 + height: 16px;
  204 + width: 16px;
  205 +}
  206 +.goods_single{
  207 + width: 35%;
  208 + display: inline-block;
  209 + margin: 0 7.5%;
  210 + margin-bottom: 30px;
  211 +}
  212 +.goods_pic{
  213 + width: 100%;
  214 + height: 270px;
  215 + margin-bottom: 10px;
  216 +}
  217 +.goods_pic_img{
  218 + height: 100%;
  219 + width: 100%;
  220 + object-fit: cover;
  221 +}
  222 +.goods_name{
  223 + font-size:24px;
  224 + font-weight:400;
  225 + color:rgba(30,30,30,1);
  226 + line-height:33px;
  227 + /*! autoprefixer: off */
  228 + -webkit-box-orient: vertical;
  229 + /*! autoprefixer: on */
  230 + display: -webkit-box;
  231 + -webkit-line-clamp: 2;
  232 + overflow: hidden;
  233 + white-space: normal;
  234 +}
  235 +.goods_price{
  236 + margin-top: 14px;
  237 +}
  238 +.goods_price p{
  239 + font-size:30px;
  240 + font-weight:500;
  241 + color:rgba(255,21,67,1);
  242 + line-height:42px;
  243 + display: inline-block;
  244 + margin-left: 30px;
  245 +}
  246 +.goods_price span{
  247 + font-size:24px;
  248 + font-weight:500;
  249 + color:rgba(30,30,30,1);
  250 + line-height:33px;
  251 + text-decoration: line-through;
  252 + margin-left: 10px;
  253 + display: inline-block;
  254 +}
  255 +.list{
  256 + width: 88%;
  257 + margin: 30px 6% 0 6%;
  258 + display: flex;
  259 + justify-content: space-between;
  260 +}
  261 +.list .goods_pic{
  262 + width: 36%;
  263 + height: 240px;
  264 +}
  265 +.list .goods_pic_img{
  266 + height: 100%;
  267 + width: 100%;
  268 + object-fit: cover;
  269 +}
  270 +.list .goods_right{
  271 + width: 55%;
  272 + position: relative;
  273 +}
  274 +.list .goods_title{
  275 + font-size:28px;
  276 + font-weight:400;
  277 + color:rgba(30,30,30,1);
  278 + line-height:40px;
  279 + /*! autoprefixer: off */
  280 + -webkit-box-orient: vertical;
  281 + /*! autoprefixer: on */
  282 + display: -webkit-box;
  283 + -webkit-line-clamp: 2;
  284 + overflow: hidden;
  285 + white-space: normal;
  286 +}
  287 +.list .goods_price{
  288 + position: absolute;
  289 + bottom: 15px;
  290 + left: 0;
  291 +}
  292 +.list .goods_price p{
  293 + font-size:30px;
  294 + font-weight:500;
  295 + color:rgba(255,21,67,1);
  296 + line-height:42px;
  297 + display: inline-block;
  298 +}
  299 +.list .goods_price span{
  300 + font-size:24px;
  301 + font-weight:500;
  302 + color:rgba(30,30,30,1);
  303 + line-height:33px;
  304 + text-decoration: line-through;
  305 + margin-left: 10px;
  306 + display: inline-block;
  307 +}
  308 +.bottomBtn{
  309 + width:100%;
  310 + height:98px;
  311 + background:rgba(255,255,255,1);
  312 + border:1px solid rgba(228,228,228,1);
  313 + display: flex;
  314 + position: fixed;
  315 + bottom:0;
  316 + left:0;
  317 + right:0;
  318 +}
  319 +.bottomBtnBackground{
  320 + width:100%;
  321 + height:98px;
  322 + background:rgba(255,255,255,1);
  323 +}
  324 +.bottomBtnLeft,.bottomBtnRight{
  325 + width:49.5%;
  326 + height:42px;
  327 + margin:28px 0;
  328 + display: inline-block;
  329 + display: flex;
  330 + justify-content: center;
  331 +}
  332 +.bottomBtnLeft img,.bottomBtnRight img{
  333 + width:42px;
  334 + height:42px;
  335 +}
  336 +.bottomBtnLeft p,.bottomBtnRight p{
  337 + font-size:30px;
  338 + font-weight:400;
  339 + line-height:42px;
  340 + margin-left:17px;
  341 +}
  342 +.bottomBtnLeft p{
  343 + color:rgba(255,114,92,1);
  344 +}
  345 +.bottomBtnRight p{
  346 + color:rgba(200,200,200,1);
  347 +}
  348 +.bottomBtnLeft{
  349 + border-right:1px solid #E4E4E4;
  350 +}
11 \ No newline at end of file 351 \ No newline at end of file
src/pages/hqyw/hqyw.vue
  View file @84b48ce
1 <template> 1 <template>
2 - <div> 2 + <div class="hqyw-box">
  3 +
3 <!--返回按钮--> 4 <!--返回按钮-->
4 <div class="header"> 5 <div class="header">
5 - <div class="header_ztl" :style="'height:'+statusHeight+'px;'"></div> 6 + <div class="header_ztl"></div>
6 <div class="header_top"> 7 <div class="header_top">
7 - <div class="header_back" @click="back()">  
8 - <img src="../../../assets/images/hqywBack1.png"> 8 + <div class="header_back" @click="back">
  9 + <img src="static/img/hqywBack1.png">
9 </div> 10 </div>
10 - <div class="header_close" @click="back()">  
11 - <img src="../../../assets/images/hqywClose.png"> 11 + <div class="header_close" @click="back">
  12 + <img src="static/img/hqywClose.png">
12 </div> 13 </div>
13 <div class="header_search"> 14 <div class="header_search">
14 15
15 </div> 16 </div>
16 </div> 17 </div>
17 - </div> 18 + </div>
  19 +
18 <div class="headerBackground"> 20 <div class="headerBackground">
19 - <div class="header_ztl" :style="'height:'+statusHeight+'px;'"></div> 21 + <div class="header_ztl"></div>
20 <div class="header_top"></div> 22 <div class="header_top"></div>
21 - </div>  
22 - <div class="hqyw" v-if="!errShow"> 23 + </div>
  24 +
  25 + <div class="hqyw">
23 <div class="hqyw_swiper"> 26 <div class="hqyw_swiper">
24 - <swiper :options="swiperOption" >  
25 - <swiper-slide v-for="(item,index) in list.banner" :key="index">  
26 - <a :href="item.to" v-if="item.type=='5'">  
27 - <img class="hqyw_swiper_img" :src="item.simg">  
28 - </a>  
29 - <img class="hqyw_swiper_img" :src="item.simg" :data-type="item.type" :data-to="item.to" :data-shop_type="item.shop_type" v-if="item.type!='5'">  
30 - </swiper-slide>  
31 - </swiper> 27 +
  28 + <!-- 轮播 -->
  29 + <swiper v-if="swipers"
  30 + :swipers="swipers">
  31 + </swiper>
  32 +
  33 + <!-- 轮播提示符按钮 -->
32 <div class="swiper_pagination"> 34 <div class="swiper_pagination">
33 - <li v-for="(item,index) in list.banner" :key="index" :class="{'swiper_page_active':swiperIndex==index}"></li> 35 + <li v-for="(item, index) in swipers" :key="index" :class="{'swiper_page_active': swiperIndex == index}"></li>
34 </div> 36 </div>
35 </div> 37 </div>
36 38
37 - <a @click="toAppOnlineRetailers(list.ads.type,list.ads.to,list.ads.shop_type)"> 39 + <div v-if="ads" @click="toDetail(ads)">
38 <div class="hqyw_qyzz"> 40 <div class="hqyw_qyzz">
39 - <img class="hqyw_qyzz_img" :src="list.ads.simg"> 41 + <img class="hqyw_qyzz_img" :src="ads.simg">
40 </div> 42 </div>
41 - </a> 43 + </div>
42 44
43 - <div v-for="(item,index) in list.shopMarket" :key="index">  
44 - <div class="card1" v-if="item.style=='1'"> 45 + <div v-for="(item, index) in shopMarkets" :key="index">
  46 + <div class="card1" v-if="item.style == '1'">
45 <div class="top_pic"> 47 <div class="top_pic">
46 - <a :href="'hqywList.html?shop_id='+item.id+'&id='+id">  
47 - <img class="top_pic_img" :src="item.simg"> 48 + <a @click="more({shop_id: item.id, id: $route.query.id})">
  49 + <img class="top_pic_img" v-lazy="item.simg">
48 </a> 50 </a>
49 </div> 51 </div>
50 <div class="list"> 52 <div class="list">
51 - <div class="scoll_div" v-on:touchstart="ss($event)" v-on:touchend="ss($event)" v-on:touchmove="ss($event)"> 53 + <div class="scoll_div">
52 <ul class="scoll_ul"> 54 <ul class="scoll_ul">
53 - <li class="scoll_li" v-for="(value,index) in item.goods" :key="index" @click="toAppOnlineRetailers(value.type,value.to,value.shop_type)"> 55 + <li class="scoll_li" v-for="(value, index) in item.goods" :key="index" @click="toDetail(value)">
54 <div class="li_pic"> 56 <div class="li_pic">
55 - <img class="li_pic_img" :src="value.simg"> 57 + <img class="li_pic_img" v-lazy="value.simg">
56 </div> 58 </div>
57 - <div class="li_name" style="-webkit-box-orient: vertical;">{{value.title}}</div> 59 + <div class="li_name">{{value.title}}</div>
58 <div class="li_price"> 60 <div class="li_price">
59 <p>￥{{integer(value.price)}}</p> 61 <p>￥{{integer(value.price)}}</p>
60 - <span v-if="Number(value.prices)>Number(value.price)">￥{{integer(value.prices)}}</span> 62 + <span v-if="Number(value.prices) > Number(value.price)">￥{{integer(value.prices)}}</span>
61 </div> 63 </div>
62 </li> 64 </li>
63 </ul> 65 </ul>
@@ -65,632 +67,217 @@ @@ -65,632 +67,217 @@
65 </div> 67 </div>
66 </div> 68 </div>
67 69
68 - <div class="card2" v-if="item.style=='2'"> 70 + <div class="card2" v-if="item.style == '2'">
69 <div class="card_title"> 71 <div class="card_title">
70 <div class="title_left">{{item.title}}</div> 72 <div class="title_left">{{item.title}}</div>
71 - <a :href="'hqywList.html?shop_id='+item.id+'&id='+id" class="title_right">  
72 - <div > 73 + <a @click="more({shop_id: item.id, id: $route.query.id})" class="title_right">
  74 + <div>
73 MORE 75 MORE
74 - <img class="title_right_img" src="@/assets/images/hqyw/gd.png"> 76 + <img class="title_right_img" src="static/img/gd.png">
75 </div> 77 </div>
76 </a> 78 </a>
77 </div> 79 </div>
78 <div class="goods_list"> 80 <div class="goods_list">
79 - <div class="goods_single" v-for="(value,index) in item.goods" :key="index" @click="toAppOnlineRetailers(value.type,value.to,value.shop_type)"> 81 + <div class="goods_single" v-for="(value, index) in item.goods" :key="index" @click="toDetail(value)">
80 <div class="goods_pic"> 82 <div class="goods_pic">
81 - <img class="goods_pic_img" :src="value.simg"> 83 + <img class="goods_pic_img" v-lazy="value.simg">
82 </div> 84 </div>
83 - <div class="goods_name" style="-webkit-box-orient: vertical;">{{value.title}}</div> 85 + <div class="goods_name">{{value.title}}</div>
84 <div class="goods_price"> 86 <div class="goods_price">
85 <p>￥{{integer(value.price)}}</p> 87 <p>￥{{integer(value.price)}}</p>
86 - <span v-if="Number(value.prices)>Number(value.price)">￥{{integer(value.prices)}}</span> 88 + <span v-if="Number(value.prices) > Number(value.price)">￥{{integer(value.prices)}}</span>
87 </div> 89 </div>
88 </div> 90 </div>
89 </div> 91 </div>
90 </div> 92 </div>
91 93
92 - <div class="card2" v-if="item.style=='3'"> 94 + <div class="card2" v-if="item.style == '3'">
93 <div class="card_title"> 95 <div class="card_title">
94 <div class="title_left">{{item.title}}</div> 96 <div class="title_left">{{item.title}}</div>
95 - <a :href="'hqywList.html?shop_id='+item.id+'&id='+id" class="title_right"> 97 + <a @click="more({shop_id: item.id, id: $route.query.id})" class="title_right">
96 <div > 98 <div >
97 MORE 99 MORE
98 - <img class="title_right_img" src="@/assets/images/hqyw/gd.png"> 100 + <img class="title_right_img" src="static/img/gd.png">
99 </div> 101 </div>
100 </a> 102 </a>
101 </div> 103 </div>
102 - <div class="list" v-for="(value,index) in item.goods" :key="index" @click="toAppOnlineRetailers(value.type,value.to,value.shop_type)"> 104 + <div class="list" v-for="(value, index) in item.goods" :key="index" @click="toDetail(value)">
103 <div class="goods_pic"> 105 <div class="goods_pic">
104 - <img class="goods_pic_img" :src="value.simg"> 106 + <img class="goods_pic_img" v-lazy="value.simg">
105 </div> 107 </div>
106 -  
107 <div class="goods_right"> 108 <div class="goods_right">
108 - <div class="goods_title" style="-webkit-box-orient: vertical;">{{value.title}}</div> 109 + <div class="goods_title">{{value.title}}</div>
109 <div class="goods_price"> 110 <div class="goods_price">
110 <p>￥{{integer(value.price)}}</p> 111 <p>￥{{integer(value.price)}}</p>
111 - <span v-if="Number(value.prices)>Number(value.price)">￥{{integer(value.prices)}}</span> 112 + <span v-if="Number(value.prices) > Number(value.price)">￥{{integer(value.prices)}}</span>
112 </div> 113 </div>
113 </div> 114 </div>
114 </div> 115 </div>
115 </div> 116 </div>
116 </div> 117 </div>
117 - <!-- <div class="bottomBtnBackground">  
118 - </div>  
119 - <div class="bottomBtn">  
120 - <div class="bottomBtnLeft">  
121 - <div class="bottomBtnLeft_img">  
122 - <img src="../../../assets/images/hqywsy.png">  
123 - </div>  
124 - <p>首页</p>  
125 - </div>  
126 -  
127 - <a :href="shopUrl" class="bottomBtnRight">  
128 - <div class="bottomBtnRight_img">  
129 - <img src="../../../assets/images/hqywfl.png">  
130 - </div>  
131 - <p>分类</p>  
132 - </a>  
133 -  
134 - </div> -->  
135 </div> 118 </div>
136 - <!--接口请求失败页面-->  
137 - <error v-if="errShow"></error>  
138 -  
139 </div> 119 </div>
140 </template> 120 </template>
141 121
142 <script> 122 <script>
143 -//import Vue from 'vue';  
144 -import axios from 'axios';  
145 -const qs = require('qs');  
146 -import Bridge from '../../../assets/js/bridge.js';  
147 -Vue.prototype.$bridge = Bridge;  
148 -import { swiper, swiperSlide } from 'vue-awesome-swiper';  
149 -import 'swiper/dist/css/swiper.css';  
150 -//接口请求失败  
151 -import error from '@/pages/index/components/error.vue'  
152 -var sha1 = require('sha1');  
153 -Vue.component('error', error)  
154 -//app端的滑动值  
155 -var touchSlop = 0;  
156 -//初次按下时的x, y轴值  
157 -var mLastClientX, mLastClientY;  
158 -//是否处于滑动中  
159 -var isBeingDrag = false;  
160 -//js附值,在web加载完成时将android的滑动单位值传给js  
161 -function initTouchSlop(appTouchSlop) {  
162 - touchSlop = appTouchSlop;  
163 -}  
164 -export default {  
165 - components: {  
166 - swiper,  
167 - swiperSlide,  
168 - },  
169 - data(){  
170 - const self=this;  
171 - return{  
172 - errShow:false,//接口请求错误  
173 - list:[],  
174 - swiperIndex:0,//轮播图的index  
175 - swiperOption:{  
176 - loop:true,  
177 - // autoplay: {  
178 - // delay: 3000,//3秒切换一次  
179 - // stopOnLastSlide:false,  
180 - // disableOnInteraction:false,  
181 - // },  
182 - pagination: true,  
183 - on:{  
184 - transitionEnd:function(){//获取到索引传给swiperIndex  
185 - self.swiperIndex=this.realIndex;  
186 - },  
187 - click: function(e){  
188 - var type=e.target.getAttribute('data-type');  
189 - var to=e.target.getAttribute('data-to');  
190 - var shop_type=e.target.getAttribute('data-shop_type');  
191 - //console.log(type,to,shop_type)  
192 - self.toAppOnlineRetailers(type,to,shop_type);  
193 - },  
194 - },  
195 -  
196 - },  
197 - shopUrl:"",  
198 - statusHeight:0,//状态栏的高度  
199 - id:this.getUrlParam("id"),//id  
200 - }  
201 - },  
202 - created(){  
203 - this.onLoad();  
204 - if(this.environment=="test"){  
205 - this.shopUrl="https://wjjshop.cnlive.com/html/mall/1/#/pages/sellerCategory/sellerCategory?shop_id=10";  
206 - }else{  
207 - this.shopUrl="https://managemall.cnlive.com/html/mall/1/#/pages/sellerCategory/sellerCategory?shop_id=10";  
208 - }  
209 - },  
210 - computed:{  
211 - environment:function(){  
212 - return this.$store.state.new.environment  
213 - },  
214 - appId:function(){  
215 - return this.$store.state.new.appId  
216 - },  
217 - plat:function(){  
218 - return this.$store.state.new.plat  
219 - },  
220 - sharewjjShow:function(){  
221 - return this.$store.state.new.sharewjjShow  
222 - },  
223 - hqywAppKey:function(){  
224 - return this.$store.state.hqyw.hqywAppKey  
225 - },  
226 - hqywSign:function(){  
227 - return this.$store.state.hqyw.hqywSign  
228 - },  
229 - },  
230 - methods:{  
231 - back(){  
232 - if(window.webkit&&window.webkit.messageHandlers) {  
233 - window.webkit.messageHandlers.pop.postMessage({body: {}});  
234 - } else if(window.obj) {  
235 - window.obj.finish();  
236 - }  
237 - },  
238 - onLoad(){  
239 - var that=this;  
240 - if(this.environment=="test"){  
241 - var apiUrl="https://wjjshop.cnlive.com/Api/index2/shopIndexHq";  
242 - axios.post(apiUrl,qs.stringify({  
243 - "shop_id":"19",  
244 - "id":this.id,  
245 - })).then( (response) => {  
246 - this.list=response.data.data;  
247 - //console.log(this.list)  
248 - },(response) => {  
249 - that.errShow=true;  
250 - })  
251 - }else{  
252 - var apiUrl="https://managemall.cnlive.com/Api/index2/shopIndexHq";  
253 - function timest() {  
254 - return Math.round(new Date().getTime()/1000);  
255 - }  
256 - var Timestamp=timest();  
257 - axios.defaults.headers.post['App-Key'] = this.hqywAppKey;  
258 - axios.defaults.headers.post['Timestamp'] = Timestamp;  
259 - axios.defaults.headers.post['Signature'] = sha1(this.hqywAppKey+this.hqywSign+Timestamp);  
260 - axios.post(apiUrl,qs.stringify({  
261 - "shop_id":"19",  
262 - "id":this.id,  
263 - })).then( (response) => {  
264 - this.list=response.data.data;  
265 - //console.log(this.list)  
266 - },(response) => {  
267 - that.errShow=true;  
268 - })  
269 - }  
270 -  
271 -  
272 - },  
273 - toAppOnlineRetailers(type,to,shop_type){  
274 - //console.log(type,to,shop_type)  
275 - //给app传参  
276 - let toAppOnlineRetailersData={  
277 - "type": type?type:"",  
278 - "to": to?to:"",  
279 - "shop_type": shop_type?shop_type:"",  
280 - };  
281 - //console.log(toAppOnlineRetailersData)  
282 - if(this.plat=='a'){  
283 - window.Android.wjjToAppOnlineRetailers(JSON.stringify(toAppOnlineRetailersData));  
284 - }else if(this.plat=='i'){  
285 - window.webkit.messageHandlers.wjjToAppOnlineRetailers.postMessage({body:toAppOnlineRetailersData});  
286 - }  
287 - },  
288 - integer(num){  
289 - return num.replace(/\.00/g,"");  
290 - },  
291 - ss:function(event){  
292 - if(this.plat=="a"&&this.sharewjjShow){  
293 - var touch = event.target;  
294 - switch (event.type) {  
295 - case "touchstart":  
296 - mLastClientX = touch.clientX;  
297 - mLastClientY = touch.clientY;  
298 - isBeingDrag = false;  
299 - window.Android.requestEvent(true);  
300 - break;  
301 - case "touchmove":  
302 - if (!isBeingDrag) {  
303 - var xDiff = Math.abs(touch.clientX - mLastClientX);  
304 - var yDiff = Math.abs(touch.clientY - mLastClientY);  
305 - //console.log(xDiff + " " + yDiff);  
306 - if (xDiff >= touchSlop) {  
307 - isBeingDrag = true;  
308 - } else if(yDiff > touchSlop) {  
309 - isBeingDrag = true;  
310 - window.Android.requestEvent(false);  
311 - }  
312 - }  
313 - break;  
314 - case "touchend":  
315 - window.Android.requestEvent(false);  
316 - break;  
317 -  
318 - }  
319 - }else{  
320 - return false;  
321 - }  
322 - },  
323 - //获取url地址里的参数  
324 - getUrlParam:function(name){  
325 - var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");  
326 - var r =window.location.search.substr(1).match(reg);  
327 - if (r != null) return unescape(r[2]); return "";  
328 - },  
329 - },  
330 - mounted:function(){  
331 - var that=this;  
332 - window["getStatusHeight"] = function (height) {  
333 - that.statusHeight=JSON.parse(height).statusHeight;  
334 - };  
335 -  
336 - if(window.webkit&&window.webkit.messageHandlers) {  
337 - window.webkit.messageHandlers.getStatusHeight.postMessage({body: {}});  
338 - } else if(window.obj) {  
339 - window.obj.getStatusHeight();  
340 - }  
341 -  
342 - // var height=JSON.stringify({  
343 - // "statusHeight": 20,  
344 - // });  
345 - // getStatusHeight(height);  
346 - // console.log(this.statusHeight)  
347 - },  
348 -} 123 +
  124 + // 引入组件
  125 + import { Toast, Indicator } from "mint-ui";
  126 + import swiper from "@/components/swiper/swiper";
  127 +
  128 + export default {
  129 + name: 'hqyw',
  130 + data() {
  131 + return {
  132 + list:[],
  133 + swipers: null, // banner数据
  134 + swiperIndex: 0, // 轮播索引
  135 + ads: null, // 广告位
  136 + shopMarkets: null, // 商城数组
  137 +
  138 +
  139 +
  140 + }
  141 + },
  142 + components: {
  143 + swiper,
  144 + swiperSlide
  145 + },
  146 + computed: {
  147 +
  148 + /**
  149 + * 删除无效小数
  150 + * @param {string} num [文本类型数字]
  151 + */
  152 + integer() {
  153 + return (num) => {
  154 + return num.replace(/\.00/g,"");
  155 + }
  156 + }
  157 + },
  158 + created() {
  159 +
  160 + // 获取环球优物首页
  161 + this.shopIndexHq();
  162 + },
  163 + methods:{
  164 +
  165 + /**
  166 + * 获取环球优物首页
  167 + */
  168 + shopIndexHq() {
  169 +
  170 + // 加载中提示
  171 + Indicator.open("加载中...");
  172 +
  173 + // 获取证书请求接口
  174 + this.http("/Api/" + this.getApiVersion().index + "/shopIndexHq", {
  175 + shop_id: "19",
  176 + id: this.$route.query.id
  177 + }, this.shopIndexHqCallback, {
  178 + method: "POST"
  179 + }
  180 + );
  181 + },
  182 +
  183 + /**
  184 + * 获取环球优物首页回调
  185 + * @param {object} res [服务器返回数据]
  186 + * @param {object} ext [扩展参数]
  187 + */
  188 + shopIndexHqCallback(res, ext) {
  189 +
  190 + // 加载完成
  191 + Indicator.close();
  192 +
  193 + // 返回处理
  194 + if (res.code == 200) {
  195 +
  196 + // 解构数据
  197 + let { data: datas } = res;
  198 +
  199 + /* 获取环球优物首页数据 开始 */
  200 +
  201 + this.$set(this, "list", datas);
  202 +
  203 + // 设置轮播
  204 + this.$set(this, "swipers", datas.banner);
  205 +
  206 + // 设置广告位
  207 + this.$set(this, "ads", datas.ads);
  208 +
  209 + // 设置商城列表
  210 + this.$set(this, "shopMarkets", datas.shopMarket);
  211 +
  212 +
  213 +
  214 +
  215 +
  216 +
  217 +
  218 + /* 获取环球优物首页数据 结束 */
  219 +
  220 + } else if (res.code == 400) {
  221 +
  222 + // 获取环球优物首页失败
  223 + Toast(res.message);
  224 + } else {
  225 +
  226 + // 获取环球优物首页失败
  227 + Toast("获取环球优物首页失败");
  228 + }
  229 + },
  230 +
  231 + /**
  232 + * 调用通用跳转
  233 + * @param {object} item [通用跳转对象]
  234 + */
  235 + toDetail(item) {
  236 +
  237 + // 判断是否有通用跳转函数
  238 + if (typeof this.$parent.gotoDetail === "function") {
  239 +
  240 + // 调用通用跳转
  241 + this.$parent.gotoDetail(item);
  242 + }
  243 + },
  244 +
  245 + /**
  246 + * 更多
  247 + * @param {object} item [跳转更多参数]
  248 + */
  249 + more(item) {
  250 +
  251 + // 判断item是对象
  252 + if (typeof item === "object") {
  253 + this.$router.push({
  254 + path: "/hqywList",
  255 + query: item
  256 + });
  257 + }
  258 + },
  259 +
  260 + /**
  261 + * 后退
  262 + */
  263 + back() {
  264 +
  265 + // 判断是否有后退函数
  266 + if (typeof this.$parent.back === "function") {
  267 +
  268 + // 调用后退
  269 + this.$parent.back();
  270 + } else {
  271 +
  272 + // 后退
  273 + window.history.go(-1);
  274 + }
  275 + }
  276 + }
  277 + }
349 </script> 278 </script>
350 279
351 -<style>  
352 -.hqyw{  
353 - width: 92%;  
354 - margin: 0 4%;  
355 -}  
356 -.header{  
357 - width:100%;  
358 - /* height:128px; */  
359 - background: #fff;  
360 - position: fixed;  
361 - top:0;  
362 - left:0;  
363 - right:0;  
364 - z-index:10000;  
365 -}  
366 -.header_ztl{  
367 - width:100%;  
368 - /* height:32px; */  
369 - background: #fff;  
370 -}  
371 -.header_top{  
372 - width:100%;  
373 - height:96px;  
374 - background: #fff;  
375 - display: flex;  
376 -}  
377 -.headerBackground{  
378 - width:100%;  
379 -}  
380 -.header_back{  
381 - padding:29px 10px 29px 28px;  
382 - width:38px;  
383 - height:38px;  
384 -}  
385 -.header_back img{  
386 - width:38px;  
387 - height:38px;  
388 -}  
389 -.header_close{  
390 - padding:29px 30px 29px 10px;  
391 - width:38px;  
392 - height:38px;  
393 -}  
394 -.header_close img{  
395 - width:38px;  
396 - height:38px;  
397 -}  
398 -.header_search{  
399 - width:-moz-calc(100% - 155px);  
400 - width:-webkit-calc(100% -155px);  
401 - width: calc(100% - 155px);  
402 - height:96px;  
403 -}  
404 -.hqyw_swiper{  
405 - margin-top: 30px;  
406 - position: relative;  
407 -}  
408 -.swiper-slide{  
409 - border-radius: 20px;  
410 - height: 356px;  
411 - overflow: hidden;  
412 -}  
413 -.hqyw_swiper_img{  
414 - height: 356px;  
415 - width: 100%;  
416 - object-fit: cover;  
417 -}  
418 -.swiper_pagination{  
419 - text-align: center;  
420 - padding: 17px 0 22px 0;  
421 -}  
422 -.swiper_pagination li{  
423 - width:6.5px;/*no*/  
424 - height:6.5px;/*no*/  
425 - background:rgba(219,220,219,1);  
426 - margin: 0 5px;/*no*/  
427 - display: inline-block;  
428 - border-radius: 50%;  
429 -}  
430 -.swiper_pagination li.swiper_page_active{  
431 - background:rgba(50,50,50,1);  
432 -}  
433 -.card1{  
434 - background:rgba(255,255,255,1);  
435 - box-shadow:0px 0px 18px 0px rgba(0,0,0,0.1);  
436 - border-radius:26px;  
437 - overflow: hidden;  
438 - margin-bottom: 40px;  
439 -}  
440 -.top_pic{  
441 - height: 352px;  
442 -}  
443 -.top_pic_img{  
444 - height: 100%;  
445 - width: 100%;  
446 - object-fit: cover;  
447 -}  
448 -.list{  
449 - margin-top: 10px;  
450 -}  
451 -.scoll_div{  
452 - width: 100%;  
453 - overflow: hidden;  
454 -}  
455 -.scoll_ul{  
456 - width: auto;  
457 - overflow-x: auto;  
458 - overflow-y: hidden;  
459 - -webkit-overflow-scrolling: touch;  
460 - white-space: nowrap;  
461 - height: 100%;  
462 - padding-bottom: 20px;  
463 - margin-bottom: -20px;  
464 -}  
465 -.scoll_li{  
466 - display: inline-block;  
467 - width: 34%;  
468 - height: 100%;  
469 - margin-right:16px;  
470 - margin-left:14px;  
471 -  
472 -}  
473 -.li_pic{  
474 - height: 240px;  
475 - width: 100%;  
476 -}  
477 -.li_pic_img{  
478 - height: 100%;  
479 - width: 100%;  
480 - object-fit: cover;  
481 -}  
482 -.li_name{  
483 - margin-top: 14px;  
484 - font-size:24px;  
485 - font-weight:400;  
486 - color:rgba(30,30,30,1);  
487 - line-height:33px;  
488 - height: 66px;  
489 - -webkit-box-orient: vertical;  
490 - display: -webkit-box;  
491 - -webkit-line-clamp: 2;  
492 - overflow: hidden;  
493 - white-space: normal;  
494 -}  
495 -.li_price{  
496 - margin-bottom: 32px;  
497 -}  
498 -.li_price p{  
499 - font-size:30px;  
500 - font-weight:500;  
501 - color:rgba(255,21,67,1);  
502 - line-height:42px;  
503 - display: inline-block;  
504 - margin-left: 30px;  
505 -}  
506 -.li_price span{  
507 - font-size:24px;  
508 - font-weight:500;  
509 - color:rgba(30,30,30,1);  
510 - line-height:33px;  
511 - text-decoration: line-through;  
512 - margin-left: 10px;  
513 - display: inline-block;  
514 -}  
515 -.hqyw_qyzz{  
516 - width: 100%;  
517 - height: 94px;  
518 - margin-bottom: 40px;  
519 -}  
520 -.hqyw_qyzz_img{  
521 - height: 100%;  
522 - width: 100%;  
523 -}  
524 -.card2{  
525 - background:rgba(255,255,255,1);  
526 - box-shadow:0px 0px 18px 0px rgba(0,0,0,0.1);  
527 - border-radius:26px;  
528 - margin-bottom: 40px;  
529 -}  
530 -.card_title{  
531 - display: flex;  
532 - justify-content: space-between;  
533 - height: 130px;  
534 -}  
535 -.title_left{  
536 - font-size:42px;  
537 - font-weight:500;  
538 - color:rgba(17,17,17,1);  
539 - line-height:59px;  
540 - margin:auto 30px;  
541 -}  
542 -.title_right{  
543 - margin: auto 50px;  
544 - font-size:20px;  
545 - font-weight:500;  
546 - color:rgba(70,70,70,1);  
547 - line-height:28px;  
548 -}  
549 -.title_right_img{  
550 - height: 16px;  
551 - width: 16px;  
552 -}  
553 -.goods_single{  
554 - width: 35%;  
555 - display: inline-block;  
556 - margin: 0 7.5%;  
557 - margin-bottom: 30px;  
558 -}  
559 -.goods_pic{  
560 - width: 100%;  
561 - height: 270px;  
562 - margin-bottom: 10px;  
563 -}  
564 -.goods_pic_img{  
565 - height: 100%;  
566 - width: 100%;  
567 - object-fit: cover;  
568 -}  
569 -.goods_name{  
570 - font-size:24px;  
571 - font-weight:400;  
572 - color:rgba(30,30,30,1);  
573 - line-height:33px;  
574 -  
575 - -webkit-box-orient: vertical;  
576 - display: -webkit-box;  
577 - -webkit-line-clamp: 2;  
578 - overflow: hidden;  
579 - white-space: normal;  
580 -}  
581 -.goods_price{  
582 - margin-top: 14px;  
583 -}  
584 -.goods_price p{  
585 - font-size:30px;  
586 - font-weight:500;  
587 - color:rgba(255,21,67,1);  
588 - line-height:42px;  
589 - display: inline-block;  
590 - margin-left: 30px;  
591 -}  
592 -.goods_price span{  
593 - font-size:24px;  
594 - font-weight:500;  
595 - color:rgba(30,30,30,1);  
596 - line-height:33px;  
597 - text-decoration: line-through;  
598 - margin-left: 10px;  
599 - display: inline-block;  
600 -}  
601 -.list{  
602 - width: 88%;  
603 - margin: 30px 6% 0 6%;  
604 - display: flex;  
605 - justify-content: space-between;  
606 -}  
607 -.list .goods_pic{  
608 - width: 36%;  
609 - height: 240px;  
610 -}  
611 -.list .goods_pic_img{  
612 - height: 100%;  
613 - width: 100%;  
614 - object-fit: cover;  
615 -}  
616 -.list .goods_right{  
617 - width: 55%;  
618 - position: relative;  
619 -}  
620 -.list .goods_title{  
621 - font-size:28px;  
622 - font-weight:400;  
623 - color:rgba(30,30,30,1);  
624 - line-height:40px;  
625 -  
626 - -webkit-box-orient: vertical;  
627 - display: -webkit-box;  
628 - -webkit-line-clamp: 2;  
629 - overflow: hidden;  
630 - white-space: normal;  
631 -}  
632 -.list .goods_price{  
633 - position: absolute;  
634 - bottom: 15px;  
635 - left: 0;  
636 -}  
637 -.list .goods_price p{  
638 - font-size:30px;  
639 - font-weight:500;  
640 - color:rgba(255,21,67,1);  
641 - line-height:42px;  
642 - display: inline-block;  
643 -}  
644 -.list .goods_price span{  
645 - font-size:24px;  
646 - font-weight:500;  
647 - color:rgba(30,30,30,1);  
648 - line-height:33px;  
649 - text-decoration: line-through;  
650 - margin-left: 10px;  
651 - display: inline-block;  
652 -}  
653 -.bottomBtn{  
654 - width:100%;  
655 - height:98px;  
656 - background:rgba(255,255,255,1);  
657 - border:1px solid rgba(228,228,228,1);  
658 - display: flex;  
659 - position: fixed;  
660 - bottom:0;  
661 - left:0;  
662 - right:0;  
663 -}  
664 -.bottomBtnBackground{  
665 - width:100%;  
666 - height:98px;  
667 - background:rgba(255,255,255,1);  
668 -}  
669 -.bottomBtnLeft,.bottomBtnRight{  
670 - width:49.5%;  
671 - height:42px;  
672 - margin:28px 0;  
673 - display: inline-block;  
674 - display: flex;  
675 - justify-content: center;  
676 -}  
677 -.bottomBtnLeft img,.bottomBtnRight img{  
678 - width:42px;  
679 - height:42px;  
680 -}  
681 -.bottomBtnLeft p,.bottomBtnRight p{  
682 - font-size:30px;  
683 - font-weight:400;  
684 - line-height:42px;  
685 - margin-left:17px;  
686 -}  
687 -.bottomBtnLeft p{  
688 - color:rgba(255,114,92,1);  
689 -}  
690 -.bottomBtnRight p{  
691 - color:rgba(200,200,200,1);  
692 -}  
693 -.bottomBtnLeft{  
694 - border-right:1px solid #E4E4E4;  
695 -}  
696 -</style> 280 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  281 +<style scoped>
  282 + @import "hqyw";
  283 +</style>
697 \ No newline at end of file 284 \ No newline at end of file
src/pages/mall/mall.less
  View file @84b48ce
  1 +@charset "UTF-8";
  2 +
1 .mall-box { 3 .mall-box {
2 margin-top: 20px; 4 margin-top: 20px;
3 /deep/ .van-pull-refresh { 5 /deep/ .van-pull-refresh {
@@ -7,4 +9,4 @@ @@ -7,4 +9,4 @@
7 } 9 }
8 } 10 }
9 } 11 }
10 -} 12 -}
  13 +}
11 \ No newline at end of file 14 \ No newline at end of file
src/pages/mall/mall.vue
  View file @84b48ce
@@ -11,9 +11,10 @@ @@ -11,9 +11,10 @@
11 11
12 <!--导航--> 12 <!--导航-->
13 <horiz-list class="components-box" v-if="navs && navs.length" @jump="jump" 13 <horiz-list class="components-box" v-if="navs && navs.length" @jump="jump"
14 - :lists="navs"  
15 - com="4"> 14 + :lists="navs"
  15 + com="4">
16 </horiz-list> 16 </horiz-list>
  17 +
17 <!-- 遍历ads，输出列表数据 --> 18 <!-- 遍历ads，输出列表数据 -->
18 <div class="ads-box"> 19 <div class="ads-box">
19 <div class="ads" v-for="(item, index) in ads" :key="index"> 20 <div class="ads" v-for="(item, index) in ads" :key="index">
src/router/index.js
  View file @84b48ce
@@ -59,6 +59,17 @@ const router = new Router({ @@ -59,6 +59,17 @@ const router = new Router({
59 meta: { 59 meta: {
60 requireAuth: false 60 requireAuth: false
61 } 61 }
  62 + },
  63 + {
  64 + // 优选库环球优物页
  65 + path: "/hqyw",
  66 + name: "hqyw",
  67 + component: resolve => {
  68 + require(["@/pages/hqyw/hqyw"], resolve);
  69 + },
  70 + meta: {
  71 + requireAuth: false
  72 + }
62 } 73 }
63 ] 74 ]
64 }, 75 },
static/img/gd.png 0 → 100644
View file @84b48ce

387 Bytes
static/img/gotopbutton.png 0 → 100644
View file @84b48ce

10.5 KB
static/img/hqywBack1.png 0 → 100644
View file @84b48ce

575 Bytes
static/img/hqywBack2.png 0 → 100644
View file @84b48ce

279 Bytes
static/img/hqywClose.png 0 → 100644
View file @84b48ce

393 Bytes
static/img/hqywListClose.png 0 → 100644
View file @84b48ce

382 Bytes
static/img/hqywfl.png 0 → 100644
View file @84b48ce

285 Bytes
static/img/hqywsy.png 0 → 100644
View file @84b48ce

1.34 KB
static/img/qyzz.png 0 → 100644
View file @84b48ce

182 KB