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.
571 lines
12 KiB
571 lines
12 KiB
<template>
|
|
<view class="container">
|
|
<ws-search ref="search" />
|
|
<uv-sticky bgColor="#fff" customNavHeight="0">
|
|
<uv-tabs :list="list" @click="onTabs"></uv-tabs>
|
|
</uv-sticky>
|
|
<block v-if="ads.length > 0">
|
|
<uv-gap height="16"></uv-gap>
|
|
<view class="uv-demo-block" style="width: 688rpx; margin: auto">
|
|
<uv-swiper :list="ads" bgColor="transparent" indicatorMode="dot" indicator circular :autoplay="false" radius="5" @click="onAds"></uv-swiper>
|
|
</view>
|
|
</block>
|
|
<block v-else>
|
|
<uni-card :border="false" :padding="'12px 4px'">
|
|
<uv-skeleton rows="3" :loading="hideTools" :title="false"></uv-skeleton>
|
|
</uni-card>
|
|
</block>
|
|
<!-- <uni-section title="竞赛进行时">
|
|
<uni-list>
|
|
<uni-list-item link title="XXXX竞赛1" />
|
|
<uni-list-item link title="XXXX竞赛2" />
|
|
<uni-list-item link title="XXXX竞赛3" />
|
|
</uni-list>
|
|
</uni-section> -->
|
|
<uni-card :border="false" :is-shadow="false" :padding="0">
|
|
<!-- 暂无通知 -->
|
|
<uni-section title="竞赛进行时">
|
|
<uni-list>
|
|
<uni-list-item link title="XXXX竞赛1" />
|
|
<uni-list-item link title="XXXX竞赛2" />
|
|
<uni-list-item link title="XXXX竞赛3" />
|
|
</uni-list>
|
|
</uni-section>
|
|
</uni-card>
|
|
<uni-card :border="false" :is-shadow="false" :padding="0">
|
|
<!-- 暂无通知 -->
|
|
<uni-section title="团队动态">
|
|
<!-- <uv-alert title="uv-ui" type="warning" description="uv-ui的目标是成为uni-app生态最优秀的UI框架"></uv-alert> -->
|
|
<uni-list>
|
|
<uni-list-item link title="XXXX通知1" />
|
|
<uni-list-item link title="XXXX通知2" />
|
|
<uni-list-item link title="XXXX通知3" />
|
|
</uni-list>
|
|
</uni-section>
|
|
</uni-card>
|
|
<uni-card :border="false" :is-shadow="false" :padding="0">
|
|
<!-- 暂无课程表 -->
|
|
<uni-section title="培训进行时">
|
|
<uni-list>
|
|
<uni-list-item link title="xxx培训课程表1" note="（课程导图、理论培训、课程观看、题库练习、自学教材），实操培训（视频、仿真）" />
|
|
<uni-list-item link title="xxx培训课程表2" note="（课程导图、理论培训、课程观看、题库练习、自学教材），实操培训（视频、仿真）" />
|
|
<uni-list-item link title="xxx培训课程表3" note="（课程导图、理论培训、课程观看、题库练习、自学教材），实操培训（视频、仿真）" />
|
|
</uni-list>
|
|
</uni-section>
|
|
</uni-card>
|
|
<uni-card :border="false" :is-shadow="false" :padding="0">
|
|
<!-- 暂无课程表 -->
|
|
<uni-section title="考试进行时">
|
|
<uni-list>
|
|
<uni-list-item link title="xxx考试1" note="（课程导图、理论培训、课程观看、题库练习、自学教材），实操培训（视频、仿真）" />
|
|
<uni-list-item link title="xxx考试2" note="（课程导图、理论培训、课程观看、题库练习、自学教材），实操培训（视频、仿真）" />
|
|
<uni-list-item link title="xxx考试3" note="（课程导图、理论培训、课程观看、题库练习、自学教材），实操培训（视频、仿真）" />
|
|
</uni-list>
|
|
</uni-section>
|
|
</uni-card>
|
|
<uni-card :border="false" :is-shadow="false" :padding="0">
|
|
<!-- 1、培训一（课程导图、理论培训、课程观看、题库练习、自学教材），实操培训（视频、仿真）
|
|
2、培训二（同上）
|
|
3、培训三（同上） -->
|
|
<uni-section title="活动介绍">
|
|
<uv-gap height="100"></uv-gap>
|
|
</uni-section>
|
|
</uni-card>
|
|
<uni-card :border="false" :is-shadow="false" :padding="0">
|
|
<uni-section title="个人分享">
|
|
<uv-gap height="100"></uv-gap>
|
|
</uni-section>
|
|
</uni-card>
|
|
|
|
|
|
</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 {
|
|
index: 0,
|
|
name: '推荐',
|
|
list: [
|
|
{
|
|
name: '推荐'
|
|
},
|
|
{
|
|
name: '分享'
|
|
},
|
|
{
|
|
name: '活动'
|
|
},
|
|
{
|
|
name: '资讯'
|
|
},
|
|
{
|
|
name: '亮点'
|
|
}
|
|
],
|
|
items: ['关注', '推荐'],
|
|
// 场馆列表
|
|
merchant: [],
|
|
// 网站参数
|
|
fields: {},
|
|
// 幻灯片广告
|
|
ads: [],
|
|
// 幻灯片链接地址
|
|
pathList: [],
|
|
// 项目列表
|
|
itemList: [],
|
|
// 小程序导航图标
|
|
navigation: [],
|
|
// 小程序导航图标(双排)
|
|
doubleNavigation: [],
|
|
isLogin: false,
|
|
// 骨架屏
|
|
hideTools: true,
|
|
keyword: '',
|
|
mp_menu_display_method: 0,
|
|
baseList: [
|
|
{
|
|
name: 'photo',
|
|
title: '李白'
|
|
},
|
|
{
|
|
name: 'lock',
|
|
title: '韩信'
|
|
},
|
|
{
|
|
name: 'star',
|
|
title: '刘备'
|
|
},
|
|
{
|
|
name: 'star',
|
|
title: '元芳'
|
|
}
|
|
]
|
|
};
|
|
},
|
|
onLoad() {
|
|
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) {
|
|
console.log('ad: ', 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(), app.getItemList()]).then((res) => {
|
|
app.merchant = res[0];
|
|
app.itemList = res[1];
|
|
});
|
|
},
|
|
getSiteInfo() {
|
|
const app = this;
|
|
return new Promise((resolve, reject) => {
|
|
Api.getSiteInfo()
|
|
.then((result) => {
|
|
resolve(result);
|
|
})
|
|
.catch(reject);
|
|
});
|
|
},
|
|
onTabs(e) {
|
|
this.index = e.index;
|
|
this.name = e.name;
|
|
},
|
|
leftClick() {},
|
|
listAdList() {},
|
|
pageGoods() {
|
|
const app = this;
|
|
return new Promise((resolve, reject) => {
|
|
GoodsApi.pageGoods({})
|
|
.then((result) => {
|
|
resolve(result.list);
|
|
})
|
|
.catch(reject);
|
|
});
|
|
},
|
|
getMerchantList() {
|
|
const app = this;
|
|
return new Promise((resolve, reject) => {
|
|
MerchantApi.listMerchant({})
|
|
.then((result) => {
|
|
resolve(result);
|
|
})
|
|
.catch(reject);
|
|
});
|
|
},
|
|
getItemList() {
|
|
const app = this;
|
|
return new Promise((resolve, reject) => {
|
|
ItemApi.listItem({})
|
|
.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}`);
|
|
},
|
|
onNavigation(e) {
|
|
const { index } = e.detail;
|
|
this.openUrl(this.navigation[index].path);
|
|
},
|
|
onItem(e) {
|
|
const { index } = e.detail;
|
|
this.openUrl(`/package/booking/merchant?type=` + this.itemList[index].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 {
|
|
.search {
|
|
background-color: #ffffff;
|
|
padding: 20rpx;
|
|
}
|
|
.search-icon {
|
|
width: 68rpx;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.web-text-center {
|
|
text-align: center;
|
|
}
|
|
.menu-title {
|
|
white-space: nowrap;
|
|
font-size: 26rpx;
|
|
}
|
|
.grid-item-box {
|
|
background-color: #fff;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
.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 {
|
|
width: 720rpx;
|
|
min-height: 200rpx;
|
|
margin: auto;
|
|
justify-content: space-between;
|
|
|
|
.item-bar {
|
|
width: 145rpx;
|
|
height: 145rpx;
|
|
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;
|
|
}
|
|
}
|
|
|
|
/* 单元格 */
|
|
// .web-cell {
|
|
// display: flex;
|
|
|
|
// &:not(.web-cell-align-top) {
|
|
// align-items: center;
|
|
// }
|
|
|
|
// &.web-cell-align-bottom {
|
|
// align-items: flex-end;
|
|
// }
|
|
|
|
// &>.web-cell-content {
|
|
// flex: 1;
|
|
// box-sizing: border-box;
|
|
// }
|
|
|
|
// &>*+.web-cell-content {
|
|
// // padding-left: @padding-sm;
|
|
// }
|
|
|
|
// .web-cell-title {
|
|
// // color: @heading-color;
|
|
// // font-size: @font-size-base + 1px;
|
|
// }
|
|
|
|
// .web-cell-desc {
|
|
// // color: @text-color-secondary;
|
|
// // font-size: @font-size-base - 1px;
|
|
// // margin-top: (@padding-xs / 2);
|
|
// }
|
|
// }
|
|
</style>
|