<template>
|
<view class="page">
|
<view class="header" :style="{ paddingTop: menuTop + 'px' }" :class="{ yueyang: isYueyangZone }">
|
<image v-if="isYueyangZone" src="https://ossacmall.bluedeer.com.cn/app/static/images/yueyang_bg.jpg"
|
style="width: 100%;position: absolute; top: 0;left:0;" mode="widthFix"></image>
|
<view class="header_text" :style="{ lineHeight: lineHeight + 'px' }">
|
<view id="home" class="home acea-row row-center-wrapper iconfont icon-xiangzuo" v-if="returnShow"
|
@tap="returns"></view>
|
{{ isYueyangZone ? '悦养豆兑换专区' : '活动专区' }}
|
</view>
|
</view>
|
<image v-if="isYueyangZone" src="https://ossacmall.bluedeer.com.cn/app/static/images/yueyang_bg.jpg"
|
style="width: 100%;position: absolute; top: 0;left:0;" mode="widthFix"></image>
|
<view :style="{ height: marTop + 'px' }"></view>
|
<yueyangZone ref=yueyangZoneRef v-if="isYueyangZone" :zoneInfo="info" :careBeanRate="careBeanRate"
|
style="position: relative;z-index: 2;" @goLottery="goLottery" :relationKey="relationKey"></yueyangZone>
|
<view v-if="isYueyangZone" class="detail-btn" @click="goDetail">
|
<text>消耗明细</text>
|
</view>
|
<view v-else>
|
<view class="expireTime" v-if="expireTime && expireTime.length">
|
<text>专区将在</text>
|
<text v-for="(item, index) in expireTime" :key="index">
|
<text class="num"><text v-for="(char, ci) in item.digits" :key="ci"
|
class="digit">{{ char }}</text></text>{{ item.unit }}
|
</text>
|
<text>{{ startOrEnd }}</text>
|
</view>
|
<view class="head_img">
|
<image :src="info.image"></image>
|
</view>
|
<view class="tag-wrap-container" :style="'top:' + (marTop) + 'px;'" v-if="info.zoneType == 7">
|
<view class="tag-wrap">
|
<!-- 标签列表 -->
|
<scroll-view scroll-x class="tag-scroll"
|
:scroll-into-view="currentIndex == -1 ? 'tab_item-1' : 'tab_item' + currentIndex">
|
<view class="tag-list">
|
<view class="tag-item" :class="currentIndex == -1 ? 'tag-active' : ''"
|
@click="changeTag(-1)" id="tab_item-1">
|
全部
|
</view>
|
<view v-for="(item, index) in partitionList" :key="index" class="tag-item"
|
:id="'tab_item' + index" :class="currentIndex == index ? 'tag-active' : ''"
|
@click="changeTag(index)">
|
{{ item.name }}
|
</view>
|
</view>
|
</scroll-view>
|
<!-- 右侧下拉更多按钮 -->
|
<view class="more-btn" @click="openMore" v-if="restList && restList.length">
|
<image src="https://ossacmall.bluedeer.com.cn/app/static/images/arrow.png" class="more-img"
|
:class="{ rotate: isOpen }" mode="widthFix"></image>
|
</view>
|
</view>
|
<!-- 展开时显示剩余多行标签 -->
|
<view v-if="isOpen" class="tag-more">
|
<view class="tag-row">
|
<view v-for="(item, idx) in partitionList" :key="idx" class="tag-item"
|
:class="currentIndex == idx ? 'tag-active' : ''" @click="changeTag(idx)">{{ item.name }}
|
</view>
|
</view>
|
</view>
|
|
</view>
|
|
<view class="toolbarList" :style="'top:' + (marTop) + 'px;'" v-else>
|
<view class="toolbarList_box">
|
<view v-for="item, index in toolbarArr" :key="index" class="toolbar_item"
|
:class="activeTabIndex == index ? 'active' : ''" @click="changeToolbar(index)">{{ item.name }}<i
|
:class="item.sort ? ('sortIcon ' + (item.sort == 'desc' ? 'down' : 'up')) : (item.value == 'filter' ? 'filterIcon' : '')"></i>
|
</view>
|
</view>
|
</view>
|
<view @click="goLottery" class="lottery_banner" v-if="info && info.isLottery && info.lotteryBanner">
|
<image class="lottery_bannerImg" :src="info.lotteryBanner" mode="widthFix"
|
:style="{ height: lotteryBannerHeight }">
|
</image>
|
</view>
|
<view class="tag-img-container" v-if="info.zoneType == 7">
|
<view class="personal_share_coupon"
|
v-if="!stockEmpty && (couponBannerShow || couponDisplayShow) && couponType == 2">
|
<!-- 券包到账（带分享） -->
|
<view class="coupon_item" v-if="couponBannerShow">
|
<text class="txt" v-if="selfStatus == 0">已到账</text>
|
<text class="txt grey" v-else-if="selfStatus == 1">已使用</text>
|
<text class="txt grey" v-else-if="selfStatus == 2">已失效</text>
|
<image class="btn_share" :class="{ grey: [1, 2].includes(selfStatus) }"
|
src="https://ossacmall.bluedeer.com.cn/app/static/images/to-share_bg.png" mode="widthFix">
|
</image>
|
<image class="bg_item" v-if="[1, 2].includes(selfStatus)" :src="selfCouponUsedUpImage"
|
mode="widthFix">
|
</image>
|
<image class="bg_item" v-else :src="selfCouponShortImage" mode="widthFix">
|
</image>
|
</view>
|
<view class="coupon_item" v-else-if="couponDisplayShow">
|
<text class="txt"
|
v-if="leftCoupon.displayStatus == 'WAIT_USE' && leftCoupon.usableCount > 1">待使用:{{
|
leftCoupon.usableCount }}</text>
|
<text class="txt"
|
v-else-if="leftCoupon.displayStatus == 'WAIT_USE' && leftCoupon.usableCount == 1">待使用</text>
|
<text class="txt grey" v-else-if="leftCoupon.displayStatus == 'NOT_STARTED'">未开始</text>
|
<text class="txt grey" v-else-if="leftCoupon.displayStatus == 'USED'">已使用</text>
|
<text class="txt grey" v-else-if="leftCoupon.displayStatus == 'EXPIRED'">已过期</text>
|
<image class="btn_share"
|
src="https://ossacmall.bluedeer.com.cn/app/static/images/to-share_bg.png" mode="widthFix">
|
</image>
|
<image class="bg_item"
|
v-if="moneyNumber(leftCoupon.money) == 8.8 && leftCoupon.usableCount == 0"
|
src="https://ossacmall.bluedeer.com.cn/app/static/images/display-8.8-disabled.png"
|
mode="widthFix">
|
</image>
|
<image class="bg_item"
|
v-else-if="moneyNumber(leftCoupon.money) == 8.8 && leftCoupon.usableCount > 0"
|
src="https://ossacmall.bluedeer.com.cn/app/static/images/display-8.8-use.png"
|
mode="widthFix">
|
</image>
|
<image class="bg_item"
|
v-if="moneyNumber(leftCoupon.money) == 1.8 && leftCoupon.usableCount == 0"
|
src="https://ossacmall.bluedeer.com.cn/app/static/images/display-1.8-disabled.png"
|
mode="widthFix">
|
</image>
|
<image class="bg_item"
|
v-else-if="moneyNumber(leftCoupon.money) == 1.8 && leftCoupon.usableCount > 0"
|
src="https://ossacmall.bluedeer.com.cn/app/static/images/display-1.8-use.png"
|
mode="widthFix">
|
</image>
|
</view>
|
<view class="coupon_item" v-if="couponDisplayShow">
|
<text class="txt"
|
v-if="rightCoupon.usableCount > 1 && rightCoupon.displayStatus == 'WAIT_USE'">待使用:{{
|
rightCoupon.usableCount }}</text>
|
<text class="txt"
|
v-else-if="rightCoupon.usableCount == 1 && rightCoupon.displayStatus == 'WAIT_USE'">待使用</text>
|
<text class="txt grey" v-else-if="rightCoupon.displayStatus == 'USED'">已使用</text>
|
<text class="txt grey" v-else-if="rightCoupon.displayStatus == 'NOT_STARTED'">未开始</text>
|
<text class="txt grey" v-else-if="rightCoupon.displayStatus == 'EXPIRED'">已过期</text>
|
<image class="btn_share"
|
src="https://ossacmall.bluedeer.com.cn/app/static/images/to-share_bg.png" mode="widthFix">
|
</image>
|
<image class="bg_item"
|
v-if="moneyNumber(rightCoupon.money) == 8.8 && rightCoupon.usableCount == 0"
|
src="https://ossacmall.bluedeer.com.cn/app/static/images/display-8.8-disabled.png"
|
mode="widthFix">
|
</image>
|
<image class="bg_item"
|
v-else-if="moneyNumber(rightCoupon.money) == 8.8 && rightCoupon.usableCount > 0"
|
src="https://ossacmall.bluedeer.com.cn/app/static/images/display-8.8-use.png"
|
mode="widthFix">
|
</image>
|
<image class="bg_item"
|
v-if="moneyNumber(rightCoupon.money) == 1.8 && rightCoupon.usableCount == 0"
|
src="https://ossacmall.bluedeer.com.cn/app/static/images/display-1.8-disabled.png"
|
mode="widthFix">
|
</image>
|
<image class="bg_item"
|
v-else-if="moneyNumber(rightCoupon.money) == 1.8 && rightCoupon.usableCount > 0"
|
src="https://ossacmall.bluedeer.com.cn/app/static/images/display-1.8-use.png"
|
mode="widthFix">
|
</image>
|
</view>
|
<!-- #ifdef MP -->
|
<button v-if="couponBannerShow && canShareFriendCoupon()" class="coupon_item share_coupon_btn"
|
open-type="share" hover-class="none" @click="handleShareCoupon">
|
<image class="btn_share" src="https://ossacmall.bluedeer.com.cn/app/static/images/to-share.png"
|
mode="widthFix">
|
</image>
|
<image class="bg_item" :src="friendCouponShortImage" mode="widthFix">
|
</image>
|
</button>
|
<view v-else-if="couponBannerShow" class="coupon_item">
|
<text class="txt grey" v-if="friendStatus == 'RECEIVED'">已被领取</text>
|
<text class="txt grey" v-else-if="friendStatus == 'USED'">已使用</text>
|
<text class="txt grey" v-else-if="friendStatus == 'EXPIRED'">已过期</text>
|
<image class="btn_share grey"
|
src="https://ossacmall.bluedeer.com.cn/app/static/images/to-share_bg.png" mode="widthFix">
|
</image>
|
<image class="bg_item" :src="friendCouponReceivedImage" mode="widthFix"></image>
|
</view>
|
<!-- #endif -->
|
<!-- #ifndef MP -->
|
<view v-if="couponBannerShow" class="coupon_item" @click="handleShareCoupon">
|
<text class="txt grey" v-if="friendStatus == 'RECEIVED'">已被领取</text>
|
<text class="txt grey" v-else-if="friendStatus == 'USED'">已使用</text>
|
<text class="txt grey" v-else-if="friendStatus == 'EXPIRED'">已过期</text>
|
<image v-else class="btn_share"
|
src="https://ossacmall.bluedeer.com.cn/app/static/images/to-share.png" mode="widthFix">
|
</image>
|
<image v-if="!canShareFriendCoupon()" class="btn_share grey"
|
src="https://ossacmall.bluedeer.com.cn/app/static/images/to-share_bg.png" mode="widthFix">
|
</image>
|
<image class="bg_item" v-if="!canShareFriendCoupon()" :src="friendCouponReceivedImage"
|
mode="widthFix"></image>
|
<image class="bg_item" v-else :src="friendCouponShortImage" mode="widthFix">
|
</image>
|
</view>
|
<!-- #endif -->
|
</view>
|
<view class="personal_share_coupon"
|
v-else-if="!stockEmpty && (couponBannerShow || couponDisplayShow) && couponType == 3">
|
<!-- 券包到账（不带分享） -->
|
<view class="coupon_item_line" :class="{ grey: [1, 2].includes(selfStatus) }"
|
v-if="couponBannerShow">
|
<text class="txt" style="color: rgb(236 183 1);" v-if="selfStatus == 0">已到账</text>
|
<text class="txt" style="color: rgb(236 183 1);" v-else-if="selfStatus == 1">已使用</text>
|
<text class="txt" style="color: rgb(236 183 1);" v-else-if="selfStatus == 2">已失效</text>
|
<image class="bg_item" :src="selfCouponLongImage" mode="widthFix"></image>
|
</view>
|
<view class="coupon_item_line" v-else-if="couponDisplayShow">
|
<text class="txt" style="color: rgb(236 183 1);"
|
v-if="centerCoupon.usableCount > 1 && centerCoupon.displayStatus == 'WAIT_USE'">待使用:{{
|
centerCoupon.usableCount }}</text>
|
<text class="txt" style="color: rgb(236 183 1);"
|
v-else-if="centerCoupon.usableCount == 1 && centerCoupon.displayStatus == 'WAIT_USE'">待使用</text>
|
<text class="txt" style="color: rgb(236 183 1);"
|
v-else-if="centerCoupon.displayStatus == 'USED'">已使用</text>
|
<text class="txt" style="color: rgb(236 183 1);"
|
v-else-if="centerCoupon.displayStatus == 'EXPIRED'">已过期</text>
|
<text class="txt" style="color: rgb(236 183 1);"
|
v-else-if="centerCoupon.displayStatus == 'NOT_STARTED'">未开始</text>
|
<image class="bg_item"
|
v-if="moneyNumber(centerCoupon.money) == 8.8 && centerCoupon.usableCount == 0"
|
src="https://ossacmall.bluedeer.com.cn/app/static/images/display-center-8.8-disabled.png"
|
mode="widthFix">
|
</image>
|
<image class="bg_item"
|
v-else-if="moneyNumber(centerCoupon.money) == 8.8 && centerCoupon.usableCount > 0"
|
src="https://ossacmall.bluedeer.com.cn/app/static/images/display-center-8.8-use.png"
|
mode="widthFix">
|
</image>
|
<image class="bg_item"
|
v-if="moneyNumber(centerCoupon.money) == 1.8 && centerCoupon.usableCount == 0"
|
src="https://ossacmall.bluedeer.com.cn/app/static/images/display-center-1.8-disabled.png"
|
mode="widthFix">
|
</image>
|
<image class="bg_item"
|
v-else-if="moneyNumber(centerCoupon.money) == 1.8 && centerCoupon.usableCount > 0"
|
src="https://ossacmall.bluedeer.com.cn/app/static/images/display-center-1.8-use.png"
|
mode="widthFix">
|
</image>
|
</view>
|
</view>
|
<view v-for="item, index in partitionList" :key='index' class="partition-list"
|
:id="'partition-item_' + index">
|
<image :src="item.image" mode="widthFix" class="tag-img" @load="onPartitionImageLoad"></image>
|
<view class="goodList">
|
<view class="list" v-if="item.productList.length > 0">
|
<view>
|
<block v-for="(gitem, gindex) in item.productList" :key="gindex">
|
<GoodBlock v-if="gindex % 2 == 0 && partitionProject[gitem.id]" :zone-id="id"
|
:share-switch="productShareSwitch" :zone-type="info.zoneType" :pageName="'活动专区'"
|
:moduleName="'活动专区'" :goodsInfo="partitionProject[gitem.id]"
|
:careBeanRate="careBeanRate" :size="'big'">
|
</GoodBlock>
|
</block>
|
</view>
|
<view>
|
<block v-for="(gitem, gindex) in item.productList" :key="gindex">
|
<GoodBlock v-if="gindex % 2 == 1 && partitionProject[gitem.id]" :zone-id="id"
|
:share-switch="productShareSwitch" :zone-type="info.zoneType" :pageName="'活动专区'"
|
:moduleName="'活动专区'" :goodsInfo="partitionProject[gitem.id]"
|
:careBeanRate="careBeanRate" :size="'big'">
|
</GoodBlock>
|
</block>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
</view>
|
|
<view class="goodList" v-else>
|
<view class="personal_share_coupon"
|
v-if="!stockEmpty && (couponBannerShow || couponDisplayShow) && couponType == 2">
|
<!-- 券包到账（带分享） -->
|
<view class="coupon_item" v-if="couponBannerShow">
|
<text class="txt" v-if="selfStatus == 0">已到账</text>
|
<text class="txt grey" v-else-if="selfStatus == 1">已使用</text>
|
<text class="txt grey" v-else-if="selfStatus == 2">已失效</text>
|
<image class="btn_share" :class="{ grey: [1, 2].includes(selfStatus) }"
|
src="https://ossacmall.bluedeer.com.cn/app/static/images/to-share_bg.png" mode="widthFix">
|
</image>
|
<image class="bg_item" v-if="[1, 2].includes(selfStatus)" :src="selfCouponUsedUpImage"
|
mode="widthFix">
|
</image>
|
<image class="bg_item" v-else :src="selfCouponShortImage" mode="widthFix">
|
</image>
|
</view>
|
<view class="coupon_item" v-else-if="couponDisplayShow">
|
<text class="txt"
|
v-if="leftCoupon.displayStatus == 'WAIT_USE' && leftCoupon.usableCount > 1">待使用:{{
|
leftCoupon.usableCount }}</text>
|
<text class="txt"
|
v-else-if="leftCoupon.displayStatus == 'WAIT_USE' && leftCoupon.usableCount == 1">待使用</text>
|
<text class="txt grey" v-else-if="leftCoupon.displayStatus == 'NOT_STARTED'">未开始</text>
|
<text class="txt grey" v-else-if="leftCoupon.displayStatus == 'USED'">已使用</text>
|
<text class="txt grey" v-else-if="leftCoupon.displayStatus == 'EXPIRED'">已过期</text>
|
<image class="btn_share"
|
src="https://ossacmall.bluedeer.com.cn/app/static/images/to-share_bg.png" mode="widthFix">
|
</image>
|
<image class="bg_item"
|
v-if="moneyNumber(leftCoupon.money) == 8.8 && leftCoupon.usableCount == 0"
|
src="https://ossacmall.bluedeer.com.cn/app/static/images/display-8.8-disabled.png"
|
mode="widthFix">
|
</image>
|
<image class="bg_item"
|
v-else-if="moneyNumber(leftCoupon.money) == 8.8 && leftCoupon.usableCount > 0"
|
src="https://ossacmall.bluedeer.com.cn/app/static/images/display-8.8-use.png"
|
mode="widthFix">
|
</image>
|
<image class="bg_item"
|
v-if="moneyNumber(leftCoupon.money) == 1.8 && leftCoupon.usableCount == 0"
|
src="https://ossacmall.bluedeer.com.cn/app/static/images/display-1.8-disabled.png"
|
mode="widthFix">
|
</image>
|
<image class="bg_item"
|
v-else-if="moneyNumber(leftCoupon.money) == 1.8 && leftCoupon.usableCount > 0"
|
src="https://ossacmall.bluedeer.com.cn/app/static/images/display-1.8-use.png"
|
mode="widthFix">
|
</image>
|
</view>
|
<view class="coupon_item" v-if="couponDisplayShow">
|
<text class="txt"
|
v-if="rightCoupon.usableCount > 1 && rightCoupon.displayStatus == 'WAIT_USE'">待使用:{{
|
rightCoupon.usableCount }}</text>
|
<text class="txt"
|
v-else-if="rightCoupon.usableCount == 1 && rightCoupon.displayStatus == 'WAIT_USE'">待使用</text>
|
<text class="txt grey" v-else-if="rightCoupon.displayStatus == 'USED'">已使用</text>
|
<text class="txt grey" v-else-if="rightCoupon.displayStatus == 'NOT_STARTED'">未开始</text>
|
<text class="txt grey" v-else-if="rightCoupon.displayStatus == 'EXPIRED'">已过期</text>
|
<image class="btn_share"
|
src="https://ossacmall.bluedeer.com.cn/app/static/images/to-share_bg.png" mode="widthFix">
|
</image>
|
<image class="bg_item"
|
v-if="moneyNumber(rightCoupon.money) == 8.8 && rightCoupon.usableCount == 0"
|
src="https://ossacmall.bluedeer.com.cn/app/static/images/display-8.8-disabled.png"
|
mode="widthFix">
|
</image>
|
<image class="bg_item"
|
v-else-if="moneyNumber(rightCoupon.money) == 8.8 && rightCoupon.usableCount > 0"
|
src="https://ossacmall.bluedeer.com.cn/app/static/images/display-8.8-use.png"
|
mode="widthFix">
|
</image>
|
<image class="bg_item"
|
v-if="moneyNumber(rightCoupon.money) == 1.8 && rightCoupon.usableCount == 0"
|
src="https://ossacmall.bluedeer.com.cn/app/static/images/display-1.8-disabled.png"
|
mode="widthFix">
|
</image>
|
<image class="bg_item"
|
v-else-if="moneyNumber(rightCoupon.money) == 1.8 && rightCoupon.usableCount > 0"
|
src="https://ossacmall.bluedeer.com.cn/app/static/images/display-1.8-use.png"
|
mode="widthFix">
|
</image>
|
</view>
|
<!-- #ifdef MP -->
|
<button v-if="couponBannerShow && canShareFriendCoupon()" class="coupon_item share_coupon_btn"
|
open-type="share" hover-class="none" @click="handleShareCoupon">
|
<image class="btn_share" src="https://ossacmall.bluedeer.com.cn/app/static/images/to-share.png"
|
mode="widthFix">
|
</image>
|
<image class="bg_item" :src="friendCouponShortImage" mode="widthFix">
|
</image>
|
</button>
|
<view v-else-if="couponBannerShow" class="coupon_item">
|
<text class="txt grey" v-if="friendStatus == 'RECEIVED'">已被领取</text>
|
<text class="txt grey" v-else-if="friendStatus == 'USED'">已使用</text>
|
<text class="txt grey" v-else-if="friendStatus == 'EXPIRED'">已过期</text>
|
<image class="btn_share grey"
|
src="https://ossacmall.bluedeer.com.cn/app/static/images/to-share_bg.png" mode="widthFix">
|
</image>
|
<image class="bg_item" :src="friendCouponReceivedImage" mode="widthFix"></image>
|
</view>
|
<!-- #endif -->
|
<!-- #ifndef MP -->
|
<view v-if="couponBannerShow" class="coupon_item" @click="handleShareCoupon">
|
<text class="txt grey" v-if="friendStatus == 'RECEIVED'">已被领取</text>
|
<text class="txt grey" v-else-if="friendStatus == 'USED'">已使用</text>
|
<text class="txt grey" v-else-if="friendStatus == 'EXPIRED'">已过期</text>
|
<image v-else class="btn_share"
|
src="https://ossacmall.bluedeer.com.cn/app/static/images/to-share.png" mode="widthFix">
|
</image>
|
<image v-if="!canShareFriendCoupon()" class="btn_share grey"
|
src="https://ossacmall.bluedeer.com.cn/app/static/images/to-share_bg.png" mode="widthFix">
|
</image>
|
<image class="bg_item" v-if="!canShareFriendCoupon()" :src="friendCouponReceivedImage"
|
mode="widthFix"></image>
|
<image class="bg_item" v-else :src="friendCouponShortImage" mode="widthFix">
|
</image>
|
</view>
|
<!-- #endif -->
|
</view>
|
<view class="personal_share_coupon"
|
v-else-if="!stockEmpty && (couponBannerShow || couponDisplayShow) && couponType == 3">
|
<!-- 券包到账（不带分享） -->
|
<view class="coupon_item_line" :class="{ grey: [1, 2].includes(selfStatus) }"
|
v-if="couponBannerShow">
|
<text class="txt" style="color: rgb(236 183 1);" v-if="selfStatus == 0">已到账</text>
|
<text class="txt" style="color: rgb(236 183 1);" v-else-if="selfStatus == 1">已使用</text>
|
<text class="txt" style="color: rgb(236 183 1);" v-else-if="selfStatus == 2">已失效</text>
|
<image class="bg_item" :src="selfCouponLongImage" mode="widthFix"></image>
|
</view>
|
<view class="coupon_item_line" v-else-if="couponDisplayShow">
|
<text class="txt" style="color: rgb(236 183 1);"
|
v-if="centerCoupon.usableCount > 1 && centerCoupon.displayStatus == 'WAIT_USE'">待使用:{{
|
centerCoupon.usableCount }}</text>
|
<text class="txt" style="color: rgb(236 183 1);"
|
v-else-if="centerCoupon.usableCount == 1 && centerCoupon.displayStatus == 'WAIT_USE'">待使用</text>
|
<text class="txt" style="color: rgb(236 183 1);"
|
v-else-if="centerCoupon.displayStatus == 'USED'">已使用</text>
|
<text class="txt" style="color: rgb(236 183 1);"
|
v-else-if="centerCoupon.displayStatus == 'EXPIRED'">已过期</text>
|
<text class="txt" style="color: rgb(236 183 1);"
|
v-else-if="centerCoupon.displayStatus == 'NOT_STARTED'">未开始</text>
|
<image class="bg_item"
|
v-if="moneyNumber(centerCoupon.money) == 8.8 && centerCoupon.usableCount == 0"
|
src="https://ossacmall.bluedeer.com.cn/app/static/images/display-center-8.8-disabled.png"
|
mode="widthFix">
|
</image>
|
<image class="bg_item"
|
v-else-if="moneyNumber(centerCoupon.money) == 8.8 && centerCoupon.usableCount > 0"
|
src="https://ossacmall.bluedeer.com.cn/app/static/images/display-center-8.8-use.png"
|
mode="widthFix">
|
</image>
|
<image class="bg_item"
|
v-if="moneyNumber(centerCoupon.money) == 1.8 && centerCoupon.usableCount == 0"
|
src="https://ossacmall.bluedeer.com.cn/app/static/images/display-center-1.8-disabled.png"
|
mode="widthFix">
|
</image>
|
<image class="bg_item"
|
v-else-if="moneyNumber(centerCoupon.money) == 1.8 && centerCoupon.usableCount > 0"
|
src="https://ossacmall.bluedeer.com.cn/app/static/images/display-center-1.8-use.png"
|
mode="widthFix">
|
</image>
|
</view>
|
</view>
|
<!-- <scroll-view scroll-y="true" style="height:100%" @scroll="goodlistScroll" scroll-with-animation='true'> -->
|
<view class="list" v-if="goodList.length > 0">
|
<view>
|
<block v-for="(gitem, gindex) in goodList" :key="gindex">
|
<GoodBlock v-if="gindex % 2 == 0" :zone-id="id" :share-switch="productShareSwitch"
|
:zone-type="info.zoneType" :pageName="'活动专区'" :moduleName="'活动专区'" :goodsInfo="gitem"
|
:careBeanRate="careBeanRate" :size="'big'">
|
</GoodBlock>
|
</block>
|
</view>
|
<view>
|
<block v-for="(gitem, gindex) in goodList" :key="gindex">
|
<GoodBlock v-if="gindex % 2 == 1" :zone-id="id" :share-switch="productShareSwitch"
|
:zone-type="info.zoneType" :pageName="'活动专区'" :moduleName="'活动专区'" :goodsInfo="gitem"
|
:careBeanRate="careBeanRate" :size="'big'">
|
</GoodBlock>
|
</block>
|
</view>
|
</view>
|
<view style="height: 2vh;"></view>
|
<view v-if="loading" class="loadingTips">加载中...</view>
|
<view v-else-if="goodList.length <= 0" class="loadingTips">暂无数据</view>
|
<view v-else-if="loadend" class="loadingTips">已全部加载</view>
|
<view v-else class="loadingTips">上拉加载更多</view>
|
<!-- </scroll-view> -->
|
<view style="height: 2vh;"></view>
|
</view>
|
<image :src="info.ruleTitleText" mode="widthFix" class="coupon_rule"
|
v-if="info.ruleTitleText && info.ruleContentText" @click="handleCouponRule"></image>
|
<view class="menuList" v-if="showMenu">
|
<view class="menuList_box">
|
<view class="menuList_wrapper">
|
<block v-for="menuItem, menuIndex in categoryList" :key="menuIndex">
|
<view class="menuTitle">{{ menuItem.name }}</view>
|
<view class="subMenu_box" v-if="menuItem.child.length > 0"
|
:class="menuIndex == 0 ? 'firstMenu' : ''">
|
<view v-for="subMenuItem, subMenuIndex in menuItem.child" :key="subMenuIndex"
|
class="subMenu_item" :class="hasSelected(subMenuItem.id) ? 'active' : ''"
|
@click="selectMenu(subMenuItem.id)">{{ subMenuItem.name }}</view>
|
</view>
|
</block>
|
</view>
|
|
<view class="menu_btnBox">
|
<view class="menu_btn clear_btn" @click="selectMenu()">清空</view>
|
<view class="menu_btn sure_btn" @click="menuSubmit">确定</view>
|
</view>
|
<view class="menuList_close" @click="showMenu = false"></view>
|
</view>
|
</view>
|
</view>
|
<home @goLottery="goLottery" :showLottery="info.isLottery ? true : false"
|
:hideCoupon="isYueyangZone || info.zoneType == 7" :cusTop="homeTop"></home>
|
<popCoupon ref="popCoupon" :pageName="'zone'" :zoneId="id" :zoneType="info.zoneType" @hide="showOtherPop">
|
</popCoupon>
|
<popVideo ref="popVideoRef" @close="handleClosePopVideo"></popVideo>
|
<personalAndShareCoupon ref="personalAndShareCouponRef" @share="handleShareCoupon" @close="showOtherPop">
|
</personalAndShareCoupon>
|
<personalAndShareCouponRule ref="personalAndShareCouponRuleRef"></personalAndShareCouponRule>
|
<task ref="task"></task>
|
<popNewuser ref="popNewuserRef"></popNewuser>
|
</view>
|
</template>
|
|
<script>
|
import {
|
WEB_ACTIVITY_BASE
|
} from '@/config/app';
|
import {
|
mapGetters
|
} from "vuex";
|
import {
|
getZoneDetail,
|
getZoneGoodList,
|
getProductslist,
|
getCategoryList,
|
checkSign,
|
getZoneCoupon,
|
couponPackVisit,
|
couponPackSharelink,
|
getZoneCouponCount,
|
} from '@/api/store.js';
|
|
import {
|
handsCoupon,
|
getUserBean
|
} from '@/api/user.js'
|
import GoodBlock from "@/pages/goods_block/index.vue";
|
import ClipboardJS from "@/plugin/clipboard/clipboard.js";
|
import home from '@/components/home';
|
import popCoupon from '@/components/popCoupon/index.vue';
|
import popVideo from '@/components/popVideo/index.vue';
|
import personalAndShareCoupon from '@/components/personalAndShareCoupon/index.vue'
|
import personalAndShareCouponRule from '@/components/personalAndShareCoupon/rule.vue'
|
import task from '@/components/task/index.vue';
|
import yueyangZone from '@/components/yueyangZone/index.vue'
|
import {
|
toLogin
|
} from '@/libs/login.js';
|
import popNewuser from '@/components/popNewuser/index.vue';
|
let app = getApp();
|
export default {
|
components: {
|
GoodBlock,
|
home,
|
popCoupon,
|
popVideo,
|
task,
|
yueyangZone,
|
personalAndShareCoupon,
|
personalAndShareCouponRule,
|
popNewuser
|
},
|
computed: mapGetters(['isLogin', 'uid', 'userInfo']),
|
data() {
|
return {
|
returnShow: true,
|
menuTop: 0,
|
lineHeight: 34,
|
marTop: 0,
|
id: 0,
|
cateId: 0,
|
relationKey: '',
|
careBeanRate: 0,
|
loading: false,
|
loadend: false,
|
pageHeight: 0,
|
categoryList: [],
|
goodList: [],
|
where: {
|
page: 1,
|
limit: 20,
|
cateIds: '',
|
cid: ''
|
},
|
toolbarArr: [{
|
name: '综合',
|
value: 'salesOrder',
|
},
|
{
|
name: '价格',
|
value: 'priceOrder',
|
sort: 'asc'
|
},
|
{
|
name: '筛选',
|
value: 'filter'
|
},
|
],
|
activeTabIndex: -1,
|
info: {
|
isShow: true,
|
useFlag: 1
|
},
|
showMenu: false,
|
selectedMenuArr: [],
|
expireTime: [],
|
countdownToken: 0,
|
isPageShow: false,
|
loginBackFn: null,
|
errText: '',
|
taskInfo: {},
|
isFirst: true,
|
startOrEnd: '',
|
isYueyangZone: false,
|
isOpen: false, // 默认收起，false收起/true展开
|
currentIndex: -1, // 默认选中第一个【全部】
|
partitionList: [],
|
partitionProject: {},
|
tagList: [],
|
restList: [],
|
allTop: [],
|
tabHeight: 0, // 顶部分类标签sticky高度
|
isScrollingByTag: false, // 点击标签滚动中，暂停 scroll 反向联动
|
scrollCheckTimer: null,
|
setAllScrollTopTimer: null,
|
lastScrollTop: 0,
|
partitionImageLoadTimer: null,
|
couponType: 1, //1:已领完,2:券包到账（带分享）,3:券包到账（不带分享）
|
couponBannerShow: false,
|
friendStatus: '',
|
selfStatus: '',
|
shareToken: '',
|
isCouponShare: false,
|
friendCouponShareToken: '',
|
activityId: '',
|
productShareSwitch: 0,
|
stockEmpty: true,
|
urlOption: {},
|
homeTop: '200',
|
lotteryBannerHeight: '', //抽奖banner预计算高度（rpx），空字符串表示未取到，按原逻辑自适应
|
hasNewPop: false,
|
leftCoupon: {},
|
rightCoupon: {},
|
centerCoupon: {},
|
couponDisplayShow: false,
|
friendCouponLongImage: '',
|
friendCouponShortImage: '',
|
selfCouponLongImage: '',
|
selfCouponShortImage: '',
|
selfCouponUsedUpImage: '',
|
friendCouponReceivedImage: ''
|
}
|
},
|
onLoad(options) {
|
uni.removeStorageSync('zoneTab')
|
// 获取系统信息
|
let that = this;
|
uni.getWindowInfo({
|
success(res) {
|
that.windowWidth = res.windowWidth;
|
that.windowHeight = res.windowHeight;
|
that.pageHeight = res.windowHeight - 220 / 750 * res.windowWidth;
|
}
|
});
|
|
that.menuTop = uni.getMenuButtonBoundingClientRect().top;
|
that.lineHeight = uni.getMenuButtonBoundingClientRect().height;
|
that.$nextTick(() => {
|
let query = uni.createSelectorQuery().in(that);
|
let info = query.select(".header");
|
info.boundingClientRect(function (data) {
|
if (data) {
|
that.marTop = data.height;
|
that.scheduleSetAllScrollTop();
|
}
|
}).exec()
|
})
|
this.isFirst = true
|
},
|
onUnload() {
|
this.$store.commit('UPDATE_isSystemHide', {
|
isSystemHide: false
|
});
|
this.$refs.task.hide();
|
},
|
onShow() {
|
let that = this;
|
console.log('zone onShow', that.$store.getters.isSystemHide);
|
if (that.$store.getters.isSystemHide) {
|
console.log('系统事件触发了onshow事件');
|
return false;
|
}
|
|
this.isPageShow = true;
|
uni.$off('updateCareBeanRate', that.careBeanRateReadyFn);
|
uni.$off('loginFlSuccess', that.registerFn);
|
uni.$off('BELONG_READY', that.belongInfoReadyFn);
|
uni.$off('UPDATE_LOGINSTATUS', that.onGetUnion);
|
|
uni.showLoading({
|
mask: true,
|
})
|
let pages = getCurrentPages(),
|
currPage = pages[pages.length - 1];
|
console.log('------------------page onShow start-----------------');
|
console.log('route', currPage.route);
|
console.log('options', currPage.options);
|
console.log('------------------page onShow end-----------------');
|
console.log('专区onShow：：', new Date().getTime())
|
let options = currPage.options;
|
this.relationKey = options.relationKey;
|
this.id = options.id;
|
this.cateId = options.cateId;
|
this.friendCouponShareToken = options.shareToken
|
this.urlOption = options
|
if (String(that.info.id) !== String(that.id)) {
|
that.$set(that.info, 'shareSwitch', 0);
|
}
|
that.updateZoneShareMenu();
|
this.getAllCategory();
|
|
that.returnShow = pages.length === 1 ? false : true;
|
|
if (options.scene) {
|
if (this.$Cache.get('zone_scene') && this.$Cache.get('zone_scene') == options.scene && this.$Cache.get(
|
'zone_scene_param')) {
|
let params = JSON.parse(this.$Cache.get('zone_scene_param'));
|
if (params.id) {
|
that.urlOption = params
|
that.id = params.id;
|
that.friendCouponShareToken = params.shareToken
|
if (params.cateId) {
|
that.cateId = params.cateId;
|
}
|
if (params.relationKey) {
|
that.relationKey = params.relationKey
|
}
|
that.checkUnionId();
|
} else {
|
this.showSkeleton = false;
|
this.$util.Tips({
|
title: '缺少参数无法查看专区'
|
}, {
|
url: '/pages/index/index'
|
});
|
}
|
} else {
|
uni.$once('finishSceneParam', (res) => {
|
console.log('专区解析到scene参数', res);
|
if (res && res.data) {
|
this.$Cache.set('zone_scene', options.scene);
|
this.$Cache.set('zone_scene_param', res.data);
|
that.id = res.data.id;
|
that.friendCouponShareToken = res.data.shareToken
|
that.urlOption = res.data
|
if (res.data.relationKey) {
|
that.relationKey = res.data.relationKey
|
}
|
that.checkUnionId();
|
} else {
|
this.$util.Tips({
|
title: '缺少参数无法查看专区'
|
}, {
|
url: '/pages/index/index'
|
});
|
}
|
});
|
}
|
} else {
|
that.checkUnionId();
|
}
|
|
if (that.$store.getters.careBeanRate) {
|
that.careBeanRateReadyFn()
|
} else {
|
uni.$once('updateCareBeanRate', that.careBeanRateReadyFn);
|
}
|
|
if (that.$store.getters.isBelong) {
|
that.belongInfoReadyFn({
|
isRegister: false
|
})
|
} else {
|
uni.showLoading()
|
uni.$once('BELONG_READY', that.belongInfoReadyFn);
|
}
|
|
},
|
onHide() {
|
let that = this;
|
if (that.$store.getters.isSystemHide) {
|
console.log('系统事件触发了onhide事件');
|
return false;
|
}
|
this.isPageShow = false;
|
uni.$off('updateCareBeanRate', that.careBeanRateReadyFn);
|
uni.$off('loginFlSuccess', that.registerFn);
|
uni.$off('BELONG_READY', that.belongInfoReadyFn);
|
uni.$off('UPDATE_LOGINSTATUS', that.onGetUnion);
|
uni.$off('pageScroll')
|
},
|
onShareAppMessage: function (options) {
|
let that = this;
|
if (that.taskInfo.code && that.taskInfo.type.toLowerCase() == 'share') {
|
console.error('finishtask')
|
that.$refs.task.finishTask();
|
}
|
that.$store.commit('UPDATE_isSystemHide', {
|
isSystemHide: (new Date()).getTime()
|
});
|
if (that.isCouponShare || (that.couponType == 2 && that.canShareFriendCoupon())) {
|
that.isCouponShare = false;
|
if (that.$refs.personalAndShareCouponRef) {
|
that.$refs.personalAndShareCouponRef.hide();
|
}
|
return that.buildCouponShareConfig(options);
|
}
|
if (!that.isZoneShareEnabled()) {
|
return {};
|
}
|
|
let shareUrl = '/pages/zone/index?id=' + this.id + '&spread=' + this.getSpreadId() + '&couponZone=false';
|
if (this.$store.getters.belong && this.$util.setShareBelong(this.$store.getters.belong)) {
|
shareUrl += '&' + this.$util.setShareBelong(this.$store.getters.belong);
|
}
|
let pages = getCurrentPages(),
|
currPage = pages[pages.length - 1];
|
that.addTrack('yy_contentPageShare', {
|
'sharePosition_var': options.from == 'button' ? '页面分享按钮' : '页面顶部',
|
'shareType_var': '微信好友', //保存海报
|
'pageTitle_var': '活动专区',
|
'pageType_var': '活动',
|
'pagePath_var': currPage.$page.fullPath,
|
'productID_var': '-',
|
'productName_var': '-',
|
'contentId_var': '-',
|
'contentName_var': '-',
|
'contentType_var': '-',
|
'contentLabel_var': '-',
|
});
|
return {
|
title: this.info.shareTitle,
|
path: shareUrl,
|
imageUrl: that.info.shareImage,
|
};
|
},
|
onReachBottom() {
|
this.getGoodList();
|
},
|
onPageScroll(e) {
|
if (this.info.zoneType == 7) {
|
this.lastScrollTop = e.scrollTop
|
this.checkScrollIndex()
|
}
|
},
|
methods: {
|
handleCouponRule() {
|
this.$refs.personalAndShareCouponRuleRef.show(this.info.ruleContentText)
|
},
|
isZoneShareEnabled() {
|
if (this.info.couponPackStatus && this.info.couponPackStatus.issued) {
|
return Number(this.info.couponPackStatus.zoneShareSwitch) === 1
|
}
|
return Number(this.info.shareSwitch) === 1;
|
},
|
updateZoneShareMenu() {
|
// #ifdef MP
|
if (this.id && !this.isZoneShareEnabled()) {
|
wx.hideShareMenu({
|
menus: ['shareAppMessage']
|
});
|
} else {
|
wx.showShareMenu({
|
menus: ['shareAppMessage']
|
});
|
}
|
// #endif
|
},
|
moneyNumber(money) {
|
return Number(money)
|
},
|
canShareFriendCoupon() {
|
return this.friendStatus && !['RECEIVED', 'USED', 'EXPIRED'].includes(this.friendStatus);
|
},
|
handleShareCoupon() {
|
let that = this;
|
if (!that.canShareFriendCoupon()) {
|
return;
|
}
|
if (!that.isLogin) {
|
toLogin(that);
|
return;
|
}
|
// #ifdef MP
|
that.isCouponShare = true;
|
// #endif
|
// #ifndef MP
|
uni.showToast({
|
title: '请在微信小程序中分享给好友',
|
icon: 'none'
|
});
|
// #endif
|
},
|
getSpreadId() {
|
const spread = this.uid || app.globalData.spid || 0;
|
const num = Number(spread);
|
return isNaN(num) ? 0 : num;
|
},
|
getCouponShareParams() {
|
let that = this;
|
const belong = that.urlOption;
|
const result = {};
|
if (belong.couponZone == 'false') return {}
|
// belong内需要动态判断的字段列表
|
const belongKeys = ['agentNo', 'branchCode', 'channel', 'companyCode', 'subCode'];
|
belongKeys.forEach(key => {
|
if (key in belong) {
|
result[key] = belong[key];
|
}
|
});
|
if (that.friendCouponShareToken) {
|
result.shareToken = that.friendCouponShareToken
|
}
|
if (belong.scene) {
|
result.sceneId = belong.scene
|
}
|
|
// 固定字段
|
Object.assign(result, {
|
spread: that.getSpreadId(),
|
zoneId: that.id
|
});
|
|
return result;
|
},
|
buildCouponShareConfig(options) {
|
let that = this;
|
let pages = getCurrentPages(),
|
currPage = pages[pages.length - 1];
|
return couponPackSharelink({
|
activityId: that.activityId
|
}).then(res => {
|
const data = res.data || {};
|
if (data.shareToken) {
|
that.shareToken = data.shareToken;
|
}
|
let shareUrl = data.path || ('/pages/zone/index?id=' + that.id + '&shareToken=' + (data
|
.shareToken) + '&spread=' + that.getSpreadId());
|
if (that.$store.getters.belong && that.$util.setShareBelong(that.$store.getters.belong)) {
|
shareUrl += '&' + that.$util.setShareBelong(that.$store.getters.belong);
|
}
|
that.addTrack('yy_contentPageShare', {
|
'sharePosition_var': '好友券分享按钮',
|
'shareType_var': '微信好友',
|
'pageTitle_var': '活动专区',
|
'pageType_var': '活动',
|
'pagePath_var': currPage.$page.fullPath,
|
'productID_var': '-',
|
'productName_var': '-',
|
'contentId_var': that.info.couponPackStatus?.friendCoupon?.id,
|
'contentName_var': that.info.couponPackStatus?.friendCoupon?.name,
|
'contentType_var': '优惠券',
|
'contentLabel_var': '-',
|
});
|
return {
|
title: '好友专享优惠券',
|
path: shareUrl,
|
imageUrl: data.shareCoverImage || that.info.shareImage,
|
};
|
}).catch(err => {
|
uni.showToast({
|
title: err.message || '分享失败，请稍后重试',
|
icon: 'none'
|
});
|
return {};
|
});
|
},
|
scheduleSetAllScrollTop(callback) {
|
if (this.info.zoneType != 7 || !this.partitionList.length) {
|
callback && callback()
|
return
|
}
|
if (this.setAllScrollTopTimer) clearTimeout(this.setAllScrollTopTimer)
|
this.setAllScrollTopTimer = setTimeout(() => {
|
this.setAllScrollTopTimer = null
|
this.setAllScrollTop(callback)
|
}, 150)
|
},
|
onPartitionImageLoad() {
|
if (this.info.zoneType != 7) return
|
if (this.partitionImageLoadTimer) clearTimeout(this.partitionImageLoadTimer)
|
this.partitionImageLoadTimer = setTimeout(() => {
|
this.scheduleSetAllScrollTop()
|
}, 100)
|
},
|
scrollToTarget() {
|
let that = this
|
if (that.currentIndex === -1) {
|
uni.pageScrollTo({
|
scrollTop: 0,
|
duration: 300,
|
complete: () => {
|
that.isScrollingByTag = false
|
}
|
})
|
return
|
}
|
const offset = that.allTop[that.currentIndex]
|
if (offset == null) {
|
that.isScrollingByTag = false
|
return
|
}
|
uni.pageScrollTo({
|
scrollTop: offset < 0 ? 0 : offset,
|
duration: 300,
|
complete: () => {
|
setTimeout(() => {
|
that.isScrollingByTag = false
|
}, 50)
|
}
|
})
|
},
|
setAllScrollTop(callback) {
|
let that = this
|
this.$nextTick(() => {
|
const query = uni.createSelectorQuery().in(that)
|
that.allTop = []
|
query.select('.tag-wrap-container').boundingClientRect()
|
that.partitionList.forEach((item, index) => {
|
query.select('#partition-item_' + index).boundingClientRect()
|
})
|
query.selectViewport().scrollOffset()
|
query.exec(resList => {
|
if (!resList || !resList[0]) {
|
callback && callback()
|
return
|
}
|
that.tabHeight = resList[0].height || 0
|
const scrollTopNow = resList[resList.length - 1].scrollTop
|
for (let i = 1; i < resList.length - 1; i++) {
|
const res = resList[i]
|
if (res) {
|
that.allTop.push(res.top + scrollTopNow - that.tabHeight - that.marTop)
|
}
|
}
|
callback && callback()
|
})
|
})
|
},
|
updateCurrentIndexByScroll(scrolltop) {
|
if (!this.allTop.length) return
|
let cur = -1
|
if (scrolltop >= this.allTop[0]) {
|
for (let i = this.allTop.length - 1; i >= 0; i--) {
|
if (scrolltop >= this.allTop[i]) {
|
cur = i
|
break
|
}
|
}
|
}
|
if (this.currentIndex !== cur) {
|
this.currentIndex = cur
|
}
|
},
|
checkScrollIndex() {
|
if (this.isScrollingByTag || !this.allTop.length) return
|
if (this.scrollCheckTimer) clearTimeout(this.scrollCheckTimer)
|
this.scrollCheckTimer = setTimeout(() => {
|
this.scrollCheckTimer = null
|
this.updateCurrentIndexByScroll(this.lastScrollTop)
|
}, 50)
|
},
|
// 切换标签
|
changeTag(idx) {
|
this.isOpen = false
|
this.currentIndex = idx
|
this.isScrollingByTag = true
|
this.setAllScrollTop(() => {
|
this.scrollToTarget()
|
})
|
},
|
// 打开更多分类弹窗
|
openMore() {
|
this.isOpen = !this.isOpen
|
this.$nextTick(() => {
|
this.scheduleSetAllScrollTop()
|
})
|
},
|
// 后退
|
returns: function () {
|
let pages = getCurrentPages(),
|
prevPage = pages[pages.length - 2];
|
uni.$emit('returnEvent', {
|
name: 'goods_details',
|
'returnPage': prevPage.route
|
});
|
uni.navigateBack()
|
},
|
checkUnionId() {
|
let that = this;
|
if (that.$store.getters.unionId) { //初始化数据接口login请求完毕第一次login返回了unionId
|
that.onGetUnion();
|
} else {
|
uni.$once('UPDATE_LOGINSTATUS', that.onGetUnion);
|
}
|
},
|
onGetUnion() {
|
let that = this;
|
if (that.$store.getters.isLogin) {
|
that.onLoadFn();
|
} else {
|
toLogin(that);
|
that.loginBackFn = function () {
|
that.onLoadFn();
|
}
|
uni.$once('loginFlSuccess', that.registerFn);
|
}
|
},
|
careBeanRateReadyFn() {
|
let that = this;
|
that.$nextTick(() => {
|
that.careBeanRate = that.$store.getters.careBeanRate;
|
//that.$set(that, 'caresBeanRate', that.$store.getters.careBeanRate)
|
})
|
},
|
belongInfoReadyFn(data) {
|
let that = this;
|
uni.hideLoading();
|
if (!data.isRegister) {
|
console.log('专区belongInfoReadyFn：：', new Date().getTime())
|
that.checkLoginFn()
|
}
|
},
|
checkLoginFn: function () {
|
let that = this;
|
let pages = getCurrentPages(),
|
currPage = pages[pages.length - 1];
|
this.addTrack('yy_pageView', {
|
pageTitle_var: '活动专区',
|
pagePath_var: currPage.$page.fullPath,
|
pageType_var: '活动',
|
});
|
uni.hideLoading()
|
if (that.isPageShow) {
|
// if (that.$store.getters.isLogin) {
|
// that.onLoadFn();
|
// } else {
|
// toLogin(that);
|
// }
|
// that.loginBackFn=function(){
|
// that.onLoadFn();
|
// }
|
// uni.$once('loginFlSuccess', that.registerFn);
|
}
|
if (that.$store.getters.isLogin) {
|
console.log('get enteroptions', app.globalData.task);
|
if (app.globalData.task) {
|
that.taskInfo = app.globalData.task;
|
uni.$emit('clearTask', false)
|
} else {
|
that.taskInfo = {};
|
}
|
if (that.taskInfo.code) {
|
that.$refs.task.show(that.taskInfo);
|
}
|
}
|
},
|
registerFn() {
|
let that = this;
|
if (that.loginBackFn) {
|
that.loginBackFn();
|
}
|
that.loginBackFn = null;
|
},
|
getCouponCount(couponData, index) {
|
if (!couponData[index]) {
|
this.$refs.yueyangZoneRef.resetCoupons(couponData)
|
return
|
}
|
let that = this
|
getZoneCouponCount({
|
couponId: couponData[index].id
|
}).then(res => {
|
let coupons = couponData
|
coupons.splice(index, 1, {
|
...couponData[index],
|
...res.data
|
})
|
that.getCouponCount(coupons, index + 1)
|
})
|
},
|
setYueyangZone() {
|
// 悦养专区处理
|
let that = this
|
this.isYueyangZone = true
|
this.$nextTick(() => {
|
that.getUserBean()
|
// 获取专区优惠券
|
getZoneCoupon(that.info.id).then(res => {
|
const couponData = res.data
|
that.getCouponCount(couponData, 0)
|
})
|
})
|
},
|
onLoadFn() {
|
let that = this;
|
handsCoupon(); //检查用户有可以手动领取导入优惠券记录
|
that.getZoneDetail();
|
},
|
getUserBean() {
|
let that = this;
|
getUserBean().then(res2 => {
|
this.$refs.yueyangZoneRef.resetCareBean(res2.data.totalCareBeans)
|
// that.myCareBean = res2.data.totalCareBeans;
|
});
|
},
|
goDetail() {
|
uni.navigateTo({
|
url: '/pages/consumption/index?zoneId=' + this.info.id
|
})
|
},
|
goLottery() {
|
let that = this;
|
var data = {
|
pageTitle_var: '首页',
|
firstTabName_var: '-',
|
moduleName_var: "抽奖",
|
buttonName_var: "GO"
|
};
|
this.addTrack('yy_marketPageClick', data);
|
|
function go() {
|
let webUrl = `${WEB_ACTIVITY_BASE}/acmall_lottery/index.html`
|
webUrl += '?token=' +
|
that.$store.getters.token + '&unionId=' + that.$store.getters.unionId + '&mdayId=' + that.info
|
.mdayId
|
let url = '/pages/users/web_page/index?isShare=0&title=抽奖&needLogin=true&webUel=' + encodeURIComponent(
|
webUrl)
|
uni.navigateTo({
|
url: url
|
})
|
}
|
|
if (!that.$store.getters.isLogin) {
|
toLogin(that);
|
that.loginBackFn = function () {
|
go();
|
}
|
} else {
|
go();
|
}
|
},
|
hasSelected: function (id) {
|
return this.selectedMenuArr.indexOf(id) >= 0;
|
},
|
selectMenu: function (id) {
|
let that = this;
|
if (id) {
|
let arr = that.selectedMenuArr.concat([]);
|
if (that.selectedMenuArr.indexOf(id) >= 0) {
|
arr.splice(arr.indexOf(id), 1)
|
this.$set(this, 'selectedMenuArr', arr)
|
//that.selectedMenuArr.splice(that.selectedMenuArr.indexOf(id),1)
|
} else {
|
arr.push(id);
|
//that.selectedMenuArr.push(id);
|
this.$set(this, 'selectedMenuArr', arr)
|
}
|
} else {
|
this.$set(this, 'selectedMenuArr', [])
|
//that.selectedMenuArr=[];
|
}
|
},
|
menuSubmit: function () {
|
this.where.page = 1;
|
this.loadend = false;
|
this.where.cateIds = this.selectedMenuArr.join(',');
|
this.where.cid = this.selectedMenuArr.join(',');
|
this.showMenu = false;
|
this.getGoodList();
|
},
|
changeToolbar: function (index) {
|
let that = this;
|
if (that.toolbarArr[index].value == 'filter') {
|
// this.selectedMenuArr=[];
|
// this.$set(this,'selectedMenuArr',this.where.cateIds?this.where.cateIds.split(','):[])
|
this.getAllCategory();
|
that.showMenu = true;
|
that.$nextTick(() => {
|
that.$forceUpdate()
|
})
|
} else {
|
if (that.activeTabIndex !== index) {
|
that.activeTabIndex = index;
|
} else if (that.toolbarArr[index].sort) {
|
if (that.toolbarArr[index].sort == 'desc') {
|
that.toolbarArr[index].sort = 'asc';
|
} else {
|
that.toolbarArr[index].sort = 'desc';
|
}
|
}
|
that.where.page = 1;
|
that.loadend = false;
|
that.getGoodList();
|
}
|
},
|
|
getAllCategory: function () {
|
let that = this;
|
getCategoryList().then(res => {
|
that.categoryList = res.data;
|
})
|
},
|
validAlert(data) {
|
// 每次重新计算前作废旧的倒计时链，避免多条定时器同时刷新导致数字跳动
|
this.countdownToken++
|
const token = this.countdownToken
|
const {
|
startTime,
|
expireTime
|
} = data
|
// const startTime='2026-01-16 09:50:00'
|
const nowTimestamp = Date.now();
|
if (startTime) {
|
const startTimetamp = new Date(startTime.split('-').join('/'));
|
if (startTimetamp.getTime() > nowTimestamp) {
|
let month = startTimetamp.getMonth() + 1
|
month = month < 10 ? '0' + month : month;
|
let date = startTimetamp.getDate()
|
date = date < 10 ? '0' + date : date;
|
let hour = startTimetamp.getHours()
|
hour = hour < 10 ? '0' + hour : hour;
|
let minutes = startTimetamp.getMinutes()
|
minutes = minutes < 10 ? '0' + minutes : minutes;
|
|
this.countdownTimer(startTime.split('-').join('/'), 'start', token)
|
this.startOrEnd = "后开启"
|
return
|
}
|
}
|
if (expireTime) {
|
const expireTimetamp = new Date(expireTime.split('-').join('/')).getTime();
|
if (expireTimetamp < nowTimestamp) {
|
return
|
}
|
this.countdownTimer(expireTime.split('-').join('/'), 'end', token)
|
this.startOrEnd = "后结束"
|
}
|
},
|
handleClosePopVideo() {
|
this.$refs.popCoupon.show();
|
this.isFirst = false
|
},
|
hasSign() {
|
let that = this
|
if (that.info.zoneType == 3) {
|
// 专区：
|
// 判断有没有签到
|
// 如果没签到需要提示且不能跳转到商品详情
|
checkSign({
|
zoneId: that.info.id
|
}).then(res => {
|
if (!res.data) {
|
uni.showModal({
|
title: "提示",
|
content: "未签到，请联系销售人员重新签到",
|
showCancel: false
|
})
|
} else if (that.isFirst) {
|
that.$refs.popVideoRef.show(that.info)
|
}
|
})
|
} else if (that.isFirst) {
|
that.$refs.popVideoRef.show(that.info)
|
}
|
},
|
resetPartitionTabs(partitionTabs) {
|
let that = this
|
that.partitionList = partitionTabs
|
that.tagList = partitionTabs.slice(0, 4)
|
that.restList = partitionTabs.slice(4)
|
that.scheduleSetAllScrollTop()
|
},
|
getHomeTop(rate) {
|
const sys = uni.getSystemInfoSync()
|
let screenHeight = sys.screenHeight
|
return (screenHeight * rate) + ''
|
},
|
couponPackVisit() {
|
let that = this
|
let belong = this.$store.getters.belong;
|
const {
|
couponBannerShow, //券区展示开关
|
shareUnavailable,
|
friendCoupon, //好友券
|
selfCoupon, //自用券
|
friendCouponStatus, //好友券分享状态
|
productShareSwitch, //商品分享开关
|
stockEmpty, //是否没有库存
|
autoIssueOnZoneView, //进专区是否自动送券：0否，1是
|
displayLayout, //展示布局：NONE/SINGLE_CENTER/DOUBLE_SIDE
|
displayCoupons, //接口送券模式下当前用户已推送的展示券列表
|
friendCouponLongImage,//好友券长图
|
friendCouponShortImage,//好友券短图
|
selfCouponLongImage,//自用券长图
|
selfCouponShortImage,//自用券短图
|
selfCouponUsedUpImage,//自用券已用完时的图片
|
friendCouponReceivedImage,//好友券已被领取的图片
|
} = that.info.couponPackStatus
|
// stockEmpty:true:营销员二维码进来就没券了
|
// shareUnavailable:true:好友券已领完,false:好友券还有
|
if (autoIssueOnZoneView == 1) {
|
that.friendCouponLongImage = friendCouponLongImage || ''
|
that.friendCouponShortImage = friendCouponShortImage || 'https://ossacmall.bluedeer.com.cn/app/static/images/friend-share.gif'
|
that.selfCouponLongImage = selfCouponLongImage || 'https://ossacmall.bluedeer.com.cn/app/static/images/share-credited.png'
|
that.selfCouponShortImage = selfCouponShortImage || 'https://ossacmall.bluedeer.com.cn/app/static/images/personal-use.gif'
|
that.selfCouponUsedUpImage = selfCouponUsedUpImage || 'https://ossacmall.bluedeer.com.cn/app/static/images/personal-use-disabled.png'
|
that.friendCouponReceivedImage = friendCouponReceivedImage || 'https://ossacmall.bluedeer.com.cn/app/static/images/friend-share-disabled.png'
|
that.stockEmpty = stockEmpty
|
that.couponBannerShow = couponBannerShow
|
if (couponBannerShow) {
|
that.homeTop = that.getHomeTop(0.6)
|
if (friendCoupon && selfCoupon) {
|
that.couponType = 2
|
that.friendStatus = friendCouponStatus //1+1券包好友券分享状态：WAIT_SHARE/RECEIVED/USED/EXPIRED
|
that.selfStatus = selfCoupon.status //1+1券包好友券分享状态： - 0：未使用，- 1：已使用， - 2：已失效
|
} else if (shareUnavailable == false && selfCoupon) {
|
that.couponType = 3
|
that.selfStatus = selfCoupon.status
|
}
|
if (selfCoupon) {
|
that.activityId = selfCoupon.activityId
|
}
|
}
|
that.productShareSwitch = productShareSwitch
|
that.$refs.personalAndShareCouponRef.show(that.info, that.friendCouponShareToken)
|
console.log("couponPackVisit res.data::", that.info.couponPackStatus)
|
} else if (autoIssueOnZoneView == 0) {
|
that.stockEmpty = false
|
that.couponDisplayShow = displayLayout != 'NONE'
|
if (that.couponDisplayShow) {
|
that.homeTop = that.getHomeTop(0.6)
|
}
|
if (displayLayout == 'SINGLE_CENTER') {
|
that.couponType = 3
|
that.centerCoupon = displayCoupons[0]
|
} else if (displayLayout == 'DOUBLE_SIDE') {
|
that.couponType = 2
|
displayCoupons.forEach(item => {
|
if (item.position == 'LEFT') {
|
that.leftCoupon = item
|
} else if (item.position == 'RIGHT') {
|
that.rightCoupon = item
|
}
|
})
|
}
|
}
|
|
},
|
showOtherPop() {
|
// this.hasSign()
|
// this.couponPackVisit()
|
if (!this.hasNewPop) {
|
this.hasNewPop = true
|
this.$refs.popNewuserRef.show()
|
}
|
},
|
// 预取抽奖banner真实宽高，计算出高度后再渲染，避免加载前被组件默认高度(225px)撑大
|
setLotteryBannerSize(info) {
|
let that = this
|
that.lotteryBannerHeight = ''
|
if (!info || !info.isLottery || !info.lotteryBanner) return
|
uni.getImageInfo({
|
src: info.lotteryBanner,
|
success: (img) => {
|
if (img.width > 0 && img.height > 0) {
|
that.lotteryBannerHeight = (690 * img.height / img.width).toFixed(2) + 'rpx'
|
}
|
},
|
fail: () => { }
|
})
|
},
|
getZoneDetail: function () {
|
let that = this;
|
let belong = this.$store.getters.belong;
|
const params = that.getCouponShareParams()
|
console.log('专区详情入参：：', params)
|
getZoneDetail(that.id, params).then(res => {
|
that.info = res.data;
|
<<<<<<< Updated upstream
|
=======
|
//that.info.zoneType=8;
|
that.setLotteryBannerSize(res.data);
|
>>>>>>> Stashed changes
|
that.updateZoneShareMenu();
|
if (res.data.zoneType == 6) {
|
that.setYueyangZone()
|
} else {
|
if (that.info.zoneType == 7) {
|
that.resetPartitionTabs(that.info.partitionTabList)
|
that.homeTop = that.getHomeTop(0.4)
|
}
|
that.expireTime = [];
|
that.countdownToken++;
|
that.where.page = 1;
|
that.getGoodList()
|
that.validAlert(res.data)
|
}
|
that.productShareSwitch = res.data.shareSwitch
|
that.$nextTick(() => {
|
that.hasSign()
|
that.couponPackVisit()
|
})
|
}).catch(err => {
|
that.$set(that.info, 'shareSwitch', 0);
|
that.updateZoneShareMenu();
|
let errTitle = '请求专题数据失败'
|
if (err.message) {
|
errTitle = err.message
|
if (err.message.includes('未登录')) {
|
errTitle = '您还未登录，或登录已过期，请重新登录哦！'
|
}
|
uni.showToast({
|
title: errTitle,
|
icon: 'none'
|
})
|
}
|
});
|
},
|
countdownTimer(expireTime, type, token) {
|
if (!expireTime) return
|
if (token !== undefined && token !== this.countdownToken) return
|
let that = this;
|
// 结束时间的时间戳（需传入一个有效的日期对象或时间戳）
|
const endTimestamp = new Date(expireTime).getTime();
|
// 当前时间的时间戳
|
const nowTimestamp = Date.now();
|
// 计算时间差（毫秒）
|
let diff = endTimestamp - nowTimestamp;
|
// 若时间差为负，说明已结束，返回0
|
if (type == 'end') {
|
if (diff <= 0) {
|
this.expireTime = []
|
return
|
} else { }
|
} else if (type == 'start') {
|
if (diff <= 0) {
|
this.expireTime = []
|
const expireTime2 = that.info.expireTime
|
if (expireTime2) {
|
const expireTimetamp = new Date(expireTime2.split('-').join('/')).getTime();
|
if (expireTimetamp < nowTimestamp) {
|
return
|
}
|
this.countdownTimer(expireTime2.split('-').join('/'), 'end', token)
|
this.startOrEnd = "后结束"
|
}
|
return
|
}
|
}
|
const pad = num => (num < 10 ? '0' + num : String(num))
|
const res = []
|
const days = Math.floor(diff / (1000 * 60 * 60 * 24))
|
diff %= (1000 * 60 * 60 * 24)
|
// 转换为小时、分钟、秒
|
const hours = Math.floor(diff / (1000 * 60 * 60));
|
diff %= (1000 * 60 * 60); // 剩余毫秒数
|
const minutes = Math.floor(diff / (1000 * 60));
|
diff %= (1000 * 60); // 剩余毫秒数
|
const seconds = Math.floor(diff / 1000);
|
// 天数为 0 时不展示，时/分/秒始终展示（补 0），保证倒计时长度稳定
|
if (days > 0) {
|
res.push({
|
digits: pad(days).split(''),
|
unit: '日'
|
})
|
}
|
res.push({
|
digits: pad(hours).split(''),
|
unit: '时'
|
})
|
res.push({
|
digits: pad(minutes).split(''),
|
unit: '分'
|
})
|
res.push({
|
digits: pad(seconds).split(''),
|
unit: '秒'
|
})
|
this.expireTime = res
|
if (this.isPageShow) {
|
setTimeout(() => {
|
that.countdownTimer(expireTime, type, token)
|
}, 1000)
|
}
|
},
|
//查找产品
|
getGoodList: function () {
|
let that = this;
|
if (that.loadend) return;
|
if (that.loading) return;
|
that.loading = true;
|
that.loadTitle = '';
|
uni.showLoading();
|
if (that.info.zoneType == 7) {
|
let ids = []
|
const partitionTabList = that.info.partitionTabList
|
partitionTabList.forEach(item => {
|
ids.push(...item.productIds)
|
})
|
getProductslist({
|
ids: ids.join(','),
|
page: 1,
|
limit: 100,
|
zoneId: that.info.id
|
}).then(res => {
|
let list = res.data.list;
|
list.forEach(item => {
|
that.$set(that.partitionProject, item.id, item)
|
})
|
that.loading = false
|
uni.hideLoading()
|
that.$nextTick(() => {
|
that.scheduleSetAllScrollTop(() => {
|
that.updateCurrentIndexByScroll(that.lastScrollTop)
|
})
|
})
|
}).catch(err => {
|
that.loading = false
|
uni.hideLoading()
|
});
|
return
|
}
|
let where = JSON.parse(JSON.stringify(that.where))
|
if (that.toolbarArr[that.activeTabIndex] && that.toolbarArr[that.activeTabIndex].sort) {
|
where[that.toolbarArr[that.activeTabIndex]['value']] = that.toolbarArr[that.activeTabIndex][
|
'sort'
|
];
|
}
|
where.zoneId = that.info.cateId;
|
where.zoneId = that.info.id;
|
getProductslist(where).then(res => {
|
let list = res.data.list;
|
if (res.data.page < res.data.totalPage) {
|
that.loadend = false;
|
} else {
|
that.loadend = true;
|
}
|
that.loading = false;
|
that.loadTitle = that.loadend ? '已全部加载' : '加载更多';
|
console.log('数组------' + that.goodList.length)
|
if (res.data.page == 1) {
|
that.$set(that, 'goodList', list);
|
} else {
|
that.$set(that, 'goodList', that.goodList.concat(list));
|
}
|
that.$set(that.where, 'page', that.where.page + 1);
|
uni.hideLoading()
|
}).catch(err => {
|
that.loading = false;
|
that.loadTitle = '加载更多';
|
uni.hideLoading()
|
});
|
},
|
},
|
}
|
</script>
|
|
<style>
|
page {
|
height: 100%;
|
background-color: #f5f5f5;
|
position: relative;
|
}
|
</style>
|
<style scoped>
|
.lottery_banner {
|
margin: 15rpx auto;
|
width: 690rpx;
|
text-align: center;
|
}
|
|
.lottery_bannerImg {
|
width: 690rpx;
|
}
|
|
.tag-wrap-container {
|
width: 100%;
|
position: -webkit-sticky;
|
position: sticky;
|
top: -1rpx;
|
left: 0;
|
background-color: #ffffff;
|
z-index: 2;
|
}
|
|
.tag-wrap {
|
display: flex;
|
align-items: center;
|
padding: 16rpx 30rpx 16rpx 0;
|
width: 690rpx;
|
margin: 0 auto;
|
}
|
|
.tag-scroll {
|
flex: 1;
|
white-space: nowrap;
|
}
|
|
.tag-img-container {
|
width: 690rpx;
|
margin: 0 auto;
|
}
|
|
.tag-img {
|
width: 100%;
|
}
|
|
.tag-list {
|
display: flex;
|
gap: 20rpx;
|
}
|
|
.tag-item {
|
padding: 16rpx 32rpx;
|
background: #f5f5f5;
|
border-radius: 8rpx;
|
/* margin-right: 20rpx; */
|
font-size: 24rpx;
|
}
|
|
/* 选中样式：蓝色文字+浅蓝背景（和效果图一致） */
|
.tag-active {
|
background: #e6f2ff;
|
color: #0066ff;
|
}
|
|
.more-btn {
|
padding: 16rpx;
|
font-size: 36rpx;
|
color: #0066ff;
|
}
|
|
.more-img {
|
height: 24rpx;
|
width: 24rpx;
|
}
|
|
.more-img.rotate {
|
transform: rotate(180deg);
|
}
|
|
.tag-more {
|
padding-bottom: 20rpx;
|
position: absolute;
|
z-index: 1;
|
background: #fff;
|
width: 100%;
|
}
|
|
.tag-row {
|
display: flex;
|
flex-wrap: nowrap;
|
gap: 24rpx;
|
margin-bottom: 24rpx;
|
width: 690rpx;
|
margin: 0 auto;
|
}
|
|
.tag-more .tag-row {
|
flex-wrap: wrap;
|
}
|
</style>
|
<style scoped lang="less">
|
.personal_share_coupon {
|
display: flex;
|
margin-top: 20rpx;
|
|
.coupon_item_line {
|
width: 100%;
|
position: relative;
|
margin-bottom: -30rpx;
|
|
&.grey {
|
filter: grayscale(1);
|
}
|
|
.grey {
|
opacity: 0.5;
|
}
|
}
|
|
.coupon_item {
|
width: 50%;
|
position: relative;
|
|
&.grey {
|
filter: grayscale(1);
|
}
|
|
.grey {
|
opacity: 0.5;
|
}
|
}
|
|
.share_coupon_btn {
|
padding: 0;
|
margin: 0;
|
border: none;
|
background: transparent;
|
line-height: normal;
|
text-align: left;
|
overflow: visible;
|
|
&::after {
|
border: none;
|
}
|
}
|
|
.btn_share {
|
position: absolute;
|
right: 20rpx;
|
height: 40rpx;
|
z-index: 0;
|
width: 151rpx;
|
top: 14rpx;
|
}
|
|
.txt {
|
position: absolute;
|
right: 34rpx;
|
font-size: 16rpx;
|
top: 18rpx;
|
color: #ffffff;
|
letter-spacing: 3.5rpx;
|
z-index: 1;
|
}
|
|
.bg_item {
|
width: 100%;
|
position: relative;
|
}
|
}
|
|
.coupon_rule {
|
position: fixed;
|
right: 0;
|
top: 400rpx;
|
z-index: 11;
|
width: 50rpx;
|
}
|
</style>
|
<style scoped lang="scss">
|
.header {
|
position: fixed;
|
top: 0;
|
z-index: 3;
|
width: 100%;
|
background-color: #F5F5F5;
|
// padding: 28rpx 0;
|
text-align: center;
|
padding-top: 88rpx;
|
font-size: 30rpx;
|
line-height: 64rpx;
|
font-weight: bold;
|
padding-bottom: 30rpx;
|
overflow: hidden;
|
|
.header_text {
|
position: relative;
|
}
|
|
&.yueyang {
|
background-color: transparent !important;
|
}
|
}
|
|
.home {
|
left: 15rpx;
|
position: absolute;
|
top: 50%;
|
transform: translate(0, -50%);
|
}
|
|
.detail-btn {
|
border: 2rpx solid #fff;
|
border-top-left-radius: 20rpx;
|
border-bottom-left-radius: 20rpx;
|
padding: 10rpx;
|
background-color: #daf2b2;
|
color: #1e984f;
|
width: 50rpx;
|
position: fixed;
|
top: 200rpx;
|
right: 0rpx;
|
line-height: 1rem;
|
z-index: 99;
|
}
|
|
.head_img {
|
width: 750rpx;
|
height: 422rpx;
|
|
image {
|
width: 750rpx;
|
height: 422rpx;
|
}
|
}
|
|
.toolbarList {
|
width: 750rpx;
|
position: -webkit-sticky;
|
position: sticky;
|
top: -1rpx;
|
left: 0;
|
background-color: #ffffff;
|
z-index: 2;
|
|
.toolbarList_box {
|
display: flex;
|
flex-direction: row;
|
justify-content: space-around;
|
font-size: 27rpx;
|
line-height: 108rpx;
|
color: #979797;
|
}
|
|
.toolbar_item {
|
&.active {
|
color: #016DCC;
|
}
|
|
.sortIcon,
|
.filterIcon {
|
display: inline-block;
|
margin-left: 10rpx;
|
width: 18rpx;
|
height: 18rpx;
|
background: url(https://ossacmall.bluedeer.com.cn/app/static/images/i_sort.png) center center/contain no-repeat;
|
|
&.down {
|
transform: rotate(180deg);
|
}
|
}
|
|
.filterIcon {
|
background-image: url(https://ossacmall.bluedeer.com.cn/app/static/images/i_filter.png)
|
}
|
|
&.active .sortIcon {
|
background-image: url(https://ossacmall.bluedeer.com.cn/app/static/images/i_sortActive.png)
|
}
|
}
|
}
|
|
.goodList {
|
.list {
|
width: 690rpx;
|
margin: 0 auto;
|
display: flex;
|
flex-wrap: wrap;
|
padding-top: 15rpx;
|
justify-content: space-between;
|
}
|
}
|
|
.loadingTips {
|
width: max-content;
|
padding: 3vw 0 3vw 60rpx;
|
font-size: 27rpx;
|
line-height: 2em;
|
margin: 0 auto;
|
color: #DDDDDD;
|
background: url('https://ossacmall.bluedeer.com.cn/app/static/images/h_loading.png') left center/41rpx auto no-repeat;
|
}
|
|
.menuList {
|
position: fixed;
|
left: 0;
|
top: 0;
|
background: rgba(0, 0, 0, .7);
|
width: 100%;
|
height: 100%;
|
z-index: 3;
|
|
.menuList_box {
|
width: 100%;
|
position: absolute;
|
left: 0;
|
bottom: 0;
|
background-color: #f5f5f5;
|
border-radius: 19rpx;
|
box-sizing: border-box;
|
padding: 45rpx 30rpx 75rpx 30rpx;
|
|
.menuList_wrapper {
|
height: 70vh;
|
overflow-y: scroll;
|
}
|
|
.menuTitle {
|
font-size: 31rpx;
|
line-height: 42rpx;
|
font-weight: bold;
|
color: #000000;
|
text-align: left;
|
margin-bottom: 20rpx;
|
}
|
|
.subMenu_box {
|
display: flex;
|
flex-wrap: wrap;
|
flex-direction: row;
|
margin-bottom: 20rpx;
|
}
|
|
.subMenu_item {
|
width: 221rpx;
|
height: 53rpx;
|
background: #FFFFFF;
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
font-size: 27rpx;
|
line-height: 53rpx;
|
color: #979797;
|
text-align: center;
|
margin-right: 10rpx;
|
margin-bottom: 10rpx;
|
|
&.active {
|
background: #04C763;
|
color: #ffffff;
|
}
|
|
:nth-child(3n+2) {
|
margin-right: 0;
|
}
|
}
|
|
.firstMenu .active {
|
color: #000000;
|
background: #FFE20E;
|
}
|
|
.menu_btnBox {
|
display: flex;
|
padding-top: 20rpx;
|
}
|
|
.menu_btn {
|
width: 331rpx;
|
line-height: 76rpx;
|
background: #016DCC;
|
font-size: 27rpx;
|
color: #ffffff;
|
border-radius: 11rpx 11rpx 11rpx 11rpx;
|
text-align: center;
|
|
&.clear_btn {
|
color: #000000;
|
background: #D9D9D9;
|
margin-right: 18rpx;
|
}
|
}
|
|
}
|
|
.menuList_close {
|
width: 60rpx;
|
height: 60rpx;
|
position: absolute;
|
right: 10rpx;
|
top: 10rpx;
|
background: url('https://ossacmall.bluedeer.com.cn/app/static/images/i_close.png') center center/25rpx auto no-repeat;
|
}
|
}
|
|
.noData {
|
position: fixed;
|
left: 0;
|
top: 0;
|
width: 100%;
|
height: 100%;
|
z-index: 1111;
|
background-color: rgba(0, 0, 0, .5);
|
|
.box {
|
width: 410rpx;
|
padding: 75rpx 30rpx 45rpx 30rpx;
|
background-color: #FFFFFF;
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%, -50%);
|
border-radius: 14rpx;
|
|
text-align: center;
|
font-size: 27rpx;
|
line-height: 50rpx;
|
color: #979797;
|
margin: 0 auto;
|
margin-top: 4vw;
|
padding-top: 66rpx;
|
|
&::before {
|
content: '';
|
width: 100%;
|
position: absolute;
|
height: 100rpx;
|
background: url("https://ossacmall.bluedeer.com.cn/app/static/images/zone_fail.png") center center/ auto 80rpx no-repeat;
|
top: -30rpx;
|
left: 0;
|
}
|
|
.title {
|
font-weight: bold;
|
font-size: 30rpx;
|
}
|
}
|
|
}
|
|
.expireTime {
|
padding: 15rpx;
|
padding-left: 30rpx;
|
color: #979797;
|
font-size: 26rpx;
|
|
.num {
|
display: inline-block;
|
color: #000000;
|
background: #FFE20E;
|
padding: 0 6rpx;
|
margin: 0 4rpx;
|
vertical-align: middle;
|
}
|
|
/* 每个数字固定宽度，避免倒计时跳动时宽度忽长忽短 */
|
.digit {
|
display: inline-block;
|
width: 19rpx;
|
text-align: center;
|
}
|
}
|
</style>
|
