2980 lines
81 KiB
Vue
2980 lines
81 KiB
Vue
<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.MEMBERSHIP_MOBILEPHONE || 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.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" />
|
||
</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();
|
||
},
|
||
onUnload() {
|
||
this.isShow = 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.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.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>
|