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('_') weekdays: '周日_周一_周二_周三_周四_周五_周六'.split('_')
}) })
Vue.prototype.util = util; 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", "name" : "wx-dangyuanjiaoyujidi",
"appid" : "__UNI__FC384E5", "appid" : "__UNI__6DCA2D0",
"description" : "", "description" : "",
"versionName" : "1.0.0", "versionName" : "1.0.0",
"versionCode" : "100", "versionCode" : "100",
@ -75,5 +75,10 @@
"uniStatistics" : { "uniStatistics" : {
"enable" : false "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"> <u-popup :show="showAuthorization" closeable mode="bottom" @close="closePhone" :round="10">
<view class="box"> <view class="box">
<view class="box-title" style="text-align: center;padding: 20rpx 0;font-size: 32rpx;"> <view class="box-title" style="text-align: center;padding: 20rpx 0;font-size: 32rpx;">
请授权您的手机号 {{isH5 ? '请输入您的手机号' : '请授权您的手机号'}}
</view> </view>
<view class="box-content" style="padding: 20px;"> <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> </u-button>
</view> </view>
</view> </view>
@ -272,6 +278,8 @@
common_user: [], common_user: [],
minTotal: 1, minTotal: 1,
maxTotal: 1, maxTotal: 1,
isH5: false,
inputMobile: '',
form: { form: {
unit: "", unit: "",
leader: "", leader: "",
@ -360,6 +368,9 @@
}, },
onShow() { onShow() {
var that = this; var that = this;
// 检测运行环境
this.isH5 = typeof window !== 'undefined' && window.location
that.numberlist = {}; that.numberlist = {};
wx.getStorage({ wx.getStorage({
key: 'activityinfo', key: 'activityinfo',
@ -442,6 +453,34 @@
closePhone() { closePhone() {
this.showAuthorization = false 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) { getPhoneNumber(e) {
var that = this; var that = this;
this.util.request({ this.util.request({

116
pages/activity/index.vue
Unescape View File

@ -40,16 +40,16 @@
<view style="display: inline-block;"> <view style="display: inline-block;">
<text class="icon-shijian iconfont"></text>活动场次： <text class="icon-shijian iconfont"></text>活动场次：
</view> </view>
<view style="display: flex;flex-direction: column;"> <view style="display: flex;flex-direction: column;">
<block v-for="(k,index) in item.numbers"> <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;"> <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"> <text style="margin-right:12rpx">
{{timeFormat(k.start_time,"MM月DD日")}} {{timeFormat(k.start_time,"MM月DD日")}}
</text> </text>
<text> <text>
{{getHm(k.start_time)}}-{{getHm(k.end_time)}} {{getHm(k.start_time)}}-{{getHm(k.end_time)}}
</text> </text>
</view> </view>
</block> </block>
</view> </view>
@ -96,19 +96,57 @@
list: [], list: [],
latitude: "", latitude: "",
longitude: "", longitude: "",
isloading: true isloading: true,
locationError: false // 定位是否失败
} }
}, },
onLoad() { onLoad() {
var that = this; var that = this;
wx.getLocation({
success(res) { // 检测运行环境
console.log(res) const isH5 = typeof window !== 'undefined' && window.location
that.latitude = res.latitude;
that.longitude = res.longitude; 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() 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() { onShareAppMessage() {
return this.util.shareInfo return this.util.shareInfo
@ -129,17 +167,25 @@
}) })
}, },
loadActivity() { loadActivity() {
console.log("aaa") console.log("加载活动列表")
var that = this; var that = this;
var nt = new Date(); var nt = new Date();
that.isloading = true; that.isloading = true;
// 构建请求参数
var requestData = {
page_size: 100
};
// 如果有定位信息，添加到请求参数中
if (that.latitude && that.longitude) {
requestData.latitude = that.latitude;
requestData.longitude = that.longitude;
}
this.util.request({ this.util.request({
api: '/api/mobile/activity/index', api: '/api/mobile/activity/index',
data: { data: requestData,
latitude: that.latitude,
longitude: that.longitude,
page_size: 100
},
utilSuccess: function(res) { utilSuccess: function(res) {
for (var mod of res.data) { for (var mod of res.data) {
mod.isCanBook = that.$moment(nt).isBefore(mod.end_plan); mod.isCanBook = that.$moment(nt).isBefore(mod.end_plan);
@ -148,7 +194,7 @@
that.isloading = false; that.isloading = false;
}, },
utilFail: function(res) { utilFail: function(res) {
that.isloading = false;
} }
}) })
}, },
@ -186,16 +232,16 @@
background: #FCF6E3; background: #FCF6E3;
border: 2rpx solid #EF9525; border: 2rpx solid #EF9525;
border-radius: 20rpx; border-radius: 20rpx;
color: #4E4E4E; color: #4E4E4E;
margin-right: 10rpx; 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)"> <view class="box-col" @click="handleBook(3)">
<image src="../../static/img/index_icon_3.png" class="box-body-icon"></image> <image src="../../static/img/index_icon_3.png" class="box-body-icon"></image>
</view> </view>
</u-row>
</view> </view>
</view> </view>
</view> </view>
@ -148,10 +147,16 @@
<u-popup :show="showAuthorization" closeable mode="bottom" @close="closePhone" :round="10"> <u-popup :show="showAuthorization" closeable mode="bottom" @close="closePhone" :round="10">
<view class="box"> <view class="box">
<view class="box-title" style="text-align: center;padding: 20rpx 0;font-size: 32rpx;"> <view class="box-title" style="text-align: center;padding: 20rpx 0;font-size: 32rpx;">
请授权您的手机号 {{isH5 ? '请输入您的手机号' : '请授权您的手机号'}}
</view> </view>
<view class="box-content" style="padding: 20px;"> <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> </u-button>
</view> </view>
</view> </view>
@ -184,13 +189,18 @@
listNotice: [], listNotice: [],
currentNotice: {}, currentNotice: {},
showAuthorization: false, showAuthorization: false,
openType: 1 openType: 1,
isH5: false,
inputMobile: ''
} }
}, },
onShareAppMessage() { onShareAppMessage() {
return this.util.shareInfo return this.util.shareInfo
}, },
onLoad() { onLoad() {
// 检测运行环境
this.isH5 = typeof window !== 'undefined' && window.location
this.loadInfo(); this.loadInfo();
this.loadNotice(); this.loadNotice();
}, },
@ -213,6 +223,36 @@
closePhone() { closePhone() {
this.showAuthorization = false 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) { getPhoneNumber(e) {
var that = this; var that = this;
this.util.request({ this.util.request({
@ -605,15 +645,15 @@
.richp { .richp {
margin-bottom: 10rpx; 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> <template>
<view> <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> :longitude="info.longitude" :markers="covers"></map>
</view> </view>
</template> </template>
@ -11,27 +23,58 @@
return { return {
info: {}, info: {},
covers: [], covers: [],
isH5: false // 是否为H5环境
} }
}, },
onLoad() { onLoad() {
this.openlocation(); // 检测运行环境
}, this.isH5 = typeof window !== 'undefined' && window.location
onShareAppMessage() {
return this.util.shareInfo this.loadInfo();
},
onShareAppMessage() {
return this.util.shareInfo
}, },
methods: { 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() { markertap() {
this.openlocation(); this.openlocation();
}, },
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({ uni.openLocation({
latitude: res.latitude, latitude: this.info.latitude,
longitude: res.longitude, longitude: this.info.longitude,
name: res.name, name: this.info.name,
address: res.address address: this.info.address
}); });
}) }
}, },
loadInfo(cb) { loadInfo(cb) {
var that = this; var that = this;
@ -41,25 +84,45 @@
res.latitude = parseFloat(res.latitude); res.latitude = parseFloat(res.latitude);
res.longitude = parseFloat(res.longitude); res.longitude = parseFloat(res.longitude);
that.info = res; that.info = res;
that.covers.push({
latitude: res.latitude, // 只有在小程序环境中才添加地图标记
longitude: res.longitude, if (!that.isH5) {
width: 70, that.covers.push({
height: 70, latitude: res.latitude,
iconPath: '/static/img/location.png' longitude: res.longitude,
}); width: 70,
cb(res); height: 70,
iconPath: '/static/img/location.png'
});
}
// 如果有回调函数则执行
if (cb) {
cb(res);
}
}, },
utilFail: function(res) { utilFail: function(res) {
} }
}) })
}, },
} }
} }
</script> </script>
<style> <style>
/* H5地图iframe容器样式 */
</style> .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>
</view> </view>
<!-- H5和小程序环境判断的授权弹窗 -->
<u-popup :show="showAuthorization" mode="bottom" @close="closeInfo" :round="10"> <u-popup :show="showAuthorization" mode="bottom" @close="closeInfo" :round="10">
<view class="box"> <view class="box">
<view class="box-title" style="text-align: center;padding: 20rpx 0;font-size: 32rpx;"> <view class="box-title" style="text-align: center;padding: 20rpx 0;font-size: 32rpx;">
请授权您的微信头像和昵称 {{isH5 ? '请完善您的个人信息' : '请授权您的微信头像和昵称'}}
</view> </view>
<view class="box-content" style="padding: 20px;"> <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>
</view> </view>
</u-popup> </u-popup>
@ -88,26 +128,45 @@
return { return {
topimg: "", topimg: "",
info: {}, info: {},
showAuthorization: false showAuthorization: false,
showform: false,
action: '',
otherData: {
token: ''
},
avatarList: [],
form: {
name: '',
avatar: ''
},
isH5: false
} }
}, },
onReady() { onReady() {
this.topimg = this.util.HOST + "/top_bg.png"; this.topimg = this.util.HOST + "/top_bg.png";
}, },
onShow() { onShow() {
var that = this; 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) { this.loadInfo(function(res) {
if (that.util.isNull(res.headimgurl) || that.util.isNull(res.nickname)) { if (res.headimgurl || res.nickname) {
that.showAuthorization = true;
} else {
that.showAuthorization = false; that.showAuthorization = false;
} else {
that.showAuthorization = true;
} }
}); });
}, },
methods: { methods: {
closeInfo() { closeInfo() {
that.showAuthorization = false; this.showAuthorization = false;
},
closeForm() {
this.showform = false
}, },
loadInfo(cb) { loadInfo(cb) {
var that = this; var that = this;
@ -122,22 +181,83 @@
getUserProfile() { getUserProfile() {
var that = this; var that = this;
this.util.getUserProfile((res) => { this.util.getUserProfile((res) => {
console.log(res) console.log("res", res)
that.util.request({ that.form.name = res.nickName
api: '/api/mobile/user/save', that.form.avatar = res.avatarUrl
method: 'POST', that.avatarList.push({
data: { type: 0,
headimgurl: res.avatarUrl, url: res.avatarUrl
nickname: res.nickName })
}, that.showAuthorization = false
utilSuccess: function(r) { // 小程序环境：显示确认编辑弹窗
that.loadInfo(function() { // H5环境：直接提交（因为已经在第一个弹窗中编辑了）
that.showAuthorization = false; 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) { toPage(type) {
@ -296,4 +416,16 @@
.list-item-lefttxt { .list-item-lefttxt {
margin-left: 41rpx; 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>
<view class="page-body"> <view class="page-body">
<view class="page-section page-section-gap"> <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"> :markers="covers">
<view class="book-box"> <view class="book-box">
<view class="activityBox-content flex-col"> <view class="activityBox-content flex-col">
@ -37,7 +144,7 @@
</view> </view>
<text class="iconfont icon-tingchechang1" style="font-size: 28rpx;"></text> <text class="iconfont icon-tingchechang1" style="font-size: 28rpx;"></text>
<view> <view>
<!-- <text>大中(09:00-12:00)：{{remain_big_park}}</text> --> <!-- <text>大中(09:00-12:00)：{{remain_big_park}}</text> -->
<text>大中型车</text> <text>大中型车</text>
</view> </view>
</view> </view>
@ -73,7 +180,7 @@
</view> </view>
<text class="iconfont icon-tingchechang1" style="font-size: 28rpx;"></text> <text class="iconfont icon-tingchechang1" style="font-size: 28rpx;"></text>
<view> <view>
<!-- <text>残疾人车位：{{remain_special_park}}</text> --> <!-- <text>残疾人车位：{{remain_special_park}}</text> -->
<text>残疾人车位</text> <text>残疾人车位</text>
</view> </view>
</view> </view>
@ -177,34 +284,72 @@
remain_big_park: 0, remain_big_park: 0,
remain_small_park: 0, remain_small_park: 0,
remain_special_park: 0, remain_special_park: 0,
remain_big_park2: 0 remain_big_park2: 0,
isH5: false // 是否为H5环境
} }
}, },
onLoad() { onLoad() {
var that = this; var that = this;
// 检测运行环境
this.isH5 = typeof window !== 'undefined' && window.location
this.loadInfo(); this.loadInfo();
wx.getLocation({
success(res) { // 根据环境选择定位方式
that.userlatitude = res.latitude; if (this.isH5) {
that.userlongitude = res.longitude; // H5环境：使用浏览器定位API
that.btnDisabled = false; if (navigator.geolocation) {
// that.showSelectorder = true; navigator.geolocation.getCurrentPosition(
// that.loadOrder(function(res) { function(position) {
// that.loadactivityOrder(function(r) { that.userlatitude = position.coords.latitude;
// if (res.length + r.length == 0) { that.userlongitude = position.coords.longitude;
// that.util.toast("您需要预约参观或者预约活动才可以停车"); console.log('H5定位成功:', that.userlatitude, that.userlongitude);
// that.btnDisabled = true; that.btnDisabled = false;
// } else { },
// that.btnDisabled = false; function(error) {
// that.showSelectorder = true; 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: { 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() { handleConfirmOrder() {
if (this.selectInfo.orderid === 0) { if (this.selectInfo.orderid === 0) {
this.util.toast("请选择预约的活动或者预约的参观"); this.util.toast("请选择预约的活动或者预约的参观");
@ -250,7 +395,7 @@
this.util.request({ this.util.request({
api: '/api/mobile/user/my-visit-order', api: '/api/mobile/user/my-visit-order',
data: { data: {
status: 1, status: 1,
not_expire:1 not_expire:1
}, },
utilSuccess: function(res) { utilSuccess: function(res) {
@ -270,7 +415,7 @@
this.util.request({ this.util.request({
api: '/api/mobile/user/my-activity-order', api: '/api/mobile/user/my-activity-order',
data: { data: {
status: 1, status: 1,
not_expire:1 not_expire:1
}, },
utilSuccess: function(res) { utilSuccess: function(res) {
@ -290,12 +435,31 @@
this.currentPark = type; this.currentPark = type;
}, },
openlocation() { openlocation() {
uni.openLocation({ if (this.isH5) {
latitude: this.info.latitude, // H5环境：使用微信JS-SDK或浏览器打开地图
longitude: this.info.longitude, if (typeof wx !== 'undefined' && wx.openLocation) {
name: this.info.name, // 微信JS-SDK
address: this.info.address 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() { loadInfo() {
var that = this; var that = this;
@ -338,7 +502,7 @@
// if (this.selectInfo.orderid === 0) { // if (this.selectInfo.orderid === 0) {
// this.util.toast("请选择预约的活动或者预约的参观"); // this.util.toast("请选择预约的活动或者预约的参观");
// return false; // return false;
// } else // } else
if (this.currentPark === 0) { if (this.currentPark === 0) {
this.util.toast("请选择停车位"); this.util.toast("请选择停车位");
return false; return false;
@ -426,4 +590,19 @@
box-shadow: 2rpx 3rpx 10rpx 0rpx rgba(107, 94, 77, 0.3); box-shadow: 2rpx 3rpx 10rpx 0rpx rgba(107, 94, 77, 0.3);
padding: 21rpx 25rpx; 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"> <view class="box-card-content">
<u-form-item label="参观人数" v-if="type=='user'" labelWidth="120" prop="total" ref="total"> <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" <u-number-box slot="right" v-model="form.total" inputWidth="44" color="#EF9525"
bgColor="#FCF6E3" :min="minCount" :max="maxCount" class="plus"> bgColor="#FCF6E3" :min="minCount" :max="maxCount" class="plus">
<view slot="input" class="slotinput"> <view slot="input" class="slotinput">
<u-input @blur="checkValue" type="number" v-model='form.total'></u-input> <u-input @blur="checkValue" type="number" v-model='form.total'></u-input>
</view> </view>
</u-number-box> </u-number-box>
</u-form-item> </u-form-item>
<u-form-item v-else label="人数" labelWidth="120" prop="total" ref="total"> <u-form-item v-else label="人数" labelWidth="120" prop="total" ref="total">
<!-- {{form.total}} 请添加参与名单 --> <!-- {{form.total}} 请添加参与名单 -->
<u-number-box slot="right" v-model="form.total" inputWidth="44" color="#EF9525" <u-number-box slot="right" v-model="form.total" inputWidth="44" color="#EF9525"
bgColor="#FCF6E3" :min="minCount" :max="maxCount" class="plus"> bgColor="#FCF6E3" :min="minCount" :max="maxCount" class="plus">
<view slot="input" class="slotinput"> <view slot="input" class="slotinput">
<u-input @blur="checkValue" type="number" v-model='form.total'></u-input> <u-input @blur="checkValue" type="number" v-model='form.total'></u-input>
</view> </view>
</u-number-box> </u-number-box>
</u-form-item> </u-form-item>
<!-- <view class="box-tips" v-if="type=='team'"> <!-- <view class="box-tips" v-if="type=='team'">
@ -138,7 +138,7 @@
</view> </view>
</view> </view>
<view class="box-visitor"> <view class="box-visitor">
<block v-for="(item,index) in form.details_list" :key="index"> <block v-for="(item,index) in form.details_list" :key="index">
<view class="box-visitor-item"> <view class="box-visitor-item">
@ -314,10 +314,16 @@
<u-popup :show="showAuthorization" closeable mode="bottom" @close="closePhone" :round="10"> <u-popup :show="showAuthorization" closeable mode="bottom" @close="closePhone" :round="10">
<view class="box"> <view class="box">
<view class="box-title" style="text-align: center;padding: 20rpx 0;font-size: 32rpx;"> <view class="box-title" style="text-align: center;padding: 20rpx 0;font-size: 32rpx;">
请授权您的手机号 {{isH5 ? '请输入您的手机号' : '请授权您的手机号'}}
</view> </view>
<view class="box-content" style="padding: 20px;"> <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> </u-button>
</view> </view>
</view> </view>
@ -345,16 +351,18 @@
successshow: false, successshow: false,
time: 3, time: 3,
showInfo: false, showInfo: false,
isH5: false,
inputMobile: '',
currentNotice: {}, currentNotice: {},
maxheight: "", maxheight: "",
scrollheight: "", scrollheight: "",
notice: [{ notice: [{
title: "观展须知", title: "观展须知",
content: "观展须知的内容", content: "观展须知的内容",
isTemplate:false isTemplate:false
}, { }, {
title: "批量上传帮助", 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 isTemplate:true
}], }],
specialtype: false, specialtype: false,
@ -470,6 +478,9 @@
this.$refs.formUser.setRules(this.rules); this.$refs.formUser.setRules(this.rules);
}, },
onLoad(options) { onLoad(options) {
// 检测运行环境
this.isH5 = typeof window !== 'undefined' && window.location
this.loadConfig(); this.loadConfig();
this.loadInfo(); this.loadInfo();
this.openNoticeInfo(0); this.openNoticeInfo(0);
@ -521,18 +532,45 @@
clearInterval(this.t) clearInterval(this.t)
clearTimeout(this.timer) clearTimeout(this.timer)
}, },
methods: { methods: {
checkValue(value) { checkValue(value) {
if (value > this.maxCount) { if (value > this.maxCount) {
this.form.total = this.maxCount; this.form.total = this.maxCount;
} else if (value < this.minCount) { } else if (value < this.minCount) {
this.form.total = this.minCount; this.form.total = this.minCount;
} }
}, },
//关闭手机授授权 //关闭手机授授权
closePhone() { closePhone() {
this.showAuthorization = false 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) { getPhoneNumber(e) {
var that = this; var that = this;
@ -625,7 +663,7 @@
downLoad() { downLoad() {
const downloadTask = uni.downloadFile({ const downloadTask = uni.downloadFile({
url: 'https://leyiyuyue.szgmbwg.org.cn/res/Template.xlsx', //仅为示例，并非真实的资源 url: 'https://leyiyuyue.szgmbwg.org.cn/res/Template.xlsx', //仅为示例，并非真实的资源
success: (res) => { success: (res) => {
var filePath = res.tempFilePath var filePath = res.tempFilePath
if (res.statusCode === 200) { if (res.statusCode === 200) {
uni.openDocument({ uni.openDocument({
@ -1163,14 +1201,14 @@
<style lang="scss"> <style lang="scss">
@import url("@/static/css/bookbox.css"); @import url("@/static/css/bookbox.css");
.slotinput { .slotinput {
&>view { &>view {
width: 80rpx; width: 80rpx;
height: 30rpx; height: 30rpx;
border-radius: 0; border-radius: 0;
border: none; border: none;
} }
} }
.timeitem-none { .timeitem-none {
color: #ccc; color: #ccc;
@ -1341,15 +1379,15 @@
.u-radio-group .u-radio { .u-radio-group .u-radio {
margin-bottom: 10rpx; margin-bottom: 10rpx;
margin-right: 10rpx margin-right: 10rpx
} }
.book-box-row-timeitem { .book-box-row-timeitem {
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
width: 32%; width: 32%;
padding: 19rpx 21rpx!important; padding: 19rpx 21rpx!important;
} }
.book-box-row-timeitem-txt { .book-box-row-timeitem-txt {
width:100% width:100%
} }
</style> </style>

138
utils/util.js
Unescape View File

@ -1,9 +1,9 @@
import md5 from "./md5.min"; import md5 from "./md5.min";
const HOSTARR = { const HOSTARR = {
'development':'https://leyiyuyue.szgmbwg.org.cn', 'development':'https://leyiyuyue.szgmbwg.org.cn',
'production': 'https://leyiyuyue.szgmbwg.org.cn', 'production': 'https://leyiyuyue.szgmbwg.org.cn',
// 'development':'https://leyitest.ali251.langye.net', // 'development':'https://leyitest.ali251.langye.net',
// 'production': 'https://leyitest.ali251.langye.net', // 'production': 'https://leyitest.ali251.langye.net',
}; // 审核状态 }; // 审核状态
@ -42,34 +42,96 @@ const getUserInfo = (cb, refresh) => {
} }
const getOpenidInfo = (cb, refresh) => { const getOpenidInfo = (cb, refresh) => {
cb = cb || function() {} // cb = cb || function() {}
refresh = refresh || false // refresh = refresh || false
if (!refresh) { // console.log("getOpenidInfo", refresh)
let user_info = uni.getStorageSync(user_info_key) // if (!refresh) {
if (!isNull(user_info)) { // let user_info = uni.getStorageSync(user_info_key)
cb(user_info) // if (!isNull(user_info)) {
return // 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({ if (isH5 && isWeixinBrowser) {
provider: 'weixin', // H5环境下的微信授权登录
success: (res) => { wxH5AuthLogin(cb)
console.log(res.code); } else {
let url = HOST + '/api/mobile/user/login?code=' + res.code; // 小程序环境下的微信登录
uni.request({ uni.login({
url: url, provider: 'weixin',
method: 'GET', success: (res) => {
success: result => { console.log(res.code);
let user_info = result.data let url = HOST + '/api/mobile/user/login?code=' + res.code;
uni.setStorageSync(user_info_key, user_info) uni.request({
cb(user_info) 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) => { const getUserProfile = (cb) => {
@ -305,8 +367,8 @@ const isLogin = () => {
const isNull = p => { const isNull = p => {
return p == '' || p == undefined || p == null || p == 'undefined' || p == 'null'; return p == '' || p == undefined || p == null || p == 'undefined' || p == 'null';
}; // 正则 }; // 正则
const phoneRegex = /^1[3456789]\d{9}$/; const phoneRegex = /^1[3456789]\d{9}$/;
@ -358,11 +420,11 @@ const isValidCardID = cardID => {
var last = parity[sum % 11]; var last = parity[sum % 11];
return parity[sum % 11] == code[17]; return parity[sum % 11] == code[17];
}; };
const shareInfo = { const shareInfo = {
title:"", title:"",
imageUrl:"/static/share.jpg" imageUrl:"/static/share.jpg"
} }
/** /**
* UTF16和UTF8转换对照表 * UTF16和UTF8转换对照表
@ -561,8 +623,8 @@ module.exports = {
auditStatusDic: auditStatusDic, auditStatusDic: auditStatusDic,
getUserProfile: getUserProfile, getUserProfile: getUserProfile,
getUserInfo: getUserInfo, getUserInfo: getUserInfo,
toast: toast, toast: toast,
isValidCardID:isValidCardID, isValidCardID:isValidCardID,
shareInfo:shareInfo shareInfo:shareInfo
}; };

Write Preview
Loading…
Cancel
Save