682 lines
19 KiB
Vue
682 lines
19 KiB
Vue
<template>
|
|
<div class="main">
|
|
<div class="pageTop">
|
|
<div class="first" @click="goSelectServer">
|
|
<image class="addressIcon" src="/static/images/home/blackFixed.png" />
|
|
<div class="text">{{ serverPart.SERVERPART_NAME || "" }}</div>
|
|
<image class="moreIcon" src="/static/images/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" v-if="false">
|
|
<div
|
|
:class="
|
|
selectTypeTab === index ? 'newTabItem selectTabItem' : 'newTabItem'
|
|
"
|
|
v-for="(item, index) in selectTypeList"
|
|
:key="index"
|
|
@click="handleChangeType(index)"
|
|
>
|
|
{{ item.label }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="shopListBox">
|
|
<div v-if="shopList && shopList.length > 0">
|
|
<div
|
|
class="shopItemBox"
|
|
v-for="(item, index) in shopList"
|
|
:key="index"
|
|
@click.stop="goBuy(item)"
|
|
>
|
|
<div class="shopItemTop">
|
|
<div class="shopImg">
|
|
<image
|
|
class="shopIcon"
|
|
:src="
|
|
item.MERCHANTS_LOGO ||
|
|
'https://eshangtech.com/ShopICO/no-picture.png'
|
|
"
|
|
mode="aspectFit"
|
|
/>
|
|
</div>
|
|
<div class="shopDetail">
|
|
<div class="shopName">
|
|
<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>
|
|
<span class="monthSales"
|
|
>月售{{ item.MONTHLYSALES || "-" }}</span
|
|
>
|
|
</div>
|
|
<div class="rightDetail">
|
|
<span class="perCapita"
|
|
>人均 ￥{{ item.PERCAPITA || "-" }}</span
|
|
>
|
|
<!-- <span
|
|
v-show="item.CouponList && item.CouponList.length > 0"
|
|
class="icon-coupon"
|
|
>优惠券</span
|
|
> -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 去点餐 -->
|
|
<div
|
|
class="goOrder"
|
|
v-if="item.SCANCODE_ORDER === 1"
|
|
@click.stop="goBuy(item)"
|
|
>
|
|
<image
|
|
class="orderIcon"
|
|
src="/static/images/home/goOrderIcon.png"
|
|
/>
|
|
<span class="goOrderText">去点餐</span>
|
|
</div>
|
|
<!-- 优惠券 -->
|
|
<div
|
|
class="couponBox"
|
|
:style="{
|
|
right:
|
|
item.SCANCODE_ORDER === 1 &&
|
|
item.CouponList &&
|
|
item.CouponList.length > 0
|
|
? '160rpx'
|
|
: '0',
|
|
}"
|
|
v-if="item.CouponList && item.CouponList.length > 0"
|
|
>
|
|
<image
|
|
class="couponIcon"
|
|
src="/static/images/home/useCoupon.png"
|
|
/>
|
|
<span class="couponText">优惠券</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="shopList"
|
|
v-if="item.GoodsList && item.GoodsList.length > 0"
|
|
>
|
|
<div
|
|
class="shopItem"
|
|
v-for="(subItem, subIndex) in item.GoodsList"
|
|
:key="subIndex"
|
|
>
|
|
<div class="shopImgBox">
|
|
<image class="shopImg" :src="subItem.IMAGE_URL" />
|
|
</div>
|
|
<div class="shopName">{{ subItem.COMMODITY_NAME || "" }}</div>
|
|
<div class="itemPrice">
|
|
<span class="itemUnit">¥</span>
|
|
<span class="itemPrice">{{
|
|
subItem.COMMODITY_RETAILPRICE || ""
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="noDataBox">
|
|
<no-data
|
|
text="暂无可点餐门店"
|
|
:isShow="!(shopList && shopList.length > 0)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import noData from "../../components/noData.vue";
|
|
import currentService from "../../components/currentService.vue";
|
|
import { mapGetters } from "vuex";
|
|
import { handleHavePointInMin } from "../../utils/publicMethods";
|
|
export default {
|
|
data() {
|
|
return {
|
|
serverPart: {},
|
|
shopList: [],
|
|
allTypeList: [], // 所有业态的
|
|
onShowTypeList: [], // 显示的列表
|
|
selectTypeList: [], // 选择业态的列表
|
|
selectTypeTab: 0, // 选中的业态类型
|
|
};
|
|
},
|
|
onLoad() {
|
|
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();
|
|
});
|
|
}
|
|
},
|
|
onShow() {
|
|
let currentService = uni.getStorageSync("currentService");
|
|
if (currentService.SERVERPART_ID !== this.serverPart.SERVERPART_ID) {
|
|
this.serverPart = currentService;
|
|
// 获取这个服务区的门店列表 且自己筛选 只留下 可以点餐的门店
|
|
this.handleGetShopList();
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters({
|
|
user: "user",
|
|
}),
|
|
},
|
|
components: {
|
|
noData,
|
|
currentService,
|
|
},
|
|
methods: {
|
|
// 跳转到地图选择服务区
|
|
goSelectServer() {
|
|
uni.navigateTo({ url: "/pages/newMap/index/index" });
|
|
},
|
|
// 拿到门店列表
|
|
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.serverPart.SERVERPART_ID,
|
|
provinceCode: this.serverPart.ProvinceCode || "340000",
|
|
showGoods: 1,
|
|
pageSize: 9999,
|
|
pageIndex: 1,
|
|
})
|
|
.then(function (data) {
|
|
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();
|
|
});
|
|
},
|
|
// 按照查出来的门店的业态进行分类
|
|
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);
|
|
}
|
|
|
|
if (allList && allList.length > 0) {
|
|
// 各种业态类型的二维数组
|
|
this.allTypeList = allList;
|
|
this.onShowTypeList = allList[this.selectTypeTab];
|
|
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);
|
|
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}`,
|
|
});
|
|
} else {
|
|
let id = item.SERVERPARTSHOP_IDS.split(",")[0];
|
|
uni.navigateTo({
|
|
url: `/pages/shopPages/shop/index?id=${id}&mid=${item.MERCHANTS_ID}&province=${item.PROVINCE_CODE}`,
|
|
});
|
|
this.isLogin = true;
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style scoped lang="less">
|
|
.main {
|
|
width: 100%;
|
|
height: 100vh;
|
|
background: #fff;
|
|
.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;
|
|
.newTabItem {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #716f69;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
padding: 0 50rpx 12rpx 50rpx;
|
|
white-space: nowrap;
|
|
}
|
|
.selectTabItem {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
color: #130f05;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
position: relative;
|
|
}
|
|
.selectTabItem:after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 4rpx;
|
|
background: #ba922f;
|
|
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: 16rpx;
|
|
border-bottom: 1px solid #ededed;
|
|
padding-bottom: 12rpx;
|
|
.shopItemTop {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
.shopImg {
|
|
width: 96rpx;
|
|
height: 96rpx;
|
|
overflow: hidden;
|
|
border-radius: 8rpx;
|
|
margin-right: 16rpx;
|
|
.shopIcon {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.shopDetail {
|
|
width: calc(100% - 112rpx);
|
|
height: 96rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
position: relative;
|
|
.shopName {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
.shopTitle {
|
|
display: inline-block;
|
|
max-width: calc(100% - 133rpx);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: bold;
|
|
font-size: 30rpx;
|
|
color: #130f05;
|
|
text-align: justify;
|
|
font-style: normal;
|
|
}
|
|
.titleIcon {
|
|
display: inline-block;
|
|
background: url("https://eshangtech.com/ShopICO/icos/to-eat.png")
|
|
no-repeat center; // eshangtech.com/ShopICO/icos/to-eat.png) no-repeat center;
|
|
background-size: contain;
|
|
width: 133rpx;
|
|
height: 48rpx;
|
|
}
|
|
}
|
|
.otherDetail {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.leftDetail {
|
|
.mark {
|
|
color: #d45e0e;
|
|
font-size: 26rpx;
|
|
font-weight: bold;
|
|
}
|
|
.monthSales {
|
|
margin-left: 12px;
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
}
|
|
}
|
|
.rightDetail {
|
|
.perCapita {
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
}
|
|
.icon-coupon {
|
|
background: url("https://eshangtech.com/ShopICO/icos/y-yhq.png")
|
|
no-repeat left center; // eshangtech.com/ShopICO/icos/y-yhq.png) no-repeat left center
|
|
background-size: contain;
|
|
// width 75rpx
|
|
// height 22rpx
|
|
padding-left: 40rpx;
|
|
height: 27rpx;
|
|
line-height: 27rpx;
|
|
// padding-left 25rpx
|
|
font-size: 24rpx;
|
|
color: #ec5930;
|
|
margin-left: 8px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.goOrder {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
padding: 10rpx 12rpx;
|
|
border-radius: 4rpx;
|
|
border: 2rpx solid #ae8d3e;
|
|
display: flex;
|
|
align-items: center;
|
|
.orderIcon {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
margin-right: 8rpx;
|
|
}
|
|
.goOrderText {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 22rpx;
|
|
color: #ba922f;
|
|
line-height: 32rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
|
|
.couponBox {
|
|
padding: 4rpx 6rpx;
|
|
background: rgba(247, 80, 49, 0.08);
|
|
border-radius: 2rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
position: absolute;
|
|
right: 160rpx;
|
|
top: 0;
|
|
.couponIcon {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
margin-right: 4rpx;
|
|
}
|
|
.couponText {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 22rpx;
|
|
color: #f75031;
|
|
line-height: 32rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.shopList {
|
|
width: calc(100% - 120rpx);
|
|
box-sizing: border-box;
|
|
margin-left: 120rpx;
|
|
overflow-x: auto;
|
|
display: flex;
|
|
margin-top: 12rpx;
|
|
.shopItem {
|
|
width: 168rpx;
|
|
margin-right: 16rpx;
|
|
.shopImgBox {
|
|
width: 168rpx;
|
|
height: 128rpx;
|
|
overflow: hidden;
|
|
border-radius: 12rpx;
|
|
margin-bottom: 8rpx;
|
|
.shopImg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.shopName {
|
|
width: 100%;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 22rpx;
|
|
color: #130f05;
|
|
line-height: 32rpx;
|
|
text-align: justify;
|
|
font-style: normal;
|
|
}
|
|
.itemPrice {
|
|
.itemUnit {
|
|
font-family: DINAlternate, DINAlternate;
|
|
font-weight: bold;
|
|
font-size: 24rpx;
|
|
color: #130f05;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
.itemPrice {
|
|
font-family: DINAlternate, DINAlternate;
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
color: #130f05;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.shopList::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.activitieBox {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding-top: 24rpx;
|
|
.activeTitle {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #716f69;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
.couponList {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
.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%;
|
|
padding-top: 160px;
|
|
}
|
|
}
|
|
}
|
|
</style> |