w-front-end / select_good · Commits

Commit af584f072f4975b25f5099b7da68981cf3d7837c

Authored by 王强
1 parent 85741afe

环球优物加入优选库项目初始化~

Inline Side-by-side
Showing 4 changed files with 1035 additions and 0 deletions
src/pages/hqyw/hqyw.less 0 → 100644
  View file @af584f0
  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 + }
  10 +}
src/pages/hqyw/hqyw.vue 0 → 100644
  View file @af584f0
  1 +<template>
  2 + <div>
  3 + <!--返回按钮-->
  4 + <div class="header">
  5 + <div class="header_ztl" :style="'height:'+statusHeight+'px;'"></div>
  6 + <div class="header_top">
  7 + <div class="header_back" @click="back()">
  8 + <img src="../../../assets/images/hqywBack1.png">
  9 + </div>
  10 + <div class="header_close" @click="back()">
  11 + <img src="../../../assets/images/hqywClose.png">
  12 + </div>
  13 + <div class="header_search">
  14 +
  15 + </div>
  16 + </div>
  17 + </div>
  18 + <div class="headerBackground">
  19 + <div class="header_ztl" :style="'height:'+statusHeight+'px;'"></div>
  20 + <div class="header_top"></div>
  21 + </div>
  22 + <div class="hqyw" v-if="!errShow">
  23 + <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>
  32 + <div class="swiper_pagination">
  33 + <li v-for="(item,index) in list.banner" :key="index" :class="{'swiper_page_active':swiperIndex==index}"></li>
  34 + </div>
  35 + </div>
  36 +
  37 + <a @click="toAppOnlineRetailers(list.ads.type,list.ads.to,list.ads.shop_type)">
  38 + <div class="hqyw_qyzz">
  39 + <img class="hqyw_qyzz_img" :src="list.ads.simg">
  40 + </div>
  41 + </a>
  42 +
  43 + <div v-for="(item,index) in list.shopMarket" :key="index">
  44 + <div class="card1" v-if="item.style=='1'">
  45 + <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>
  49 + </div>
  50 + <div class="list">
  51 + <div class="scoll_div" v-on:touchstart="ss($event)" v-on:touchend="ss($event)" v-on:touchmove="ss($event)">
  52 + <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)">
  54 + <div class="li_pic">
  55 + <img class="li_pic_img" :src="value.simg">
  56 + </div>
  57 + <div class="li_name" style="-webkit-box-orient: vertical;">{{value.title}}</div>
  58 + <div class="li_price">
  59 + <p>￥{{integer(value.price)}}</p>
  60 + <span v-if="Number(value.prices)>Number(value.price)">￥{{integer(value.prices)}}</span>
  61 + </div>
  62 + </li>
  63 + </ul>
  64 + </div>
  65 + </div>
  66 + </div>
  67 +
  68 + <div class="card2" v-if="item.style=='2'">
  69 + <div class="card_title">
  70 + <div class="title_left">{{item.title}}</div>
  71 + <a :href="'hqywList.html?shop_id='+item.id+'&id='+id" class="title_right">
  72 + <div >
  73 + MORE
  74 + <img class="title_right_img" src="@/assets/images/hqyw/gd.png">
  75 + </div>
  76 + </a>
  77 + </div>
  78 + <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)">
  80 + <div class="goods_pic">
  81 + <img class="goods_pic_img" :src="value.simg">
  82 + </div>
  83 + <div class="goods_name" style="-webkit-box-orient: vertical;">{{value.title}}</div>
  84 + <div class="goods_price">
  85 + <p>￥{{integer(value.price)}}</p>
  86 + <span v-if="Number(value.prices)>Number(value.price)">￥{{integer(value.prices)}}</span>
  87 + </div>
  88 + </div>
  89 + </div>
  90 + </div>
  91 +
  92 + <div class="card2" v-if="item.style=='3'">
  93 + <div class="card_title">
  94 + <div class="title_left">{{item.title}}</div>
  95 + <a :href="'hqywList.html?shop_id='+item.id+'&id='+id" class="title_right">
  96 + <div >
  97 + MORE
  98 + <img class="title_right_img" src="@/assets/images/hqyw/gd.png">
  99 + </div>
  100 + </a>
  101 + </div>
  102 + <div class="list" v-for="(value,index) in item.goods" :key="index" @click="toAppOnlineRetailers(value.type,value.to,value.shop_type)">
  103 + <div class="goods_pic">
  104 + <img class="goods_pic_img" :src="value.simg">
  105 + </div>
  106 +
  107 + <div class="goods_right">
  108 + <div class="goods_title" style="-webkit-box-orient: vertical;">{{value.title}}</div>
  109 + <div class="goods_price">
  110 + <p>￥{{integer(value.price)}}</p>
  111 + <span v-if="Number(value.prices)>Number(value.price)">￥{{integer(value.prices)}}</span>
  112 + </div>
  113 + </div>
  114 + </div>
  115 + </div>
  116 + </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>
  136 + <!--接口请求失败页面-->
  137 + <error v-if="errShow"></error>
  138 +
  139 + </div>
  140 +</template>
  141 +
  142 +<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 +}
  349 +</script>
  350 +
  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>
src/pages/hqywList/hqywList.less 0 → 100644
  View file @af584f0
  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 + }
  10 +}
src/pages/hqywList/hqywList.vue 0 → 100644
  View file @af584f0
  1 +<template>
  2 + <div class="hqyw_list">
  3 + <!--返回按钮-->
  4 + <div class="header">
  5 + <div class="header_ztl" :style="'height:'+statusHeight+'px;'"></div>
  6 + <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">
  12 + </div>
  13 + <div class="header_title">
  14 + <p>{{list.title}}</p>
  15 + </div>
  16 + <div class="header_back"></div>
  17 + <div class="header_close" ></div>
  18 + </div>
  19 + </div>
  20 + <div class="headerBackground">
  21 + <div class="header_ztl" :style="'height:'+statusHeight+'px;'"></div>
  22 + <div class="header_top"></div>
  23 + </div>
  24 +
  25 + <div class="list" v-for="(item,index) in list.goods" :key="index" @click="toAppOnlineRetailers(item.type,item.to,item.shop_type)">
  26 + <div class="goods_pic">
  27 + <img class="goods_pic_img" :src="item.simg">
  28 + </div>
  29 +
  30 + <div class="goods_right">
  31 + <div class="goods_title" style="-webkit-box-orient: vertical;">{{item.title}}</div>
  32 + <div class="goods_price">
  33 + <p>￥{{integer(item.price)}}</p>
  34 + <span v-if="Number(item.prices)>Number(item.price)">￥{{integer(item.prices)}}</span>
  35 + </div>
  36 + </div>
  37 + </div>
  38 +
  39 + <div class="list_end">
  40 + —— THE END ——
  41 + </div>
  42 +
  43 + <div v-show="showButton" class="go_top_button" @click="goTop">
  44 + <img class="gotop_img" src="@/assets/images/hqyw/gotopbutton.png" >
  45 + </div>
  46 +
  47 + </div>
  48 +</template>
  49 +
  50 +<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});
  148 + }
  149 + },
  150 + integer(num){
  151 + return num.replace(/\.00/g,"");
  152 + },
  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)
  162 + },
  163 + //单击按钮,回到页面最上方
  164 + goTop(){
  165 + let topHeight=document.getElementsByClassName("hqyw_list");
  166 + ScrollTop(topHeight[0].offsetTop, 100);
  167 + },
  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 "";
  173 + },
  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();
  185 + }
  186 + // var height=JSON.stringify({
  187 + // "statusHeight": 20,
  188 + // });
  189 + // getStatusHeight(height);
  190 + // console.log(this.statusHeight)
  191 + }
  192 +}
  193 +</script>
  194 +
  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>