w-front-end / select_good · Commits

Commit 51986005c656039dbd7b30e9b11d98c4249b0be1

Authored by 王强
1 parent 025880f0

环球优物，开发完成，准备提测~

Inline Side-by-side
Showing 8 changed files with 436 additions and 316 deletions
src/components/swiper/swiper.vue
  View file @5198600
1 <template> 1 <template>
2 <div class="swiper-box" v-if="swipers && swipers.length"> 2 <div class="swiper-box" v-if="swipers && swipers.length">
3 - <swipe class="swipe" :autoplay="5000" :touchable="swipers.length===1 ? false : true" :show-indicators="swipers.showIndicators ? swipers.showIndicators : showIndicators" @change="onChange"> 3 + <swipe class="swipe" :autoplay="5000" :touchable="swipers.length===1 ? false : true" :show-indicators="options && options.showIndicators !== undefined ? options.showIndicators : showIndicators" @change="onChange">
4 <swipe-item class="swipe-item" v-for="(item, index) in swipers" :key="index"> 4 <swipe-item class="swipe-item" v-for="(item, index) in swipers" :key="index">
5 <div class="item" @click="$parent.$parent.gotoDetail(item)"> 5 <div class="item" @click="$parent.$parent.gotoDetail(item)">
6 <div class="img-box"> 6 <div class="img-box">
@@ -24,7 +24,7 @@ @@ -24,7 +24,7 @@
24 showIndicators: true, 24 showIndicators: true,
25 } 25 }
26 }, 26 },
27 - props: ["swipers"], 27 + props: ["swipers", "options"],
28 components: { 28 components: {
29 Swipe, 29 Swipe,
30 SwipeItem 30 SwipeItem
src/pages/common/common.vue
  View file @5198600
@@ -56,8 +56,11 @@ @@ -56,8 +56,11 @@
56 type: "" // 图片类型 56 type: "" // 图片类型
57 }, 57 },
58 Orientation: null, // 旋转角度 58 Orientation: null, // 旋转角度
59 - headerImage: null 59 + headerImage: null,
60 /* 上传图片参数开始 结束 */ 60 /* 上传图片参数开始 结束 */
  61 + isBackBox: { // 判断是否显示backBox组件
  62 + value: true
  63 + }
61 } 64 }
62 }, 65 },
63 components: { 66 components: {
@@ -66,6 +69,11 @@ @@ -66,6 +69,11 @@
66 }, 69 },
67 created() { 70 created() {
68 71
  72 + // 判断是否有target=inside参数，有的话，不显示backBox组件
  73 + if (this.$route.query.target && this.$route.query.target.toLowerCase() == "inside") {
  74 + this.$set(this.isBackBox, "value", false);
  75 + }
  76 +
69 // 设置访问设备 77 // 设置访问设备
70 this.setDeviceType(); 78 this.setDeviceType();
71 79
src/pages/hqyw/hqyw.less
  View file @5198600
@@ -55,6 +55,9 @@ @@ -55,6 +55,9 @@
55 .hqyw_swiper{ 55 .hqyw_swiper{
56 margin-top: 30px; 56 margin-top: 30px;
57 position: relative; 57 position: relative;
  58 + .swiper-box {
  59 + width: 690px;
  60 + }
58 } 61 }
59 .swiper-slide{ 62 .swiper-slide{
60 border-radius: 20px; 63 border-radius: 20px;
@@ -71,10 +74,10 @@ @@ -71,10 +74,10 @@
71 padding: 17px 0 22px 0; 74 padding: 17px 0 22px 0;
72 } 75 }
73 .swiper_pagination li{ 76 .swiper_pagination li{
74 - width:6.5px;/*no*/  
75 - height:6.5px;/*no*/ 77 + width:13px;
  78 + height:13px;
76 background:rgba(219,220,219,1); 79 background:rgba(219,220,219,1);
77 - margin: 0 5px;/*no*/ 80 + margin: 0 10px;
78 display: inline-block; 81 display: inline-block;
79 border-radius: 50%; 82 border-radius: 50%;
80 } 83 }
src/pages/hqyw/hqyw.vue
  View file @5198600
@@ -2,7 +2,7 @@ @@ -2,7 +2,7 @@
2 <div class="hqyw-box"> 2 <div class="hqyw-box">
3 3
4 <!--返回按钮--> 4 <!--返回按钮-->
5 - <div class="header"> 5 + <div class="header" v-if="$parent.isBackBox.value">
6 <div class="header_ztl"></div> 6 <div class="header_ztl"></div>
7 <div class="header_top"> 7 <div class="header_top">
8 <div class="header_back" @click="back"> 8 <div class="header_back" @click="back">
@@ -17,7 +17,7 @@ @@ -17,7 +17,7 @@
17 </div> 17 </div>
18 </div> 18 </div>
19 19
20 - <div class="headerBackground"> 20 + <div class="headerBackground" v-if="$parent.isBackBox.value">
21 <div class="header_ztl"></div> 21 <div class="header_ztl"></div>
22 <div class="header_top"></div> 22 <div class="header_top"></div>
23 </div> 23 </div>
@@ -26,8 +26,11 @@ @@ -26,8 +26,11 @@
26 <div class="hqyw_swiper"> 26 <div class="hqyw_swiper">
27 27
28 <!-- 轮播 --> 28 <!-- 轮播 -->
29 - <swiper v-if="swipers"  
30 - :swipers="swipers"> 29 + <swiper v-if="swipers" @onChange="swiperChange"
  30 + :swipers="swipers"
  31 + :options="{
  32 + showIndicators: false
  33 + }">
31 </swiper> 34 </swiper>
32 35
33 <!-- 轮播提示符按钮 --> 36 <!-- 轮播提示符按钮 -->
@@ -36,7 +39,7 @@ @@ -36,7 +39,7 @@
36 </div> 39 </div>
37 </div> 40 </div>
38 41
39 - <div v-if="ads" @click="toDetail(ads)"> 42 + <div v-if="ads" @click="toAdsDetail(ads)">
40 <div class="hqyw_qyzz"> 43 <div class="hqyw_qyzz">
41 <img class="hqyw_qyzz_img" :src="ads.simg"> 44 <img class="hqyw_qyzz_img" :src="ads.simg">
42 </div> 45 </div>
@@ -45,7 +48,7 @@ @@ -45,7 +48,7 @@
45 <div v-for="(item, index) in shopMarkets" :key="index"> 48 <div v-for="(item, index) in shopMarkets" :key="index">
46 <div class="card1" v-if="item.style == '1'"> 49 <div class="card1" v-if="item.style == '1'">
47 <div class="top_pic"> 50 <div class="top_pic">
48 - <a @click="more({shop_id: item.id, id: $route.query.id})"> 51 + <a @click="more(item)">
49 <img class="top_pic_img" v-lazy="item.simg"> 52 <img class="top_pic_img" v-lazy="item.simg">
50 </a> 53 </a>
51 </div> 54 </div>
@@ -70,7 +73,7 @@ @@ -70,7 +73,7 @@
70 <div class="card2" v-if="item.style == '2'"> 73 <div class="card2" v-if="item.style == '2'">
71 <div class="card_title"> 74 <div class="card_title">
72 <div class="title_left">{{item.title}}</div> 75 <div class="title_left">{{item.title}}</div>
73 - <a @click="more({shop_id: item.id, id: $route.query.id})" class="title_right"> 76 + <a @click="more(item)" class="title_right">
74 <div> 77 <div>
75 MORE 78 MORE
76 <img class="title_right_img" src="static/img/gd.png"> 79 <img class="title_right_img" src="static/img/gd.png">
@@ -94,7 +97,7 @@ @@ -94,7 +97,7 @@
94 <div class="card2" v-if="item.style == '3'"> 97 <div class="card2" v-if="item.style == '3'">
95 <div class="card_title"> 98 <div class="card_title">
96 <div class="title_left">{{item.title}}</div> 99 <div class="title_left">{{item.title}}</div>
97 - <a @click="more({shop_id: item.id, id: $route.query.id})" class="title_right"> 100 + <a @click="more(item)" class="title_right">
98 <div > 101 <div >
99 MORE 102 MORE
100 <img class="title_right_img" src="static/img/gd.png"> 103 <img class="title_right_img" src="static/img/gd.png">
@@ -129,6 +132,7 @@ @@ -129,6 +132,7 @@
129 name: 'hqyw', 132 name: 'hqyw',
130 data() { 133 data() {
131 return { 134 return {
  135 + title: "",
132 list:[], 136 list:[],
133 swipers: null, // banner数据 137 swipers: null, // banner数据
134 swiperIndex: 0, // 轮播索引 138 swiperIndex: 0, // 轮播索引
@@ -139,9 +143,8 @@ @@ -139,9 +143,8 @@
139 143
140 } 144 }
141 }, 145 },
142 - components: {  
143 - swiper,  
144 - swiperSlide 146 + components: {
  147 + swiper
145 }, 148 },
146 computed: { 149 computed: {
147 150
@@ -156,6 +159,9 @@ @@ -156,6 +159,9 @@
156 } 159 }
157 }, 160 },
158 created() { 161 created() {
  162 +
  163 + // 设置标题
  164 + this.$set(this, "title", "环球优物");
159 165
160 // 获取环球优物首页 166 // 获取环球优物首页
161 this.shopIndexHq(); 167 this.shopIndexHq();
@@ -209,12 +215,6 @@ @@ -209,12 +215,6 @@
209 // 设置商城列表 215 // 设置商城列表
210 this.$set(this, "shopMarkets", datas.shopMarket); 216 this.$set(this, "shopMarkets", datas.shopMarket);
211 217
212 -  
213 -  
214 -  
215 -  
216 -  
217 -  
218 /* 获取环球优物首页数据 结束 */ 218 /* 获取环球优物首页数据 结束 */
219 219
220 } else if (res.code == 400) { 220 } else if (res.code == 400) {
@@ -229,6 +229,25 @@ @@ -229,6 +229,25 @@
229 }, 229 },
230 230
231 /** 231 /**
  232 + * ads广告调用通用跳转，补充shop_type参数再调用通用跳转
  233 + * @param {object} item [通用跳转对象]
  234 + */
  235 + toAdsDetail(item) {
  236 +
  237 + // 判断是否有通用跳转函数
  238 + if (typeof this.$parent.gotoDetail === "function") {
  239 +
  240 + // 判断是否有shop_type属性，如果没有，补上shop_type属性
  241 + if (item.shop_type === undefined) {
  242 + this.$set(item, "shop_type", "");
  243 + }
  244 +
  245 + // 调用通用跳转
  246 + this.$parent.gotoDetail(item);
  247 + }
  248 + },
  249 +
  250 + /**
232 * 调用通用跳转 251 * 调用通用跳转
233 * @param {object} item [通用跳转对象] 252 * @param {object} item [通用跳转对象]
234 */ 253 */
@@ -248,16 +267,31 @@ @@ -248,16 +267,31 @@
248 */ 267 */
249 more(item) { 268 more(item) {
250 269
251 - // 判断item是对象  
252 - if (typeof item === "object") {  
253 - this.$router.push({  
254 - path: "/hqywList",  
255 - query: item  
256 - }); 270 + // 判断并调用通用跳转
  271 + if (typeof this.$parent.gotoDetail === "function") {
  272 +
  273 + // 设置跳转参数
  274 + let options = {
  275 + type: "5",
  276 + to: (window.location.href.split("#")[0] + "#/hqywList?shop_id=" + item.id),
  277 + shop_type: ""
  278 + }
  279 +
  280 + this.$parent.gotoDetail(options);
257 } 281 }
258 }, 282 },
259 283
260 /** 284 /**
  285 + * swiperChange事件
  286 + * @param {object} index [滑动swiper索引]
  287 + */
  288 + swiperChange(index) {
  289 +
  290 + // 设置下方swiper提示器切换
  291 + this.$set(this, "swiperIndex", index);
  292 + },
  293 +
  294 + /**
261 * 后退 295 * 后退
262 */ 296 */
263 back() { 297 back() {
@@ -273,11 +307,29 @@ @@ -273,11 +307,29 @@
273 window.history.go(-1); 307 window.history.go(-1);
274 } 308 }
275 } 309 }
276 - } 310 + },
  311 + head: {
  312 + title () {
  313 + return {
  314 + inner: this.title
  315 + }
  316 + }
  317 + },
  318 + watch: {
  319 +
  320 + // 设置页面标题
  321 + title(newVal) {
  322 + if (this.$store.state.browser.toLowerCase() == "qq" && this.$store.state.deviceType.toLowerCase() == "iphone") {
  323 + this.$iFrame.insertIFrame(newVal);
  324 + } else {
  325 + this.$emit("updateHead");
  326 + }
  327 + }
  328 + }
277 } 329 }
278 </script> 330 </script>
279 331
280 <!-- Add "scoped" attribute to limit CSS to this component only --> 332 <!-- Add "scoped" attribute to limit CSS to this component only -->
281 -<style scoped> 333 +<style rel="stylesheet/less" lang="less" scoped>
282 @import "hqyw"; 334 @import "hqyw";
283 </style> 335 </style>
284 \ No newline at end of file 336 \ No newline at end of file
src/pages/hqywList/hqywList.less
  View file @5198600
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 +.header{
  4 + width:100%;
  5 + background: #F76681;
  6 + position: fixed;
  7 + top:0;
  8 + left:0;
  9 + right:0;
  10 + z-index:10000;
10 } 11 }
  12 +.header_ztl{
  13 + width:100%;
  14 +}
  15 +.header_top{
  16 + width:100%;
  17 + height:96px;
  18 + display: flex;
  19 +}
  20 +.headerBackground{
  21 + width:100%;
  22 +}
  23 +.header_back{
  24 + padding:29px 10px 29px 28px;
  25 + width:38px;
  26 + height:38px;
  27 +}
  28 +.header_back img{
  29 + width:38px;
  30 + height:38px;
  31 +}
  32 +.header_close{
  33 + padding:29px 30px 29px 10px;
  34 + width:38px;
  35 + height:38px;
  36 +}
  37 +.header_close img{
  38 + width:38px;
  39 + height:38px;
  40 +}
  41 +.header_title{
  42 + display: flex;
  43 + justify-content: center;
  44 + align-items: center;
  45 + font-size:34px;
  46 + font-weight:400;
  47 + color:rgba(255,255,255,1);
  48 + width:-moz-calc(100% - 310px);
  49 + width:-webkit-calc(100% -310px);
  50 + width: calc(100% - 310px);
  51 + height:96px;
  52 +}
  53 +.list{
  54 + width: 88%;
  55 + margin: 30px 6% 0 6%;
  56 + display: flex;
  57 + justify-content: space-between;
  58 +}
  59 +.goods_pic{
  60 + width: 36%;
  61 + height: 240px;
  62 +}
  63 +.goods_pic_img{
  64 + height: 100%;
  65 + width: 100%;
  66 + object-fit: cover;
  67 +}
  68 +.goods_right{
  69 + width: 55%;
  70 + position: relative;
  71 +}
  72 +.goods_title{
  73 + font-size:28px;
  74 + font-weight:400;
  75 + color:rgba(30,30,30,1);
  76 + line-height:40px;
  77 + /*! autoprefixer: off */
  78 + -webkit-box-orient: vertical;
  79 + /*! autoprefixer: on */
  80 + display: -webkit-box;
  81 + -webkit-line-clamp: 2;
  82 + overflow: hidden;
  83 + white-space: normal;
  84 +}
  85 +.goods_price{
  86 + position: absolute;
  87 + bottom: 15px;
  88 + left: 0;
  89 +}
  90 +.goods_price p{
  91 + font-size:30px;
  92 + font-weight:500;
  93 + color:rgba(255,21,67,1);
  94 + line-height:42px;
  95 + display: inline-block;
  96 +}
  97 +.goods_price span{
  98 + font-size:24px;
  99 + font-weight:500;
  100 + color:rgba(30,30,30,1);
  101 + line-height:33px;
  102 + text-decoration: line-through;
  103 + margin-left: 10px;
  104 + display: inline-block;
  105 +}
  106 +.list_end{
  107 + font-size:30px;
  108 + font-weight:500;
  109 + color:rgba(0,0,0,1);
  110 + line-height:42px;
  111 + text-align: center;
  112 + margin-bottom: 60px;
  113 + margin-top: 50px;
  114 +}
  115 +.go_top_button{
  116 + position: fixed;
  117 + bottom: 32px;
  118 + right: 42px;
  119 + height: 92px;
  120 + width: 92px;
  121 + z-index: 10;
  122 +}
  123 +.gotop_img{
  124 + width: 100%;
  125 + height: 100%;
  126 +}
11 \ No newline at end of file 127 \ No newline at end of file
src/pages/hqywList/hqywList.vue
  View file @5198600
1 <template> 1 <template>
2 <div class="hqyw_list"> 2 <div class="hqyw_list">
  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 - <a :href="'hqyw.html?id='+id" class="header_back">  
8 - <img src="../../../assets/images/hqywBack2.png">  
9 - </a>  
10 - <div class="header_close" @click="back()">  
11 - <img src="../../../assets/images/hqywListClose.png"> 8 + <div class="header_back" @click="back">
  9 + <img src="static/img/hqywBack2.png">
  10 + </div>
  11 + <div class="header_close" @click="back">
  12 + <img src="static/img/hqywListClose.png">
12 </div> 13 </div>
13 <div class="header_title"> 14 <div class="header_title">
14 - <p>{{list.title}}</p> 15 + {{title}}
15 </div> 16 </div>
16 <div class="header_back"></div> 17 <div class="header_back"></div>
17 <div class="header_close" ></div> 18 <div class="header_close" ></div>
18 </div> 19 </div>
19 - </div> 20 + </div>
  21 +
20 <div class="headerBackground"> 22 <div class="headerBackground">
21 - <div class="header_ztl" :style="'height:'+statusHeight+'px;'"></div> 23 + <div class="header_ztl"></div>
22 <div class="header_top"></div> 24 <div class="header_top"></div>
23 - </div> 25 + </div>
24 26
25 - <div class="list" v-for="(item,index) in list.goods" :key="index" @click="toAppOnlineRetailers(item.type,item.to,item.shop_type)"> 27 + <div class="list" v-for="(item, index) in goods" :key="index" @click="toDetail(item)">
26 <div class="goods_pic"> 28 <div class="goods_pic">
27 - <img class="goods_pic_img" :src="item.simg"> 29 + <img class="goods_pic_img" v-lazy="item.simg">
28 </div> 30 </div>
29 -  
30 <div class="goods_right"> 31 <div class="goods_right">
31 - <div class="goods_title" style="-webkit-box-orient: vertical;">{{item.title}}</div> 32 + <div class="goods_title">{{item.title}}</div>
32 <div class="goods_price"> 33 <div class="goods_price">
33 <p>￥{{integer(item.price)}}</p> 34 <p>￥{{integer(item.price)}}</p>
34 - <span v-if="Number(item.prices)>Number(item.price)">￥{{integer(item.prices)}}</span> 35 + <span v-if="Number(item.prices) > Number(item.price)">￥{{integer(item.prices)}}</span>
35 </div> 36 </div>
36 </div> 37 </div>
37 </div> 38 </div>
@@ -41,279 +42,204 @@ @@ -41,279 +42,204 @@
41 </div> 42 </div>
42 43
43 <div v-show="showButton" class="go_top_button" @click="goTop"> 44 <div v-show="showButton" class="go_top_button" @click="goTop">
44 - <img class="gotop_img" src="@/assets/images/hqyw/gotopbutton.png" > 45 + <img class="gotop_img" src="static/img/gotopbutton.png" >
45 </div> 46 </div>
46 47
47 </div> 48 </div>
48 </template> 49 </template>
49 50
50 <script> 51 <script>
51 -//import Vue from 'vue';  
52 -import axios from 'axios';  
53 -const qs = require('qs');  
54 -import Bridge from '../../../assets/js/bridge.js';  
55 -Vue.prototype.$bridge = Bridge;  
56 -//接口请求失败  
57 -import error from '@/pages/index/components/error.vue'  
58 -Vue.component('error', error)  
59 -import {ScrollTop} from'../../../assets/js/ScrollTop.js'  
60 -var sha1 = require('sha1');  
61 -export default {  
62 - data(){  
63 - return{  
64 - errShow:false,//接口请求错误  
65 - list:[],  
66 - showButton:false,//是否显示gotopbutton  
67 - shop_id:this.getUrlParam("shop_id"),//活动id  
68 - id:this.getUrlParam("id"),//id  
69 - statusHeight:0,//状态栏的高度  
70 - }  
71 - },  
72 - created(){  
73 - this.onLoad();  
74 - },  
75 - computed:{  
76 - environment:function(){  
77 - return this.$store.state.new.environment  
78 - },  
79 - appId:function(){  
80 - return this.$store.state.new.appId  
81 - },  
82 - plat:function(){  
83 - return this.$store.state.new.plat  
84 - },  
85 - sharewjjShow:function(){  
86 - return this.$store.state.new.sharewjjShow  
87 - },  
88 - hqywAppKey:function(){  
89 - return this.$store.state.hqyw.hqywAppKey  
90 - },  
91 - hqywSign:function(){  
92 - return this.$store.state.hqyw.hqywSign  
93 - },  
94 - },  
95 - methods:{  
96 - back(){  
97 - if(window.webkit&&window.webkit.messageHandlers) {  
98 - window.webkit.messageHandlers.pop.postMessage({body: {}});  
99 - } else if(window.obj) {  
100 - window.obj.finish();  
101 - }  
102 - },  
103 - onLoad(){  
104 - var that=this;  
105 - if(this.environment=="test"){  
106 - var apiUrl="https://wjjshop.cnlive.com/Api/index2/shopMarketInfo";  
107 - axios.post(apiUrl,qs.stringify({  
108 - "id":this.shop_id,  
109 - })).then( (response) => {  
110 - this.list=response.data.data;  
111 - document.title = this.list.title;  
112 - console.log(this.list)  
113 - },(response) => {  
114 - that.errShow=true;  
115 - })  
116 - }else{  
117 - var apiUrl="https://managemall.cnlive.com/Api/index2/shopMarketInfo";  
118 - function timest() {  
119 - return Math.round(new Date().getTime()/1000);  
120 - }  
121 - var Timestamp=timest();  
122 - axios.defaults.headers.post['App-Key'] = this.hqywAppKey;  
123 - axios.defaults.headers.post['Timestamp'] = Timestamp;  
124 - axios.defaults.headers.post['Signature'] = sha1(this.hqywAppKey+this.hqywSign+Timestamp);  
125 - axios.post(apiUrl,qs.stringify({  
126 - "id":this.shop_id,  
127 - })).then( (response) => {  
128 - this.list=response.data.data;  
129 - document.title = this.list.title;  
130 - console.log(this.list)  
131 - },(response) => {  
132 - that.errShow=true;  
133 - })  
134 - }  
135 - },  
136 - toAppOnlineRetailers(type,to,shop_type){  
137 - console.log(type,to,shop_type)  
138 - //给app传参  
139 - let toAppOnlineRetailersData={  
140 - "type": type,  
141 - "to": to,  
142 - "shop_type": shop_type  
143 - };  
144 - if(this.plat=='a'){  
145 - window.Android.wjjToAppOnlineRetailers(JSON.stringify(toAppOnlineRetailersData));  
146 - }else if(this.plat=='i'){  
147 - window.webkit.messageHandlers.wjjToAppOnlineRetailers.postMessage({body:toAppOnlineRetailersData}); 52 +
  53 + // 引入组件
  54 + import { Toast, Indicator } from "mint-ui";
  55 +
  56 + export default {
  57 + name: 'hqywList',
  58 + data() {
  59 + return{
  60 + title: "",
  61 + goods: [], // 商品列表
  62 + showButton: false, //是否显示gotopbutton
  63 + timer: null // 滚动条监听setTimeout对象
148 } 64 }
149 }, 65 },
150 - integer(num){  
151 - return num.replace(/\.00/g,""); 66 + computed: {
  67 +
  68 + /**
  69 + * 删除无效小数
  70 + * @param {string} num [文本类型数字]
  71 + */
  72 + integer() {
  73 + return (num) => {
  74 + return num.replace(/\.00/g,"");
  75 + }
  76 + }
152 }, 77 },
153 - //判断是否显示回到上方按钮  
154 - showGoTopButton(){  
155 - let topHeight=document.body.scrollTop||document.documentElement.scrollTop  
156 - if(topHeight>=300){  
157 - this.showButton=true;  
158 - }else{  
159 - this.showButton=false;  
160 - }  
161 - // console.log(topHeight) 78 + created() {
  79 +
  80 + // 店铺活动详情
  81 + this.shopMarketInfo();
162 }, 82 },
163 - //单击按钮,回到页面最上方  
164 - goTop(){  
165 - let topHeight=document.getElementsByClassName("hqyw_list");  
166 - ScrollTop(topHeight[0].offsetTop, 100); 83 + methods: {
  84 +
  85 + /**
  86 + * 店铺活动详情
  87 + */
  88 + shopMarketInfo() {
  89 +
  90 + // 加载中提示
  91 + Indicator.open("加载中...");
  92 +
  93 + // 获取证书请求接口
  94 + this.http("/Api/" + this.getApiVersion().index + "/shopMarketInfo", {
  95 + id: this.$route.query.shop_id
  96 + }, this.shopMarketInfoCallback, {
  97 + method: "POST"
  98 + }
  99 + );
  100 + },
  101 +
  102 + /**
  103 + * 店铺活动详情回调
  104 + * @param {object} res [服务器返回数据]
  105 + * @param {object} ext [扩展参数]
  106 + */
  107 + shopMarketInfoCallback(res, ext) {
  108 +
  109 + // 加载完成
  110 + Indicator.close();
  111 +
  112 + // 返回处理
  113 + if (res.code == 200) {
  114 +
  115 + // 解构数据
  116 + let { data: datas } = res;
  117 +
  118 + /* 获取店铺活动详情数据 开始 */
  119 +
  120 + // 设置标题
  121 + this.$set(this, "title", datas.title);
  122 +
  123 + // 设置商品列表
  124 + this.$set(this, "goods", datas.goods);
  125 +
  126 + /* 获取店铺活动详情数据 结束 */
  127 +
  128 + } else if (res.code == 400) {
  129 +
  130 + // 获取店铺活动详情失败
  131 + Toast(res.message);
  132 + } else {
  133 +
  134 + // 获取店铺活动详情失败
  135 + Toast("获取店铺活动详情失败");
  136 + }
  137 + },
  138 +
  139 + /**
  140 + * 调用通用跳转
  141 + * @param {object} item [通用跳转对象]
  142 + */
  143 + toDetail(item) {
  144 +
  145 + // 判断是否有通用跳转函数
  146 + if (typeof this.$parent.gotoDetail === "function") {
  147 +
  148 + // 调用通用跳转
  149 + this.$parent.gotoDetail(item);
  150 + }
  151 + },
  152 +
  153 + /**
  154 + * 监听滚动条，判断是否显示回到顶部Button
  155 + * @param {object} e [滚动条对象]
  156 + * @param {boolean} isTimeout [是否为setTimeout方法调用]
  157 + */
  158 + showGoTopButton(e, isTimeout = false) {
  159 +
  160 + // 获取滚动条位置，浏览器兼容处理
  161 + let scrollTop = (document.documentElement.scrollTop || document.body.scrollTop) || 0;
  162 +
  163 + // 滚动控制高度
  164 + let maxHeight = 300;
  165 +
  166 + if (scrollTop >= maxHeight) {
  167 + this.$set(this, "showButton", true);
  168 + } else {
  169 + this.$set(this, "showButton", false);
  170 + }
  171 +
  172 + if (!isTimeout) {
  173 +
  174 + if (this.timer) {
  175 + clearTimeout(this.timer);
  176 + }
  177 +
  178 + // 倒计时校正滚动条位置
  179 + this.timer = setTimeout((options) => {
  180 +
  181 + // 递归
  182 + this.showGoTopButton(options.e, true);
  183 + }, 1000, {e});
  184 + }
  185 + },
  186 +
  187 + /**
  188 + * 回到顶部
  189 + */
  190 + goTop() {
  191 + document.documentElement.scrollTop = document.body.scrollTop = 0;
  192 + },
  193 +
  194 + /**
  195 + * 后退
  196 + */
  197 + back() {
  198 +
  199 + // 判断是否有后退函数
  200 + if (typeof this.$parent.back === "function") {
  201 +
  202 + // 调用后退
  203 + this.$parent.back();
  204 + } else {
  205 +
  206 + // 后退
  207 + window.history.go(-1);
  208 + }
  209 + }
167 }, 210 },
168 - //获取url地址里的参数  
169 - getUrlParam:function(name){  
170 - var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");  
171 - var r =window.location.search.substr(1).match(reg);  
172 - if (r != null) return unescape(r[2]); return ""; 211 + head: {
  212 + title () {
  213 + return {
  214 + inner: this.title
  215 + }
  216 + }
  217 + },
  218 + watch: {
  219 +
  220 + // 设置页面标题
  221 + title(newVal) {
  222 + if (this.$store.state.browser.toLowerCase() == "qq" && this.$store.state.deviceType.toLowerCase() == "iphone") {
  223 + this.$iFrame.insertIFrame(newVal);
  224 + } else {
  225 + this.$emit("updateHead");
  226 + }
  227 + }
  228 + },
  229 + mounted() {
  230 +
  231 + // 监听滚动条
  232 + window.addEventListener("scroll", this.showGoTopButton, true);
173 }, 233 },
174 - },  
175 - mounted(){  
176 - window.addEventListener('scroll', this.showGoTopButton);  
177 - var that=this;  
178 - window["getStatusHeight"] = function (height) {  
179 - that.statusHeight=JSON.parse(height).statusHeight;  
180 - };  
181 - if(window.webkit&&window.webkit.messageHandlers) {  
182 - window.webkit.messageHandlers.getStatusHeight.postMessage({body: {}});  
183 - } else if(window.obj) {  
184 - window.obj.getStatusHeight(); 234 + beforeDestroy() {
  235 +
  236 + // 取消滚动条监听
  237 + window.removeEventListener("scroll", this.showGoTopButton, false);
185 } 238 }
186 - // var height=JSON.stringify({  
187 - // "statusHeight": 20,  
188 - // });  
189 - // getStatusHeight(height);  
190 - // console.log(this.statusHeight)  
191 } 239 }
192 -}  
193 </script> 240 </script>
194 241
195 -<style>  
196 -.header{  
197 - width:100%;  
198 - background: #F76681;  
199 - position: fixed;  
200 - top:0;  
201 - left:0;  
202 - right:0;  
203 - z-index:10000;  
204 -}  
205 -.header_ztl{  
206 - width:100%;  
207 -}  
208 -.header_top{  
209 - width:100%;  
210 - height:96px;  
211 - display: flex;  
212 -}  
213 -.headerBackground{  
214 - width:100%;  
215 -}  
216 -.header_back{  
217 - padding:29px 10px 29px 28px;  
218 - width:38px;  
219 - height:38px;  
220 -}  
221 -.header_back img{  
222 - width:38px;  
223 - height:38px;  
224 -}  
225 -.header_close{  
226 - padding:29px 30px 29px 10px;  
227 - width:38px;  
228 - height:38px;  
229 -}  
230 -.header_close img{  
231 - width:38px;  
232 - height:38px;  
233 -}  
234 -.header_title{  
235 - width:-moz-calc(100% - 310px);  
236 - width:-webkit-calc(100% -310px);  
237 - width: calc(100% - 310px);  
238 - height:96px;  
239 -}  
240 -.header_title p{  
241 - font-size:34px;  
242 - font-weight:400;  
243 - color:rgba(255,255,255,1);  
244 - line-height:96px;  
245 - text-align: center;  
246 -}  
247 -.list{  
248 - width: 88%;  
249 - margin: 30px 6% 0 6%;  
250 - display: flex;  
251 - justify-content: space-between;  
252 -}  
253 -.goods_pic{  
254 - width: 36%;  
255 - height: 240px;  
256 -}  
257 -.goods_pic_img{  
258 - height: 100%;  
259 - width: 100%;  
260 - object-fit: cover;  
261 -}  
262 -.goods_right{  
263 - width: 55%;  
264 - position: relative;  
265 -}  
266 -.goods_title{  
267 - font-size:28px;  
268 - font-weight:400;  
269 - color:rgba(30,30,30,1);  
270 - line-height:40px;  
271 - -webkit-box-orient: vertical;  
272 - display: -webkit-box;  
273 - -webkit-line-clamp: 2;  
274 - overflow: hidden;  
275 - white-space: normal;  
276 -}  
277 -.goods_price{  
278 - position: absolute;  
279 - bottom: 15px;  
280 - left: 0;  
281 -}  
282 -.goods_price p{  
283 - font-size:30px;  
284 - font-weight:500;  
285 - color:rgba(255,21,67,1);  
286 - line-height:42px;  
287 - display: inline-block;  
288 -}  
289 -.goods_price span{  
290 - font-size:24px;  
291 - font-weight:500;  
292 - color:rgba(30,30,30,1);  
293 - line-height:33px;  
294 - text-decoration: line-through;  
295 - margin-left: 10px;  
296 - display: inline-block;  
297 -}  
298 -.list_end{  
299 - font-size:30px;  
300 - font-weight:500;  
301 - color:rgba(0,0,0,1);  
302 - line-height:42px;  
303 - text-align: center;  
304 - margin-bottom: 60px;  
305 - margin-top: 50px;  
306 -}  
307 -.go_top_button{  
308 - position: fixed;  
309 - bottom: 32px;  
310 - right: 42px;  
311 - height: 92px;  
312 - width: 92px;  
313 - z-index: 10;  
314 -}  
315 -.gotop_img{  
316 - width: 100%;  
317 - height: 100%;  
318 -}  
319 -</style> 242 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  243 +<style rel="stylesheet/less" lang="less" scoped>
  244 + @import "hqywList";
  245 +</style>
320 \ No newline at end of file 246 \ No newline at end of file
src/pages/mall/mall.vue
  View file @5198600
@@ -6,7 +6,10 @@ @@ -6,7 +6,10 @@
6 6
7 <!--轮播--> 7 <!--轮播-->
8 <swiper v-if="banner" 8 <swiper v-if="banner"
9 - :swipers="banner"> 9 + :swipers="banner"
  10 + :options="{
  11 + showIndicators: false
  12 + }">
10 </swiper> 13 </swiper>
11 14
12 <!--导航--> 15 <!--导航-->
@@ -45,6 +48,7 @@ @@ -45,6 +48,7 @@
45 </template> 48 </template>
46 49
47 <script> 50 <script>
  51 +
48 // 引入组件 52 // 引入组件
49 import { Toast, Indicator } from "mint-ui"; 53 import { Toast, Indicator } from "mint-ui";
50 import swiper from "@/components/swiper/swiper"; 54 import swiper from "@/components/swiper/swiper";
src/router/index.js
  View file @5198600
@@ -70,6 +70,17 @@ const router = new Router({ @@ -70,6 +70,17 @@ const router = new Router({
70 meta: { 70 meta: {
71 requireAuth: false 71 requireAuth: false
72 } 72 }
  73 + },
  74 + {
  75 + // 优选库环球优物更多列表页
  76 + path: "/hqywList",
  77 + name: "hqywList",
  78 + component: resolve => {
  79 + require(["@/pages/hqywList/hqywList"], resolve);
  80 + },
  81 + meta: {
  82 + requireAuth: false
  83 + }
73 } 84 }
74 ] 85 ]
75 }, 86 },