环球优物加入优选库项目初始化~ (af584f07) | Commits | w-front-end / select_good

Browse Code »

Commit af584f072f4975b25f5099b7da68981cf3d7837c

Authored by 王强 2020-04-03 14:50:51 +0800

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>
...	...

w-front-end / select_good · Commits

GitLab

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