Files
wangxiaowei f59ed2e36d 完善功能
2025-12-04 17:30:32 +08:00

798 lines
18 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view :data-theme="theme()" :class="theme() || ''" style="padding-bottom: 44rpx;">
<view class="top_head pr" :style="'background-image: url(https://xh.stnav.com/uploads/sport/ground2.png); background-size:100% auto;background-color:#F6F7F9;'">
<view class="head_top" :style="'height:' + topBarTop() + 'px;'"></view>
<view class="title" :style="topBarHeight() == 0 ? '' : 'height:' + topBarHeight() + 'px;'">
秀湖网球中心
</view>
</view>
<view :style="'background: url(https://xh.stnav.com/uploads/sport/ground2.png) no-repeat; background-size:100% auto;'">
<view v-if="thisindex == 0"><diy style="position: relative;" :diyItems="items"></diy></view>
<view class="notice">
<image style="width: 40rpx;height: 40rpx;" src="@/static/icon/notice.png" mode=""></image>
<view class="notice-txt">{{ notice.notice_title }}</view>
</view>
<!-- 预约球馆 -->
<view class="info">
<view class="title">
<image style="width: 126rpx;height: 36rpx;" src="@/static/yycg.png" mode=""></image>
<view class="title-txt">更多场馆信息立即预约</view>
</view>
<view class="ball" v-for="(item, index) in venueList" :key="index">
<view class="ball-info">
<image style="width: 690rpx;height: 320rpx;" :src="item.image" mode="aspectFit"></image>
<!-- <view class="ball-title">
<image style="width: 108rpx;height: 160rpx;" src="@/static/wq.png" mode="aspectFill"></image>
<view style="background-image: url(../../static/wqbg.png);">
<image style="width: 160rpx;height: 44rpx;" src="@/static/wqyd_txt.png" mode="aspectFill"></image>
</view>
</view> -->
</view>
<view class="ball-time">
<view class="ball-center-title">{{ item.name }}</view>
<view class="d-b-c">
<view class="reserve-time">营业时间{{ item.start_time }}-{{ item.end_time }}</view>
<view class="reserve-btn" @tap="handleToReserve(item.id, item.type_id)">立即预约</view>
</view>
</view>
</view>
</view>
<!-- 热门活动 -->
<view class="info">
<view class="title">
<image style="width: 126rpx;height: 36rpx;" src="@/static/rmhd.png" mode=""></image>
<view class="title-txt">更多精彩赛事敬请关注</view>
</view>
<view class="">
<image style="width: 690rpx;height: 292rpx; margin-top: 20rpx;" src="https://xh.stnav.com/uploads/sport/ground3.png" mode=""></image>
</view>
</view>
<!-- 联系我们 -->
<view class="contact">
<view class="d-f a-i-c">
<image style="width: 126rpx;height: 36rpx; margin-right: 18rpx;" src="@/static/lxwm.png" mode=""></image>
<image style="width: 168rpx;height: 28rpx;" src="@/static/contact_us.png" mode=""></image>
</view>
<view class="d-b-c" style="margin-top: 34rpx;">
<view>
<image style="width: 116rpx;height: 134rpx;" src="https://xh.stnav.com/uploads/sport/ground4.png" mode=""></image>
</view>
<view class="">
<view class="d-f">
<image style="width: 24rpx;height: 24rpx;margin-top: 4rpx;" src="@/static/icon/address.png" mode=""></image>
<view class="address-time">{{ company.name }}</view>
</view>
<view class="d-f" style="margin-top: 8rpx;">
<image style="width: 24rpx;height: 24rpx;margin-top: 2rpx" src="@/static/icon/time.png" mode=""></image>
<view class="address-time" style="height: 32rpx;">营业时间{{ company.start_time }}-{{ company.end_time }}</view>
</view>
</view>
<view class="d-f">
<view class="d-f d-c a-i-c" style="margin-right: 20rpx;" @tap="handleLocation">
<image style="width: 64rpx;height: 64rpx;margin-top: 2rpx" src="@/static/icon/share.png" mode=""></image>
<view class="mark-text">导航</view>
</view>
<view class="d-f d-c a-i-c" @tap="handleCall">
<image style="width: 64rpx;height: 64rpx;margin-top: 2rpx" src="@/static/icon/mobile.png" mode=""></image>
<view class="mark-text">电话</view>
</view>
</view>
</view>
</view>
</view>
<!--首页推送-->
<tabBar></tabBar>
<!-- 公告 -->
<Popup :show="noticePopup" radius="16rpx">
<view class="notice-popup">
<view class="title">公告</view>
<view class="desc">目前仅开放1-2号场地预约3-6号场地预约敬请期待</view>
<view class="btn" @tap="handleKnow(1)">我知道了</view>
</view>
</Popup>
<!-- 温馨提示 -->
<Popup :show="tipsPopup" radius="16rpx">
<view class="notice-popup">
<view class="title">温馨提示</view>
<view class="desc">
尊敬的客户感谢您的关注为提
供更全面优质的服务我们正在对手
机端相关功能进行最后的优化与升
该精彩板块即将与您见面敬请
期待
</view>
<view class="btn" @tap="handleKnow(2)">我知道了</view>
</view>
</Popup>
</view>
</template>
<script>
import Popup from '@/components/uni-popup.vue';
import diy from '@/components/diy/diy.vue';
import Homepush from './home-push/home-push.vue';
import navBar from '@/components/navBar/navBar.vue';
import uniLoadMore from '@/components/uni-load-more.vue';
import searchProduct from '@/components/searchProduct.vue';
import { BallType } from '@/common/ball.js';
export default {
components: {
diy,
Homepush,
navBar,
uniLoadMore,
searchProduct,
Popup
},
data() {
return {
BallType,
loading: true,
/*是否正在加载*/
loadding: true,
/*手机高度*/
phoneHeight: 0,
/*可滚动视图区域高度*/
scrollviewHigh: 0,
background: '',
listData: [],
indicatorDots: true,
autoplay: true,
interval: 2000,
duration: 500,
items: [],
/*收藏引导*/
is_collection: false,
/*关注*/
is_follow: '0',
/*是否首页推送*/
is_homepush: false,
/*首页推送数据*/
homepush_data: {},
target: 0,
thisindex: 0,
category_list: [],
product_list: [],
page: 1,
last_page: 0,
no_more: false,
title_name: '',
title_type: 'text',
bgcolor: '',
url: '',
jweixin: null,
toplogo: '',
titleTextColor: '',
diytop: 0,
showSearch: false,
openCategory: {
color: '#000000',
open: 0
},
noticePopup: false,
tipsPopup: false,
venueList: [], // 场馆列表
notice: '',
company: {}
};
},
watch: {
thisindex: function(n, o) {
if (n != o) {
console.log(n);
this.category_id = this.category_list[n].category_id;
this.toggleInit();
if (n != 0) {
this.getProduct();
}
}
}
},
computed: {
/*加载中状态*/
loadingType() {
if (this.loading) {
return 1;
} else {
if (this.product_list.length != 0 && this.no_more) {
return 2;
} else {
return 0;
}
}
},
scrolltop() {
let height = 80 - this.diytop * 2;
if (height <= 0) {
return 0;
} else {
return height;
}
}
},
onShow() {
this.getTabBarLinks();
},
onTabItemTap() {
//#ifdef H5
if (process.env.NODE_ENV === 'production') {
window.location.href = this.websiteUrl + this.h5_addr + '/pages/index/index';
}
//#endif
},
onLoad(e) {
let self = this;
if (e.invitation_id) {
uni.setStorageSync('invitation_id', e.invitation_id);
}
if (e.referee_id) {
uni.setStorageSync('referee_id', e.referee_id);
}
//#ifdef H5
if (this.isWeixin()) {
this.url = window.location.href;
}
//#endif
this.getData();
this.getList();
this.getTabbar();
// 获取经纬度
if (!uni.getStorageSync('longitude') || !uni.getStorageSync('latitude')) {
uni.getLocation({
type: 'wgs84',
success(res) {
uni.setStorageSync('longitude', res.longitude);
uni.setStorageSync('latitude', res.latitude);
},
fail() {
uni.showToast({
title: '获取定位失败,请点击右下角按钮打开定位权限',
duration: 2000,
icon:"none"
});
},
})
}
},
onPullDownRefresh() {
if (this.thisindex == 0) {
this.getData();
} else {
this.toggleInit();
this.getProduct();
}
},
onReachBottom() {
this.scrolltolowerFunc();
console.log('到底了');
},
mounted() {
this.init();
},
methods: {
/*初始化*/
init() {
let _this = this;
uni.getSystemInfo({
success(res) {
_this.phoneHeight = res.windowHeight;
let view = uni.createSelectorQuery().select('.top_head');
view.boundingClientRect(data => {
let h = _this.phoneHeight - data.height;
_this.scrollviewHigh = h;
}).exec();
}
});
},
onRefresh() {},
/*获取首页分类*/
getData() {
let self = this;
uni.showLoading({
title: '加载中'
});
// 获取场馆列表
self._post(
'ground.ground/groundLists',
{
app_id: self.getAppId()
},
function(res) {
if (res.code) {
self.venueList = res.data.lists
}
}
)
// 获取公告
self._post(
'home.notice/noticeLists',
{
app_id: self.getAppId()
},
function(res) {
if (res.code) {
self.notice = res.data.lists[0]
console.log("🚀 ~ self.notice :", self.notice )
}
}
)
// 公司信息
self._post(
'home.index/company',
{
app_id: self.getAppId()
},
function(res) {
if (res.code) {
self.company = res.data.lists
}
}
)
self._get(
'index/index',
{
url: self.url
},
function(res) {
self.listData = res.data.list;
self.background = res.data.background;
self.items = res.data.items;
self.title_name = res.data.page.params.title;
self.bgcolor = res.data.page.style.titleBackgroundColor;
self.setPage(res.data.page);
self.toplogo = res.data.page.params.toplogo;
self.title_type = res.data.page.params.title_type;
self.titleTextColor = res.data.page.style.titleTextColor;
self.openCategory = res.data.page.category;
//弹出收藏
// #ifdef MP-WEIXIN
let isFirst = uni.getStorageSync('isFirst');
if (isFirst == '' && res.data.setting.collection.status == '1') {
self.is_collection = true;
uni.setStorageSync('isFirst', 1);
}
self.is_follow = res.data.setting.officia.status;
// #endif
// 首页推送
let homepush_name = uni.getStorageSync('homepush_name');
if (res.data.setting.homepush.is_open && homepush_name != res.data.setting.homepush.name) {
self.homepush_data = res.data.setting.homepush;
self.is_homepush = true;
self.is_homepush = true;
}
// 配置微信扫一扫参数
//#ifdef H5
if (self.url != '') {
self.jweixin = self.configWxScan(res.data.signPackage);
let params = {};
self.configWx(res.data.share.signPackage, res.data.share.shareParams, params);
}
//#endif
uni.hideLoading();
self.loadding = false;
uni.stopPullDownRefresh();
}
);
},
/*获取数据*/
getList() {
let self = this;
self._get('product.category/index', {}, function(res) {
self.category_list = res.data.list;
let fistIndex = {
name: '推荐',
category_id: '0'
};
self.category_list.unshift(fistIndex);
});
},
/*获取数据*/
getProduct() {
let self = this;
let page = self.page;
self.loading = true;
self._get(
'product.product/lists',
{
page: page || 1,
category_id: self.category_id,
search: '',
sortType: 'all',
sortPrice: 0,
list_rows: 20
},
function(res) {
self.loading = false;
uni.stopPullDownRefresh();
self.product_list = self.product_list.concat(res.data.list.data);
self.last_page = res.data.list.last_page;
if (res.data.list.last_page <= 1) {
self.no_more = true;
}
// #ifdef MP
if (page >= 9) {
self.no_more = true;
}
// #endif
}
);
},
/*可滚动视图区域到底触发*/
scrolltolowerFunc() {
let self = this;
if (self.page < self.last_page) {
self.page++;
self.getProduct();
}
self.no_more = true;
},
/*设置页面*/
setPage(page) {
uni.setNavigationBarTitle({
title: page.params.name
});
let colors = '#000000';
if (page.style.titleTextColor == 'white') {
//字母要小写
colors = '#ffffff';
}
uni.setNavigationBarColor({
frontColor: colors,
backgroundColor: '#ffffff'
});
},
// 滑動切换触发的事件
toggle(e) {
let index = e.detail.current;
this.target = index;
this.category_id = this.category_list[index].category_id;
this.toggleInit();
if (index != 0) {
this.getProduct();
}
},
toggleInit() {
this.page = 1;
this.last_page = 0;
this.no_more = false;
this.product_list = [];
},
scroll(e) {
this.diytop = e.detail.scrollTop;
},
//点击nav控制下面的展示
setIndex(e) {
this.thisindex = e;
},
/*分享当前页面*/
onShareAppMessage() {
let self = this;
return {
title: self.title_name,
path: '/pages/index/index?' + self.getShareUrlParams()
};
},
/* 禁止手动滑动 */
stopTouchMove() {
return true;
},
/*扫一扫核销*/
scanQrcode: function() {
let self = this;
//#ifdef H5
// 只允许通过相机扫码
self.jweixin.scanQRCode({
needResult: 1,
scanType: ['qrCode', 'barCode'],
success: function(res) {
self.gotoPage('/pages/store/clerkorder?order_no=' + res.resultStr);
},
error: function(res) {
uni.showToast({
title: '扫码失败,请重试'
});
}
});
//#endif
//#ifndef H5
// 只允许通过相机扫码
uni.scanCode({
onlyFromCamera: true,
success: function(res) {
if (res.errMsg == 'scanCode:ok') {
self.gotoPage('/pages/store/clerkorder?order_no=' + res.result);
} else {
uni.showToast({
title: '扫码失败,请重试'
});
}
}
});
//#endif
},
/* 关闭搜索 */
closeSearch() {
this.showSearch = false;
},
getTabbar() {
let self = this;
if (!uni.getStorageSync('TabBar').is_auto || uni.getStorageSync('TabBar').is_auto == 0) {
let theme = uni.getStorageSync('theme');
if (theme) {
let color = ['#ff5704', '#19ad57', '#ffcc00', '#1774ff', '#e4e4e4', '#c8ba97', '#623ceb'];
uni.setTabBarStyle({
color: '#333333',
selectedColor: color[theme]
});
uni.setTabBarItem({
index: 0,
text: '首页',
iconPath: 'static/tabbar/home.png',
selectedIconPath: 'static/tabbar/home_' + theme + '.png'
});
uni.setTabBarItem({
index: 1,
text: '分类',
iconPath: 'static/tabbar/category.png',
selectedIconPath: 'static/tabbar/category_' + theme + '.png'
});
uni.setTabBarItem({
index: 2,
text: '购物车',
iconPath: 'static/tabbar/cart.png',
selectedIconPath: 'static/tabbar/cart_' + theme + '.png'
});
uni.setTabBarItem({
index: 3,
text: '我的',
iconPath: 'static/tabbar/user.png',
selectedIconPath: 'static/tabbar/user_' + theme + '.png'
});
} else {
setTimeout(function() {
self.getTabbar();
}, 3000);
}
}
},
// 处理弹窗确认
handleKnow(type) {
if (type == 1) {
// 公告弹窗关闭
this.noticePopup = false;
} else if (type == 2) {
// 温馨提示关闭
this.tipsPopup = false;
}
},
// 处理导航
handleLocation() {
uni.openLocation({
latitude: this.company.latitude,
longitude: this.company.longitude,
name: this.company.name,
address: this.company.address,
scale: 18
});
},
// 处理拨打电话
handleCall() {
uni.makePhoneCall({
phoneNumber: this.company.phone
});
},
// 场馆预约
handleToReserve(id, typeId) {
uni.navigateTo({
url: `/bundle/reserve/details?id=${id}&typeId=${typeId}`
});
}
}
};
</script>
<style lang="scss">
page {
background-color: $xh-bg;
}
.top_head {
line-height: 30px;
z-index: 1;
padding-left: 26rpx;
position: sticky;
top: 0;
left: 0;
z-index: 100;
padding-bottom: 20rpx;
}
.head_top {
width: 100%;
height: var(--status-bar-height);
}
.title {
font-weight: bold;
font-size: 36rpx;
color: #303133;
line-height: 50rpx;
text-align: center;
}
.notice {
margin: 0 30rpx;
display: flex;
align-items: center;
.notice-txt {
flex: 1;
font-weight: 400;
font-size: 26rpx;
color: #303133;
line-height: 36rpx;
margin-left: 10rpx;
text-align: left;
}
}
.info {
margin: 40rpx 30rpx 0;
.title {
display: flex;
align-items: center;
}
.title-txt {
flex: 1;
font-weight: 400;
font-size: 22rpx;
color: #818CA9;
line-height: 32rpx;
margin-left: 16rpx;
text-align: left;
}
.ball {
margin-top: 28rpx;
width: 690rpx;
.ball-info {
position: relative;
.ball-title {
position: absolute;
bottom: 0;
left: 10rpx;
display: flex;
align-items: center;
& > view {
position: absolute;
left: 46rpx;
bottom: 28rpx;
display: flex;
justify-content: center;
align-items: center;
background-size: 100% auto;
width: 300rpx;
height: 60rpx;
font-size: 32rpx;
font-weight: 400;
}
}
}
.ball-time {
background-color: #fff;
border-radius: 0 0 10rpx 10rpx;
padding: 30rpx 28rpx 26rpx;
.ball-center-title {
font-weight: bold;
font-size: 30rpx;
color: #303133;
line-height: 42rpx;
}
.reserve-time {
font-weight: 400;
font-size: 22rpx;
color: #606266;
line-height: 32rpx;
}
.reserve-btn {
width: 140rpx;
height: 52rpx;
border-radius: 10rpx;
background-color: #365A9A;
font-weight: 400;
font-size: 28rpx;
color: #FFFFFF;
line-height: 52rpx;
text-align: center;
}
}
}
}
.contact {
margin: 20rpx 30rpx;
background-color: #fff;
border-radius: 10rpx;
padding: 24rpx 28rpx 0;
.address-time {
width: 272rpx;
height: 64rpx;
font-weight: 400;
font-size: 22rpx;
color: #606266;
line-height: 30rpx;
margin-left: 4rpx;
}
.mark-text {
font-weight: 400;
font-size: 24rpx;
color: #606266;
line-height: 34rpx;
}
}
.notice-popup {
padding-bottom: 20rpx;
.title {
font-size: 36rpx;
color: #303133;
line-height: 50rpx;
text-align: center;
}
.desc {
margin-top: 48rpx;
font-weight: 400;
font-size: 32rpx;
color: #303133;
line-height: 52rpx;
text-align: center;
}
.btn {
font-size: 32rpx;
background: #365A9A;
border-radius: 8rpx;
margin: 92rpx 44rpx 0;
height: 80rpx;
line-height: 80rpx;
text-align: center;
color: #fff;
}
}
</style>