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 351 \ No newline at end of file
... ...
src/pages/hqyw/hqyw.vue
  View file @84b48ce
1 1 <template>
2   - <div>
  2 + <div class="hqyw-box">
  3 +
3 4 <!--返回按钮-->
4 5 <div class="header">
5   - <div class="header_ztl" :style="'height:'+statusHeight+'px;'"></div>
  6 + <div class="header_ztl"></div>
6 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 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 13 </div>
13 14 <div class="header_search">
14 15  
15 16 </div>
16 17 </div>
17   - </div>
  18 + </div>
  19 +
18 20 <div class="headerBackground">
19   - <div class="header_ztl" :style="'height:'+statusHeight+'px;'"></div>
  21 + <div class="header_ztl"></div>
20 22 <div class="header_top"></div>
21   - </div>
22   - <div class="hqyw" v-if="!errShow">
  23 + </div>
  24 +
  25 + <div class="hqyw">
23 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 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 36 </div>
35 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 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 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 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 50 </a>
49 51 </div>
50 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 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 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 58 </div>
57   - <div class="li_name" style="-webkit-box-orient: vertical;">{{value.title}}</div>
  59 + <div class="li_name">{{value.title}}</div>
58 60 <div class="li_price">
59 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 63 </div>
62 64 </li>
63 65 </ul>
... ... @@ -65,632 +67,217 @@
65 67 </div>
66 68 </div>
67 69  
68   - <div class="card2" v-if="item.style=='2'">
  70 + <div class="card2" v-if="item.style == '2'">
69 71 <div class="card_title">
70 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 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 77 </div>
76 78 </a>
77 79 </div>
78 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 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 84 </div>
83   - <div class="goods_name" style="-webkit-box-orient: vertical;">{{value.title}}</div>
  85 + <div class="goods_name">{{value.title}}</div>
84 86 <div class="goods_price">
85 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 89 </div>
88 90 </div>
89 91 </div>
90 92 </div>
91 93  
92   - <div class="card2" v-if="item.style=='3'">
  94 + <div class="card2" v-if="item.style == '3'">
93 95 <div class="card_title">
94 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 98 <div >
97 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 101 </div>
100 102 </a>
101 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 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 107 </div>
106   -
107 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 110 <div class="goods_price">
110 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 113 </div>
113 114 </div>
114 115 </div>
115 116 </div>
116 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 118 </div>
136   - <!--接口请求失败页面-->
137   - <error v-if="errShow"></error>
138   -
139 119 </div>
140 120 </template>
141 121  
142 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 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 284 \ No newline at end of file
... ...
src/pages/mall/mall.less
  View file @84b48ce
  1 +@charset "UTF-8";
  2 +
1 3 .mall-box {
2 4 margin-top: 20px;
3 5 /deep/ .van-pull-refresh {
... ... @@ -7,4 +9,4 @@
7 9 }
8 10 }
9 11 }
10 12 -}
  13 +}
11 14 \ No newline at end of file
... ...
src/pages/mall/mall.vue
  View file @84b48ce
... ... @@ -11,9 +11,10 @@
11 11  
12 12 <!--导航-->
13 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 16 </horiz-list>
  17 +
17 18 <!-- 遍历ads，输出列表数据 -->
18 19 <div class="ads-box">
19 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 59 meta: {
60 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