2025-02-28 13:34:28 +08:00

3010 lines
88 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>
<scroll-view
class="main"
scroll-y
@scroll="handlePageScroll"
:scroll-into-view="scrollView"
scroll-with-animation
@scrolltolower="handleScrollBottom"
>
<div
id="navItem"
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'
: shopTypeList.length === 5
? Math.ceil(6 / 5) * 144 +
(Math.ceil(6 / 5) - 1) * 42 +
60 +
'rpx'
: Math.ceil(shopTypeList.length / 5) * 144 +
(Math.ceil(shopTypeList.length / 5) - 1) * 42 +
60 +
'rpx',
}"
>
<!-- 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'
: '',
marginTop: pageType !== 'UnionMall' && index >= 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="noticeBox" @click="handleGoNotice" v-if="false">
<div class="noticeLeft">
<image class="noticeIcon" src="/static/images/home/noticeIcon.png" />
<text class="noticeTitle">公告</text>
<text class="noticeContent">2025年春节购物通知</text>
</div>
<div class="noticeRight">
<image
class="moreIcon"
src="https://eshangtech.com/ShopICO/ahyd-mall/wechatesAH/rightArrow.png"
/>
</div>
</div>
<!-- 活动 -->
<div
class="advertisement"
v-if="haveActivity"
:style="{
background: pageType !== 'UnionMall' ? '#fff' : 'transparent',
}"
>
<div
class="advertisementContentBox"
v-if="pageType !== 'UnionMall'"
@click="handleGoActivityType"
>
<div class="advertisementTop">
<div class="title">
{{ activityObj.UserdefinedType_Name || "" }}
<!-- <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
v-if="activityShopList && activityShopList.length > 0"
>
<!-- @click="handleGoShop(item)"-->
<div
:style="{
width: activityShopList.length * 160 + 'rpx',
height: '100%',
whiteSpace: 'noWrap',
}"
>
<div
class="shopItem"
v-for="(item, index) in activityShopList"
:key="index"
@click.stop="handleGoActivityType"
>
<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>
<!-- 特价优惠 -->
<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)"
:style="{ marginBottom: index <= 4 ? '16rpx' : '' }"
>
<image class="imgBox" :src="item.src" />
<text class="imgText">{{ item.label }}</text>
<!-- <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
style="
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 12rpx;
"
>
<view class="nowPrice">
<text class="unit">¥</text>
<text class="price"
>{{ item.bigNumber || "" }}.{{
item.smallNumber || "00"
}}</text
>
</view>
<view class="shopState" v-if="!(item.COMMODITY_STOCK > 0)"
>已售罄</view
>
</view>
</div>
</div>
</div>
<view class="inBottom" v-if="shopMsg.isOver">
<text class="bottomText">我是有底线的</text>
</view>
</template>
<!-- 随机商品 -->
<div class="shopLovely" v-if="pageType === 'UnionMall'">
<!-- :style="{ paddingBottom: `${50}px` }" -->
<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
style="
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 12rpx;
"
>
<view class="nowPrice">
<text class="unit">¥</text>
<text class="price"
>{{ item.bigNumber || "" }}.{{
item.smallNumber || "00"
}}</text
>
</view>
<view class="shopState" v-if="!(item.COMMODITY_STOCK > 0)"
>已售罄</view
>
</view>
</div>
</view>
</view>
<view class="inBottom" v-if="showShopList && showShopList.length > 0">
<text class="bottomText">{{
shopMsg.isOver ? "我是有底线的" : "下拉加载更多"
}}</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="inputBox"
style="box-sizing: border-box; padding-left: 24rpx"
>
<input
style="width: 100%"
placeholder="商品名称"
v-model="searchShopName"
/>
</view>
<view class="btnList">
<view class="cancelBtn" @click="handleReset">重置</view>
<view class="confirmBtn" @click="handleConfirm">确认</view>
</view>
</view>
</uni-popup>
<uni-popup ref="noticeRef" v-if="false">
<view class="noticePopup" @click="handleHidePopup">
<view class="popupContent">
<view class="title">尊敬的会员</view>
<view class="contentText"
>因春节期间暂停发货服务为确保您在本平台良好的购物体验请您阅知如下购物须知</view
>
<view class="title textIndent">发货服务暂停时间</view>
<view class="contentText"
>期间平台商城所有商品均可正常下单2025年2月5日起按照下单顺序陆续发货</view
>
<view class="title textIndent"
>如遇问题请垂询以下联系方式</view
>
<view class="contentText">客服顾顾18788508349</view>
<view class="contentText">客服晶晶13508825566</view>
<view class="contentText">客服值班时间上午9:00下午18:00</view>
<view class="title textIndent">会员下单视为接受购物须知</view>
<view class="contentText"
>在2025年春节即将来临之际云南交投集团经营开发有限公司彩云驿商业管理分公司全体员工提前恭祝您及家人新春愉快阖家欢乐</view
>
<view class="contentText"
>衷心感谢您对本平台的鼎力支持我们将为您提供始终如一的优质服务</view
>
</view>
</view>
</uni-popup>
<!-- 回到顶部 -->
<view class="backTopBox" v-if="showBackTop" @click="handleGoBack">
<image class="backIcon" src="/static/images/home/backTopIcon.png" />
</view>
<shop-tabbar
:page="`/pages/shopMallPage/index/index`"
:pageType="pageType"
:shopCarLength="shopCarListCount"
/>
</scroll-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, src: "/static/images/home/1.png" },
{ label: "洁柔", value: 2, src: "/static/images/home/2.png" },
{ label: "新希望", value: 3, src: "/static/images/home/3.png" },
{ label: "八宝贡", value: 4, src: "/static/images/home/4.png" },
{ label: "福临门", value: 5, src: "/static/images/home/5.png" },
{ label: "金丝莉", value: 6, src: "/static/images/home/6.png" },
{ label: "良品铺子", value: 7, src: "/static/images/home/7.png" },
{ label: "云南白药", value: 8, src: "/static/images/home/8.png" },
{ label: "德和", value: 9, src: "/static/images/home/9.png" },
{ label: "蔬果园", value: 10, src: "/static/images/home/10.png" },
], // 热门品牌类型
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_EN",
],
isFirst: false,
searchShopName: "", // 搜索商品的名称
showBackTop: false, // 页面滚动距离
scrollView: "",
safeHeight: 0, // ios的安全距离
haveActivity: false, // 是否有活动
activityObj: {}, // 活动项的具体内容
activityShopList: [], // 活动商品列表
};
},
async onLoad(query) {
console.log("query", query);
this.menu = uni.getMenuButtonBoundingClientRect();
this.pageType = query.pageType;
// 判断这个用户是不是第一次进入到商城
let firstEntry = uni.getStorageSync("firstEntry");
if (firstEntry === "2") {
} else {
this.isFirst = true;
// this.$refs.noticeRef.open("center");
uni.setStorageSync("firstEntry", "2");
}
let safeHeight = uni.getStorageSync("safeHeight");
if (safeHeight) {
this.safeHeight = Number(safeHeight);
}
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();
if (this.haveActivity) {
this.handleGetActivityList();
}
}
},
onShow() {
// 判断当前的购物车里面是否有东西
let shopCarList = [];
if (this.pageType === "UnionMall") {
shopCarList = this.$store.state.unionMyShopCar;
} else {
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();
},
onShareAppMessage() {
let _this = this;
return {
title: _this.pageType === "UnionMall" ? "工会商城" : "精选商城",
path: `/pages/index/index?pageType=${this.pageType}`,
};
},
onShareTimeline() {
let _this = this;
return {
title: _this.pageType === "UnionMall" ? "工会商城" : "精选商城",
path: `/pages/index/index?pageType=${this.pageType}`,
};
},
methods: {
// 滚动到底部 加载更多的方法
handleScrollBottom() {
this.handleToBottom();
},
// 回到顶部
handleGoBack() {
this.scrollView = "navItem";
},
handlePageScroll(e) {
this.pageScrollNumber = Number(e.detail.scrollTop);
if (Number(e.detail.scrollTop) > 100) {
this.showBackTop = true;
} else {
this.scrollView = "";
this.showBackTop = false;
}
},
handleHidePopup() {
this.$refs.noticeRef.close();
},
// 关闭价格区间的悬浮框
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,
commodityName: this.searchShopName,
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 && data.Data.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.searchShopName = "";
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 activityObj = {};
let indexOfList = [1248, 1247, 1257, 1245, 1246];
// , 1355
if (typeList && typeList.length > 0) {
typeList.forEach((item) => {
if (indexOfList.indexOf(item.UserdefinedType_Id) !== -1) {
resList.push(item);
}
if (item.UserdefinedType_Id === 1355) {
this.haveActivity = true;
activityObj = item;
}
});
}
if (this.haveActivity) {
// resList.push(activityObj);
this.activityObj = activityObj;
}
this.shopTypeList = resList;
this.selectProducts = resList[0].UserdefinedType_Id;
console.log("this.shopTypeList", this.shopTypeList);
console.log("this.activityObj", this.activityObj);
// 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);
},
// 拿到活动的商品列表 可能不调用 有判断的
async handleGetActivityList() {
const data = await this.$api.getCoop({
action_type: "WeChat_GetMallGoodsInfo",
ownerUnitId: 911,
userdefinedtypeId: 1355,
excludeNature: 5070,
justCommodity: 1,
});
console.log("handleGetActivityList", data);
let list = data.Data.List;
let res = [];
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;
}
res.push(subItem);
});
}
});
}
this.activityShopList = res;
},
// 拿到特价优惠的商品列表 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 && data.Data.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",
});
}
},
// 跳转公告页面
handleGoNotice() {
uni.navigateTo({
url: "/pages/noticePage/index",
});
},
// 跳转商品列表接口
handleGoShopList(type) {
uni.navigateTo({
url: `/pages/shopPages/shopList/index?type=${type}&pageType=${
this.pageType || ""
}`,
});
},
// 跳转商品详情
handleGoShopDetail(obj) {
console.log("obj", obj);
uni.navigateTo({
url: `/pages/shopPages/shopDetail/index?id=${obj.COMMODITY_ID}&pageType=${this.pageType}`,
});
},
// 跳转到商品分类页面
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}`,
});
}
},
// 活动直接跳转分类页面 分类页面的互动是第一个 所以 selectIndex 传0就好
handleGoActivityType() {
uni.redirectTo({
url: `/pages/shopMallPage/shopType/index?selectIndex=${0}&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;
.noticeBox {
width: 100%;
box-sizing: border-box;
padding: 24rpx 28rpx;
background: #fff;
border-radius: 16rpx;
display: flex;
align-items: center;
justify-content: space-between;
.noticeLeft {
display: flex;
align-items: center;
.noticeIcon {
width: 32rpx;
height: 32rpx;
margin-right: 8rpx;
}
.noticeTitle {
font-family: PingFangSC, PingFang SC;
font-weight: 600;
font-size: 28rpx;
color: #ee4020;
line-height: 40rpx;
text-align: left;
font-style: normal;
margin-right: 24rpx;
}
.noticeContent {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 28rpx;
color: #716f69;
line-height: 40rpx;
text-align: left;
font-style: normal;
}
}
.noticeRight {
.moreIcon {
width: 24rpx;
height: 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 {
font-size: 14px;
font-weight: 600;
color: #181716;
.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;
}
}
}
}
.advertisementContentBox ::-webkit-scrollbar {
display: none;
}
.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;
min-width: 320rpx;
.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;
min-width: 160rpx;
.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;
}
}
}
}
}
.advertisementItemContent ::-webkit-scrollbar {
display: none;
}
}
.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: linear-gradient(
rgba(255, 239, 238, 1) 0%,
rgba(255, 254, 254, 1) 100%
)
no-repeat;
background-size: 100% 176rpx;
// 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;
flex-direction: column;
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;
margin-bottom: 4rpx;
}
.imgText {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 24rpx;
color: #130f05;
line-height: 36rpx;
text-align: left;
font-style: normal;
}
}
}
}
}
}
.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;
}
}
.shopState {
font-size: 24rpx;
color: #fff;
background: #bbbbbb;
padding: 4rpx 16rpx;
border-radius: 8rpx;
}
.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;
}
}
.shopState {
font-size: 24rpx;
color: #fff;
background: #bbbbbb;
padding: 4rpx 16rpx;
border-radius: 8rpx;
}
.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;
padding-bottom: 12rpx;
.bottomText {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 26rpx;
color: #d0d0d0;
line-height: 40rpx;
text-align: justify;
font-style: normal;
position: relative;
padding: 6rpx 0;
}
.bottomText::after {
content: "";
width: 30vw;
height: 2rpx;
background: #e0e0e0;
position: absolute;
left: -32vw;
top: 50%;
}
.bottomText::before {
content: "";
width: 30vw;
height: 2rpx;
background: #e0e0e0;
position: absolute;
right: -32vw;
top: 50%;
}
}
// .shopLovelyList::-webkit-scrollbar {
// display: none;
// }
}
.inBottom {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 12rpx;
.bottomText {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 26rpx;
color: #d0d0d0;
line-height: 40rpx;
text-align: justify;
font-style: normal;
position: relative;
padding: 6rpx 0;
}
.bottomText::after {
content: "";
width: 30vw;
height: 2rpx;
background: #e0e0e0;
position: absolute;
left: -32vw;
top: 50%;
}
.bottomText::before {
content: "";
width: 30vw;
height: 2rpx;
background: #e0e0e0;
position: absolute;
right: -32vw;
top: 50%;
}
}
}
}
.priceRangeBox {
width: 100%;
height: 600rpx;
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;
}
}
}
.noticePopup {
// width: 90vw;
// height: 75vh;
width: 70vw;
height: calc(2688 * 70vw / 1242);
background: #fff;
border-radius: 32rpx;
background-image: url(https://eshangtech.com/minTestImg/preSalePoster.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
box-sizing: border-box;
padding: 300rpx 120rpx 160rpx;
// .popupContent {
// width: 100%;
// height: 100%;
// overflow-y: auto;
// .title {
// font-family: PingFangSC, PingFang SC;
// font-weight: 600;
// font-size: 24rpx;
// color: #da291a;
// line-height: 40rpx;
// text-align: left;
// font-style: normal;
// }
// .contentText {
// font-family: PingFangSC, PingFang SC;
// font-weight: 400;
// font-size: 24rpx;
// color: #262626;
// line-height: 40rpx;
// text-align: left;
// font-style: normal;
// text-indent: 48rpx;
// }
// .textIndent {
// text-indent: 48rpx;
// }
// }
// .popupContent::-webkit-scrollbar {
// display: none;
// }
}
.backTopBox {
width: 40px;
height: 40px;
border-radius: 50%;
background: #fff;
position: fixed;
right: 32px;
bottom: 150px;
display: flex;
align-items: center;
justify-content: center;
z-index: 999;
.backIcon {
width: 20px;
height: 20px;
}
}
}
</style>