You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
419 lines
8.1 KiB
419 lines
8.1 KiB
<template>
|
|
<view class="container">
|
|
<view class="card-body">
|
|
<block v-if="merchant.length > 0">
|
|
<uni-grid :column="3" borderColor="transparent" :highlight="true" @change="change">
|
|
<uni-grid-item v-for="(item, index) in merchant" :index="index" :key="index">
|
|
<view class="merchant-card" style="display: flex; flex-direction: column">
|
|
<image :src="item.image" mode="widthFix" class="merchant-image" />
|
|
<text class="merchant-name">{{ item.merchantName }}</text>
|
|
</view>
|
|
</uni-grid-item>
|
|
</uni-grid>
|
|
</block>
|
|
<block v-else>
|
|
<uni-card :border="false" :padding="'18px 6px'">
|
|
<uv-skeleton rows="2" avatar :loading="hideTools" :title="false"></uv-skeleton>
|
|
<uv-gap height="16"></uv-gap>
|
|
<uv-skeleton rows="2" avatar :loading="hideTools" :title="false"></uv-skeleton>
|
|
<uv-gap height="16"></uv-gap>
|
|
<uv-skeleton rows="2" avatar :loading="hideTools" :title="false"></uv-skeleton>
|
|
<uv-gap height="16"></uv-gap>
|
|
<uv-skeleton rows="2" avatar :loading="hideTools" :title="false"></uv-skeleton>
|
|
<uv-gap height="16"></uv-gap>
|
|
</uni-card>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
<!-- 登录组件 -->
|
|
<ws-login ref="login" :logo="logo" @done="reload" />
|
|
</template>
|
|
|
|
<script>
|
|
import * as GoodsApi from '@/api/shop/goods';
|
|
import * as Api from '@/api/layout';
|
|
import * as MerchantApi from '@/api/shop/merchant';
|
|
import * as MpMenuApi from '@/api/cms/mp-menu/index';
|
|
import * as ItemApi from '@/api/booking/item';
|
|
import { useTenantStore } from '@/store/modules/tenant';
|
|
import { openUrl } from '@/utils/common';
|
|
const tenantStore = useTenantStore();
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
itemType: null,
|
|
items: ['关注', '推荐'],
|
|
// 场馆列表
|
|
merchant: [],
|
|
// 网站参数
|
|
fields: {},
|
|
// 幻灯片广告
|
|
ads: [],
|
|
// 幻灯片链接地址
|
|
pathList: [],
|
|
// 项目列表
|
|
itemList: [],
|
|
// 小程序导航图标
|
|
navigation: [],
|
|
// 小程序导航图标(双排)
|
|
doubleNavigation: [],
|
|
isLogin: false,
|
|
// 骨架屏
|
|
hideTools: true,
|
|
mp_menu_display_method: 0
|
|
};
|
|
},
|
|
onLoad(o) {
|
|
this.itemType = o.type
|
|
this.reload();
|
|
},
|
|
methods: {
|
|
async reload() {
|
|
const app = this;
|
|
|
|
// 获取服务租户信息包
|
|
const info = await tenantStore.fetchTenantInfo();
|
|
|
|
// 登录状态
|
|
if (uni.getStorageSync('user_id') && uni.getStorageSync('access_token')) {
|
|
app.isLogin = true;
|
|
}
|
|
|
|
// 解析网站参数
|
|
if (info.fields) {
|
|
info.fields.map((d) => {
|
|
const key = d.name;
|
|
app.fields[key] = d.value;
|
|
|
|
if (d.name == 'h5_url') {
|
|
// 缓存H5地址
|
|
uni.setStorageSync(d.name, d.value);
|
|
}
|
|
|
|
if (d.name == 'mp_menu_display_method') {
|
|
app.mp_menu_display_method = d.value;
|
|
}
|
|
});
|
|
}
|
|
// 解析幻灯片数据
|
|
if (info.ads) {
|
|
const ad = info.ads.filter((d) => d.adType == '幻灯片');
|
|
if (ad) {
|
|
const adsList = JSON.parse(ad[0].images);
|
|
adsList.map((d) => {
|
|
app.ads.push(d.url);
|
|
});
|
|
app.pathList = JSON.parse(ad[0].path);
|
|
}
|
|
app.hideTools = false;
|
|
}
|
|
// 解析小程序名称
|
|
if (info.websiteName) {
|
|
uni.setNavigationBarTitle({
|
|
title: info.websiteName
|
|
});
|
|
}
|
|
// 解析网站logo
|
|
if (info.websiteLogo) {
|
|
uni.setStorageSync('app_logo', info.websiteLogo);
|
|
app.logo = info.websiteLogo;
|
|
}
|
|
// 解析小程序导航图标
|
|
if (info.mpMenus) {
|
|
const arr = info.mpMenus.filter((d) => d.type == 2 && d.rows == 0);
|
|
const arr1 = info.mpMenus.filter((d) => d.type == 2 && d.rows == 1);
|
|
const arr2 = info.mpMenus.filter((d) => d.type == 2 && d.rows == 2);
|
|
app.navigation = [];
|
|
app.doubleNavigation = [];
|
|
|
|
if (arr1) {
|
|
app.doubleNavigation.push(arr);
|
|
app.doubleNavigation.push(arr1);
|
|
} else {
|
|
app.doubleNavigation.push(arr);
|
|
}
|
|
//
|
|
if (arr) {
|
|
app.navigation = arr;
|
|
}
|
|
}
|
|
// 请求数据
|
|
Promise.all([app.getMerchantList()]).then((res) => {
|
|
app.merchant = res[0];
|
|
});
|
|
},
|
|
getSiteInfo() {
|
|
const app = this;
|
|
return new Promise((resolve, reject) => {
|
|
Api.getSiteInfo()
|
|
.then((result) => {
|
|
resolve(result);
|
|
})
|
|
.catch(reject);
|
|
});
|
|
},
|
|
getMerchantList() {
|
|
const app = this
|
|
const { itemType } = this
|
|
return new Promise((resolve, reject) => {
|
|
MerchantApi.listMerchant({itemType})
|
|
.then((result) => {
|
|
resolve(result);
|
|
})
|
|
.catch(reject);
|
|
});
|
|
},
|
|
change(e) {
|
|
const { index } = e.detail;
|
|
const id = this.merchant[index].merchantId;
|
|
this.openUrl(`/package/booking/index?id=${id}`);
|
|
},
|
|
onAds(index) {
|
|
const { pathList } = this;
|
|
this.openUrl(pathList[index]);
|
|
},
|
|
openUrl(url) {
|
|
if (!this.isLogin) {
|
|
this.$refs.login.open('bottom');
|
|
return false;
|
|
} else {
|
|
uni.navigateTo({
|
|
url
|
|
});
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style>
|
|
page {
|
|
/* background: url('https://oss.wsdns.cn/20240502/75fc744657544a38a32f83a825688286.png') no-repeat; */
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
background-color: #f0f2f5;
|
|
width: 750rpx;
|
|
overflow-x: hidden;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
}
|
|
|
|
.segmented {
|
|
display: block;
|
|
justify-content: space-around;
|
|
text-align: center;
|
|
width: 200rpx;
|
|
margin: auto;
|
|
color: #ffffff;
|
|
|
|
.item {
|
|
color: #666;
|
|
font-size: 26rpx;
|
|
padding: 0 12rpx;
|
|
}
|
|
|
|
.active {
|
|
color: #333;
|
|
font-size: 30rpx;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.user-oreder {
|
|
display: flex;
|
|
padding: 16px 0;
|
|
|
|
.scroll-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 0 25rpx;
|
|
|
|
.scrool-item-text {
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
.web-cell-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.web-text-center {
|
|
text-align: center;
|
|
}
|
|
}
|
|
.menu-list {
|
|
display: flex;
|
|
padding: 16px 0;
|
|
flex-wrap: wrap;
|
|
|
|
.scroll-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 0 25rpx;
|
|
|
|
.scrool-item-text {
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
.web-cell-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin: 10rpx 0;
|
|
}
|
|
|
|
.web-text-center {
|
|
text-align: center;
|
|
}
|
|
.menu-title {
|
|
white-space: nowrap;
|
|
font-size: 26rpx;
|
|
}
|
|
}
|
|
.card-title {
|
|
width: 700rpx;
|
|
margin: 12rpx auto;
|
|
font-size: 34rpx;
|
|
font-weight: 500;
|
|
margin-top: 32rpx;
|
|
}
|
|
|
|
.merchant-card-title {
|
|
width: 700rpx;
|
|
margin: 12rpx auto;
|
|
font-size: 40rpx;
|
|
font-weight: 500;
|
|
margin-top: 32rpx;
|
|
}
|
|
|
|
.card-body {
|
|
width: 740rpx;
|
|
margin: auto;
|
|
|
|
.merchant-card {
|
|
margin: 12rpx auto;
|
|
background: #ffffff;
|
|
border-radius: 10rpx;
|
|
border-color: slategrey;
|
|
border-radius: 16rpx;
|
|
|
|
.merchant-image {
|
|
width: 200rpx;
|
|
border-radius: 16rpx 16rpx 0 0;
|
|
height: 140rpx !important;
|
|
}
|
|
|
|
.merchant-name {
|
|
padding: 10rpx;
|
|
font-weight: 500;
|
|
font-size: 26rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.merchant-desc {
|
|
width: 400rpx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
.item-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
width: 720rpx;
|
|
margin: auto;
|
|
|
|
.item-bar {
|
|
width: 138rpx;
|
|
height: 138rpx;
|
|
padding: 10rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
background-color: #ffffff;
|
|
border-radius: 10rpx;
|
|
margin: 10rpx;
|
|
font-size: 26rpx;
|
|
}
|
|
}
|
|
|
|
@mixin flex($direction: row) {
|
|
/* #ifndef APP-NVUE */
|
|
display: flex;
|
|
/* #endif */
|
|
flex-direction: $direction;
|
|
}
|
|
|
|
.navigation {
|
|
padding: 0 30rpx 0 30rpx;
|
|
}
|
|
|
|
.scroll-list {
|
|
@include flex(column);
|
|
|
|
&__item {
|
|
margin-right: 20px;
|
|
|
|
&__image {
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
&__text {
|
|
color: $uni-text-color-placeholder;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
margin-top: 5px;
|
|
}
|
|
}
|
|
|
|
&__line {
|
|
@include flex;
|
|
margin-top: 10px;
|
|
|
|
&__item {
|
|
margin-right: 30px;
|
|
text-align: center;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
&__image {
|
|
width: 61px;
|
|
height: 48px;
|
|
}
|
|
|
|
&__text {
|
|
margin-top: 5px;
|
|
color: $uni-text-color-placeholder;
|
|
font-size: 12px;
|
|
text-align: center;
|
|
}
|
|
|
|
&--no-margin-right {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__line__item__text {
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
</style>
|