1097 lines
32 KiB
Vue
1097 lines
32 KiB
Vue
<template>
|
|
<div class="main">
|
|
<div class="top" :style="{
|
|
height: `${loginType === 'min' ? menu.height + 8 : '30'}px`,
|
|
paddingTop: loginType === 'min' ? `${menu.top}px` : `${menu.top + 10}px`,
|
|
}">
|
|
<div class="topContent">
|
|
<image class="backIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/backArrow.svg" @click="handleBack" />
|
|
|
|
<div class="first" @click="goSelectServer">
|
|
<image class="addressIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/blackFixed.png" />
|
|
<div class="text">{{ serverPart.SERVERPART_NAME || "" }}</div>
|
|
<image class="moreIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/rightArrow.png" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pageTop" v-if="false">
|
|
<div class="first" @click="goSelectServer">
|
|
<image class="addressIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/blackFixed.png" />
|
|
<div class="text">{{ serverPart.SERVERPART_NAME || "" }}</div>
|
|
<image class="moreIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/rightArrow.png" />
|
|
</div>
|
|
<div class="second">
|
|
距您{{ serverPart.SERVERPART_DISTANCE || "-" }}km
|
|
</div>
|
|
</div>
|
|
<!-- <div style="width: 100%; box-sizing: border-box; padding: 0 32rpx">
|
|
<CurrentService
|
|
:goDetail="false"
|
|
:noIcon="true"
|
|
:currentServiceMessage="serverPart"
|
|
/>
|
|
</div> -->
|
|
|
|
<div class="newTabList">
|
|
<div :class="selectTypeTab === index ? 'newTabItem selectTabItem' : 'newTabItem'
|
|
" v-for="(item, index) in selectTypeList" :key="index" @click="handleChangeType(index)">
|
|
{{ item.label }}
|
|
</div>
|
|
</div>
|
|
|
|
<scroll-view scroll-y class="shopListBox" :style="{
|
|
height: `${loginType === 'min'
|
|
? `calc(100vh - ${menu.top}px - ${menu.height + 8}px - 50px )`
|
|
: `calc(100vh - ${menu.top + 10}px - 30px - 50px )`
|
|
}`,
|
|
}">
|
|
<div v-if="onShowTypeList && onShowTypeList.length > 0">
|
|
<!-- shopList -->
|
|
<div class="shopItemBox" v-for="(item, index) in onShowTypeList" :key="index" @click.stop="goBuy(item)" :style="{
|
|
marginBottom: index + 1 === shopList.length ? '0' : '',
|
|
borderWidth: index + 1 === shopList.length ? '0' : '',
|
|
}">
|
|
<div class="shopItemTop">
|
|
<div class="shopImg">
|
|
<image class="shopIcon" :src="item.MERCHANTS_LOGO ||
|
|
'https://eshangtech.com/ShopICO/no-picture.png'
|
|
" mode="aspectFit" />
|
|
</div>
|
|
<div class="shopDetail">
|
|
|
|
<div class="shopDetailLeft">
|
|
<div class="detailLeftTop">
|
|
<span class="topShopName">{{ item.MERCHANTS_NAME }}</span>
|
|
</div>
|
|
|
|
<div class="detailLeftBottom">
|
|
<view class="scoreBox">
|
|
<uni-rate :value="item.MERCHANTS_SCORE" size="16" readonly allowHalf color="#D9D9D9"
|
|
activeColor="#FFC300" style="margin-right: 8rpx" />
|
|
{{ item.MERCHANTS_SCORE || '' }}
|
|
</view>
|
|
<view class="newOtherDetail">
|
|
<span class="label">月售</span>
|
|
<span class="value">{{ item.MONTHLYSALES || "-" }}</span>
|
|
<span class="label" style="margin-left: 20rpx;">人均</span>
|
|
<span class="value">￥{{ item.PERCAPITA || "-" }}</span>
|
|
</view>
|
|
</div>
|
|
</div>
|
|
<div class="shopDetailRight">
|
|
<view class="goFood" v-if="item.SCANCODE_ORDER === 1" @click.stop="goBuy(item)">点餐</view>
|
|
<view class="search" v-else-if="item.GOODSLIST && item.GOODSLIST.length > 0" @click.stop="goBuy(item)">
|
|
查看</view>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="shopList" v-if="
|
|
item.GOODSLIST &&
|
|
item.GOODSLIST.length > 0 &&
|
|
item.SCANCODE_ORDER === 1
|
|
">
|
|
<div class="shopItem" v-for="(subItem, subIndex) in item.GOODSLIST" :key="subIndex">
|
|
<div class="shopImgBox">
|
|
<image class="shopImg" lazy-load :src="subItem.IMAGE_URL" />
|
|
</div>
|
|
<div class="shopName">{{ subItem.COMMODITY_NAME || "" }}</div>
|
|
<div class="itemPrice">
|
|
<span class="itemUnit">¥</span>
|
|
<span class="itemPrice">{{
|
|
subItem.COMMODITY_RETAILPRICE || ""
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="shopItemTop" v-if="false">
|
|
<div class="shopImg">
|
|
<image class="shopIcon" :src="item.MERCHANTS_LOGO ||
|
|
'https://eshangtech.com/ShopICO/no-picture.png'
|
|
" mode="aspectFit" />
|
|
</div>
|
|
<div class="shopDetail">
|
|
<div class="shopName">
|
|
<span class="shopTitle">{{ item.MERCHANTS_NAME }}</span>
|
|
<!-- <span class="titleIcon" v-if="item.SCANCODE_ORDER === 1"></span> -->
|
|
</div>
|
|
<div class="otherDetail">
|
|
<div class="leftDetail">
|
|
<span class="mark">{{ item.MERCHANTS_SCORE
|
|
}}<span class="unit">分</span></span>
|
|
<span class="monthSales">月售{{ item.MONTHLYSALES || "-" }}</span>
|
|
<span class="perCapita">人均 ￥{{ item.PERCAPITA || "-" }}</span>
|
|
</div>
|
|
<div class="rightDetail">
|
|
<!-- <span class="perCapita"
|
|
>人均 ￥{{ item.PERCAPITA || "-" }}</span
|
|
> -->
|
|
<!-- <span
|
|
v-show="item.CouponList && item.CouponList.length > 0"
|
|
class="icon-coupon"
|
|
>优惠券</span
|
|
> -->
|
|
</div>
|
|
</div>
|
|
<div class="couponList">
|
|
<div class="couponBox" :style="{
|
|
right:
|
|
item.SCANCODE_ORDER === 1 &&
|
|
item.CouponList &&
|
|
item.CouponList.length > 0
|
|
? '160rpx'
|
|
: '0',
|
|
}" v-if="item.CouponList && item.CouponList.length > 0">
|
|
<view class="couponIconBox">
|
|
<image class="couponIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/useCoupon.svg" />
|
|
</view>
|
|
<span class="couponText">优惠券</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 去点餐 -->
|
|
<div class="goOrder" v-if="item.SCANCODE_ORDER === 1" @click.stop="goBuy(item)">
|
|
<image class="orderIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/goOrderIcon.svg" />
|
|
<span class="goOrderText">去点餐</span>
|
|
</div>
|
|
<!-- 优惠券 -->
|
|
<!-- <div
|
|
class="couponBox"
|
|
:style="{
|
|
right:
|
|
item.SCANCODE_ORDER === 1 &&
|
|
item.CouponList &&
|
|
item.CouponList.length > 0
|
|
? '160rpx'
|
|
: '0',
|
|
}"
|
|
v-if="item.CouponList && item.CouponList.length > 0"
|
|
>
|
|
<image
|
|
class="couponIcon"
|
|
src="https://eshangtech.com/wanmeiyizhanImg/home/useCoupon.png"
|
|
/>
|
|
<span class="couponText">优惠券</span>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="shopList" v-if="
|
|
item.GoodsList &&
|
|
item.GoodsList.length > 0 &&
|
|
item.SCANCODE_ORDER === 1
|
|
">
|
|
<div class="shopItem" v-for="(subItem, subIndex) in item.GoodsList" :key="subIndex">
|
|
<div class="shopImgBox">
|
|
<image class="shopImg" lazy-load :src="subItem.IMAGE_URL" />
|
|
</div>
|
|
<div class="shopName">{{ subItem.COMMODITY_NAME || "" }}</div>
|
|
<div class="itemPrice">
|
|
<span class="itemUnit">¥</span>
|
|
<span class="itemPrice">{{
|
|
subItem.COMMODITY_RETAILPRICE || ""
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="noDataBox">
|
|
<no-data text="暂无可点餐门店" :isShow="!(shopList && shopList.length > 0)" />
|
|
</div>
|
|
</scroll-view>
|
|
<CustomLoading :visible="isLoading" v-if="isLoading" @update:visible="(val) => (isLoading = val)" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import noData from "../../components/noData.vue";
|
|
import currentService from "../../components/currentService.vue";
|
|
import { mapGetters } from "vuex";
|
|
import { handleGetNearThreeService } from "../../utils/publicMethods";
|
|
import CustomLoading from "../../components/customLoading.vue";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
serverPart: {},
|
|
shopList: [],
|
|
allTypeList: [], // 所有业态的
|
|
onShowTypeList: [], // 显示的列表
|
|
selectTypeList: [], // 选择业态的列表
|
|
selectTypeTab: 0, // 选中的业态类型
|
|
menu: {},
|
|
isLoading: false,
|
|
loginType: "",
|
|
};
|
|
},
|
|
async onLoad() {
|
|
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("this.menu", this.menu);
|
|
console.log("this.loginType", this.loginType);
|
|
|
|
let serviceInfo = await handleGetNearThreeService();
|
|
this.serverPart = serviceInfo.currentService;
|
|
await this.handleGetShopList();
|
|
|
|
// let currentService = uni.getStorageSync("currentService");
|
|
// console.log("currentService", currentService);
|
|
// 获取这个服务区的门店列表 且自己筛选 只留下 可以点餐的门店
|
|
// if (currentService) {
|
|
// this.serverPart = currentService;
|
|
// this.handleGetShopList();
|
|
// } else {
|
|
// let _this = this;
|
|
// handleHavePointInMin().then((res) => {
|
|
// console.log("handleHavePointInMin", res);
|
|
// this.serverPart = res;
|
|
// _this.handleGetShopList();
|
|
// });
|
|
// }
|
|
this.$utils.addUserBehaviorNew();
|
|
},
|
|
onShow() {
|
|
let currentService = uni.getStorageSync("currentService");
|
|
if (currentService.SERVERPART_ID !== this.serverPart.SERVERPART_ID) {
|
|
this.serverPart = currentService;
|
|
// 获取这个服务区的门店列表 且自己筛选 只留下 可以点餐的门店
|
|
this.handleGetShopList();
|
|
}
|
|
},
|
|
onShareAppMessage() {
|
|
// let _this = this;
|
|
return {
|
|
title: "点餐列表",
|
|
path: "/pages/reservationOrder/index",
|
|
// imageUrl: _this.good.DEFAULT_IMG,
|
|
};
|
|
},
|
|
onShareTimeline() {
|
|
return {
|
|
title: "点餐列表",
|
|
path: "/pages/reservationOrder/index",
|
|
// imageUrl: _this.good.DEFAULT_IMG,
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters({
|
|
user: "user",
|
|
}),
|
|
},
|
|
components: {
|
|
noData,
|
|
currentService,
|
|
CustomLoading,
|
|
},
|
|
methods: {
|
|
handleBack() {
|
|
uni.navigateBack({
|
|
delta: 1,
|
|
});
|
|
},
|
|
// 跳转到地图选择服务区
|
|
goSelectServer() {
|
|
uni.navigateTo({ url: "/pages/newMap/index/index" });
|
|
},
|
|
// 拿到门店列表
|
|
async handleGetShopList() {
|
|
this.shopList = [];
|
|
this.allTypeList = [];
|
|
this.onShowTypeList = [];
|
|
this.selectTypeList = [];
|
|
this.selectTypeTab = 0;
|
|
|
|
// uni.showLoading({
|
|
// title: "加载中...",
|
|
// });
|
|
this.isLoading = true;
|
|
let _this = this;
|
|
// console.log("_this.serverPart", _this.serverPart);
|
|
|
|
const data = await this.$api.$javaGet2("/third-party/getMerchantsList", {
|
|
serverpartId: _this.serverPart.SERVERPART_ID,
|
|
});
|
|
|
|
console.log("datadatadatadatadata", data);
|
|
let list = data.Result_Data.List;
|
|
let shopList = [];
|
|
if (list && list.length > 0) {
|
|
list.forEach((item) => {
|
|
// if (item.SCANCODE_ORDER === 1) {
|
|
shopList.push(item);
|
|
// }
|
|
});
|
|
}
|
|
_this.handleSortShopList(shopList);
|
|
console.log("shopList", shopList);
|
|
_this.shopList = shopList;
|
|
uni.hideLoading();
|
|
|
|
// 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;
|
|
// console.log("list", list);
|
|
// let shopList = [];
|
|
// if (list && list.length > 0) {
|
|
// list.forEach((item) => {
|
|
// // if (item.SCANCODE_ORDER === 1) {
|
|
// shopList.push(item);
|
|
// // }
|
|
// });
|
|
// }
|
|
// _this.handleSortShopList(shopList);
|
|
// console.log("shopList", shopList);
|
|
// _this.shopList = shopList;
|
|
// // uni.hideLoading();
|
|
|
|
_this.isLoading = false;
|
|
this.$forceUpdate();
|
|
},
|
|
// 按照查出来的门店的业态进行分类
|
|
handleSortShopList(list) {
|
|
let allList = [];
|
|
let tabList = [];
|
|
// 优惠券列表
|
|
let couponList = [];
|
|
|
|
// 先遍历出 全部门店的业态
|
|
if (list && list.length > 0) {
|
|
let idList = [];
|
|
list.forEach((item) => {
|
|
if (idList.indexOf(item.SHOPTRADE) === -1) {
|
|
idList.push(item.SHOPTRADE);
|
|
tabList.push({ label: item.SHOPTRADE_TEXT, value: item.SHOPTRADE });
|
|
}
|
|
if (item.CouponList && item.CouponList.length > 0) {
|
|
item.CouponList.forEach((subItem) => {
|
|
let obj = JSON.parse(JSON.stringify(subItem));
|
|
obj.MERCHANTS_LOGO = item.MERCHANTS_LOGO;
|
|
obj.MERCHANTS_NAME = item.MERCHANTS_NAME;
|
|
obj.parent = item;
|
|
couponList.push(obj);
|
|
});
|
|
}
|
|
});
|
|
// 根据遍历出的业态种类 变成一个二维数据
|
|
if (idList && idList.length > 0) {
|
|
idList.forEach((item) => {
|
|
allList.push([]);
|
|
});
|
|
idList.forEach((item, index) => {
|
|
list.forEach((subItem) => {
|
|
if (item === subItem.SHOPTRADE) {
|
|
let oldList = allList[index];
|
|
oldList.push(subItem);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
console.log("allList", allList);
|
|
}
|
|
|
|
console.log('listlistlistlist', list);
|
|
allList.unshift(list)
|
|
|
|
if (allList && allList.length > 0) {
|
|
// 各种业态类型的二维数组
|
|
this.allTypeList = allList;
|
|
this.onShowTypeList = allList[this.selectTypeTab];
|
|
// 添加上全部的分类
|
|
tabList.unshift({
|
|
label: "全部",
|
|
value: "0"
|
|
})
|
|
this.selectTypeList = tabList;
|
|
console.log("this.allTypeList", this.allTypeList);
|
|
console.log("this.allTypeLonShowTypeListist", this.onShowTypeList);
|
|
console.log("this.selectTypeTab", this.selectTypeTab);
|
|
console.log("this.selectTypeList", this.selectTypeList);
|
|
}
|
|
},
|
|
// 修改业态tab
|
|
handleChangeType(value) {
|
|
this.selectTypeTab = value;
|
|
this.onShowTypeList = this.allTypeList[this.selectTypeTab];
|
|
},
|
|
goBuy(item) {
|
|
console.log("goBuy", item);
|
|
let stroreDetail = {
|
|
MONTHLYSALES: item.MONTHLYSALES,
|
|
PERCAPITA: item.PERCAPITA
|
|
};
|
|
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
|
|
}&stroreDetail=${JSON.stringify(stroreDetail)}`,
|
|
});
|
|
} 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
|
|
}&stroreDetail=${JSON.stringify(stroreDetail)}`,
|
|
});
|
|
this.isLogin = true;
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style scoped lang="less">
|
|
.main {
|
|
width: 100%;
|
|
height: 100vh;
|
|
background: #fff;
|
|
|
|
.top {
|
|
width: 100%;
|
|
// box-sizing: border-box;
|
|
background: #fff;
|
|
|
|
.topContent {
|
|
display: flex;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
padding: 0 16px;
|
|
|
|
.backIcon {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.first {
|
|
display: flex;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
border: 1rpx solid #e7e7e6;
|
|
border-radius: 48rpx;
|
|
padding: 8rpx 24rpx;
|
|
|
|
.addressIcon {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
margin-right: 8rpx;
|
|
}
|
|
|
|
.text {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #090c1a;
|
|
line-height: 40rpx;
|
|
text-align: justify;
|
|
font-style: normal;
|
|
}
|
|
|
|
.moreIcon {
|
|
margin-left: 8rpx;
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.pageTop {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 12rpx 32rpx;
|
|
background: #fff;
|
|
|
|
.first {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
|
|
.addressIcon {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
margin-right: 8rpx;
|
|
}
|
|
|
|
.text {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 32rpx;
|
|
color: #130f05;
|
|
line-height: 44rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
|
|
.moreIcon {
|
|
margin-left: 8rpx;
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
}
|
|
}
|
|
|
|
.second {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #716f69;
|
|
line-height: 36rpx;
|
|
text-align: justify;
|
|
font-style: normal;
|
|
margin-left: 32rpx;
|
|
}
|
|
}
|
|
|
|
.newTabList {
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
// border-bottom: 1px solid #dddcdc;
|
|
margin-top: 16rpx;
|
|
height: 30px;
|
|
|
|
|
|
.newTabItem {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #C6C6C6;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
white-space: nowrap;
|
|
padding: 0 40rpx;
|
|
}
|
|
|
|
.selectTabItem {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
color: #130f05;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
position: relative;
|
|
}
|
|
|
|
.selectTabItem:after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 2rem;
|
|
height: 4rpx;
|
|
background: #009DFF;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
|
|
.newTabList::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.shopListBox {
|
|
margin-top: 24rpx;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 0 24rpx;
|
|
|
|
.shopItemBox {
|
|
width: 100%;
|
|
margin-bottom: 32rpx;
|
|
border-bottom: 1px solid #ededed;
|
|
padding-bottom: 32rpx;
|
|
|
|
.shopItemTop {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
|
|
.shopImg {
|
|
width: 130rpx;
|
|
height: 130rpx;
|
|
overflow: hidden;
|
|
border-radius: 16rpx;
|
|
margin-right: 28rpx;
|
|
|
|
.shopIcon {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.shopDetail {
|
|
width: calc(100% - 158rpx);
|
|
height: 130rpx;
|
|
// height: 96rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
// flex-direction: column;
|
|
// justify-content: space-between;
|
|
// position: relative;
|
|
|
|
.shopDetailLeft {
|
|
width: calc(100% - 150rpx);
|
|
height: 130rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
.detailLeftTop {
|
|
.topShopName {
|
|
font-family: "Microsoft YaHei";
|
|
font-weight: 400;
|
|
font-size: 29rpx;
|
|
color: #000000;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
|
|
.detailLeftBottom {
|
|
.scoreBox {
|
|
display: flex;
|
|
align-items: center;
|
|
font-family: "Microsoft YaHei";
|
|
font-weight: 400;
|
|
font-size: 22rpx;
|
|
color: #FF6200;
|
|
text-align: left;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
}
|
|
|
|
.newOtherDetail {
|
|
width: 100%;
|
|
display: flex;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
margin-top: 12rpx;
|
|
|
|
.label {
|
|
font-family: "Microsoft YaHei";
|
|
font-weight: 400;
|
|
font-size: 22rpx;
|
|
color: rgba(0, 0, 0, 0.5);
|
|
text-align: left;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
display: inline-block;
|
|
width: 50rpx;
|
|
}
|
|
|
|
.value {
|
|
font-family: "Microsoft YaHei";
|
|
font-weight: 400;
|
|
font-size: 22rpx;
|
|
color: #009DFF;
|
|
text-align: left;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
display: inline-block;
|
|
width: 70rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.shopDetailRight {
|
|
width: 150rpx;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
|
|
.goFood {
|
|
font-family: "Microsoft YaHei";
|
|
font-weight: 400;
|
|
font-size: 26rpx;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
padding: 8rpx 28rpx;
|
|
background-color: #FF6200;
|
|
border-radius: 32rpx;
|
|
display: inline-block;
|
|
}
|
|
|
|
.search {
|
|
font-family: "Microsoft YaHei";
|
|
font-weight: 400;
|
|
font-size: 26rpx;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
padding: 8rpx 28rpx;
|
|
background-color: #009DFF;
|
|
border-radius: 32rpx;
|
|
display: inline-block;
|
|
|
|
}
|
|
}
|
|
|
|
.shopName {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.shopTitle {
|
|
display: inline-block;
|
|
max-width: calc(100% - 133rpx);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 32rpx;
|
|
color: #130f05;
|
|
line-height: 44rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
|
|
.titleIcon {
|
|
display: inline-block;
|
|
background: url("https://eshangtech.com/ShopICO/icos/to-eat.png") no-repeat center; // eshangtech.com/ShopICO/icos/to-eat.png) no-repeat center;
|
|
background-size: contain;
|
|
width: 133rpx;
|
|
height: 48rpx;
|
|
}
|
|
}
|
|
|
|
.otherDetail {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.leftDetail {
|
|
.mark {
|
|
font-family: "DINAlternate";
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
color: #ba922f;
|
|
line-height: 36rpx;
|
|
text-align: justify;
|
|
font-style: normal;
|
|
|
|
.unit {
|
|
font-family: "PingFangSC";
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #ba922f;
|
|
line-height: 32rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
|
|
.monthSales {
|
|
margin-left: 16rpx;
|
|
font-family: "PingFangSC";
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #716f69;
|
|
line-height: 36rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
|
|
.perCapita {
|
|
margin-left: 16rpx;
|
|
font-family: "PingFangSC";
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #716f69;
|
|
line-height: 36rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
|
|
.rightDetail {
|
|
.perCapita {
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.icon-coupon {
|
|
background: url("https://eshangtech.com/ShopICO/icos/y-yhq.png") no-repeat left center; // eshangtech.com/ShopICO/icos/y-yhq.png) no-repeat left center
|
|
background-size: contain;
|
|
// width 75rpx
|
|
// height 22rpx
|
|
padding-left: 40rpx;
|
|
height: 27rpx;
|
|
line-height: 27rpx;
|
|
// padding-left 25rpx
|
|
font-size: 24rpx;
|
|
color: #ec5930;
|
|
margin-left: 8px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.couponList {
|
|
display: inline-block;
|
|
margin-top: 12rpx;
|
|
|
|
.couponBox {
|
|
background: #fef0e5;
|
|
border-radius: 2rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.couponIconBox {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
background: linear-gradient(180deg, #ffddc0 0%, #ffeada 100%);
|
|
border-radius: 4rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.couponIcon {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
}
|
|
}
|
|
|
|
.couponText {
|
|
margin: 0 10rpx;
|
|
font-family: "PingFangSC";
|
|
font-weight: 400;
|
|
font-size: 22rpx;
|
|
color: #fa5825;
|
|
line-height: 32rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
}
|
|
|
|
.goOrder {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
padding: 10rpx 12rpx;
|
|
border-radius: 4rpx;
|
|
border: 2rpx solid #ae8d3e;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.orderIcon {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
margin-right: 8rpx;
|
|
}
|
|
|
|
.goOrderText {
|
|
font-family: "PingFangSC";
|
|
font-weight: 400;
|
|
font-size: 22rpx;
|
|
color: #ba922f;
|
|
line-height: 32rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
|
|
// .couponBox {
|
|
// padding: 4rpx 6rpx;
|
|
// background: rgba(247, 80, 49, 0.08);
|
|
// border-radius: 2rpx;
|
|
// display: flex;
|
|
// align-items: center;
|
|
// position: absolute;
|
|
// right: 160rpx;
|
|
// top: 0;
|
|
// .couponIcon {
|
|
// width: 24rpx;
|
|
// height: 24rpx;
|
|
// margin-right: 4rpx;
|
|
// }
|
|
// .couponText {
|
|
// font-family: PingFangSC, PingFang SC;
|
|
// font-weight: 400;
|
|
// font-size: 22rpx;
|
|
// color: #f75031;
|
|
// line-height: 32rpx;
|
|
// text-align: left;
|
|
// font-style: normal;
|
|
// white-space: nowrap;
|
|
// }
|
|
// }
|
|
}
|
|
}
|
|
|
|
.shopList {
|
|
width: calc(100% - 160rpx);
|
|
box-sizing: border-box;
|
|
margin-left: 160rpx;
|
|
overflow-x: auto;
|
|
display: flex;
|
|
margin-top: 24rpx;
|
|
|
|
.shopItem {
|
|
width: 168rpx;
|
|
margin-right: 16rpx;
|
|
|
|
.shopImgBox {
|
|
width: 146rpx;
|
|
// height: 96rpx;
|
|
height: 146rpx;
|
|
overflow: hidden;
|
|
border-radius: 10rpx;
|
|
margin-bottom: 12rpx;
|
|
|
|
.shopImg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.shopName {
|
|
width: 100%;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
|
|
font-family: "Microsoft YaHei";
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #000000;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
|
|
.itemPrice {
|
|
.itemUnit {
|
|
font-family: "DINAlternate";
|
|
font-weight: bold;
|
|
font-size: 20rpx;
|
|
color: #FF6200;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
|
|
.itemPrice {
|
|
font-family: "DINAlternate";
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
color: #FF6200;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.shopList::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.activitieBox {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding-top: 24rpx;
|
|
|
|
.activeTitle {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #716f69;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.couponList {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.couponItem {
|
|
width: calc((100% - 24rpx) / 2);
|
|
margin-right: 24rpx;
|
|
|
|
.itemImgBox {
|
|
width: 100%;
|
|
height: 192rpx;
|
|
border-radius: 12rpx;
|
|
overflow: hidden;
|
|
margin-bottom: 16rpx;
|
|
|
|
.itemImg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.couponText {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #130f05;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.couponTime {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #716f69;
|
|
line-height: 36rpx;
|
|
text-align: justify;
|
|
font-style: normal;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
|
|
.couponItem:nth-child(2n) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.noDataBox {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
</style> |