2353 lines
70 KiB
Vue
2353 lines
70 KiB
Vue
<template>
|
||
<!-- 显示新手引导的时候 页面就不让他隔着蒙层滚动 -->
|
||
<view class="homeMain" :style="{ overflow: showBeginner ? 'hidden' : '' }">
|
||
<view class="minTopBox" v-if="loginType === 'min'" :style="{
|
||
height: menu.bottom + 8 + 'px',
|
||
}">
|
||
<view class="topContent" :style="{ paddingTop: menu.top + 'px', height: menu.height + 'px' }">
|
||
<image class="fixedIcon" src="/static/home/newFixed.svg" />
|
||
<view class="selectServiceBox" @click="handleGoServiceList(1)">
|
||
<!-- serverPart.SERVERPART_NAME || "" -->
|
||
<span class="serviceName">{{
|
||
selectLocation.name || ""
|
||
}}</span>
|
||
<image class="serviceIcon" src="/static/home/newExpendIcon.svg" />
|
||
</view>
|
||
|
||
<view class="searchBox" @click="handleGoServiceList(2)">
|
||
<image class="searchIcon" src="/static/home/newSearch.svg" />
|
||
<span class="searchText">搜索周边</span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="appTopBox" v-else :style="{
|
||
height: menu.top + 50 + 'px',
|
||
}">
|
||
<view class="topContent" :style="{ paddingTop: menu.top + 'px' }">
|
||
<image class="fixedIcon" src="/static/home/newFixed.svg" />
|
||
<view class="selectServiceBox" @click="handleGoServiceList(1)">
|
||
<span class="serviceName">{{
|
||
selectLocation.name || ""
|
||
}}</span>
|
||
<image class="serviceIcon" src="/static/home/newExpendIcon.svg" />
|
||
</view>
|
||
|
||
<view class="searchBox" @click="handleGoServiceList(2)">
|
||
<image class="searchIcon" src="https://eshangtech.com/wanmeiyizhanImg/app/indexSearchIcon.png" />
|
||
<span class="searchText">搜索周边</span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="newContent">
|
||
<view class="topBanner"
|
||
:style="{ paddingTop: loginType === 'min' ? '' : menu.top + 50 + 'px', height: loginType === 'min' ? '728rpx' : '616rpx' }">
|
||
<!-- <image class="bannerImg" src="https://eshangtech.com/wanmeiyizhanImg/home/wanmeiyizhanNewIndex.png" /> -->
|
||
<image v-if="loginType === 'min'" class="bannerImg"
|
||
src="https://eshangtech.com/wanmeiyizhanImg/home/wmyzIndexBg.jpg" />
|
||
<image v-else class="bannerImg" src="https://eshangtech.com/wanmeiyizhanImg/app/indexBg.png" />
|
||
|
||
</view>
|
||
|
||
<view :style="{ marginTop: 638 + 'rpx', boxSizing: 'border-box', padding: '0 32rpx 64rpx' }">
|
||
<!-- transform: translateY(-90rpx); -->
|
||
<!-- :style="{ marginTop: menu.bottom + 8 + 'px' }" -->
|
||
<!-- style="box-sizing: border-box; padding: 0 32rpx;" -->
|
||
<view class="funBox" id="funBox">
|
||
<view class="funItem" v-for="(item, index) in funList" :key="index"
|
||
:style="{ marginBottom: index <= 3 ? '32rpx' : '' }" @click="handleGoFun(item)" :id="item.id">
|
||
<image class="funItemIcon" :src="item.src" />
|
||
<span class="funItemText">{{ item.label || "" }}</span>
|
||
</view>
|
||
</view>
|
||
|
||
<scroll-view :scroll-x="true" class="tabBox" v-if="false">
|
||
<view class="tabList">
|
||
<view class="tabItem" v-for="(item, index) in tabList" :key="index" @click="handleChangeTab(item)">
|
||
<view :class="selectTab === item.value ? 'title selectTitle' : 'title'
|
||
">{{ item.label || "" }}
|
||
</view>
|
||
<view :class="selectTab === item.value ? 'desc selectDesc' : 'desc'">{{ item.desc || "" }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<view v-if="chaegeBoxList && chaegeBoxList.length > 0" style=" margin-top: 30rpx">
|
||
<!-- background-color: #fff; -->
|
||
<ChargeBox :serviceAreaList="chaegeBoxList" pageType="scanCode" :comeForm="'home'" :showPadding="true" />
|
||
<!-- :showType="'horizontal'" -->
|
||
<!-- :showStore="true" -->
|
||
</view>
|
||
|
||
<view class="carouselBox" @click="handleGoDiscovery" v-if="showBanner">
|
||
<swiper class="swiperBox" scroll-x="true" :autoplay="true" circular="true">
|
||
<!-- @change="swiperChange($event, 'currentBan')" :current="currentBan" interval="3000" -->
|
||
<swiper-item v-for="(image, i) in bannerList" :key="i">
|
||
<image class="swiperImg" :src="image"></image>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
|
||
<!-- 驿站美食 -->
|
||
<view class="foodBox">
|
||
<view class="foodTop">
|
||
<view class="topLeft">
|
||
<image class="foodTopIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/yzFoodTitle.png" />
|
||
<!-- <span class="stationFood">驿站美食</span> -->
|
||
<span class="foodDesc">提前点餐 无需排队</span>
|
||
</view>
|
||
<view class="topRight" @click="handleGoFoodOrder">
|
||
<span class="moreText">查看更多</span>
|
||
<image class="rightArrow" src="/static/home/newRightRow.svg" />
|
||
</view>
|
||
</view>
|
||
|
||
<scroll-view :scroll-x="true" class="foodContent">
|
||
<view class="foodList">
|
||
<view class="foodItemNew" v-for="(item, index) in foodList" :key="index" @click="handleGoFoodShop(item)">
|
||
<view class="shopName">{{ item.MERCHANTS_NAME || "" }}</view>
|
||
<!-- <view class="foodSrc" :style="{ backgroundImage: `url(${item.IMAGE_URL})` }"></view> -->
|
||
<view class="foodSrcBox">
|
||
<image class="foodSrc" lazy-load="true" :src="item.IMAGE_URL" />
|
||
<!-- mode="aspectFit" -->
|
||
</view>
|
||
|
||
<view class="foodDetail">
|
||
<view class="foodName">{{ item.COMMODITY_NAME }}</view>
|
||
<!-- <view class="foodInfo">月售249 仅剩13份</view> -->
|
||
<view class="priceBox">
|
||
<view class="priceLeft">
|
||
<span class="price">
|
||
<span class="priceUnit">￥</span>
|
||
{{ item.COMMODITY_RETAILPRICE }}
|
||
</span>
|
||
<!-- <span class="priceOld">￥20.5</span> -->
|
||
</view>
|
||
<view class="priceRight">
|
||
进店
|
||
<!-- <image
|
||
class="addBtn"
|
||
src="/static/home/addShopButton.svg"
|
||
/> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<!-- 皖美特产 -->
|
||
<view class="productBox" v-if="false">
|
||
<view class="foodTop">
|
||
<view class="topLeft">
|
||
<image class="foodTopIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/tcTitle.png" />
|
||
<!-- <span class="stationFood">皖美农品</span> -->
|
||
<span class="foodDesc">本地特产 特色农品</span>
|
||
</view>
|
||
<view class="topRight" @click="handleGoFoodOrder">
|
||
<span class="moreText">查看更多</span>
|
||
<image class="rightArrow" src="/static/home/newRightRow.svg" />
|
||
</view>
|
||
</view>
|
||
|
||
<scroll-view :scroll-x="true" class="foodContent">
|
||
<view class="foodList">
|
||
<!-- AllProductsList -->
|
||
<view class="foodItemNew" v-for="(item, index) in mallList" :key="index" @click="goMall(item)">
|
||
<!-- @click="handleGoFoodShop(item)" -->
|
||
<!-- <view class="foodSrc" :style="{ backgroundImage: `url(${item.IMAGE_URL})` }"></view> -->
|
||
<view class="foodSrcBox">
|
||
<image class="foodSrc" lazy-load="true" :src="item.IMAGE_URL" />
|
||
<!-- mode="aspectFit" -->
|
||
</view>
|
||
|
||
<view class="foodDetail">
|
||
<view class="foodName">{{ item.COMMODITY_NAME }}</view>
|
||
<!-- <view class="foodInfo">月售249 仅剩13份</view> -->
|
||
<view class="priceBox">
|
||
<view class="priceLeft">
|
||
<span class="price">
|
||
<span class="priceUnit">￥</span>
|
||
{{ item.COMMODITY_MEMBERPRICE }}
|
||
</span>
|
||
<!-- <span class="priceOld">￥20.5</span> -->
|
||
</view>
|
||
<view class="priceRight">
|
||
进店
|
||
<!-- <image
|
||
class="addBtn"
|
||
src="/static/home/addShopButton.svg"
|
||
/> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 附近景点 -->
|
||
<!-- <view class="nearBox">
|
||
<view class="nearTabBox">
|
||
<view :class="selectNear === item.value ? 'nearTabItem selectNearTab' : 'nearTabItem'"
|
||
v-for="(item, index) in nearTabBox" :key="index">
|
||
{{ item.label || "" }}
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
<view class="bigPopupBox" v-if="isShowPrivacyPopup">
|
||
<view class="privacyPopupBox">
|
||
<view class="contentTitle">用户隐私保护政策确认</view>
|
||
<view class="contentWord">
|
||
感谢您使用本产品，您使用本产品前应当仔细阅读并同意<text class="tips" @click="handleOpenPrivacyContract">《驿达隐私保护指引》</text>
|
||
当您点击同意并开始使用产品服务时，即表示您已理解并同意该条款内容，该条款将对您产生法律约束。如您拒绝，将无法更好的体验产品。
|
||
</view>
|
||
|
||
<view class="btnList">
|
||
<view class="btns noAgree" @click="handleAgreePrivacyAuthorization">拒绝</view>
|
||
<view class="btns agree" @click="handleAgreePrivacyAuthorization">
|
||
同意
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<uni-popup ref="nearCouponRef" :safe-area="false">
|
||
<view class="nearCouponBox">
|
||
<scroll-view :scroll-y="true" class="couponList">
|
||
<div class="couponItem" v-for="(item, i) in nearCouponList" :key="i">
|
||
<div class="itemleft">
|
||
<div>
|
||
<span class="leftUnit">¥</span>
|
||
<span class="money">{{ item.UseAmount }}</span>
|
||
</div>
|
||
<div v-if="!item.CouponSendId && item.CouponPoint" class="condition">
|
||
{{ item.CouponPoint }}积分兑换
|
||
</div>
|
||
<div v-else class="condition">
|
||
{{
|
||
item.WithAmount > 0
|
||
? "满" + item.WithAmount + "可用"
|
||
: "无门槛使用"
|
||
}}
|
||
</div>
|
||
</div>
|
||
<div class="itemRight">
|
||
<div>
|
||
<div class="couponName">{{ item.CouponName }}</div>
|
||
<div class="timeText">
|
||
<span class="coupon-date" v-if="item.CouponSendId">有效期至{{ item.EndTime }}</span>
|
||
<span class="coupon-date" v-else>活动至{{ item.EndTime }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="useBtn">
|
||
<span class="useBtnText" v-if="!item.takeState" @click="handleDistributeCoupons(item)">点击领取</span>
|
||
|
||
<image class="goUseIcon" v-else-if="item.takeState" @click="handleGoCouponsList(item)"
|
||
src="/static/home/goUseIcon.svg" />
|
||
<!-- <span class="useBtnText" @click="handleGoCouponsList(item)" v-else-if="item.takeState">查看</span> -->
|
||
<!-- <span class="useBtnText" v-else>{{
|
||
item.CouponStateText
|
||
}}</span> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</scroll-view>
|
||
|
||
<view class="closeCoupon" @click="handleCloseCoupon">
|
||
<image class="icon" src="/static/home/closeCoupon.svg" />
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
|
||
|
||
<uni-popup ref="beginnerRef" :safe-area="false">
|
||
<view class="beginnerBox">
|
||
|
||
<view class="beginnerBoxTop">
|
||
<view class="beginnerTitle">{{ nowBeginner.label ? nowBeginner.label + '功能' : "" }}</view>
|
||
<view class="benginnerDesc">{{ nowBeginner.desc ? nowBeginner.desc : "" }}</view>
|
||
</view>
|
||
|
||
|
||
<view class="beginnerContent" :style="{
|
||
width: beginnerContentObj.width + 'px',
|
||
height: (beginnerContentObj.height + 10) + 'px',
|
||
top: (beginnerContentObj.top - 5) + 'px',
|
||
left: beginnerContentObj.left + 'px'
|
||
}">
|
||
<view class="funItem">
|
||
<image class="funItemIcon" :src="nowBeginner.src" />
|
||
<span class="funItemText">{{ nowBeginner.label || "" }}</span>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<view class="beginnerBottom" :style="{ top: funBox.bottom + 20 + 'px' }">
|
||
<view class="beginnerBottomBtnBox">
|
||
<view class="beginnerBtn skip" @click="handleOverBeginner">跳过</view>
|
||
<view class="beginnerBtn nextStep" @click="handleNextStepBrginner">{{ selectBeginner + 1 ===
|
||
beginnerShowId.length
|
||
? '开始使用' : '下一步' }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
|
||
|
||
<tabbar :page="'/pages/home/newIndex'" :changeToBottom="showBeginner" />
|
||
<CustomLoading :visible="isLoading" v-if="isLoading" @update:visible="(val) => (isLoading = val)" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapGetters, mapMutations } from "vuex";
|
||
import tabbar from "../../components/tabbar.vue";
|
||
import CustomLoading from "../../components/customLoading.vue";
|
||
import ChargeBox from "../../components/chargeBox.vue";
|
||
import {
|
||
handleGetUserPointInfo,
|
||
handleGetNearThreeService,
|
||
handleGetPosition,
|
||
handleGetAndroidPosition,
|
||
handleGetIOSPosition,
|
||
} from "../../utils/publicMethods";
|
||
|
||
export default {
|
||
components: { tabbar, CustomLoading, ChargeBox },
|
||
data() {
|
||
return {
|
||
menu: {}, // 拿到用户手机尺寸
|
||
loginType: "", // 登录平台
|
||
funList: [
|
||
{ label: "扫码充电", value: 1, id: "scanCode", src: "/static/home/scanCode.png", desc: "‘扫码充电’功能可以帮您快速找到附近充电桩，扫码跳转对应品牌小程序进行充电！" },
|
||
{ label: "我要加油", value: 2, id: "getOil", src: "/static/home/getOil.png" },
|
||
{ label: "线上点餐", value: 3, id: "onlineFood", src: "/static/home/onlineFood.png", desc: "‘线上点餐’功能让您提前预订服务区内的美食，到店就能取餐享用，省去了等待时间！" },
|
||
{ label: "出行导航", value: 4, id: "mapHelp", src: "/static/home/mapHelp.png", desc: "‘出行导航’为您提供精准的路线规划，实时路况信息，助您避开拥堵，让您的旅途一路畅通！" },
|
||
{ label: "道路救援", value: 5, id: "roadHelp", src: "/static/home/roadHelp.png", desc: " ‘道路救援’功能可以在您遇到紧急情况时，快速联系到专业的救援服务，为您解决燃眉之急！" },
|
||
{
|
||
label: "失物招领",
|
||
value: 6,
|
||
id: "newLostAndFound",
|
||
src: "/static/home/newLostAndFound.png",
|
||
desc: "‘失物招领’功能可以帮助您发布失物信息，或者查找他人发布的招领信息，让您的物品尽快回到身边！"
|
||
},
|
||
{
|
||
label: "我要修车", value: 7, id: "helpCar", src: "/static/home/helpCar.png"
|
||
},
|
||
// { label: "我要修车", value: 7, src: "https://eshangtech.com/wanmeiyizhanImg/helpCar.png" },
|
||
{
|
||
label: "投诉建议", value: 8, id: "NewSuggestIcon", src: "/static/home/NewSuggestIcon.png",
|
||
desc: "如果您对我们的服务有任何意见或建议，或者遇到了问题，请使用‘投诉建议’，直接向我们反馈，我们会认真倾听并改进！"
|
||
},
|
||
], // 可以跳转的功能列表
|
||
tabList: [
|
||
{ label: "驿达推荐", desc: "推荐精选", value: 1 },
|
||
{ label: "皖美地图", desc: "请跟我走", value: 2 },
|
||
{ label: "皖美会员", desc: "会员特权", value: 3 },
|
||
], // tab的功能列表
|
||
selectTab: 1, // 选中的功能列表
|
||
chaegeBoxList: [], // 服务区名称列表
|
||
bannerList: [
|
||
// "https://eshangtech.com/ShopICO/yifu/banner/banner1.png",
|
||
// "https://eshangtech.com/ShopICO/yifu/banner/banner2.png",
|
||
// "https://eshangtech.com/ShopICO/yifu/banner/banner3.png",
|
||
"https://eshangtech.com/wanmeiyizhanImg/home/activityNo1.png",
|
||
"https://eshangtech.com/wanmeiyizhanImg/home/activityNo2.png",
|
||
"https://eshangtech.com/wanmeiyizhanImg/home/activityNo3.png",
|
||
], // 轮播框内容
|
||
currentBan: 1, // 当前的轮播框 显示内容
|
||
nearTabBox: [{ label: "玩乐推荐", value: 1 }],
|
||
selectNear: 1, //附近景点的tab选择
|
||
seatInfo: {}, // 经纬度信息
|
||
isLoading: false, // 加载效果
|
||
nearPart: {}, // 最近的服务区
|
||
serverPart: {}, // 当前的服务区
|
||
foodList: [], // 当前服务区的食品详情
|
||
AllProductsList: [], // 农品内容
|
||
showBanner: false,
|
||
isShowPrivacyPopup: false,
|
||
mallList: [],
|
||
nearCouponList: [],// 附近服务区的优惠券列表
|
||
selectLocation: {},// 选择的定位
|
||
isFirst: true,
|
||
showBeginner: false,// 显示新手引导内容
|
||
beginnerContentObj: {},// 蒙层获取到的元素信息
|
||
beginnerShowId: ["scanCode", "onlineFood", "mapHelp", "roadHelp", "newLostAndFound", "NewSuggestIcon"],// 需要显示的引导的元素id
|
||
selectBeginner: 0,
|
||
nowBeginner: {},
|
||
funBox: {},// 功能模块外面包着的框的信息
|
||
};
|
||
},
|
||
computed: {
|
||
...mapGetters({
|
||
user: "user",
|
||
canIuse: "canIuse",
|
||
provinceCode: "provinceCode",
|
||
severList: "severList",
|
||
}),
|
||
},
|
||
async onLoad() {
|
||
// await getApp().globalData.initReady;
|
||
// 获取手机参数对页面进行适配 主要是用于拿到胶囊的位置
|
||
let systemInfo = uni.getSystemInfoSync();
|
||
let type = uni.getStorageSync("loginType");
|
||
this.loginType = type;
|
||
|
||
if (type === "min") {
|
||
this.menu = uni.getMenuButtonBoundingClientRect();
|
||
} else {
|
||
this.menu = systemInfo.safeArea;
|
||
}
|
||
|
||
console.log('dsdhasjda', this.menu);
|
||
|
||
if (type === 'android') {
|
||
const hasAgreed = uni.getStorageSync('hasAgreedToPrivacyPolicy');
|
||
console.log('hasAgreed', hasAgreed);
|
||
if (!hasAgreed) {
|
||
// 显示隐私政策弹窗
|
||
this.showPrivacyPopup();
|
||
} else {
|
||
// 已同意，初始化SDK和权限
|
||
await this.handleOnLoad();
|
||
}
|
||
} else {
|
||
await this.handleOnLoad();
|
||
}
|
||
|
||
this.$utils.addUserBehaviorNew();
|
||
},
|
||
async onShow() {
|
||
this.showBanner = true;
|
||
this.bannerList = ["https://eshangtech.com/wanmeiyizhanImg/home/activityNo1.png",
|
||
"https://eshangtech.com/wanmeiyizhanImg/home/activityNo2.png",
|
||
"https://eshangtech.com/wanmeiyizhanImg/home/activityNo3.png",]
|
||
this.currentBan = 0
|
||
this.$forceUpdate()
|
||
// await getApp().globalData.initReady;
|
||
let type = uni.getStorageSync("loginType");
|
||
if (type !== "min") {
|
||
uni.hideTabBar({
|
||
animation: false,
|
||
});
|
||
}
|
||
|
||
// 当前服务区
|
||
let currentService = uni.getStorageSync("currentService");
|
||
|
||
console.log('this.serverPartthis.serverPart', this.serverPart);
|
||
console.log('currentServicecurrentServicecurrentService', currentService);
|
||
|
||
if (this.serverPart && currentService) {
|
||
if (this.serverPart.SERVERPART_ID !== currentService.SERVERPART_ID) {
|
||
this.handleOnShowUpdate(currentService);
|
||
}
|
||
}
|
||
this.isLoading = false;
|
||
|
||
const selectLocation = uni.getStorageSync("selectLocation");
|
||
if (selectLocation) {
|
||
this.selectLocation = selectLocation
|
||
}
|
||
},
|
||
onReady() {
|
||
// 判断一下 是不是第一次进入app或者小程序 显示新手引导功能
|
||
let beginner = uni.getStorageSync("beginner");
|
||
if (beginner) {
|
||
} else {
|
||
this.showBeginner = true
|
||
this.$refs.beginnerRef.open('center')
|
||
this.handleShowBeginnerContent()
|
||
// uni.setStorageSync("beginner", true);
|
||
}
|
||
},
|
||
onHide() {
|
||
this.showBanner = false;
|
||
this.bannerList = []
|
||
this.currentBan = 0
|
||
this.$forceUpdate()
|
||
},
|
||
// 下拉刷新
|
||
async onPullDownRefresh() {
|
||
this.isLoading = true;
|
||
uni.setStorageSync("seatInfo", null);
|
||
uni.setStorageSync("currentService", null);
|
||
uni.setStorageSync("nearService", null);
|
||
uni.setStorageSync("nearThreeList", null);
|
||
uni.setStorageSync("allServiceList", null);
|
||
await this.handleOnLoad();
|
||
|
||
let allServiceList = uni.getStorageSync("allServiceList");
|
||
let currentService = uni.getStorageSync("currentService");
|
||
this.chaegeBoxList = [];
|
||
this.$forceUpdate();
|
||
console.log("allServiceListallServiceListallServiceList", allServiceList);
|
||
if (allServiceList && allServiceList.length > 0) {
|
||
allServiceList.forEach((item) => {
|
||
if (item.SERVERPART_NAME === currentService.SERVERPART_NAME) {
|
||
this.serverPart = item;
|
||
}
|
||
});
|
||
}
|
||
|
||
let _this = this;
|
||
setTimeout(() => {
|
||
_this.chaegeBoxList = [_this.serverPart.SERVERPART_NAME];
|
||
uni.stopPullDownRefresh();
|
||
}, 500);
|
||
this.isLoading = false;
|
||
},
|
||
onHide() {
|
||
this.isLoading = false;
|
||
this.$forceUpdate();
|
||
},
|
||
methods: {
|
||
...mapMutations({
|
||
setArea: "setHomeServer",
|
||
setServerPart: "discoveryServerPart",
|
||
setSeverList: "severList",
|
||
setprovinceCode: "setprovinceCode",
|
||
setInvitedCode: "setInvitedCode",
|
||
setOwnerUnitId: "setOwnerUnitId",
|
||
}),
|
||
// 跳过
|
||
handleOverBeginner() {
|
||
this.showBeginner = false
|
||
this.$refs.beginnerRef.close()
|
||
uni.setStorageSync("beginner", true);
|
||
},
|
||
// 下一步
|
||
async handleNextStepBrginner() {
|
||
if (this.selectBeginner + 1 >= this.beginnerShowId.length) {
|
||
this.handleOverBeginner()
|
||
} else {
|
||
this.selectBeginner = this.selectBeginner + 1
|
||
|
||
const rect = await this.getElementRect(`#${this.beginnerShowId[this.selectBeginner]}`)
|
||
let res = this.funList.filter(item => item.id === rect.id)
|
||
this.nowBeginner = res[0]
|
||
this.beginnerContentObj = rect
|
||
}
|
||
},
|
||
// 显示新手引导的内容方法
|
||
async handleShowBeginnerContent() {
|
||
const funReact = await this.getElementRect('#funBox')
|
||
this.funBox = funReact
|
||
const rect = await this.getElementRect(`#${this.beginnerShowId[this.selectBeginner]}`)
|
||
let res = this.funList.filter(item => item.id === rect.id)
|
||
this.nowBeginner = res[0]
|
||
this.beginnerContentObj = rect
|
||
},
|
||
getElementRect(selector, context) {
|
||
return new Promise((resolve, reject) => {
|
||
const query = uni.createSelectorQuery().in(context || this)
|
||
query.select(selector).boundingClientRect(rect => {
|
||
rect ? resolve(rect) : reject(new Error('获取元素位置失败'))
|
||
}).exec()
|
||
})
|
||
},
|
||
handleCloseCoupon() {
|
||
this.$refs.nearCouponRef.close()
|
||
},
|
||
goMall(item) {
|
||
if (!this.user.MEMBERSHIP_ID) {
|
||
uni.showModal({
|
||
title: "温馨提示",
|
||
content: "请您授权登录后再操作。",
|
||
success(res) {
|
||
if (res.confirm) {
|
||
uni.redirectTo({ url: "/pages/register/index" });
|
||
}
|
||
},
|
||
});
|
||
return;
|
||
}
|
||
if (this.user.MEMBERSHIP_MOBILEPHONE) {
|
||
uni.navigateTo({
|
||
url: "/pages/product/productDetail/index?id=" + item.ITEM_ID,
|
||
});
|
||
} else {
|
||
this.isLogin = true;
|
||
}
|
||
},
|
||
handleRefuse() {
|
||
this.isShowPrivacyPopup = false
|
||
},
|
||
async handleAgreePrivacyAuthorization() {
|
||
this.isShowPrivacyPopup = false
|
||
uni.setStorageSync("hasAgreedToPrivacyPolicy", true);
|
||
await this.handleOnLoad();
|
||
await this.handleOnShowUpdate(this.serverPart)
|
||
},
|
||
// 显示底部悬浮框
|
||
showPrivacyPopup() {
|
||
this.isShowPrivacyPopup = true
|
||
},
|
||
// onshow需要更新得内容
|
||
async handleOnShowUpdate(currentService) {
|
||
this.isLoading = true;
|
||
let allServiceList = uni.getStorageSync("allServiceList");
|
||
this.chaegeBoxList = [];
|
||
this.$forceUpdate();
|
||
console.log("allServiceListallServiceListallServiceList", allServiceList);
|
||
if (allServiceList && allServiceList.length > 0) {
|
||
allServiceList.forEach((item) => {
|
||
if (item.SERVERPART_NAME === currentService.SERVERPART_NAME) {
|
||
this.serverPart = item;
|
||
}
|
||
});
|
||
}
|
||
// 拿到当前服务区的点餐数据
|
||
await this.handleGetCurrentService();
|
||
this.getMall()
|
||
let _this = this;
|
||
setTimeout(() => {
|
||
_this.chaegeBoxList = [_this.serverPart.SERVERPART_NAME];
|
||
}, 500);
|
||
|
||
this.isLoading = false;
|
||
this.$forceUpdate();
|
||
},
|
||
// 跳转精选活动
|
||
handleGoDiscovery() {
|
||
uni.switchTab({
|
||
url: "/pages/discovery/index",
|
||
});
|
||
},
|
||
// 跳转到对应的食品门店 点餐页面
|
||
handleGoFoodShop(item) {
|
||
console.log("item", item);
|
||
|
||
if (this.user.MEMBERSHIP_MOBILEPHONE) {
|
||
let id = item.SERVERPARTSHOP_IDS.split(",")[0];
|
||
uni.navigateTo({
|
||
url: `/pages/shopPages/shop/index?id=${id}&mid=${item.MERCHANTS_ID}&province=${item.PROVINCE_CODE}&buyType=${item.SCANCODE_ORDER}`,
|
||
});
|
||
} 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}&buyType=${item.SCANCODE_ORDER}`,
|
||
});
|
||
this.isLogin = true;
|
||
}
|
||
},
|
||
// 轮播框的图片切换
|
||
swiperChange(e, name) {
|
||
// this[name] = e.mp.detail.current;
|
||
this.currentBan = e.mp.detail.current;
|
||
},
|
||
// 切换tab
|
||
handleChangeTab(obj) {
|
||
// this.selectTab = obj.value
|
||
if (obj.value === 2) {
|
||
// 出行导航
|
||
uni.navigateTo({
|
||
url: "/pages/scanCodeCharge/travelNavigation",
|
||
});
|
||
} else if (obj.value === 3) {
|
||
// 跳转会员权益页面
|
||
uni.navigateTo({
|
||
url: "/pages/memberBenefits/index",
|
||
});
|
||
}
|
||
},
|
||
|
||
async handleOnLoad() {
|
||
this.isLoading = true;
|
||
// 拿到经纬度信息
|
||
let seatInfo = await handleGetUserPointInfo();
|
||
this.seatInfo = seatInfo;
|
||
// 拿到几个需要的服务区的数据
|
||
let serviceInfo = await handleGetNearThreeService();
|
||
console.log("serviceInfo", serviceInfo);
|
||
|
||
this.nearPart = serviceInfo.currentService;
|
||
this.serverPart = serviceInfo.currentService;
|
||
if (this.chaegeBoxList && this.chaegeBoxList.length > 0) {
|
||
|
||
} else {
|
||
this.chaegeBoxList = [serviceInfo.nearThreeList[0]]
|
||
}
|
||
console.log("this.serverPart", this.serverPart);
|
||
// 拿到当前服务区的点餐数据
|
||
await this.handleGetCurrentService();
|
||
this.getMall()
|
||
|
||
// this.handleDistributeCoupons(serviceInfo.nearThreeList[0])
|
||
// this.handleGetNearCouponList()
|
||
this.isLoading = false;
|
||
|
||
const selectLocation = uni.getStorageSync("selectLocation");
|
||
let _this = this
|
||
|
||
// 判断是否是是否要更新定位数据信息
|
||
const isFirstEntry = uni.getStorageSync("isFirstEntry");
|
||
if (isFirstEntry) {
|
||
uni.setStorageSync("selectLocation", null);
|
||
// 拿到最新的位置 并更新老的经纬度
|
||
let res = {}
|
||
if (_this.loginType === 'min') {
|
||
res = await handleGetPosition()
|
||
} else if (_this.loginType === 'android') {
|
||
res = await handleGetAndroidPosition()
|
||
} else {
|
||
res = await handleGetIOSPosition()
|
||
}
|
||
_this.seatInfo = res
|
||
// _this.seatInfo = {
|
||
// latitude: 31.855616,
|
||
// longitude: 117.449167
|
||
// }
|
||
uni.setStorageSync("seatInfo", res)
|
||
uni.setStorageSync("isFirstEntry", false);
|
||
|
||
if (this.loginType === 'min') {
|
||
this.handleGetUserNearInfo()
|
||
} else {
|
||
this.handleGetUserNearInfo()
|
||
}
|
||
|
||
} else {
|
||
if (selectLocation) {
|
||
this.selectLocation = selectLocation
|
||
} else {
|
||
if (this.loginType === 'min') {
|
||
this.handleGetUserNearInfo()
|
||
} else {
|
||
this.handleGetUserNearInfo()
|
||
}
|
||
}
|
||
}
|
||
this.$forceUpdate();
|
||
},
|
||
// 默认获取用户附近的点位数据
|
||
async handleGetUserNearInfo() {
|
||
let _this = this
|
||
const list = await new Promise((resolve, reject) => {
|
||
uni.request({
|
||
url: "https://restapi.amap.com/v5/place/around",
|
||
method: "GET",
|
||
data: {
|
||
location: `${_this.seatInfo.longitude},${_this.seatInfo.latitude}`,
|
||
radius: 50000,
|
||
key: 'f62499190202df5eb06cf74a89a3f0c9'
|
||
},
|
||
header: {
|
||
"content-type": "application/json",
|
||
},
|
||
success(res) {
|
||
resolve(res.data.pois);
|
||
},
|
||
});
|
||
});
|
||
|
||
let obj = list[0]
|
||
let res = {
|
||
address: `${obj.pname}${obj.cityname}${obj.adname}${obj.address}`,
|
||
errMsg: "chooseLocation:ok",
|
||
latitude: obj.location.split(',')[1],
|
||
longitude: obj.location.split(',')[0],
|
||
name: obj.name,
|
||
}
|
||
_this.selectLocation = res
|
||
uni.setStorageSync("selectLocation", res);
|
||
|
||
// 拿到最新的定位附近的数据
|
||
let req = {
|
||
Province_Code: "340000",
|
||
longitude: _this.seatInfo.longitude,
|
||
latitude: _this.seatInfo.latitude,
|
||
ShowService: true,
|
||
};
|
||
const newRes = await _this.$api.$javaGet2('/third-party/getServerPartList', req)
|
||
let data = newRes.Result_Data.List;
|
||
// 最近的前三个的服务区 名称
|
||
let nearThreeList = [];
|
||
// 先存一下所有服务区的数据
|
||
let allServiceList = []
|
||
if (data && data.length > 0) {
|
||
uni.setStorageSync("allServiceList", []); // 最近的三个服务区
|
||
data.forEach((item, index) => {
|
||
if (index <= 2) {
|
||
nearThreeList.push(item.SERVERPART_NAME)
|
||
}
|
||
allServiceList.push({
|
||
...item,
|
||
showName: item.SERVERPART_NAME,
|
||
ProvinceCode: "340000",
|
||
ServerPart_Id: item.SERVERPART_ID,
|
||
ServerPart_Name: item.SERVERPART_NAME,
|
||
})
|
||
});
|
||
}
|
||
|
||
uni.setStorageSync("currentService", data[0]); // 最近的服务区数据
|
||
uni.setStorageSync("nearService", data[0]); // 最近的服务区数据
|
||
uni.setStorageSync("nearThreeList", nearThreeList); // 最近的三个服务区
|
||
uni.setStorageSync("allServiceList", allServiceList); // 最近的三个服务区
|
||
_this.chaegeBoxList = []
|
||
setTimeout(() => {
|
||
_this.chaegeBoxList = [nearThreeList[0]]
|
||
}, 10);
|
||
},
|
||
// 拿到就近服务区的优惠券列表
|
||
async handleGetNearCouponList() {
|
||
const data = await this.$api.$javaGet2("/third-party/getCouponList", {
|
||
serverpartName: this.chaegeBoxList
|
||
});
|
||
let list = data.Result_Data.List
|
||
this.nearCouponList = list
|
||
console.log('this.nearCouponListthis.nearCouponListthis.nearCouponListthis.nearCouponList', this.nearCouponList);
|
||
if (this.nearCouponList && this.nearCouponList.length > 0) {
|
||
this.$refs.nearCouponRef.open('center')
|
||
}
|
||
},
|
||
// 拿当前距离最近的服务区 去发放优惠券
|
||
async handleDistributeCoupons(obj) {
|
||
if (!this.user && !this.user.MEMBERSHIP_ID) {
|
||
let _this = this;
|
||
uni.showModal({
|
||
title: "温馨提示",
|
||
content: "请您授权登录后再操作。",
|
||
success(res) {
|
||
if (res.confirm) {
|
||
if (_this.loginType === "min") {
|
||
uni.navigateTo({ url: "/pages/register/index" });
|
||
} else {
|
||
uni.navigateTo({ url: "/pages/login/index" });
|
||
}
|
||
}
|
||
},
|
||
});
|
||
return;
|
||
}
|
||
|
||
let nearThreeList = uni.getStorageSync("nearThreeList");
|
||
const req = {
|
||
serverpartName: nearThreeList[0],
|
||
couponId: obj.CouponId
|
||
}
|
||
const data = await this.$api.$javaGet2("/third-party/sendCoupon", req);
|
||
|
||
if (data.Result_Data === '领取成功!') {
|
||
await this.handleGetNearCouponList()
|
||
uni.showToast({
|
||
title: '已为你领取优惠券，请到券包查看！',
|
||
icon: "none",
|
||
duration: 5000
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: data.Result_Data,
|
||
icon: "none",
|
||
})
|
||
|
||
}
|
||
},
|
||
// 跳转卡包
|
||
handleGoCouponsList(obj) {
|
||
console.log('objobj', obj);
|
||
uni.navigateTo({
|
||
url: `/pages/homeFn/payfor/index?cid=${obj.CouponId}`,
|
||
});
|
||
|
||
// uni.navigateTo({
|
||
// url: '/pages/homeFn/myCoupon/index'
|
||
// })
|
||
},
|
||
// 拿到当前服务区的点餐数据
|
||
async handleGetCurrentService() {
|
||
// const data = await this.$api.getCoop({
|
||
// action_type: "GetSellerList",
|
||
// showSales: 1,
|
||
// showCoupon: 1,
|
||
// showComment: 1,
|
||
// serverpartId: this.serverPart.SERVERPART_ID,
|
||
// provinceCode: this.serverPart.ProvinceCode || "340000",
|
||
// showGoods: 1,
|
||
// pageSize: 9999,
|
||
// pageIndex: 1,
|
||
// });
|
||
// let list = data.Data.List;
|
||
|
||
const data = await this.$api.$javaGet2("/third-party/getMerchantsList", {
|
||
serverpartId: this.serverPart.SERVERPART_ID,
|
||
});
|
||
let list = data.Result_Data.List;
|
||
console.log("首页点餐数据", list);
|
||
// 因为要显示具体商品 但是商品的内容 又在item的 GoodsList 里面 是一个数据 那么就将要显示的商品拆出来
|
||
let shopList = [];
|
||
let productsList = [];
|
||
if (list && list.length > 0) {
|
||
list.forEach((item) => {
|
||
if (item.GOODSLIST && item.GOODSLIST.length > 0) {
|
||
item.GOODSLIST.forEach((subItem) => {
|
||
let obj = JSON.parse(JSON.stringify(item));
|
||
obj = {
|
||
...obj,
|
||
...subItem,
|
||
};
|
||
shopList.push(obj);
|
||
});
|
||
}
|
||
if (item.MERCHANTS_ID === 927) {
|
||
if (item.GOODSLIST && item.GOODSLIST.length > 0) {
|
||
item.GOODSLIST.forEach((subItem) => {
|
||
let obj = JSON.parse(JSON.stringify(item));
|
||
obj = {
|
||
...obj,
|
||
...subItem,
|
||
};
|
||
productsList.push(obj);
|
||
});
|
||
}
|
||
}
|
||
});
|
||
}
|
||
this.foodList = shopList;
|
||
this.AllProductsList = productsList;
|
||
console.log('this.AllProductsList', this.AllProductsList);
|
||
|
||
},
|
||
async getMall() {
|
||
let _this = this;
|
||
console.log("_this.serverPart", _this.serverPart);
|
||
const req = {
|
||
action_type: "GetRcmContent",
|
||
rcmtagKey: "HOME_MALL",
|
||
serverpartId: _this.serverPart.ServerPart_Id || _this.serverPart.SERVERPART_ID,
|
||
provinceCode: _this.provinceCode || "340000",
|
||
showThird: 0,
|
||
}
|
||
console.log('reqreqreqreqreq', req);
|
||
const data = await _this.$api.getCoop(req)
|
||
|
||
console.log('datadatadatadata', data);
|
||
|
||
if (data.ResultCode === "100") {
|
||
let list = data.Data.List
|
||
let res = []
|
||
if (list && list.length > 0) {
|
||
list.forEach((item) => {
|
||
if (item.RCMCONTENT_INDEX <= 9) {
|
||
res.push(item)
|
||
}
|
||
})
|
||
}
|
||
_this.mallList = res;
|
||
console.log("_this.mallList", _this.mallList);
|
||
}
|
||
},
|
||
// 跳转点餐页面
|
||
handleGoFoodOrder() {
|
||
// 线上点餐
|
||
uni.navigateTo({
|
||
url: "/pages/reservationOrder/index",
|
||
});
|
||
},
|
||
// 跳转修改服务区的列表页面
|
||
handleGoServiceList(value) {
|
||
// 当value为1 的时候 表示会回到该页面
|
||
let _this = this
|
||
if (value === 1) {
|
||
if (this.loginType === 'min') {
|
||
// 微信小程序仍然使用 wx.chooseLocation
|
||
wx.chooseLocation({
|
||
success: (res) => {
|
||
console.log('res', res);
|
||
_this.selectLocation = res
|
||
uni.setStorageSync("selectLocation", res);
|
||
},
|
||
});
|
||
} else {
|
||
uni.chooseLocation({
|
||
success: function (res) {
|
||
console.log('res', res);
|
||
_this.selectLocation = res
|
||
uni.setStorageSync("selectLocation", res);
|
||
}
|
||
});
|
||
}
|
||
|
||
|
||
// uni.navigateTo({ url: "/pages/newMap/index/index" });
|
||
} else {
|
||
uni.navigateTo({ url: "/pages/newMap/index/index?comeForm=home" });
|
||
}
|
||
},
|
||
// 中间的八个功能点击的跳转
|
||
handleGoFun(obj) {
|
||
let _this = this;
|
||
if (obj.value === 1) {
|
||
// 扫码充电
|
||
if (this.loginType === "min") {
|
||
uni.navigateTo({ url: "/pages/scanCodeCharge/mapIndex" });
|
||
} else {
|
||
uni.navigateTo({ url: "/pages/scanCodeCharge/mapIndexAPP" });
|
||
}
|
||
} else if (obj.value === 2) {
|
||
// 我要加油
|
||
if (this.loginType === "min") {
|
||
uni.navigateTo({ url: "/pages/scanCodeCharge/oilIndex" });
|
||
} else {
|
||
uni.navigateTo({ url: "/pages/scanCodeCharge/oilIndexAPP" });
|
||
}
|
||
} else if (obj.value === 3) {
|
||
// 线上点餐
|
||
uni.navigateTo({
|
||
url: "/pages/reservationOrder/index",
|
||
});
|
||
} else if (obj.value === 4) {
|
||
// 出行导航
|
||
uni.navigateTo({
|
||
url: "/pages/scanCodeCharge/travelNavigation",
|
||
});
|
||
} else if (obj.value === 5) {
|
||
// 道路救援
|
||
if (_this.loginType === "min") {
|
||
uni.navigateTo({ url: "/pages/clickRescue/index" });
|
||
} else {
|
||
uni.navigateTo({ url: "/pages/clickRescue/index" });
|
||
}
|
||
} else if (obj.value === 6) {
|
||
if (this.user && !this.user.MEMBERSHIP_ID || (!this.user && !this.user.MEMBERSHIP_ID)) {
|
||
let _this = this;
|
||
uni.showModal({
|
||
title: "温馨提示",
|
||
content: "请您授权登录后再操作。",
|
||
success(res) {
|
||
if (res.confirm) {
|
||
if (_this.loginType === "min") {
|
||
uni.navigateTo({ url: "/pages/register/index" });
|
||
} else {
|
||
uni.navigateTo({ url: "/pages/login/index" });
|
||
}
|
||
}
|
||
},
|
||
});
|
||
return;
|
||
}
|
||
|
||
|
||
// 失物招领
|
||
uni.navigateTo({
|
||
url: "/pages/contact/index",
|
||
});
|
||
} else if (obj.value === 7) {
|
||
// 我要修车
|
||
uni.navigateTo({
|
||
url: "/pages/clickRescue/carMaintenance",
|
||
});
|
||
} else if (obj.value === 8) {
|
||
// 投诉建议
|
||
if (!this.user.MEMBERSHIP_ID) {
|
||
let _this = this;
|
||
uni.showModal({
|
||
title: "温馨提示",
|
||
content: "请您授权登录后再操作。",
|
||
success(res) {
|
||
if (res.confirm) {
|
||
if (_this.loginType === "min") {
|
||
uni.navigateTo({ url: "/pages/register/index" });
|
||
} else {
|
||
uni.navigateTo({ url: "/pages/login/index" });
|
||
}
|
||
}
|
||
},
|
||
});
|
||
return;
|
||
}
|
||
if (_this.loginType === "min") {
|
||
uni.navigateTo({
|
||
url: "/pages/complaintFeedback/index",
|
||
});
|
||
} else {
|
||
uni.navigateTo({
|
||
url: "/pages/complaintFeedback/index",
|
||
});
|
||
}
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.homeMain {
|
||
width: 100vw;
|
||
min-height: 100vh;
|
||
box-sizing: border-box;
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
padding-bottom: constant(safe-area-inset-bottom);
|
||
position: relative;
|
||
background-color: #F3F4F6;
|
||
|
||
.minTopBox {
|
||
width: 100%;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 3;
|
||
// background-image: url("https://eshangtech.com/wanmeiyizhanImg/home/wanmeiyizhanNewIndex.png");
|
||
background-image: url("https://eshangtech.com/wanmeiyizhanImg/home/wmyzIndexBg.jpg");
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 728rpx;
|
||
|
||
.topContent {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 32rpx;
|
||
|
||
.fixedIcon {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.selectServiceBox {
|
||
width: 180rpx;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.serviceName {
|
||
max-width: 150rpx;
|
||
display: inline-block;
|
||
white-space: noWrap;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
font-family: "PingFang SC";
|
||
font-weight: 400;
|
||
font-size: 30rpx;
|
||
color: #ffffff;
|
||
line-height: 42rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
}
|
||
|
||
.serviceIcon {
|
||
width: 20rpx;
|
||
height: 10rpx;
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
|
||
.searchBox {
|
||
width: 274rpx;
|
||
height: 60rpx;
|
||
background-color: rgba(255, 255, 255, 0.7);
|
||
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
||
border: 1rpx solid rgba(0, 0, 0, 0);
|
||
display: flex;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
padding: 9rpx 20rpx;
|
||
margin-left: 14rpx;
|
||
|
||
.searchIcon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin-right: 6rpx;
|
||
}
|
||
|
||
.searchText {
|
||
font-family: "PingFang SC";
|
||
font-weight: 400;
|
||
font-size: 30rpx;
|
||
color: #959fb0;
|
||
line-height: 42rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
.appTopBox {
|
||
width: 100%;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 3;
|
||
// background-image: url("https://eshangtech.com/wanmeiyizhanImg/home/wanmeiyizhanNewIndex.png");
|
||
// background-image: url("https://eshangtech.com/wanmeiyizhanImg/home/wmyzIndexBg.jpg");
|
||
// background-image: url("https://eshangtech.com/wanmeiyizhanImg/app/indexBg.png");
|
||
background-color: #3585DE;
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 616rpx;
|
||
|
||
.topContent {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 32rpx;
|
||
|
||
.fixedIcon {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.selectServiceBox {
|
||
width: 180rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.serviceName {
|
||
max-width: 150rpx;
|
||
display: inline-block;
|
||
white-space: noWrap;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
font-family: "PingFang SC";
|
||
font-weight: 400;
|
||
font-size: 30rpx;
|
||
color: #ffffff;
|
||
line-height: 42rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
}
|
||
|
||
.serviceIcon {
|
||
width: 20rpx;
|
||
height: 10rpx;
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
|
||
.searchBox {
|
||
width: 374rpx;
|
||
height: 60rpx;
|
||
// background-color: rgba(255, 255, 255, 0.7);
|
||
background-color: #71A9E8;
|
||
// border-radius: 14rpx 14rpx 14rpx 14rpx;
|
||
border-radius: 32rpx;
|
||
border: 1rpx solid rgba(0, 0, 0, 0);
|
||
display: flex;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
padding: 9rpx 20rpx;
|
||
margin-left: 14rpx;
|
||
|
||
.searchIcon {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
margin-right: 6rpx;
|
||
}
|
||
|
||
.searchText {
|
||
font-family: "PingFang SC";
|
||
font-weight: 400;
|
||
font-size: 30rpx;
|
||
color: #fff;
|
||
line-height: 42rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.newContent {
|
||
width: 100vw;
|
||
box-sizing: border-box;
|
||
// padding: 0 32rpx 180rpx;
|
||
padding: 0 0 140rpx;
|
||
position: absolute;
|
||
// background-color: #f5f6f8;
|
||
background-color: #EEF1F9;
|
||
z-index: 2;
|
||
top: 0;
|
||
left: 0;
|
||
|
||
.topBanner {
|
||
width: 100%;
|
||
height: 616rpx;
|
||
|
||
// height: 400rpx;
|
||
position: absolute;
|
||
z-index: 1;
|
||
top: 0;
|
||
left: 0;
|
||
|
||
.bannerImg {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.funBox {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
margin-top: 32rpx;
|
||
padding: 32rpx;
|
||
background-color: rgba(255, 255, 255, 0.8);
|
||
// box-shadow: 0rpx 3rpx 8rpx 1rpx rgba(67, 29, 0, 0.15);
|
||
box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(61, 113, 255, 0.1);
|
||
border-radius: 24rpx;
|
||
// margin-top: 360rpx;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
position: relative;
|
||
z-index: 2;
|
||
|
||
.funItem {
|
||
width: 25%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 999;
|
||
|
||
.funItemIcon {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.funItemText {
|
||
font-family: "PingFang SC";
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #2f3339;
|
||
line-height: 33rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
.tabBox {
|
||
width: 100%;
|
||
margin-top: 32rpx;
|
||
|
||
.tabList {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
flex-wrap: nowrap;
|
||
|
||
.tabItem {
|
||
display: inline-block;
|
||
width: 160rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.title {
|
||
font-family: "PingFang SC";
|
||
font-weight: 600;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
}
|
||
|
||
.desc {
|
||
font-family: "PingFang SC";
|
||
font-weight: 500;
|
||
font-size: 22rpx;
|
||
color: #9299a7;
|
||
line-height: 30rpx;
|
||
text-align: center;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
margin-top: 6rpx;
|
||
}
|
||
|
||
.selectTitle {
|
||
font-family: "PingFang SC";
|
||
font-weight: 600;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
line-height: 45rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
}
|
||
|
||
.selectDesc {
|
||
font-family: "PingFang SC";
|
||
font-weight: 500;
|
||
font-size: 22rpx;
|
||
color: #ffffff;
|
||
line-height: 30rpx;
|
||
text-align: center;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
padding: 6rpx 16rpx;
|
||
background: linear-gradient(269deg, #3a82fd 0%, #80aeff 100%);
|
||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.carouselBox {
|
||
width: 100%;
|
||
height: 300rpx;
|
||
margin-top: 20rpx;
|
||
|
||
.swiperBox {
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
.swiperImg {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.foodBox {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
background-color: #fff;
|
||
border-radius: 16rpx;
|
||
margin-top: 32rpx;
|
||
|
||
.foodTop {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
background: linear-gradient(180deg, #d7effd 0%, #ffffff 100%);
|
||
box-shadow: 0rpx 8rpx 12rpx 1rpx rgba(176, 223, 238, 0.07),
|
||
inset 0rpx 3rpx 6rpx 1rpx #ffffff;
|
||
box-sizing: border-box;
|
||
padding: 4rpx;
|
||
// padding: 16rpx 16rpx 8rpx;
|
||
|
||
.topLeft {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.foodTopIcon {
|
||
width: 200rpx;
|
||
height: 70rpx;
|
||
}
|
||
|
||
.stationFood {
|
||
font-family: "PingFang SC";
|
||
font-weight: 600;
|
||
font-size: 30rpx;
|
||
color: #000;
|
||
// margin-left: 16rpx;
|
||
}
|
||
|
||
.foodDesc {
|
||
font-family: "PingFang SC";
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #7ba3fd;
|
||
line-height: 42rpx;
|
||
text-align: center;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
padding: 4rpx 14rpx;
|
||
border-radius: 22rpx 22rpx 22rpx 0rpx;
|
||
border: 1rpx solid #7799fd;
|
||
margin-left: 16rpx;
|
||
}
|
||
}
|
||
|
||
.topRight {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.moreText {
|
||
font-family: "PingFang SC";
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #9299a7;
|
||
line-height: 33rpx;
|
||
text-align: right;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
}
|
||
|
||
.rightArrow {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.foodContent {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 0 16rpx;
|
||
|
||
.foodList {
|
||
width: 100%;
|
||
// height: 370rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: nowrap;
|
||
box-sizing: border-box;
|
||
padding: 10rpx 0 22rpx;
|
||
|
||
.foodItem {
|
||
width: 280rpx;
|
||
// height: 370rpx;
|
||
box-sizing: border-box;
|
||
padding: 24rpx;
|
||
|
||
.foodSrcBox {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
background-color: #f5f5f5;
|
||
border-radius: 8rpx;
|
||
overflow: hidden;
|
||
|
||
.foodSrc {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
background-repeat: no-repeat;
|
||
// margin-bottom: 16rpx;
|
||
}
|
||
}
|
||
|
||
.foodSrc {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
background-repeat: no-repeat;
|
||
|
||
// margin-bottom: 16rpx;
|
||
}
|
||
|
||
.foodDetail {
|
||
width: 100%;
|
||
margin-top: 16rpx;
|
||
|
||
.foodName {
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
font-family: "PingFang SC";
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #050505;
|
||
line-height: 30rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.foodInfo {
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
font-family: "PingFang SC";
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #a8aab0;
|
||
line-height: 30rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.priceBox {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 16rpx;
|
||
|
||
.priceLeft {
|
||
.price {
|
||
font-family: "DINAlternate";
|
||
font-weight: 500;
|
||
font-size: 35rpx;
|
||
color: #ff790d;
|
||
line-height: 52rpx;
|
||
text-align: center;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
|
||
.priceUnit {
|
||
font-family: "PingFang SC";
|
||
font-weight: 500;
|
||
font-size: 22rpx;
|
||
color: #ff790d;
|
||
line-height: 30rpx;
|
||
text-align: center;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
}
|
||
}
|
||
|
||
.priceOld {
|
||
font-family: "PingFang SC";
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
color: #a8aab0;
|
||
line-height: 30rpx;
|
||
text-align: center;
|
||
font-style: normal;
|
||
text-decoration-line: line-through;
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
|
||
.priceRight {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
|
||
.addBtn {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.foodItemNew {
|
||
width: 270rpx;
|
||
box-sizing: border-box;
|
||
padding: 16rpx 26rpx;
|
||
box-shadow: 0rpx 0rpx 5rpx 0rpx rgba(0, 0, 0, 0.1);
|
||
border-radius: 16rpx;
|
||
margin-right: 16rpx;
|
||
|
||
.shopName {
|
||
font-family: "PingFang SC";
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #000c04;
|
||
line-height: 30rpx;
|
||
display: inline-block;
|
||
width: 240rpx;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.foodSrcBox {
|
||
margin-top: 16rpx;
|
||
width: 218rpx;
|
||
height: 218rpx;
|
||
border-radius: 12rpx;
|
||
overflow: hidden;
|
||
|
||
.foodSrc {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.foodDetail {
|
||
margin-top: 20rpx;
|
||
|
||
.foodName {
|
||
font-family: "PingFang SC";
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #000c04;
|
||
line-height: 30rpx;
|
||
display: inline-block;
|
||
width: 240rpx;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.priceBox {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.priceLeft {
|
||
.price {
|
||
font-family: "PingFang SC";
|
||
font-weight: 600;
|
||
font-size: 30rpx;
|
||
color: #ff6800;
|
||
line-height: 30rpx;
|
||
|
||
.priceUnit {
|
||
font-family: "PingFang SC";
|
||
font-weight: 500;
|
||
font-size: 20rpx;
|
||
color: #ff6800;
|
||
line-height: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.priceRight {
|
||
font-family: "PingFang SC";
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #ffffff;
|
||
line-height: 30rpx;
|
||
padding: 6rpx 16rpx;
|
||
background-color: #01c553;
|
||
border-radius: 32rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.productBox {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
background-color: #fff;
|
||
border-radius: 16rpx;
|
||
margin-top: 32rpx;
|
||
|
||
.foodTop {
|
||
width: 100%;
|
||
// height: 70rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
background: linear-gradient(#e9ecff 0%, #f9faff 100%);
|
||
box-shadow: 0rpx 8rpx 12rpx 1rpx rgba(176, 223, 238, 0.07),
|
||
inset 0rpx 3rpx 6rpx 1rpx #ffffff;
|
||
box-sizing: border-box;
|
||
padding: 4rpx;
|
||
// padding: 16rpx 16rpx 8rpx;
|
||
|
||
.topLeft {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.foodTopIcon {
|
||
width: 200rpx;
|
||
height: 70rpx;
|
||
}
|
||
|
||
.stationFood {
|
||
font-family: "PingFang SC";
|
||
font-weight: 600;
|
||
font-size: 30rpx;
|
||
color: #000;
|
||
// margin-left: 16rpx;
|
||
}
|
||
|
||
.foodDesc {
|
||
font-family: "PingFang SC";
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #998cea;
|
||
line-height: 42rpx;
|
||
text-align: center;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
padding: 4rpx 14rpx;
|
||
border-radius: 22rpx 22rpx 22rpx 0rpx;
|
||
border: 1rpx solid #998cea;
|
||
margin-left: 16rpx;
|
||
}
|
||
}
|
||
|
||
.topRight {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.moreText {
|
||
font-family: "PingFang SC";
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #9299a7;
|
||
line-height: 33rpx;
|
||
text-align: right;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
}
|
||
|
||
.rightArrow {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.foodContent {
|
||
width: 100%;
|
||
|
||
.foodList {
|
||
width: 100%;
|
||
// height: 370rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: nowrap;
|
||
padding: 10rpx 0 22rpx;
|
||
|
||
.foodItem {
|
||
width: 280rpx;
|
||
box-sizing: border-box;
|
||
padding: 24rpx;
|
||
|
||
.foodSrc {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.foodDetail {
|
||
width: 100%;
|
||
margin-top: 16rpx;
|
||
|
||
.foodName {
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
font-family: "PingFang SC";
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #050505;
|
||
line-height: 30rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.foodInfo {
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
font-family: "PingFang SC";
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #a8aab0;
|
||
line-height: 30rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.priceBox {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 16rpx;
|
||
|
||
.priceLeft {
|
||
.price {
|
||
font-family: "DINAlternate";
|
||
font-weight: 500;
|
||
font-size: 35rpx;
|
||
color: #ff790d;
|
||
line-height: 52rpx;
|
||
text-align: center;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
|
||
.priceUnit {
|
||
font-family: "PingFang SC";
|
||
font-weight: 500;
|
||
font-size: 22rpx;
|
||
color: #ff790d;
|
||
line-height: 30rpx;
|
||
text-align: center;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
}
|
||
}
|
||
|
||
.priceOld {
|
||
font-family: "PingFang SC";
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
color: #a8aab0;
|
||
line-height: 30rpx;
|
||
text-align: center;
|
||
font-style: normal;
|
||
text-decoration-line: line-through;
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
|
||
.priceRight {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
|
||
.addBtn {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.foodItemNew {
|
||
width: 270rpx;
|
||
box-sizing: border-box;
|
||
padding: 16rpx 26rpx;
|
||
box-shadow: 0rpx 0rpx 5rpx 0rpx rgba(0, 0, 0, 0.1);
|
||
border-radius: 16rpx;
|
||
margin-right: 16rpx;
|
||
|
||
.shopName {
|
||
font-family: "PingFang SC";
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #000c04;
|
||
line-height: 30rpx;
|
||
display: inline-block;
|
||
width: 240rpx;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.foodSrcBox {
|
||
margin-top: 16rpx;
|
||
width: 218rpx;
|
||
height: 218rpx;
|
||
border-radius: 12rpx;
|
||
overflow: hidden;
|
||
|
||
.foodSrc {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.foodDetail {
|
||
margin-top: 20rpx;
|
||
|
||
.foodName {
|
||
font-family: "PingFang SC";
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #000c04;
|
||
line-height: 30rpx;
|
||
display: inline-block;
|
||
width: 240rpx;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.priceBox {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.priceLeft {
|
||
.price {
|
||
font-family: "PingFang SC";
|
||
font-weight: 600;
|
||
font-size: 30rpx;
|
||
color: #ff6800;
|
||
line-height: 30rpx;
|
||
|
||
.priceUnit {
|
||
font-family: "PingFang SC";
|
||
font-weight: 500;
|
||
font-size: 20rpx;
|
||
color: #ff6800;
|
||
line-height: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.priceRight {
|
||
font-family: "PingFang SC";
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #ffffff;
|
||
line-height: 30rpx;
|
||
padding: 6rpx 16rpx;
|
||
background-color: #01c553;
|
||
border-radius: 32rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.nearBox {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 25rpx 32rpx;
|
||
background-color: #fff;
|
||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||
margin-top: 20rpx;
|
||
|
||
.nearTabBox {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.nearTabItem {
|
||
font-family: "PingFang SC";
|
||
font-weight: 500;
|
||
font-size: 34rpx;
|
||
color: #5f5f5f;
|
||
line-height: 45rpx;
|
||
text-align: center;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
}
|
||
|
||
.selectNearTab {
|
||
font-family: "PingFang SC";
|
||
font-weight: bold;
|
||
font-size: 34rpx;
|
||
color: #141b1a;
|
||
line-height: 45rpx;
|
||
text-align: center;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.bigPopupBox {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background-color: rgba(0, 0, 0, 0.6);
|
||
z-index: 999999;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
|
||
|
||
.privacyPopupBox {
|
||
width: 100%;
|
||
height: 300px;
|
||
border-top-left-radius: 64rpx;
|
||
border-top-right-radius: 64rpx;
|
||
background-color: #fff;
|
||
box-sizing: border-box;
|
||
padding: 32rpx;
|
||
z-index: 999999;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
|
||
.contentTitle {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 36rpx;
|
||
color: #130f05;
|
||
line-height: 52rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-align: center;
|
||
}
|
||
|
||
.contentWord {
|
||
margin-top: 32rpx;
|
||
text-indent: 2em;
|
||
|
||
.tips {
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN-Normal, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #8bc21f;
|
||
line-height: 33rpx;
|
||
}
|
||
}
|
||
|
||
.btnList {
|
||
display: flex;
|
||
justify-content: space-evenly;
|
||
align-items: center;
|
||
margin-top: 48rpx;
|
||
|
||
.btns {
|
||
display: inline-block;
|
||
padding: 20rpx 90rpx;
|
||
border-radius: 15rpx;
|
||
}
|
||
|
||
.noAgree {
|
||
background: rgb(242, 242, 242);
|
||
color: rgb(26, 187, 107);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.agree {
|
||
background: rgb(26, 187, 107);
|
||
color: #fff;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.nearCouponBox {
|
||
width: 90vw;
|
||
height: 700rpx;
|
||
|
||
.couponList {
|
||
width: 100%;
|
||
height: 580rpx;
|
||
background-color: #fff;
|
||
box-sizing: border-box;
|
||
padding: 24rpx;
|
||
border-radius: 32rpx;
|
||
|
||
.couponItem {
|
||
width: 100%;
|
||
height: 144rpx;
|
||
// background: url('https://eshangtech.com/wanmeiyizhanImg/home/validCoupons.png') no-repeat center;
|
||
background: url('https://eshangtech.com/wanmeiyizhanImg/newCouponBg.svg') no-repeat center;
|
||
background-size: contain;
|
||
box-sizing: border-box;
|
||
padding: 32rpx 0;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 32rpx;
|
||
|
||
.itemleft {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
padding-left: 30rpx;
|
||
margin-right: 50rpx;
|
||
// border-right: 2rpx dashed #E5CD92;
|
||
|
||
.leftUnit {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 34rpx;
|
||
color: #FF3A3A;
|
||
line-height: 48rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-right: 4rpx;
|
||
}
|
||
|
||
.money {
|
||
font-family: DINAlternate, DINAlternate;
|
||
font-weight: bold;
|
||
font-size: 48rpx;
|
||
color: #FF3A3A;
|
||
line-height: 56rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.condition {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
color: #FF3A3A;
|
||
line-height: 28rpx;
|
||
text-align: justify;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
.itemRight {
|
||
flex: 1;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 0 32rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.couponName {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #000000;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
display: inline-block;
|
||
width: 200rpx;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.timeText {
|
||
.coupon-date {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
color: #716F69;
|
||
line-height: 32rpx;
|
||
text-align: justify;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
.useBtn {
|
||
.useBtnText {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
line-height: 36rpx;
|
||
text-align: center;
|
||
font-style: normal;
|
||
padding: 8rpx 20rpx;
|
||
background: #FF3A3A;
|
||
border-radius: 32rpx;
|
||
}
|
||
|
||
.goUseIcon {
|
||
width: 110rpx;
|
||
height: 110rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.closeCoupon {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 40rpx 0;
|
||
|
||
.icon {
|
||
width: 74rpx;
|
||
height: 74rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
|
||
.beginnerBox {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
position: relative;
|
||
background-color: rgba(0, 0, 0, 0.3);
|
||
|
||
.beginnerBoxTop {
|
||
width: 100%;
|
||
padding-top: 400rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.beginnerTitle {
|
||
width: 100%;
|
||
color: #ffbe2c;
|
||
font-family: "PingFang SC";
|
||
font-weight: bold;
|
||
font-size: 34rpx;
|
||
line-height: 45rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.benginnerDesc {
|
||
width: 80%;
|
||
margin-top: 20rpx;
|
||
color: #fff;
|
||
font-family: "PingFang SC";
|
||
font-weight: bold;
|
||
font-size: 34rpx;
|
||
line-height: 50rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
|
||
.beginnerContent {
|
||
position: absolute;
|
||
// background: rgba(255, 255, 255, 0.3);
|
||
border-radius: 32rpx;
|
||
|
||
.funItem {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: #fff;
|
||
border-radius: 16rpx;
|
||
|
||
.funItemIcon {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.funItemText {
|
||
font-family: "PingFang SC";
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #2f3339;
|
||
line-height: 33rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
.beginnerBottom {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
position: absolute;
|
||
|
||
.beginnerBottomBtnBox {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 0 64rpx;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
|
||
.beginnerBtn {
|
||
font-family: "PingFang SC";
|
||
font-weight: 600;
|
||
font-size: 32rpx;
|
||
color: #ffffff;
|
||
line-height: 33rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
padding: 20rpx 60rpx;
|
||
}
|
||
|
||
.skip {
|
||
background-color: rgba(0, 0, 0, 0.1);
|
||
border: 1px solid #9d9d9d;
|
||
border-radius: 64rpx;
|
||
}
|
||
|
||
.nextStep {
|
||
background: linear-gradient(90deg, #f9333d 0%, #fe713a 100%);
|
||
border-radius: 64rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
</style> |