对接原系统
This commit is contained in:
+652
-661
File diff suppressed because it is too large
Load Diff
+292
-270
@@ -1,299 +1,321 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="uv-demo-block">
|
||||
<uv-swiper :list="photo" indicator indicatorMode="line" circular height="200" radius="0"></uv-swiper>
|
||||
</view>
|
||||
<!-- <view class="merchant-name">{{ merchant.merchantName }}</view> -->
|
||||
<uni-card :title="merchant.merchantName" :border="false" :is-shadow="false" :padding="0">
|
||||
<uv-cell-group :customStyle="{backgroundColor: '#ffffff'}" :border="false">
|
||||
<uv-cell title="营业时间" :label="merchant.businessTime" :cellStyle="{padding: '10px 5px'}">
|
||||
<!-- <template v-slot:label>
|
||||
<view class="web-text-secondary">{{ merchant.businessTime }}</view>
|
||||
</template>
|
||||
<template v-slot:right-icon>
|
||||
<text class="web-text-success"></text>
|
||||
</template> -->
|
||||
</uv-cell>
|
||||
<uv-cell title="场馆地址" :label="merchant.address" :cellStyle="{padding: '10px 5px'}">
|
||||
</uv-cell>
|
||||
<uv-cell title="场馆位置" :label="`距离【${merchant.merchantName}】3.8公里·约7分钟`" isLink :cellStyle="{padding: '10px 5px'}" @click="mapTo(merchant)">
|
||||
<template v-slot:right-icon>
|
||||
<uv-icon size="50rpx" name="map-fill" color="#5ac725" style="color: #ff0000;"></uv-icon>
|
||||
</template>
|
||||
</uv-cell>
|
||||
<uv-cell title="服务前台电话" :label="merchant.phone" :border="false" :cellStyle="{padding: '10px 5px'}" @click="callPhone(merchant.phone)">
|
||||
<view class="container">
|
||||
<view class="uv-demo-block">
|
||||
<uv-swiper :list="photo" indicator indicatorMode="line" circular height="200" radius="0"></uv-swiper>
|
||||
</view>
|
||||
<!-- <view class="merchant-name">{{ merchant.merchantName }}</view> -->
|
||||
<uni-card :title="merchant.merchantName" :border="false" :is-shadow="false" :padding="0">
|
||||
<uv-cell-group :customStyle="{backgroundColor: '#ffffff'}" :border="false">
|
||||
<uv-cell title="营业时间" :label="merchant.businessTime" :cellStyle="{padding: '10px 5px'}">
|
||||
<!-- <template v-slot:label>
|
||||
<view class="web-text-secondary">{{ merchant.businessTime }}</view>
|
||||
</template>
|
||||
<template v-slot:right-icon>
|
||||
<text class="web-text-success"></text>
|
||||
</template> -->
|
||||
</uv-cell>
|
||||
<uv-cell title="场馆地址" :label="merchant.address" :cellStyle="{padding: '10px 5px'}">
|
||||
</uv-cell>
|
||||
<uv-cell title="场馆位置" v-if="merchant"
|
||||
:label="`距离【${merchant.name}】${merchant.distance}公里·约${merchant.duration}分钟`" isLink
|
||||
:cellStyle="{padding: '10px 5px'}" @click="mapTo(merchant)">
|
||||
<template v-slot:right-icon>
|
||||
<uv-icon size="50rpx" name="map-fill" color="#5ac725" style="color: #ff0000;"></uv-icon>
|
||||
</template>
|
||||
</uv-cell>
|
||||
<uv-cell title="服务前台电话" :label="merchant.tel" :border="false" :cellStyle="{padding: '10px 5px'}"
|
||||
@click="callPhone(merchant.phone)">
|
||||
|
||||
</uv-cell>
|
||||
</uv-cell-group>
|
||||
</uni-card>
|
||||
</uv-cell>
|
||||
</uv-cell-group>
|
||||
</uni-card>
|
||||
|
||||
<uni-card title="场地介绍" :is-shadow="false" :border="false" :padding="0">
|
||||
<view class="web-text-heading booking-content">
|
||||
<view v-html="merchant.content"></view>
|
||||
</view>
|
||||
</uni-card>
|
||||
<uni-card title="场地介绍" :is-shadow="false" :border="false" :padding="0">
|
||||
<view class="web-text-heading booking-content">
|
||||
<view v-html="merchant.content"></view>
|
||||
</view>
|
||||
</uni-card>
|
||||
|
||||
<view class="xieyi web-cell web-text-secondary web-cell-align-top">
|
||||
<view class="web-cell web-cell-content web-cell-align-top">
|
||||
<uni-icons type="circle" size="20" color="#a4a5a7" v-if="!disabled" @click="onDisabled"></uni-icons>
|
||||
<uni-icons type="checkbox" size="20" color="#11a954" v-else @click="onDisabled"></uni-icons>
|
||||
<view class="text" @click="onDisabled">
|
||||
<text>我已阅读并同意</text>
|
||||
<text class="link"
|
||||
@click.stop="navTo('/package/article/detail?articleId=503')">《订票协议》</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="save-btn">
|
||||
<uv-button
|
||||
:customStyle="{background: 'linear-gradient(to right, #ccff66, #008e04)',borderRadius: '30px',color: '#ffffff'}"
|
||||
text="预定场地" @click="save"></uv-button>
|
||||
</view>
|
||||
<view class="xieyi web-cell web-text-secondary web-cell-align-top">
|
||||
<view class="web-cell web-cell-content web-cell-align-top">
|
||||
<uni-icons type="circle" size="20" color="#a4a5a7" v-if="!disabled" @click="onDisabled"></uni-icons>
|
||||
<uni-icons type="checkbox" size="20" color="#11a954" v-else @click="onDisabled"></uni-icons>
|
||||
<view class="text" @click="onDisabled">
|
||||
<text>我已阅读并同意</text>
|
||||
<text class="link"
|
||||
@click.stop="navTo('/package/article/detail?articleId=503')">《订票协议》
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="save-btn">
|
||||
<uv-button
|
||||
:customStyle="{background: 'linear-gradient(to right, #ccff66, #008e04)',borderRadius: '30px',color: '#ffffff'}"
|
||||
text="预定场地" @click="save"></uv-button>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<uv-gap height="50"></uv-gap>
|
||||
</view>
|
||||
<uv-gap height="50"></uv-gap>
|
||||
|
||||
<view class="booking-tel" @click="openBookingTel">活动订场</view>
|
||||
<!-- 活动订场弹窗 -->
|
||||
<uni-popup ref="popup" type="center">
|
||||
<view class="popup-booking-tel">
|
||||
<text class="title">场馆热线</text>
|
||||
<text class="desc">主体育场、足球训练场：0771-4953380</text>
|
||||
<text class="desc">体育馆、综合训练馆、网球馆：0771-4953380</text>
|
||||
<text class="desc">游泳跳水馆：0771-4736008</text>
|
||||
<view class="booking-tel" @click="openBookingTel">活动订场</view>
|
||||
<!-- 活动订场弹窗 -->
|
||||
<uni-popup ref="popup" type="center">
|
||||
<view class="popup-booking-tel">
|
||||
<text class="title">场馆热线</text>
|
||||
<text class="desc">主体育场、足球训练场：0771-4953380</text>
|
||||
<text class="desc">体育馆、综合训练馆、网球馆：0771-4953380</text>
|
||||
<text class="desc">游泳跳水馆：0771-4736008</text>
|
||||
|
||||
<text class="title">参观接待</text>
|
||||
<text class="desc">预约电话：0771-4736955</text>
|
||||
<text class="desc">传真号码：0771-4736955</text>
|
||||
<text class="title">参观接待</text>
|
||||
<text class="desc">预约电话：0771-4736955</text>
|
||||
<text class="desc">传真号码：0771-4736955</text>
|
||||
|
||||
<text class="title">大型活动订场</text>
|
||||
<text class="desc">预约电话：0771-4736970、0771-4736994</text>
|
||||
<text class="title">大型活动订场</text>
|
||||
<text class="desc">预约电话：0771-4736970、0771-4736994</text>
|
||||
|
||||
<text class="title">威拓普健身馆</text>
|
||||
<text class="desc">联系电话：0771-5588699</text>
|
||||
</view>
|
||||
<view class="web-cell popup-close" @click="closeBookingTel">
|
||||
<uv-icon name="close-circle" color="#ffffff" size="30"></uv-icon>
|
||||
</view>
|
||||
</uni-popup>
|
||||
<!-- 登录组件 -->
|
||||
<ws-login ref="login" :logo="logo" @done="reload" />
|
||||
<text class="title">威拓普健身馆</text>
|
||||
<text class="desc">联系电话：0771-5588699</text>
|
||||
</view>
|
||||
<view class="web-cell popup-close" @click="closeBookingTel">
|
||||
<uv-icon name="close-circle" color="#ffffff" size="30"></uv-icon>
|
||||
</view>
|
||||
</uni-popup>
|
||||
<!-- 登录组件 -->
|
||||
<ws-login ref="login" :logo="logo" @done="reload"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
storeToRefs
|
||||
} from 'pinia';
|
||||
import * as MerchantApi from '@/api/shop/merchant';
|
||||
import {
|
||||
useCarStore
|
||||
} from '@/store/modules/car';
|
||||
const carStore = useCarStore();
|
||||
import {
|
||||
useCarStore
|
||||
} from '@/store/modules/car';
|
||||
import {getThinkSite, getThinkSiteWithDistance} from "@/api/think/thinkSite";
|
||||
import {getLocationAction} from "@/utils";
|
||||
import request from "@/utils/request";
|
||||
import X2js from 'x2js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
id: 0,
|
||||
// 场馆信息
|
||||
merchant: {},
|
||||
// 场馆相册
|
||||
photo: [],
|
||||
isLogin: false,
|
||||
disabled: true
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
this.id = option.id
|
||||
carStore.merchantId = option.id
|
||||
this.reload();
|
||||
},
|
||||
onShow() {
|
||||
// 登录状态
|
||||
if (uni.getStorageSync('user_id') && uni.getStorageSync('access_token')) {
|
||||
this.isLogin = true;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async reload() {
|
||||
const app = this
|
||||
const carStore = useCarStore();
|
||||
|
||||
// 请求数据
|
||||
Promise.all([app.getMerchant()]).then(res => {
|
||||
const merchant = res[0];
|
||||
app.merchant = merchant;
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
id: 0,
|
||||
// 场馆信息
|
||||
merchant: {},
|
||||
// 场馆相册
|
||||
photo: [],
|
||||
isLogin: false,
|
||||
disabled: true,
|
||||
lat: null,
|
||||
lng: null,
|
||||
}
|
||||
},
|
||||
async onLoad(option) {
|
||||
this.id = option.id
|
||||
carStore.merchantId = option.id
|
||||
const {longitude, latitude} = await getLocationAction()
|
||||
this.lat = latitude
|
||||
this.lng = longitude
|
||||
await this.reload();
|
||||
},
|
||||
onShow() {
|
||||
// 登录状态
|
||||
if (uni.getStorageSync('user_id') && uni.getStorageSync('access_token')) {
|
||||
this.isLogin = true;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async reload() {
|
||||
const app = this
|
||||
|
||||
// 修改标题
|
||||
uni.setNavigationBarTitle({
|
||||
title: merchant.merchantName
|
||||
})
|
||||
// 加载场馆相册
|
||||
if (merchant.files) {
|
||||
app.photo = JSON.parse(merchant.files)
|
||||
}
|
||||
// 更新购物车状态
|
||||
carStore.setMerchant(merchant)
|
||||
carStore.merchantId = merchant.merchantId
|
||||
carStore.merchantName = merchant.merchantName
|
||||
carStore.merchantCode = merchant.merchantCode
|
||||
})
|
||||
},
|
||||
getMerchant() {
|
||||
return new Promise((resolve, reject) => {
|
||||
MerchantApi.getMerchant(this.id).then(result => {
|
||||
resolve(result)
|
||||
}).catch(reject)
|
||||
})
|
||||
},
|
||||
onDisabled() {
|
||||
this.disabled = !this.disabled;
|
||||
},
|
||||
navTo(url) {
|
||||
uni.navigateTo({
|
||||
url
|
||||
})
|
||||
},
|
||||
mapTo(item){
|
||||
console.log('item: ',item.lngAndLat);
|
||||
const arr = item.lngAndLat.split(',');
|
||||
console.log('arr: ',arr);
|
||||
uni.openLocation({
|
||||
latitude: parseFloat(arr[1]),
|
||||
longitude: parseFloat(arr[0]),
|
||||
success: function () {
|
||||
console.log('success');
|
||||
}
|
||||
});
|
||||
},
|
||||
openBookingTel() {
|
||||
// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
|
||||
this.$refs.popup.open('center')
|
||||
},
|
||||
closeBookingTel() {
|
||||
this.$refs.popup.close()
|
||||
},
|
||||
callPhone(phone) {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: phone
|
||||
});
|
||||
},
|
||||
onMap() {
|
||||
uni.getLocation({
|
||||
type: 'gcj02', //返回可以用于uni.openLocation的经纬度
|
||||
success: function(res) {
|
||||
console.log('返回可以用于uni.openLocation的经纬度: ', res);
|
||||
const latitude = this.merchant.latitude;
|
||||
const longitude = this.merchant.longitude;
|
||||
uni.openLocation({
|
||||
latitude: latitude,
|
||||
longitude: longitude,
|
||||
success: function() {
|
||||
console.log('success');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
save() {
|
||||
if (!this.disabled) {
|
||||
uni.showToast({
|
||||
title: '请先阅读并同意订票协议',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: '/package/booking/checkout?id=' + this.id
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
// 请求数据
|
||||
Promise.all([app.getMerchant()]).then(res => {
|
||||
const merchant = res[0];
|
||||
app.merchant = merchant;
|
||||
this.merchant.distance = 0
|
||||
this.merchant.minute = 0
|
||||
|
||||
// 修改标题
|
||||
// uni.setNavigationBarTitle({
|
||||
// title: merchant.merchantName
|
||||
// })
|
||||
// 加载场馆相册
|
||||
// if (merchant.files) {
|
||||
// app.photo = JSON.parse(merchant.files)
|
||||
// }
|
||||
app.photo = [merchant.thumb]
|
||||
// 更新购物车状态
|
||||
carStore.setMerchant(merchant)
|
||||
carStore.merchantId = merchant.merchantId
|
||||
carStore.merchantName = merchant.merchantName
|
||||
carStore.merchantCode = merchant.merchantCode
|
||||
this.getDuration()
|
||||
})
|
||||
},
|
||||
async getDuration() {
|
||||
let url = `http://api.tianditu.gov.cn/drive?postStr={"orig":"${this.lng},${this.lat}","dest":"${this.merchant.lng},${this.merchant.lat}","style":"0"}&type=search&tk=71f234f251d4cb1feeb3c293a0f21709`
|
||||
const res = await request.get(url)
|
||||
const x2js = new X2js();
|
||||
const {result} = x2js.xml2js(res.data)
|
||||
this.merchant.distance = result.distance
|
||||
this.merchant.duration = (parseInt(result.duration) / 60).toFixed(1)
|
||||
},
|
||||
getMerchant() {
|
||||
return new Promise((resolve, reject) => {
|
||||
getThinkSite(this.id).then(result => {
|
||||
resolve(result)
|
||||
}).catch(reject)
|
||||
})
|
||||
},
|
||||
onDisabled() {
|
||||
this.disabled = !this.disabled;
|
||||
},
|
||||
navTo(url) {
|
||||
uni.navigateTo({
|
||||
url
|
||||
})
|
||||
},
|
||||
mapTo(item) {
|
||||
uni.openLocation({
|
||||
latitude: parseFloat(item.lat),
|
||||
longitude: parseFloat(item.lng),
|
||||
success: function () {
|
||||
console.log('success');
|
||||
}
|
||||
});
|
||||
},
|
||||
openBookingTel() {
|
||||
// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
|
||||
this.$refs.popup.open('center')
|
||||
},
|
||||
closeBookingTel() {
|
||||
this.$refs.popup.close()
|
||||
},
|
||||
callPhone(phone) {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: phone
|
||||
});
|
||||
},
|
||||
onMap() {
|
||||
uni.getLocation({
|
||||
type: 'gcj02', //返回可以用于uni.openLocation的经纬度
|
||||
success: function (res) {
|
||||
console.log('返回可以用于uni.openLocation的经纬度: ', res);
|
||||
const latitude = this.merchant.lat;
|
||||
const longitude = this.merchant.lng;
|
||||
uni.openLocation({
|
||||
latitude: latitude,
|
||||
longitude: longitude,
|
||||
success: function () {
|
||||
console.log('success');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
save() {
|
||||
if (!this.disabled) {
|
||||
uni.showToast({
|
||||
title: '请先阅读并同意订票协议',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: '/package/booking/checkout?id=' + this.id
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
page {
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-color: #f0f2f5;
|
||||
width: 750rpx;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
page {
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-color: #f0f2f5;
|
||||
width: 750rpx;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.container {}
|
||||
.container {
|
||||
}
|
||||
|
||||
.merchant-name {
|
||||
padding: 30rpx;
|
||||
font-weight: 500;
|
||||
font-size: 42rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.merchant-name {
|
||||
padding: 30rpx;
|
||||
font-weight: 500;
|
||||
font-size: 42rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
width: 700rpx;
|
||||
left: 25rpx;
|
||||
height: 80rpx;
|
||||
position: fixed;
|
||||
bottom: 30rpx;
|
||||
}
|
||||
.save-btn {
|
||||
width: 700rpx;
|
||||
left: 25rpx;
|
||||
height: 80rpx;
|
||||
position: fixed;
|
||||
bottom: 30rpx;
|
||||
}
|
||||
|
||||
.booking-tel {
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
top: 270px;
|
||||
right: 0;
|
||||
width: 80px;
|
||||
height: 38px;
|
||||
border-radius: 50px 0 0 50px;
|
||||
background: linear-gradient(to right, #ccff66, #008e04);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
font-size: 13px;
|
||||
}
|
||||
.booking-tel {
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
top: 270px;
|
||||
right: 0;
|
||||
width: 80px;
|
||||
height: 38px;
|
||||
border-radius: 50px 0 0 50px;
|
||||
background: linear-gradient(to right, #ccff66, #008e04);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.popup-booking-tel {
|
||||
background-color: #ffffff;
|
||||
width: 560rpx;
|
||||
min-height: 400rpx;
|
||||
border-radius: 20rpx;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.popup-booking-tel {
|
||||
background-color: #ffffff;
|
||||
width: 560rpx;
|
||||
min-height: 400rpx;
|
||||
border-radius: 20rpx;
|
||||
margin: auto;
|
||||
padding: 20px;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
font-size: 38rpx;
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.title {
|
||||
font-weight: bold;
|
||||
font-size: 38rpx;
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.desc {
|
||||
line-height: 2rem;
|
||||
}
|
||||
}
|
||||
.desc {
|
||||
line-height: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-close {
|
||||
display: flex;
|
||||
margin-top: 24rpx;
|
||||
justify-content: center;
|
||||
}
|
||||
.booking-content{
|
||||
padding: 10px;
|
||||
font-size: 30rpx;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
.xieyi {
|
||||
margin-bottom: 80rpx;
|
||||
padding: 0 30rpx;
|
||||
.popup-close {
|
||||
display: flex;
|
||||
margin-top: 24rpx;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-left: 5rpx;
|
||||
.booking-content {
|
||||
padding: 10px;
|
||||
font-size: 30rpx;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: #0f80ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.xieyi {
|
||||
margin-bottom: 80rpx;
|
||||
padding: 0 30rpx;
|
||||
|
||||
.text {
|
||||
margin-left: 5rpx;
|
||||
|
||||
.link {
|
||||
color: #0f80ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user