2025-05-08 11:21:54 +08:00

3266 lines
85 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="main">
<view
class="top"
:style="{
height: `${loginType === 'min' ? menu.bottom + 8 : ''}px`,
paddingTop: `${menu.top}px`,
}"
>
<div class="topContent">
<!-- <span class="pageTitle">精选互动</span> -->
<!-- <image
class="backIcon"
src="https://eshangtech.com/wanmeiyizhanImg/home/backArrow.svg"
@click="handleBack"
/>-->
<div style="display: inline-block">
<view class="currentServiceBox" @click="goSelectServer">
<image
class="pointIcon"
src="https://eshangtech.com/wanmeiyizhanImg/home/blackFixed.png"
/>
<span class="serviceName">{{
currentServiceMessage.SERVERPART_NAME || ""
}}</span>
<image
class="rightArrowIcon"
src="https://eshangtech.com/wanmeiyizhanImg/home/rightArrowIcon.png"
/>
</view>
</div>
</div>
</view>
<view class="newTab">
<view
:class="selectTab === item.value ? 'tabItem selectTab' : 'tabItem'"
v-for="(item, index) in tabList"
:key="index"
@click="handleChangeTab(item.value)"
>
{{ item.label }}
</view>
</view>
<view class="newContent">
<view class="content" v-if="selectTab === 1">
<view class="contentItem">
<image
class="contentImg"
src="https://eshangtech.com/wanmeiyizhanImg/home/activityNo1.png"
/>
</view>
</view>
<view class="content" v-if="selectTab === 2">
<no-data :text="'暂无活动'" :isShow="true" />
</view>
<view class="content" v-if="selectTab === 3">
<no-data :text="'暂无活动'" :isShow="true" />
</view>
</view>
<view class="todayRecommendation">
<view class="todayTitle">今日推荐</view>
<view class="todayItem">
<image
class="todayImg"
src="https://eshangtech.com/wanmeiyizhanImg/home/activityNo2.png"
/>
</view>
<view class="todayItem">
<image
class="todayImg"
src="https://eshangtech.com/wanmeiyizhanImg/home/activityNo3.png"
/>
</view>
</view>
<!-- <view class="selectService">
<div style="display: inline-block">
<view class="currentServiceBox" @click="goSelectServer">
<image
class="pointIcon"
src="https://eshangtech.com/wanmeiyizhanImg/home/blackFixed.png"
/>
<span class="serviceName">{{
currentServiceMessage.SERVERPART_NAME || ""
}}</span>
<image
class="rightArrowIcon"
src="https://eshangtech.com/wanmeiyizhanImg/home/rightArrowIcon.png"
/>
</view>
</div>
</view> -->
<view class="newBox" v-if="false">
<view class="activityTitle">折扣优惠</view>
<scroll-view scroll-x class="activityBox">
<view
class="couponList"
:style="{
width: `${356 * newActivityList.length}rpx`,
}"
v-if="newActivityList && newActivityList.length > 0"
>
<view
class="couponItem"
v-for="(item, index) in newActivityList"
:key="index"
@click="goCoupon(item)"
>
<view class="couponItemTop">
<image
class="itemImg"
:src="
item.COUPON_IMAGEURL ||
'https://eshangtech.com/ShopICO/no-picture.png'
"
mode="aspectFit"
/>
</view>
<view class="couponItemBottom">
<view class="couponText">
{{ item.MERCHANTS_NAME || "" }}{{ item.COUPON_NAME || "" }}
</view>
<view class="couponTime">
<image
class="timeIcon"
src="https://eshangtech.com/wanmeiyizhanImg/home/timeIcon.png"
/>
<span class="couponTimeText">
{{
item.START_TIME ? $utils.formatDate(item.START_TIME) : ""
}}-{{ item.END_TIME ? $utils.formatDate(item.END_TIME) : "" }}
</span>
</view>
</view>
</view>
</view>
<view v-else class="noDataBox">
<no-data
text="暂无活动"
:isShow="!(newActivityList && newActivityList.length > 0)"
/>
</view>
</scroll-view>
<view class="activityTitle" style="margin-top: 32rpx">会员活动</view>
<scroll-view scroll-x class="activityBox">
<view
class="couponList"
:style="{
width: `${356 * memberActivitiesList.length}rpx`,
}"
v-if="memberActivitiesList && memberActivitiesList.length > 0"
>
<view
class="couponItem"
v-for="(item, index) in memberActivitiesList"
:key="index"
>
<view class="couponItemTop">
<image
class="itemImg"
:src="
item.ImageList && item.ImageList.length > 0
? item.ImageList[0].ImageUrl
: 'https://eshangtech.com/ShopICO/no-picture.png'
"
mode="aspectFit"
/>
</view>
<view class="couponItemBottom">
<view class="couponText">
{{ item.NOTICEINFO_TITLE || "" }}
</view>
<view class="couponTime">
<image
class="timeIcon"
src="https://eshangtech.com/wanmeiyizhanImg/home/timeIcon.png"
/>
<span class="couponTimeText">
{{
item.START_DATE ? $utils.formatDate(item.START_DATE) : ""
}}-{{ item.END_DATE ? $utils.formatDate(item.END_DATE) : "" }}
</span>
</view>
</view>
</view>
</view>
<view v-else class="noDataBox">
<no-data
text="暂无活动"
:isShow="!(memberActivitiesList && memberActivitiesList.length > 0)"
/>
</view>
</scroll-view>
<view class="activityTitle" style="margin-top: 32rpx">线上商城</view>
<scroll-view scroll-x class="activityBox">
<view
class="couponList"
:style="{
width: `${356 * onlineShoppingMallList.length}rpx`,
}"
v-if="onlineShoppingMallList && onlineShoppingMallList.length > 0"
>
<view
class="couponItem"
v-for="(item, index) in onlineShoppingMallList"
:key="index"
>
<view class="couponItemTop">
<image
class="itemImg"
:src="
item.ImageList && item.ImageList.length > 0
? item.ImageList[0].ImageUrl
: 'https://eshangtech.com/ShopICO/no-picture.png'
"
mode="aspectFit"
/>
</view>
<view class="couponItemBottom">
<view class="couponText">
{{ item.NOTICEINFO_TITLE || "" }}
</view>
<view class="couponTime">
<image
class="timeIcon"
src="https://eshangtech.com/wanmeiyizhanImg/home/timeIcon.png"
/>
<span class="couponTimeText">
{{
item.START_DATE ? $utils.formatDate(item.START_DATE) : ""
}}-{{ item.END_DATE ? $utils.formatDate(item.END_DATE) : "" }}
</span>
</view>
</view>
</view>
</view>
<view v-else class="noDataBox">
<no-data
text="暂无活动"
:isShow="
!(onlineShoppingMallList && onlineShoppingMallList.length > 0)
"
/>
</view>
</scroll-view>
</view>
<view class="header" v-if="false">
<!-- ; margin-left: 16rpx -->
<div style="display: inline-block; margin-top: 16rpx">
<view class="currentServiceBox" @click="goSelectServer">
<image
class="pointIcon"
src="https://eshangtech.com/wanmeiyizhanImg/home/blackFixed.png"
/>
<span class="serviceName">{{
currentServiceMessage.SERVERPART_NAME || ""
}}</span>
<image
class="rightArrowIcon"
src="https://eshangtech.com/wanmeiyizhanImg/home/rightArrowIcon.png"
/>
</view>
</div>
<!-- <view
class="arrowBox"
:style="{
height: menu.height + 10 + 'px',
}"
>
<view @click="goSelectServer">
<view class="selectServiceBox">
<image
class="serviceIcon"
src="https://eshangtech.com/ShopICO/discovery/serviceIcon.png"
/>
<view class="nameBox">
<span class="service">{{
currentServiceMessage.SERVERPART_NAME || ""
}}</span>
<image
class="moreIcon"
src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"
/>
</view>
</view>
</view>
</view> -->
</view>
<!-- :style="{ paddingTop: menu.height + 10 + 'px' }" -->
<view class="serviceBox" v-if="false">
<!-- :style="{ paddingTop: menu.height + menu.top + 10 + 'px' }" -->
<!-- v-if="pageMsg.ImagePath" -->
<view class="serviceImg" v-if="false">
<image class="img" :src="pageMsg.ImagePath"></image>
<view class="serviceInfoBox">
<span
class="serviceName"
:style="{ color: pageMsg.ImagePath ? '#fff' : '#000' }"
>{{ currentServiceMessage.SERVERPART_NAME || "" }}</span
>
<!-- <span class="state">营业中</span>-->
</view>
</view>
<current-service
:goDetail="true"
:currentServiceMessage="currentServiceMessage"
/>
<div class="serviceTypeTabs" @click="handleGoDetail" v-if="false">
<div class="serviceTypeItem">
<image
class="itemIcon"
:src="
serviceMessage.chargingStation
? 'https://eshangtech.com/ShopICO/discovery/chargingStationSelect.png'
: 'https://eshangtech.com/ShopICO/discovery/chargingStationNo.png'
"
/>
<span class="itemText">充电桩</span>
</div>
<div class="serviceTypeItem">
<!-- <image class="itemIcon" :src="serviceMessage.gasStation?'https://eshangtech.com/ShopICO/discovery/gasStationSelect.png':'https://eshangtech.com/ShopICO/discovery/gasStationNo.png'" />-->
<image
class="itemIcon"
src="https://eshangtech.com/ShopICO/discovery/gasStationSelect.png"
/>
<span class="itemText">加油站</span>
</div>
<div class="serviceTypeItem">
<image
class="itemIcon"
:src="
serviceMessage.nursery
? 'https://eshangtech.com/ShopICO/discovery/nurserySelect.png'
: 'https://eshangtech.com/ShopICO/discovery/nurseryNo.png'
"
/>
<span class="itemText">母婴室</span>
</div>
<div class="serviceTypeItem">
<image
class="itemIcon"
:src="
serviceMessage.parkingSpace
? 'https://eshangtech.com/ShopICO/discovery/parkingSpaceSelect.png'
: 'https://eshangtech.com/ShopICO/discovery/parkingSpaceNo.png'
"
/>
<span class="itemText">停车位</span>
</div>
<div class="serviceTypeItem">
<image
class="itemIcon"
:src="
serviceMessage.store
? 'https://eshangtech.com/ShopICO/discovery/storeSelect.png'
: 'https://eshangtech.com/ShopICO/discovery/storeNo.png'
"
/>
<span class="itemText">便利店</span>
</div>
</div>
</view>
<div class="list-box">
<div v-if="false">
<div class="listTitle">精选商家</div>
<div class="shopList">
<div
class="shopItem"
v-for="(item, index) in couponList"
:key="index"
@click="goShop(item)"
>
<div class="shopLeft">
<image
class="shopIcon"
:src="
item.MERCHANTS_LOGO ||
'https://eshangtech.com/ShopICO/no-picture.png'
"
/>
</div>
<div class="shopRight">
<div class="first">
<span class="shopName">{{ item.MERCHANTS_NAME || "-" }}</span>
<span class="tradeType" v-if="item.SHOPTRADE_TEXT">{{
item.SHOPTRADE_TEXT
}}</span>
</div>
<div class="rateBox">
<uni-rate
:value="item.MERCHANTS_SCORE"
size="16"
allowHalf
color="#B8B7B4"
activeColor="#BA922F"
style="margin-right: 8rpx"
/>
<span class="markNumber"
>{{ item.MERCHANTS_SCORE || "-" }}分</span
>
</div>
<div class="otherBox">
<div class="otherItem">
<span class="label">月销</span>
<span class="value">{{ item.MONTHLYSALES || "-" }}</span>
</div>
<div class="otherItem">
<span class="label">人均</span>
<span class="value">{{ item.PERCAPITA || "-" }}</span>
</div>
<div class="otherItem">
<span class="label">评论</span>
<span class="value">{{ item.COMMENT_COUNT || "-" }}</span>
</div>
</div>
</div>
<!-- 去点餐 -->
<div
class="goOrder"
v-if="item.SCANCODE_ORDER === 1"
@click.stop="goBuy(item)"
>
<image
class="orderIcon"
src="https://eshangtech.com/wanmeiyizhanImg/home/goOrderIcon.png"
/>
<span class="goOrderText">去点餐</span>
</div>
</div>
<no-data
text="暂无商家"
:isShow="!(couponList && couponList.length > 0)"
/>
</div>
</div>
<!-- 定位当前位置 -->
<div class="shoplist-service" v-if="false">
<div style="display: flex; align-items: center">
<image
mode="aspectFit"
src="https://eshangtech.com/ShopICO/discovery/shop-dw.png"
style="margin-right: 8rpx; width: 33rpx; height: 33rpx"
></image>
<!-- <span class="position-name">{{city}}</span> -->
<span
class="service-name"
style="flex: 5"
@tap="isShowSeviceBox = !isShowSeviceBox"
>
<!-- 萧山服务区 -->
{{ currentServiceMessage.SERVERPART_NAME }}
</span>
</div>
<div class="service-btn" @click="goSelectServer">
更换服务区<span class="sj"></span>
</div>
</div>
<div style="transition: all 0.5s; background: #fff">
<!-- :style="isShowSeviceBox? 'transform: translateY('+translateY+'px);': 'transform: translateY(-8rpx)'"-->
<div class="banner-box" v-if="false">
<!-- <image src="https://eshangtech.com/ShopICO/discovery/discovery_b.png"></image> -->
<swiper
scroll-x="true"
autoplay="true"
circular="true"
class="banner"
@change="swiperChange"
:current="currentBan"
>
<swiper-item v-for="(img, o) in bannerList" :key="o">
<image :src="img"></image>
</swiper-item>
</swiper>
<div class="swiper-dots">
<div
v-for="(dot, i) in bannerList"
:key="i"
class="dot"
:class="{ active: currentBan === i }"
></div>
</div>
</div>
<div
class="banner-text"
v-if="
(!user && !user.MEMBERSHIP_MOBILEPHONE) || (user && user.MEMBERSHIP_MOBILEPHONE) == ''
"
>
<div style="display: flex; align-items: center">
<!-- <i></i> -->
<span>成为会员超多权益等你享</span>
</div>
<span class="vip-btn" @click="goRegister">立即开启</span>
</div>
<div class="mt8"></div>
<div class="newTabList" v-if="false">
<!-- v-if="selectTypeList && selectTypeList.length > 0" -->
<div
:class="
selectTypeTab === index
? 'newTabItem selectTabItem'
: 'newTabItem'
"
v-for="(item, index) in selectTypeList"
:key="index"
@click="handleChangeType(index)"
>
{{ item.label }}
</div>
</div>
<div v-if="false">
<div
class="newShopUnit"
v-for="(item, i) in onShowTypeList"
:key="i"
@click="goShop(item)"
:style="{ borderWidth: i + 1 === onShowTypeList.length ? '0' : '' }"
>
<div v-if="selectTypeTab !== 0">
<div class="shopItemTop">
<div class="shopImg">
<image
class="shopIcon"
:src="
item.MERCHANTS_LOGO ||
'https://eshangtech.com/ShopICO/no-picture.png'
"
mode="aspectFit"
/>
</div>
<div class="shopDetail">
<div class="shopName">
<!-- max-width: calc(100% - 133rpx); -->
<span
class="shopTitle"
:style="{
maxWidth:
item.SCANCODE_ORDER === 1 &&
item.CouponList &&
item.CouponList.length > 0
? 'calc(100% - 270rpx)'
: 'calc(100% - 133rpx)',
}"
>{{ item.MERCHANTS_NAME }}</span
>
<!-- <span
class="titleIcon"
v-if="item.SCANCODE_ORDER === 1"
@click.stop="goBuy(item)"
></span> -->
</div>
<div class="otherDetail">
<div class="leftDetail">
<span class="mark"
>{{ item.MERCHANTS_SCORE || "-" }}分</span
>
<span class="monthSales"
>月售{{ item.MONTHLYSALES || "-" }}</span
>
<span class="perCapita"
>人均 ¥{{ item.PERCAPITA || "-" }}</span
>
</div>
<div class="rightDetail">
<!-- <span class="perCapita"
>人均 ¥{{ item.PERCAPITA || "-" }}</span
> -->
<!-- <span
v-show="item.CouponList && item.CouponList.length > 0"
class="icon-coupon"
>优惠券</span
> -->
</div>
</div>
<!-- 去点餐 -->
<div
class="goOrder"
v-if="item.SCANCODE_ORDER === 1"
@click.stop="goBuy(item)"
>
<image
class="orderIcon"
src="https://eshangtech.com/wanmeiyizhanImg/home/goOrderIcon.png"
/>
<span class="goOrderText">去点餐</span>
</div>
<!-- 优惠券 -->
<div
class="couponBox"
:style="{
right:
item.SCANCODE_ORDER === 1 &&
item.CouponList &&
item.CouponList.length > 0
? '160rpx'
: '0',
}"
v-if="item.CouponList && item.CouponList.length > 0"
>
<image
class="couponIcon"
src="https://eshangtech.com/wanmeiyizhanImg/home/useCoupon.png"
/>
<span class="couponText">优惠券</span>
</div>
</div>
</div>
<div
class="shopList"
v-if="item.GoodsList && item.GoodsList.length > 0"
>
<div
class="shopItem"
style="padding: 0"
v-for="(subItem, subIndex) in item.GoodsList"
:key="subIndex"
>
<div class="shopImgBox">
<image class="shopImg" :src="subItem.IMAGE_URL" />
</div>
<div class="shopName">{{ subItem.COMMODITY_NAME || "" }}</div>
<div class="itemPrice">
<span class="itemUnit">¥</span>
<span class="itemPrice">{{
subItem.COMMODITY_RETAILPRICE || ""
}}</span>
</div>
</div>
</div>
</div>
<div v-if="selectTypeTab === 0" class="activitieBox">
<div style="width: 100%">
<div class="activeTitle">{{ item.label }}</div>
<div class="couponList">
<div
class="couponItem"
v-for="(subItem, subIndex) in item.children"
:key="subIndex"
@click.stop="goCoupon(subItem)"
>
<div class="itemImgBox">
<image
class="itemImg"
:src="
item.MERCHANTS_LOGO ||
'https://eshangtech.com/ShopICO/no-picture.png'
"
mode="aspectFit"
/>
</div>
<div class="couponText">
{{ subItem.MERCHANTS_NAME || ""
}}{{ subItem.COUPON_NAME || "" }}
</div>
<div class="couponTime">
<image
class="timeIcon"
src="https://eshangtech.com/wanmeiyizhanImg/home/timeIcon.png"
/>
<span class="couponTimeText">
{{
subItem.START_TIME
? $utils.formatDate(subItem.START_TIME)
: ""
}}-{{
subItem.END_TIME
? $utils.formatDate(subItem.END_TIME)
: ""
}}
</span>
</div>
</div>
<no-data
v-if="!(item.children && item.children.length > 0)"
:style="{ width: '100%' }"
:text="selectTypeTab === 0 ? '暂无活动' : ''"
:isShow="!(item.children && item.children.length > 0)"
/>
</div>
</div>
</div>
</div>
<no-data
:text="selectTypeTab === 0 ? '暂无活动' : ''"
:isShow="!(onShowTypeList && onShowTypeList.length > 0)"
/>
</div>
</div>
<div v-if="false">
<div v-if="false">
<div class="mt8"></div>
<div class="shop-unit" v-for="(item, i) in couponList" :key="i">
<div class="coupon-card" @click="goShop(item)">
<div class="conpon-img">
<image
:src="
item.MERCHANTS_LOGO ||
'https://eshangtech.com/ShopICO/no-picture.png'
"
mode="aspectFit"
></image>
</div>
<div class="newListItemRight">
<div class="titleItemRight">
<span class="title">{{ item.MERCHANTS_NAME }}</span>
<span
class="titleIcon"
v-if="item.SCANCODE_ORDER === 1"
@click.stop="goBuy(item)"
></span>
</div>
<div class="scoreBox">
<van-rate
:value="item.MERCHANTS_SCORE"
size="12"
allow-half="true"
color="#f28c44"
void-color="#eee"
void-icon="star"
readonly
>
</van-rate>
<span class="value">{{ " " + item.MERCHANTS_SCORE }}</span>
<span class="value" style="margin-left: 48rpx"
>评论{{ item.COMMENT_COUNT }}</span
>
</div>
<view class="labelList">
<view class="labelItem" style="width: 40%">
<image
class="labelIcon"
src="https://eshangtech.com/wanmeiyizhanImg/discovery/trade.png"
/>
<view class="labelName">{{
item.SHOPTRADE_TEXT || "品类"
}}</view>
</view>
<view class="labelItem">
<view class="labelName">人均 {{ item.PERCAPITA }}</view>
</view>
<view class="labelItem">
<view class="labelName">月售{{ item.MONTHLYSALES }}</view>
</view>
</view>
<!-- <div class="flex-s text246">-->
<!-- <span class="text246 mr32 icon-trade flex-item">{{item.SHOPTRADE_TEXT || "品类"}}</span>-->
<!-- <span class="text246 mr32 flex-item">人均 {{item.PERCAPITA}}</span>-->
<!-- <span class="text246 flex-item">月售{{item.MONTHLYSALES}}</span>-->
<!-- </div>-->
<div class="flex-b mtb16">
<span class="shop-comment-text">{{
item.COMMENT ? '"' + item.COMMENT + '"' : '"等你来评价哟"'
}}</span>
<span v-show="item.CouponList.length > 0" class="icon-coupon"
>优惠券</span
>
</div>
<!-- <hr /> -->
<div class="line"></div>
</div>
</div>
</div>
</div>
<!-- <div class="loading-text" v-if="onShowTypeList.length > 0">
{{
pageMsg.isLoadMore
? "正在加载数据..."
: " 尽请期待更多精彩门店 "
}}
</div> -->
<button
type="primary"
size="mini"
open-type="openSetting"
class="getLocation"
@opensetting="bindopensetting"
v-show="openSetting"
>
开启定位
</button>
</div>
<UniPopup
:show="isLogin && !user && !user.MEMBERSHIP_MOBILEPHONE"
@close="isLogin = false"
custom-style="border-radius: 24rpx;"
>
<div class="pop-box">
<div class="pop-title">温馨提示</div>
<div class="pop-body">您还没有登录快去登录吧!</div>
<div class="popbtn-box">
<div class="popbtn cancel-btn" @click="isLogin = false">取消</div>
<div class="popbtn confirm-btn" @click="goRegister">去登录</div>
</div>
</div>
</UniPopup>
<UniPopup
:show="isShow"
position="bottom"
overlay="false"
@close="isShow = false"
>
<van-picker
show-toolbar
:columns="serverList"
@cancel="isShow = false"
@confirm="chosePart"
value-key="showName"
/>
</UniPopup>
</div>
<tabbar :page="'/pages/discovery/index'" />
<CustomLoading
:visible="isLoading"
v-if="isLoading"
@update:visible="(val) => (isLoading = val)"
/>
</view>
</template>
<script>
import UniPopup from "@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
import currentService from "@/components/currentService.vue";
import noData from "../../components/noData.vue";
import tabbar from "../../components/tabbar.vue";
import CustomLoading from "../../components/customLoading.vue";
import { mapGetters, mapMutations } from "vuex";
export default {
data() {
return {
pageMsg: {
pageSize: 6,
pageIndex: 1,
total: 0,
isLoadMore: false,
serverDesc: "",
ImagePath: "",
},
loadTime: 0,
couponList: [],
serverPartList: [],
serverPart: "",
isShow: false,
isShowSeviceBox: true,
isFresh: false,
openSetting: false,
isLogin: false,
showServerList: [],
translateY: 0,
currentBan: 0,
bannerList: ["https://eshangtech.com/ShopICO/discovery/discovery_b.png"],
servepartSeviceList: {
HASPANTRY: {
id: "1",
label: "男厕",
icos: "https://eshangtech.com/ShopICO/yifu/spico/manWC.png",
},
HASWIFI: {
id: "2",
label: "女厕",
icos: "https://eshangtech.com/ShopICO/yifu/spico/womenWC.png",
},
HASTHIRDTOILETS: {
id: "3",
label: "第三卫生间",
icos: "https://eshangtech.com/ShopICO/yifu/spico/thirdToilets.png",
},
TOILETCOUNT: {
id: "4",
label: "潮汐厕位",
icos: "https://eshangtech.com/ShopICO/yifu/spico/tidalSpace.png",
},
HASWATERROOM: {
id: "5",
label: "开水器",
icos: "https://eshangtech.com/ShopICO/yifu/spico/waterBoiler.png",
},
HASSHOWERROOM: {
id: "6",
label: "车辆加水",
icos: "https://eshangtech.com/ShopICO/yifu/spico/vehicleRefueling.png",
},
HASCHILD: {
id: "7",
label: "车辆维修",
icos: "https://eshangtech.com/ShopICO/yifu/spico/maintenance.png",
},
SMALLPARKING: {
id: "8",
icos: "https://eshangtech.com/ShopICO/yifu/spico/car.png",
label: "轿车车位",
},
PACKING: {
id: "9",
label: "客车车位",
icos: "https://eshangtech.com/ShopICO/yifu/spico/bus.png",
},
TRUCKPACKING: {
id: "10",
label: "货车车位",
icos: "https://eshangtech.com/ShopICO/yifu/spico/trainCar.png",
},
DININGROOMCOUNT: {
id: "11",
label: "餐饮",
icos: "https://eshangtech.com/ShopICO/yifu/spico/food.png",
},
HASBACKGROUNDRADIO: {
id: "12",
label: "便利店",
icos: "https://eshangtech.com/ShopICO/yifu/spico/minimart.png",
},
HASMESSAGESEARCH: {
id: "13",
label: "住宿",
icos: "https://eshangtech.com/ShopICO/yifu/spico/room.png",
},
DININGBXCOUNT: {
id: "14",
label: "商铺",
icos: "https://eshangtech.com/ShopICO/yifu/spico/shop.png",
},
DANPACKING: {
id: "15",
label: "危化品车位",
icos: "https://eshangtech.com/ShopICO/yifu/spico/chemicals.png",
},
},
currentServiceMessage: {}, // 当前的服务区数据
showServerIconList: [],
showServerInfo: false,
currentServiceInfo: {},
menu: {}, // 用户手机导航按钮数据
serviceMessage: {}, // 判断服务区 充电桩母婴室.... 是否有的对象
allTypeList: [], // 所有业态的
onShowTypeList: [], // 当前显示的业态列表
selectTypeTab: 0, // 选中的业态类型
selectTypeList: [], // 选择业态的列表
newActivityList: [], // 折扣优惠
memberActivitiesList: [], // 会员活动
onlineShoppingMallList: [], // 线上商城
tabList: [
{ label: "折扣优惠", value: 1 },
{ label: "会员活动", value: 2 },
{ label: "线上商城", value: 3 },
], // 新的tab内容
selectTab: 1,
loginType: "",
isLoading: false,
};
},
computed: {
...mapGetters({
user: "user",
canIuse: "canIuse",
homeserverPart: "serverPart",
discoveryServerPart: "discoveryServerPart",
refresh: "refresh",
serverList: "severList",
}),
},
components: {
// popGet
noData,
UniPopup,
currentService,
tabbar,
CustomLoading,
},
onLoad() {
let systemInfo = uni.getSystemInfoSync();
let type = uni.getStorageSync("loginType");
console.log("type", type);
if (type === "min") {
this.menu = uni.getMenuButtonBoundingClientRect();
} else {
this.menu = systemInfo.safeArea;
}
console.log("this.menu", this.menu);
console.log("this.user", this.user);
this.handleGetMemberData();
this.handleGetOnlineShoppingMall();
},
onHide() {
this.isLoading = false;
},
onUnload() {
this.isShow = false;
this.isLoading = false;
},
destroyed() {
this.isLoading = false;
},
onShow() {
uni.hideTabBar({
animation: false,
});
let res = uni.getStorageSync("currentService");
console.log("this.currentServiceMessage", this.currentServiceMessage);
if (this.currentServiceMessage.SERVERPART_ID !== res.SERVERPART_ID) {
this.couponList = [];
this.currentServiceMessage = res;
this.getCouponList();
this.getServerpartInfo();
}
// if (this.homeserverPart.ServerPart_Id === this.discoveryServerPart.ServerPart_Id) {
// if (this.serverPart.ServerPart_Id !== this.discoveryServerPart.ServerPart_Id) {
// this.serverPart = this.homeserverPart
// this.couponList = []
// this.pageMsg.pageIndex = 1
// this.pageMsg.isLoadMore = true
// // this.isShowSeviceBox = false
//
// this.getCouponList()
// this.getServerpartInfo()
// }
// } else {
// if (this.serverPart.ServerPart_Id !== this.discoveryServerPart.ServerPart_Id) {
// this.serverPart = this.discoveryServerPart
// this.couponList = []
// this.pageMsg.pageIndex = 1
// this.pageMsg.isLoadMore = true
// // this.isShowSeviceBox = false
// this.getServerpartInfo()
// this.getCouponList()
// }
// }
// if (this.refresh) {
// this.setFresh(false)
// // this.isShowSeviceBox = false
// this.couponList = []
// this.getCouponList()
// this.getServerpartInfo()
// }
},
onPullDownRefresh() {
// let _this = this
// this.isShowSeviceBox = false
this.pageMsg.pageIndex = 1;
this.pageMsg.isLoadMore = true;
// _this.getLocalServer()
setTimeout(function () {
// this.isShowSeviceBox = true
uni.stopPullDownRefresh();
}, 1000);
},
methods: {
...mapMutations({
setFresh: "refresh",
setArea: "setHomeServer",
setServerPart: "discoveryServerPart",
setprovinceCode: "setprovinceCode",
setSeverList: "severList",
}),
// 切换tab触发的方法
handleChangeTab(value) {
this.selectTab = value;
},
// 拿到会员活动的数据
async handleGetMemberData() {
this.isLoading = true;
let req = {
SearchParameter: {
NOTICEINFO_TYPES: 2020,
PROVINCE_CODE: this.user.PROVINCE_CODE || "340000",
NOTICEINFO_STATE: 1,
},
PageIndex: 1,
PageSize: 999999,
};
const data = await this.$api.$post(
"/EShangApiMain/Notice/GetNOTICEINFOList",
req
);
let list = data.Result_Data.List;
console.log("handleGetMemberData", list);
this.memberActivitiesList = list;
this.isLoading = false;
},
// 拿到线上商城的数据
async handleGetOnlineShoppingMall() {
this.isLoading = true;
let req = {
SearchParameter: {
NOTICEINFO_TYPES: 2030,
PROVINCE_CODE: this.user.PROVINCE_CODE || "340000",
NOTICEINFO_STATE: 1,
},
PageIndex: 1,
PageSize: 999999,
};
const data = await this.$api.$post(
"/EShangApiMain/Notice/GetNOTICEINFOList",
req
);
let list = data.Result_Data.List;
console.log("handleGetOnlineShoppingMall", list);
this.onlineShoppingMallList = list;
this.isLoading = false;
},
handleToMap() {
let currentService = uni.getStorageSync("currentService");
uni.openLocation({
latitude: currentService.SERVERPART_Y * 1,
longitude: currentService.SERVERPART_X * 1,
scale: 16, // 缩放比例
name: currentService.SERVERPART_NAME,
address: "", // 这个可能会影响地图的定位,所以可以选择不填
success(data) {
console.log(data);
},
fail(err) {
console.log(err);
},
});
},
// 跳转领取优惠券
goCoupon(item) {
console.log("item", item);
uni.navigateTo({ url: "/pages/couponDetail/index?id=" + item.COUPON_ID });
},
// ...mapActions('city', {
// 'getLocation': 'CITY_GET_LOCATION'
// }),
handleGoDetail() {
uni.navigateTo({
url:
"/pages/serviceDetail/index?id=" +
this.currentServiceMessage.SERVERPART_ID,
});
},
// 改变是否显示服务区的详情
handleChangeShowServiceInfo() {
this.showServerInfo = !this.showServerInfo;
},
// 将列表按照月销排序
handleGetSort(list) {
console.log("list", list);
let res = [];
if (list && list.length > 0) {
var len = list.length;
for (var i = 0; i < len - 1; i++) {
for (var j = 0; j < len - 1 - i; j++) {
if (list[j].MONTHLYSALES < list[j + 1].MONTHLYSALES) {
var temp = list[j];
list[j] = list[j + 1];
list[j + 1] = temp;
}
}
}
res = list;
}
return res;
},
// 跳转到地图选择服务区
goSelectServer() {
uni.navigateTo({ url: "/pages/newMap/index/index" });
},
goRegister() {
if (this.type === "min") {
uni.navigateTo({ url: "/pages/register/index" });
} else {
uni.navigateTo({ url: "/pages/login/index" });
}
},
goDetail(id) {
if (this.user && this.user.MEMBERSHIP_MOBILEPHONE) {
uni.navigateTo({ url: "/pages/couponDetail/index?id=" + id });
} else {
this.isLogin = true;
}
},
goShop(item) {
console.log("goShop", item);
if (item.SCANCODE_ORDER === 1) {
this.goBuy(item);
} else {
uni.navigateTo({
url: `/pages/storeDetail/index?id=${item.MERCHANTS_ID}`,
});
}
},
goBuy(item) {
console.log("goBuy", item);
if (this.user && this.user.MEMBERSHIP_MOBILEPHONE) {
let id = item.SERVERPARTSHOP_IDS.split(",")[0];
// let arr = {
// id: id
// shopName: item.MERCHANTS_NAME,
// serverpartId: item.SERVERPART_ID
// }
// this.setprovinceCode(item.PROVINCE_CODE)
// this.$store.commit('nowStore', arr)
uni.navigateTo({
url: `/pages/shopPages/shop/index?id=${id}&mid=${item.MERCHANTS_ID}&province=${item.PROVINCE_CODE}`,
});
} else {
let id = item.SERVERPARTSHOP_IDS.split(",")[0];
uni.navigateTo({
url: `/pages/shopPages/shop/index?id=${id}&mid=${item.MERCHANTS_ID}&province=${item.PROVINCE_CODE}`,
});
this.isLogin = true;
}
},
toggleSever() {
if (this.serverList.length > 0) {
this.isShow = !this.isShow;
} else {
uni.showToast({ title: "没有可选择服务区数据。", icon: "none" });
}
},
getLocalServer() {
// 根据定位获取周边服务区
let _this = this;
uni.choosePoi({
// type: 'wgs84',
success: function (res) {
let latitude = res.latitude;
let longitude = res.longitude;
_this.$api
.getCoop({
action_type: "getServerPartByLocation",
action_data: latitude,
action_record: longitude,
distance: 150,
type: 1000,
})
.then(function (data) {
if (data.ResultCode === "100") {
let _data = data.Data.List;
_data.map((n) => {
n.showName =
n.ServerPart_Name +
"(" +
Math.round(n.Distance * 100) / 100 +
"km)";
});
_this.serverPartList = _data;
_this.setSeverList(_data);
let hasIt = _data.findIndex((element) => {
return (
_this.serverPart.ServerPart_Id === element.ServerPart_Id
);
});
if (hasIt === -1) {
// 如果新获取的服务区列表不包含当前选中项 则默认选中服务区第一个
_this.serverPart = _data[0];
_this.setArea(_data[0]);
}
// _this.isShowSeviceBox = false
_this.getServerpartInfo();
_this.getCouponList();
_this.openSetting = false;
}
});
},
fail(res) {
_this.openSetting = true;
},
});
},
bindopensetting(e) {
if (
e.mp.detail.authSetting["scope.userLocation"] &&
e.mp.detail.authSetting
) {
this.getLocalServer();
}
},
chosePart(event) {
let index = event.target.index;
this.serverPart = this.serverList[index];
this.setServerPart(this.serverList[index]);
this.isShow = false;
this.pageMsg.isLoadMore = true;
this.pageMsg.pageIndex = 1;
this.couponList = [];
this.getCouponList();
this.getServerpartInfo();
},
getCouponList() {
let _this = this;
uni.showLoading({
title: "加载中...",
});
_this.$api
.getCoop({
action_type: "GetSellerList",
showSales: 1,
showCoupon: 1,
showComment: 1,
serverpartId:
this.serverPart.ServerPart_Id ||
this.currentServiceMessage.SERVERPART_ID,
provinceCode: this.serverPart.ProvinceCode || "340000",
showGoods: 1,
pageSize: 9999,
pageIndex: 1,
})
.then(function (data) {
if (data.ResultCode === "100") {
data.Data.List.map((n) => {
if (n.COUPON_TYPE === 1000) {
n.coast =
Math.round((n.WITH_AMOUNT - n.USED_AMOUNT) * 100) / 100;
}
});
console.log("data.Data.List", data.Data.List);
if (_this.pageMsg.pageIndex === 1) {
_this.couponList = data.Data.List;
_this.couponList = _this.handleGetSort(_this.couponList);
} else {
_this.couponList = _this.couponList.concat(data.Data.List);
_this.couponList = _this.handleGetSort(_this.couponList);
}
if (data.Data.TotalCount > _this.couponList.length) {
_this.pageMsg.isLoadMore = true;
} else {
_this.pageMsg.isLoadMore = false;
}
_this.handleSortShopList(_this.couponList);
console.log("_this.couponList", _this.couponList);
} else {
_this.pageMsg.isLoadMore = false;
}
uni.hideLoading();
});
},
// 切换查看的业态
handleChangeType(value) {
this.selectTypeTab = value;
this.onShowTypeList = this.allTypeList[this.selectTypeTab];
},
// 按照查出来的门店的业态进行分类
handleSortShopList(list) {
let allList = [];
let tabList = [];
// 优惠券列表
let couponList = [];
// 先遍历出 全部门店的业态
if (list && list.length > 0) {
let idList = [];
list.forEach((item) => {
if (item.SHOPTRADE) {
if (idList.indexOf(item.SHOPTRADE) === -1) {
idList.push(item.SHOPTRADE);
tabList.push({
label: item.SHOPTRADE_TEXT,
value: item.SHOPTRADE,
});
}
} else {
if (idList.indexOf("0") === -1) {
idList.push("0");
tabList.push({
label: "其他",
value: "0",
});
}
}
if (item.CouponList && item.CouponList.length > 0) {
item.CouponList.forEach((subItem) => {
let obj = JSON.parse(JSON.stringify(subItem));
obj.MERCHANTS_LOGO = item.MERCHANTS_LOGO;
obj.MERCHANTS_NAME = item.MERCHANTS_NAME;
obj.parent = item;
couponList.push(obj);
});
}
});
this.newActivityList = couponList;
// 根据遍历出的业态种类 变成一个二维数据
if (idList && idList.length > 0) {
idList.forEach((item) => {
allList.push([]);
});
idList.forEach((item, index) => {
list.forEach((subItem) => {
if (subItem.SHOPTRADE) {
if (item === subItem.SHOPTRADE) {
let oldList = allList[index];
oldList.push(subItem);
}
} else {
if (item === "0") {
let oldList = allList[index];
oldList.push(subItem);
}
}
});
});
}
console.log("allList", allList);
}
console.log("couponList", couponList);
if (allList && allList.length > 0) {
allList.unshift([{ label: "折扣优惠", children: couponList }]);
// 各种业态类型的二维数组
this.allTypeList = allList;
this.onShowTypeList = allList[this.selectTypeTab];
// 在说明有数据的情况下 在tab列表里面添加一个精选活动的tab选择
tabList.unshift({ label: "精选活动", value: "精选活动" });
this.selectTypeList = tabList;
}
},
async getServerpartInfo() {
let seatInfo = JSON.parse(uni.getStorageSync("actualLocation"));
console.log("seatInfo", seatInfo);
const req = {
ServerpartId: this.currentServiceMessage.SERVERPART_ID,
longitude: seatInfo.longitude || "",
latitude: seatInfo.latitude || "",
};
const data = await this.$api.$get(
"/CommercialApi/BaseInfo/GetServerpartInfo",
req
);
console.log("_data", data);
let _data = data.Result_Data;
this.currentServiceInfo = _data;
console.log("this.currentServiceInfo", this.currentServiceInfo);
this.pageMsg.serverDesc = _data.ServerpartInfo.SERVERPART_INFO;
this.pageMsg.ImagePath =
_data.ImageLits && _data.ImageLits.length > 0 ? _data.ImageLits[0] : "";
let arr = Object.keys(this.servepartSeviceList);
console.log("arr", arr);
let resList = _data.RegionInfo;
let result = [];
// 拥有配置的列表
let configList = {
chargingStation: false,
gasStation: false,
nursery: false,
parkingSpace: false,
store: false,
};
if (resList && resList.length > 0) {
resList.forEach((item) => {
let itemList = [];
arr.forEach((n) => {
if (item[n]) {
let obj = this.servepartSeviceList[n];
obj.value = item[n];
itemList.push(obj);
}
});
result.push({ label: item.SERVERPART_REGIONNAME, list: itemList });
if (item.LIVESTOCKPACKING) {
configList.chargingStation = true;
}
if (
item.REFUELINGGUN92 > 0 ||
item.REFUELINGGUN95 > 0 ||
item.REFUELINGGUN0 > 0
) {
configList.gasStation = true;
}
if (item.HASMOTHER || item.HASMOTHER > 0) {
configList.nursery = true;
}
if (
item.SMALLPARKING > 0 ||
item.PACKING > 0 ||
item.TRUCKPACKING > 0 ||
item.LONGPACKING > 0 ||
item.DANPACKING > 0
) {
configList.parkingSpace = true;
}
if (item.HASBACKGROUNDRADIO || item.HASBACKGROUNDRADIO > 0) {
configList.store = true;
}
});
}
this.serviceMessage = configList;
console.log("result", result);
this.showServerIconList = result;
let height = 0;
if (result && result.length > 0) {
result.forEach((item) => {
if (item.list && item.list.length > 0) {
height += (Math.ceil(item.list.length / 4) + 1) * 30 + 20;
} else {
height += -32;
}
console.log("height", height);
});
}
this.translateY = height;
this.isShowSeviceBox = true;
// let _this = this
// this.$forceUpdate()
// this.$api.getCoop({
// action_type: 'getServerPartInfo',
// provinceCode: this.serverPart.ProvinceCode || '340000',
// serverpartId: this.serverPart.ServerPart_Id || this.currentServiceMessage.SERVERPART_ID
// }).then(res => {
// let _data = res.Data
// console.log('_data2222', _data)
//
// _this.showServerList = [{
// icos: 'https://eshangtech.com/ShopICO/discovery/manWC.png',
// label: '男厕所'
// }]
//
// // 服务区基础信息
// let height = 0
//
// _this.pageMsg.serverDesc = _data.SERVERPART_DESC // 服务区信息描述
// height = (_data.SERVERPART_DESC || _data.ImagePath) ? 160 : -8
// _this.pageMsg.ImagePath = _data.ImagePath
// _this.$forceUpdate()
// let arr = Object.keys(_this.servepartSeviceList)
// arr.forEach(n => {
// if (_data[n]) {
// _this.showServerList.push(_this.servepartSeviceList[n])
// }
// })
// height += _this.showServerList.length > 0 ? ((_this.showServerList.length / 4) * 40 + 32) : -32
// _this.translateY = height + 32
//
// _this.isShowSeviceBox = true
// })
},
// 服务区图片的改变
swiperChange() {},
},
onReachBottom() {
if (this.pageMsg.isLoadMore) {
this.pageMsg.pageIndex += 1;
this.getCouponList();
// this.getServerpartInfo()
}
},
};
</script>
<style scoped lang="less">
.main {
width: 100%;
background-color: #fff;
box-sizing: border-box;
padding: 0 32rpx;
// padding-bottom: calc(90rpx + env(safe-area-inset-bottom));
.top {
width: 100%;
box-sizing: border-box;
background: #fff;
.topContent {
display: flex;
align-items: center;
box-sizing: border-box;
.pageTitle {
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
"Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 400;
font-size: 40rpx;
color: #090c1a;
line-height: 56rpx;
text-align: left;
font-style: normal;
}
.backIcon {
width: 48rpx;
height: 48rpx;
margin-right: 8px;
}
.currentServiceBox {
display: flex;
align-items: center;
padding: 8rpx 20rpx;
border-radius: 32rpx;
border: 1rpx solid #e7e7e6;
.pointIcon {
width: 24rpx;
height: 24rpx;
margin-right: 8rpx;
}
.serviceName {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 28rpx;
color: #090c1a;
line-height: 40rpx;
text-align: justify;
font-style: normal;
}
.rightArrowIcon {
width: 24rpx;
height: 24rpx;
margin-left: 8rpx;
}
}
}
}
.newTab {
width: 100%;
height: 58rpx;
display: flex;
align-items: center;
margin-top: 28rpx;
border-bottom: 2rpx solid #f5f6f7;
.tabItem {
width: calc(100% / 3);
display: flex;
align-items: center;
justify-content: center;
font-family: "PingFangSC";
font-weight: 400;
font-size: 28rpx;
color: #716f69;
line-height: 36rpx;
text-align: left;
font-style: normal;
padding-bottom: 16rpx;
}
.selectTab {
color: #130f05;
position: relative;
}
.selectTab::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 2rem;
height: 4rpx;
background: #ba922f;
}
}
.newContent {
width: 100%;
box-sizing: border-box;
padding-top: 24rpx;
.content {
.contentItem {
width: 686rpx;
height: 272rpx;
border-radius: 16rpx;
overflow: hidden;
.contentImg {
width: 100%;
height: 100%;
}
}
}
}
.todayRecommendation {
width: 100%;
margin-top: 24rpx;
.todayTitle {
font-family: "PingFangSC";
font-weight: 400;
font-size: 30rpx;
color: #130f05;
line-height: 36rpx;
text-align: left;
font-style: normal;
margin-bottom: 16rpx;
}
.todayItem {
width: 100%;
height: 272rpx;
border-radius: 16rpx;
overflow: hidden;
margin-bottom: 24rpx;
.todayImg {
width: 100%;
height: 100%;
}
}
}
.selectService {
.currentServiceBox {
display: flex;
align-items: center;
padding: 8rpx 20rpx;
border-radius: 32rpx;
border: 1rpx solid #e7e7e6;
.pointIcon {
width: 24rpx;
height: 24rpx;
margin-right: 8rpx;
}
.serviceName {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 28rpx;
color: #090c1a;
line-height: 40rpx;
text-align: justify;
font-style: normal;
}
.rightArrowIcon {
width: 24rpx;
height: 24rpx;
margin-left: 8rpx;
}
}
}
.newBox {
width: 100%;
margin-top: 24rpx;
.activityTitle {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 28rpx;
color: #716f69;
line-height: 40rpx;
text-align: left;
font-style: normal;
}
.activityBox {
width: 100%;
height: 284rpx;
margin-top: 16rpx;
.couponList {
.couponItem {
display: inline-block;
width: 332rpx;
height: 100%;
margin-right: 24rpx;
.couponItemTop {
width: 100%;
height: 192rpx;
.itemImg {
width: 100%;
height: 100%;
}
}
.couponItemBottom {
width: 100%;
margin-top: 16rpx;
.couponText {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 28rpx;
color: #130f05;
line-height: 40rpx;
text-align: left;
font-style: normal;
}
.couponTime {
display: flex;
align-items: center;
.timeIcon {
width: 24rpx;
height: 24rpx;
margin-right: 4rpx;
}
.couponTimeText {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 24rpx;
color: #716f69;
line-height: 36rpx;
text-align: left;
font-style: normal;
}
}
}
}
}
.noDataBox {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
}
}
.header {
width: 100%;
position: fixed;
top: 0;
left: 0;
margin-bottom: 44rpx;
background-color: #fff;
box-sizing: border-box;
padding: 0 32rpx;
z-index: 10;
.currentServiceBox {
display: flex;
align-items: center;
padding: 8rpx 20rpx;
border-radius: 32rpx;
border: 1rpx solid #e7e7e6;
.pointIcon {
width: 24rpx;
height: 24rpx;
margin-right: 8rpx;
}
.serviceName {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 28rpx;
color: #090c1a;
line-height: 40rpx;
text-align: justify;
font-style: normal;
}
.rightArrowIcon {
width: 24rpx;
height: 24rpx;
margin-left: 8rpx;
}
}
.arrowBox {
width: 100%;
display: flex;
align-items: center;
.img {
width: 48rpx;
height: 48rpx;
}
.selectServiceBox {
margin-left: 16rpx;
display: flex;
align-items: center;
.serviceIcon {
width: 70rpx;
height: 70rpx;
position: relative;
z-index: 2;
}
.nameBox {
font-family: PingFangSC, PingFang SC;
font-weight: 600;
font-size: 24rpx;
color: #160002;
line-height: 36rpx;
text-align: left;
font-style: normal;
padding: 12rpx 34rpx 12rpx 48rpx;
display: inline-block;
border-top-right-radius: 200rpx;
border-bottom-right-radius: 200rpx;
background: #f4f3f2;
transform: translateX(-20px);
.moreIcon {
width: 24rpx;
height: 24rpx;
margin-left: 14rpx;
}
}
}
}
}
.serviceBox {
.serviceImg {
width: 100%;
height: 350rpx;
border-radius: 16rpx;
overflow: hidden;
position: relative;
.img {
width: 100%;
height: 100%;
}
.defaultImgBox {
width: 100%;
height: 100%;
display: flex;
align-content: center;
justify-content: center;
.defaultImg {
width: 350rpx;
height: 350rpx;
}
}
.serviceInfoBox {
position: absolute;
bottom: 24rpx;
left: 24rpx;
display: flex;
align-items: center;
.serviceName {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 36rpx;
color: #ffffff;
line-height: 52rpx;
text-align: left;
font-style: normal;
}
.state {
display: inline-block;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 24rpx;
color: #1ba74d;
line-height: 36rpx;
text-align: left;
font-style: normal;
padding: 2rpx 8rpx;
background: #e9f8ee;
border-radius: 4rpx;
margin-left: 16rpx;
}
}
}
.serviceMessage {
width: 100%;
box-sizing: border-box;
padding: 8rpx 0;
margin-top: 24rpx;
display: flex;
align-items: center;
justify-content: space-between;
.leftMessage {
width: calc(100% - 178rpx);
margin-right: 16rpx;
box-sizing: border-box;
.leftTop {
flex: 1;
display: flex;
align-items: center;
.leftIcon {
width: 32rpx;
height: 32rpx;
margin-right: 8rpx;
}
.massageNameBox {
font-family: PingFangSC, PingFang SC;
font-weight: 600;
font-size: 32rpx;
color: #282622;
line-height: 44rpx;
text-align: left;
font-style: normal;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.state {
display: inline-block;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 24rpx;
color: #1ba74d;
line-height: 36rpx;
text-align: left;
font-style: normal;
padding: 2rpx 8rpx;
background: #e9f8ee;
border-radius: 4rpx;
margin-left: 16rpx;
}
}
.leftBottom {
width: 100%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
.address {
width: 100%;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 24rpx;
color: #5f5b52;
line-height: 32rpx;
text-align: left;
font-style: normal;
margin-left: 36rpx;
}
}
}
.rightMessage {
width: 162rpx;
height: 64rpx;
border-radius: 32rpx;
border: 2rpx solid #ae8d3e;
display: flex;
align-items: center;
box-sizing: border-box;
padding: 16rpx 8rpx;
.navigationIcon {
width: 32rpx;
height: 32rpx;
}
.distance {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 22rpx;
color: #ae8d3e;
line-height: 32rpx;
text-align: left;
font-style: normal;
}
}
}
.serviceTypeTabs {
width: 100%;
height: 86px;
background: #fcf8ef;
border-radius: 4px;
margin-top: 16px;
display: flex;
margin-bottom: 30rpx;
.serviceTypeItem {
width: 25%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.itemIcon {
width: 48rpx;
height: 48rpx;
margin-bottom: 8px;
}
.itemText {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(0, 0, 0, 0.65);
line-height: 18px;
}
}
}
}
.newListItemRight {
flex: 1;
.titleItemRight {
display: flex;
align-items: center;
.title {
font-size: 30rpx;
font-family: "PingFang SC Bold";
color: #313131;
font-weight: bolder;
}
.titleIcon {
background: url("https://eshangtech.com/ShopICO/icos/to-eat.png")
no-repeat center; // eshangtech.com/ShopICO/icos/to-eat.png) no-repeat center;
background-size: contain;
width: 133rpx;
height: 48rpx;
}
}
.scoreBox {
width: 100%;
display: flex;
align-content: center;
margin-top: 8rpx;
.value {
font-size: 24rpx;
color: #333;
margin-top: 6rpx;
}
}
.labelList {
width: 100%;
display: flex;
align-content: center;
margin-top: 8rpx;
.labelItem {
width: 30%;
display: flex;
align-content: center;
overflow: hidden;
.labelIcon {
width: 24rpx;
height: 24rpx;
margin-right: 6rpx;
margin-top: 4rpx;
}
.labelName {
flex: 1;
font-size: 24rpx;
color: #666;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
}
}
}
}
/* 头部搜索 */
* {
box-sizing: border-box;
}
.mt8 {
margin-top: 16rpx;
}
.text263 {
font-size: 24rpx;
color: #333;
}
.text246 {
font-size: 24rpx;
color: #666;
}
.flex-item {
width: calc((100% / 3));
display: inline-block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.flex-s {
width: 100%;
display: flex;
align-items: center;
margin-top: 8rpx;
}
.flex-b {
display: flex;
align-items: center;
justify-content: space-between;
}
.mtb16 {
margin: 16rpx 0 24rpx 0;
}
hr {
color: #eeeeee !important;
height: 2rpx;
width: 100%;
background: #eee !important;
}
.line {
color: #eeeeee !important;
height: 2rpx;
width: 100%;
background: #eee !important;
}
.list-box {
width: 100%;
background: #fff;
height: 100%;
// margin-top: 48rpx;
// border-bottom: 2rpx solid #f0f0f0;
.listTitle {
width: 100%;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 32rpx;
color: #130f05;
line-height: 44rpx;
text-align: left;
font-style: normal;
}
.shopList {
width: 100%;
margin-top: 12rpx;
.shopItem {
width: 100%;
align-items: center;
box-sizing: border-box;
padding: 32rpx 0;
// border-bottom: 2rpx solid #f0f0f0;
position: relative;
.shopLeft {
width: 160rpx;
height: 160rpx;
border-radius: 12rpx;
overflow: hidden;
margin-right: 24rpx;
.shopIcon {
width: 100%;
height: 100%;
}
}
.shopRight {
width: calc(100% - 184rpx);
height: 160rpx;
.first {
display: flex;
align-items: center;
.shopName {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 32rpx;
color: #130f05;
line-height: 44rpx;
text-align: left;
font-style: normal;
display: inline-block;
max-width: 300rpx;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.tradeType {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 22rpx;
color: #c27003;
line-height: 32rpx;
text-align: left;
font-style: normal;
padding: 2rpx 6rpx;
background: #f9f0e5;
border-radius: 2rpx;
margin-left: 12rpx;
}
}
.rateBox {
margin-top: 4rpx;
display: flex;
align-items: center;
.markNumber {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 24rpx;
color: #130f05;
line-height: 36rpx;
text-align: left;
font-style: normal;
}
}
.otherBox {
margin-top: 16rpx;
display: flex;
align-items: center;
.otherItem {
margin-right: 54rpx;
display: flex;
flex-direction: column;
.label {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 24rpx;
color: #716f69;
line-height: 36rpx;
text-align: left;
font-style: normal;
}
.value {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 24rpx;
color: #130f05;
line-height: 36rpx;
text-align: left;
font-style: normal;
}
}
.otherItem:nth-last-child(1) {
margin-right: 0;
}
}
}
.goOrder {
position: absolute;
right: 0;
top: 32rpx;
padding: 10rpx 12rpx;
border-radius: 4rpx;
border: 2rpx solid #ae8d3e;
display: flex;
align-items: center;
.orderIcon {
width: 32rpx;
height: 32rpx;
margin-right: 8rpx;
}
.goOrderText {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 22rpx;
color: #ba922f;
line-height: 32rpx;
text-align: left;
font-style: normal;
}
}
.couponBox {
padding: 4rpx 6rpx;
background: rgba(247, 80, 49, 0.08);
border-radius: 2rpx;
display: flex;
align-items: center;
position: absolute;
right: 160rpx;
bottom: 32rpx;
.couponIcon {
width: 24rpx;
height: 24rpx;
margin-right: 4rpx;
}
.couponText {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 22rpx;
color: #f75031;
line-height: 32rpx;
text-align: left;
font-style: normal;
white-space: nowrap;
}
}
}
}
}
.card-list {
padding-top: 24rpx;
padding-bottom: 24rpx;
margin-top: 30rpx;
background: #fff;
}
.banner-box {
// padding-bottom 16rpx
background: #ffffff;
text-align: center;
position: relative;
}
// .banner-box image
// width 690rpx
// height 197rpx
.banner {
background: #fff;
height: 197rpx;
width: 690rpx;
margin: 0 auto;
}
.banner image {
width: 100%;
height: 197rpx;
}
.swiper-dots {
width: 90rpx;
height: 20rpx;
display: flex;
flex-direction: row;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 6rpx;
}
.dot {
width: 30rpx;
height: 8rpx;
border-radius: 14rpx;
margin-right: 12rpx;
background-color: #ffffff;
opacity: 0.3;
}
.active.dot {
background-color: #fff;
opacity: 1;
}
.banner-text {
width: 690rpx;
margin: 20rpx auto 0 auto;
border-radius: 12rpx;
background: #383838;
color: #d5c8a6;
padding: 20rpx 32rpx;
font-size: 24rpx;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
i {
background: url("https://eshangtech.com/ShopICO/vip-ico.png") no-repeat
center; // eshangtech.com/ShopICO/vip-ico.png) no-repeat center
background-size: contain;
width: 36rpx;
height: 36rpx;
margin-right: 16rpx;
}
.vip-btn {
width: 132rpx;
height: 38rpx;
line-height: 38rpx;
border: 1rpx solid #d5c8a6;
border-radius: 20rpx;
margin-left: 74rpx;
font-family: "PingFang SC Regular";
text-align: center;
}
}
span.ico-t-count {
font-style: normal;
color: #fff;
border-radius: 18px;
min-width: 8px;
width: auto;
height: auto;
padding: 2rpx 8rpx;
font-size: 20rpx;
line-height: 1.2;
text-align: center;
white-space: nowrap;
background: #ed4d3e;
position: absolute;
right: -4rpx;
top: -12rpx;
}
.zhanwei {
height: 112rpx;
}
.shoplist-service {
position: fixed;
display: flex;
justify-content: space-between;
padding: 20rpx 30rpx;
font-size: 24rpx;
height: 104rpx;
display: flex;
align-items: center;
background: #fff;
width: 100%;
box-sizing: border-box;
z-index: 1;
}
.position-btn,
.service-btn {
border-radius: 8rpx;
font-size: 24rpx;
height: 40rpx;
color: #d5c59d;
background: #383838;
padding: 8rpx 16rpx;
border-radius: 16rpx;
line-height: 40rpx;
display: flex;
align-items: baseline;
}
.service-name,
.position-name {
color: #555;
font-weight: bolder;
font-size: 28rpx;
display: inline-block;
}
.sj {
width: 0;
height: 0;
border: 0;
border-left: 16rpx solid transparent;
border-bottom: 14rpx solid #d5c59d;
margin-left: 16rpx;
}
.servepart-sevice-box {
font-size: 24rpx;
background: #ffffff;
box-shadow: 0 0 8rpx 0 #eee;
padding: 16rpx;
margin: 0 32rpx 32rpx;
border-radius: 8upx;
// position absolute
z-index: 0;
width: 686rpx;
box-sizing: border-box;
border-radius: 6rpx;
transition: all 1s;
.sevice-des-box {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16rpx;
padding-bottom: 16rpx;
border-bottom: 1rpx solid #f1f1f1;
}
.sevice-unit-box {
// display flex
// align-items center
// flex-wrap wrap
.sevice-unit {
width: 160rpx;
font-size: 22rpx;
display: flex;
align-items: center;
margin: 8rpx 0;
}
.image {
height: 33rpx;
width: 33rpx;
margin-right: 8rpx;
}
}
.sevice-des {
width: 918rpx;
height: 102rpx;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
}
image {
width: 348rpx;
height: 104rpx;
margin-right: 16rpx;
}
}
// image.my-ico4
// width 17rpx
// height 30rpx
// .coupon-list
// border-top 1rpx solid #F2F2F2
// margin-top 20rpx
// padding-top 20rpx
// .coupon-card
// padding 12rpx 0
// .hot-block
// background-color #ffffff
// padding 10rpx 30rpx 30rpx 30rpx
// .block-title
// font-size 32rpx
// font-weight bolder
// color #303030
// .block-title:before
// content ''
// width 8rpx
// height 30rpx
// background #444
// display inline-block
// vertical-align middle
// margin-right 16rpx
// border-radius 4rpx
// .title-ico:before
// content '预'
// color #ffffff
// background #F5BC50
// font-size 20rpx
// border-radius 4rpx
// padding 0 5rpx
// margin-right 8rpx
.title-ico {
background: url("https://eshangtech.com/ShopICO/icos/to-eat.png") no-repeat
center; // eshangtech.com/ShopICO/icos/to-eat.png) no-repeat center
background-size: contain;
width: 133rpx;
height: 48rpx;
}
// .title-ico:after
// content ''
// background url(https://eshangtech.com/ShopICO/you-ico.png) no-repeat
// width 20rpx
// height 20rpx
// background-size contain
// margin-left 16rpx
.shop-unit {
// margin 36rpx 36rpx
padding: 26rpx 0 0 0;
background-color: #ffffff;
// border-radius 16rpx
}
.newTabList {
width: 100%;
overflow-x: auto;
display: flex;
flex-wrap: nowrap;
border-bottom: 1px solid #f5f6f7;
.newTabItem {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 28rpx;
color: #716f69;
line-height: 40rpx;
text-align: left;
font-style: normal;
padding: 0 50rpx 12rpx 50rpx;
white-space: nowrap;
}
.selectTabItem {
font-family: PingFangSC, PingFang SC;
font-weight: bold;
font-size: 28rpx;
color: #130f05;
line-height: 40rpx;
text-align: left;
font-style: normal;
position: relative;
}
.selectTabItem:after {
content: "";
position: absolute;
width: 2rem;
height: 4rpx;
background: #ba922f;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
}
.newTabList::-webkit-scrollbar {
display: none;
}
.newShopUnit {
padding: 26rpx 0 26rpx 0;
background-color: #ffffff;
border-bottom: 2rpx solid #f0f0f0;
.shopItemTop {
width: 100%;
display: flex;
align-items: flex-start;
.shopImg {
width: 96rpx;
height: 96rpx;
overflow: hidden;
border-radius: 8rpx;
margin-right: 16rpx;
.shopIcon {
width: 100%;
height: 100%;
}
}
.shopDetail {
width: calc(100% - 112rpx);
height: 96rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
.shopName {
width: 100%;
display: flex;
align-items: center;
.shopTitle {
display: inline-block;
max-width: calc(100% - 133rpx);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-family: PingFangSC, PingFang SC;
font-weight: bold;
font-size: 30rpx;
color: #130f05;
text-align: justify;
font-style: normal;
}
.titleIcon {
display: inline-block;
background: url("https://eshangtech.com/ShopICO/icos/to-eat.png")
no-repeat center; // eshangtech.com/ShopICO/icos/to-eat.png) no-repeat center;
background-size: contain;
width: 133rpx;
height: 48rpx;
}
}
.otherDetail {
display: flex;
align-items: center;
justify-content: space-between;
.leftDetail {
.mark {
color: #d45e0e;
font-size: 26rpx;
font-weight: bold;
}
.monthSales {
margin-left: 8px;
font-size: 24rpx;
color: #666;
}
.perCapita {
margin-left: 8px;
font-size: 24rpx;
color: #666;
}
}
.rightDetail {
.perCapita {
font-size: 24rpx;
color: #666;
}
.icon-coupon {
background: url("https://eshangtech.com/ShopICO/icos/y-yhq.png")
no-repeat left center; // eshangtech.com/ShopICO/icos/y-yhq.png) no-repeat left center
background-size: contain;
// width 75rpx
// height 22rpx
padding-left: 40rpx;
height: 27rpx;
line-height: 27rpx;
// padding-left 25rpx
font-size: 24rpx;
color: #ec5930;
margin-left: 8px;
}
}
}
.goOrder {
position: absolute;
right: 0;
top: 0;
padding: 10rpx 12rpx;
border-radius: 4rpx;
border: 2rpx solid #ae8d3e;
display: flex;
align-items: center;
.orderIcon {
width: 32rpx;
height: 32rpx;
margin-right: 8rpx;
}
.goOrderText {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 22rpx;
color: #ba922f;
line-height: 32rpx;
text-align: left;
font-style: normal;
}
}
.couponBox {
padding: 4rpx 6rpx;
background: rgba(247, 80, 49, 0.08);
border-radius: 2rpx;
display: flex;
align-items: center;
position: absolute;
right: 160rpx;
top: 0;
.couponIcon {
width: 24rpx;
height: 24rpx;
margin-right: 4rpx;
}
.couponText {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 22rpx;
color: #f75031;
line-height: 32rpx;
text-align: left;
font-style: normal;
white-space: nowrap;
}
}
}
}
.shopList {
width: calc(100% - 120rpx);
box-sizing: border-box;
margin-left: 120rpx;
overflow-x: auto;
display: flex;
.shopItem {
width: 168rpx;
margin-right: 16rpx;
.shopImgBox {
width: 168rpx;
height: 128rpx;
overflow: hidden;
border-radius: 12rpx;
margin-bottom: 8rpx;
.shopImg {
width: 100%;
height: 100%;
}
}
.shopName {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 22rpx;
color: #130f05;
line-height: 32rpx;
text-align: justify;
font-style: normal;
}
.itemPrice {
.itemUnit {
font-family: DINAlternate, DINAlternate;
font-weight: bold;
font-size: 24rpx;
color: #130f05;
text-align: left;
font-style: normal;
}
.itemPrice {
font-family: DINAlternate, DINAlternate;
font-weight: bold;
font-size: 32rpx;
color: #130f05;
text-align: left;
font-style: normal;
}
}
}
}
.shopList::-webkit-scrollbar {
display: none;
}
// .activitieBox {
// width: 100%;
// box-sizing: border-box;
// padding-top: 24rpx;
// .activeTitle {
// font-family: PingFangSC, PingFang SC;
// font-weight: 400;
// font-size: 28rpx;
// color: #716f69;
// line-height: 40rpx;
// text-align: left;
// font-style: normal;
// margin-bottom: 16rpx;
// }
// .couponList {
// width: 100%;
// display: flex;
// align-items: center;
// justify-content: space-between;
// flex-wrap: wrap;
// .couponItem {
// width: calc((100% - 24rpx) / 2) !important;
// margin-right: 24rpx;
// .itemImgBox {
// width: 100%;
// height: 192rpx;
// border-radius: 12rpx;
// overflow: hidden;
// margin-bottom: 16rpx;
// .itemImg {
// width: 100%;
// height: 100%;
// }
// }
// .couponText {
// font-family: PingFangSC, PingFang SC;
// font-weight: 400;
// font-size: 28rpx;
// color: #130f05;
// line-height: 40rpx;
// text-align: left;
// font-style: normal;
// white-space: nowrap;
// overflow: hidden;
// text-overflow: ellipsis;
// }
// .couponTime {
// display: flex;
// align-items: center;
// .timeIcon {
// width: 24rpx;
// height: 24rpx;
// margin-right: 4rpx;
// }
// .couponTimeText {
// width: calc(100% - 32rpx);
// font-family: PingFangSC, PingFang SC;
// font-weight: 400;
// font-size: 24rpx;
// color: #716f69;
// line-height: 36rpx;
// text-align: justify;
// font-style: normal;
// white-space: nowrap;
// overflow: hidden;
// text-overflow: ellipsis;
// }
// }
// }
// .couponItem:nth-child(2n) {
// margin-right: 0;
// }
// }
// }
}
.icon-coupon {
background: url("https://eshangtech.com/ShopICO/icos/y-yhq.png") no-repeat
left center; // eshangtech.com/ShopICO/icos/y-yhq.png) no-repeat left center
background-size: contain;
// width 75rpx
// height 22rpx
padding-left: 40rpx;
height: 27rpx;
line-height: 27rpx;
// padding-left 25rpx
font-size: 24rpx;
color: #ec5930;
}
.icon-trade {
display: flex;
align-items: center;
}
.icon-trade:before {
content: "";
background: url("https://eshangtech.com/wanmeiyizhanImg/discovery/trade.png")
no-repeat center;
background-size: contain;
width: 27rpx;
height: 24rpx;
margin-right: 4rpx;
}
.shop-comment-text {
color: #f3b680;
background: #fdf5ec;
padding: 0 4rpx;
border-radius: 2rpx;
font-size: 20rpx;
max-width: 344rpx;
}
// .coupon-card-box
// background-color #ffffff
// padding 24rpx 30rpx
// .coupon-card-box + .coupon-card-box
// margin-top 16rpx
.coupon-card {
display: flex;
// justify-content space-between
align-items: center;
font-family: "PingFang SC ";
// padding-bottom 24rpx
}
.card-bottom {
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1rpx solid #f2f2f2;
padding-top: 24rpx;
}
.conpon-img {
margin-right: 24rpx;
width: 190rpx;
height: 190rpx;
}
.conpon-img image {
width: 180rpx;
height: 180rpx;
border-radius: 8rpx;
}
.coupon-title {
font-size: 30rpx;
font-family: "PingFang SC Bold";
color: #313131;
font-weight: bolder;
}
.coupon-store {
font-size: 28rpx;
color: #444;
}
.coupon-detail {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.coupon-price {
color: #d74942;
font-size: 40rpx;
}
.coupon-price-unit {
color: #d7493f;
font-size: 20rpx;
}
.coupon-price-though {
// text-decoration line-through
color: #a1a1a1;
font-size: 24rpx;
margin-left: 32rpx;
}
.coupon-price-sell {
color: #454246;
font-size: 24rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
.coupon-get-btn {
background: #c6a375;
border-radius: 32rpx;
width: 164rpx;
height: 50rpx;
color: #fff;
line-height: 50rpx;
font-size: 24rpx;
text-align: center;
box-shadow: none;
}
.getLocation {
width: 240rpx;
margin: 24rpx auto;
display: block;
}
.loading-text {
text-align: center;
font-size: 24rpx;
color: #a1a1a1;
line-height: 80rpx;
}
.pop-box {
width: 588rpx;
height: 256rpx;
text-align: center;
padding: 40rpx 0;
border-radius: 30rpx;
overflow: hidden;
}
.pop-title {
font-size: 32rpx;
}
.pop-body {
font-size: 28rpx;
margin-top: 36rpx;
}
.popbtn-box {
display: flex;
justify-content: center;
align-items: center;
margin-top: 72rpx;
}
.popbtn {
height: 60rpx;
width: 208rpx;
border-radius: 32rpx;
text-align: center;
font-size: 24rpx;
line-height: 60rpx;
}
.popbtn + .popbtn {
margin-left: 60rpx;
}
.cancel-btn {
border: 1rpx solid #616161;
color: #616161;
}
.confirm-btn {
background: #515151;
color: #fff;
}
</style>