java-mall-app/components/item-list.vue
2025-04-24 15:47:08 +08:00

1487 lines
35 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view :class="[isFilterFixed ? 'u-pa' : '']">
<view
:class="['m-tab', isFilterFixed ? 'm-tab-fixed' : 'm-tab-top']"
:style="'top:' + fixTop + 'px'"
v-if="isShowFilter && tabs.length > 0"
>
<scroll-view
class="m-navbar scroll-view_H"
scroll-x
style="width: 94%"
:show-scrollbar="true"
>
<view class="m-navbar-info">
<block v-for="(tab, index) in tabs" :key="index">
<view
class="m-navbar-item"
:class="index == key ? 'item-on' : ''"
@click="switchTabs(index)"
>
{{ tab.name }}
<label
class="iconfont zc zc-youxiajiao active-icon"
v-if="index == key"
></label>
</view>
</block>
</view>
</scroll-view>
<scroll-view
scroll-top="200"
class="m-navbar scroll-view_H"
scroll-x
:style="'width:' + (tabs[key].sidx && tabs[key].sort ? '80%' : '94%')"
:show-scrollbar="true"
v-if="tabs[key].isShowFilter"
>
<block v-for="(price, index) in prices" :key="index">
<view
class="filter-item"
:class="priceIndex == index ? 'filter-item-on' : ''"
@click="selectPriceIndex(index)"
>
{{ price.title }}
</view>
</block>
</scroll-view>
</view>
<view
scroll-y="true"
:class="[
'm-product-all u-pa',
isShowFilter && isFilterFixed ? 'm-product-box' : '',
]"
:style="{ backgroundColor: bgColor }"
>
<view
:class="{ 'm-product-list': 1, 'm-listv': viewtype == 1 }"
v-if="isdata"
style="width: 100%"
>
<block v-for="(item, i) in pdlist" :key="i">
<block
v-if="
priceIndex == -1 ||
(post.product_unit_price_max > 0
? item.ItemSalePrice >= post.product_unit_price_min &&
item.ItemSalePrice <= post.product_unit_price_max
: item.ItemSalePrice >= post.product_unit_price_min)
"
>
<navigator
v-if="!isFG"
:url="
(item.is_virtual
? '/pages/product/detail'
: '/pages/product/detail') +
'?pid=' +
item.id
"
class="m-product-item"
:style="{
marginLeft: (i % 2 == 0 ? 10 - paddingLeft : 5) * 2 + 'rpx',
}"
>
<view class="m-product-img product-list">
<view
class="m-img-number"
:class="'m-img-' + (i > 3 ? 3 : i)"
v-if="isShowNumber"
>
<span>{{ i + 1 }}</span>
</view>
<image
lazy-load
:src="$.img(item.product_image, 360, 360)"
v-if="item.product_image"
/>
</view>
<view
class="m-product-info1"
style="
display: flex;
flex-flow: column;
justify-content: space-between;
"
>
<view class="m-product-name2">
<label>
<text
class="tag tag-bargain"
v-if="
item.activity_type_id == StateCode.ACTIVITY_TYPE_BARGAIN
"
>
{{ item.activity_type_name }}
</text>
<text
class="tag tag-gift"
v-if="
item.activity_type_id == StateCode.ACTIVITY_TYPE_GIFT
"
>
{{ item.activity_type_name }}
</text>
<text
class="tag tag-saleoff"
v-if="
item.activity_type_id ==
StateCode.ACTIVITY_TYPE_LIMITED_DISCOUNT
"
>
{{ item.activity_type_name }}
</text>
<text
class="tag tag-reduction"
v-if="
item.activity_type_id ==
StateCode.ACTIVITY_TYPE_REDUCTION
"
>
{{ item.activity_type_name }}
</text>
{{ item.SalesName }}</label
>
</view>
<view class="m-product-price1">
<view class="money">
<block v-if="item.ItemSalePrice">
<label>{{ __("¥") }}</label
>{{ number_format(item.ItemSalePrice, 2) }}
</block>
</view>
<view
class="num"
v-if="
false &&
plantformInfo.config.product_salenum_flag &&
item.SaleNum > 0
"
>
<text>{{ __("已售") }}</text>
<label style="color: #db384c; margin-left: 2px">{{
item.SaleNum
}}</label>
</view>
<view class="add-cart hide">
<uni-icons
type="plusempty"
size="20"
color="#fff"
></uni-icons>
</view>
<view :class="'c' + 1" v-if="false"> </view>
</view>
</view>
</navigator>
</block>
</block>
</view>
<navigator
url="/pagesub/search/search"
redirect="true"
class="m-nullpage"
v-else
>
<view class="m-nullpage-middle">
<label class="iconfont icon-sousuo-sousuo"></label>
<view class="m-null-tip">
<text>{{ __("亲~找不到您想要的商品") }}</text>
<text>{{ __("再多点提示呗") }}</text>
</view>
</view>
</navigator>
<view class="m-loading-box" v-if="isShowLoading">
<block v-if="ispage">
<view class="u-loadmore">
<label class="u-loading"></label>
<text class="u-loadmore-tips">{{ __("正在加载") }}</text>
</view>
</block>
<block v-else>
<view class="u-loadmore u-loadmore-line">
<text class="u-loadmore-tips">{{ __("没有更多数据啦") }}</text>
</view>
</block>
</view>
</view>
</view>
</template>
<script>
import uniDrawer from "@/components/uni-drawer.vue";
import uniTag from "@/components/uni-tag/uni-tag.vue";
import { mapMutations, mapState } from "vuex";
export default {
props: {
options: {
type: Object,
default() {
return {};
},
},
optionStr: {
type: String,
default: "{}",
},
css: {
type: Object,
default() {
return {};
},
},
isShowFilter: {
type: [Boolean, Number],
default: false,
},
isFilterFixed: {
type: Boolean,
default: false,
},
fixTop: {
type: Number,
default() {
return 0;
},
},
viewtype: {
type: Number,
default: 1,
},
titleText: {
type: String,
default: "",
},
titleColor: {
type: String,
default: "#bfbfbf",
},
bgColor: {
type: String,
default: "#f8f8f8",
},
paddingLeft: {
type: Number,
default: 0,
},
paddingRight: {
type: Number,
default: 0,
},
maxNumber: {
type: Number,
default: 100,
},
isShowLoading: {
type: [Boolean, Number],
default: true,
},
isGuessFlag: {
type: Boolean,
default: false,
},
priceList: {
type: String,
default: "",
},
uniId: {
type: String,
default() {
return "guessyoulike";
},
},
},
data() {
return {
isStoreFlag: 0,
h: 0,
/* viewtype: 1, */
assist: [],
pdlist: [],
fglist: [],
sort: 2,
flag: true,
ispage: true,
scposition: "",
old: {
scposition: 0,
},
istop: false,
isdata: false,
isVirtual: false,
isFG: false,
is_filter: false,
prices: [],
priceIndex: -1,
sidxName: "排序",
key: 0,
post: {
sidx: "product_order",
sort: "ASC",
isnew: false,
keywords: "",
store_category_ids: 0,
page: 1,
store_id: null,
pa_id: null,
pa_type_id: null,
product_unit_price_min: null,
product_unit_price_max: null,
points_from: null,
points_to: null,
virtual: null,
store_type: 1,
product_ids: "",
},
tabs: [],
rightDrawerVisible: false,
inverted: {
gift: true,
groupbuy: true,
xianshi: true,
virtual: true,
},
contract_row: [],
market_row: [],
isShowNumber: false,
};
},
components: {
uniDrawer,
uniTag,
},
computed: mapState([
"Config",
"StateCode",
"notice",
"plantformInfo",
"shopInfo",
"userInfo",
"hasLogin",
]),
created() {
var that = this;
var h = that.$.getSystemInfoSync().windowHeight;
that.setData({
h: h,
});
var post = this.post;
var options = this.options;
let tmp_opt = this.optionStr;
options = Object.assign(options, tmp_opt);
this.setData({
post: {
store_id: options.store_id,
sidx: options.sidx ? options.sidx : "product_order",
sort: options.sort ? options.sort : "ASC",
keywords: options.keywords,
store_category_ids: options.store_category_id,
category_id: options.category_id,
brand_id: options.brand_id,
product_tags: options.tag_id ? [options.tag_id] : [],
kind_id: options.kind_id,
store_type: options.store_type,
page: 1,
product_unit_price_min: options.product_unit_price_min
? options.product_unit_price_min
: "",
product_unit_price_max: options.product_unit_price_max
? options.product_unit_price_max
: "",
sp_from: options.sp_from ? options.sp_from : "",
sp_to: options.sp_to ? options.sp_to : "",
points_from: options.points_from ? options.points_from : "",
points_to: options.points_to ? options.points_to : "",
pa_id: options.pa_id ? options.pa_id : "",
pa_type_id: options.pa_type_id ? options.pa_type_id : "",
virtual: null,
activity_type_ids: options.activity_type_id
? [options.activity_type_id]
: [],
contract_type_ids: options.contract_type_id
? [options.contract_type_id]
: [],
market_category_ids: options.market_category_id
? [options.market_category_id]
: [],
assist: {},
product_ids: options.data[0].ids,
},
tabs: options.data ? options.data : [],
});
if (this.tabs) {
this.tabs.map(function (value, index) {
if (value.title) {
that.tabs[index].prices = that.priceTabs(value.title);
}
if (value.options) {
if (typeof value.options == "string") {
var parse = JSON.parse(value.options);
that.tabs[index].sidx = parse.sidx;
that.tabs[index].sort = parse.sort;
} else {
that.tabs[index].sidx = value.options.sidx;
that.tabs[index].sort = value.options.sort;
}
}
});
this.prices = this.tabs[0].prices;
this.isShowNumber = this.tabs[0].isShowNumber;
this.post.sidx = this.tabs[0].sidx ? this.tabs[0].sidx : "";
this.post.sort = this.tabs[0].sort ? this.tabs[0].sort : "";
this.editSidxName();
//console.log(this.tabs)
}
if (this.post.product_ids) {
this.GetPlist(function () {
that.pdlist.length == 0
? that.setData({ isdata: false })
: that.setData({ isdata: true });
});
} else {
this.isdata = false;
return;
}
uni.$on("diy-scrollbottom", function (data) {
console.log("监听到事件来自 update ,携带参数 uniId 为:" + data.uniId);
if (data.uniId == that.uniId) {
console.log("监听到 scrollbottom");
console.info(that.$refs);
that.scrollbottom();
}
});
},
watch: {
isFilterTop0(newVal, oldVal) {
console.log(newVal);
},
options(newVal, oldVal) {
this.setData({
pdlist: [],
});
let that = this;
that.ispage = true;
var post = this.post;
var options = this.options;
this.setData({
post: {
store_id: options.store_id,
sidx: options.sidx ? options.sidx : "product_order",
sort: options.sort ? options.sort : "ASC",
keywords: options.keywords,
store_category_ids: options.store_category_id,
category_id: options.category_id,
brand_id: options.brand_id,
product_tags: options.tag_id ? [options.tag_id] : [],
kind_id: options.kind_id,
store_type: options.store_type,
page: 1,
product_unit_price_min: options.product_unit_price_min
? options.product_unit_price_min
: "",
product_unit_price_max: options.product_unit_price_max
? options.product_unit_price_max
: "",
sp_from: options.sp_from ? options.sp_from : "",
sp_to: options.sp_to ? options.sp_to : "",
points_from: options.points_from ? options.points_from : "",
points_to: options.points_to ? options.points_to : "",
pa_id: options.pa_id ? options.pa_id : "",
pa_type_id: options.pa_type_id ? options.pa_type_id : "",
virtual: null,
activity_type_ids: options.activity_type_id
? [options.activity_type_id]
: [],
contract_type_ids: options.contract_type_id
? [options.contract_type_id]
: [],
market_category_ids: options.market_category_id
? [options.market_category_id]
: [],
assist: {},
product_ids: options.data[0].ids,
},
tabs: options.data ? options.data : [],
});
if (this.tabs) {
this.tabs.map(function (value, index) {
if (value.title) {
that.tabs[index].prices = that.priceTabs(value.title);
}
if (value.options) {
if (typeof value.options == "string") {
var parse = JSON.parse(value.options);
that.tabs[index].sidx = parse.sidx;
that.tabs[index].sort = parse.sort;
} else {
that.tabs[index].sidx = value.options.sidx;
that.tabs[index].sort = value.options.sort;
}
}
});
this.prices = this.tabs[0].prices;
this.isShowNumber = this.tabs[0].isShowNumber;
this.post.sidx = this.tabs[0].sidx;
this.post.sort = this.tabs[0].sort;
}
if (this.post.product_ids) {
this.GetPlist(function () {
that.pdlist.length == 0
? that.setData({ isdata: false })
: that.setData({ isdata: true });
});
} else {
this.isdata = false;
return;
}
},
},
methods: {
...mapMutations([
"login",
"logout",
"getPlantformInfo",
"forceUserInfo",
"getUserInfo",
]),
pdprice: function () {
this.post.sort = this.post.sort == "DESC" ? "ASC" : "DESC";
this.GetPlist();
},
/**
* 过滤搜索
*/
onFilter: function () {
uni.$emit("returnTop");
var post = this.post;
post.page = 1;
post.activity_type_ids = [];
post.contract_type_ids = [];
post.market_category_ids = [];
var is_filter = false;
for (var i = 0; i < this.contract_row.length; i++) {
if (!this.contract_row[i].contract_is_unselected) {
post.contract_type_ids.push(this.contract_row[i].contract_type_id);
is_filter = true;
}
}
for (var i = 0; i < this.market_row.length; i++) {
if (!this.market_row[i].market_is_unselected) {
post.market_category_ids.push(this.market_row[i].market_category_id);
is_filter = true;
}
}
if (!this.inverted.gift) {
post.activity_type_ids.push(this.StateCode.ACTIVITY_TYPE_GIFT);
is_filter = true;
}
if (!this.inverted.groupbuy) {
post.activity_type_ids.push(this.StateCode.ACTIVITY_TYPE_DIY_PACKAGE);
is_filter = true;
}
if (!this.inverted.xianshi) {
post.activity_type_ids.push(
this.StateCode.ACTIVITY_TYPE_LIMITED_DISCOUNT
);
is_filter = true;
}
if (!this.inverted.virtual) {
post.virtual = 1;
is_filter = true;
} else {
post.virtual = null;
}
post.assist = {};
let ao = {};
for (var a = 0, lenA = this.assist.length; a < lenA; ++a) {
var items = this.assist[a].items;
let temp = [];
for (var i = 0, lenI = items.length; i < lenI; ++i) {
if (!items[i].assist_is_unselected) {
temp.push(items[i].assist_item_id);
}
}
if (temp.length > 0) {
ao[this.assist[a].assist_id] = temp;
}
}
/*
post.assist = JSON.stringify(ao);
post.activity_type_ids = JSON.stringify(post.activity_type_ids);
post.contract_type_ids = JSON.stringify(post.contract_type_ids);
post.market_category_ids = JSON.stringify(post.market_category_ids);
*/
console.info(JSON.stringify(this.assist));
console.info(JSON.stringify(ao));
post.assist = ao;
post.activity_type_ids = post.activity_type_ids;
post.contract_type_ids = post.contract_type_ids;
post.market_category_ids = post.market_category_ids;
this.setData({
pdlist: [],
post: post,
is_filter: is_filter,
});
this.GetPlist();
this.rightDrawerVisible = false;
},
editSidxName: function () {
console.log(this.post.sidx);
if (this.post.sidx == "product_unit_price") {
this.sidxName = "价格";
} else if (this.post.sidx == "product_sale_num") {
this.sidxName = "销量";
} else if (this.post.sidx == "product_favorite_num") {
this.sidxName = "收藏";
} else if (this.post.sidx == "product_add_time") {
this.sidxName = "新品";
} else if (this.post.sidx == "product_order") {
this.sidxName = "排序";
}
},
priceTabs: function (priceList) {
if (priceList) {
var list = priceList.split(",");
var price = [];
for (var i in list) {
i = parseInt(i);
if (list[i + 1]) {
if (i == 0) {
price.push({
from: list[i],
to: parseFloat(list[i + 1]),
title: parseFloat(list[i]) + "-" + list[i + 1],
});
} else {
price.push({
from: parseFloat(list[i]) + 1,
to: parseFloat(list[i + 1]),
title: parseFloat(list[i]) + 1 + "-" + list[i + 1],
});
}
} else {
price.push({
from: parseFloat(list[i]),
to: 0,
title: list[i] + "以上",
});
}
}
return price;
console.log(this.prices);
}
},
selectPriceIndex: function (index) {
var that = this;
this.priceIndex = index;
this.post.product_unit_price_min = this.prices[index].from;
this.post.product_unit_price_max = this.prices[index].to;
},
switchTabs: function (index) {
var that = this;
var tab = this.tabs[index];
this.setData({
key: index,
prices: tab.prices,
priceIndex: -1,
isShowNumber: tab.isShowNumber,
});
this.post.product_unit_price_min = 0;
this.post.product_unit_price_max = 0;
this.post.sidx = tab.sidx ? tab.sidx : "";
this.post.sort = tab.sort ? tab.sort : "";
this.post.page = 1;
this.post.product_ids = tab.ids;
console.log(tab);
this.editSidxName();
if (this.post.product_ids.length > 0) {
this.GetPlist(function () {
that.pdlist.length == 0
? that.setData({ isdata: false })
: that.setData({ isdata: true });
});
} else {
this.isdata = false;
return;
}
},
assistItemReset: function (e) {
var aid = parseInt(e.target.dataset.aid);
let assist = this.assist.concat();
var items = assist[aid].items;
for (var i = 0, lenI = items.length; i < lenI; ++i) {
items[i].checked = false;
}
this.setData({ assist: assist });
},
assistItemChange: function (e) {
var values = e.detail.value;
var aid = parseInt(e.target.dataset.aid);
let assist = this.assist.concat();
var items = assist[aid].items;
for (var i = 0, lenI = items.length; i < lenI; ++i) {
items[i].checked = false;
for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
if (items[i].assist_item_id == values[j]) {
items[i].checked = true;
break;
}
}
}
this.setData({ assist: assist });
},
assistItemRadionChange: function (e) {
var value = e.target.value;
var aid = parseInt(e.target.dataset.aid);
let assist = this.assist.concat();
var items = assist[aid].items;
for (var i = 0, lenI = items.length; i < lenI; ++i) {
items[i].checked = false;
if (items[i].assist_item_id == value) {
items[i].checked = true;
break;
}
}
this.setData({ assist: assist });
},
scrollbottom: function (e) {
if (this.flag) {
var that = this;
that.setData({ flag: false }), clearTimeout(n);
var post = this.post;
/*
post.sidx = 'product_unit_price_min';
post.sort = this.sort == 1 ? 'DESC' : 'ASC';
*/
post.page = parseInt(that.post.page) + 1;
var n = setTimeout(function () {
that.setData({
post: post,
}),
that.GetPlist();
}, 500);
}
},
/*
* 读取商品数据
*/
GetPlist: function (callback) {
let url = this.Config.URL.pt.list;
if (this.isGuessFlag) {
url = this.Config.URL.pt.guess;
}
this.setData({ flag: false });
var that = this;
let params = Object.assign({}, that.post);
//转为逗号分割
let assistItemIds = [];
for (var assistId in that.post.assist) {
var items = that.post.assist[assistId];
for (var i = 0, lenI = items.length; i < lenI; ++i) {
assistItemIds.push(items[i]);
}
}
params.product_assist_data = assistItemIds.join(",");
params.activity_type_ids = that.post.activity_type_ids.join(",");
params.contract_type_ids = that.post.contract_type_ids.join(",");
params.market_category_ids = that.post.market_category_ids.join(",");
params.product_tags = that.post.product_tags.join(",");
params.item_id = that.post.product_ids;
that.$.request({
url: this.Config.URL.pt.listItem,
data: params,
loading: false,
method: "GET",
ajaxCache: {
timeout: this.Config.CACHE_EXPIRE,
},
success: function (data, status, msg, code) {
that.setData({
pdlist: [],
});
for (var i = 0; i < data.items.length; i++) {
data.items[i]["id"] = data.items[i]["item_id"];
data.items[i]["DefaultProductSkuId"] = data.items[i]["item_id"];
data.items[i]["ProductName"] = data.items[i]["product_name"];
data.items[i]["ProductTips"] = data.items[i]["product_tips"];
data.items[i]["SalesName"] = data.items[i]["product_name"];
data.items[i]["ProductPic"] = data.items[i]["product_image"];
data.items[i]["ItemSalePrice"] = parseFloat(
data.items[i]["item_unit_price"]
);
data.items[i]["SaleNum"] = data.items[i]["product_sale_num"];
data.items[i]["Stock"] = data.items[i]["product_quantity"];
data.items[i]["DefaultProductSkuId"] = data.items[i]["item_id"];
data.items[i]["user_cart_quantity"] = 1;
//数据转换
if (
data.items[i]["product_spec"] &&
that.$.isJson(data.items[i]["product_spec"])
) {
data.items[i]["product_spec"] = JSON.parse(
data.items[i]["product_spec"]
);
} else {
data.items[i]["product_spec"] = [];
}
if (
data.items[i]["product_uniqid"] &&
that.$.isJson(data.items[i]["product_uniqid"])
) {
data.items[i]["product_uniqid"] = JSON.parse(
data.items[i]["product_uniqid"]
);
} else {
data.items[i]["product_uniqid"] = [];
}
data.items[i]["HasManualSku"] =
data.items[i]["product_spec"].length > 1;
}
if (200 == status && data.items.length > 0) {
if (data.page >= data.total || data.page >= that.maxNumber) {
that.setData({
flag: false,
ispage: false,
pdlist: that.pdlist.concat(data.items),
});
} else {
that.setData({
flag: true,
ispage: true,
pdlist: that.pdlist.concat(data.items),
});
}
that.setData({
isdata: true,
});
} else {
that.setData({
flag: false,
ispage: false,
isdata: false,
});
}
callback && callback();
},
});
},
scrolltoupper: function (t) {
this.old.scposition = t.detail.scrollTop;
},
returnTop: function () {
var that = this;
// 解决view层不同步的问题
that.setData({
scposition: this.old.scposition,
});
this.$nextTick(function () {
that.setData({
scposition: 0,
});
});
},
onCloseFilter() {
this.rightDrawerVisible = false;
},
onOpenFilter() {
this.rightDrawerVisible = true;
//
let that = this;
if (!that.post.category_id) {
return;
}
if (that.assist.length == 0) {
that.$.request({
url: that.Config.URL.pt.listFilter,
data: { category_id: that.post.category_id },
ajaxCache: {
timeout: this.Config.CACHE_EXPIRE,
},
success: function (data, status, msg, code) {
let contracts = data.contracts;
for (var i = 0; i < contracts.length; i++) {
contracts[i].contract_is_unselected = true;
}
that.setData({ contract_row: contracts });
let markets = data.markets;
for (var i = 0; i < markets.length; i++) {
markets[i].market_is_unselected = true;
}
that.setData({ market_row: markets });
//筛选辅助属性
for (var i = 0; i < data.assists.length; i++) {
for (var j = 0; j < data.assists[i]["items"].length; j++) {
data.assists[i]["items"][j].assist_is_unselected = true;
}
}
that.setData({
assist: data.assists,
});
},
});
}
},
setType(type) {
this.inverted[type] = !this.inverted[type];
},
setContract(index) {
this.contract_row[index].contract_is_unselected =
!this.contract_row[index].contract_is_unselected;
},
setMarket(index) {
console.info(this.market_row[index]);
this.market_row[index].market_is_unselected =
!this.market_row[index].market_is_unselected;
},
setAssist(aid, index) {
console.info(this.assist[aid]["items"][index]);
this.assist[aid]["items"][index].assist_is_unselected =
!this.assist[aid]["items"][index].assist_is_unselected;
},
},
};
</script>
<style lang="scss" scoped>
@import "../styles/_variables.scss";
.m-navbar {
background-color: #f5f5f5;
padding: 0 24rpx;
}
/*全部商品 start*/
.m-navbar-item {
// width:172rpx;
padding: 20rpx;
font-size: 28rpx;
height: 36rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #222222;
line-height: 40rpx;
letter-spacing: 1rpx;
position: relative;
// overflow: hidden;
// white-space: nowrap;
// text-overflow: ellipsis;
i {
font-size: 0rpx;
line-height: 0;
vertical-align: middle;
display: inline-block;
width: 0rpx;
height: 0rpx;
margin-left: 9.375rpx;
border-width: 9.375rpx;
border-color: #aaa transparent transparent transparent;
border-style: solid dashed dashed dashed;
}
}
.m-navbar-item:after {
border: none;
}
.m-sort {
position: relative;
}
.m-sort image {
width: 24rpx;
height: 24rpx;
position: absolute;
/*top: 50%;*/
margin-top: 10rpx;
margin-left: 2rpx;
}
/*全部商品 end*/
.m-product-price1 {
display: flex;
justify-content: space-between;
label {
font-weight: initial;
}
}
.m-listv {
.m-product-price1 {
width: 312rpx;
}
}
.num {
font-size: 24rpx;
color: #717171;
// padding-right: 20rpx;
/*margin-left:260rpx; */
}
.u-pa .m-tab {
top: var(--window-top);
}
.u-pa .m-tab-top {
top: 0;
}
.u-pa .m-tab-fixed {
position: fixed !important;
}
.filter-box {
top: var(--window-top);
}
.filter-box-top {
top: 0;
}
.tag-view {
margin: 10rpx 20rpx;
display: inline-block;
}
.uni-numbox-value {
border: 2rpx solid #cccccc;
background-color: #ffffff;
width: 150rpx;
height: 48rpx;
text-align: center;
display: inline-block;
}
.uni-dot {
width: 30rpx;
height: 100%;
text-align: center;
display: inline-block;
line-height: 44rpx;
height: 44rpx;
}
.uni-padding-wrap {
overflow: hidden;
max-width: 400rpx;
}
/* */
.product-list {
position: relative;
z-index: 1;
&:hover {
z-index: 2;
}
.no_goods {
.no_shadow {
height: 100%;
width: 100%;
position: absolute;
z-index: 11;
opacity: 0.7;
background-color: #b2b2b2;
}
.no_goods_tip {
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 12;
text-align: center;
height: 60rpx;
line-height: 60rpx;
}
position: absolute;
z-index: 10;
height: 60rpx;
line-height: 60rpx;
color: #fff;
font-size: 26rpx;
width: 100%;
bottom: 0;
left: 0;
width: 100%;
}
.flag {
position: absolute;
top: 0;
left: 50%;
z-index: 2;
width: 64px;
height: 20px;
margin-left: -32px;
font-size: 12px;
line-height: 20px;
text-align: center;
color: #fff;
}
.flag-reduction {
background-color: #e50dbb;
z-index: 8;
}
.flag-saleoff {
background-color: #e53935;
z-index: 7;
}
.flag-postfree {
background-color: #ffac13;
z-index: 6;
}
.flag-bargain {
background-color: #ffac13;
z-index: 4;
}
.flag-gift {
background-color: #2196f3;
z-index: 3;
}
.flag-new {
background-color: #83c44e;
z-index: 5;
}
.flag-selfsupport {
background-color: #f44336;
z-index: 10;
position: absolute;
top: 1px;
right: 5px;
left: auto;
width: 40px;
}
}
.placeholder-class {
font-size: 25rpx;
}
.button {
line-height: 2;
font-size: 34rpx;
}
.uni-common-mt {
margin-top: 20rpx;
}
.u-pa {
position: inherit !important;
}
.u-pa .m-product-list {
padding-top: 0rpx;
}
.u-pa .m-tab {
position: relative;
}
.m-product-box {
margin-top: calc(var(--window-top) + 4rpx);
}
.dropItem {
}
.u-pa .m-product-list {
}
.m-listv .m-product-item:nth-child(1) {
margin-top: 20rpx !important;
}
.m-listv .m-product-item:nth-child(2) {
margin-top: 20rpx !important;
}
.m-listv .m-product-item:nth-child(odd) {
margin-left: 0;
}
.m-listv .m-product-item:nth-child(even) {
margin-right: 0;
}
.scroll-view_H {
width: 100%;
white-space: nowrap;
.m-navbar-item {
display: inline-block;
.active-icon {
position: absolute;
bottom: 0rpx;
right: -10rpx;
color: $default-skin-bg;
&:before {
font-weight: bold;
}
}
}
}
.money {
font-size: 32rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: $default-skin-bg;
line-height: 50rpx;
}
.add-cart {
width: 50rpx;
height: 50rpx;
background: $default-skin-bg;
border-radius: 18rpx;
text-align: center;
line-height: 50rpx;
}
.filter-item {
display: inline-block;
padding: 10rpx 18rpx;
margin-right: 30rpx;
margin-top: 4rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #222222;
line-height: 40rpx;
line-height: 32rpx;
margin-bottom: 4rpx;
}
.filter-item-on {
color: $default-skin-bg;
border-radius: 34rpx;
border: 2rpx solid $default-skin-bg;
}
.m-listv .m-product-name2 {
line-height: 32rpx;
height: 64rpx;
}
.item-on {
font-size: 32rpx;
font-weight: 600;
color: #222222;
line-height: 44rpx;
margin-left: -10px;
}
.m-navbar-info {
display: flex;
justify-content: space-between;
}
.m-img-number {
position: absolute;
top: 20rpx;
left: 18rpx;
width: 54rpx;
height: 56rpx;
z-index: 2;
background-repeat: no-repeat;
background-size: 54rpx 56rpx;
span {
font-size: 32rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #ffffff;
line-height: 44rpx;
}
}
.m-img-0 {
background-image: url("https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/rank/1.png");
}
.m-img-1 {
background-image: url("https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/rank/2.png");
}
.m-img-2 {
background-image: url("https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/rank/3.png");
}
.m-img-3 {
background-image: url("https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/rank/4.png");
}
.m-screen {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #222222;
line-height: 40rpx;
.sort-img {
width: 20rpx;
height: 12rpx;
margin-top: 2px;
}
}
.tab-filter {
width: 100%;
height: 60rpx;
}
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
display: none;
}
</style>