You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

4436 lines
116 KiB

<template>
<view class="page1" :class="{'is-sticky': lastScrollTop>stickyTrigger}">
<view class="swiper-container">
<view class="swiper-page" v-show="currentIndex == 0">
<view style="position: relative;height: 545rpx;">
<view class="daimai-sticky-cover" :style="{'height': (navBarHeight + 220) + 'px'}"
v-if="lastScrollTop>stickyTrigger"></view>
<view class="campus-hero campus-hero--ad">
<swiper class="swiper hero-bg-swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
:interval="interval" :duration="duration">
<swiper-item v-for="(item,index) in adList" :key="index"
@tap="goAdPage(item)">
<img class="hero-bg-img" :src="item.adDisplayImage" alt="" />
</swiper-item>
</swiper>
<view class="hero-bg-mask"></view>
<view class="hero-glow hero-glow-a"></view>
<view class="hero-glow hero-glow-b"></view>
<view class="hero-particle hero-particle-a"></view>
<view class="hero-particle hero-particle-b"></view>
<view class="hero-particle hero-particle-c"></view>
</view>
<view class="order-notice-wrap">
<swiper class="swiper" vertical circular :autoplay="orderLists.length <= 0" v-if="orderLists.length <= 0"
:interval="onlineWorkerInterval" :duration="onlineWorkerDuration"
style="height: 150rpx;margin-top: -100rpx;">
<swiper-item v-for="(item,index) in gaoxiaoList" :key="index">
<view class="order-msg-box life-status-row">
<view class="life-ip order-msg-left">
<img src="/static/images/img/songshu.png" alt="" />
</view>
<view class="life-status-main order-msg-center">
<view class="life-status-title">
{{item.title}}
</view>
<view class="life-progress">
<view class="life-progress-bar" style="width: 56%;"></view>
</view>
<view class="life-status-desc">{{item.content}} · 附近宿舍在拼</view>
</view>
<view class="life-action order-msg-right" @tap.stop="goDetail('2')">
去拼
</view>
</view>
</swiper-item>
</swiper>
<swiper class="swiper" vertical circular :autoplay="orderLists.length > 0" v-else
:interval="onlineWorkerInterval" :duration="onlineWorkerDuration"
style="height: 150rpx;margin-top: -100rpx;">
<swiper-item v-if="orderLists.length > 0" v-for="(item,index) in orderLists" :key="index"
@tap="goOrderDetail(item)">
<view class="order-msg-box life-status-row">
<view class="life-ip order-msg-left">
<img src="/static/images/img/songshu.png" alt="" />
</view>
<view class="life-status-main order-msg-center">
<view class="life-status-title">
<text v-if="item.status == 0">订单进度 · 待支付</text>
<text v-if="item.status == 2">跑腿状态 · 等待接单</text>
<text v-if="item.status == 10">拼团订单 · 待成团</text>
<text v-if="item.status == 3 && item.deliveryType == 1">外卖配送 · 骑手已接单</text>
<text v-if="item.status == 3 && item.deliveryType == 2">到店消费 · 等你核销</text>
<text v-if="item.status == 4 && item.deliveryType == 1">外卖配送 · 已取货</text>
<text v-if="item.status == 5">校园任务完成啦</text>
<text v-if="item.status == 7">退款状态 · 等商家确认</text>
<text v-if="item.status == 6">订单已取消</text>
<text v-if="item.status == 8">订单已退款</text>
<text v-if="item.status == 11">售后中 · 正在处理</text>
<text v-if="item.status == 12">售后已完成</text>
</view>
<view class="life-progress">
<view class="life-progress-bar" :style="{'width': item.status == 10 ? '68%' : (item.status == 0 ? '38%' : '82%')}"></view>
</view>
<view class="life-status-desc"
v-if="item.deliveryType == 1 && (item.status == 3 || item.status == 4) && item.deliveryInfo != null">
预计 {{item.deliveryInfo.mustFinishTime | formatHourMinute }} 送达
</view>
<view class="life-status-desc" v-else>点开看看,订单的最新状态</view>
</view>
<view class="life-action order-msg-right">
查看
</view>
</view>
</swiper-item>
</swiper>
</view>
<view class="menu-box">
<view class="menu-list world-food" @tap="goDetail('2')" style="position: relative;">
<view class="world-light"></view>
<view class="world-dot world-dot-b"></view>
<img v-if="homeMenuIconImages.food" :src="homeMenuIconImages.food"
alt="" />
<!-- <img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/1a02b40d853a4cfdb062fff44ec49e6a.png"
alt="" style="position: absolute;top: -10rpx;right: 0;width: 78rpx;height: 32rpx;"> -->
<view class="menu-name">饭团星球</view>
<view class="menu-desc">食堂搭子</view>
</view>
<view class="menu-list world-store" @tap="goDetail('3')">
<view class="world-light"></view>
<img v-if="homeMenuIconImages.store" :src="homeMenuIconImages.store"
alt="" />
<view class="menu-name">团团星球</view>
<view class="menu-desc">周边娱乐</view>
</view>
<view class="menu-list world-run" @tap="goDetail('1')">
<view class="world-light"></view>
<view class="world-dot world-dot-a"></view>
<img v-if="homeMenuIconImages.run" :src="homeMenuIconImages.run"
alt="" />
<view class="menu-name">跑腿星球</view>
<view class="menu-desc">小事接力</view>
</view>
<view class="menu-list world-luck" @tap="goDetail('4')">
<view class="world-light"></view>
<view class="world-dot world-dot-c"></view>
<view class="planet-reminder-badge planet-win-badge" v-if="planetHasReminder">中奖啦</view>
<img v-if="homeMenuIconImages.luck" :src="homeMenuIconImages.luck"
alt="" />
<view class="menu-name">白嫖星球</view>
<view class="menu-desc">抽点惊喜</view>
</view>
<view class="menu-list world-fish" @tap="goDetail('5')">
<view class="world-light"></view>
<view class="planet-reminder-badge ie-badge" v-if="ieHasReminder">
<text v-if="ieUnreadCount > 0">{{ieUnreadCount > 99 ? '99+' : ieUnreadCount}}</text>
</view>
<img v-if="homeMenuIconImages.fish" :src="homeMenuIconImages.fish"
alt="" />
<view class="menu-name">i/e星球</view>
<view class="menu-desc">思想漂流</view>
</view>
</view>
<view class="like-box">
<view class="like-content-box">
<view class="brand-memory-strip">
<text>省钱榜 Top1</text>
<text>爆款指数 ↑</text>
<text>拼团王在线</text>
</view>
<view class="seckill-entry seckill-entry--in-card" @tap="goSeckillGroup">
<view class="heat-dot heat-dot-a"></view>
<view class="heat-dot heat-dot-b"></view>
<view class="seckill-entry-light"></view>
<view class="seckill-entry-info" style="padding-left: 20rpx;">
<view class="seckill-entry-title">秒杀团</view>
</view>
<view class="seckill-entry-btn">抢</view>
</view>
<view class="group-flat-row">
<view class="flat-card" v-if="item.position == 'home_center_left_top' "
v-for="(item,index) in mallAds" :key="index" @tap="goAdPage(item)">
<view class="flat-card-img">
<img :src="item.adDisplayImage" alt="">
<view class="flat-card-tag">🔥 正在拼</view>
</view>
<view class="flat-card-name">{{item.title}}</view>
<view class="flat-card-price">¥{{item.productList[0].groupPrice}}</view>
<view class="flat-card-foot">
<text>{{item.productList[0].groupMembers}}人团</text>
<view class="flat-card-btn">去拼</view>
</view>
</view>
<view class="flat-card" v-if="item.position == 'home_center_left_bottom' "
v-for="(item,index) in mallAds" :key="index" @tap="goAdPage(item)">
<view class="flat-card-img">
<img :src="item.adDisplayImage" alt="">
<view class="flat-card-tag">🔥 正在拼</view>
</view>
<view class="flat-card-name">{{item.title}}</view>
<view class="flat-card-price">¥{{item.productList[0].groupPrice}}</view>
<view class="flat-card-foot">
<text>{{item.productList[0].groupMembers}}人团</text>
<view class="flat-card-btn">去拼</view>
</view>
</view>
<view class="flat-card" v-if="item.position == 'home_center_right_top' "
v-for="(item,index) in mallAds" :key="index" @tap="goAdPage(item)">
<view class="flat-card-img">
<img :src="item.adDisplayImage" alt="">
<view class="flat-card-tag">🔥 正在拼</view>
</view>
<view class="flat-card-name">{{item.title}}</view>
<view class="flat-card-price">¥{{item.productList[0].groupPrice}}</view>
<view class="flat-card-foot">
<text>{{item.productList[0].groupMembers}}人团</text>
<view class="flat-card-btn">去拼</view>
</view>
</view>
<view class="flat-card" v-if="item.position == 'home_center_right_bottom' "
v-for="(item,index) in mallAds" :key="index" @tap="goAdPage(item)">
<view class="flat-card-img">
<img :src="item.adDisplayImage" alt="">
<view class="flat-card-tag">🔥 正在拼</view>
</view>
<view class="flat-card-name">{{item.title}}</view>
<view class="flat-card-price">¥{{item.productList[0].groupPrice}}</view>
<view class="flat-card-foot">
<text>{{item.productList[0].groupMembers}}人团</text>
<view class="flat-card-btn">去拼</view>
</view>
</view>
</view>
</view>
</view>
<view class="daimai-box" style="padding-bottom:180rpx;">
<view class="earn-guide">
<view class="earn-guide-light"></view>
<view class="earn-guide-icon">🛵</view>
<text class="earn-guide-main">顺路送几单,挣点零花钱</text>
<text class="earn-guide-tag">接直接购买指派单额外有佣金</text>
<!-- <view class="earn-guide-arrow">›</view> -->
</view>
<view class="daimai-tab" id="menuList" :class="{'daimai-tab--sticky': lastScrollTop>stickyTrigger}"
:style="{'top': (navBarHeight+46) + 'px'}">
<view class="daimai-tab-item" :class="{'active': checked == 'waimai'}"
@tap="checkTab1('waimai')">
<view class="daimai-tab-glow"></view>
<view class="daimai-tab-icon">饭</view>
<view class="daimai-tab-info">
<text class="daimai-tab-label">外卖</text>
<text class="daimai-tab-count">{{waimaiCount}}</text>
</view>
</view>
<view class="daimai-tab-item" :class="{'active': checked == 'kuaidi'}"
@tap="checkTab1('kuaidi')">
<view class="daimai-tab-glow"></view>
<view class="daimai-tab-icon">递</view>
<view class="daimai-tab-info">
<text class="daimai-tab-label">快递</text>
<text class="daimai-tab-count">{{kuaidiCount}}</text>
</view>
</view>
<view class="daimai-tab-item" :class="{'active': checked == 'paotui'}"
@tap="checkTab1('paotui')">
<view class="daimai-tab-glow"></view>
<view class="daimai-tab-icon">跑</view>
<view class="daimai-tab-info">
<text class="daimai-tab-label">跑腿</text>
<text class="daimai-tab-count">{{paotuiCount}}</text>
</view>
</view>
<view class="daimai-tab-item" :class="{'active': checked == 'zhipai'}"
@tap="checkTab1('zhipai')" v-if="worker != null">
<view class="daimai-tab-glow"></view>
<view class="daimai-tab-icon">派</view>
<view class="daimai-tab-info">
<text class="daimai-tab-label">指派单</text>
<text class="daimai-tab-count">{{zhipaiCount}}</text>
</view>
</view>
</view>
<view class="title-sort" v-if="(lastScrollTop>300 || getAreaData.id != undefined || putAreaData.id != undefined || checkYongjin)" :class="{'title-sort--sticky': lastScrollTop>stickyTrigger}"
:style="{'top': (navBarHeight+90) + 'px'}">
<view class="sort-member" style="position: relative;">
<view @tap="checkAdd">
取餐地址 <text style="font-size: 20rpx;">▼</text>
</view>
<view class="sort-value" v-if="isgetArea">
<view class="sort-value1" v-for="(item,index) in getshopArea" :key="index"
@tap="searchOrder('getarea',item)">{{item.title}}</view>
</view>
</view>
<view class="sort-member" style="position: relative;">
<view @tap="checkAdd1">
送餐地址 <text style="font-size: 20rpx;">▼</text>
</view>
<view class="sort-value" v-if="isputArea">
<view class="sort-value1" v-for="(item,index) in putshopArea" :key="index"
@tap="searchOrder('putarea',item)">{{item.title}}</view>
</view>
</view>
<view @tap="searchOrder('yongjin')" class="sort-member" style="border-radius: 60rpx"
:style="{'background':checkYongjin==true?'linear-gradient(135deg, rgba(255, 247, 215, 0.95), rgba(166, 255, 234, 0.72))':'rgba(248, 255, 250, 0.86)','border':checkYongjin==true?'1px solid rgba(255, 188, 119, 0.72)':'1px solid rgba(166, 255, 234, 0.46)'}">
佣金
</view>
<view @tap="searchOrder('shuaxin')" class="sort-member" hover-class="box-hover" style="border-radius: 60rpx">
刷新
</view>
</view>
<view class="sort-text"
v-if="getAreaData.id != undefined || putAreaData.id != undefined || checkYongjin"
:style="{'top': (navBarHeight+140) + 'px'}">
<view class="sort-text-inner">
<view @tap="searchOrder('delgetarea')" class="guize1-qusong"
v-if="getAreaData.id != undefined">
<view class="qusong1">
</view>
<view class="qusong2">
{{getAreaData.title}}
</view>
</view>
<view @tap="searchOrder('delputarea')" class="guize1-qusong"
v-if="putAreaData.id != undefined">
<view class="qusong1">
</view>
<view class="qusong2" style="background: rgba(209, 206, 255, 1);">
{{putAreaData.title}}
</view>
</view>
<view @tap="searchOrder('delyongjin')" class="guize1-qusong" v-if="checkYongjin">
<view class="qusong1">
</view>
<view class="qusong2 commission-chip">
佣金优先
</view>
</view>
<view @tap="clearCheck"
v-if="getAreaData.id != undefined || putAreaData.id != undefined || checkYongjin"
class="clear-filter">
清空
</view>
</view>
</view>
<view class="delivery-list-wrap">
<view class="empty-delivery" v-if="deliveryItem.length <= 0">
<view class="empty-delivery-icon">校园</view>
<view class="empty-delivery-title">暂时没有可抢订单</view>
<view class="empty-delivery-desc">可以切换分类或调整筛选条件,新的校园订单会在这里出现</view>
</view>
<view class="list-1" v-for="(item,index) in deliveryItem" :key="item.deliveryKey"
@tap="productDetail(item)">
<view class="daoda-time-row">
<view class="appointment-delivery-tag" v-if="item.appointmentDelivery == 1">
预约配送
</view>
<view class="daoda-time">
送达时间:{{item.mustFinishTime != null ? item.mustFinishTime : '' | formatHourMinute }}
</view>
</view>
<view class="order-page">
<view class="maotou" v-if="item.deliveryType == 1 && !item.workerId">
¥{{(item.deliveryFee + item.deliveryFeeMarketplace).toFixed(2)}}
</view>
<view class="maotou1" v-if="item.deliveryType == 2">
¥{{(item.deliveryFee + item.deliveryFeeMarketplace).toFixed(2)}}
</view>
<view class="maotou2" v-if="item.deliveryType == 3">
¥{{(item.deliveryFee + item.deliveryFeeMarketplace).toFixed(2)}}
</view>
<view class="maotou3" v-if="item.workerId">
¥{{(item.deliveryFee + item.deliveryFeeMarketplace).toFixed(2)}}
</view>
<view class="shangjia">
<text
style="font-weight: 700;">{{item.shopName != null ? item.shopName : ''}}</text>
<view v-if="item.deliveryType == 1"
style="width: 32rpx;height: 30rpx;font-weight: 700;font-size: 20rpx;color: #fff;text-align: center;background: #00BFFF;border-radius: 10rpx;margin: 20rpx 0 0 10rpx;line-height: 30rpx;">
</view>
<view v-else style="font-weight: 700;padding-left: 30rpx;">
共{{item.allCount ? item.allCount : 0}}件
</view>
</view>
<view class="shangpin">
<view class="qu-song">
<view class="qu-box">
<view class='qu-tu'>
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/1f77398a73454a6595c12a3c18731599.png"
alt="" />
</view>
<view class="qu-text">
<view class="qu-left">
{{item.shopAddress != null ? item.shopAddress : ''}}
</view>
<view class="qu-right">
<img @tap.stop="makeCall(item.shopPhone)" v-if="checked != 'kuaidi'"
src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/869a7af6a1c24bf3a0d523c4a18b55c6.png"
alt="" style="width: 55rpx;height: 55rpx;" />
</view>
</view>
</view>
<view class="qu-box" style="margin-top:15rpx;">
<view class='qu-tu'>
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/d0764fb4138747769538cf1cafa3b017.png"
alt="" />
</view>
<view class="qu-text">
<view class="qu-left">
{{item.receiverAddress != null ? item.receiverAddress : ''}}
</view>
<view class="qu-right" v-if="shouldShowReceiverPhoneIcon(item)">
<img @tap.stop="makeCall(item.receiverPhone)"
src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/869a7af6a1c24bf3a0d523c4a18b55c6.png"
alt="" style="width: 55rpx;height: 55rpx;" />
</view>
</view>
</view>
</view>
</view>
</view>
<view class="yongjin" v-if="(item.isBig !=null && item.isBig == 1) || item.deliveryFeeMarketplace > 0">
<view style="width: 50%;color: #777;padding-left: 4%;display: flex;">
<view class="chaoda" v-if="item.isBig !=null && item.isBig == 1">
超大/超重
</view>
</view>
<view style="font-weight: 700;width: 50%;text-align: right;">
<text style="color: #777;font-size: 22rpx;"
v-if="item.deliveryFeeMarketplace > 0">(包含¥{{item.deliveryFeeMarketplace}}平台奖励佣金)</text>
</view>
</view>
<view class="delivery-time-warning" v-if="isNearMustFinishTime(item)">
<view class="delivery-time-warning-text">
{{getMustFinishWarningText(item)}}
</view>
<img v-if="item.receiverPhone" @tap.stop="makeCall(item.receiverPhone)"
src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/869a7af6a1c24bf3a0d523c4a18b55c6.png"
alt="" class="delivery-time-warning-phone" />
</view>
<view class="beizhu" v-if="item.remark != null && item.remark != ''">
备注:{{item.remark}}
</view>
<view class="dispatch-action-box" :class="{'dispatch-action-box--single': checked != 'zhipai'}">
<view class="qiangdan-btn" :id="'swipe-order-' + item.id"
:class="{'qiangdan-btn--swiping': swipeOrder.id === item.id && swipeOrder.index === index, 'qiangdan-btn--low-perf': swipeOrderLowPerf}"
@tap.stop="noop"
@touchstart.stop="startSwipeOrder($event,item,index)"
@touchmove.stop.prevent="moveSwipeOrder"
@touchend.stop="endSwipeOrder(item,index)"
@touchcancel.stop="resetSwipeOrder">
<view class="qiangdan-progress"
:style="swipeOrder.id === item.id && swipeOrder.index === index ? swipeOrder.progressStyle : swipeOrderDefaultStyle.progress"></view>
<view class="qiangdan-text">
<text v-if="swipeOrder.id !== item.id || swipeOrder.index !== index || swipeOrder.progress <= 0">向右滑动抢单</text>
<text v-else-if="swipeOrder.progress < 92">继续滑动确认</text>
<text v-else>松手接单</text>
</view>
<view class="qiangdan-thumb"
:style="swipeOrder.id === item.id && swipeOrder.index === index ? swipeOrder.thumbStyle : swipeOrderDefaultStyle.thumb">
<text>接</text>
</view>
</view>
<view class="reject-order-btn" v-if="checked == 'zhipai'"
:class="{'reject-order-btn--disabled': rejectOrderSubmittingMap[item.id]}"
@tap.stop="rejectOrder(item,index)">
<text>{{rejectOrderSubmittingMap[item.id] ? '拒绝中...' : '拒绝接单'}}</text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="swiper-page" v-show="currentIndex == 1">
<de-livery ref="deLiveryPage" @tabbar-visible-change="setTabBarVisible"></de-livery>
</view>
<view class="swiper-page" v-show="currentIndex == 3">
<post-list ref="postListPage"></post-list>
</view>
<view class="swiper-page" v-show="currentIndex == 4">
<my-center ref="myCenterPage"></my-center>
</view>
</view>
<!-- 弹出区域选择 -->
<uni-popup ref="areaPopup" class="home-popup-layer" :is-mask-click="false" background-color="transparent">
<view class="campus-area-popup">
<view class="area-popup-glow area-popup-glow-a"></view>
<view class="area-popup-glow area-popup-glow-b"></view>
<view class="campus-area-header">
<view class="campus-area-kicker">选择你的校园半径</view>
<view class="campus-area-title">你现在在哪个校区?</view>
<view class="campus-area-subtitle">选定后,会优先展示附近同学正在拼的内容。</view>
</view>
<view class="campus-area-search">
<text class="area-search-icon">⌕</text>
<input v-model="areaKeyword" confirm-type="search" placeholder="搜索学校 / 校区 / 区域"
placeholder-class="area-search-placeholder" />
</view>
<scroll-view scroll-y class="campus-area-list">
<view class="campus-area-item" v-for="(item,index) in filteredAreaList" :key="index"
@tap="onClickArea(item)">
<view class="area-item-main">
<view class="area-item-dot"></view>
<text>{{item.title}}</text>
</view>
<view class="area-item-action">进入</view>
</view>
<view class="campus-area-empty" v-if="filteredAreaList.length === 0">
<view class="area-empty-title">没找到这个校区</view>
<view class="area-empty-desc">换个关键词试试,比如学校简称或区域名</view>
</view>
</scroll-view>
</view>
</uni-popup>
<uni-popup ref="productPopup" class="home-popup-layer" background-color="transparent">
<view class="product-popup-content">
<view class="product-popup-header">
<view class="product-popup-title">商品详情</view>
<view class="product-popup-subtitle">请核对商品规格和数量</view>
</view>
<view class="product-popup-list" v-if="productGoodsList.length > 0">
<view class="product-popup-card" v-for="(item1,index1) in productGoodsList" :key="index1">
<view class="product-popup-img">
<img :src="item1.productPicture" alt="">
</view>
<view class="product-popup-info">
<view class="product-popup-name">
{{item1.productName}}
</view>
<view class="product-popup-spec">
<text class="product-popup-label">规格</text>
<text class="product-popup-spec-text">{{item1.specs | delNode}}</text>
</view>
</view>
<view class="product-popup-quantity">
<view class="product-popup-quantity-num">x{{item1.quantity}}</view>
<view class="product-popup-quantity-label">数量</view>
</view>
</view>
</view>
<view class="product-popup-empty" v-else>
暂无商品详情
</view>
</view>
</uni-popup>
<!-- 参团成功提示弹出层 -->
<uni-popup ref="tishiPopup" class="home-popup-layer" background-color="#fff">
<view class="tishi-popup">
<view class="tishi-copy">
<view class="tishi-copy-title">抢单成功</view>
<view class="tishi-copy-desc">
点击下方<text class="tishi-copy-highlight">"配送"</text>按钮,即可开始送单啦
</view>
</view>
</view>
</uni-popup>
<tab-bar v-if="isTabBarVisible" ref="tabBar" :width="width" @tab-index="changeIndex" :currentIndex="currentIndex"></tab-bar>
</view>
</template>
<script>
import tabBar from "@/components/tab-bar/tab-bar.vue";
import deLivery from "@/components/tab-bar/delivery.vue";
import postList from "@/components/tab-bar/postList.vue";
import myCenter from "@/components/tab-bar/myCenter.vue";
import { resolveHomeShareTarget, normalizeShareTargetPath } from '@/utils/sharePath.js'
const HOME_AD_IMAGE_CACHE_KEY = 'home_ad_image_cache_v1'
const HOME_AD_IMAGE_CACHE_TTL = 30 * 24 * 60 * 60 * 1000
const HOME_AD_IMAGE_CACHE_LIMIT = 40
const homeAdImageDownloading = {}
const HOME_MENU_ICON_URLS = {
food: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/553230c20dea4e5c85f1e396058a7493.png',
store: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/28b5cfec79d74871b0ce67743fb7619c.png',
run: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/7690c4f897604fca804ea932bc3c1239.png',
luck: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/41cfb56caff4419b94b69d0f2303b602.png',
fish: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/a083b7d159264bbc967034088fa7eb3a.png'
}
export default {
data() {
return {
adList:[],
homeMenuIconImages: {
food: '',
store: '',
run: '',
luck: '',
fish: ''
},
pages: [{
name: '商家账单详情111',
url: '/package2/shop/shopSettlementDetail'
}, {
name: '商家订单详情111',
url: '/package2/shop/orderDetail'
}, {
name: '发布订单评价111',
url: '/package1/order/orderEvaluate'
}, {
name: '优惠券列表111',
url: '/package2/myCenter/couponList'
}, {
name: '订单列表111',
url: '/package1/order/orderList'
}, {
name: '待成团页111',
url: '/package1/order/pendGroup'
}, {
name: '新增商品111',
url: '/package2/myCenter/addGoods'
}, {
name: '代买饭111',
url: '/package1/buyFood/buyFood'
}, {
name: '配送员列表111',
url: '/package1/index/deliveryPersonList'
}, {
name: '拼团商家详情111',
url: '/package2/group/groupBuyDetail'
}, {
name: '拼团单一商家111',
url: '/package2/group/groupBuySingle'
}, {
name: '拼团页111',
url: '/package2/group/groupBuyList'
}, {
name: '商家评价111',
url: '/package2/group/shopEvaluate'
}, {
name: '商品详情页111',
url: '/package1/goods/goodsDetail'
}, {
name: '订单详情111',
url: '/package1/order/orderDetail'
}, {
name: '订单支付页111',
url: '/package1/order/orderConfirm'
}, {
name: '商家注册111',
url: '/package2/shop/merchantRegister'
}, {
name: '代取快递/跑腿111',
url: '/package1/runErrand/runErrand'
}, {
name: '兼职注册111',
url: '/package2/myCenter/partTimeJobRegister'
}, {
name: '支付页',
url: '/package1/payment/payment'
}, {
name: '帖子详情页',
url: '/package1/post/postDetail'
}, {
name: '地址列表',
url: '/package2/myCenter/addressList'
}, {
name: '我的钱包',
url: '/package2/myCenter/wallet'
}, {
name: '我的发布',
url: '/package2/myCenter/myPost'
}, {
name: '我的朋友',
url: '/package2/myCenter/myFriend'
}, {
name: '我的收藏',
url: '/package2/myCenter/myCollect'
}, {
name: '个人中心',
url: '/package2/myCenter/myCenter'
}, {
name: '商家注册',
url: '/package2/shop/merchantRegister'
}, {
name: '发布',
url: '/package1/tabbar/release'
}, {
name: '农场',
url: '/package1/farm/farm'
}],
areaName: '',
gaoxiaoList:[{
title:'拼团搭子哪里找',
content:'隔壁宿舍全是宝!'
},{
title:'这门“省钱课”',
content:'拼团就是你的满分答案!'
},{
title:'有件事你知道吗?',
content:'拼团和期末不挂科一样重要!'
}],
indicatorDots: false,
autoplay: true,
mallAds: [],
deliveryItem: [],
rejectOrderSubmittingMap: {},
interval: 4000,
onlineWorkerInterval: 4000,
duration: 1000,
onlineWorkerDuration: 1000,
latitude: 39.909, // 默认纬度,可以设为用户当前位置或配送员位置
longitude: 116.39742, // 默认经度
markers: [], // 标记点,可以包括配送员位置和用户位置
polyline: [], // 路线,如果需要显示配送员路线
currentIndex: 0,
isTabBarVisible: true,
pendingTabIndex: null,
pendingDeliveryRuleConfirm: false,
pendingShareTargetPath: '',
width: 0,
dataTabList: [{
name: '猜你喜欢',
isCheck: true
}, {
name: '代买饭',
isCheck: false
}, {
name: '代取快递/跑腿',
isCheck: false
}],
dataList: [],
areaList: [],
areaKeyword: '',
orderLists: [],
waimaiCount: 0,
kuaidiCount: 0,
paotuiCount: 0,
homeReminders: {},
productData: {},
productGoodsList: [],
zhipaiCount: 0,
searchForm: {
hallOnly: true,
status: 0,
pageNum: 1,
pageSize:10,
getAreaId: '',
putAreaId: '',
paths: ['home_top', 'home_center_left_top', 'home_center_left_bottom', 'home_center_right_top',
'home_center_right_bottom'
],
order: '',
regionId: '',
userId: uni.getStorageSync('id') || '',
deliveryType: 1,
waimaiData: [],
workerId: uni.getStorageSync('worker') ? uni.getStorageSync('worker').workerId : '',
kuaidiData: []
},
checked: 'waimai',
navBarHeight: 0,
menuListOffsetTop: 0,
stickyTrigger: 583,
lastScrollTop: 0,
lastRefreshTime: 0,
worker: null,
isSwitching: true,
getAreaData: {},
putAreaData: {},
yongjin: false,
waimailistData: [],
kuaidilistData: [],
isgetArea: false,
isputArea: false,
checkYongjin: false,
getshopArea: [],
putshopArea: [],
totalPages: 1,
deliveryQueryVersion: 0,
deliveryNowTime: Date.now(),
deliveryTimer: null,
swipeOrderLowPerf: false,
swipeOrderDefaultStyle: {
progress: 'transform: translate3d(0, 0, 0) scaleX(0); transition: transform 0.14s ease-out;',
thumb: 'transform: translate3d(0, 0, 0); transition: transform 0.14s ease-out;'
},
swipeOrder: {
id: '',
index: -1,
startX: 0,
startProgress: 0,
progress: 0,
progressStyle: 'transform: translate3d(0, 0, 0) scaleX(0); transition: none;',
thumbStyle: 'transform: translate3d(0, 0, 0); transition: none;',
trackWidth: 0,
confirmed: false
}
}
},
components: {
tabBar,
deLivery,
postList,
myCenter
},
computed: {
filteredAreaList() {
const keyword = this.areaKeyword.trim().toLowerCase()
if (!keyword) return this.areaList
return this.areaList.filter((item) => {
const title = item.title ? String(item.title).toLowerCase() : ''
return title.indexOf(keyword) > -1
})
},
planetHasReminder() {
return !!(this.homeReminders && this.homeReminders.planet)
},
ieHasReminder() {
return !!(this.homeReminders && this.homeReminders.ie)
},
ieUnreadCount() {
const count = this.homeReminders && this.homeReminders.ieUnreadCount
const num = Number(count || 0)
return isNaN(num) ? 0 : num
}
},
filters: {
formatHourMinute(value) {
if (!value) return '';
const date = new Date(value);
// 获取日 (getDate),并补齐0
const day = String(date.getDate()).padStart(2, '0');
// 获取小时 (getHours),并补齐0
const hour = String(date.getHours()).padStart(2, '0');
// 获取分钟 (getMinutes),并补齐0
const minute = String(date.getMinutes()).padStart(2, '0');
// 拼接格式:日-日-时:分
return `${hour}:${minute}`;
},
delNode(data) {
// 1. 统一转为字符串
let str;
if (typeof data === 'object' && data !== null) {
// 对象或数组 → JSON 字符串
str = JSON.stringify(data);
} else if (typeof data === 'string') {
str = data;
} else {
// 其他类型(数字、布尔等)先转字符串
str = String(data);
}
// 2. 删除所有大括号 { } 和双引号 "
const result = str.replace(/[{}"]/g, '');
return result;
}
},
onPageScroll(e) {
const scrollTop = e.scrollTop;
// 原始 scrollTop 走非响应式字段,避免每帧 setData
const prev = this._scrollTopRaw || 0;
const isScrollingUp = scrollTop < prev;
// 向上滑到靠近页面顶部时(背景头图区域),切换到上一个分类
// 门槛用 80px:用户需要明确地滑回头部较大区域,避免误触发
if (isScrollingUp && scrollTop < 80 && !this.isSwitching) {
const currIdx = this.menuList ? this.menuList.findIndex(m => m.checked) : -1;
if (currIdx > 0) {
this._switchCategory(currIdx - 1);
}
}
this._scrollTopRaw = scrollTop;
// 模板里只关心 >300 / >stickyTrigger 两个布尔判断,所以把 lastScrollTop 阶段化,
// 确保跨阶段时才触发一次 setData。
const stickyTrigger = this.stickyTrigger || 583;
const midStage = Math.min(400, stickyTrigger);
const stage = scrollTop > stickyTrigger ? stickyTrigger + 1 : (scrollTop > 300 ? midStage : 0);
if (stage !== this.lastScrollTop) {
this.lastScrollTop = stage;
}
},
onReachBottom() {
// 接管原 delivery-list scroll-view 的 scrolltolower 分页
if (this.searchForm.pageNum >= this.totalPages) return;
this.searchForm.pageNum++;
this.getDelivery();
},
onLoad(option) {
this.startDeliveryTimeTimer()
if (option && option.tabIndex !== undefined) {
const tabIndex = Number(option.tabIndex)
if (!isNaN(tabIndex) && tabIndex > 0) {
this.pendingTabIndex = tabIndex
}
}
if (option && option.deliveryRuleEdited == 1) {
this.pendingDeliveryRuleConfirm = true
}
const shareTargetPath = resolveHomeShareTarget(option)
if (shareTargetPath) {
this.pendingShareTargetPath = shareTargetPath
uni.setStorageSync('pendingShareTargetPath', shareTargetPath)
}
},
onShow() {
this.runHomeInit()
if (this.openShareTargetIfNeeded()) return
if (this.pendingTabIndex !== null) {
const tabIndex = this.pendingTabIndex
const shouldShowDeliveryRuleConfirm = this.pendingDeliveryRuleConfirm && tabIndex == 1
this.pendingTabIndex = null
this.pendingDeliveryRuleConfirm = false
this.$nextTick(() => {
Promise.resolve(this.refreshTabCounts()).then(() => {
this.changeIndex(tabIndex)
if (shouldShowDeliveryRuleConfirm) {
this.showDeliveryRuleEditedConfirm()
}
})
})
} else {
this.$nextTick(() => {
Promise.resolve(this.refreshTabCounts()).then(() => {
if (this.currentIndex == 4 && this.$refs.myCenterPage) {
this.$refs.myCenterPage.init()
}
if (this.pendingDeliveryRuleConfirm && this.currentIndex == 1) {
this.pendingDeliveryRuleConfirm = false
this.showDeliveryRuleEditedConfirm()
}
})
})
}
},
onHide() {
this.closeProductPopup()
},
onReady() {
// 记录分类栏相对页面的偏移量,用于上滑检测
setTimeout(() => {
this.refreshDaimaiStickyPosition()
}, 500);
},
onUnload() {
this.closeProductPopup()
if (this.deliveryTimer) {
clearInterval(this.deliveryTimer);
this.deliveryTimer = null;
}
},
methods: {
setTabBarVisible(visible) {
this.isTabBarVisible = visible
},
refreshTabCounts() {
if (this.$refs.tabBar && this.$refs.tabBar.getWorkerCounts) {
return this.$refs.tabBar.getWorkerCounts()
}
return Promise.resolve()
},
showDeliveryRuleEditedConfirm() {
this.$nextTick(() => {
setTimeout(() => {
if (this.$refs.deLiveryPage && this.$refs.deLiveryPage.showRuleEditedConfirm) {
this.$refs.deLiveryPage.showRuleEditedConfirm()
}
}, 300)
})
},
runHomeInit() {
// 保证首页数据实时:每次显示首页都重新初始化数据。
this.indexInit()
this.$nextTick(() => {
this.refreshDaimaiStickyPosition()
})
},
normalizeShareTargetPath(value) {
return normalizeShareTargetPath(value)
},
resolveShareTargetPath(value) {
let targetPath = String(value || '')
if (targetPath.indexOf('/pages/index/index') === 0 || targetPath.indexOf('pages/index/index') === 0) {
const queryIndex = targetPath.indexOf('?')
if (queryIndex !== -1) {
const query = targetPath.slice(queryIndex + 1).split('&')
for (let i = 0; i < query.length; i++) {
const pair = query[i].split('=')
if (pair[0] === 'targetPath') {
targetPath = pair.slice(1).join('=')
break
}
}
}
}
return this.normalizeShareTargetPath(targetPath)
},
openShareTargetIfNeeded() {
if (!this.pendingShareTargetPath) {
this.pendingShareTargetPath = this.resolveShareTargetPath(uni.getStorageSync('pendingShareTargetPath') || '')
if (this.pendingShareTargetPath) {
uni.setStorageSync('pendingShareTargetPath', this.pendingShareTargetPath)
}
}
if (!this.pendingShareTargetPath) return false
if (!uni.getStorageSync('area')) return true
const targetPath = this.pendingShareTargetPath
this.pendingShareTargetPath = ''
uni.removeStorageSync('pendingShareTargetPath')
uni.removeStorageSync('authPendingTargetPath')
this.$nextTick(() => {
setTimeout(() => {
uni.navigateTo({
url: targetPath,
fail: () => {
this.pendingShareTargetPath = targetPath
uni.setStorageSync('pendingShareTargetPath', targetPath)
uni.redirectTo({
url: targetPath,
success: () => {
uni.removeStorageSync('pendingShareTargetPath')
},
fail: () => {
uni.showToast({
title: '进入分享页面失败,请重试',
icon: 'none'
})
}
})
}
})
}, 300)
})
return true
},
refreshDaimaiStickyPosition() {
const query = uni.createSelectorQuery().in(this);
query.select('#menuList').boundingClientRect(rect => {
if (rect) {
this.menuListOffsetTop = rect.top + (this._scrollTopRaw || 0);
this.stickyTrigger = Math.max(360, this.menuListOffsetTop - this.navBarHeight - 46);
}
}).exec();
},
hasLogin() {
const token = uni.getStorageSync('hiver_token')
return !!(token && typeof token === 'string' && token.trim() && token !== 'null' && token !== 'undefined')
},
requireLogin(tabIndex = this.currentIndex) {
if (this.hasLogin()) return true
const redirectKey = 'login_redirect_' + Date.now()
const index = Number(tabIndex)
const redirectUrl = '/pages/index/index' + (!isNaN(index) && index > 0 ? '?tabIndex=' + index : '')
uni.setStorageSync(redirectKey, redirectUrl)
uni.navigateTo({
url: '/package2/login/login?redirect=' + redirectKey
})
return false
},
indexInit() {
let that = this
this.applyCachedHomeMenuIcons()
uni.getSystemInfo({
success: function(info) {
that.width = info.screenWidth * 2;
}
});
let worker = uni.getStorageSync('worker')
if (worker != '' && worker != undefined && worker != null) {
this.worker = worker
}
that.searchForm.workerId = uni.getStorageSync('worker') ? uni.getStorageSync('worker').workerId : ''
// 获取用户当前位置
// this.getUserLocation();
if(uni.getStorageSync('hiver_token')){
this.getUserOrders();
}
if (!uni.getStorageSync('area')) {
this.checkArea()
} else {
if (uni.getStorageSync('area')) {
this.searchForm.regionId = JSON.parse(uni.getStorageSync('area')).id;
}
let area = JSON.parse(uni.getStorageSync('area'))
this.areaName = area.title
if (uni.getStorageSync('waimaiData')) {
this.waimailistData = []
let waimailist = uni.getStorageSync('waimaiData')
if (waimailist.length > 0) {
for (let a = 0; a < waimailist.length; a++) {
let waimai = {
getAreaId: waimailist[a].getAreaId,
putAreaId: waimailist[a].putAreaId
}
this.waimailistData.push(waimai);
}
}
}
if (uni.getStorageSync('kuaidiData')) {
this.kuaidilistData = []
let waimailist = uni.getStorageSync('kuaidiData')
if (waimailist.length > 0) {
for (let a = 0; a < waimailist.length; a++) {
let waimai = {
getAreaId: waimailist[a].getAreaId,
putAreaId: waimailist[a].putAreaId
}
this.kuaidilistData.push(waimai);
}
}
}
this.searchForm.waimaiData = this.waimailistData;
this.searchForm.kuaidiData = [];
this.getDelivery();
this.getShopArea();
}
// 计算导航栏高度用于sticky offset:statusBarHeight + 40px内容区
const info = uni.getSystemInfoSync();
this.navBarHeight = info.statusBarHeight;
this.swipeOrderBaseWidth = info.windowWidth * 0.86;
this.swipeOrderThumbWidth = uni.upx2px ? uni.upx2px(82) : 41;
const iosVersionMatch = info.platform === 'ios' && info.system ? String(info.system).match(/\d+/) : null;
const iosMajorVersion = iosVersionMatch ? Number(iosVersionMatch[0]) : 0;
this.swipeOrderLowPerf = iosMajorVersion >= 26;
this.swipeOrderFrameGap = info.platform === 'ios' ? (this.swipeOrderLowPerf ? 36 : 24) : 16;
this.swipeOrderProgressStep = info.platform === 'ios' ? (this.swipeOrderLowPerf ? 4 : 2) : 1;
},
clearCheck() {
this.checkYongjin = false
this.putAreaData = {}
this.getAreaData = {}
this.searchForm.getAreaId = ""
this.searchForm.putAreaId = ""
this.searchForm.order = ""
this.resetDeliveryQuery()
this.getDelivery()
this.$forceUpdate()
},
// 内部切换方法:带isSwitching保护,防止程序化滚动期间闪回
_switchCategory(index) {
if (this.isSwitching) return;
this.isSwitching = true;
this.checkTab(index);
// 400ms后解除锁(动画200ms,预留200ms缓冲)
setTimeout(() => {
this.isSwitching = false;
}, 400);
},
productDetail(item) {
if (this._isSwipingOrderTap) {
this._isSwipingOrderTap = false
return
}
if (!item || item.deliveryType != 1) return
this.productData = item;
this.productGoodsList = Array.isArray(item.goodsList) ? item.goodsList : []
this.$refs.productPopup.open()
},
closeProductPopup() {
if (this.$refs.productPopup && this.$refs.productPopup.close) {
this.$refs.productPopup.close()
}
this.productData = {}
this.productGoodsList = []
},
getSwipeProgress(item, index) {
if (!item) return 0
if (this.swipeOrder.id === item.id && this.swipeOrder.index === index) {
return this.swipeOrder.progress
}
return 0
},
resetDeliveryQuery() {
this.deliveryQueryVersion++
this.searchForm.pageNum = 1
this.totalPages = 1
this.deliveryItem = []
this.resetSwipeOrder()
},
normalizeDeliveryRecords(records, pageNum) {
if (!Array.isArray(records)) return []
return records.filter(item => item && typeof item === 'object').map((item, index) => {
return {
...item,
deliveryKey: item.id !== undefined && item.id !== null ? String(item.id) : (pageNum + '-' + index)
}
})
},
shouldShowReceiverPhoneIcon(item) {
return !!(item && item.workerId)
},
parseDeliveryTime(value) {
if (!value) return NaN
if (typeof value === 'number') {
return String(value).length === 10 ? value * 1000 : value
}
const timeText = String(value).trim()
if (!timeText) return NaN
const nativeParsedTime = new Date(timeText).getTime()
if (!isNaN(nativeParsedTime)) return nativeParsedTime
const timeOnlyMatch = timeText.match(/^(\d{1,2}):(\d{1,2})(?::(\d{1,2}))?$/)
if (timeOnlyMatch) {
const currentDate = new Date(this.deliveryNowTime || Date.now())
currentDate.setHours(Number(timeOnlyMatch[1]), Number(timeOnlyMatch[2]), Number(timeOnlyMatch[3] || 0), 0)
return currentDate.getTime()
}
const parsedTime = new Date(timeText.replace(/-/g, '/')).getTime()
return parsedTime
},
isNearMustFinishTime(item) {
if (!item || !item.mustFinishTime) return false
const mustFinishTime = this.parseDeliveryTime(item.mustFinishTime)
if (isNaN(mustFinishTime)) return false
return mustFinishTime - this.deliveryNowTime <= 10 * 60 * 1000
},
getMustFinishWarningText(item) {
const mustFinishTime = this.parseDeliveryTime(item && item.mustFinishTime)
if (!isNaN(mustFinishTime) && this.deliveryNowTime > mustFinishTime) {
return '已超过用户要求送达时间,为避免纠纷,建议和用户沟通是否继续接单配送'
}
return '已经临近用户要求送达时间,为避免纠纷,建议和用户沟通是否继续接单配送。'
},
startDeliveryTimeTimer() {
this.deliveryNowTime = Date.now()
if (this.deliveryTimer) return
this.deliveryTimer = setInterval(() => {
this.deliveryNowTime = Date.now()
}, 60 * 1000)
},
isSwipeOrderActive(item, index) {
if (!item) return false
return this.swipeOrder.id === item.id && this.swipeOrder.index === index && this.swipeOrder.progress > 0
},
//滑动开始
startSwipeOrder(event, item, index) {
if (!item || item.id === undefined || item.id === null) return
if (!this.requireLogin(0)) return
const touch = event.touches && event.touches[0]
if (!touch) return
this._isSwipingOrderTap = false
this._swipeOrderProgress = 0
this._swipeOrderLastRenderTime = 0
this.swipeOrder = {
id: item.id,
index,
startX: touch.clientX,
startProgress: 0,
progress: 0,
progressStyle: 'transform: translate3d(0, 0, 0) scaleX(0); transition: none;',
thumbStyle: 'transform: translate3d(0, 0, 0); transition: none;',
trackWidth: this.swipeOrderBaseWidth || 0,
confirmed: false
}
this.$nextTick(() => {
uni.createSelectorQuery().in(this).select('#swipe-order-' + item.id).boundingClientRect((rect) => {
if (rect && this.swipeOrder.id === item.id && this.swipeOrder.index === index) {
this.swipeOrder.trackWidth = rect.width
}
}).exec()
})
},
moveSwipeOrder(event) {
const touch = event.touches && event.touches[0]
if (!touch || this.swipeOrder.id === '') return
const trackWidth = this.swipeOrder.trackWidth || this.swipeOrderBaseWidth || 1
const deltaX = Math.max(0, touch.clientX - this.swipeOrder.startX)
const progress = Math.min(100, Math.round(deltaX / (trackWidth * 0.72) * 100))
if (progress > 3) {
this._isSwipingOrderTap = true
}
this._swipeOrderProgress = progress
const now = Date.now()
const frameGap = this.swipeOrderFrameGap || 16
const progressStep = this.swipeOrderProgressStep || 1
if (now - (this._swipeOrderLastRenderTime || 0) < frameGap &&
Math.abs(progress - this.swipeOrder.progress) < progressStep &&
progress < 92) {
return
}
this._swipeOrderLastRenderTime = now
this.setSwipeOrderProgress(progress)
},
//滑动结束
endSwipeOrder(item, index) {
if (!this.requireLogin(0)) {
this.resetSwipeOrder()
return
}
if (this.swipeOrder.id !== item.id || this.swipeOrder.index !== index) return
const progress = this._swipeOrderProgress !== undefined ? this._swipeOrderProgress : this.swipeOrder.progress
if (progress >= 92 && !this.swipeOrder.confirmed) {
this.swipeOrder.confirmed = true
this.setSwipeOrderProgress(100)
this.getOrder(item, index)
return
}
this.resetSwipeOrder()
},
resetSwipeOrder() {
this._swipeOrderProgress = 0
this._swipeOrderLastRenderTime = 0
clearTimeout(this._swipeOrderTapTimer)
this._swipeOrderTapTimer = setTimeout(() => {
this._isSwipingOrderTap = false
}, 300)
this.swipeOrder = {
id: '',
index: -1,
startX: 0,
startProgress: 0,
progress: 0,
progressStyle: 'transform: translate3d(0, 0, 0) scaleX(0); transition: none;',
thumbStyle: 'transform: translate3d(0, 0, 0); transition: none;',
trackWidth: 0,
confirmed: false
}
},
setSwipeOrderProgress(progress) {
if (this.swipeOrder.progress === progress) return
const trackWidth = this.swipeOrder.trackWidth || this.swipeOrderBaseWidth || 0
const thumbWidth = this.swipeOrderThumbWidth || 0
const thumbOffset = Math.max(0, trackWidth - thumbWidth) * progress / 100
this.swipeOrder.progress = progress
this.swipeOrder.progressStyle = 'transform: translate3d(0, 0, 0) scaleX(' + (progress / 100) + '); transition: none;'
this.swipeOrder.thumbStyle = 'transform: translate3d(' + thumbOffset + 'px, 0, 0); transition: none;'
},
noop() {},
getOrder(item, index) {
if (!this.requireLogin(0)) {
this.resetSwipeOrder()
return
}
let that = this
let data = {
groupId: item.groupId ? item.groupId : '',
deliveryId: item.id,
workerId: uni.getStorageSync('worker') ? uni.getStorageSync('worker').workerId : '',
workerPhone: uni.getStorageSync('worker') ? uni.getStorageSync('worker').mobile : '',
workerName: uni.getStorageSync('worker') ? uni.getStorageSync('worker').workerName : '',
regionId: JSON.parse(uni.getStorageSync('area')).id,
geolocation: that.latitude + ',' + that.longitude
}
that.tui.request("/mall/delivery/accept", "POST", data, false, true).then((res) => {
that.loadStatus = 'nomore';
if (res.code == 200) {
that.resetSwipeOrder();
if (!uni.getStorageSync('worker') && res.result != null) {
this.$refs.tishiPopup.open()
uni.setStorageSync('worker', res.result)
that.$refs.tabBar.indexWorkerCount ++
}else{
if(res.message == '接单成功'){
that.tui.toast(res.message);
that.$refs.tabBar.indexWorkerCount ++
}else{
that.tui.toast(res.message,2000);
}
}
that.deliveryItem.splice(index, 1)
if (item.workerId != null && item.workerId != undefined && item.workerId != '') {
that.zhipaiCount -= 1
} else {
if (item.deliveryType == 1) {
that.waimaiCount -= 1
} else if (item.deliveryType == 2) {
that.kuaidiCount -= 1
} else if (item.deliveryType == 3) {
that.paotuiCount -= 1
}
}
setTimeout(res => {
this.getUserLocation(uni.getStorageSync('worker') ? uni.getStorageSync('worker').workerId : res.result.workerId)
}, 2000)
that.$forceUpdate();
} else {
that.resetSwipeOrder();
that.tui.toast(res.message);
return;
}
}).catch((res) => {});
},
rejectOrder(item, index) {
const deliveryId = item && item.id
if (this.rejectOrderSubmittingMap[deliveryId]) return
this.$set(this.rejectOrderSubmittingMap, deliveryId, true)
let that = this
this.tui.request("/mall/delivery/reject", "POST", {
deliveryId: deliveryId
}, false, true).then((res) => {
if (res.code == 200) {
that.deliveryItem.splice(index, 1)
that.tui.toast(res.message);
if (item.workerId != null && item.workerId != undefined && item.workerId != '') {
that.zhipaiCount -= 1
} else {
if (item.deliveryType == 1) {
that.waimaiCount -= 1
} else if (item.deliveryType == 2) {
that.kuaidiCount -= 1
} else if (item.deliveryType == 3) {
that.paotuiCount -= 1
}
}
that.$forceUpdate();
} else {
that.tui.toast(res.message);
return;
}
uni.hideLoading();
}).catch((res) => {}).finally(() => {
that.$delete(that.rejectOrderSubmittingMap, deliveryId)
});
},
normalizeAdImageUrl(url) {
if (!url) return ''
let normalized = String(url).trim()
while (normalized.endsWith(',')) {
normalized = normalized.slice(0, -1)
}
return normalized
},
getHomeAdImageCache() {
const cache = uni.getStorageSync(HOME_AD_IMAGE_CACHE_KEY)
return cache && typeof cache === 'object' ? cache : {}
},
saveHomeAdImageCache(cache) {
uni.setStorageSync(HOME_AD_IMAGE_CACHE_KEY, cache)
},
isSavedFileExists(filePath) {
if (!filePath || filePath.indexOf('__tmp__') !== -1) return false
try {
const fs = (uni.getFileSystemManager && uni.getFileSystemManager())
|| (typeof wx !== 'undefined' && wx.getFileSystemManager ? wx.getFileSystemManager() : null)
if (fs && fs.accessSync) {
fs.accessSync(filePath)
return true
}
} catch (e) {
return false
}
return true
},
isHomeAdImageCacheValid(cacheItem) {
return !!(cacheItem
&& Date.now() - Number(cacheItem.savedAt || 0) < HOME_AD_IMAGE_CACHE_TTL
&& this.isSavedFileExists(cacheItem.path))
},
applyCachedAdImages(mallAds) {
const cache = this.getHomeAdImageCache()
const activeUrls = Object.keys(HOME_MENU_ICON_URLS).map(key => HOME_MENU_ICON_URLS[key])
mallAds.forEach((item) => {
const imageUrl = this.normalizeAdImageUrl(item.adImage)
item.adImage = imageUrl
item.adDisplayImage = ''
if (!/^https?:\/\//.test(imageUrl)) {
item.adDisplayImage = imageUrl
return
}
activeUrls.push(imageUrl)
const cacheItem = cache[imageUrl]
if (this.isHomeAdImageCacheValid(cacheItem)) {
item.adDisplayImage = cacheItem.path
return
}
if (cacheItem && cacheItem.path) {
delete cache[imageUrl]
}
this.cacheHomeAdImage(imageUrl)
})
this.pruneHomeAdImageCache(cache, activeUrls)
},
applyCachedHomeMenuIcons() {
const cache = this.getHomeAdImageCache()
Object.keys(HOME_MENU_ICON_URLS).forEach((key) => {
const imageUrl = HOME_MENU_ICON_URLS[key]
const cacheItem = cache[imageUrl]
if (this.isHomeAdImageCacheValid(cacheItem)) {
this.homeMenuIconImages[key] = cacheItem.path
return
}
if (cacheItem && cacheItem.path) {
delete cache[imageUrl]
}
this.homeMenuIconImages[key] = ''
this.cacheHomeMenuIcon(key, imageUrl)
})
this.saveHomeAdImageCache(cache)
},
cacheHomeMenuIcon(key, imageUrl) {
if (homeAdImageDownloading[imageUrl]) return
homeAdImageDownloading[imageUrl] = true
uni.downloadFile({
url: imageUrl,
success: (downloadRes) => {
if (downloadRes.statusCode !== 200 || !downloadRes.tempFilePath) {
this.homeMenuIconImages[key] = imageUrl
delete homeAdImageDownloading[imageUrl]
return
}
uni.saveFile({
tempFilePath: downloadRes.tempFilePath,
success: (saveRes) => {
const cache = this.getHomeAdImageCache()
const oldCacheItem = cache[imageUrl]
if (oldCacheItem && oldCacheItem.path && oldCacheItem.path !== saveRes.savedFilePath) {
uni.removeSavedFile({
filePath: oldCacheItem.path,
fail: () => {}
})
}
cache[imageUrl] = {
path: saveRes.savedFilePath,
savedAt: Date.now()
}
this.saveHomeAdImageCache(cache)
this.homeMenuIconImages[key] = saveRes.savedFilePath
},
fail: () => {
this.homeMenuIconImages[key] = imageUrl
},
complete: () => {
delete homeAdImageDownloading[imageUrl]
}
})
},
fail: () => {
this.homeMenuIconImages[key] = imageUrl
delete homeAdImageDownloading[imageUrl]
},
complete: (downloadRes) => {
if (!downloadRes || downloadRes.statusCode !== 200) {
this.homeMenuIconImages[key] = imageUrl
delete homeAdImageDownloading[imageUrl]
}
}
})
},
cacheHomeAdImage(imageUrl) {
if (homeAdImageDownloading[imageUrl]) return
homeAdImageDownloading[imageUrl] = true
uni.downloadFile({
url: imageUrl,
success: (downloadRes) => {
if (downloadRes.statusCode !== 200 || !downloadRes.tempFilePath) {
this.replaceAdImageWithCache(imageUrl, imageUrl)
delete homeAdImageDownloading[imageUrl]
return
}
uni.saveFile({
tempFilePath: downloadRes.tempFilePath,
success: (saveRes) => {
const cache = this.getHomeAdImageCache()
const oldCacheItem = cache[imageUrl]
if (oldCacheItem && oldCacheItem.path && oldCacheItem.path !== saveRes.savedFilePath) {
uni.removeSavedFile({
filePath: oldCacheItem.path,
fail: () => {}
})
}
cache[imageUrl] = {
path: saveRes.savedFilePath,
savedAt: Date.now()
}
this.saveHomeAdImageCache(cache)
this.replaceAdImageWithCache(imageUrl, saveRes.savedFilePath)
},
fail: () => {
this.replaceAdImageWithCache(imageUrl, imageUrl)
},
complete: () => {
delete homeAdImageDownloading[imageUrl]
}
})
},
fail: () => {
delete homeAdImageDownloading[imageUrl]
},
complete: (downloadRes) => {
if (!downloadRes || downloadRes.statusCode !== 200) {
this.replaceAdImageWithCache(imageUrl, imageUrl)
delete homeAdImageDownloading[imageUrl]
}
}
})
},
replaceAdImageWithCache(imageUrl, filePath) {
const replace = (list) => {
(list || []).forEach((item) => {
if (item.adImage === imageUrl) {
item.adDisplayImage = filePath
}
})
}
replace(this.mallAds)
replace(this.adList)
this.$forceUpdate()
},
pruneHomeAdImageCache(cache, activeUrls) {
const activeUrlMap = activeUrls.reduce((result, url) => {
result[url] = true
return result
}, {})
const now = Date.now()
Object.keys(cache).forEach((url) => {
const item = cache[url]
const isExpired = !this.isHomeAdImageCacheValid(item)
if (isExpired && !activeUrlMap[url]) {
item && item.path && uni.removeSavedFile({
filePath: item.path,
fail: () => {}
})
delete cache[url]
}
})
const urls = Object.keys(cache).sort((a, b) => Number(cache[a].savedAt || now) - Number(cache[b].savedAt || now))
while (urls.length > HOME_AD_IMAGE_CACHE_LIMIT) {
const url = urls.shift()
if (activeUrlMap[url]) {
urls.push(url)
if (urls.every(itemUrl => activeUrlMap[itemUrl])) break
continue
}
const item = cache[url]
item && item.path && uni.removeSavedFile({
filePath: item.path,
fail: () => {}
})
delete cache[url]
}
this.saveHomeAdImageCache(cache)
},
getDelivery() {
let that = this
const requestVersion = that.deliveryQueryVersion
const requestPageNum = that.searchForm.pageNum
const requestForm = {
...that.searchForm,
waimaiData: [...(that.searchForm.waimaiData || [])],
kuaidiData: [...(that.searchForm.kuaidiData || [])]
}
that.waimaiCount = 0
that.kuaidiCount = 0
that.paotuiCount = 0
that.zhipaiCount = 0
that.adList = []
that.searchForm.userId = uni.getStorageSync('id') || that.searchForm.userId || ''
requestForm.userId = that.searchForm.userId
this.tui.request("/mall/delivery/page", "POST", requestForm, false, false).then((res) => {
if (requestVersion !== that.deliveryQueryVersion) return
that.loadStatus = 'nomore';
if (res.code == 200) {
that.homeReminders = res.result.homeReminders || {}
that.mallAds = res.result.mallAds || []
that.applyCachedAdImages(that.mallAds)
for(let i=0;i<that.mallAds.length;i++){
if(that.mallAds[i].position == 'home_top'){
that.adList.push(that.mallAds[i])
}
}
const records = that.normalizeDeliveryRecords(res.result.records, requestPageNum)
if (requestPageNum == 1) {
that.deliveryItem = records;
} else {
that.deliveryItem = [...that.deliveryItem, ...records]
}
if (res.result.orderCount != null && res.result.orderCount.length > 0) {
for (let i = 0; i < res.result.orderCount.length; i++) {
if (res.result.orderCount[i].deliveryType == 1) {
that.waimaiCount = res.result.orderCount[i].orderCount
} else if (res.result.orderCount[i].deliveryType == 2) {
that.kuaidiCount = res.result.orderCount[i].orderCount
} else if (res.result.orderCount[i].deliveryType == 3) {
that.paotuiCount = res.result.orderCount[i].orderCount
}
}
}else{
that.waimaiCount = 0
that.kuaidiCount = 0
that.paotuiCount = 0
}
if (res.result.zhipaiCount != undefined && res.result.zhipaiCount != null) {
that.zhipaiCount = res.result.zhipaiCount
}
that.totalPages = res.result.pages; // pages = 总页数
that.$forceUpdate();
} else {
that.tui.toast(res.message);
return;
}
uni.hideLoading();
}).catch((res) => {});
},
//广告跳转
goAdPage(item) {
if (!this.requireLogin(0)) return
uni.navigateTo({
url: item.linkUrl + item.linkParams
})
},
checkTab(index) {
for (let i = 0; i < this.menuList.length; i++) {
this.menuList[i].checked = (i === index);
}
// 重置分页
this.searchForm.pageNum = 1;
this.pageNum = 1;
this.total = 1;
this.productItem = [];
// this.getProduct(this.menuList[index].id);
// 滚动到正确位置:分类栏刚好吸顶在nav-bar下方
// menuListOffsetTop - navBarHeight 使分类栏正好在sticky位置,首条商品可见
const target = this.menuListOffsetTop - this.navBarHeight;
uni.pageScrollTo({
scrollTop: target > 0 ? target : 0,
duration: 200
});
},
goSeckillGroup() {
uni.navigateTo({
url: '/package2/seckill/seckillGroup'
})
},
//跳转到子页面
goDetail(type) {
let url = ''
switch (type) {
case '1':
url = '/package1/runErrand/runErrand'
break;
case '2':
url = '/package2/group/groupBuyList'
break;
case '3':
url = '/package2/group/studentStoreList'
break;
case '4':
url = '/package1/planet/index'
break;
case '5':
url = '/package1/ieBrowser/index'
break;
}
uni.navigateTo({
url: url
})
},
//跳转到订单详情
goOrderDetail(item) {
uni.navigateTo({
url: '/package1/order/orderDetail?id=' + item.id
});
},
//选择区域
onClickArea(item) {
uni.setStorageSync('area', JSON.stringify(item))
this.areaName = item.title
this.areaKeyword = ''
this.searchForm.regionId = item.id
this.resetDeliveryQuery()
this.getDelivery();
this.getShopArea();
let that = this
if(uni.getStorageSync('hiver_token')){
that.tui.request("/worker/admin/add", "POST", {
userId: uni.getStorageSync('id'),
isChangeArea: 0,
region: item.id
}, false, true).then((res) => {
if (res.code == 200) {
if (res.result != null) {
uni.setStorageSync('worker', res.result)
}
} else {
that.tui.toast(res.message)
return
}
uni.hideLoading()
}).catch((res) => {})
}
this.$refs.areaPopup.close()
this.pendingShareTargetPath = uni.getStorageSync('pendingShareTargetPath') || this.pendingShareTargetPath
setTimeout(() => {
this.openShareTargetIfNeeded()
}, 300)
},
checkArea() {
this.tui.request("/app/shopArea/getByParentId/0", "get", {}, false, false).then((res) => {
if (res.code == 200) {
this.areaList = res.result
this.areaKeyword = ''
this.$refs.areaPopup.open();
} else {
this.tui.toast(res.message)
}
})
},
//获取筛选条件列表
getShopArea() {
let that = this
that.tui.request("/app/shopArea/getByParentId/" + that.searchForm.regionId, "GET", {}, false, true).then((
res) => {
if (res.code == 200) {
if (res.result != null) {
that.getshopArea = res.result
that.putshopArea = res.result
}
} else {
that.tui.toast(res.message)
return
}
}).catch((res) => {})
},
//获取用户当前未完成订单
getUserOrders() {
let that = this
that.tui.request("/mall/order/getOrdersByUserId/" + uni.getStorageSync('id'), "GET", {}, false, true).then(
(res) => {
if (res.code == 200) {
if (res.result != null) {
that.orderLists = res.result
that.$forceUpdate()
}
} else {
that.tui.toast(res.message)
return
}
}).catch((res) => {})
},
//点击下拉框中某一条筛选条件
searchOrder(type, value) {
if (type == 'shuaxin') {
const now = Date.now();
const refreshInterval = 10 * 1000;
const diff = now - this.lastRefreshTime;
if (diff < refreshInterval) {
const waitSeconds = Math.ceil((refreshInterval - diff) / 1000);
this.tui.toast(waitSeconds + '秒后再刷新');
return;
}
this.lastRefreshTime = now;
}
if (type == 'getarea') {
if (this.searchForm.getAreaId == value.id) {
this.searchForm.getAreaId = ''
this.getAreaData = {}
} else {
this.searchForm.getAreaId = value.id
this.getAreaData = value
}
this.isgetArea = !this.isgetArea
// this.searchForm.shopArea = value
} else if (type == 'putarea') {
if (this.searchForm.putAreaId == value.id) {
this.searchForm.putAreaId = ''
this.putAreaData = {}
} else {
this.searchForm.putAreaId = value.id
this.putAreaData = value
}
this.isputArea = !this.isputArea
} else if (type == 'yongjin') {
this.checkYongjin = !this.checkYongjin
if (this.checkYongjin) {
this.searchForm.order = 'deliveryFee'
} else {
this.searchForm.order = ''
}
} else if (type == 'delgetarea') {
this.searchForm.getAreaId = ''
this.getAreaData = {}
} else if (type == 'delputarea') {
this.searchForm.putAreaId = ''
this.putAreaData = {}
} else if (type == 'delyongjin') {
this.checkYongjin = false
this.searchForm.order = ''
}
this.resetDeliveryQuery()
this.getDelivery();
},
// 获取用户位置
getUserLocation(id) {
let that = this;
uni.getLocation({
type: 'gcj02', // 返回国测局坐标,用于微信小程序地图组件
isHighAccuracy:true,
success: (res) => {
that.latitude = res.latitude;
that.longitude = res.longitude;
that.tui.request('/worker/admin/editLocation', "POST", {workerId:id,geolocation:that.latitude + ',' + that.longitude}, false, false,true).then((res) => {
}).catch((res) => {});
},
fail: (err) => {}
});
},
//配送单列表切换
checkTab1(type) {
this.checked = type
this.resetDeliveryQuery()
if (type == 'waimai') {
this.searchForm.deliveryType = 1
this.searchForm.waimaiData = this.waimailistData;
this.searchForm.kuaidiData = [];
} else if (type == 'kuaidi') {
this.searchForm.deliveryType = 2
this.searchForm.waimaiData = [];
this.searchForm.kuaidiData = this.kuaidilistData;
} else if (type == 'paotui') {
this.searchForm.deliveryType = 3
this.searchForm.waimaiData = [];
this.searchForm.kuaidiData = [];
} else if (type == 'zhipai') {
this.searchForm.deliveryType = 4
this.searchForm.waimaiData = [];
this.searchForm.kuaidiData = [];
}
this.getDelivery()
this.$nextTick(() => {
this.scrollToDaimaiPanel()
})
this.$forceUpdate()
},
scrollToDaimaiPanel() {
const query = uni.createSelectorQuery().in(this);
query.select('#menuList').boundingClientRect(rect => {
if (!rect) return;
const stickyTop = this.navBarHeight + 46;
const target = rect.top + (this._scrollTopRaw || 0) - stickyTop;
uni.pageScrollTo({
scrollTop: target > 0 ? target : 0,
duration: 260
});
}).exec();
},
//拨打电话
makeCall(phone) {
uni.makePhoneCall({
phoneNumber: phone
});
},
//筛选条件
checkAdd() {
this.isgetArea = !this.isgetArea
},
//筛选条件
checkAdd1() {
this.isputArea = !this.isputArea
},
//底部tab切换组件状态改变
changeIndex(index) {
let that = this;
this.isTabBarVisible = true
this.lastIndex = this.currentIndex
if (index != 0) {
this.closeProductPopup()
}
if(index != 2){
this.currentIndex = index
}
switch (index) {
case 0:
this.runHomeInit()
break;
case 1:
that.$refs.deLiveryPage.init()
break;
case 2:
uni.navigateTo({
url: '/package1/tabbar/release'
})
break;
case 3:
that.$refs.postListPage.init()
break;
case 4:
that.$refs.myCenterPage.init()
break;
}
}
}
}
</script>
<style lang="scss" scoped>
page {
width: 100%;
height: 100%;
font-size: 28rpx;
background: linear-gradient(180deg, #f2fff8 0%, #fffdf4 32%, #f7fbf6 100%);
color: #00231C;
}
.page1 {
width: 100%;
height: 100%;
font-size: 28rpx;
background:
radial-gradient(circle at 12% 12%, rgba(166, 255, 234, 0.34) 0, rgba(166, 255, 234, 0) 240rpx),
radial-gradient(circle at 90% 36%, rgba(255, 216, 168, 0.26) 0, rgba(255, 216, 168, 0) 260rpx);
}
/* 吸顶后上方区域不可见,暂停所有 infinite 动画,降低主线程合成压力 */
.page1.is-sticky .hero-particle,
.page1.is-sticky .life-ip,
.page1.is-sticky .life-progress-bar,
.page1.is-sticky .menu-list img,
.page1.is-sticky .world-light,
.page1.is-sticky .world-dot,
.page1.is-sticky .seckill-entry,
.page1.is-sticky .seckill-entry-light,
.page1.is-sticky .seckill-entry-btn,
.page1.is-sticky .heat-dot,
.page1.is-sticky .earn-guide-light {
animation-play-state: paused !important;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-page {
width: 100%;
height: 100%;
}
.home-popup-layer {
z-index: 1200 !important;
}
.swiper {
width: 100%;
height: 440rpx;
z-index: 99 !important;
}
.swiper img {
width: 100%;
height: 100%;
z-index: 99 !important;
border-radius:10px;
}
.campus-hero {
width: 100%;
height: 440rpx;
margin: 0;
border-radius: 0 0 26rpx 26rpx;
background: linear-gradient(135deg, #eaffd9 0%, #b9ffe9 46%, #fff7c8 100%);
box-shadow: 0 18rpx 38rpx rgba(44, 155, 121, 0.1);
overflow: hidden;
position: relative;
z-index: 2;
}
.hero-bg-swiper {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 0 !important;
}
.hero-bg-img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
border-radius: 0 0 26rpx 26rpx !important;
transform: scale(1.01);
}
.hero-bg-mask {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 1;
pointer-events: none;
background:
linear-gradient(180deg, rgba(234, 255, 246, 0.02) 0%, rgba(234, 255, 246, 0.1) 68%, rgba(234, 255, 246, 0.24) 100%),
radial-gradient(circle at 8% 12%, rgba(166, 255, 234, 0.18) 0, rgba(166, 255, 234, 0) 170rpx);
}
.hero-live-strip {
display: flex;
align-items: center;
position: absolute;
left: 30rpx;
right: 30rpx;
bottom: 18rpx;
z-index: 4;
overflow: hidden;
pointer-events: none;
}
.hero-live-strip text {
flex-shrink: 0;
height: 42rpx;
margin-right: 12rpx;
padding: 0 16rpx;
border-radius: 999rpx;
background: rgba(255, 255, 255, 0.72);
color: #0f695b;
font-size: 20rpx;
font-weight: 900;
line-height: 42rpx;
box-shadow: 0 8rpx 18rpx rgba(0, 35, 28, 0.08);
}
.campus-hero::after {
content: '';
width: 520rpx;
height: 520rpx;
position: absolute;
right: -210rpx;
bottom: -220rpx;
border-radius: 50%;
background: rgba(255, 255, 255, 0.26);
box-shadow: inset 0 0 80rpx rgba(255, 255, 255, 0.42);
z-index: 1;
pointer-events: none;
}
.hero-glow,
.hero-particle {
position: absolute;
border-radius: 50%;
pointer-events: none;
z-index: 2;
}
.hero-glow {
opacity: 0.26;
}
.hero-glow-a {
width: 220rpx;
height: 220rpx;
left: -70rpx;
top: -60rpx;
background: rgba(255, 255, 255, 0.36);
}
.hero-glow-b {
width: 180rpx;
height: 180rpx;
right: 120rpx;
top: -70rpx;
background: rgba(255, 255, 255, 0.28);
}
.hero-particle {
width: 16rpx;
height: 16rpx;
background: rgba(255, 255, 255, 0.78);
box-shadow: 0 0 20rpx rgba(255, 255, 255, 0.8);
animation: particleDrift 8s ease-in-out infinite;
}
.hero-particle-a {
left: 80rpx;
top: 70rpx;
}
.hero-particle-b {
right: 96rpx;
top: 48rpx;
animation-delay: 1s;
}
.hero-particle-c {
left: 330rpx;
bottom: 62rpx;
animation-delay: 1.8s;
}
.order-notice-wrap {
position: relative;
top:10rpx;
z-index: 3;
}
.order-msg-box {
width: 95%;
height: 146rpx;
padding: 18rpx;
box-sizing: border-box;
border-radius: 36rpx;
border: 1px solid rgba(255, 255, 255, 0.82);
background:
radial-gradient(circle at 88% 8%, rgba(166, 255, 234, 0.24) 0, rgba(166, 255, 234, 0) 130rpx),
linear-gradient(135deg, #ffffff, #f7fffb);
box-shadow: 0 20rpx 46rpx rgba(0, 35, 28, 0.09), inset 0 0 0 1px rgba(255, 255, 255, 0.68);
z-index: 99;
position: absolute;
left: 2.5%;
bottom: 0;
display: flex;
align-items: center;
overflow: hidden;
}
.order-msg-box::after {
content: '';
width: 260rpx;
height: 150rpx;
border-radius: 50%;
background: linear-gradient(135deg, rgba(255, 244, 217, 0.34) 0%, rgba(166, 255, 234, 0) 72%);
position: absolute;
right: -130rpx;
top: -80rpx;
}
.order-msg-left {
width: 88rpx;
height: 88rpx;
flex-shrink: 0;
position: relative;
z-index: 1;
}
.order-msg-left img {
width: 70rpx;
height: 70rpx;
margin: 9rpx;
}
.order-msg-center {
flex: 1;
min-width: 0;
height: auto;
display: flex;
flex-direction: column;
margin-left: 18rpx;
padding-left: 0;
position: relative;
z-index: 1;
}
.order-msg-right {
width: 78rpx;
height: 58rpx;
margin-left: 16rpx;
position: relative;
z-index: 1;
}
.life-ip {
border-radius: 30rpx;
background: linear-gradient(135deg, #fff7d7, #a6ffea);
box-shadow: 0 12rpx 24rpx rgba(0, 35, 28, 0.08);
}
.life-status-title {
color: #0f3e36;
font-size: 28rpx;
font-weight: 900;
line-height: 36rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.life-progress {
width: 100%;
height: 12rpx;
margin: 12rpx 0 8rpx;
border-radius: 999rpx;
background: rgba(16, 118, 98, 0.08);
overflow: hidden;
}
.life-progress-bar {
height: 100%;
border-radius: 999rpx;
background: linear-gradient(90deg, #42d7b9, #fff171);
box-shadow: 0 0 18rpx rgba(66, 215, 185, 0.52);
}
.life-status-desc {
color: rgba(18, 73, 63, 0.58);
font-size: 22rpx;
font-weight: 700;
line-height: 30rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.life-action {
border-radius: 999rpx;
background: #073f34;
color: #fff;
font-size: 22rpx;
font-weight: 900;
line-height: 58rpx;
text-align: center;
box-shadow: 0 12rpx 24rpx rgba(7, 63, 52, 0.18);
transition: transform 0.18s ease;
}
.life-action:active {
transform: translateY(-4rpx) scale(0.97);
}
.tabbar {
width: 100%;
height: 100rpx;
background-color: #ffffff;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
border-top: 1px solid #eee;
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
z-index: 100;
}
.tab-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
flex: 1;
position: relative;
}
.tab-text {
font-size: 28rpx;
color: #666;
transition: color 0.3s;
}
.tab-item.active .tab-text {
color: #007aff;
font-weight: bold;
}
.tab-indicator {
position: absolute;
bottom: 10rpx;
width: 40rpx;
height: 4rpx;
background-color: #007aff;
border-radius: 2rpx;
animation: indicatorScale 0.3s ease;
}
@keyframes indicatorScale {
0% {
transform: scaleX(0.5);
opacity: 0;
}
100% {
transform: scaleX(1);
opacity: 1;
}
}
/* 滑动动画效果增强 */
.swiper-item {
display: flex;
justify-content: center;
align-items: center;
}
/* 如果需要自定义滑动动画,可以添加以下样式 */
.swiper-container .uni-swiper-wrapper {
transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@keyframes softBreath {
0%,
100% {
transform: translateY(0) scale(1);
}
50% {
transform: translateY(-5rpx) scale(1.025);
}
}
@keyframes particleDrift {
0%,
100% {
opacity: 0.55;
transform: translate3d(0, 0, 0);
}
50% {
opacity: 1;
transform: translate3d(20rpx, -18rpx, 0);
}
}
@keyframes lightFlow {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.94;
}
}
@keyframes itemFloat {
0%,
100% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-6rpx) rotate(-2deg);
}
}
@keyframes numberJump {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-3rpx);
}
}
@keyframes heatParticle {
0%,
100% {
opacity: 0.35;
transform: translateY(0) scale(0.8);
}
50% {
opacity: 1;
transform: translateY(-12rpx) scale(1.18);
}
}
@keyframes seckillHeatPulse {
0%,
100% {
box-shadow: 0 16rpx 30rpx rgba(255, 91, 39, 0.24), 0 0 40rpx rgba(255, 188, 80, 0.26);
}
50% {
box-shadow: 0 18rpx 36rpx rgba(255, 91, 39, 0.3), 0 0 54rpx rgba(255, 203, 91, 0.36);
}
}
@keyframes brandChipFloat {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-3rpx);
}
}
.menu-box {
width: 95%;
height: 176rpx;
display: flex;
align-items: flex-end;
margin: 30rpx auto 0;
padding: 14rpx 8rpx 12rpx;
box-sizing: border-box;
border-radius: 38rpx;
border: 1px solid rgba(255, 255, 255, 0.9);
background:
radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.94) 0, rgba(255, 255, 255, 0) 150rpx),
radial-gradient(circle at 92% 78%, rgba(88, 205, 122, 0.18) 0, rgba(88, 205, 122, 0) 170rpx),
linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(244, 255, 241, 0.94) 50%, rgba(231, 255, 244, 0.96) 100%);
box-shadow: 0 20rpx 46rpx rgba(0, 35, 28, 0.075), inset 0 1rpx 0 rgba(255, 255, 255, 0.9);
position: relative;
z-index: 99;
overflow: hidden;
}
/* .menu-box::after {
content: '本周精选活动 >';
position: absolute;
right: 24rpx;
top: 16rpx;
height: 42rpx;
padding: 0 18rpx;
border-radius: 999rpx;
background: rgba(255, 255, 255, 0.76);
color: #1e6a58;
font-size: 22rpx;
font-weight: 900;
line-height: 42rpx;
box-shadow: 0 8rpx 18rpx rgba(0, 35, 28, 0.06);
} */
.menu-list {
flex: 1;
height: 142rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
border-radius: 30rpx;
overflow: visible;
transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.2), background 0.2s ease, box-shadow 0.2s ease;
}
.menu-list:active {
background: rgba(255, 255, 255, 0.76);
transform: translateY(-5rpx) scale(0.95);
box-shadow: 0 10rpx 20rpx rgba(0, 35, 28, 0.06);
}
.menu-list img {
width: 76rpx;
height: 76rpx;
display: block;
margin: 0 auto;
position: relative;
z-index: 2;
}
.planet-reminder-badge {
position: absolute;
right: 8rpx;
top: 6rpx;
min-width: 36rpx;
height: 34rpx;
padding: 0 10rpx;
border-radius: 999rpx;
background: linear-gradient(135deg, #ff4f8b 0%, #ff8a3d 100%);
border: 3rpx solid rgba(255, 255, 255, 0.96);
box-shadow: 0 10rpx 22rpx rgba(255, 86, 126, 0.34), 0 0 0 2rpx rgba(255, 214, 229, 0.75);
color: #fff;
font-size: 19rpx;
font-weight: 900;
line-height: 34rpx;
text-align: center;
white-space: nowrap;
z-index: 6;
}
.planet-reminder-badge::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 100%;
height: 100%;
border-radius: inherit;
background: rgba(255, 93, 126, 0.32);
transform: translate(-50%, -50%);
animation: reminderBadgePulse 1.8s ease-out infinite;
z-index: -1;
}
.planet-reminder-badge text {
position: relative;
z-index: 1;
}
.planet-win-badge {
right: 2rpx;
top: -10rpx;
height: 30rpx;
padding: 0 10rpx;
font-size: 16rpx;
line-height: 30rpx;
letter-spacing: 1rpx;
transform: scale(0.92);
transform-origin: right top;
}
.ie-badge {
right: 4rpx;
top: 4rpx;
min-width: 34rpx;
height: 34rpx;
padding: 0 9rpx;
background: linear-gradient(135deg, #12c98a 0%, #08794f 100%);
box-shadow: 0 10rpx 22rpx rgba(8, 121, 79, 0.32), 0 0 0 2rpx rgba(198, 255, 144, 0.76);
color: #fff;
}
.ie-badge::after {
background: rgba(18, 201, 138, 0.32);
}
@keyframes reminderBadgePulse {
0% {
opacity: 0.72;
transform: translate(-50%, -50%) scale(1);
}
100% {
opacity: 0;
transform: translate(-50%, -50%) scale(1.9);
}
}
.menu-list:nth-child(2) img {
animation-delay: 0.3s;
}
.menu-list:nth-child(3) img {
animation-delay: 0.6s;
}
.menu-list:nth-child(4) img {
animation-delay: 0.9s;
}
.menu-list:nth-child(5) img {
animation-delay: 1.2s;
}
.menu-name {
text-align: center;
font-size: 21rpx;
font-weight: 900;
margin-top: 6rpx;
color: #183f36;
line-height: 28rpx;
position: relative;
z-index: 2;
text-shadow: 0 1rpx 0 rgba(255, 255, 255, 0.85);
white-space: nowrap;
}
.menu-desc {
margin-top: 0;
color: rgba(18, 73, 63, 0.58);
font-size: 17rpx;
font-weight: 800;
line-height: 22rpx;
position: relative;
z-index: 2;
white-space: nowrap;
}
.world-light {
width: 96rpx;
height: 96rpx;
position: absolute;
left: 50%;
top: 10rpx;
margin-left: -48rpx;
border-radius: 50%;
background: radial-gradient(circle, rgba(166, 255, 234, 0.62) 0%, rgba(166, 255, 234, 0) 68%);
box-shadow: 0 0 24rpx rgba(166, 255, 234, 0.32);
z-index: 1;
}
.world-food .world-light {
background: radial-gradient(circle, rgba(255, 232, 151, 0.72) 0%, rgba(255, 232, 151, 0) 68%);
}
.world-store .world-light {
background: radial-gradient(circle, rgba(205, 233, 255, 0.72) 0%, rgba(205, 233, 255, 0) 68%);
}
.world-luck .world-light {
background: radial-gradient(circle, rgba(255, 203, 229, 0.72) 0%, rgba(255, 203, 229, 0) 68%);
}
.world-fish .world-light {
background: radial-gradient(circle, rgba(198, 255, 144, 0.62) 0%, rgba(198, 255, 144, 0) 68%);
}
.world-dot {
width: 10rpx;
height: 10rpx;
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 0 16rpx rgba(166, 255, 234, 0.9);
z-index: 2;
animation: none;
}
.world-dot-a {
left: 18rpx;
top: 34rpx;
}
.world-dot-b {
right: 18rpx;
top: 48rpx;
animation-delay: 0.8s;
}
.world-dot-c {
left: 24rpx;
bottom: 50rpx;
animation-delay: 1.4s;
}
.like-box,
.daimai-box {
width: 95%;
margin: 12rpx auto;
}
.daimai-tab {
display: flex;
align-items: center;
height: 88rpx;
padding: 8rpx;
margin: 0 8rpx;
box-sizing: border-box;
position: sticky;
top: 0;
z-index: 97;
border-radius: 34rpx;
background: rgba(255, 255, 255, 0.62);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.daimai-sticky-cover {
width: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 94;
pointer-events: none;
background:
linear-gradient(180deg, rgba(246, 255, 251, 1) 0%, rgba(246, 255, 251, 1) 78%, rgba(246, 255, 251, 0.92) 92%, rgba(246, 255, 251, 0) 100%),
url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;
background-size: 100% 100%, 100% 260rpx;
}
.earn-guide {
height: 64rpx;
margin: 0 8rpx 8rpx;
padding: 0 12rpx 0 18rpx;
box-sizing: border-box;
border-radius: 16rpx;
background:
radial-gradient(circle at 10% 0%, rgba(255, 255, 255, 0.9) 0, rgba(255, 255, 255, 0) 74rpx),
linear-gradient(90deg, rgba(236, 255, 248, 0.98) 0%, rgba(255, 252, 237, 0.98) 58%, rgba(255, 238, 226, 0.98) 100%);
border: 1px solid rgba(255, 255, 255, 0.88);
box-shadow: 0 10rpx 24rpx rgba(74, 151, 111, 0.08), inset 0 1rpx 0 rgba(255, 255, 255, 0.9);
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
.earn-guide-light {
width: 180rpx;
height: 100rpx;
background: linear-gradient(105deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.74) 48%, rgba(255, 255, 255, 0) 100%);
position: absolute;
top: -18rpx;
left: -210rpx;
transform: rotate(12deg);
animation: seckillEntrySweep 5.2s ease-in-out infinite;
}
.earn-guide-icon {
width: 48rpx;
height: 48rpx;
margin-right: 12rpx;
display: flex;
align-items: center;
justify-content: center;
color: #139c7d;
font-size: 31rpx;
line-height: 1;
position: relative;
z-index: 1;
}
.earn-guide-main {
color: #0c6958;
font-size: 26rpx;
font-weight: 900;
letter-spacing: 1rpx;
position: relative;
z-index: 1;
white-space: nowrap;
}
.earn-guide-tag {
height: 36rpx;
margin-left: auto;
padding: 0 12rpx;
border-radius: 999rpx;
/* background: rgba(255, 117, 88, 0.14); */
color: #ff7a3f;
font-size: 22rpx;
font-weight: 900;
line-height: 36rpx;
position: relative;
z-index: 1;
white-space: nowrap;
}
.earn-guide-arrow {
width: 38rpx;
height: 38rpx;
margin-left: 8rpx;
border-radius: 50%;
background: rgba(255, 255, 255, 0.88);
color: #ffb079;
font-size: 36rpx;
font-weight: 900;
line-height: 34rpx;
text-align: center;
box-shadow: 0 4rpx 12rpx rgba(255, 152, 82, 0.12);
position: relative;
z-index: 1;
}
.daimai-tab--sticky {
background: rgba(255, 255, 255, 1);
box-shadow: 0 16rpx 36rpx rgba(130, 84, 43, 0.08);
}
.page1.is-sticky .daimai-tab,
.page1.is-sticky .title-sort,
.page1.is-sticky .sort-text {
position: sticky;
transform: translateZ(0);
}
.page1.is-sticky .daimai-tab {
z-index: 97;
}
.page1.is-sticky .title-sort {
z-index: 96;
}
.page1.is-sticky .sort-text {
z-index: 95;
}
.daimai-tab-item {
flex: 1;
min-width: 0;
height: 68rpx;
margin-right: 10rpx;
border-radius: 26rpx;
border: 1px solid rgba(255, 184, 116, 0.16);
background: rgba(255, 252, 244, 0.82);
box-shadow: 0 8rpx 22rpx rgba(130, 84, 43, 0.04);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
color: #7d756c;
transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.35), box-shadow 0.22s ease, background 0.22s ease, color 0.22s ease;
}
.daimai-tab-item:last-child {
margin-right: 0;
}
.daimai-tab-item:active {
transform: scale(0.94);
box-shadow: 0 4rpx 12rpx rgba(255, 150, 93, 0.14);
}
.daimai-tab-item.active {
border-color: rgba(255, 188, 119, 0.72);
background: linear-gradient(135deg, #fff7d7 0%, #ffd8a8 45%, #ffb8a3 100%);
box-shadow: 0 14rpx 30rpx rgba(255, 158, 100, 0.28);
color: #63351d;
transform: translateY(-4rpx);
animation: daimaiTabPop 0.34s cubic-bezier(0.2, 0.9, 0.3, 1.35);
}
.daimai-tab-item.active:active {
transform: translateY(-2rpx) scale(0.96);
}
.daimai-tab-glow {
width: 88rpx;
height: 88rpx;
border-radius: 50%;
background: rgba(255, 255, 255, 0.42);
position: absolute;
top: -38rpx;
right: -26rpx;
opacity: 0;
transform: scale(0.6);
transition: opacity 0.22s ease, transform 0.26s ease;
}
.daimai-tab-item.active .daimai-tab-glow {
opacity: 1;
transform: scale(1.08);
}
.daimai-tab-icon {
width: 40rpx;
height: 40rpx;
margin-right: 8rpx;
border-radius: 14rpx;
background: rgba(255, 221, 176, 0.56);
color: #724126;
font-size: 22rpx;
font-weight: 900;
line-height: 40rpx;
text-align: center;
z-index: 1;
}
.daimai-tab-item.active .daimai-tab-icon {
background: rgba(255, 255, 255, 0.5);
color: #63351d;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.36);
}
.daimai-tab-info {
min-width: 0;
display: flex;
align-items: center;
z-index: 1;
}
.daimai-tab-label {
font-size: 24rpx;
font-weight: 900;
white-space: nowrap;
letter-spacing: 1rpx;
}
.daimai-tab-count {
min-width: 30rpx;
height: 30rpx;
margin-left: 6rpx;
padding: 0 8rpx;
border-radius: 999rpx;
background: rgba(255, 221, 176, 0.66);
color: #724126;
font-size: 20rpx;
font-weight: 900;
line-height: 30rpx;
text-align: center;
box-sizing: border-box;
}
.daimai-tab-item.active .daimai-tab-count {
background: rgba(255, 255, 255, 0.88);
color: #ff734d;
box-shadow: 0 4rpx 12rpx rgba(255, 115, 77, 0.18);
}
@keyframes daimaiTabPop {
0% {
transform: translateY(0) scale(0.94);
}
65% {
transform: translateY(-6rpx) scale(1.04);
}
100% {
transform: translateY(-4rpx) scale(1);
}
}
.like-head {
display: flex;
align-items: center;
justify-content: space-between;
}
.like-title {
width: 218rpx;
height: 64rpx;
filter: drop-shadow(0 8rpx 10rpx rgba(0, 35, 28, 0.06));
}
.like-title img {
width: 100%;
height: 100%;
background-size: 100%;
}
.seckill-entry {
width: 198rpx;
height: 56rpx;
padding: 0 10rpx;
box-sizing: border-box;
border-radius: 999rpx;
border: 1px solid rgba(255, 255, 255, 0.52);
background:
radial-gradient(circle at 18% 4%, rgba(255, 255, 255, 0.55) 0, rgba(255, 255, 255, 0) 76rpx),
linear-gradient(135deg, #ff4b27 0%, #ff8b18 48%, #ffd257 100%);
box-shadow: 0 16rpx 30rpx rgba(255, 91, 39, 0.24), 0 0 40rpx rgba(255, 188, 80, 0.26);
display: flex;
align-items: center;
position: relative;
overflow: hidden;
animation: none;
}
.seckill-entry--in-card {
position: absolute;
top: 16rpx;
right: 20rpx;
z-index: 4;
}
.seckill-entry:active {
transform: scale(0.96);
}
.seckill-entry-light {
width: 190rpx;
height: 120rpx;
background: linear-gradient(105deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.76) 46%, rgba(255, 255, 255, 0) 100%);
position: absolute;
top: -20rpx;
left: -220rpx;
transform: rotate(12deg);
animation: seckillEntrySweep 4.8s ease-in-out infinite;
}
.seckill-entry-icon {
width: 54rpx;
height: 54rpx;
margin-right: 10rpx;
border-radius: 50%;
background: rgba(255, 255, 255, 0.92);
color: #ff4f24;
font-size: 26rpx;
font-weight: 900;
line-height: 54rpx;
text-align: center;
box-shadow: inset 0 -4rpx 0 rgba(255, 197, 69, 0.38);
position: relative;
z-index: 1;
animation: none;
}
.seckill-entry-info {
flex: 1;
min-width: 0;
position: relative;
z-index: 1;
color: #fff;
}
.seckill-entry-title {
font-size: 27rpx;
font-weight: 900;
line-height: 62rpx;
letter-spacing: 1rpx;
text-shadow: 0 3rpx 8rpx rgba(183, 35, 0, 0.24);
}
.seckill-entry-btn {
width: 48rpx;
height: 48rpx;
border-radius: 50%;
background: #fff;
color: #ff3d18;
font-size: 24rpx;
font-weight: 900;
line-height: 48rpx;
text-align: center;
position: relative;
z-index: 1;
box-shadow: 0 8rpx 18rpx rgba(158, 32, 0, 0.22);
animation: seckillBtnBeat 2.8s ease-in-out infinite;
}
.heat-dot {
width: 12rpx;
height: 12rpx;
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 0 16rpx rgba(255, 255, 255, 0.88);
z-index: 1;
animation: heatParticle 3.2s ease-in-out infinite;
}
.heat-dot-a {
left: 34rpx;
top: 18rpx;
}
.heat-dot-b {
right: 74rpx;
bottom: 16rpx;
animation-delay: 0.5s;
}
.like-content-box {
height: 400rpx;
background:
radial-gradient(circle at 8% 12%, rgba(255, 255, 255, 0.92) 0, rgba(255, 255, 255, 0) 118rpx),
radial-gradient(circle at 86% 88%, rgba(116, 255, 216, 0.36) 0, rgba(116, 255, 216, 0) 150rpx),
linear-gradient(135deg, rgba(229, 255, 247, 0.96) 0%, rgba(255, 250, 226, 0.9) 46%, rgba(221, 255, 246, 0.96) 100%),
url("https://jewel-shop.oss-cn-beijing.aliyuncs.com/6d65d349d68f40e7886c978190b6ea33.png") no-repeat;
background-size: 100%, 100%, 100%, 100%;
margin-top: 0;
display: flex;
border-radius: 34rpx;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.82);
box-shadow: 0 22rpx 52rpx rgba(50, 137, 95, 0.14), inset 0 1rpx 0 rgba(255, 255, 255, 0.88);
position: relative;
}
.brand-memory-strip {
position: absolute;
left: 20rpx;
right: 240rpx;
top: 26rpx;
height: 36rpx;
display: flex;
align-items: center;
overflow: hidden;
z-index: 4;
pointer-events: none;
}
.brand-memory-strip text {
flex-shrink: 0;
height: 32rpx;
margin-right: 10rpx;
padding: 0 12rpx;
border-radius: 999rpx;
background: rgba(255, 255, 255, 0.8);
color: #0f695b;
font-size: 18rpx;
font-weight: 900;
line-height: 32rpx;
box-shadow: 0 6rpx 14rpx rgba(0, 35, 28, 0.06);
}
.group-flat-row {
position: absolute;
left: 8rpx;
right: 8rpx;
top: 84rpx;
bottom: 20rpx;
display: flex;
z-index: 3;
}
.flat-card {
flex: 1;
min-width: 0;
margin: 0 6rpx;
padding: 12rpx 12rpx 16rpx;
box-sizing: border-box;
display: flex;
flex-direction: column;
border-radius: 26rpx;
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(255, 255, 255, 0.88);
box-shadow: 0 12rpx 26rpx rgba(0, 35, 28, 0.06);
overflow: hidden;
position: relative;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.flat-card:active {
box-shadow: 0 16rpx 30rpx rgba(0, 35, 28, 0.1);
transform: scale(0.97);
}
.flat-card-img {
width: 100%;
height: 140rpx;
position: relative;
}
.flat-card-img img {
width: 100%;
height: 100%;
border-radius: 20rpx;
object-fit: cover;
box-shadow: 0 8rpx 16rpx rgba(0, 35, 28, 0.08);
}
.flat-card-tag {
position: absolute;
top: 1rpx;
left: 0;
height: 32rpx;
padding: 0 14rpx;
border-radius: 999rpx;
background: rgba(255, 255, 255, 0.94);
color: #ff6a23;
font-size: 17rpx;
font-weight: 900;
line-height: 32rpx;
box-shadow: 0 6rpx 14rpx rgba(255, 110, 36, 0.14);
}
.flat-card-name {
margin-top: 12rpx;
height: 34rpx;
line-height: 34rpx;
font-size: 23rpx;
font-weight: 900;
color: #173f36;
text-align: left;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.flat-card-price {
height: 40rpx;
line-height: 40rpx;
margin-top: 4rpx;
font-size: 27rpx;
font-weight: 900;
color: #ff6a23;
text-align: left;
white-space: nowrap;
overflow: hidden;
}
.flat-card-foot {
margin-top: auto;
display: flex;
align-items: center;
justify-content: space-between;
min-width: 0;
}
.flat-card-foot text {
flex: 1;
min-width: 0;
font-size: 19rpx;
font-weight: 800;
color: rgba(18, 73, 63, 0.55);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.flat-card-btn {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 60rpx;
width: 60rpx;
height: 36rpx;
margin-left: 8rpx;
border-radius: 999rpx;
border: 1px solid rgba(165, 255, 226, 0.9);
background: linear-gradient(135deg, #7be8c8 0%, #e4fff4 100%);
color: #16866d;
font-size: 18rpx;
font-weight: 900;
white-space: nowrap;
box-shadow: 0 6rpx 14rpx rgba(27, 191, 156, 0.14);
}
@keyframes seckillEntryFloat {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-4rpx);
}
}
@keyframes seckillEntrySweep {
0% {
left: -220rpx;
opacity: 0;
}
34% {
opacity: 0.9;
}
72%,
100% {
left: 470rpx;
opacity: 0;
}
}
@keyframes seckillIconPulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.08);
}
}
@keyframes seckillBtnBeat {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.08);
}
}
@keyframes groupCardFloat {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-5rpx);
}
}
@keyframes hotBadgePulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.1) rotate(-3deg);
}
}
@keyframes groupMemberPulse {
0%,
100% {
transform: rotate(-4deg) scale(1);
}
50% {
transform: rotate(-4deg) scale(1.06);
}
}
@keyframes groupPricePop {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.06);
}
}
@keyframes groupCtaNudge {
0%,
100% {
transform: translateX(0);
}
50% {
transform: translateX(3rpx);
}
}
.list-1 {
width: 98%;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(253, 255, 250, 0.96) 100%);
border: 1px solid rgba(255, 255, 255, 0.86);
border-radius: 34rpx;
margin: 22rpx auto 0;
overflow: hidden;
position: relative;
z-index: 1;
}
.daoda-time-row {
display: flex;
align-items: center;
margin: 20rpx 0 20rpx 20rpx;
}
.appointment-delivery-tag {
height: 48rpx;
margin-right: 12rpx;
padding: 0 16rpx;
border-radius: 14rpx;
background: linear-gradient(135deg, #ff8f1f 0%, #ff6a3d 100%);
color: #fff;
font-size: 22rpx;
font-weight: 800;
line-height: 48rpx;
box-shadow: 0 8rpx 18rpx rgba(255, 106, 61, 0.16);
}
.daoda-time {
width: 242rpx;
height: 48rpx;
font-size: 24rpx;
padding-left: 14rpx;
font-weight: 700;
border-radius: 14rpx;
line-height: 48rpx;
text-align: left;
background: rgba(166, 255, 234, 0.42);
color: #125e50;
margin: 0;
}
.shangjia {
width: 100%;
height: 70rpx;
margin: 0 auto;
line-height: 70rpx;
padding-left: 28rpx;
display: flex;
}
.maotou {
width: 90rpx;
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/bdb867ba5a8a4e13b7e61a87f61148a1.png') no-repeat;
height: 90rpx;
background-size: 100%;
position: absolute;
top: -60rpx;
right: 10rpx;
text-align: center;
line-height: 90rpx;
font-weight: 900;
font-size: 24rpx;
}
.maotou1 {
width: 90rpx;
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/6f9117df70b048e2b35badb5d3338706.png') no-repeat;
height: 74rpx;
background-size: 100%;
position: absolute;
top: -60rpx;
right: 10rpx;
text-align: center;
line-height: 90rpx;
font-weight: 900;
font-size: 24rpx;
}
.maotou2 {
width: 90rpx;
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8204237989b34bc88e47acd39b98aadf.png') no-repeat;
height: 90rpx;
background-size: 100%;
position: absolute;
top: -60rpx;
right: 10rpx;
text-align: center;
line-height: 90rpx;
font-weight: 900;
font-size: 24rpx;
}
.maotou3 {
width: 90rpx;
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/a1584a13e9db4b6fbcc66890219d0018.png') no-repeat;
height: 90rpx;
background-size: 100%;
position: absolute;
top: -60rpx;
right: 10rpx;
text-align: center;
line-height: 90rpx;
font-weight: 900;
font-size: 24rpx;
}
.order-page {
width: 95%;
position: relative;
height: auto;
border-radius: 32rpx;
border: 1px solid rgba(166, 255, 234, 0.78);
background: rgba(255, 255, 255, 0.74);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
margin: 0 auto;
}
.shangjialogo {
width: 40rpx;
height: 40rpx;
margin: 8rpx 20rpx 0 28rpx;
img {
width: 100%;
height: 100%;
background-size: 100%;
}
}
.shangpin {
display: flex;
}
.shangpintu {
width: 120rpx;
height: 120rpx;
margin-left: 20rpx;
img {
width: 100%;
height: 100%;
background-size: 100%;
}
}
.shangpinxinxi {
padding: 0 20rpx;
flex: 1;
}
.pinming {
font-size: 24rpx;
font-weight: 700;
}
.guige {
font-size: 20rpx;
height: 56rpx;
line-height: 56rpx;
color: #777;
}
.shuliang {
font-size: 20rpx;
display: flex;
height: 40rpx;
line-height: 40rpx;
color: #777;
}
.qu-song {
width: 95%;
margin: 0 auto;
font-size: 24rpx;
}
.qu-box {
display: flex;
}
.qu-tu {
width: 50rpx;
height: 50rpx;
img {
width: 100%;
height: 100%;
background-size: 100%;
}
}
.qu-text {
display: flex;
flex: 1;
height: auto;
line-height: 50rpx;
color: #40534d;
width: 90%;
}
.qu-left {
width: 80%;
padding-left: 10rpx;
word-wrap: break-word;
word-break: break-all;
white-space: normal;
}
.qu-right {
width: 20%;
text-align: right;
padding-right: 10rpx;
font-weight: 700;
}
.yongjin {
height: 50rpx;
display: flex;
font-size: 24rpx;
line-height: 50rpx;
width: 95%;
margin: 20rpx auto;
color: #40534d;
}
.qiangdan-btn {
width: 100%;
height: 100rpx;
border-radius: 999rpx;
background: linear-gradient(135deg, rgba(246, 255, 252, 0.98) 0%, rgba(235, 255, 249, 0.96) 100%);
border: 1px solid rgba(166, 255, 234, 0.72);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72), 0 12rpx 26rpx rgba(0, 35, 28, 0.06);
position: relative;
overflow: hidden;
touch-action: pan-y;
}
.qiangdan-btn--swiping {
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.62), 0 6rpx 14rpx rgba(0, 35, 28, 0.04);
}
.qiangdan-btn--swiping .qiangdan-progress {
background: rgba(108, 226, 202, 0.52);
}
.qiangdan-btn--swiping .qiangdan-thumb {
box-shadow: 0 4rpx 12rpx rgba(0, 35, 28, 0.1);
}
.qiangdan-btn--low-perf {
box-shadow: none;
}
.qiangdan-btn--low-perf .qiangdan-progress {
background: rgba(108, 226, 202, 0.42);
}
.qiangdan-btn--low-perf .qiangdan-thumb {
box-shadow: none;
}
.qiangdan-progress {
width: 100%;
height: 100%;
border-radius: 999rpx;
background: linear-gradient(90deg, rgba(166, 255, 234, 0.42) 0%, rgba(108, 226, 202, 0.78) 100%);
transform: translate3d(0, 0, 0) scaleX(0);
transform-origin: left center;
will-change: transform;
backface-visibility: hidden;
}
.qiangdan-text {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
color: #2a665b;
font-size: 28rpx;
font-weight: 900;
letter-spacing: 2rpx;
}
.qiangdan-thumb {
width: 82rpx;
height: 82rpx;
border-radius: 50%;
position: absolute;
left: 0;
top: 9rpx;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.96);
border: 1px solid rgba(166, 255, 234, 0.9);
box-shadow: 0 10rpx 22rpx rgba(0, 35, 28, 0.12);
color: #1b7a69;
font-size: 28rpx;
font-weight: 900;
will-change: transform;
backface-visibility: hidden;
}
.dispatch-action-box {
width: 95%;
margin: 20rpx auto 24rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.dispatch-action-box--single {
margin-bottom: 20rpx;
}
.reject-order-btn {
min-width: 220rpx;
height: 58rpx;
margin-top: 14rpx;
padding: 0 34rpx;
border-radius: 999rpx;
border: 1px solid rgba(255, 108, 96, 0.5);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 244, 241, 0.96) 100%);
box-shadow: 0 8rpx 18rpx rgba(255, 108, 96, 0.12);
box-sizing: border-box;
color: #e45c50;
font-size: 24rpx;
font-weight: 800;
line-height: 58rpx;
text-align: center;
transition: transform 0.18s ease, box-shadow 0.18s ease;
&:active {
transform: scale(0.96);
box-shadow: 0 4rpx 10rpx rgba(255, 108, 96, 0.1);
}
}
.reject-order-btn--disabled {
opacity: 0.65;
}
.paotui-title {
display: flex;
flex: 1;
line-height: 88rpx;
text-align: right;
padding-right: 20rpx;
}
.paotui-text {
font-size: 28rpx;
color: red;
font-weight: bold;
flex: 1;
}
.paotui-num {
font-size: 24rpx;
padding: 0 10rpx;
}
.popup-area-content {
align-items: center;
justify-content: center;
height: auto;
background-color: #fff;
padding: 10px 20px;
border-radius: 10px;
}
.popup-area-title {
font-size: 36rpx;
font-weight: bold;
text-align: center;
position: relative;
margin-top: 10px;
}
.popup-area-container {
margin-top: 20rpx;
height: 100rpx;
border-radius: 20rpx;
background: #088FEB;
line-height: 100rpx;
text-align: center;
border-bottom: 1px solid #eee;
border-top: 1px solid #eee;
color: #fff;
padding: 0 10px;
}
.campus-area-popup {
position: relative;
box-sizing: border-box;
width: 650rpx;
min-height: 620rpx;
max-height: 78vh;
overflow: hidden;
padding: 38rpx 30rpx 30rpx;
border: 1rpx solid rgba(255, 255, 255, 0.78);
border-radius: 42rpx;
background:
radial-gradient(circle at 16% 8%, rgba(227, 255, 150, 0.34), rgba(227, 255, 150, 0) 220rpx),
radial-gradient(circle at 92% 18%, rgba(166, 255, 234, 0.44), rgba(166, 255, 234, 0) 260rpx),
rgba(255, 255, 255, 0.92);
box-shadow: 0 30rpx 86rpx rgba(7, 61, 51, 0.18);
backdrop-filter: blur(24rpx);
}
.area-popup-glow {
position: absolute;
border-radius: 999rpx;
pointer-events: none;
}
.area-popup-glow-a {
top: -82rpx;
right: -68rpx;
width: 230rpx;
height: 230rpx;
background: rgba(166, 255, 234, 0.46);
filter: blur(10rpx);
}
.area-popup-glow-b {
left: -56rpx;
bottom: 82rpx;
width: 180rpx;
height: 180rpx;
background: rgba(227, 255, 150, 0.34);
filter: blur(14rpx);
}
.campus-area-header {
position: relative;
z-index: 1;
text-align: center;
}
.campus-area-kicker {
display: inline-flex;
align-items: center;
justify-content: center;
height: 44rpx;
padding: 0 22rpx;
border: 1rpx solid rgba(255, 255, 255, 0.82);
border-radius: 999rpx;
background: linear-gradient(90deg, rgba(227, 255, 150, 0.72), rgba(166, 255, 234, 0.72));
box-shadow: 0 10rpx 26rpx rgba(13, 114, 82, 0.1);
color: #073d33;
font-size: 22rpx;
font-weight: 700;
}
.campus-area-title {
margin-top: 22rpx;
color: #073d33;
font-size: 38rpx;
font-weight: 900;
line-height: 1.25;
}
.campus-area-subtitle {
width: 500rpx;
margin: 12rpx auto 0;
color: rgba(7, 61, 51, 0.52);
font-size: 23rpx;
line-height: 1.5;
}
.campus-area-search {
position: relative;
z-index: 1;
display: flex;
align-items: center;
height: 82rpx;
margin-top: 30rpx;
padding: 0 26rpx;
border: 1rpx solid rgba(7, 61, 51, 0.06);
border-radius: 999rpx;
background: rgba(255, 255, 255, 0.72);
box-shadow: inset 0 1rpx 0 rgba(255, 255, 255, 0.92), 0 14rpx 34rpx rgba(7, 61, 51, 0.08);
}
.area-search-icon {
margin-right: 14rpx;
color: rgba(7, 61, 51, 0.5);
font-size: 34rpx;
font-weight: 700;
}
.campus-area-search input {
flex: 1;
height: 82rpx;
color: #073d33;
font-size: 27rpx;
}
.area-search-placeholder {
color: rgba(7, 61, 51, 0.34);
}
.campus-area-list {
position: relative;
z-index: 1;
height: 360rpx;
max-height: 610rpx;
margin-top: 24rpx;
}
.campus-area-item {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 92rpx;
margin-bottom: 16rpx;
padding: 0 18rpx 0 24rpx;
border: 1rpx solid rgba(255, 255, 255, 0.78);
border-radius: 28rpx;
background: rgba(255, 255, 255, 0.66);
box-shadow: 0 12rpx 30rpx rgba(7, 61, 51, 0.07);
color: #073d33;
}
.campus-area-item:active {
transform: scale(0.985);
opacity: 0.9;
}
.area-item-main {
display: flex;
align-items: center;
min-width: 0;
font-size: 28rpx;
font-weight: 800;
}
.area-item-main text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.area-item-dot {
flex-shrink: 0;
width: 16rpx;
height: 16rpx;
margin-right: 16rpx;
border-radius: 50%;
background: linear-gradient(135deg, #e3ff96, #a6ffea);
box-shadow: 0 0 18rpx rgba(13, 114, 82, 0.22);
}
.area-item-action {
flex-shrink: 0;
height: 50rpx;
margin-left: 18rpx;
padding: 0 22rpx;
border-radius: 999rpx;
background: linear-gradient(90deg, rgba(227, 255, 150, 0.95), rgba(166, 255, 234, 0.95));
box-shadow: 0 10rpx 24rpx rgba(13, 114, 82, 0.14), 0 0 22rpx rgba(166, 255, 234, 0.42);
color: #073d33;
font-size: 22rpx;
font-weight: 900;
line-height: 50rpx;
}
.campus-area-empty {
padding: 70rpx 0 56rpx;
text-align: center;
}
.area-empty-title {
color: #073d33;
font-size: 28rpx;
font-weight: 800;
}
.area-empty-desc {
margin-top: 12rpx;
color: rgba(7, 61, 51, 0.45);
font-size: 23rpx;
}
.chaoda {
height: 30rpx;
line-height: 30rpx;
margin: 10rpx 0 0 20rpx;
padding: 0 10rpx;
background: rgba(255, 117, 88, 1);
color: #fff;
border-radius: 10rpx;
font-size: 20rpx;
}
.beizhu {
width: 95%;
margin: 20rpx auto;
background: rgba(255, 117, 88, 0.08);
border: 1px solid rgba(255, 117, 88, 0.12);
border-radius: 20rpx;
height: 120rpx;
padding: 20rpx;
color: rgba(255, 57, 57, 1);
}
.delivery-time-warning {
width: 95%;
margin: 20rpx auto 0;
padding: 18rpx 20rpx;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(255, 117, 88, 0.08);
border: 1px solid rgba(255, 117, 88, 0.18);
border-radius: 20rpx;
color: rgba(255, 57, 57, 1);
font-size: 24rpx;
line-height: 36rpx;
}
.delivery-time-warning-text {
flex: 1;
padding-right: 18rpx;
}
.delivery-time-warning-phone {
width: 55rpx;
height: 55rpx;
flex-shrink: 0;
}
.title-sort {
height: 100rpx;
display: flex;
position: sticky;
top: 0;
z-index: 96;
background: rgba(255, 255, 255, 1);
padding: 20rpx 10rpx 0;
box-sizing: border-box;
box-shadow: 0 12rpx 26rpx rgba(0, 35, 28, 0.05);
margin: 0 10px;
font-size: 12px;
}
.title-sort--sticky {
animation: stickyPanelIn 0.24s ease;
}
.sort-text {
height: auto;
display: flex;
position: sticky;
top: 0;
z-index: 95;
background: rgba(255, 255, 255, 0.96);
padding: 20rpx 10rpx 10rpx;
box-sizing: border-box;
box-shadow: 0 12rpx 22rpx rgba(0, 35, 28, 0.04);
animation: filterChipIn 0.22s ease;
border-bottom-left-radius: 26rpx;
border-bottom-right-radius: 26rpx;
margin: 0 10px;
}
.sort-text-inner {
display: flex;
align-items: center;
flex-wrap: wrap;
width: 100%;
}
.sort-member {
height: 60rpx;
line-height: 60rpx;
text-align: center;
background: rgba(248, 255, 250, 0.86);
width: 24%;
margin-right: 4%;
border: 1px solid rgba(166, 255, 234, 0.46);
border-radius: 24rpx;
color: #40534d;
font-weight: 700;
box-shadow: 0 8rpx 18rpx rgba(0, 35, 28, 0.04);
}
.sort-value {
width: 160rpx;
height: auto;
max-height: 300rpx;
overflow: scroll;
background: rgba(0, 35, 28, 0.82);
position: absolute;
top: 76rpx;
right: 0;
border-radius: 24rpx;
color: #fff;
font-size: 22rpx;
box-shadow: 0 16rpx 34rpx rgba(0, 35, 28, 0.16);
}
.sort-value1 {
border-bottom: 1px solid #eee;
}
.guize1-qusong {
display: flex;
align-items: center;
margin: 0 18rpx 14rpx 0;
max-width: 300rpx;
animation: filterChipIn 0.22s ease;
}
.qusong1 {
width: 40rpx;
height: 40rpx;
background: linear-gradient(90deg, #e3ff96, #a6ffea);
border-radius: 40rpx;
text-align: center;
line-height: 40rpx;
font-size: 20rpx;
z-index: 80;
}
.qusong2 {
height: 40rpx;
font-size: 22rpx;
line-height: 38rpx;
text-align: center;
background: rgba(166, 255, 234, 0.62);
padding: 0 20rpx;
margin-left: -14rpx;
font-weight: 700;
border-top-right-radius: 40rpx;
border-bottom-right-radius: 40rpx;
max-width: 230rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.commission-chip {
background: rgba(255, 221, 176, 0.72);
}
.clear-filter {
height: 40rpx;
padding: 0 20rpx;
margin-bottom: 14rpx;
border-radius: 999rpx;
background: rgba(0, 191, 255, 0.08);
color: #00A8D8;
font-size: 22rpx;
font-weight: 800;
line-height: 40rpx;
}
.delivery-list-wrap {
/* 改为单一 page-scroll:内容跟随页面滚动,不再是独立 scroll-view */
width: 100%;
position: relative;
z-index: 1;
}
.empty-delivery {
width: 98%;
min-height: 1120rpx;
margin: 24rpx auto 0;
padding: 54rpx 36rpx;
box-sizing: border-box;
border-radius: 36rpx;
border: 1px solid rgba(166, 255, 234, 0.5);
background:
radial-gradient(circle at 78% 8%, rgba(255, 216, 168, 0.28) 0, rgba(255, 216, 168, 0) 150rpx),
linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 255, 251, 0.96) 100%);
box-shadow: 0 16rpx 38rpx rgba(0, 35, 28, 0.06);
text-align: center;
animation: emptyFloatIn 0.32s ease;
}
.empty-delivery-icon {
width: 104rpx;
height: 104rpx;
margin: 0 auto 22rpx;
border-radius: 36rpx;
background: linear-gradient(135deg, #fff7d7 0%, #a6ffea 100%);
color: #125e50;
font-size: 28rpx;
font-weight: 900;
line-height: 104rpx;
box-shadow: 0 14rpx 26rpx rgba(0, 35, 28, 0.08);
}
.empty-delivery-title {
color: #243f38;
font-size: 30rpx;
font-weight: 900;
}
.empty-delivery-desc {
width: 88%;
margin: 14rpx auto 0;
color: #74817d;
font-size: 24rpx;
line-height: 38rpx;
}
.product-popup-content {
width: 680rpx;
max-height: 880rpx;
padding: 34rpx 28rpx 30rpx;
box-sizing: border-box;
overflow: scroll;
border-radius: 36rpx;
background:
radial-gradient(circle at 92% 4%, rgba(166, 255, 234, 0.38) 0, rgba(166, 255, 234, 0) 180rpx),
linear-gradient(180deg, #ffffff 0%, #f8fffc 100%);
box-shadow: 0 24rpx 56rpx rgba(0, 35, 28, 0.18);
}
.product-popup-header {
margin-bottom: 26rpx;
text-align: center;
}
.product-popup-title {
color: #143d35;
font-size: 36rpx;
font-weight: 900;
line-height: 48rpx;
}
.product-popup-subtitle {
margin-top: 8rpx;
color: #7b8a85;
font-size: 24rpx;
line-height: 34rpx;
}
.product-popup-list {
display: flex;
flex-direction: column;
gap: 20rpx;
}
.product-popup-card {
display: flex;
align-items: center;
padding: 22rpx;
border: 1px solid rgba(166, 255, 234, 0.58);
border-radius: 28rpx;
background: rgba(255, 255, 255, 0.88);
box-shadow: 0 12rpx 28rpx rgba(0, 35, 28, 0.06);
}
.product-popup-img {
width: 128rpx;
height: 128rpx;
flex-shrink: 0;
overflow: hidden;
border-radius: 22rpx;
background: #f0f5f3;
img {
width: 100%;
height: 100%;
background-size: 100%;
}
}
.product-popup-info {
flex: 1;
min-width: 0;
padding: 0 22rpx;
}
.product-popup-name {
color: #172f2a;
font-size: 30rpx;
font-weight: 900;
line-height: 42rpx;
}
.product-popup-spec {
display: flex;
align-items: flex-start;
margin-top: 16rpx;
}
.product-popup-label {
flex-shrink: 0;
height: 34rpx;
padding: 0 14rpx;
border-radius: 999rpx;
background: rgba(166, 255, 234, 0.72);
color: #126255;
font-size: 20rpx;
font-weight: 800;
line-height: 34rpx;
}
.product-popup-spec-text {
flex: 1;
margin-left: 12rpx;
color: #65736f;
font-size: 24rpx;
line-height: 34rpx;
word-break: break-all;
}
.product-popup-quantity {
width: 92rpx;
height: 92rpx;
flex-shrink: 0;
border-radius: 28rpx;
background: linear-gradient(135deg, #fff4ce 0%, #a6ffea 100%);
color: #103f36;
text-align: center;
box-shadow: 0 10rpx 20rpx rgba(0, 35, 28, 0.08);
}
.product-popup-quantity-num {
padding-top: 16rpx;
font-size: 30rpx;
font-weight: 900;
line-height: 34rpx;
}
.product-popup-quantity-label {
margin-top: 2rpx;
color: #52736b;
font-size: 20rpx;
line-height: 28rpx;
}
.product-popup-empty {
padding: 80rpx 20rpx;
border-radius: 28rpx;
background: rgba(247, 255, 251, 0.9);
color: #7b8a85;
font-size: 28rpx;
font-weight: 700;
text-align: center;
}
@keyframes stickyPanelIn {
0% {
opacity: 0.88;
transform: translateY(-8rpx);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes filterChipIn {
0% {
opacity: 0;
transform: translateY(-8rpx) scale(0.98);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes emptyFloatIn {
0% {
opacity: 0;
transform: translateY(18rpx);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.box1 {
width: 95%;
margin: 0 auto 20rpx;
background: #fff;
border-radius: 20rpx;
padding: 20rpx;
}
.goods-img {
width: 160rpx;
height: 160rpx;
position: relative;
img {
width: 100%;
background-size: 100%;
height: 100%;
}
}
.goods-content {
flex: 1;
padding-left: 20rpx;
}
.goods-name {
font-size: 32rpx;
font-weight: 900;
}
.goods-content-center {
display: flex;
margin: 16rpx 0;
color: #777;
}
.goods-content-bottom {
display: flex;
line-height: 56rpx;
color: #777;
}
.pintuan-left-price {
width: 50%;
text-align: right;
font-weight: 700;
color: #000;
}
.tishi-popup{
background:url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/629843c61a014d69bf3a1195f51a898b.png') no-repeat;
width: 300px;
height: 285px;
box-sizing: border-box;
background-size: 100% 100%;
position: relative;
text-align: center;
}
.tishi-copy {
position: absolute;
top: 72px;
left: 46px;
width: 194px;
}
.tishi-copy-title {
color: #21443c;
font-size: 16px;
font-weight: 900;
line-height: 23px;
letter-spacing: 0.2px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}
.tishi-copy-desc {
margin-top: 13px;
color: #6d7d78;
font-size: 14px;
font-weight: 700;
line-height: 21px;
letter-spacing: 0.1px;
}
.tishi-copy-highlight {
color: #ff7043;
font-weight: 900;
}
.box-hover {
background: rgba(248, 255, 237, 0.86);
}
</style>