Skip to content

M
mayi-mp-shop
Commit db631f4a by 李嘉林
Options

暂存商品列表筛选

parent e76203ae
Showing with 951 additions and 9 deletions
src/api/goods.js
......@@ -9,5 +9,13 @@ export default {
},
queryMoreProductInfo(data) {
return requestPOST(`${process.env.OLSHOP_URL}/product/query_more_product_info`, data);
}
},
//POST 查询规格名及对应的规格值信息
query_specification_name_and_values_list(data) {
return requestPOST(`${process.env.OLSHOP_URL}/product/query_specification_name_and_values_list`, data)
},
//查询商品品牌
queryProductBrand(data) {
return requestPOST(`${process.env.OLSHOP_URL}/product/query_brand_by_page`, data)
},
};
src/components/common/GoodsFliters.vue 0 → 100644
<template>
<div id="GoodsFliters">
<div class="aaa" :style="{'z-index':show?999:-999}">
<div class="bg" v-if="show" @click="close"></div>
<div class="goodsFliters" :style="{'right':show?0:''}">
<div class="filters-text">筛选</div>
<div class="fliters-container">
<div class="list price clearfix">
<p class="tit">按原价筛选</p>
<div class="search_ipt">
<input
type="text"
placeholder="最低价"
v-model="submitFliterVal.minPrice"
/>
-
<input
type="text"
placeholder="最高价"
v-model="submitFliterVal.maxPrice"
/>
</div>
</div>
<div
class="list clearfix brand-wrap"
v-for="(ele, index) in GoodsSpecificationNameAndValuesListResponseDTO"
:key="index"
v-show="ele.specificationValueList && ele.specificationValueList.length"
>
<div class="tit">
<div class="tit-title">{{ ele.specificationName }}</div>
</div>
<div class="brand-list">
<template
v-if="ele.specificationValueList &&ele.specificationValueList.length <= 9"
>
<div
class="brand-item"
v-for="(item,index1) in ele.specificationValueList"
:key="index1"
>
<div
class="brand-item-text line-clamp1"
@click="selectBrandGoodsSpecification(item)"
:class="submitFliterVal.goodsSpecificationIds.includes(item.id)? 'brand-active': ''"
>
{{ item.specificationValue }}
<img
src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/46876f6b-08f7-4632-84f5-1ebf0a942786.png"
v-if="submitFliterVal.goodsSpecificationIds.includes(item.id)"
/>
</div>
</div>
</template>
<template
v-if="ele.specificationValueList &&ele.specificationValueList.length > 9"
>
<div
class="brand-item"
v-for="(item,index2) in ele.specificationValueList.slice(0, 8)"
:key="index2"
>
<div
class="brand-item-text line-clamp1"
:class="submitFliterVal.goodsSpecificationIds.includes(item.id)? 'brand-active': ''"
@click="selectBrandGoodsSpecification(item)"
>
{{ item.specificationValue }}
<img
src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/46876f6b-08f7-4632-84f5-1ebf0a942786.png"
v-if="submitFliterVal.goodsSpecificationIds.includes(item.id)"
/>
</div>
</div>
<template v-if="ele.brandMore">
<div
class="brand-item"
v-for="(item,index3) in ele.specificationValueList.slice(8)"
:key="index3"
>
<div
class="brand-item-text line-clamp1"
:class="submitFliterVal.goodsSpecificationIds.includes(item.id)? 'brand-active': ''"
@click="selectBrandGoodsSpecification(item)"
>
{{ item.specificationValue }}
<img
src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/46876f6b-08f7-4632-84f5-1ebf0a942786.png"
v-if="submitFliterVal.goodsSpecificationIds.includes(item.id)"
/>
</div>
</div>
</template>
<div
class="more"
v-if="ele.specificationValueList.length > 9 && !ele.brandMore"
@click="ele.brandMore = true"
>
查看更多 <van-icon name="arrow" color="#000" size="14" />
</div>
</template>
</div>
</div>
<div class="list clearfix brand-wrap" v-if="!hideBrandSelectFlag">
<div class="tit">
<div class="tit-title">品牌</div>
<div
class="tit-list"
v-if="submitFliterVal.brandActiveNameList.length"
>
<span class="line-clamp1 brands fl">{{
submitFliterVal.brandActiveNameList.join("、")
}}</span>
<span class="fl"
>(共{{ submitFliterVal.brandActiveNameList.length }}个)</span
>
</div>
</div>
<div class="brand-list">
<template v-if="brandList.length <= 9">
<div
class="brand-item"
v-for="(item,index4) in brandList"
:key="index4"
>
<div
class="brand-item-text line-clamp1"
@click="selectBrand(item)"
:class="submitFliterVal.brandIdList.includes(item.id)? 'brand-active': ''"
>
{{ item.brandName }}
<img
src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/46876f6b-08f7-4632-84f5-1ebf0a942786.png"
v-if="submitFliterVal.brandIdList.includes(item.id)"
/>
</div>
</div>
</template>
<template v-else>
<div
class="brand-item"
v-for="(item,index5) in brandList.slice(0, 8)"
:key="index5"
>
<div
class="brand-item-text line-clamp1"
:class="submitFliterVal.brandIdList.includes(item.id)? 'brand-active': ''"
@click="selectBrand(item)"
>
{{ item.brandName }}
<img
src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/46876f6b-08f7-4632-84f5-1ebf0a942786.png"
v-if="submitFliterVal.brandIdList.includes(item.id)"
/>
</div>
</div>
<template v-if="brandMore">
<div
class="brand-item"
v-for="(item,index6) in brandList.slice(8)"
:key="index6"
>
<div
class="brand-item-text line-clamp1"
:class="submitFliterVal.brandIdList.includes(item.id)? 'brand-active': ''"
@click="selectBrand(item)"
>
{{ item.brandName }}
<img
src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/46876f6b-08f7-4632-84f5-1ebf0a942786.png"
v-if="submitFliterVal.brandIdList.includes(item.id)"
/>
</div>
</div>
</template>
<div
class="more"
v-if="brandList.length > 9 && !brandMore"
@click="brandMore = true"
>
查看更多 <van-icon name="arrow" color="#000" size="14" />
</div>
</template>
</div>
</div>
</div>
<div class="fliterBtn van-hairline--top">
<div class="btns">
<div class="btn1" @click="resetFliter">重置</div>
<div class="btn2" @click="submitFliter">确认</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script type="text/ecmascript-6">
import goodsApi from "@/api/goods";
const app = getApp();
export default {
name: "",
data() {
return {
show: false,
submitFliterVal: {
minPrice: "",
maxPrice: "",
attribute: [],
brandIdList: [], //品牌
brandActiveNameList: [],
goodsSpecificationIds: [],
},
GoodsSpecificationNameAndValuesListResponseDTO: [],
brandMore: false,
brandList: [],
specifications: [],
randomNumber: "",
hideBrandSelectFlag: false, // 隐藏品牌筛选
};
},
components: {},
computed: {},
created() {
this.getProductBrand();
this.query_specification_name_and_values_list();
},
mounted() {
let _this = this;
app.openFilterGoods = (val)=>{
console.log("----打开弹窗");
this.open(val);
}
},
methods: {
open(val) {
console.log("筛选商品open");
this.submitFliterVal = val.submitFliterVal;
this.randomNumber = val.randomNumber;
this.hideBrandSelectFlag = val.hideBrandSelectFlag;
this.show = true;
},
close() {
this.show = false;
},
query_specification_name_and_values_list() {
goodsApi.query_specification_name_and_values_list({
filterFieldsShowFlag: 1,
queryGroupNameFlag: 1,
})
.then((res) => {
if (res.data.code == "200" && res.data.data && res.data.data.length) {
this.GoodsSpecificationNameAndValuesListResponseDTO = res.data.data;
this.GoodsSpecificationNameAndValuesListResponseDTO.forEach(
(ele) => {
this.$set(ele, "brandMore", false);
if (ele.specificationValueList) {
ele.specificationValueList.forEach((val) => {
this.$set(val, "id", val.specificationValueIds[0]);
this.$set(val, "ids", val.specificationValueIds);
});
}
}
);
}
});
},
getProductBrand() {
goodsApi.queryProductBrand({
page: 1,
rows: 100000,
used: 1,
})
.then((res) => {
console.log(res);
if (res.data.code == "200") {
this.brandList = res.data.data.list;
}
});
},
selectBrandGoodsSpecification(item) {
item.ids.forEach((id) => {
if (!this.submitFliterVal.goodsSpecificationIds.includes(id)) {
this.submitFliterVal.goodsSpecificationIds.push(id);
} else {
this.submitFliterVal.goodsSpecificationIds.splice(
this.submitFliterVal.goodsSpecificationIds.indexOf(id),
1
);
}
});
},
selectBrand(item) {
console.log(item, "----------------------1531");
console.log(
this.submitFliterVal.brandIdList,
"----------------------1532"
);
console.log(
this.submitFliterVal.brandActiveNameList,
"----------------------1533"
);
if (!this.submitFliterVal.brandIdList.includes(item.id)) {
this.submitFliterVal.brandIdList.push(item.id);
this.submitFliterVal.brandActiveNameList.push(item.brandName);
} else {
this.submitFliterVal.brandIdList.splice(
this.submitFliterVal.brandIdList.indexOf(item.id),
1
);
this.submitFliterVal.brandActiveNameList.splice(
this.submitFliterVal.brandIdList.indexOf(item.id),
1
);
}
},
// 重置筛选
resetFliter() {
this.submitFliterVal.minPrice = "";
this.submitFliterVal.maxPrice = "";
this.submitFliterVal.attribute = [];
if (!this.hideBrandSelectFlag) {
this.submitFliterVal.brandIdList = [];
this.submitFliterVal.brandActiveNameList = [];
}
this.submitFliterVal.goodsSpecificationIds = [];
this.specifications.forEach((item, index) => {
item.index = "false";
});
},
// 提交筛选
submitFliter() {
// this.$forceUpdate();
console.log(
this.submitFliterVal.minPrice > this.submitFliterVal.maxPrice,
Number(this.submitFliterVal.minPrice) >
Number(this.submitFliterVal.maxPrice)
);
console.log(this.submitFliterVal.minPrice, this.submitFliterVal.maxPrice);
if (
Number(this.submitFliterVal.minPrice) >
Number(this.submitFliterVal.maxPrice)
) {
Toast("最高价应大于最低价");
return;
}
let callbackObj = {
submitFliterVal: this.submitFliterVal,
randomNumber: this.randomNumber,
};
// 向外传值
app.getFilterGoodsData(callbackObj);
this.show = false;
},
},
};
</script>
<style lang="scss" scoped>
input,
button {
outline: none;
border: none;
background: transparent;
}
.aaa{
position: fixed;
width: 100%;
height: 100%;
top: 0;
display: flex;
overflow: hidden;
justify-content: flex-end;
}
.bg{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(#000000, 0.75);
}
.goodsFliters {
right: -100vw;
transition: all 0.3s linear;
background: #fff;
width: 290px;
height: 100vh;
display: flex;
flex-direction: column;
position: relative;
padding-bottom: 60px;
overflow-y: auto;
.filters-text {
width: 100%;
height: 54px;
padding-left: 10px;
font-size: 16px;
color: #333;
font-weight: bold;
box-sizing: content-box;
line-height: 44px;
box-sizing: border-box;
border-bottom: 10px solid #f3f3f3;
}
.fliters-container {
flex: 1;
overflow-y: auto;
.price {
.search_ipt {
height: 36px;
line-height: 36px;
margin-top: 10px;
color: #666;
display: flex;
justify-content: space-between;
input {
width: 45%;
height: 36px;
line-height: 36px;
text-align: center;
border-radius: 18px;
color: #666666;
font-size: 13px;
background-color: #f3f3f3;
}
}
}
.list {
padding-top: 10px;
padding: 10px 10px 16px;
border-bottom: 10px solid #f3f3f3;
p.tit {
font-size: 15px;
color: #3a3a3a;
}
.specification {
flex-wrap: wrap;
span {
margin-top: 10px;
display: block;
margin-right: 10px;
width: 70px;
font-size: 14px;
padding: 3px 5px;
text-align: center;
border: 1px solid #666;
}
span.active {
color: #fff;
background: var(--main-color);
border-color: var(--main-color);
}
}
}
.brand-wrap {
padding-left: 0;
padding-right: 0;
padding-bottom: 0;
.tit {
padding: 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
.tit-title {
font-size: 15px;
color: #3a3a3a;
}
.tit-list {
width: 70%;
font-size: 12px;
color: #999999;
text-align: right;
.brands {
width: 70%;
}
}
}
.brand-list {
padding: 10px 5px 0 5px;
// border-top: 1px solid #eeeeed;
margin-top: 10px;
.brand-item {
width: 33%;
padding: 0 5px;
float: left;
margin-bottom: 10px;
.brand-item-text {
height: 28px;
text-align: center;
line-height: 28px;
font-size: 13px;
color: #666666;
background-color: #f3f3f3;
border-radius: 2px;
padding: 0 5px;
position: relative;
overflow: hidden;
img {
position: absolute;
right: 0;
bottom: 0;
width: 12px;
height: 15px;
}
}
.brand-active {
background-color: rgba(255, 72, 72, 0.1);
color: #ff4848;
}
}
.more {
width: 33%;
height: 28px;
text-align: center;
box-sizing: border-box;
font-size: 13px;
color: #666666;
border: 1px solid #979797;
border-radius: 2px;
float: left;
display: flex;
justify-content: center;
align-items: center;
}
}
}
.height65 {
width: 100%;
height: 65px;
}
}
.fliterBtn {
height: 50px;
background-color: white;
.btns {
height: 50px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px;
div {
flex: 1;
height: 40px;
border-radius: 20px;
text-align: center;
font-size: 16px;
line-height: 40px;
color: #fff;
margin: 0 10px;
}
.btn2 {
background: var(--main-color);
}
.btn1 {
background: var(--minor-color);
}
}
}
.brand-wrap {
padding-left: 0;
padding-right: 0;
padding-bottom: 0;
.tit {
padding: 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
.tit-title {
font-size: 15px;
color: #3a3a3a;
}
.tit-list {
width: 70%;
font-size: 12px;
color: #999999;
text-align: right;
.brands {
width: 70%;
}
}
}
.brand-list {
padding: 10px 5px 0 5px;
// border-top: 1px solid #eeeeed;
margin-top: 10px;
max-height: 40vh;
overflow-y: auto;
.brand-item {
width: 33%;
padding: 0 5px;
float: left;
margin-bottom: 10px;
.brand-item-text {
height: 28px;
text-align: center;
line-height: 28px;
font-size: 13px;
color: #666666;
background-color: #f3f3f3;
border-radius: 2px;
padding: 0 5px;
position: relative;
overflow: hidden;
img {
position: absolute;
right: 0;
bottom: 0;
width: 12px;
height: 15px;
}
}
.brand-active {
background-color: rgba(255, 72, 72, 0.1);
color: #ff4848;
}
}
.more {
width: 33%;
height: 28px;
text-align: center;
box-sizing: border-box;
font-size: 13px;
color: #666666;
border: 1px solid #979797;
border-radius: 2px;
float: left;
display: flex;
justify-content: center;
align-items: center;
}
}
}
.list {
padding-top: 10px;
padding: 10px 10px 16px;
border-bottom: 10px solid #f3f3f3;
p.tit {
font-size: 15px;
color: #3a3a3a;
}
.specification {
flex-wrap: wrap;
span {
margin-top: 10px;
display: block;
margin-right: 10px;
width: 70px;
font-size: 14px;
padding: 3px 5px;
text-align: center;
border: 1px solid #666;
}
span.active {
color: #fff;
background: var(--main-color);
border-color: var(--main-color);
}
}
}
}
</style>
src/main.js
......@@ -90,7 +90,11 @@ mpApp.webviewCallBack = function () { }
mpApp.shareInit = function () {};
mpApp.themeColorCallBack = function () {};
mpApp.indexBgCallBack = function(){ }
mpApp.indexBgCallBack = function () { }
// 打开筛选商品开关
mpApp.openFilterGoods = function () { }
// 筛选弹窗点击确认
mpApp.getFilterGoodsData = function () { }
/**
* 组件点击行为收集
......
src/pages/home/index.vue
......@@ -130,6 +130,8 @@
</keep-alive>
<couponPopup></couponPopup>
<!-- 商品筛选 -->
<GoodsFliters></GoodsFliters>
</div>
</template>
......@@ -160,6 +162,7 @@ import NewPolite from "../../components/newCustomer/newPolite";
import customList from "../../components/custom-list";
import richText from "../../components/basicTool/rich-text";
import memberInfo from "../../components/basicTool/member-info";
import GoodsFliters from "../../components/common/GoodsFliters";
import { setTabBarActive, checkTabbarPage,themeColor, checkShowConditionIds } from "../../utils/mayi.js";
import indexApi from "@/api/index.js";
import { throttle, concatUrl } from "../../utils/index.js"
......@@ -219,7 +222,8 @@ export default {
woTimeout,
'custom-list':customList,
'rich-text':richText,
'member-info':memberInfo
'member-info':memberInfo,
GoodsFliters
},
onShareAppMessage(res) {
let {shopCode} = app.globalData.shopInfo;
......
static/nativeComponents/GoodsList/index.js
const app = getApp();
const { log } = app;
const { goodsApi, DFSImg, $themeToLink } = app;
function random_string(len) {
len = len || 32;
var chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678";
var maxPos = chars.length;
var pwd = "";
for (let i = 0; i < len; i++) {
pwd += chars.charAt(Math.floor(Math.random() * maxPos));
}
return pwd;
}
const componentOptions = {
// 组件选项
options: {
......@@ -40,7 +50,20 @@ const componentOptions = {
pageSize:10,
pageNum:1,
pageGoodsList:[],
loadingFlag:[],
loadingFlag: [],
filterSearchName: "",
mainColor: "",
filterType: -1, //-1 综合、3销量 2价格(升、降) 8上新 99筛选
filterPriceType: 0, // 0升序 1降序
submitFliterVal: {
minPrice: "",
maxPrice: "",
attribute: [],
brandIdList: [], //品牌
brandActiveNameList: [],
goodsSpecificationIds: [],
randomNumber: random_string(6),
},
},
// 数据监听器
observers: {},
......@@ -48,6 +71,14 @@ const componentOptions = {
lifetimes: {
created() {},
ready() {
let _this = this;
app.getFilterGoodsData = (val) => {
if (val.randomNumber != _this.data.randomNumber) return;
_this.setData({
submitFliterVal: val.submitFliterVal,
})
_this.init();
}
this.init();
},
moved() {},
......@@ -86,12 +117,49 @@ const componentOptions = {
// this.pageGoodsList = this.getStorageSync('pageGoodsList')
// console.log(this.pageGoodsList,active,'active');
// },
filterInput(e) {
this.setData({
filterSearchName: e.detail.value
})
},
filterGoods(e) {
let { item } = e.currentTarget.dataset;
let { filterPriceType, filterType } = this.data;
if(item == 2) {
// 价格筛选
filterPriceType = filterPriceType == 0?1:0
} else {
// 还原默认值
filterPriceType = 1
}
this.setData({
filterType: item,
filterPriceType
})
if(item == 99) {
// 展示筛选弹窗
// wx.showToast({title:"暂未开发", icon:"error"})
app.openFilterGoods({
submitFliterVal: this.data.submitFliterVal,
randomNumber: this.data.randomNumber,
hideBrandSelectFlag: this.data.datas.componentData.filterBrand.length>0?true:false,
});
// this.opt.bus.$emit("openGoodsFilters",{
// submitFliterVal: this.submitFliterVal,
// randomNumber: this.randomNumber,
// hideBrandSelectFlag: this.filterBrand.length>0?true:false,
// });
} else {
this.init();
}
},
init() {
let {
goodsType,
goodsSource,
angleSignImg,
titleIcon
titleIcon,
filterBrand
} = this.data.datas.componentData;
angleSignImg = DFSImg(angleSignImg,150,150,1);
if (titleIcon) {
......@@ -99,7 +167,9 @@ const componentOptions = {
}
this.setData({
"data.datas.componentData.angleSignImg": angleSignImg,
titleIcon
titleIcon,
mainColor: app.themeColor["--main-color"],
"submitFliterVal.brandIdList": filterBrand,
});
console.log(this.data.titleIcon, "----------------------------68");
let ids = this.getStorageSync(`ids`);
......@@ -114,7 +184,7 @@ const componentOptions = {
this.setStorageSync("pageNumList",[1])
}
if (goodsType == 0) {
if (goodsSource == "classify") {
if (goodsSource != "assign") {
//商品分类
this.getProductList(1, 1);
} else {
......@@ -175,8 +245,18 @@ const componentOptions = {
.marketingTag
? 1
: 0,
whetherFindMultiShopFlag: 1
whetherFindMultiShopFlag: 1,
brandIdList: this.data.submitFliterVal.brandIdList || []
}; // 当前页 // 一页多少条 //查询销售数量 //查询收藏数 //是否使用虚拟销售数量 //是否使用虚拟收藏人数 //是否查询商品佣金（0：不查询，1：展示，为空不查佣金） //是否查询会员价 1是 0否 //是否展示营销标签 1是 0否 //是否查询多商户 //商城使用
// 启用了筛选组件
if(this.data.datas.componentData.filterComponentsFlag == true){
query.searchWord = this.data.filterSearchName;
query.sortColumn = this.data.filterType == -1 ? "" : this.data.filterType
query.sortType = this.data.filterType == 2 ? this.data.filterPriceType : "";
query.goodsSpecificationIds = this.data.submitFliterVal.goodsSpecificationIds;
query.minPrice = this.data.submitFliterVal.minPrice;
query.maxPrice = this.data.submitFliterVal.maxPrice;
}
goodsApi.queryProductInfo(query).then(res => {
this.setData({ loading: false, queryProductInfoLoading: false });
if (res.data.code == 200) {
......
static/nativeComponents/GoodsList/index.json
......@@ -4,6 +4,7 @@
"goods-item":"./GoodsItem/index",
"waterfall-flow":"../module/WaterfallFlow/index",
"heap-item":"./heapItem/index",
"van-loading":"/static/vant/loading/index"
"van-loading":"/static/vant/loading/index",
"m-svg":"/static/nativeComponents/common/m-svg/index"
}
}
static/nativeComponents/GoodsList/index.wxml
......@@ -18,6 +18,42 @@
<text class="jt"></text>
</view>
</view>
<!-- 筛选组件 -->
<view class="filterComponents" wx:if="{{datas.componentData.filterComponentsFlag}}">
<view class="filterInput flex">
<i class="iconfont-common common-iconsousuo"></i>
<input type="text" placeholder="搜索" bindinput="filterInput" />
<view class="btn" bindtap="init">搜索</view>
</view>
<view class="filterCondition flex">
<view class="filterItem {{filterType == -1?'activeStatus':''}}" bindtap="filterGoods" data-item="{{-1}}">
综合
</view>
<view class="filterItem {{filterType == 3?'activeStatus':''}}" bindtap="filterGoods" data-item="{{3}}">
销量
</view>
<view class="filterItem flex filterPrice {{filterType == 2?'activeStatus':''}}" bindtap="filterGoods" data-item="{{2}}">
<text>价格</text>
<view class="svgItem flex">
<view class="arrowTop">
<m-svg src="/static/svg/arrowTop.svg" colors="{{[filterType == 2 && filterPriceType == 0?mainColor:'']}}"></m-svg>
</view>
<view class="arrowBottom">
<m-svg src="/static/svg/arrowBottom.svg" colors="{{[filterType == 2 && filterPriceType == 1?mainColor:'']}}"></m-svg>
</view>
</view>
</view>
<view class="filterItem {{filterType == 8?'activeStatus':''}}" bindtap="filterGoods" data-item="{{8}}">
上新
</view>
<view class="filterItem flex {{filterType == 99?'activeStatus':''}}" bindtap="filterGoods" data-item="{{99}}">
<text> | 筛选</text>
<view class="shaixuan">
<m-svg src="/static/svg/shaixuan1.svg" colors="{{[filterType == 99?mainColor:'']}}"></m-svg>
</view>
</view>
</view>
</view>
<!-- 网格布局 -->
<view
wx:if="{{datas.componentData.style==='list'}}"
......
static/nativeComponents/GoodsList/index.wxss
......@@ -56,6 +56,89 @@ image{
padding-top: 0.54em;
color: #6b6b6b;
}
/* 筛选组件 */
.filterComponents{
background: #fff;
padding: 14px;
margin-bottom: 10px;
border-radius: 6px;
position: sticky;
top: 0;
z-index: 999;
box-shadow: 0px 5px 10px 0px #0000001c;
}
.filterComponents input{
outline: none;
border: none;
background: none;
}
.filterComponents .filterInput{
position: relative;
width: 100%;
background: #f4f4f4;
overflow: hidden;
padding: 0 0 0 10px;
align-items: center;
border-radius: 30px;
}
.filterComponents .filterInput i{
color: #b7b7b7;
}
.filterComponents .filterInput input{
line-height: 30px;
flex: 1;
margin-left: 10px;
font-size: 14px;
}
.filterComponents .filterInput .btn{
font-size: 12px;
background: var(--main-color);
color: #fff;
padding: 0 12px;
line-height: 22px;
border-radius: 30px;
margin-right: 5px;
}
.filterComponents .filterCondition{
margin-top: 10px;
padding: 0 10px;
align-items: center;
justify-content: space-between;
}
.filterComponents .filterCondition .filterItem{
font-size: 14px;
color: #999;
align-items: center;
}
.filterComponents .filterCondition .filterItem:last-child{
margin-left: 30px;
}
.filterComponents .filterCondition .filterItem:last-child .shaixuan{
width: 14px;
height: 14px;
}
.filterComponents .filterCondition .filterPrice{
align-items: center;
}
.filterComponents .filterCondition .activeStatus {
color: var(--main-color);
}
.filterComponents .filterCondition .filterPrice .svgItem{
position: relative;
align-items: center;
}
.filterComponents .filterCondition .filterPrice .svgItem .arrowTop,
.filterComponents .filterCondition .filterPrice .svgItem .arrowBottom{
width: 14px;
height: 14px;
position: absolute;
left: 0;
}
.filterComponents .filterCondition .filterPrice .svgItem .arrowTop{
background-size: cover;
}
.filterComponents .filterCondition .filterPrice .svgItem .arrowBottom {
}
.goodsItem-list{
flex-wrap: wrap;
}
......
static/nativeComponents/common/m-svg/index.js 0 → 100644
Component({
properties: {
src: String,
colors: Array
},
observers: {
'src, colors': function(src, colors) {
// 读取 src 链接资源
wx.getFileSystemManager().readFile({
filePath: src,
encoding: 'binary',
success: res => {
let basestr
if (colors && colors.length) {
let a = 0
// 匹配 Hex 数值，并进行替换
basestr = res.data.replace(/#[a-zA-Z0-9]{3,6}/g, (word) => {
const newColor = colors[a]
a = a + 1
return newColor ? newColor : word
})
} else {
basestr = res.data
}
// 将 svg 数据进行 URL 编码
basestr = encodeURIComponent(basestr)
this.setData({
svgStyle: `background-image: url("data:image/svg+xml,${basestr}");`
})
}
})
}
}
})
\ No newline at end of file
static/nativeComponents/common/m-svg/index.json 0 → 100644
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
static/nativeComponents/common/m-svg/index.wxml 0 → 100644
<!--components/svg/index.wxml-->
<block wx:if="{{svgStyle}}">
<view class="svg" style='{{svgStyle}}' />
</block>
\ No newline at end of file
static/nativeComponents/common/m-svg/index.wxss 0 → 100644
.svg {
background-repeat: no-repeat;
background-size: contain;
width: 100%;
height: 100%;
}
\ No newline at end of file
static/svg/arrowBottom.svg 0 → 100644
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1658286601253" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="38302" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><defs><style type="text/css">@font-face { font-family: element-icons; src: url("chrome-extension://moombeodfomdpjnpocobemoiaemednkg/fonts/element-icons.woff") format("woff"), url("chrome-extension://moombeodfomdpjnpocobemoiaemednkg/fonts/element-icons.ttf ") format("truetype"); }
@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
</style></defs><path d="M746.4 591.6c6 6 9 13.2 9 21.4s-3 15.4-9 21.4l-213 213c-6 6-13.2 9-21.4 9s-15.4-3-21.4-9l-213-213c-6-6-9-13.1-9-21.4 0-8.2 3-15.4 9-21.4 6-6 13.1-9 21.4-9h426c8.3 0 15.4 3 21.4 9z" p-id="38303" fill="#999999"></path></svg>
\ No newline at end of file
static/svg/arrowTop.svg 0 → 100644
<svg t="1658285943185" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="38152" width="16" height="16" fill="#999"><path d="M755.4 430.5c0 8.2-3 15.4-9 21.4s-13.2 9-21.4 9H299c-8.2 0-15.4-3-21.4-9s-9-13.1-9-21.4c0-8.2 3-15.4 9-21.4l213-213c6-6 13.1-9 21.4-9 8.2 0 15.4 3 21.4 9l213 213c6 6 9 13.1 9 21.4z" p-id="38153"></path></svg>
\ No newline at end of file
static/svg/shaixuan1.svg 0 → 100644
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1658286681004" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="45896" width="16" height="16" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css">@font-face { font-family: element-icons; src: url("chrome-extension://moombeodfomdpjnpocobemoiaemednkg/fonts/element-icons.woff") format("woff"), url("chrome-extension://moombeodfomdpjnpocobemoiaemednkg/fonts/element-icons.ttf ") format("truetype"); }
@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
</style></defs><path d="M911.36 219.136c57.344-63.488 28.672-126.976-57.344-126.976h-684.032c-86.016 0-114.688 61.44-59.392 126.976l251.904 299.008v280.576c0 12.288 8.192 20.48 20.48 20.48s20.48-8.192 20.48-20.48v-294.912l-262.144-311.296c-32.768-38.912-22.528-59.392 28.672-59.392h686.08c49.152 0 59.392 20.48 26.624 57.344l-278.528 313.344V911.36c0 12.288 8.192 20.48 20.48 20.48s20.48-8.192 20.48-20.48v-391.168l266.24-301.056z" p-id="45897" fill="#999999"></path></svg>
\ 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 to comment