1872 lines
54 KiB
Vue
1872 lines
54 KiB
Vue
<template>
|
||
<view class="homeMain">
|
||
<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)">
|
||
<span class="serviceName">{{
|
||
serverPart.SERVERPART_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">{{
|
||
serverPart.SERVERPART_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="newContent">
|
||
<view class="topBanner">
|
||
<image class="bannerImg" src="https://eshangtech.com/wanmeiyizhanImg/home/wanmeiyizhanNewIndex.png" />
|
||
</view>
|
||
|
||
<view style="box-sizing: border-box; padding: 0 32rpx">
|
||
<!-- :style="{ marginTop: menu.bottom + 8 + 'px' }" -->
|
||
<view class="funBox">
|
||
<view class="funItem" v-for="(item, index) in funList" :key="index"
|
||
:style="{ marginBottom: index <= 3 ? '32rpx' : '' }" @click="handleGoFun(item)">
|
||
<image class="funItemIcon" :src="item.src" />
|
||
<span class="funItemText">{{ item.label || "" }}</span>
|
||
</view>
|
||
</view>
|
||
|
||
<scroll-view :scroll-x="true" class="tabBox">
|
||
<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="background-color: #fff; margin-top: 24rpx">
|
||
<ChargeBox :showType="'horizontal'" :serviceAreaList="chaegeBoxList" pageType="scanCode" :showStore="true"
|
||
:comeForm="'home'" :showPadding="true" />
|
||
</view>
|
||
|
||
<view class="carouselBox" @click="handleGoDiscovery" v-if="showBanner">
|
||
<swiper class="swiperBox" scroll-x="true" autoplay="true" circular="true" interval="3000"
|
||
@change="swiperChange($event, 'currentBan')" :current="currentBan">
|
||
<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" /> -->
|
||
<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">
|
||
<view class="foodTop">
|
||
<view class="topLeft">
|
||
<!-- <image class="foodTopIcon" /> -->
|
||
<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">
|
||
<button class="btns noAgree" @click="handleRefuse">拒绝</button>
|
||
<button class="btns agree" id="agree-btn3" open-type="agreePrivacyAuthorization"
|
||
@click="handleAgreePrivacyAuthorization">
|
||
同意
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<uni-popup ref="nearCouponRef" :show="isShow" :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>
|
||
<span class="useBtnText" @click="handleGoCouponsList" v-else-if="item.takeState">查看</span>
|
||
<!-- <span class="useBtnText" v-else>{{
|
||
item.CouponStateText
|
||
}}</span> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</scroll-view>
|
||
</view>
|
||
</uni-popup>
|
||
|
||
|
||
<tabbar :page="'/pages/home/newIndex'" />
|
||
<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,
|
||
} from "../../utils/publicMethods";
|
||
|
||
export default {
|
||
components: { tabbar, CustomLoading, ChargeBox },
|
||
data() {
|
||
return {
|
||
menu: {}, // 拿到用户手机尺寸
|
||
loginType: "", // 登录平台
|
||
funList: [
|
||
{ label: "扫码充电", value: 1, src: "/static/home/scanCode.png" },
|
||
{ label: "我要加油", value: 2, src: "/static/home/getOil.png" },
|
||
{ label: "线上点餐", value: 3, src: "/static/home/onlineFood.png" },
|
||
{ label: "出行导航", value: 4, src: "/static/home/mapHelp.png" },
|
||
{ label: "道路救援", value: 5, src: "/static/home/roadHelp.png" },
|
||
{
|
||
label: "失物招领",
|
||
value: 6,
|
||
src: "/static/home/newLostAndFound.png",
|
||
},
|
||
{ label: "我要修车", value: 7, src: "/static/home/helpCar.png" },
|
||
{ label: "投诉建议", value: 8, src: "/static/home/NewSuggestIcon.png" },
|
||
], // 可以跳转的功能列表
|
||
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: [],// 附近服务区的优惠券列表
|
||
};
|
||
},
|
||
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;
|
||
console.log("this.loginTypethis.loginType", this.loginType);
|
||
if (type === "min") {
|
||
this.menu = uni.getMenuButtonBoundingClientRect();
|
||
} else {
|
||
this.menu = systemInfo.safeArea;
|
||
}
|
||
|
||
|
||
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;
|
||
// await getApp().globalData.initReady;
|
||
let type = uni.getStorageSync("loginType");
|
||
if (type !== "min") {
|
||
uni.hideTabBar({
|
||
animation: false,
|
||
});
|
||
}
|
||
// 当前服务区
|
||
let currentService = uni.getStorageSync("currentService");
|
||
if (this.serverPart && currentService) {
|
||
if (this.serverPart.ServerPart_Name !== currentService.SERVERPART_NAME) {
|
||
this.handleOnShowUpdate(currentService);
|
||
}
|
||
}
|
||
this.isLoading = false;
|
||
},
|
||
onHide() {
|
||
this.showBanner = true;
|
||
},
|
||
// 下拉刷新
|
||
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",
|
||
}),
|
||
|
||
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();
|
||
|
||
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();
|
||
await this.getMall()
|
||
|
||
// this.handleDistributeCoupons(serviceInfo.nearThreeList[0])
|
||
this.handleGetNearCouponList()
|
||
this.isLoading = false;
|
||
this.$forceUpdate();
|
||
},
|
||
// 拿到就近服务区的优惠券列表
|
||
async handleGetNearCouponList() {
|
||
const data = await this.$api.$javaGet2("/third-party/getCouponList", {});
|
||
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) {
|
||
console.log('objobj', obj);
|
||
console.log('this.chaegeBoxList[0]this.chaegeBoxList[0]', this.chaegeBoxList[0]);
|
||
|
||
const req = {
|
||
serverpartName: this.chaegeBoxList[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
|
||
})
|
||
}
|
||
},
|
||
// 跳转卡包
|
||
handleGoCouponsList() {
|
||
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 data = await _this.$api
|
||
.getCoop({
|
||
action_type: "GetRcmContent",
|
||
rcmtagKey: "HOME_MALL",
|
||
serverpartId: _this.serverPart.ServerPart_Id,
|
||
provinceCode: _this.provinceCode || "340000",
|
||
showThird: 0,
|
||
})
|
||
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 的时候 表示会回到该页面
|
||
if (value === 1) {
|
||
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) {
|
||
// 我要加油
|
||
uni.navigateTo({ url: "/pages/scanCodeCharge/oilIndex" });
|
||
} 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) {
|
||
// 失物招领
|
||
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;
|
||
|
||
.minTopBox {
|
||
width: 100%;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 3;
|
||
background-image: url("https://eshangtech.com/wanmeiyizhanImg/home/wanmeiyizhanNewIndex.png");
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 400rpx;
|
||
|
||
.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-repeat: no-repeat;
|
||
background-size: 100% 400rpx;
|
||
|
||
.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: 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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.newContent {
|
||
width: 100vw;
|
||
box-sizing: border-box;
|
||
// padding: 0 32rpx 180rpx;
|
||
padding: 0 0 140rpx;
|
||
// position: absolute;
|
||
background-color: #f5f6f8;
|
||
// z-index: 2;
|
||
// top: 0;
|
||
// left: 0;
|
||
|
||
.topBanner {
|
||
width: 100%;
|
||
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);
|
||
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;
|
||
|
||
.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;
|
||
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: bold;
|
||
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: bold;
|
||
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: 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%;
|
||
|
||
.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 {
|
||
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: 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 {
|
||
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: 0 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: 600rpx;
|
||
background-color: #fff;
|
||
border-radius: 32rpx;
|
||
box-sizing: border-box;
|
||
padding: 24rpx;
|
||
|
||
.couponList {
|
||
width: 100%;
|
||
height: 562rpx;
|
||
box-sizing: border-box;
|
||
|
||
.couponItem {
|
||
width: 100%;
|
||
height: 144rpx;
|
||
background: url('https://eshangtech.com/wanmeiyizhanImg/home/validCoupons.png') no-repeat center;
|
||
background-size: contain;
|
||
box-sizing: border-box;
|
||
padding: 32rpx 0;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 32rpx;
|
||
|
||
.itemleft {
|
||
width: 195rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
border-right: 2rpx dashed #E5CD92;
|
||
|
||
.leftUnit {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 34rpx;
|
||
color: #BA922F;
|
||
line-height: 48rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-right: 4rpx;
|
||
}
|
||
|
||
.money {
|
||
font-family: DINAlternate, DINAlternate;
|
||
font-weight: bold;
|
||
font-size: 48rpx;
|
||
color: #BA922F;
|
||
line-height: 56rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.condition {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
color: #BA922F;
|
||
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: #130F05;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.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: #BA922F;
|
||
border-radius: 4rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
}
|
||
|
||
}
|
||
</style> |