wangyifang
/
wx-dangyuanjiaoyujidi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

finish mini program to h5

Browse Source
master
linyongLynn 5 days ago
parent ff204a376d
commit da8324adc8
10 changed files with 817 additions and 213 deletions
Show Stats Download Patch File Download Diff File

2
main.js
Unescape View File

@ -35,4 +35,4 @@ moment.locale('zh-cn', {
weekdays: '周日_周一_周二_周三_周四_周五_周六'.split('_')
})
Vue.prototype.util = util;
Vue.prototype.$moment = moment;
Vue.prototype.$moment = moment;

9
manifest.json
Unescape View File

@ -1,6 +1,6 @@
{
"name" : "wx-dangyuanjiaoyujidi",
"appid" : "__UNI__FC384E5",
"appid" : "__UNI__6DCA2D0",
"description" : "",
"versionName" : "1.0.0",
"versionCode" : "100",
@ -75,5 +75,10 @@
"uniStatistics" : {
"enable" : false
},
"vueVersion" : "2"
"vueVersion" : "2",
"h5" : {
"router" : {
"base" : "h5"
}
}
}

43
pages/activity/book.vue
Unescape View File

@ -232,10 +232,16 @@
<u-popup :show="showAuthorization" closeable mode="bottom" @close="closePhone" :round="10">
<view class="box">
<view class="box-title" style="text-align: center;padding: 20rpx 0;font-size: 32rpx;">
请授权您的手机号
{{isH5 ? '请输入您的手机号' : '请授权您的手机号'}}
</view>
<view class="box-content" style="padding: 20px;">
<u-button type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">授权手机号
<!-- H5环境：手动输入手机号 -->
<view v-if="isH5">
<u-input v-model="inputMobile" placeholder="请输入手机号" type="number" maxlength="11"></u-input>
<u-button type="primary" @click="confirmMobile" style="margin-top: 20rpx;">确认</u-button>
</view>
<!-- 小程序环境：微信授权 -->
<u-button v-else type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">授权手机号
</u-button>
</view>
</view>
@ -272,6 +278,8 @@
common_user: [],
minTotal: 1,
maxTotal: 1,
isH5: false,
inputMobile: '',
form: {
unit: "",
leader: "",
@ -360,6 +368,9 @@
},
onShow() {
var that = this;
// 检测运行环境
this.isH5 = typeof window !== 'undefined' && window.location
that.numberlist = {};
wx.getStorage({
key: 'activityinfo',
@ -442,6 +453,34 @@
closePhone() {
this.showAuthorization = false
},
// H5环境：确认手机号
confirmMobile() {
if (!this.inputMobile) {
uni.showToast({ title: '请输入手机号', icon: 'none' })
return
}
if (!/^1[3-9]\d{9}$/.test(this.inputMobile)) {
uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
return
}
var that = this;
this.util.request({
api: '/api/mobile/user/save',
method: 'POST',
data: {
mobile: this.inputMobile
},
utilSuccess: function(res) {
that.form.mobile = that.inputMobile;
that.showAuthorization = false
},
utilFail: function(res) {
uni.showToast({ title: '手机号保存失败', icon: 'none' })
}
})
},
// 小程序环境：微信授权获取手机号
getPhoneNumber(e) {
var that = this;
this.util.request({

116
pages/activity/index.vue
Unescape View File

@ -40,16 +40,16 @@
<view style="display: inline-block;">
<text class="icon-shijian iconfont"></text>活动场次：
</view>
<view style="display: flex;flex-direction: column;">
<block v-for="(k,index) in item.numbers">
<view v-if="index<2" class="tag tag_green activityBox_btn activityBox_time" style="margin-top: -5px;margin-bottom: 10px;">
<text style="margin-right:12rpx">
{{timeFormat(k.start_time,"MM月DD日")}}
</text>
<text>
{{getHm(k.start_time)}}-{{getHm(k.end_time)}}
</text>
</view>
<view style="display: flex;flex-direction: column;">
<block v-for="(k,index) in item.numbers">
<view v-if="index<2" class="tag tag_green activityBox_btn activityBox_time" style="margin-top: -5px;margin-bottom: 10px;">
<text style="margin-right:12rpx">
{{timeFormat(k.start_time,"MM月DD日")}}
</text>
<text>
{{getHm(k.start_time)}}-{{getHm(k.end_time)}}
</text>
</view>
</block>
</view>
@ -96,19 +96,57 @@
list: [],
latitude: "",
longitude: "",
isloading: true
isloading: true,
locationError: false // 定位是否失败
}
},
onLoad() {
var that = this;
wx.getLocation({
success(res) {
console.log(res)
that.latitude = res.latitude;
that.longitude = res.longitude;
// 检测运行环境
const isH5 = typeof window !== 'undefined' && window.location
if (isH5) {
// H5环境：使用浏览器定位API
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function(position) {
that.latitude = position.coords.latitude;
that.longitude = position.coords.longitude;
console.log('定位成功:', that.latitude, that.longitude);
that.loadActivity()
},
function(error) {
console.log('定位失败:', error);
that.locationError = true;
// 定位失败时仍然加载活动列表
that.loadActivity()
},
{
enableHighAccuracy: true,
timeout: 15000, // 增加超时时间到15秒
maximumAge: 300000 // 缓存5分钟
}
);
} else {
console.log('浏览器不支持定位');
that.loadActivity()
}
})
} else {
// 小程序环境：使用wx.getLocation
wx.getLocation({
success(res) {
console.log(res)
that.latitude = res.latitude;
that.longitude = res.longitude;
that.loadActivity()
},
fail(err) {
console.log('定位失败:', err);
that.loadActivity()
}
})
}
},
onShareAppMessage() {
return this.util.shareInfo
@ -129,17 +167,25 @@
})
},
loadActivity() {
console.log("aaa")
console.log("加载活动列表")
var that = this;
var nt = new Date();
that.isloading = true;
// 构建请求参数
var requestData = {
page_size: 100
};
// 如果有定位信息，添加到请求参数中
if (that.latitude && that.longitude) {
requestData.latitude = that.latitude;
requestData.longitude = that.longitude;
}
this.util.request({
api: '/api/mobile/activity/index',
data: {
latitude: that.latitude,
longitude: that.longitude,
page_size: 100
},
data: requestData,
utilSuccess: function(res) {
for (var mod of res.data) {
mod.isCanBook = that.$moment(nt).isBefore(mod.end_plan);
@ -148,7 +194,7 @@
that.isloading = false;
},
utilFail: function(res) {
that.isloading = false;
}
})
},
@ -186,16 +232,16 @@
background: #FCF6E3;
border: 2rpx solid #EF9525;
border-radius: 20rpx;
color: #4E4E4E;
color: #4E4E4E;
margin-right: 10rpx;
}
.activityMore{
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 400;
display: flex;
color: #EF9525;
flex-direction: column-reverse;
margin-left:10rpx
}
</style>
.activityMore{
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 400;
display: flex;
color: #EF9525;
flex-direction: column-reverse;
margin-left:10rpx
}
</style>

70
pages/index/index.vue
Unescape View File

@ -22,7 +22,6 @@
<view class="box-col" @click="handleBook(3)">
<image src="../../static/img/index_icon_3.png" class="box-body-icon"></image>
</view>
</u-row>
</view>
</view>
</view>
@ -148,10 +147,16 @@
<u-popup :show="showAuthorization" closeable mode="bottom" @close="closePhone" :round="10">
<view class="box">
<view class="box-title" style="text-align: center;padding: 20rpx 0;font-size: 32rpx;">
请授权您的手机号
{{isH5 ? '请输入您的手机号' : '请授权您的手机号'}}
</view>
<view class="box-content" style="padding: 20px;">
<u-button type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">授权手机号
<!-- H5环境：手动输入手机号 -->
<view v-if="isH5">
<u-input v-model="inputMobile" placeholder="请输入手机号" type="number" maxlength="11"></u-input>
<u-button type="primary" @click="confirmMobile" style="margin-top: 20rpx;">确认</u-button>
</view>
<!-- 小程序环境：微信授权 -->
<u-button v-else type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">授权手机号
</u-button>
</view>
</view>
@ -184,13 +189,18 @@
listNotice: [],
currentNotice: {},
showAuthorization: false,
openType: 1
openType: 1,
isH5: false,
inputMobile: ''
}
},
onShareAppMessage() {
return this.util.shareInfo
},
onLoad() {
// 检测运行环境
this.isH5 = typeof window !== 'undefined' && window.location
this.loadInfo();
this.loadNotice();
},
@ -213,6 +223,36 @@
closePhone() {
this.showAuthorization = false
},
// H5环境：确认手机号
confirmMobile() {
if (!this.inputMobile) {
uni.showToast({ title: '请输入手机号', icon: 'none' })
return
}
if (!/^1[3-9]\d{9}$/.test(this.inputMobile)) {
uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
return
}
var that = this;
this.util.request({
api: '/api/mobile/user/save',
method: 'POST',
data: {
mobile: this.inputMobile
},
utilSuccess: function(res) {
that.showAuthorization = false
that.util.getUserInfo(function(r) {
that.checkUser();
}, true)
},
utilFail: function(res) {
uni.showToast({ title: '手机号保存失败', icon: 'none' })
}
})
},
// 小程序环境：微信授权获取手机号
getPhoneNumber(e) {
var that = this;
this.util.request({
@ -605,15 +645,15 @@
.richp {
margin-bottom: 10rpx;
}
.book-box-row-timeitem {
display: flex;
align-items: center;
flex-wrap: wrap;
width: 32%;
padding: 19rpx 21rpx!important;
}
.book-box-row-timeitem-txt {
width:100%
}
</style>
.book-box-row-timeitem {
display: flex;
align-items: center;
flex-wrap: wrap;
width: 32%;
padding: 19rpx 21rpx!important;
}
.book-box-row-timeitem-txt {
width:100%
}
</style>

107
pages/map/map.vue
Unescape View File

@ -1,6 +1,18 @@
<template>
<view>
<map style="width: 100%; height: 100vh;position: relative;" @markertap="markertap" :latitude="info.latitude"
<!-- H5环境：嵌入iframe地图 -->
<view v-if="isH5" class="h5-map-container">
<iframe
:src="getMapUrl()"
width="100%"
height="100vh"
frameborder="0"
class="h5-map-iframe">
</iframe>
</view>
<!-- 小程序环境：使用uni-app地图组件 -->
<map v-else style="width: 100%; height: 100vh;position: relative;" @markertap="markertap" :latitude="info.latitude"
:longitude="info.longitude" :markers="covers"></map>
</view>
</template>
@ -11,27 +23,58 @@
return {
info: {},
covers: [],
isH5: false // 是否为H5环境
}
},
onLoad() {
this.openlocation();
},
onShareAppMessage() {
return this.util.shareInfo
// 检测运行环境
this.isH5 = typeof window !== 'undefined' && window.location
this.loadInfo();
},
onShareAppMessage() {
return this.util.shareInfo
},
methods: {
// H5环境：生成地图URL
getMapUrl() {
if (this.info.latitude && this.info.longitude) {
// 使用真实的展馆坐标
const url = `https://apis.map.qq.com/uri/v1/marker?marker=coord:${this.info.latitude},${this.info.longitude};title:${encodeURIComponent(this.info.name || '展馆')};addr:${encodeURIComponent(this.info.address || '')}&referer=myapp`;
return url;
}
// 如果没有坐标数据，使用默认坐标
return 'https://apis.map.qq.com/uri/v1/marker?marker=coord:31.299893,120.626022;title:苏州革命博物馆;addr:苏州市姑苏区&referer=myapp';
},
markertap() {
this.openlocation();
},
openlocation() {
this.loadInfo(function(res) {
if (this.isH5) {
// H5环境：使用微信JS-SDK或浏览器打开地图
if (typeof wx !== 'undefined' && wx.openLocation) {
// 微信JS-SDK
wx.openLocation({
latitude: this.info.latitude,
longitude: this.info.longitude,
name: this.info.name,
address: this.info.address,
scale: 14
});
} else {
// 降级方案：使用腾讯地图
const mapUrl = `https://apis.map.qq.com/uri/v1/marker?marker=coord:${this.info.latitude},${this.info.longitude};title:${encodeURIComponent(this.info.name)};addr:${encodeURIComponent(this.info.address)}&referer=myapp`;
window.open(mapUrl, '_blank');
}
} else {
// 小程序环境：使用uni.openLocation
uni.openLocation({
latitude: res.latitude,
longitude: res.longitude,
name: res.name,
address: res.address
latitude: this.info.latitude,
longitude: this.info.longitude,
name: this.info.name,
address: this.info.address
});
})
}
},
loadInfo(cb) {
var that = this;
@ -41,25 +84,45 @@
res.latitude = parseFloat(res.latitude);
res.longitude = parseFloat(res.longitude);
that.info = res;
that.covers.push({
latitude: res.latitude,
longitude: res.longitude,
width: 70,
height: 70,
iconPath: '/static/img/location.png'
});
cb(res);
// 只有在小程序环境中才添加地图标记
if (!that.isH5) {
that.covers.push({
latitude: res.latitude,
longitude: res.longitude,
width: 70,
height: 70,
iconPath: '/static/img/location.png'
});
}
// 如果有回调函数则执行
if (cb) {
cb(res);
}
},
utilFail: function(res) {
}
})
},
}
}
</script>
<style>
</style>
/* H5地图iframe容器样式 */
.h5-map-container {
width: 100%;
height: 100vh;
position: relative;
background: #f5f5f5;
}
.h5-map-iframe {
width: 100%;
height: 100%;
border: none;
display: block;
}
</style>

180
pages/mine/index.vue
Unescape View File

@ -69,13 +69,53 @@
</view>
</view>
<!-- H5和小程序环境判断的授权弹窗 -->
<u-popup :show="showAuthorization" mode="bottom" @close="closeInfo" :round="10">
<view class="box">
<view class="box-title" style="text-align: center;padding: 20rpx 0;font-size: 32rpx;">
请授权您的微信头像和昵称
{{isH5 ? '请完善您的个人信息' : '请授权您的微信头像和昵称'}}
</view>
<view class="box-content" style="padding: 20px;">
<u-button type="primary" @click="getUserProfile">微信用户一键登录</u-button>
<!-- H5环境：直接显示编辑表单 -->
<view v-if="isH5">
<u-form labelPosition="top" :model="form">
<u-form-item label="昵称" prop="name" labelWidth="60px" required>
<u-input v-model="form.name" placeholder="请输入昵称"></u-input>
</u-form-item>
<u-form-item label="头像" prop="avatar" labelWidth="60px">
<view class="avatar-upload">
<u-avatar :src="form.avatar" size="80" @click="chooseAvatar"></u-avatar>
<text class="avatar-tip">点击上传头像</text>
</view>
</u-form-item>
</u-form>
<u-button type="primary" @click="tosubmit">确认提交</u-button>
</view>
<!-- 小程序环境：微信一键授权 -->
<u-button v-else type="primary" @click="getUserProfile">微信用户一键登录</u-button>
</view>
</view>
</u-popup>
<!-- 小程序环境：确认编辑弹窗 -->
<u-popup :show="showform" mode="bottom" @close="closeForm" :round="10" v-if="!isH5">
<view class="box">
<view class="box-title" style="text-align: center;padding: 20rpx 0;font-size: 32rpx;">
请确认编辑您的微信头像和昵称
</view>
<view class="box-content" style="padding: 20px;">
<u-form labelPosition="top" :model="form">
<u-form-item label="昵称" prop="name" labelWidth="60px" required>
<u-input v-model="form.name" placeholder="请输入昵称"></u-input>
</u-form-item>
<u-form-item label="头像" prop="avatar" labelWidth="60px">
<view class="avatar-upload">
<u-avatar :src="form.avatar" size="80" @click="chooseAvatar"></u-avatar>
<text class="avatar-tip">点击上传头像</text>
</view>
</u-form-item>
</u-form>
<u-button type="primary" @click="tosubmit">确认提交</u-button>
</view>
</view>
</u-popup>
@ -88,26 +128,45 @@
return {
topimg: "",
info: {},
showAuthorization: false
showAuthorization: false,
showform: false,
action: '',
otherData: {
token: ''
},
avatarList: [],
form: {
name: '',
avatar: ''
},
isH5: false
}
},
onReady() {
this.topimg = this.util.HOST + "/top_bg.png";
},
onShow() {
var that = this;
// 检测运行环境
this.isH5 = typeof window !== 'undefined' && window.location
this.action = this.util.HOST + "/api/mobile/upload-file"
this.otherData.token = uni.getStorageSync("userInfo_token").token;
this.loadInfo(function(res) {
if (that.util.isNull(res.headimgurl) || that.util.isNull(res.nickname)) {
that.showAuthorization = true;
} else {
if (res.headimgurl || res.nickname) {
that.showAuthorization = false;
} else {
that.showAuthorization = true;
}
});
},
methods: {
closeInfo() {
that.showAuthorization = false;
this.showAuthorization = false;
},
closeForm() {
this.showform = false
},
loadInfo(cb) {
var that = this;
@ -122,22 +181,83 @@
getUserProfile() {
var that = this;
this.util.getUserProfile((res) => {
console.log(res)
that.util.request({
api: '/api/mobile/user/save',
method: 'POST',
data: {
headimgurl: res.avatarUrl,
nickname: res.nickName
},
utilSuccess: function(r) {
that.loadInfo(function() {
that.showAuthorization = false;
})
}
console.log("res", res)
that.form.name = res.nickName
that.form.avatar = res.avatarUrl
that.avatarList.push({
type: 0,
url: res.avatarUrl
})
that.showAuthorization = false
// 小程序环境：显示确认编辑弹窗
// H5环境：直接提交（因为已经在第一个弹窗中编辑了）
if (that.isH5) {
that.tosubmit()
} else {
that.showform = true
}
})
},
chooseAvatar() {
var that = this;
uni.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: function(res) {
const tempFilePath = res.tempFilePaths[0];
// 上传图片到服务器
uni.uploadFile({
url: that.action,
filePath: tempFilePath,
name: 'file',
formData: that.otherData,
success: function(uploadRes) {
console.log("upload success", uploadRes)
let data = JSON.parse(uploadRes.data)
that.form.avatar = data.url
uni.showToast({
title: "上传成功",
icon: "success"
})
},
fail: function(err) {
console.log("upload fail", err)
uni.showToast({
title: "上传失败",
icon: "none"
})
}
})
}
})
},
tosubmit() {
if(this.util.isNull(this.form.name)){
uni.showToast({
title: "请填写昵称",
icon: "none"
})
return
}
var that = this
that.util.request({
api: '/api/mobile/user/save',
method: 'POST',
data: {
headimgurl: that.form.avatar,
nickname: that.form.name
},
utilSuccess: function(r) {
that.showform = false;
that.showAuthorization = false;
that.loadInfo(function() {
uni.showToast({
title: "保存成功",
icon: "success"
})
})
}
})
},
toPage(type) {
@ -296,4 +416,16 @@
.list-item-lefttxt {
margin-left: 41rpx;
}
</style>
.avatar-upload {
display: flex;
flex-direction: column;
align-items: center;
gap: 10rpx;
}
.avatar-tip {
font-size: 24rpx;
color: #999;
}
</style>

247
pages/park/index.vue
Unescape View File

@ -2,7 +2,114 @@
<view>
<view class="page-body">
<view class="page-section page-section-gap">
<map style="width: 100%; height: 100vh;position: relative;" :latitude="latitude" :longitude="longitude"
<!-- H5环境：嵌入iframe地图 -->
<view v-if="isH5" class="h5-map-container">
<iframe
:src="getMapUrl()"
width="100%"
height="100vh"
frameborder="0"
class="h5-map-iframe">
</iframe>
<view class="book-box">
<view class="activityBox-content flex-col">
<view class="activityBox-row" style="margin-bottom: 56rpx;">
<text class="activityBox-title">{{info.name||""}}</text>
</view>
<view class="activityBox-row">
<text class="icon-shijian iconfont"></text>
<text>可入场时间段：{{info.start_time||""}}-{{info.end_time||""}}</text>
</view>
<view class="activityBox-row">
<text class="icon-huodong iconfont"></text>
<text>地址：{{info.address||""}}</text>
</view>
<view class="activityBox-row flex-row align-center" style="margin-bottom: 0rpx;"
@click="openlocation">
<text class="icon-ditu-dibiao iconfont"></text>
<text>距离：{{distance||"0"}}km</text>
<view class="tomap">
<text class="icon-daohang1 iconfont" style="margin-right: 0;"></text>
</view>
</view>
<view class="parkbox">
<view class="parkbox-title">可预约车位</view>
<view class="parkbox-content flex-row justify-around">
<view class="parkbox-item flex-row align-center" style="margin-right: 10rpx;padding: 28rpx 20rpx;"
@click="handleSelectPark(2)" :class="(currentPark==2?'parkbox-item-on':'')"
v-if="remain_big_park>0">
<view class="parkbox-item-status" v-if="currentPark==2">
<u-icon name="checkmark" color="#fff" size="20rpx"></u-icon>
</view>
<text class="iconfont icon-tingchechang1" style="font-size: 28rpx;"></text>
<view>
<!-- <text>大中(09:00-12:00)：{{remain_big_park}}</text> -->
<text>大中型车</text>
</view>
</view>
<view class="parkbox-item flex-col align-center"
:class="(currentPark==1?'parkbox-item-on':'')" @click="handleSelectPark(1)"
style="margin-right: 10rpx;" v-if="remain_small_park>0">
<view class="parkbox-item-status" v-if="currentPark==1">
<u-icon name="checkmark" color="#fff" size="20rpx"></u-icon>
</view>
<view class="flex-row align-center">
<text class="iconfont icon-tingchechang1"
style="font-size: 28rpx;"></text><text>小车</text>
</view>
<!-- <text style="font-size: 24rpx;color: #828282;">（充电桩空闲0）</text> -->
</view>
<!-- <view class="parkbox-item flex-row align-center" style="margin-right: 10rpx;padding: 28rpx 20rpx;"
@click="handleSelectPark(4)" :class="(currentPark==4?'parkbox-item-on':'')"
v-if="remain_big_park2>0">
<view class="parkbox-item-status" v-if="currentPark==4">
<u-icon name="checkmark" color="#fff" size="20rpx"></u-icon>
</view>
<text class="iconfont icon-tingchechang1" style="font-size: 28rpx;"></text>
<view>
<text>大中(13:00-16:00)：{{remain_big_park2}}</text>
</view>
</view> -->
<view class="parkbox-item flex-row align-center" style=""
@click="handleSelectPark(3)" :class="(currentPark==3?'parkbox-item-on':'')"
v-if="remain_special_park>0">
<view class="parkbox-item-status" v-if="currentPark==3">
<u-icon name="checkmark" color="#fff" size="20rpx"></u-icon>
</view>
<text class="iconfont icon-tingchechang1" style="font-size: 28rpx;"></text>
<view>
<!-- <text>残疾人车位：{{remain_special_park}}</text> -->
<text>残疾人车位</text>
</view>
</view>
<view class="parkbox-item flex-row align-center" style=""
v-if="remain_special_park<=0&&remain_big_park<=0&&remain_small_park<=0">
<text class="iconfont icon-tingchechang1" style="font-size: 28rpx;"></text>
<view>
<text>暂无可选停车位</text>
</view>
</view>
</view>
</view>
<!-- <view class="activityBox-row" style="margin-top: 20rpx;color: #EF9525;"
@click="showSelectorder=true">
<text>选择信息：{{selectInfo.info||"暂未选择"}}</text>
</view> -->
</view>
</view>
<view class="footer">
<u-button type="primary" :disabled="btnDisabled" @click="tobook">预约</u-button>
</view>
</view>
<!-- 小程序环境：使用uni-app地图组件 -->
<map v-else style="width: 100%; height: 100vh;position: relative;" :latitude="latitude" :longitude="longitude"
:markers="covers">
<view class="book-box">
<view class="activityBox-content flex-col">
@ -37,7 +144,7 @@
</view>
<text class="iconfont icon-tingchechang1" style="font-size: 28rpx;"></text>
<view>
<!-- <text>大中(09:00-12:00)：{{remain_big_park}}</text> -->
<!-- <text>大中(09:00-12:00)：{{remain_big_park}}</text> -->
<text>大中型车</text>
</view>
</view>
@ -73,7 +180,7 @@
</view>
<text class="iconfont icon-tingchechang1" style="font-size: 28rpx;"></text>
<view>
<!-- <text>残疾人车位：{{remain_special_park}}</text> -->
<!-- <text>残疾人车位：{{remain_special_park}}</text> -->
<text>残疾人车位</text>
</view>
</view>
@ -177,34 +284,72 @@
remain_big_park: 0,
remain_small_park: 0,
remain_special_park: 0,
remain_big_park2: 0
remain_big_park2: 0,
isH5: false // 是否为H5环境
}
},
onLoad() {
var that = this;
var that = this;
// 检测运行环境
this.isH5 = typeof window !== 'undefined' && window.location
this.loadInfo();
wx.getLocation({
success(res) {
that.userlatitude = res.latitude;
that.userlongitude = res.longitude;
that.btnDisabled = false;
// that.showSelectorder = true;
// that.loadOrder(function(res) {
// that.loadactivityOrder(function(r) {
// if (res.length + r.length == 0) {
// that.util.toast("您需要预约参观或者预约活动才可以停车");
// that.btnDisabled = true;
// } else {
// that.btnDisabled = false;
// that.showSelectorder = true;
// }
// })
// });
// 根据环境选择定位方式
if (this.isH5) {
// H5环境：使用浏览器定位API
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function(position) {
that.userlatitude = position.coords.latitude;
that.userlongitude = position.coords.longitude;
console.log('H5定位成功:', that.userlatitude, that.userlongitude);
that.btnDisabled = false;
},
function(error) {
console.log('H5定位失败:', error);
// 定位失败时使用默认位置
that.btnDisabled = false;
},
{
enableHighAccuracy: true,
timeout: 15000,
maximumAge: 300000
}
);
} else {
console.log('浏览器不支持定位');
that.btnDisabled = false;
}
})
} else {
// 小程序环境：使用wx.getLocation
wx.getLocation({
success(res) {
that.userlatitude = res.latitude;
that.userlongitude = res.longitude;
console.log('小程序定位成功:', that.userlatitude, that.userlongitude);
that.btnDisabled = false;
},
fail(err) {
console.log('小程序定位失败:', err);
// 定位失败时使用默认位置
that.btnDisabled = false;
}
})
}
},
methods: {
// H5环境：生成地图URL
getMapUrl() {
if (this.info.latitude && this.info.longitude) {
// 使用真实的停车场坐标
const url = `https://apis.map.qq.com/uri/v1/marker?marker=coord:${this.info.latitude},${this.info.longitude};title:${encodeURIComponent(this.info.name || '停车场')};addr:${encodeURIComponent(this.info.address || '')}&referer=myapp`;
return url;
}
// 如果没有坐标数据，使用默认坐标
return 'https://apis.map.qq.com/uri/v1/marker?marker=coord:31.299893,120.626022;title:苏州革命博物馆停车场;addr:苏州市姑苏区&referer=myapp';
},
handleConfirmOrder() {
if (this.selectInfo.orderid === 0) {
this.util.toast("请选择预约的活动或者预约的参观");
@ -250,7 +395,7 @@
this.util.request({
api: '/api/mobile/user/my-visit-order',
data: {
status: 1,
status: 1,
not_expire:1
},
utilSuccess: function(res) {
@ -270,7 +415,7 @@
this.util.request({
api: '/api/mobile/user/my-activity-order',
data: {
status: 1,
status: 1,
not_expire:1
},
utilSuccess: function(res) {
@ -290,12 +435,31 @@
this.currentPark = type;
},
openlocation() {
uni.openLocation({
latitude: this.info.latitude,
longitude: this.info.longitude,
name: this.info.name,
address: this.info.address
});
if (this.isH5) {
// H5环境：使用微信JS-SDK或浏览器打开地图
if (typeof wx !== 'undefined' && wx.openLocation) {
// 微信JS-SDK
wx.openLocation({
latitude: this.info.latitude,
longitude: this.info.longitude,
name: this.info.name,
address: this.info.address,
scale: 14
});
} else {
// 降级方案：使用腾讯地图
const mapUrl = `https://apis.map.qq.com/uri/v1/marker?marker=coord:${this.info.latitude},${this.info.longitude};title:${encodeURIComponent(this.info.name)};addr:${encodeURIComponent(this.info.address)}&referer=myapp`;
window.open(mapUrl, '_blank');
}
} else {
// 小程序环境：使用uni.openLocation
uni.openLocation({
latitude: this.info.latitude,
longitude: this.info.longitude,
name: this.info.name,
address: this.info.address
});
}
},
loadInfo() {
var that = this;
@ -338,7 +502,7 @@
// if (this.selectInfo.orderid === 0) {
// this.util.toast("请选择预约的活动或者预约的参观");
// return false;
// } else
// } else
if (this.currentPark === 0) {
this.util.toast("请选择停车位");
return false;
@ -426,4 +590,19 @@
box-shadow: 2rpx 3rpx 10rpx 0rpx rgba(107, 94, 77, 0.3);
padding: 21rpx 25rpx;
}
</style>
/* H5地图iframe容器样式 */
.h5-map-container {
width: 100%;
height: 100vh;
position: relative;
background: #f5f5f5;
}
.h5-map-iframe {
width: 100%;
height: 100%;
border: none;
display: block;
}
</style>

118
pages/visit/book.vue
Unescape View File

@ -86,21 +86,21 @@
<view class="box-card-content">
<u-form-item label="参观人数" v-if="type=='user'" labelWidth="120" prop="total" ref="total">
<u-number-box slot="right" v-model="form.total" inputWidth="44" color="#EF9525"
bgColor="#FCF6E3" :min="minCount" :max="maxCount" class="plus">
<view slot="input" class="slotinput">
<u-input @blur="checkValue" type="number" v-model='form.total'></u-input>
bgColor="#FCF6E3" :min="minCount" :max="maxCount" class="plus">
<view slot="input" class="slotinput">
<u-input @blur="checkValue" type="number" v-model='form.total'></u-input>
</view>
</u-number-box>
</u-form-item>
<u-form-item v-else label="人数" labelWidth="120" prop="total" ref="total">
<!-- {{form.total}} 请添加参与名单 -->
<u-number-box slot="right" v-model="form.total" inputWidth="44" color="#EF9525"
bgColor="#FCF6E3" :min="minCount" :max="maxCount" class="plus">
<view slot="input" class="slotinput">
<u-input @blur="checkValue" type="number" v-model='form.total'></u-input>
</view>
<!-- {{form.total}} 请添加参与名单 -->
<u-number-box slot="right" v-model="form.total" inputWidth="44" color="#EF9525"
bgColor="#FCF6E3" :min="minCount" :max="maxCount" class="plus">
<view slot="input" class="slotinput">
<u-input @blur="checkValue" type="number" v-model='form.total'></u-input>
</view>
</u-number-box>
</u-form-item>
<!-- <view class="box-tips" v-if="type=='team'">
@ -138,7 +138,7 @@
</view>
</view>
</view>
<view class="box-visitor">
<block v-for="(item,index) in form.details_list" :key="index">
<view class="box-visitor-item">
@ -314,10 +314,16 @@
<u-popup :show="showAuthorization" closeable mode="bottom" @close="closePhone" :round="10">
<view class="box">
<view class="box-title" style="text-align: center;padding: 20rpx 0;font-size: 32rpx;">
请授权您的手机号
{{isH5 ? '请输入您的手机号' : '请授权您的手机号'}}
</view>
<view class="box-content" style="padding: 20px;">
<u-button type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">授权手机号
<!-- H5环境：手动输入手机号 -->
<view v-if="isH5">
<u-input v-model="inputMobile" placeholder="请输入手机号" type="number" maxlength="11"></u-input>
<u-button type="primary" @click="confirmMobile" style="margin-top: 20rpx;">确认</u-button>
</view>
<!-- 小程序环境：微信授权 -->
<u-button v-else type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">授权手机号
</u-button>
</view>
</view>
@ -345,16 +351,18 @@
successshow: false,
time: 3,
showInfo: false,
isH5: false,
inputMobile: '',
currentNotice: {},
maxheight: "",
scrollheight: "",
notice: [{
title: "观展须知",
content: "观展须知的内容",
content: "观展须知的内容",
isTemplate:false
}, {
title: "批量上传帮助",
content: "<p>1.批量上传EXCEL的以xlsx结尾</p><p>2.第一行为标题行 姓名 手机号 证件号 行动不便者</p><p>3.文件是从微信聊天记录中选取或者微信文件传输助手</p><img src='@host@/export.png?v=1.1' style='width:100%'/>",
content: "<p>1.批量上传EXCEL的以xlsx结尾</p><p>2.第一行为标题行 姓名 手机号 证件号 行动不便者</p><p>3.文件是从微信聊天记录中选取或者微信文件传输助手</p><img src='@host@/export.png?v=1.1' style='width:100%'/>",
isTemplate:true
}],
specialtype: false,
@ -470,6 +478,9 @@
this.$refs.formUser.setRules(this.rules);
},
onLoad(options) {
// 检测运行环境
this.isH5 = typeof window !== 'undefined' && window.location
this.loadConfig();
this.loadInfo();
this.openNoticeInfo(0);
@ -521,18 +532,45 @@
clearInterval(this.t)
clearTimeout(this.timer)
},
methods: {
checkValue(value) {
if (value > this.maxCount) {
this.form.total = this.maxCount;
} else if (value < this.minCount) {
this.form.total = this.minCount;
}
methods: {
checkValue(value) {
if (value > this.maxCount) {
this.form.total = this.maxCount;
} else if (value < this.minCount) {
this.form.total = this.minCount;
}
},
//关闭手机授授权
closePhone() {
this.showAuthorization = false
},
// H5环境：确认手机号
confirmMobile() {
if (!this.inputMobile) {
uni.showToast({ title: '请输入手机号', icon: 'none' })
return
}
if (!/^1[3-9]\d{9}$/.test(this.inputMobile)) {
uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
return
}
var that = this;
this.util.request({
api: '/api/mobile/user/save',
method: 'POST',
data: {
mobile: this.inputMobile
},
utilSuccess: function(res) {
that.form.mobile = that.inputMobile;
that.showAuthorization = false
},
utilFail: function(res) {
uni.showToast({ title: '手机号保存失败', icon: 'none' })
}
})
},
//获取手机授权
getPhoneNumber(e) {
var that = this;
@ -625,7 +663,7 @@
downLoad() {
const downloadTask = uni.downloadFile({
url: 'https://leyiyuyue.szgmbwg.org.cn/res/Template.xlsx', //仅为示例，并非真实的资源
success: (res) => {
success: (res) => {
var filePath = res.tempFilePath
if (res.statusCode === 200) {
uni.openDocument({
@ -1163,14 +1201,14 @@
<style lang="scss">
@import url("@/static/css/bookbox.css");
.slotinput {
&>view {
width: 80rpx;
height: 30rpx;
border-radius: 0;
border: none;
}
.slotinput {
&>view {
width: 80rpx;
height: 30rpx;
border-radius: 0;
border: none;
}
}
.timeitem-none {
color: #ccc;
@ -1341,15 +1379,15 @@
.u-radio-group .u-radio {
margin-bottom: 10rpx;
margin-right: 10rpx
}
.book-box-row-timeitem {
display: flex;
align-items: center;
flex-wrap: wrap;
width: 32%;
padding: 19rpx 21rpx!important;
}
.book-box-row-timeitem-txt {
width:100%
}
.book-box-row-timeitem {
display: flex;
align-items: center;
flex-wrap: wrap;
width: 32%;
padding: 19rpx 21rpx!important;
}
.book-box-row-timeitem-txt {
width:100%
}
</style>

138
utils/util.js
Unescape View File

@ -1,9 +1,9 @@
import md5 from "./md5.min";
const HOSTARR = {
'development':'https://leyiyuyue.szgmbwg.org.cn',
'production': 'https://leyiyuyue.szgmbwg.org.cn',
// 'development':'https://leyitest.ali251.langye.net',
// 'production': 'https://leyitest.ali251.langye.net',
'production': 'https://leyiyuyue.szgmbwg.org.cn',
// 'development':'https://leyitest.ali251.langye.net',
// 'production': 'https://leyitest.ali251.langye.net',
}; // 审核状态
@ -42,34 +42,96 @@ const getUserInfo = (cb, refresh) => {
}
const getOpenidInfo = (cb, refresh) => {
cb = cb || function() {}
refresh = refresh || false
if (!refresh) {
let user_info = uni.getStorageSync(user_info_key)
if (!isNull(user_info)) {
cb(user_info)
return
}
// cb = cb || function() {}
// refresh = refresh || false
// console.log("getOpenidInfo", refresh)
// if (!refresh) {
// let user_info = uni.getStorageSync(user_info_key)
// if (!isNull(user_info)) {
// cb(user_info)
// return
// }
// }
let user_info = uni.getStorageSync(user_info_key)
if (!isNull(user_info)) {
cb(user_info)
return
}
// 判断运行环境：H5还是小程序
const isH5 = typeof window !== 'undefined' && window.location
const isWeixinBrowser = isH5 && /MicroMessenger/i.test(navigator.userAgent)
uni.login({
provider: 'weixin',
success: (res) => {
console.log(res.code);
let url = HOST + '/api/mobile/user/login?code=' + res.code;
uni.request({
url: url,
method: 'GET',
success: result => {
let user_info = result.data
uni.setStorageSync(user_info_key, user_info)
cb(user_info)
}
});
}
});
if (isH5 && isWeixinBrowser) {
// H5环境下的微信授权登录
wxH5AuthLogin(cb)
} else {
// 小程序环境下的微信登录
uni.login({
provider: 'weixin',
success: (res) => {
console.log(res.code);
let url = HOST + '/api/mobile/user/login?code=' + res.code;
uni.request({
url: url,
method: 'GET',
success: result => {
let user_info = result.data
uni.setStorageSync(user_info_key, user_info)
cb(user_info)
}
});
}
});
}
}
// H5环境下的微信授权登录
const wxH5AuthLogin = (cb) => {
let link = window.location.href;
if (/code=/.test(link) || link.indexOf("code") > -1) {
// 已经获取到授权码，直接登录
let temp = decodeURIComponent((new RegExp('[?|&]' + 'code' + '=' + '([^&;]+?)(&|#|;|$)').exec(
link) || [, ''])[1].replace(/\+/g, '%20')) || null;
console.log("code", temp)
// 上传 code 到服务器获取 token
request({
api: `/api/mobile/user/wx-login?code=${temp}`,
method: 'GET',
utilSuccess: (res) => {
if (res.token && res.token.trim() !== '') {
console.log('获取 token 成功:', res.token)
// 保持与小程序登录一致的存储方式
const userInfo = {
token: res.token,
// 可以根据需要添加其他字段，如 WeChatOpenID 等
}
uni.setStorageSync(user_info_key, userInfo)
cb(userInfo)
} else {
console.error('登录失败: token为空')
uni.showToast({ title: '登录失败，请重试', icon: 'none' })
}
},
utilFail: (err) => {
console.error('获取 token 失败:', err)
uni.showToast({ title: '登录失败，请重试', icon: 'none' })
}
})
} else {
// 未获取授权码，跳转到微信授权页面
const appId = 'wxbf4862e929ab85b0'
const currentUrl = window.location.href
const redirectUri = encodeURIComponent(currentUrl.replace(/#\//, ""));
const scope = 'snsapi_userinfo'
const state = 'STATE'
console.log(redirectUri)
const authUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${redirectUri}&response_type=code&scope=${scope}&state=${state}#wechat_redirect`
// 重定向到微信授权页面
window.location.href = authUrl
}
}
const getUserProfile = (cb) => {
@ -305,8 +367,8 @@ const isLogin = () => {
const isNull = p => {
return p == '' || p == undefined || p == null || p == 'undefined' || p == 'null';
}; // 正则
}; // 正则
const phoneRegex = /^1[3456789]\d{9}$/;
@ -358,11 +420,11 @@ const isValidCardID = cardID => {
var last = parity[sum % 11];
return parity[sum % 11] == code[17];
};
const shareInfo = {
title:"",
imageUrl:"/static/share.jpg"
};
const shareInfo = {
title:"",
imageUrl:"/static/share.jpg"
}
/**
* UTF16和UTF8转换对照表
@ -561,8 +623,8 @@ module.exports = {
auditStatusDic: auditStatusDic,
getUserProfile: getUserProfile,
getUserInfo: getUserInfo,
toast: toast,
isValidCardID:isValidCardID,
shareInfo:shareInfo
toast: toast,
isValidCardID:isValidCardID,
shareInfo:shareInfo
};
};

Write Preview
Loading…
Cancel
Save