Skip to content

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

暂存商品列表筛选

parent e76203ae
Showing with 287 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/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