Skip to content

梁建民 / h5

Go to a project
Commit f4b58677 by 肖康
Options

Merge branch 'h5_zyly_vue_0517' of http://119.23.72.7/liangjianmin/h5 into h5_zyly_vue_0517

parents 8c59c171 d5954be2
Inline Side-by-side
Showing with 669 additions and 24 deletions
src/store/modules/xianhuo/xianhuo.js
......@@ -18,8 +18,9 @@ const state = {
classLight: {},
zyFilterData: {}, //过滤数据
zyData: [],
loading:false,
finished:false
loading: false,
finished: false,
count: 0
}
const mutations = {
xianhuo(state, payload) {
......@@ -44,12 +45,18 @@ const actions = {
}, payload) {
state.loading = true;
state.finished = false;
let p = payload.data.params;
console
let p = payload.data.p;
if(p == 1){
state.zyData = [];
}
Services.getZyData(qs.stringify(payload.data)).then((res) => {
state.loading = false;
let data = res.data;
if (data.error_code == 0) {
let totalPage = Math.ceil(data.data.total / 10);
if (p == totalPage) {
state.finished = true;
}
if (data.data.aggs) {
commit("xianhuo", { //过滤数据
type: "filter",
......@@ -85,10 +92,12 @@ const actions = {
}
} else {
state.loading = false;
state.finished = true;
}
}).catch(function (err) {
state.loading = false;
state.finished = true;
});
}
}
......
src/views/common/GoodsOne.vue
......@@ -60,7 +60,7 @@
</div>
</div>
<div class="but-shop">
<a href="javascript:void(0)" class="but" >我要下单</a>
<a class="but" @click="placeOrder(itemchild.goods_id)">我要下单</a>
</div>
</div>
</div>
......@@ -101,6 +101,9 @@
this.$set(this.dataList[index],'check',true);
this.$set(this.dataList[index],'checkBtn','收起梯度价格<i class="icon-top"></i>');
}
},
placeOrder(id){
console.log(id)
}
},
components: {
......
src/views/common/goodsDetail.vue 0 → 100644
<template>
<div class="details-pop" v-if="detailsData.isShow">
<div class="mui-backdrop" style="opacity:1"></div>
<div class="mui-poppicker mui-active">
<div class="close">
<i class="icon iconfont icon-guanbi"></i>
</div>
<zy></zy>
</div>
</div>
</template>
<script>
import zy from "@/views/common/zyDetail";
import ly from "@/views/common/lyDetail";
export default {
props:{
detailsData:{
type:Object,
default(){
return {}
}
}
},
components: {
zy,
ly
}
};
</script>
<style lang="scss">
.details-pop {
position: fixed;
left: 0px;
top: 0;
right: 0;
bottom: 0;
width: 100%;
z-index: 999;
overflow: hidden;
.mui-backdrop {
position: fixed;
z-index: 87;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.3);
}
.mui-poppicker {
width: 100%;
z-index: 90;
position: absolute;
top: 20%;
bottom: 0px;
background-color: #fff;
border-top: solid 1px #ccc;
-webkit-transition: 0.3s;
-webkit-transform: translateY(300px);
&.mui-active {
-webkit-transform: translateY(0px);
}
.close {
position: absolute;
top: -25px;
right: 10px;
color: #fff;
}
}
}
</style>
src/views/common/zyDetail.vue 0 → 100644
<template>
<div class="zl_Detail">
<div class="details-head">
<div class="head_top clr">
<div class="head_top_left fl">
<img src="http://img.ichunt.com/images/goods/41/04/410405ade11b761554234b1d2b12f491.png">
</div>
<div class="head_top_right">
<h4>
<strong>贴片电阻 5.6kΩ(562) 0402 ±5% 1/16W</strong>
</h4>
<p class="icon-hint"></p>
</div>
</div>
<ul class="head_bottom clr">
<li class="fl">
<b>型号</b>
<span>0402WGJ0562TCE</span>
</li>
<li class="fl">
<b>供应商</b>
<span>猎芯自营</span>
</li>
<li class="fl">
<b>制造商</b>
<span>UniOhm(厚声)</span>
</li>
<li class="fl">
<b>封装</b>
<span>0402</span>
</li>
<li class="fl">
<b>类别</b>
<span>贴片电阻</span>
</li>
<li class="fl">
<b>起订量</b>
<font class="f-orange">
<font class="asfgdpoer urnvewjei klzxcvbnm bmeruwulu"></font>
<font class="asfgdqwer ewjeilwei sieurnvew mqwwertyu"></font>
<font class="asfgdqwer nmqwwerty bmeruwulu vewjeilwe"></font>
</font>个
</li>
<li class="fl">
<b>倍数</b>
<font class="f-orange">
<font class="asfgdpoer nmqwwerty ilweiskvn jeilweisk"></font>
<font class="asfgdpolk kdsieurnv cvbnmqwwe cvbnmqwwe"></font>
<font class="asfgdtyhg dsieurnve hjklzxcvb miqplmzac"></font>
</font>个
</li>
<li class="fl">
<b>一圆盘</b>
<span
class="f-orange"
guid3
guid2="<font class=&quot;asfgdpoer nmqwwerty ilweiskvn jeilweisk&quot;></font><font class=&quot;asfgdpolk kdsieurnv cvbnmqwwe cvbnmqwwe&quot;></font><font class=&quot;asfgdtyhg dsieurnve hjklzxcvb miqplmzac&quot;></font>"
guid="<font class=&quot;asfgdwdsa klzxcvbnm zacbmeruw ghjklzxcv&quot;></font><font class=&quot;asfgdpoqw eruwulurj lweiskvnx meruwulur&quot;></font><font class=&quot;asfgdpolk xcvbnmqww nvewjeilw rjlauejri&quot;></font><font class=&quot;asfgdpolk auejrifkf jklzxcvbn bmeruwulu&quot;></font><font class=&quot;asfgdpoqw pkxmiqplm miqplmzac uiopkdsie&quot;></font>"
>
<font class="asfgdwdsa klzxcvbnm zacbmeruw ghjklzxcv"></font>
<font class="asfgdpoqw eruwulurj lweiskvnx meruwulur"></font>
<font class="asfgdpolk xcvbnmqww nvewjeilw rjlauejri"></font>
<font class="asfgdpolk auejrifkf jklzxcvbn bmeruwulu"></font>
<font class="asfgdpoqw pkxmiqplm miqplmzac uiopkdsie"></font>个
</span>
</li>
<li class="fl">
<b class>库存</b>
<font class="f-orange">
<font class="asfgdwsxz ertyuiopk cvbnmqwwe ruwulurjl"></font>
<font class="asfgdpogk cvbnmqwwe fghjklzxc fghjklzxc"></font>
<font class="asfgdpehg auejrifkf dsieurnve eurnvewje"></font>
<font class="asfgdpoqw jlauejrif kxmiqplmz xcvbnmqww"></font>
<font class="asfgdtyhg zacbmeruw rjlauejri rjlauejri"></font>
</font>个
</li>
<li class="fl">
<b class="f-orange">国内现货，当天发货</b>
</li>
<li
class="fl"
style=" width: 100%; overflow:hidden;text-overflow:ellipsis;white-space: nowrap;color: #999;"
>描述：贴片电阻 5.6kΩ(562) 0402 ±5% 1/16W</li>
</ul>
</div>
<div class="details-cont" style="top: 210px;">
<div class="gradient">
<table>
<tbody>
<tr>
<th>数量</th>
<th>人民币</th>
</tr>
</tbody>
<tbody>
<tr>
<td>
<span>
<font class="asfgdrfdf lzxcvbnmq vbnmqwwer ilweiskvn"></font>
<font class="asfgdpoqw wertyuiop qplmzacbm fghjklzxc"></font>
<font class="asfgdtyhg qplmzacbm yuiopkdsi sieurnvew"></font>
</span>+
</td>
<td>
<span>¥0.0018</span>
</td>
</tr>
<tr>
<td>
<span>
<font class="asfgderfd jlauejrif zacbmeruw cbmeruwul"></font>
<font class="asfgdpolk urnvewjei uejrifkfg rjlauejri"></font>
<font class="asfgdpolk iqplmzacb uwulurjla iqplmzacb"></font>
<font class="asfgdtyhg eruwulurj yuiopkdsi kdsieurnv"></font>
</span>+
</td>
<td>
<span>¥0.0016</span>
</td>
</tr>
<tr>
<td>
<span>
<font class="asfgdrtyh urjlauejr zxcvbnmqw plmzacbme"></font>
<font class="asfgdpoqw zacbmeruw iqplmzacb iopkdsieu"></font>
<font class="asfgdpoqw meruwulur ruwulurjl eruwulurj"></font>
<font class="asfgdtyhg lweiskvnx kxmiqplmz nmqwwerty"></font>
</span>+
</td>
<td>
<span>¥0.0016</span>
</td>
</tr>
<tr>
<td>
<span>
<font class="asfgderfd eruwulurj ieurnvewj dwpkxmiqp"></font>
<font class="asfgdqwer eruwulurj auejrifkf iopkdsieu"></font>
<font class="asfgdtyhg mqwwertyu urnvewjei wertyuiop"></font>
<font class="asfgdpoqw bnmqwwert ghjklzxcv wjeilweis"></font>
<font class="asfgdpoqw pkxmiqplm kxmiqplmz ieurnvewj"></font>
</span>+
</td>
<td>
<span>¥0.0015</span>
</td>
</tr>
<tr>
<td>
<span>
<font class="asfgdrtyh zacbmeruw vbnmqwwer iqplmzacb"></font>
<font class="asfgdtyhg eurnvewje jlauejrif opkdsieur"></font>
<font class="asfgdpoqw rifkfghjk jrifkfghj cbmeruwul"></font>
<font class="asfgdpolk uwulurjla eruwulurj dsieurnve"></font>
<font class="asfgdpolk bnmqwwert xcvbnmqww urnvewjei"></font>
</span>+
</td>
<td>
<span>¥0.0014</span>
</td>
</tr>
</tbody>
</table>
<div class="zkxk">
收起梯度价格
<i class="icon-top"></i>
</div>
</div>
<div class="price">
<dl class="clr">
<dt>购买形式</dt>
<dd class="tab">
<span guid="33" class="act">按个购买</span>
<span guid="44" class="panshuggpo">按圆盘购买</span>
</dd>
</dl>
<dl class="clr">
<dt>
数
<span class="em1"></span>量
</dt>
<dd class="details-num">
<div class="number">
<i class="jumpB iconfont icon-jian"></i>
<input class="valuepx" type="text" value="1">
<i class="addB iconfont icon-jia"></i>
<div class="zyqhcbox" style="display: block;">
<div class="zyqhc clr">
<div class="lfldiv fl">
<font class="icon iconfont icon-tishi fl"></font>
</div>
<div class="lfrdiv fr">想要购买更多？直接下单，我们帮您订货</div>
</div>
<b class="bbiu"></b>
<b class="bbiu1"></b>
</div>
</div>
</dd>
</dl>
<dl class="clr">
<dt>
单
<span class="em1"></span>价
</dt>
<dd class="onePrice">¥0.0018</dd>
</dl>
<dl class="clr">
<dt>
合
<span class="em1"></span>计
</dt>
<dd class="totalPrice">¥0.1800</dd>
</dl>
</div>
</div>
<div class="details-foot">
<span class="but-blue">立即购买</span>
<span class="but-red">加入购物车</span>
</div>
</div>
</template>
<style lang="scss">
@function remFun($rem) {
@return $rem * 50/37.5;
}
.zl_Detail {
* {
box-sizing: border-box;
font-family: "Helvetica Neue", Helvetica, sans-serif;
}
.details-head {
.head_top {
border-bottom: 1px solid #d6d7dc;
padding: 10px;
.head_top_left {
width: 56px;
img {
display: block;
width: 56px;
height: 56px;
border: 1px solid #e5e5e5;
}
}
.head_top_right {
padding-left: 66px;
h4 {
padding-bottom: 10px;
font-size: 18px;
color: #333333;
}
}
}
.head_bottom {
border-bottom: 1px solid #d6d7dc;
padding: 5px 10px;
li {
width: 50%;
line-height: 20px;
height: 20px;
font-size: 12px;
color: #999;
b {
display: block;
float: left;
line-height: 20px;
height: 20px;
font-weight: 400;
}
span {
color: #333;
line-height: 20px;
height: 20px;
display: block;
padding: 0 5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.f-orange {
color: #ffa200;
margin-left: 5px;
}
}
}
}
.details-cont {
position: absolute;
top: 149px;
bottom: 44px;
width: 100%;
padding: 10px;
overflow-y: auto;
.gradient {
width: 100%;
table {
width: 100%;
line-height: 32px;
font-size: 12px;
text-align: center;
color: #666666;
border: 1px solid #d9d9d9;
th {
border: 1px solid #d9d9d9;
font-weight: 400;
color: #666;
width: 50%;
}
td {
border: 1px solid #d9d9d9;
color: #333;
}
}
.zkxk {
font-size: 12px;
height: 24px;
line-height: 24px;
border: 1px solid #e5e5e5;
border-top: none;
text-align: center;
color: #666;
.icon-top {
bottom: 9px;
position: relative;
content: "";
height: 0;
width: 0;
pointer-events: none;
border: solid transparent;
border-bottom-color: #4d4d4d;
border-width: 4px;
margin-left: 5px;
}
}
}
.price {
padding-top: 10px;
.zyqhc {
position: absolute;
width: remFun(3.4rem);
height: remFun(0.7rem);
color: #999;
font-size: remFun(0.2rem);
border: 1px solid #ffa200;
left: 130px;
line-height: remFun(0.28rem);
padding: remFun(0.05rem);
box-shadow: 0px 0px 3px #ffd07f;
border-radius: 3px;
.lfldiv {
width: remFun(0.3rem);
font {
position: relative;
font-size: remFun(0.22rem);
margin-right: remFun(0.05rem);
}
}
.lfrdiv {
width: remFun(2.9rem);
}
}
.bbiu {
display: inline-block;
position: absolute;
border-width: 6px;
border-style: solid;
border-color: transparent #ffa200 transparent transparent;
left: 118px;
top: remFun(0.15rem);
}
.bbiu1 {
display: inline-block;
position: absolute;
border-width: 6px;
border-style: solid;
border-color: transparent #fff transparent transparent;
left: 120px;
top: remFun(0.15rem);
}
.em1 {
padding: 0 0.5em;
}
dl {
font-size: 12px;
dt {
width: 5em;
color: #999;
float: left;
line-height: 30px;
}
dd {
padding-left: 5em;
color: #333;
line-height: 30px;
&.onePrice {
font-size: 14px;
}
&.totalPrice {
font-weight: bold;
color: red;
font-size: 14px;
}
span {
display: block;
float: left;
margin: 2px 10px 0 0;
color: #333;
height: 23px;
line-height: 22px;
padding: 0 10px;
border: 1px solid #d9d9d9;
border-radius: 3px;
background: #fff;
&.act {
color: #e10601;
border-color: #e10601;
}
}
.number {
float: left;
width: 118px;
height: 30px;
border: 1px solid #d9d9d9;
border-radius: 3px;
background: #fff;
position: relative;
i {
cursor: pointer;
height: 28px;
width: 28px;
text-align: center;
line-height: 28px;
display: block;
float: left;
background: none;
color: #999999;
font-size: 18px;
}
input {
text-align: center;
float: left;
padding: 4px 5px;
line-height: 20px;
height: 28px;
width: 60px;
background: none;
color: #333333;
font-size: 12px;
border: none;
border-left: 1px solid #e5e5e5;
border-right: 1px solid #e5e5e5;
}
}
}
}
}
}
.details-foot {
height: 43px;
border-top: 1px solid #d6d7dc;
width: 100%;
position: absolute;
bottom: 0;
span {
width: 50%;
display: block;
float: left;
height: 43px;
line-height: 43px;
font-size: 14px;
color: #fff;
text-decoration: none;
text-align: center;
border: none;
&.but-blue {
background: #1080d0;
}
&.but-red {
background: #e10601;
}
}
}
}
</style>
src/views/xianhuo/xianhuo.vue
......@@ -7,7 +7,7 @@
<div class="self-ichunt">
<div class="search-sift">
<!-- <div class="title-cut" v-show="zyRank"> -->
<div class="title-cut">
<div class="title-cut" v-if="!isScrollShow">
<p class="fr xuan" @click="openRight">
<span class="font">筛选</span>
<i class="icon iconfont icon-shaixuan"></i>
......@@ -37,7 +37,7 @@
</ul>
</div>
<!-- <div class="sift-box" v-show="zyFilter||zyClass"> -->
<div class="sift-box">
<div class="sift-box" v-if="!isScrollShow">
<dl :class="{'p_act': zyFilterInit == 0}">
<dt
@click="changeZyFilterInit(0)"
......@@ -137,17 +137,21 @@
</dd>
</dl>
</div>
<div class="sosoarr" v-if="isScrollShow">
<template v-for="(v,k) in navTopStr">
<span v-if="k!=='classStr'&&k!=='rightStr'&&v">
<b>·</b>
{{v}}
</span>
<span v-if="(k=='classStr'||k=='rightStr')&&v">{{v}}</span>
</template>
</div>
</div>
</div>
</div>
</div>
<div class="content_scroll">
<van-list
v-model="loadingXh"
:finished="finished"
finished-text="我是有底线的噢"
@load="onLoad"
>
<div class="content_scroll" @scroll="scrollEvent" :style="{'top':isScrollShow?'44px':'80px'}">
<van-list v-model="loadingXh" :finished="finished" finished-text="我是有底线的噢" @load="onLoad">
<GoodsOne :dataList="zyData" :isZy="isZy"></GoodsOne>
</van-list>
</div>
......@@ -165,6 +169,7 @@
:class="{'backdrop':true,'zIndex': zyFilterInit!=-1}"
v-if="isShowRight || zyFilterInit!=-1"
></div>
<goodsDetail :detailsData="detailsData"></goodsDetail>
</div>
</template>
<script>
......@@ -173,6 +178,7 @@ import { Icon, Field, List, Cell } from "vant";
import { mapState } from "vuex";
import rightSelect from "./rightSelect";
import GoodsOne from "@/views/common/GoodsOne.vue";
import goodsDetail from "@/views/common/goodsDetail.vue";
export default {
name: "xianhuo",
components: {
......@@ -180,10 +186,12 @@ export default {
"van-icon": Icon,
rightSelect,
"van-list": List,
GoodsOne
GoodsOne,
goodsDetail
},
data() {
return {
detailsData:{isShow:false,id:""},
isWindow:true,
carshow:true,
isZy:true,
......@@ -206,7 +214,16 @@ export default {
isShowRight: false, //是否展示右侧
list: [],
loadingXh: false,
p: 0
p: 0,
rightFilterData: {},
navTopStr: {
classStr: "",
brandStr: "",
encapStr: "",
packingStr: "",
rightStr: ""
},
isScrollShow: false
};
},
created() {},
......@@ -229,6 +246,7 @@ export default {
this.loadingXh = now;
},
zyRankInit(now) {
this.p = 1;
this.getZyData();
},
classLight(now) {
......@@ -246,11 +264,18 @@ export default {
this.classFilter =
this.firstClassName + "," + this.secondClass[index].class_id2_name;
}
this.navTopStr.classStr = this.classFilter;
}
},
methods: {
scrollEvent(e) {
if (e.target.scrollTop > 40) {
this.isScrollShow = true;
} else {
this.isScrollShow = false;
}
},
onLoad() {
console.log(this.loadingXh);
this.p++;
this.getZyData();
},
......@@ -260,7 +285,9 @@ export default {
},
filterRight(v) {
this.isShowRight = false;
this.getZyData(v);
this.p = 1;
this.rightFilterData = v;
this.getZyData();
},
openRight() {
this.isShowRight = true;
......@@ -305,9 +332,10 @@ export default {
}
}
},
getZyData(rightFilter = {}) {
getZyData() {
let params = { p: this.p, offset: 10 };
let rightFilterStr = JSON.stringify(rightFilter);
this.navTopStr.rightStr = "";
let rightFilterStr = JSON.stringify(this.rightFilterData);
if (this.addClassStr) {
params["class_id/condition"] = this.addClassStr;
}
......@@ -332,10 +360,22 @@ export default {
params["single_rank"] = 2;
}
if (rightFilterStr !== "{}") {
if (JSON.stringify(rightFilter.filterData) !== "{}") {
params["attrs/nested"] = JSON.stringify(rightFilter.filterData);
if (JSON.stringify(this.rightFilterData.filterData) !== "{}") {
params["attrs/nested"] = JSON.stringify(
this.rightFilterData.filterData
);
let str = "";
for (let k in this.rightFilterData.filterData) {
let singData = this.rightFilterData.filterData[k];
if (singData.length) {
str += "." + singData.join();
}
}
str = str.slice(1);
console.log(str)
this.navTopStr.rightStr = str;
}
if (rightFilter.isyh) {
if (this.rightFilterData.isyh) {
params["avail_rank"] = 1;
}
}
......@@ -419,17 +459,20 @@ export default {
this.firstClassName = "";
this.secondClassName = "";
this.classFilter = "";
this.navTopStr.classStr = "";
} else {
this.addClassStr = this.classStr;
this.classFilter = this.secondClassName
? this.firstClassName + "," + this.secondClassName
: this.firstClassName;
this.navTopStr.classStr = this.classFilter;
}
} else if (type == "brand") {
//制造商
this.brandStr = "";
this.brand = "";
if (this.isResetData) {
this.navTopStr.brandStr = "";
} else {
for (let i = 0; i < this.zyFilterData["brand_id"].list.length; i++) {
if (this.zyFilterData["brand_id"].list[i].check) {
......@@ -440,11 +483,13 @@ export default {
}
this.brandStr = this.brandStr.slice(0, -1);
this.brand = this.brand.slice(0, -1);
this.navTopStr.brandStr = this.brand;
} else if (type == "encap") {
//封装规格
this.encapStr = "";
this.encap = "";
if (this.isResetData) {
this.navTopStr.encapStr = "";
} else {
for (let i = 0; i < this.zyFilterData["encap"].list.length; i++) {
if (this.zyFilterData["encap"].list[i].check) {
......@@ -456,11 +501,13 @@ export default {
this.encapStr = this.encapStr.slice(0, -1);
this.encap = this.encap.slice(0, -1);
this.navTopStr.encapStr = this.encap;
} else if (type == "packing") {
//包装筛选
this.packingStr = "";
this.packing = "";
if (this.isResetData) {
this.navTopStr.packingStr = "";
} else {
for (let i = 0; i < this.zyFilterData["packing"].list.length; i++) {
if (this.zyFilterData["packing"].list[i].check) {
......@@ -471,7 +518,9 @@ export default {
}
this.packingStr = this.packingStr.slice(0, -1);
this.packing = this.packing.slice(0, -1);
this.navTopStr.packingStr = this.packing;
}
this.p = 1;
this.getZyData();
}
}
......@@ -715,6 +764,34 @@ export default {
}
}
}
.sosoarr {
display: block;
position: fixed;
top: 44px;
left: 0;
right: 0;
z-index: 10;
background-color: #fff;
font-size: 15px;
font-weight: 400;
height: 44px;
line-height: 44px;
width: 100%;
-webkit-box-shadow: 0 2px 5px #eeeeee;
box-shadow: 0 2px 5px #eeeeee;
table-layout: fixed;
border-bottom: 1px solid #d6d7dc;
text-align: center;
padding: 0 15%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
b {
font-weight: bold;
font-size: 16px;
margin: 0 3px;
}
}
}
}
.content_scroll {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment