leiking
342 lines
8.3 KiB
Vue
342 lines
8.3 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="card hero" @tap="goStore">
|
||
<view class="row between">
|
||
<view>
|
||
<view class="trow">
|
||
<image v-if="store.logo" class="logo" :src="store.logo" mode="aspectFill" />
|
||
<view class="title">{{ store.name }}</view>
|
||
</view>
|
||
<view class="sub muted">{{ store.openHours }} · {{ store.address }}</view>
|
||
</view>
|
||
<view class="pill" @tap.stop="callStore">
|
||
<text class="p-t">电话</text>
|
||
</view>
|
||
</view>
|
||
<view class="locrow row between">
|
||
<view class="loc muted">{{ locText }} · {{ distText }}</view>
|
||
<view class="nav" @tap.stop="navToStore">导航</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="card banner">
|
||
<swiper class="sw" circular autoplay interval="3500" duration="500">
|
||
<swiper-item>
|
||
<view class="b b1">
|
||
<view class="b-t">新客体验</view>
|
||
<view class="b-s">水氧净透 ¥99</view>
|
||
</view>
|
||
</swiper-item>
|
||
<swiper-item>
|
||
<view class="b b2">
|
||
<view class="b-t">皮肤管理</view>
|
||
<view class="b-s">补水修护 ¥238</view>
|
||
</view>
|
||
</swiper-item>
|
||
<swiper-item>
|
||
<view class="b b3">
|
||
<view class="b-t">次卡特惠</view>
|
||
<view class="b-s">5 次 ¥899</view>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
|
||
<view class="grid4">
|
||
<view class="card q" @tap="goBooking">
|
||
<view class="q-t">立即预约</view>
|
||
<view class="q-s muted">选时间/技师</view>
|
||
</view>
|
||
<view class="card q" @tap="goProjects">
|
||
<view class="q-t">全部项目</view>
|
||
<view class="q-s muted">价格/时长</view>
|
||
</view>
|
||
<view class="card q" @tap="goCoupons">
|
||
<view class="q-t">我的次卡</view>
|
||
<view class="q-s muted">剩余次数</view>
|
||
</view>
|
||
<view class="card q" @tap="goMember">
|
||
<view class="q-t">会员中心</view>
|
||
<view class="q-s muted">积分/储值</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="section row between">
|
||
<view class="h">人气推荐项目</view>
|
||
<view class="more" @tap="goProjects">全部</view>
|
||
</view>
|
||
|
||
<view class="grid2">
|
||
<ProjectGridCard v-for="p in hotProjects" :key="p.id" :project="p" />
|
||
</view>
|
||
|
||
<view class="card store">
|
||
<view class="row between">
|
||
<view class="sh">门店信息</view>
|
||
<view class="more" @tap="goStore">查看</view>
|
||
</view>
|
||
<view class="muted sline">营业时间：{{ store.openHours }}｜休息：{{ store.restDay }}</view>
|
||
<view class="muted sline">地址：{{ store.address }}</view>
|
||
<view class="muted sline">电话：{{ store.phone }}</view>
|
||
<view class="row between sline">
|
||
<view class="muted">技师团队：点击查看</view>
|
||
<view class="rt">
|
||
<view class="star">★ {{ teamRating }}</view>
|
||
<view class="like" @tap.stop="likeTeam">赞 {{ likeCount }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<AiFloat />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import AiFloat from '@/components/AiFloat.vue'
|
||
import ProjectGridCard from '@/components/ProjectGridCard.vue'
|
||
import { storeProfile, projects } from '@/common/mockData'
|
||
|
||
export default {
|
||
components: { AiFloat, ProjectGridCard },
|
||
data() {
|
||
return {
|
||
store: storeProfile,
|
||
hotProjects: projects.slice(0, 4),
|
||
locText: '定位：获取中…',
|
||
distText: '距离：计算中…',
|
||
teamRating: 4.9,
|
||
likeCount: 128
|
||
}
|
||
},
|
||
onShow() {
|
||
this.locText = '定位：获取中…'
|
||
this.distText = '距离：计算中…'
|
||
uni.getLocation({
|
||
type: 'gcj02',
|
||
success: (res) => {
|
||
this.locText = '定位：上海市 静安区（示例）'
|
||
const d = this.calcDistanceMeter(res.latitude, res.longitude, this.store.latitude, this.store.longitude)
|
||
this.distText = `距离：${this.formatDistance(d)}`
|
||
},
|
||
fail: () => {
|
||
this.locText = '定位：未开启（可在“我的”页授权定位）'
|
||
this.distText = '距离：--'
|
||
}
|
||
})
|
||
},
|
||
methods: {
|
||
goProjects() {
|
||
uni.switchTab({ url: '/pages/projects/list' })
|
||
},
|
||
goBooking() {
|
||
const p = Array.isArray(projects) && projects.length ? projects[0] : null
|
||
if (!p) {
|
||
this.goProjects()
|
||
return
|
||
}
|
||
uni.navigateTo({ url: `/pages/booking/create?projectId=${p.id}` })
|
||
},
|
||
goCoupons() {
|
||
uni.navigateTo({ url: '/pages/coupons/list' })
|
||
},
|
||
goMember() {
|
||
uni.switchTab({ url: '/pages/member/index' })
|
||
},
|
||
goStore() {
|
||
uni.navigateTo({ url: '/pages/store/detail' })
|
||
},
|
||
callStore() {
|
||
uni.makePhoneCall({ phoneNumber: this.store.phone })
|
||
},
|
||
navToStore() {
|
||
const lat = this.store.latitude
|
||
const lng = this.store.longitude
|
||
if (typeof lat !== 'number' || typeof lng !== 'number') {
|
||
uni.showToast({ title: '门店坐标未配置', icon: 'none' })
|
||
return
|
||
}
|
||
uni.openLocation({
|
||
latitude: lat,
|
||
longitude: lng,
|
||
name: this.store.name,
|
||
address: this.store.address
|
||
})
|
||
},
|
||
calcDistanceMeter(lat1, lng1, lat2, lng2) {
|
||
if ([lat1, lng1, lat2, lng2].some((x) => typeof x !== 'number')) return NaN
|
||
const toRad = (v) => (v * Math.PI) / 180
|
||
const R = 6371000
|
||
const dLat = toRad(lat2 - lat1)
|
||
const dLng = toRad(lng2 - lng1)
|
||
const a =
|
||
Math.sin(dLat / 2) * Math.sin(dLat / 2) +
|
||
Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.sin(dLng / 2) * Math.sin(dLng / 2)
|
||
return 2 * R * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
|
||
},
|
||
formatDistance(m) {
|
||
if (!Number.isFinite(m)) return '--'
|
||
if (m < 1000) return `${Math.max(1, Math.round(m))}m`
|
||
const km = m / 1000
|
||
if (km < 10) return `${km.toFixed(1)}km`
|
||
return `${Math.round(km)}km`
|
||
},
|
||
likeTeam() {
|
||
this.likeCount += 1
|
||
uni.showToast({ title: '已点赞', icon: 'none' })
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.hero {
|
||
padding: 26rpx;
|
||
}
|
||
.trow {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14rpx;
|
||
}
|
||
.logo {
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
border-radius: 16rpx;
|
||
}
|
||
.title {
|
||
font-size: 40rpx;
|
||
font-weight: 950;
|
||
}
|
||
.sub {
|
||
margin-top: 8rpx;
|
||
font-size: 26rpx;
|
||
}
|
||
.loc {
|
||
font-size: 24rpx;
|
||
}
|
||
.locrow {
|
||
margin-top: 14rpx;
|
||
}
|
||
.nav {
|
||
padding: 12rpx 16rpx;
|
||
border-radius: 999rpx;
|
||
background: rgba(59, 130, 246, 0.14);
|
||
color: #1d4ed8;
|
||
font-size: 24rpx;
|
||
font-weight: 900;
|
||
}
|
||
.pill {
|
||
padding: 14rpx 18rpx;
|
||
border-radius: 999rpx;
|
||
background: rgba(17, 24, 39, 0.06);
|
||
}
|
||
.p-t {
|
||
font-weight: 700;
|
||
font-size: 26rpx;
|
||
}
|
||
.banner {
|
||
margin-top: 18rpx;
|
||
padding: 0;
|
||
overflow: hidden;
|
||
}
|
||
.sw {
|
||
height: 220rpx;
|
||
}
|
||
.b {
|
||
height: 220rpx;
|
||
padding: 26rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-end;
|
||
}
|
||
.b1 {
|
||
background: linear-gradient(135deg, rgba(17, 24, 39, 1) 0%, rgba(59, 130, 246, 1) 100%);
|
||
}
|
||
.b2 {
|
||
background: linear-gradient(135deg, rgba(3, 105, 161, 1) 0%, rgba(16, 185, 129, 1) 100%);
|
||
}
|
||
.b3 {
|
||
background: linear-gradient(135deg, rgba(124, 58, 237, 1) 0%, rgba(59, 130, 246, 1) 100%);
|
||
}
|
||
.b-t {
|
||
color: #fff;
|
||
font-weight: 950;
|
||
font-size: 42rpx;
|
||
}
|
||
.b-s {
|
||
margin-top: 10rpx;
|
||
color: rgba(255, 255, 255, 0.84);
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
}
|
||
.grid4 {
|
||
margin-top: 18rpx;
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 18rpx;
|
||
}
|
||
.q {
|
||
padding: 18rpx;
|
||
}
|
||
.q-t {
|
||
font-weight: 950;
|
||
font-size: 30rpx;
|
||
}
|
||
.q-s {
|
||
margin-top: 8rpx;
|
||
font-size: 24rpx;
|
||
}
|
||
.section {
|
||
margin-top: 28rpx;
|
||
padding: 6rpx 2rpx;
|
||
}
|
||
.h {
|
||
font-size: 32rpx;
|
||
font-weight: 950;
|
||
}
|
||
.more {
|
||
color: #3b82f6;
|
||
font-weight: 700;
|
||
font-size: 28rpx;
|
||
}
|
||
.grid2 {
|
||
margin-top: 14rpx;
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 18rpx;
|
||
}
|
||
.store {
|
||
margin-top: 18rpx;
|
||
padding: 22rpx;
|
||
}
|
||
.rt {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14rpx;
|
||
}
|
||
.star {
|
||
padding: 10rpx 14rpx;
|
||
border-radius: 999rpx;
|
||
font-size: 24rpx;
|
||
font-weight: 900;
|
||
background: rgba(245, 158, 11, 0.14);
|
||
color: #b45309;
|
||
}
|
||
.like {
|
||
padding: 10rpx 14rpx;
|
||
border-radius: 999rpx;
|
||
font-size: 24rpx;
|
||
font-weight: 900;
|
||
background: rgba(17, 24, 39, 0.06);
|
||
color: rgba(17, 24, 39, 0.86);
|
||
}
|
||
.sh {
|
||
font-size: 32rpx;
|
||
font-weight: 950;
|
||
}
|
||
.sline {
|
||
margin-top: 12rpx;
|
||
font-size: 26rpx;
|
||
}
|
||
</style>
|
||
|