Skip to content

梁建民 / h5

Go to a project
Commit d10a4026 by 施宇
Options

h5自营

parent d61b7422
Expand all
Inline Side-by-side
Showing with 307 additions and 2 deletions
.gitignore
...@@ -18,3 +18,4 @@ yarn-error.log* ...@@ -18,3 +18,4 @@ yarn-error.log*
*.njsproj *.njsproj
*.sln *.sln
*.sw* *.sw*
/view
src/views/xianhuo/rightSelect.vue 0 → 100644
<template>
<div class="filter_box">
<div class="filter_condition">
<dl class="filter_stock">
<dt class="stock_dt">
<span class="stock_title">商品库存</span>
</dt>
<dd class="stock_content">
<span :class="{'stock_li':true,'check':isyh}" @click="changYh">仅看有货</span>
</dd>
</dl>
<template v-for="(v,k) in filterData">
<template v-if="k!='brand_id'&&k!='encap'&&k!='packing'">
<dl class="filter_dl">
<dt class="filter_dt">
<div class="filter_head">
<span class="filter_title">{{k}}</span>
<template v-if="selectObj[k]&&selectObj[k].length">
<span
class="filter_xuan"
style="color: rgb(16, 128, 208);"
>{{selectObj[k].join()}}</span>
</template>
<template v-else>
<span class="filter_xuan">全部</span>
</template>
</div>
<div class="filter_more" @click="showDetail(k)">
<i
class="icon iconfont icon_down"
:class="{'icon':true,'iconfont':true,'icon_up':v.showMore,'icon_down':!v.showMore}"
></i>
</div>
</dt>
<dd class="filter_content" :style="{'height':v.showMore?'auto':'0.89333rem'}">
<ul class="clr filter_ul">
<li
v-for="(val,i) in v.list"
:class="{'filter_li':true,'check':val.check}"
@click="selectRight(k,i)"
>{{val.name+"("+val.num+")"}}</li>
</ul>
</dd>
</dl>
</template>
</template>
</div>
<div class="button">
<a class="but font cancel" @click="resetRight">重置</a>
<a class="but-blue confirm" @click="filterRight">确定</a>
</div>
</div>
</template>
<script>
export default {
data() {
return {
selectObj: {},
isyh: false
};
},
props: {
filterData: {
type: Object,
default: function() {
return {};
}
},
isShow: {
type: Boolean,
default: false
}
},
watch: {
isShow(now) {
if (now && JSON.stringify(this.selectObj) !== "{}") {
for (let k in this.filterData) {
let filterDataList = this.filterData[k].list;
for (let i = 0; i < filterDataList.length; i++) {
if (this.selectObj[k]) {
let index = this.selectObj[k].indexOf(filterDataList[i].name);
if (index !== -1) {
this.$set(this.filterData[k].list[i], "check", true);
}
}
}
}
}
}
},
methods: {
changYh() {
this.isyh = !this.isyh;
},
resetRight() {
this.selectObj = {};
this.isyh = false;
this.$emit("resetRight");
},
filterRight() {
let params = {};
if (this.isyh) {
params = { filterData: this.selectObj, isyh: true };
} else {
params = { filterData: this.selectObj, isyh: false };
}
this.$emit("filterRight", params);
},
showDetail(k) {
if (this.filterData[k].showMore) {
this.filterData[k].showMore = false;
} else {
this.$set(this.filterData[k], "showMore", true);
}
},
selectRight(k, i) {
let name = this.filterData[k].list[i].name;
if (this.filterData[k].list[i].check) {
this.filterData[k].list[i].check = false;
let index = this.selectObj[k].indexOf(name);
this.selectObj[k].splice(index, 1);
if (!this.selectObj[k].length) {
delete this.selectObj[k];
}
} else {
this.$set(this.filterData[k].list[i], "check", true);
if (this.selectObj[k]) {
// let index = this.selectObj[k].indexOf(name);
// if(index == -1){
this.selectObj[k].push(name);
// }
} else {
this.selectObj[k] = [name];
}
}
}
}
};
</script>
<style lang="scss">
@function remFun($rem) {
@return $rem * 50/37.5;
}
.filter_box {
width: remFun(6.86rem);
height: 100%;
overflow: hidden;
background: #fff;
position: absolute;
top: 0;
right: 0;
z-index: 1000;
* {
box-sizing: border-box;
font-family: "Helvetica Neue", Helvetica, sans-serif;
}
.filter_condition {
height: 94%;
overflow-y: auto;
padding-top: remFun(0.3rem);
.filter_stock {
margin: 0 remFun(0.05rem) remFun(0.3rem) remFun(0.2rem);
.stock_dt {
height: remFun(0.4rem);
.stock_title {
float: left;
height: remFun(0.4rem);
color: #333333;
margin-right: remFun(0.4rem);
font-size: 16px;
font-weight: bold;
line-height: remFun(0.4rem);
}
}
.stock_content {
margin-top: remFun(0.3rem);
height: remFun(0.67rem);
overflow: hidden;
.stock_li {
float: left;
font-size: 12px;
width: remFun(2rem);
height: remFun(0.5rem);
line-height: remFun(0.5rem);
background: #f6f6f6;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border-radius: remFun(0.05rem);
margin-right: remFun(0.17rem);
margin-bottom: remFun(0.17rem);
&.check {
background: #1080d0 !important;
color: #fff !important;
}
}
}
}
.filter_dl {
margin: 0 remFun(0.05rem) remFun(0.3rem) remFun(0.2rem);
.filter_dt {
height: remFun(0.4rem);
.filter_head {
float: left;
width: remFun(6rem);
height: remFun(0.4rem);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.filter_title {
height: remFun(0.4rem);
color: #333333;
margin-right: remFun(0.4rem);
font-size: 16px;
font-weight: bold;
line-height: remFun(0.4rem);
}
.filter_xuan {
float: right;
font-size: 12px;
height: remFun(0.4rem);
line-height: remFun(0.4rem);
}
}
.filter_more {
float: left;
height: remFun(0.4rem);
font-size: 12px;
line-height: remFun(0.4rem);
i {
font-size: 12px;
margin: remFun(0.1rem) 5px;
display: block;
width: remFun(0.24rem);
height: remFun(0.13rem);
&.icon_down {
background: url("../../assets/images/xianhuo/question_content_down.png");
background-size: contain;
background-repeat: no-repeat;
}
&.icon_up {
background: url("../../assets/images/xianhuo/question_content_up.png");
background-size: contain;
background-repeat: no-repeat;
}
}
}
}
.filter_content {
margin-top: remFun(0.3rem);
height: remFun(0.67rem);
overflow: hidden;
.filter_ul {
.filter_li {
float: left;
font-size: 12px;
width: remFun(2rem);
height: remFun(0.5rem);
line-height: remFun(0.5rem);
background: #f6f6f6;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border-radius: remFun(0.05rem);
margin-right: remFun(0.17rem);
margin-bottom: remFun(0.17rem);
&.check {
background: #1080d0 !important;
color: #fff !important;
}
}
}
}
}
}
.button {
border-top: 1px solid #d6d7dc;
height: remFun(0.8rem);
line-height: remFun(0.8rem);
background: #fff;
a {
width: 50%;
font-size: 14px;
height: remFun(0.78rem);
line-height: remFun(0.78rem);
display: block;
float: left;
text-align: center;
&.cancel {
border-radius: 5px;
color: #333333;
}
&.confirm {
background: #1080d0;
color: #fff;
text-decoration: none;
border: none;
}
}
}
}
</style>
view/css/chunk-c308643c.a742f79a.css deleted 100644 → 0
.menu-fade{position:fixed;z-index:998;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.3)}.menu{position:fixed;right:10px;top:13px;z-index:999}.menu b{font-size:18px;color:#666}.menu .popover-arrow{position:absolute;z-index:1000;top:11px;right:0;overflow:hidden;width:26px;height:26px}.menu .popover-arrow:after{position:absolute;top:19px;left:0;width:26px;height:26px;content:" ";-webkit-transform:rotate(45deg);transform:rotate(45deg);border-radius:3px;background:#333}.menu .menu-view{margin-top:36px;background:#333;font-size:15px;border-radius:2px;max-height:300px}.menu .menu-view li{position:relative;overflow:hidden;padding:11px 15px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.menu .menu-view li a{color:#fff}.menu .menu-view li a i{margin-right:.1rem}.head-dom[data-v-87442ebc]{padding-top:44px}.head-dom .header-page[data-v-87442ebc]{height:44px;width:100%;padding:0 .2rem;position:fixed;z-index:998;top:0;background:#f3f3f3}.head-dom .header-page i[data-v-87442ebc]{font-size:18px;margin-top:13px;color:#666}.head-dom .header-page h3[data-v-87442ebc]{font-size:16px;color:#333;width:68%;line-height:44px;text-align:center;height:44px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 10%!important}.head-dom .header-page .search[data-v-87442ebc]{position:absolute;left:40px;right:60px;background:#fff;height:30px;margin:7px 0;border-radius:15px;padding:5px 10px 5px 30px;-webkit-box-sizing:border-box;box-sizing:border-box}.head-dom .header-page .search .van-icon[data-v-87442ebc]{position:absolute;left:10px;height:20px;line-height:21px;margin-top:0}.head-dom .header-page .search .van-cell[data-v-87442ebc]{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;padding:0;line-height:21px;font-size:12px;color:#333}.xianhuo{font-family:Helvetica Neue,Helvetica,sans-serif}.xianhuo .search-cont *{-webkit-box-sizing:border-box;box-sizing:border-box}.xianhuo .search-cont .search-sift{width:100%;position:relative}.xianhuo .search-cont .search-sift .title-cut{padding:0 10px;font-size:14px;overflow:hidden;height:40px;line-height:40px;border-bottom:1px solid #d6d7dc;background-color:#fff}.xianhuo .search-cont .search-sift .title-cut p i{margin:0 5px;font-size:15px}.xianhuo .search-cont .search-sift .title-cut li{float:left;margin-right:.96rem}.xianhuo .search-cont .search-sift .title-cut li.act{color:#1080d0}.xianhuo .search-cont .search-sift .title-cut li span{display:block;float:right;position:relative;width:10px;height:20px;left:5px;top:10px}.xianhuo .search-cont .search-sift .title-cut li span i{position:absolute;content:"";height:0;width:0;pointer-events:none;border:solid transparent;border-width:5px 4px}.xianhuo .search-cont .search-sift .title-cut li span i.icon-top{top:-1px;right:0;border-bottom-color:#666}.xianhuo .search-cont .search-sift .title-cut li span i.icon-top.bright{border-bottom-color:#1080d0}.xianhuo .search-cont .search-sift .title-cut li span i.icon-bot{top:11px;right:0;border-top-color:#666}.xianhuo .search-cont .search-sift .title-cut li span i.icon-bot.bright{border-top-color:#1080d0}.xianhuo .search-cont .search-sift .sift-box{position:relative;padding-top:5px;padding-left:2.5%;height:40px;line-height:40px;border-bottom:1px solid #d6d7dc;background-color:#fff}.xianhuo .search-cont .search-sift .sift-box dl{float:left;width:22.5%;margin-right:2.5%;height:35px}.xianhuo .search-cont .search-sift .sift-box dl.p_act{border:1px solid #d6d7dc;border-bottom:none}.xianhuo .search-cont .search-sift .sift-box dl.p_act dt{background:#fff;height:34px;line-height:28px;border-bottom:1px solid #fff}.xianhuo .search-cont .search-sift .sift-box dl dt{text-align:center;font-size:12px;height:30px;line-height:30px;background:#f3f3f3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 5px}.xianhuo .search-cont .search-sift .sift-box dl dt i{font-size:12px;margin-left:5px}.xianhuo .search-cont .search-sift .sift-box dl dd{display:none;position:absolute;top:40px;left:0;width:100%;bottom:140px;z-index:3}.xianhuo .search-cont .search-sift .sift-box dl dd ul{background:#fff;padding-bottom:3px;height:200px;overflow-x:auto}.xianhuo .search-cont .search-sift .sift-box dl dd ul span{max-width:4.13333rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.xianhuo .search-cont .search-sift .sift-box dl dd .classify_left{width:4.66667rem;float:left;border-right:.02667rem solid #d6d7dc}.xianhuo .search-cont .search-sift .sift-box dl dd .classify_left li{width:97%;float:left;color:#333;font-size:14px;margin:0 2%;border:1px solid #fff;margin-top:3px;padding:0 10px;height:32px;line-height:32px}.xianhuo .search-cont .search-sift .sift-box dl dd .classify_right_box{width:5.33333rem;float:left;overflow:hidden}.xianhuo .search-cont .search-sift .sift-box dl dd .classify_right_box .classify_right{width:7.05333rem;overflow-y:auto}.xianhuo .search-cont .search-sift .sift-box dl dd .classify_right_box .classify_right li{width:72%;float:left;color:#333;font-size:14px;margin:0 2%;border:1px solid #fff;margin-top:3px;padding:0 10px;height:32px;line-height:32px}.xianhuo .search-cont .search-sift .sift-box dl dd .classify_right_box .classify_right li.check{border:1px solid #1080d0;color:#1080d0}.xianhuo .search-cont .search-sift .sift-box dl dd li{width:46%;float:left;color:#333;font-size:14px;margin:0 2%;border:1px solid #fff;margin-top:3px;padding:0 10px;height:32px;line-height:32px}.xianhuo .search-cont .search-sift .sift-box dl dd li.check{border:1px solid #1080d0;color:#1080d0}.xianhuo .search-cont .search-sift .sift-box dl dd .button{border-top:1px solid #d6d7dc;height:40px;line-height:40px;background:#fff;-webkit-box-shadow:0 2px 5px #eee;box-shadow:0 2px 5px #eee}.xianhuo .search-cont .search-sift .sift-box dl dd .button a{width:50%;font-size:14px;height:39px;line-height:39px;display:block;float:left;text-align:center}.xianhuo .search-cont .search-sift .sift-box dl dd .button a.cancel{color:#333;border-radius:5px}.xianhuo .search-cont .search-sift .sift-box dl dd .button a.confirm{background:#1080d0;color:#fff;text-decoration:none;border:none}
\ No newline at end of file
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