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.
2628 lines
68 KiB
2628 lines
68 KiB
<template>
|
|
<view class="page1">
|
|
<view class="swiper-container">
|
|
<view class="swiper-page" v-if="currentIndex == 0">
|
|
<view style="position: relative;height: 545rpx;">
|
|
<view style="width:100%;height: 260rpx;position: fixed;top: 0;background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;z-index: 90;"
|
|
v-if="lastScrollTop>583"></view>
|
|
<!-- <view style="position: absolute;top: 110rpx;left: 20rpx;z-index: 999;">
|
|
<view @click="checkArea" v-if="areaName == ''">
|
|
点击选择区域
|
|
<uni-icons type="right" size="12" style="margin-left: 10rpx;"></uni-icons>
|
|
</view>
|
|
<view @click="checkArea" v-else>
|
|
{{areaName}}
|
|
<uni-icons type="right" size="12" style="margin-left: 10rpx;"></uni-icons>
|
|
</view>
|
|
</view> -->
|
|
<swiper class="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 :src="item.pic" alt="" />
|
|
</swiper-item>
|
|
</swiper>
|
|
<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: 170rpx;margin-top: -120rpx;">
|
|
<swiper-item>
|
|
<view class="order-msg-box">
|
|
<view class="order-msg-left">
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/ecd00dab1c9c44198d765bc08bc1bd71.png"
|
|
alt="" />
|
|
</view>
|
|
<view class="order-msg-center">
|
|
<view
|
|
style="font-weight: 700;font-size: 30rpx;line-height: 60rpx;margin-top: 5%;">
|
|
<text>拼团搭子哪里找</text>
|
|
</view>
|
|
<view style="font-size: 24rpx;">
|
|
隔壁宿舍全是宝！
|
|
</view>
|
|
</view>
|
|
<view class="order-msg-right" @tap.stop="$refs.pagesPopup.open()">
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/d93d893296ed46ea99cfd0e8e2835eaa.png"
|
|
alt="" />
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
<swiper-item>
|
|
<view class="order-msg-box">
|
|
<view class="order-msg-left">
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/ecd00dab1c9c44198d765bc08bc1bd71.png"
|
|
alt="" />
|
|
</view>
|
|
<view class="order-msg-center">
|
|
<view
|
|
style="font-weight: 700;font-size: 30rpx;line-height: 60rpx;margin-top: 5%;">
|
|
<text>这门“省钱课”</text>
|
|
</view>
|
|
<view style="font-size: 24rpx;">
|
|
拼团就是你的满分答案！
|
|
</view>
|
|
</view>
|
|
<view class="order-msg-right" @tap.stop="$refs.pagesPopup.open()">
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/d93d893296ed46ea99cfd0e8e2835eaa.png"
|
|
alt="" />
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
<swiper-item>
|
|
<view class="order-msg-box">
|
|
<view class="order-msg-left">
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/ecd00dab1c9c44198d765bc08bc1bd71.png"
|
|
alt="" />
|
|
</view>
|
|
<view class="order-msg-center">
|
|
<view
|
|
style="font-weight: 700;font-size: 30rpx;line-height: 60rpx;margin-top: 5%;">
|
|
<text>有件事你知道吗？</text>
|
|
</view>
|
|
<view style="font-size: 24rpx;">
|
|
拼团和期末不挂科一样重要！
|
|
</view>
|
|
</view>
|
|
<view class="order-msg-right" @tap.stop="$refs.pagesPopup.open()">
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/d93d893296ed46ea99cfd0e8e2835eaa.png"
|
|
alt="" />
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
<swiper class="swiper" vertical circular :autoplay="orderLists.length > 0"
|
|
:interval="onlineWorkerInterval" :duration="onlineWorkerDuration"
|
|
style="height: 170rpx;margin-top: -120rpx;">
|
|
<swiper-item v-if="orderLists.length > 0" v-for="(item,index) in orderLists" :key="index"
|
|
@tap="goOrderDetail(item)">
|
|
<view class="order-msg-box">
|
|
<view class="order-msg-left">
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/bf2bb7f80e17428391c407aef769517a.png"
|
|
alt="" />
|
|
</view>
|
|
<view class="order-msg-center">
|
|
<view
|
|
style="font-weight: 700;font-size: 30rpx;line-height: 60rpx;margin-top: 5%;">
|
|
<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 style="font-size: 24rpx;"
|
|
v-if="item.deliveryType == 1 && (item.status == 3 || item.status == 4) && item.deliveryInfo != null">
|
|
预计<text
|
|
style="color: red;">{{item.deliveryInfo.mustFinishTime | formatHourMinute }}</text>送达
|
|
</view>
|
|
</view>
|
|
<view class="order-msg-right" @tap.stop="$refs.pagesPopup.open()">
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/579569bfcc954f52baea06f6f11951be.png"
|
|
alt="" />
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
|
|
|
|
<view class="menu-box">
|
|
<view class="menu-list" @tap="goDetail('1')">
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/7690c4f897604fca804ea932bc3c1239.png"
|
|
alt="" />
|
|
<view class="menu-name">跑腿/快递</view>
|
|
</view>
|
|
<view class="menu-list" @tap="goDetail('2')" style="position: relative;">
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/553230c20dea4e5c85f1e396058a7493.png"
|
|
alt="" />
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/1a02b40d853a4cfdb062fff44ec49e6a.png"
|
|
alt="" style="position: absolute;top: -16rpx;right: 0;width: 88rpx;height: 36rpx;">
|
|
<view class="menu-name">饭团</view>
|
|
</view>
|
|
<view class="menu-list" @tap="goDetail('3')">
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/a2f41e2d45cb4d418d273f6e9ceafff0.png"
|
|
alt="" />
|
|
<view class="menu-name">农场</view>
|
|
</view>
|
|
<view class="menu-list" @tap="goDetail('4')">
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/41cfb56caff4419b94b69d0f2303b602.png"
|
|
alt="" />
|
|
<view class="menu-name">扭蛋机</view>
|
|
</view>
|
|
<view class="menu-list" @tap="goDetail('5')">
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/a083b7d159264bbc967034088fa7eb3a.png"
|
|
alt="" />
|
|
<view class="menu-name">ie浏览器</view>
|
|
</view>
|
|
</view>
|
|
<view class="like-box">
|
|
<view class="like-title">
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/e0c44bc9b69a46559d3aa4160d3cf4a5.png"
|
|
alt="" />
|
|
</view>
|
|
|
|
<view class="like-content-box">
|
|
<view class="like-left">
|
|
<view class="like-content-title">
|
|
<view style="width: 100%;font-weight: 700;">爆品拼团</view>
|
|
|
|
<img src="/static/images/img/yousanjiao.png" alt=""
|
|
style="width: 28rpx;height: 28rpx;position: absolute;top: 20rpx;right: 12rpx;">
|
|
</view>
|
|
<view class="like-content">
|
|
<view class="content-list" v-if="item.position == 'home_center_left_top' "
|
|
v-for="(item,index) in mallAds" :key="index" @tap="goAdPage(item)">
|
|
<view class="list-img">
|
|
<img :src="item.adImage" alt="">
|
|
<view class="list-type">{{item.productList[0].groupMembers}}人团</view>
|
|
</view>
|
|
<view class="list-product">
|
|
<view class="list-name">
|
|
|
|
<view class="list-text">{{item.title}}</view>
|
|
</view>
|
|
<view class="list-price" style="color: #00231C;">
|
|
￥{{item.productList[0].originalPrice}}</view>
|
|
<view class="list-total">
|
|
<text style="color: red;">￥{{item.productList[0].groupPrice}}</text>
|
|
<view class="group-cta">去拼团</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="content-list" v-if="item.position == 'home_center_left_bottom' "
|
|
v-for="(item,index) in mallAds" :key="index" @tap="goAdPage(item)">
|
|
<view class="list-img">
|
|
<img :src="item.adImage" alt="">
|
|
<view class="list-type">{{item.productList[0].groupMembers}}人团</view>
|
|
</view>
|
|
<view class="list-product">
|
|
<view class="list-name">
|
|
|
|
<view class="list-text">{{item.title}}</view>
|
|
</view>
|
|
<view class="list-price" style="color: #00231C;">
|
|
￥{{item.productList[0].originalPrice}}</view>
|
|
<view class="list-total">
|
|
<text style="color: red;">￥{{item.productList[0].groupPrice}}</text>
|
|
<view class="group-cta">去拼团</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="like-left">
|
|
<view class="like-content-title">
|
|
<view style="font-weight: 700;">爆品拼团</view>
|
|
|
|
<img src="/static/images/img/yousanjiao.png" alt=""
|
|
style="width: 28rpx;height: 28rpx;position: absolute;top: 20rpx;right: 12rpx;">
|
|
</view>
|
|
<view class="like-content">
|
|
<view class="content-list" v-if="item.position == 'home_center_right_top' "
|
|
v-for="(item,index) in mallAds" :key="index" @tap="goAdPage(item)">
|
|
<view class="list-img">
|
|
<img :src="item.adImage" alt="">
|
|
<view class="list-type">{{item.productList[0].groupMembers}}人团</view>
|
|
</view>
|
|
<view class="list-product">
|
|
<view class="list-name">
|
|
|
|
<view class="list-text">{{item.title}}</view>
|
|
</view>
|
|
<view class="list-price" style="color: #00231C;">
|
|
￥{{item.productList[0].originalPrice}}</view>
|
|
<view class="list-total">
|
|
<text style="color: red;">￥{{item.productList[0].groupPrice}}</text>
|
|
<view class="group-cta">去拼团</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="content-list" v-if="item.position == 'home_center_right_bottom' "
|
|
v-for="(item,index) in mallAds" :key="index" @tap="goAdPage(item)">
|
|
<view class="list-img">
|
|
<img :src="item.adImage" alt="">
|
|
<view class="list-type">{{item.productList[0].groupMembers}}人团</view>
|
|
</view>
|
|
<view class="list-product">
|
|
<view class="list-name">
|
|
|
|
<view class="list-text">{{item.title}}</view>
|
|
</view>
|
|
<view class="list-price" style="color: #00231C;">
|
|
￥{{item.productList[0].originalPrice}}</view>
|
|
<view class="list-total">
|
|
<text style="color: red;">￥{{item.productList[0].groupPrice}}</text>
|
|
<view class="group-cta">去拼团</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="daimai-box" style="padding-bottom:180rpx;">
|
|
|
|
<view class="daimai-tab" id="menuList" :class="{'daimai-tab--sticky': lastScrollTop>583}"
|
|
: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>583" :class="{'title-sort--sticky': lastScrollTop>583}"
|
|
: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>
|
|
<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="index"
|
|
@tap="goDetail('search',item)">
|
|
<view class="daoda-time">
|
|
送达时间：{{item.mustFinishTime != null ? item.mustFinishTime : '' | formatHourMinute }}
|
|
</view>
|
|
<view class="order-page">
|
|
<view class="maotou" v-if="item.deliveryType == 1 && !item.workerId">
|
|
外卖
|
|
</view>
|
|
<view class="maotou1" v-if="item.deliveryType == 2">
|
|
代取快递
|
|
</view>
|
|
<view class="maotou2" v-if="item.deliveryType == 3">
|
|
代跑腿
|
|
</view>
|
|
<view class="maotou3" v-if="item.workerId">
|
|
指派单
|
|
</view>
|
|
<view class="shangjia">
|
|
<text
|
|
style="font-weight: 700;">{{item.shopName != null ? item.shopName : ''}}</text>
|
|
<view @tap="productDetail(item)" 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;">
|
|
{{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="makeCall(item.contactPhone)"
|
|
src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/869a7af6a1c24bf3a0d523c4a18b55c6.png"
|
|
alt="" style="width: 40rpx;height: 40rpx;" />
|
|
</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">
|
|
<img @tap="makeCall(item.receiverPhone)"
|
|
src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/869a7af6a1c24bf3a0d523c4a18b55c6.png"
|
|
alt="" style="width: 40rpx;height: 40rpx;" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="yongjin">
|
|
<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;">
|
|
￥{{(item.deliveryFee + item.deliveryFeeMarketplace).toFixed(2)}}
|
|
<text style="color: #777;font-size: 22rpx;"
|
|
v-if="item.deliveryFeeMarketplace > 0">（包含￥{{item.deliveryFeeMarketplace}}平台佣金）</text>
|
|
</view>
|
|
</view>
|
|
<view class="beizhu" v-if="item.remark != null && item.remark != ''">
|
|
备注：{{item.remark}}
|
|
</view>
|
|
<view class="qiangdan-btn" @tap="getOrder(item,index)">
|
|
<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/1b8b815302a34902ac79a76a469e4ee6.png"
|
|
alt="">
|
|
</view>
|
|
<view class="yongjin" v-if="checked == 'zhipai'">
|
|
<text @tap="rejectOrder(item,index)">拒绝接单</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="swiper-page" v-show="currentIndex == 1">
|
|
<de-livery ref="deLiveryPage"></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" background-color="#fff">
|
|
<view class="popup-area-content">
|
|
<view class="popup-area-title">
|
|
<text>请选择所属区域</text>
|
|
</view>
|
|
<view class="popup-area-container" v-for="(item,index) in areaList" :key="index"
|
|
@tap="onClickArea(item)">
|
|
<text style="display: inline-block">{{item.title}}</text>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
<!-- 弹出区域选择 -->
|
|
<uni-popup ref="pagesPopup" background-color="#fff">
|
|
<view class="popup-area-content" style="height: 1200rpx;overflow: scroll;">
|
|
<view class="popup-area-title">
|
|
<text>查看页面</text>
|
|
</view>
|
|
<view class="popup-area-container" v-for="(item,index) in pages" :key="index" @tap="aaaaaaa(item)">
|
|
<text style="display: inline-block">{{item.name}}</text>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
<uni-popup ref="productPopup" 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="productData.goodsList != null && productData.goodsList.length > 0">
|
|
<view class="product-popup-card" v-for="(item1,index1) in productData.goodsList" :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>
|
|
|
|
<tab-bar 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";
|
|
export default {
|
|
data() {
|
|
return {
|
|
adList:[],
|
|
pages: [{
|
|
name: '商家账单详情111',
|
|
url: '/package2/shop/shopSettlementDetail'
|
|
}, {
|
|
name: '商家订单详情111',
|
|
url: '/package2/shop/orderDetail'
|
|
}, {
|
|
name: '发布订单评价111',
|
|
url: '/package1/order/orderEvaluate'
|
|
}, {
|
|
name: '优惠券列表111',
|
|
url: '/package1/myCenter/couponList'
|
|
}, {
|
|
name: '订单列表111',
|
|
url: '/package1/order/orderList'
|
|
}, {
|
|
name: '待成团页111',
|
|
url: '/package1/order/pendGroup'
|
|
}, {
|
|
name: '新增商品111',
|
|
url: '/package1/myCenter/addGoods'
|
|
}, {
|
|
name: '代买饭111',
|
|
url: '/package1/buyFood/buyFood'
|
|
}, {
|
|
name: '配送员列表111',
|
|
url: '/package1/index/deliveryPersonList'
|
|
}, {
|
|
name: '拼团商家详情111',
|
|
url: '/package1/group/groupBuyDetail'
|
|
}, {
|
|
name: '拼团单一商家111',
|
|
url: '/package1/group/groupBuySingle'
|
|
}, {
|
|
name: '拼团页111',
|
|
url: '/package1/group/groupBuyList'
|
|
}, {
|
|
name: '商家搜索页111',
|
|
url: '/package1/group/searchGroup'
|
|
}, {
|
|
name: '商家评价111',
|
|
url: '/package1/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: '/package1/myCenter/partTimeJobRegister'
|
|
}, {
|
|
name: '支付页',
|
|
url: '/package1/payment/payment'
|
|
}, {
|
|
name: '帖子详情页',
|
|
url: '/package1/post/postDetail'
|
|
}, {
|
|
name: '地址列表',
|
|
url: '/package1/myCenter/addressList'
|
|
}, {
|
|
name: '我的钱包',
|
|
url: '/package1/myCenter/wallet'
|
|
}, {
|
|
name: '我的发布',
|
|
url: '/package1/myCenter/myPost'
|
|
}, {
|
|
name: '我的朋友',
|
|
url: '/package1/myCenter/myFriend'
|
|
}, {
|
|
name: '我的收藏',
|
|
url: '/package1/myCenter/myCollect'
|
|
}, {
|
|
name: '个人中心',
|
|
url: '/package1/myCenter/myCenter'
|
|
}, {
|
|
name: '商家注册',
|
|
url: '/package2/shop/merchantRegister'
|
|
}, {
|
|
name: '发布',
|
|
url: '/package1/tabbar/release'
|
|
}, {
|
|
name: '农场',
|
|
url: '/package1/farm/farm'
|
|
}],
|
|
areaName: '',
|
|
indicatorDots: false,
|
|
autoplay: true,
|
|
mallAds: [],
|
|
deliveryItem: [],
|
|
interval: 4000,
|
|
onlineWorkerInterval: 4000,
|
|
duration: 1000,
|
|
onlineWorkerDuration: 1000,
|
|
latitude: 39.909, // 默认纬度，可以设为用户当前位置或配送员位置
|
|
longitude: 116.39742, // 默认经度
|
|
markers: [], // 标记点，可以包括配送员位置和用户位置
|
|
polyline: [], // 路线，如果需要显示配送员路线
|
|
currentIndex: 0,
|
|
width: 0,
|
|
dataTabList: [{
|
|
name: '猜你喜欢',
|
|
isCheck: true
|
|
}, {
|
|
name: '代买饭',
|
|
isCheck: false
|
|
}, {
|
|
name: '代取快递/跑腿',
|
|
isCheck: false
|
|
}],
|
|
dataList: [],
|
|
areaList: [],
|
|
orderLists: [],
|
|
waimaiCount: 0,
|
|
kuaidiCount: 0,
|
|
paotuiCount: 0,
|
|
productData: [],
|
|
zhipaiCount: 0,
|
|
searchForm: {
|
|
hallOnly: true,
|
|
status: 0,
|
|
pageNum: 1,
|
|
getAreaId: '',
|
|
putAreaId: '',
|
|
paths: ['home_top', 'home_center_left_top', 'home_center_left_bottom', 'home_center_right_top',
|
|
'home_center_right_bottom'
|
|
],
|
|
order: '',
|
|
regionId: '',
|
|
deliveryType: 1,
|
|
waimaiData: [],
|
|
workerId: uni.getStorageSync('worker') ? uni.getStorageSync('worker').workerId : '',
|
|
kuaidiData: []
|
|
},
|
|
checked: 'waimai',
|
|
navBarHeight: 0,
|
|
menuListOffsetTop: 0,
|
|
lastScrollTop: 0,
|
|
worker: null,
|
|
isSwitching: true,
|
|
getAreaData: {},
|
|
putAreaData: {},
|
|
yongjin: false,
|
|
waimailistData: [],
|
|
kuaidilistData: [],
|
|
isgetArea: false,
|
|
isputArea: false,
|
|
checkYongjin: false,
|
|
getshopArea: [],
|
|
putshopArea: []
|
|
}
|
|
},
|
|
components: {
|
|
tabBar,
|
|
deLivery,
|
|
postList,
|
|
myCenter
|
|
},
|
|
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 `${day}-${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;
|
|
const isScrollingUp = scrollTop < this.lastScrollTop;
|
|
// 向上滑到靠近页面顶部时（背景头图区域），切换到上一个分类
|
|
// 门槛用 80px：用户需要明确地滑回头部较大区域，避免误触发
|
|
if (isScrollingUp && scrollTop < 80 && !this.isSwitching) {
|
|
const currIdx = this.menuList.findIndex(m => m.checked);
|
|
if (currIdx > 0) {
|
|
this._switchCategory(currIdx - 1);
|
|
}
|
|
}
|
|
this.lastScrollTop = scrollTop;
|
|
},
|
|
onReachBottom() {
|
|
if (this.searchForm.pageNum < this.total) {
|
|
this.searchForm.pageNum++;
|
|
this.getProduct(this.searchForm.categoryId);
|
|
return;
|
|
}
|
|
},
|
|
onLoad() {
|
|
|
|
},
|
|
onShow() {
|
|
this.indexInit()
|
|
},
|
|
onReady() {
|
|
// 记录分类栏相对页面的偏移量，用于上滑检测
|
|
setTimeout(() => {
|
|
const query = uni.createSelectorQuery().in(this);
|
|
query.select('#menuList').boundingClientRect(rect => {
|
|
if (rect) this.menuListOffsetTop = rect.top + this.lastScrollTop;
|
|
}).exec();
|
|
}, 500);
|
|
},
|
|
methods: {
|
|
indexInit() {
|
|
let that = this
|
|
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();
|
|
this.getUserOrders();
|
|
// 建立WebSocket连接或定时请求获取配送员位置
|
|
this.getDeliveryLocation();
|
|
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();
|
|
this.$refs.tabBar.getWorkerCounts()
|
|
}
|
|
// 计算导航栏高度用于sticky offset：statusBarHeight + 40px内容区
|
|
const info = uni.getSystemInfoSync();
|
|
this.navBarHeight = info.statusBarHeight;
|
|
},
|
|
clearCheck() {
|
|
this.checkYongjin = false
|
|
this.putAreaData = {}
|
|
this.getAreaData = {}
|
|
this.searchForm.getAreaId = ""
|
|
this.searchForm.putAreaId = ""
|
|
this.searchForm.order = ""
|
|
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) {
|
|
this.productData = item;
|
|
this.$refs.productPopup.open()
|
|
},
|
|
getOrder(item, index) {
|
|
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) {
|
|
if (!uni.getStorageSync('worker') && res.result != null) {
|
|
uni.setStorageSync('worker', res.result)
|
|
}
|
|
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
|
|
}
|
|
}
|
|
setTimeout(res => {
|
|
this.getUserLocation(uni.getStorageSync('worker') ? uni.getStorageSync('worker').workerId : res.result.workerId)
|
|
}, 2000)
|
|
that.$forceUpdate();
|
|
} else {
|
|
that.tui.toast(res.message);
|
|
return;
|
|
}
|
|
uni.hideLoading();
|
|
}).catch((res) => {});
|
|
|
|
},
|
|
rejectOrder(item, index) {
|
|
let that = this
|
|
this.tui.request("/mall/delivery/reject", "POST", {
|
|
deliveryId: item.id
|
|
}, 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) => {});
|
|
},
|
|
getDelivery() {
|
|
let that = this
|
|
this.tui.request("/mall/delivery/page", "POST", this.searchForm, false, false).then((res) => {
|
|
that.loadStatus = 'nomore';
|
|
if (res.code == 200) {
|
|
that.mallAds = res.result.mallAds
|
|
for(let i=0;i<that.mallAds.length;i++){
|
|
if(that.mallAds[i].position == 'home_top'){
|
|
|
|
// 判断字符串中是否包含逗号
|
|
if (that.mallAds[i].adImage.indexOf(',') !== -1) {
|
|
// 有逗号：先按逗号分割，再过滤掉空字符串或纯空白字符串，最后映射为 {pic: url} 对象数组
|
|
that.adList = that.mallAds[i].adImage
|
|
.split(',')
|
|
.filter(item => item.trim() !== '') // 过滤掉空项
|
|
.map(url => ({
|
|
pic: url.trim()
|
|
}));
|
|
} else {
|
|
// 没有逗号：整个字符串作为一个对象
|
|
that.adList = [{
|
|
pic: that.mallAds[i].adImage.trim()
|
|
}];
|
|
}
|
|
}
|
|
}
|
|
console.log('50000',that.adList)
|
|
that.deliveryItem = res.result.records;
|
|
if (res.result.orderCount != null) {
|
|
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
|
|
}
|
|
}
|
|
}
|
|
if (res.result.zhipaiCount != undefined && res.result.zhipaiCount != null) {
|
|
that.zhipaiCount = res.result.zhipaiCount
|
|
}
|
|
that.$forceUpdate();
|
|
} else {
|
|
that.tui.toast(res.message);
|
|
return;
|
|
}
|
|
uni.hideLoading();
|
|
}).catch((res) => {});
|
|
},
|
|
goAdPage(item) {
|
|
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
|
|
});
|
|
},
|
|
//本方法展示所有已经完成页面，方便查找
|
|
aaaaaaa(item) {
|
|
uni.navigateTo({
|
|
url: item.url
|
|
})
|
|
},
|
|
goDetail(type) {
|
|
let url = ''
|
|
switch (type) {
|
|
case '1':
|
|
url = '/package1/runErrand/runErrand'
|
|
break;
|
|
case '2':
|
|
url = '/package1/group/groupBuyList'
|
|
break;
|
|
case '3':
|
|
url = ''
|
|
break;
|
|
case '4':
|
|
url = ''
|
|
break;
|
|
case '5':
|
|
url = '/package1/ieBrowser/index'
|
|
break;
|
|
}
|
|
uni.navigateTo({
|
|
url: url
|
|
})
|
|
},
|
|
goOrderDetail(item) {
|
|
uni.redirectTo({
|
|
url: '/package1/order/orderDetail?id=' + item.id
|
|
});
|
|
},
|
|
onClickArea(item) {
|
|
uni.setStorageSync('area', JSON.stringify(item))
|
|
this.searchForm.regionId = item.id
|
|
this.getDelivery();
|
|
this.getShopArea();
|
|
let that = this
|
|
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()
|
|
},
|
|
checkArea() {
|
|
this.tui.request("/app/shopArea/getByParentId/0", "get", {}, false, false).then((res) => {
|
|
if (res.code == 200) {
|
|
this.areaList = res.result
|
|
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 == '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.searchForm.pageNum = 1
|
|
this.getDelivery();
|
|
},
|
|
// 获取用户位置
|
|
getUserLocation(id) {
|
|
let that = this;
|
|
uni.getLocation({
|
|
type: 'gcj02', // 返回国测局坐标，用于微信小程序地图组件
|
|
isHighAccuracy:true,
|
|
success: (res) => {
|
|
console.log('位置', 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) => {
|
|
console.log('获取位置失败', err);
|
|
}
|
|
});
|
|
},
|
|
checkTab1(type) {
|
|
this.checked = type
|
|
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.lastScrollTop - stickyTop;
|
|
uni.pageScrollTo({
|
|
scrollTop: target > 0 ? target : 0,
|
|
duration: 260
|
|
});
|
|
}).exec();
|
|
},
|
|
makeCall(phone) {
|
|
uni.makePhoneCall({
|
|
phoneNumber: phone
|
|
});
|
|
},
|
|
// 获取配送员位置，这里假设使用WebSocket
|
|
getDeliveryLocation() {
|
|
// WebSocket连接，需要时放开
|
|
// uni.connectSocket({
|
|
// url: "wss://www.example.com/socket",
|
|
// header: {
|
|
// "content-type": "application/json",
|
|
// },
|
|
// protocols: ["protocol1"],
|
|
// method: "GET",
|
|
// });
|
|
|
|
|
|
|
|
// 假设我们有一个WebSocket连接，这里用setInterval模拟定时获取
|
|
// this.deliveryTimer = setInterval(() => {
|
|
// 实际开发中，这里应该是从WebSocket推送或后端API获取
|
|
// 模拟数据
|
|
const deliveryLat = this.latitude;
|
|
const deliveryLng = this.longitude;
|
|
// 更新配送员位置标记
|
|
// 先清除之前的配送员标记，假设配送员标记id为1
|
|
this.markers = this.markers.filter(marker => marker.id !== 1);
|
|
// 添加新的配送员标记
|
|
this.markers.push({
|
|
id: 1,
|
|
latitude: deliveryLat,
|
|
longitude: deliveryLng,
|
|
title: '张三',
|
|
iconPath: '/static/images/tabbar/fabu1.png', // 配送员图标
|
|
width: 30,
|
|
height: 30
|
|
});
|
|
// 将地图中心移动到配送员位置
|
|
this.latitude = deliveryLat;
|
|
this.longitude = deliveryLng;
|
|
// }, 5000);
|
|
},
|
|
// 页面卸载时清除定时器
|
|
onUnload() {
|
|
if (this.deliveryTimer) {
|
|
clearInterval(this.deliveryTimer);
|
|
}
|
|
},
|
|
checkAdd() {
|
|
this.isgetArea = !this.isgetArea
|
|
},
|
|
checkAdd1() {
|
|
this.isputArea = !this.isputArea
|
|
},
|
|
//底部tab切换组件状态改变
|
|
changeIndex(index) {
|
|
let that = this;
|
|
this.lastIndex = this.currentIndex
|
|
this.currentIndex = index
|
|
switch (index) {
|
|
case 0:
|
|
this.indexInit()
|
|
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);
|
|
}
|
|
|
|
.swiper-container {
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.swiper-page {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.swiper {
|
|
width: 100%;
|
|
height: 500rpx;
|
|
z-index: 99 !important;
|
|
}
|
|
|
|
.swiper img {
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 99 !important;
|
|
border-radius:10px;
|
|
}
|
|
|
|
.order-notice-wrap {
|
|
// background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(250, 255, 250, 0.72) 100%);
|
|
position: relative;
|
|
}
|
|
|
|
.order-msg-box {
|
|
width: 95%;
|
|
height: 146rpx;
|
|
border-radius: 36rpx;
|
|
border: 1px solid rgba(166, 255, 234, 0.86);
|
|
background: #fff;
|
|
z-index: 99;
|
|
position: absolute;
|
|
left: 2.5%;
|
|
bottom: 0;
|
|
display: flex;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.order-msg-box::after {
|
|
content: '';
|
|
width: 260rpx;
|
|
height: 150rpx;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, rgba(255, 244, 217, 0.24) 0%, rgba(255, 244, 217, 0) 72%);
|
|
position: absolute;
|
|
right: -130rpx;
|
|
top: -80rpx;
|
|
}
|
|
|
|
.order-msg-left {
|
|
width: 20%;
|
|
height: 100%;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.order-msg-left img {
|
|
width: 75%;
|
|
height: 65%;
|
|
margin: 17% 0 0 15%;
|
|
}
|
|
|
|
.order-msg-center {
|
|
width: 50%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-left: 5%;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.order-msg-right {
|
|
width: 30%;
|
|
height: 100%;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.order-msg-right img {
|
|
width: 80%;
|
|
height: 56%;
|
|
margin: 15% 0 0 10%;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.menu-box {
|
|
width: 95%;
|
|
height: 200rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 30rpx auto 0;
|
|
padding: 14rpx 10rpx;
|
|
box-sizing: border-box;
|
|
border-radius: 38rpx;
|
|
border: 1px solid rgba(255, 255, 255, 0.9);
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 250, 235, 0.92) 48%, rgba(239, 255, 248, 0.96) 100%);
|
|
box-shadow: 0 18rpx 42rpx rgba(0, 35, 28, 0.07);
|
|
position: relative;
|
|
z-index: 99;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.menu-box::after {
|
|
content: '';
|
|
width: 280rpx;
|
|
height: 160rpx;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, rgba(166, 255, 234, 0.18) 0%, rgba(166, 255, 234, 0) 74%);
|
|
position: absolute;
|
|
right: -150rpx;
|
|
top: -92rpx;
|
|
}
|
|
|
|
.menu-list {
|
|
flex: 1;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
z-index: 1;
|
|
border-radius: 28rpx;
|
|
transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.2), background 0.2s ease;
|
|
}
|
|
|
|
.menu-list:active {
|
|
background: rgba(255, 255, 255, 0.72);
|
|
transform: translateY(-4rpx) scale(0.96);
|
|
}
|
|
|
|
.menu-list img {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
display: block;
|
|
margin: 0 auto;
|
|
filter: drop-shadow(0 10rpx 14rpx rgba(0, 35, 28, 0.08));
|
|
}
|
|
|
|
.menu-name {
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
font-weight: 800;
|
|
margin-top: 12rpx;
|
|
color: #40534d;
|
|
line-height: 30rpx;
|
|
}
|
|
|
|
.like-box,
|
|
.daimai-box {
|
|
width: 95%;
|
|
margin: 24rpx auto;
|
|
}
|
|
|
|
.daimai-tab {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 88rpx;
|
|
padding: 8rpx;
|
|
margin: 0 -4rpx;
|
|
box-sizing: border-box;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 96;
|
|
border-radius: 34rpx;
|
|
background: rgba(255, 255, 255, 0.62);
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
|
|
.daimai-tab--sticky {
|
|
background: rgba(255, 255, 255, 1);
|
|
box-shadow: 0 16rpx 36rpx rgba(130, 84, 43, 0.08);
|
|
}
|
|
|
|
.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-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%;
|
|
}
|
|
|
|
.like-content-box {
|
|
height: 400rpx;
|
|
background: url("https://jewel-shop.oss-cn-beijing.aliyuncs.com/6d65d349d68f40e7886c978190b6ea33.png") no-repeat;
|
|
background-size: 100%;
|
|
margin-top: 20rpx;
|
|
display: flex;
|
|
border-radius: 34rpx;
|
|
overflow: hidden;
|
|
box-shadow: 0 18rpx 42rpx rgba(81, 139, 91, 0.1);
|
|
position: relative;
|
|
}
|
|
|
|
.like-content-box::before {
|
|
content: '';
|
|
width: 320rpx;
|
|
height: 520rpx;
|
|
background: linear-gradient(110deg, rgba(255, 255, 255, 0) 0%, rgba(255, 251, 205, 0.66) 45%, rgba(166, 255, 234, 0.36) 58%, rgba(255, 255, 255, 0) 100%);
|
|
position: absolute;
|
|
top: -60rpx;
|
|
left: -360rpx;
|
|
transform: rotate(16deg);
|
|
animation: groupLightSweep 3.8s ease-in-out infinite;
|
|
z-index: 1;
|
|
}
|
|
|
|
.like-left {
|
|
width: 45%;
|
|
background: rgba(255, 255, 255, 0.92);
|
|
border: 1px solid rgba(255, 255, 255, 0.86);
|
|
border-radius: 26rpx;
|
|
height: 340rpx;
|
|
margin: 50rpx 0 0 3.3%;
|
|
box-shadow: 0 12rpx 28rpx rgba(0, 35, 28, 0.05);
|
|
overflow: hidden;
|
|
position: relative;
|
|
z-index: 2;
|
|
animation: groupCardFloat 3.6s ease-in-out infinite;
|
|
}
|
|
|
|
.like-left:nth-child(2) {
|
|
animation-delay: 0.45s;
|
|
}
|
|
|
|
.like-content-title {
|
|
width: 100%;
|
|
height: 70rpx;
|
|
position: relative;
|
|
line-height: 70rpx;
|
|
padding: 0 10rpx;
|
|
color: #173f36;
|
|
}
|
|
|
|
.like-content-title::before {
|
|
content: 'HOT';
|
|
height: 28rpx;
|
|
line-height: 28rpx;
|
|
padding: 0 10rpx;
|
|
border-radius: 999rpx;
|
|
background: linear-gradient(135deg, #ff8f70 0%, #ffd46f 100%);
|
|
color: #fff;
|
|
font-size: 18rpx;
|
|
font-weight: 900;
|
|
position: absolute;
|
|
top: 20rpx;
|
|
right: 42rpx;
|
|
box-shadow: 0 6rpx 12rpx rgba(255, 143, 112, 0.22);
|
|
animation: hotBadgePulse 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
.like-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.content-list {
|
|
display: flex;
|
|
margin-bottom: 10rpx;
|
|
border-radius: 20rpx;
|
|
transition: transform 0.18s ease, background 0.18s ease;
|
|
}
|
|
|
|
.content-list:active {
|
|
background: rgba(255, 247, 215, 0.42);
|
|
transform: scale(0.98) translateY(-2rpx);
|
|
}
|
|
|
|
.list-img {
|
|
width: 42%;
|
|
height: 132rpx;
|
|
padding: 8rpx 6rpx 8rpx 10rpx;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.list-img img {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 14rpx;
|
|
box-shadow: 0 8rpx 16rpx rgba(0, 35, 28, 0.08);
|
|
}
|
|
|
|
.list-product {
|
|
width: 56%;
|
|
padding: 4rpx 4rpx 0 12rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.list-name {
|
|
height: 40rpx;
|
|
line-height: 35rpx;
|
|
}
|
|
|
|
.list-type {
|
|
display: inline;
|
|
font-size: 18rpx;
|
|
padding: 4rpx 6rpx;
|
|
background: linear-gradient(135deg, #a6ffea 0%, #fff2c6 100%);
|
|
border-radius: 10rpx;
|
|
position: absolute;
|
|
top: 10rpx;
|
|
left: 10rpx;
|
|
font-weight: 700;
|
|
box-shadow: 0 4rpx 10rpx rgba(0, 35, 28, 0.08);
|
|
animation: groupMemberPulse 1.8s ease-in-out infinite;
|
|
}
|
|
|
|
.list-text {
|
|
display: inline;
|
|
font-size: 22rpx;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.list-price {
|
|
color: #777;
|
|
height: 17px;
|
|
font-size: 20rpx;
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.list-total {
|
|
font-size: 20rpx;
|
|
font-weight: 800;
|
|
color: #5f4a24;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 2rpx;
|
|
}
|
|
|
|
.list-total text {
|
|
font-size: 22rpx;
|
|
font-weight: 900;
|
|
animation: groupPricePop 1.7s ease-in-out infinite;
|
|
}
|
|
|
|
.group-cta {
|
|
display: inline-block;
|
|
height: 30rpx;
|
|
line-height: 30rpx;
|
|
margin-left: 6rpx;
|
|
padding: 0 10rpx;
|
|
border-radius: 999rpx;
|
|
background: linear-gradient(135deg, #ff8f70 0%, #ffd46f 100%);
|
|
color: #fff;
|
|
font-size: 18rpx;
|
|
font-weight: 900;
|
|
box-shadow: 0 6rpx 14rpx rgba(255, 143, 112, 0.24);
|
|
animation: groupCtaNudge 1.9s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes groupLightSweep {
|
|
0% {
|
|
left: -380rpx;
|
|
opacity: 0;
|
|
}
|
|
|
|
24% {
|
|
opacity: 1;
|
|
}
|
|
|
|
64% {
|
|
left: 760rpx;
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
left: 760rpx;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes groupCardFloat {
|
|
0%,
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
50% {
|
|
transform: translateY(-12rpx);
|
|
}
|
|
}
|
|
|
|
@keyframes hotBadgePulse {
|
|
0%,
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
|
|
50% {
|
|
transform: scale(1.18) rotate(-3deg);
|
|
}
|
|
}
|
|
|
|
@keyframes groupMemberPulse {
|
|
0%,
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
|
|
50% {
|
|
transform: scale(1.16);
|
|
}
|
|
}
|
|
|
|
@keyframes groupPricePop {
|
|
0%,
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
|
|
50% {
|
|
transform: scale(1.18);
|
|
}
|
|
}
|
|
|
|
@keyframes groupCtaNudge {
|
|
0%,
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
50% {
|
|
transform: translateX(5rpx);
|
|
}
|
|
}
|
|
|
|
.list-1 {
|
|
width: 98%;
|
|
max-height: 640rpx;
|
|
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;
|
|
box-shadow: 0 16rpx 38rpx rgba(0, 35, 28, 0.07);
|
|
}
|
|
|
|
.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: 20rpx 0 20rpx 20rpx;
|
|
}
|
|
|
|
.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: 130rpx;
|
|
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: 200rpx;
|
|
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: 50rpx;
|
|
line-height: 50rpx;
|
|
color: #40534d;
|
|
}
|
|
|
|
.qu-left {
|
|
width: 80%;
|
|
padding-left: 10rpx;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.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: 95%;
|
|
height: 100rpx;
|
|
margin: 20rpx auto;
|
|
transition: transform 0.18s ease;
|
|
|
|
&:active {
|
|
transform: scale(0.97);
|
|
}
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: 100%;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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: 0 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);
|
|
}
|
|
|
|
.title-sort {
|
|
height: 100rpx;
|
|
display: flex;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 95;
|
|
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);
|
|
}
|
|
|
|
.title-sort--sticky {
|
|
animation: stickyPanelIn 0.24s ease;
|
|
}
|
|
|
|
.sort-text {
|
|
height: auto;
|
|
display: flex;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 94;
|
|
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;
|
|
}
|
|
|
|
.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: 24rpx;
|
|
line-height: 38rpx;
|
|
text-align: center;
|
|
background: rgba(166, 255, 234, 0.62);
|
|
padding: 0 20rpx;
|
|
margin-left: -10rpx;
|
|
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: 24rpx;
|
|
font-weight: 800;
|
|
line-height: 40rpx;
|
|
}
|
|
|
|
.delivery-list-wrap {
|
|
min-height: 520rpx;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
</style>
|