ylj20011123 5d8cf4605f update
2025-07-07 20:02:40 +08:00

921 lines
26 KiB
Vue

<template>
<div class="main">
<div class="top" :style="{
height: `${menu.height + 8}px`,
paddingTop: menu.top + '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="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: `calc(100vh - ${menu.top}px - ${menu.height + 8}px - 50px )`,
}">
<div v-if="onShowTypeList && onShowTypeList.length > 0">
<div class="shopItemBox" v-for="(item, index) in onShowTypeList" :key="index" @click.stop="goBuy(item)" :style="{
marginBottom: index + 1 === onShowTypeList.length ? '0' : '',
borderWidth: index + 1 === onShowTypeList.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>
</div>
<div v-else class="noDataBox">
<no-data text="暂无可点餐门店" :isShow="!(shopList && shopList.length > 0)" />
</div>
</scroll-view>
</div>
</template>
<script>
import noData from "../../components/noData.vue";
import currentService from "../../components/currentService.vue";
import { mapGetters } from "vuex";
export default {
data() {
return {
serverPart: {},
shopList: [],
allTypeList: [], // 所有业态的
onShowTypeList: [], // 显示的列表
selectTypeList: [], // 选择业态的列表
selectTypeTab: 0, // 选中的业态类型
thisServerpartId: "",
seatInfo: {},
menu: {},
isFirst: true,// 判断是不是第一次进入到页面
};
},
async onLoad(query) {
console.log('queryqueryquery', query);
// 拿到用户手机信息
this.menu = uni.getMenuButtonBoundingClientRect();
// 判断有没有传入 id 有的话 用传入的 没有的 就用缓存的当前的
if (query.id) {
// 拿到id
this.thisServerpartId = query.id;
// 获取这个服务区的门店列表 且自己筛选 只留下 可以点餐的门店
await this.handleGetServerpartDetail(this.thisServerpartId);
} else {
// 没有传入id的话 就默认用当前选择的服务区
let currentService = uni.getStorageSync("currentService");
this.serverPart = currentService;
}
// 获得该服务区下面的门店列表
await this.handleGetShopList();
// this.$utils.addUserBehaviorNew();
this.$utils.addUserBehaviorNew({
behaviorRecordDesc: `查看了【${this.serverPart.SERVERPART_NAME}】点餐列门店列表`
});
},
onShow() {
if (!this.isFirst) {
// 判断有没有去选择服务区页面修改了服务区
let haveChange = uni.getStorageSync("serviceChange");
console.log('haveChange', haveChange);
if (haveChange) {
uni.setStorageSync("serviceChange", false);
let currentService = uni.getStorageSync("currentService");
if (
currentService.SERVERPART_ID !== this.serverPart.SERVERPART_ID
) {
this.serverPart = currentService;
this.thisServerpartId = currentService.SERVERPART_ID;
// 获取这个服务区的门店列表 且自己筛选 只留下 可以点餐的门店
this.handleGetShopList();
}
}
} else {
this.isFirst = false
}
},
computed: {
...mapGetters({
user: "user",
}),
},
components: {
noData,
currentService,
},
methods: {
handleBack() {
uni.navigateBack({
delta: 1,
});
},
// 跳转到地图选择服务区
goSelectServer() {
uni.navigateTo({ url: "/pages/newMap/index/index" });
},
async handleGetServerpartDetail(id) {
let seatInfo = uni.getStorageSync("seatInfo");
if (seatInfo) {
seatInfo = JSON.parse(seatInfo);
}
let req = {
ServerpartId: id,
latitude: seatInfo.latitude,
longitude: seatInfo.longitude,
};
uni.showLoading({
title: "加载中...",
});
const data = await this.$api.$get(
"/CommercialApi/BaseInfo/GetServerpartInfo",
req
);
this.serverPart = data.Result_Data;
console.log("this.serverPart", this.serverPart);
},
// 拿到门店列表
async handleGetShopList() {
this.shopList = [];
this.allTypeList = [];
this.onShowTypeList = [];
this.selectTypeList = [];
this.selectTypeTab = 0;
uni.showLoading({
title: "加载中...",
});
let _this = this;
// this.$api
// .getCoop({
// action_type: "GetSellerList",
// showSales: 1,
// showCoupon: 1,
// showComment: 1,
// serverpartId: this.thisServerpartId || this.serverPart.SERVERPART_ID,
// provinceCode: "530000",
// showGoods: 1,
// pageSize: 9999,
// pageIndex: 1,
// })
// .then(function (data) {
const data = await this.$api.$javaGet("/third-party/getMerchantsList", {
serverpartId: this.thisServerpartId || this.serverPart.SERVERPART_ID,
});
// let list = data.Data.List;
let list = data.Result_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();
// });
},
// 按照查出来的门店的业态进行分类
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);
}
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) {
console.log('value', value);
this.selectTypeTab = value;
this.onShowTypeList = this.allTypeList[this.selectTypeTab];
},
goBuy(item) {
console.log("goBuy", 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;
}
},
},
};
</script>
<style scoped lang="less">
.main {
width: 100%;
height: 100vh;
background: #fff;
box-sizing: border-box;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
.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;
}
}
}
}
.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%);
}
}
.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;
}
}
.shopListBox ::-webkit-scrollbar {
display: none;
}
}
</style>