2537 lines
73 KiB
Vue
2537 lines
73 KiB
Vue
<template>
|
|
<view class="main">
|
|
<div
|
|
class="header"
|
|
:style="{
|
|
paddingTop: menu.top + menu.height + 'px',
|
|
backgroundImage:
|
|
pageType === 'UnionMall'
|
|
? 'url(https://eshangtech.com/minTestImg/unionMallBg.png)'
|
|
: 'url(https://eshangtech.com/ShopICO/ahyd-mall/wechatesAH/indexBg.png)',
|
|
backgroundSize:
|
|
pageType === 'UnionMall' ? '100% 480rpx' : '100% 300rpx',
|
|
}"
|
|
>
|
|
<view
|
|
class="headerTop"
|
|
:style="{
|
|
height: menu.top + menu.height + 'px',
|
|
paddingTop: menu.top + 'px',
|
|
backgroundImage:
|
|
pageType === 'UnionMall'
|
|
? 'url(https://eshangtech.com/minTestImg/unionMallBg.png)'
|
|
: 'url(https://eshangtech.com/ShopICO/ahyd-mall/wechatesAH/indexBg.png)',
|
|
backgroundSize:
|
|
pageType === 'UnionMall' ? '100% 480rpx' : '100% 300rpx',
|
|
}"
|
|
>
|
|
<image
|
|
class="backArrow"
|
|
src="/static/images/home/backArrowWhite.svg"
|
|
@click="handleBackHome"
|
|
/>
|
|
<view class="pageName">{{
|
|
pageType === "UnionMall" ? "工会商城" : "彩云驿购"
|
|
}}</view>
|
|
<view class="backArrow"></view>
|
|
</view>
|
|
|
|
<scroll-view
|
|
class="typeBox"
|
|
:style="{ top: menu.bottom + 66 + 'px' }"
|
|
scroll-x
|
|
>
|
|
<div
|
|
class="contentBox"
|
|
:style="{
|
|
height:
|
|
shopTypeList.length < 5
|
|
? '144rpx'
|
|
: Math.ceil(shopTypeList.length / 5) * 144 +
|
|
(Math.ceil(shopTypeList.length / 5) - 1) * 42 +
|
|
60 +
|
|
'rpx',
|
|
}"
|
|
>
|
|
<!-- :style="{
|
|
width:
|
|
shopTypeList.length <= 5
|
|
? '100%'
|
|
: shopTypeList.length * 136 + 60 + 'rpx',
|
|
}" -->
|
|
<!-- 工会商城 -->
|
|
<div
|
|
class="rowBox"
|
|
@click="handleGoUnionMall"
|
|
v-if="pageType !== 'UnionMall'"
|
|
>
|
|
<div class="imgBox">
|
|
<div class="itemImgBox">
|
|
<image
|
|
class="img"
|
|
src="/static/images/home/unionMallIcon.svg"
|
|
></image>
|
|
</div>
|
|
</div>
|
|
<div class="itemName">工会商城</div>
|
|
</div>
|
|
|
|
<div
|
|
class="rowBox"
|
|
v-for="(item, index) in shopTypeList"
|
|
:key="index"
|
|
@click="handleGoShopPage(item, index)"
|
|
:style="{
|
|
width: pageType === 'UnionMall' ? '25%' : '20%',
|
|
marginBottom:
|
|
pageType === 'UnionMall' &&
|
|
index < Math.ceil(shopTypeList.length / 4 - 1) * 4
|
|
? '44rpx'
|
|
: '',
|
|
}"
|
|
>
|
|
<div class="imgBox">
|
|
<div class="itemImgBox">
|
|
<image
|
|
class="img"
|
|
:src="
|
|
item.UserdefinedType_ICO ||
|
|
'/static/images/home/defultImg.png'
|
|
"
|
|
></image>
|
|
</div>
|
|
</div>
|
|
<div class="itemName">{{ item.UserdefinedType_Name }}</div>
|
|
</div>
|
|
|
|
<!-- <div
|
|
class="rowBox"
|
|
:style="{
|
|
width: oneRowNumber <= 5 ? 'calc(20% - 6px)' : '136rpx',
|
|
paddingRight:
|
|
index + 1 === oneRowNumber || index + 1 === oneRowNumber * 2
|
|
? '0'
|
|
: '40rpx',
|
|
marginBottom: index + 1 > oneRowNumber ? '0' : '40rpx',
|
|
}"
|
|
v-for="(item, index) in shopTypeList"
|
|
:key="index"
|
|
@click="handleGoShopPage(item, index)"
|
|
>
|
|
<div class="imgBox">
|
|
<div class="itemImgBox">
|
|
<image
|
|
class="img"
|
|
:src="
|
|
item.UserdefinedType_ICO ||
|
|
'/static/images/home/defultImg.png'
|
|
"
|
|
></image>
|
|
</div>
|
|
</div>
|
|
<div class="itemName">{{ item.UserdefinedType_Name }}</div>
|
|
</div> -->
|
|
</div>
|
|
</scroll-view>
|
|
</div>
|
|
|
|
<div class="pageContent">
|
|
<!-- 特价优惠 -->
|
|
<div
|
|
class="advertisement"
|
|
:style="{
|
|
background: pageType !== 'UnionMall' ? '#fff' : 'transparent',
|
|
}"
|
|
>
|
|
<div
|
|
class="advertisementContentBox"
|
|
v-if="pageType !== 'UnionMall'"
|
|
@click="handleGoShopList(5030)"
|
|
>
|
|
<div class="advertisementTop">
|
|
<div class="title">
|
|
<image
|
|
class="titleImg"
|
|
src="https://eshangtech.com/ShopICO/ahyd-mall/wechatesAH/title1st.png"
|
|
/>
|
|
</div>
|
|
<div class="moreBox">
|
|
<text class="moreText">低价爆品天天有</text>
|
|
<image
|
|
class="rightIcon"
|
|
src="https://eshangtech.com/ShopICO/ahyd-mall/wechatesAH/rightArrow.png"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<scroll-view class="shopList" scroll-x>
|
|
<!-- @click="handleGoShop(item)"-->
|
|
<div
|
|
:style="{
|
|
width: specialOffersList.length * 160 + 'rpx',
|
|
height: '100%',
|
|
whiteSpace: 'noWrap',
|
|
}"
|
|
>
|
|
<div
|
|
class="shopItem"
|
|
v-for="(item, index) in specialOffersList"
|
|
:key="index"
|
|
@click.stop="handleGoShopDetail(item)"
|
|
>
|
|
<div class="shopItemImg">
|
|
<div class="imgBox">
|
|
<image
|
|
class="shopImg"
|
|
:src="
|
|
item.IMAGE_PATH || '/static/images/home/defultImg.png'
|
|
"
|
|
/>
|
|
</div>
|
|
<text class="discountedPrice"
|
|
>¥{{ item.bigNumber || "" }}.{{
|
|
item.smallNumber || "00"
|
|
}}</text
|
|
>
|
|
</div>
|
|
<!-- <text class="price">¥15.99</text>-->
|
|
</div>
|
|
</div>
|
|
</scroll-view>
|
|
</div>
|
|
|
|
<!-- 工会商城的时候 显示排行榜 -->
|
|
|
|
<div class="sortBox" v-if="pageType === 'UnionMall'">
|
|
<div class="leftSortBox" @click="handleGoSortList(1)">
|
|
<div class="titleTopSort">
|
|
<!-- 新品榜 -->
|
|
<text class="title"><text style="color: red">新</text>品榜</text>
|
|
</div>
|
|
<div class="notice">超多优惠等你来</div>
|
|
<div class="shopList">
|
|
<view
|
|
class="shopItem"
|
|
v-for="(item, index) in newShopList"
|
|
:key="index"
|
|
:style="{ marginRight: index === 0 ? '16rpx' : '' }"
|
|
>
|
|
<image
|
|
class="shopImg"
|
|
:src="item.IMAGE_PATH"
|
|
@click.stop="handleGoShopDetail(item)"
|
|
/>
|
|
</view>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="rightItem bg2"
|
|
style="margin-right: 16rpx"
|
|
@click="handleGoSortList(2)"
|
|
>
|
|
<div class="titleTopSort">
|
|
<text class="title"
|
|
><text style="color: #ff8000">热</text>销榜</text
|
|
>
|
|
</div>
|
|
<div class="notice">本地特色</div>
|
|
<view
|
|
class="shopItem"
|
|
v-for="(item, index) in hotShopList"
|
|
:key="index"
|
|
>
|
|
<image
|
|
class="shopImg"
|
|
:src="item.IMAGE_PATH"
|
|
@click.stop="handleGoShopDetail(item)"
|
|
/>
|
|
</view>
|
|
</div>
|
|
<div class="rightItem bg3" @click="handleGoSortList(3)">
|
|
<div class="titleTopSort">
|
|
<text class="title"
|
|
><text style="color: #1ca038">推</text>荐榜</text
|
|
>
|
|
</div>
|
|
<div class="notice">本地特色</div>
|
|
<view
|
|
class="shopItem"
|
|
v-for="(item, index) in goodShopList"
|
|
:key="index"
|
|
>
|
|
<image
|
|
class="shopImg"
|
|
:src="item.IMAGE_PATH"
|
|
@click.stop="handleGoShopDetail(item)"
|
|
/>
|
|
</view>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <div class="advertisementContentBox" v-if="pageType === 'UnionMall'">
|
|
<div class="advertisementTopUnionMall">
|
|
<div class="title">商品排行</div>
|
|
<div class="moreBox">
|
|
<image class="rightIcon" src="https://eshangtech.com/ShopICO/ahyd-mall/wechatesAH/rightArrow.png" />
|
|
</div>
|
|
</div>
|
|
<div class="UnionMallShopList"> -->
|
|
|
|
<!-- <div class="rowBox" @click="handleGoSortList(1)">
|
|
<div class="imgBox">
|
|
<div class="itemImgBox">
|
|
<image class="img" src='/static/images/home/defultImg.png'></image>
|
|
</div>
|
|
</div>
|
|
<div class="itemName">新品榜</div>
|
|
</div>
|
|
<div class="rowBox" @click="handleGoSortList(2)">
|
|
<div class="imgBox">
|
|
<div class="itemImgBox">
|
|
<image class="img" src='/static/images/home/defultImg.png'></image>
|
|
</div>
|
|
</div>
|
|
<div class="itemName">热销榜</div>
|
|
</div>
|
|
<div class="rowBox" @click="handleGoSortList(3)">
|
|
<div class="imgBox">
|
|
<div class="itemImgBox">
|
|
<image class="img" src='/static/images/home/defultImg.png'></image>
|
|
</div>
|
|
</div>
|
|
<div class="itemName">推荐榜</div>
|
|
</div> -->
|
|
<!-- </div>
|
|
</div> -->
|
|
</div>
|
|
|
|
<!-- 今日推荐 -->
|
|
<div class="advertisementSecond">
|
|
<div
|
|
class="advertisementItem"
|
|
@click="handleGoShopList(5050)"
|
|
v-if="pageType !== 'UnionMall'"
|
|
>
|
|
<div class="advertisementItemContent">
|
|
<div class="contentTop">
|
|
<div class="title">
|
|
<image
|
|
class="titleImg"
|
|
src="https://eshangtech.com/ShopICO/ahyd-mall/wechatesAH/today3st.png"
|
|
/>
|
|
</div>
|
|
<div class="moreBox">
|
|
<text class="moreText">更多</text>
|
|
<image
|
|
class="rightIcon"
|
|
src="https://eshangtech.com/ShopICO/ahyd-mall/wechatesAH/rightArrow.png"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="shopDesc">精品优选</div>
|
|
|
|
<scroll-view class="shopItemList" scroll-x>
|
|
<div
|
|
:style="{
|
|
width: todayOffersList.length * 160 + 'rpx',
|
|
height: '100%',
|
|
whiteSpace: 'noWrap',
|
|
}"
|
|
>
|
|
<!-- @click="handleGoShop(item)"-->
|
|
<div
|
|
class="shopItem"
|
|
v-for="(item, index) in todayOffersList"
|
|
:key="index"
|
|
@click.stop="handleGoShopDetail(item)"
|
|
>
|
|
<div class="imgBox">
|
|
<image
|
|
class="shopImg"
|
|
:src="
|
|
item.IMAGE_PATH || '/static/images/home/defultImg.png'
|
|
"
|
|
/>
|
|
</div>
|
|
<text class="shopImgText"
|
|
>¥{{ item.bigNumber || "" }}.{{
|
|
item.smallNumber || "00"
|
|
}}</text
|
|
>
|
|
<!-- {{ item.bigNumber
|
|
}}<text class="shopSmallText">{{
|
|
item.smallNumber ? "." + item.smallNumber : ".00"
|
|
}}</text> -->
|
|
</div>
|
|
</div>
|
|
</scroll-view>
|
|
</div>
|
|
</div>
|
|
<!-- 精选品牌 -->
|
|
<div class="advertisementItemUnionMall" v-if="pageType === 'UnionMall'">
|
|
<div class="advertisementItemContent">
|
|
<div class="contentTopUnionMall">
|
|
<div class="title">精选品牌</div>
|
|
</div>
|
|
<view class="shopItemList">
|
|
<view
|
|
class="shopItem"
|
|
v-for="(item, index) in brandList"
|
|
:key="index"
|
|
@click="handleSearchBrand(item)"
|
|
>
|
|
<view class="imgBox">{{ item.label }}</view>
|
|
</view>
|
|
</view>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 甄选商品 -->
|
|
<div class="allShopList">
|
|
<template v-if="pageType !== 'UnionMall'">
|
|
<scroll-view class="allTypeBox" scroll-x="true">
|
|
<!-- <div :class="selectProducts === item.USERDEFINEDTYPE_ID
|
|
? 'typeItem selectTypeItem'
|
|
: 'typeItem'
|
|
" v-for="(item, index) in productsList" :key="index" @click="handleChangeShopMallType(item)">
|
|
{{ item.USERDEFINEDTYPE_NAME }}
|
|
</div> -->
|
|
<div
|
|
:class="
|
|
selectProducts === item.UserdefinedType_Id
|
|
? 'typeItem selectTypeItem'
|
|
: 'typeItem'
|
|
"
|
|
v-for="(item, index) in shopTypeList"
|
|
:key="index"
|
|
@click="handleChangeShopMallType(item)"
|
|
>
|
|
{{ item.UserdefinedType_Name }}
|
|
</div>
|
|
</scroll-view>
|
|
|
|
<!-- <scroll-view class="allShopListContent" scroll-y="true" @scrolltolower="handleToBottomproductsList">
|
|
<view class="buyShopItem" v-for="(item, index) in productsList" :key="index"
|
|
:style="{ marginRight: index % 2 === 0 ? '22rpx' : '' }">
|
|
<div class="shopImgContent">
|
|
<image class="shopImage" :src="item.IMAGE_PATH" />
|
|
</div>
|
|
<div class="priceBox">
|
|
<div class="shopName">{{ item.COMMODITY_NAME }}</div>
|
|
<view class="retailPrice">¥{{ item.RETbigNumber || "" }}.{{
|
|
item.RETsmallNumber || "00"
|
|
}}</view>
|
|
<view class="nowPrice">
|
|
<text class="unit">¥</text>
|
|
<text class="price">{{ item.bigNumber || "" }}.{{
|
|
item.smallNumber || "00"
|
|
}}</text>
|
|
</view>
|
|
</div>
|
|
</view>
|
|
</scroll-view> -->
|
|
<div class="allShopListContent">
|
|
<div
|
|
class="buyShopItem"
|
|
v-for="(item, index) in productsList"
|
|
:key="index"
|
|
@click.stop="handleGoShopDetail(item)"
|
|
>
|
|
<div class="shopImgContent">
|
|
<image class="shopImage" :src="item.IMAGE_PATH" />
|
|
</div>
|
|
<div class="priceBox">
|
|
<div class="shopName">{{ item.COMMODITY_NAME }}</div>
|
|
<view class="retailPrice"
|
|
>¥{{ item.RETbigNumber || "" }}.{{
|
|
item.RETsmallNumber || "00"
|
|
}}</view
|
|
>
|
|
<view class="nowPrice">
|
|
<text class="unit">¥</text>
|
|
<text class="price"
|
|
>{{ item.bigNumber || "" }}.{{
|
|
item.smallNumber || "00"
|
|
}}</text
|
|
>
|
|
</view>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<view class="inBottom" v-if="shopMsg.isOver">
|
|
<text class="bottomText">我是有底线的</text>
|
|
</view>
|
|
</template>
|
|
|
|
<!-- 随机商品 -->
|
|
<div class="shopLovely" v-if="pageType === 'UnionMall'">
|
|
<view class="shopLovelyTop">
|
|
<text class="shopLovelyTitle">猜你喜欢</text>
|
|
<view class="shopLovelyRight" @click="handleShowPricePopup">
|
|
<image
|
|
class="filterIcon"
|
|
src="/static/images/home/filterIcon.svg"
|
|
/>
|
|
<text class="filterText">筛选</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="shopLovelyList">
|
|
<!-- scroll-y="true"
|
|
@scrolltolower="handleToBottom" -->
|
|
<view
|
|
class="shopLovelyItem"
|
|
v-for="(item, index) in showShopList"
|
|
:key="index"
|
|
:style="{ marginRight: index % 2 === 0 ? '22rpx' : '' }"
|
|
@click.stop="handleGoShopDetail(item)"
|
|
>
|
|
<div class="shopImgContent">
|
|
<image class="shopImage" :src="item.IMAGE_PATH" />
|
|
</div>
|
|
<div class="priceBox">
|
|
<div class="shopName">{{ item.COMMODITY_NAME }}</div>
|
|
<view class="retailPrice"
|
|
>¥{{ item.RETbigNumber || "" }}.{{
|
|
item.RETsmallNumber || "00"
|
|
}}</view
|
|
>
|
|
<view class="nowPrice">
|
|
<text class="unit">¥</text>
|
|
<text class="price"
|
|
>{{ item.bigNumber || "" }}.{{
|
|
item.smallNumber || "00"
|
|
}}</text
|
|
>
|
|
</view>
|
|
</div>
|
|
</view>
|
|
</view>
|
|
<view class="inBottom" v-if="shopMsg.isOver">
|
|
<text class="bottomText">我是有底线的</text>
|
|
</view>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<uni-popup ref="priceRangeRef">
|
|
<view class="priceRangeBox">
|
|
<view class="titleBox">
|
|
<view class="closeIcon"></view>
|
|
<text class="title">价格区间</text>
|
|
<image
|
|
class="closeIcon"
|
|
src="/static/images/home/closeIcon.svg"
|
|
@click="handleClosePricePopup"
|
|
/>
|
|
</view>
|
|
|
|
<view class="inputBox">
|
|
<view class="inputItem">
|
|
<input placeholder="最低价" v-model="minPrice" />
|
|
</view>
|
|
<span class="unit">-</span>
|
|
<view class="inputItem">
|
|
<input placeholder="最高价" v-model="maxPrice" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="btnList">
|
|
<view class="cancelBtn" @click="handleReset">重置</view>
|
|
<view class="confirmBtn" @click="handleConfirm">确认</view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
|
|
<shop-tabbar
|
|
:page="`/pages/shopMallPage/index/index`"
|
|
:pageType="pageType"
|
|
:shopCarLength="shopCarListCount"
|
|
/>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import shopTabbar from "../../../components/shopTabbar.vue";
|
|
export default {
|
|
components: { shopTabbar },
|
|
data() {
|
|
return {
|
|
menu: {},
|
|
specialOffersList: [], // 特价优惠
|
|
todayOffersList: [], // 今日推荐
|
|
shopTypeList: [], // 商品大类数组
|
|
oneRowNumber: 0, // 单行个数
|
|
productsList: [], // 甄选商品
|
|
selectProducts: 0, // 选择的甄选商品类型
|
|
pageType: "", // 页面类型
|
|
brandList: [
|
|
{ label: "蓝月亮", value: 1 },
|
|
{ label: "洁柔", value: 2 },
|
|
{ label: "新希望", value: 3 },
|
|
{ label: "八宝贡", value: 4 },
|
|
{ label: "福临门", value: 5 },
|
|
{ label: "金斯利", value: 6 },
|
|
{ label: "良品铺子", value: 7 },
|
|
{ label: "云南白药", value: 8 },
|
|
{ label: "德和", value: 9 },
|
|
{ label: "蔬果园", value: 10 },
|
|
], // 热门品牌类型
|
|
minPrice: "", // 最低价
|
|
maxPrice: "", // 最高价
|
|
allShopList: [], // 工会商城时拿到的全部商品
|
|
showShopList: [], // 当前显示的全部商品
|
|
pageIndex: 1, // 当前显示几个 10个商品
|
|
shopMsg: {
|
|
pageIndex: 1,
|
|
pageSize: 6,
|
|
isOver: false,
|
|
},
|
|
havePrice: false, // 有无价格区间查询
|
|
newShopList: [], // 新品榜
|
|
hotShopList: [], // 热销榜
|
|
goodShopList: [], // 推荐榜
|
|
shopCarListCount: 0, // 购物车商品数量
|
|
sortType: 0, // 这一次的排序方法
|
|
sortTypeList: [
|
|
"COMMODITYTYPE_CODE",
|
|
"COMMODITY_BARCODE",
|
|
"COMMODITY_ID",
|
|
"COMMODITY_STOCK",
|
|
"COMMODITY_EN",
|
|
],
|
|
};
|
|
},
|
|
async onLoad(query) {
|
|
console.log("query", query);
|
|
this.menu = uni.getMenuButtonBoundingClientRect();
|
|
this.pageType = query.pageType;
|
|
if (query.pageType === "UnionMall") {
|
|
// 拿到顶部商品大类的方法
|
|
const data = await this.$api.getCoop({
|
|
action_type: "WeChat_GetMallGoodsType",
|
|
ownerUnitId: 911,
|
|
commodityNature: 5070,
|
|
});
|
|
console.log("handleGetShopBigType", data);
|
|
let typeList = data.Data.List || [];
|
|
let obj = {};
|
|
if (typeList && typeList.length > 0) {
|
|
typeList.forEach((item) => {
|
|
if (item.UserdefinedType_Id === 1253) {
|
|
obj = item;
|
|
}
|
|
});
|
|
}
|
|
let resList = obj.UserdefinedTypeList.slice(0, 8);
|
|
this.sortType = Math.floor(Math.random() * this.sortTypeList.length);
|
|
|
|
this.shopTypeList = resList;
|
|
// 拿到榜单的方法
|
|
this.handleGetSortList();
|
|
// this.shopTypeList = [
|
|
// {
|
|
// UserdefinedType_Name: "节日专享",
|
|
// UserdefinedType_Id: "1286",
|
|
// UserdefinedType_ICO: "",
|
|
// },
|
|
// {
|
|
// UserdefinedType_Name: "米面粮油",
|
|
// UserdefinedType_Id: "1287",
|
|
// UserdefinedType_ICO: "",
|
|
// },
|
|
// {
|
|
// UserdefinedType_Name: "生活家居",
|
|
// UserdefinedType_Id: "1288",
|
|
// UserdefinedType_ICO: "",
|
|
// },
|
|
// {
|
|
// UserdefinedType_Name: "家清日用",
|
|
// UserdefinedType_Id: "1289",
|
|
// UserdefinedType_ICO: "",
|
|
// },
|
|
// {
|
|
// UserdefinedType_Name: "零食饮料",
|
|
// UserdefinedType_Id: "1290",
|
|
// UserdefinedType_ICO: "",
|
|
// },
|
|
// {
|
|
// UserdefinedType_Name: "出差必备",
|
|
// UserdefinedType_Id: "1298",
|
|
// UserdefinedType_ICO: "",
|
|
// },
|
|
// {
|
|
// UserdefinedType_Name: "小型电器",
|
|
// UserdefinedType_Id: "1291",
|
|
// UserdefinedType_ICO: "",
|
|
// },
|
|
// {
|
|
// UserdefinedType_Name: "组合套餐",
|
|
// UserdefinedType_Id: "1292",
|
|
// UserdefinedType_ICO: "",
|
|
// },
|
|
// ];
|
|
// 拿到工会商城的商品列表
|
|
this.handleGetUnionShopList();
|
|
} else {
|
|
// 拿到顶部商品大类的方法
|
|
await this.handleGetShopBigType();
|
|
// 拿到特价优惠的
|
|
this.handleGetSpecialOffers();
|
|
// 拿到今日推荐的商品列表
|
|
this.handleGetTodayOffers();
|
|
// 最下面的甄选商品
|
|
this.handleGetProductsList();
|
|
}
|
|
},
|
|
onShow() {
|
|
// 判断当前的购物车里面是否有东西
|
|
let shopCarList = this.$store.state.myShopCar;
|
|
console.log("shopCarList", shopCarList);
|
|
let count = 0;
|
|
if (shopCarList && shopCarList.length > 0) {
|
|
shopCarList.forEach((item) => {
|
|
count += item.count;
|
|
});
|
|
}
|
|
this.shopCarListCount = count;
|
|
},
|
|
onReachBottom() {
|
|
console.log("onReachBottom");
|
|
this.handleToBottom();
|
|
},
|
|
methods: {
|
|
// 关闭价格区间的悬浮框
|
|
handleClosePricePopup() {
|
|
this.$refs.priceRangeRef.close();
|
|
},
|
|
// 榜单的方法
|
|
async handleGetSortList() {
|
|
let req1 = {
|
|
action_type: "WeChat_GetMallGoodsInfo",
|
|
ownerUnitId: 911,
|
|
COMMODITYNATURE: 5070,
|
|
payMethod: "1000,3000",
|
|
justCommodity: 1,
|
|
userdefinedtypeId: "1317",
|
|
};
|
|
|
|
let req2 = {
|
|
action_type: "WeChat_GetMallGoodsInfo",
|
|
ownerUnitId: 911,
|
|
COMMODITYNATURE: 5070,
|
|
payMethod: "1000,3000",
|
|
justCommodity: 1,
|
|
userdefinedtypeId: "1318",
|
|
sortStr: "COMMODITY_EN desc",
|
|
};
|
|
|
|
let req3 = {
|
|
action_type: "WeChat_GetMallGoodsInfo",
|
|
ownerUnitId: 911,
|
|
COMMODITYNATURE: 5070,
|
|
payMethod: "1000,3000",
|
|
justCommodity: 1,
|
|
userdefinedtypeId: "1319",
|
|
};
|
|
|
|
const data1 = await this.$api.getCoop(req1);
|
|
const data2 = await this.$api.getCoop(req2);
|
|
const data3 = await this.$api.getCoop(req3);
|
|
|
|
let list1 = this.handleChangeShopList(data1.Data.List);
|
|
let list2 = this.handleChangeShopList(data2.Data.List);
|
|
let list3 = this.handleChangeShopList(data3.Data.List);
|
|
|
|
console.log("list1", list1);
|
|
console.log("list2", list2);
|
|
console.log("list3", list3);
|
|
this.newShopList = list1.slice(0, 2);
|
|
this.hotShopList = [list2[0]];
|
|
this.goodShopList = [list3[0]];
|
|
},
|
|
handleChangeShopList(list) {
|
|
let shopList = [];
|
|
if (list && list.length > 0) {
|
|
list.forEach((item) => {
|
|
if (item.COMMODITYLIST && item.COMMODITYLIST.length > 0) {
|
|
item.COMMODITYLIST.forEach((subItem) => {
|
|
if (
|
|
subItem.COMMODITY_MEMBERPRICE &&
|
|
subItem.COMMODITY_MEMBERPRICE.toString().indexOf(".") !== -1
|
|
) {
|
|
subItem.bigNumber =
|
|
subItem.COMMODITY_MEMBERPRICE.toString().split(".")[0];
|
|
subItem.smallNumber =
|
|
subItem.COMMODITY_MEMBERPRICE.toString().split(".")[1];
|
|
} else {
|
|
subItem.bigNumber = subItem.COMMODITY_MEMBERPRICE;
|
|
}
|
|
if (
|
|
subItem.COMMODITY_RETAILPRICE &&
|
|
subItem.COMMODITY_RETAILPRICE.toString().indexOf(".") !== -1
|
|
) {
|
|
subItem.RETbigNumber =
|
|
subItem.COMMODITY_RETAILPRICE.toString().split(".")[0];
|
|
subItem.RETsmallNumber =
|
|
subItem.COMMODITY_RETAILPRICE.toString().split(".")[1];
|
|
} else {
|
|
subItem.RETbigNumber = subItem.COMMODITY_RETAILPRICE;
|
|
}
|
|
shopList.push(subItem);
|
|
});
|
|
}
|
|
});
|
|
}
|
|
return shopList;
|
|
},
|
|
// 工会商城滚动到底部
|
|
handleToBottom() {
|
|
this.shopMsg.pageIndex = this.shopMsg.pageIndex + 1;
|
|
if (this.shopMsg.isOver) {
|
|
} else {
|
|
this.handleGetUnionShopList();
|
|
}
|
|
// this.showShopList = this.allShopList.slice(0, this.pageIndex * 10)
|
|
},
|
|
// 正常商品滚动到底部
|
|
handleToBottomproductsList() {
|
|
this.shopMsg.pageIndex = this.shopMsg.pageIndex + 1;
|
|
if (this.shopMsg.isOver) {
|
|
} else {
|
|
this.handleGetProductsList();
|
|
}
|
|
},
|
|
// 拿到工会商城的商品列表
|
|
async handleGetUnionShopList() {
|
|
uni.showLoading({
|
|
title: "加载中...",
|
|
});
|
|
const data = await this.$api.getCoop({
|
|
action_type: "WeChat_GetMallGoodsInfo",
|
|
ownerUnitId: 911,
|
|
COMMODITYNATURE: 5070,
|
|
priceStart: this.minPrice,
|
|
priceEnd: this.maxPrice,
|
|
payMethod: "1000,3000",
|
|
commodityNature: 5070,
|
|
Page_Size: this.shopMsg.pageSize,
|
|
Page_Index: this.shopMsg.pageIndex,
|
|
userdefinedtypeId: this.selectProducts || "",
|
|
justCommodity: 1,
|
|
sortStr: `${this.sortTypeList[this.sortType]} ${
|
|
new Date().getTime % 2 > 0 ? "" : "desc"
|
|
}`,
|
|
});
|
|
console.log("handleGetSpecialOffers", data);
|
|
let list = data.Data.List;
|
|
let shopList = [];
|
|
if (this.shopMsg.pageIndex > 1) {
|
|
shopList = this.showShopList;
|
|
}
|
|
let thisResList = [];
|
|
if (list && list.length > 0) {
|
|
list.forEach((item) => {
|
|
if (item.COMMODITYLIST && item.COMMODITYLIST.length > 0) {
|
|
item.COMMODITYLIST.forEach((subItem) => {
|
|
if (
|
|
subItem.COMMODITY_MEMBERPRICE &&
|
|
subItem.COMMODITY_MEMBERPRICE.toString().indexOf(".") !== -1
|
|
) {
|
|
subItem.bigNumber =
|
|
subItem.COMMODITY_MEMBERPRICE.toString().split(".")[0];
|
|
subItem.smallNumber =
|
|
subItem.COMMODITY_MEMBERPRICE.toString().split(".")[1];
|
|
} else {
|
|
subItem.bigNumber = subItem.COMMODITY_MEMBERPRICE;
|
|
}
|
|
if (
|
|
subItem.COMMODITY_RETAILPRICE &&
|
|
subItem.COMMODITY_RETAILPRICE.toString().indexOf(".") !== -1
|
|
) {
|
|
subItem.RETbigNumber =
|
|
subItem.COMMODITY_RETAILPRICE.toString().split(".")[0];
|
|
subItem.RETsmallNumber =
|
|
subItem.COMMODITY_RETAILPRICE.toString().split(".")[1];
|
|
} else {
|
|
subItem.RETbigNumber = subItem.COMMODITY_RETAILPRICE;
|
|
}
|
|
thisResList.push(subItem);
|
|
});
|
|
}
|
|
});
|
|
}
|
|
if (thisResList && thisResList.length < 6) {
|
|
this.shopMsg.isOver = true;
|
|
}
|
|
console.log("shopList", shopList);
|
|
this.showShopList = shopList.concat(thisResList);
|
|
// this.allShopList = shopList
|
|
// this.showShopList = this.allShopList.slice(0, this.pageIndex * 10)
|
|
console.log("this.showShopList", this.showShopList);
|
|
uni.hideLoading();
|
|
},
|
|
// 重置价格筛选
|
|
async handleReset() {
|
|
this.maxPrice = "";
|
|
this.minPrice = "";
|
|
this.showShopList = [];
|
|
|
|
this.shopMsg = {
|
|
pageIndex: 1,
|
|
pageSize: 6,
|
|
isOver: false,
|
|
};
|
|
// 拿到工会商城的商品列表
|
|
await this.handleGetUnionShopList();
|
|
this.$refs.priceRangeRef.close();
|
|
},
|
|
// 价格筛选的确认
|
|
async handleConfirm() {
|
|
console.log("minPrice", this.minPrice);
|
|
console.log("maxPrice", this.maxPrice);
|
|
if (Number(this.minPrice) <= Number(this.maxPrice)) {
|
|
} else {
|
|
let newMax = Number(this.minPrice);
|
|
let newMin = Number(this.maxPrice);
|
|
this.maxPrice = newMax;
|
|
this.minPrice = newMin;
|
|
}
|
|
this.showShopList = [];
|
|
this.shopMsg = {
|
|
pageIndex: 1,
|
|
pageSize: 6,
|
|
isOver: false,
|
|
};
|
|
// 拿到工会商城的商品列表
|
|
await this.handleGetUnionShopList();
|
|
this.$refs.priceRangeRef.close();
|
|
},
|
|
// 显示价格的悬浮框
|
|
handleShowPricePopup() {
|
|
this.$refs.priceRangeRef.open("bottom");
|
|
},
|
|
// 品牌的跳转
|
|
handleSearchBrand(value) {
|
|
uni.navigateTo({
|
|
url: `/pages/shopPages/shopList/index?name=${value.label}&pageType=brand`,
|
|
});
|
|
},
|
|
// 跳转去榜单页面
|
|
handleGoSortList(type) {
|
|
// 1 新品榜 2 热销榜 3 推荐榜
|
|
uni.navigateTo({
|
|
url: `/pages/shopPages/shopList/index?type=${type}&pageType=${this.pageType}`,
|
|
});
|
|
},
|
|
// 拿到顶部商品大类的方法
|
|
async handleGetShopBigType() {
|
|
const data = await this.$api.getCoop({
|
|
action_type: "WeChat_GetMallGoodsType",
|
|
ownerUnitId: 911,
|
|
commodityNature: 5070,
|
|
});
|
|
console.log("handleGetShopBigType", data);
|
|
let typeList = data.Data.List;
|
|
let resList = [];
|
|
let indexOfList = [1248, 1247, 1257, 1245, 1246];
|
|
if (typeList && typeList.length > 0) {
|
|
typeList.forEach((item) => {
|
|
if (indexOfList.indexOf(item.UserdefinedType_Id) !== -1) {
|
|
resList.push(item);
|
|
}
|
|
});
|
|
}
|
|
|
|
this.shopTypeList = resList;
|
|
this.selectProducts = resList[0].UserdefinedType_Id;
|
|
console.log("this.selectProducts", this.selectProducts);
|
|
|
|
// if (this.shopTypeList && this.shopTypeList.length < 10) {
|
|
// this.oneRowNumber = this.shopTypeList.length;
|
|
// } else {
|
|
// this.oneRowNumber = Math.ceil(this.shopTypeList.length / 2);
|
|
// }
|
|
// console.log("this.oneRowNumber", this.oneRowNumber);
|
|
},
|
|
// 拿到特价优惠的商品列表 nature 5030
|
|
async handleGetSpecialOffers() {
|
|
const data = await this.$api.getCoop({
|
|
action_type: "WeChat_GetMallGoodsInfo",
|
|
ownerUnitId: 911,
|
|
COMMODITYNATURE: 5030,
|
|
excludeNature: 5070,
|
|
justCommodity: 1,
|
|
});
|
|
console.log("handleGetSpecialOffers", data);
|
|
let list = data.Data.List;
|
|
let shopList = [];
|
|
if (list && list.length > 0) {
|
|
list.forEach((item) => {
|
|
if (item.COMMODITYLIST && item.COMMODITYLIST.length > 0) {
|
|
item.COMMODITYLIST.forEach((subItem) => {
|
|
if (
|
|
subItem.COMMODITY_MEMBERPRICE &&
|
|
subItem.COMMODITY_MEMBERPRICE.toString().indexOf(".") !== -1
|
|
) {
|
|
subItem.bigNumber =
|
|
subItem.COMMODITY_MEMBERPRICE.toString().split(".")[0];
|
|
subItem.smallNumber =
|
|
subItem.COMMODITY_MEMBERPRICE.toString().split(".")[1];
|
|
} else {
|
|
subItem.bigNumber = subItem.COMMODITY_MEMBERPRICE;
|
|
}
|
|
if (
|
|
subItem.COMMODITY_RETAILPRICE &&
|
|
subItem.COMMODITY_RETAILPRICE.toString().indexOf(".") !== -1
|
|
) {
|
|
subItem.RETbigNumber =
|
|
subItem.COMMODITY_RETAILPRICE.toString().split(".")[0];
|
|
subItem.RETsmallNumber =
|
|
subItem.COMMODITY_RETAILPRICE.toString().split(".")[1];
|
|
} else {
|
|
subItem.RETbigNumber = subItem.COMMODITY_RETAILPRICE;
|
|
}
|
|
shopList.push(subItem);
|
|
});
|
|
}
|
|
});
|
|
}
|
|
console.log("特价优惠", shopList);
|
|
this.specialOffersList = shopList;
|
|
},
|
|
// 拿到今日推荐的商品列表 nature 5050
|
|
async handleGetTodayOffers() {
|
|
const data = await this.$api.getCoop({
|
|
action_type: "WeChat_GetMallGoodsInfo",
|
|
ownerUnitId: 911,
|
|
COMMODITYNATURE: 5050,
|
|
excludeNature: 5070,
|
|
justCommodity: 1,
|
|
});
|
|
console.log("今日推荐", data);
|
|
let list = data.Data.List;
|
|
let shopList = [];
|
|
if (list && list.length > 0) {
|
|
list.forEach((item) => {
|
|
if (item.COMMODITYLIST && item.COMMODITYLIST.length > 0) {
|
|
item.COMMODITYLIST.forEach((subItem) => {
|
|
if (
|
|
subItem.COMMODITY_MEMBERPRICE &&
|
|
subItem.COMMODITY_MEMBERPRICE.toString().indexOf(".") !== -1
|
|
) {
|
|
subItem.bigNumber =
|
|
subItem.COMMODITY_MEMBERPRICE.toString().split(".")[0];
|
|
subItem.smallNumber =
|
|
subItem.COMMODITY_MEMBERPRICE.toString().split(".")[1];
|
|
} else {
|
|
subItem.bigNumber = subItem.COMMODITY_MEMBERPRICE;
|
|
}
|
|
if (
|
|
subItem.COMMODITY_RETAILPRICE &&
|
|
subItem.COMMODITY_RETAILPRICE.toString().indexOf(".") !== -1
|
|
) {
|
|
subItem.RETbigNumber =
|
|
subItem.COMMODITY_RETAILPRICE.toString().split(".")[0];
|
|
subItem.RETsmallNumber =
|
|
subItem.COMMODITY_RETAILPRICE.toString().split(".")[1];
|
|
} else {
|
|
subItem.RETbigNumber = subItem.COMMODITY_RETAILPRICE;
|
|
}
|
|
shopList.push(subItem);
|
|
});
|
|
}
|
|
});
|
|
}
|
|
console.log("今日推荐", shopList);
|
|
this.todayOffersList = shopList;
|
|
return;
|
|
if (list && list.length > 0) {
|
|
let obj = list[0];
|
|
if (obj.CommodityList && obj.CommodityList.length > 0) {
|
|
let shopList = [];
|
|
obj.CommodityList.forEach((item) => {
|
|
if (
|
|
item.COSTTAXPRICE &&
|
|
item.COSTTAXPRICE.toString().indexOf(".") !== -1
|
|
) {
|
|
item.bigNumber = item.COSTTAXPRICE.toString().split(".")[0];
|
|
item.smallNumber = item.COSTTAXPRICE.toString().split(".")[1];
|
|
} else {
|
|
item.bigNumber = item.COSTTAXPRICE;
|
|
}
|
|
shopList.push(item);
|
|
});
|
|
console.log("shopList", shopList);
|
|
this.todayOffersList = shopList;
|
|
}
|
|
} else {
|
|
this.todayOffersList = [];
|
|
}
|
|
console.log("今日推荐", this.todayOffersList);
|
|
},
|
|
// 切换甄选商品的类型
|
|
handleChangeShopMallType(obj) {
|
|
this.selectProducts = obj.UserdefinedType_Id;
|
|
this.shopMsg = {
|
|
pageSize: 6,
|
|
pageIndex: 1,
|
|
isOver: false,
|
|
};
|
|
this.handleGetProductsList();
|
|
},
|
|
// 拿到甄选商品 3000
|
|
async handleGetProductsList() {
|
|
uni.showLoading({
|
|
title: "加载中",
|
|
});
|
|
const data = await this.$api.getCoop({
|
|
action_type: "WeChat_GetMallGoodsInfo",
|
|
ownerUnitId: 911,
|
|
COMMODITYNATURE: 3000,
|
|
userdefinedtypeId: this.selectProducts || "",
|
|
Page_Size: this.shopMsg.pageSize,
|
|
Page_Index: this.shopMsg.pageIndex,
|
|
justCommodity: 1,
|
|
// excludeNature: 5070,
|
|
});
|
|
let list = data.Data.List;
|
|
let resList = [];
|
|
let thisResList = [];
|
|
if (this.shopMsg.pageIndex > 1) {
|
|
resList = this.productsList;
|
|
}
|
|
if (list && list.length > 0) {
|
|
// this.selectProducts = list[0].UserdefinedType_Id;
|
|
list.forEach((item) => {
|
|
if (item.COMMODITYLIST && item.COMMODITYLIST.length > 0) {
|
|
item.COMMODITYLIST.forEach((subItem) => {
|
|
if (
|
|
subItem.COMMODITY_MEMBERPRICE &&
|
|
subItem.COMMODITY_MEMBERPRICE.toString().indexOf(".") !== -1
|
|
) {
|
|
subItem.bigNumber =
|
|
subItem.COMMODITY_MEMBERPRICE.toString().split(".")[0];
|
|
subItem.smallNumber =
|
|
subItem.COMMODITY_MEMBERPRICE.toString().split(".")[1];
|
|
} else {
|
|
subItem.bigNumber = subItem.COMMODITY_MEMBERPRICE;
|
|
}
|
|
if (
|
|
subItem.COMMODITY_RETAILPRICE &&
|
|
subItem.COMMODITY_RETAILPRICE.toString().indexOf(".") !== -1
|
|
) {
|
|
subItem.RETbigNumber =
|
|
subItem.COMMODITY_RETAILPRICE.toString().split(".")[0];
|
|
subItem.RETsmallNumber =
|
|
subItem.COMMODITY_RETAILPRICE.toString().split(".")[1];
|
|
} else {
|
|
subItem.RETbigNumber = subItem.COMMODITY_RETAILPRICE;
|
|
}
|
|
|
|
thisResList.push(subItem);
|
|
});
|
|
}
|
|
});
|
|
}
|
|
if (thisResList && thisResList.length < 6) {
|
|
this.shopMsg.isOver = true;
|
|
}
|
|
// this.productsList = list;
|
|
this.productsList = resList.concat(thisResList);
|
|
console.log("甄选商品", list);
|
|
uni.hideLoading();
|
|
|
|
// let shopList = []
|
|
// if (list && list.length > 0) {
|
|
// list.forEach((item) => {
|
|
// if (item.COMMODITYLIST && item.COMMODITYLIST.length > 0) {
|
|
// item.COMMODITYLIST.forEach((subItem) => {
|
|
// shopList.push(subItem)
|
|
// })
|
|
// }
|
|
// })
|
|
// }
|
|
},
|
|
// 返回首页
|
|
handleBackHome() {
|
|
if (this.pageType === "UnionMall") {
|
|
uni.navigateBack({
|
|
delta: 1,
|
|
});
|
|
} else {
|
|
uni.switchTab({
|
|
url: "/pages/index/index",
|
|
});
|
|
}
|
|
},
|
|
// 跳转商品列表接口
|
|
handleGoShopList(type) {
|
|
uni.navigateTo({
|
|
url: `/pages/shopPages/shopList/index?type=${type}`,
|
|
});
|
|
},
|
|
// 跳转商品详情
|
|
handleGoShopDetail(obj) {
|
|
console.log("obj", obj);
|
|
uni.navigateTo({
|
|
url: `/pages/shopPages/shopDetail/index?id=${obj.COMMODITY_ID}`,
|
|
});
|
|
},
|
|
// 跳转到商品分类页面
|
|
handleGoShopPage(obj, index) {
|
|
console.log("obj", obj);
|
|
console.log("index", index);
|
|
if (this.pageType === "UnionMall") {
|
|
uni.redirectTo({
|
|
url: `/pages/shopMallPage/shopType/index?leftId=${obj.UserdefinedType_Id}&pageType=${this.pageType}`,
|
|
});
|
|
} else {
|
|
uni.redirectTo({
|
|
url: `/pages/shopMallPage/shopType/index?selectIndex=${index}&pageType=${this.pageType}`,
|
|
});
|
|
}
|
|
},
|
|
// 跳转工会商城
|
|
handleGoUnionMall() {
|
|
uni.navigateTo({
|
|
url: `/pages/shopMallPage/index/index?pageType=UnionMall`,
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.main {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
box-sizing: border-box;
|
|
background: #f2f4f5;
|
|
|
|
.header {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
//height: 496rpx;
|
|
// background: linear-gradient(270deg, #2FA4FF 0%, #197AFF 100%);
|
|
background-image: url("https://eshangtech.com/ShopICO/ahyd-mall/wechatesAH/indexBg.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 300rpx;
|
|
//position: relative;
|
|
z-index: 0;
|
|
|
|
.headerTop {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
padding: 0 32rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 99;
|
|
background-image: url("https://eshangtech.com/ShopICO/ahyd-mall/wechatesAH/indexBg.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 300rpx;
|
|
|
|
.backArrow {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
}
|
|
|
|
.pageName {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.pageTitle {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 0 40rpx;
|
|
|
|
.titleText {
|
|
font-size: 20px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
|
|
.pageSearch {
|
|
width: calc(100% - 48rpx);
|
|
margin-left: 24rpx;
|
|
margin-top: 28rpx;
|
|
height: 38px;
|
|
background: #fff;
|
|
border-radius: 19px;
|
|
box-sizing: border-box;
|
|
padding: 2px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.areaSelect {
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #160304;
|
|
line-height: 20px;
|
|
padding-left: 12px;
|
|
position: relative;
|
|
|
|
.areaIcon {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
}
|
|
|
|
.areaSelect:after {
|
|
content: "";
|
|
width: 2px;
|
|
height: 14px;
|
|
position: absolute;
|
|
top: 3px;
|
|
right: -12px;
|
|
background: #e7e5e5;
|
|
display: block;
|
|
}
|
|
|
|
.serach_input {
|
|
width: 154px;
|
|
border: none;
|
|
height: 20px;
|
|
font-size: 14px;
|
|
box-sizing: border-box;
|
|
padding: 0 12px;
|
|
}
|
|
|
|
.searchBtn {
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #fdfdfd;
|
|
line-height: 20px;
|
|
padding: 7px 16px;
|
|
background: #1890ff;
|
|
border-radius: 17px;
|
|
}
|
|
}
|
|
|
|
.bannerBox {
|
|
width: calc(100% - 48rpx);
|
|
height: 280rpx;
|
|
background: #6e0f16;
|
|
border-radius: 16rpx;
|
|
}
|
|
|
|
.typeBox {
|
|
width: calc(100% - 48rpx);
|
|
margin: 24rpx 0 0 24rpx;
|
|
//height: 392rpx;
|
|
background: #fff;
|
|
border-radius: 16rpx;
|
|
box-sizing: border-box;
|
|
padding: 2rpx;
|
|
|
|
.contentBox {
|
|
width: 100%;
|
|
border-radius: 16rpx;
|
|
box-sizing: border-box;
|
|
min-height: 214rpx;
|
|
padding: 30rpx;
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(230, 240, 255, 1) 0%,
|
|
rgba(255, 255, 255, 1) 50%,
|
|
#ffffff 100%
|
|
);
|
|
flex-wrap: wrap;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.rowBox {
|
|
width: 20%;
|
|
height: 144rpx;
|
|
|
|
// width: 96rpx;
|
|
// height: 154rpx;
|
|
// display: inline-block;
|
|
// box-sizing: border-box;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.imgBox {
|
|
width: 96rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
.itemImgBox {
|
|
width: 96rpx;
|
|
height: 96rpx;
|
|
border-radius: 50%;
|
|
background: #fff;
|
|
padding: 2rpx;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
margin-bottom: 16rpx;
|
|
|
|
.img {
|
|
width: 96rpx;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.itemName {
|
|
width: 96rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #020e1a;
|
|
line-height: 32rpx;
|
|
text-align: center;
|
|
font-style: normal;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
.rowBox:nth-child(5n) {
|
|
//margin-right: 0!important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.pageContent {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 0 24rpx 160rpx;
|
|
margin-top: 24rpx;
|
|
|
|
.typeBox {
|
|
width: 100%;
|
|
//height: 392rpx;
|
|
background: #fff;
|
|
border-radius: 16rpx;
|
|
box-sizing: border-box;
|
|
padding: 2rpx;
|
|
|
|
.contentBox {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 16rpx;
|
|
box-sizing: border-box;
|
|
padding: 30rpx;
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(46, 134, 255, 0.12) 0%,
|
|
rgba(46, 134, 255, 0) 100%
|
|
);
|
|
|
|
.rowBox {
|
|
width: 120rpx;
|
|
height: 134rpx;
|
|
display: inline-block;
|
|
|
|
//display: flex;
|
|
//align-items: center;
|
|
//justify-content: space-between;
|
|
.imgBox {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
.itemImgBox {
|
|
width: 96rpx;
|
|
height: 96rpx;
|
|
border-radius: 50%;
|
|
background: #fff;
|
|
padding: 2rpx;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
margin-bottom: 10rpx;
|
|
|
|
.img {
|
|
width: 96rpx;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.itemName {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #020e1a;
|
|
line-height: 32rpx;
|
|
text-align: center;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
|
|
.rowBox:nth-child(5) {
|
|
margin-right: 0 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.advertisement {
|
|
width: 100%;
|
|
background: #ffffff;
|
|
border-radius: 16rpx;
|
|
margin-top: 24rpx;
|
|
box-sizing: border-box;
|
|
padding: 2rpx;
|
|
|
|
.advertisementContentBox {
|
|
width: 100%;
|
|
height: 100%;
|
|
// 真的有个空格！！！
|
|
background-image: url("https://eshangtech.com/ShopICO/ahyd-mall/wechatesAH/Special Offers.png");
|
|
background-repeat: no-repeat;
|
|
border-radius: 16rpx;
|
|
background-size: 100% 100%;
|
|
box-sizing: border-box;
|
|
padding: 16rpx 22rpx;
|
|
|
|
.advertisementTop {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.title {
|
|
.titleImg {
|
|
width: 112rpx;
|
|
height: 36rpx;
|
|
}
|
|
}
|
|
|
|
.moreBox {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.moreText {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #8b8280;
|
|
line-height: 36rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
|
|
.rightIcon {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
margin-left: 4rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.advertisementTopUnionMall {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.title {
|
|
font-size: 26rpx;
|
|
font-weight: 600;
|
|
color: #181716;
|
|
}
|
|
|
|
.moreBox {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.moreText {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #8b8280;
|
|
line-height: 36rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
|
|
.rightIcon {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
margin-left: 4rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.UnionMallShopList {
|
|
width: 100%;
|
|
margin-top: 24rpx;
|
|
height: 80px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.leftSortBox {
|
|
width: 50%;
|
|
background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
|
|
border-radius: 16rpx;
|
|
box-sizing: border-box;
|
|
padding: 12rpx 24rpx;
|
|
|
|
.titleTop {
|
|
.title {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 600;
|
|
font-size: 32rpx;
|
|
color: #130f05;
|
|
line-height: 44rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
}
|
|
|
|
.rowBox {
|
|
width: 25%;
|
|
height: 144rpx;
|
|
|
|
// width: 96rpx;
|
|
// height: 154rpx;
|
|
// display: inline-block;
|
|
// box-sizing: border-box;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.imgBox {
|
|
width: 96rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
.itemImgBox {
|
|
width: 96rpx;
|
|
height: 96rpx;
|
|
border-radius: 50%;
|
|
background: #fff;
|
|
padding: 2rpx;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
margin-bottom: 16rpx;
|
|
|
|
.img {
|
|
width: 96rpx;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.itemName {
|
|
width: 96rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #020e1a;
|
|
line-height: 32rpx;
|
|
text-align: center;
|
|
font-style: normal;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
|
|
.shopList {
|
|
width: 100%;
|
|
margin-top: 24rpx;
|
|
height: 80px;
|
|
|
|
.shopItem {
|
|
width: 136rpx;
|
|
display: inline-block;
|
|
margin-right: 40rpx;
|
|
|
|
.shopItemImg {
|
|
width: 100%;
|
|
position: relative;
|
|
|
|
.imgBox {
|
|
width: 136rpx;
|
|
height: 136rpx;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
|
|
.shopImg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.discountedPrice {
|
|
background: linear-gradient(90deg, #fd3404 0%, #fe7e1f 100%);
|
|
padding: 4rpx 12rpx;
|
|
font-family: DINAlternate, DINAlternate;
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
color: #ffffff;
|
|
line-height: 32rpx;
|
|
font-style: normal;
|
|
border-radius: 16rpx;
|
|
position: absolute;
|
|
bottom: -12rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
|
|
.price {
|
|
width: 100%;
|
|
display: inline-block;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #756c6a;
|
|
line-height: 36rpx;
|
|
text-align: center;
|
|
font-style: normal;
|
|
text-decoration-line: line-through;
|
|
margin-top: 14rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.sortBox {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.leftSortBox {
|
|
background: linear-gradient(180deg, #ffe8e8 0%, #ffffff 100%);
|
|
border-radius: 16rpx;
|
|
box-sizing: border-box;
|
|
padding: 12rpx 24rpx;
|
|
margin-right: 16rpx;
|
|
|
|
.titleTopSort {
|
|
width: 100%;
|
|
|
|
.title {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 600;
|
|
font-size: 32rpx;
|
|
color: #130f05;
|
|
line-height: 44rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
|
|
.red {
|
|
color: #ff3e3e;
|
|
}
|
|
}
|
|
}
|
|
|
|
.notice {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 20rpx;
|
|
color: #716f69;
|
|
line-height: 28rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
|
|
.shopList {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 16rpx;
|
|
|
|
.shopItem {
|
|
width: 128rpx;
|
|
height: 128rpx;
|
|
|
|
.shopImg {
|
|
width: 128rpx;
|
|
height: 128rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.rightItem {
|
|
border-radius: 16rpx;
|
|
box-sizing: border-box;
|
|
padding: 12rpx 24rpx;
|
|
|
|
.titleTopSort {
|
|
width: 100%;
|
|
|
|
.title {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 600;
|
|
font-size: 32rpx;
|
|
color: #130f05;
|
|
line-height: 44rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
|
|
.red {
|
|
color: #ff8000;
|
|
}
|
|
}
|
|
}
|
|
|
|
.notice {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 20rpx;
|
|
color: #716f69;
|
|
line-height: 28rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
|
|
.shopItem {
|
|
width: 128rpx;
|
|
height: 128rpx;
|
|
margin-top: 16rpx;
|
|
|
|
.shopImg {
|
|
width: 128rpx;
|
|
height: 128rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.bg2 {
|
|
background: linear-gradient(180deg, #ffefe0 0%, #ffffff 100%);
|
|
}
|
|
|
|
.bg3 {
|
|
background: linear-gradient(180deg, #d8f9de 0%, #ffffff 100%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.advertisementSecond {
|
|
width: 100%;
|
|
margin-top: 24rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.advertisementItem {
|
|
width: 100%;
|
|
//width: calc((100% - 26rpx) / 2);
|
|
height: 316rpx;
|
|
background: #fff;
|
|
border-radius: 14rpx;
|
|
box-sizing: border-box;
|
|
padding: 2rpx;
|
|
|
|
.advertisementItemContent {
|
|
width: 100%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
padding: 16rpx 22rpx;
|
|
background-image: url("https://eshangtech.com/ShopICO/ahyd-mall/wechatesAH/recommendation.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.contentTop {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.title {
|
|
.titleImg {
|
|
width: 112rpx;
|
|
height: 36rpx;
|
|
}
|
|
}
|
|
|
|
.moreBox {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.moreText {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #8b8280;
|
|
line-height: 36rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
|
|
.rightIcon {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
margin-left: 4rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.contentTopUnionMall {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.title {
|
|
font-size: 26rpx;
|
|
font-weight: 600;
|
|
color: #181716;
|
|
}
|
|
}
|
|
|
|
.shopDesc {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #8b8280;
|
|
line-height: 36rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
|
|
.shopItemList {
|
|
width: 100%;
|
|
height: 95px;
|
|
margin-top: 24rpx;
|
|
|
|
.shopItem {
|
|
width: 136rpx;
|
|
display: inline-block;
|
|
margin-right: 24rpx;
|
|
|
|
.imgBox {
|
|
width: 136rpx;
|
|
height: 136rpx;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
|
|
.shopImg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.shopImgText {
|
|
display: inline-block;
|
|
width: 100%;
|
|
font-family: DINAlternate, DINAlternate;
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
color: #fe3f22;
|
|
line-height: 32rpx;
|
|
text-align: center;
|
|
font-style: normal;
|
|
|
|
.shopSmallText {
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.advertisementItemUnionMall {
|
|
width: 100%;
|
|
background: #fff;
|
|
border-radius: 14rpx;
|
|
box-sizing: border-box;
|
|
padding: 2rpx;
|
|
|
|
.advertisementItemContent {
|
|
width: 100%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
padding: 16rpx 22rpx;
|
|
background-image: url("https://eshangtech.com/ShopICO/ahyd-mall/wechatesAH/recommendation.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
.contentTopUnionMall {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.title {
|
|
font-size: 26rpx;
|
|
font-weight: 600;
|
|
color: #181716;
|
|
}
|
|
}
|
|
|
|
.shopItemList {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.shopItem {
|
|
width: 20%;
|
|
height: 166rpx;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.imgBox {
|
|
width: 96rpx;
|
|
height: 96rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: #f3f6f9;
|
|
border-radius: 50%;
|
|
justify-content: center;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.allShopList {
|
|
width: 100%;
|
|
margin-top: 40rpx;
|
|
|
|
.allTypeBox {
|
|
width: calc(100vw - 48rpx);
|
|
height: 60rpx;
|
|
box-sizing: border-box;
|
|
padding: 0 24rpx;
|
|
white-space: nowrap;
|
|
|
|
.typeItem {
|
|
display: inline;
|
|
margin-right: 32rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #020e1a;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
|
|
.selectTypeItem {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 600;
|
|
font-size: 28rpx;
|
|
color: #0787f3;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
position: relative;
|
|
}
|
|
|
|
.selectTypeItem:after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 48rpx;
|
|
height: 6rpx;
|
|
background: #1890ff;
|
|
border-radius: 2rpx;
|
|
bottom: -10rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
|
|
.allShopListContent {
|
|
width: 100%;
|
|
// height: 800rpx;
|
|
margin-top: 38rpx;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
|
|
.buyShopItem {
|
|
width: calc((100% - 22rpx) / 2);
|
|
background: #fff;
|
|
border-radius: 16rpx;
|
|
box-sizing: border-box;
|
|
margin-bottom: 24rpx;
|
|
|
|
.shopImgContent {
|
|
width: 100%;
|
|
height: 330rpx;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
border-radius: 16rpx 16rpx 0 0;
|
|
|
|
.shopImage {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.priceBox {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 16rpx 24rpx 32rpx;
|
|
|
|
.shopName {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #130f05;
|
|
line-height: 32rpx;
|
|
font-style: normal;
|
|
width: calc((100vw - 80rpx) / 2 - 40rpx);
|
|
height: 64rpx;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
/* 设置显示的行数，超出的行数会被省略 */
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.retailPrice {
|
|
margin-top: 12rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #756c6a;
|
|
line-height: 36rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
text-decoration-line: line-through;
|
|
}
|
|
|
|
.nowPrice {
|
|
.unit {
|
|
font-family: DINAlternate, DINAlternate;
|
|
font-weight: bold;
|
|
font-size: 24rpx;
|
|
color: #fe3f22;
|
|
line-height: 24rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
|
|
.price {
|
|
font-family: DINAlternate, DINAlternate;
|
|
font-weight: bold;
|
|
font-size: 36rpx;
|
|
color: #fe3f22;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
|
|
.buyCarBox {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.buyCarLeft {
|
|
.price {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 600;
|
|
font-size: 32rpx;
|
|
color: #ff6219;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
|
|
.smallPrice {
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
.unit {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #9fa3a8;
|
|
line-height: 36rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
|
|
.buyCarIcon {
|
|
width: 70rpx;
|
|
height: 70rpx;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
|
|
.icon {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.shopLovely {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 4rpx 22rpx;
|
|
|
|
.shopLovelyTop {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.shopLovelyTitle {
|
|
font-size: 26rpx;
|
|
font-weight: 600;
|
|
color: #181716;
|
|
}
|
|
.shopLovelyRight {
|
|
display: flex;
|
|
align-items: center;
|
|
.filterIcon {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
margin-right: 6rpx;
|
|
}
|
|
.filterText {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #716f69;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
}
|
|
|
|
.shopLovelyList {
|
|
width: 100%;
|
|
// height: 800rpx;
|
|
margin-top: 24rpx;
|
|
padding-bottom: 24rpx;
|
|
|
|
.shopLovelyItem {
|
|
display: inline-block;
|
|
width: calc((100% - 22rpx) / 2);
|
|
background: #fff;
|
|
border-radius: 16rpx;
|
|
box-sizing: border-box;
|
|
margin-bottom: 24rpx;
|
|
|
|
.shopImgContent {
|
|
width: 100%;
|
|
height: 330rpx;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
border-radius: 16rpx 16rpx 0 0;
|
|
|
|
.shopImage {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.priceBox {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 16rpx 24rpx 32rpx;
|
|
|
|
.shopName {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #130f05;
|
|
line-height: 32rpx;
|
|
font-style: normal;
|
|
width: calc((100vw - 80rpx) / 2 - 40rpx);
|
|
height: 64rpx;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
/* 设置显示的行数，超出的行数会被省略 */
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.retailPrice {
|
|
margin-top: 12rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #756c6a;
|
|
line-height: 36rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
text-decoration-line: line-through;
|
|
}
|
|
|
|
.nowPrice {
|
|
.unit {
|
|
font-family: DINAlternate, DINAlternate;
|
|
font-weight: bold;
|
|
font-size: 24rpx;
|
|
color: #fe3f22;
|
|
line-height: 24rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
|
|
.price {
|
|
font-family: DINAlternate, DINAlternate;
|
|
font-weight: bold;
|
|
font-size: 36rpx;
|
|
color: #fe3f22;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
|
|
.buyCarBox {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.buyCarLeft {
|
|
.price {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 600;
|
|
font-size: 32rpx;
|
|
color: #ff6219;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
|
|
.smallPrice {
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
.unit {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #9fa3a8;
|
|
line-height: 36rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
|
|
.buyCarIcon {
|
|
width: 70rpx;
|
|
height: 70rpx;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
|
|
.icon {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.inBottom {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.bottomText {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 26rpx;
|
|
color: #6c737a;
|
|
line-height: 40rpx;
|
|
text-align: justify;
|
|
font-style: normal;
|
|
position: relative;
|
|
padding: 6rpx 0;
|
|
}
|
|
.bottomText::after {
|
|
content: "";
|
|
width: 30vw;
|
|
height: 4rpx;
|
|
background: #b2b8bd;
|
|
position: absolute;
|
|
left: -32vw;
|
|
top: 50%;
|
|
}
|
|
.bottomText::before {
|
|
content: "";
|
|
width: 30vw;
|
|
height: 4rpx;
|
|
background: #b2b8bd;
|
|
position: absolute;
|
|
right: -32vw;
|
|
top: 50%;
|
|
}
|
|
}
|
|
|
|
// .shopLovelyList::-webkit-scrollbar {
|
|
// display: none;
|
|
// }
|
|
}
|
|
.inBottom {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.bottomText {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 26rpx;
|
|
color: #6c737a;
|
|
line-height: 40rpx;
|
|
text-align: justify;
|
|
font-style: normal;
|
|
position: relative;
|
|
padding: 6rpx 0;
|
|
}
|
|
.bottomText::after {
|
|
content: "";
|
|
width: 30vw;
|
|
height: 4rpx;
|
|
background: #b2b8bd;
|
|
position: absolute;
|
|
left: -32vw;
|
|
top: 50%;
|
|
}
|
|
.bottomText::before {
|
|
content: "";
|
|
width: 30vw;
|
|
height: 4rpx;
|
|
background: #b2b8bd;
|
|
position: absolute;
|
|
right: -32vw;
|
|
top: 50%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.priceRangeBox {
|
|
width: 100%;
|
|
height: 500rpx;
|
|
background-color: #fff;
|
|
border-radius: 32rpx 32rpx 0 0;
|
|
box-sizing: border-box;
|
|
padding: 32rpx;
|
|
.titleBox {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.title {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 32rpx;
|
|
color: #130f05;
|
|
line-height: 44rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
.closeIcon {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
}
|
|
}
|
|
|
|
.inputBox {
|
|
width: 100%;
|
|
background-color: #f5f6f7;
|
|
box-sizing: border-box;
|
|
padding: 16rpx;
|
|
border-radius: 16rpx;
|
|
margin-top: 32rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.inputItem {
|
|
width: 48%;
|
|
text-align: center;
|
|
}
|
|
|
|
.unit {
|
|
width: 4%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
.btnList {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.confirmBtn {
|
|
// width: 100%;
|
|
width: calc((100% - 32rpx) / 2);
|
|
background: #fd4d4d;
|
|
border-radius: 8rpx;
|
|
padding: 18rpx 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-size: 32rpx;
|
|
color: #ffffff;
|
|
line-height: 44rpx;
|
|
text-align: center;
|
|
font-style: normal;
|
|
margin-top: 40rpx;
|
|
}
|
|
|
|
.cancelBtn {
|
|
width: calc((100% - 32rpx) / 2);
|
|
background: #f2f2f2;
|
|
border-radius: 8rpx;
|
|
padding: 18rpx 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-size: 32rpx;
|
|
color: #130f05;
|
|
line-height: 44rpx;
|
|
text-align: center;
|
|
font-style: normal;
|
|
margin-top: 40rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|